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

Web components for the CBP Design System.

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

const cbpHideCss = "cbp-hide[hide]{display:none !important}cbp-hide.cbp-visually-hidden,cbp-hide[visually-hide]{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;margin:-1px;padding:0;position:absolute;width:1px;white-space:nowrap}";
const CbpHideStyle0 = cbpHideCss;

const CbpHide = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.hideToggle = createEvent(this, "hideToggle", 7);
        this.hidden = false;
        this.display = 'inline';
        this.hide = undefined;
        this.visuallyHide = undefined;
        this.hideAt = undefined;
        this.visuallyHideAt = undefined;
        this.sx = {};
    }
    doHideAt(mql) {
        if (mql.matches) {
            this.host.style.setProperty('display', 'none');
            this.hidden = true;
        }
        else {
            this.host.style.setProperty('display', this.display);
            this.hidden = false;
        }
        this.hideToggle.emit({
            host: this.host,
            hidden: this.hidden,
            mq: mql
        });
    }
    doVisuallyHideAt(mql) {
        if (mql.matches) {
            this.host.classList.add('cbp-visually-hidden');
            this.hidden = true;
        }
        else {
            this.host.classList.remove('cbp-visually-hidden');
            this.hidden = false;
        }
        this.hideToggle.emit({
            host: this.host,
            hidden: this.hidden,
            mq: mql
        });
    }
    componentWillLoad() {
        if (typeof this.sx == 'string') {
            this.sx = JSON.parse(this.sx) || {};
        }
        setCSSProps(this.host, Object.assign({ 'display': this.display }, this.sx));
    }
    componentDidLoad() {
        if (this.hideAt) {
            const hideAtMQ = window === null || window === void 0 ? void 0 : window.matchMedia(`(${this.hideAt})`);
            if (hideAtMQ) {
                hideAtMQ.addEventListener('change', mql => this.doHideAt(mql));
                this.doHideAt(hideAtMQ);
            }
        }
        if (this.visuallyHideAt) {
            const visuallyHideAtMQ = window === null || window === void 0 ? void 0 : window.matchMedia(`(${this.visuallyHideAt})`);
            if (visuallyHideAtMQ) {
                visuallyHideAtMQ.addEventListener('change', mql => this.doVisuallyHideAt(mql));
                this.doVisuallyHideAt(visuallyHideAtMQ);
            }
        }
    }
    render() {
        return (h(Host, { key: '6972c4cbf4ce75844833ea320e6bc1921d78230f' }, h("slot", { key: 'c1b2b848fa3b64fd4b94ac6e263b8e0d8cf60628' })));
    }
    get host() { return getElement(this); }
};
CbpHide.style = CbpHideStyle0;

export { CbpHide as cbp_hide };

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