@ni/spright-components 2.0.12 → 2.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3403,19 +3403,17 @@ const xg="nimble-icon-arrow-expander-down",Cg="above",kg="underline",Sg="outline
|
|
|
3403
3403
|
`))
|
|
3404
3404
|
class Dg{constructor(t,e){this.target=t,this.propertyName=e}bind(t){this.source=t,this.setSourceValue(!1),this.mouseOverHandler=()=>{const t=this.target.offsetWidth<this.target.scrollWidth
|
|
3405
3405
|
this.setSourceValue(t)},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(t){this.source[this.propertyName]=t}}function Ag(t){return new E("nimble-overflow",Dg,t)}let Tg=class extends Fi{}
|
|
3406
|
-
class Og extends(An(Tg)){constructor(){super(...arguments),this.proxy=document.createElement("input")}}class Rg extends Og{constructor(){super(...arguments),this.appearance=kg,this.errorVisible=!1,this.open=!1,this.filteredOptions=[],this.hasOverflow=!1,this.listboxId=Va("listbox-"),this.availableViewportHeight=0,this.valueUpdatedByInput=!1,this._value="",this.filter="",this.forcedPosition=!1}get value(){return x.track(this,"value"),this._value}set value(t){const e
|
|
3406
|
+
class Og extends(An(Tg)){constructor(){super(...arguments),this.proxy=document.createElement("input")}}class Rg extends Og{constructor(){super(...arguments),this.appearance=kg,this.errorVisible=!1,this.open=!1,this.filteredOptions=[],this.hasOverflow=!1,this.listboxId=Va("listbox-"),this.availableViewportHeight=0,this.valueUpdatedByInput=!1,this._value="",this.filter="",this.forcedPosition=!1}get value(){return x.track(this,"value"),this._value}set value(t){const e=this._value
|
|
3407
3407
|
let n=t
|
|
3408
|
-
if(this.$fastController.isConnected&&this.options){const e=this.
|
|
3409
|
-
|
|
3408
|
+
if(this.$fastController.isConnected&&this.options){const e=this.findIndexOfValidOption(t),i=this.options[this.selectedIndex]?.text,s=this.options[e]?.text
|
|
3409
|
+
i!==s&&(this.selectedIndex=e),n=this.firstSelectedOption?.text||n}e!==n&&(this._value=n,super.valueChanged(e,n),x.notify(this,"value")),this.filter=t,this.filterOptions(),this.selectedIndex=this.findIndexOfValidOption(this.value)}get options(){return x.track(this,"options"),this.filteredOptions&&this.filter?this.filteredOptions:this._options}set options(t){this._options=t,x.notify(this,"options")}get isAutocompleteInline(){return this.autocomplete===Yn||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===Xn||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===Jn}slottedOptionsChanged(t,e){const n=this.value
|
|
3410
3410
|
super.slottedOptionsChanged(t,e),this.updateValue(),n&&(this.value=n)}connectedCallback(){super.connectedCallback(),this.forcedPosition=!!this.positionAttribute,this.value&&(this.initialValue=this.value),this.setPositioning(),this.updateInputAriaLabel()}clickHandler(t){if(this.disabled)return!1
|
|
3411
3411
|
if(this.open){const e=t.target.closest("option,[role=option]")
|
|
3412
3412
|
if(!e||e.disabled)return!1
|
|
3413
3413
|
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
|
|
3414
3414
|
default:return!0}}filterOptions(){this.autocomplete&&this.autocomplete!==Qn||(this.filter="")
|
|
3415
3415
|
const t=this.filter.toLowerCase()
|
|
3416
|
-
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)}))
|
|
3417
|
-
const e=this.filteredOptions.filter((t=>!t.disabled))
|
|
3418
|
-
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
|
|
3416
|
+
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)}))}inputHandler(t){return this.filter=this.control.value,this.filterOptions(),this.isAutocompleteInline||(this.selectedIndex=this.findIndexOfValidOption(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
|
|
3419
3417
|
switch(t.key){case Ta:this.syncValue(),this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange(),this.emitChangeIfValueUpdated()
|
|
3420
3418
|
break
|
|
3421
3419
|
case Oa:if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1
|
|
@@ -3428,15 +3426,20 @@ case Ma:case Da:if(this.filterOptions(),!this.open){this.open=!0
|
|
|
3428
3426
|
break}this.filteredOptions.length>0&&super.keydownHandler(t),this.isAutocompleteInline&&this.setInlineSelection(),this.open&&this.valueUpdatedByInput&&(this.valueUpdatedByInput=!1)
|
|
3429
3427
|
break
|
|
3430
3428
|
default:return!0}return!0}keyupHandler(t){switch(t.key){case"ArrowLeft":case"ArrowRight":case"Backspace":case"Delete":case"Home":case"End":this.filter=this.control.value,this.selectedIndex=-1,this.filterOptions()}return!0}focusoutHandler(t){if(this.syncValue(),this.open){const e=t.relatedTarget
|
|
3431
|
-
this.isSameNode(e)&&this.focus()}return this.open=!1,this.emitChangeIfValueUpdated(),!0}formResetCallback(){super.formResetCallback(),this.setDefaultSelectedOption(),this.updateValue()}validate(){super.validate(this.control)}setDefaultSelectedOption(){if(this.$fastController.isConnected&&this.options){const t=this.options.findIndex((t
|
|
3432
|
-
this.selectedIndex=t,!this.dirtyValue&&this.firstSelectedOption&&(this.value=this.firstSelectedOption.text),this.setSelectedOptions()}}selectedIndexChanged(t,e){if(this.$fastController.isConnected){
|
|
3433
|
-
if(n!==this.selectedIndex)return void(this.selectedIndex=n)
|
|
3434
|
-
super.selectedIndexChanged(t,n)}}disabledChanged(t,e){super.disabledChanged&&super.disabledChanged(t,e),this.ariaDisabled=this.disabled?"true":"false"}
|
|
3429
|
+
this.isSameNode(e)&&this.focus()}return this.open=!1,this.emitChangeIfValueUpdated(),!0}formResetCallback(){super.formResetCallback(),this.setDefaultSelectedOption(),this.updateValue()}validate(){super.validate(this.control)}setDefaultSelectedOption(){if(this.$fastController.isConnected&&this.options){const t=this.options.findIndex((t=>!t.disabled&&(null!==t.getAttribute("selected")||t.selected)))
|
|
3430
|
+
this.selectedIndex=t,!this.dirtyValue&&this.firstSelectedOption&&(this.value=this.firstSelectedOption.text),this.setSelectedOptions()}}selectedIndexChanged(t,e){if(this.$fastController.isConnected){let n=function(t,e,n){return Math.min(Math.max(n,t),e)}(-1,this.options.length-1,e)
|
|
3431
|
+
if(this.options[n]?.disabled&&(n=-1),n!==this.selectedIndex)return void(this.selectedIndex=n)
|
|
3432
|
+
super.selectedIndexChanged(t,n),this.setSelectedOptions()}}disabledChanged(t,e){super.disabledChanged&&super.disabledChanged(t,e),this.ariaDisabled=this.disabled?"true":"false"}selectNextOption(){if(!this.disabled){let t=this.selectedIndex
|
|
3433
|
+
do{if(t+1>=this.options.length)return
|
|
3434
|
+
t+=1}while(this.options[t].disabled)
|
|
3435
|
+
this.selectedIndex=t}}selectPreviousOption(){if(!this.disabled){let t=this.selectedIndex
|
|
3436
|
+
do{if(t-=1,t<0)break}while(this.options[t].disabled)
|
|
3437
|
+
this.selectedIndex=t}}setPositioning(){if(!this.$fastController.isConnected)return
|
|
3435
3438
|
const t=this.getBoundingClientRect(),e=window.innerHeight-t.bottom
|
|
3436
|
-
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
|
|
3439
|
+
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??"")}setSelectedOptions(){this.selectedOptions=this.selectedIndex>-1?[this.options[this.selectedIndex]]:[],this.ariaActiveDescendant=this.firstSelectedOption?.id??"",this.focusAndScrollOptionIntoView()}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
|
|
3437
3440
|
this.control.setSelectionRange(t,t)}syncValue(){const t=this.selectedIndex>-1?this.firstSelectedOption?.text:this.control.value
|
|
3438
3441
|
this.updateValue(this.value!==t)}updateInputAriaLabel(){const t=this.shadowRoot?.querySelector(".selected-value")
|
|
3439
|
-
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)
|
|
3442
|
+
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)}findIndexOfValidOption(t){return this.options.findIndex((e=>!e.disabled&&e.text===t))}}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)
|
|
3440
3443
|
const Fg=Rg.compose({baseName:"combobox",baseClass:Og,template:(t,e)=>Q`
|
|
3441
3444
|
<template
|
|
3442
3445
|
aria-disabled="${t=>t.ariaDisabled}"
|