@ni/nimble-components 7.4.3 → 7.7.0

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

@@ -863,8 +863,8 @@ const yc=mt`
     ${rs("inline-flex")}
 
     :host{font:${tr};align-items:center;cursor:pointer;outline:none;user-select:none}:host([disabled]){cursor:default}.control{width:calc(${Jo} / 2);height:calc(${Jo} / 2);box-sizing:border-box;flex-shrink:0;border:${sn} solid ${jo};padding:2px;display:inline-flex;align-items:center;justify-content:center;transition:box-shadow ${fr};${""}
-        line-height:0}@media (prefers-reduced-motion){.control{transition-duration:0s}}:host([disabled]) .control{background-color:rgba(${qo},0.1);border-color:rgba(${qo},0.2)}:host(:not([disabled]):not(:active):hover) .control{border-color:${Yo};box-shadow:0px 0px 0px ${sn} ${Yo} inset}:host(${uc}) .control{border-color:${Yo};outline:2px solid ${Yo};outline-offset:2px}.label{font:inherit;color:${Vn};padding-left:1ch;cursor:inherit}:host([disabled]) .label{color:${An}}slot[name='checked-indicator'] svg{height:${on};width:${on};overflow:visible}slot[name='checked-indicator'] path{fill:${jo};opacity:0}:host([aria-checked='true']) slot[name='checked-indicator'] path{opacity:1}:host([disabled]) slot[name='checked-indicator'] path{fill:rgba(${qo},0.3)}`
-const $c=class extends Qe{}.compose({baseName:"checkbox",baseClass:Qe,template:(t,e)=>Y`<template role="checkbox" aria-checked="${t=>t.checked}" aria-required="${t=>t.required}" aria-disabled="${t=>t.disabled}" aria-readonly="${t=>t.readOnly}" tabindex="${t=>t.disabled?null:0}" @keypress="${(t,e)=>t.keypressHandler(e.event)}" @click="${(t,e)=>t.clickHandler(e.event)}" class="${t=>t.readOnly?"readonly":""} ${t=>t.checked?"checked":""} ${t=>t.indeterminate?"indeterminate":""}"><div part="control" class="control"><slot name="checked-indicator">${e.checkedIndicator||""}</slot><slot name="indeterminate-indicator">${e.indeterminateIndicator||""}</slot></div><label part="label" class="${t=>t.defaultSlottedNodes&&t.defaultSlottedNodes.length?"label":"label label__hidden"}"><slot ${Ct("defaultSlottedNodes")}></slot></label></template>`,styles:yc,checkedIndicator:ia.data})
+        line-height:0}@media (prefers-reduced-motion){.control{transition-duration:0s}}:host([disabled]) .control{background-color:rgba(${qo},0.1);border-color:rgba(${qo},0.2)}:host(:not([disabled]):not(:active):hover) .control{border-color:${Yo};box-shadow:0px 0px 0px ${sn} ${Yo} inset}:host(${uc}) .control{border-color:${Yo};outline:2px solid ${Yo};outline-offset:2px}.label{font:inherit;color:${Vn};padding-left:1ch;cursor:inherit}:host([disabled]) .label{color:${An}}slot[name='checked-indicator'],slot[name='indeterminate-indicator']{display:none}slot[name='checked-indicator'] svg{height:${on};width:${on};overflow:visible}:host(.checked:not(.indeterminate)) slot[name='checked-indicator']{display:contents}slot[name='checked-indicator'] path{fill:${jo}}:host([disabled]) slot[name='checked-indicator'] path{fill:rgba(${qo},0.3)}slot[name='indeterminate-indicator'] svg{height:${on};width:${on};overflow:visible}:host(.indeterminate) slot[name='indeterminate-indicator']{display:contents}slot[name='indeterminate-indicator'] path{fill:${jo}}:host([disabled]) slot[name='indeterminate-indicator'] path{fill:rgba(${qo},0.3)}`
+const $c=class extends Qe{}.compose({baseName:"checkbox",baseClass:Qe,template:(t,e)=>Y`<template role="checkbox" aria-checked="${t=>t.checked}" aria-required="${t=>t.required}" aria-disabled="${t=>t.disabled}" aria-readonly="${t=>t.readOnly}" tabindex="${t=>t.disabled?null:0}" @keypress="${(t,e)=>t.keypressHandler(e.event)}" @click="${(t,e)=>t.clickHandler(e.event)}" class="${t=>t.readOnly?"readonly":""} ${t=>t.checked?"checked":""} ${t=>t.indeterminate?"indeterminate":""}"><div part="control" class="control"><slot name="checked-indicator">${e.checkedIndicator||""}</slot><slot name="indeterminate-indicator">${e.indeterminateIndicator||""}</slot></div><label part="label" class="${t=>t.defaultSlottedNodes&&t.defaultSlottedNodes.length?"label":"label label__hidden"}"><slot ${Ct("defaultSlottedNodes")}></slot></label></template>`,styles:yc,checkedIndicator:ia.data,indeterminateIndicator:yl.data})
 Vs.getOrCreate().withPrefix("nimble").register($c())
 var Cc="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},kc={},_c={},zc={}
 !function(t){var e
@@ -998,7 +998,7 @@ var vh,gh
 !function(t){t.Left="left",t.Right="right"}(vh||(vh={})),function(t){t.Opening="opening",t.Opened="opened",t.Closing="closing",t.Closed="closed"}(gh||(gh={}))
 class mh extends Ds{constructor(){super(...arguments),this.location=vh.Left,this.state=gh.Closed,this.preventDismiss=!1,this.propertiesToWatch=["hidden","location","state"],this.animationDurationMilliseconds=.001}connectedCallback(){this.trapFocus=!1,super.connectedCallback(),this.updateAnimationDuration(),this.animationsEnabledChangedHandler=()=>this.updateAnimationDuration(),dh.addEventListener("change",this.animationsEnabledChangedHandler),this.onStateChanged()
 const t=f.getNotifier(this),e={handleChange:(t,e)=>this.onPropertyChange(e)}
-this.propertiesToWatch.forEach((s=>t.subscribe(e,s))),this.propertyChangeSubscriber=e,this.propertyChangeNotifier=t}disconnectedCallback(){super.disconnectedCallback(),this.cancelCurrentAnimation(),this.propertyChangeNotifier&&this.propertyChangeSubscriber&&(this.propertiesToWatch.forEach((t=>this.propertyChangeNotifier.unsubscribe(this.propertyChangeSubscriber,t))),this.propertyChangeNotifier=void 0,this.propertyChangeSubscriber=void 0),this.animationsEnabledChangedHandler&&(dh.removeEventListener("change",this.animationsEnabledChangedHandler),this.animationsEnabledChangedHandler=void 0)}show(){this.state=gh.Opening}hide(){this.state=gh.Closing}dismiss(){this.preventDismiss||(super.dismiss(),this.hide())}onPropertyChange(t){switch(t){case"hidden":this.onHiddenChanged()
+this.propertiesToWatch.forEach((s=>t.subscribe(e,s))),this.propertyChangeSubscriber=e,this.propertyChangeNotifier=t}disconnectedCallback(){super.disconnectedCallback(),this.cancelCurrentAnimation(),this.propertyChangeNotifier&&this.propertyChangeSubscriber&&(this.propertiesToWatch.forEach((t=>this.propertyChangeNotifier.unsubscribe(this.propertyChangeSubscriber,t))),this.propertyChangeNotifier=void 0,this.propertyChangeSubscriber=void 0),this.animationsEnabledChangedHandler&&(dh.removeEventListener("change",this.animationsEnabledChangedHandler),this.animationsEnabledChangedHandler=void 0)}show(){this.state=gh.Opening}hide(){this.state=gh.Closing}dismiss(){this.$emit("cancel",{},{bubbles:!1,cancelable:!0,composed:!1})&&!this.preventDismiss&&(super.dismiss(),this.hide())}onPropertyChange(t){switch(t){case"hidden":this.onHiddenChanged()
 break
 case"location":this.onLocationChanged()
 break
@@ -1274,7 +1274,7 @@ const Xh=mt`
         );border-bottom-color:${Yo}}:host([disabled]) .root:hover{--ni-private-bottom-border-width:1px}.root:focus-within{border-bottom-color:${Yo}}[part='start']{display:none}.control{-webkit-appearance:none;font:inherit;background:transparent;color:inherit;padding-top:0px;padding-bottom:0px;height:calc(
             ${Jo} - ${sn} -
                 var(--ni-private-hover-bottom-border-width)
-        );width:100%;margin-top:auto;margin-bottom:auto;padding-left:calc(${tn} / 2);padding-right:calc(${tn} / 2);border:none;text-overflow:ellipsis}.control:hover,.control:focus,.control:disabled,.control:active{outline:none}.control::selection{color:${Wn};background:rgba(${Fo},0.3)}.control::placeholder{color:${Wn}}.control:not([readonly]):focus-within::placeholder{opacity:1}.control[disabled]::placeholder{color:${An}}[part='end']{display:none}:host(.invalid) [part='end']{display:contents}:host(.invalid) [part='end'] svg{height:${on};width:${on};padding-right:8px;flex:none}:host(.invalid) [part='end'] path{fill:${Uo}}:host([disabled]) [part='end'] path{fill:${An}}.errortext{display:none}:host(.invalid) .errortext{display:block;font:${lr};color:${Uo};width:100%;position:absolute;top:${Jo};overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.invalid[readonly]:not([disabled])) .errortext{top:calc(${Jo} - ${sn})}:host(.invalid) .error-text:empty{display:none}:host([disabled]) .errortext{color:${An}}`.withBehaviors(gc(Yh.Underline,mt`
+        );width:100%;margin-top:auto;margin-bottom:auto;padding-left:calc(${tn} / 2);padding-right:calc(${tn} / 2);border:none;text-overflow:ellipsis}.control:hover,.control:focus,.control:disabled,.control:active{outline:none}.control::selection{color:${Wn};background:rgba(${Fo},0.3)}.control::placeholder{color:${Wn}}.control:not([readonly]):focus-within::placeholder{opacity:1}.control[disabled]::placeholder{color:${An}}[part='end']{display:contents}.error-content{display:none}:host(.invalid) .error-content{display:contents}:host(.invalid) .error-content svg{height:${on};width:${on};padding-right:8px;flex:none}:host(.invalid) .error-content path{fill:${Uo}}:host([disabled]) .error-content path{fill:${An}}.errortext{display:none}:host(.invalid) .errortext{display:block;font:${lr};color:${Uo};width:100%;position:absolute;top:${Jo};overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.invalid[readonly]:not([disabled])) .errortext{top:calc(${Jo} - ${sn})}:host(.invalid) .error-text:empty{display:none}:host([disabled]) .errortext{color:${An}}[part='actions']{display:contents}slot[name='actions']::slotted(*){margin-right:8px;${Jo.cssCustomProperty}:24px}`.withBehaviors(gc(Yh.Underline,mt`
             .root{--ni-private-bottom-border-width:1px;padding-top:${sn};padding-left:${sn};padding-right:${sn}}`),gc(Yh.Block,mt`
             .root{background-color:rgba(${qo},0.1);--ni-private-bottom-border-width:0px;padding-top:${sn};padding-left:${sn};padding-right:${sn}}.root:focus-within{--ni-private-bottom-border-width:1px}.root:focus-within:hover{--ni-private-bottom-border-width:var(
                     --ni-private-hover-bottom-border-width
@@ -1287,7 +1287,7 @@ const Xh=mt`
             ${""}
             .control::-ms-reveal{filter:invert(100%)}`,Li.Dark))
 class Gh extends Xs{constructor(){super(...arguments),this.appearance=Yh.Underline}connectedCallback(){super.connectedCallback(),this.control.setAttribute("aria-errormessage","errortext")}}So([ot],Gh.prototype,"appearance",void 0),So([ot({attribute:"error-text"})],Gh.prototype,"errorText",void 0)
-const Qh=Gh.compose({baseName:"text-field",baseClass:Xs,template:(t,e)=>Y`<template class=" ${t=>t.readOnly?"readonly":""} "><label part="label" for="control" class="${t=>t.defaultSlottedNodes&&t.defaultSlottedNodes.length?"label":"label label__hidden"}"><slot ${Ct({property:"defaultSlottedNodes",filter:ls})}></slot></label><div class="root" part="root">${Ot(0,e)}<input class="control" part="control" id="control" @input="${t=>t.handleTextInput()}" @change="${t=>t.handleChange()}" ?autofocus="${t=>t.autofocus}" ?disabled="${t=>t.disabled}" list="${t=>t.list}" maxlength="${t=>t.maxlength}" minlength="${t=>t.minlength}" pattern="${t=>t.pattern}" placeholder="${t=>t.placeholder}" ?readonly="${t=>t.readOnly}" ?required="${t=>t.required}" size="${t=>t.size}" ?spellcheck="${t=>t.spellcheck}" :value="${t=>t.value}" type="${t=>t.type}" aria-atomic="${t=>t.ariaAtomic}" aria-busy="${t=>t.ariaBusy}" aria-controls="${t=>t.ariaControls}" aria-current="${t=>t.ariaCurrent}" aria-describedby="${t=>t.ariaDescribedby}" aria-details="${t=>t.ariaDetails}" aria-disabled="${t=>t.ariaDisabled}" aria-errormessage="${t=>t.ariaErrormessage}" aria-flowto="${t=>t.ariaFlowto}" aria-haspopup="${t=>t.ariaHaspopup}" aria-hidden="${t=>t.ariaHidden}" aria-invalid="${t=>t.ariaInvalid}" aria-keyshortcuts="${t=>t.ariaKeyshortcuts}" aria-label="${t=>t.ariaLabel}" aria-labelledby="${t=>t.ariaLabelledby}" aria-live="${t=>t.ariaLive}" aria-owns="${t=>t.ariaOwns}" aria-relevant="${t=>t.ariaRelevant}" aria-roledescription="${t=>t.ariaRoledescription}" ${bt("control")} />${zt(0,e)}</div></template>`,styles:Xh,shadowOptions:{delegatesFocus:!0},end:Y` ${Pa.data}<div id="errortext" class="errortext" title="${t=>t.errorText}" aria-live="polite">${t=>t.errorText}</div>`})
+const Qh=Gh.compose({baseName:"text-field",baseClass:Xs,template:(t,e)=>Y`<template class=" ${t=>t.readOnly?"readonly":""} "><label part="label" for="control" class="${t=>t.defaultSlottedNodes&&t.defaultSlottedNodes.length?"label":"label label__hidden"}"><slot ${Ct({property:"defaultSlottedNodes",filter:ls})}></slot></label><div class="root" part="root">${Ot(0,e)}<input class="control" part="control" id="control" @input="${t=>t.handleTextInput()}" @change="${t=>t.handleChange()}" ?autofocus="${t=>t.autofocus}" ?disabled="${t=>t.disabled}" list="${t=>t.list}" maxlength="${t=>t.maxlength}" minlength="${t=>t.minlength}" pattern="${t=>t.pattern}" placeholder="${t=>t.placeholder}" ?readonly="${t=>t.readOnly}" ?required="${t=>t.required}" size="${t=>t.size}" ?spellcheck="${t=>t.spellcheck}" :value="${t=>t.value}" type="${t=>t.type}" aria-atomic="${t=>t.ariaAtomic}" aria-busy="${t=>t.ariaBusy}" aria-controls="${t=>t.ariaControls}" aria-current="${t=>t.ariaCurrent}" aria-describedby="${t=>t.ariaDescribedby}" aria-details="${t=>t.ariaDetails}" aria-disabled="${t=>t.ariaDisabled}" aria-errormessage="${t=>t.ariaErrormessage}" aria-flowto="${t=>t.ariaFlowto}" aria-haspopup="${t=>t.ariaHaspopup}" aria-hidden="${t=>t.ariaHidden}" aria-invalid="${t=>t.ariaInvalid}" aria-keyshortcuts="${t=>t.ariaKeyshortcuts}" aria-label="${t=>t.ariaLabel}" aria-labelledby="${t=>t.ariaLabelledby}" aria-live="${t=>t.ariaLive}" aria-owns="${t=>t.ariaOwns}" aria-relevant="${t=>t.ariaRelevant}" aria-roledescription="${t=>t.ariaRoledescription}" ${bt("control")} />${zt(0,e)}</div></template>`,styles:Xh,shadowOptions:{delegatesFocus:!0},end:Y`<span class="error-content">${Pa.data}</span><span part="actions"><slot name="actions"></slot></span><div id="errortext" class="errortext error-content" title="${t=>t.errorText}" aria-live="polite">${t=>t.errorText}</div>`})
 Vs.getOrCreate().withPrefix("nimble").register(Qh())
 const Jh=mt`
     ${fc}