@digital-realty/ix-tree 1.0.19 → 2.0.2

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/IxTree.js CHANGED
@@ -49,10 +49,10 @@ export class IxTree extends LitElement {
49
49
  onTreeNodeCheck(e) {
50
50
  const { node } = e.detail.message;
51
51
  updateNodeCheckedStatus(node, this._rootNode);
52
- this._rootNode = structuredClone(this._rootNode);
53
52
  this.dispatchEvent(new CustomEvent('on-tree-node-checked', {
54
53
  detail: {
55
54
  message: e.detail.message,
55
+ rootNode: this._rootNode,
56
56
  },
57
57
  }));
58
58
  }
@@ -1 +1 @@
1
- {"version":3,"file":"IxTree.js","sourceRoot":"","sources":["../src/IxTree.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/theme';\nimport { nothing, html, LitElement, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { findChildNodeById, updateNodeCheckedStatus } from './tree-utils.js';\nimport { IIxTreeNode } from './IIxTreeNode.js';\nimport { IxTreeStyles } from './ix-tree-styles.js';\nimport './ix-tree-node.js';\n\nexport type Appearance = 'filled' | 'filled-tonal' | 'outlined' | 'default';\n\nexport class IxTree extends LitElement {\n static readonly styles = [IxTreeStyles];\n\n connectedCallback() {\n super.connectedCallback();\n\n this._activeItemId = this.selectedNodeId; // store in state\n this._selectedNodeId = this.selectedNodeId; // store in state\n this._rootNode = this.rootNode;\n }\n\n @property() ariaLabel: string = 'tree';\n\n @property({ type: Object }) rootNode!: IIxTreeNode;\n\n @property() selectedNodeId: string = '';\n\n @property({ type: Boolean }) checkboxesEnabled: boolean = false;\n\n @property({ type: String }) appearance: Appearance = 'default';\n\n @state() private _activeItemId: string = '';\n\n @state() private _rootNode!: IIxTreeNode;\n\n @state() private _selectedNodeId: string = '';\n\n private onTreeNodeClick(e: CustomEvent): void {\n this.dispatchEvent(\n new CustomEvent('on-tree-node-selected', {\n detail: {\n message: e.detail.message,\n },\n })\n );\n\n this._selectedNodeId = e.detail.message.id;\n }\n\n private dispatchTreeNodeExpandToggle(e: CustomEvent): void {\n this.dispatchEvent(\n new CustomEvent('on-tree-node-expand-toggle', {\n detail: {\n message: e.detail.message,\n },\n })\n );\n }\n\n private onTreeNodeToggle(e: CustomEvent): void {\n const newRootNode = { ...this._rootNode };\n const { node } = e.detail.message;\n node.expanded = !node.expanded;\n this._rootNode = newRootNode;\n this._activeItemId = node.id;\n this.dispatchTreeNodeExpandToggle(e);\n this.requestUpdate();\n }\n\n private onTreeNodeCheck(e: CustomEvent): void {\n const { node } = e.detail.message;\n updateNodeCheckedStatus(node, this._rootNode);\n this._rootNode = structuredClone(this._rootNode);\n this.dispatchEvent(\n new CustomEvent('on-tree-node-checked', {\n detail: {\n message: e.detail.message,\n },\n })\n );\n }\n\n private renderNodes(\n nodes: Array<IIxTreeNode> = [],\n level: number = 0\n ): Array<TemplateResult<1>> {\n const renderedNodes: Array<TemplateResult<1>> = [];\n\n for (const node of nodes) {\n const renderedNode = html`<ix-tree-node\n .isActiveTreeNode=${this._activeItemId === node.id}\n .isExpanded=${!!node.expanded}\n .isSelected=${this._selectedNodeId === node.id}\n .level=${level}\n .node=${node}\n .checkboxEnabled=${this.checkboxesEnabled}\n .appearance=${this.appearance}\n @on-tree-node-click=${this.onTreeNodeClick}\n @on-tree-node-toggle=${this.onTreeNodeToggle}\n @on-tree-node-check=${this.onTreeNodeCheck}\n >\n ${node.expanded ? this.renderNodes(node.children, level + 1) : nothing}\n </ix-tree-node>`;\n renderedNodes.push(renderedNode);\n }\n\n return renderedNodes;\n }\n\n /**\n * Expand the active tree node and all of its parent nodes.\n */\n private expandActiveTreeNode(): void {\n const nodeToSelect =\n findChildNodeById(this._rootNode, this._activeItemId) || this._rootNode;\n\n let iteration = 0;\n const MAX_ITERATIONS = 1000;\n if (!nodeToSelect.parentId) {\n return;\n }\n let node: IIxTreeNode | null = findChildNodeById(\n this._rootNode,\n nodeToSelect.parentId\n );\n while (node && iteration < MAX_ITERATIONS) {\n node.expanded = true;\n if (!node.parentId) {\n break;\n }\n node = findChildNodeById(this._rootNode, node.parentId);\n iteration += 1;\n }\n }\n\n protected render(): TemplateResult<1> {\n this.expandActiveTreeNode();\n\n return html`<div\n aria-label=${this.ariaLabel}\n class=\"ix-tree-container\"\n role=\"tree\"\n >\n ${this.renderNodes(this._rootNode.children, 0)}\n </div>`;\n }\n}\n"]}
1
+ {"version":3,"file":"IxTree.js","sourceRoot":"","sources":["../src/IxTree.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/theme';\nimport { nothing, html, LitElement, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { findChildNodeById, updateNodeCheckedStatus } from './tree-utils.js';\nimport { IIxTreeNode } from './IIxTreeNode.js';\nimport { IxTreeStyles } from './ix-tree-styles.js';\nimport './ix-tree-node.js';\n\nexport type Appearance = 'filled' | 'filled-tonal' | 'outlined' | 'default';\n\nexport class IxTree extends LitElement {\n static readonly styles = [IxTreeStyles];\n\n connectedCallback() {\n super.connectedCallback();\n\n this._activeItemId = this.selectedNodeId; // store in state\n this._selectedNodeId = this.selectedNodeId; // store in state\n this._rootNode = this.rootNode;\n }\n\n @property() ariaLabel: string = 'tree';\n\n @property({ type: Object }) rootNode!: IIxTreeNode;\n\n @property() selectedNodeId: string = '';\n\n @property({ type: Boolean }) checkboxesEnabled: boolean = false;\n\n @property({ type: String }) appearance: Appearance = 'default';\n\n @state() private _activeItemId: string = '';\n\n @state() private _rootNode!: IIxTreeNode;\n\n @state() private _selectedNodeId: string = '';\n\n private onTreeNodeClick(e: CustomEvent): void {\n this.dispatchEvent(\n new CustomEvent('on-tree-node-selected', {\n detail: {\n message: e.detail.message,\n },\n })\n );\n\n this._selectedNodeId = e.detail.message.id;\n }\n\n private dispatchTreeNodeExpandToggle(e: CustomEvent): void {\n this.dispatchEvent(\n new CustomEvent('on-tree-node-expand-toggle', {\n detail: {\n message: e.detail.message,\n },\n })\n );\n }\n\n private onTreeNodeToggle(e: CustomEvent): void {\n const newRootNode = { ...this._rootNode };\n const { node } = e.detail.message;\n node.expanded = !node.expanded;\n this._rootNode = newRootNode;\n this._activeItemId = node.id;\n this.dispatchTreeNodeExpandToggle(e);\n this.requestUpdate();\n }\n\n private onTreeNodeCheck(e: CustomEvent): void {\n const { node } = e.detail.message;\n updateNodeCheckedStatus(node, this._rootNode);\n this.dispatchEvent(\n new CustomEvent('on-tree-node-checked', {\n detail: {\n message: e.detail.message,\n rootNode: this._rootNode,\n },\n })\n );\n }\n\n private renderNodes(\n nodes: Array<IIxTreeNode> = [],\n level: number = 0\n ): Array<TemplateResult<1>> {\n const renderedNodes: Array<TemplateResult<1>> = [];\n\n for (const node of nodes) {\n const renderedNode = html`<ix-tree-node\n .isActiveTreeNode=${this._activeItemId === node.id}\n .isExpanded=${!!node.expanded}\n .isSelected=${this._selectedNodeId === node.id}\n .level=${level}\n .node=${node}\n .checkboxEnabled=${this.checkboxesEnabled}\n .appearance=${this.appearance}\n @on-tree-node-click=${this.onTreeNodeClick}\n @on-tree-node-toggle=${this.onTreeNodeToggle}\n @on-tree-node-check=${this.onTreeNodeCheck}\n >\n ${node.expanded ? this.renderNodes(node.children, level + 1) : nothing}\n </ix-tree-node>`;\n renderedNodes.push(renderedNode);\n }\n\n return renderedNodes;\n }\n\n /**\n * Expand the active tree node and all of its parent nodes.\n */\n private expandActiveTreeNode(): void {\n const nodeToSelect =\n findChildNodeById(this._rootNode, this._activeItemId) || this._rootNode;\n\n let iteration = 0;\n const MAX_ITERATIONS = 1000;\n if (!nodeToSelect.parentId) {\n return;\n }\n let node: IIxTreeNode | null = findChildNodeById(\n this._rootNode,\n nodeToSelect.parentId\n );\n while (node && iteration < MAX_ITERATIONS) {\n node.expanded = true;\n if (!node.parentId) {\n break;\n }\n node = findChildNodeById(this._rootNode, node.parentId);\n iteration += 1;\n }\n }\n\n protected render(): TemplateResult<1> {\n this.expandActiveTreeNode();\n\n return html`<div\n aria-label=${this.ariaLabel}\n class=\"ix-tree-container\"\n role=\"tree\"\n >\n ${this.renderNodes(this._rootNode.children, 0)}\n </div>`;\n }\n}\n"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent ix-tree following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "Digital Realty",
6
- "version": "1.0.19",
6
+ "version": "2.0.2",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -28,7 +28,7 @@
28
28
  "dependencies": {
29
29
  "@digital-realty/ix-checkbox": "^1.1.11",
30
30
  "@digital-realty/ix-icon": "^1.0.3",
31
- "@digital-realty/ix-icon-button": "^1.0.22",
31
+ "@digital-realty/ix-icon-button": "^1.0.23",
32
32
  "@digital-realty/theme": "^1.0.12",
33
33
  "@lit-labs/react": "^2.1.0",
34
34
  "@material/web": "1.2.0",
@@ -101,5 +101,5 @@
101
101
  "README.md",
102
102
  "LICENSE"
103
103
  ],
104
- "gitHead": "5ff9e3f504660342e986801e86861d35b47930da"
104
+ "gitHead": "da586fb3d29c5d12fc0e3cd279cc0feb3adcb879"
105
105
  }