@cbpds/web-components/dist/cbp-web-components/p-5bb3a5e9.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 t}from"./p-436f46fe.js";import{g as e,s as r}from"./p-93ade441.js";const c=":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=c;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=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)||{}}r(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:"fbb4d6ba3fb6344f77e48687a6828d4e555e2903",onClick:o=>this.handleBackdropClick(o),id:this.uid},a("div",{key:"0d0ea35e8e03dc980e6dd74059e1d56a95d16019",role:"dialog","aria-modal":"true","aria-label":this.accessibilityText,tabindex:"-1",ref:o=>this.dialog=o},a("div",{key:"b4285d94828d2cb842f67a1a92e190ef87ca44e7",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:"2afcc37c19cfabf80d32979975b1a6a3600c2941"})),this.host.querySelector(`[slot=cbp-dialog-actions]`)&&a("div",{key:"59cf27876d7824d8e235f097128521812c68762d",class:"cbp-dialog-actions"},a("slot",{key:"e2260fa1731c428404df738bf050277cda5fad42",name:"cbp-dialog-actions"}))))}get host(){return t(this)}static get watchers(){return{open:["watchOpenHandler"]}}};b.style=l;export{b as cbp_dialog};
//# sourceMappingURL=p-5bb3a5e9.entry.js.map