@aurelia-mdc-web/image-list
Version:
Wrapper for Material Components Web Image List
65 lines (64 loc) • 2 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { customElement, useView, PLATFORM } from 'aurelia-framework';
import { bindable } from 'aurelia-typed-observable-plugin';
let id = 0;
/**
* @selector mdc-image-list
*/
let MdcImageList = class MdcImageList {
constructor() {
this.id = `mdc-image-list-${++id}`;
}
columnsChanged() {
if (!this.columns) {
return;
}
const columns = typeof this.columns === 'string' ? [{ count: parseInt(this.columns) }] : this.columns;
if (this.masonry) {
this.style.innerHTML = columns.filter(x => x.count).reduce((p, c) => {
p += `${c.media ? `@media (${c.media}) {` : ''}
#${this.id} {
column-count: ${c.count};
column-gap: ${c.gutterSize ?? 4}px;
}
#${this.id} .mdc-image-list__item {
margin-bottom: ${c.gutterSize ?? 4}px;
}
${c.media ? '}' : ''}`;
return p;
}, '');
}
else {
this.style.innerHTML = columns.filter(x => x.count).reduce((p, c) => {
p += `${c.media ? `@media (${c.media}) {` : ''}
#${this.id} .mdc-image-list__item {
width: calc(100% / ${c.count} - ${(c.gutterSize ?? 4) + 1 / c.count}px);
margin: ${c.gutterSize ?? 4 / 2}px;
}
${c.media ? '}' : ''}`;
return p;
}, '');
}
}
bind() {
this.columnsChanged();
}
};
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcImageList.prototype, "masonry", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcImageList.prototype, "textProtection", void 0);
__decorate([
bindable.none,
__metadata("design:type", Object)
], MdcImageList.prototype, "columns", void 0);
MdcImageList = __decorate([
useView(PLATFORM.moduleName('./mdc-image-list.html')),
customElement('mdc-image-list')
], MdcImageList);
export { MdcImageList };
//# sourceMappingURL=mdc-image-list.js.map