@digital-realty/ix-tree 1.0.4 → 1.0.6
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/IIxTreeNode.d.ts +4 -2
- package/dist/IIxTreeNode.js.map +1 -1
- package/dist/IxTree.d.ts +2 -1
- package/dist/IxTree.js +30 -23
- package/dist/IxTree.js.map +1 -1
- package/dist/IxTreeNode.d.ts +5 -1
- package/dist/IxTreeNode.js +63 -19
- package/dist/IxTreeNode.js.map +1 -1
- package/dist/ix-tree-styles.js +2 -3
- package/dist/ix-tree-styles.js.map +1 -1
- package/dist/tree-utils.d.ts +3 -0
- package/dist/tree-utils.js +56 -0
- package/dist/tree-utils.js.map +1 -0
- package/package.json +6 -3
- package/dist/find-node-by-id.d.ts +0 -3
- package/dist/find-node-by-id.js +0 -17
- package/dist/find-node-by-id.js.map +0 -1
package/dist/IIxTreeNode.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
export interface IIxTreeNode {
|
|
2
2
|
children?: Array<IIxTreeNode>;
|
|
3
|
-
expanded
|
|
3
|
+
expanded?: boolean;
|
|
4
4
|
icon?: string;
|
|
5
5
|
id: string;
|
|
6
6
|
label: string;
|
|
7
|
-
|
|
7
|
+
parentId?: string;
|
|
8
|
+
checked?: boolean;
|
|
9
|
+
indeterminate?: boolean;
|
|
8
10
|
}
|
package/dist/IIxTreeNode.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IIxTreeNode.js","sourceRoot":"","sources":["../src/IIxTreeNode.ts"],"names":[],"mappings":"","sourcesContent":["export interface IIxTreeNode {\n children?: Array<IIxTreeNode>;\n\n expanded
|
|
1
|
+
{"version":3,"file":"IIxTreeNode.js","sourceRoot":"","sources":["../src/IIxTreeNode.ts"],"names":[],"mappings":"","sourcesContent":["export interface IIxTreeNode {\n children?: Array<IIxTreeNode>;\n\n expanded?: boolean;\n\n icon?: string;\n\n id: string;\n\n label: string;\n\n parentId?: string;\n\n checked?: boolean;\n\n indeterminate?: boolean;\n}\n"]}
|
package/dist/IxTree.d.ts
CHANGED
|
@@ -9,12 +9,13 @@ export declare class IxTree extends LitElement {
|
|
|
9
9
|
ariaLabel: string;
|
|
10
10
|
rootNode: IIxTreeNode;
|
|
11
11
|
selectedNodeId: string;
|
|
12
|
+
checkboxesEnabled: boolean;
|
|
12
13
|
_activeItemId: string;
|
|
13
14
|
_rootNode: IIxTreeNode;
|
|
14
15
|
_selectedNodeId: string;
|
|
15
|
-
private setParentNodes;
|
|
16
16
|
private onTreeNodeClick;
|
|
17
17
|
private onTreeNodeToggle;
|
|
18
|
+
private onTreeNodeCheck;
|
|
18
19
|
private renderNodes;
|
|
19
20
|
/**
|
|
20
21
|
* Expand the active tree node and all of its parent nodes.
|
package/dist/IxTree.js
CHANGED
|
@@ -3,7 +3,7 @@ import '@digital-realty/ix-icon/ix-icon.js';
|
|
|
3
3
|
import '@digital-realty/theme';
|
|
4
4
|
import { nothing, html, LitElement } from 'lit';
|
|
5
5
|
import { property, state } from 'lit/decorators.js';
|
|
6
|
-
import
|
|
6
|
+
import { findChildNodeById, updateNodeCheckedStatus } from './tree-utils.js';
|
|
7
7
|
import { IxTreeStyles } from './ix-tree-styles.js';
|
|
8
8
|
import './ix-tree-node.js';
|
|
9
9
|
export class IxTree extends LitElement {
|
|
@@ -11,6 +11,7 @@ export class IxTree extends LitElement {
|
|
|
11
11
|
super(...arguments);
|
|
12
12
|
this.ariaLabel = 'tree';
|
|
13
13
|
this.selectedNodeId = '';
|
|
14
|
+
this.checkboxesEnabled = false;
|
|
14
15
|
this._activeItemId = '';
|
|
15
16
|
this._selectedNodeId = '';
|
|
16
17
|
}
|
|
@@ -18,21 +19,7 @@ export class IxTree extends LitElement {
|
|
|
18
19
|
super.connectedCallback();
|
|
19
20
|
this._activeItemId = this.selectedNodeId; // store in state
|
|
20
21
|
this._selectedNodeId = this.selectedNodeId; // store in state
|
|
21
|
-
|
|
22
|
-
const newRootNode = { ...this.rootNode };
|
|
23
|
-
this.setParentNodes(newRootNode);
|
|
24
|
-
this._rootNode = newRootNode;
|
|
25
|
-
}
|
|
26
|
-
// Set the parent nodes on each node in the tree.
|
|
27
|
-
// This is needed when we have a selected id and need to expand each parent node to show the selected node.
|
|
28
|
-
setParentNodes(node) {
|
|
29
|
-
if (node.children) {
|
|
30
|
-
node.children.forEach(child => {
|
|
31
|
-
// eslint-disable-next-line no-param-reassign
|
|
32
|
-
child.parentNode = node;
|
|
33
|
-
this.setParentNodes(child);
|
|
34
|
-
});
|
|
35
|
-
}
|
|
22
|
+
this._rootNode = this.rootNode;
|
|
36
23
|
}
|
|
37
24
|
onTreeNodeClick(e) {
|
|
38
25
|
this.dispatchEvent(new CustomEvent('on-tree-node-selected', {
|
|
@@ -43,14 +30,23 @@ export class IxTree extends LitElement {
|
|
|
43
30
|
this._selectedNodeId = e.detail.message.id;
|
|
44
31
|
}
|
|
45
32
|
onTreeNodeToggle(e) {
|
|
46
|
-
const { id } = e.detail.message;
|
|
47
33
|
const newRootNode = { ...this._rootNode };
|
|
48
|
-
const
|
|
49
|
-
|
|
34
|
+
const { node } = e.detail.message;
|
|
35
|
+
node.expanded = !node.expanded;
|
|
50
36
|
this._rootNode = newRootNode;
|
|
51
|
-
this._activeItemId =
|
|
37
|
+
this._activeItemId = node.id;
|
|
52
38
|
this.requestUpdate();
|
|
53
39
|
}
|
|
40
|
+
onTreeNodeCheck(e) {
|
|
41
|
+
const { node } = e.detail.message;
|
|
42
|
+
updateNodeCheckedStatus(node, this._rootNode);
|
|
43
|
+
this._rootNode = structuredClone(this._rootNode);
|
|
44
|
+
this.dispatchEvent(new CustomEvent('on-tree-node-checked', {
|
|
45
|
+
detail: {
|
|
46
|
+
message: e.detail.message,
|
|
47
|
+
},
|
|
48
|
+
}));
|
|
49
|
+
}
|
|
54
50
|
renderNodes(nodes = [], level = 0) {
|
|
55
51
|
const rendredNodes = [];
|
|
56
52
|
for (const node of nodes) {
|
|
@@ -60,8 +56,10 @@ export class IxTree extends LitElement {
|
|
|
60
56
|
.isSelected=${this._selectedNodeId === node.id}
|
|
61
57
|
.level=${level}
|
|
62
58
|
.node=${node}
|
|
59
|
+
.checkboxEnabled=${this.checkboxesEnabled}
|
|
63
60
|
@on-tree-node-click=${this.onTreeNodeClick}
|
|
64
61
|
@on-tree-node-toggle=${this.onTreeNodeToggle}
|
|
62
|
+
@on-tree-node-check=${this.onTreeNodeCheck}
|
|
65
63
|
>
|
|
66
64
|
${node.expanded ? this.renderNodes(node.children, level + 1) : nothing}
|
|
67
65
|
</ix-tree-node>`;
|
|
@@ -73,13 +71,19 @@ export class IxTree extends LitElement {
|
|
|
73
71
|
* Expand the active tree node and all of its parent nodes.
|
|
74
72
|
*/
|
|
75
73
|
expandActiveTreeNode() {
|
|
76
|
-
const nodeToSelect =
|
|
74
|
+
const nodeToSelect = findChildNodeById(this._rootNode, this._activeItemId) || this._rootNode;
|
|
77
75
|
let iteration = 0;
|
|
78
76
|
const MAX_ITERATIONS = 1000;
|
|
79
|
-
|
|
77
|
+
if (!nodeToSelect.parentId) {
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
let node = findChildNodeById(this._rootNode, nodeToSelect.parentId);
|
|
80
81
|
while (node && iteration < MAX_ITERATIONS) {
|
|
81
82
|
node.expanded = true;
|
|
82
|
-
|
|
83
|
+
if (!node.parentId) {
|
|
84
|
+
break;
|
|
85
|
+
}
|
|
86
|
+
node = findChildNodeById(this._rootNode, node.parentId);
|
|
83
87
|
iteration += 1;
|
|
84
88
|
}
|
|
85
89
|
}
|
|
@@ -104,6 +108,9 @@ __decorate([
|
|
|
104
108
|
__decorate([
|
|
105
109
|
property()
|
|
106
110
|
], IxTree.prototype, "selectedNodeId", void 0);
|
|
111
|
+
__decorate([
|
|
112
|
+
property({ type: Boolean })
|
|
113
|
+
], IxTree.prototype, "checkboxesEnabled", void 0);
|
|
107
114
|
__decorate([
|
|
108
115
|
state()
|
|
109
116
|
], IxTree.prototype, "_activeItemId", void 0);
|
package/dist/IxTree.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxTree.js","sourceRoot":"","sources":["../src/IxTree.ts"],"names":[],"mappings":";AAAA,OAAO,oCAAoC,CAAC;AAC5C,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,
|
|
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 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 @state() _activeItemId: string = '';\n\n @state() _rootNode!: IIxTreeNode;\n\n @state() _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 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.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 rendredNodes: 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 @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 rendredNodes.push(renderedNode);\n }\n\n return rendredNodes;\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/dist/IxTreeNode.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import '@digital-realty/ix-icon/ix-icon.js';
|
|
1
|
+
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
2
|
+
import '@digital-realty/ix-checkbox/ix-checkbox.js';
|
|
2
3
|
import '@digital-realty/theme';
|
|
3
4
|
import { LitElement, TemplateResult } from 'lit';
|
|
4
5
|
import { IIxTreeNode } from './IIxTreeNode.js';
|
|
@@ -9,9 +10,12 @@ export declare class IxTreeNode extends LitElement {
|
|
|
9
10
|
isSelected: boolean;
|
|
10
11
|
level: number;
|
|
11
12
|
node: IIxTreeNode;
|
|
13
|
+
checkboxEnabled: boolean;
|
|
14
|
+
_hasScrolledToActive: boolean;
|
|
12
15
|
private getIcon;
|
|
13
16
|
private onNodeClick;
|
|
14
17
|
private onNodeToggle;
|
|
18
|
+
private onNodeCheck;
|
|
15
19
|
protected render(): TemplateResult<1>;
|
|
16
20
|
protected updated(): void;
|
|
17
21
|
}
|
package/dist/IxTreeNode.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import '@digital-realty/ix-icon/ix-icon.js';
|
|
2
|
+
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
3
|
+
import '@digital-realty/ix-checkbox/ix-checkbox.js';
|
|
3
4
|
import '@digital-realty/theme';
|
|
4
5
|
import { html, LitElement, nothing } from 'lit';
|
|
5
|
-
import { property } from 'lit/decorators.js';
|
|
6
|
+
import { property, state } from 'lit/decorators.js';
|
|
6
7
|
import { IxTreeStyles } from './ix-tree-styles.js';
|
|
7
8
|
// TREE_NODE_SPACER_REM and TREE_NODE_ICON_SIZE_REM are used to calculate the left padding for each node in the tree based on its level.
|
|
8
9
|
// They need to remain in synchronization with the CSS variables defined in ix-tree-styles.ts.
|
|
9
|
-
const TREE_NODE_SPACER_REM = 0.
|
|
10
|
-
const TREE_NODE_ICON_SIZE_REM = TREE_NODE_SPACER_REM *
|
|
10
|
+
const TREE_NODE_SPACER_REM = 0.7;
|
|
11
|
+
const TREE_NODE_ICON_SIZE_REM = TREE_NODE_SPACER_REM * 4;
|
|
11
12
|
export class IxTreeNode extends LitElement {
|
|
12
13
|
constructor() {
|
|
13
14
|
super(...arguments);
|
|
@@ -15,6 +16,8 @@ export class IxTreeNode extends LitElement {
|
|
|
15
16
|
this.isExpanded = false;
|
|
16
17
|
this.isSelected = false;
|
|
17
18
|
this.level = 0;
|
|
19
|
+
this.checkboxEnabled = false;
|
|
20
|
+
this._hasScrolledToActive = false;
|
|
18
21
|
}
|
|
19
22
|
getIcon(node, isExpanded) {
|
|
20
23
|
if (!node.children || node.children.length === 0) {
|
|
@@ -22,31 +25,55 @@ export class IxTreeNode extends LitElement {
|
|
|
22
25
|
return nothing;
|
|
23
26
|
}
|
|
24
27
|
const icon = isExpanded ? 'arrow_drop_down' : 'arrow_right';
|
|
25
|
-
return html `<ix-icon
|
|
26
|
-
|
|
27
|
-
|
|
28
|
+
return html `<ix-icon-button
|
|
29
|
+
@click=${() => this.onNodeToggle(this.node)}
|
|
30
|
+
icon=${icon}
|
|
31
|
+
test-id="tree-node-expand-toggle"
|
|
32
|
+
>
|
|
33
|
+
</ix-icon-button>`;
|
|
28
34
|
}
|
|
29
35
|
onNodeClick(node) {
|
|
30
|
-
var _a;
|
|
31
36
|
const event = new CustomEvent('on-tree-node-click', {
|
|
32
37
|
detail: {
|
|
33
38
|
message: {
|
|
39
|
+
node,
|
|
34
40
|
id: node.id,
|
|
35
41
|
label: node.label,
|
|
36
|
-
parentId:
|
|
42
|
+
parentId: node.parentId,
|
|
37
43
|
},
|
|
38
44
|
},
|
|
39
45
|
});
|
|
40
46
|
this.dispatchEvent(event);
|
|
41
47
|
}
|
|
42
48
|
onNodeToggle(node) {
|
|
43
|
-
var _a;
|
|
44
49
|
const event = new CustomEvent('on-tree-node-toggle', {
|
|
45
50
|
detail: {
|
|
46
51
|
message: {
|
|
52
|
+
node,
|
|
47
53
|
id: node.id,
|
|
48
54
|
label: node.label,
|
|
49
|
-
parentId:
|
|
55
|
+
parentId: node.parentId,
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
});
|
|
59
|
+
this.dispatchEvent(event);
|
|
60
|
+
}
|
|
61
|
+
onNodeCheck(node) {
|
|
62
|
+
/* eslint-disable no-param-reassign */
|
|
63
|
+
if (node.checked) {
|
|
64
|
+
node.checked = false;
|
|
65
|
+
node.indeterminate = false;
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
node.checked = true;
|
|
69
|
+
node.indeterminate = false;
|
|
70
|
+
}
|
|
71
|
+
/* eslint-enable no-param-reassign */
|
|
72
|
+
const event = new CustomEvent('on-tree-node-check', {
|
|
73
|
+
detail: {
|
|
74
|
+
message: {
|
|
75
|
+
node,
|
|
76
|
+
id: node.id,
|
|
50
77
|
},
|
|
51
78
|
},
|
|
52
79
|
});
|
|
@@ -59,6 +86,7 @@ export class IxTreeNode extends LitElement {
|
|
|
59
86
|
?active-tree-node=${this.isActiveTreeNode}
|
|
60
87
|
aria-expanded=${this.node.expanded}
|
|
61
88
|
aria-selected=${this.isSelected}
|
|
89
|
+
data-id=${this.node.id}
|
|
62
90
|
role="treeitem"
|
|
63
91
|
>
|
|
64
92
|
<div
|
|
@@ -68,13 +96,20 @@ export class IxTreeNode extends LitElement {
|
|
|
68
96
|
<div class="ix-tree-node__icon-size">
|
|
69
97
|
${this.getIcon(this.node, this.isExpanded)}
|
|
70
98
|
</div>
|
|
71
|
-
<
|
|
72
|
-
|
|
99
|
+
<ix-icon-button
|
|
100
|
+
icon=${icon}
|
|
101
|
+
test-id=${`${this.node.id}-on-node-click-icon-button`}
|
|
73
102
|
@click=${() => this.onNodeClick(this.node)}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
103
|
+
></ix-icon-button>
|
|
104
|
+
${this.checkboxEnabled
|
|
105
|
+
? html `<ix-checkbox
|
|
106
|
+
@click=${() => this.onNodeCheck(this.node)}
|
|
107
|
+
label=""
|
|
108
|
+
style="margin: 6px 12px 0px 12px"
|
|
109
|
+
.checked=${this.node.checked}
|
|
110
|
+
.indeterminate=${this.node.indeterminate}
|
|
111
|
+
></ix-checkbox>`
|
|
112
|
+
: nothing}
|
|
78
113
|
<div
|
|
79
114
|
class="ix-tree-node__label"
|
|
80
115
|
@click=${() => this.onNodeClick(this.node)}
|
|
@@ -88,8 +123,11 @@ export class IxTreeNode extends LitElement {
|
|
|
88
123
|
}
|
|
89
124
|
updated() {
|
|
90
125
|
var _a;
|
|
91
|
-
|
|
92
|
-
|
|
126
|
+
if (!this._hasScrolledToActive) {
|
|
127
|
+
const el = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[active-tree-node]');
|
|
128
|
+
el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
129
|
+
this._hasScrolledToActive = true;
|
|
130
|
+
}
|
|
93
131
|
}
|
|
94
132
|
}
|
|
95
133
|
IxTreeNode.styles = [IxTreeStyles];
|
|
@@ -108,4 +146,10 @@ __decorate([
|
|
|
108
146
|
__decorate([
|
|
109
147
|
property({ type: Object })
|
|
110
148
|
], IxTreeNode.prototype, "node", void 0);
|
|
149
|
+
__decorate([
|
|
150
|
+
property({ type: Boolean })
|
|
151
|
+
], IxTreeNode.prototype, "checkboxEnabled", void 0);
|
|
152
|
+
__decorate([
|
|
153
|
+
state()
|
|
154
|
+
], IxTreeNode.prototype, "_hasScrolledToActive", void 0);
|
|
111
155
|
//# sourceMappingURL=IxTreeNode.js.map
|
package/dist/IxTreeNode.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxTreeNode.js","sourceRoot":"","sources":["../src/IxTreeNode.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"IxTreeNode.js","sourceRoot":"","sources":["../src/IxTreeNode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-checkbox/ix-checkbox.js';\nimport '@digital-realty/theme';\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { IIxTreeNode } from './IIxTreeNode.js';\nimport { IxTreeStyles } from './ix-tree-styles.js';\n\n// TREE_NODE_SPACER_REM and TREE_NODE_ICON_SIZE_REM are used to calculate the left padding for each node in the tree based on its level.\n// They need to remain in synchronization with the CSS variables defined in ix-tree-styles.ts.\nconst TREE_NODE_SPACER_REM = 0.7;\nconst TREE_NODE_ICON_SIZE_REM = TREE_NODE_SPACER_REM * 4;\n\nexport class IxTreeNode extends LitElement {\n static readonly styles = [IxTreeStyles];\n\n @property() isActiveTreeNode: boolean = false;\n\n @property() isExpanded: boolean = false;\n\n @property() isSelected: boolean = false;\n\n @property() level: number = 0;\n\n @property({ type: Object }) node!: IIxTreeNode;\n\n @property({ type: Boolean }) checkboxEnabled: boolean = false;\n\n @state() _hasScrolledToActive: boolean = false;\n\n private getIcon(\n node: IIxTreeNode,\n isExpanded: boolean\n ): TemplateResult<1> | typeof nothing {\n if (!node.children || node.children.length === 0) {\n // This node does not have children; no icon is needed.\n return nothing;\n }\n\n const icon = isExpanded ? 'arrow_drop_down' : 'arrow_right';\n return html`<ix-icon-button\n @click=${() => this.onNodeToggle(this.node)}\n icon=${icon}\n test-id=\"tree-node-expand-toggle\"\n >\n </ix-icon-button>`;\n }\n\n private onNodeClick(node: IIxTreeNode): void {\n const event = new CustomEvent('on-tree-node-click', {\n detail: {\n message: {\n node,\n id: node.id,\n label: node.label,\n parentId: node.parentId,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onNodeToggle(node: IIxTreeNode): void {\n const event = new CustomEvent('on-tree-node-toggle', {\n detail: {\n message: {\n node,\n id: node.id,\n label: node.label,\n parentId: node.parentId,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onNodeCheck(node: IIxTreeNode): void {\n /* eslint-disable no-param-reassign */\n if (node.checked) {\n node.checked = false;\n node.indeterminate = false;\n } else {\n node.checked = true;\n node.indeterminate = false;\n }\n /* eslint-enable no-param-reassign */\n const event = new CustomEvent('on-tree-node-check', {\n detail: {\n message: {\n node,\n id: node.id,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n protected render(): TemplateResult<1> {\n const selectedClass = this.isSelected ? ' ix-tree-node__selected' : '';\n const icon = this.node.icon ? this.node.icon : 'account_box';\n\n return html`<div\n ?active-tree-node=${this.isActiveTreeNode}\n aria-expanded=${this.node.expanded}\n aria-selected=${this.isSelected}\n data-id=${this.node.id}\n role=\"treeitem\"\n >\n <div\n class=\"ix-tree-node__wrapper ix-tree-node${selectedClass}\"\n style=\"padding-left: ${this.level * TREE_NODE_ICON_SIZE_REM}rem\"\n >\n <div class=\"ix-tree-node__icon-size\">\n ${this.getIcon(this.node, this.isExpanded)}\n </div>\n <ix-icon-button\n icon=${icon}\n test-id=${`${this.node.id}-on-node-click-icon-button`}\n @click=${() => this.onNodeClick(this.node)}\n ></ix-icon-button>\n ${this.checkboxEnabled\n ? html`<ix-checkbox\n @click=${() => this.onNodeCheck(this.node)}\n label=\"\"\n style=\"margin: 6px 12px 0px 12px\"\n .checked=${this.node.checked}\n .indeterminate=${this.node.indeterminate}\n ></ix-checkbox>`\n : nothing}\n <div\n class=\"ix-tree-node__label\"\n @click=${() => this.onNodeClick(this.node)}\n @keyup=${() => this.onNodeClick(this.node)}\n >\n ${this.node.label}\n </div>\n </div>\n <slot></slot>\n </div>`;\n }\n\n protected updated(): void {\n if (!this._hasScrolledToActive) {\n const el = this.shadowRoot?.querySelector('[active-tree-node]');\n el?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n this._hasScrolledToActive = true;\n }\n }\n}\n"]}
|
package/dist/ix-tree-styles.js
CHANGED
|
@@ -3,8 +3,8 @@ export const IxTreeStyles = css `
|
|
|
3
3
|
:root,
|
|
4
4
|
:host :root,
|
|
5
5
|
:host {
|
|
6
|
-
--tree-node-spacer: var(--ix-sys-spacer, 0.
|
|
7
|
-
--tree-node-icon-size: calc(var(--tree-node-spacer) *
|
|
6
|
+
--tree-node-spacer: var(--ix-sys-spacer, 0.7rem);
|
|
7
|
+
--tree-node-icon-size: calc(var(--tree-node-spacer) * 4);
|
|
8
8
|
}
|
|
9
9
|
@font-face {
|
|
10
10
|
font-family: 'Material Icons';
|
|
@@ -39,7 +39,6 @@ export const IxTreeStyles = css `
|
|
|
39
39
|
padding: 0.5rem;
|
|
40
40
|
}
|
|
41
41
|
.ix-tree-node__icon-size {
|
|
42
|
-
height: var(--tree-node-icon-size);
|
|
43
42
|
width: var(--tree-node-icon-size);
|
|
44
43
|
}
|
|
45
44
|
.ix-tree-node__label {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-tree-styles.js","sourceRoot":"","sources":["../src/ix-tree-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ix-tree-styles.js","sourceRoot":"","sources":["../src/ix-tree-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqD9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxTreeStyles = css`\n :root,\n :host :root,\n :host {\n --tree-node-spacer: var(--ix-sys-spacer, 0.7rem);\n --tree-node-icon-size: calc(var(--tree-node-spacer) * 4);\n }\n @font-face {\n font-family: 'Material Icons';\n font-style: normal;\n font-weight: 400;\n src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf)\n format('truetype');\n }\n .material-icons {\n color: #09224199;\n direction: ltr;\n display: inline-block;\n font-family: 'Material Icons';\n font-size: 24px;\n font-style: normal;\n font-weight: normal;\n letter-spacing: normal;\n line-height: 1;\n text-transform: none;\n white-space: nowrap;\n word-wrap: normal;\n }\n .ix-tree-container {\n height: 100%;\n overflow: auto;\n width: 100%;\n }\n .ix-tree-node__wrapper {\n align-items: center;\n cursor: pointer;\n display: flex;\n padding: 0.5rem;\n }\n .ix-tree-node__icon-size {\n width: var(--tree-node-icon-size);\n }\n .ix-tree-node__label {\n color: #092241;\n display: flex;\n flex-grow: 1;\n padding: 0.25rem;\n white-space: nowrap;\n }\n .ix-tree-node__selected {\n background-color: rgba(20, 86, 224, 0.1);\n border-left: 3px solid #1456e0;\n }\n`;\n"]}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
export function findChildNodeById(node, id) {
|
|
2
|
+
if (node.id === id) {
|
|
3
|
+
return node;
|
|
4
|
+
}
|
|
5
|
+
if (!node.children) {
|
|
6
|
+
return null;
|
|
7
|
+
}
|
|
8
|
+
for (const childNode of node.children) {
|
|
9
|
+
const foundNode = findChildNodeById(childNode, id);
|
|
10
|
+
if (foundNode) {
|
|
11
|
+
return foundNode;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
return null;
|
|
15
|
+
}
|
|
16
|
+
export function updateNodeCheckedStatus(node, rootNode) {
|
|
17
|
+
/* eslint-disable no-param-reassign */
|
|
18
|
+
function updateChildren(n, checked = false) {
|
|
19
|
+
n.checked = checked;
|
|
20
|
+
n.indeterminate = false;
|
|
21
|
+
if (n.children) {
|
|
22
|
+
n.children.forEach(child => {
|
|
23
|
+
updateChildren(child, checked);
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
function updateParents(n) {
|
|
28
|
+
if (n.parentId) {
|
|
29
|
+
const currentParent = findChildNodeById(rootNode, n.parentId);
|
|
30
|
+
if (currentParent && currentParent.children) {
|
|
31
|
+
if (currentParent.children.every(child => child.checked)) {
|
|
32
|
+
currentParent.checked = true;
|
|
33
|
+
currentParent.indeterminate = false;
|
|
34
|
+
}
|
|
35
|
+
else if (currentParent.children.some(child => child.checked)) {
|
|
36
|
+
currentParent.checked = false;
|
|
37
|
+
currentParent.indeterminate = true;
|
|
38
|
+
}
|
|
39
|
+
else if (currentParent.children.some(c => c.indeterminate)) {
|
|
40
|
+
currentParent.checked = false;
|
|
41
|
+
currentParent.indeterminate = true;
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
currentParent.checked = false;
|
|
45
|
+
currentParent.indeterminate = false;
|
|
46
|
+
}
|
|
47
|
+
updateParents(currentParent);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
// update all children to match current node checked status
|
|
52
|
+
updateChildren(node, node.checked);
|
|
53
|
+
// update all parents checked and indeterminate status
|
|
54
|
+
updateParents(node);
|
|
55
|
+
}
|
|
56
|
+
//# sourceMappingURL=tree-utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tree-utils.js","sourceRoot":"","sources":["../src/tree-utils.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,iBAAiB,CAC/B,IAAiB,EACjB,EAAU;IAEV,IAAI,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IACD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,QAAQ,EAAE;QACrC,MAAM,SAAS,GAAG,iBAAiB,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAEnD,IAAI,SAAS,EAAE;YACb,OAAO,SAAS,CAAC;SAClB;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,uBAAuB,CACrC,IAAiB,EACjB,QAAqB;IAErB,sCAAsC;IACtC,SAAS,cAAc,CAAC,CAAc,EAAE,OAAO,GAAG,KAAK;QACrD,CAAC,CAAC,OAAO,GAAG,OAAO,CAAC;QACpB,CAAC,CAAC,aAAa,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,CAAC,QAAQ,EAAE;YACd,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACzB,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;YACjC,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IACD,SAAS,aAAa,CAAC,CAAc;QACnC,IAAI,CAAC,CAAC,QAAQ,EAAE;YACd,MAAM,aAAa,GAAG,iBAAiB,CAAC,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;YAC9D,IAAI,aAAa,IAAI,aAAa,CAAC,QAAQ,EAAE;gBAC3C,IAAI,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;oBACxD,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;oBAC7B,aAAa,CAAC,aAAa,GAAG,KAAK,CAAC;iBACrC;qBAAM,IAAI,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;oBAC9D,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;oBAC9B,aAAa,CAAC,aAAa,GAAG,IAAI,CAAC;iBACpC;qBAAM,IAAI,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE;oBAC5D,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;oBAC9B,aAAa,CAAC,aAAa,GAAG,IAAI,CAAC;iBACpC;qBAAM;oBACL,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;oBAC9B,aAAa,CAAC,aAAa,GAAG,KAAK,CAAC;iBACrC;gBACD,aAAa,CAAC,aAAa,CAAC,CAAC;aAC9B;SACF;IACH,CAAC;IACD,2DAA2D;IAC3D,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAEnC,sDAAsD;IACtD,aAAa,CAAC,IAAI,CAAC,CAAC;AACtB,CAAC","sourcesContent":["import { IIxTreeNode } from './IIxTreeNode.js';\n\nexport function findChildNodeById(\n node: IIxTreeNode,\n id: string\n): IIxTreeNode | null {\n if (node.id === id) {\n return node;\n }\n if (!node.children) {\n return null;\n }\n\n for (const childNode of node.children) {\n const foundNode = findChildNodeById(childNode, id);\n\n if (foundNode) {\n return foundNode;\n }\n }\n\n return null;\n}\n\nexport function updateNodeCheckedStatus(\n node: IIxTreeNode,\n rootNode: IIxTreeNode\n): void {\n /* eslint-disable no-param-reassign */\n function updateChildren(n: IIxTreeNode, checked = false): void {\n n.checked = checked;\n n.indeterminate = false;\n if (n.children) {\n n.children.forEach(child => {\n updateChildren(child, checked);\n });\n }\n }\n function updateParents(n: IIxTreeNode): void {\n if (n.parentId) {\n const currentParent = findChildNodeById(rootNode, n.parentId);\n if (currentParent && currentParent.children) {\n if (currentParent.children.every(child => child.checked)) {\n currentParent.checked = true;\n currentParent.indeterminate = false;\n } else if (currentParent.children.some(child => child.checked)) {\n currentParent.checked = false;\n currentParent.indeterminate = true;\n } else if (currentParent.children.some(c => c.indeterminate)) {\n currentParent.checked = false;\n currentParent.indeterminate = true;\n } else {\n currentParent.checked = false;\n currentParent.indeterminate = false;\n }\n updateParents(currentParent);\n }\n }\n }\n // update all children to match current node checked status\n updateChildren(node, node.checked);\n\n // update all parents checked and indeterminate status\n updateParents(node);\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.
|
|
6
|
+
"version": "1.0.6",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -26,8 +26,10 @@
|
|
|
26
26
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
+
"@digital-realty/ix-checkbox": "*",
|
|
29
30
|
"@digital-realty/ix-icon": "*",
|
|
30
|
-
"@digital-realty/
|
|
31
|
+
"@digital-realty/ix-icon-button": "*",
|
|
32
|
+
"@digital-realty/theme": "*",
|
|
31
33
|
"@lit-labs/react": "^2.1.0",
|
|
32
34
|
"@material/web": "^1.0.0",
|
|
33
35
|
"lit": "^2.0.2",
|
|
@@ -47,6 +49,7 @@
|
|
|
47
49
|
"husky": "^4.3.8",
|
|
48
50
|
"lint-staged": "^10.5.4",
|
|
49
51
|
"prettier": "^2.4.1",
|
|
52
|
+
"sinon": "^17.0.1",
|
|
50
53
|
"tslib": "^2.3.1",
|
|
51
54
|
"typescript": "^4.5.2"
|
|
52
55
|
},
|
|
@@ -97,5 +100,5 @@
|
|
|
97
100
|
"README.md",
|
|
98
101
|
"LICENSE"
|
|
99
102
|
],
|
|
100
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "9d3952ce59cf2e1378ac88a41be05c373a816800"
|
|
101
104
|
}
|
package/dist/find-node-by-id.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
const findNodeById = (node, id) => {
|
|
2
|
-
if (!node || !node.children) {
|
|
3
|
-
return null;
|
|
4
|
-
}
|
|
5
|
-
if (node.id === id) {
|
|
6
|
-
return node;
|
|
7
|
-
}
|
|
8
|
-
for (const childNode of node.children) {
|
|
9
|
-
const foundNode = findNodeById(childNode, id);
|
|
10
|
-
if (foundNode) {
|
|
11
|
-
return foundNode;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
return null;
|
|
15
|
-
};
|
|
16
|
-
export default findNodeById;
|
|
17
|
-
//# sourceMappingURL=find-node-by-id.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"find-node-by-id.js","sourceRoot":"","sources":["../src/find-node-by-id.ts"],"names":[],"mappings":"AAEA,MAAM,YAAY,GAAG,CAAC,IAAiB,EAAE,EAAU,EAAsB,EAAE;IACzE,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAC3B,OAAO,IAAI,CAAC;KACb;IAED,IAAI,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,QAAQ,EAAE;QACrC,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAE9C,IAAI,SAAS,EAAE;YACb,OAAO,SAAS,CAAC;SAClB;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { IIxTreeNode } from './IIxTreeNode.js';\n\nconst findNodeById = (node: IIxTreeNode, id: string): IIxTreeNode | null => {\n if (!node || !node.children) {\n return null;\n }\n\n if (node.id === id) {\n return node;\n }\n\n for (const childNode of node.children) {\n const foundNode = findNodeById(childNode, id);\n\n if (foundNode) {\n return foundNode;\n }\n }\n\n return null;\n};\n\nexport default findNodeById;\n"]}
|