@cbpds/web-components
Version:
Web components for the CBP Design System.
94 lines (88 loc) • 6.24 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');
const cbpDialogCss = ":root{--cbp-dialog-color:var(--cbp-color-text-darkest);--cbp-dialog-color-dark:var(--cbp-color-text-lightest);--cbp-dialog-color-bg:var(--cbp-color-white);--cbp-dialog-color-bg-dark:var(--cbp-color-gray-cool-60);--cbp-dialog-padding:var(--cbp-space-5x);--cbp-dialog-border-radius:var(--cbp-border-radius-softer);--cbp-dialog-shadow:var(--cbp-shadow-level-5-center);--cbp-dialog-width:20rem;--cbp-dialog-height:auto}[data-cbp-theme=light] cbp-dialog[context*=dark],[data-cbp-theme=dark] cbp-dialog:not([context=dark-inverts]):not([context=light-always]){--cbp-dialog-color:var(--cbp-dialog-color-dark);--cbp-dialog-color-bg:var(--cbp-dialog-color-bg-dark)}cbp-dialog{display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:var(--cbp-z-index-level-top);overflow:hidden;background-color:rgba(0, 0, 0, 0.3)}cbp-dialog[open]{display:flex;justify-content:center;align-items:center;overflow:hidden}cbp-dialog[color=danger]{--cbp-dialog-color-bg:var(--cbp-color-danger-lighter);--cbp-dialog-color-bg-dark:var(--cbp-color-danger-darker)}cbp-dialog div[role=dialog]{opacity:1;display:flex;flex-direction:column;position:fixed;overflow-y:auto;z-index:var(--cbp-z-index-level-top);width:var(--cbp-dialog-width);height:var(--cbp-dialog-height);max-width:100%;max-height:90vh;box-shadow:var(--cbp-dialog-shadow);border-radius:var(--cbp-dialog-border-radius)}cbp-dialog div[role=dialog] .cbp-dialog-body{color:var(--cbp-dialog-color);background-color:var(--cbp-dialog-color-bg);padding:var(--cbp-dialog-padding);border-radius:var(--cbp-dialog-border-radius) var(--cbp-dialog-border-radius) 0 0}cbp-dialog div[role=dialog] [slot=cbp-dialog-actions]{display:flex}cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button{--cbp-button-border-radius:0;width:100%}cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button:first-child{--cbp-button-border-radius:0 0 0 var(--cbp-border-radius-softer)}cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button:last-child{--cbp-button-border-radius:0 0 var(--cbp-border-radius-softer) 0}cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button:first-child:last-child{--cbp-button-border-radius:0 0 var(--cbp-border-radius-softer) var(--cbp-border-radius-softer)}cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button button,cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button a{padding-block:var(--cbp-space-3x);width:100%}@media (max-width: 37.5em){cbp-dialog[open]{align-items:end}cbp-dialog div[role=dialog]{margin-bottom:var(--cbp-space-5x)}}@media print{cbp-dialog[open] div[role=dialog]{position:absolute;left:0;top:0;width:100%;height:100%;z-index:var(--cbp-z-index-level-top);background-color:var(--cbp-dialog-background-color)}}";
const CbpDialogStyle0 = cbpDialogCss;
const CbpDialog = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.dialogOpen = index.createEvent(this, "dialogOpen", 7);
this.dialogClose = index.createEvent(this, "dialogClose", 7);
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 = utils.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) || {};
}
utils.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 (index.h(index.Host, { key: 'b5869c1a2c37af4333421886ba4d289a051326af', onClick: e => this.handleBackdropClick(e), id: this.uid }, index.h("div", { key: 'a2969dae5f04ab22a64d2207fb9032955f156c37', role: "dialog", "aria-modal": "true", "aria-label": this.accessibilityText, tabindex: "-1", ref: el => (this.dialog = el) }, index.h("div", { key: 'a660cd757b67679303f21bcba877b5d3010e2e15', class: "cbp-dialog-body" }, [
{
node: index.h("slot", { name: "cbp-dialog-header" }),
query: 'cbp-dialog-header',
},
{
node: index.h("slot", { name: "cbp-dialog-body" }),
query: 'cbp-dialog-body',
},
].map(({ query, node }) => {
const hasSlot = this.host.querySelector(`[slot=${query}]`);
if (hasSlot) {
return node;
}
}), index.h("slot", { key: '39e236cd1e0e2b4f6b417d769a0c4a23db07dd5d' })), this.host.querySelector(`[slot=cbp-dialog-actions]`) && (index.h("div", { key: '78b27b71bd8af5202eca81aa6016f46567adb1a6', class: "cbp-dialog-actions" }, index.h("slot", { key: '6e2a91e315d326d12b044352d7fdbb8008adf557', name: "cbp-dialog-actions" }))))));
}
get host() { return index.getElement(this); }
static get watchers() { return {
"open": ["watchOpenHandler"]
}; }
};
CbpDialog.style = CbpDialogStyle0;
exports.cbp_dialog = CbpDialog;
//# sourceMappingURL=cbp-dialog.cjs.entry.js.map