@aurelia-mdc-web/layout-grid
Version:
Wrapper for Material Components Web Layout Grid
59 lines • 2.1 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { customElement, useView, PLATFORM, inject } from 'aurelia-framework';
import { bindable } from 'aurelia-typed-observable-plugin';
/**
* @selector mdc-layout-grid
*/
let MdcLayoutGrid = class MdcLayoutGrid {
constructor(root) {
this.root = root;
}
desktopColumnWidthChanged() {
this.root.style.setProperty('--mdc-layout-grid-column-width-desktop', `${this.desktopColumnWidth}px`);
}
tabletColumnWidthChanged() {
this.root.style.setProperty('--mdc-layout-grid-column-width-tablet', `${this.tabletColumnWidth}px`);
}
phoneColumnWidthChanged() {
this.root.style.setProperty('--mdc-layout-grid-column-width-phone', `${this.phoneColumnWidth}px`);
}
columnWidthsChanged() {
[this.phoneColumnWidth, this.tabletColumnWidth, this.desktopColumnWidth] = this.columnWidths.split(' ');
}
};
__decorate([
bindable.none,
__metadata("design:type", String)
], MdcLayoutGrid.prototype, "position", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcLayoutGrid.prototype, "fixedColumnWidth", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcLayoutGrid.prototype, "noPadding", void 0);
__decorate([
bindable.number,
__metadata("design:type", String)
], MdcLayoutGrid.prototype, "desktopColumnWidth", void 0);
__decorate([
bindable.number,
__metadata("design:type", String)
], MdcLayoutGrid.prototype, "tabletColumnWidth", void 0);
__decorate([
bindable.number,
__metadata("design:type", String)
], MdcLayoutGrid.prototype, "phoneColumnWidth", void 0);
__decorate([
bindable.number,
__metadata("design:type", String)
], MdcLayoutGrid.prototype, "columnWidths", void 0);
MdcLayoutGrid = __decorate([
inject(Element),
useView(PLATFORM.moduleName('./mdc-layout-grid.html')),
customElement('mdc-layout-grid'),
__metadata("design:paramtypes", [HTMLElement])
], MdcLayoutGrid);
export { MdcLayoutGrid };
//# sourceMappingURL=mdc-layout-grid.js.map