@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 4.15 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r as t,c as e,h as s,a as i,g as o}from"./p-8d4a80f0.js";import{c as n,b as a,e as r,s as c}from"./p-93ade441.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 b=h;const p=class{constructor(s){t(this,s);this.toggleMenu=e(this,"toggleMenu",7);this.position="bottom-start";this.open=false;this.uid=n("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"));a(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 o=["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(o.includes(e)){this.focusIndex=r(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)||{}}c(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 s(i,{key:"afe221b497645a4df282df0ade8abfd5ba729389",id:this.uid,onKeyDown:t=>this.handleKeyPress(t)},s("slot",{key:"8a8b2d6248bd6b106b30dfc4b77a10026648d1a9"}),s("div",{key:"1de1f587285409bec456b0aa6c03c43198f4ffc7",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},s("slot",{key:"fcaa8fe444360511c725e9e28a142f6e9d87abe7",name:"cbp-menu-items"}),s("cbp-menu-item",{key:"a67f5a6bb2fc089d4fd103c6674c192d74f4f38e",class:"cbp-menu__close-btn"},s("cbp-button",{key:"53212b4864fcf4d72625016ba800fe5446cc32e0",fill:"solid",color:"primary",context:"dark-inverts",onButtonClick:()=>this.closeMenu(),onKeyDown:t=>this.handleKeyPressCloseButton(t)},s("cbp-icon",{key:"7b5b185ac315129800714c3aac3aec89b46b2a75",name:"circle-xmark",size:"var(--cbp-space-5x)"}),"Close"))))}get host(){return o(this)}static get watchers(){return{open:["watchOpen"]}}};p.style=b;export{p as cbp_menu};
//# sourceMappingURL=p-c8c3ed56.entry.js.map