@cbpds/web-components
Version:
Web components for the CBP Design System.
55 lines (51 loc) • 2.5 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, h, a as Host, g as getElement } from './index-0f6e3adc.js';
import { s as setCSSProps } from './utils-475ba472.js';
const cbpGridCss = "cbp-grid:not([hidden]){display:grid;max-width:100%}";
const CbpGridStyle0 = cbpGridCss;
const CbpGrid = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.display = 'grid';
this.gridTemplateAreas = undefined;
this.gridTemplateColumns = undefined;
this.gridTemplateRows = undefined;
this.gridAutoFlow = undefined;
this.gridAutoColumns = undefined;
this.gridAutoRows = undefined;
this.alignItems = undefined;
this.justifyItems = undefined;
this.alignContent = undefined;
this.justifyContent = undefined;
this.gap = undefined;
this.breakpoint = undefined;
this.sx = {};
}
handleBreakpointChange(mql) {
mql.matches ? this.host.style.setProperty('display', 'block') : this.host.style.setProperty('display', this.display);
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({ 'display': this.display, 'grid-template-areas': this.gridTemplateAreas, 'grid-template-columns': this.gridTemplateColumns, 'grid-template-rows': this.gridTemplateRows, 'grid-auto-flow': this.gridAutoFlow, 'grid-auto-columns': this.gridAutoColumns, 'grid-auto-rows': this.gridAutoRows, 'align-content': this.alignContent, 'justify-content': this.justifyContent, 'align-items': this.alignItems, 'justify-items': this.justifyItems, 'grid-gap': this.gap }, this.sx));
}
componentDidLoad() {
if (this.breakpoint) {
const mediaQueryList = window === null || window === void 0 ? void 0 : window.matchMedia(`(max-width: ${this.breakpoint})`);
if (mediaQueryList) {
mediaQueryList.addEventListener('change', mql => this.handleBreakpointChange(mql));
this.handleBreakpointChange(mediaQueryList);
}
}
}
render() {
return (h(Host, { key: '124f9682096bcac1a5a772f450f6e8e59767bb8e' }, h("slot", { key: '4f06047960bcb9abd97ce1f4e973018893c5d320' })));
}
get host() { return getElement(this); }
};
CbpGrid.style = CbpGridStyle0;
export { CbpGrid as cbp_grid };
//# sourceMappingURL=cbp-grid.entry.js.map