@digital-realty/ix-tree 3.1.11 → 3.2.13
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 +1 -0
- package/dist/IIxTreeNode.js.map +1 -1
- package/dist/IxTree.d.ts +1 -0
- package/dist/IxTree.js +5 -1
- package/dist/IxTree.js.map +1 -1
- package/dist/IxTreeNode.d.ts +2 -0
- package/dist/IxTreeNode.js +19 -11
- package/dist/IxTreeNode.js.map +1 -1
- package/dist/ix-tree-styles.js +31 -10
- package/dist/ix-tree-styles.js.map +1 -1
- package/dist/ix-tree.min.js +10 -4
- package/dist/tree-utils.d.ts +1 -1
- package/dist/tree-utils.js +3 -2
- package/dist/tree-utils.js.map +1 -1
- package/package.json +2 -2
package/dist/IIxTreeNode.d.ts
CHANGED
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?: 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"]}
|
|
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 disabled?: boolean;\n}\n"]}
|
package/dist/IxTree.d.ts
CHANGED
package/dist/IxTree.js
CHANGED
|
@@ -15,6 +15,7 @@ export class IxTree extends LitElement {
|
|
|
15
15
|
this.hasIcons = false;
|
|
16
16
|
this.removeChevron = false;
|
|
17
17
|
this.allowMultiLine = false;
|
|
18
|
+
this.rollup = true;
|
|
18
19
|
this._activeItemId = '';
|
|
19
20
|
this._selectedNodeId = '';
|
|
20
21
|
}
|
|
@@ -50,7 +51,7 @@ export class IxTree extends LitElement {
|
|
|
50
51
|
}
|
|
51
52
|
onTreeNodeCheck(e) {
|
|
52
53
|
const { node } = e.detail.message;
|
|
53
|
-
updateNodeCheckedStatus(node, this._rootNode);
|
|
54
|
+
updateNodeCheckedStatus(node, this._rootNode, this.rollup);
|
|
54
55
|
this._rootNode = structuredClone(this._rootNode);
|
|
55
56
|
this.rootNode = this._rootNode;
|
|
56
57
|
this.dispatchEvent(new CustomEvent('on-tree-node-checked', {
|
|
@@ -139,6 +140,9 @@ __decorate([
|
|
|
139
140
|
__decorate([
|
|
140
141
|
property({ type: Boolean })
|
|
141
142
|
], IxTree.prototype, "allowMultiLine", void 0);
|
|
143
|
+
__decorate([
|
|
144
|
+
property({ type: Boolean })
|
|
145
|
+
], IxTree.prototype, "rollup", void 0);
|
|
142
146
|
__decorate([
|
|
143
147
|
state()
|
|
144
148
|
], 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,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;;QAU8B,cAAS,GAAW,MAAM,CAAC;QAI3B,mBAAc,GAAW,EAAE,CAAC;QAE3B,sBAAiB,GAAY,KAAK,CAAC;QAEpC,eAAU,GAAe,SAAS,CAAC;QAElC,aAAQ,GAAY,KAAK,CAAC;QAE1B,kBAAa,GAAY,KAAK,CAAC;QAE/B,mBAAc,GAAY,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"IxTree.js","sourceRoot":"","sources":["../src/IxTree.ts"],"names":[],"mappings":";AAAA,OAAO,oCAAoC,CAAC;AAC5C,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;;QAU8B,cAAS,GAAW,MAAM,CAAC;QAI3B,mBAAc,GAAW,EAAE,CAAC;QAE3B,sBAAiB,GAAY,KAAK,CAAC;QAEpC,eAAU,GAAe,SAAS,CAAC;QAElC,aAAQ,GAAY,KAAK,CAAC;QAE1B,kBAAa,GAAY,KAAK,CAAC;QAE/B,mBAAc,GAAY,KAAK,CAAC;QAEhC,WAAM,GAAY,IAAI,CAAC;QAEnC,kBAAa,GAAW,EAAE,CAAC;QAI3B,oBAAe,GAAW,EAAE,CAAC;IAmHhD,CAAC;IAhJC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,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;IA0BO,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,QAAQ,GAAG,WAAW,CAAC;QAC5B,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,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC3D,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACjD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;QAC/B,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;iBACd,KAAK;gBACN,IAAI;sBACE,IAAI,CAAC,UAAU;4BACT,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,EAAE;sBACpC,CAAC,CAAC,IAAI,CAAC,QAAQ;sBACf,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,EAAE;2BAC3B,IAAI,CAAC,iBAAiB;mBAC9B,IAAI,CAAC,QAAQ;yBACP,IAAI,CAAC,aAAa;0BACjB,IAAI,CAAC,cAAc;8BACf,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;;AAjJe,aAAM,GAAG,CAAC,YAAY,CAAC,CAAC;AASZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA6B;AAE3B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAoC;AAEpC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAoC;AAElC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAA2B;AAE1B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAgC;AAE/B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAiC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCAAwB;AAE3C;IAAR,KAAK,EAAE;6CAAoC;AAEnC;IAAR,KAAK,EAAE;yCAAiC;AAEhC;IAAR,KAAK,EAAE;+CAAsC","sourcesContent":["import '@digital-realty/ix-icon/ix-icon.js';\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 this._activeItemId = this.selectedNodeId; // store in state\n this._selectedNodeId = this.selectedNodeId; // store in state\n this._rootNode = this.rootNode;\n }\n\n @property({ type: String }) ariaLabel: string = 'tree';\n\n @property({ type: Object }) rootNode!: IIxTreeNode;\n\n @property({ type: String }) selectedNodeId: string = '';\n\n @property({ type: Boolean }) checkboxesEnabled: boolean = false;\n\n @property({ type: String }) appearance: Appearance = 'default';\n\n @property({ type: Boolean }) hasIcons: boolean = false;\n\n @property({ type: Boolean }) removeChevron: boolean = false;\n\n @property({ type: Boolean }) allowMultiLine: boolean = false;\n\n @property({ type: Boolean }) rollup: boolean = true;\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, this.rollup);\n this._rootNode = structuredClone(this._rootNode);\n this.rootNode = 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 .level=${level}\n .node=${node}\n .appearance=${this.appearance}\n ?isActiveTreeNode=${this._activeItemId === node.id}\n ?isExpanded=${!!node.expanded}\n ?isSelected=${this._selectedNodeId === node.id}\n ?checkboxEnabled=${this.checkboxesEnabled}\n ?hasIcon=${this.hasIcons}\n ?removeChevron=${this.removeChevron}\n ?allowMultiLine=${this.allowMultiLine}\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
|
@@ -16,9 +16,11 @@ export declare class IxTreeNode extends LitElement {
|
|
|
16
16
|
removeChevron: boolean;
|
|
17
17
|
allowMultiLine: boolean;
|
|
18
18
|
scrollToActive: boolean;
|
|
19
|
+
disabled: boolean;
|
|
19
20
|
private _hasScrolledToActive;
|
|
20
21
|
private hasChildren;
|
|
21
22
|
private getChevron;
|
|
23
|
+
private renderCheckbox;
|
|
22
24
|
private onNodeClick;
|
|
23
25
|
private onNodeToggle;
|
|
24
26
|
private onNodeCheck;
|
package/dist/IxTreeNode.js
CHANGED
|
@@ -18,6 +18,7 @@ export class IxTreeNode extends LitElement {
|
|
|
18
18
|
this.removeChevron = false;
|
|
19
19
|
this.allowMultiLine = false;
|
|
20
20
|
this.scrollToActive = false;
|
|
21
|
+
this.disabled = false;
|
|
21
22
|
this._hasScrolledToActive = false;
|
|
22
23
|
}
|
|
23
24
|
hasChildren() {
|
|
@@ -38,6 +39,19 @@ export class IxTreeNode extends LitElement {
|
|
|
38
39
|
</ix-icon-button>
|
|
39
40
|
</div>`;
|
|
40
41
|
}
|
|
42
|
+
renderCheckbox() {
|
|
43
|
+
if (this.node.disabled) {
|
|
44
|
+
return html ` <ix-icon class="inherited">arrow_drop_up</ix-icon>`;
|
|
45
|
+
}
|
|
46
|
+
return html `<ix-checkbox
|
|
47
|
+
data-testid="${IxTreeTestIds.CHECKBOX(this.node.id)}"
|
|
48
|
+
@click=${() => this.onNodeCheck(this.node)}
|
|
49
|
+
label=""
|
|
50
|
+
class="item-checkbox"
|
|
51
|
+
.checked=${this.node.checked}
|
|
52
|
+
.indeterminate=${this.node.indeterminate}
|
|
53
|
+
></ix-checkbox>`;
|
|
54
|
+
}
|
|
41
55
|
onNodeClick(node) {
|
|
42
56
|
const event = new CustomEvent('on-tree-node-click', {
|
|
43
57
|
detail: {
|
|
@@ -96,19 +110,10 @@ export class IxTreeNode extends LitElement {
|
|
|
96
110
|
>
|
|
97
111
|
<div
|
|
98
112
|
class="wrapper ${selectedClass}"
|
|
99
|
-
style="padding-left: calc(var(--
|
|
113
|
+
style="padding-left: calc(var(--ix-tree-icon-size) * ${this.level})"
|
|
100
114
|
>
|
|
101
115
|
${!this.removeChevron ? this.getChevron() : nothing}
|
|
102
|
-
${this.checkboxEnabled
|
|
103
|
-
? html `<ix-checkbox
|
|
104
|
-
data-testid="${IxTreeTestIds.CHECKBOX(this.node.id)}"
|
|
105
|
-
@click=${() => this.onNodeCheck(this.node)}
|
|
106
|
-
label=""
|
|
107
|
-
class="item-checkbox"
|
|
108
|
-
.checked=${this.node.checked}
|
|
109
|
-
.indeterminate=${this.node.indeterminate}
|
|
110
|
-
></ix-checkbox>`
|
|
111
|
-
: nothing}
|
|
116
|
+
${this.checkboxEnabled ? this.renderCheckbox() : nothing}
|
|
112
117
|
${this.hasIcon
|
|
113
118
|
? html `<ix-icon class="icon">${icon}</ix-icon>`
|
|
114
119
|
: nothing}
|
|
@@ -177,6 +182,9 @@ __decorate([
|
|
|
177
182
|
__decorate([
|
|
178
183
|
property({ type: Boolean })
|
|
179
184
|
], IxTreeNode.prototype, "scrollToActive", void 0);
|
|
185
|
+
__decorate([
|
|
186
|
+
property({ type: Boolean })
|
|
187
|
+
], IxTreeNode.prototype, "disabled", void 0);
|
|
180
188
|
__decorate([
|
|
181
189
|
state()
|
|
182
190
|
], IxTreeNode.prototype, "_hasScrolledToActive", void 0);
|
package/dist/IxTreeNode.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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 { 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';\nimport { IxTreeTestIds } from './constants/IxTreeTestIds.js';\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 @property({ type: Boolean }) hasIcon: boolean = false;\n\n @property({ type: Boolean }) removeChevron: boolean = false;\n\n @property({ type: Boolean }) allowMultiLine: boolean = false;\n\n @property({ type: Boolean }) scrollToActive: boolean = false;\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 getChevron(): TemplateResult<1> | typeof nothing {\n const icon = this.isExpanded ? 'arrow_drop_down' : 'arrow_right';\n return html`<div\n style=${`${this.hasChildren() ? '' : 'visibility:hidden'}`}\n >\n <ix-icon-button\n data-testid=\"${IxTreeTestIds.CHEVRON_TOGGLE(this.node.id)}\"\n @click=${() => this.onNodeToggle(this.node)}\n icon=${icon}\n class=\"chevron\"\n test-id=\"tree-node-expand-toggle\"\n >\n </ix-icon-button>\n </div>`;\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 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 ? '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=\"wrapper ${selectedClass}\"\n style=\"padding-left: calc(var(--_tree-icon-size) * ${this.level})\"\n >\n ${!this.removeChevron ? this.getChevron() : nothing}\n ${this.checkboxEnabled\n ? html`<ix-checkbox\n data-testid=\"${IxTreeTestIds.CHECKBOX(this.node.id)}\"\n @click=${() => this.onNodeCheck(this.node)}\n label=\"\"\n class=\"item-checkbox\"\n .checked=${this.node.checked}\n .indeterminate=${this.node.indeterminate}\n ></ix-checkbox>`\n : nothing}\n ${this.hasIcon\n ? html`<ix-icon class=\"icon\">${icon}</ix-icon>`\n : nothing}\n <div\n data-testid=\"${IxTreeTestIds.LABEL(this.node.id)}\"\n class=\"label ${this.allowMultiLine\n ? 'label-multi-line'\n : 'label-single-line'}\"\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.scrollToActive && !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"]}
|
|
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 { 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';\nimport { IxTreeTestIds } from './constants/IxTreeTestIds.js';\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 @property({ type: Boolean }) hasIcon: boolean = false;\n\n @property({ type: Boolean }) removeChevron: boolean = false;\n\n @property({ type: Boolean }) allowMultiLine: boolean = false;\n\n @property({ type: Boolean }) scrollToActive: boolean = false;\n\n @property({ type: Boolean }) disabled: boolean = false;\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 getChevron(): TemplateResult<1> | typeof nothing {\n const icon = this.isExpanded ? 'arrow_drop_down' : 'arrow_right';\n return html`<div\n style=${`${this.hasChildren() ? '' : 'visibility:hidden'}`}\n >\n <ix-icon-button\n data-testid=\"${IxTreeTestIds.CHEVRON_TOGGLE(this.node.id)}\"\n @click=${() => this.onNodeToggle(this.node)}\n icon=${icon}\n class=\"chevron\"\n test-id=\"tree-node-expand-toggle\"\n >\n </ix-icon-button>\n </div>`;\n }\n\n private renderCheckbox() {\n if (this.node.disabled) {\n return html` <ix-icon class=\"inherited\">arrow_drop_up</ix-icon>`;\n }\n\n return html`<ix-checkbox\n data-testid=\"${IxTreeTestIds.CHECKBOX(this.node.id)}\"\n @click=${() => this.onNodeCheck(this.node)}\n label=\"\"\n class=\"item-checkbox\"\n .checked=${this.node.checked}\n .indeterminate=${this.node.indeterminate}\n ></ix-checkbox>`;\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 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 ? '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=\"wrapper ${selectedClass}\"\n style=\"padding-left: calc(var(--ix-tree-icon-size) * ${this.level})\"\n >\n ${!this.removeChevron ? this.getChevron() : nothing}\n ${this.checkboxEnabled ? this.renderCheckbox() : nothing}\n ${this.hasIcon\n ? html`<ix-icon class=\"icon\">${icon}</ix-icon>`\n : nothing}\n <div\n data-testid=\"${IxTreeTestIds.LABEL(this.node.id)}\"\n class=\"label ${this.allowMultiLine\n ? 'label-multi-line'\n : 'label-single-line'}\"\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.scrollToActive && !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
|
@@ -1,14 +1,35 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const IxTreeStyles = css `
|
|
3
|
-
:root,
|
|
4
|
-
:host :root,
|
|
5
3
|
:host {
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
--ix-tree-icon-spacing: 0.7rem;
|
|
5
|
+
--ix-tree-icon-size: 1.2rem;
|
|
6
|
+
}
|
|
7
|
+
md-checkbox {
|
|
8
|
+
--md-checkbox-outline-color: var(
|
|
9
|
+
--ix-tree-node-outline-colour,
|
|
10
|
+
rgb(91, 107, 124)
|
|
11
|
+
);
|
|
12
|
+
}
|
|
13
|
+
md-checkbox[indeterminate] {
|
|
14
|
+
--md-checkbox-selected-container-color: var(
|
|
15
|
+
--ix-tree-indeterminate-node-background-color,
|
|
16
|
+
#53657a
|
|
11
17
|
);
|
|
18
|
+
--md-checkbox-selected-hover-container-color: var(
|
|
19
|
+
--ix-tree-indeterminate-node-background-color,
|
|
20
|
+
#53657a
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
.inherited {
|
|
24
|
+
display: flex;
|
|
25
|
+
cursor: default;
|
|
26
|
+
background: var(--ix-tree-inherited-node-background-color, #53657a);
|
|
27
|
+
margin-right: var(--ix-tree-icon-spacing, 0.7rem);
|
|
28
|
+
height: var(--ix-tree-inherited-node-height, 18px);
|
|
29
|
+
width: var(--ix-tree-inherited-node-width, 18px);
|
|
30
|
+
border-radius: var(--ix-tree-inherited-node-border-radius, 2px);
|
|
31
|
+
color: var(--ix-tree-inherited-node-icon-color, #ffffff);
|
|
32
|
+
--ix-icon-font-size: var(--ix-tree-inherited-node-icon-font-size, 18px);
|
|
12
33
|
}
|
|
13
34
|
.wrapper {
|
|
14
35
|
align-items: center;
|
|
@@ -19,8 +40,8 @@ export const IxTreeStyles = css `
|
|
|
19
40
|
.icon {
|
|
20
41
|
display: flex;
|
|
21
42
|
color: var(--md-icon-button-icon-color);
|
|
22
|
-
margin-right: var(--
|
|
23
|
-
font-size: var(--
|
|
43
|
+
margin-right: var(--ix-tree-icon-spacing, 0.7rem);
|
|
44
|
+
font-size: var(--ix-tree-icon-size, 1.2rem);
|
|
24
45
|
}
|
|
25
46
|
.label {
|
|
26
47
|
color: var(--ix-tree-label-text-color, var(--clr-on-surface, #092241));
|
|
@@ -38,7 +59,7 @@ export const IxTreeStyles = css `
|
|
|
38
59
|
}
|
|
39
60
|
.item-checkbox {
|
|
40
61
|
display: flex;
|
|
41
|
-
margin-right: var(--ix-tree-
|
|
62
|
+
margin-right: var(--ix-tree-icon-spacing, 0.7rem);
|
|
42
63
|
}
|
|
43
64
|
.selected {
|
|
44
65
|
background-color: var(
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsE9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxTreeStyles = css`\n :host {\n --ix-tree-icon-spacing: 0.7rem;\n --ix-tree-icon-size: 1.2rem;\n }\n md-checkbox {\n --md-checkbox-outline-color: var(\n --ix-tree-node-outline-colour,\n rgb(91, 107, 124)\n );\n }\n md-checkbox[indeterminate] {\n --md-checkbox-selected-container-color: var(\n --ix-tree-indeterminate-node-background-color,\n #53657a\n );\n --md-checkbox-selected-hover-container-color: var(\n --ix-tree-indeterminate-node-background-color,\n #53657a\n );\n }\n .inherited {\n display: flex;\n cursor: default;\n background: var(--ix-tree-inherited-node-background-color, #53657a);\n margin-right: var(--ix-tree-icon-spacing, 0.7rem);\n height: var(--ix-tree-inherited-node-height, 18px);\n width: var(--ix-tree-inherited-node-width, 18px);\n border-radius: var(--ix-tree-inherited-node-border-radius, 2px);\n color: var(--ix-tree-inherited-node-icon-color, #ffffff);\n --ix-icon-font-size: var(--ix-tree-inherited-node-icon-font-size, 18px);\n }\n .wrapper {\n align-items: center;\n cursor: pointer;\n display: flex;\n border-left: var(--ix-tree-indent-width, 3px) solid transparent;\n }\n .icon {\n display: flex;\n color: var(--md-icon-button-icon-color);\n margin-right: var(--ix-tree-icon-spacing, 0.7rem);\n font-size: var(--ix-tree-icon-size, 1.2rem);\n }\n .label {\n color: var(--ix-tree-label-text-color, var(--clr-on-surface, #092241));\n flex-grow: 1;\n padding-top: 8px;\n padding-bottom: 8px;\n }\n .label-single-line {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .label-multi-line {\n overflow-wrap: break-word;\n }\n .item-checkbox {\n display: flex;\n margin-right: var(--ix-tree-icon-spacing, 0.7rem);\n }\n .selected {\n background-color: var(\n --ix-tree-active-background-color,\n var(--clr-primary-subtle, #1456e01a)\n );\n border-left: 3px solid\n var(--ix-tree-active-border-color, var(--clr-primary, #1456e0));\n }\n`;\n"]}
|
package/dist/ix-tree.min.js
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import"@digital-realty/ix-icon/ix-icon.js";import{css,LitElement,html,nothing}from"lit";import{property,state}from"lit/decorators.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-checkbox/ix-checkbox.js";function findChildNodeById(e,t){if(e.id===t)return e;if(e.children)for(var o of e.children){o=findChildNodeById(o,t);if(o)return o}return null}function updateNodeCheckedStatus(e,o){!function t(
|
|
2
|
-
--ix-tree-
|
|
3
|
-
|
|
4
|
-
)}
|
|
1
|
+
import{__decorate}from"tslib";import"@digital-realty/ix-icon/ix-icon.js";import{css,LitElement,html,nothing}from"lit";import{property,state}from"lit/decorators.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-checkbox/ix-checkbox.js";function findChildNodeById(e,t){if(e.id===t)return e;if(e.children)for(var o of e.children){o=findChildNodeById(o,t);if(o)return o}return null}function updateNodeCheckedStatus(e,o,i=!0){!function t(o,i=!1){o.checked=i,o.indeterminate=!1,o.children&&o.children.forEach(e=>{e.disabled=o.checked,t(e,i)})}(e,e.checked),function e(t){t.parentId&&(t=findChildNodeById(o,t.parentId))&&t.children&&(t.children.every(e=>e.checked)&&i?(t.checked=!0,t.indeterminate=!1):t.children.some(e=>e.checked)||t.children.some(e=>e.indeterminate)?(t.checked=!1,t.indeterminate=!0):(t.checked=!1,t.indeterminate=!1),e(t))}(e)}let IxTreeStyles=css`:host{--ix-tree-icon-spacing:0.7rem;--ix-tree-icon-size:1.2rem}md-checkbox{--md-checkbox-outline-color:var(
|
|
2
|
+
--ix-tree-node-outline-colour,
|
|
3
|
+
rgb(91, 107, 124)
|
|
4
|
+
)}md-checkbox[indeterminate]{--md-checkbox-selected-container-color:var(
|
|
5
|
+
--ix-tree-indeterminate-node-background-color,
|
|
6
|
+
#53657a
|
|
7
|
+
);--md-checkbox-selected-hover-container-color:var(
|
|
8
|
+
--ix-tree-indeterminate-node-background-color,
|
|
9
|
+
#53657a
|
|
10
|
+
)}.inherited{display:flex;cursor:default;background:var(--ix-tree-inherited-node-background-color,#53657a);margin-right:var(--ix-tree-icon-spacing,.7rem);height:var(--ix-tree-inherited-node-height,18px);width:var(--ix-tree-inherited-node-width,18px);border-radius:var(--ix-tree-inherited-node-border-radius,2px);color:var(--ix-tree-inherited-node-icon-color,#fff);--ix-icon-font-size:var(--ix-tree-inherited-node-icon-font-size, 18px)}.wrapper{align-items:center;cursor:pointer;display:flex;border-left:var(--ix-tree-indent-width,3px) solid transparent}.icon{display:flex;color:var(--md-icon-button-icon-color);margin-right:var(--ix-tree-icon-spacing,.7rem);font-size:var(--ix-tree-icon-size,1.2rem)}.label{color:var(--ix-tree-label-text-color,var(--clr-on-surface,#092241));flex-grow:1;padding-top:8px;padding-bottom:8px}.label-single-line{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.label-multi-line{overflow-wrap:break-word}.item-checkbox{display:flex;margin-right:var(--ix-tree-icon-spacing,.7rem)}.selected{background-color:var(--ix-tree-active-background-color,var(--clr-primary-subtle,#1456e01a));border-left:3px solid var(--ix-tree-active-border-color,var(--clr-primary,#1456e0))}`;class IxTreeTestIds{}IxTreeTestIds.CHEVRON_TOGGLE=e=>"chevron-"+e,IxTreeTestIds.CHECKBOX=e=>"checkbox-"+e,IxTreeTestIds.LABEL=e=>"label-"+e;class IxTreeNode extends LitElement{constructor(){super(...arguments),this.isActiveTreeNode=!1,this.isExpanded=!1,this.isSelected=!1,this.level=0,this.checkboxEnabled=!1,this.appearance="default",this.hasIcon=!1,this.removeChevron=!1,this.allowMultiLine=!1,this.scrollToActive=!1,this.disabled=!1,this._hasScrolledToActive=!1}hasChildren(){return void 0!==this.node.children&&0<this.node.children.length}getChevron(){var e=this.isExpanded?"arrow_drop_down":"arrow_right";return html`<div style="${this.hasChildren()?"":"visibility:hidden"}"><ix-icon-button data-testid="${IxTreeTestIds.CHEVRON_TOGGLE(this.node.id)}" @click="${()=>this.onNodeToggle(this.node)}" icon="${e}" class="chevron" test-id="tree-node-expand-toggle"></ix-icon-button></div>`}renderCheckbox(){return this.node.disabled?html`<ix-icon class="inherited">arrow_drop_up</ix-icon>`:html`<ix-checkbox data-testid="${IxTreeTestIds.CHECKBOX(this.node.id)}" @click="${()=>this.onNodeCheck(this.node)}" label="" class="item-checkbox" .checked="${this.node.checked}" .indeterminate="${this.node.indeterminate}"></ix-checkbox>`}onNodeClick(e){e=new CustomEvent("on-tree-node-click",{detail:{message:{node:e,id:e.id,label:e.label,parentId:e.parentId}}});this.dispatchEvent(e)}onNodeToggle(e){e=new CustomEvent("on-tree-node-toggle",{detail:{message:{node:e,id:e.id,label:e.label,parentId:e.parentId}}});this.dispatchEvent(e)}onNodeCheck(e){e.checked?e.checked=!1:e.checked=!0,e.indeterminate=!1;e=new CustomEvent("on-tree-node-check",{detail:{message:{node:e,id:e.id}}});this.dispatchEvent(e)}render(){var e=this.isSelected?"selected":"",t=this.node.icon||"account_box";return html`<div ?active-tree-node="${this.isActiveTreeNode}" aria-expanded="${!!this.node.expanded}" aria-selected="${this.isSelected}" data-id="${this.node.id}" role="treeitem"><div class="wrapper ${e}" style="padding-left:calc(var(--ix-tree-icon-size) * ${this.level})">${this.removeChevron?nothing:this.getChevron()} ${this.checkboxEnabled?this.renderCheckbox():nothing} ${this.hasIcon?html`<ix-icon class="icon">${t}</ix-icon>`:nothing}<div data-testid="${IxTreeTestIds.LABEL(this.node.id)}" class="label ${this.allowMultiLine?"label-multi-line":"label-single-line"}" @click="${()=>{this.checkboxEnabled?this.onNodeToggle(this.node):this.onNodeClick(this.node)}}" @keyup="${()=>{this.checkboxEnabled?this.onNodeToggle(this.node):this.onNodeClick(this.node)}}">${this.node.label}</div></div><slot></slot></div>`}updated(){var e;this.scrollToActive&&!this._hasScrolledToActive&&(null!=(e=null==(e=this.shadowRoot)?void 0:e.querySelector("[active-tree-node]"))&&e.scrollIntoView({behavior:"smooth",block:"start"}),this._hasScrolledToActive=!0)}}IxTreeNode.styles=[IxTreeStyles],__decorate([property({type:Boolean})],IxTreeNode.prototype,"isActiveTreeNode",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"isExpanded",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"isSelected",void 0),__decorate([property({type:Number})],IxTreeNode.prototype,"level",void 0),__decorate([property({type:Object})],IxTreeNode.prototype,"node",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"checkboxEnabled",void 0),__decorate([property({type:String})],IxTreeNode.prototype,"appearance",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"hasIcon",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"removeChevron",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"allowMultiLine",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"scrollToActive",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"disabled",void 0),__decorate([state()],IxTreeNode.prototype,"_hasScrolledToActive",void 0),customElements.define("ix-tree-node",IxTreeNode);class IxTree extends LitElement{constructor(){super(...arguments),this.ariaLabel="tree",this.selectedNodeId="",this.checkboxesEnabled=!1,this.appearance="default",this.hasIcons=!1,this.removeChevron=!1,this.allowMultiLine=!1,this.rollup=!0,this._activeItemId="",this._selectedNodeId=""}connectedCallback(){super.connectedCallback(),this._activeItemId=this.selectedNodeId,this._selectedNodeId=this.selectedNodeId,this._rootNode=this.rootNode}onTreeNodeClick(e){this.dispatchEvent(new CustomEvent("on-tree-node-selected",{detail:{message:e.detail.message}})),this._selectedNodeId=e.detail.message.id}dispatchTreeNodeExpandToggle(e){this.dispatchEvent(new CustomEvent("on-tree-node-expand-toggle",{detail:{message:e.detail.message}}))}onTreeNodeToggle(e){var t={...this._rootNode},o=e.detail.message.node;o.expanded=!o.expanded,this.rootNode=t,this._activeItemId=o.id,this.dispatchTreeNodeExpandToggle(e),this.requestUpdate()}onTreeNodeCheck(e){var t=e.detail.message.node;updateNodeCheckedStatus(t,this._rootNode,this.rollup),this._rootNode=structuredClone(this._rootNode),this.rootNode=this._rootNode,this.dispatchEvent(new CustomEvent("on-tree-node-checked",{detail:{message:e.detail.message}}))}renderNodes(e=[],t=0){var o,i=[];for(o of e){var r=html`<ix-tree-node .level="${t}" .node="${o}" .appearance="${this.appearance}" ?isActiveTreeNode="${this._activeItemId===o.id}" ?isExpanded="${!!o.expanded}" ?isSelected="${this._selectedNodeId===o.id}" ?checkboxEnabled="${this.checkboxesEnabled}" ?hasIcon="${this.hasIcons}" ?removeChevron="${this.removeChevron}" ?allowMultiLine="${this.allowMultiLine}" @on-tree-node-click="${this.onTreeNodeClick}" @on-tree-node-toggle="${this.onTreeNodeToggle}" @on-tree-node-check="${this.onTreeNodeCheck}">${o.expanded?this.renderNodes(o.children,t+1):nothing}</ix-tree-node>`;i.push(r)}return i}expandActiveTreeNode(){var t=findChildNodeById(this._rootNode,this._activeItemId)||this._rootNode;let o=0;if(t.parentId){let e=findChildNodeById(this._rootNode,t.parentId);for(;e&&o<1e3&&(e.expanded=!0,e.parentId);)e=findChildNodeById(this._rootNode,e.parentId),o+=1}}render(){return this.expandActiveTreeNode(),html`<div aria-label="${this.ariaLabel}" class="ix-tree-container" role="tree">${this.renderNodes(this._rootNode.children,0)}</div>`}}IxTree.styles=[IxTreeStyles],__decorate([property({type:String})],IxTree.prototype,"ariaLabel",void 0),__decorate([property({type:Object})],IxTree.prototype,"rootNode",void 0),__decorate([property({type:String})],IxTree.prototype,"selectedNodeId",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"checkboxesEnabled",void 0),__decorate([property({type:String})],IxTree.prototype,"appearance",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"hasIcons",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"removeChevron",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"allowMultiLine",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"rollup",void 0),__decorate([state()],IxTree.prototype,"_activeItemId",void 0),__decorate([state()],IxTree.prototype,"_rootNode",void 0),__decorate([state()],IxTree.prototype,"_selectedNodeId",void 0),customElements.define("ix-tree",IxTree);
|
package/dist/tree-utils.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { IIxTreeNode } from './IIxTreeNode.js';
|
|
2
2
|
export declare function findChildNodeById(node: IIxTreeNode, id: string): IIxTreeNode | null;
|
|
3
|
-
export declare function updateNodeCheckedStatus(node: IIxTreeNode, rootNode: IIxTreeNode): void;
|
|
3
|
+
export declare function updateNodeCheckedStatus(node: IIxTreeNode, rootNode: IIxTreeNode, rollup?: boolean): void;
|
package/dist/tree-utils.js
CHANGED
|
@@ -13,13 +13,14 @@ export function findChildNodeById(node, id) {
|
|
|
13
13
|
}
|
|
14
14
|
return null;
|
|
15
15
|
}
|
|
16
|
-
export function updateNodeCheckedStatus(node, rootNode) {
|
|
16
|
+
export function updateNodeCheckedStatus(node, rootNode, rollup = true) {
|
|
17
17
|
/* eslint-disable no-param-reassign */
|
|
18
18
|
function updateChildren(n, checked = false) {
|
|
19
19
|
n.checked = checked;
|
|
20
20
|
n.indeterminate = false;
|
|
21
21
|
if (n.children) {
|
|
22
22
|
n.children.forEach(child => {
|
|
23
|
+
child.disabled = n.checked;
|
|
23
24
|
updateChildren(child, checked);
|
|
24
25
|
});
|
|
25
26
|
}
|
|
@@ -28,7 +29,7 @@ export function updateNodeCheckedStatus(node, rootNode) {
|
|
|
28
29
|
if (n.parentId) {
|
|
29
30
|
const currentParent = findChildNodeById(rootNode, n.parentId);
|
|
30
31
|
if (currentParent && currentParent.children) {
|
|
31
|
-
if (currentParent.children.every(child => child.checked)) {
|
|
32
|
+
if (currentParent.children.every(child => child.checked) && rollup) {
|
|
32
33
|
currentParent.checked = true;
|
|
33
34
|
currentParent.indeterminate = false;
|
|
34
35
|
}
|
package/dist/tree-utils.js.map
CHANGED
|
@@ -1 +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;
|
|
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,EACrB,SAAkB,IAAI;IAEtB,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,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC;gBAC3B,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,IAAI,MAAM,EAAE;oBAClE,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 rollup: boolean = true\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 child.disabled = n.checked;\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) && rollup) {\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": "3.
|
|
6
|
+
"version": "3.2.13",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -103,5 +103,5 @@
|
|
|
103
103
|
"README.md",
|
|
104
104
|
"LICENSE"
|
|
105
105
|
],
|
|
106
|
-
"gitHead": "
|
|
106
|
+
"gitHead": "3ad803d25234bdb6d80094f1fc2d7783d8d54bbe"
|
|
107
107
|
}
|