@cbpds/web-components/dist/cjs/cbp-flex.cjs.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-507f2a89.js');
const utils = require('./utils-99c9e716.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) {
        index.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) || {};
        }
        utils.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 (index.h(index.Host, { key: 'c0ec96cb045ca893162f6a96621365f13f81505c' }, index.h("slot", { key: 'f29b9312200bf368a580e4552472d85b2a6bf100' })));
    }
    get host() { return index.getElement(this); }
};
CbpFlex.style = CbpFlexStyle0;

exports.cbp_flex = CbpFlex;

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