@cbpds/web-components
Version:
Web components for the CBP Design System.
255 lines (254 loc) • 8.88 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps, getFocusableElements } from "../../utils/utils";
export class CbpDialog {
constructor() {
this.open = undefined;
this.uid = undefined;
this.accessibilityText = undefined;
this.color = undefined;
this.sx = {};
}
watchOpenHandler(newValue) {
newValue == true ? this.setFocus() : this.closeDialog();
}
async openDialog() {
this.open = true;
this.dialogOpen.emit({
host: this.host,
open: this.open,
});
}
async closeDialog() {
this.open = false;
this.dialogClose.emit({
host: this.host,
open: this.open,
});
}
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({ target }) {
if (!target.closest('[role=dialog]')) {
return;
}
}
componentDidLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.dialog, Object.assign({}, this.sx));
this.open && this.setFocus();
}
componentDidRender() {
setTimeout(() => {
this.open ? this.dialog.classList.add('cbp-dialog--open') : this.dialog.classList.remove('cbp-dialog--open');
}, 10);
}
render() {
return (h(Host, { key: 'b5869c1a2c37af4333421886ba4d289a051326af', onClick: e => this.handleBackdropClick(e), id: this.uid }, h("div", { key: 'a2969dae5f04ab22a64d2207fb9032955f156c37', role: "dialog", "aria-modal": "true", "aria-label": this.accessibilityText, tabindex: "-1", ref: el => (this.dialog = el) }, h("div", { key: 'a660cd757b67679303f21bcba877b5d3010e2e15', class: "cbp-dialog-body" }, [
{
node: h("slot", { name: "cbp-dialog-header" }),
query: 'cbp-dialog-header',
},
{
node: h("slot", { name: "cbp-dialog-body" }),
query: 'cbp-dialog-body',
},
].map(({ query, node }) => {
const hasSlot = this.host.querySelector(`[slot=${query}]`);
if (hasSlot) {
return node;
}
}), h("slot", { key: '39e236cd1e0e2b4f6b417d769a0c4a23db07dd5d' })), this.host.querySelector(`[slot=cbp-dialog-actions]`) && (h("div", { key: '78b27b71bd8af5202eca81aa6016f46567adb1a6', class: "cbp-dialog-actions" }, h("slot", { key: '6e2a91e315d326d12b044352d7fdbb8008adf557', name: "cbp-dialog-actions" }))))));
}
static get is() { return "cbp-dialog"; }
static get originalStyleUrls() {
return {
"$": ["cbp-dialog.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-dialog.css"]
};
}
static get properties() {
return {
"open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When set, specifies that the dialog 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 dialog, 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 dialog."
},
"attribute": "accessibility-text",
"reflect": false
},
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'info' | 'success' | 'warning' | 'danger'",
"resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally specifies a card color (different from the default color) based on predefined design token values."
},
"attribute": "color",
"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 events() {
return [{
"method": "dialogOpen",
"name": "dialogOpen",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Custom event fired when the dialog is opened."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "dialogClose",
"name": "dialogClose",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Custom event fired when the dialog is closed."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get methods() {
return {
"openDialog": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "A public method for opening the dialog.",
"tags": []
}
},
"closeDialog": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "A public method for closing the dialog.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "open",
"methodName": "watchOpenHandler"
}];
}
}
//# sourceMappingURL=cbp-dialog.js.map