@cbpds/web-components/dist/esm/cbp-grid.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import { r as registerInstance, h, a as Host, g as getElement } from './index-6c11fa0c.js';
import { s as setCSSProps } from './utils-475ba472.js';

const cbpGridCss = ":root{--cbp-grid-linearized-margin:0}cbp-grid:not([hidden]){display:grid;max-width:100%}cbp-grid:not([hidden]).cbp-grid-linearized{display:block !important}cbp-grid:not([hidden]).cbp-grid-linearized>*{margin-block-end:var(--cbp-grid-linearized-margin)}";
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.classList.add('cbp-grid-linearized') : this.host.classList.remove('cbp-grid-linearized');
    }
    componentWillLoad() {
        var _a;
        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, '--cbp-grid-linearized-margin': this.gap != undefined ? (_a = this.gap.split(' ')) === null || _a === void 0 ? void 0 : _a[0] : undefined }, 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: 'c788a59a27dca9f0867a297097ceb04029d943f3' }, h("slot", { key: '2ba6d5b5162c3da7e198962d792a2f027a809571' })));
    }
    get host() { return getElement(this); }
};
CbpGrid.style = CbpGridStyle0;

export { CbpGrid as cbp_grid };

//# sourceMappingURL=cbp-grid.entry.js.map