@esri/calcite-components/dist/calcite/NYQVKIV5.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 S,b as F}from"./BVJFCLMH.js";import{a as b}from"./YXZ62PQO.js";import{a as I}from"./M7EAHGE3.js";import{d as H}from"./CKRTMNFR.js";import{a as E,b as f}from"./5RDOSP2E.js";import{a as B,d as L}from"./HPN2C7M6.js";import"./JOSABGK6.js";import{a as T}from"./NNVH7JUI.js";import{E as z,F as n,H as c,R as w,c as C,d as e}from"./BJZTU5BQ.js";var i={button:"button",buttonTextVisible:"button--text-visible",buttonCompact:"button--compact",indicatorText:"indicator-text",iconContainer:"icon-container",slotContainer:"slot-container",slotContainerHidden:"slot-container--hidden",textContainer:"text-container",textContainerVisible:"text-container--visible",indicatorWithIcon:"indicator-with-icon",indicatorWithoutIcon:"indicator-without-icon"},O={tooltip:"tooltip"},R=C`: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([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;cursor:pointer;background-color:transparent;--calcite-internal-action-text-color: var(--calcite-color-text-3);border-radius:var(--calcite-action-corner-radius, var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius)) var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius)) var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius)) var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius)))}.interaction-container{border-radius:inherit}:host([drag-handle]){cursor:move;--calcite-internal-action-text-color: var(--calcite-color-border-input);--calcite-internal-action-padding-inline: var(--calcite-spacing-xxs)}.button{border-radius:inherit;position:relative;margin:0;display:flex;inline-size:auto;align-items:center;justify-content:flex-start;border-style:none;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);outline-color:transparent;background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1));color:var(--calcite-action-text-color, var(--calcite-internal-action-text-color));text-align:unset;flex:1 0 auto;cursor:inherit}.button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}.button:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}.icon-container{pointer-events:none;margin:0;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1.5rem}.text-container{margin:0;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:margin;transition-property:inline-size}.text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus{color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)));background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}:host([active]) .button:active{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}:host([loading]) .text-container{opacity:var(--calcite-opacity-disabled)}:host([loading]) calcite-loader[inline]{margin-inline-end:0px}:host([appearance=transparent]):host([active]) .button{background-color:var(--calcite-color-transparent-press)}:host([appearance=transparent]) .button{background-color:transparent;transition-property:box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host([appearance=transparent]) .button:hover{background-color:var(--calcite-color-transparent-hover)}:host([appearance=transparent]) .button:active{background-color:var(--calcite-color-transparent-press)}:host([data-active]) .button{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([scale=s]) .button{font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal);padding-inline:var(--calcite-internal-action-padding-inline, .5rem);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-spacing-xxs))}:host([scale=s]) .button--text-visible .icon-container{margin-inline-end:.5rem}:host([scale=m]) .button{font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal);padding-inline:var(--calcite-internal-action-padding-inline, 1rem);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-spacing-md))}:host([scale=m]) .button--text-visible .icon-container{margin-inline-end:.75rem}:host([scale=l]) .button{font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal);padding-inline:var(--calcite-internal-action-padding-inline, 1.25rem);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-spacing-xl))}:host([scale=l]) .button--text-visible .icon-container{margin-inline-end:1rem}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{inline-size:100%}.indicator-with-icon{position:relative}.indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}.indicator-without-icon{margin-inline:.25rem;inline-size:1rem;position:relative}.indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}.indicator-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;opacity:var(--calcite-opacity-disabled);background-color:var(--calcite-action-background-color, var(--calcite-action-background-color, var(--calcite-color-foreground-1)))}:host([disabled]):host([active]) .button,:host([disabled]):host([active]) .button:hover,:host([disabled]):host([active]) .button:focus{opacity:var(--calcite-opacity-disabled);background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3))))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`,m=class extends z{constructor(){super(...arguments),this.guid=`calcite-action-${T()}`,this.buttonEl=E(),this.buttonId=`${this.guid}-button`,this.indicatorId=`${this.guid}-indicator`,this.mutationObserver=I("mutation",()=>this.requestUpdate()),this.messages=H({blocking:!0}),this.active=!1,this.appearance="solid",this.compact=!1,this.disabled=!1,this.dragHandle=!1,this.iconFlipRtl=!1,this.indicator=!1,this.loading=!1,this.scale="m",this.textEnabled=!1}static{this.properties={active:[7,{},{reflect:!0,type:Boolean}],alignment:[3,{},{reflect:!0}],appearance:[3,{},{reflect:!0}],compact:[7,{},{reflect:!0,type:Boolean}],disabled:[7,{},{reflect:!0,type:Boolean}],dragHandle:[7,{},{reflect:!0,type:Boolean}],icon:[3,{},{reflect:!0}],iconFlipRtl:[7,{},{reflect:!0,type:Boolean}],indicator:[7,{},{reflect:!0,type:Boolean}],label:1,loading:[7,{},{reflect:!0,type:Boolean}],messageOverrides:[0,{},{attribute:!1}],scale:[3,{},{reflect:!0}],text:1,textEnabled:[7,{},{reflect:!0,type:Boolean}]}}static{this.styles=R}async setFocus(){await L(this),this.buttonEl.value?.focus()}connectedCallback(){super.connectedCallback(),this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0})}updated(){S(this)}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect()}handleTooltipSlotChange(t){let o=t.target.assignedElements({flatten:!0}).filter(r=>r?.matches("calcite-tooltip"))[0];o&&(o.referenceElement=this.buttonEl.value)}renderTextContainer(){let{text:t,textEnabled:a}=this,o={[i.textContainer]:!0,[i.textContainerVisible]:a};return t?b("text-container",e`<div class=${n(o)}>${t}</div>`):null}renderIndicatorText(){let{indicator:t,messages:a,indicatorId:o,buttonId:r}=this;return e`<div aria-labelledby=${r??c} aria-live=polite class=${n(i.indicatorText)} id=${o??c} role=region>${t?a.indicator:null}</div>`}renderIconContainer(){let{loading:t,icon:a,scale:o,el:r,iconFlipRtl:d,indicator:p}=this,h=o==="l"?"l":"m",v=t?e`<calcite-loader inline .label=${this.messages.loading} .scale=${h}></calcite-loader>`:null,l=a?e`<calcite-icon class=${n({[i.indicatorWithIcon]:p})} .flipRtl=${d} .icon=${a} .scale=${B(this.scale)}></calcite-icon>`:null,s=v||l,u=s||r.children?.length,g=e`<div class=${n({[i.slotContainer]:!0,[i.slotContainerHidden]:t})}><slot></slot></div>`;return u?b("icon-container",e`<div aria-hidden=true class=${n(i.iconContainer)}>${s}${g}</div>`):null}renderButton(){let{active:t,compact:a,disabled:o,icon:r,loading:d,textEnabled:p,label:h,text:v,indicator:l,indicatorId:s,buttonId:u,messages:g}=this,x=h||v||"",k=l?g.indicatorLabel.replace("{label}",x):x,y={[i.button]:!0,[i.buttonTextVisible]:p,[i.buttonCompact]:a},$=e`${this.renderIconContainer()}${this.renderTextContainer()}${!r&&l&&b("indicator-no-icon",e`<div class=${n(i.indicatorWithoutIcon)}></div>`)||""}`;return this.dragHandle?e`<span aria-controls=${(l?s:null)??c} .ariaBusy=${d} .ariaDisabled=${this.disabled?this.disabled:null} .ariaLabel=${k} .ariaPressed=${t} class=${n(y)} id=${u??c} role=button tabindex=${(this.disabled?null:0)??c} ${f(this.buttonEl)}>${$}</span>`:e`<button aria-controls=${(l?s:null)??c} .ariaBusy=${d} .ariaLabel=${k} .ariaPressed=${t} class=${n(y)} .disabled=${o} id=${u??c} tabindex=${(o?null:0)??c} ${f(this.buttonEl)}>${$}</button>`}render(){return F({disabled:this.disabled,children:e`${this.renderButton()}<slot name=${O.tooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${this.renderIndicatorText()}`})}};w("calcite-action",m);export{m as Action};