@cbpds/web-components
Version:
Web components for the CBP Design System.
83 lines (79 loc) • 3.03 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-6c11fa0c.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: '379c3529fc6824bea7ce493d5ef7e23c5e740a81' }, h("slot", { key: '67b7465feca65ba76a89b29a900b9f2f06bf0d43' })));
}
get host() { return getElement(this); }
};
CbpHide.style = CbpHideStyle0;
export { CbpHide as cbp_hide };
//# sourceMappingURL=cbp-hide.entry.js.map