@aurelia-mdc-web/image-list
Version:
Wrapper for Material Components Web Image List
55 lines • 2.63 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { customElement, useView, PLATFORM } from 'aurelia-framework';
import { bindable } from 'aurelia-typed-observable-plugin';
var id = 0;
/**
* @selector mdc-image-list
*/
var MdcImageList = /** @class */ (function () {
function MdcImageList() {
this.id = "mdc-image-list-".concat(++id);
}
MdcImageList.prototype.columnsChanged = function () {
var _this = this;
if (!this.columns) {
return;
}
var columns = typeof this.columns === 'string' ? [{ count: parseInt(this.columns) }] : this.columns;
if (this.masonry) {
this.style.innerHTML = columns.filter(function (x) { return x.count; }).reduce(function (p, c) {
var _a, _b;
p += "".concat(c.media ? "@media (".concat(c.media, ") {") : '', "\n #").concat(_this.id, " {\n column-count: ").concat(c.count, ";\n column-gap: ").concat((_a = c.gutterSize) !== null && _a !== void 0 ? _a : 4, "px;\n }\n\n #").concat(_this.id, " .mdc-image-list__item {\n margin-bottom: ").concat((_b = c.gutterSize) !== null && _b !== void 0 ? _b : 4, "px;\n }\n").concat(c.media ? '}' : '');
return p;
}, '');
}
else {
this.style.innerHTML = columns.filter(function (x) { return x.count; }).reduce(function (p, c) {
var _a, _b;
p += "".concat(c.media ? "@media (".concat(c.media, ") {") : '', "\n #").concat(_this.id, " .mdc-image-list__item {\n width: calc(100% / ").concat(c.count, " - ").concat(((_a = c.gutterSize) !== null && _a !== void 0 ? _a : 4) + 1 / c.count, "px);\n margin: ").concat((_b = c.gutterSize) !== null && _b !== void 0 ? _b : 4 / 2, "px;\n }\n").concat(c.media ? '}' : '');
return p;
}, '');
}
};
MdcImageList.prototype.bind = function () {
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);
return MdcImageList;
}());
export { MdcImageList };
//# sourceMappingURL=mdc-image-list.js.map