@aurelia-mdc-web/list
Version:
Wrapper for Material Components Web List
131 lines • 5.01 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';
var listItemId = 0;
var ENTER = 13;
var SPACE = 32;
var LIST_ITEM_ACTION = 'mdclistitem:action';
/**
* @selector mdc-list-item
*/
var MdcListItem = /** @class */ (function () {
function MdcListItem(root) {
this.root = root;
this.cssClasses = cssClasses;
this.id = ++listItemId;
}
MdcListItem.processContent = function (_viewCompiler, _resources, element) {
var leading = element.querySelector('[mdc-list-item-leading]');
if (leading) {
element.removeChild(leading);
}
var trailing = element.querySelector('[mdc-list-item-trailing]');
if (trailing) {
element.removeChild(trailing);
}
var content = document.createElement('span');
content.classList.add('mdc-list-item__content');
var texts = element.querySelectorAll('mdc-list-item-overline-text, mdc-list-item-primary-text, mdc-list-item-secondary-text, template');
var children = Array.from(element.childNodes);
if (!texts.length) {
var primary = document.createElement('span');
primary.classList.add('mdc-list-item__primary-text');
for (var i = 0; i < children.length; ++i) {
primary.appendChild(children[i]);
}
content.appendChild(primary);
}
else {
for (var i = 0; i < children.length; ++i) {
content.appendChild(children[i]);
}
}
if (leading) {
var start = document.createElement('span');
start.classList.add('mdc-list-item__start');
start.appendChild(leading);
element.appendChild(start);
}
element.appendChild(content);
if (trailing) {
var end = document.createElement('span');
end.classList.add('mdc-list-item__end');
end.appendChild(trailing);
element.appendChild(end);
}
return true;
};
MdcListItem.prototype.hrefChanged = function () {
if (this.href) {
this.root.setAttribute('href', this.href);
}
else {
this.root.removeAttribute('href');
}
};
MdcListItem.prototype.attached = function () {
// Child button/a elements are not tabbable until the list item is focused.
Array.from(this.root.querySelectorAll(strings.FOCUSABLE_CHILD_ELEMENTS))
.forEach(function (el) { return el.setAttribute('tabindex', '-1'); });
};
MdcListItem.prototype.onKeydown = function (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;
};
MdcListItem.prototype.onClick = function () {
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);
return MdcListItem;
}());
export { MdcListItem };
//# sourceMappingURL=mdc-list-item.js.map