@cbpds/web-components/dist/components/p-5d97a2bf.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as t,H as e,d as s,h as i,c as n}from"./p-9caf8482.js";import{c as o,a as c,b as a,s as r}from"./p-9c1b2f31.js";import{d as b}from"./p-c79ac5f9.js";import{d as p}from"./p-4cdb3206.js";import{d as m}from"./p-698b57d9.js";const h=":root{--cbp-menu-color-bg:var(--cbp-color-gray-cool-80);--cbp-menu-color-bg-dark:var(--cbp-color-gray-cool-5);--cbp-menu-gap:var(--cbp-space-3x)}[data-cbp-theme=light] cbp-menu[context*=dark],[data-cbp-theme=dark] cbp-menu:not([context=dark-inverts]):not([context=light-always]){--cbp-menu-color-bg:var(--cbp-menu-color-bg-dark)}cbp-menu{position:relative;display:inline-block;max-width:100%;}cbp-menu .cbp-menu__menu{position:absolute;top:0;left:0;display:block;width:max-content;padding:0;background:var(--cbp-menu-color-bg);border-radius:var(--cbp-border-radius-softer);box-shadow:var(--cbp-shadow-level-1-down);z-index:var(--cbp-z-index-level-0)}@media (min-width: 37.5em){cbp-menu .cbp-menu__menu{width:max-content;max-width:max-content;margin:0}cbp-menu[position=top-start] .cbp-menu__menu{top:100%;left:0;transform:translate(0, -100%)}cbp-menu[position=top-end] .cbp-menu__menu{top:100%;left:100%;transform:translate(-100%, -100%)}cbp-menu[position=bottom-start] .cbp-menu__menu{top:0;left:0}cbp-menu[position=bottom-end] .cbp-menu__menu{top:0;left:100%;transform:translate(-100%, 0)}}";const d=h;const u=t(class t extends e{constructor(){super();this.__registerHost();this.toggleMenu=s(this,"toggleMenu",7);this.position="bottom-start";this.open=false;this.uid=o("cbp-menu");this.accessibilityText=undefined;this.context=undefined;this.sx={}}async openMenu(){this.open=true}async closeMenu(){var t;this.open=false;(t=this.control)===null||t===void 0?void 0:t.focus()}watchOpen(t){if(t){this.menuItems=Array.from(this.menu.querySelectorAll("button, a"));c(this.host,(t=>{this.open=false}));this.toggleMenu.emit({host:this.host,control:this.control,open:this.open});setTimeout((()=>this.setCurrentMenuItem()),500)}this.CBPButton.expanded=`${this.open}`}clickAwayHandler({target:t}){if(!t.closest(this.host))this.open=false}handleKeyPress(t){const{key:e,shiftKey:s}=t;const i=["ArrowDown","ArrowRight","ArrowUp","ArrowLeft"];const n=["ArrowDown","ArrowRight","ArrowUp","ArrowLeft","Enter","Home","End"];if(e=="Escape")this.closeMenu();if(e=="Tab"&&!s)this.open=false;if(i.includes(e)&&!this.open){this.open=true;return}if(n.includes(e)){this.focusIndex=a(this.menuItems,e,this.focusIndex);this.setCurrentMenuItem(this.focusIndex)}return}setCurrentMenuItem(t=0){this.menuItems[t].focus()}handleKeyPressCloseButton(t){if(t.key=="Tab"&&!t.shiftKey)this.open=false}componentWillLoad(){this.CBPButton=this.host.querySelector("cbp-button");this.control=this.host.querySelector("button");if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}r(this.host,Object.assign({},this.sx))}componentDidLoad(){this.menuItems=Array.from(this.menu.querySelectorAll("button,a"));if(!this.control)this.control=this.host.querySelector("button");if(this.control){this.CBPButton.controls=this.uid;this.CBPButton.expanded=`${this.open}`;this.control.setAttribute("aria-controls",`${this.uid}-menu`);this.control.setAttribute("aria-haspopup","menu")}}render(){var t;return i(n,{key:"21624525db101101290ee100b176d9742b9637a4",id:this.uid,onKeyDown:t=>this.handleKeyPress(t)},i("slot",{key:"7f2ea4fddb22560d4f06ee0cde151bb448de738f"}),i("div",{key:"e0e13d603ec15a0dd9ed4f0089ad0b801e6287fa",ref:t=>this.menu=t,id:`${this.uid}-menu`,class:"cbp-menu__menu",role:"menu",hidden:!this.open,"aria-labelledby":(t=this.control)===null||t===void 0?void 0:t.id},i("slot",{key:"6abc181437d81e93d107cc2a86cb7028934cf9ed",name:"cbp-menu-items"}),i("cbp-menu-item",{key:"b7851c6be73a18bd9b3d71f18e24a6f5f23a7280",class:"cbp-menu__close-btn"},i("cbp-button",{key:"b6ee4d56ca853d6301f5d93289a92d48497cc314",fill:"solid",color:"primary",context:"dark-inverts",onButtonClick:()=>this.closeMenu(),onKeyDown:t=>this.handleKeyPressCloseButton(t)},i("cbp-icon",{key:"5bbdab67491d4d31f35481d19b98335e852a0abc",name:"circle-xmark",size:"var(--cbp-space-5x)"}),"Close"))))}get host(){return this}static get watchers(){return{open:["watchOpen"]}}static get style(){return d}},[4,"cbp-menu",{position:[513],open:[516],uid:[1],accessibilityText:[1,"accessibility-text"],context:[513],sx:[8],openMenu:[64],closeMenu:[64]},undefined,{open:["watchOpen"]}]);function l(){if(typeof customElements==="undefined"){return}const t=["cbp-menu","cbp-button","cbp-icon","cbp-menu-item"];t.forEach((t=>{switch(t){case"cbp-menu":if(!customElements.get(t)){customElements.define(t,u)}break;case"cbp-button":if(!customElements.get(t)){b()}break;case"cbp-icon":if(!customElements.get(t)){p()}break;case"cbp-menu-item":if(!customElements.get(t)){m()}break}}))}export{u as C,l as d};
//# sourceMappingURL=p-5d97a2bf.js.map