@esri/calcite-components/dist/calcite/4QNV5EHO.js

Web Components for Esri's Calcite Design System.

/*! 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{a as h}from"./IFR7DE3R.js";import{a as $}from"./3FSOG4LN.js";import{b as r}from"./5RDOSP2E.js";import{a as u,b as d,c as B,d as M}from"./BEA6KQAT.js";import{l as x,r as I}from"./3ADX47DD.js";import{d as b}from"./HPN2C7M6.js";import"./JOSABGK6.js";import{a as v}from"./NNVH7JUI.js";import{E as g,F as c,R as E,c as m,d as l,h as a,q as f}from"./BJZTU5BQ.js";var y=m`:host{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-1)}::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm)}.default-trigger{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}.menu{display:flex;max-block-size:45vh;flex-direction:column;flex-wrap:nowrap;overflow-y:auto;overflow-x:hidden;outline:2px solid transparent;outline-offset:2px;gap:var(--calcite-action-menu-items-space, 0)}:host([hidden]){display:none}[hidden]{display:none}`,P=["ArrowUp","ArrowDown","End","Home"],p=class extends g{constructor(){super(...arguments),this.guid=`calcite-action-menu-${v()}`,this.actionElements=[],this.menuButtonClick=()=>{this.toggleOpen()},this.menuButtonId=`${this.guid}-menu-button`,this.menuButtonKeyDown=t=>{let{key:e}=t,{actionElements:n,activeMenuItemIndex:o,open:i}=this;if(n.length){if($(e)){if(t.preventDefault(),!i){this.toggleOpen();return}let s=n[o];s?s.click():this.toggleOpen(!1)}if(e==="Tab"){this.open=!1;return}if(e==="Escape"){this.toggleOpen(!1),t.preventDefault();return}this.handleActionNavigation(t,e,n)}},this.menuId=`${this.guid}-menu`,this._open=!1,this.updateAction=(t,e)=>{let{guid:n,activeMenuItemIndex:o}=this,i=`${n}-action-${e}`;t.tabIndex=-1,t.setAttribute("role","menuitem"),t.id||(t.id=i),t.toggleAttribute(M,e===o)},this.activeMenuItemIndex=-1,this.appearance="solid",this.expanded=!1,this.overlayPositioning="absolute",this.placement="auto",this.scale="m",this.calciteActionMenuOpen=f({cancelable:!1})}static{this.properties={activeMenuItemIndex:[16,{},{state:!0}],menuButtonEl:[16,{},{state:!0}],appearance:[3,{},{reflect:!0}],expanded:[7,{},{reflect:!0,type:Boolean}],flipPlacements:[0,{},{attribute:!1}],label:1,open:[7,{},{reflect:!0,type:Boolean}],overlayPositioning:[3,{},{reflect:!0}],placement:[3,{},{reflect:!0}],scale:[3,{},{reflect:!0}]}}static{this.styles=y}get open(){return this._open}set open(t){let e=this._open;t!==e&&(this._open=t,this.openHandler(t))}async setFocus(){return await b(this),x(this.menuButtonEl)}connectedCallback(){super.connectedCallback(),this.connectMenuButtonEl()}willUpdate(t){t.has("expanded")&&(this.hasUpdated||this.expanded!==!1)&&this.expandedHandler(),t.has("activeMenuItemIndex")&&(this.hasUpdated||this.activeMenuItemIndex!==-1)&&this.updateActions(this.actionElements)}disconnectedCallback(){super.disconnectedCallback(),this.disconnectMenuButtonEl()}expandedHandler(){this.open=!1,this.setTooltipReferenceElement()}openHandler(t){this.menuButtonEl&&(this.menuButtonEl.active=t),this.popoverEl&&(this.popoverEl.open=t),this.activeMenuItemIndex=this.open?0:-1,this.calciteActionMenuOpen.emit(),this.setTooltipReferenceElement()}connectMenuButtonEl(){let{menuButtonId:t,menuId:e,open:n,label:o}=this,i=this.slottedMenuButtonEl||this.defaultMenuButtonEl;this.menuButtonEl!==i&&(this.disconnectMenuButtonEl(),this.menuButtonEl=i,this.setTooltipReferenceElement(),i&&(i.active=n,i.setAttribute("aria-controls",e),i.setAttribute("aria-expanded",I(n)),i.setAttribute("aria-haspopup","true"),i.id||(i.id=t),i.label||(i.label=o),i.text||(i.text=o),i.addEventListener("click",this.menuButtonClick),i.addEventListener("keydown",this.menuButtonKeyDown)))}disconnectMenuButtonEl(){let{menuButtonEl:t}=this;t&&(t.removeEventListener("click",this.menuButtonClick),t.removeEventListener("keydown",this.menuButtonKeyDown),this.menuButtonEl=null)}setMenuButtonEl(t){let e=t.target.assignedElements({flatten:!0}).filter(n=>n?.matches("calcite-action"));this.slottedMenuButtonEl=e[0],this.connectMenuButtonEl()}setDefaultMenuButtonEl(t){this.defaultMenuButtonEl=t,t&&this.connectMenuButtonEl()}setPopoverEl(t){t&&(this.popoverEl=t,t.open=this.open)}handleCalciteActionClick(){this.open=!1,this.setFocus()}updateTooltip(t){let e=t.target.assignedElements({flatten:!0}).filter(n=>n?.matches("calcite-tooltip"));this.tooltipEl=e[0],this.setTooltipReferenceElement()}setTooltipReferenceElement(){let{tooltipEl:t,expanded:e,menuButtonEl:n,open:o}=this;t&&(t.referenceElement=!e&&!o?n:null)}updateActions(t){t?.forEach(this.updateAction)}handleDefaultSlotChange(t){let e=t.target.assignedElements({flatten:!0}).reduce((n,o)=>o?.matches("calcite-action")?(n.push(o),n):o?.matches("calcite-action-group")?n.concat(Array.from(o.querySelectorAll("calcite-action"))):n,[]);this.actionElements=e.filter(n=>!n.disabled&&!n.hidden)}isValidKey(t,e){return!!e.find(n=>n===t)}handleActionNavigation(t,e,n){if(!this.isValidKey(e,P))return;if(t.preventDefault(),!this.open){this.toggleOpen(),(e==="Home"||e==="ArrowDown")&&(this.activeMenuItemIndex=0),(e==="End"||e==="ArrowUp")&&(this.activeMenuItemIndex=n.length-1);return}e==="Home"&&(this.activeMenuItemIndex=0),e==="End"&&(this.activeMenuItemIndex=n.length-1);let o=this.activeMenuItemIndex;e==="ArrowUp"&&(this.activeMenuItemIndex=h(Math.max(o-1,-1),n.length)),e==="ArrowDown"&&(this.activeMenuItemIndex=h(o+1,n.length))}toggleOpen(t=!this.open){this.open=t}handlePopoverOpen(t){t.stopPropagation(),this.open=!0,this.setFocus()}handlePopoverClose(t){t.stopPropagation(),this.open=!1}renderMenuButton(){let{appearance:t,label:e,scale:n,expanded:o}=this;return l`<slot name=${d.trigger} @slotchange=${this.setMenuButtonEl}><calcite-action .appearance=${t} class=${c(u.defaultTrigger)} .icon=${B.menu} .scale=${n} .text=${e} .textEnabled=${o} ${r(this.setDefaultMenuButtonEl)}></calcite-action></slot>`}renderMenuItems(){let{actionElements:t,activeMenuItemIndex:e,menuId:n,menuButtonEl:o,label:i,placement:s,overlayPositioning:A,flipPlacements:w}=this,C=t[e]?.id||null;return l`<calcite-popover auto-close .flipPlacements=${w} focus-trap-disabled .label=${i} offset-distance=0 @calcitePopoverClose=${this.handlePopoverClose} @calcitePopoverOpen=${this.handlePopoverOpen} .overlayPositioning=${A} .placement=${s} pointer-disabled .referenceElement=${o} trigger-disabled ${r(this.setPopoverEl)}><div aria-activedescendant=${C??a} aria-labelledby=${o?.id??a} class=${c(u.menu)} id=${n??a} @click=${this.handleCalciteActionClick} role=menu tabindex=-1><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></calcite-popover>`}render(){return l`${this.renderMenuButton()}${this.renderMenuItems()}<slot name=${d.tooltip} @slotchange=${this.updateTooltip}></slot>`}};E("calcite-action-menu",p);export{p as ActionMenu};