@ni/nimble-components 7.5.0 → 7.8.0
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.
- package/dist/all-components-bundle.js +43 -8
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +6 -6
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/checkbox/index.js +3 -2
- package/dist/esm/checkbox/index.js.map +1 -1
- package/dist/esm/checkbox/styles.js +26 -4
- package/dist/esm/checkbox/styles.js.map +1 -1
- package/dist/esm/drawer/index.d.ts +6 -0
- package/dist/esm/drawer/index.js +11 -1
- package/dist/esm/drawer/index.js.map +1 -1
- package/dist/esm/nimble-components/src/drawer/index.d.ts +6 -0
- package/dist/esm/nimble-components/src/tree-view/types.d.ts +2 -1
- package/dist/esm/tree-item/index.js +3 -2
- package/dist/esm/tree-item/index.js.map +1 -1
- package/dist/esm/tree-view/types.d.ts +2 -1
- package/dist/esm/tree-view/types.js +1 -0
- package/dist/esm/tree-view/types.js.map +1 -1
- package/package.json +1 -1
|
@@ -863,8 +863,8 @@ const yc=mt`
|
|
|
863
863
|
${rs("inline-flex")}
|
|
864
864
|
|
|
865
865
|
: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};${""}
|
|
866
|
-
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}
|
|
867
|
-
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})
|
|
866
|
+
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)}`
|
|
867
|
+
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})
|
|
868
868
|
Vs.getOrCreate().withPrefix("nimble").register($c())
|
|
869
869
|
var Cc="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},kc={},_c={},zc={}
|
|
870
870
|
!function(t){var e
|
|
@@ -998,7 +998,7 @@ var vh,gh
|
|
|
998
998
|
!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={}))
|
|
999
999
|
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()
|
|
1000
1000
|
const t=f.getNotifier(this),e={handleChange:(t,e)=>this.onPropertyChange(e)}
|
|
1001
|
-
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
|
|
1001
|
+
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()
|
|
1002
1002
|
break
|
|
1003
1003
|
case"location":this.onLocationChanged()
|
|
1004
1004
|
break
|
|
@@ -1298,14 +1298,14 @@ const td=Zh.compose({baseName:"toggle-button",template:(t,e)=>Y`<div role="butto
|
|
|
1298
1298
|
Vs.getOrCreate().withPrefix("nimble").register(td())
|
|
1299
1299
|
const ed="group-selected"
|
|
1300
1300
|
var sd
|
|
1301
|
-
!function(t){t.All="all",t.LeavesOnly="leaves-only"}(sd||(sd={}))
|
|
1301
|
+
!function(t){t.All="all",t.LeavesOnly="leaves-only",t.None="none"}(sd||(sd={}))
|
|
1302
1302
|
class id{constructor(t,e){this.cache=new WeakMap,this.ltr=t,this.rtl=e}bind(t){this.attach(t)}unbind(t){const e=this.cache.get(t)
|
|
1303
1303
|
e&&Ao.unsubscribe(e)}attach(t){const e=this.cache.get(t)||new od(this.ltr,this.rtl,t),s=Ao.getValueFor(t)
|
|
1304
1304
|
Ao.subscribe(e),e.attach(s),this.cache.set(t,e)}}class od{constructor(t,e,s){this.ltr=t,this.rtl=e,this.source=s,this.attached=null}handleChange({target:t,token:e}){this.attach(e.getValueFor(t))}attach(t){this.attached!==this[t]&&(null!==this.attached&&this.source.$fastController.removeStyles(this.attached),this.attached=this[t],null!==this.attached&&this.source.$fastController.addStyles(this.attached))}}const nd=class extends mi{constructor(){super(),this.treeView=null,this.handleClickOverride=t=>{if(t.composedPath().includes(this.expandCollapseButton))return
|
|
1305
1305
|
const e=this.getImmediateTreeItem(t.target)
|
|
1306
1306
|
if(e?.disabled||e!==this)return void t.stopImmediatePropagation()
|
|
1307
|
-
const s=this.treeView?.selectionMode===sd.LeavesOnly,i=this.hasChildTreeItems()
|
|
1308
|
-
if(s&&!i
|
|
1307
|
+
const s=this.treeView?.selectionMode===sd.LeavesOnly,i=this.treeView?.selectionMode===sd.All,o=this.hasChildTreeItems()
|
|
1308
|
+
if(s&&!o||i){const t=this.getImmediateTreeItem(this.treeView?.currentSelected)
|
|
1309
1309
|
t&&this!==this.treeView?.currentSelected&&(t.selected=!1),this.selected=!0}else this.expanded=!this.expanded
|
|
1310
1310
|
t.stopImmediatePropagation()},this.handleSelectedChange=t=>{t.target===this&&this.selected&&this.setGroupSelectionOnRootParentTreeItem(this)},this.addEventListener("click",this.handleClickOverride)}connectedCallback(){super.connectedCallback(),this.addEventListener("selected-change",this.handleSelectedChange),this.treeView=this.getParentTreeView(),this.treeView&&this.selected&&this.setGroupSelectionOnRootParentTreeItem(this)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClickOverride),this.removeEventListener("selected-change",this.handleSelectedChange),this.treeView=null}hasChildTreeItems(){return null!==this.querySelector('[role="treeitem"]')}clearTreeGroupSelection(){const t=this.treeView?.querySelectorAll("[group-selected]")
|
|
1311
1311
|
t?.forEach((t=>t.removeAttribute(ed)))}setGroupSelectionOnRootParentTreeItem(t){this.clearTreeGroupSelection()
|