@esri/calcite-components/dist/calcite/CZ4AEX2O.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 G}from"./FN45KTPK.js";import{a as B}from"./RE7G2NN7.js";import{a as P,c as M,e as L,f as U,h as R}from"./ZAT242GT.js";import{c as V,d as H}from"./JSDTVKI3.js";import{a as b,c as v,e as D,g as u,h as z}from"./YCSOVIAT.js";import{a as F}from"./XE72EHW2.js";import{a as A,b as T}from"./BVJFCLMH.js";import{a as O,b as S}from"./OQOKN4KP.js";import{a as f}from"./M7EAHGE3.js";import{b as w,d as E}from"./CKRTMNFR.js";import{b as d}from"./5RDOSP2E.js";import{u as g}from"./3ADX47DD.js";import{d as k}from"./HPN2C7M6.js";import"./JOSABGK6.js";import{a as C}from"./NNVH7JUI.js";import{E as y,F as r,J as m,R as $,c as I,d as h,h as o,q as c}from"./BJZTU5BQ.js";var W=I`: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{position:relative;display:block}.input-container{position:relative;display:flex;flex:1 1 auto;flex-wrap:nowrap}.input{width:100%;--calcite-input-prefix-size: var(--calcite-autocomplete-input-prefix-size);--calcite-input-suffix-size: var(--calcite-autocomplete-input-suffix-size);--calcite-input-background-color: var(--calcite-autocomplete-input-background-color);--calcite-input-border-color: var(--calcite-autocomplete-input-border-color);--calcite-input-corner-radius: var(--calcite-autocomplete-input-corner-radius);--calcite-input-shadow: var(--calcite-autocomplete-input-shadow);--calcite-input-icon-color: var(--calcite-autocomplete-input-icon-color);--calcite-input-text-color: var(--calcite-autocomplete-input-text-color);--calcite-input-placeholder-text-color: var(--calcite-autocomplete-input-placeholder-text-color);--calcite-input-actions-background-color: var(--calcite-autocomplete-input-actions-background-color);--calcite-input-actions-background-color-hover: var(--calcite-autocomplete-input-actions-background-color-hover);--calcite-input-actions-background-color-press: var(--calcite-autocomplete-input-actions-background-color-press);--calcite-input-actions-icon-color: var(--calcite-autocomplete-input-actions-icon-color);--calcite-input-actions-icon-color-hover: var(--calcite-autocomplete-input-actions-icon-color-hover);--calcite-input-actions-icon-color-press: var(--calcite-autocomplete-input-actions-icon-color-press);--calcite-input-loading-background-color: var(--calcite-autocomplete-input-loading-background-color);--calcite-input-loading-fill-color: var(--calcite-autocomplete-input-loading-fill-color);--calcite-input-prefix-background-color: var(--calcite-autocomplete-input-prefix-background-color);--calcite-input-prefix-text-color: var(--calcite-autocomplete-input-prefix-text-color);--calcite-input-suffix-background-color: var(--calcite-autocomplete-input-suffix-background-color);--calcite-input-suffix-text-color: var(--calcite-autocomplete-input-suffix-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.content-container{box-sizing:border-box;width:100%}.floating-ui-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset,left,opacity;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}.content-container .calcite-floating-ui-anim{max-height:45vh;width:100%;overflow-y:auto;color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-autocomplete-corner-radius, var(--calcite-corner-radius-round))}.content--hidden{display:none}@media (forced-colors: active){.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`,q={contentBottom:"content-bottom",contentTop:"content-top"},l={inputContainer:"input-container",input:"input",contentContainer:"content-container",contentAnimation:"content-animation",content:"content",contentHidden:"content--hidden",floatingUIContainer:"floating-ui-container",floatingUIContainerActive:"floating-ui-container--active",screenReadersOnly:"screen-readers-only"},K={validationMessage:"autocompleteValidationMessage"},N="calcite-autocomplete-item-group",j="calcite-autocomplete-item",x=class extends y{constructor(){super(),this.guid=C(),this.attributeWatch=w(["autofocus","enterkeyhint","inputmode"],this.handleGlobalAttributesChanged),this.inputId=`autocomplete-input-${this.guid}`,this.listId=`autocomplete-list-${this.guid}`,this.messages=E(),this.transitionProp="opacity",this.mutationObserver=f("mutation",()=>this.getAllItemsDebounced()),this.resizeObserver=f("resize",()=>{this.setFloatingElSize()}),this.getAllItemsDebounced=O(this.getAllItems,0),this.activeDescendant="",this.activeIndex=-1,this.hasContentBottom=!1,this.hasContentTop=!1,this.items=[],this.groups=[],this.alignment="start",this.disabled=!1,this.iconFlipRtl=!1,this.loading=!1,this.open=!1,this.overlayPositioning="absolute",this.placement=b,this.readOnly=!1,this.required=!1,this.scale="m",this.status="idle",this.validity={valid:!1,badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1,valueMissing:!1},this.value="",this.calciteAutocompleteBeforeClose=c({cancelable:!1}),this.calciteAutocompleteBeforeOpen=c({cancelable:!1}),this.calciteAutocompleteChange=c({cancelable:!1}),this.calciteAutocompleteClose=c({cancelable:!1}),this.calciteAutocompleteOpen=c({cancelable:!1}),this.calciteAutocompleteTextChange=c({cancelable:!1}),this.calciteAutocompleteTextInput=c({cancelable:!1}),this.listenOn(document,"click",this.documentClickHandler),this.listen("calciteInternalAutocompleteItemSelect",this.handleInternalAutocompleteItemSelect)}static{this.properties={activeDescendant:[16,{},{state:!0}],activeIndex:[16,{},{state:!0}],hasContentBottom:[16,{},{state:!0}],hasContentTop:[16,{},{state:!0}],items:[16,{},{state:!0}],groups:[16,{},{state:!0}],isOpen:[16,{},{state:!0}],enabledItems:[16,{},{state:!0}],alignment:[3,{},{reflect:!0}],autocomplete:[0,{},{attribute:!1}],disabled:[7,{},{reflect:!0,type:Boolean}],flipPlacements:[0,{},{attribute:!1}],form:[3,{},{reflect:!0}],icon:[3,{converter:m},{reflect:!0}],iconFlipRtl:[7,{},{reflect:!0,type:Boolean}],inputValue:1,label:1,loading:[7,{},{reflect:!0,type:Boolean}],maxLength:[11,{},{reflect:!0,type:Number}],messageOverrides:[0,{},{attribute:!1}],minLength:[11,{},{reflect:!0,type:Number}],name:[3,{},{reflect:!0}],open:[7,{},{reflect:!0,type:Boolean}],overlayPositioning:[3,{},{reflect:!0}],pattern:1,placeholder:1,placement:[3,{},{reflect:!0}],prefixText:1,readOnly:[7,{},{reflect:!0,type:Boolean}],required:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],status:[3,{},{reflect:!0}],suffixText:1,validationIcon:[3,{converter:m},{reflect:!0}],validationMessage:1,validity:[0,{},{attribute:!1}],value:1}}static{this.styles=W}get isOpen(){return this.open&&(this.hasContentTop||this.hasContentBottom||this.items.length>0)}get enabledItems(){return this.items.filter(t=>!t.disabled)}async reposition(t=!1){let{floatingEl:e,referenceEl:s,placement:i,overlayPositioning:n,flipPlacements:a}=this;return D(this,{floatingEl:e,referenceEl:s,overlayPositioning:n,placement:i,flipPlacements:a,type:"menu"},t)}async scrollContentTo(t){this.transitionEl?.scrollTo(t)}async selectText(){return this.referenceEl.selectText()}async setFocus(){return await k(this),this.referenceEl.setFocus()}connectedCallback(){super.connectedCallback(),this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0}),V(this),M(this),this.defaultInputValue=this.inputValue||"",this.getAllItemsDebounced(),u(this)}async load(){this.getAllItemsDebounced()}willUpdate(t){t.has("disabled")&&(this.hasUpdated||this.disabled!==!1)&&this.handleDisabledChange(this.disabled),t.has("flipPlacements")&&this.reposition(!0),t.has("open")&&(this.hasUpdated||this.open!==!1)&&this.openHandler(),t.has("overlayPositioning")&&(this.hasUpdated||this.overlayPositioning!=="absolute")&&this.reposition(!0),t.has("placement")&&(this.hasUpdated||this.placement!==b)&&this.reposition(!0);let e=!1;t.has("inputValue")&&(this.hasUpdated||this.inputValue)&&(this.inputValueMatchPattern=this.inputValue&&new RegExp(`(${S(this.inputValue)})`,"i"),this.updateItems(),this.updateGroups(),e=!0),!e&&t.has("scale")&&(this.hasUpdated||this.scale!=="m")&&(this.updateItems(),this.updateGroups(),e=!0),!e&&t.has("activeIndex")&&(this.hasUpdated||this.activeIndex!==-1)&&this.updateItems()}updated(){A(this)}loaded(){U(this,this.value||""),this.defaultInputValue=this.inputValue||"",u(this)}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect(),this.resizeObserver?.disconnect(),H(this),L(this),z(this)}setFloatingElSize(){let{referenceEl:t,floatingEl:e}=this;!t||!e||(e.style.inlineSize=`${t.clientWidth}px`)}handleGlobalAttributesChanged(){this.requestUpdate()}handleDisabledChange(t){t||(this.open=!1)}openHandler(){if(F(this),this.open||(this.activeIndex=-1),this.disabled){this.open=!1;return}this.setFloatingElSize(),this.reposition(!0)}async documentClickHandler(t){this.disabled||t.composedPath().includes(this.el)||(this.open=!1)}async handleInternalAutocompleteItemSelect(t){this.value=t.target.value,t.stopPropagation(),this.emitChange(),await this.setFocus(),this.open=!1}onLabelClick(){this.setFocus()}onFormReset(){this.inputValue=this.defaultInputValue}onBeforeOpen(){this.calciteAutocompleteBeforeOpen.emit()}onOpen(){this.calciteAutocompleteOpen.emit()}onBeforeClose(){this.calciteAutocompleteBeforeClose.emit()}onClose(){this.calciteAutocompleteClose.emit()}emitChange(){this.calciteAutocompleteChange.emit()}updateGroups(){this.groups.forEach((t,e,s)=>{t.scale=this.scale,e===0&&(t.disableSpacing=!0);let i=s[e+1];i&&(i.disableSpacing=t.children.length===0)})}updateItems(){let t=null;this.items.forEach(e=>{e.scale=this.scale,e.inputValueMatchPattern=this.inputValueMatchPattern}),this.enabledItems.forEach((e,s)=>{let i=s===this.activeIndex;i&&(t=e.guid),e.active=i}),this.activeDescendant=t}handleInputFocus(){this.open=!0}handleContentTopSlotChange(t){this.hasContentTop=g(t)}handleContentBottomSlotChange(t){this.hasContentBottom=g(t)}getAllItems(){let{el:t}=this;this.groups=Array.from(t.querySelectorAll(N)),this.items=Array.from(t.querySelectorAll(j)),this.updateItems(),this.updateGroups()}setReferenceEl(t){this.referenceEl=t,t&&(this.resizeObserver?.observe(t),u(this))}keyDownHandler(t){let{defaultPrevented:e,key:s}=t;if(e)return;let{open:i,activeIndex:n,enabledItems:a}=this,p=a.length&&n>-1?a[n]:null;switch(s){case"Escape":i&&(this.open=!1,t.preventDefault());break;case"Tab":this.open=!1;break;case"Enter":i&&p?(this.value=p.value,this.emitChange(),this.open=!1,t.preventDefault()):t.defaultPrevented||P(this)&&t.preventDefault();break;case"ArrowDown":a.length&&(this.open=!0,this.activeIndex=n!==-1?Math.min(n+1,a.length-1):0,this.scrollToActiveItem(),t.preventDefault());break;case"ArrowUp":a.length&&(this.open=!0,this.activeIndex=n!==-1?Math.max(n-1,0):a.length-1,this.scrollToActiveItem(),t.preventDefault());break;case"Home":a.length&&(this.open=!0,this.activeIndex=0,this.scrollToActiveItem(),t.preventDefault());break;case"End":a.length&&(this.open=!0,this.activeIndex=a.length-1,this.scrollToActiveItem(),t.preventDefault());break}}scrollToActiveItem(){this.enabledItems[this.activeIndex]?.scrollIntoView({block:"nearest"})}changeHandler(t){t.stopPropagation(),this.inputValue=t.target.value,this.calciteAutocompleteTextChange.emit()}inputClickHandler(t){t.defaultPrevented||(this.open=!0)}inputHandler(t){t.stopPropagation(),this.inputValue=t.target.value,this.open=this.inputValue?.length>0,this.calciteAutocompleteTextInput.emit()}setFloatingEl(t){this.floatingEl=t,u(this)}setTransitionEl(t){t&&(this.transitionEl=t)}render(){let{disabled:t,listId:e,inputId:s,isOpen:i}=this,n=this.el.autofocus,a=this.el.enterKeyHint,p=this.el.inputMode;return T({disabled:t,children:h`<div class=${r(l.inputContainer)}><calcite-input .alignment=${this.alignment} aria-activedescendant=${this.activeDescendant??o} aria-controls=${e??o} aria-owns=${e??o} aria-autocomplete=list .ariaExpanded=${i} aria-haspopup=listbox .autocomplete=${this.autocomplete} .autofocus=${n} class=${r(l.input)} clearable .disabled=${t} enterkeyhint=${a??o} .form=${this.form} .icon=${this.icon??!0} .iconFlipRtl=${this.iconFlipRtl} id=${s??o} inputmode=${p??o} .label=${this.label} .loading=${this.loading} .maxLength=${this.maxLength} .messageOverrides=${this.messages} .minLength=${this.minLength} .name=${this.name} @click=${this.inputClickHandler} @keydown=${this.keyDownHandler} @calciteInputChange=${this.changeHandler} @calciteInputInput=${this.inputHandler} @calciteInternalInputFocus=${this.handleInputFocus} .pattern=${this.pattern} .placeholder=${this.placeholder} .prefixText=${this.prefixText} .readOnly=${this.readOnly} role=combobox .scale=${this.scale} .status=${this.status} .suffixText=${this.suffixText} type=search .value=${this.inputValue} ${d(this.setReferenceEl)}></calcite-input>${this.renderListBox()}<div class=${r({[l.contentContainer]:!0,[l.floatingUIContainer]:!0,[l.floatingUIContainerActive]:i})} ${d(this.setFloatingEl)}><div class=${r({[l.contentAnimation]:!0,[v.animation]:!0,[v.animationActive]:i})} ${d(this.setTransitionEl)}><div class=${r({[l.content]:!0,[l.contentHidden]:!i})}><slot name=${q.contentTop} @slotchange=${this.handleContentTopSlotChange}></slot><slot aria-hidden=true></slot><slot name=${q.contentBottom} @slotchange=${this.handleContentBottomSlotChange}></slot></div></div></div></div>${R({component:this})}${this.validationMessage&&this.status==="invalid"?G({icon:this.validationIcon,id:K.validationMessage,message:this.validationMessage,scale:this.scale,status:this.status}):null}`})}renderListBox(){return h`<ul aria-labelledby=${this.inputId??o} class=${r(l.screenReadersOnly)} id=${this.listId??o} role=listbox tabindex=-1>${this.renderListBoxOptions()}</ul>`}renderListBoxOptions(){return B(this.items.filter(t=>!!(t.label||t.heading)),t=>t.guid,t=>h`<li .ariaDisabled=${t.disabled} .ariaLabel=${t.label} id=${t.guid??o} role=option tabindex=-1>${t.heading}${t.description}</li>`)}};$("calcite-autocomplete",x);export{x as Autocomplete};