@cbpds/web-components/dist/cbp-web-components/p-19540662.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{r as o,c as i,h as a,a as d,g as e}from"./p-8d4a80f0.js";import{g as t,s as c}from"./p-93ade441.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 b=class{constructor(a){o(this,a);this.dialogOpen=i(this,"dialogOpen",7);this.dialogClose=i(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=t(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 a(d,{key:"90e9ddce3384e260caee4d45bcbde7d4e204a0cf",onClick:o=>this.handleBackdropClick(o),onKeyDown:()=>{},id:this.uid},a("div",{key:"f5e7d8d105be02c09216796b8c97d7914cd489ce",role:"dialog","aria-modal":"true","aria-label":this.accessibilityText,tabindex:"-1",ref:o=>this.dialog=o},a("div",{key:"bcd0994c59ceced15748174b29749ef88c6bc7ca",class:"cbp-dialog-body"},[{node:a("slot",{name:"cbp-dialog-header"}),query:"cbp-dialog-header"},{node:a("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}})),a("slot",{key:"e6fe13838487922dea3879b33b933e1e3794d2d4"})),this.host.querySelector(`[slot=cbp-dialog-actions]`)&&a("div",{key:"bef6a534117547c2bbb305ea8eef7cae313eed0d",class:"cbp-dialog-actions"},a("slot",{key:"28cf5e8c304928c691916b0e354b407426875ce2",name:"cbp-dialog-actions"}))))}get host(){return e(this)}static get watchers(){return{open:["watchOpenHandler"]}}};b.style=l;export{b as cbp_dialog};
//# sourceMappingURL=p-19540662.entry.js.map