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

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{r,c as e,h as t,a as o,g as a}from"./p-8d4a80f0.js";import{g as c,s as i,a as d}from"./p-93ade441.js";const s=":root{--cbp-drawer-color-bg:var(--cbp-color-white);--cbp-drawer-color-bg-dark:var(--cbp-color-gray-cool-70);--cbp-drawer-color-backdrop:var(--cbp-color-backdrop-light);--cbp-drawer-color-backdrop-dark:var(--cbp-color-backdrop-dark);--cbp-drawer-close-button-color:var(--cbp-color-interactive-secondary-darker);--cbp-drawer-close-button-color-hover:var(--cbp-color-text-lightest);--cbp-drawer-close-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-drawer-close-button-color-border-hover:var(--cbp-color-interactive-secondary-darker)}[data-cbp-theme=light] cbp-drawer[context*=dark],[data-cbp-theme=dark] cbp-drawer:not([context=dark-inverts]):not([context=light-always]){--cbp-drawer-color-bg:var(--cbp-drawer-color-bg-dark);--cbp-drawer-color-backdrop:var(--cbp-drawer-color-backdrop-dark)}cbp-drawer{all:unset;display:none;position:relative}cbp-drawer:not(.cbp-drawer--persistent){--cbp-panel-border-radius:0;--cbp-panel-border-width:0}cbp-drawer.cbp-drawer--persistent{display:block}cbp-drawer.cbp-drawer--persistent .cbp-drawer__content{height:auto}cbp-drawer .cbp-drawer__content{display:flex;flex-direction:column;top:0;overflow-y:auto;z-index:var(--cbp-z-index-level-4);width:100%;height:101%;margin:0;padding:0;border:0;max-width:100%;max-height:101%;transition:0.5s;height:100%;background-color:var(--cbp-drawer-color-bg)}cbp-drawer .cbp-drawer__content .cbp-drawer__close-button{position:absolute;right:1rem;top:1em}cbp-drawer .cbp-drawer__content .cbp-drawer__close-button[fill][color]{--cbp-button-color:var(--cbp-drawer-close-button-color);--cbp-button-color-hover:var(--cbp-drawer-close-button-color-hover)}cbp-drawer[open]{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:calc(var(--cbp-z-index-level-top) - 1);overflow-y:auto;background-color:var(--cbp-drawer-color-backdrop)}cbp-drawer[open][position=left] .cbp-drawer__content{left:-100%;box-shadow:var(--cbp-shadow-level-4-right)}cbp-drawer[open][position=left] .cbp-drawer__content.cbp-drawer--open{left:0}cbp-drawer[open][position=right] .cbp-drawer__content{right:-100%;box-shadow:var(--cbp-shadow-level-4-left)}cbp-drawer[open][position=right] .cbp-drawer__content.cbp-drawer--open{right:0}cbp-drawer[open] .cbp-drawer__content{position:fixed}@media (min-width: 37.5em){cbp-drawer[open] .cbp-drawer__content{width:25rem}}";const n=s;const p=class{constructor(t){r(this,t);this.drawerOpen=e(this,"drawerOpen",7);this.drawerClose=e(this,"drawerClose",7);this.position="left";this.open=undefined;this.uid=undefined;this.accessibilityText=undefined;this.persistAt=undefined;this.context=undefined;this.sx={};this.persistent=false}watchOpenHandler(r){r==true?this.setFocus():this.closeDrawer()}async openDrawer(){this.open=true;this.drawerOpen.emit({host:this.host,open:this.open})}async closeDrawer(){this.open=false;this.drawerClose.emit({host:this.host,open:this.open})}setFocus(){setTimeout((()=>{var r;if(!this.focusableElements){this.focusableElements=c(this.host)}(r=this.focusableElements[0])===null||r===void 0?void 0:r.focus()}),100)}handleBackdropClick({target:r}){!r.closest(".cbp-drawer__content")&&this.closeDrawer()}handleKeyUp(r){r.key=="Escape"&&this.closeDrawer()}doPersistAt(r){if(r.matches){this.persistent=true}else{this.persistent=false}}componentDidLoad(){if(this.persistAt){const r=window===null||window===void 0?void 0:window.matchMedia(`(${this.persistAt})`);if(r){r.addEventListener("change",(r=>this.doPersistAt(r)));this.doPersistAt(r)}}if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}i(this.drawer,Object.assign({},this.sx));this.open&&this.setFocus()}componentDidRender(){setTimeout((()=>{this.open?this.drawer.classList.add("cbp-drawer--open"):this.drawer.classList.remove("cbp-drawer--open")}),10)}render(){return t(o,{key:"8f7fddf5e0aafab9a31a896d727cb801ec5a39a2",class:this.persistent&&!this.open?"cbp-drawer--persistent":"",onClick:r=>this.handleBackdropClick(r),onKeyUp:r=>this.handleKeyUp(r),id:this.uid},t("div",{key:"fc032749e27d9ed6b281ee9c32effdad149dc100",ref:r=>this.drawer=r,role:this.persistent?"region":"dialog","aria-modal":!this.persistent?"true":false,class:"cbp-drawer__content","aria-label":this.accessibilityText,tabindex:"-1"},(!this.persistent||this.open)&&t("cbp-button",{key:"69ccd7ae801ab3efa46d415cd8e7be9159a1530f",class:"cbp-drawer__close-button",variant:"square",type:"button",color:"secondary",fill:"ghost",accessibilityText:"Close",targetProp:"open",controls:this.uid,context:d(this.context)},t("cbp-icon",{key:"9ae96ebcc8f9ccf8a46bf9bbc659b5f92d30f26f",name:"circle-xmark",size:"var(--cbp-space-5x)"})),t("slot",{key:"5c637dabed743fe74366358e0b02929484d4e3cb"})))}get host(){return a(this)}static get watchers(){return{open:["watchOpenHandler"]}}};p.style=n;export{p as cbp_drawer};
//# sourceMappingURL=p-8958ff80.entry.js.map