@cbpds/web-components/dist/cjs/cbp-hide.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 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) {
        index.registerInstance(this, hostRef);
        this.hideToggle = index.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) || {};
        }
        utils.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 (index.h(index.Host, { key: '379c3529fc6824bea7ce493d5ef7e23c5e740a81' }, index.h("slot", { key: '67b7465feca65ba76a89b29a900b9f2f06bf0d43' })));
    }
    get host() { return index.getElement(this); }
};
CbpHide.style = CbpHideStyle0;

exports.cbp_hide = CbpHide;

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