@cbpds/web-components/dist/components/cbp-dialog.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as o,H as i,d as a,h as d,c as t}from"./p-9caf8482.js";import{e,s as c}from"./p-9c1b2f31.js";const r=":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 l=r;const s=o(class o extends i{constructor(){super();this.__registerHost();this.dialogOpen=a(this,"dialogOpen",7);this.dialogClose=a(this,"dialogClose",7);this.open=undefined;this.uid=undefined;this.accessibilityText=undefined;this.color=undefined;this.sx={}}watchOpenHandler(o){o==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 o;if(!this.focusableElements){this.focusableElements=e(this.host)}(o=this.focusableElements[0])===null||o===void 0?void 0:o.focus()}),100)}handleBackdropClick({target:o}){if(!o.closest("[role=dialog]")){return}}componentDidLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}c(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 d(t,{key:"b5869c1a2c37af4333421886ba4d289a051326af",onClick:o=>this.handleBackdropClick(o),id:this.uid},d("div",{key:"a2969dae5f04ab22a64d2207fb9032955f156c37",role:"dialog","aria-modal":"true","aria-label":this.accessibilityText,tabindex:"-1",ref:o=>this.dialog=o},d("div",{key:"a660cd757b67679303f21bcba877b5d3010e2e15",class:"cbp-dialog-body"},[{node:d("slot",{name:"cbp-dialog-header"}),query:"cbp-dialog-header"},{node:d("slot",{name:"cbp-dialog-body"}),query:"cbp-dialog-body"}].map((({query:o,node:i})=>{const a=this.host.querySelector(`[slot=${o}]`);if(a){return i}})),d("slot",{key:"39e236cd1e0e2b4f6b417d769a0c4a23db07dd5d"})),this.host.querySelector(`[slot=cbp-dialog-actions]`)&&d("div",{key:"78b27b71bd8af5202eca81aa6016f46567adb1a6",class:"cbp-dialog-actions"},d("slot",{key:"6e2a91e315d326d12b044352d7fdbb8008adf557",name:"cbp-dialog-actions"}))))}get host(){return this}static get watchers(){return{open:["watchOpenHandler"]}}static get style(){return l}},[4,"cbp-dialog",{open:[516],uid:[1],accessibilityText:[1,"accessibility-text"],color:[513],sx:[8],openDialog:[64],closeDialog:[64]},undefined,{open:["watchOpenHandler"]}]);function b(){if(typeof customElements==="undefined"){return}const o=["cbp-dialog"];o.forEach((o=>{switch(o){case"cbp-dialog":if(!customElements.get(o)){customElements.define(o,s)}break}}))}const p=s;const n=b;export{p as CbpDialog,n as defineCustomElement};
//# sourceMappingURL=cbp-dialog.js.map