@aurelia-mdc-web/image-list/dist/es2015/mdc-image-list.js

Wrapper for Material Components Web Image List

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) => {
                var _a, _b;
                p += `${c.media ? `@media (${c.media}) {` : ''}
  #${this.id} {
    column-count: ${c.count};
    column-gap: ${(_a = c.gutterSize) !== null && _a !== void 0 ? _a : 4}px;
  }

  #${this.id} .mdc-image-list__item {
    margin-bottom: ${(_b = c.gutterSize) !== null && _b !== void 0 ? _b : 4}px;
  }
${c.media ? '}' : ''}`;
                return p;
            }, '');
        }
        else {
            this.style.innerHTML = columns.filter(x => x.count).reduce((p, c) => {
                var _a, _b;
                p += `${c.media ? `@media (${c.media}) {` : ''}
  #${this.id} .mdc-image-list__item {
    width: calc(100% / ${c.count} - ${((_a = c.gutterSize) !== null && _a !== void 0 ? _a : 4) + 1 / c.count}px);
    margin: ${(_b = c.gutterSize) !== null && _b !== void 0 ? _b : 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