@esri/calcite-components/dist/calcite/p-14fee275.entry.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-components/blob/master/LICENSE.md for details.
 * v1.5.0-next.4
 */
import{r as t,h as i,H as e,a as n,c as a,F as o}from"./p-8789682d.js";import{s as r,j as s,f as c,b as l}from"./p-68f223ec.js";import{s as h,a as d,c as m}from"./p-deebcc06.js";import{c as u,d as p}from"./p-743ed09c.js";import{u as f,c as v,s as g,d as b}from"./p-9dd9a26d.js";import{c as y}from"./p-c8e46b02.js";import{C as x}from"./p-9280476e.js";import"./p-d2aa9245.js";import"./p-4929e834.js";const w=["lang","role"],k=new Map;let D;function z(t,i,e=!1){const{el:n}=t,a=e?t.globalAttributes:{};i.filter((t=>!!w.includes(t)&&!!n.hasAttribute(t))).forEach((t=>{const i=n.getAttribute(t);null!==i&&(a[t]=i)})),t.globalAttributes=a}function _(t){t.forEach((({target:t})=>{const[i,e]=k.get(t);z(i,e.attributeFilter)}))}const C=class{constructor(i){t(this,i),this.menuItems=[],this.handleMenuSlotChange=t=>{this.menuItems=r(t),this.setMenuItemLayout(this.menuItems,this.layout)},this.label=void 0,this.layout="horizontal",this.messageOverrides=void 0,this.messages=void 0,this.defaultMessages=void 0,this.effectiveLocale="",this.globalAttributes={role:"menubar"}}handleLayoutChange(t){this.setMenuItemLayout(this.menuItems,t)}onMessagesChange(){}effectiveLocaleChange(){f(this,this.effectiveLocale)}connectedCallback(){u(this),v(this),function(t,i){const{el:e}=t,n={attributeFilter:i};k.set(e,[t,n]),z(t,i,!0),D||(D=y("mutation",_)),D.observe(e,n)}(this,["role"])}async componentWillLoad(){h(this),await g(this)}componentDidLoad(){d(this)}disconnectedCallback(){p(this),b(this),function(t){k.delete(t.el),_(D.takeRecords()),D.disconnect();for(const[t,[,i]]of k.entries())D.observe(t,i)}(this)}async setFocus(){await m(this),this.el.focus()}calciteInternalNavMenuItemKeyEvent(t){const i=t.target,e=t.detail.children,n=t.detail.event.key;t.stopPropagation(),"ArrowDown"===n?"vertical"===i.layout?s(this.menuItems,i,"next",!1):t.detail.isSubmenuOpen&&e[0].setFocus():"ArrowUp"===n?"vertical"===this.layout?s(this.menuItems,i,"previous",!1):t.detail.isSubmenuOpen&&e[e.length-1].setFocus():"ArrowRight"===n?"horizontal"===this.layout?s(this.menuItems,i,"next",!1):t.detail.isSubmenuOpen&&e[0].setFocus():"ArrowLeft"===n?"horizontal"===this.layout?s(this.menuItems,i,"previous",!1):t.detail.isSubmenuOpen&&this.focusParentElement(t.target):"Escape"===n&&this.focusParentElement(t.target),t.preventDefault()}focusParentElement(t){const i=t.parentElement;i&&(c(i),i.open=!1)}setMenuItemLayout(t,i){t.forEach((t=>{t.layout=i,"menubar"===this.globalAttributes.role&&(t.isTopLevelItem=!0,t.topLevelMenuLayout=this.layout)}))}render(){return i(e,null,i("ul",{"aria-label":this.label,...this.globalAttributes},i("slot",{onSlotchange:this.handleMenuSlotChange})))}static get delegatesFocus(){return!0}static get assetsDirs(){return["assets"]}get el(){return n(this)}static get watchers(){return{layout:["handleLayoutChange"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};C.style="@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{display:flex}ul{margin:0px;display:inline-flex;block-size:100%;align-items:center;padding:0px}:host([layout=vertical]) ul{display:flex;inline-size:100%;flex-direction:column}";const L="dropdown-action",I="icon",j="icon--breadcrumb",M="icon--dropdown",A="icon--end",S="icon--start",$=class{constructor(i){t(this,i),this.calciteInternalMenuItemKeyEvent=a(this,"calciteInternalMenuItemKeyEvent",7),this.calciteMenuItemSelect=a(this,"calciteMenuItemSelect",7),this.clickHandler=t=>{(this.href&&t.target===this.dropdownActionEl||!this.href&&this.hasSubmenu)&&(this.open=!this.open),this.selectMenuItem(t)},this.handleMenuItemSlotChange=t=>{this.submenuItems=r(t),this.submenuItems.forEach((t=>{t.topLevelMenuLayout||(t.topLevelMenuLayout=this.topLevelMenuLayout)})),this.hasSubmenu=this.submenuItems.length>0},this.keyDownHandler=async t=>{if(" "===t.key||"Enter"===t.key)this.selectMenuItem(t),this.hasSubmenu&&(!this.href||this.href&&t.target===this.dropdownActionEl)&&(this.open=!this.open),t.preventDefault();else if("Escape"===t.key){if(this.open)return void(this.open=!1);this.calciteInternalMenuItemKeyEvent.emit({event:t}),t.preventDefault()}else if("ArrowDown"===t.key||"ArrowUp"===t.key){if(t.preventDefault(),(t.target===this.dropdownActionEl||!this.href)&&this.hasSubmenu&&!this.open&&"horizontal"===this.layout)return void(this.open=!0);this.calciteInternalMenuItemKeyEvent.emit({event:t,children:this.submenuItems,isSubmenuOpen:this.open&&this.hasSubmenu})}else if("ArrowLeft"===t.key)t.preventDefault(),this.calciteInternalMenuItemKeyEvent.emit({event:t,children:this.submenuItems,isSubmenuOpen:!0});else if("ArrowRight"===t.key){if(t.preventDefault(),(t.target===this.dropdownActionEl||!this.href)&&this.hasSubmenu&&!this.open&&"vertical"===this.layout)return void(this.open=!0);this.calciteInternalMenuItemKeyEvent.emit({event:t,children:this.submenuItems,isSubmenuOpen:this.open&&this.hasSubmenu})}},this.active=void 0,this.breadcrumb=void 0,this.href=void 0,this.iconEnd=void 0,this.iconFlipRtl=void 0,this.iconStart=void 0,this.isTopLevelItem=!1,this.label=void 0,this.layout=void 0,this.messageOverrides=void 0,this.messages=void 0,this.open=!1,this.rel=void 0,this.target=void 0,this.text=void 0,this.topLevelMenuLayout=void 0,this.defaultMessages=void 0,this.effectiveLocale="",this.hasSubmenu=!1,this.submenuItems=void 0}onMessagesChange(){}effectiveLocaleChange(){f(this,this.effectiveLocale)}async setFocus(){await m(this),this.anchorEl.focus()}handleClickOut(t){"vertical"!==this.topLevelMenuLayout&&this.hasSubmenu&&this.open&&!t.composedPath().includes(this.el)&&(this.open=!1)}handleFocusOut(t){"vertical"===this.topLevelMenuLayout||this.el.contains(t.relatedTarget)||(this.open=!1)}connectedCallback(){u(this),v(this)}async componentWillLoad(){h(this),await g(this)}componentDidLoad(){d(this)}disconnectedCallback(){p(this),b(this)}blurHandler(){this.isFocused=!1}focusHandler(t){const i=t.target;this.isFocused=!0,i.open&&!this.open&&(i.open=!1)}selectMenuItem(t){t.target!==this.dropdownActionEl&&this.calciteMenuItemSelect.emit()}renderIconStart(){return i("calcite-icon",{class:`${I} ${S}`,flipRtl:"start"===this.iconFlipRtl||"both"===this.iconFlipRtl,icon:this.iconStart,key:S,scale:"s"})}renderIconEnd(){return i("calcite-icon",{class:`${I} ${A}`,flipRtl:"end"===this.iconFlipRtl||"both"===this.iconFlipRtl,icon:this.iconEnd,key:A,scale:"s"})}renderBreadcrumbIcon(t){return i("calcite-icon",{class:`${I} ${j}`,icon:"rtl"===t?"chevron-left":"chevron-right",key:j,scale:"s"})}renderDropdownIcon(t){return i("calcite-icon",{class:`${I} ${M}`,icon:"vertical"===this.topLevelMenuLayout||this.isTopLevelItem?this.open?"chevron-up":"chevron-down":"rtl"===t?"chevron-left":"chevron-right",key:M,scale:"s"})}renderDropdownAction(t){return i("calcite-action",{class:L,icon:"vertical"===this.topLevelMenuLayout||this.isTopLevelItem?this.open?"chevron-up":"chevron-down":"rtl"===t?"chevron-left":"chevron-right",key:L,onClick:this.clickHandler,onKeyDown:this.keyDownHandler,text:this.messages.open,ref:t=>this.dropdownActionEl=t})}renderSubmenuItems(t){return i("calcite-menu",{class:{"dropdown-menu-items":!0,open:this.open,nested:!this.isTopLevelItem,[x.rtl]:"rtl"===t,"dropdown--vertical":"vertical"===this.topLevelMenuLayout},label:this.messages.submenu,layout:"vertical",role:"menu"},i("slot",{name:"submenu-item",onSlotchange:this.handleMenuItemSlotChange}))}renderItemContent(t){return i(o,null,this.iconStart&&this.renderIconStart(),i("div",{class:"text-container"},i("span",null,this.text)),this.iconEnd&&this.renderIconEnd(),this.breadcrumb?this.renderBreadcrumbIcon(t):null,!this.href&&this.hasSubmenu?this.renderDropdownIcon(t):null)}render(){const t=l(this.el);return i(e,{onBlur:this.blurHandler,onFocus:this.focusHandler},i("li",{class:{container:!0,"parent--vertical":"vertical"===this.topLevelMenuLayout},role:"none"},i("div",{class:"item-content"},i("a",{"aria-current":!!this.isFocused&&"page","aria-expanded":this.open,"aria-haspopup":this.hasSubmenu,"aria-label":this.label,class:{"layout--vertical":"vertical"===this.layout,content:!0},href:this.href,onClick:this.clickHandler,onKeyDown:this.keyDownHandler,rel:this.rel,role:"menuitem",tabIndex:this.isTopLevelItem?0:-1,target:this.target,ref:t=>this.anchorEl=t},this.renderItemContent(t),!this.href||"vertical"!==this.topLevelMenuLayout&&this.isTopLevelItem?null:i("calcite-icon",{class:"hover-href-icon",icon:"rtl"===t?"arrow-left":"arrow-right",scale:"s"})),this.href&&this.hasSubmenu?this.renderDropdownAction(t):null),this.renderSubmenuItems(t)))}static get assetsDirs(){return["assets"]}get el(){return n(this)}static get watchers(){return{messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};$.style='@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:3rem}:host([layout=vertical]){inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);padding-inline:1rem;font-size:var(--calcite-font-size-0);color:var(--calcite-ui-text-2);outline:2px solid transparent;outline-offset:2px;text-decoration:none;border-block-end:0.125rem solid transparent;padding-block-start:0.125rem}.content:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-2)}.content:focus{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-2);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.content:active{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:1rem;border-block-end:0;border-inline-end:0.25rem solid transparent}:host([active]) .content{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-brand)}:host([active]) .content .icon{--calcite-ui-icon-color:var(--calcite-ui-brand)}.icon--start{margin-inline-end:0.75rem}.icon--end{margin-inline-start:0.75rem}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-ui-text-3)}:host([layout=vertical]) .icon--dropdown{inset-inline-start:0.25rem}.icon--breadcrumb{margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-ui-text-3)}:host([breadcrumb]) .content{padding-inline-end:0.75rem}calcite-action{position:relative;block-size:auto;border-inline-start:1px solid var(--calcite-ui-foreground-1)}calcite-action:after{position:absolute;inset-inline-start:-1px;display:block;inline-size:1px;content:"";inset-block:0.75rem;background-color:var(--calcite-ui-border-3)}calcite-action:hover:after{block-size:100%;inset-block:0}.content:focus~calcite-action,.content:hover~calcite-action{color:var(--calcite-ui-text-1);border-inline-start:1px solid var(--calcite-ui-border-3)}.container:hover .dropdown-action{background-color:var(--calcite-ui-foreground-2)}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;border:1px solid var(--calcite-ui-border-3);background:var(--calcite-ui-foreground-1);inset-block-start:100%;z-index:var(--calcite-app-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translateX(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;border-radius:0px;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([slot=submenu-item]) .parent--vertical{padding-inline-start:1.75rem}.dropdown-menu-items.nested.calcite--rtl{transform:translateX(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:0.25rem;margin-inline-start:auto;padding-inline-start:2rem;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-0.25rem;opacity:1}';export{C as calcite_menu,$ as calcite_menu_item}