@digital-realty/ix-tree 1.0.13 → 1.0.15
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 +10 -10
- package/dist/IIxTreeNode.js +1 -1
- package/dist/IxTree.d.ts +28 -27
- package/dist/IxTree.js +116 -109
- package/dist/IxTree.js.map +1 -1
- package/dist/IxTreeNode.d.ts +24 -23
- package/dist/IxTreeNode.js +130 -129
- package/dist/IxTreeNode.js.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.js +2 -2
- package/dist/ix-tree-node.d.ts +1 -1
- package/dist/ix-tree-node.js +2 -2
- package/dist/ix-tree-styles.d.ts +1 -1
- package/dist/ix-tree-styles.js +7 -5
- package/dist/ix-tree-styles.js.map +1 -1
- package/dist/ix-tree.d.ts +1 -1
- package/dist/ix-tree.js +2 -2
- package/dist/tree-utils.d.ts +3 -3
- package/dist/tree-utils.js +55 -55
- package/package.json +4 -5
package/dist/IIxTreeNode.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export interface IIxTreeNode {
|
|
2
|
-
children?: Array<IIxTreeNode>;
|
|
3
|
-
expanded?: boolean;
|
|
4
|
-
icon?: string;
|
|
5
|
-
id: string;
|
|
6
|
-
label: string;
|
|
7
|
-
parentId?: string;
|
|
8
|
-
checked?: boolean;
|
|
9
|
-
indeterminate?: boolean;
|
|
10
|
-
}
|
|
1
|
+
export interface IIxTreeNode {
|
|
2
|
+
children?: Array<IIxTreeNode>;
|
|
3
|
+
expanded?: boolean;
|
|
4
|
+
icon?: string;
|
|
5
|
+
id: string;
|
|
6
|
+
label: string;
|
|
7
|
+
parentId?: string;
|
|
8
|
+
checked?: boolean;
|
|
9
|
+
indeterminate?: boolean;
|
|
10
|
+
}
|
package/dist/IIxTreeNode.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
2
2
|
//# sourceMappingURL=IIxTreeNode.js.map
|
package/dist/IxTree.d.ts
CHANGED
|
@@ -1,27 +1,28 @@
|
|
|
1
|
-
import '@digital-realty/ix-icon/ix-icon.js';
|
|
2
|
-
import '@digital-realty/theme';
|
|
3
|
-
import { LitElement, TemplateResult } from 'lit';
|
|
4
|
-
import { IIxTreeNode } from './IIxTreeNode.js';
|
|
5
|
-
import './ix-tree-node.js';
|
|
6
|
-
export type Appearance = 'filled' | 'filled-tonal' | 'outlined' | 'default';
|
|
7
|
-
export declare class IxTree extends LitElement {
|
|
8
|
-
static readonly styles: import("lit").CSSResult[];
|
|
9
|
-
connectedCallback(): void;
|
|
10
|
-
ariaLabel: string;
|
|
11
|
-
rootNode: IIxTreeNode;
|
|
12
|
-
selectedNodeId: string;
|
|
13
|
-
checkboxesEnabled: boolean;
|
|
14
|
-
appearance: Appearance;
|
|
15
|
-
private _activeItemId;
|
|
16
|
-
private _rootNode;
|
|
17
|
-
private _selectedNodeId;
|
|
18
|
-
private onTreeNodeClick;
|
|
19
|
-
private
|
|
20
|
-
private
|
|
21
|
-
private
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
1
|
+
import '@digital-realty/ix-icon/ix-icon.js';
|
|
2
|
+
import '@digital-realty/theme';
|
|
3
|
+
import { LitElement, TemplateResult } from 'lit';
|
|
4
|
+
import { IIxTreeNode } from './IIxTreeNode.js';
|
|
5
|
+
import './ix-tree-node.js';
|
|
6
|
+
export type Appearance = 'filled' | 'filled-tonal' | 'outlined' | 'default';
|
|
7
|
+
export declare class IxTree extends LitElement {
|
|
8
|
+
static readonly styles: import("lit").CSSResult[];
|
|
9
|
+
connectedCallback(): void;
|
|
10
|
+
ariaLabel: string;
|
|
11
|
+
rootNode: IIxTreeNode;
|
|
12
|
+
selectedNodeId: string;
|
|
13
|
+
checkboxesEnabled: boolean;
|
|
14
|
+
appearance: Appearance;
|
|
15
|
+
private _activeItemId;
|
|
16
|
+
private _rootNode;
|
|
17
|
+
private _selectedNodeId;
|
|
18
|
+
private onTreeNodeClick;
|
|
19
|
+
private dispatchTreeNodeExpandToggle;
|
|
20
|
+
private onTreeNodeToggle;
|
|
21
|
+
private onTreeNodeCheck;
|
|
22
|
+
private renderNodes;
|
|
23
|
+
/**
|
|
24
|
+
* Expand the active tree node and all of its parent nodes.
|
|
25
|
+
*/
|
|
26
|
+
private expandActiveTreeNode;
|
|
27
|
+
protected render(): TemplateResult<1>;
|
|
28
|
+
}
|
package/dist/IxTree.js
CHANGED
|
@@ -1,57 +1,64 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import '@digital-realty/ix-icon/ix-icon.js';
|
|
3
|
-
import '@digital-realty/theme';
|
|
4
|
-
import { nothing, html, LitElement } from 'lit';
|
|
5
|
-
import { property, state } from 'lit/decorators.js';
|
|
6
|
-
import { findChildNodeById, updateNodeCheckedStatus } from './tree-utils.js';
|
|
7
|
-
import { IxTreeStyles } from './ix-tree-styles.js';
|
|
8
|
-
import './ix-tree-node.js';
|
|
9
|
-
export class IxTree extends LitElement {
|
|
10
|
-
constructor() {
|
|
11
|
-
super(...arguments);
|
|
12
|
-
this.ariaLabel = 'tree';
|
|
13
|
-
this.selectedNodeId = '';
|
|
14
|
-
this.checkboxesEnabled = false;
|
|
15
|
-
this.appearance = 'default';
|
|
16
|
-
this._activeItemId = '';
|
|
17
|
-
this._selectedNodeId = '';
|
|
18
|
-
}
|
|
19
|
-
connectedCallback() {
|
|
20
|
-
super.connectedCallback();
|
|
21
|
-
this._activeItemId = this.selectedNodeId; // store in state
|
|
22
|
-
this._selectedNodeId = this.selectedNodeId; // store in state
|
|
23
|
-
this._rootNode = this.rootNode;
|
|
24
|
-
}
|
|
25
|
-
onTreeNodeClick(e) {
|
|
26
|
-
this.dispatchEvent(new CustomEvent('on-tree-node-selected', {
|
|
27
|
-
detail: {
|
|
28
|
-
message: e.detail.message,
|
|
29
|
-
},
|
|
30
|
-
}));
|
|
31
|
-
this._selectedNodeId = e.detail.message.id;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
this.
|
|
46
|
-
this.
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import '@digital-realty/ix-icon/ix-icon.js';
|
|
3
|
+
import '@digital-realty/theme';
|
|
4
|
+
import { nothing, html, LitElement } from 'lit';
|
|
5
|
+
import { property, state } from 'lit/decorators.js';
|
|
6
|
+
import { findChildNodeById, updateNodeCheckedStatus } from './tree-utils.js';
|
|
7
|
+
import { IxTreeStyles } from './ix-tree-styles.js';
|
|
8
|
+
import './ix-tree-node.js';
|
|
9
|
+
export class IxTree extends LitElement {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments);
|
|
12
|
+
this.ariaLabel = 'tree';
|
|
13
|
+
this.selectedNodeId = '';
|
|
14
|
+
this.checkboxesEnabled = false;
|
|
15
|
+
this.appearance = 'default';
|
|
16
|
+
this._activeItemId = '';
|
|
17
|
+
this._selectedNodeId = '';
|
|
18
|
+
}
|
|
19
|
+
connectedCallback() {
|
|
20
|
+
super.connectedCallback();
|
|
21
|
+
this._activeItemId = this.selectedNodeId; // store in state
|
|
22
|
+
this._selectedNodeId = this.selectedNodeId; // store in state
|
|
23
|
+
this._rootNode = this.rootNode;
|
|
24
|
+
}
|
|
25
|
+
onTreeNodeClick(e) {
|
|
26
|
+
this.dispatchEvent(new CustomEvent('on-tree-node-selected', {
|
|
27
|
+
detail: {
|
|
28
|
+
message: e.detail.message,
|
|
29
|
+
},
|
|
30
|
+
}));
|
|
31
|
+
this._selectedNodeId = e.detail.message.id;
|
|
32
|
+
}
|
|
33
|
+
dispatchTreeNodeExpandToggle(e) {
|
|
34
|
+
this.dispatchEvent(new CustomEvent('on-tree-node-expand-toggle', {
|
|
35
|
+
detail: {
|
|
36
|
+
message: e.detail.message,
|
|
37
|
+
},
|
|
38
|
+
}));
|
|
39
|
+
}
|
|
40
|
+
onTreeNodeToggle(e) {
|
|
41
|
+
const newRootNode = { ...this._rootNode };
|
|
42
|
+
const { node } = e.detail.message;
|
|
43
|
+
node.expanded = !node.expanded;
|
|
44
|
+
this._rootNode = newRootNode;
|
|
45
|
+
this._activeItemId = node.id;
|
|
46
|
+
this.dispatchTreeNodeExpandToggle(e);
|
|
47
|
+
this.requestUpdate();
|
|
48
|
+
}
|
|
49
|
+
onTreeNodeCheck(e) {
|
|
50
|
+
const { node } = e.detail.message;
|
|
51
|
+
updateNodeCheckedStatus(node, this._rootNode);
|
|
52
|
+
this._rootNode = structuredClone(this._rootNode);
|
|
53
|
+
this.dispatchEvent(new CustomEvent('on-tree-node-checked', {
|
|
54
|
+
detail: {
|
|
55
|
+
message: e.detail.message,
|
|
56
|
+
},
|
|
57
|
+
}));
|
|
58
|
+
}
|
|
59
|
+
renderNodes(nodes = [], level = 0) {
|
|
60
|
+
const renderedNodes = [];
|
|
61
|
+
for (const node of nodes) {
|
|
55
62
|
const renderedNode = html `<ix-tree-node
|
|
56
63
|
.isActiveTreeNode=${this._activeItemId === node.id}
|
|
57
64
|
.isExpanded=${!!node.expanded}
|
|
@@ -65,65 +72,65 @@ export class IxTree extends LitElement {
|
|
|
65
72
|
@on-tree-node-check=${this.onTreeNodeCheck}
|
|
66
73
|
>
|
|
67
74
|
${node.expanded ? this.renderNodes(node.children, level + 1) : nothing}
|
|
68
|
-
</ix-tree-node>`;
|
|
69
|
-
renderedNodes.push(renderedNode);
|
|
70
|
-
}
|
|
71
|
-
return renderedNodes;
|
|
72
|
-
}
|
|
73
|
-
/**
|
|
74
|
-
* Expand the active tree node and all of its parent nodes.
|
|
75
|
-
*/
|
|
76
|
-
expandActiveTreeNode() {
|
|
77
|
-
const nodeToSelect = findChildNodeById(this._rootNode, this._activeItemId) || this._rootNode;
|
|
78
|
-
let iteration = 0;
|
|
79
|
-
const MAX_ITERATIONS = 1000;
|
|
80
|
-
if (!nodeToSelect.parentId) {
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
let node = findChildNodeById(this._rootNode, nodeToSelect.parentId);
|
|
84
|
-
while (node && iteration < MAX_ITERATIONS) {
|
|
85
|
-
node.expanded = true;
|
|
86
|
-
if (!node.parentId) {
|
|
87
|
-
break;
|
|
88
|
-
}
|
|
89
|
-
node = findChildNodeById(this._rootNode, node.parentId);
|
|
90
|
-
iteration += 1;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
render() {
|
|
94
|
-
this.expandActiveTreeNode();
|
|
75
|
+
</ix-tree-node>`;
|
|
76
|
+
renderedNodes.push(renderedNode);
|
|
77
|
+
}
|
|
78
|
+
return renderedNodes;
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Expand the active tree node and all of its parent nodes.
|
|
82
|
+
*/
|
|
83
|
+
expandActiveTreeNode() {
|
|
84
|
+
const nodeToSelect = findChildNodeById(this._rootNode, this._activeItemId) || this._rootNode;
|
|
85
|
+
let iteration = 0;
|
|
86
|
+
const MAX_ITERATIONS = 1000;
|
|
87
|
+
if (!nodeToSelect.parentId) {
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
let node = findChildNodeById(this._rootNode, nodeToSelect.parentId);
|
|
91
|
+
while (node && iteration < MAX_ITERATIONS) {
|
|
92
|
+
node.expanded = true;
|
|
93
|
+
if (!node.parentId) {
|
|
94
|
+
break;
|
|
95
|
+
}
|
|
96
|
+
node = findChildNodeById(this._rootNode, node.parentId);
|
|
97
|
+
iteration += 1;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
render() {
|
|
101
|
+
this.expandActiveTreeNode();
|
|
95
102
|
return html `<div
|
|
96
103
|
aria-label=${this.ariaLabel}
|
|
97
104
|
class="ix-tree-container"
|
|
98
105
|
role="tree"
|
|
99
106
|
>
|
|
100
107
|
${this.renderNodes(this._rootNode.children, 0)}
|
|
101
|
-
</div>`;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
IxTree.styles = [IxTreeStyles];
|
|
105
|
-
__decorate([
|
|
106
|
-
property()
|
|
107
|
-
], IxTree.prototype, "ariaLabel", void 0);
|
|
108
|
-
__decorate([
|
|
109
|
-
property({ type: Object })
|
|
110
|
-
], IxTree.prototype, "rootNode", void 0);
|
|
111
|
-
__decorate([
|
|
112
|
-
property()
|
|
113
|
-
], IxTree.prototype, "selectedNodeId", void 0);
|
|
114
|
-
__decorate([
|
|
115
|
-
property({ type: Boolean })
|
|
116
|
-
], IxTree.prototype, "checkboxesEnabled", void 0);
|
|
117
|
-
__decorate([
|
|
118
|
-
property({ type: String })
|
|
119
|
-
], IxTree.prototype, "appearance", void 0);
|
|
120
|
-
__decorate([
|
|
121
|
-
state()
|
|
122
|
-
], IxTree.prototype, "_activeItemId", void 0);
|
|
123
|
-
__decorate([
|
|
124
|
-
state()
|
|
125
|
-
], IxTree.prototype, "_rootNode", void 0);
|
|
126
|
-
__decorate([
|
|
127
|
-
state()
|
|
128
|
-
], IxTree.prototype, "_selectedNodeId", void 0);
|
|
108
|
+
</div>`;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
IxTree.styles = [IxTreeStyles];
|
|
112
|
+
__decorate([
|
|
113
|
+
property()
|
|
114
|
+
], IxTree.prototype, "ariaLabel", void 0);
|
|
115
|
+
__decorate([
|
|
116
|
+
property({ type: Object })
|
|
117
|
+
], IxTree.prototype, "rootNode", void 0);
|
|
118
|
+
__decorate([
|
|
119
|
+
property()
|
|
120
|
+
], IxTree.prototype, "selectedNodeId", void 0);
|
|
121
|
+
__decorate([
|
|
122
|
+
property({ type: Boolean })
|
|
123
|
+
], IxTree.prototype, "checkboxesEnabled", void 0);
|
|
124
|
+
__decorate([
|
|
125
|
+
property({ type: String })
|
|
126
|
+
], IxTree.prototype, "appearance", void 0);
|
|
127
|
+
__decorate([
|
|
128
|
+
state()
|
|
129
|
+
], IxTree.prototype, "_activeItemId", void 0);
|
|
130
|
+
__decorate([
|
|
131
|
+
state()
|
|
132
|
+
], IxTree.prototype, "_rootNode", void 0);
|
|
133
|
+
__decorate([
|
|
134
|
+
state()
|
|
135
|
+
], IxTree.prototype, "_selectedNodeId", void 0);
|
|
129
136
|
//# sourceMappingURL=IxTree.js.map
|
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,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAI3B,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAWc,cAAS,GAAW,MAAM,CAAC;QAI3B,mBAAc,GAAW,EAAE,CAAC;QAEX,sBAAiB,GAAY,KAAK,CAAC;QAEpC,eAAU,GAAe,SAAS,CAAC;QAE9C,kBAAa,GAAW,EAAE,CAAC;QAI3B,oBAAe,GAAW,EAAE,CAAC;
|
|
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,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAI3B,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAWc,cAAS,GAAW,MAAM,CAAC;QAI3B,mBAAc,GAAW,EAAE,CAAC;QAEX,sBAAiB,GAAY,KAAK,CAAC;QAEpC,eAAU,GAAe,SAAS,CAAC;QAE9C,kBAAa,GAAW,EAAE,CAAC;QAI3B,oBAAe,GAAW,EAAE,CAAC;IA+GhD,CAAC;IArIC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,iBAAiB;QAC3D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,iBAAiB;QAC7D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;IACjC,CAAC;IAkBO,eAAe,CAAC,CAAc;QACpC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,uBAAuB,EAAE;YACvC,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO;aAC1B;SACF,CAAC,CACH,CAAC;QAEF,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;IAC7C,CAAC;IAEO,4BAA4B,CAAC,CAAc;QACjD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,4BAA4B,EAAE;YAC5C,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO;aAC1B;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,gBAAgB,CAAC,CAAc;QACrC,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC1C,MAAM,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;QAC7B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC;QAC7B,IAAI,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,eAAe,CAAC,CAAc;QACpC,MAAM,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;QAClC,uBAAuB,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAC9C,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,sBAAsB,EAAE;YACtC,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO;aAC1B;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,WAAW,CACjB,QAA4B,EAAE,EAC9B,QAAgB,CAAC;QAEjB,MAAM,aAAa,GAA6B,EAAE,CAAC;QAEnD,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,MAAM,YAAY,GAAG,IAAI,CAAA;4BACH,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,EAAE;sBACpC,CAAC,CAAC,IAAI,CAAC,QAAQ;sBACf,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,EAAE;iBACrC,KAAK;gBACN,IAAI;2BACO,IAAI,CAAC,iBAAiB;sBAC3B,IAAI,CAAC,UAAU;8BACP,IAAI,CAAC,eAAe;+BACnB,IAAI,CAAC,gBAAgB;8BACtB,IAAI,CAAC,eAAe;;UAExC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;sBACxD,CAAC;YACjB,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAClC;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;IAED;;OAEG;IACK,oBAAoB;QAC1B,MAAM,YAAY,GAChB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC;QAE1E,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,MAAM,cAAc,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE;YAC1B,OAAO;SACR;QACD,IAAI,IAAI,GAAuB,iBAAiB,CAC9C,IAAI,CAAC,SAAS,EACd,YAAY,CAAC,QAAQ,CACtB,CAAC;QACF,OAAO,IAAI,IAAI,SAAS,GAAG,cAAc,EAAE;YACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,MAAM;aACP;YACD,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACxD,SAAS,IAAI,CAAC,CAAC;SAChB;IACH,CAAC;IAES,MAAM;QACd,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,OAAO,IAAI,CAAA;mBACI,IAAI,CAAC,SAAS;;;;QAIzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;WACzC,CAAC;IACV,CAAC;;AAtIe,aAAM,GAAG,CAAC,YAAY,CAAC,CAAC;AAU5B;IAAX,QAAQ,EAAE;yCAA4B;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAwB;AAEvC;IAAX,QAAQ,EAAE;8CAA6B;AAEX;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAoC;AAEpC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAoC;AAEtD;IAAR,KAAK,EAAE;6CAAoC;AAEnC;IAAR,KAAK,EAAE;yCAAiC;AAEhC;IAAR,KAAK,EAAE;+CAAsC","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"]}
|
package/dist/IxTreeNode.d.ts
CHANGED
|
@@ -1,23 +1,24 @@
|
|
|
1
|
-
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
2
|
-
import '@digital-realty/ix-checkbox/ix-checkbox.js';
|
|
3
|
-
import '@digital-realty/theme';
|
|
4
|
-
import { LitElement, TemplateResult } from 'lit';
|
|
5
|
-
import { IIxTreeNode } from './IIxTreeNode.js';
|
|
6
|
-
import { Appearance } from './IxTree.js';
|
|
7
|
-
export declare class IxTreeNode extends LitElement {
|
|
8
|
-
static readonly styles: import("lit").CSSResult[];
|
|
9
|
-
isActiveTreeNode: boolean;
|
|
10
|
-
isExpanded: boolean;
|
|
11
|
-
isSelected: boolean;
|
|
12
|
-
level: number;
|
|
13
|
-
node: IIxTreeNode;
|
|
14
|
-
checkboxEnabled: boolean;
|
|
15
|
-
appearance: Appearance;
|
|
16
|
-
private _hasScrolledToActive;
|
|
17
|
-
private
|
|
18
|
-
private
|
|
19
|
-
private
|
|
20
|
-
private
|
|
21
|
-
|
|
22
|
-
protected
|
|
23
|
-
|
|
1
|
+
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
2
|
+
import '@digital-realty/ix-checkbox/ix-checkbox.js';
|
|
3
|
+
import '@digital-realty/theme';
|
|
4
|
+
import { LitElement, TemplateResult } from 'lit';
|
|
5
|
+
import { IIxTreeNode } from './IIxTreeNode.js';
|
|
6
|
+
import { Appearance } from './IxTree.js';
|
|
7
|
+
export declare class IxTreeNode extends LitElement {
|
|
8
|
+
static readonly styles: import("lit").CSSResult[];
|
|
9
|
+
isActiveTreeNode: boolean;
|
|
10
|
+
isExpanded: boolean;
|
|
11
|
+
isSelected: boolean;
|
|
12
|
+
level: number;
|
|
13
|
+
node: IIxTreeNode;
|
|
14
|
+
checkboxEnabled: boolean;
|
|
15
|
+
appearance: Appearance;
|
|
16
|
+
private _hasScrolledToActive;
|
|
17
|
+
private hasChildren;
|
|
18
|
+
private getIcon;
|
|
19
|
+
private onNodeClick;
|
|
20
|
+
private onNodeToggle;
|
|
21
|
+
private onNodeCheck;
|
|
22
|
+
protected render(): TemplateResult<1>;
|
|
23
|
+
protected updated(): void;
|
|
24
|
+
}
|
package/dist/IxTreeNode.js
CHANGED
|
@@ -1,88 +1,90 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
3
|
-
import '@digital-realty/ix-checkbox/ix-checkbox.js';
|
|
4
|
-
import '@digital-realty/theme';
|
|
5
|
-
import { html, LitElement, nothing } from 'lit';
|
|
6
|
-
import { property, state } from 'lit/decorators.js';
|
|
7
|
-
import { IxTreeStyles } from './ix-tree-styles.js';
|
|
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.
|
|
9
|
-
// They need to remain in synchronization with the CSS variables defined in ix-tree-styles.ts.
|
|
10
|
-
const TREE_NODE_SPACER_REM = 0.
|
|
11
|
-
const TREE_NODE_ICON_SIZE_REM = TREE_NODE_SPACER_REM * 4;
|
|
12
|
-
export class IxTreeNode extends LitElement {
|
|
13
|
-
constructor() {
|
|
14
|
-
super(...arguments);
|
|
15
|
-
this.isActiveTreeNode = false;
|
|
16
|
-
this.isExpanded = false;
|
|
17
|
-
this.isSelected = false;
|
|
18
|
-
this.level = 0;
|
|
19
|
-
this.checkboxEnabled = false;
|
|
20
|
-
this.appearance = 'default';
|
|
21
|
-
this._hasScrolledToActive = false;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
3
|
+
import '@digital-realty/ix-checkbox/ix-checkbox.js';
|
|
4
|
+
import '@digital-realty/theme';
|
|
5
|
+
import { html, LitElement, nothing } from 'lit';
|
|
6
|
+
import { property, state } from 'lit/decorators.js';
|
|
7
|
+
import { IxTreeStyles } from './ix-tree-styles.js';
|
|
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.
|
|
9
|
+
// They need to remain in synchronization with the CSS variables defined in ix-tree-styles.ts.
|
|
10
|
+
const TREE_NODE_SPACER_REM = 0.6;
|
|
11
|
+
const TREE_NODE_ICON_SIZE_REM = TREE_NODE_SPACER_REM * 4;
|
|
12
|
+
export class IxTreeNode extends LitElement {
|
|
13
|
+
constructor() {
|
|
14
|
+
super(...arguments);
|
|
15
|
+
this.isActiveTreeNode = false;
|
|
16
|
+
this.isExpanded = false;
|
|
17
|
+
this.isSelected = false;
|
|
18
|
+
this.level = 0;
|
|
19
|
+
this.checkboxEnabled = false;
|
|
20
|
+
this.appearance = 'default';
|
|
21
|
+
this._hasScrolledToActive = false;
|
|
22
|
+
}
|
|
23
|
+
hasChildren() {
|
|
24
|
+
return this.node.children !== undefined && this.node.children.length > 0;
|
|
25
|
+
}
|
|
26
|
+
getIcon(node, isExpanded) {
|
|
27
|
+
if (!this.hasChildren()) {
|
|
28
|
+
return nothing;
|
|
29
|
+
}
|
|
30
|
+
const icon = isExpanded ? 'arrow_drop_down' : 'arrow_right';
|
|
29
31
|
return html `<ix-icon-button
|
|
30
32
|
@click=${() => this.onNodeToggle(this.node)}
|
|
31
33
|
icon=${icon}
|
|
32
34
|
test-id="tree-node-expand-toggle"
|
|
33
35
|
>
|
|
34
|
-
</ix-icon-button>`;
|
|
35
|
-
}
|
|
36
|
-
onNodeClick(node) {
|
|
37
|
-
const event = new CustomEvent('on-tree-node-click', {
|
|
38
|
-
detail: {
|
|
39
|
-
message: {
|
|
40
|
-
node,
|
|
41
|
-
id: node.id,
|
|
42
|
-
label: node.label,
|
|
43
|
-
parentId: node.parentId,
|
|
44
|
-
},
|
|
45
|
-
},
|
|
46
|
-
});
|
|
47
|
-
this.dispatchEvent(event);
|
|
48
|
-
}
|
|
49
|
-
onNodeToggle(node) {
|
|
50
|
-
const event = new CustomEvent('on-tree-node-toggle', {
|
|
51
|
-
detail: {
|
|
52
|
-
message: {
|
|
53
|
-
node,
|
|
54
|
-
id: node.id,
|
|
55
|
-
label: node.label,
|
|
56
|
-
parentId: node.parentId,
|
|
57
|
-
},
|
|
58
|
-
},
|
|
59
|
-
});
|
|
60
|
-
this.dispatchEvent(event);
|
|
61
|
-
}
|
|
62
|
-
onNodeCheck(node) {
|
|
63
|
-
/* eslint-disable no-param-reassign */
|
|
64
|
-
if (node.checked) {
|
|
65
|
-
node.checked = false;
|
|
66
|
-
node.indeterminate = false;
|
|
67
|
-
}
|
|
68
|
-
else {
|
|
69
|
-
node.checked = true;
|
|
70
|
-
node.indeterminate = false;
|
|
71
|
-
}
|
|
72
|
-
/* eslint-enable no-param-reassign */
|
|
73
|
-
const event = new CustomEvent('on-tree-node-check', {
|
|
74
|
-
detail: {
|
|
75
|
-
message: {
|
|
76
|
-
node,
|
|
77
|
-
id: node.id,
|
|
78
|
-
},
|
|
79
|
-
},
|
|
80
|
-
});
|
|
81
|
-
this.dispatchEvent(event);
|
|
82
|
-
}
|
|
83
|
-
render() {
|
|
84
|
-
const selectedClass = this.isSelected ? ' ix-tree-node__selected' : '';
|
|
85
|
-
const icon = this.node.icon ? this.node.icon : 'account_box';
|
|
36
|
+
</ix-icon-button>`;
|
|
37
|
+
}
|
|
38
|
+
onNodeClick(node) {
|
|
39
|
+
const event = new CustomEvent('on-tree-node-click', {
|
|
40
|
+
detail: {
|
|
41
|
+
message: {
|
|
42
|
+
node,
|
|
43
|
+
id: node.id,
|
|
44
|
+
label: node.label,
|
|
45
|
+
parentId: node.parentId,
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
});
|
|
49
|
+
this.dispatchEvent(event);
|
|
50
|
+
}
|
|
51
|
+
onNodeToggle(node) {
|
|
52
|
+
const event = new CustomEvent('on-tree-node-toggle', {
|
|
53
|
+
detail: {
|
|
54
|
+
message: {
|
|
55
|
+
node,
|
|
56
|
+
id: node.id,
|
|
57
|
+
label: node.label,
|
|
58
|
+
parentId: node.parentId,
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
});
|
|
62
|
+
this.dispatchEvent(event);
|
|
63
|
+
}
|
|
64
|
+
onNodeCheck(node) {
|
|
65
|
+
/* eslint-disable no-param-reassign */
|
|
66
|
+
if (node.checked) {
|
|
67
|
+
node.checked = false;
|
|
68
|
+
node.indeterminate = false;
|
|
69
|
+
}
|
|
70
|
+
else {
|
|
71
|
+
node.checked = true;
|
|
72
|
+
node.indeterminate = false;
|
|
73
|
+
}
|
|
74
|
+
/* eslint-enable no-param-reassign */
|
|
75
|
+
const event = new CustomEvent('on-tree-node-check', {
|
|
76
|
+
detail: {
|
|
77
|
+
message: {
|
|
78
|
+
node,
|
|
79
|
+
id: node.id,
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
});
|
|
83
|
+
this.dispatchEvent(event);
|
|
84
|
+
}
|
|
85
|
+
render() {
|
|
86
|
+
const selectedClass = this.isSelected ? ' ix-tree-node__selected' : '';
|
|
87
|
+
const icon = this.node.icon ? this.node.icon : 'account_box';
|
|
86
88
|
return html `<div
|
|
87
89
|
?active-tree-node=${this.isActiveTreeNode}
|
|
88
90
|
aria-expanded=${!!this.node.expanded}
|
|
@@ -94,75 +96,74 @@ export class IxTreeNode extends LitElement {
|
|
|
94
96
|
class="ix-tree-node__wrapper ix-tree-node${selectedClass}"
|
|
95
97
|
style="padding-left: ${this.level * TREE_NODE_ICON_SIZE_REM}rem"
|
|
96
98
|
>
|
|
97
|
-
<div
|
|
98
|
-
|
|
99
|
-
</div>
|
|
100
|
-
${this.checkboxEnabled
|
|
99
|
+
<div>${this.getIcon(this.node, this.isExpanded)}</div>
|
|
100
|
+
${this.checkboxEnabled
|
|
101
101
|
? html `<ix-checkbox
|
|
102
102
|
@click=${() => this.onNodeCheck(this.node)}
|
|
103
103
|
label=""
|
|
104
104
|
style="margin: 6px 12px 0px 12px"
|
|
105
105
|
.checked=${this.node.checked}
|
|
106
106
|
.indeterminate=${this.node.indeterminate}
|
|
107
|
-
></ix-checkbox>`
|
|
107
|
+
></ix-checkbox>`
|
|
108
108
|
: nothing}
|
|
109
109
|
<ix-icon-button
|
|
110
110
|
icon=${icon}
|
|
111
111
|
appearance=${this.appearance}
|
|
112
112
|
test-id=${`${this.node.id}-on-node-click-icon-button`}
|
|
113
|
+
style=${this.hasChildren() ? '' : 'padding-left:2px;'}
|
|
113
114
|
@click=${() => this.onNodeClick(this.node)}
|
|
114
115
|
></ix-icon-button>
|
|
115
116
|
<div
|
|
116
117
|
class="ix-tree-node__label"
|
|
117
|
-
@click=${() => {
|
|
118
|
-
this.checkboxEnabled
|
|
119
|
-
? this.onNodeToggle(this.node)
|
|
120
|
-
: this.onNodeClick(this.node);
|
|
118
|
+
@click=${() => {
|
|
119
|
+
this.checkboxEnabled
|
|
120
|
+
? this.onNodeToggle(this.node)
|
|
121
|
+
: this.onNodeClick(this.node);
|
|
121
122
|
}}
|
|
122
|
-
@keyup=${() => {
|
|
123
|
-
this.checkboxEnabled
|
|
124
|
-
? this.onNodeToggle(this.node)
|
|
125
|
-
: this.onNodeClick(this.node);
|
|
123
|
+
@keyup=${() => {
|
|
124
|
+
this.checkboxEnabled
|
|
125
|
+
? this.onNodeToggle(this.node)
|
|
126
|
+
: this.onNodeClick(this.node);
|
|
126
127
|
}}
|
|
127
128
|
>
|
|
128
129
|
${this.node.label}
|
|
129
130
|
</div>
|
|
130
131
|
</div>
|
|
131
132
|
<slot></slot>
|
|
132
|
-
</div>`;
|
|
133
|
-
}
|
|
134
|
-
updated() {
|
|
135
|
-
var _a;
|
|
136
|
-
if (!this._hasScrolledToActive) {
|
|
137
|
-
const el = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[active-tree-node]');
|
|
138
|
-
el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
139
|
-
this._hasScrolledToActive = true;
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
IxTreeNode.styles = [IxTreeStyles];
|
|
144
|
-
__decorate([
|
|
145
|
-
property({ type: Boolean })
|
|
146
|
-
], IxTreeNode.prototype, "isActiveTreeNode", void 0);
|
|
147
|
-
__decorate([
|
|
148
|
-
property({ type: Boolean })
|
|
149
|
-
], IxTreeNode.prototype, "isExpanded", void 0);
|
|
150
|
-
__decorate([
|
|
151
|
-
property({ type: Boolean })
|
|
152
|
-
], IxTreeNode.prototype, "isSelected", void 0);
|
|
153
|
-
__decorate([
|
|
154
|
-
property({ type: Number })
|
|
155
|
-
], IxTreeNode.prototype, "level", void 0);
|
|
156
|
-
__decorate([
|
|
157
|
-
property({ type: Object })
|
|
158
|
-
], IxTreeNode.prototype, "node", void 0);
|
|
159
|
-
__decorate([
|
|
160
|
-
property({ type: Boolean })
|
|
161
|
-
], IxTreeNode.prototype, "checkboxEnabled", void 0);
|
|
162
|
-
__decorate([
|
|
163
|
-
property({ type: String })
|
|
164
|
-
], IxTreeNode.prototype, "appearance", void 0);
|
|
165
|
-
__decorate([
|
|
166
|
-
state()
|
|
167
|
-
], IxTreeNode.prototype, "_hasScrolledToActive", void 0);
|
|
133
|
+
</div>`;
|
|
134
|
+
}
|
|
135
|
+
updated() {
|
|
136
|
+
var _a;
|
|
137
|
+
if (!this._hasScrolledToActive) {
|
|
138
|
+
const el = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[active-tree-node]');
|
|
139
|
+
el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
140
|
+
this._hasScrolledToActive = true;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
IxTreeNode.styles = [IxTreeStyles];
|
|
145
|
+
__decorate([
|
|
146
|
+
property({ type: Boolean })
|
|
147
|
+
], IxTreeNode.prototype, "isActiveTreeNode", void 0);
|
|
148
|
+
__decorate([
|
|
149
|
+
property({ type: Boolean })
|
|
150
|
+
], IxTreeNode.prototype, "isExpanded", void 0);
|
|
151
|
+
__decorate([
|
|
152
|
+
property({ type: Boolean })
|
|
153
|
+
], IxTreeNode.prototype, "isSelected", void 0);
|
|
154
|
+
__decorate([
|
|
155
|
+
property({ type: Number })
|
|
156
|
+
], IxTreeNode.prototype, "level", void 0);
|
|
157
|
+
__decorate([
|
|
158
|
+
property({ type: Object })
|
|
159
|
+
], IxTreeNode.prototype, "node", void 0);
|
|
160
|
+
__decorate([
|
|
161
|
+
property({ type: Boolean })
|
|
162
|
+
], IxTreeNode.prototype, "checkboxEnabled", void 0);
|
|
163
|
+
__decorate([
|
|
164
|
+
property({ type: String })
|
|
165
|
+
], IxTreeNode.prototype, "appearance", void 0);
|
|
166
|
+
__decorate([
|
|
167
|
+
state()
|
|
168
|
+
], IxTreeNode.prototype, "_hasScrolledToActive", void 0);
|
|
168
169
|
//# 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,kDAAkD,CAAC;AAC1D,OAAO,4CAA4C,CAAC;AACpD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,wIAAwI;AACxI,8FAA8F;AAC9F,MAAM,oBAAoB,GAAG,GAAG,CAAC;AACjC,MAAM,uBAAuB,GAAG,oBAAoB,GAAG,CAAC,CAAC;AAEzD,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QAG+B,qBAAgB,GAAY,KAAK,CAAC;QAElC,eAAU,GAAY,KAAK,CAAC;QAE5B,eAAU,GAAY,KAAK,CAAC;QAE7B,UAAK,GAAW,CAAC,CAAC;QAIjB,oBAAe,GAAY,KAAK,CAAC;QAElC,eAAU,GAAe,SAAS,CAAC;QAE9C,yBAAoB,GAAY,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"IxTreeNode.js","sourceRoot":"","sources":["../src/IxTreeNode.ts"],"names":[],"mappings":";AAAA,OAAO,kDAAkD,CAAC;AAC1D,OAAO,4CAA4C,CAAC;AACpD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,wIAAwI;AACxI,8FAA8F;AAC9F,MAAM,oBAAoB,GAAG,GAAG,CAAC;AACjC,MAAM,uBAAuB,GAAG,oBAAoB,GAAG,CAAC,CAAC;AAEzD,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QAG+B,qBAAgB,GAAY,KAAK,CAAC;QAElC,eAAU,GAAY,KAAK,CAAC;QAE5B,eAAU,GAAY,KAAK,CAAC;QAE7B,UAAK,GAAW,CAAC,CAAC;QAIjB,oBAAe,GAAY,KAAK,CAAC;QAElC,eAAU,GAAe,SAAS,CAAC;QAE9C,yBAAoB,GAAY,KAAK,CAAC;IAsIzD,CAAC;IApIS,WAAW;QACjB,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IAC3E,CAAC;IAEO,OAAO,CACb,IAAiB,EACjB,UAAmB;QAEnB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE;YACvB,OAAO,OAAO,CAAC;SAChB;QAED,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,aAAa,CAAC;QAC5D,OAAO,IAAI,CAAA;eACA,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;aACpC,IAAI;;;sBAGK,CAAC;IACrB,CAAC;IAEO,WAAW,CAAC,IAAiB;QACnC,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,oBAAoB,EAAE;YAClD,MAAM,EAAE;gBACN,OAAO,EAAE;oBACP,IAAI;oBACJ,EAAE,EAAE,IAAI,CAAC,EAAE;oBACX,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;aACF;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,YAAY,CAAC,IAAiB;QACpC,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,qBAAqB,EAAE;YACnD,MAAM,EAAE;gBACN,OAAO,EAAE;oBACP,IAAI;oBACJ,EAAE,EAAE,IAAI,CAAC,EAAE;oBACX,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;aACF;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,WAAW,CAAC,IAAiB;QACnC,sCAAsC;QACtC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;aAAM;YACL,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;QACD,qCAAqC;QACrC,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,oBAAoB,EAAE;YAClD,MAAM,EAAE;gBACN,OAAO,EAAE;oBACP,IAAI;oBACJ,EAAE,EAAE,IAAI,CAAC,EAAE;iBACZ;aACF;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAES,MAAM;QACd,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,CAAC;QACvE,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC;QAE7D,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,gBAAgB;sBACzB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ;sBACpB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,IAAI,CAAC,EAAE;;;;mDAIuB,aAAa;+BACjC,IAAI,CAAC,KAAK,GAAG,uBAAuB;;eAEpD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC;UAC7C,IAAI,CAAC,eAAe;YACpB,CAAC,CAAC,IAAI,CAAA;uBACO,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;;;yBAG/B,IAAI,CAAC,IAAI,CAAC,OAAO;+BACX,IAAI,CAAC,IAAI,CAAC,aAAa;4BAC1B;YAClB,CAAC,CAAC,OAAO;;iBAEF,IAAI;uBACE,IAAI,CAAC,UAAU;oBAClB,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,4BAA4B;kBAC7C,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;mBAC5C,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;;;;mBAIjC,GAAG,EAAE;YACZ,IAAI,CAAC,eAAe;gBAClB,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;gBAC9B,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;mBACQ,GAAG,EAAE;YACZ,IAAI,CAAC,eAAe;gBAClB,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;gBAC9B,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;;YAEC,IAAI,CAAC,IAAI,CAAC,KAAK;;;;WAIhB,CAAC;IACV,CAAC;IAES,OAAO;;QACf,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC9B,MAAM,EAAE,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;YAChE,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;YAC3D,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;SAClC;IACH,CAAC;;AArJe,iBAAM,GAAG,CAAC,YAAY,CAAC,CAAC;AAEX;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAAmC;AAElC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAA6B;AAE5B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAA6B;AAE7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAoB;AAElB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAkC;AAElC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAoC;AAEtD;IAAR,KAAK,EAAE;wDAA+C","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';\nimport { Appearance } from './IxTree.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.6;\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({ type: Boolean }) isActiveTreeNode: boolean = false;\n\n @property({ type: Boolean }) isExpanded: boolean = false;\n\n @property({ type: Boolean }) isSelected: boolean = false;\n\n @property({ type: Number }) level: number = 0;\n\n @property({ type: Object }) node!: IIxTreeNode;\n\n @property({ type: Boolean }) checkboxEnabled: boolean = false;\n\n @property({ type: String }) appearance: Appearance = 'default';\n\n @state() private _hasScrolledToActive: boolean = false;\n\n private hasChildren() {\n return this.node.children !== undefined && this.node.children.length > 0;\n }\n\n private getIcon(\n node: IIxTreeNode,\n isExpanded: boolean\n ): TemplateResult<1> | typeof nothing {\n if (!this.hasChildren()) {\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>${this.getIcon(this.node, this.isExpanded)}</div>\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 <ix-icon-button\n icon=${icon}\n appearance=${this.appearance}\n test-id=${`${this.node.id}-on-node-click-icon-button`}\n style=${this.hasChildren() ? '' : 'padding-left:2px;'}\n @click=${() => this.onNodeClick(this.node)}\n ></ix-icon-button>\n <div\n class=\"ix-tree-node__label\"\n @click=${() => {\n this.checkboxEnabled\n ? this.onNodeToggle(this.node)\n : this.onNodeClick(this.node);\n }}\n @keyup=${() => {\n this.checkboxEnabled\n ? this.onNodeToggle(this.node)\n : this.onNodeClick(this.node);\n }}\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/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { IxTree } from './IxTree.js';
|
|
2
|
-
export { IxTreeNode } from './IxTreeNode.js';
|
|
3
|
-
export { IIxTreeNode } from './IIxTreeNode.js';
|
|
1
|
+
export { IxTree } from './IxTree.js';
|
|
2
|
+
export { IxTreeNode } from './IxTreeNode.js';
|
|
3
|
+
export { IIxTreeNode } from './IIxTreeNode.js';
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { IxTree } from './IxTree.js';
|
|
2
|
-
export { IxTreeNode } from './IxTreeNode.js';
|
|
1
|
+
export { IxTree } from './IxTree.js';
|
|
2
|
+
export { IxTreeNode } from './IxTreeNode.js';
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/dist/ix-tree-node.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
package/dist/ix-tree-node.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { IxTreeNode } from './IxTreeNode.js';
|
|
2
|
-
customElements.define('ix-tree-node', IxTreeNode);
|
|
1
|
+
import { IxTreeNode } from './IxTreeNode.js';
|
|
2
|
+
customElements.define('ix-tree-node', IxTreeNode);
|
|
3
3
|
//# sourceMappingURL=ix-tree-node.js.map
|
package/dist/ix-tree-styles.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const IxTreeStyles: import("lit").CSSResult;
|
|
1
|
+
export declare const IxTreeStyles: import("lit").CSSResult;
|
package/dist/ix-tree-styles.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
1
|
+
import { css } from 'lit';
|
|
2
2
|
export const IxTreeStyles = css `
|
|
3
3
|
:root,
|
|
4
4
|
:host :root,
|
|
5
5
|
:host {
|
|
6
|
-
--tree-node-spacer: var(--ix-sys-spacer, 0.
|
|
6
|
+
--tree-node-spacer: var(--ix-sys-spacer, 0.6rem);
|
|
7
7
|
--tree-node-icon-size: calc(var(--tree-node-spacer) * 4);
|
|
8
8
|
}
|
|
9
9
|
@font-face {
|
|
@@ -37,20 +37,22 @@ export const IxTreeStyles = css `
|
|
|
37
37
|
cursor: pointer;
|
|
38
38
|
display: flex;
|
|
39
39
|
padding: 0.1rem;
|
|
40
|
+
border-left: 3px solid rgba(20, 86, 224, 0);
|
|
40
41
|
}
|
|
41
42
|
.ix-tree-node__icon-size {
|
|
42
43
|
width: var(--tree-node-icon-size);
|
|
43
44
|
}
|
|
44
45
|
.ix-tree-node__label {
|
|
45
46
|
color: #092241;
|
|
46
|
-
|
|
47
|
-
flex-grow: 1;
|
|
47
|
+
flex-grow: 0;
|
|
48
48
|
padding: 0.25rem;
|
|
49
49
|
white-space: nowrap;
|
|
50
|
+
text-overflow: ellipsis;
|
|
51
|
+
overflow: hidden;
|
|
50
52
|
}
|
|
51
53
|
.ix-tree-node__selected {
|
|
52
54
|
background-color: rgba(20, 86, 224, 0.1);
|
|
53
55
|
border-left: 3px solid #1456e0;
|
|
54
56
|
}
|
|
55
|
-
`;
|
|
57
|
+
`;
|
|
56
58
|
//# sourceMappingURL=ix-tree-styles.js.map
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD9B,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.6rem);\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.1rem;\n border-left: 3px solid rgba(20, 86, 224, 0);\n }\n .ix-tree-node__icon-size {\n width: var(--tree-node-icon-size);\n }\n .ix-tree-node__label {\n color: #092241;\n flex-grow: 0;\n padding: 0.25rem;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .ix-tree-node__selected {\n background-color: rgba(20, 86, 224, 0.1);\n border-left: 3px solid #1456e0;\n }\n`;\n"]}
|
package/dist/ix-tree.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
package/dist/ix-tree.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { IxTree } from './IxTree.js';
|
|
2
|
-
customElements.define('ix-tree', IxTree);
|
|
1
|
+
import { IxTree } from './IxTree.js';
|
|
2
|
+
customElements.define('ix-tree', IxTree);
|
|
3
3
|
//# sourceMappingURL=ix-tree.js.map
|
package/dist/tree-utils.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { IIxTreeNode } from './IIxTreeNode.js';
|
|
2
|
-
export declare function findChildNodeById(node: IIxTreeNode, id: string): IIxTreeNode | null;
|
|
3
|
-
export declare function updateNodeCheckedStatus(node: IIxTreeNode, rootNode: IIxTreeNode): void;
|
|
1
|
+
import { IIxTreeNode } from './IIxTreeNode.js';
|
|
2
|
+
export declare function findChildNodeById(node: IIxTreeNode, id: string): IIxTreeNode | null;
|
|
3
|
+
export declare function updateNodeCheckedStatus(node: IIxTreeNode, rootNode: IIxTreeNode): void;
|
package/dist/tree-utils.js
CHANGED
|
@@ -1,56 +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
|
-
}
|
|
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
56
|
//# sourceMappingURL=tree-utils.js.map
|
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.15",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -26,10 +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": "^1.1.
|
|
29
|
+
"@digital-realty/ix-checkbox": "^1.1.9",
|
|
30
30
|
"@digital-realty/ix-icon": "*",
|
|
31
31
|
"@digital-realty/ix-icon-button": "^1.0.19",
|
|
32
|
-
"@digital-realty/theme": "
|
|
32
|
+
"@digital-realty/theme": "^1.0.9",
|
|
33
33
|
"@lit-labs/react": "^2.1.0",
|
|
34
34
|
"@material/web": "^1.0.0",
|
|
35
35
|
"lit": "^2.0.2",
|
|
@@ -100,6 +100,5 @@
|
|
|
100
100
|
"package.json",
|
|
101
101
|
"README.md",
|
|
102
102
|
"LICENSE"
|
|
103
|
-
]
|
|
104
|
-
"gitHead": "fe2bd8ebfb445aace0ae9b8716ecd3e44da227dc"
|
|
103
|
+
]
|
|
105
104
|
}
|