@cbpds/web-components
Version:
Web components for the CBP Design System.
211 lines (210 loc) • 7.66 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: '6972c4cbf4ce75844833ea320e6bc1921d78230f' }, h("slot", { key: 'c1b2b848fa3b64fd4b94ac6e263b8e0d8cf60628' })));
}
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\nusing display: none; (e.g., `max-width: 64em`). \nFor complex media queries using AND/OR operators, each condition must be enclosed in parentheses \n(e.g., `(width < 37.5rem) OR (width > 63rem)`)."
},
"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 \nin a way that is it still accessible as a label (e.g., `max-width: 64em`),\nFor complex media queries using AND/OR operators, each condition must be enclosed in parentheses \n(e.g., `(width < 37.5rem) OR (width > 63rem)`)."
},
"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