@esri/calcite-components/dist/calcite/PRJLETOI.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{d as fe}from"./GNQ46GQA.js";import{a as ge,b as xe}from"./KJINCV7A.js";import{a as be}from"./NZJMPPJZ.js";import{a as T,b as O,c,d as M,f as V,g as Ie,h as z,j as v,k as S}from"./ZCIGG4BA.js";import{a as me}from"./FN45KTPK.js";import{a as re,c as he,e as de,f as pe,h as ue}from"./ZAT242GT.js";import{c as ae,d as ne,e as ce}from"./JSDTVKI3.js";import{a as te,c as F,d as ie,e as se,f as le,g as $,h as oe}from"./YCSOVIAT.js";import{a as ee}from"./XE72EHW2.js";import{a as J,b as K}from"./BVJFCLMH.js";import{a as g}from"./YXZ62PQO.js";import{a as Y,b as Z}from"./OQOKN4KP.js";import{a as k}from"./M7EAHGE3.js";import{d as Q}from"./CKRTMNFR.js";import{a as A,b as m}from"./5RDOSP2E.js";import{f as C,i as j}from"./3ADX47DD.js";import{a as D,c as H,d as X}from"./HPN2C7M6.js";import"./JOSABGK6.js";import{a as N}from"./NNVH7JUI.js";import{D as U,E as G,F as r,J as W,L as _,R as q,c as L,d,h as u,q as b}from"./BJZTU5BQ.js";var we=L`: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}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-internal-combobox-spacing-unit-l: .5rem;--calcite-internal-combobox-spacing-unit-s: .25rem;--calcite-combobox-input-height: 1rem;--calcite-internal-combobox-input-margin-block: calc(.25rem - 1px) ;--calcite-internal-close-size: 1rem}:host([scale=s]) .x-button{margin-inline:.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-internal-combobox-spacing-unit-l: .75rem;--calcite-internal-combobox-spacing-unit-s: .5rem;--calcite-combobox-input-height: 1rem;--calcite-internal-combobox-input-margin-block: calc(.5rem - 1px) ;--calcite-internal-close-size: 1.5rem}:host([scale=m]) .x-button{margin-inline-end:.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-internal-combobox-spacing-unit-l: 1rem;--calcite-internal-combobox-spacing-unit-s: .75rem;--calcite-combobox-input-height: 1.5rem;--calcite-internal-combobox-input-margin-block: calc(.625rem - 1px) ;--calcite-internal-close-size: 2rem}:host([scale=l]) .x-button{margin-inline-end:1rem}.x-button{align-self:center}.wrapper{display:flex;border-width:1px;border-style:solid;outline-color:transparent;padding-block:calc(var(--calcite-internal-combobox-spacing-unit-s) / 4);padding-inline:var(--calcite-internal-combobox-spacing-unit-l);background-color:var(--calcite-combobox-input-background-color, var(--calcite-color-foreground-1));color:var(--calcite-combobox-input-text-color, var(--calcite-color-text-1));border-color:var(--calcite-combobox-input-border-color, var(--calcite-color-border-input))}.wrapper:hover .icon{color:var(--calcite-combobox-icon-color-hover, var(--calcite-color-text-1))}:host(:focus-within) .wrapper,.wrapper--active{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([read-only]) .wrapper{background-color:var(--calcite-color-background)}:host([read-only]) .label{font-weight:var(--calcite-font-weight-medium)}:host([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.wrapper--single{padding-block:0;padding-inline:var(--calcite-internal-combobox-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;gap:var(--calcite-internal-combobox-spacing-unit-s);margin-inline-end:var(--calcite-internal-combobox-spacing-unit-s)}.grid-input.selection-display--fit,.grid-input.selection-display--single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;appearance:none;overflow:hidden;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-internal-combobox-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:placeholder-shown{text-overflow:ellipsis}.input--single{padding:0;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;width:0px;min-width:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-internal-combobox-spacing-unit-l)}.placeholder-icon{color:var(--calcite-combobox-icon-color, var(--calcite-color-text-3))}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;max-width:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-internal-combobox-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.icon-end .icon{color:var(--calcite-combobox-icon-color, var(--calcite-color-text-3))}.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}@media (forced-colors: active){.wrapper,.floating-ui-container{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}.list-container{max-height:45vh;overflow-y:auto;inline-size:var(--calcite-dropdown-width, 100%);background-color:var(--calcite-combobox-background-color, var(--calcite-color-foreground-1))}.list{margin:0;display:block;padding:0}.list--hide{height:0px;overflow:hidden}calcite-chip{--calcite-animation-timing: 0}.chip{margin-block:calc(var(--calcite-internal-combobox-spacing-unit-s) / 4);max-inline-size:100%}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}.select-all{background-color:var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-1));border-block-end-color:var(--calcite-combobox-item-border-color, var(--calcite-color-border-3));border-block-end-style:solid;border-block-end-width:var(--calcite-border-width-sm);inset-block-start:0;position:sticky;z-index:var(--calcite-z-index-sticky)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.x-button{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;border-style:none;cursor:pointer;outline-color:transparent;align-items:center;margin:0;background-color:var(--calcite-close-background-color, var(--calcite-color-foreground-2));-webkit-appearance:none;display:flex;align-content:center;justify-content:center;color:var(--calcite-close-icon-color, var(--calcite-color-text-3));block-size:var(--calcite-internal-close-size, 1.5rem);inline-size:var(--calcite-internal-close-size, 1.5rem);min-block-size:var(--calcite-internal-close-size, 1.5rem);min-inline-size:var(--calcite-internal-close-size, 1.5rem);padding:0}.x-button:hover,.x-button:focus{background-color:var(--calcite-close-background-color-hover, var(--calcite-color-foreground-3))}.x-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))))}.x-button:active{background-color:var(--calcite-close-background-color-press, var(--calcite-color-transparent-press))}.x-button calcite-icon{color:inherit}.x-button--round{border-radius:9999px}.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}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-internal-combobox-spacing-unit-l)}::placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-input-placeholder-text-color, var(--calcite-color-text-3))}`,ve="combobox-item-",y="combobox-chip-",Ce="combobox-label-",P="combobox-listbox-",$e="combobox-input-",R=class extends G{constructor(){super(),this.closeButtonEl=A(),this.filterItems=(()=>{let e=(t,i)=>t&&i.some(({el:s})=>t===s);return Y((t,i=!1,s=!0)=>{let l=be([...this.data,...this.groupData],t,this.effectiveFilterProps),o=this.getItemsAndGroups(),a=t==="";o.forEach(n=>{if(a){n.itemHidden=!1;return}let h=!e(n,l);n.itemHidden=h;let[p,w]=n.ancestors;(e(p,l)||e(w,l))&&(n.itemHidden=!1),h||n.ancestors.forEach(f=>f.itemHidden=!1)}),this.filterTextMatchPattern=this.filterText&&new RegExp(`(${Z(this.filterText)})`,"i"),this.filteredItems.forEach(n=>{n.filterTextMatchPattern=this.filterTextMatchPattern}),i&&(this.open=this.filterText.trim().length>0&&this.filteredItems.length>0),s&&this.calciteComboboxFilterChange.emit()},_.filter)})(),this._filterText="",this.getSelectedItems=()=>{if(!this.isMulti()){let e=this.items.find(({selected:t})=>t);return e?[e]:[]}return this.items.filter(e=>e.selected&&(this.selectionMode!=="ancestors"||!z(e))).sort((e,t)=>{let i=this.selectedItems.indexOf(e),s=this.selectedItems.indexOf(t);return i>-1&&s>-1?i-s:s-i})},this.groupItems=[],this.guid=N(),this.ignoreSelectedEventsFlag=!1,this.inputHeight=0,this.internalValueChangeFlag=!1,this.mutationObserver=k("mutation",()=>this.updateItems()),this.onLabelClick=()=>{this.setFocus()},this.transitionProp="opacity",this.placement=te,this.resizeObserver=k("resize",()=>{this.setMaxScrollerHeight(),this.refreshSelectionDisplay()}),this._selectedItems=[],this.textInput=A(),this._value=null,this.messages=Q(),this.activeChipIndex=-1,this.activeDescendant="",this.activeItemIndex=-1,this.compactSelectionDisplay=!1,this.selectedHiddenChipsCount=0,this.selectedVisibleChipsCount=0,this.items=[],this.clearDisabled=!1,this.disabled=!1,this.maxItems=0,this.open=!1,this.overlayPositioning="absolute",this.placeholderIconFlipRtl=!1,this.readOnly=!1,this.required=!1,this.scale="m",this.selectAllEnabled=!1,this.selectionDisplay="all",this.selectionMode="multiple",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.calciteComboboxBeforeClose=b({cancelable:!1}),this.calciteComboboxBeforeOpen=b({cancelable:!1}),this.calciteComboboxChange=b({cancelable:!1}),this.calciteComboboxChipClose=b({cancelable:!1}),this.calciteComboboxClose=b({cancelable:!1}),this.calciteComboboxFilterChange=b({cancelable:!1}),this.calciteComboboxOpen=b({cancelable:!1}),this.listenOn(document,"click",this.documentClickHandler),this.listen("calciteComboboxItemChange",this.calciteComboboxItemChangeHandler),this.listen("calciteInternalComboboxItemChange",this.calciteInternalComboboxItemChangeHandler),this.listen("click",this.comboboxFocusHandler)}static{this.properties={activeChipIndex:[16,{},{state:!0}],activeDescendant:[16,{},{state:!0}],activeItemIndex:[16,{},{state:!0}],compactSelectionDisplay:[16,{},{state:!0}],selectedHiddenChipsCount:[16,{},{state:!0}],selectedVisibleChipsCount:[16,{},{state:!0}],selectAllComboboxItemReferenceEl:[16,{},{state:!0}],items:[16,{},{state:!0}],allSelected:[16,{},{state:!0}],indeterminate:[16,{},{state:!0}],keyboardNavItems:[16,{},{state:!0}],allowCustomValues:[7,{},{reflect:!0,type:Boolean}],clearDisabled:[7,{},{reflect:!0,type:Boolean}],disabled:[7,{},{reflect:!0,type:Boolean}],filterText:[3,{},{reflect:!0}],filterProps:[0,{},{attribute:!1}],filteredItems:[32,{},{attribute:!1,readOnly:!0}],flipPlacements:[0,{},{attribute:!1}],form:[3,{},{reflect:!0}],label:1,maxItems:[11,{},{reflect:!0,type:Number}],messageOverrides:[0,{},{attribute:!1}],name:[3,{},{reflect:!0}],open:[7,{},{reflect:!0,type:Boolean}],overlayPositioning:[3,{},{reflect:!0}],placeholder:1,placeholderIcon:[3,{},{reflect:!0}],placeholderIconFlipRtl:[7,{},{reflect:!0,type:Boolean}],readOnly:[7,{},{reflect:!0,type:Boolean}],required:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],selectAllEnabled:[7,{},{reflect:!0,type:Boolean}],selectedItems:[0,{},{attribute:!1}],selectionDisplay:[3,{},{reflect:!0}],selectionMode:[3,{},{reflect:!0}],status:[3,{},{reflect:!0}],validationIcon:[3,{converter:W},{reflect:!0}],validationMessage:1,validity:[0,{},{attribute:!1}],value:1}}static{this.styles=we}get allSelected(){return this.selectedItems.length===this.items.length}get indeterminate(){return this.selectedItems.length>0&&!this.allSelected}get keyboardNavItems(){let{selectAllComboboxItemReferenceEl:e,items:t}=this;return e?[e,...t.filter(i=>!i.disabled)]:t.filter(i=>!i.disabled)}get filterText(){return this._filterText}set filterText(e){let t=this._filterText;e!==t&&(this._filterText=e,this.filterTextChange(e))}get filteredItems(){return this.keyboardNavItems.filter(e=>!H(e))}get selectedItems(){return this._selectedItems}set selectedItems(e){let t=this._selectedItems;e!==t&&(this._selectedItems=e,this.selectedItemsHandler())}get value(){return this._value}set value(e){let t=this._value;e!==t&&(this._value=e,this.valueHandler(e))}async reposition(e=!1){let{floatingEl:t,referenceEl:i,placement:s,overlayPositioning:l,filteredFlipPlacements:o}=this;return se(this,{floatingEl:t,referenceEl:i,overlayPositioning:l,placement:s,flipPlacements:o,type:"menu"},e)}async setFocus(){await X(this),this.textInput.value?.focus(),this.activeChipIndex=-1,this.activeItemIndex=-1}connectedCallback(){super.connectedCallback(),ae(this),he(this),this.internalValueChangeFlag=!0,this.value=this.getValue(),this.internalValueChangeFlag=!1,this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0}),this.setFilteredPlacements(),$(this)}willUpdate(e){e.has("open")&&(this.hasUpdated||this.open!==!1)&&this.openHandler(),e.has("disabled")&&(this.hasUpdated||this.disabled!==!1)&&this.handleDisabledChange(this.disabled),e.has("maxItems")&&(this.hasUpdated||this.maxItems!==0)&&this.setMaxScrollerHeight(),e.has("overlayPositioning")&&(this.hasUpdated||this.overlayPositioning!=="absolute")&&this.reposition(!0),(e.has("selectionMode")||e.has("scale"))&&this.updateItems(),e.has("flipPlacements")&&this.flipPlacementsHandler()}updated(){this.el.offsetHeight!==this.inputHeight&&(this.reposition(!0),this.inputHeight=this.el.offsetHeight),J(this),this.refreshSelectionDisplay()}loaded(){pe(this,this.getValue()),$(this),this.updateItems(),this.filterItems(this.filterText,!1,!1)}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect(),this.resizeObserver?.disconnect(),ne(this),de(this),oe(this)}emitComboboxChange(){this.calciteComboboxChange.emit()}get effectiveFilterProps(){return this.filterProps?this.filterProps.filter(e=>e!=="el"):["description","label","metadata","shortHeading","textLabel"]}get showingInlineIcon(){let{placeholderIcon:e,selectionMode:t,selectedItems:i,open:s}=this,l=i[0],o=l?.icon,a=v(t);return!s&&l?!!o&&a:!!e&&(!l||a)}filterTextChange(e){this.updateActiveItemIndex(-1),this.filterItems(e,!0)}openHandler(){ee(this),!this.disabled&&this.setMaxScrollerHeight()}handleDisabledChange(e){e||(this.open=!1)}valueHandler(e){this.internalValueChangeFlag||(this.getItems().forEach(t=>{t.selected=Array.isArray(e)?e.includes(t.value):e===t.value}),this.updateItems())}flipPlacementsHandler(){this.setFilteredPlacements(),this.reposition(!0)}selectedItemsHandler(){this.internalValueChangeFlag=!0,this.value=this.getValue(),this.internalValueChangeFlag=!1}async documentClickHandler(e){this.disabled||e.composedPath().includes(this.el)||(await this.componentOnReady(),!this.allowCustomValues&&this.filterText&&(this.clearInputValue(),this.filterItems(""),this.updateActiveItemIndex(-1)),this.allowCustomValues&&this.filterText.trim().length&&this.addCustomChip(this.filterText),this.open=!1)}handleSelectAll(e){e&&this.toggleSelectAll(),this.allSelected&&this.selectedItems.forEach(t=>{let i=this.referenceEl.querySelector(`#${y}${t.guid}`);i&&this.hideChip(i)})}calciteComboboxItemChangeHandler(e){if(this.ignoreSelectedEventsFlag)return;let t=e.target,i=e.composedPath().includes(this.selectAllComboboxItemReferenceEl);this.selectAllEnabled&&this.handleSelectAll(i);let s=this.filteredItems.indexOf(t);this.updateActiveItemIndex(s),this.toggleSelection(t,t.selected),this.selectedItems=this.getSelectedItems()}calciteInternalComboboxItemChangeHandler(e){e.stopPropagation(),this.hasUpdated&&this.updateItems()}clearValue(){this.ignoreSelectedEventsFlag=!0,this.items.forEach(e=>e.selected=!1),this.ignoreSelectedEventsFlag=!1,this.selectedItems=[],this.emitComboboxChange(),this.open=!1,this.updateActiveItemIndex(-1),this.resetText(),this.filterItems(""),this.setFocus()}clearInputValue(){this.textInput.value.value="",this.filterText=""}setFilteredPlacements(){let{el:e,flipPlacements:t}=this;this.filteredFlipPlacements=t?ie(t,e):null}getValue(){let e=this.selectedItems.map(t=>t.value?.toString());return e.length?e.length>1?e:e[0]:""}comboboxInViewport(){let e=this.el.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.right<=(window.innerWidth||document.documentElement.clientWidth)&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)}toggleSelectAll(){let e=!this.allSelected;this.selectedItems=this.items.filter(t=>(t.selected=e,e)),this.emitComboboxChange()}keyDownHandler(e){if(this.readOnly)return;let{key:t}=e;switch(t){case"Tab":this.activeChipIndex=-1,this.activeItemIndex=-1,this.allowCustomValues&&this.filterText?(this.addCustomChip(this.filterText,!0),e.preventDefault()):this.open?(this.open=!1,e.preventDefault()):!this.allowCustomValues&&this.filterText&&(this.clearInputValue(),this.filterItems(""),this.updateActiveItemIndex(-1));break;case"ArrowLeft":(this.activeChipIndex!==-1||this.textInput.value.selectionStart===0)&&(this.previousChip(),e.preventDefault());break;case"ArrowRight":this.activeChipIndex!==-1&&(this.nextChip(),e.preventDefault());break;case"ArrowUp":this.filteredItems.length&&(e.preventDefault(),this.open&&this.shiftActiveItemIndex(-1),this.scrollToActiveOrSelectedItem(),this.comboboxInViewport()||this.el.scrollIntoView()),this.scrollToActiveOrSelectedItem();break;case"ArrowDown":this.filteredItems.length&&(e.preventDefault(),this.open?this.shiftActiveItemIndex(1):(this.open=!0,this.ensureRecentSelectedItemIsActive()),this.scrollToActiveOrSelectedItem(),this.comboboxInViewport()||this.el.scrollIntoView());break;case" ":!this.textInput.value.value&&!e.defaultPrevented&&(this.open||(this.open=!0,this.shiftActiveItemIndex(1)),e.preventDefault());break;case"Home":if(!this.open)return;e.preventDefault(),this.updateActiveItemIndex(0),this.scrollToActiveOrSelectedItem(),this.comboboxInViewport()||this.el.scrollIntoView();break;case"End":if(!this.open)return;e.preventDefault(),this.updateActiveItemIndex(this.filteredItems.length-1),this.scrollToActiveOrSelectedItem(),this.comboboxInViewport()||this.el.scrollIntoView();break;case"Escape":!this.clearDisabled&&!this.open&&this.clearValue(),this.open=!1,e.preventDefault();break;case"Enter":if(this.open&&this.activeItemIndex>-1){let i=this.filteredItems[this.activeItemIndex];this.toggleSelection(i,!i.selected),e.preventDefault(),this.selectAllEnabled&&this.handleSelectAll(i===this.selectAllComboboxItemReferenceEl)}else this.activeChipIndex>-1?(this.removeActiveChip(),e.preventDefault()):this.allowCustomValues&&this.filterText?(this.addCustomChip(this.filterText,!0),e.preventDefault()):e.defaultPrevented||re(this)&&e.preventDefault();break;case"Delete":case"Backspace":{if(this.selectionDisplay==="single"||this.selectionDisplay==="fit"&&this.selectedHiddenChipsCount>0)return;this.activeChipIndex>-1?(e.preventDefault(),this.removeActiveChip()):!this.filterText&&this.isMulti()&&(e.preventDefault(),this.removeLastChip());break}}}onBeforeOpen(){this.scrollToActiveOrSelectedItem(),this.calciteComboboxBeforeOpen.emit()}onOpen(){this.scrollToActiveOrSelectedItem(!0),this.calciteComboboxOpen.emit()}onBeforeClose(){this.calciteComboboxBeforeClose.emit()}onClose(){this.calciteComboboxClose.emit(),le(this)}async setMaxScrollerHeight(){let{listContainerEl:e,open:t,referenceEl:i}=this;if(!e||!t)return;await this.reposition(!0);let s=this.getMaxScrollerHeight();e.style.maxBlockSize=s>0?`${s}px`:"",e.style.inlineSize=`${i.clientWidth}px`,await this.reposition(!0)}calciteChipCloseHandler(e){this.open=!1;let t=this.items.find(i=>i===e);t&&this.toggleSelection(t,!1),this.calciteComboboxChipClose.emit()}clickHandler(e){if(this.readOnly)return;let t=e.composedPath();if(t.some(i=>i.tagName==="CALCITE-CHIP")){this.open=!1,e.preventDefault();return}if(t.some(i=>i.classList?.contains(ge.button))){this.clearValue(),e.preventDefault();return}this.open=!this.open,this.ensureRecentSelectedItemIsActive()}ensureRecentSelectedItemIsActive(){let{selectedItems:e}=this,t=e.length===0?0:this.items.indexOf(e[e.length-1]);this.updateActiveItemIndex(t)}hideChip(e){e.classList.add(c.chipInvisible)}showChip(e){e.classList.remove(c.chipInvisible)}refreshChipDisplay({chipEls:e,availableHorizontalChipElSpace:t,chipContainerElGap:i}){e.forEach(s=>{if(!s.selected)this.hideChip(s);else{let l=C(s);if(l&&l<t){t-=l+i,this.showChip(s);return}}this.hideChip(s)})}async refreshSelectionDisplay(){if(this.componentOnReady(),v(this.selectionMode)||!this.textInput.value)return;let{allSelectedIndicatorChipEl:e,chipContainerEl:t,selectionDisplay:i,placeholder:s,selectedIndicatorChipEl:l,textInput:{value:o}}=this,a=parseInt(getComputedStyle(t).gap.replace("px","")),n=C(t),{fontSize:h,fontFamily:p}=getComputedStyle(o),f=(j(s,`${h} ${p}`)||parseInt(fe))+a,E=C(e),B=C(l),Se=Math.max(E,B);if(this.setCompactSelectionDisplay({chipContainerElGap:a,chipContainerElWidth:n,inputWidth:f,largestSelectedIndicatorChipWidth:Se}),this.allSelected&&this.selectAllEnabled&&this.selectedItems.forEach(I=>{let x=this.referenceEl.querySelector(`#${y}${I.guid}`);x&&this.hideChip(x)}),this.indeterminate&&this.selectedItems.forEach(I=>{let x=this.referenceEl.querySelector(`#${y}${I.guid}`);x&&this.showChip(x)}),i==="fit"){let I=Array.from(this.el.shadowRoot.querySelectorAll("calcite-chip")).filter(ye=>ye.closable),x=Math.round(n-((this.selectedHiddenChipsCount>0?B:0)+a+f+a));this.refreshChipDisplay({availableHorizontalChipElSpace:x,chipContainerElGap:a,chipEls:I}),this.setVisibleAndHiddenChips(I)}}setFloatingEl(e){this.floatingEl=e,$(this)}setCompactSelectionDisplay({chipContainerElGap:e,chipContainerElWidth:t,inputWidth:i,largestSelectedIndicatorChipWidth:s}){let l=Math.round(s+e+i);(!this.maxCompactBreakpoint||this.maxCompactBreakpoint<l)&&(this.maxCompactBreakpoint=l),this.compactSelectionDisplay=t<this.maxCompactBreakpoint}setContainerEl(e){e&&(this.resizeObserver?.observe(e),this.listContainerEl=e,this.transitionEl=e)}setChipContainerEl(e){e&&this.resizeObserver?.observe(e),this.chipContainerEl=e}setReferenceEl(e){this.referenceEl=e,$(this)}setSelectAllComboboxItemReferenceEl(e){this.selectAllComboboxItemReferenceEl=e}setAllSelectedIndicatorChipEl(e){this.allSelectedIndicatorChipEl=e}setSelectedIndicatorChipEl(e){this.selectedIndicatorChipEl=e}setVisibleAndHiddenChips(e){let t=0;e.forEach(s=>{s.selected&&!s.classList.contains(c.chipInvisible)&&t++}),t!==this.selectedVisibleChipsCount&&(this.selectedVisibleChipsCount=t);let i=this.getSelectedItems().length-t;i!==this.selectedHiddenChipsCount&&(this.selectedHiddenChipsCount=i)}getMaxScrollerHeight(){let t=[...this.groupItems,...this.getItems(!0)].filter(o=>!H(o)),{maxItems:i}=this,s=0,l=0;return t.length>=i&&t.forEach(o=>{if(s<i){let a=this.calculateScrollerHeight(o);l+=a,s+=1}}),l}calculateScrollerHeight(e){if(!e)return 0;let t=e.getBoundingClientRect().height,i=`:scope > ${T}, :scope > ${O}`,s=Array.from(e.querySelectorAll(i)).reduce((l,o)=>l+o.getBoundingClientRect().height,0);return t-s}inputHandler(e){let t=e.target.value;this.filterText=t}getItemsAndGroups(){return[...this.groupItems,...this.items]}toggleSelection(e,t){!e||this.selectionMode==="single-persist"&&e.selected&&e.value===this.value&&!t||(this.isMulti()?this.handleMultiSelection(e,t):this.handleSingleSelection(e,t))}handleMultiSelection(e,t){e.selected=t,this.updateAncestors(e),this.selectedItems=this.getSelectedItems(),this.emitComboboxChange(),this.resetText(),this.filterItems("")}handleSingleSelection(e,t){this.ignoreSelectedEventsFlag=!0,this.items.forEach(i=>i.selected=i===e?t:!1),this.ignoreSelectedEventsFlag=!1,this.selectedItems=this.getSelectedItems(),this.emitComboboxChange(),this.textInput.value&&(this.textInput.value.value=S(e)),this.open=!1,this.updateActiveItemIndex(-1),this.resetText(),this.filterItems("")}updateAncestors(e){if(this.selectionMode!=="ancestors")return;let t=V(e),i=Ie(e);e.selected?t.forEach(s=>{s.selected=!0}):(i.forEach(s=>s.selected=!1),[...t].forEach(s=>{z(s)||(s.selected=!1)}))}updateItems(){this.items=this.getItems(),this.groupItems=this.getGroupItems(),this.data=this.getData(),this.groupData=this.getGroupData(),this.updateItemProps(),this.selectedItems=this.getSelectedItems()}updateItemProps(){this.getItems(!0).forEach(e=>{e.selectionMode=this.selectionMode,e.scale=this.scale}),this.groupItems.forEach(e=>e.scale=this.scale),this.allowCustomValues||this.setMaxScrollerHeight(),this.groupItems.forEach((e,t,i)=>{t===0&&(e.afterEmptyGroup=!1);let s=i[t+1];s&&(s.afterEmptyGroup=e.children.length===0)})}getData(){return this.items.map(e=>({description:e.description,filterDisabled:e.filterDisabled,label:e.heading,metadata:e.metadata,shortHeading:e.shortHeading,textLabel:e.textLabel,el:e}))}getGroupData(){return this.groupItems.map(e=>({label:e.label,el:e}))}resetText(){this.textInput.value&&(this.textInput.value.value=""),this.filterText=""}getItems(e=!1){return Array.from(this.el.querySelectorAll(T)).filter(i=>e||!i.disabled)}getGroupItems(){return Array.from(this.el.querySelectorAll(O))}addCustomChip(e,t){let i=this.items.find(s=>(s.heading||s.textLabel)===e);if(i)this.toggleSelection(i,!0);else{let s=document.createElement("calcite-combobox-item");s.value=e,s.heading=e,this.el.prepend(s),this.updateItems(),this.toggleSelection(s,!0),this.open=!0,t&&this.setFocus()}}removeActiveChip(){this.toggleSelection(this.selectedItems[this.activeChipIndex],!1),this.setFocus()}removeLastChip(){this.toggleSelection(this.selectedItems[this.selectedItems.length-1],!1),this.setFocus()}previousChip(){let e=this.selectedItems.length-1,t=this.activeChipIndex;this.activeChipIndex=t===-1?e:Math.max(t-1,0),this.updateActiveItemIndex(-1),this.focusChip()}nextChip(){let e=this.selectedItems.length-1,t=this.activeChipIndex+1;t>e?(this.activeChipIndex=-1,this.setFocus()):(this.activeChipIndex=t,this.focusChip()),this.updateActiveItemIndex(-1)}focusChip(){let e=this.selectedItems[this.activeChipIndex]?.guid;(e?this.referenceEl.querySelector(`#${y}${e}`):null)?.setFocus()}scrollToActiveOrSelectedItem(e=!1){let t=e&&this.selectedItems?.length?this.selectedItems[0]:this.filteredItems[this.activeItemIndex];if(!t)return;t.scrollIntoView({block:"nearest"});let s=this.selectAllComboboxItemReferenceEl?.offsetHeight||0,l=this.listContainerEl,o=t.getBoundingClientRect(),a=l.getBoundingClientRect();o.top<a.top+s&&(l.scrollTop-=a.top+s-o.top)}shiftActiveItemIndex(e){let{length:t}=this.filteredItems,i=(this.activeItemIndex+t+e)%t;this.updateActiveItemIndex(i),this.scrollToActiveOrSelectedItem()}updateActiveItemIndex(e){this.activeItemIndex=e;let t=null;this.filteredItems.forEach((i,s)=>{s===e?(i.active=!0,t=`${ve}${i.guid}`):i.active=!1}),this.activeDescendant=t,this.activeItemIndex>-1&&(this.activeChipIndex=-1)}isMulti(){return!v(this.selectionMode)}comboboxFocusHandler(){this.disabled||this.textInput.value?.focus()}renderChips(){let{activeChipIndex:e,readOnly:t,scale:i,selectionMode:s,messages:l}=this;return this.selectAllEnabled&&this.allSelected?null:this.selectedItems.map((o,a)=>{let n={[c.chip]:!0},h=[...V(o)].reverse(),p=S(o),w=[...h,o].map(E=>S(E)),f=s!=="ancestors"?p:w.join(" / ");return g(p,d`<calcite-chip .appearance=${t?"outline":"solid"} class=${r(n)} .closable=${!t} data-test-id=${`chip-${a}`} .icon=${o.icon} .iconFlipRtl=${o.iconFlipRtl} id=${(o.guid?`${y}${o.guid}`:null)??u} .label=${f} .messageOverrides=${{dismissLabel:l.removeTag}} @focusin=${()=>this.activeChipIndex=a} @calciteChipClose=${()=>this.calciteChipCloseHandler(o)} .scale=${i} .selected=${o.selected} .tabIndex=${e===a?0:-1} title=${f??u} .value=${o.value}>${f}</calcite-chip>`)})}renderAllSelectedIndicatorChip(){let{compactSelectionDisplay:e,scale:t,selectedVisibleChipsCount:i,setAllSelectedIndicatorChipEl:s}=this,l=e?this.messages.all:this.messages.allSelected;return d`<calcite-chip class=${r({chip:!0,[c.chipInvisible]:!(this.allSelected&&!i),[c.allSelected]:!0})} .label=${l} .scale=${t} title=${l??u} value ${m(s)}>${l}</calcite-chip>`}renderSelectedIndicatorChip(){let{compactSelectionDisplay:e,selectionDisplay:t,getSelectedItems:i,scale:s,selectedHiddenChipsCount:l,selectedVisibleChipsCount:o,setSelectedIndicatorChipEl:a}=this,n,h;if(e)n=!0;else if(t==="single"){let p=i().length;this.allSelected?n=!0:p>0?n=!1:n=!0,h=`${p} ${this.messages.selected}`}else t==="fit"&&(n=!!(this.allSelected&&o===0||l===0),h=o>0?`+${l}`:`${l} ${this.messages.selected}`);return d`<calcite-chip class=${r({chip:!0,[c.chipInvisible]:n})} .label=${h} .scale=${s} title=${h??u} value ${m(a)}>${h}</calcite-chip>`}renderSelectedIndicatorChipCompact(){let{compactSelectionDisplay:e,selectionDisplay:t,getSelectedItems:i,scale:s,selectedHiddenChipsCount:l}=this,o,a;if(e){let n=i().length;this.allSelected?o=!0:t==="fit"?(o=!(l>0),a=`${l||0}`):t==="single"&&(o=!(n>0),a=`${n}`)}else o=!0;return d`<calcite-chip class=${r({chip:!0,[c.chipInvisible]:o})} .label=${a} .scale=${s} title=${a??u} value>${a}</calcite-chip>`}renderInput(){let{guid:e,disabled:t,placeholder:i,selectionMode:s,selectedItems:l,open:o}=this,a=v(s),n=l[0],h=!o&&a&&!!n&&!this.filterText;return d`<span class=${r({"input-wrap":!0,"input-wrap--single":a})}>${h&&g("label",d`<span class=${r({[c.label]:!0,[c.labelIcon]:!!n?.icon})}>${S(n)}</span>`)||""}${g("input",d`<input aria-activedescendant=${this.activeDescendant??u} aria-controls=${`${P}${e}`} aria-errormessage=${M.validationMessage} aria-owns=${`${P}${e}`} aria-autocomplete=list .ariaExpanded=${o} aria-haspopup=listbox .ariaInvalid=${this.status==="invalid"} .ariaLabel=${ce(this)} class=${r({[c.input]:!0,"input--single":!0,[c.inputHidden]:h,"input--icon":this.showingInlineIcon&&!!this.placeholderIcon})} data-test-id=input .disabled=${t} .id=${`${$e}${e}`} @focus=${this.comboboxFocusHandler} @input=${this.inputHandler} placeholder=${i??u} .readOnly=${this.readOnly} role=combobox .tabIndex=${this.activeChipIndex===-1?0:-1} type=text .value=${U(this.filterText??"")} ${m(this.textInput)}>`)}</span>`}renderListBoxOptions(){let e=this.filteredItems.map(t=>d`<li .ariaLabel=${t.label} .ariaSelected=${t.selected} id=${(t.guid?`${ve}${t.guid}`:null)??u} role=option tabindex=-1>${t.heading||t.textLabel}</li>`);if(this.selectAllEnabled&&this.selectionMode!=="single"&&this.selectionMode!=="single-persist"){let t=d`<li .ariaLabel=${this.messages.selectAll} .ariaSelected=${this.allSelected} .id=${`${this.guid}-select-all-enabled-screen-reader`} role=option tabindex=-1>${this.messages.selectAll}</li>`;t&&e.unshift(t)}return e}renderFloatingUIContainer(){let{setFloatingEl:e,setContainerEl:t,open:i,scale:s}=this,l={[c.listContainer]:!0,[F.animation]:!0,[F.animationActive]:i};return d`<div aria-hidden=true class=${r(c.floatingUIContainer)} ${m(e)}><div class=${r(l)} ${m(t)}><ul class=${r({list:!0,"list--hide":!i})}>${this.selectAllEnabled&&this.selectionMode!=="single"&&this.selectionMode!=="single-persist"&&d`<calcite-combobox-item class=${r(c.selectAll)} .id=${`${this.guid}-select-all-enabled-interactive`} .indeterminate=${this.indeterminate} .label=${this.messages.selectAll} .scale=${s} .selected=${this.allSelected} tabindex=-1 text-label=${this.messages.selectAll??u} value=select-all ${m(this.setSelectAllComboboxItemReferenceEl)}></calcite-combobox-item>`||""}<slot></slot></ul></div></div>`}renderSelectedOrPlaceholderIcon(){let{open:e,placeholderIcon:t,placeholderIconFlipRtl:i,selectedItems:s}=this,l=s[0],o=l?.icon,a=t&&(e||!l);return this.showingInlineIcon&&g("selected-placeholder-icon",d`<span class="icon-start"><calcite-icon class=${r({[c.selectedIcon]:!a,[c.placeholderIcon]:a})} .flipRtl=${a?i:l.iconFlipRtl} .icon=${a?t:o} .scale=${D(this.scale)}></calcite-icon></span>`)||""}renderChevronIcon(){let{open:e}=this;return g("chevron",d`<span class="icon-end"><calcite-icon class=${r(c.icon)} .icon=${e?"chevron-up":"chevron-down"} .scale=${D(this.scale)}></calcite-icon></span>`)}render(){let{selectionDisplay:e,guid:t,label:i,open:s,readOnly:l}=this,o=v(this.selectionMode),a=e==="all",n=e==="single",h=!o&&e==="fit",p=!this.clearDisabled&&this.value?.length>0;return K({disabled:this.disabled,children:d`<div aria-live=polite class=${r({[c.wrapper]:!0,[c.wrapperSingle]:o||!this.selectedItems.length,[c.wrapperActive]:s})} @click=${this.clickHandler} @keydown=${this.keyDownHandler} ${m(this.setReferenceEl)}>${this.renderSelectedOrPlaceholderIcon()}${g("grid",d`<div class=${r({"grid-input":!0,[c.selectionDisplayFit]:h,[c.selectionDisplaySingle]:n})} ${m(this.setChipContainerEl)}>${!o&&!n&&this.renderChips()||""}${!o&&!n&&this.selectAllEnabled&&this.renderAllSelectedIndicatorChip()||""}${!o&&!a&&[this.renderSelectedIndicatorChip(),this.renderSelectedIndicatorChipCompact(),this.renderAllSelectedIndicatorChip()]||""}<label class=${r(c.screenReadersOnly)} .htmlFor=${`${$e}${t}`} .id=${`${Ce}${t}`}>${i}</label>${this.renderInput()}</div>`)}${!l&&p?g("close-button",xe({disabled:this.disabled,label:this.messages.clear,ref:this.closeButtonEl,scale:this.scale})):null}${!l&&this.renderChevronIcon()||""}</div><ul aria-labelledby=${`${Ce}${t}`} aria-multiselectable=true class=${r(c.screenReadersOnly)} .id=${`${P}${t}`} role=listbox tabindex=-1>${this.renderListBoxOptions()}</ul>${this.renderFloatingUIContainer()}${ue({component:this})}${this.validationMessage&&this.status==="invalid"?me({icon:this.validationIcon,id:M.validationMessage,message:this.validationMessage,scale:this.scale,status:this.status}):null}`})}};q("calcite-combobox",R);export{R as Combobox};