@aurelia-mdc-web/list
Version:
Wrapper for Material Components Web List
131 lines • 6.2 kB
JavaScript
define(["require", "exports", "tslib", "aurelia-framework", "aurelia-pal", "@material/list", "aurelia-typed-observable-plugin"], function (require, exports, tslib_1, aurelia_framework_1, aurelia_pal_1, list_1, aurelia_typed_observable_plugin_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MdcListItem = void 0;
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 = list_1.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(list_1.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;
};
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcListItem.prototype, "disabled", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcListItem.prototype, "activated", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcListItem.prototype, "selected", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcListItem.prototype, "nonInteractive", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcListItem.prototype, "twoLine", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcListItem.prototype, "threeLine", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.none,
tslib_1.__metadata("design:type", Object)
], MdcListItem.prototype, "value", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcListItem.prototype, "disableRipple", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.none,
tslib_1.__metadata("design:type", String)
], MdcListItem.prototype, "href", void 0);
MdcListItem = tslib_1.__decorate([
(0, aurelia_framework_1.inject)(Element),
(0, aurelia_framework_1.useView)(aurelia_pal_1.PLATFORM.moduleName('./mdc-list-item.html')),
(0, aurelia_framework_1.customElement)(list_1.cssClasses.LIST_ITEM_CLASS),
(0, aurelia_framework_1.processContent)(MdcListItem.processContent),
tslib_1.__metadata("design:paramtypes", [HTMLElement])
], MdcListItem);
return MdcListItem;
}());
exports.MdcListItem = MdcListItem;
});
//# sourceMappingURL=mdc-list-item.js.map