@cbpds/web-components
Version:
Web components for the CBP Design System.
211 lines (210 loc) • 7.36 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpHide {
constructor() {
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' })));
}
static get is() { return "cbp-hide"; }
static get originalStyleUrls() {
return {
"$": ["cbp-hide.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-hide.css"]
};
}
static get properties() {
return {
"display": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the host's display when visible. The default is `inline`, which is the default display of a custom element."
},
"attribute": "display",
"reflect": false,
"defaultValue": "'inline'"
},
"hide": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When set to true, the host is hidden. Allows for toggling via property binding rather than media query."
},
"attribute": "hide",
"reflect": true
},
"visuallyHide": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When set to true, the host is visually hidden in an accessible manner. Allows for toggling via property binding rather than media query."
},
"attribute": "visually-hide",
"reflect": true
},
"hideAt": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies a valid CSS media query (preferably using relative units), when met will hide the wrapped content using display: none. E.g., `max-width: 64em`"
},
"attribute": "hide-at",
"reflect": false
},
"visuallyHideAt": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies a valid CSS media query (preferably using relative units), when met will visually hide the wrapped content in a way that is it still accessible as a label. E.g., `max-width: 64em`"
},
"attribute": "visually-hide-at",
"reflect": false
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get events() {
return [{
"method": "hideToggle",
"name": "hideToggle",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event emitted when the accordion item control is activated."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-hide.js.map