@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-0f6e3adc.js';
import { s as setCSSProps } from './utils-475ba472.js';

const cbpFlexCss = "cbp-flex:not([hidden]){display:flex}cbp-flex:not([hidden])[display=inline-flex]{display:inline-flex}";
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.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, 'flex-wrap': this.wrap, 'flex-direction': this.direction, 'align-items': this.alignItems, 'align-content': this.alignContent, 'justify-content': this.justifyContent, '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: 'c0ec96cb045ca893162f6a96621365f13f81505c' }, h("slot", { key: 'f29b9312200bf368a580e4552472d85b2a6bf100' })));
    }
    get host() { return getElement(this); }
};
CbpFlex.style = CbpFlexStyle0;

export { CbpFlex as cbp_flex };

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