@cbpds/web-components/dist/esm/cbp-flex.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 cbpFlexCss = ":root{--cbp-flex-linearized-margin:0}cbp-flex:not([hidden]){display:flex}cbp-flex:not([hidden])[display=inline-flex]{display:inline-flex}cbp-flex:not([hidden]).cbp-flex-linearized{display:block !important}cbp-flex:not([hidden]).cbp-flex-linearized>*{margin-block-end:var(--cbp-flex-linearized-margin)}";
const CbpFlexStyle0 = cbpFlexCss;

const CbpFlex = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.display = 'flex';
        this.wrap = undefined;
        this.direction = 'row';
        this.alignItems = 'stretch';
        this.alignContent = 'stretch';
        this.justifyContent = 'flex-start';
        this.gap = undefined;
        this.breakpoint = undefined;
        this.contentBreakpoint = undefined;
        this.sx = {};
    }
    handleBreakpointChange(mql) {
        mql.matches ? this.host.classList.add('cbp-flex-linearized') : this.host.classList.remove('cbp-flex-linearized');
    }
    componentWillLoad() {
        var _a;
        if (typeof this.sx == 'string') {
            this.sx = JSON.parse(this.sx) || {};
        }
        setCSSProps(this.host, Object.assign({ 'display': this.display, 'flex-wrap': this.wrap, 'flex-direction': this.direction, 'align-items': this.alignItems, 'align-content': this.alignContent, 'justify-content': this.justifyContent, 'gap': this.gap, '--cbp-flex-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: 'fdb7a14b3d02594f182eefbeb92d3c50ba8f006f' }, h("slot", { key: 'af9652912b7528de4aa3ccbcb227d1b7b94e7d1e' })));
    }
    get host() { return getElement(this); }
};
CbpFlex.style = CbpFlexStyle0;

export { CbpFlex as cbp_flex };

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