@aquera/nile-elements 2.0.4 → 2.0.5

package/demo/nxtgen.css

@@ -736,6 +736,61 @@
   --ng-colors-bg-success-primary: var(--ng-color-success-50);
   --ng-colors-bg-success-secondary: var(--ng-color-success-100);
   --ng-colors-bg-success-solid: var(--ng-color-success-600);
+  /* Hue semantics — light mode */
+  --ng-colors-bg-teal-primary: var(--ng-color-teal-50);
+  --ng-colors-bg-teal-secondary: var(--ng-color-teal-100);
+  --ng-colors-bg-teal-solid: var(--ng-color-teal-600);
+  --ng-colors-bg-teal-solid-hover: var(--ng-color-teal-700);
+  --ng-colors-border-teal: var(--ng-color-teal-500);
+  --ng-colors-border-teal-subtle: var(--ng-color-teal-300);
+  --ng-colors-fg-teal-primary: var(--ng-color-teal-600);
+  --ng-colors-fg-teal-secondary: var(--ng-color-teal-500);
+  --ng-colors-fg-teal-on-solid: var(--ng-color-base-white);
+  --ng-colors-bg-cyan-primary: var(--ng-color-cyan-50);
+  --ng-colors-bg-cyan-secondary: var(--ng-color-cyan-100);
+  --ng-colors-bg-cyan-solid: var(--ng-color-cyan-600);
+  --ng-colors-bg-cyan-solid-hover: var(--ng-color-cyan-700);
+  --ng-colors-border-cyan: var(--ng-color-cyan-500);
+  --ng-colors-border-cyan-subtle: var(--ng-color-cyan-300);
+  --ng-colors-fg-cyan-primary: var(--ng-color-cyan-600);
+  --ng-colors-fg-cyan-secondary: var(--ng-color-cyan-500);
+  --ng-colors-fg-cyan-on-solid: var(--ng-color-base-white);
+  --ng-colors-bg-rose-primary: var(--ng-color-rose-50);
+  --ng-colors-bg-rose-secondary: var(--ng-color-rose-100);
+  --ng-colors-bg-rose-solid: var(--ng-color-rose-600);
+  --ng-colors-bg-rose-solid-hover: var(--ng-color-rose-700);
+  --ng-colors-border-rose: var(--ng-color-rose-500);
+  --ng-colors-border-rose-subtle: var(--ng-color-rose-300);
+  --ng-colors-fg-rose-primary: var(--ng-color-rose-600);
+  --ng-colors-fg-rose-secondary: var(--ng-color-rose-500);
+  --ng-colors-fg-rose-on-solid: var(--ng-color-base-white);
+  --ng-colors-bg-violet-primary: var(--ng-color-violet-50);
+  --ng-colors-bg-violet-secondary: var(--ng-color-violet-100);
+  --ng-colors-bg-violet-solid: var(--ng-color-violet-600);
+  --ng-colors-bg-violet-solid-hover: var(--ng-color-violet-700);
+  --ng-colors-border-violet: var(--ng-color-violet-500);
+  --ng-colors-border-violet-subtle: var(--ng-color-violet-300);
+  --ng-colors-fg-violet-primary: var(--ng-color-violet-600);
+  --ng-colors-fg-violet-secondary: var(--ng-color-violet-500);
+  --ng-colors-fg-violet-on-solid: var(--ng-color-base-white);
+  --ng-colors-bg-moss-primary: var(--ng-color-moss-50);
+  --ng-colors-bg-moss-secondary: var(--ng-color-moss-100);
+  --ng-colors-bg-moss-solid: var(--ng-color-moss-600);
+  --ng-colors-bg-moss-solid-hover: var(--ng-color-moss-700);
+  --ng-colors-border-moss: var(--ng-color-moss-500);
+  --ng-colors-border-moss-subtle: var(--ng-color-moss-300);
+  --ng-colors-fg-moss-primary: var(--ng-color-moss-600);
+  --ng-colors-fg-moss-secondary: var(--ng-color-moss-500);
+  --ng-colors-fg-moss-on-solid: var(--ng-color-base-white);
+  --ng-colors-bg-greenlight-primary: var(--ng-color-greenlight-50);
+  --ng-colors-bg-greenlight-secondary: var(--ng-color-greenlight-100);
+  --ng-colors-bg-greenlight-solid: var(--ng-color-greenlight-600);
+  --ng-colors-bg-greenlight-solid-hover: var(--ng-color-greenlight-700);
+  --ng-colors-border-greenlight: var(--ng-color-greenlight-500);
+  --ng-colors-border-greenlight-subtle: var(--ng-color-greenlight-300);
+  --ng-colors-fg-greenlight-primary: var(--ng-color-greenlight-600);
+  --ng-colors-fg-greenlight-secondary: var(--ng-color-greenlight-500);
+  --ng-colors-fg-greenlight-on-solid: var(--ng-color-base-white);
   --ng-componentcolors-utility-yellow-50: var(--ng-color-yellow-50);
   --ng-componentcolors-utility-yellow-100: var(--ng-color-yellow-100);
   --ng-componentcolors-utility-yellow-200: var(--ng-color-yellow-200);

package/dist/index.js

@@ -7715,20 +7715,26 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
   /* ── Listbox (dropdown) ── */
 
   .combobox__listbox {
-    display: block;
+    display: flex;
+    flex-direction: column;
     position: relative;
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
-    padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));
-    padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));
-    overscroll-behavior: none;
-    overflow-y: auto;
+    padding: 0;
     max-width: var(--auto-size-available-width);
     max-height: var(--auto-size-available-height);
     box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);
+    overflow: hidden; /* Scrolling is handled by .combobox__options-scroll below */
+    box-sizing: border-box;
+  }
+
+  .combobox__options-scroll {
+    overflow-y: auto;
+    flex: 0 1 auto;
+    min-height: 0;
   }
 
   /* ── Options ── */
@@ -7736,7 +7742,11 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
   .combobox__options {
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     color: rgb(133, 129, 129);
+    display: block;
+    position: relative;
     width: 100%;
+    padding-bottom: 0;
+    box-sizing: border-box;
   }
 
   .combobox__options.loading {
@@ -7790,9 +7800,6 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
   /* ── Top actions (Select All + Selected/All filter toggle) ── */
 
   .combobox__top-actions {
-    position: sticky;
-    top: 0;
-    z-index: 2;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -7847,16 +7854,15 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
   /* ── Footer ── */
 
   .combobox__footer {
-    position: sticky;
-    bottom: 0;
+    flex-shrink: 0;
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
     border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     display: flex;
     flex-direction: row;
-    align-items: flex-start;
-    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
-    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    align-items: center;
     justify-content: space-between;
+    padding: var(--nile-spacing-md, 8px) var(--nile-spacing-lg, 12px);
+    margin-top: 0;
   }
 
   .combobox__footer.loading {
@@ -7914,7 +7920,7 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
 
   /* ── Grid layout ── */
 
-  :host([grid-columns]) .combobox__listbox {
+  :host([grid-columns]) .combobox__options-scroll {
     overflow-y: auto;
   }
 
@@ -7934,8 +7940,11 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
   /* ── Bidirectional grid layout (vertical + horizontal scroll) ── */
 
   .combobox__listbox.combobox__listbox--bidirectional {
-    overflow: auto;
     max-width: none;
+  }
+
+  .combobox__listbox--bidirectional .combobox__options-scroll {
+    overflow: auto;
     scrollbar-width: thin;
     scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary)) transparent;
   }
@@ -8019,6 +8028,8 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
    * header (computed on scroll). */
   .combobox__group-header-slot {
     pointer-events: none;
+    z-index: 3;
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
   }
   .combobox__group-header-slot .combobox__group-header {
     height: 100%;
@@ -8030,6 +8041,8 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
     top: 0;
     z-index: 2;
     pointer-events: none;
+    height: 32px;
+    overflow: hidden;
   }
   .combobox__group-sticky-overlay .combobox__group-header {
     box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
@@ -8111,32 +8124,35 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
           ${e.map((e=>"header"===e.kind?$a.renderGroupHeader(e):$a.renderItem(e.item,t,i,n,o,M,c,u,g,d)))}
         </div>
       </div>
-    `}static renderRowsVirtualized(e,t,i,n,o,r,s,a,l,M,c,u,g){return R`
+    `}static renderRowsVirtualized(e,t,i,n,o,r,s,a,l,M,c,u,g,d,h=-1){return R`
       <div
         part="select-options"
         class="combobox__options ${a?"loading":""}"
       >
         <div style="position:relative;height:${t}px;width:100%;">
-          ${Es(e,(e=>e.key),(e=>{const t=i[e.index];if(!t)return R``;const a=`position:absolute;top:0;left:0;right:0;transform:translateY(${e.start}px);height:${e.size}px;`;return"header"===t.kind?R`
-                  <div style=${a} class="combobox__group-header-slot">
+          ${d??""}
+          ${Es(e,(e=>e.key),(e=>{const t=i[e.index];if(!t)return R``;const a=`position:absolute;top:0;left:0;right:0;transform:translateY(${e.start}px);height:${e.size}px;`;if("header"===t.kind){const i=e.index===h?`${a}visibility:hidden;`:a;return R`
+                  <div style=${i} class="combobox__group-header-slot">
                     ${$a.renderGroupHeader(t)}
                   </div>
-                `:R`
+                `}return R`
                 <div style=${a}>
                   ${$a.renderItem(t.item,n,o,r,s,l,M,c,u,g)}
                 </div>
               `}))}
         </div>
       </div>
-    `}static renderVirtualizedOptions(e,t,i,n,o,r,s,a,l,M,c,u,g,d){const h=e.length>0?e[0].start:0;return R`
+    `}static renderVirtualizedOptions(e,t,i,n,o,r,s,a,l,M,c,u,g){return R`
       <div
         part="select-options"
         class="combobox__options ${a?"loading":""}"
       >
         <div style="position:relative;height:${t}px;width:100%;">
-          <div style="position:absolute;top:0;left:0;width:100%;transform:translateY(${h}px);">
-            ${Es(e,(e=>e.key),(e=>{const t=i[e.index];return $a.renderMeasuredItem(t,e.index,n,o,r,s,l,c,u,g,d)}))}
-          </div>
+          ${Es(e,(e=>e.key),(e=>{const t=i[e.index],a=`position:absolute;top:0;left:0;right:0;transform:translateY(${e.start}px);height:${e.size}px;`;return R`
+                <div style=${a}>
+                  ${$a.renderItem(t,n,o,r,s,l,M,c,u,g)}
+                </div>
+              `}))}
         </div>
       </div>
     `}static renderPlainOptions(e,t,i,n,o,r,s,a,l,M,c,u,g,d,h){return r&&!a&&0===e.length?$a.renderNoResults(s,h):R`
@@ -8165,21 +8181,6 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
           </div>
         </div>
       </div>
-    `}static renderMeasuredItem(e,t,i,n,o,r,s,a,l,M,c){if(!e)return R``;const u=r(e),g=o(e),d=e?.disabled||!1,h=e?.className,N=a?a(e):e?.description??"",p=l?l(e):e?.prefix??"",D=M?M(e):e?.suffix??"";let y=!1;return y=n?Array.isArray(i)&&i.some((e=>String(e)===String(u))):String(Array.isArray(i)?i[0]:i)===String(u),R`
-      <nile-option
-        data-index=${t}
-        value=${u}
-        .selected=${y}
-        .disabled=${d}
-        .showCheckbox=${n}
-        class=${Ae({option:c??!1,[h??""]:!!h})}
-        .description=${N}
-        .isDescriptionEnabled=${c}
-      >
-        ${fe(p)}
-        ${s?fe(g):g}
-        ${fe(D)}
-      </nile-option>
     `}static renderItem(e,t,i,n,o,r,s,a,l,M){if(!e)return R``;const c=o(e),u=n(e),g=e?.disabled||!1,d=e?.className,h=s?s(e):e?.description??"",N=a?a(e):e?.prefix??"",p=l?l(e):e?.suffix??"";let D=!1;return D=i?Array.isArray(t)&&t.some((e=>String(e)===String(c))):String(Array.isArray(t)?t[0]:t)===String(c),R`
       <nile-option
         value=${c}
@@ -8232,7 +8233,7 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
       >
         + Add "${e}"
       </nile-option>
-    `}static shouldUseVirtualizer(e,t=1){return t>1||e.length>=5}}class Ga{constructor(e){this.portalContainer=null,this.originalListboxParent=null,this.measuredPopupHeight=null,this.cleanupAutoUpdate=null,this.currentPlacement="bottom",this.component=e}get portalContainerElement(){return this.portalContainer}createPortalContainer(){const e=document.createElement("div");return e.style.position="absolute",e.style.zIndex="9999",e.style.pointerEvents="none",e.className="nile-combobox-portal",e}async computePosition(){if(!this.portalContainer)return;const e=this.component.combobox||this.component,t=this.portalContainer;try{const i=Hs.findBoundaryElements(e),n=Hs.getOptimalPlacement(e),{x:o,y:r,placement:s}=await zn(e,t,{placement:n,strategy:"fixed",middleware:[pn(4),In({apply:({availableWidth:e,availableHeight:t,elements:i,rects:n})=>{const o=Hs.calculateOptimalHeight(n.reference,window.innerHeight,this.currentPlacement);i.floating.style.maxWidth=`${e}px`,i.floating.style.maxHeight=`${o}px`,i.floating.style.setProperty("--auto-size-available-width",`${e}px`),i.floating.style.setProperty("--auto-size-available-height",`${o}px`)},padding:10,boundary:i}),yn({fallbackPlacements:["bottom","top","bottom-start","top-start"],fallbackStrategy:"bestFit",padding:10,boundary:i}),Dn({padding:10,crossAxis:!0,boundary:i})],platform:dn}),a=e.getBoundingClientRect();Object.assign(t.style,{left:`${o}px`,top:`${r}px`,position:"fixed",pointerEvents:"auto",width:`${a.width}px`}),this.currentPlacement=s;const l=s.split("-")[0];t.className=`nile-combobox-portal combobox__listbox--${l}`}catch{this.fallbackPositioning()}}fallbackPositioning(){if(!this.portalContainer)return;const e=(this.component.combobox||this.component).getBoundingClientRect(),t=window.innerHeight-e.bottom,i=e.top;let n,o,r;i>t?(o=Math.max(i-20,100),n=Math.max(e.top-o-4,10),r="top"):(o=Math.max(t-20,100),n=e.bottom+4,r="bottom"),Object.assign(this.portalContainer.style,{left:`${e.left}px`,top:`${n}px`,width:`${e.width}px`,maxHeight:`${o}px`,pointerEvents:"auto"}),this.portalContainer.className=`nile-combobox-portal combobox__listbox--${r}`,this.portalContainer.style.setProperty("--auto-size-available-height",`${o}px`),this.portalContainer.style.setProperty("--auto-size-available-width",`${e.width}px`)}extractStylesAsCSS(e){return"string"==typeof e?e:Array.isArray(e)?e.map((e=>this.extractStylesAsCSS(e))).join("\n"):e&&"object"==typeof e&&e.cssText?e.cssText:""}injectStyles(){if(!this.portalContainer)return;const e=`nile-combobox-styles-${Math.random().toString(36).substring(2,11)}`;if(document.getElementById(e))return;const t=this.component.constructor.styles;if(!t)return;const i=document.createElement("style");i.id=e,i.textContent=this.extractStylesAsCSS(t),document.head.appendChild(i),this.portalContainer.__injectedStyleId=e}setupPortal(){this.component.portal&&this.component.updateComplete.then((()=>{const e=this.component.shadowRoot?.querySelector("#listbox");e&&(this.originalListboxParent=e.parentElement,this.portalContainer=this.createPortalContainer(),this.portalContainer.appendChild(e),document.body.appendChild(this.portalContainer),this.injectStyles(),e.style.display="",this.computePosition(),this.cleanupAutoUpdate=Nn(this.component,this.portalContainer,(()=>this.computePosition()),{ancestorScroll:!0,ancestorResize:!0,elementResize:!0,layoutShift:!0,animationFrame:!0}))}))}cleanupPortal(){if(this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=null),this.portalContainer&&this.portalContainer.parentNode){const e=this.portalContainer.querySelector("#listbox");e&&this.originalListboxParent&&(this.originalListboxParent.appendChild(e),e.style.display=this.component.portal?"none":"");const t=this.portalContainer.__injectedStyleId;t&&document.getElementById(t)?.remove(),this.portalContainer.parentNode.removeChild(this.portalContainer)}this.portalContainer=null,this.originalListboxParent=null,this.measuredPopupHeight=null,this.currentPlacement="bottom"}updatePosition(){this.component.portal&&this.portalContainer&&this.computePosition()}resetMeasuredHeight(){this.measuredPopupHeight=null}async resetScrollPosition(){await this.component.updateComplete,requestAnimationFrame((()=>{let e=null;if(e=this.component.portal&&this.portalContainer?this.portalContainer.querySelector("#listbox"):this.component.shadowRoot?.querySelector("#listbox"),!e||!e.isConnected)return;e.scrollTop=0;const t=e.querySelector(".virtualized");if(t&&t.isConnected){this.component.filteredData?.length<5?(t.style.overflowY="hidden",t.style.maxHeight="none",e.style.overflowY="hidden",e.style.maxHeight="fit-content"):(t.style.overflowY="auto",t.style.maxHeight="",e.style.overflowY="auto",e.style.maxHeight=""),t.scrollTop=0}const i=e.querySelector("lit-virtualizer");i&&i.isConnected&&(i.scrollTop=0)}))}}function Fa(e){return!!e&&"object"==typeof e&&"group"===e.type&&Array.isArray(e.options)}function Ha(e){let t=0;for(const i of e.options)Fa(i)?t+=Ha(i):t+=1;return t}function Ja(e){const t=[],i=(e,n,o)=>{for(const r of e)Fa(r)?(t.push({kind:"header",id:r.id,label:r.label,prefix:r.prefix,depth:n,optionCount:Ha(r)}),i(r.options,n+1,[...o,r.id])):t.push({kind:"option",item:r,depth:n,parentIds:o})};return i(Array.isArray(e)?e:[],0,[]),t}function Xa(e){const t=[];for(const i of e)"option"===i.kind&&t.push(i);return t}function qa(e,t,i){const n=(t||"").trim().toLowerCase();if(!n){const t=Ja(e);return{rows:t,visibleOptionCount:Xa(t).length}}const o=(e,t)=>{if(Fa(e)){const i=e.label.toLowerCase().includes(n)||t,r=[];for(const t of e.options){const e=o(t,i);e&&r.push(e)}return 0!==r.length||i?{kind:"group",group:e,children:r}:null}return t||(e=>(i(e)||"").toString().toLowerCase().includes(n))(e)?{kind:"option",item:e}:null},r=[];for(const t of e){const e=o(t,!1);e&&r.push(e)}const s=[],a=(e,t,i)=>{for(const n of e)n&&("group"===n.kind?(s.push({kind:"header",id:n.group.id,label:n.group.label,prefix:n.group.prefix,depth:t,optionCount:Ha(n.group)}),a(n.children,t+1,[...i,n.group.id])):s.push({kind:"option",item:n.item,depth:t,parentIds:i}))};return a(r,0,[]),{rows:s,visibleOptionCount:Xa(s).length}}let Ka=class extends Ge{constructor(){super(...arguments),this.formControlController=new Ue(this,{assumeInteractionOn:["nile-blur","nile-input"]}),this.hasSlotController=new Ze(this,"help-text","label"),this.portalManager=new Ga(this),this.searchManager=new Ba,this.scrollElementRef=za(),this.virtualizerCtrl=new Ra(this,{getScrollElement:()=>this.scrollElementRef.value??null,count:0,estimateSize:()=>38,overscan:5}),this.hScrollElementRef=za(),this.hVirtualizerCtrl=new Ra(this,{getScrollElement:()=>this.hScrollElementRef.value??null,count:0,estimateSize:()=>160,horizontal:!0,overscan:3}),this.scrolling=!1,this.keyboardActiveIndex=-1,this.hasFocus=!1,this.displayLabel="",this.selectedOptions=[],this.filteredData=[],this.filteredRows=[],this.originalData=[],this.showNoResults=!1,this.showListbox=!1,this.searchValue="",this.showSelectedOnly=!1,this.selectAllChecked=!1,this.selectAllIndeterminate=!1,this.stickyHeaderIndex=-1,this.name="",this.data=[],this.value="",this.defaultValue="",this.size="medium",this.placeholder="Type to search...",this.multiple=!1,this.label="",this.required=!1,this.disabled=!1,this.open=!1,this.clearable=!1,this.loading=!1,this.optionsLoading=!1,this.disableLocalSearch=!1,this.allowCustomValue=!1,this.acceptUserInput=!1,this.addToSuggestions=!1,this.strict=!1,this.maxTagsVisible=3,this.tagLayout="single-line",this.showFooter=!0,this.selectAllEnabled=!1,this.stickyGroupHeader=!0,this.portal=!1,this.hoist=!1,this.placement="bottom",this.form="",this.helpText="",this.errorMessage="",this.warning=!1,this.error=!1,this.success=!1,this.filled=!1,this.pill=!1,this.noResultsMessage="No result found",this.noResultsSubtitle="Clear search or change filter",this.noDataMessage="No data available",this.autoCompleteOptions=[],this.debounceMs=300,this.allowHtmlLabel=!0,this.enableVisibilityEffect=!1,this.enableTabClose=!1,this.noWidthSync=!1,this.gridColumns=1,this.gridRows=0,this.gridColumnWidth=160,this.lastVirtualizerGrouped=!1}get validity(){return this.valueInput?.validity}get validationMessage(){return this.valueInput?.validationMessage??""}connectedCallback(){super.connectedCallback(),this.open=!1,this.setupBoundHandlers(),this.emit("nile-init"),this.updateComplete.then((()=>{this.autoCompleteOptions.length>0&&0===this.data.length&&(this.data=[...this.autoCompleteOptions]),this.value&&this.data.length>0&&this.syncSelection()}))}disconnectedCallback(){this.removeOpenListeners(),this.visibilityManager?.cleanup(),this.searchManager.cancelDebounce(),this.scrollTimeout&&(clearTimeout(this.scrollTimeout),this.scrollTimeout=void 0),this.portalManager.cleanupPortal()}firstUpdated(e){this.visibilityManager=new fn({host:this,target:this.combobox,enableVisibilityEffect:this.enableVisibilityEffect,enableTabClose:this.enableTabClose,isOpen:()=>this.open,onAnchorOutOfView:()=>{this.hide(),this.emit("nile-visibility-change",{visible:!1,reason:"anchor-out-of-view",name:this.name})},onDocumentHidden:()=>{this.hide(),this.emit("nile-visibility-change",{visible:!1,reason:"document-hidden",name:this.name})},emit:(e,t)=>this.emit(`nile-${e}`,t)})}updated(e){e.has("value")&&this.syncSelection(),this.updateVirtualizerCount()}get isHorizontalGrid(){return this.gridRows>0&&this.gridColumns<=1}get hasGroupedData(){return function(e){if(!Array.isArray(e))return!1;for(const t of e)if(Fa(t))return!0;return!1}(this.originalData.length>0?this.originalData:this.data)}updateStickyHeader(e){if(!this.stickyGroupHeader||!this.hasGroupedData)return void(-1!==this.stickyHeaderIndex&&(this.stickyHeaderIndex=-1));let t=0,i=-1;for(let n=0;n<this.filteredRows.length;n++){const o=this.filteredRows[n],r="header"===o.kind?32:38;if(t>e)break;"header"===o.kind&&(i=n),t+=r}i!==this.stickyHeaderIndex&&(this.stickyHeaderIndex=i)}pruneTreeBySelection(e,t){const i=[];for(const n of e)if(n&&"object"==typeof n&&"group"===n.type&&Array.isArray(n.options)){const e=this.pruneTreeBySelection(n.options,t);e.length>0&&i.push({...n,options:e})}else t.has(String(this.getItemValue(n)))&&i.push(n);return i}get hasActiveFilter(){return!!this.searchValue||this.showSelectedOnly}renderEmptyState(){return this.hasActiveFilter?$a.renderNoResults(this.noResultsMessage,this.noResultsSubtitle):$a.renderNoData(this.noDataMessage)}get isBidirectionalGrid(){return this.gridRows>0&&this.gridColumns>1}get virtualRowCount(){return this.gridColumns>1?Math.ceil(this.filteredData.length/this.gridColumns):this.hasGroupedData?this.filteredRows.length:this.filteredData.length}get virtualColumnCount(){return Math.ceil(this.filteredData.length/Math.max(this.gridRows,1))}updateVirtualizerCount(){if(this.isHorizontalGrid){const e=this.hVirtualizerCtrl.getVirtualizer(),t=this.virtualColumnCount;e.options.count===t&&e.options.estimateSize(0)===this.gridColumnWidth||(e.setOptions({...e.options,count:t,estimateSize:()=>this.gridColumnWidth}),e.measure())}else{const e=this.virtualizerCtrl.getVirtualizer(),t=this.virtualRowCount,i=this.hasGroupedData,n=e.options.count!==t,o=this.lastVirtualizerGrouped!==i;if(n||o){const n=i?e=>"header"===this.filteredRows[e]?.kind?32:38:()=>38;e.setOptions({...e.options,count:t,estimateSize:n}),e.measure(),this.lastVirtualizerGrouped=i}}}getDisplayText(e){return this.renderItemConfig?.getDisplayText?this.renderItemConfig.getDisplayText(e):e?.label||e?.name||e?.toString?.()||""}getItemValue(e){return this.renderItemConfig?.getValue?this.renderItemConfig.getValue(e):e?.value??e}getSearchText(e){return this.renderItemConfig?.getSearchText?this.renderItemConfig.getSearchText(e):this.getDisplayText(e)}getItemDescription(e){return this.renderItemConfig?.getDescription?.(e)??e?.description??""}getItemPrefix(e){return this.renderItemConfig?.getPrefix?.(e)??e?.prefix??""}getItemSuffix(e){return this.renderItemConfig?.getSuffix?.(e)??e?.suffix??""}syncSelection(){const e=this.originalData.length>0?this.originalData:this.data,t=this.hasGroupedData?Xa(Ja(e)).map((e=>e.item)):e;if(this.selectedOptions=Wa.createOptionsFromValues(this.value,t,this.getDisplayText.bind(this),this.renderItemConfig?.getValue),this.multiple)this.displayLabel="";else{const e=this.selectedOptions[0]?.getTextLabel()??"";this.displayLabel=e,e?this.searchValue=e:this.hasFocus||(this.searchValue="")}this.updateValidity(),this.updateSelectAllState()}getSelectableData(){return this.filteredData.filter((e=>!e?.disabled))}updateSelectAllState(){if(!this.multiple)return this.selectAllChecked=!1,void(this.selectAllIndeterminate=!1);const e=this.getSelectableData();if(0===e.length)return this.selectAllChecked=!1,void(this.selectAllIndeterminate=!1);const t=Array.isArray(this.value)?this.value:[],i=new Set(t.map(String)),n=e.reduce(((e,t)=>e+(i.has(String(this.getItemValue(t)))?1:0)),0);0===n?(this.selectAllChecked=!1,this.selectAllIndeterminate=!1):n===e.length?(this.selectAllChecked=!0,this.selectAllIndeterminate=!1):(this.selectAllChecked=!1,this.selectAllIndeterminate=!0)}handleSelectAllToggle(e){if(e.stopPropagation(),e.preventDefault(),!this.multiple||!this.selectAllEnabled)return;const t=this.getSelectableData();if(0===t.length)return;const i=this.selectAllChecked||this.selectAllIndeterminate,n=Array.isArray(this.value)?[...this.value]:[],o=t.map((e=>String(this.getItemValue(e)))),r=new Set(o);let s;if(i)s=n.filter((e=>!r.has(String(e))));else{const e=new Set(n.map(String));o.forEach((t=>e.add(t))),s=Array.from(e)}this.value=s,this.searchValue="",this.syncSelection(),this.filterOptions("",!0),this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name}),this.emit("nile-select-all",{value:this.value,name:this.name,action:i?"deselect-all":"select-all"})}))}setupBoundHandlers(){this.handleDocumentFocusIn=e=>{if(!this.open)return;const t=e.composedPath(),i=t.includes(this),n=this.popup&&t.includes(this.popup),o=this.portal&&this.portalManager.portalContainerElement&&t.includes(this.portalManager.portalContainerElement);i||n||o||this.hide()},this.handleDocumentKeyDown=e=>{(this.open||"ArrowDown"===e.key||"ArrowUp"===e.key||"Enter"===e.key)&&this.onGlobalKeyDown(e)},this.handleDocumentMouseDown=e=>{if(!this.open)return;const t=e.composedPath(),i=t.includes(this),n=this.popup&&t.includes(this.popup),o=this.portal&&this.portalManager.portalContainerElement&&t.includes(this.portalManager.portalContainerElement);i||n||o||this.hide()},this.handleWindowError=e=>{(e.error?.message||e.message||"").includes("Cannot read properties of null (reading 'insertBefore')")&&e.preventDefault()},this.handleWindowResize=()=>this.portalManager.updatePosition(),this.handleWindowScroll=()=>this.portalManager.updatePosition()}addOpenListeners(){document.addEventListener("focusin",this.handleDocumentFocusIn),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown),window.addEventListener("error",this.handleWindowError),this.portal&&(window.addEventListener("resize",this.handleWindowResize),window.addEventListener("scroll",this.handleWindowScroll,!0))}removeOpenListeners(){document.removeEventListener("focusin",this.handleDocumentFocusIn),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown),window.removeEventListener("error",this.handleWindowError),window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("scroll",this.handleWindowScroll,!0)}onInputKeyDown(e){switch(e.key){case"ArrowDown":e.preventDefault(),this.open?this.moveActiveOption(this.gridColumns>1?this.gridColumns:1):this.show();break;case"ArrowUp":e.preventDefault(),this.open?this.moveActiveOption(this.gridColumns>1?-this.gridColumns:-1):this.show();break;case"ArrowRight":this.gridColumns>1&&this.open&&(e.preventDefault(),this.moveActiveOption(1));break;case"ArrowLeft":this.gridColumns>1&&this.open&&(e.preventDefault(),this.moveActiveOption(-1));break;case"Enter":e.preventDefault(),this.open?this.selectActiveOption():this.searchValue.trim()&&(this.acceptUserInput||this.allowCustomValue)?this.addCustomValue(this.searchValue.trim()):this.show();break;case"Escape":this.open&&(e.preventDefault(),e.stopPropagation(),this.hide());break;case"Home":this.open&&(e.preventDefault(),this.setActiveOption(0));break;case"End":this.open&&(e.preventDefault(),this.setActiveOption(this.filteredData.length-1));break;case"Backspace":if(this.multiple&&""===this.searchValue&&this.selectedOptions.length>0){const e=this.selectedOptions[this.selectedOptions.length-1];this.removeTag(e)}break;case"Tab":this.multiple&&this.acceptUserInput&&this.searchValue.trim()&&this.addCustomValue(this.searchValue.trim()),this.open&&this.hide()}}onGlobalKeyDown(e){"Escape"===e.key&&this.open&&(e.preventDefault(),e.stopPropagation(),this.hide(),this.inputElement?.focus({preventScroll:!0}))}getVisibleOptions(){const e=this.portal?this.portalManager.portalContainerElement:this.shadowRoot;return e?e.querySelectorAll("nile-option:not([disabled])"):[]}moveActiveOption(e){const t=this.getVisibleOptions();if(!t.length)return;let i=this.keyboardActiveIndex+e;i<0&&(i=t.length-1),i>=t.length&&(i=0),this.setActiveOption(i)}setActiveOption(e){const t=this.getVisibleOptions();t.length&&(t.forEach(((t,i)=>{const n=t;i===e?(n.setAttribute("aria-current","true"),n.classList.add("combobox__option--active"),n.scrollIntoView?.({block:"nearest"})):(n.removeAttribute("aria-current"),n.classList.remove("combobox__option--active"))})),this.keyboardActiveIndex=e)}selectActiveOption(){const e=this.getVisibleOptions();if(this.keyboardActiveIndex>=0&&this.keyboardActiveIndex<e.length){const t=e[this.keyboardActiveIndex];t&&!t.disabled&&this.handleOptionSelection(t.value)}else this.searchValue.trim()&&(this.allowCustomValue||this.acceptUserInput)&&this.addCustomValue(this.searchValue.trim())}onInputChange(e){e.stopPropagation()}onInputHandler(e){const t=e.target;this.searchValue=t.value,this.open||this.show(),this.emit("nile-input",{value:this.searchValue,name:this.name}),this.disableLocalSearch?this.searchManager.debounceSearch((e=>this.emit("nile-search",{query:e,name:this.name})),this.searchValue,this.debounceMs):this.filterOptions(this.searchValue),this.keyboardActiveIndex=-1}filterOptions(e,t=!1){const i=this.originalData.length>0?this.originalData:this.data;if(this.hasGroupedData){let t=i;if(this.showSelectedOnly){const e=Array.isArray(this.value)?this.value:[this.value],n=new Set(e.map((e=>String(e))));t=this.pruneTreeBySelection(i,n)}const{rows:n}=qa(t,e,this.getSearchText.bind(this));this.filteredRows=n,this.filteredData=Xa(n).map((e=>e.item)),this.showNoResults=0===this.filteredData.length;const o=this.scrollElementRef.value?.scrollTop??0;this.updateStickyHeader(o)}else{let t=i;if(this.showSelectedOnly){const e=Array.isArray(this.value)?this.value:[this.value],n=new Set(e.map((e=>String(e))));t=i.filter((e=>n.has(String(this.getItemValue(e)))))}const{filteredItems:n,showNoResults:o}=this.searchManager.filter(e,t,this.getSearchText.bind(this));this.filteredData=n,this.filteredRows=[],this.showNoResults=o}this.portalManager.resetMeasuredHeight(),t||this.resetScrollPosition(),this.updateSelectAllState(),this.requestUpdate()}onFocusIn(){this.hasFocus=!0,this.emit("nile-focus"),!this.multiple&&this.displayLabel&&(this.searchValue=this.displayLabel,this.requestUpdate(),this.updateComplete.then((()=>{this.inputElement?.select()})))}onFocusOut(){if(this.hasFocus=!1,this.emit("nile-blur"),!this.open&&!this.multiple)if(this.strict){const e=this.originalData.length>0?this.originalData:this.data,t=this.hasGroupedData?Xa(Ja(e)).map((e=>e.item)):e,i=t.find((e=>this.getDisplayText(e).toLowerCase()===this.searchValue.toLowerCase()));if(i){const e=this.getItemValue(i);this.value!==e&&(this.value=e,this.syncSelection(),this.emit("nile-change",{value:this.value,name:this.name}))}else this.searchValue=this.displayLabel}else this.searchValue=this.displayLabel}onTriggerMouseDown(e){if(this.disabled)return;e.composedPath().some((e=>e instanceof Element&&"nile-icon-button"===e.tagName.toLowerCase()))||(e.preventDefault(),this.inputElement?.focus({preventScroll:!0}),this.open?this.hide():this.show())}onOptionClick(e){const t=e.composedPath().find((e=>"NILE-OPTION"===e.tagName));t&&!t.disabled&&this.handleOptionSelection(t.value)}handleOptionSelection(e){const t=this.value;if(this.multiple){const t=Array.isArray(this.value)?this.value:[];this.value=Wa.toggleMultiValue(t,e),this.searchValue="",this.syncSelection(),this.filterOptions("",!0)}else this.value=e,this.syncSelection(),this.searchValue=this.displayLabel,this.hide();JSON.stringify(this.value)!==JSON.stringify(t)&&this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})),this.inputElement?.focus({preventScroll:!0})}addCustomValue(e){if(this.addToSuggestions){const t=this.originalData.length>0?this.originalData:this.data;if(!t.some((t=>String(this.getItemValue(t))===e||this.getDisplayText(t)===e))){const i=this.renderItemConfig?.getValue?{value:e,label:e}:e;this.originalData=[...t,i],this.data=[...this.originalData],this.autoCompleteOptions=[...this.originalData],this.filteredData=[...this.originalData]}}if(this.multiple){const t=Array.isArray(this.value)?this.value:[];t.includes(e)||(this.value=[...t,e])}else this.value=e,this.hide();this.searchValue=this.multiple?"":e,this.syncSelection(),this.filterOptions(this.searchValue),this.emit("nile-tag-add",{value:e,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})}onClearClick(e){e.stopPropagation(),this.value=this.multiple?[]:"",this.searchValue="",this.syncSelection(),this.filterOptions(""),this.emit("nile-clear",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})}removeTag(e){if(this.disabled)return;const t=Array.isArray(this.value)?this.value:[];this.value=Wa.removeValue(t,e.value),this.syncSelection(),this.emit("nile-tag-remove",{value:this.value,name:this.name,removedtagvalue:e.value}),this.emit("nile-change",{value:this.value,name:this.name})}onFooterClick(e){e.stopPropagation(),e.preventDefault()}toggleShowSelected(e){e.stopPropagation(),e.preventDefault(),0!==this.selectedOptions.length&&(this.showSelectedOnly=!this.showSelectedOnly,this.showSelectedOnly&&(this.searchValue=""),this.filterOptions(this.searchValue))}clearAll(){this.showSelectedOnly=!1,this.value=this.multiple?[]:"",this.filterOptions(""),this.syncSelection(),this.emit("nile-change",{value:this.value,name:this.name}),this.emit("nile-clear",{value:this.value,name:this.name}),this.resetScrollPosition()}onScroll(e){const t=e.target;if(this.updateStickyHeader(t.scrollTop),this.showSelectedOnly)return;this.emit("nile-scroll",{scrollTop:t.scrollTop,scrollLeft:t.scrollLeft,name:this.name}),this.scrolling||(this.scrolling=!0,this.emit("nile-scroll-start",{scrollTop:t.scrollTop,scrollLeft:t.scrollLeft,name:this.name})),clearTimeout(this.scrollTimeout),this.scrollTimeout=window.setTimeout((()=>{this.scrolling=!1}),300);Math.ceil(t.scrollTop)>=Math.floor(t.scrollHeight-t.offsetHeight)&&this.emit("nile-scroll-end",{scrollTop:t.scrollTop,scrollLeft:t.scrollLeft,name:this.name,isAtBottom:!0})}async show(){if(!this.open&&!this.disabled)return this.open=!0,Jt(this,"nile-after-show")}async hide(){if(this.open)return this.open=!1,Jt(this,"nile-after-hide")}async handleOpenChange(){this.open&&!this.disabled?(this.visibilityManager?.setup(),this.showListbox=!0,await this.updateComplete,await this.doOpen(),this.portal&&this.portalManager.setupPortal()):(this.visibilityManager?.cleanup(),await this.doClose(),this.showListbox=!1,this.portal&&this.portalManager.cleanupPortal())}async doOpen(){this.emit("nile-show",{value:this.value,name:this.name}),this.addOpenListeners(),this.keyboardActiveIndex=-1,0===this.originalData.length&&this.data.length>0&&(this.originalData=[...this.data]),this.hasGroupedData?this.filterOptions(this.searchValue):(this.filteredData=[...this.originalData.length>0?this.originalData:this.data],this.filteredRows=[],this.showNoResults=0===this.filteredData.length),await Yt(this),this.popup?.popup&&(this.popup.popup.style.visibility="hidden"),this.popup.active=!0,await new Promise((e=>requestAnimationFrame(e))),await new Promise((e=>requestAnimationFrame(e))),this.popup?.popup&&(this.popup.popup.style.visibility="");const{keyframes:e,options:t}=Wt(this,"combobox.show",{dir:"ltr"});await Ct(this.popup.popup,e,t),this.resetScrollPosition(),this.emit("nile-after-show",{value:this.value,name:this.name})}async doClose(){this.emit("nile-hide",{value:this.value,name:this.name}),this.removeOpenListeners(),await Yt(this);const{keyframes:e,options:t}=Wt(this,"combobox.hide",{dir:"ltr"});await Ct(this.popup.popup,e,t),this.popup.active=!1,this.popup?.popup&&(this.popup.popup.style.visibility=""),this.showSelectedOnly=!1,this.portalManager.resetMeasuredHeight(),this.multiple||(this.searchValue=this.displayLabel),this.emit("nile-after-hide",{value:this.value,name:this.name})}handleDisabledChange(){this.disabled&&(this.open=!1,this.handleOpenChange())}handleValueChange(){this.syncSelection(),this.requestUpdate(),this.portal&&this.portalManager.portalContainerElement&&this.portalManager.updatePosition()}handleDataChange(){this.data.length>0&&!this.showSelectedOnly&&(this.originalData=[...this.data]),this.hasGroupedData?this.filterOptions(this.searchValue):(this.filteredData=[...this.data],this.filteredRows=[]),this.syncSelection(),this.updateSelectAllState(),this.optionsLoading||this.loading||0!==this.data.length?this.data.length>0&&(this.showNoResults=!1):this.showNoResults=!0,this.portalManager.resetMeasuredHeight(),this.portal&&this.portalManager.portalContainerElement&&this.portalManager.updatePosition(),this.requestUpdate()}handleAutoCompleteOptionsChange(){this.autoCompleteOptions.length>0&&(this.data=[...this.autoCompleteOptions])}handleSelectAllConfigChange(){this.updateSelectAllState()}handlePortalChange(){this.open&&(this.portal?this.portalManager.setupPortal():this.portalManager.cleanupPortal())}checkValidity(){return this.valueInput.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.valueInput.reportValidity()}setCustomValidity(e){this.valueInput.setCustomValidity(e),this.formControlController.updateValidity()}focus(e){this.inputElement?.focus(e)}blur(){this.inputElement?.blur()}handleInvalid(e){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(e)}updateValidity(){this.updateComplete.then((()=>this.formControlController.updateValidity()))}async resetScrollPosition(){await this.portalManager.resetScrollPosition()}render(){const e=this.hasSlotController.test("label"),t=!!this.label||!!e,i=this.multiple?Array.isArray(this.value)&&this.value.length>0:"string"==typeof this.value&&""!==this.value,n=this.clearable&&!this.disabled&&i,o=!!this.helpText,r=!!this.errorMessage,s=!i;return R`
+    `}static shouldUseVirtualizer(e,t=1){return t>1||e.length>=5}}class Ga{constructor(e){this.portalContainer=null,this.originalListboxParent=null,this.measuredPopupHeight=null,this.cleanupAutoUpdate=null,this.currentPlacement="bottom",this.component=e}get portalContainerElement(){return this.portalContainer}createPortalContainer(){const e=document.createElement("div");return e.style.position="absolute",e.style.zIndex="9999",e.style.pointerEvents="none",e.className="nile-combobox-portal",e}async computePosition(){if(!this.portalContainer)return;const e=this.component.combobox||this.component,t=this.portalContainer;try{const i=Hs.findBoundaryElements(e),n=Hs.getOptimalPlacement(e),{x:o,y:r,placement:s}=await zn(e,t,{placement:n,strategy:"fixed",middleware:[pn(4),In({apply:({availableWidth:e,availableHeight:t,elements:i,rects:n})=>{const o=Hs.calculateOptimalHeight(n.reference,window.innerHeight,this.currentPlacement);i.floating.style.maxWidth=`${e}px`,i.floating.style.maxHeight=`${o}px`,i.floating.style.setProperty("--auto-size-available-width",`${e}px`),i.floating.style.setProperty("--auto-size-available-height",`${o}px`)},padding:10,boundary:i}),yn({fallbackPlacements:["bottom","top","bottom-start","top-start"],fallbackStrategy:"bestFit",padding:10,boundary:i}),Dn({padding:10,crossAxis:!0,boundary:i})],platform:dn}),a=e.getBoundingClientRect();Object.assign(t.style,{left:`${o}px`,top:`${r}px`,position:"fixed",pointerEvents:"auto",width:`${a.width}px`}),this.currentPlacement=s;const l=s.split("-")[0];t.className=`nile-combobox-portal combobox__listbox--${l}`}catch{this.fallbackPositioning()}}fallbackPositioning(){if(!this.portalContainer)return;const e=(this.component.combobox||this.component).getBoundingClientRect(),t=window.innerHeight-e.bottom,i=e.top;let n,o,r;i>t?(o=Math.max(i-20,100),n=Math.max(e.top-o-4,10),r="top"):(o=Math.max(t-20,100),n=e.bottom+4,r="bottom"),Object.assign(this.portalContainer.style,{left:`${e.left}px`,top:`${n}px`,width:`${e.width}px`,maxHeight:`${o}px`,pointerEvents:"auto"}),this.portalContainer.className=`nile-combobox-portal combobox__listbox--${r}`,this.portalContainer.style.setProperty("--auto-size-available-height",`${o}px`),this.portalContainer.style.setProperty("--auto-size-available-width",`${e.width}px`)}extractStylesAsCSS(e){return"string"==typeof e?e:Array.isArray(e)?e.map((e=>this.extractStylesAsCSS(e))).join("\n"):e&&"object"==typeof e&&e.cssText?e.cssText:""}injectStyles(){if(!this.portalContainer)return;const e=`nile-combobox-styles-${Math.random().toString(36).substring(2,11)}`;if(document.getElementById(e))return;const t=this.component.constructor.styles;if(!t)return;const i=document.createElement("style");i.id=e,i.textContent=this.extractStylesAsCSS(t),document.head.appendChild(i),this.portalContainer.__injectedStyleId=e}setupPortal(){this.component.portal&&this.component.updateComplete.then((()=>{const e=this.component.shadowRoot?.querySelector("#listbox");e&&(this.originalListboxParent=e.parentElement,this.portalContainer=this.createPortalContainer(),this.portalContainer.appendChild(e),document.body.appendChild(this.portalContainer),this.injectStyles(),e.style.display="",this.computePosition(),this.cleanupAutoUpdate=Nn(this.component,this.portalContainer,(()=>this.computePosition()),{ancestorScroll:!0,ancestorResize:!0,elementResize:!0,layoutShift:!0,animationFrame:!0}))}))}cleanupPortal(){if(this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=null),this.portalContainer&&this.portalContainer.parentNode){const e=this.portalContainer.querySelector("#listbox");e&&this.originalListboxParent&&(this.originalListboxParent.appendChild(e),e.style.display=this.component.portal?"none":"");const t=this.portalContainer.__injectedStyleId;t&&document.getElementById(t)?.remove(),this.portalContainer.parentNode.removeChild(this.portalContainer)}this.portalContainer=null,this.originalListboxParent=null,this.measuredPopupHeight=null,this.currentPlacement="bottom"}updatePosition(){this.component.portal&&this.portalContainer&&this.computePosition()}resetMeasuredHeight(){this.measuredPopupHeight=null}async resetScrollPosition(){await this.component.updateComplete,requestAnimationFrame((()=>{let e=null;if(e=this.component.portal&&this.portalContainer?this.portalContainer.querySelector("#listbox"):this.component.shadowRoot?.querySelector("#listbox"),!e||!e.isConnected)return;(e.querySelector(".combobox__options-scroll")??e).scrollTop=0}))}}function Fa(e){return!!e&&"object"==typeof e&&"group"===e.type&&Array.isArray(e.options)}function Ha(e){let t=0;for(const i of e.options)Fa(i)?t+=Ha(i):t+=1;return t}function Ja(e){const t=[],i=(e,n,o)=>{for(const r of e)Fa(r)?(t.push({kind:"header",id:r.id,label:r.label,prefix:r.prefix,depth:n,optionCount:Ha(r)}),i(r.options,n+1,[...o,r.id])):t.push({kind:"option",item:r,depth:n,parentIds:o})};return i(Array.isArray(e)?e:[],0,[]),t}function Xa(e){const t=[];for(const i of e)"option"===i.kind&&t.push(i);return t}function qa(e,t,i){const n=(t||"").trim().toLowerCase();if(!n){const t=Ja(e);return{rows:t,visibleOptionCount:Xa(t).length}}const o=(e,t)=>{if(Fa(e)){const i=e.label.toLowerCase().includes(n)||t,r=[];for(const t of e.options){const e=o(t,i);e&&r.push(e)}return 0!==r.length||i?{kind:"group",group:e,children:r}:null}return t||(e=>(i(e)||"").toString().toLowerCase().includes(n))(e)?{kind:"option",item:e}:null},r=[];for(const t of e){const e=o(t,!1);e&&r.push(e)}const s=[],a=(e,t,i)=>{for(const n of e)n&&("group"===n.kind?(s.push({kind:"header",id:n.group.id,label:n.group.label,prefix:n.group.prefix,depth:t,optionCount:Ha(n.group)}),a(n.children,t+1,[...i,n.group.id])):s.push({kind:"option",item:n.item,depth:t,parentIds:i}))};return a(r,0,[]),{rows:s,visibleOptionCount:Xa(s).length}}let Ka=class extends Ge{constructor(){super(...arguments),this.formControlController=new Ue(this,{assumeInteractionOn:["nile-blur","nile-input"]}),this.hasSlotController=new Ze(this,"help-text","label"),this.portalManager=new Ga(this),this.searchManager=new Ba,this.scrollElementRef=za(),this.virtualizerCtrl=new Ra(this,{getScrollElement:()=>this.scrollElementRef.value??null,count:0,estimateSize:()=>38,overscan:5}),this.hScrollElementRef=za(),this.hVirtualizerCtrl=new Ra(this,{getScrollElement:()=>this.hScrollElementRef.value??null,count:0,estimateSize:()=>160,horizontal:!0,overscan:3}),this.scrolling=!1,this.keyboardActiveIndex=-1,this.hasFocus=!1,this.displayLabel="",this.selectedOptions=[],this.filteredData=[],this.filteredRows=[],this.originalData=[],this.showNoResults=!1,this.showListbox=!1,this.searchValue="",this.showSelectedOnly=!1,this.selectAllChecked=!1,this.selectAllIndeterminate=!1,this.stickyHeaderIndex=-1,this.name="",this.data=[],this.value="",this.defaultValue="",this.size="medium",this.placeholder="Type to search...",this.multiple=!1,this.label="",this.required=!1,this.disabled=!1,this.open=!1,this.clearable=!1,this.loading=!1,this.optionsLoading=!1,this.disableLocalSearch=!1,this.allowCustomValue=!1,this.acceptUserInput=!1,this.addToSuggestions=!1,this.strict=!1,this.maxTagsVisible=3,this.tagLayout="single-line",this.showFooter=!0,this.selectAllEnabled=!1,this.stickyGroupHeader=!0,this.portal=!1,this.hoist=!1,this.placement="bottom",this.form="",this.helpText="",this.errorMessage="",this.warning=!1,this.error=!1,this.success=!1,this.filled=!1,this.pill=!1,this.noResultsMessage="No result found",this.noResultsSubtitle="Clear search or change filter",this.noDataMessage="No data available",this.autoCompleteOptions=[],this.debounceMs=300,this.allowHtmlLabel=!0,this.enableVisibilityEffect=!1,this.enableTabClose=!1,this.noWidthSync=!1,this.gridColumns=1,this.gridRows=0,this.gridColumnWidth=160,this.lastVirtualizerGrouped=!1}get validity(){return this.valueInput?.validity}get validationMessage(){return this.valueInput?.validationMessage??""}connectedCallback(){super.connectedCallback(),this.open=!1,this.setupBoundHandlers(),this.emit("nile-init"),this.updateComplete.then((()=>{this.autoCompleteOptions.length>0&&0===this.data.length&&(this.data=[...this.autoCompleteOptions]),this.value&&this.data.length>0&&this.syncSelection()}))}disconnectedCallback(){this.removeOpenListeners(),this.visibilityManager?.cleanup(),this.searchManager.cancelDebounce(),this.scrollTimeout&&(clearTimeout(this.scrollTimeout),this.scrollTimeout=void 0),this.portalManager.cleanupPortal()}firstUpdated(e){this.visibilityManager=new fn({host:this,target:this.combobox,enableVisibilityEffect:this.enableVisibilityEffect,enableTabClose:this.enableTabClose,isOpen:()=>this.open,onAnchorOutOfView:()=>{this.hide(),this.emit("nile-visibility-change",{visible:!1,reason:"anchor-out-of-view",name:this.name})},onDocumentHidden:()=>{this.hide(),this.emit("nile-visibility-change",{visible:!1,reason:"document-hidden",name:this.name})},emit:(e,t)=>this.emit(`nile-${e}`,t)})}updated(e){e.has("value")&&this.syncSelection(),this.updateVirtualizerCount()}get isHorizontalGrid(){return this.gridRows>0&&this.gridColumns<=1}get hasGroupedData(){return function(e){if(!Array.isArray(e))return!1;for(const t of e)if(Fa(t))return!0;return!1}(this.originalData.length>0?this.originalData:this.data)}updateStickyHeader(e){if(!this.stickyGroupHeader||!this.hasGroupedData)return void(-1!==this.stickyHeaderIndex&&(this.stickyHeaderIndex=-1));let t=0,i=-1;for(let n=0;n<this.filteredRows.length;n++){const o=this.filteredRows[n],r="header"===o.kind?32:38;if(t>e)break;"header"===o.kind&&(i=n),t+=r}i!==this.stickyHeaderIndex&&(this.stickyHeaderIndex=i)}pruneTreeBySelection(e,t){const i=[];for(const n of e)if(n&&"object"==typeof n&&"group"===n.type&&Array.isArray(n.options)){const e=this.pruneTreeBySelection(n.options,t);e.length>0&&i.push({...n,options:e})}else t.has(String(this.getItemValue(n)))&&i.push(n);return i}get hasActiveFilter(){return!!this.searchValue||this.showSelectedOnly}renderEmptyState(){return this.hasActiveFilter?$a.renderNoResults(this.noResultsMessage,this.noResultsSubtitle):$a.renderNoData(this.noDataMessage)}get isBidirectionalGrid(){return this.gridRows>0&&this.gridColumns>1}get virtualRowCount(){return this.gridColumns>1?Math.ceil(this.filteredData.length/this.gridColumns):this.hasGroupedData?this.filteredRows.length:this.filteredData.length}get virtualColumnCount(){return Math.ceil(this.filteredData.length/Math.max(this.gridRows,1))}updateVirtualizerCount(){if(this.isHorizontalGrid){const e=this.hVirtualizerCtrl.getVirtualizer(),t=this.virtualColumnCount;e.options.count===t&&e.options.estimateSize(0)===this.gridColumnWidth||(e.setOptions({...e.options,count:t,estimateSize:()=>this.gridColumnWidth}),e.measure())}else{const e=this.virtualizerCtrl.getVirtualizer(),t=this.virtualRowCount,i=this.hasGroupedData,n=e.options.count!==t,o=this.lastVirtualizerGrouped!==i;if(n||o){const n=i?e=>"header"===this.filteredRows[e]?.kind?32:38:()=>38;e.setOptions({...e.options,count:t,estimateSize:n}),e.measure(),this.lastVirtualizerGrouped=i}}}getDisplayText(e){return this.renderItemConfig?.getDisplayText?this.renderItemConfig.getDisplayText(e):e?.label||e?.name||e?.toString?.()||""}getItemValue(e){return this.renderItemConfig?.getValue?this.renderItemConfig.getValue(e):e?.value??e}getSearchText(e){return this.renderItemConfig?.getSearchText?this.renderItemConfig.getSearchText(e):this.getDisplayText(e)}getItemDescription(e){return this.renderItemConfig?.getDescription?.(e)??e?.description??""}getItemPrefix(e){return this.renderItemConfig?.getPrefix?.(e)??e?.prefix??""}getItemSuffix(e){return this.renderItemConfig?.getSuffix?.(e)??e?.suffix??""}syncSelection(){const e=this.originalData.length>0?this.originalData:this.data,t=this.hasGroupedData?Xa(Ja(e)).map((e=>e.item)):e;if(this.selectedOptions=Wa.createOptionsFromValues(this.value,t,this.getDisplayText.bind(this),this.renderItemConfig?.getValue),this.multiple)this.displayLabel="";else{const e=this.selectedOptions[0]?.getTextLabel()??"";this.displayLabel=e,e?this.searchValue=e:this.hasFocus||(this.searchValue="")}this.updateValidity(),this.updateSelectAllState()}getSelectableData(){return this.filteredData.filter((e=>!e?.disabled))}updateSelectAllState(){if(!this.multiple)return this.selectAllChecked=!1,void(this.selectAllIndeterminate=!1);const e=this.getSelectableData();if(0===e.length)return this.selectAllChecked=!1,void(this.selectAllIndeterminate=!1);const t=Array.isArray(this.value)?this.value:[],i=new Set(t.map(String)),n=e.reduce(((e,t)=>e+(i.has(String(this.getItemValue(t)))?1:0)),0);0===n?(this.selectAllChecked=!1,this.selectAllIndeterminate=!1):n===e.length?(this.selectAllChecked=!0,this.selectAllIndeterminate=!1):(this.selectAllChecked=!1,this.selectAllIndeterminate=!0)}handleSelectAllToggle(e){if(e.stopPropagation(),e.preventDefault(),!this.multiple||!this.selectAllEnabled)return;const t=this.getSelectableData();if(0===t.length)return;const i=this.selectAllChecked||this.selectAllIndeterminate,n=Array.isArray(this.value)?[...this.value]:[],o=t.map((e=>String(this.getItemValue(e)))),r=new Set(o);let s;if(i)s=n.filter((e=>!r.has(String(e))));else{const e=new Set(n.map(String));o.forEach((t=>e.add(t))),s=Array.from(e)}this.value=s,this.searchValue="",this.syncSelection(),this.filterOptions("",!0),this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name}),this.emit("nile-select-all",{value:this.value,name:this.name,action:i?"deselect-all":"select-all"})}))}setupBoundHandlers(){this.handleDocumentFocusIn=e=>{if(!this.open)return;const t=e.composedPath(),i=t.includes(this),n=this.popup&&t.includes(this.popup),o=this.portal&&this.portalManager.portalContainerElement&&t.includes(this.portalManager.portalContainerElement);i||n||o||this.hide()},this.handleDocumentKeyDown=e=>{(this.open||"ArrowDown"===e.key||"ArrowUp"===e.key||"Enter"===e.key)&&this.onGlobalKeyDown(e)},this.handleDocumentMouseDown=e=>{if(!this.open)return;const t=e.composedPath(),i=t.includes(this),n=this.popup&&t.includes(this.popup),o=this.portal&&this.portalManager.portalContainerElement&&t.includes(this.portalManager.portalContainerElement);i||n||o||this.hide()},this.handleWindowError=e=>{(e.error?.message||e.message||"").includes("Cannot read properties of null (reading 'insertBefore')")&&e.preventDefault()},this.handleWindowResize=()=>this.portalManager.updatePosition(),this.handleWindowScroll=()=>this.portalManager.updatePosition()}addOpenListeners(){document.addEventListener("focusin",this.handleDocumentFocusIn),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown),window.addEventListener("error",this.handleWindowError),this.portal&&(window.addEventListener("resize",this.handleWindowResize),window.addEventListener("scroll",this.handleWindowScroll,!0))}removeOpenListeners(){document.removeEventListener("focusin",this.handleDocumentFocusIn),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown),window.removeEventListener("error",this.handleWindowError),window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("scroll",this.handleWindowScroll,!0)}onInputKeyDown(e){switch(e.key){case"ArrowDown":e.preventDefault(),this.open?this.moveActiveOption(this.gridColumns>1?this.gridColumns:1):this.show();break;case"ArrowUp":e.preventDefault(),this.open?this.moveActiveOption(this.gridColumns>1?-this.gridColumns:-1):this.show();break;case"ArrowRight":this.gridColumns>1&&this.open&&(e.preventDefault(),this.moveActiveOption(1));break;case"ArrowLeft":this.gridColumns>1&&this.open&&(e.preventDefault(),this.moveActiveOption(-1));break;case"Enter":e.preventDefault(),this.open?this.selectActiveOption():this.searchValue.trim()&&(this.acceptUserInput||this.allowCustomValue)?this.addCustomValue(this.searchValue.trim()):this.show();break;case"Escape":this.open&&(e.preventDefault(),e.stopPropagation(),this.hide());break;case"Home":this.open&&(e.preventDefault(),this.setActiveOption(0));break;case"End":this.open&&(e.preventDefault(),this.setActiveOption(this.filteredData.length-1));break;case"Backspace":if(this.multiple&&""===this.searchValue&&this.selectedOptions.length>0){const e=this.selectedOptions[this.selectedOptions.length-1];this.removeTag(e)}break;case"Tab":this.multiple&&this.acceptUserInput&&this.searchValue.trim()&&this.addCustomValue(this.searchValue.trim()),this.open&&this.hide()}}onGlobalKeyDown(e){"Escape"===e.key&&this.open&&(e.preventDefault(),e.stopPropagation(),this.hide(),this.inputElement?.focus({preventScroll:!0}))}getVisibleOptions(){const e=this.portal?this.portalManager.portalContainerElement:this.shadowRoot;return e?e.querySelectorAll("nile-option:not([disabled])"):[]}moveActiveOption(e){const t=this.getVisibleOptions();if(!t.length)return;let i=this.keyboardActiveIndex+e;i<0&&(i=t.length-1),i>=t.length&&(i=0),this.setActiveOption(i)}setActiveOption(e){const t=this.getVisibleOptions();t.length&&(t.forEach(((t,i)=>{const n=t;i===e?(n.setAttribute("aria-current","true"),n.classList.add("combobox__option--active"),n.scrollIntoView?.({block:"nearest"})):(n.removeAttribute("aria-current"),n.classList.remove("combobox__option--active"))})),this.keyboardActiveIndex=e)}selectActiveOption(){const e=this.getVisibleOptions();if(this.keyboardActiveIndex>=0&&this.keyboardActiveIndex<e.length){const t=e[this.keyboardActiveIndex];t&&!t.disabled&&this.handleOptionSelection(t.value)}else this.searchValue.trim()&&(this.allowCustomValue||this.acceptUserInput)&&this.addCustomValue(this.searchValue.trim())}onInputChange(e){e.stopPropagation()}onInputHandler(e){const t=e.target;this.searchValue=t.value,this.open||this.show(),this.emit("nile-input",{value:this.searchValue,name:this.name}),this.disableLocalSearch?this.searchManager.debounceSearch((e=>this.emit("nile-search",{query:e,name:this.name})),this.searchValue,this.debounceMs):this.filterOptions(this.searchValue),this.keyboardActiveIndex=-1}filterOptions(e,t=!1){const i=this.originalData.length>0?this.originalData:this.data;if(this.hasGroupedData){let t=i;if(this.showSelectedOnly){const e=Array.isArray(this.value)?this.value:[this.value],n=new Set(e.map((e=>String(e))));t=this.pruneTreeBySelection(i,n)}const{rows:n}=qa(t,e,this.getSearchText.bind(this));this.filteredRows=n,this.filteredData=Xa(n).map((e=>e.item)),this.showNoResults=0===this.filteredData.length;const o=this.scrollElementRef.value?.scrollTop??0;this.updateStickyHeader(o)}else{let t=i;if(this.showSelectedOnly){const e=Array.isArray(this.value)?this.value:[this.value],n=new Set(e.map((e=>String(e))));t=i.filter((e=>n.has(String(this.getItemValue(e)))))}const{filteredItems:n,showNoResults:o}=this.searchManager.filter(e,t,this.getSearchText.bind(this));this.filteredData=n,this.filteredRows=[],this.showNoResults=o}this.portalManager.resetMeasuredHeight(),t||this.resetScrollPosition(),this.updateSelectAllState(),this.requestUpdate()}onFocusIn(){this.hasFocus=!0,this.emit("nile-focus"),!this.multiple&&this.displayLabel&&(this.searchValue=this.displayLabel,this.requestUpdate(),this.updateComplete.then((()=>{this.inputElement?.select()})))}onFocusOut(){if(this.hasFocus=!1,this.emit("nile-blur"),!this.open&&!this.multiple)if(this.strict){const e=this.originalData.length>0?this.originalData:this.data,t=this.hasGroupedData?Xa(Ja(e)).map((e=>e.item)):e,i=t.find((e=>this.getDisplayText(e).toLowerCase()===this.searchValue.toLowerCase()));if(i){const e=this.getItemValue(i);this.value!==e&&(this.value=e,this.syncSelection(),this.emit("nile-change",{value:this.value,name:this.name}))}else this.searchValue=this.displayLabel}else this.searchValue=this.displayLabel}onTriggerMouseDown(e){if(this.disabled)return;e.composedPath().some((e=>e instanceof Element&&"nile-icon-button"===e.tagName.toLowerCase()))||(e.preventDefault(),this.inputElement?.focus({preventScroll:!0}),this.open?this.hide():this.show())}onOptionClick(e){const t=e.composedPath().find((e=>"NILE-OPTION"===e.tagName));t&&!t.disabled&&this.handleOptionSelection(t.value)}handleOptionSelection(e){const t=this.value;if(this.multiple){const t=Array.isArray(this.value)?this.value:[];this.value=Wa.toggleMultiValue(t,e),this.searchValue="",this.syncSelection(),this.filterOptions("",!0)}else this.value=e,this.syncSelection(),this.searchValue=this.displayLabel,this.hide();JSON.stringify(this.value)!==JSON.stringify(t)&&this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})),this.inputElement?.focus({preventScroll:!0})}addCustomValue(e){if(this.addToSuggestions){const t=this.originalData.length>0?this.originalData:this.data;if(!t.some((t=>String(this.getItemValue(t))===e||this.getDisplayText(t)===e))){const i=this.renderItemConfig?.getValue?{value:e,label:e}:e;this.originalData=[...t,i],this.data=[...this.originalData],this.autoCompleteOptions=[...this.originalData],this.filteredData=[...this.originalData]}}if(this.multiple){const t=Array.isArray(this.value)?this.value:[];t.includes(e)||(this.value=[...t,e])}else this.value=e,this.hide();this.searchValue=this.multiple?"":e,this.syncSelection(),this.filterOptions(this.searchValue),this.emit("nile-tag-add",{value:e,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})}onClearClick(e){e.stopPropagation(),this.value=this.multiple?[]:"",this.searchValue="",this.syncSelection(),this.filterOptions(""),this.emit("nile-clear",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})}removeTag(e){if(this.disabled)return;const t=Array.isArray(this.value)?this.value:[];this.value=Wa.removeValue(t,e.value),this.syncSelection(),this.emit("nile-tag-remove",{value:this.value,name:this.name,removedtagvalue:e.value}),this.emit("nile-change",{value:this.value,name:this.name})}onFooterClick(e){e.stopPropagation(),e.preventDefault()}toggleShowSelected(e){e.stopPropagation(),e.preventDefault(),0!==this.selectedOptions.length&&(this.showSelectedOnly=!this.showSelectedOnly,this.showSelectedOnly&&(this.searchValue=""),this.filterOptions(this.searchValue))}clearAll(){this.showSelectedOnly=!1,this.value=this.multiple?[]:"",this.filterOptions(""),this.syncSelection(),this.emit("nile-change",{value:this.value,name:this.name}),this.emit("nile-clear",{value:this.value,name:this.name}),this.resetScrollPosition()}onScroll(e){const t=e.target;if(this.updateStickyHeader(t.scrollTop),this.showSelectedOnly)return;this.emit("nile-scroll",{scrollTop:t.scrollTop,scrollLeft:t.scrollLeft,name:this.name}),this.scrolling||(this.scrolling=!0,this.emit("nile-scroll-start",{scrollTop:t.scrollTop,scrollLeft:t.scrollLeft,name:this.name})),clearTimeout(this.scrollTimeout),this.scrollTimeout=window.setTimeout((()=>{this.scrolling=!1}),300);Math.ceil(t.scrollTop)>=Math.floor(t.scrollHeight-t.offsetHeight)&&this.emit("nile-scroll-end",{scrollTop:t.scrollTop,scrollLeft:t.scrollLeft,name:this.name,isAtBottom:!0})}async show(){if(!this.open&&!this.disabled)return this.open=!0,Jt(this,"nile-after-show")}async hide(){if(this.open)return this.open=!1,Jt(this,"nile-after-hide")}async handleOpenChange(){this.open&&!this.disabled?(this.visibilityManager?.setup(),this.showListbox=!0,await this.updateComplete,await this.doOpen(),this.portal&&this.portalManager.setupPortal()):(this.visibilityManager?.cleanup(),await this.doClose(),this.showListbox=!1,this.portal&&this.portalManager.cleanupPortal())}async doOpen(){this.emit("nile-show",{value:this.value,name:this.name}),this.addOpenListeners(),this.keyboardActiveIndex=-1,0===this.originalData.length&&this.data.length>0&&(this.originalData=[...this.data]),this.hasGroupedData?this.filterOptions(this.searchValue):(this.filteredData=[...this.originalData.length>0?this.originalData:this.data],this.filteredRows=[],this.showNoResults=0===this.filteredData.length),await Yt(this),this.popup?.popup&&(this.popup.popup.style.visibility="hidden"),this.popup.active=!0,await this.updateComplete;const e=this.isHorizontalGrid?this.hScrollElementRef.value:this.scrollElementRef.value;if(await new Promise((t=>{let i=0;const n=()=>{i++;(this.isHorizontalGrid?(e?.offsetWidth??0)>0:(e?.offsetHeight??0)>0)||i>=10?t():requestAnimationFrame(n)};requestAnimationFrame(n)})),this.isHorizontalGrid){const e=this.hVirtualizerCtrl.getVirtualizer();e.scrollOffset=0,e.measure()}else{const e=this.virtualizerCtrl.getVirtualizer();e.scrollOffset=0,e.measure()}this.requestUpdate(),await this.updateComplete,await new Promise((e=>{requestAnimationFrame((()=>e()))})),this.popup?.popup&&(this.popup.popup.style.visibility="");const{keyframes:t,options:i}=Wt(this,"combobox.show",{dir:"ltr"});await Ct(this.popup.popup,t,i),this.resetScrollPosition(),this.emit("nile-after-show",{value:this.value,name:this.name})}async doClose(){this.emit("nile-hide",{value:this.value,name:this.name}),this.removeOpenListeners(),await Yt(this);const{keyframes:e,options:t}=Wt(this,"combobox.hide",{dir:"ltr"});await Ct(this.popup.popup,e,t),this.popup.active=!1,this.popup?.popup&&(this.popup.popup.style.visibility=""),this.showSelectedOnly=!1,this.portalManager.resetMeasuredHeight(),this.multiple||(this.searchValue=this.displayLabel),this.emit("nile-after-hide",{value:this.value,name:this.name})}handleDisabledChange(){this.disabled&&(this.open=!1,this.handleOpenChange())}handleValueChange(){this.syncSelection(),this.requestUpdate(),this.portal&&this.portalManager.portalContainerElement&&this.portalManager.updatePosition()}handleDataChange(){this.data.length>0&&!this.showSelectedOnly&&(this.originalData=[...this.data]),this.hasGroupedData?this.filterOptions(this.searchValue):(this.filteredData=[...this.data],this.filteredRows=[]),this.syncSelection(),this.updateSelectAllState(),this.optionsLoading||this.loading||0!==this.data.length?this.data.length>0&&(this.showNoResults=!1):this.showNoResults=!0,this.portalManager.resetMeasuredHeight(),this.portal&&this.portalManager.portalContainerElement&&this.portalManager.updatePosition(),this.requestUpdate()}handleAutoCompleteOptionsChange(){this.autoCompleteOptions.length>0&&(this.data=[...this.autoCompleteOptions])}handleSelectAllConfigChange(){this.updateSelectAllState()}handlePortalChange(){this.open&&(this.portal?this.portalManager.setupPortal():this.portalManager.cleanupPortal())}checkValidity(){return this.valueInput.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.valueInput.reportValidity()}setCustomValidity(e){this.valueInput.setCustomValidity(e),this.formControlController.updateValidity()}focus(e){this.inputElement?.focus(e)}blur(){this.inputElement?.blur()}handleInvalid(e){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(e)}updateValidity(){this.updateComplete.then((()=>this.formControlController.updateValidity()))}async resetScrollPosition(){this.stickyHeaderIndex=-1,await this.portalManager.resetScrollPosition()}render(){const e=this.hasSlotController.test("label"),t=!!this.label||!!e,i=this.multiple?Array.isArray(this.value)&&this.value.length>0:"string"==typeof this.value&&""!==this.value,n=this.clearable&&!this.disabled&&i,o=!!this.helpText,r=!!this.errorMessage,s=!i;return R`
       <div
         part="form-control"
         class=${Ae({"form-control":!0,"form-control--small":"small"===this.size,"form-control--medium":"medium"===this.size,"form-control--large":"large"===this.size,"form-control--has-label":t,"form-control--has-help-text":o})}
@@ -8365,9 +8366,9 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
           ></nile-icon>
         </slot>
       </button>
-    `}renderStickyHeaderOverlay(e,t){if(!this.stickyGroupHeader||!e||!t)return R``;const i=this.stickyHeaderIndex;if(i<0||i>=this.filteredRows.length)return R``;const n=this.filteredRows[i];return"header"!==n.kind?R``:R`
+    `}renderStickyHeaderOverlay(){if(!this.stickyGroupHeader)return R``;const e=this.stickyHeaderIndex;if(e<0||e>=this.filteredRows.length)return R``;const t=this.filteredRows[e];return"header"!==t.kind?R``:R`
       <div class="combobox__group-sticky-overlay">
-        ${$a.renderGroupHeader(n)}
+        ${$a.renderGroupHeader(t)}
       </div>
     `}renderListbox(){const e=this.allowCustomValue&&this.searchValue.trim()&&!this.filteredData.some((e=>{const t=this.getItemValue(e);return String(t).toLowerCase()===this.searchValue.trim().toLowerCase()}))&&!this.filteredData.some((e=>this.getDisplayText(e).toLowerCase()===this.searchValue.trim().toLowerCase()));if(this.isHorizontalGrid)return this.renderHorizontalListbox(!!e);const t=this.gridColumns>1||this.isBidirectionalGrid,i=this.hasGroupedData&&!t,n=i?this.filteredRows.length>=5:$a.shouldUseVirtualizer(this.filteredData,this.gridColumns),o=this.virtualizerCtrl.getVirtualizer(),r=n||t?o.getVirtualItems():[],s=n||t?o.getTotalSize():0;return R`
       <div
@@ -8380,19 +8381,22 @@ const za=()=>new ma;class ma{}const Ta=new WeakMap,xa=Te(class extends Ss{render
         class="combobox__listbox ${this.isBidirectionalGrid?"combobox__listbox--bidirectional":""} ${this.portal?"combobox__portal-hidden":""}"
         tabindex="-1"
         @mouseup=${this.onOptionClick}
-        @scroll=${this.onScroll}
         style="${this.portal?"display: none;":""}${this.isBidirectionalGrid?`max-height:${38*this.gridRows+16}px;`:""}"
-        ${xa(this.scrollElementRef)}
       >
-        ${this.renderLoader()}
         ${this.renderSelectAll()}
-        ${this.renderStickyHeaderOverlay(i,n)}
-        ${!this.showNoResults||this.optionsLoading||this.loading?t?$a.renderVirtualizedGrid(r,s,this.filteredData,this.value,this.multiple,this.gridColumns,this.getDisplayText.bind(this),this.getItemValue.bind(this),this.optionsLoading||this.loading,this.allowHtmlLabel,this.renderItemConfig?.getDescription?this.getItemDescription.bind(this):void 0,this.renderItemConfig?.getPrefix?this.getItemPrefix.bind(this):void 0,this.renderItemConfig?.getSuffix?this.getItemSuffix.bind(this):void 0,this.isBidirectionalGrid?this.gridColumnWidth:void 0):i?n?$a.renderRowsVirtualized(r,s,this.filteredRows,this.value,this.multiple,this.getDisplayText.bind(this),this.getItemValue.bind(this),this.optionsLoading||this.loading,this.allowHtmlLabel,this.renderItemConfig?.getDescription?this.getItemDescription.bind(this):void 0,this.renderItemConfig?.getPrefix?this.getItemPrefix.bind(this):void 0,this.renderItemConfig?.getSuffix?this.getItemSuffix.bind(this):void 0):$a.renderRowsPlain(this.filteredRows,this.value,this.multiple,this.getDisplayText.bind(this),this.getItemValue.bind(this),this.showNoResults,this.noResultsMessage,this.optionsLoading||this.loading,this.onScroll.bind(this),this.allowHtmlLabel,this.renderItemConfig?.getDescription?this.getItemDescription.bind(this):void 0,this.renderItemConfig?.getPrefix?this.getItemPrefix.bind(this):void 0,this.renderItemConfig?.getSuffix?this.getItemSuffix.bind(this):void 0,void 0,this.hasActiveFilter?this.noResultsSubtitle:void 0):n?$a.renderVirtualizedOptions(r,s,this.filteredData,this.value,this.multiple,this.getDisplayText.bind(this),this.getItemValue.bind(this),this.optionsLoading||this.loading,this.allowHtmlLabel,o.measureElement,this.renderItemConfig?.getDescription?this.getItemDescription.bind(this):void 0,this.renderItemConfig?.getPrefix?this.getItemPrefix.bind(this):void 0,this.renderItemConfig?.getSuffix?this.getItemSuffix.bind(this):void 0):$a.renderPlainOptions(this.filteredData,this.value,this.multiple,this.getDisplayText.bind(this),this.getItemValue.bind(this),this.showNoResults,this.noResultsMessage,this.optionsLoading||this.loading,this.onScroll.bind(this),this.allowHtmlLabel,this.renderItemConfig?.getDescription?this.getItemDescription.bind(this):void 0,this.renderItemConfig?.getPrefix?this.getItemPrefix.bind(this):void 0,this.renderItemConfig?.getSuffix?this.getItemSuffix.bind(this):void 0,void 0,this.hasActiveFilter?this.noResultsSubtitle:void 0):this.renderEmptyState()}
+        <div
+          class="combobox__options-scroll"
+          @scroll=${this.onScroll}
+          ${xa(this.scrollElementRef)}
+        >
+        ${this.renderLoader()}
+        ${!this.showNoResults||this.optionsLoading||this.loading?t?$a.renderVirtualizedGrid(r,s,this.filteredData,this.value,this.multiple,this.gridColumns,this.getDisplayText.bind(this),this.getItemValue.bind(this),this.optionsLoading||this.loading,this.allowHtmlLabel,this.renderItemConfig?.getDescription?this.getItemDescription.bind(this):void 0,this.renderItemConfig?.getPrefix?this.getItemPrefix.bind(this):void 0,this.renderItemConfig?.getSuffix?this.getItemSuffix.bind(this):void 0,this.isBidirectionalGrid?this.gridColumnWidth:void 0):i?n?$a.renderRowsVirtualized(r,s,this.filteredRows,this.value,this.multiple,this.getDisplayText.bind(this),this.getItemValue.bind(this),this.optionsLoading||this.loading,this.allowHtmlLabel,this.renderItemConfig?.getDescription?this.getItemDescription.bind(this):void 0,this.renderItemConfig?.getPrefix?this.getItemPrefix.bind(this):void 0,this.renderItemConfig?.getSuffix?this.getItemSuffix.bind(this):void 0,void 0,this.renderStickyHeaderOverlay(),this.stickyGroupHeader?this.stickyHeaderIndex:-1):$a.renderRowsPlain(this.filteredRows,this.value,this.multiple,this.getDisplayText.bind(this),this.getItemValue.bind(this),this.showNoResults,this.noResultsMessage,this.optionsLoading||this.loading,this.onScroll.bind(this),this.allowHtmlLabel,this.renderItemConfig?.getDescription?this.getItemDescription.bind(this):void 0,this.renderItemConfig?.getPrefix?this.getItemPrefix.bind(this):void 0,this.renderItemConfig?.getSuffix?this.getItemSuffix.bind(this):void 0,void 0,this.hasActiveFilter?this.noResultsSubtitle:void 0):n?$a.renderVirtualizedOptions(r,s,this.filteredData,this.value,this.multiple,this.getDisplayText.bind(this),this.getItemValue.bind(this),this.optionsLoading||this.loading,this.allowHtmlLabel,this.renderItemConfig?.getDescription?this.getItemDescription.bind(this):void 0,this.renderItemConfig?.getPrefix?this.getItemPrefix.bind(this):void 0,this.renderItemConfig?.getSuffix?this.getItemSuffix.bind(this):void 0):$a.renderPlainOptions(this.filteredData,this.value,this.multiple,this.getDisplayText.bind(this),this.getItemValue.bind(this),this.showNoResults,this.noResultsMessage,this.optionsLoading||this.loading,this.onScroll.bind(this),this.allowHtmlLabel,this.renderItemConfig?.getDescription?this.getItemDescription.bind(this):void 0,this.renderItemConfig?.getPrefix?this.getItemPrefix.bind(this):void 0,this.renderItemConfig?.getSuffix?this.getItemSuffix.bind(this):void 0,void 0,this.hasActiveFilter?this.noResultsSubtitle:void 0):this.renderEmptyState()}
         ${e?R`
           <div @mouseup=${e=>{e.stopPropagation(),this.addCustomValue(this.searchValue.trim())}}>
             ${$a.renderAddCustomOption(this.searchValue.trim(),this.multiple)}
           </div>
         `:""}
+        </div>
         ${this.multiple&&this.showFooter&&!this.selectAllEnabled?this.renderFooter():""}
       </div>
     `}renderHorizontalListbox(e){const t=this.hVirtualizerCtrl.getVirtualizer(),i=t.getVirtualItems(),n=t.getTotalSize();return R`
@@ -19255,7 +19259,7 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
           ${this._renderTrigger()}
           ${e}
         </nile-popover>
-      `:e}};e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"type",void 0),e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"value",void 0),e([de({type:String,reflect:!0})],NS.prototype,"swatchTooltip",void 0),e([de({type:Number,reflect:!0})],NS.prototype,"recentColorsCount",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"noFill",void 0),e([de({type:String,reflect:!0})],NS.prototype,"mode",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showCanvas",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showHue",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showInputs",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showActions",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],NS.prototype,"open",void 0),e([de({attribute:"palette",converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.map((e=>"string"==typeof e?{color:e,name:e}:e&&"string"==typeof e.color?{color:e.color,name:e.name||e.color}:null)).filter(Boolean):[]}catch{return[]}},toAttribute:e=>JSON.stringify(e)}})],NS.prototype,"palette",void 0),e([he()],NS.prototype,"_view",void 0),e([he()],NS.prototype,"_recentColors",void 0),e([he()],NS.prototype,"_hue",void 0),e([he()],NS.prototype,"_sat",void 0),e([he()],NS.prototype,"_val",void 0),e([he()],NS.prototype,"_colorMode",void 0),e([he()],NS.prototype,"_hexInput",void 0),e([he()],NS.prototype,"_r",void 0),e([he()],NS.prototype,"_g",void 0),e([he()],NS.prototype,"_b",void 0),NS=e([ce("nile-color-picker")],NS);"undefined"!=typeof window&&(window.nileElementsVersion='"2.0.4"',window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});const pS=s`
+      `:e}};e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"type",void 0),e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"value",void 0),e([de({type:String,reflect:!0})],NS.prototype,"swatchTooltip",void 0),e([de({type:Number,reflect:!0})],NS.prototype,"recentColorsCount",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"noFill",void 0),e([de({type:String,reflect:!0})],NS.prototype,"mode",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showCanvas",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showHue",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showInputs",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showActions",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],NS.prototype,"open",void 0),e([de({attribute:"palette",converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.map((e=>"string"==typeof e?{color:e,name:e}:e&&"string"==typeof e.color?{color:e.color,name:e.name||e.color}:null)).filter(Boolean):[]}catch{return[]}},toAttribute:e=>JSON.stringify(e)}})],NS.prototype,"palette",void 0),e([he()],NS.prototype,"_view",void 0),e([he()],NS.prototype,"_recentColors",void 0),e([he()],NS.prototype,"_hue",void 0),e([he()],NS.prototype,"_sat",void 0),e([he()],NS.prototype,"_val",void 0),e([he()],NS.prototype,"_colorMode",void 0),e([he()],NS.prototype,"_hexInput",void 0),e([he()],NS.prototype,"_r",void 0),e([he()],NS.prototype,"_g",void 0),e([he()],NS.prototype,"_b",void 0),NS=e([ce("nile-color-picker")],NS);"undefined"!=typeof window&&(window.nileElementsVersion='"2.0.5"',window.nileVersion="1.3.1",window.process=window.process||{env:{NODE_ENV:"production"}});const pS=s`
  :host {
   
   top: 0;