@digital-realty/ix-tree - npm Package Compare versions

Comparing version 3.0.3 to 3.0.4

dist/ix-tree.min.js

 import{__decorate}from"tslib";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/theme";import{css,LitElement,html,nothing}from"lit";import{property,state}from"lit/decorators.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-checkbox/ix-checkbox.js";function findChildNodeById(e,t){if(e.id===t)return e;if(e.children)for(const i of e.children){var o=findChildNodeById(i,t);if(o)return o}return null}function updateNodeCheckedStatus(e,o){!function t(e,o=!1){e.checked=o,e.indeterminate=!1,e.children&&e.children.forEach(e=>{t(e,o)})}(e,e.checked),function e(t){t.parentId&&(t=findChildNodeById(o,t.parentId))&&t.children&&(t.children.every(e=>e.checked)?(t.checked=!0,t.indeterminate=!1):t.children.some(e=>e.checked)||t.children.some(e=>e.indeterminate)?(t.checked=!1,t.indeterminate=!0):(t.checked=!1,t.indeterminate=!1),e(t))}(e)}const IxTreeStyles=css`:host,:host :root,:root{--_tree-icon-size:var(--ix-tree-icon-size, 2.4rem);--_tree-icon-spacing:var(--ix-tree-icon-spacing, 0.7rem);--md-icon-button-icon-color:var(
       --ix-outline-color,
       var(--ix-tree-icon-color) #6b7a8d
-    )}.wrapper{align-items:center;cursor:pointer;display:flex;border-left:3px solid transparent}.icon{display:flex;color:var(--ix-outline-color,var(--ix-tree-icon-color) #6b7a8d);margin-right:var(--_tree-icon-spacing,--ix-tree-icon-spacing);font-size:var(--ix-tree-icon-size,1.2rem)}.label{color:var(--ix-text-color,var(--ix-label-text-color,#092241));flex-grow:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.item-checkbox{display:flex;margin-right:var(--_tree-icon-spacing,--ix-tree-checkbox-spacing)}.selected{background-color:var(--ix-tree-active-background-color,rgba(20,86,224,.1));border-left:3px solid var(--ix-tree-active-border-color,var(--md-sys-color-primary))}`;class IxTreeNode extends LitElement{constructor(){super(...arguments),this.isActiveTreeNode=!1,this.isExpanded=!1,this.isSelected=!1,this.level=0,this.checkboxEnabled=!1,this.appearance="default",this._hasScrolledToActive=!1}hasChildren(){return void 0!==this.node.children&&0<this.node.children.length}getIcon(){var e=this.isExpanded?"arrow_drop_down":"arrow_right";return html`<div style="${this.hasChildren()?"":"visibility:hidden"}"><ix-icon-button @click="${()=>this.onNodeToggle(this.node)}" icon="${e}" class="chevron" test-id="tree-node-expand-toggle"></ix-icon-button></div>`}onNodeClick(e){e=new CustomEvent("on-tree-node-click",{detail:{message:{node:e,id:e.id,label:e.label,parentId:e.parentId}}});this.dispatchEvent(e)}onNodeToggle(e){e=new CustomEvent("on-tree-node-toggle",{detail:{message:{node:e,id:e.id,label:e.label,parentId:e.parentId}}});this.dispatchEvent(e)}onNodeCheck(e){e.checked?e.checked=!1:e.checked=!0,e.indeterminate=!1;e=new CustomEvent("on-tree-node-check",{detail:{message:{node:e,id:e.id}}});this.dispatchEvent(e)}render(){var e=this.isSelected?"selected":"",t=this.node.icon||"account_box";return html`<div ?active-tree-node="${this.isActiveTreeNode}" aria-expanded="${!!this.node.expanded}" aria-selected="${this.isSelected}" data-id="${this.node.id}" role="treeitem"><div class="wrapper ${e}" style="padding-left:calc(var(--_tree-icon-size) * ${this.level})">${this.getIcon()} ${this.checkboxEnabled?html`<ix-checkbox @click="${()=>this.onNodeCheck(this.node)}" label="" class="item-checkbox" .checked="${this.node.checked}" .indeterminate="${this.node.indeterminate}"></ix-checkbox>`:nothing}<ix-icon class="icon">${t}</ix-icon><div class="label" @click="${()=>{this.checkboxEnabled?this.onNodeToggle(this.node):this.onNodeClick(this.node)}}" @keyup="${()=>{this.checkboxEnabled?this.onNodeToggle(this.node):this.onNodeClick(this.node)}}">${this.node.label}</div></div><slot></slot></div>`}updated(){var e;this._hasScrolledToActive||(null!=(e=null==(e=this.shadowRoot)?void 0:e.querySelector("[active-tree-node]"))&&e.scrollIntoView({behavior:"smooth",block:"start"}),this._hasScrolledToActive=!0)}}IxTreeNode.styles=[IxTreeStyles],__decorate([property({type:Boolean})],IxTreeNode.prototype,"isActiveTreeNode",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"isExpanded",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"isSelected",void 0),__decorate([property({type:Number})],IxTreeNode.prototype,"level",void 0),__decorate([property({type:Object})],IxTreeNode.prototype,"node",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"checkboxEnabled",void 0),__decorate([property({type:String})],IxTreeNode.prototype,"appearance",void 0),__decorate([state()],IxTreeNode.prototype,"_hasScrolledToActive",void 0),customElements.define("ix-tree-node",IxTreeNode);class IxTree extends LitElement{constructor(){super(...arguments),this.ariaLabel="tree",this.selectedNodeId="",this.checkboxesEnabled=!1,this.appearance="default",this._activeItemId="",this._selectedNodeId=""}connectedCallback(){super.connectedCallback(),this._activeItemId=this.selectedNodeId,this._selectedNodeId=this.selectedNodeId,this._rootNode=this.rootNode}onTreeNodeClick(e){this.dispatchEvent(new CustomEvent("on-tree-node-selected",{detail:{message:e.detail.message}})),this._selectedNodeId=e.detail.message.id}dispatchTreeNodeExpandToggle(e){this.dispatchEvent(new CustomEvent("on-tree-node-expand-toggle",{detail:{message:e.detail.message}}))}onTreeNodeToggle(e){var t={...this._rootNode},o=e.detail.message["node"];o.expanded=!o.expanded,this._rootNode=t,this._activeItemId=o.id,this.dispatchTreeNodeExpandToggle(e),this.requestUpdate()}onTreeNodeCheck(e){var t=e.detail.message["node"];updateNodeCheckedStatus(t,this._rootNode),this._rootNode=structuredClone(this._rootNode),this.dispatchEvent(new CustomEvent("on-tree-node-checked",{detail:{message:e.detail.message}}))}renderNodes(e=[],t=0){var o=[];for(const d of e){var i=html`<ix-tree-node .isActiveTreeNode="${this._activeItemId===d.id}" .isExpanded="${!!d.expanded}" .isSelected="${this._selectedNodeId===d.id}" .level="${t}" .node="${d}" .checkboxEnabled="${this.checkboxesEnabled}" .appearance="${this.appearance}" @on-tree-node-click="${this.onTreeNodeClick}" @on-tree-node-toggle="${this.onTreeNodeToggle}" @on-tree-node-check="${this.onTreeNodeCheck}">${d.expanded?this.renderNodes(d.children,t+1):nothing}</ix-tree-node>`;o.push(i)}return o}expandActiveTreeNode(){var t=findChildNodeById(this._rootNode,this._activeItemId)||this._rootNode;let o=0;if(t.parentId){let e=findChildNodeById(this._rootNode,t.parentId);for(;e&&o<1e3&&(e.expanded=!0,e.parentId);)e=findChildNodeById(this._rootNode,e.parentId),o+=1}}render(){return this.expandActiveTreeNode(),html`<div aria-label="${this.ariaLabel}" class="ix-tree-container" role="tree">${this.renderNodes(this._rootNode.children,0)}</div>`}}IxTree.styles=[IxTreeStyles],__decorate([property()],IxTree.prototype,"ariaLabel",void 0),__decorate([property({type:Object})],IxTree.prototype,"rootNode",void 0),__decorate([property()],IxTree.prototype,"selectedNodeId",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"checkboxesEnabled",void 0),__decorate([property({type:String})],IxTree.prototype,"appearance",void 0),__decorate([state()],IxTree.prototype,"_activeItemId",void 0),__decorate([state()],IxTree.prototype,"_rootNode",void 0),__decorate([state()],IxTree.prototype,"_selectedNodeId",void 0),customElements.define("ix-tree",IxTree);
+    )}.wrapper{align-items:center;cursor:pointer;display:flex;border-left:3px solid transparent}.icon{display:flex;color:var(--ix-outline-color,var(--ix-tree-icon-color) #6b7a8d);margin-right:var(--_tree-icon-spacing,--ix-tree-icon-spacing);font-size:var(--ix-tree-icon-size,1.2rem)}.label{color:var(--ix-text-color,var(--ix-label-text-color,#092241));flex-grow:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.item-checkbox{display:flex;margin-right:var(--_tree-icon-spacing,--ix-tree-checkbox-spacing)}.selected{background-color:var(--ix-tree-active-background-color,rgba(20,86,224,.1));border-left:3px solid var(--ix-tree-active-border-color,var(--md-sys-color-primary))}`;class IxTreeNode extends LitElement{constructor(){super(...arguments),this.isActiveTreeNode=!1,this.isExpanded=!1,this.isSelected=!1,this.level=0,this.checkboxEnabled=!1,this.appearance="default",this.hasIcon=!1,this._hasScrolledToActive=!1}hasChildren(){return void 0!==this.node.children&&0<this.node.children.length}getIcon(){var e=this.isExpanded?"arrow_drop_down":"arrow_right";return html`<div style="${this.hasChildren()?"":"visibility:hidden"}"><ix-icon-button @click="${()=>this.onNodeToggle(this.node)}" icon="${e}" class="chevron" test-id="tree-node-expand-toggle"></ix-icon-button></div>`}onNodeClick(e){e=new CustomEvent("on-tree-node-click",{detail:{message:{node:e,id:e.id,label:e.label,parentId:e.parentId}}});this.dispatchEvent(e)}onNodeToggle(e){e=new CustomEvent("on-tree-node-toggle",{detail:{message:{node:e,id:e.id,label:e.label,parentId:e.parentId}}});this.dispatchEvent(e)}onNodeCheck(e){e.checked?e.checked=!1:e.checked=!0,e.indeterminate=!1;e=new CustomEvent("on-tree-node-check",{detail:{message:{node:e,id:e.id}}});this.dispatchEvent(e)}render(){var e=this.isSelected?"selected":"",t=this.node.icon||"account_box";return html`<div ?active-tree-node="${this.isActiveTreeNode}" aria-expanded="${!!this.node.expanded}" aria-selected="${this.isSelected}" data-id="${this.node.id}" role="treeitem"><div class="wrapper ${e}" style="padding-left:calc(var(--_tree-icon-size) * ${this.level})">${this.getIcon()} ${this.checkboxEnabled?html`<ix-checkbox @click="${()=>this.onNodeCheck(this.node)}" label="" class="item-checkbox" .checked="${this.node.checked}" .indeterminate="${this.node.indeterminate}"></ix-checkbox>`:nothing} ${this.hasIcon?html`<ix-icon class="icon">${t}</ix-icon>`:nothing}<div class="label" @click="${()=>{this.checkboxEnabled?this.onNodeToggle(this.node):this.onNodeClick(this.node)}}" @keyup="${()=>{this.checkboxEnabled?this.onNodeToggle(this.node):this.onNodeClick(this.node)}}">${this.node.label}</div></div><slot></slot></div>`}updated(){var e;this._hasScrolledToActive||(null!=(e=null==(e=this.shadowRoot)?void 0:e.querySelector("[active-tree-node]"))&&e.scrollIntoView({behavior:"smooth",block:"start"}),this._hasScrolledToActive=!0)}}IxTreeNode.styles=[IxTreeStyles],__decorate([property({type:Boolean})],IxTreeNode.prototype,"isActiveTreeNode",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"isExpanded",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"isSelected",void 0),__decorate([property({type:Number})],IxTreeNode.prototype,"level",void 0),__decorate([property({type:Object})],IxTreeNode.prototype,"node",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"checkboxEnabled",void 0),__decorate([property({type:String})],IxTreeNode.prototype,"appearance",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"hasIcon",void 0),__decorate([state()],IxTreeNode.prototype,"_hasScrolledToActive",void 0),customElements.define("ix-tree-node",IxTreeNode);class IxTree extends LitElement{constructor(){super(...arguments),this.ariaLabel="tree",this.selectedNodeId="",this.checkboxesEnabled=!1,this.appearance="default",this.hasIcons=!1,this._activeItemId="",this._selectedNodeId=""}connectedCallback(){super.connectedCallback(),this._activeItemId=this.selectedNodeId,this._selectedNodeId=this.selectedNodeId,this._rootNode=this.rootNode}onTreeNodeClick(e){this.dispatchEvent(new CustomEvent("on-tree-node-selected",{detail:{message:e.detail.message}})),this._selectedNodeId=e.detail.message.id}dispatchTreeNodeExpandToggle(e){this.dispatchEvent(new CustomEvent("on-tree-node-expand-toggle",{detail:{message:e.detail.message}}))}onTreeNodeToggle(e){var t={...this._rootNode},o=e.detail.message["node"];o.expanded=!o.expanded,this.rootNode=t,this._activeItemId=o.id,this.dispatchTreeNodeExpandToggle(e),this.requestUpdate()}onTreeNodeCheck(e){var t=e.detail.message["node"];updateNodeCheckedStatus(t,this._rootNode),this._rootNode=structuredClone(this._rootNode),this.dispatchEvent(new CustomEvent("on-tree-node-checked",{detail:{message:e.detail.message}}))}renderNodes(e=[],t=0){var o=[];for(const d of e){var i=html`<ix-tree-node .level="${t}" .node="${d}" .appearance="${this.appearance}" ?isActiveTreeNode="${this._activeItemId===d.id}" ?isExpanded="${!!d.expanded}" ?isSelected="${this._selectedNodeId===d.id}" ?checkboxEnabled="${this.checkboxesEnabled}" ?hasIcon="${this.hasIcons}" @on-tree-node-click="${this.onTreeNodeClick}" @on-tree-node-toggle="${this.onTreeNodeToggle}" @on-tree-node-check="${this.onTreeNodeCheck}">${d.expanded?this.renderNodes(d.children,t+1):nothing}</ix-tree-node>`;o.push(i)}return o}expandActiveTreeNode(){var t=findChildNodeById(this._rootNode,this._activeItemId)||this._rootNode;let o=0;if(t.parentId){let e=findChildNodeById(this._rootNode,t.parentId);for(;e&&o<1e3&&(e.expanded=!0,e.parentId);)e=findChildNodeById(this._rootNode,e.parentId),o+=1}}render(){return this.expandActiveTreeNode(),html`<div aria-label="${this.ariaLabel}" class="ix-tree-container" role="tree">${this.renderNodes(this._rootNode.children,0)}</div>`}}IxTree.styles=[IxTreeStyles],__decorate([property({type:String})],IxTree.prototype,"ariaLabel",void 0),__decorate([property({type:Object})],IxTree.prototype,"rootNode",void 0),__decorate([property({type:String})],IxTree.prototype,"selectedNodeId",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"checkboxesEnabled",void 0),__decorate([property({type:String})],IxTree.prototype,"appearance",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"hasIcons",void 0),__decorate([state()],IxTree.prototype,"_activeItemId",void 0),__decorate([state()],IxTree.prototype,"_rootNode",void 0),__decorate([state()],IxTree.prototype,"_selectedNodeId",void 0),customElements.define("ix-tree",IxTree);

dist/IxTree.d.ts

@@ -15,2 +15,3 @@ import '@digital-realty/ix-icon/ix-icon.js';
     appearance: Appearance;
+    hasIcons: boolean;
     private _activeItemId;
@@ -17,0 +18,0 @@ private _rootNode;

dist/IxTree.js

@@ -16,2 +16,3 @@ import { __decorate } from "tslib";
         this.appearance = 'default';
+        this.hasIcons = false;
         this._activeItemId = '';
@@ -45,3 +46,3 @@ this._selectedNodeId = '';
         node.expanded = !node.expanded;
-        this._rootNode = newRootNode;
+        this.rootNode = newRootNode;
         this._activeItemId = node.id;
@@ -65,9 +66,10 @@ this.dispatchTreeNodeExpandToggle(e);
             const renderedNode = html `<ix-tree-node
-        .isActiveTreeNode=${this._activeItemId === node.id}
-        .isExpanded=${!!node.expanded}
-        .isSelected=${this._selectedNodeId === node.id}
         .level=${level}
         .node=${node}
-        .checkboxEnabled=${this.checkboxesEnabled}
         .appearance=${this.appearance}
+        ?isActiveTreeNode=${this._activeItemId === node.id}
+        ?isExpanded=${!!node.expanded}
+        ?isSelected=${this._selectedNodeId === node.id}
+        ?checkboxEnabled=${this.checkboxesEnabled}
+        ?hasIcon=${this.hasIcons}
         @on-tree-node-click=${this.onTreeNodeClick}
@@ -116,3 +118,3 @@ @on-tree-node-toggle=${this.onTreeNodeToggle}
 __decorate([
-    property()
+    property({ type: String })
 ], IxTree.prototype, "ariaLabel", void 0);
@@ -123,3 +125,3 @@ __decorate([
 __decorate([
-    property()
+    property({ type: String })
 ], IxTree.prototype, "selectedNodeId", void 0);
@@ -133,2 +135,5 @@ __decorate([
 __decorate([
+    property({ type: Boolean })
+], IxTree.prototype, "hasIcons", void 0);
+__decorate([
     state()
@@ -135,0 +140,0 @@ ], IxTree.prototype, "_activeItemId", void 0);

dist/IxTreeNode.d.ts

@@ -16,2 +16,3 @@ import '@digital-realty/ix-icon-button/ix-icon-button.js';
     appearance: Appearance;
+    hasIcon: boolean;
     private _hasScrolledToActive;
@@ -18,0 +19,0 @@ private hasChildren;

dist/IxTreeNode.js

@@ -17,2 +17,3 @@ import { __decorate } from "tslib";
         this.appearance = 'default';
+        this.hasIcon = false;
         this._hasScrolledToActive = false;
@@ -108,3 +109,5 @@ }
             : nothing}
-        <ix-icon class="icon">${icon}</ix-icon>
+        ${this.hasIcon
+            ? html `<ix-icon class="icon">${icon}</ix-icon>`
+            : nothing}
         <div
@@ -161,4 +164,7 @@ class="label"
 __decorate([
+    property({ type: Boolean })
+], IxTreeNode.prototype, "hasIcon", void 0);
+__decorate([
     state()
 ], IxTreeNode.prototype, "_hasScrolledToActive", void 0);
 //# sourceMappingURL=IxTreeNode.js.map

package.json

@@ -6,3 +6,3 @@ {
   "author": "Digital Realty",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "type": "module",
@@ -109,3 +109,3 @@ "main": "dist/index.js",
   ],
-  "gitHead": "4a97dd23423451329c60b8dd9cd27c71ad7e2a77"
+  "gitHead": "6b6fa87188c957b629363eb52d7951890e012418"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52179

increased by2.44%

Lines of code

517

increased by2.78%

No dependency changes