UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

5 lines (4 loc) 2.55 kB
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified. See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details. v3.2.1 */ import{b as p,d}from"./CKRTMNFR.js";import{l as h,n as m,v as c,z as a}from"./3ADX47DD.js";import{d as f}from"./HPN2C7M6.js";import"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as u,R as r,c as o,d as n}from"./BJZTU5BQ.js";var y=o`:host{display:flex}ul{margin:0;display:inline-flex;block-size:100%;align-items:center;padding:0}:host([layout=vertical]) ul{display:flex;inline-size:100%;flex-direction:column}:host([hidden]){display:none}[hidden]{display:none}`,l=class extends u{constructor(){super(),this.attributeWatch=p(["role"],this.handleGlobalAttributesChanged),this.menuItems=[],this.messages=d(),this.layout="horizontal",this.listen("calciteInternalMenuItemKeyEvent",this.calciteInternalNavMenuItemKeyEvent)}static{this.properties={label:1,layout:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}]}}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}static{this.styles=y}async setFocus(){await f(this),m(this.menuItems[0])}willUpdate(e){e.has("layout")&&(this.hasUpdated||this.layout!=="horizontal")&&this.setMenuItemLayout(this.menuItems,this.layout)}handleGlobalAttributesChanged(){this.requestUpdate(),this.setMenuItemLayout(this.menuItems,this.layout)}calciteInternalNavMenuItemKeyEvent(e){let t=e.target,s=e.detail.children,i=e.detail.event.key;e.stopPropagation(),i==="ArrowDown"?t.layout==="vertical"?a(this.menuItems,t,"next",!1):e.detail.isSubmenuOpen&&s[0].setFocus():i==="ArrowUp"?this.layout==="vertical"?a(this.menuItems,t,"previous",!1):e.detail.isSubmenuOpen&&s[s.length-1].setFocus():i==="ArrowRight"?this.layout==="horizontal"?a(this.menuItems,t,"next",!1):e.detail.isSubmenuOpen&&s[0].setFocus():i==="ArrowLeft"?this.layout==="horizontal"?a(this.menuItems,t,"previous",!1):e.detail.isSubmenuOpen&&this.focusParentElement(e.target):i==="Escape"&&this.focusParentElement(e.target),e.preventDefault()}handleMenuSlotChange(e){this.menuItems=c(e),this.setMenuItemLayout(this.menuItems,this.layout)}focusParentElement(e){let t=e.parentElement;t&&(h(t),t.open=!1)}setMenuItemLayout(e,t){e.forEach(s=>{s.layout=t,this.getEffectiveRole()==="menubar"&&(s.isTopLevelItem=!0,s.topLevelMenuLayout=this.layout)})}getEffectiveRole(){return this.el.role||"menubar"}render(){return n`<ul .ariaLabel=${this.label} .role=${this.getEffectiveRole()}><slot @slotchange=${this.handleMenuSlotChange}></slot></ul>`}};r("calcite-menu",l);export{l as Menu};