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

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as e,H as r,d as t,h as o,c}from"./p-9caf8482.js";import{e as a,s as i,f as s}from"./p-9c1b2f31.js";import{d as n}from"./p-c79ac5f9.js";import{d}from"./p-4cdb3206.js";const p=":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-top);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 b=p;const l=e(class e extends r{constructor(){super();this.__registerHost();this.drawerOpen=t(this,"drawerOpen",7);this.drawerClose=t(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(e){e==true?this.setFocus():this.closeDrawer()}async openDrawer(e=undefined){this.open=true;this.drawerOpen.emit({host:this.host,open:this.open,nativeEvent:e})}async closeDrawer(e=undefined){this.open=false;this.drawerClose.emit({host:this.host,open:this.open,nativeEvent:e})}setFocus(){setTimeout((()=>{var e;if(!this.focusableElements){this.focusableElements=a(this.host)}(e=this.focusableElements[0])===null||e===void 0?void 0:e.focus()}),100)}handleBackdropClick(e){const{target:r}=e;!r.closest(".cbp-drawer__content")&&this.closeDrawer(e)}handleKeyUp(e){e.key=="Escape"&&this.closeDrawer(e)}doPersistAt(e){if(e.matches){this.persistent=true}else{this.persistent=false}}componentDidLoad(){if(this.persistAt){const e=window===null||window===void 0?void 0:window.matchMedia(`(${this.persistAt})`);if(e){e.addEventListener("change",(e=>this.doPersistAt(e)));this.doPersistAt(e)}}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 o(c,{key:"637b2776dea7decd265e6509d81c578d4c292f13",class:this.persistent&&!this.open?"cbp-drawer--persistent":"",onClick:e=>this.handleBackdropClick(e),onKeyUp:e=>this.handleKeyUp(e),id:this.uid},o("div",{key:"293d3c3bd3fa079e6860b861635b5ebfae75d6f4",ref:e=>this.drawer=e,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)&&o("cbp-button",{key:"485b3bd8f4e256d834b51d070834841041484de6",class:"cbp-drawer__close-button",variant:"square",type:"button",color:"secondary",fill:"ghost",accessibilityText:"Close",targetProp:"open",controls:this.uid,context:s(this.context)},o("cbp-icon",{key:"68f00449f40f2cd25e67d3ee720975f2c7f231c4",name:"circle-xmark",size:"var(--cbp-space-5x)"})),o("slot",{key:"8866b25e69f0bbd74f87385a3f3646aeb0b2a0d8"})))}get host(){return this}static get watchers(){return{open:["watchOpenHandler"]}}static get style(){return b}},[4,"cbp-drawer",{position:[513],open:[516],uid:[1],accessibilityText:[1,"accessibility-text"],persistAt:[1,"persist-at"],context:[513],sx:[8],persistent:[32],openDrawer:[64],closeDrawer:[64]},undefined,{open:["watchOpenHandler"]}]);function h(){if(typeof customElements==="undefined"){return}const e=["cbp-drawer","cbp-button","cbp-icon"];e.forEach((e=>{switch(e){case"cbp-drawer":if(!customElements.get(e)){customElements.define(e,l)}break;case"cbp-button":if(!customElements.get(e)){n()}break;case"cbp-icon":if(!customElements.get(e)){d()}break}}))}const w=l;const f=h;export{w as CbpDrawer,f as defineCustomElement};
//# sourceMappingURL=cbp-drawer.js.map