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

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{r as o,c as a,h as i,a as d,g as t}from"./p-654179c2.js";import{g as r,s as e}from"./p-93ade441.js";const l=":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 c=l;const b=class{constructor(i){o(this,i);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=r(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)||{}}e(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 i(d,{key:"b5869c1a2c37af4333421886ba4d289a051326af",onClick:o=>this.handleBackdropClick(o),id:this.uid},i("div",{key:"a2969dae5f04ab22a64d2207fb9032955f156c37",role:"dialog","aria-modal":"true","aria-label":this.accessibilityText,tabindex:"-1",ref:o=>this.dialog=o},i("div",{key:"a660cd757b67679303f21bcba877b5d3010e2e15",class:"cbp-dialog-body"},[{node:i("slot",{name:"cbp-dialog-header"}),query:"cbp-dialog-header"},{node:i("slot",{name:"cbp-dialog-body"}),query:"cbp-dialog-body"}].map((({query:o,node:a})=>{const i=this.host.querySelector(`[slot=${o}]`);if(i){return a}})),i("slot",{key:"39e236cd1e0e2b4f6b417d769a0c4a23db07dd5d"})),this.host.querySelector(`[slot=cbp-dialog-actions]`)&&i("div",{key:"78b27b71bd8af5202eca81aa6016f46567adb1a6",class:"cbp-dialog-actions"},i("slot",{key:"6e2a91e315d326d12b044352d7fdbb8008adf557",name:"cbp-dialog-actions"}))))}get host(){return t(this)}static get watchers(){return{open:["watchOpenHandler"]}}};b.style=c;export{b as cbp_dialog};
//# sourceMappingURL=p-8ae86909.entry.js.map