@aurelia-mdc-web/list
Version:
Wrapper for Material Components Web List
378 lines • 20 kB
JavaScript
define(["require", "exports", "tslib", "@aurelia-mdc-web/base", "@material/list", "aurelia-framework", "aurelia-pal", "@material/dom/ponyfill", "aurelia-typed-observable-plugin"], function (require, exports, tslib_1, base_1, list_1, aurelia_framework_1, aurelia_pal_1, ponyfill_1, aurelia_typed_observable_plugin_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MdcDeprecatedList = exports.mdcListStrings = void 0;
list_1.strings.ACTION_EVENT = list_1.strings.ACTION_EVENT.toLowerCase();
exports.mdcListStrings = {
ITEMS_CHANGED: 'mdclist:itemschanged'
};
/**
* @selector mdc-list
* @emits mdclist:action | Indicates that a list item with the specified index has been activated
* @emits mdclist:itemschanged | Indicates that the list of items has changed
*/
var MdcDeprecatedList = /** @class */ (function (_super) {
tslib_1.__extends(MdcDeprecatedList, _super);
function MdcDeprecatedList() {
var _this = _super.apply(this, tslib_1.__spreadArray([], tslib_1.__read(arguments), false)) || this;
/** Sets the list to an orientation causing the keys used for navigation to change. true results in the Up/Down arrow keys being used. If false, the Left/Right arrow keys are used. */
_this.vertical = true;
return _this;
}
MdcDeprecatedList.prototype.singleSelectionChanged = function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, this.initialised];
case 1:
_b.sent();
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.setSingleSelection(this.singleSelection);
return [2 /*return*/];
}
});
});
};
MdcDeprecatedList.prototype.activatedChanged = function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, this.initialised];
case 1:
_b.sent();
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.setUseActivatedClass(this.activated);
return [2 /*return*/];
}
});
});
};
MdcDeprecatedList.prototype.itemsChanged = function () {
var _a;
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.layout();
this.emit(exports.mdcListStrings.ITEMS_CHANGED, { items: this.items }, true);
};
MdcDeprecatedList.prototype.typeaheadChanged = function (hasTypeahead) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, this.initialised];
case 1:
_b.sent();
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.setHasTypeahead(hasTypeahead);
return [2 /*return*/];
}
});
});
};
MdcDeprecatedList.prototype.wrapFocusChanged = function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, this.initialised];
case 1:
_b.sent();
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.setWrapFocus(this.wrapFocus);
return [2 /*return*/];
}
});
});
};
MdcDeprecatedList.prototype.initialSyncWithDOM = function () {
this.layout();
this.initializeListType();
};
Object.defineProperty(MdcDeprecatedList.prototype, "listElements", {
get: function () {
return Array.from(this.root.querySelectorAll('.mdc-deprecated-list-item'));
},
enumerable: false,
configurable: true
});
/**
* Extracts the primary text from a list item.
* @param item The list item element.
* @return The primary text in the element.
*/
MdcDeprecatedList.prototype.getPrimaryText = function (item) {
var _a, _b;
var primaryText = item.querySelector('.mdc-deprecated-list-item__primary-text');
if (primaryText) {
return (_a = primaryText.textContent) !== null && _a !== void 0 ? _a : '';
}
var singleLineText = item.querySelector('.mdc-deprecated-list-item__text');
return (_b = singleLineText === null || singleLineText === void 0 ? void 0 : singleLineText.textContent) !== null && _b !== void 0 ? _b : '';
};
MdcDeprecatedList.prototype.getDefaultFoundation = function () {
var _this = this;
// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
var adapter = {
addClassForElementIndex: function (index, className) {
var element = _this.listElements[index];
if (element) {
element.classList.add(className);
}
},
focusItemAtIndex: function (index) {
var element = _this.listElements[index];
if (element) {
element.focus();
}
},
getAttributeForElementIndex: function (index, attr) { return _this.listElements[index].getAttribute(attr); },
getFocusedElementIndex: function () { return _this.listElements.indexOf(document.activeElement); },
getListItemCount: function () { return _this.listElements.length; },
getPrimaryTextAtIndex: function (index) { return _this.getPrimaryText(_this.listElements[index]); },
hasCheckboxAtIndex: function (index) {
var listItem = _this.listElements[index];
return !!listItem.querySelector(list_1.strings.CHECKBOX_SELECTOR);
},
hasRadioAtIndex: function (index) {
var listItem = _this.listElements[index];
return !!listItem.querySelector(list_1.strings.RADIO_SELECTOR);
},
isCheckboxCheckedAtIndex: function (index) {
var listItem = _this.listElements[index];
var toggleEl = listItem.querySelector(list_1.strings.CHECKBOX_SELECTOR);
return toggleEl.checked;
},
isFocusInsideList: function () {
return _this.root !== document.activeElement && _this.root.contains(document.activeElement);
},
isRootFocused: function () { return document.activeElement === _this.root; },
listItemAtIndexHasClass: function (index, className) { return _this.listElements[index].classList.contains(className); },
notifyAction: function (index) {
var listItem = _this.listElements[index];
if (!listItem.hasAttribute('no-list-action')) {
var data = listItem.au.controller.viewModel.value;
_this.emit(list_1.strings.ACTION_EVENT, { index: index, data: data }, /** shouldBubble */ true);
}
},
notifySelectionChange: function (changedIndices) {
_this.emit(list_1.strings.SELECTION_CHANGE_EVENT, { changedIndices: changedIndices }, /** shouldBubble */ true);
},
removeClassForElementIndex: function (index, className) {
var element = _this.listElements[index];
if (element) {
element.classList.remove(className);
}
},
setAttributeForElementIndex: function (index, attr, value) {
var element = _this.listElements[index];
if (element) {
element.setAttribute(attr, value);
}
},
setCheckedCheckboxOrRadioAtIndex: function (index, isChecked) {
var listItem = _this.listElements[index];
var toggleEl = listItem.querySelector(list_1.strings.CHECKBOX_RADIO_SELECTOR);
if (toggleEl === null || toggleEl === void 0 ? void 0 : toggleEl.disabled) {
return;
}
toggleEl.checked = isChecked;
var event = document.createEvent('Event');
event.initEvent('change', true, true);
toggleEl.dispatchEvent(event);
},
setTabIndexForListItemChildren: function (listItemIndex, tabIndexValue) {
var element = _this.listElements[listItemIndex];
var listItemChildren = [].slice.call(element.querySelectorAll(list_1.strings.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX));
listItemChildren.forEach(function (el) { return el.setAttribute('tabindex', tabIndexValue); });
},
};
return new list_1.MDCListFoundation(adapter);
};
/**
* @hidden
* Used to figure out which list item this event is targetting. Or returns -1 if
* there is no list item
*/
MdcDeprecatedList.prototype.getListItemIndex_ = function (evt) {
var eventTarget = evt.target;
var nearestParent = (0, ponyfill_1.closest)(eventTarget, '.mdc-deprecated-list-item, .mdc-deprecated-list');
// Get the index of the element if it is a list item.
if (nearestParent && (0, ponyfill_1.matches)(nearestParent, '.mdc-deprecated-list-item')) {
return this.listElements.indexOf(nearestParent);
}
return -1;
};
/**
* @hidden
* Used to figure out which element was clicked before sending the event to the foundation.
*/
MdcDeprecatedList.prototype.handleFocusInEvent_ = function (evt) {
var _a;
var index = this.getListItemIndex_(evt);
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.handleFocusIn(index);
};
/**
* @hidden
* Used to figure out which element was clicked before sending the event to the foundation.
*/
MdcDeprecatedList.prototype.handleFocusOutEvent_ = function (evt) {
var _a;
var index = this.getListItemIndex_(evt);
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.handleFocusOut(index);
};
/**
* @hidden
* Used to figure out which element was focused when keydown event occurred before sending the event to the
* foundation.
*/
MdcDeprecatedList.prototype.handleKeydownEvent_ = function (evt) {
var _a;
var index = this.getListItemIndex_(evt);
var target = evt.target;
if (!target.hasAttribute('not-selectable')) {
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.handleKeydown(evt, target.classList.contains('mdc-deprecated-list-item'), index);
}
return true;
};
/**
* @hidden
* Used to figure out which element was clicked before sending the event to the foundation.
*/
MdcDeprecatedList.prototype.handleClickEvent_ = function (evt) {
var _a;
var index = this.getListItemIndex_(evt);
var target = evt.target;
// Toggle the checkbox only if it's not the target of the event, or the checkbox will have 2 change events.
var toggleCheckbox = !(0, ponyfill_1.matches)(target, list_1.strings.CHECKBOX_RADIO_SELECTOR);
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.handleClick(index, toggleCheckbox);
return true;
};
Object.defineProperty(MdcDeprecatedList.prototype, "typeaheadInProgress", {
/**
* @hidden
* @return Whether typeahead is currently matching a user-specified prefix.
*/
get: function () {
return this.foundation.isTypeaheadInProgress();
},
enumerable: false,
configurable: true
});
/**
* @hidden
* Given the next desired character from the user, adds it to the typeahead
* buffer. Then, attempts to find the next option matching the buffer. Wraps
* around if at the end of options.
*
* @param nextChar The next character to add to the prefix buffer.
* @param startingIndex The index from which to start matching. Defaults to
* the currently focused index.
* @return The index of the matched item.
*/
MdcDeprecatedList.prototype.typeaheadMatchItem = function (nextChar, startingIndex) {
return this.foundation.typeaheadMatchItem(nextChar, startingIndex, /** skipFocus */ true);
};
MdcDeprecatedList.prototype.layout = function () {
var _a;
var direction = this.root.getAttribute(list_1.strings.ARIA_ORIENTATION);
this.vertical = direction !== list_1.strings.ARIA_ORIENTATION_HORIZONTAL;
// List items need to have at least tabindex=-1 to be focusable.
[].slice.call(this.root.querySelectorAll('.mdc-deprecated-list-item:not([tabindex])'))
.forEach(function (el) {
el.setAttribute('tabindex', '-1');
});
// Child button/a elements are not tabbable until the list item is focused.
[].slice.call(this.root.querySelectorAll(list_1.strings.FOCUSABLE_CHILD_ELEMENTS))
.forEach(function (el) { return el.setAttribute('tabindex', '-1'); });
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.layout();
};
Object.defineProperty(MdcDeprecatedList.prototype, "selectedIndex", {
get: function () {
return this.foundation.getSelectedIndex();
},
set: function (index) {
var _a;
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.setSelectedIndex(index);
},
enumerable: false,
configurable: true
});
/**
* @hidden
* Initialize selectedIndex value based on pre-selected checkbox list items, single selection or radio.
*/
MdcDeprecatedList.prototype.initializeListType = function () {
var _this = this;
var checkboxListItems = this.root.querySelectorAll(list_1.strings.ARIA_ROLE_CHECKBOX_SELECTOR);
var radioSelectedListItem = this.root.querySelector(list_1.strings.ARIA_CHECKED_RADIO_SELECTOR);
if (checkboxListItems.length) {
var preselectedItems = this.root.querySelectorAll(list_1.strings.ARIA_CHECKED_CHECKBOX_SELECTOR);
this.selectedIndex = [].map.call(preselectedItems, function (listItem) { return _this.listElements.indexOf(listItem); });
}
else if (radioSelectedListItem) {
this.selectedIndex = this.listElements.indexOf(radioSelectedListItem);
}
};
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcDeprecatedList.prototype, "twoLine", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcDeprecatedList.prototype, "singleSelection", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcDeprecatedList.prototype, "activated", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcDeprecatedList.prototype, "vertical", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcDeprecatedList.prototype, "dense", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcDeprecatedList.prototype, "textual", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcDeprecatedList.prototype, "avatar", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcDeprecatedList.prototype, "icon", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcDeprecatedList.prototype, "image", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcDeprecatedList.prototype, "thumbnail", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcDeprecatedList.prototype, "video", void 0);
tslib_1.__decorate([
(0, aurelia_framework_1.children)('mdc-deprecated-list-item'),
tslib_1.__metadata("design:type", Array)
], MdcDeprecatedList.prototype, "items", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcDeprecatedList.prototype, "typeahead", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcDeprecatedList.prototype, "wrapFocus", void 0);
MdcDeprecatedList = tslib_1.__decorate([
(0, aurelia_framework_1.inject)(Element),
(0, aurelia_framework_1.useView)(aurelia_pal_1.PLATFORM.moduleName('./mdc-deprecated-list.html')),
(0, aurelia_framework_1.customElement)('mdc-deprecated-list')
], MdcDeprecatedList);
return MdcDeprecatedList;
}(base_1.MdcComponent));
exports.MdcDeprecatedList = MdcDeprecatedList;
});
//# sourceMappingURL=mdc-deprecated-list.js.map