@ni/nimble-components 32.2.5 → 32.2.7

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

@@ -4601,6 +4601,7 @@ const Vb="underline",Hb="outline",Ub="block",qb=Mt`
         border-bottom-color: ${Il};
     }
 
+    :host([readonly]) .root,
     :host([disabled]) .root {
         border-color: rgba(${xl}, 0.1);
     }
@@ -4642,6 +4643,7 @@ const Vb="underline",Hb="outline",Ub="block",qb=Mt`
         width: 100%;
     }
 
+    :host([readonly]:hover) .root::after,
     :host([disabled]:hover) .root::after {
         width: 0px;
     }
@@ -4720,11 +4722,20 @@ const Vb="underline",Hb="outline",Ub="block",qb=Mt`
             }
 
             :host(:hover) .root {
+                border-bottom-width: ${ql};
                 padding-bottom: 0;
             }
 
+            :host([readonly]) .root,
             :host([disabled]) .root {
                 background-color: rgba(${xl}, 0.07);
+                border-color: transparent;
+            }
+
+            :host([error-visible][readonly]) .root,
+            :host([error-visible][disabled]) .root {
+                padding-bottom: 0;
+                border-bottom-color: ${Cl};
             }
         `),Ih(Hb,Mt`
             .root {
@@ -9378,7 +9389,7 @@ _i.getOrCreate().withPrefix("nimble").register(fO())
 const mO="nimble-spinner",gO=t=>t instanceof hb,vO=t=>t instanceof gb
 let bO=class extends Fi{}
 class yO extends(An(bO)){constructor(){super(...arguments),this.proxy=document.createElement("select")}}const wO=t=>!t.visuallyHidden&&!t.disabled&&!t.hidden,xO=t=>!t.visuallyHidden&&!t.hidden
-class CO extends yO{constructor(){super(...arguments),this.appearance=Vg,this.errorVisible=!1,this.filterMode=Wg.none,this.clearable=!1,this.loadingVisible=!1,this.displayPlaceholder=!1,this.open=!1,this.listboxId=el("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)}get labelContent(){return this.$fastController.isConnected?db(this.labelSlot):""}connectedCallback(){super.connectedCallback(),this.forcedPosition=!!this.positionAttribute,this.open&&this.initializeOpenState()}get value(){return x.track(this,"value"),this._value}set value(t){const e=this._value
+class CO extends yO{constructor(){super(...arguments),this.appearance=Vg,this.errorVisible=!1,this.filterMode=Wg.none,this.clearable=!1,this.loadingVisible=!1,this.displayPlaceholder=!1,this.open=!1,this.listboxId=el("listbox-"),this.hasOverflow=!1,this.filteredOptions=[],this.filter="",this.availableViewportHeight=0,this._value="",this.forcedPosition=!1,this.selectedOptionObserver=new MutationObserver((()=>{this.updateDisplayValue()}))}get collapsible(){return!(this.multiple||"number"==typeof this.size)}get labelContent(){return this.$fastController.isConnected?db(this.labelSlot):""}connectedCallback(){super.connectedCallback(),this.forcedPosition=!!this.positionAttribute,this.open&&this.initializeOpenState(),this.observeSelectedOptionTextContent()}disconnectedCallback(){super.disconnectedCallback(),this.selectedOptionObserver?.disconnect()}get value(){return x.track(this,"value"),this._value}set value(t){const e=this._value
 let n=t
 if(this.options?.length){const t=this.options.findIndex((t=>t.value===n)),e=this.options[this.selectedIndex]?.value??null,i=this.options[t]?.value??null;-1!==t&&e===i||(n="",this.selectedIndex=t),n=this.firstSelectedOption?.value??n}e!==n&&(this._value=n,super.valueChanged(e,n),x.notify(this,"value"),this.updateDisplayValue())}get displayValue(){return x.track(this,"displayValue"),this.firstSelectedOption?.text??""}anchoredRegionChanged(t,e){this.anchoredRegion&&this.control&&(this.anchoredRegion.anchorElement=this.control)}controlChanged(t,e){this.anchoredRegion&&this.control&&(this.anchoredRegion.anchorElement=this.control)}slottedOptionsChanged(t,e){const n=this.value
 this.options.forEach((t=>{const e=x.getNotifier(t)
@@ -9473,10 +9484,12 @@ const t=[]
 for(const e of this.slottedOptions)if(vO(e)){if(e.hidden)continue
 const n=this.getGroupOptions(e),i=this.filterMatchesText(e.labelContent)
 n.forEach((e=>{e.visuallyHidden=!i&&this.isOptionHiddenOrFilteredOut(e),e.visuallyHidden||t.push(e)}))}else gO(e)&&(e.visuallyHidden=this.isOptionHiddenOrFilteredOut(e),e.visuallyHidden||t.push(e))
-this.filteredOptions=t}getGroupOptions(t){return Array.from(t.children).filter((t=>gO(t))).map((e=>(t.hidden&&gO(e)&&(e.visuallyHidden=!0),e)))}updateValue(t){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.value??""),t&&(this.$emit("input"),this.$emit("change",this,{bubbles:!0,composed:void 0}))}clearSelect(){const t=this.getPlaceholderOption()
+this.filteredOptions=t}getGroupOptions(t){return Array.from(t.children).filter((t=>gO(t))).map((e=>(t.hidden&&gO(e)&&(e.visuallyHidden=!0),e)))}updateValue(t){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.value??"",this.observeSelectedOptionTextContent()),t&&(this.$emit("input"),this.$emit("change",this,{bubbles:!0,composed:void 0}))}clearSelect(){const t=this.getPlaceholderOption()
 this.selectedIndex=t?this.options.indexOf(t):-1}setProxyOptions(){this.proxy instanceof HTMLSelectElement&&this.options&&(this.proxy.options.length=0,this.options.forEach((t=>{const e=t.proxy||(t instanceof HTMLOptionElement?t.cloneNode():null)
 e&&this.proxy.options.add(e)})))}filterChanged(){this.filterOptions()}emitFilterInputEvent(){const t={filterText:this.filter}
-this.$emit("filter-input",t,{bubbles:!0})}initializeOpenState(){this.setActiveOption(this.selectedIndex),this.ariaControls=this.listboxId,this.ariaExpanded="true",this.setPositioning(),this.focusAndScrollOptionIntoView()}}t([ft],CO.prototype,"appearance",void 0),t([ft({attribute:"position"})],CO.prototype,"positionAttribute",void 0),t([ft({attribute:"error-text"})],CO.prototype,"errorText",void 0),t([ft({attribute:"error-visible",mode:"boolean"})],CO.prototype,"errorVisible",void 0),t([ft({attribute:"filter-mode"})],CO.prototype,"filterMode",void 0),t([ft({attribute:"clearable",mode:"boolean"})],CO.prototype,"clearable",void 0),t([ft({attribute:"loading-visible",mode:"boolean"})],CO.prototype,"loadingVisible",void 0),t([C],CO.prototype,"displayPlaceholder",void 0),t([ft({attribute:"open",mode:"boolean"})],CO.prototype,"open",void 0),t([C],CO.prototype,"position",void 0),t([C],CO.prototype,"control",void 0),t([C],CO.prototype,"scrollableRegion",void 0),t([C],CO.prototype,"filterInput",void 0),t([C],CO.prototype,"anchoredRegion",void 0),t([C],CO.prototype,"hasOverflow",void 0),t([C],CO.prototype,"filteredOptions",void 0),t([C],CO.prototype,"filter",void 0),t([C],CO.prototype,"availableViewportHeight",void 0),t([k],CO.prototype,"collapsible",null),t([k],CO.prototype,"labelContent",null),t([k],CO.prototype,"displayValue",null)
+this.$emit("filter-input",t,{bubbles:!0})}initializeOpenState(){this.setActiveOption(this.selectedIndex),this.ariaControls=this.listboxId,this.ariaExpanded="true",this.setPositioning(),this.focusAndScrollOptionIntoView()}observeSelectedOptionTextContent(){if(this.selectedOptionObserver?.disconnect(),-1===this.selectedIndex)return
+const t=this.firstSelectedOption
+t&&this.selectedOptionObserver?.observe(t,{characterData:!0,subtree:!0,childList:!0})}}t([ft],CO.prototype,"appearance",void 0),t([ft({attribute:"position"})],CO.prototype,"positionAttribute",void 0),t([ft({attribute:"error-text"})],CO.prototype,"errorText",void 0),t([ft({attribute:"error-visible",mode:"boolean"})],CO.prototype,"errorVisible",void 0),t([ft({attribute:"filter-mode"})],CO.prototype,"filterMode",void 0),t([ft({attribute:"clearable",mode:"boolean"})],CO.prototype,"clearable",void 0),t([ft({attribute:"loading-visible",mode:"boolean"})],CO.prototype,"loadingVisible",void 0),t([C],CO.prototype,"displayPlaceholder",void 0),t([ft({attribute:"open",mode:"boolean"})],CO.prototype,"open",void 0),t([C],CO.prototype,"position",void 0),t([C],CO.prototype,"control",void 0),t([C],CO.prototype,"scrollableRegion",void 0),t([C],CO.prototype,"filterInput",void 0),t([C],CO.prototype,"anchoredRegion",void 0),t([C],CO.prototype,"hasOverflow",void 0),t([C],CO.prototype,"filteredOptions",void 0),t([C],CO.prototype,"filter",void 0),t([C],CO.prototype,"availableViewportHeight",void 0),t([k],CO.prototype,"collapsible",null),t([k],CO.prototype,"labelContent",null),t([k],CO.prototype,"displayValue",null)
 const kO=CO.compose({baseName:"select",baseClass:ns,template:(t,e)=>Q`
     <template
         class="${t=>[t.collapsible&&"collapsible",t.collapsible&&t.open&&"open",t.disabled&&"disabled",t.collapsible&&t.position].filter(Boolean).join(" ")}"