@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
5 lines (4 loc) • 4.82 kB
JavaScript
/*! 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{c as f,d as y}from"./UDVJWOT6.js";import{a as u}from"./M7EAHGE3.js";import"./DY5YDEPG.js";import{d as b}from"./CKRTMNFR.js";import"./5RDOSP2E.js";import"./BEA6KQAT.js";import{n as h,v as g}from"./3ADX47DD.js";import{d as x}from"./HPN2C7M6.js";import{a as m}from"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as d,F as i,R as p,c as r,d as a,q as c}from"./BJZTU5BQ.js";var v={actionGroupEnd:"action-group--end",container:"container"},O={expandTooltip:"expand-tooltip"},L=r`: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:block} in{0%{opacity:0}to{opacity:1}}:host{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:var(--calcite-action-pad-corner-radius, .125rem);background:transparent}:host([expanded][layout=vertical]) .container{max-inline-size:var(--calcite-action-pad-expanded-max-width, auto)}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:1px}.container{display:inline-flex;flex-direction:column;overflow:hidden;--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(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);gap:var(--calcite-action-pad-items-space, 0);border-radius:calc(var(--calcite-action-pad-corner-radius, .125rem) * 2);background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}.action-group--bottom{flex-grow:1;justify-content:flex-end;padding-block-end:0px}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:1px}:host([hidden]){display:none}[hidden]{display:none}`,n=class extends d{constructor(){super(),this.mutationObserver=u("mutation",()=>this.updateGroups()),this.toggleExpand=()=>{this.expanded=!this.expanded,this.calciteActionPadToggle.emit()},this.messages=b(),this.expandDisabled=!1,this.expanded=!1,this.layout="vertical",this.overlayPositioning="absolute",this.scale="m",this.calciteActionPadToggle=c({cancelable:!1}),this.listen("calciteActionMenuOpen",this.actionMenuOpenHandler)}static{this.properties={expandTooltip:[16,{},{state:!0}],actionsEndGroupLabel:1,expandDisabled:[7,{},{reflect:!0,type:Boolean}],expanded:[7,{},{reflect:!0,type:Boolean}],layout:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],overlayPositioning:[3,{},{reflect:!0}],position:[3,{},{reflect:!0}],scale:[3,{},{reflect:!0}]}}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}static{this.styles=L}async setFocus(){await x(this),h(this.el)}connectedCallback(){super.connectedCallback(),this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0})}async load(){m.deprecated("component",{name:"action-pad",removalVersion:4,suggested:"action-bar"})}willUpdate(t){t.has("expanded")&&this.hasUpdated&&f({el:this.el,expanded:this.expanded}),t.has("layout")&&(this.hasUpdated||this.layout!=="vertical")&&this.updateGroups()}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect()}actionMenuOpenHandler(t){if(t.target.menuOpen){let o=t.composedPath();this.actionGroups?.forEach(e=>{o.includes(e)||(e.menuOpen=!1)})}}updateGroups(){let t=Array.from(this.el.querySelectorAll("calcite-action-group"));this.actionGroups=t,this.setGroupLayout(t)}setGroupLayout(t){t.forEach(o=>o.layout=this.layout)}handleDefaultSlotChange(){this.updateGroups()}handleTooltipSlotChange(t){let o=g(t).filter(e=>e?.matches("calcite-tooltip"));this.expandTooltip=o[0]}renderBottomActionGroup(){let{expanded:t,expandDisabled:o,messages:e,el:w,position:T,toggleExpand:G,scale:s,layout:E,actionsEndGroupLabel:k,overlayPositioning:C}=this,l=o?null:y({collapseLabel:e.collapseLabel,collapseText:e.collapse,el:w,expandLabel:e.expandLabel,expandText:e.expand,expanded:t,position:T,scale:s,toggle:G,tooltip:this.expandTooltip});return l?a`<calcite-action-group class=${i(v.actionGroupEnd)} .label=${k} .layout=${E} .overlayPositioning=${C} .scale=${s}><slot name=${O.expandTooltip} =${this.handleTooltipSlotChange}></slot>${l}</calcite-action-group>`:null}render(){return a`<div class=${i(v.container)}><slot =${this.handleDefaultSlotChange}></slot>${this.renderBottomActionGroup()}</div>`}};p("calcite-action-pad",n);export{n as ActionPad};