@aurelia-mdc-web/list
Version:
Wrapper for Material Components Web List
130 lines • 4.63 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { inject, useView, customElement, processContent } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';
import { cssClasses, strings } from '@material/list';
import { bindable } from 'aurelia-typed-observable-plugin';
let listItemId = 0;
const ENTER = 13;
const SPACE = 32;
const LIST_ITEM_ACTION = 'mdclistitem:action';
/**
* @selector mdc-list-item
*/
let MdcListItem = class MdcListItem {
constructor(root) {
this.root = root;
this.cssClasses = cssClasses;
this.id = ++listItemId;
}
static processContent(_viewCompiler, _resources, element) {
const leading = element.querySelector('[mdc-list-item-leading]');
if (leading) {
element.removeChild(leading);
}
const trailing = element.querySelector('[mdc-list-item-trailing]');
if (trailing) {
element.removeChild(trailing);
}
const content = document.createElement('span');
content.classList.add('mdc-list-item__content');
const texts = element.querySelectorAll('mdc-list-item-overline-text, mdc-list-item-primary-text, mdc-list-item-secondary-text, template');
const children = Array.from(element.childNodes);
if (!texts.length) {
const primary = document.createElement('span');
primary.classList.add('mdc-list-item__primary-text');
for (let i = 0; i < children.length; ++i) {
primary.appendChild(children[i]);
}
content.appendChild(primary);
}
else {
for (let i = 0; i < children.length; ++i) {
content.appendChild(children[i]);
}
}
if (leading) {
const start = document.createElement('span');
start.classList.add('mdc-list-item__start');
start.appendChild(leading);
element.appendChild(start);
}
element.appendChild(content);
if (trailing) {
const end = document.createElement('span');
end.classList.add('mdc-list-item__end');
end.appendChild(trailing);
element.appendChild(end);
}
return true;
}
hrefChanged() {
if (this.href) {
this.root.setAttribute('href', this.href);
}
else {
this.root.removeAttribute('href');
}
}
attached() {
// Child button/a elements are not tabbable until the list item is focused.
Array.from(this.root.querySelectorAll(strings.FOCUSABLE_CHILD_ELEMENTS))
.forEach(el => el.setAttribute('tabindex', '-1'));
}
onKeydown(evt) {
if ((evt.keyCode === ENTER || evt.keyCode === SPACE) && !this.disabled) {
this.root.dispatchEvent(new CustomEvent(LIST_ITEM_ACTION, { detail: { item: this, data: this.value }, bubbles: true }));
}
return true;
}
onClick() {
if (!this.disabled) {
this.root.dispatchEvent(new CustomEvent(LIST_ITEM_ACTION, { detail: { item: this, data: this.value }, bubbles: true }));
}
return true;
}
};
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcListItem.prototype, "disabled", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcListItem.prototype, "activated", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcListItem.prototype, "selected", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcListItem.prototype, "nonInteractive", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcListItem.prototype, "twoLine", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcListItem.prototype, "threeLine", void 0);
__decorate([
bindable.none,
__metadata("design:type", Object)
], MdcListItem.prototype, "value", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcListItem.prototype, "disableRipple", void 0);
__decorate([
bindable.none,
__metadata("design:type", String)
], MdcListItem.prototype, "href", void 0);
MdcListItem = __decorate([
inject(Element),
useView(PLATFORM.moduleName('./mdc-list-item.html')),
customElement(cssClasses.LIST_ITEM_CLASS),
processContent(MdcListItem.processContent),
__metadata("design:paramtypes", [HTMLElement])
], MdcListItem);
export { MdcListItem };
//# sourceMappingURL=mdc-list-item.js.map