@cbpds/web-components
Version:
Web components for the CBP Design System.
312 lines (311 loc) • 11.4 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps, getFocusableElements, getInvertedContext } from "../../utils/utils";
export class CbpDrawer {
constructor() {
this.position = 'left';
this.open = undefined;
this.uid = undefined;
this.accessibilityText = undefined;
this.persistAt = undefined;
this.context = undefined;
this.sx = {};
this.persistent = false;
}
watchOpenHandler(newValue) {
newValue == true ? this.setFocus() : this.closeDrawer();
}
async openDrawer(e = undefined) {
this.open = true;
this.drawerOpen.emit({
host: this.host,
open: this.open,
nativeEvent: e
});
}
async closeDrawer(e = undefined) {
this.open = false;
this.drawerClose.emit({
host: this.host,
open: this.open,
nativeEvent: e
});
}
setFocus() {
setTimeout(() => {
var _a;
if (!this.focusableElements) {
this.focusableElements = getFocusableElements(this.host);
}
(_a = this.focusableElements[0]) === null || _a === void 0 ? void 0 : _a.focus();
}, 100);
}
handleBackdropClick(e) {
const { target } = e;
!target.closest('.cbp-drawer__content') && this.closeDrawer(e);
}
handleKeyUp(e) {
e.key == 'Escape' && this.closeDrawer(e);
}
doPersistAt(mql) {
if (mql.matches) {
this.persistent = true;
}
else {
this.persistent = false;
}
}
componentDidLoad() {
if (this.persistAt) {
const MQ = window === null || window === void 0 ? void 0 : window.matchMedia(`(${this.persistAt})`);
if (MQ) {
MQ.addEventListener('change', mql => this.doPersistAt(mql));
this.doPersistAt(MQ);
}
}
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.drawer, Object.assign({}, this.sx));
this.open && this.setFocus();
}
componentDidRender() {
setTimeout(() => {
this.open ? this.drawer.classList.add('cbp-drawer--open') : this.drawer.classList.remove('cbp-drawer--open');
}, 10);
}
render() {
return (h(Host, { key: '637b2776dea7decd265e6509d81c578d4c292f13', class: (this.persistent && !this.open) ? "cbp-drawer--persistent" : "", onClick: e => this.handleBackdropClick(e), onKeyUp: e => this.handleKeyUp(e), id: this.uid }, h("div", { key: '293d3c3bd3fa079e6860b861635b5ebfae75d6f4', ref: el => (this.drawer = el), role: this.persistent ? "region" : "dialog", "aria-modal": !this.persistent ? "true" : false, class: "cbp-drawer__content", "aria-label": this.accessibilityText, tabindex: "-1" }, (!this.persistent || this.open) &&
h("cbp-button", { key: '485b3bd8f4e256d834b51d070834841041484de6', class: "cbp-drawer__close-button", variant: "square", type: "button", color: "secondary", fill: "ghost", accessibilityText: "Close", targetProp: "open", controls: this.uid, context: getInvertedContext(this.context) }, h("cbp-icon", { key: '68f00449f40f2cd25e67d3ee720975f2c7f231c4', name: "circle-xmark", size: "var(--cbp-space-5x)" })), h("slot", { key: '8866b25e69f0bbd74f87385a3f3646aeb0b2a0d8' }))));
}
static get is() { return "cbp-drawer"; }
static get originalStyleUrls() {
return {
"$": ["cbp-drawer.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-drawer.css"]
};
}
static get properties() {
return {
"position": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'left' | 'right'",
"resolved": "\"left\" | \"right\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the position of the drawer (left or right)"
},
"attribute": "position",
"reflect": true,
"defaultValue": "'left'"
},
"open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When set, specifies that the drawer is open"
},
"attribute": "open",
"reflect": true
},
"uid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies a unique `ID` for the drawer, used to wire up the controls and accessibility features."
},
"attribute": "uid",
"reflect": false
},
"accessibilityText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Creates an accessible label for the drawer (dialog)."
},
"attribute": "accessibility-text",
"reflect": false
},
"persistAt": {
"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., `min-width:64em`"
},
"attribute": "persist-at",
"reflect": false
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
},
"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 states() {
return {
"persistent": {}
};
}
static get events() {
return [{
"method": "drawerOpen",
"name": "drawerOpen",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Custom event fired when the drawer is opened."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "drawerClose",
"name": "drawerClose",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Custom event fired when the drawer is closed."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get methods() {
return {
"openDrawer": {
"complexType": {
"signature": "(e?: any) => Promise<void>",
"parameters": [{
"name": "e",
"type": "any",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "A public method for opening the drawer.",
"tags": []
}
},
"closeDrawer": {
"complexType": {
"signature": "(e?: any) => Promise<void>",
"parameters": [{
"name": "e",
"type": "any",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "A public method for closing the drawer.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "open",
"methodName": "watchOpenHandler"
}];
}
}
//# sourceMappingURL=cbp-drawer.js.map