@ni/spright-components 2.0.8 → 2.0.10

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

@@ -3110,10 +3110,6 @@ const xg="nimble-icon-arrow-expander-down",Cg="above",kg="underline",Sg="outline
         width: 0px;
     }
 
-    [part='start'] {
-        display: none;
-    }
-
     .control {
         align-items: center;
         cursor: pointer;
@@ -3141,10 +3137,59 @@ const xg="nimble-icon-arrow-expander-down",Cg="above",kg="underline",Sg="outline
         border-bottom-color: ${al};
     }
 
+    [part='start'] {
+        display: none;
+    }
+
+    .selected-value {
+        flex: auto;
+        font-family: inherit;
+        text-align: start;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        padding: 0px;
+        padding-left: ${_l};
+    }
+
+    .selected-value[disabled]::placeholder {
+        color: ${Hc};
+    }
+
+    .indicator {
+        flex: none;
+        margin-left: ${Sl};
+        padding-right: 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .indicator slot[name='indicator'] svg {
+        width: ${El};
+        height: ${El};
+        fill: ${Vc};
+    }
+
+    :host([disabled]) .indicator slot[name='indicator'] svg {
+        fill: ${Hc};
+    }
+
+    [part='end'] {
+        margin-inline-start: auto;
+    }
+
+    :host([open][position='above']) .anchored-region {
+        padding-bottom: ${Sl};
+    }
+
+    :host([open][position='below']) .anchored-region {
+        padding-top: ${Sl};
+    }
+
     .listbox {
         display: inline-flex;
         flex-direction: column;
-        overflow-y: auto;
         width: 100%;
         --ni-private-listbox-visible-option-count: 10.5;
         --ni-private-listbox-anchor-element-gap: ${Sl};
@@ -3178,12 +3223,6 @@ const xg="nimble-icon-arrow-expander-down",Cg="above",kg="underline",Sg="outline
         --ni-private-listbox-loading-indicator-height: ${Cl};
     }
 
-    .listbox slot {
-        display: block;
-        background: transparent;
-        padding: var(--ni-private-listbox-padding);
-    }
-
     :host([open][position='above']) .listbox {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
@@ -3194,55 +3233,33 @@ const xg="nimble-icon-arrow-expander-down",Cg="above",kg="underline",Sg="outline
         border-top-right-radius: 0;
     }
 
-    :host([open][position='above']) .anchored-region {
-        padding-bottom: ${Sl};
+    .scrollable-region {
+        overflow-y: auto;
     }
 
-    :host([open][position='below']) .anchored-region {
-        padding-top: ${Sl};
+    .listbox slot {
+        display: block;
+        background: transparent;
+        padding: var(--ni-private-listbox-padding);
     }
 
-    .selected-value {
-        flex: auto;
-        font-family: inherit;
-        text-align: start;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        padding: 0px;
-        padding-left: ${_l};
+    .listbox.empty slot {
+        display: none;
     }
 
-    .selected-value[disabled]::placeholder {
-        color: ${Hc};
+    ::slotted([role='option']),
+    ::slotted(option) {
+        flex: none;
     }
 
-    .indicator {
-        flex: none;
-        margin-left: ${Sl};
-        padding-right: 8px;
+    .no-results-label {
+        color: ${Rc};
+        height: ${Cl};
+        display: inline-flex;
         display: flex;
-        justify-content: center;
+        flex: 1 0 auto;
         align-items: center;
-    }
-
-    .indicator slot[name='indicator'] svg {
-        width: ${El};
-        height: ${El};
-        fill: ${Vc};
-    }
-
-    :host([disabled]) .indicator slot[name='indicator'] svg {
-        fill: ${Hc};
-    }
-
-    [part='end'] {
-        margin-inline-start: auto;
-    }
-
-    ::slotted([role='option']),
-    ::slotted(option) {
-        flex: none;
+        padding: ${Sl} ${_l};
     }
 `.withBehaviors(ch(kg,Mt`
             .control {
@@ -3378,10 +3395,6 @@ const xg="nimble-icon-arrow-expander-down",Cg="above",kg="underline",Sg="outline
     :host([disabled]) .dropdown-icon {
         fill: ${Hc};
     }
-
-    :host(:empty) .listbox {
-        display: none;
-    }
 `.withBehaviors(ch(_g,Mt`
             :host([error-visible]) .control {
                 border-bottom-width: ${$l};
@@ -3400,7 +3413,7 @@ if(!e||e.disabled)return!1
 this.selectedOptions=[e],this.control.value=e.text,this.clearSelectionRange(),this.updateValue(!0)}return this.open=!this.open,this.open&&this.control.focus(),!0}toggleButtonClickHandler(t){t.stopImmediatePropagation()}toggleButtonChangeHandler(t){this.open=this.dropdownButton.checked,t.stopImmediatePropagation()}toggleButtonKeyDownHandler(t){switch(t.key){case Da:case Ma:case La:case Ta:return this.open=!0,this.stopPropagation(t),!1
 default:return!0}}filterOptions(){this.autocomplete&&this.autocomplete!==Qn||(this.filter="")
 const t=this.filter.toLowerCase()
-this.filteredOptions=this._options.filter((e=>e.text.toLowerCase().startsWith(t))),this.isAutocompleteList&&(this.filteredOptions.length||t||(this.filteredOptions=this._options),this._options.forEach((t=>{t.visuallyHidden=!this.filteredOptions.includes(t)})))
+this.filteredOptions=this._options.filter((e=>e.text.toLowerCase().startsWith(t)&&!e.hidden)),this.isAutocompleteList&&this._options.forEach((t=>{t.visuallyHidden=!this.filteredOptions.includes(t)}))
 const e=this.filteredOptions.filter((t=>!t.disabled))
 this.filteredOptions=e}inputHandler(t){return this.filter=this.control.value,this.filterOptions(),this.isAutocompleteInline||(this.selectedIndex=this.options.map((t=>t.text)).indexOf(this.control.value)),!t.inputType.includes("deleteContent")&&this.filter.length&&(this.isAutocompleteList&&!this.open&&(this.open=!0),this.isAutocompleteInline&&(this.filteredOptions.length?(this.selectedOptions=[this.filteredOptions[0]],this.selectedIndex=this.options.indexOf(this.firstSelectedOption),this.setInlineSelection()):this.selectedIndex=-1)),this.valueUpdatedByInput||(this.valueBeforeTextUpdate=this.value),this.valueUpdatedByInput=!0,this.value!==this.control.value&&this.focusAndScrollOptionIntoView(),this.value=this.control.value,!0}keydownHandler(t){if(t.ctrlKey||t.altKey)return!0
 switch(t.key){case Ta:this.syncValue(),this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange(),this.emitChangeIfValueUpdated()
@@ -3423,7 +3436,7 @@ const t=this.getBoundingClientRect(),e=window.innerHeight-t.bottom
 this.forcedPosition?this.position=this.positionAttribute:t.top>e?this.position=Wn:this.position=Gn,this.positionAttribute=this.forcedPosition?this.positionAttribute:this.position,this.availableViewportHeight=this.position===Wn?Math.trunc(t.top):Math.trunc(e)}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(),b.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(t,e){this.$fastController.isConnected&&this._options.forEach((t=>{t.selected=e.includes(t)}))}positionChanged(t,e){this.positionAttribute=e,this.setPositioning()}regionChanged(t,e){this.region&&this.controlWrapper&&(this.region.anchorElement=this.controlWrapper)}controlWrapperChanged(t,e){this.region&&this.controlWrapper&&(this.region.anchorElement=this.controlWrapper)}ariaLabelChanged(t,e){this.updateInputAriaLabel()}updateValue(t){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value,this.control.value=this.value),t&&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 t=this.control.value.length
 this.control.setSelectionRange(t,t)}syncValue(){const t=this.selectedIndex>-1?this.firstSelectedOption?.text:this.control.value
 this.updateValue(this.value!==t)}updateInputAriaLabel(){const t=this.shadowRoot?.querySelector(".selected-value")
-this.ariaLabel?t?.setAttribute("aria-label",this.ariaLabel):t?.removeAttribute("aria-label")}emitChangeIfValueUpdated(){this.valueUpdatedByInput&&(this.value!==this.valueBeforeTextUpdate&&this.$emit("change"),this.valueUpdatedByInput=!1)}}t([ft],Rg.prototype,"appearance",void 0),t([ft({attribute:"error-text"})],Rg.prototype,"errorText",void 0),t([ft({attribute:"error-visible",mode:"boolean"})],Rg.prototype,"errorVisible",void 0),t([ft({attribute:"autocomplete",mode:"fromView"})],Rg.prototype,"autocomplete",void 0),t([ft({attribute:"position"})],Rg.prototype,"positionAttribute",void 0),t([ft({attribute:"open",mode:"boolean"})],Rg.prototype,"open",void 0),t([ft],Rg.prototype,"placeholder",void 0),t([C],Rg.prototype,"position",void 0),t([C],Rg.prototype,"region",void 0),t([C],Rg.prototype,"controlWrapper",void 0),t([C],Rg.prototype,"control",void 0),t([C],Rg.prototype,"listbox",void 0),t([C],Rg.prototype,"dropdownButton",void 0),t([C],Rg.prototype,"hasOverflow",void 0),t([C],Rg.prototype,"availableViewportHeight",void 0)
+this.ariaLabel?t?.setAttribute("aria-label",this.ariaLabel):t?.removeAttribute("aria-label")}emitChangeIfValueUpdated(){this.valueUpdatedByInput&&(this.value!==this.valueBeforeTextUpdate&&this.$emit("change"),this.valueUpdatedByInput=!1)}}t([ft],Rg.prototype,"appearance",void 0),t([ft({attribute:"error-text"})],Rg.prototype,"errorText",void 0),t([ft({attribute:"error-visible",mode:"boolean"})],Rg.prototype,"errorVisible",void 0),t([ft({attribute:"autocomplete",mode:"fromView"})],Rg.prototype,"autocomplete",void 0),t([ft({attribute:"position"})],Rg.prototype,"positionAttribute",void 0),t([ft({attribute:"open",mode:"boolean"})],Rg.prototype,"open",void 0),t([ft],Rg.prototype,"placeholder",void 0),t([C],Rg.prototype,"position",void 0),t([C],Rg.prototype,"region",void 0),t([C],Rg.prototype,"controlWrapper",void 0),t([C],Rg.prototype,"control",void 0),t([C],Rg.prototype,"listbox",void 0),t([C],Rg.prototype,"dropdownButton",void 0),t([C],Rg.prototype,"filteredOptions",void 0),t([C],Rg.prototype,"hasOverflow",void 0),t([C],Rg.prototype,"availableViewportHeight",void 0)
 const Fg=Rg.compose({baseName:"combobox",baseClass:Og,template:(t,e)=>Q`
     <template
         aria-disabled="${t=>t.ariaDisabled}"
@@ -3478,7 +3491,11 @@ const Fg=Rg.compose({baseName:"combobox",baseClass:Og,template:(t,e)=>Q`
             horizontal-scaling="anchor"
             ?hidden="${t=>!t.open}">
             <div
-                class="listbox"
+                class="
+                    listbox
+                    scrollable-region
+                    ${t=>0===t.filteredOptions.length?"empty":""}
+                "
                 id="${t=>t.listboxId}"
                 part="listbox"
                 role="listbox"
@@ -3489,6 +3506,11 @@ const Fg=Rg.compose({baseName:"combobox",baseClass:Og,template:(t,e)=>Q`
                 <slot name="option"
                     ${ie({filter:t=>t instanceof HTMLElement&&qn.slottedOptionFilter(t),flatten:!0,property:"slottedOptions"})}
                 ></slot>
+                ${Gt((t=>0===t.filteredOptions.length),Q`
+                    <span class="no-results-label">
+                        ${t=>Ym.getValueFor(t)}
+                    </span>
+                `)}
             </div>
         </${Oh}>
     </template>
@@ -7322,7 +7344,11 @@ const nI="nimble-toolbar",iI="Bold",sI="Italics",oI="Bulleted List",rI="Numbered
             horizontal-scaling="anchor"
             ?hidden="${t=>!t.open}">
             <div
-                class="listbox"
+                class="
+                    listbox
+                    scrollable-region
+                    ${t=>0===t.filteredOptions.length?"empty":""}
+                "
                 part="listbox"
                 role="listbox"
                 @click="${(t,e)=>t.clickHandler(e.event)}"
@@ -7334,6 +7360,11 @@ const nI="nimble-toolbar",iI="Bold",sI="Italics",oI="Bulleted List",rI="Numbered
                     ${ie({filter:t=>t instanceof HTMLElement&&qn.slottedOptionFilter(t),flatten:!0,property:"slottedOptions"})}
                 >
                 </slot>
+                ${Gt((t=>0===t.filteredOptions.length),Q`
+                    <span class="no-results-label">
+                        ${t=>Ym.getValueFor(t)}
+                    </span>
+                `)}
             </div>
         </${Oh}>
     </template>
@@ -7348,7 +7379,7 @@ this.filteredOptions=this._options.filter((e=>pI(e.text).includes(t)))}else this
 this._options.forEach((t=>{t.hidden=!this.filteredOptions.includes(t)})),this.filteredOptions.length?(this.selectedOptions=[this.filteredOptions[0]],this.selectedIndex=this.options.indexOf(this.firstSelectedOption)):(this.selectedOptions=[],this.selectedIndex=-1)}slottedOptionsChanged(t,e){super.slottedOptionsChanged(t,e),this.filterOptions()}clickHandler(t){const e=t.target.closest("option,[role=option]")
 if(!e||e.disabled)return!1
 const n={href:e.value,displayName:e.text}
-return this.$emit("mention-selected",n),this.setOpen(!1),!0}anchorElementChanged(t,e){t&&this.anchorElementIntersectionObserver.unobserve(t),this.region&&this.anchorElement&&(this.region.anchorElement=this.anchorElement,this.region.update(),this.anchorElementIntersectionObserver.observe(e))}regionChanged(){this.regionNotifier&&this.regionNotifier.unsubscribe(this),this.regionNotifier=x.getNotifier(this.region),this.regionNotifier.subscribe(this)}handleChange(t,e){super.handleChange(t,e),"initialLayoutComplete"===e&&this.focusAndScrollOptionIntoView()}focusAndScrollOptionIntoView(){this.open&&this.firstSelectedOption&&requestAnimationFrame((()=>{this.firstSelectedOption?.scrollIntoView({block:"nearest"})}))}setOpen(t){this.open=t}}t([C],fI.prototype,"open",void 0),t([C],fI.prototype,"region",void 0),t([C],fI.prototype,"availableViewportHeight",void 0),t([C],fI.prototype,"anchorElement",void 0)
+return this.$emit("mention-selected",n),this.setOpen(!1),!0}anchorElementChanged(t,e){t&&this.anchorElementIntersectionObserver.unobserve(t),this.region&&this.anchorElement&&(this.region.anchorElement=this.anchorElement,this.region.update(),this.anchorElementIntersectionObserver.observe(e))}regionChanged(){this.regionNotifier&&this.regionNotifier.unsubscribe(this),this.regionNotifier=x.getNotifier(this.region),this.regionNotifier.subscribe(this)}handleChange(t,e){super.handleChange(t,e),"initialLayoutComplete"===e&&this.focusAndScrollOptionIntoView()}focusAndScrollOptionIntoView(){this.open&&this.firstSelectedOption&&requestAnimationFrame((()=>{this.firstSelectedOption?.scrollIntoView({block:"nearest"})}))}setOpen(t){this.open=t}}t([C],fI.prototype,"open",void 0),t([C],fI.prototype,"region",void 0),t([C],fI.prototype,"availableViewportHeight",void 0),t([C],fI.prototype,"filteredOptions",void 0),t([C],fI.prototype,"anchorElement",void 0)
 const mI=fI.compose({baseName:"rich-text-mention-listbox",template:uI,styles:hI})
 _i.getOrCreate().withPrefix("nimble").register(mI())
 const gI="nimble-rich-text-mention-listbox",vI=Q`
@@ -9046,10 +9077,6 @@ const qT=Mt`
         overflow-x: clip;
     }
 
-    .listbox.empty slot {
-        display: none;
-    }
-
     .listbox.above {
         flex-flow: column-reverse;
     }
@@ -9087,7 +9114,8 @@ const qT=Mt`
     }
 
     .filter-icon {
-        padding-left: ${Sl};
+        flex-shrink: 0;
+        margin-left: ${Sl};
         ${ul.cssCustomProperty}: ${Rc};
     }
 
@@ -9109,10 +9137,6 @@ const qT=Mt`
         outline: 0px;
     }
 
-    .scrollable-region {
-        overflow: auto;
-    }
-
     ::slotted([role='option']) {
         background-color: transparent;
     }
@@ -9129,14 +9153,6 @@ const qT=Mt`
         background-color: ${il};
     }
 
-    .no-results-label {
-        color: ${Rc};
-        height: ${Cl};
-        display: inline-flex;
-        align-items: center;
-        padding: ${Sl} ${_l};
-    }
-
     .loading-container {
         padding-left: ${_l};
         padding-right: ${_l};
@@ -9515,7 +9531,7 @@ const sO=iO.compose({baseName:"select",baseClass:is,template:(t,e)=>Q`
             <div class="listbox-background">
                 <div
                     class="
-                        listbox 
+                        listbox
                         ${t=>0===t.filteredOptions.length?"empty":""}
                         ${t=>t.positionAttribute}
                     "
@@ -9547,12 +9563,12 @@ const sO=iO.compose({baseName:"select",baseClass:is,template:(t,e)=>Q`
                             name="option"
                             ${ie({filter:t=>t instanceof HTMLElement&&(XT(t)||JT(t)),flatten:!0,property:"slottedOptions"})}
                         ></slot>
+                        ${Gt((t=>t.filterMode!==$g.none&&0===t.filteredOptions.length&&!t.loadingVisible),Q`
+                            <span class="no-results-label">
+                                ${t=>Ym.getValueFor(t)}
+                            </span>
+                        `)}
                     </div>
-                    ${Gt((t=>t.filterMode!==$g.none&&0===t.filteredOptions.length&&!t.loadingVisible),Q`
-                        <span class="no-results-label ${t=>t.positionAttribute}">
-                            ${t=>Ym.getValueFor(t)}
-                        </span>
-                    `)}
                     ${Gt((t=>t.loadingVisible),Q`
                         <div class="loading-container ${t=>t.positionAttribute} ${t=>0===t.filteredOptions.length?"empty":""}"
                             @click="${(t,e)=>t.ignoreClickHandler(e.event)}">