@esri/calcite-components/dist/calcite/B77N7ADH.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 D}from"./OQOKN4KP.js";import{a as S,b as O,c as T,d as G}from"./UDVJWOT6.js";import{a as u}from"./M7EAHGE3.js";import"./DY5YDEPG.js";import{d as C}from"./CKRTMNFR.js";import"./5RDOSP2E.js";import"./BEA6KQAT.js";import{n as A,u as f,v as z}from"./3ADX47DD.js";import{d as E}from"./HPN2C7M6.js";import"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as v,F as p,L as w,R as y,c as m,d as h,q as x}from"./BJZTU5BQ.js";var k=({bufferSize:r=0,containerSize:t,itemSizes:e})=>{let o=t-r,i=e.length,a=0;for(let[n,s]of e.entries())if(a=a+s,a>o){i=n;break}else continue;return i},L=({bufferSize:r=0,containerSize:t,itemSizes:e})=>Math.max(e.length-k({bufferSize:r,itemSizes:e,containerSize:t}),0),H={container:"container",actionGroupEnd:"action-group--end"},b={actionsEnd:"actions-end",bottomActions:"bottom-actions",expandTooltip:"expand-tooltip"},M=m`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:inline-flex;align-self:stretch;background:transparent}.container{display:inline-flex;flex:1 1 auto;flex-direction:column;gap:var(--calcite-action-bar-items-space, 0);background-color:var(--calcite-action-bar-background-color, var(--calcite-color-foreground-1))}@keyframes in{0%{opacity:0}to{opacity:1}}:host([floating]) .container{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;overflow:hidden;border-radius:var(--calcite-action-bar-corner-radius, var(--calcite-corner-radius-round));--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--calcite-action-bar-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow))}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]):host([overflow-actions-disabled]) .container{overflow-y:auto}:host([layout=vertical]):host([expanded]) .container{max-inline-size:var(--calcite-action-bar-expanded-max-width, auto)}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm)}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]):host([overflow-actions-disabled]) .container{overflow-x:auto}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=horizontal]) ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:var(--calcite-border-width-sm)}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}`,g=class extends v{constructor(){super(),this.mutationObserver=u("mutation",()=>this.mutationObserverHandler()),this.resize=D(({width:t,height:e})=>{let{expanded:o,expandDisabled:i,layout:a,overflowActionsDisabled:n,actionGroups:s}=this;if(n||a==="vertical"&&!e||a==="horizontal"&&!t)return;let l=this.getItemSizes();this.updateGroups();let c=this.hasActionsEnd||this.hasBottomActions||!i?s.length+1:s.length,d=L({bufferSize:c,containerSize:a==="horizontal"?t:e,itemSizes:l});O({actionGroups:s,expanded:o,overflowCount:d})},w.resize),this.resizeHandler=t=>{let{width:e,height:o}=t.contentRect;this.resize({width:e,height:o})},this.resizeObserver=u("resize",t=>this.resizeHandlerEntries(t)),this.toggleExpand=()=>{this.expanded=!this.expanded,this.calciteActionBarToggle.emit()},this.messages=C(),this.hasActionsEnd=!1,this.hasBottomActions=!1,this.floating=!1,this.expandDisabled=!1,this.expanded=!1,this.layout="vertical",this.overflowActionsDisabled=!1,this.overlayPositioning="absolute",this.scale="m",this.calciteActionBarToggle=x({cancelable:!1}),this.listen("calciteActionMenuOpen",this.actionMenuOpenHandler)}static{this.properties={expandTooltip:[16,{},{state:!0}],hasActionsEnd:[16,{},{state:!0}],hasBottomActions:[16,{},{state:!0}],actionsEndGroupLabel:1,floating:[7,{},{reflect:!0,type:Boolean}],expandDisabled:[7,{},{reflect:!0,type:Boolean}],expanded:[7,{},{reflect:!0,type:Boolean}],layout:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],overflowActionsDisabled:[7,{},{reflect:!0,type:Boolean}],overlayPositioning:[3,{},{reflect:!0}],position:[3,{},{reflect:!0}],scale:[3,{},{reflect:!0}]}}static{this.styles=M}async overflowActions(){this.resize({width:this.el.clientWidth,height:this.el.clientHeight})}async setFocus(){await E(this),A(this.el)}connectedCallback(){super.connectedCallback(),this.updateGroups(),this.overflowActions(),this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0}),this.overflowActionsDisabledHandler(this.overflowActionsDisabled)}willUpdate(t){t.has("expandDisabled")&&(this.hasUpdated||this.expandDisabled!==!1)&&this.overflowActions(),t.has("expanded")&&this.hasUpdated&&this.expandedHandler(),t.has("layout")&&(this.hasUpdated||this.layout!=="vertical")&&this.updateGroups(),t.has("overflowActionsDisabled")&&(this.hasUpdated||this.overflowActionsDisabled!==!1)&&this.overflowActionsDisabledHandler(this.overflowActionsDisabled)}loaded(){this.overflowActions()}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect(),this.resizeObserver?.disconnect()}getItemSizes(){let{el:t,layout:e,expandToggleEl:o}=this,i=S(t);o&&i.push(o);let a=e==="horizontal"?"clientWidth":"clientHeight",n=Math.max(...i.map(s=>s[a]||0));return i.map(s=>s[a]||n)}expandedHandler(){let{el:t,expanded:e}=this;T({el:t,expanded:e}),this.overflowActions()}overflowActionsDisabledHandler(t){if(t){this.resizeObserver?.disconnect();return}this.resizeObserver?.observe(this.el),this.overflowActions()}actionMenuOpenHandler(t){if(t.target.menuOpen){let e=t.composedPath();this.actionGroups?.forEach(o=>{e.includes(o)||(o.menuOpen=!1)})}}mutationObserverHandler(){this.updateGroups(),this.overflowActions()}resizeHandlerEntries(t){t.forEach(this.resizeHandler)}updateGroups(){let t=Array.from(this.el.querySelectorAll("calcite-action-group"));this.actionGroups=t,t.forEach(e=>{e.layout=this.layout,e.scale=this.scale})}handleDefaultSlotChange(){this.updateGroups()}handleActionsEndSlotChange(t){this.hasActionsEnd=f(t)}handleBottomActionsSlotChange(t){this.hasBottomActions=f(t)}handleTooltipSlotChange(t){let e=z(t).filter(o=>o?.matches("calcite-tooltip"));this.expandTooltip=e[0]}renderBottomActionGroup(){let{expanded:t,expandDisabled:e,el:o,position:i,toggleExpand:a,scale:n,layout:s,messages:l,actionsEndGroupLabel:c,overlayPositioning:d}=this,$=e?null:G({collapseLabel:l.collapseLabel,collapseText:l.collapse,el:o,expandLabel:l.expandLabel,expandText:l.expand,expanded:t,position:i,ref:B=>this.expandToggleEl=B,scale:n,toggle:a,tooltip:this.expandTooltip});return h`<calcite-action-group class=${p(H.actionGroupEnd)} .hidden=${this.expandDisabled&&!(this.hasActionsEnd||this.hasBottomActions)} .label=${c} .layout=${s} .overlayPositioning=${d} .scale=${n}><slot name=${b.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot><slot name=${b.bottomActions} @slotchange=${this.handleBottomActionsSlotChange}></slot><slot name=${b.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${$}</calcite-action-group>`}render(){return h`<div class=${p(H.container)}><slot @slotchange=${this.handleDefaultSlotChange}></slot>${this.renderBottomActionGroup()}</div>`}};y("calcite-action-bar",g);export{g as ActionBar};