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

exports.cbp_flex = CbpFlex;

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