@digital-realty/ix-generic-tree 2.1.2 → 2.1.4
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/IxGenericTree.d.ts +3 -1
- package/dist/IxGenericTree.js +33 -22
- package/dist/IxGenericTree.js.map +1 -1
- package/dist/IxGenericTreeNode.d.ts +5 -0
- package/dist/IxGenericTreeNode.js +40 -5
- package/dist/IxGenericTreeNode.js.map +1 -1
- package/dist/ix-generic-tree-styles.js +13 -1
- package/dist/ix-generic-tree-styles.js.map +1 -1
- package/package.json +5 -4
package/dist/IxGenericTree.d.ts
CHANGED
|
@@ -11,7 +11,9 @@ export declare class IxGenericTree extends LitElement {
|
|
|
11
11
|
searchEnabled: boolean;
|
|
12
12
|
searchPlaceholder: string;
|
|
13
13
|
searchText: string;
|
|
14
|
-
selectedId
|
|
14
|
+
selectedId?: string;
|
|
15
|
+
searchResultCount: number;
|
|
16
|
+
searchResultIndex: number;
|
|
15
17
|
private onTreeNodeExpandToggle;
|
|
16
18
|
private onTreeNodeCheckToggle;
|
|
17
19
|
private renderNodes;
|
package/dist/IxGenericTree.js
CHANGED
|
@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import '@digital-realty/ix-textbox/ix-textbox.js';
|
|
3
3
|
import { html, LitElement, nothing } from 'lit';
|
|
4
4
|
import { property } from 'lit/decorators.js';
|
|
5
|
+
import { repeat } from 'lit/directives/repeat.js';
|
|
5
6
|
import './ix-generic-tree-node.js';
|
|
6
7
|
import { IxGenericTreeNodeStyles } from './ix-generic-tree-styles.js';
|
|
7
8
|
import { updateNodeCheckedStatus } from './ix-generic-tree-utils.js';
|
|
@@ -15,7 +16,8 @@ export class IxGenericTree extends LitElement {
|
|
|
15
16
|
this.searchEnabled = false;
|
|
16
17
|
this.searchPlaceholder = '';
|
|
17
18
|
this.searchText = '';
|
|
18
|
-
this.
|
|
19
|
+
this.searchResultCount = 0;
|
|
20
|
+
this.searchResultIndex = 0;
|
|
19
21
|
}
|
|
20
22
|
static { this.styles = [IxGenericTreeNodeStyles]; }
|
|
21
23
|
onTreeNodeExpandToggle(e) {
|
|
@@ -45,27 +47,27 @@ export class IxGenericTree extends LitElement {
|
|
|
45
47
|
}));
|
|
46
48
|
}
|
|
47
49
|
renderNodes(nodes = [], level = 0) {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
50
|
+
return repeat(nodes, node => node.id, node => html `<ix-generic-tree-node
|
|
51
|
+
id=${node.id}
|
|
52
|
+
?expanded=${!!node.expanded}
|
|
53
|
+
?loading=${!!node.loading}
|
|
54
|
+
?disabled=${this.disableCheckboxes || !!node.disabled}
|
|
55
|
+
.level=${level}
|
|
56
|
+
.node=${node}
|
|
57
|
+
?showCheckbox=${this.showCheckboxes}
|
|
58
|
+
?filledIcons=${this.filledIcons}
|
|
59
|
+
?searchEnabled=${this.searchEnabled}
|
|
60
|
+
?selected=${this.selectedId === node.id}
|
|
61
|
+
?searched=${node.selected}
|
|
62
|
+
.searchText=${this.searchText}
|
|
63
|
+
@check-toggle=${this.onTreeNodeCheckToggle}
|
|
64
|
+
@expand-toggle=${this.onTreeNodeExpandToggle}
|
|
65
|
+
data-testid="${IxGenericTreeTestIds.NODE_ID(node.id)}"
|
|
66
|
+
>
|
|
67
|
+
${node.expanded
|
|
68
|
+
? this.renderNodes(node.children, level + 1)
|
|
69
|
+
: nothing}
|
|
70
|
+
</ix-generic-tree-node>`);
|
|
69
71
|
}
|
|
70
72
|
renderTextSearch() {
|
|
71
73
|
return this.searchEnabled
|
|
@@ -73,6 +75,9 @@ export class IxGenericTree extends LitElement {
|
|
|
73
75
|
filled
|
|
74
76
|
leading-icon="search"
|
|
75
77
|
has-leading-icon
|
|
78
|
+
searchEnabled
|
|
79
|
+
.searchResultCount=${this.searchResultCount}
|
|
80
|
+
.searchResultIndex=${this.searchResultIndex}
|
|
76
81
|
placeholder=${this.searchPlaceholder}
|
|
77
82
|
.value=${this.searchText}
|
|
78
83
|
@input=${(e) => {
|
|
@@ -115,4 +120,10 @@ __decorate([
|
|
|
115
120
|
__decorate([
|
|
116
121
|
property({ type: String })
|
|
117
122
|
], IxGenericTree.prototype, "selectedId", void 0);
|
|
123
|
+
__decorate([
|
|
124
|
+
property({ type: Number })
|
|
125
|
+
], IxGenericTree.prototype, "searchResultCount", void 0);
|
|
126
|
+
__decorate([
|
|
127
|
+
property({ type: Number })
|
|
128
|
+
], IxGenericTree.prototype, "searchResultIndex", void 0);
|
|
118
129
|
//# sourceMappingURL=IxGenericTree.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxGenericTree.js","sourceRoot":"","sources":["../src/IxGenericTree.ts"],"names":[],"mappings":";AAAA,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAEtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,OAAO,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,mBAAc,GAAY,KAAK,CAAC;QAEhC,sBAAiB,GAAY,KAAK,CAAC;QAEnC,gBAAW,GAAY,KAAK,CAAC;QAE7B,kBAAa,GAAY,KAAK,CAAC;QAEhC,sBAAiB,GAAW,EAAE,CAAC;QAE/B,eAAU,GAAW,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"IxGenericTree.js","sourceRoot":"","sources":["../src/IxGenericTree.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-textbox/ix-textbox.js';\nimport { html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport './ix-generic-tree-node.js';\nimport { IxGenericTreeNodeStyles } from './ix-generic-tree-styles.js';\nimport type { IGenericTreeNode } from './ix-generic-tree-types.js';\nimport { updateNodeCheckedStatus } from './ix-generic-tree-utils.js';\nimport { IxGenericTreeTestIds } from './IxGenericTreeTestIds.js';\n\nexport class IxGenericTree extends LitElement {\n static styles = [IxGenericTreeNodeStyles];\n\n @property({ type: Object }) rootNode!: IGenericTreeNode;\n\n @property({ type: Boolean }) showCheckboxes: boolean = false;\n\n @property({ type: Boolean }) disableCheckboxes: boolean = false;\n\n @property({ type: Boolean }) filledIcons: boolean = false;\n\n @property({ type: Boolean }) searchEnabled: boolean = false;\n\n @property({ type: String }) searchPlaceholder: string = '';\n\n @property({ type: String }) searchText: string = '';\n\n @property({ type: String }) selectedId?: string;\n\n @property({ type: Number }) searchResultCount: number = 0;\n\n @property({ type: Number }) searchResultIndex: number = 0;\n\n private onTreeNodeExpandToggle(e: CustomEvent) {\n const { node } = e.detail.message;\n node.expanded = !node.expanded;\n this.dispatchEvent(\n new CustomEvent('expand-toggle', {\n detail: {\n message: {\n ...e.detail.message,\n update: this.requestUpdate.bind(this),\n },\n },\n }),\n );\n this.requestUpdate();\n }\n\n private onTreeNodeCheckToggle(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('check-toggle', {\n detail: {\n message: {\n ...e.detail.message,\n rootNode: this.rootNode,\n },\n },\n }),\n );\n }\n\n private renderNodes(\n nodes: Array<IGenericTreeNode> = [],\n level: number = 0,\n ): Array<TemplateResult<1>> {\n return repeat(\n nodes,\n node => node.id,\n node =>\n html`<ix-generic-tree-node\n id=${node.id}\n ?expanded=${!!node.expanded}\n ?loading=${!!node.loading}\n ?disabled=${this.disableCheckboxes || !!node.disabled}\n .level=${level}\n .node=${node}\n ?showCheckbox=${this.showCheckboxes}\n ?filledIcons=${this.filledIcons}\n ?searchEnabled=${this.searchEnabled}\n ?selected=${this.selectedId === node.id}\n ?searched=${node.selected}\n .searchText=${this.searchText}\n @check-toggle=${this.onTreeNodeCheckToggle}\n @expand-toggle=${this.onTreeNodeExpandToggle}\n data-testid=\"${IxGenericTreeTestIds.NODE_ID(node.id)}\"\n >\n ${node.expanded\n ? this.renderNodes(node.children, level + 1)\n : nothing}\n </ix-generic-tree-node>`,\n ) as unknown as TemplateResult<1>[];\n }\n\n private renderTextSearch() {\n return this.searchEnabled\n ? html` <ix-textbox\n filled\n leading-icon=\"search\"\n has-leading-icon\n searchEnabled\n .searchResultCount=${this.searchResultCount}\n .searchResultIndex=${this.searchResultIndex}\n placeholder=${this.searchPlaceholder}\n .value=${this.searchText}\n @input=${(e: Event) => {\n const input = e.target as HTMLInputElement;\n this.dispatchEvent(\n new CustomEvent('search-text-change', {\n detail: { searchText: input.value },\n }),\n );\n }}\n data-testid=\"${IxGenericTreeTestIds.SEARCH_BOX}\"\n ></ix-textbox>`\n : nothing;\n }\n\n render() {\n return html`<div>\n ${this.renderTextSearch()} ${this.renderNodes(this.rootNode.children, 0)}\n </div>`;\n }\n}\n"]}
|
|
@@ -12,8 +12,11 @@ export declare class IxGenericTreeNode extends LitElement {
|
|
|
12
12
|
loading: boolean;
|
|
13
13
|
disabled: boolean;
|
|
14
14
|
selected: boolean;
|
|
15
|
+
searched: boolean;
|
|
16
|
+
searchText: string;
|
|
15
17
|
level: number;
|
|
16
18
|
filledIcons: boolean;
|
|
19
|
+
searchEnabled: boolean;
|
|
17
20
|
private onCheck;
|
|
18
21
|
private onNodeExpand;
|
|
19
22
|
private get expandable();
|
|
@@ -24,5 +27,7 @@ export declare class IxGenericTreeNode extends LitElement {
|
|
|
24
27
|
private childCount;
|
|
25
28
|
private secondaryLabel;
|
|
26
29
|
private loadingCircle;
|
|
30
|
+
private setSubstringBold;
|
|
31
|
+
private getBackgroundColor;
|
|
27
32
|
render(): import("lit-html").TemplateResult<1>;
|
|
28
33
|
}
|
|
@@ -15,8 +15,11 @@ export class IxGenericTreeNode extends LitElement {
|
|
|
15
15
|
this.loading = false;
|
|
16
16
|
this.disabled = false;
|
|
17
17
|
this.selected = false;
|
|
18
|
+
this.searched = false;
|
|
19
|
+
this.searchText = '';
|
|
18
20
|
this.level = 0;
|
|
19
21
|
this.filledIcons = false;
|
|
22
|
+
this.searchEnabled = false;
|
|
20
23
|
}
|
|
21
24
|
static { this.styles = [IxGenericTreeNodeStyles]; }
|
|
22
25
|
onCheck() {
|
|
@@ -94,7 +97,7 @@ export class IxGenericTreeNode extends LitElement {
|
|
|
94
97
|
nodeIcon() {
|
|
95
98
|
const { icon } = this.node;
|
|
96
99
|
return icon
|
|
97
|
-
? html `<div class="pl-4 mt-2">
|
|
100
|
+
? html `<div class="pl-4 mt-2 node-item-icon">
|
|
98
101
|
<ix-icon
|
|
99
102
|
style="color: #092241; opacity: 0.6; font-size: 20px;"
|
|
100
103
|
?filled=${this.filledIcons}
|
|
@@ -110,7 +113,7 @@ export class IxGenericTreeNode extends LitElement {
|
|
|
110
113
|
class="label dlr-text-small"
|
|
111
114
|
data-testid="${IxGenericTreeTestIds.NODE_LABEL(this.node.id)}"
|
|
112
115
|
>
|
|
113
|
-
${this.node.label}
|
|
116
|
+
${this.setSubstringBold(this.node.label)}
|
|
114
117
|
</p>
|
|
115
118
|
`;
|
|
116
119
|
}
|
|
@@ -126,7 +129,7 @@ export class IxGenericTreeNode extends LitElement {
|
|
|
126
129
|
secondaryLabel() {
|
|
127
130
|
return this.node.secondaryLabel
|
|
128
131
|
? html `<p class="secondary-label dlr-text-caption">
|
|
129
|
-
${this.node.secondaryLabel}
|
|
132
|
+
${this.setSubstringBold(this.node.secondaryLabel)}
|
|
130
133
|
</p>`
|
|
131
134
|
: nothing;
|
|
132
135
|
}
|
|
@@ -140,13 +143,36 @@ export class IxGenericTreeNode extends LitElement {
|
|
|
140
143
|
<ix-progress .linear=${false} .indeterminate=${true}></ix-progress>
|
|
141
144
|
</div>`;
|
|
142
145
|
}
|
|
146
|
+
setSubstringBold(label) {
|
|
147
|
+
if (!this.searchText || this.searchText.length < 2)
|
|
148
|
+
return label;
|
|
149
|
+
const sanitizedSearchText = this.searchText.toLowerCase().trim();
|
|
150
|
+
const startIndex = label.toLowerCase().indexOf(sanitizedSearchText);
|
|
151
|
+
if (startIndex === -1) {
|
|
152
|
+
return label;
|
|
153
|
+
}
|
|
154
|
+
const endIndex = startIndex + sanitizedSearchText.length;
|
|
155
|
+
return html `${label.substring(0, startIndex)}<b>${label.substring(startIndex, endIndex)}</b>${label.substring(endIndex)}`;
|
|
156
|
+
}
|
|
157
|
+
getBackgroundColor() {
|
|
158
|
+
if (!this.searchEnabled || this.searchText.trim() === '') {
|
|
159
|
+
return '';
|
|
160
|
+
}
|
|
161
|
+
if (this.selected) {
|
|
162
|
+
return 'node-item-selected';
|
|
163
|
+
}
|
|
164
|
+
if (this.searched) {
|
|
165
|
+
return 'node-item-searched';
|
|
166
|
+
}
|
|
167
|
+
return '';
|
|
168
|
+
}
|
|
143
169
|
render() {
|
|
144
170
|
return html `
|
|
145
171
|
<div style="padding-left: ${this.level > 0 ? '2.2rem' : '0'}">
|
|
146
|
-
<div class="node-item
|
|
172
|
+
<div class="node-item">
|
|
147
173
|
${this.arrowIcon()} ${this.checkbox()} ${this.nodeIcon()}
|
|
148
174
|
<div
|
|
149
|
-
class="node-item-label"
|
|
175
|
+
class="node-item-label ${this.getBackgroundColor()}"
|
|
150
176
|
@click=${this.onNodeExpand}
|
|
151
177
|
@keydown=${this.onNodeExpand}
|
|
152
178
|
>
|
|
@@ -180,10 +206,19 @@ __decorate([
|
|
|
180
206
|
__decorate([
|
|
181
207
|
property({ type: Boolean })
|
|
182
208
|
], IxGenericTreeNode.prototype, "selected", void 0);
|
|
209
|
+
__decorate([
|
|
210
|
+
property({ type: Boolean })
|
|
211
|
+
], IxGenericTreeNode.prototype, "searched", void 0);
|
|
212
|
+
__decorate([
|
|
213
|
+
property({ type: String })
|
|
214
|
+
], IxGenericTreeNode.prototype, "searchText", void 0);
|
|
183
215
|
__decorate([
|
|
184
216
|
property({ type: Number })
|
|
185
217
|
], IxGenericTreeNode.prototype, "level", void 0);
|
|
186
218
|
__decorate([
|
|
187
219
|
property({ type: Boolean })
|
|
188
220
|
], IxGenericTreeNode.prototype, "filledIcons", void 0);
|
|
221
|
+
__decorate([
|
|
222
|
+
property({ type: Boolean })
|
|
223
|
+
], IxGenericTreeNode.prototype, "searchEnabled", void 0);
|
|
189
224
|
//# sourceMappingURL=IxGenericTreeNode.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxGenericTreeNode.js","sourceRoot":"","sources":["../src/IxGenericTreeNode.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport '@digital-realty/ix-checkbox/ix-checkbox.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-progress/ix-progress.js';\n\nimport type { IGenericTreeNode } from './ix-generic-tree-types.js';\nimport { IxGenericTreeNodeStyles } from './ix-generic-tree-styles.js';\nimport { IxGenericTreeTestIds } from './IxGenericTreeTestIds.js';\n\nexport class IxGenericTreeNode extends LitElement {\n static readonly styles = [IxGenericTreeNodeStyles];\n\n @property({ type: Object }) node!: IGenericTreeNode;\n\n @property({ type: Boolean }) showCheckbox: boolean = false;\n\n @property({ type: Boolean, reflect: true }) expanded: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ type: Boolean }) disabled: boolean = false;\n\n @property({ type: Boolean }) selected: boolean = false;\n\n @property({ type: Number }) level = 0;\n\n @property({ type: Boolean }) filledIcons = false;\n\n private onCheck() {\n this.node.isDirty = true;\n if (this.node.checked) {\n this.node.checked = false;\n this.node.indeterminate = false;\n } else {\n this.node.checked = true;\n this.node.indeterminate = false;\n }\n const event = new CustomEvent('check-toggle', {\n detail: {\n message: {\n node: this.node,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onNodeExpand(): void {\n if (!this.expandable) {\n return;\n }\n\n const event = new CustomEvent('expand-toggle', {\n detail: {\n message: {\n node: this.node,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private get expandable() {\n const childrenDataIsPresent: boolean =\n this.node.children !== undefined && this.node.children.length > 0;\n const hasChildrenToLoad: boolean =\n this.node.childrenCount !== undefined && this.node.childrenCount > 0;\n return childrenDataIsPresent || hasChildrenToLoad;\n }\n\n private arrowIcon() {\n const icon = this.expanded ? 'arrow_drop_down' : 'arrow_right';\n return html`<ix-icon-button\n @click=${() => this.onNodeExpand()}\n style=\"visibility: ${this.expandable ? 'visible' : 'hidden'}\"\n icon=${icon}\n test-id=\"tree-node-expand-toggle\"\n data-testid=${IxGenericTreeTestIds.NODE_EXPAND_TOGGLE(this.node.id)}\n >\n </ix-icon-button>`;\n }\n\n private checkbox() {\n if (!this.showCheckbox) return nothing;\n\n if (this.node.inherited) {\n return html`<div class=\"pl-2\">\n <ix-icon\n data-testid=\"${IxGenericTreeTestIds.CHECK_BOX_ID(this.node.id)}\"\n class=\"inherited\"\n disabled=${this.loading || this.disabled}\n >\n arrow_drop_up\n </ix-icon>\n </div>`;\n }\n\n return html`<div class=\"pl-2\" style=\"margin-top: 0.65rem\">\n <ix-checkbox\n .disabled=${this.loading || this.disabled}\n .checked=${this.node.checked}\n .indeterminate=${this.node.indeterminate}\n @click=${() => this.onCheck()}\n data-testid=\"${IxGenericTreeTestIds.CHECK_BOX_ID(this.node.id)}\"\n ></ix-checkbox>\n </div>`;\n }\n\n private nodeIcon() {\n const { icon } = this.node;\n return icon\n ? html`<div class=\"pl-4 mt-2\">\n <ix-icon\n style=\"color: #092241; opacity: 0.6; font-size: 20px;\"\n ?filled=${this.filledIcons}\n >\n ${icon}\n </ix-icon>\n </div> `\n : nothing;\n }\n\n private label() {\n return html`\n <p\n class=\"label dlr-text-small\"\n data-testid=\"${IxGenericTreeTestIds.NODE_LABEL(this.node.id)}\"\n >\n ${this.node.label}\n </p>\n `;\n }\n\n private childCount() {\n const count =\n this.node.childrenCount === undefined ? 0 : this.node.childrenCount;\n return html`<p\n class=\"pl-2 child-count dlr-text-small\"\n data-testid=\"${IxGenericTreeTestIds.NODE_COUNT(this.node.id)}\"\n >\n ${count !== 0 ? count : nothing}\n </p>`;\n }\n\n private secondaryLabel() {\n return this.node.secondaryLabel\n ? html`<p class=\"secondary-label dlr-text-caption\">\n ${this.node.secondaryLabel}\n </p>`\n : nothing;\n }\n\n private loadingCircle() {\n return html`<div\n style=\"visibility: ${this.loading\n ? 'visible'\n : 'hidden'}; padding-left: 1rem;\"\n class=\"animate-pulse\"\n >\n <ix-progress .linear=${false} .indeterminate=${true}></ix-progress>\n </div>`;\n }\n\n render() {\n return html`\n <div style=\"padding-left: ${this.level > 0 ? '2.2rem' : '0'}\">\n <div class=\"node-item ${this.selected ? 'selected' : ''}\">\n ${this.arrowIcon()} ${this.checkbox()} ${this.nodeIcon()}\n <div\n class=\"node-item-label\"\n @click=${this.onNodeExpand}\n @keydown=${this.onNodeExpand}\n >\n <div class=\"node-item-inner\">\n ${this.label()} ${this.childCount()}\n </div>\n ${this.secondaryLabel()}\n </div>\n ${this.loadingCircle()}\n </div>\n <slot></slot>\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IxGenericTreeNode.js","sourceRoot":"","sources":["../src/IxGenericTreeNode.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport '@digital-realty/ix-checkbox/ix-checkbox.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-progress/ix-progress.js';\n\nimport type { IGenericTreeNode } from './ix-generic-tree-types.js';\nimport { IxGenericTreeNodeStyles } from './ix-generic-tree-styles.js';\nimport { IxGenericTreeTestIds } from './IxGenericTreeTestIds.js';\n\nexport class IxGenericTreeNode extends LitElement {\n static readonly styles = [IxGenericTreeNodeStyles];\n\n @property({ type: Object }) node!: IGenericTreeNode;\n\n @property({ type: Boolean }) showCheckbox: boolean = false;\n\n @property({ type: Boolean, reflect: true }) expanded: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ type: Boolean }) disabled: boolean = false;\n\n @property({ type: Boolean }) selected: boolean = false;\n\n @property({ type: Boolean }) searched: boolean = false;\n\n @property({ type: String }) searchText: string = '';\n\n @property({ type: Number }) level = 0;\n\n @property({ type: Boolean }) filledIcons = false;\n\n @property({ type: Boolean }) searchEnabled = false;\n\n private onCheck() {\n this.node.isDirty = true;\n if (this.node.checked) {\n this.node.checked = false;\n this.node.indeterminate = false;\n } else {\n this.node.checked = true;\n this.node.indeterminate = false;\n }\n const event = new CustomEvent('check-toggle', {\n detail: {\n message: {\n node: this.node,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onNodeExpand(): void {\n if (!this.expandable) {\n return;\n }\n\n const event = new CustomEvent('expand-toggle', {\n detail: {\n message: {\n node: this.node,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private get expandable() {\n const childrenDataIsPresent: boolean =\n this.node.children !== undefined && this.node.children.length > 0;\n const hasChildrenToLoad: boolean =\n this.node.childrenCount !== undefined && this.node.childrenCount > 0;\n return childrenDataIsPresent || hasChildrenToLoad;\n }\n\n private arrowIcon() {\n const icon = this.expanded ? 'arrow_drop_down' : 'arrow_right';\n return html`<ix-icon-button\n @click=${() => this.onNodeExpand()}\n style=\"visibility: ${this.expandable ? 'visible' : 'hidden'}\"\n icon=${icon}\n test-id=\"tree-node-expand-toggle\"\n data-testid=${IxGenericTreeTestIds.NODE_EXPAND_TOGGLE(this.node.id)}\n >\n </ix-icon-button>`;\n }\n\n private checkbox() {\n if (!this.showCheckbox) return nothing;\n\n if (this.node.inherited) {\n return html`<div class=\"pl-2\">\n <ix-icon\n data-testid=\"${IxGenericTreeTestIds.CHECK_BOX_ID(this.node.id)}\"\n class=\"inherited\"\n disabled=${this.loading || this.disabled}\n >\n arrow_drop_up\n </ix-icon>\n </div>`;\n }\n\n return html`<div class=\"pl-2\" style=\"margin-top: 0.65rem\">\n <ix-checkbox\n .disabled=${this.loading || this.disabled}\n .checked=${this.node.checked}\n .indeterminate=${this.node.indeterminate}\n @click=${() => this.onCheck()}\n data-testid=\"${IxGenericTreeTestIds.CHECK_BOX_ID(this.node.id)}\"\n ></ix-checkbox>\n </div>`;\n }\n\n private nodeIcon() {\n const { icon } = this.node;\n return icon\n ? html`<div class=\"pl-4 mt-2 node-item-icon\">\n <ix-icon\n style=\"color: #092241; opacity: 0.6; font-size: 20px;\"\n ?filled=${this.filledIcons}\n >\n ${icon}\n </ix-icon>\n </div> `\n : nothing;\n }\n\n private label() {\n return html`\n <p\n class=\"label dlr-text-small\"\n data-testid=\"${IxGenericTreeTestIds.NODE_LABEL(this.node.id)}\"\n >\n ${this.setSubstringBold(this.node.label!)}\n </p>\n `;\n }\n\n private childCount() {\n const count =\n this.node.childrenCount === undefined ? 0 : this.node.childrenCount;\n return html`<p\n class=\"pl-2 child-count dlr-text-small\"\n data-testid=\"${IxGenericTreeTestIds.NODE_COUNT(this.node.id)}\"\n >\n ${count !== 0 ? count : nothing}\n </p>`;\n }\n\n private secondaryLabel() {\n return this.node.secondaryLabel\n ? html`<p class=\"secondary-label dlr-text-caption\">\n ${this.setSubstringBold(this.node.secondaryLabel!)}\n </p>`\n : nothing;\n }\n\n private loadingCircle() {\n return html`<div\n style=\"visibility: ${this.loading\n ? 'visible'\n : 'hidden'}; padding-left: 1rem;\"\n class=\"animate-pulse\"\n >\n <ix-progress .linear=${false} .indeterminate=${true}></ix-progress>\n </div>`;\n }\n\n private setSubstringBold(label: string) {\n if (!this.searchText || this.searchText.length < 2) return label;\n\n const sanitizedSearchText = this.searchText.toLowerCase().trim();\n const startIndex = label.toLowerCase().indexOf(sanitizedSearchText);\n\n if (startIndex === -1) {\n return label;\n }\n\n const endIndex = startIndex + sanitizedSearchText.length;\n return html`${label.substring(0, startIndex)}<b>${label.substring(\n startIndex,\n endIndex,\n )}</b>${label.substring(endIndex)}`;\n }\n\n private getBackgroundColor(): string {\n if (!this.searchEnabled || this.searchText.trim() === '') {\n return '';\n }\n if (this.selected) {\n return 'node-item-selected';\n }\n if (this.searched) {\n return 'node-item-searched';\n }\n return '';\n }\n\n render() {\n return html`\n <div style=\"padding-left: ${this.level > 0 ? '2.2rem' : '0'}\">\n <div class=\"node-item\">\n ${this.arrowIcon()} ${this.checkbox()} ${this.nodeIcon()}\n <div\n class=\"node-item-label ${this.getBackgroundColor()}\"\n @click=${this.onNodeExpand}\n @keydown=${this.onNodeExpand}\n >\n <div class=\"node-item-inner\">\n ${this.label()} ${this.childCount()}\n </div>\n ${this.secondaryLabel()}\n </div>\n ${this.loadingCircle()}\n </div>\n <slot></slot>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -90,11 +90,23 @@ export const IxGenericTreeNodeStyles = css `
|
|
|
90
90
|
background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
+
.node-item-icon {
|
|
94
|
+
padding-right: 0.75rem;
|
|
95
|
+
}
|
|
96
|
+
|
|
93
97
|
.node-item-label {
|
|
94
|
-
padding
|
|
98
|
+
padding: 0rem;
|
|
95
99
|
cursor: pointer;
|
|
96
100
|
}
|
|
97
101
|
|
|
102
|
+
.node-item-selected {
|
|
103
|
+
background-color: #fccf00;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.node-item-searched {
|
|
107
|
+
background-color: #feec99;
|
|
108
|
+
}
|
|
109
|
+
|
|
98
110
|
.node-item-inner {
|
|
99
111
|
display: flex;
|
|
100
112
|
align-items: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-generic-tree-styles.js","sourceRoot":"","sources":["../src/ix-generic-tree-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ix-generic-tree-styles.js","sourceRoot":"","sources":["../src/ix-generic-tree-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+JzC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGenericTreeNodeStyles = css`\n :root,\n :host :root,\n :host {\n --md-circular-progress-size: 14px;\n --md-circular-progress-active-indicator-width: 10;\n --md-filled-text-field-top-space: 8px;\n --md-filled-text-field-bottom-space: 8px;\n --md-filled-text-field-container-color: #f5f7ff;\n --md-filled-text-field-container-shape-end-end: 4px;\n --md-filled-text-field-container-shape-end-start: 4px;\n --md-filled-text-field-focus-active-indicator-height: 0px;\n --md-filled-text-field-hover-active-indicator-height: 0px;\n --md-filled-text-field-active-indicator-height: 0px;\n }\n\n *,\n :before,\n :after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n md-checkbox {\n --md-checkbox-outline-color: var(\n --ix-generic-tree-node-outline-colour,\n rgb(91, 107, 124)\n );\n }\n\n md-checkbox[indeterminate] {\n --md-checkbox-selected-container-color: var(\n --ix-generic-tree-indeterminate-node-background-color,\n #53657a\n );\n --md-checkbox-selected-hover-container-color: var(\n --ix-generic-tree-indeterminate-node-background-color,\n #53657a\n );\n }\n\n .inherited {\n display: flex;\n cursor: default;\n background: var(--ix-generic-tree-inherited-node-background-color, #53657a);\n height: var(--ix-generic-tree-inherited-node-height, 18px);\n width: var(--ix-generic-tree-inherited-node-width, 18px);\n border-radius: var(--ix-generic-tree-inherited-node-border-radius, 2px);\n color: var(--ix-generic-tree-inherited-node-icon-color, #ffffff);\n line-height: var(--ix-generic-tree-inherited-node-icon-line-height, 1);\n --ix-icon-font-size: var(--ix-tree-inherited-node-icon-font-size, 18px);\n }\n\n ix-icon-button {\n --md-sys-color-on-surface-variant: #6b7a8d;\n }\n\n md-filled-text-field {\n width: 100%;\n }\n\n .secondary-label {\n color: #6b7a8d;\n text-align: left;\n }\n\n .child-count {\n margin: 0px;\n color: var(--cp-neutral-blue-60p, #09224199);\n }\n\n .label {\n letter-spacing: 0.25px;\n }\n\n .node-item {\n width: -moz-max-content;\n width: max-content;\n display: flex;\n align-items: center;\n user-select: none;\n }\n\n .node-item.selected {\n border-top-right-radius: 1rem;\n border-bottom-right-radius: 1rem;\n --tw-bg-opacity: 1;\n background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));\n }\n\n .node-item-icon {\n padding-right: 0.75rem;\n }\n\n .node-item-label {\n padding: 0rem;\n cursor: pointer;\n }\n\n .node-item-selected {\n background-color: #fccf00;\n }\n\n .node-item-searched {\n background-color: #feec99;\n }\n\n .node-item-inner {\n display: flex;\n align-items: center;\n }\n\n @keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n }\n\n .animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n\n .dlr-text-caption {\n font-family: var(--root-primary-font);\n font-size: var(--text-caption-size);\n line-height: var(--text-caption-line-height);\n letter-spacing: var(--text-caption-letter-spacing);\n font-weight: var(--text-caption-weight);\n text-decoration: var(--text-caption-decoration);\n text-transform: var(--text-caption-transform);\n }\n\n .dlr-text-small {\n font-family: var(--root-primary-font);\n font-size: var(--text-small-size);\n line-height: var(--text-small-line-height);\n letter-spacing: var(--text-small-letter-spacing);\n font-weight: var(--text-small-weight);\n text-decoration: var(--text-small-decoration);\n text-transform: var(--text-small-transform);\n }\n\n .pl-2 {\n padding-left: 0.5rem;\n }\n\n .pl-4 {\n padding-left: 1rem;\n }\n\n .mt-2 {\n margin-top: 0.5rem;\n }\n\n ix-textbox {\n display: block;\n margin-bottom: 1rem;\n }\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-generic-tree following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "2.1.
|
|
6
|
+
"version": "2.1.4",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -28,14 +28,15 @@
|
|
|
28
28
|
"format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
|
|
29
29
|
"prepare": "husky",
|
|
30
30
|
"test": "tsc && wtr --coverage",
|
|
31
|
-
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
31
|
+
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
|
|
32
|
+
"ts:watch": "tsc --watch --preserveWatchOutput"
|
|
32
33
|
},
|
|
33
34
|
"dependencies": {
|
|
34
35
|
"@digital-realty/ix-checkbox": "^1.3.2",
|
|
35
36
|
"@digital-realty/ix-icon": "^1.2.1",
|
|
36
37
|
"@digital-realty/ix-icon-button": "^1.2.1",
|
|
37
38
|
"@digital-realty/ix-progress": "^1.3.1",
|
|
38
|
-
"@digital-realty/ix-textbox": "^2.3.
|
|
39
|
+
"@digital-realty/ix-textbox": "^2.3.2",
|
|
39
40
|
"lit": "^3.1.4"
|
|
40
41
|
},
|
|
41
42
|
"devDependencies": {
|
|
@@ -99,5 +100,5 @@
|
|
|
99
100
|
"README.md",
|
|
100
101
|
"LICENSE"
|
|
101
102
|
],
|
|
102
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "9ca522ea6abef4a334e376bf1550442e84cf62c8"
|
|
103
104
|
}
|