@ni/nimble-components 29.7.0 → 29.7.2

package/dist/all-components-bundle.min.js

@@ -3117,12 +3117,32 @@ const ag="nimble-icon-arrow-expander-down",lg="above",cg="underline",dg="outline
         overflow-y: auto;
         width: 100%;
         --ni-private-listbox-padding: ${bl};
-        max-height: calc(var(--ni-private-select-max-height) - ${bl});
+        --ni-private-listbox-filter-height: 0px;
+        --ni-private-listbox-loading-indicator-height: 0px;
+        max-height: min(
+            calc(
+                ${bl} + 2 * ${Cl} + ${gl} * 10.5 +
+                    var(--ni-private-listbox-filter-height) +
+                    var(--ni-private-listbox-loading-indicator-height)
+            ),
+            calc(
+                var(--ni-private-listbox-available-viewport-height) -
+                    ${bl}
+            )
+        );
         box-shadow: ${Tl};
-        border: 1px solid ${al};
+        border: ${Cl} solid ${al};
         background-color: ${Za};
     }
 
+    .listbox:has(.filter-field) {
+        --ni-private-listbox-filter-height: ${gl};
+    }
+
+    .listbox:has(.loading-container) {
+        --ni-private-listbox-loading-indicator-height: ${gl};
+    }
+
     .listbox slot {
         display: block;
         background: transparent;
@@ -3335,7 +3355,7 @@ const ag="nimble-icon-arrow-expander-down",lg="above",cg="underline",dg="outline
         `))
 class gg{constructor(e,t){this.target=e,this.propertyName=t}bind(e){this.source=e,this.setSourceValue(!1),this.mouseOverHandler=()=>{const e=this.target.offsetWidth<this.target.scrollWidth
 this.setSourceValue(e)},this.mouseOutHandler=()=>{this.setSourceValue(!1)},this.target.addEventListener("mouseover",this.mouseOverHandler),this.target.addEventListener("mouseout",this.mouseOutHandler)}unbind(){this.source=void 0,this.target.removeEventListener("mouseover",this.mouseOverHandler),this.target.removeEventListener("mouseout",this.mouseOutHandler)}setSourceValue(e){this.source[this.propertyName]=e}}function vg(e){return new k("nimble-overflow",gg,e)}let bg=class extends _i{}
-class yg extends($n(bg)){constructor(){super(...arguments),this.proxy=document.createElement("input")}}class wg extends yg{constructor(){super(...arguments),this.appearance=cg,this.errorVisible=!1,this.open=!1,this.filteredOptions=[],this.hasOverflow=!1,this.listboxId=Fa("listbox-"),this.maxHeight=0,this.valueUpdatedByInput=!1,this._value="",this.filter="",this.forcedPosition=!1}get value(){return m.track(this,"value"),this._value}set value(e){const t=`${this._value}`
+class yg extends($n(bg)){constructor(){super(...arguments),this.proxy=document.createElement("input")}}class wg extends yg{constructor(){super(...arguments),this.appearance=cg,this.errorVisible=!1,this.open=!1,this.filteredOptions=[],this.hasOverflow=!1,this.listboxId=Fa("listbox-"),this.availableViewportHeight=0,this.valueUpdatedByInput=!1,this._value="",this.filter="",this.forcedPosition=!1}get value(){return m.track(this,"value"),this._value}set value(e){const t=`${this._value}`
 let n=e
 if(this.$fastController.isConnected&&this.options){const t=this.options.findIndex((t=>t.text.toLowerCase()===e.toLowerCase())),i=this.options[this.selectedIndex]?.text,o=this.options[t]?.text
 this.selectedIndex=i!==o?t:this.selectedIndex,n=this.firstSelectedOption?.text||e}t!==n&&(this._value=n,super.valueChanged(t,n),m.notify(this,"value")),this.filter=e,this.filterOptions(),this.selectedIndex=this.options.map((e=>e.text)).indexOf(this.value)}get options(){return m.track(this,"options"),this.filteredOptions?.length?this.filteredOptions:this._options}set options(e){this._options=e,m.notify(this,"options")}get isAutocompleteInline(){return this.autocomplete===Un||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===jn||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===Wn}slottedOptionsChanged(e,t){const n=this.value
@@ -3365,10 +3385,10 @@ this.selectedIndex=e,!this.dirtyValue&&this.firstSelectedOption&&(this.value=thi
 if(n!==this.selectedIndex)return void(this.selectedIndex=n)
 super.selectedIndexChanged(e,n)}}disabledChanged(e,t){super.disabledChanged&&super.disabledChanged(e,t),this.ariaDisabled=this.disabled?"true":"false"}selectPreviousOption(){!this.disabled&&this.selectedIndex>=0&&(this.selectedIndex-=1)}setPositioning(){if(!this.$fastController.isConnected)return
 const e=this.getBoundingClientRect(),t=window.innerHeight-e.bottom
-this.forcedPosition?this.position=this.positionAttribute:e.top>t?this.position=Hn:this.position=Vn,this.positionAttribute=this.forcedPosition?this.positionAttribute:this.position,this.maxHeight=this.position===Hn?Math.trunc(e.top):Math.trunc(t)}focusAndScrollOptionIntoView(){this.open&&this.contains(document.activeElement)&&(this.control.focus(),this.firstSelectedOption&&requestAnimationFrame((()=>{this.firstSelectedOption?.scrollIntoView({block:"nearest"})})))}openChanged(){this.open?(this.ariaControls=this.listboxId,this.ariaExpanded="true",this.setPositioning(),this.focusAndScrollOptionIntoView(),u.queueUpdate((()=>this.focus()))):(this.ariaControls="",this.ariaExpanded="false"),this.dropdownButton&&(this.dropdownButton.checked=this.open)}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder??"")}selectedOptionsChanged(e,t){this.$fastController.isConnected&&this._options.forEach((e=>{e.selected=t.includes(e)}))}positionChanged(e,t){this.positionAttribute=t,this.setPositioning()}regionChanged(e,t){this.region&&this.controlWrapper&&(this.region.anchorElement=this.controlWrapper)}controlWrapperChanged(e,t){this.region&&this.controlWrapper&&(this.region.anchorElement=this.controlWrapper)}ariaLabelChanged(e,t){this.updateInputAriaLabel()}maxHeightChanged(){this.updateListboxMaxHeightCssVariable()}updateValue(e){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value,this.control.value=this.value),e&&this.$emit("change")}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,"backward"))}clearSelectionRange(){const e=this.control.value.length
+this.forcedPosition?this.position=this.positionAttribute:e.top>t?this.position=Hn:this.position=Vn,this.positionAttribute=this.forcedPosition?this.positionAttribute:this.position,this.availableViewportHeight=this.position===Hn?Math.trunc(e.top):Math.trunc(t)}focusAndScrollOptionIntoView(){this.open&&this.contains(document.activeElement)&&(this.control.focus(),this.firstSelectedOption&&requestAnimationFrame((()=>{this.firstSelectedOption?.scrollIntoView({block:"nearest"})})))}openChanged(){this.open?(this.ariaControls=this.listboxId,this.ariaExpanded="true",this.setPositioning(),this.focusAndScrollOptionIntoView(),u.queueUpdate((()=>this.focus()))):(this.ariaControls="",this.ariaExpanded="false"),this.dropdownButton&&(this.dropdownButton.checked=this.open)}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder??"")}selectedOptionsChanged(e,t){this.$fastController.isConnected&&this._options.forEach((e=>{e.selected=t.includes(e)}))}positionChanged(e,t){this.positionAttribute=t,this.setPositioning()}regionChanged(e,t){this.region&&this.controlWrapper&&(this.region.anchorElement=this.controlWrapper)}controlWrapperChanged(e,t){this.region&&this.controlWrapper&&(this.region.anchorElement=this.controlWrapper)}ariaLabelChanged(e,t){this.updateInputAriaLabel()}updateValue(e){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value,this.control.value=this.value),e&&this.$emit("change")}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,"backward"))}clearSelectionRange(){const e=this.control.value.length
 this.control.setSelectionRange(e,e)}syncValue(){const e=this.selectedIndex>-1?this.firstSelectedOption?.text:this.control.value
-this.updateValue(this.value!==e)}updateListboxMaxHeightCssVariable(){this.listbox&&this.listbox.style.setProperty("--ni-private-select-max-height",`${this.maxHeight}px`)}updateInputAriaLabel(){const e=this.shadowRoot?.querySelector(".selected-value")
-this.ariaLabel?e?.setAttribute("aria-label",this.ariaLabel):e?.removeAttribute("aria-label")}emitChangeIfValueUpdated(){this.valueUpdatedByInput&&(this.value!==this.valueBeforeTextUpdate&&this.$emit("change"),this.valueUpdatedByInput=!1)}}e([le],wg.prototype,"appearance",void 0),e([le({attribute:"error-text"})],wg.prototype,"errorText",void 0),e([le({attribute:"error-visible",mode:"boolean"})],wg.prototype,"errorVisible",void 0),e([le({attribute:"autocomplete",mode:"fromView"})],wg.prototype,"autocomplete",void 0),e([le({attribute:"position"})],wg.prototype,"positionAttribute",void 0),e([le({attribute:"open",mode:"boolean"})],wg.prototype,"open",void 0),e([le],wg.prototype,"placeholder",void 0),e([g],wg.prototype,"position",void 0),e([g],wg.prototype,"region",void 0),e([g],wg.prototype,"controlWrapper",void 0),e([g],wg.prototype,"control",void 0),e([g],wg.prototype,"listbox",void 0),e([g],wg.prototype,"dropdownButton",void 0),e([g],wg.prototype,"hasOverflow",void 0),e([g],wg.prototype,"maxHeight",void 0)
+this.updateValue(this.value!==e)}updateInputAriaLabel(){const e=this.shadowRoot?.querySelector(".selected-value")
+this.ariaLabel?e?.setAttribute("aria-label",this.ariaLabel):e?.removeAttribute("aria-label")}emitChangeIfValueUpdated(){this.valueUpdatedByInput&&(this.value!==this.valueBeforeTextUpdate&&this.$emit("change"),this.valueUpdatedByInput=!1)}}e([le],wg.prototype,"appearance",void 0),e([le({attribute:"error-text"})],wg.prototype,"errorText",void 0),e([le({attribute:"error-visible",mode:"boolean"})],wg.prototype,"errorVisible",void 0),e([le({attribute:"autocomplete",mode:"fromView"})],wg.prototype,"autocomplete",void 0),e([le({attribute:"position"})],wg.prototype,"positionAttribute",void 0),e([le({attribute:"open",mode:"boolean"})],wg.prototype,"open",void 0),e([le],wg.prototype,"placeholder",void 0),e([g],wg.prototype,"position",void 0),e([g],wg.prototype,"region",void 0),e([g],wg.prototype,"controlWrapper",void 0),e([g],wg.prototype,"control",void 0),e([g],wg.prototype,"listbox",void 0),e([g],wg.prototype,"dropdownButton",void 0),e([g],wg.prototype,"hasOverflow",void 0),e([g],wg.prototype,"availableViewportHeight",void 0)
 const xg=wg.compose({baseName:"combobox",baseClass:yg,template:(e,t)=>G`
     <template
         aria-disabled="${e=>e.ariaDisabled}"
@@ -3428,6 +3448,7 @@ const xg=wg.compose({baseName:"combobox",baseClass:yg,template:(e,t)=>G`
                 part="listbox"
                 role="listbox"
                 ?disabled="${e=>e.disabled}"
+                style="--ni-private-listbox-available-viewport-height: ${e=>e.availableViewportHeight}px;"
                 ${Pe("listbox")}
             >
                 <slot name="option"
@@ -9257,7 +9278,7 @@ yi.getOrCreate().withPrefix("nimble").register(MD())
 const ED="nimble-spinner",ID=e=>e instanceof Dv,_D=e=>e instanceof Pv
 let TD=class extends _i{}
 class AD extends($n(TD)){constructor(){super(...arguments),this.proxy=document.createElement("select")}}const DD=e=>!e.visuallyHidden&&!e.disabled&&!e.hidden,OD=e=>!e.visuallyHidden&&!e.hidden
-class RD extends AD{constructor(){super(...arguments),this.appearance=cg,this.errorVisible=!1,this.filterMode=fg.none,this.clearable=!1,this.loadingVisible=!1,this.displayPlaceholder=!1,this.open=!1,this.listboxId=Fa("listbox-"),this.hasOverflow=!1,this.filteredOptions=[],this.filter="",this.maxHeight=0,this._value="",this.forcedPosition=!1}get collapsible(){return!(this.multiple||"number"==typeof this.size)}connectedCallback(){super.connectedCallback(),this.forcedPosition=!!this.positionAttribute,this.open&&this.initializeOpenState()}get value(){return m.track(this,"value"),this._value}set value(e){const t=this._value
+class RD extends AD{constructor(){super(...arguments),this.appearance=cg,this.errorVisible=!1,this.filterMode=fg.none,this.clearable=!1,this.loadingVisible=!1,this.displayPlaceholder=!1,this.open=!1,this.listboxId=Fa("listbox-"),this.hasOverflow=!1,this.filteredOptions=[],this.filter="",this.availableViewportHeight=0,this._value="",this.forcedPosition=!1}get collapsible(){return!(this.multiple||"number"==typeof this.size)}connectedCallback(){super.connectedCallback(),this.forcedPosition=!!this.positionAttribute,this.open&&this.initializeOpenState()}get value(){return m.track(this,"value"),this._value}set value(e){const t=this._value
 let n=e
 if(this.options?.length){const e=this.options.findIndex((e=>e.value===n)),t=this.options[this.selectedIndex]?.value??null,i=this.options[e]?.value??null;-1!==e&&t===i||(n="",this.selectedIndex=e),n=this.firstSelectedOption?.value??n}t===n||this.open&&this.selectedIndex<0||(this._value=n,super.valueChanged(t,n),m.notify(this,"value"),this.updateDisplayValue())}get displayValue(){return m.track(this,"displayValue"),this.firstSelectedOption?.text??""}anchoredRegionChanged(e,t){this.anchoredRegion&&this.control&&(this.anchoredRegion.anchorElement=this.control)}controlChanged(e,t){this.anchoredRegion&&this.control&&(this.anchoredRegion.anchorElement=this.control)}slottedOptionsChanged(e,t){const n=this.value
 this.options.forEach((e=>{const t=m.getNotifier(e)
@@ -9332,7 +9353,7 @@ n!==e&&ID(i)&&(i.activeOption=!1),this.openActiveIndex=e,this.focusAndScrollActi
 this.ariaActiveDescendant=t?.id??""}focusAndScrollActiveOptionIntoView(){const e=this.options[this.openActiveIndex??this.selectedIndex]
 void 0!==e&&this.contains(e)&&(e.focus(),requestAnimationFrame((()=>{e.scrollIntoView({block:"nearest"})})))}getPlaceholderOption(){return this.options.find((e=>e.hidden&&e.disabled))}setPositioning(){if(!this.$fastController.isConnected)return
 const e=this.getBoundingClientRect(),t=window.innerHeight-e.bottom
-this.forcedPosition?this.position=this.positionAttribute:e.top>t?this.position=Hn:this.position=Vn,this.positionAttribute=this.forcedPosition?this.positionAttribute:this.position,this.maxHeight=this.position===Hn?Math.trunc(e.top):Math.trunc(t),this.updateListboxMaxHeightCssVariable()}updateAdjacentSeparatorState(e){const t=this.getPreviousVisibleOptionOrGroup(e),n=this.getNextVisibleOptionOrGroup(e)
+this.forcedPosition?this.position=this.positionAttribute:e.top>t?this.position=Hn:this.position=Vn,this.positionAttribute=this.forcedPosition?this.positionAttribute:this.position,this.availableViewportHeight=this.position===Hn?Math.trunc(e.top):Math.trunc(t)}updateAdjacentSeparatorState(e){const t=this.getPreviousVisibleOptionOrGroup(e),n=this.getNextVisibleOptionOrGroup(e)
 if(OD(e)){const i=ID(t)
 this.setTopSeparatorState(e,i)
 const o=null!==n
@@ -9352,7 +9373,7 @@ n.forEach((t=>{t.visuallyHidden=!i&&this.isOptionHiddenOrFilteredOut(t),t.visual
 this.filteredOptions=e}getGroupOptions(e){return Array.from(e.children).filter((e=>ID(e))).map((t=>(e.hidden&&ID(t)&&(t.visuallyHidden=!0),t)))}updateValue(e){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.value??""),e&&(this.$emit("input"),this.$emit("change",this,{bubbles:!0,composed:void 0}))}clearSelect(){const e=this.getPlaceholderOption()
 this.selectedIndex=e?this.options.indexOf(e):-1}setProxyOptions(){this.proxy instanceof HTMLSelectElement&&this.options&&(this.proxy.options.length=0,this.options.forEach((e=>{const t=e.proxy||(e instanceof HTMLOptionElement?e.cloneNode():null)
 t&&this.proxy.options.add(t)})))}filterChanged(){this.filterOptions()}emitFilterInputEvent(){const e={filterText:this.filter}
-this.$emit("filter-input",e,{bubbles:!0})}maxHeightChanged(){this.updateListboxMaxHeightCssVariable()}initializeOpenState(){this.setActiveOption(this.selectedIndex),this.ariaControls=this.listboxId,this.ariaExpanded="true",this.setPositioning(),this.focusAndScrollOptionIntoView()}updateListboxMaxHeightCssVariable(){this.listbox&&this.listbox.style.setProperty("--ni-private-select-max-height",`${this.maxHeight}px`)}}e([le],RD.prototype,"appearance",void 0),e([le({attribute:"position"})],RD.prototype,"positionAttribute",void 0),e([le({attribute:"error-text"})],RD.prototype,"errorText",void 0),e([le({attribute:"error-visible",mode:"boolean"})],RD.prototype,"errorVisible",void 0),e([le({attribute:"filter-mode"})],RD.prototype,"filterMode",void 0),e([le({attribute:"clearable",mode:"boolean"})],RD.prototype,"clearable",void 0),e([le({attribute:"loading-visible",mode:"boolean"})],RD.prototype,"loadingVisible",void 0),e([g],RD.prototype,"displayPlaceholder",void 0),e([le({attribute:"open",mode:"boolean"})],RD.prototype,"open",void 0),e([g],RD.prototype,"position",void 0),e([g],RD.prototype,"control",void 0),e([g],RD.prototype,"scrollableRegion",void 0),e([g],RD.prototype,"filterInput",void 0),e([g],RD.prototype,"anchoredRegion",void 0),e([g],RD.prototype,"hasOverflow",void 0),e([g],RD.prototype,"filteredOptions",void 0),e([g],RD.prototype,"filter",void 0),e([g],RD.prototype,"maxHeight",void 0),e([v],RD.prototype,"collapsible",null),e([v],RD.prototype,"displayValue",null)
+this.$emit("filter-input",e,{bubbles:!0})}initializeOpenState(){this.setActiveOption(this.selectedIndex),this.ariaControls=this.listboxId,this.ariaExpanded="true",this.setPositioning(),this.focusAndScrollOptionIntoView()}}e([le],RD.prototype,"appearance",void 0),e([le({attribute:"position"})],RD.prototype,"positionAttribute",void 0),e([le({attribute:"error-text"})],RD.prototype,"errorText",void 0),e([le({attribute:"error-visible",mode:"boolean"})],RD.prototype,"errorVisible",void 0),e([le({attribute:"filter-mode"})],RD.prototype,"filterMode",void 0),e([le({attribute:"clearable",mode:"boolean"})],RD.prototype,"clearable",void 0),e([le({attribute:"loading-visible",mode:"boolean"})],RD.prototype,"loadingVisible",void 0),e([g],RD.prototype,"displayPlaceholder",void 0),e([le({attribute:"open",mode:"boolean"})],RD.prototype,"open",void 0),e([g],RD.prototype,"position",void 0),e([g],RD.prototype,"control",void 0),e([g],RD.prototype,"scrollableRegion",void 0),e([g],RD.prototype,"filterInput",void 0),e([g],RD.prototype,"anchoredRegion",void 0),e([g],RD.prototype,"hasOverflow",void 0),e([g],RD.prototype,"filteredOptions",void 0),e([g],RD.prototype,"filter",void 0),e([g],RD.prototype,"availableViewportHeight",void 0),e([v],RD.prototype,"collapsible",null),e([v],RD.prototype,"displayValue",null)
 const FD=RD.compose({baseName:"select",baseClass:Yi,template:(e,t)=>G`
     <template
         class="${e=>[e.collapsible&&"collapsible",e.collapsible&&e.open&&"open",e.disabled&&"disabled",e.collapsible&&e.position].filter(Boolean).join(" ")}"
@@ -9427,6 +9448,7 @@ const FD=RD.compose({baseName:"select",baseClass:Yi,template:(e,t)=>G`
                     part="listbox"
                     role="listbox"
                     ?disabled="${e=>e.disabled}"
+                    style="--ni-private-listbox-available-viewport-height: ${e=>e.availableViewportHeight}px;"
                     ${Pe("listbox")}
                 >
                     ${Ve((e=>e.filterMode!==fg.none),G`