@aurelia-mdc-web/list
Version:
Wrapper for Material Components Web List
334 lines • 15.1 kB
JavaScript
import { __awaiter, __decorate, __extends, __generator, __metadata, __read, __spreadArray } from "tslib";
import { MdcComponent } from '@aurelia-mdc-web/base';
import { MDCListFoundation, strings, cssClasses } from '@material/list';
import { inject, useView, customElement, children } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';
import { closest, matches } from '@material/dom/ponyfill';
import { bindable } from 'aurelia-typed-observable-plugin';
strings.ACTION_EVENT = strings.ACTION_EVENT.toLowerCase();
strings.SELECTION_CHANGE_EVENT = strings.SELECTION_CHANGE_EVENT.toLowerCase();
export var 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 MdcList = /** @class */ (function (_super) {
__extends(MdcList, _super);
function MdcList() {
var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
_this.cssClasses = cssClasses;
return _this;
}
MdcList.prototype.singleSelectionChanged = function () {
return __awaiter(this, void 0, void 0, function () {
var _a;
return __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*/];
}
});
});
};
MdcList.prototype.activatedChanged = function () {
return __awaiter(this, void 0, void 0, function () {
var _a;
return __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*/];
}
});
});
};
MdcList.prototype.itemsChanged = function () {
var _a;
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.layout();
this.emit(mdcListStrings.ITEMS_CHANGED, { items: this.items }, true);
};
MdcList.prototype.typeaheadChanged = function (hasTypeahead) {
return __awaiter(this, void 0, void 0, function () {
var _a;
return __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*/];
}
});
});
};
MdcList.prototype.wrapFocusChanged = function () {
return __awaiter(this, void 0, void 0, function () {
var _a;
return __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*/];
}
});
});
};
MdcList.prototype.initialSyncWithDOM = function () {
this.layout();
this.initializeListType();
};
Object.defineProperty(MdcList.prototype, "listElements", {
get: function () {
return Array.from(this.root.querySelectorAll(".".concat(cssClasses.LIST_ITEM_CLASS)));
},
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.
*/
MdcList.prototype.getPrimaryText = function (item) {
var _a, _b;
var primaryText = item.querySelector(".".concat(cssClasses.LIST_ITEM_PRIMARY_TEXT_CLASS));
if (primaryText) {
return (_a = primaryText.textContent) !== null && _a !== void 0 ? _a : '';
}
var singleLineText = item.querySelector(".".concat(cssClasses.LIST_ITEM_TEXT_CLASS));
return (_b = singleLineText === null || singleLineText === void 0 ? void 0 : singleLineText.textContent) !== null && _b !== void 0 ? _b : '';
};
MdcList.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(strings.CHECKBOX_SELECTOR);
},
hasRadioAtIndex: function (index) {
var listItem = _this.listElements[index];
return !!listItem.querySelector(strings.RADIO_SELECTOR);
},
isCheckboxCheckedAtIndex: function (index) {
var listItem = _this.listElements[index];
var toggleEl = listItem.querySelector(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(strings.ACTION_EVENT, { index: index, data: data }, /** shouldBubble */ true);
}
},
notifySelectionChange: function (changedIndices) {
_this.emit(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(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(strings.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX));
listItemChildren.forEach(function (el) { return el.setAttribute('tabindex', tabIndexValue); });
},
};
return new MDCListFoundation(adapter);
};
/**
* @hidden
* Used to figure out which list item this event is targetting. Or returns -1 if
* there is no list item
*/
MdcList.prototype.getListItemIndex_ = function (evt) {
var eventTarget = evt.target;
var nearestParent = closest(eventTarget, ".".concat(cssClasses.LIST_ITEM_CLASS, ", .").concat(cssClasses.ROOT));
// Get the index of the element if it is a list item.
if (nearestParent && matches(nearestParent, ".".concat(cssClasses.LIST_ITEM_CLASS))) {
return this.listElements.indexOf(nearestParent);
}
return -1;
};
/**
* @hidden
* Used to figure out which element was clicked before sending the event to the foundation.
*/
MdcList.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.
*/
MdcList.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.
*/
MdcList.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(cssClasses.LIST_ITEM_CLASS), index);
}
return true;
};
/**
* @hidden
* Used to figure out which element was clicked before sending the event to the foundation.
*/
MdcList.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 isCheckboxAlreadyUpdatedInAdapter = matches(target, strings.CHECKBOX_RADIO_SELECTOR);
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.handleClick(index, isCheckboxAlreadyUpdatedInAdapter, evt);
return true;
};
Object.defineProperty(MdcList.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.
*/
MdcList.prototype.typeaheadMatchItem = function (nextChar, startingIndex) {
return this.foundation.typeaheadMatchItem(nextChar, startingIndex, /** skipFocus */ true);
};
MdcList.prototype.layout = function () {
var _a;
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.layout();
};
Object.defineProperty(MdcList.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.
*/
MdcList.prototype.initializeListType = function () {
var _this = this;
var checkboxListItems = this.root.querySelectorAll(strings.ARIA_ROLE_CHECKBOX_SELECTOR);
var radioSelectedListItem = this.root.querySelector(strings.ARIA_CHECKED_RADIO_SELECTOR);
if (checkboxListItems.length) {
var preselectedItems = this.root.querySelectorAll(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);
}
};
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcList.prototype, "singleSelection", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcList.prototype, "activated", void 0);
__decorate([
children('mdc-list-item'),
__metadata("design:type", Array)
], MdcList.prototype, "items", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcList.prototype, "typeahead", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcList.prototype, "wrapFocus", void 0);
MdcList = __decorate([
inject(Element),
useView(PLATFORM.moduleName('./mdc-list.html')),
customElement(cssClasses.ROOT)
], MdcList);
return MdcList;
}(MdcComponent));
export { MdcList };
//# sourceMappingURL=mdc-list.js.map