@nyx-ds/treeview 0.1.4 → 0.1.5
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/treeview-lazy.d.ts +5 -0
- package/dist/treeview.d.ts +1 -1
- package/dist/treeview.js +267 -259
- package/dist/treeview.umd.cjs +11 -11
- package/package.json +2 -2
package/dist/treeview.js
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as
|
|
3
|
-
import { repeat as
|
|
4
|
-
import { classMap as
|
|
5
|
-
import { chevronRightRegular as
|
|
1
|
+
import { LitElement as Z, nothing as m, html as h, unsafeCSS as Y } from "lit";
|
|
2
|
+
import { property as J, state as v } from "lit/decorators.js";
|
|
3
|
+
import { repeat as Q } from "lit/directives/repeat.js";
|
|
4
|
+
import { classMap as g } from "lit/directives/class-map.js";
|
|
5
|
+
import { chevronRightRegular as X, magnifyingGlass as ee } from "@nyx-ds/core";
|
|
6
6
|
import "@lit-labs/virtualizer";
|
|
7
7
|
import "@nyx-ds/input";
|
|
8
8
|
import "@nyx-ds/checkbox";
|
|
9
9
|
import "@nyx-ds/radio";
|
|
10
10
|
import "@nyx-ds/icon";
|
|
11
11
|
import "@nyx-ds/button";
|
|
12
|
-
function
|
|
12
|
+
function te(n, e) {
|
|
13
13
|
return function(t, i) {
|
|
14
14
|
const { native: s = !1, ...r } = i || {}, o = s ? new Event(e, r) : new CustomEvent(e, { detail: t, ...r });
|
|
15
15
|
n.dispatchEvent(o);
|
|
16
16
|
};
|
|
17
17
|
}
|
|
18
|
-
function
|
|
18
|
+
function ie(n) {
|
|
19
19
|
return (e, t) => {
|
|
20
20
|
Object.defineProperty(e, t, {
|
|
21
21
|
get() {
|
|
22
|
-
return
|
|
22
|
+
return te(this, n);
|
|
23
23
|
},
|
|
24
24
|
enumerable: !0,
|
|
25
25
|
configurable: !0
|
|
26
26
|
});
|
|
27
27
|
};
|
|
28
28
|
}
|
|
29
|
-
const
|
|
30
|
-
function
|
|
29
|
+
const se = ":host{display:flex;flex-direction:column;width:100%;--treeview-radius: var(--nyx-radii-s);--treeview-search-padding: var(--nyx-sizing-1-25) var(--nyx-sizing-1-75) 0 var(--nyx-sizing-1-75);--treeview-header-padding: var(--nyx-sizing-2) var(--nyx-sizing-2) var(--nyx-sizing-1-75) var(--nyx-sizing-2);--treeview-row-padding: var(--nyx-sizing-1) var(--nyx-sizing-2);--treeview-row-gap: var(--nyx-sizing-2);--treeview-col-gap: var(--nyx-sizing-1);--treeview-node-gap: var(--nyx-sizing-1);--treeview-row-min-height: 48px;--treeview-indent-base: 16px;--treeview-indent-step: 24px;--treeview-expander-wrapper-size: var(--nyx-sizing-4);--treeview-expander-padding: var(--nyx-sizing-1-25);--treeview-col-width: var(--treeview-header-icon-size);--treeview-column-count: 0;--treeview-scrollbar-gutter: 15px;--treeview-background: var(--nyx-color-neutral-background-primary);--treeview-border-color: var(--nyx-color-neutral-border-tertiary);--treeview-content-color: var(--nyx-color-neutral-content-primary);--treeview-focus-border-color: var(--nyx-color-brand-border-default);--treeview-row-selected-background: var(--nyx-color-brand-background-softer);--treeview-row-selected-hover-background: var( --nyx-color-brand-background-softer-hover );--treeview-row-selected-color: var(--nyx-color-neutral-content-primary);--treeview-font-family: var(--nyx-font-family-font-family);--treeview-title-font-size: var(--nyx-label-medium-font-size);--treeview-title-line-height: var(--nyx-label-medium-line-height);--treeview-text-font-size: var(--nyx-label-medium-font-size);--treeview-text-line-height: var(--nyx-label-medium-line-height);--treeview-header-icon-size: var(--nyx-label-large-font-size);--treeview-node-icon-size: var(--nyx-label-medium-font-size);--treeview-expander-icon-size: var(--nyx-label-large-font-size);--treeview-row-hover-background: var(--nyx-color-neutral-background-secondary);--treeview-row-hover-color: var(--nyx-color-brand-content-hover)}.nyx-treeview{display:flex;flex-direction:column;width:100%;font-family:var(--treeview-font-family);align-items:flex-start;border-radius:var(--treeview-radius);border:1px solid var(--treeview-border-color);background:var(--treeview-background);box-sizing:border-box}.search-container{display:flex;padding:var(--treeview-search-padding);flex-direction:column;align-items:flex-start;align-self:stretch}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.tree-scroll{width:100%;display:flex;flex-direction:column;min-height:0}.tree-body--virtual{display:flex;flex-direction:column;flex:1 1 auto;min-height:280px;max-height:var(--treeview-max-height, 480px);overflow:hidden}.tree-virtualizer{flex:1 1 auto;width:100%;min-height:280px;scrollbar-gutter:stable}.node-wrapper--flat{width:100%}.tree-header{display:flex;justify-content:space-between;align-items:center;align-self:stretch;padding:var(--treeview-header-padding);border-bottom:.5px solid var(--treeview-border-color);box-sizing:border-box}.tree-title{color:var(--treeview-content-color);font-size:var(--treeview-title-font-size);line-height:var(--treeview-title-line-height);font-weight:600;flex:1 1 auto;min-width:0}.tree-header--no-columns .tree-title{flex:1 1 auto}.nyx-treeview--no-columns .header-columns,.nyx-treeview--no-columns .node-columns{display:none}.nyx-treeview--no-columns .tree-header{padding-inline-end:var(--nyx-sizing-2, 16px)}.header-columns,.node-columns{display:flex;align-items:center;justify-content:flex-end;gap:var(--treeview-col-gap);flex-shrink:0}.header-columns{padding-inline-end:0}.nyx-treeview--virtual .header-columns{padding-inline-end:var(--treeview-scrollbar-gutter)}.col-cell{min-width:var(--treeview-col-width);width:var(--treeview-col-width);flex:0 0 auto;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.header-columns ::slotted(nyx-icon){display:flex;justify-content:center;align-items:center;--nyx-icon-size: var(--treeview-header-icon-size);color:var(--treeview-content-color)}.tree-body{width:100%;display:flex;flex-direction:column}.node-wrapper{display:flex;flex-direction:column;width:100%}.node-row{--treeview-row-level: 0;display:flex;align-items:center;justify-content:space-between;min-height:var(--treeview-row-min-height);border-bottom:.5px solid var(--treeview-border-color);gap:var(--treeview-row-gap);padding:var(--treeview-row-padding);padding-left:calc(var(--treeview-indent-base) + var(--treeview-row-level) * var(--treeview-indent-step));box-sizing:border-box;background:transparent;color:var(--treeview-content-color);outline:none;cursor:default}.node-row:hover{background:var(--treeview-row-hover-background);color:var(--treeview-row-hover-color)}.node-row:focus-within{background:var(--treeview-row-hover-background)!important;color:var(--treeview-row-hover-color)!important}.node-row:hover .expander nyx-icon,.node-row:hover .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-hover-color)}.node-row:focus-within .expander nyx-icon,.node-row:focus-within .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-hover-color)}.node-row.selectable.selected{background-color:var(--treeview-row-selected-background);color:var(--treeview-row-selected-color)}.node-row.selectable.selected .expander nyx-icon,.node-row.selectable.selected .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-selected-color)}.node-row.selectable.selected:hover{background-color:var(--treeview-row-selected-hover-background);color:var(--treeview-row-selected-color)}.node-row.selectable.selected:focus-within{background-color:var(--treeview-row-selected-background)!important;color:var(--treeview-row-selected-color)!important}.node-row.selectable.selected:focus-within .expander nyx-icon,.node-row.selectable.selected:focus-within .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-selected-color)}.node-row.selectable.selected:hover:focus-within{background-color:var(--treeview-row-selected-hover-background)!important}.node-row:focus-visible{position:relative;z-index:2;outline:2px solid var(--treeview-focus-border-color);outline-offset:-3px;background:var(--treeview-row-hover-background)!important;color:var(--treeview-row-hover-color)}.row-checkbox{display:flex;align-items:center;margin-right:4px}.node-info{display:flex;align-items:center;gap:var(--treeview-node-gap);flex:1 0 0;overflow:hidden;min-height:32px;padding-left:4px}.expander{--button-icon-color: inherit;flex-shrink:0;width:var(--treeview-expander-wrapper-size);min-width:var(--treeview-expander-wrapper-size)}.expander-placeholder{display:block;flex-shrink:0;width:var(--treeview-expander-wrapper-size);min-width:var(--treeview-expander-wrapper-size);height:var(--treeview-expander-wrapper-size)}.expander nyx-icon{--nyx-icon-size: var(--treeview-expander-icon-size);transition:transform .2s ease;transform-origin:center}.expander nyx-icon.expanded{transform:rotate(90deg)}.expander:hover,.expander:focus-within{--button-icon-color: var(--treeview-content-color) !important}.expander:hover nyx-icon,.expander:focus-within nyx-icon{color:var(--treeview-content-color)!important;--nyx-icon-color: var(--treeview-content-color) !important}.node-row:hover .expander:hover,.node-row:hover .expander:focus-within{--button-icon-color: var(--treeview-row-hover-color) !important}.node-row:hover .expander:hover nyx-icon,.node-row:hover .expander:focus-within nyx-icon{color:var(--treeview-row-hover-color)!important;--nyx-icon-color: var(--treeview-row-hover-color) !important}.node-type-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0}.node-type-icon-wrapper ::slotted(nyx-icon){--nyx-icon-size: var(--treeview-node-icon-size)}.node-text{font-size:var(--treeview-text-font-size);line-height:var(--treeview-text-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-children{width:100%}@media(max-width:768px){.tree-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.tree-header,.tree-body{min-width:calc(250px + ((var(--treeview-col-width) + var(--treeview-col-gap)) * var(--treeview-column-count)))}.node-text{white-space:normal;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}", re = 200;
|
|
30
|
+
function C(n, e) {
|
|
31
31
|
const t = e.trim().toLowerCase();
|
|
32
32
|
return t ? n.toLowerCase().includes(t) : !1;
|
|
33
33
|
}
|
|
@@ -40,20 +40,20 @@ function L(n) {
|
|
|
40
40
|
for (let r = n.length - 1; r >= 0; r--)
|
|
41
41
|
i.push({ node: n[r], parentId: null });
|
|
42
42
|
for (; i.length > 0; ) {
|
|
43
|
-
const { node: r, parentId: o } = i.pop(),
|
|
43
|
+
const { node: r, parentId: o } = i.pop(), l = ((s = r.children) == null ? void 0 : s.map((a) => a.id)) ?? [];
|
|
44
44
|
if (e.set(r.id, {
|
|
45
45
|
id: r.id,
|
|
46
46
|
parentId: o,
|
|
47
47
|
normalizedLabel: r.label.toLowerCase(),
|
|
48
|
-
childIds:
|
|
49
|
-
hasChildren:
|
|
48
|
+
childIds: l,
|
|
49
|
+
hasChildren: l.length > 0
|
|
50
50
|
}), o === null && t.push(r.id), r.children)
|
|
51
|
-
for (let
|
|
52
|
-
i.push({ node: r.children[
|
|
51
|
+
for (let a = r.children.length - 1; a >= 0; a--)
|
|
52
|
+
i.push({ node: r.children[a], parentId: r.id });
|
|
53
53
|
}
|
|
54
54
|
return { roots: t, byId: e, size: e.size };
|
|
55
55
|
}
|
|
56
|
-
function
|
|
56
|
+
function ne(n) {
|
|
57
57
|
const e = [], t = [];
|
|
58
58
|
for (let i = n.roots.length - 1; i >= 0; i--)
|
|
59
59
|
t.push({ id: n.roots[i], visited: !1 });
|
|
@@ -71,32 +71,32 @@ function oe(n) {
|
|
|
71
71
|
}
|
|
72
72
|
return e;
|
|
73
73
|
}
|
|
74
|
-
function
|
|
74
|
+
function oe(n, e, t) {
|
|
75
75
|
const i = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Map();
|
|
76
|
-
for (const o of
|
|
77
|
-
const
|
|
78
|
-
if (!
|
|
79
|
-
const
|
|
80
|
-
|
|
76
|
+
for (const o of ne(n)) {
|
|
77
|
+
const l = n.byId.get(o);
|
|
78
|
+
if (!l) continue;
|
|
79
|
+
const a = z(
|
|
80
|
+
l.normalizedLabel,
|
|
81
81
|
e
|
|
82
82
|
);
|
|
83
83
|
let d = !1;
|
|
84
|
-
for (const
|
|
85
|
-
if (r.get(
|
|
84
|
+
for (const f of l.childIds)
|
|
85
|
+
if (r.get(f)) {
|
|
86
86
|
d = !0;
|
|
87
87
|
break;
|
|
88
88
|
}
|
|
89
|
-
const c =
|
|
90
|
-
if (r.set(o, c), !c || (i.add(o), !
|
|
91
|
-
let
|
|
92
|
-
for (const
|
|
93
|
-
const
|
|
94
|
-
if (
|
|
95
|
-
|
|
89
|
+
const c = a || d;
|
|
90
|
+
if (r.set(o, c), !c || (i.add(o), !l.hasChildren || !d)) continue;
|
|
91
|
+
let u = !1;
|
|
92
|
+
for (const f of l.childIds) {
|
|
93
|
+
const w = n.byId.get(f);
|
|
94
|
+
if (w && z(w.normalizedLabel, e)) {
|
|
95
|
+
u = !0;
|
|
96
96
|
break;
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
|
-
!t.has(o) && (!
|
|
99
|
+
!t.has(o) && (!a || u) && s.add(o);
|
|
100
100
|
}
|
|
101
101
|
return { visibleIds: i, expandIds: s };
|
|
102
102
|
}
|
|
@@ -109,33 +109,33 @@ function le(n, e) {
|
|
|
109
109
|
z(r.normalizedLabel, t) && s++;
|
|
110
110
|
return s;
|
|
111
111
|
}
|
|
112
|
-
function
|
|
112
|
+
function ae(n, e, t = /* @__PURE__ */ new Set()) {
|
|
113
113
|
const i = e.trim().toLowerCase();
|
|
114
114
|
if (!i)
|
|
115
115
|
return { visibleIds: /* @__PURE__ */ new Set(), expandIds: /* @__PURE__ */ new Set() };
|
|
116
116
|
const s = Array.isArray(n) ? L(n) : n;
|
|
117
|
-
return
|
|
117
|
+
return oe(s, i, t);
|
|
118
118
|
}
|
|
119
|
-
function
|
|
119
|
+
function B(n, e, t = "") {
|
|
120
120
|
const i = n.children ?? [], s = t.trim().toLowerCase();
|
|
121
121
|
return s ? i.filter(
|
|
122
|
-
(r) => e.has(r.id) ||
|
|
122
|
+
(r) => e.has(r.id) || C(r.label, s)
|
|
123
123
|
) : i.filter((r) => e.has(r.id));
|
|
124
124
|
}
|
|
125
|
-
function
|
|
125
|
+
function de(n, e, t) {
|
|
126
126
|
const i = e.trim().toLowerCase();
|
|
127
127
|
if (!i) return !1;
|
|
128
128
|
const s = [n];
|
|
129
129
|
for (; s.length > 0; ) {
|
|
130
130
|
const r = s.pop();
|
|
131
131
|
for (const o of t(r) ?? []) {
|
|
132
|
-
if (
|
|
132
|
+
if (C(o.label, i)) return !0;
|
|
133
133
|
s.push(o.id);
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
136
|
return !1;
|
|
137
137
|
}
|
|
138
|
-
function
|
|
138
|
+
function ce(n, e, t) {
|
|
139
139
|
const i = [n];
|
|
140
140
|
for (; i.length > 0; ) {
|
|
141
141
|
const s = i.pop();
|
|
@@ -147,13 +147,13 @@ function he(n, e, t) {
|
|
|
147
147
|
return !1;
|
|
148
148
|
}
|
|
149
149
|
function E(n, e, t, i, s, r) {
|
|
150
|
-
return
|
|
150
|
+
return H(n, e, t) && !ce(i, s, r) && !de(i, e, r);
|
|
151
151
|
}
|
|
152
|
-
function
|
|
153
|
-
return
|
|
152
|
+
function H(n, e, t) {
|
|
153
|
+
return C(n, e) && !t;
|
|
154
154
|
}
|
|
155
|
-
function
|
|
156
|
-
return t ||
|
|
155
|
+
function O(n, e, t, i) {
|
|
156
|
+
return t || H(n, e, i);
|
|
157
157
|
}
|
|
158
158
|
function k(n, e) {
|
|
159
159
|
var t, i;
|
|
@@ -165,7 +165,7 @@ function k(n, e) {
|
|
|
165
165
|
(s) => k(s, e)
|
|
166
166
|
)) ?? !1;
|
|
167
167
|
}
|
|
168
|
-
function
|
|
168
|
+
function j(n, e) {
|
|
169
169
|
const t = n.map((i, s) => ({ node: i, index: s }));
|
|
170
170
|
return t.sort((i, s) => {
|
|
171
171
|
const r = k(i.node, e), o = k(s.node, e);
|
|
@@ -174,70 +174,77 @@ function W(n, e) {
|
|
|
174
174
|
var s;
|
|
175
175
|
return (s = i.children) != null && s.length ? {
|
|
176
176
|
...i,
|
|
177
|
-
children:
|
|
177
|
+
children: j(i.children, e)
|
|
178
178
|
} : i;
|
|
179
179
|
});
|
|
180
180
|
}
|
|
181
|
-
const
|
|
182
|
-
function
|
|
181
|
+
const y = 50;
|
|
182
|
+
function he(n) {
|
|
183
183
|
const e = [], t = n.map((s) => ({ node: s, depth: 0, parentId: null }));
|
|
184
184
|
let i = 0;
|
|
185
185
|
for (; i < t.length; ) {
|
|
186
|
-
const s = t[i++], { node: r, depth: o, parentId:
|
|
186
|
+
const s = t[i++], { node: r, depth: o, parentId: l } = s, a = !!(r.children && r.children.length > 0);
|
|
187
187
|
if (e.push({
|
|
188
188
|
id: r.id,
|
|
189
189
|
depth: o,
|
|
190
|
-
parentId:
|
|
191
|
-
hasChildrenInSource:
|
|
192
|
-
}),
|
|
190
|
+
parentId: l,
|
|
191
|
+
hasChildrenInSource: a
|
|
192
|
+
}), a)
|
|
193
193
|
for (const d of r.children)
|
|
194
194
|
t.push({ node: d, depth: o + 1, parentId: r.id });
|
|
195
195
|
}
|
|
196
196
|
return e;
|
|
197
197
|
}
|
|
198
|
-
function
|
|
198
|
+
function ue(n, e = y) {
|
|
199
199
|
const t = /* @__PURE__ */ new Set();
|
|
200
200
|
for (const i of n)
|
|
201
201
|
if (i.depth === 0 && (t.add(i.id), t.size >= e))
|
|
202
202
|
break;
|
|
203
203
|
return t;
|
|
204
204
|
}
|
|
205
|
-
function
|
|
205
|
+
function fe(n, e, t) {
|
|
206
206
|
const i = [];
|
|
207
207
|
for (const s of n)
|
|
208
208
|
if (s.depth === 0 && !e.has(s.id) && (i.push(s.id), i.length >= t))
|
|
209
209
|
break;
|
|
210
210
|
return i;
|
|
211
211
|
}
|
|
212
|
-
function
|
|
212
|
+
function _e(n, e) {
|
|
213
213
|
return n.some((t) => t.depth === 0 && !e.has(t.id));
|
|
214
214
|
}
|
|
215
|
-
function
|
|
215
|
+
function pe(n, e, t) {
|
|
216
216
|
return T(e, n).some((i) => !t.has(i));
|
|
217
217
|
}
|
|
218
|
-
function
|
|
218
|
+
function W(n, e, t) {
|
|
219
219
|
return e.some(
|
|
220
220
|
(i) => i.parentId === n && !t.has(i.id)
|
|
221
221
|
);
|
|
222
222
|
}
|
|
223
|
-
function
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
223
|
+
function we(n, e) {
|
|
224
|
+
const t = n[e];
|
|
225
|
+
if (!t) return e;
|
|
226
|
+
let i = e;
|
|
227
|
+
for (let s = e + 1; s < n.length && !(n[s].level <= t.level); s++)
|
|
228
|
+
i = s;
|
|
229
|
+
return i;
|
|
229
230
|
}
|
|
230
|
-
function ve(n, e, t, i, s, r) {
|
|
231
|
-
|
|
231
|
+
function ve(n, e, t, i, s, r, o = 0) {
|
|
232
|
+
if (n.length === 0) return;
|
|
233
|
+
const l = Math.min(
|
|
232
234
|
Math.max(0, e),
|
|
233
235
|
Math.max(0, n.length - 1)
|
|
234
|
-
)
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
236
|
+
), a = Math.min(
|
|
237
|
+
Math.max(l, t),
|
|
238
|
+
Math.max(0, n.length - 1)
|
|
239
|
+
), d = Math.max(0, Math.floor(o));
|
|
240
|
+
let c;
|
|
241
|
+
for (let u = 0; u < n.length; u++) {
|
|
242
|
+
const f = n[u];
|
|
243
|
+
if (!i.has(f.node.id) || !W(f.node.id, s, r)) continue;
|
|
244
|
+
const w = we(n, u), b = Math.max(u, w - d);
|
|
245
|
+
l <= w && a >= b && (c = f.node.id);
|
|
246
|
+
}
|
|
247
|
+
return c;
|
|
241
248
|
}
|
|
242
249
|
function me(n, e) {
|
|
243
250
|
const t = [];
|
|
@@ -254,13 +261,13 @@ function V(n, e, t) {
|
|
|
254
261
|
{ id: r, level: 0 }
|
|
255
262
|
];
|
|
256
263
|
for (; o.length > 0; ) {
|
|
257
|
-
const
|
|
258
|
-
if (
|
|
259
|
-
s.push(
|
|
260
|
-
const
|
|
261
|
-
if (!(!(
|
|
262
|
-
for (let d =
|
|
263
|
-
o.push({ id:
|
|
264
|
+
const l = o.pop();
|
|
265
|
+
if (l.level > t) continue;
|
|
266
|
+
s.push(l.id);
|
|
267
|
+
const a = i.get(l.id);
|
|
268
|
+
if (!(!(a != null && a.length) || l.level >= t))
|
|
269
|
+
for (let d = a.length - 1; d >= 0; d--)
|
|
270
|
+
o.push({ id: a[d], level: l.level + 1 });
|
|
264
271
|
}
|
|
265
272
|
}
|
|
266
273
|
return s;
|
|
@@ -273,25 +280,25 @@ function xe(n, e, t) {
|
|
|
273
280
|
{ id: r, level: 0 }
|
|
274
281
|
];
|
|
275
282
|
for (; o.length > 0; ) {
|
|
276
|
-
const
|
|
277
|
-
if (
|
|
278
|
-
const
|
|
279
|
-
if (
|
|
280
|
-
s.push(
|
|
281
|
-
for (let d =
|
|
282
|
-
o.push({ id:
|
|
283
|
+
const l = o.pop();
|
|
284
|
+
if (l.level >= t) continue;
|
|
285
|
+
const a = i.get(l.id);
|
|
286
|
+
if (a != null && a.length) {
|
|
287
|
+
s.push(l.id);
|
|
288
|
+
for (let d = a.length - 1; d >= 0; d--)
|
|
289
|
+
o.push({ id: a[d], level: l.level + 1 });
|
|
283
290
|
}
|
|
284
291
|
}
|
|
285
292
|
}
|
|
286
293
|
return s;
|
|
287
294
|
}
|
|
288
|
-
function
|
|
295
|
+
function P(n, e, t, i) {
|
|
289
296
|
const s = [], r = (o) => {
|
|
290
297
|
s.length >= t || !e.has(o) && !s.includes(o) && s.push(o);
|
|
291
298
|
};
|
|
292
299
|
if (i != null) {
|
|
293
300
|
const o = T(n, i);
|
|
294
|
-
for (const
|
|
301
|
+
for (const l of o) r(l);
|
|
295
302
|
}
|
|
296
303
|
for (const o of n)
|
|
297
304
|
if (r(o.id), s.length >= t) break;
|
|
@@ -304,8 +311,8 @@ function T(n, e) {
|
|
|
304
311
|
i.push(r);
|
|
305
312
|
const o = t.get(r);
|
|
306
313
|
if (o != null && o.length)
|
|
307
|
-
for (let
|
|
308
|
-
s.push(o[
|
|
314
|
+
for (let l = o.length - 1; l >= 0; l--)
|
|
315
|
+
s.push(o[l]);
|
|
309
316
|
}
|
|
310
317
|
return i;
|
|
311
318
|
}
|
|
@@ -320,16 +327,16 @@ function $(n) {
|
|
|
320
327
|
function be(n, e, t) {
|
|
321
328
|
return T(n, e).filter((i) => !t.has(i));
|
|
322
329
|
}
|
|
323
|
-
function ge(n, e, t, i =
|
|
330
|
+
function ge(n, e, t, i = y) {
|
|
324
331
|
return be(n, e, t).slice(0, i);
|
|
325
332
|
}
|
|
326
|
-
function
|
|
333
|
+
function M(n) {
|
|
327
334
|
var e;
|
|
328
335
|
return {
|
|
329
336
|
...n,
|
|
330
337
|
selectedColumns: n.selectedColumns ? [...n.selectedColumns] : void 0,
|
|
331
338
|
disabledColumns: n.disabledColumns ? [...n.disabledColumns] : void 0,
|
|
332
|
-
children: (e = n.children) == null ? void 0 : e.map((t) =>
|
|
339
|
+
children: (e = n.children) == null ? void 0 : e.map((t) => M(t)),
|
|
333
340
|
data: n.data
|
|
334
341
|
};
|
|
335
342
|
}
|
|
@@ -343,68 +350,68 @@ function ye(n) {
|
|
|
343
350
|
function Ie(n, e, t) {
|
|
344
351
|
const i = (s) => {
|
|
345
352
|
if (!e.has(s.id)) return null;
|
|
346
|
-
const r = t.get(s.id) ?? s, o = (r.children ?? []).map((
|
|
347
|
-
return
|
|
353
|
+
const r = t.get(s.id) ?? s, o = (r.children ?? []).map((a) => i(a)).filter((a) => a !== null), l = M(r);
|
|
354
|
+
return l.children = o.length > 0 ? o : void 0, l;
|
|
348
355
|
};
|
|
349
356
|
return n.map((s) => i(s)).filter((s) => s !== null);
|
|
350
357
|
}
|
|
351
|
-
function
|
|
352
|
-
const e = [], t = n.searchTerm.trim().toLowerCase(), i = (s, r, o,
|
|
353
|
-
const d = n.hasSearch && !
|
|
358
|
+
function U(n) {
|
|
359
|
+
const e = [], t = n.searchTerm.trim().toLowerCase(), i = (s, r, o, l, a = !1) => {
|
|
360
|
+
const d = n.hasSearch && !a ? s.filter((c) => n.searchVisibleIds.has(c.id)) : s;
|
|
354
361
|
for (const c of d) {
|
|
355
|
-
const
|
|
362
|
+
const u = n.hasSearch && !!t && c.label.toLowerCase().includes(t), f = O(
|
|
356
363
|
c.label,
|
|
357
364
|
t,
|
|
358
365
|
o,
|
|
359
|
-
|
|
360
|
-
),
|
|
366
|
+
l
|
|
367
|
+
), w = l || !!u;
|
|
361
368
|
if (e.push({
|
|
362
369
|
node: c,
|
|
363
370
|
level: r,
|
|
364
|
-
revealSubtree:
|
|
365
|
-
parentLabelMatched:
|
|
371
|
+
revealSubtree: f,
|
|
372
|
+
parentLabelMatched: w,
|
|
366
373
|
hasChildrenInSource: n.sourceHasChildren(c.id)
|
|
367
374
|
}), !n.expandedIds.has(c.id)) continue;
|
|
368
|
-
const
|
|
375
|
+
const A = n.getSourceChildren ?? ((R) => {
|
|
369
376
|
var D;
|
|
370
|
-
return (D = n.items.find((
|
|
371
|
-
}),
|
|
377
|
+
return (D = n.items.find((K) => K.id === R)) == null ? void 0 : D.children;
|
|
378
|
+
}), I = !n.hasSearch || f && E(
|
|
372
379
|
c.label,
|
|
373
380
|
t,
|
|
374
|
-
|
|
381
|
+
l,
|
|
375
382
|
c.id,
|
|
376
383
|
n.searchVisibleIds,
|
|
377
|
-
|
|
378
|
-
) ? c.children ?? [] :
|
|
384
|
+
A
|
|
385
|
+
) ? c.children ?? [] : B(
|
|
379
386
|
c,
|
|
380
387
|
n.searchVisibleIds,
|
|
381
388
|
n.searchTerm
|
|
382
389
|
);
|
|
383
|
-
|
|
390
|
+
I.length > 0 && i(I, r + 1, f, w, !0);
|
|
384
391
|
}
|
|
385
392
|
};
|
|
386
393
|
return i(n.items, 0, !1, !1), e;
|
|
387
394
|
}
|
|
388
|
-
function
|
|
395
|
+
function S(n, e) {
|
|
389
396
|
for (const t of n)
|
|
390
397
|
if (!e.has(t)) return !0;
|
|
391
398
|
return !1;
|
|
392
399
|
}
|
|
393
|
-
function
|
|
400
|
+
function G(n, e, t, i = y) {
|
|
394
401
|
const s = [], r = (o) => {
|
|
395
402
|
s.length >= i || !e.has(o) && !s.includes(o) && s.push(o);
|
|
396
403
|
};
|
|
397
404
|
for (const o of n)
|
|
398
405
|
if (!e.has(o)) {
|
|
399
406
|
r(o);
|
|
400
|
-
for (const
|
|
401
|
-
r(
|
|
407
|
+
for (const l of me(o, t))
|
|
408
|
+
r(l);
|
|
402
409
|
if (s.length >= i) break;
|
|
403
410
|
}
|
|
404
411
|
return s;
|
|
405
412
|
}
|
|
406
|
-
function
|
|
407
|
-
const s =
|
|
413
|
+
function F(n, e, t, i = y) {
|
|
414
|
+
const s = G(
|
|
408
415
|
n,
|
|
409
416
|
e,
|
|
410
417
|
t,
|
|
@@ -415,7 +422,7 @@ function q(n, e, t, i = g) {
|
|
|
415
422
|
function Se(n, e) {
|
|
416
423
|
return e ? `Collapse ${n}` : `Expand ${n}`;
|
|
417
424
|
}
|
|
418
|
-
function
|
|
425
|
+
function q(n) {
|
|
419
426
|
return `Select ${n}`;
|
|
420
427
|
}
|
|
421
428
|
function Ce(n, e) {
|
|
@@ -424,14 +431,14 @@ function Ce(n, e) {
|
|
|
424
431
|
function Re(n) {
|
|
425
432
|
return n === 0 ? "No results found" : n === 1 ? "1 result found" : `${n} results found`;
|
|
426
433
|
}
|
|
427
|
-
var ze = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor,
|
|
434
|
+
var ze = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, p = (n, e, t, i) => {
|
|
428
435
|
for (var s = i > 1 ? void 0 : i ? Ee(e, t) : e, r = n.length - 1, o; r >= 0; r--)
|
|
429
436
|
(o = n[r]) && (s = (i ? o(e, t, s) : o(s)) || s);
|
|
430
437
|
return i && s && ze(e, t, s), s;
|
|
431
|
-
},
|
|
432
|
-
const
|
|
438
|
+
}, x;
|
|
439
|
+
const _ = (x = class extends Z {
|
|
433
440
|
constructor() {
|
|
434
|
-
super(...arguments), this._rowSelectionRadioName = `nyx-treeview-row-selection-${
|
|
441
|
+
super(...arguments), this._rowSelectionRadioName = `nyx-treeview-row-selection-${x._nextTreeviewId++}`, this._items = [], this._expandedIds = /* @__PURE__ */ new Set(), this._searchTerm = "", this._searchStatusMessage = "", this._searchVisibleIds = /* @__PURE__ */ new Set(), this._searchUserCollapsedIds = /* @__PURE__ */ new Set(), this._searchManualExpandedIds = /* @__PURE__ */ new Set(), this._expandedIdsBeforeSearch = null, this._flatRows = [], this._loadedIds = /* @__PURE__ */ new Set(), this._activeRowId = null, this._sourceItems = [], this._lazyItemsSourceRef = null, this._treeIndex = [], this._indexById = /* @__PURE__ */ new Map(), this._sourceById = /* @__PURE__ */ new Map(), this._lazyScrollLoading = !1, this._searchIndex = null, this._searchIndexSourceRef = null, this._searchDebounceTimer = null;
|
|
435
442
|
}
|
|
436
443
|
get options() {
|
|
437
444
|
return this._options;
|
|
@@ -447,7 +454,7 @@ const u = (v = class extends Y {
|
|
|
447
454
|
_getLazyPageSize() {
|
|
448
455
|
var t;
|
|
449
456
|
const e = (t = this.options) == null ? void 0 : t.lazyLoadPageSize;
|
|
450
|
-
return e == null || !Number.isFinite(e) ?
|
|
457
|
+
return e == null || !Number.isFinite(e) ? y : Math.max(1, Math.floor(e));
|
|
451
458
|
}
|
|
452
459
|
_hasColumnPermissions() {
|
|
453
460
|
var e, t, i;
|
|
@@ -470,8 +477,8 @@ const u = (v = class extends Y {
|
|
|
470
477
|
}
|
|
471
478
|
_applyItemsFromOptions(e) {
|
|
472
479
|
var i;
|
|
473
|
-
let t = e.map((s) =>
|
|
474
|
-
return this._usesUniqueRowSelection() && this._applyUniqueSelectionConstraint(t), (i = this.options) != null && i.sortSelectedFirst && (t =
|
|
480
|
+
let t = e.map((s) => M(s));
|
|
481
|
+
return this._usesUniqueRowSelection() && this._applyUniqueSelectionConstraint(t), (i = this.options) != null && i.sortSelectedFirst && (t = j(t, this._usesSimpleRowSelection())), t;
|
|
475
482
|
}
|
|
476
483
|
_applyUniqueSelectionConstraint(e) {
|
|
477
484
|
let t = !1;
|
|
@@ -501,8 +508,8 @@ const u = (v = class extends Y {
|
|
|
501
508
|
}
|
|
502
509
|
_initLazyState() {
|
|
503
510
|
var s;
|
|
504
|
-
this._lazyItemsSourceRef = this.options.items, this._sourceItems = this._applyItemsFromOptions(this.options.items), this._invalidateSearchIndex(), this._treeIndex =
|
|
505
|
-
const e = (s = this.options) == null ? void 0 : s.defaultExpandedLevel, t = this._getLazyPageSize(), i =
|
|
511
|
+
this._lazyItemsSourceRef = this.options.items, this._sourceItems = this._applyItemsFromOptions(this.options.items), this._invalidateSearchIndex(), this._treeIndex = he(this._sourceItems), this._indexById = new Map(this._treeIndex.map((r) => [r.id, r])), this._sourceById = ye(this._sourceItems);
|
|
512
|
+
const e = (s = this.options) == null ? void 0 : s.defaultExpandedLevel, t = this._getLazyPageSize(), i = ue(this._treeIndex, t);
|
|
506
513
|
this._loadedIds = new Set(i), e !== void 0 && e > 0 && this._loadDefaultExpandedLevelForRoots(i, e), this._expandedIds = /* @__PURE__ */ new Set(), e !== void 0 && e > 0 && this._applyLazyDefaultExpansion(i, e), this._activeRowId = null, this._rebuildMaterializedItems(), this._commitLazyRows();
|
|
507
514
|
}
|
|
508
515
|
_loadDefaultExpandedLevelForRoots(e, t) {
|
|
@@ -556,8 +563,8 @@ const u = (v = class extends Y {
|
|
|
556
563
|
const s = this._findNodeById(e, t);
|
|
557
564
|
if (!s) return;
|
|
558
565
|
const r = (o) => {
|
|
559
|
-
var
|
|
560
|
-
i(o), (
|
|
566
|
+
var l;
|
|
567
|
+
i(o), (l = o.children) == null || l.forEach(r);
|
|
561
568
|
};
|
|
562
569
|
r(s);
|
|
563
570
|
}
|
|
@@ -566,20 +573,20 @@ const u = (v = class extends Y {
|
|
|
566
573
|
return t == null ? void 0 : t.children;
|
|
567
574
|
}
|
|
568
575
|
_loadMoreNodes(e) {
|
|
569
|
-
var o,
|
|
576
|
+
var o, l;
|
|
570
577
|
if (!this._isLazyEnabled()) return;
|
|
571
578
|
const t = this._getLazyPageSize();
|
|
572
579
|
let i, s = [];
|
|
573
580
|
if (this._isSearchActive())
|
|
574
|
-
if (
|
|
575
|
-
i =
|
|
581
|
+
if (S(this._searchVisibleIds, this._loadedIds))
|
|
582
|
+
i = G(
|
|
576
583
|
this._searchVisibleIds,
|
|
577
584
|
this._loadedIds,
|
|
578
585
|
this._indexById,
|
|
579
586
|
t
|
|
580
587
|
);
|
|
581
588
|
else if (e != null && this._hasExclusiveSearchFolderWithUnloadedChildren())
|
|
582
|
-
i =
|
|
589
|
+
i = P(
|
|
583
590
|
this._treeIndex,
|
|
584
591
|
this._loadedIds,
|
|
585
592
|
t,
|
|
@@ -588,30 +595,30 @@ const u = (v = class extends Y {
|
|
|
588
595
|
else
|
|
589
596
|
return;
|
|
590
597
|
else if (e != null)
|
|
591
|
-
i =
|
|
598
|
+
i = P(
|
|
592
599
|
this._treeIndex,
|
|
593
600
|
this._loadedIds,
|
|
594
601
|
t,
|
|
595
602
|
e
|
|
596
603
|
);
|
|
597
604
|
else {
|
|
598
|
-
s =
|
|
605
|
+
s = fe(
|
|
599
606
|
this._treeIndex,
|
|
600
607
|
this._loadedIds,
|
|
601
608
|
t
|
|
602
609
|
), i = [...s];
|
|
603
|
-
const
|
|
604
|
-
|
|
610
|
+
const a = (o = this.options) == null ? void 0 : o.defaultExpandedLevel;
|
|
611
|
+
a !== void 0 && a > 0 && i.push(
|
|
605
612
|
...V(
|
|
606
613
|
this._treeIndex,
|
|
607
614
|
s,
|
|
608
|
-
|
|
615
|
+
a
|
|
609
616
|
)
|
|
610
617
|
);
|
|
611
618
|
}
|
|
612
619
|
if (i.length === 0) return;
|
|
613
|
-
i.forEach((
|
|
614
|
-
const r = (
|
|
620
|
+
i.forEach((a) => this._loadedIds.add(a));
|
|
621
|
+
const r = (l = this.options) == null ? void 0 : l.defaultExpandedLevel;
|
|
615
622
|
s.length > 0 && r !== void 0 && r > 0 && this._applyLazyDefaultExpansion(s, r), this._loadedIds = new Set(this._loadedIds), this._rebuildMaterializedItems(), this._commitLazyRows();
|
|
616
623
|
}
|
|
617
624
|
_loadSubtreeForExpand(e) {
|
|
@@ -632,7 +639,7 @@ const u = (v = class extends Y {
|
|
|
632
639
|
this._isLazyEnabled() && this._syncFlatRows();
|
|
633
640
|
}
|
|
634
641
|
_syncFlatRows() {
|
|
635
|
-
this._flatRows =
|
|
642
|
+
this._flatRows = U({
|
|
636
643
|
items: this._items,
|
|
637
644
|
expandedIds: this._expandedIds,
|
|
638
645
|
hasSearch: !!this._searchTerm.trim(),
|
|
@@ -673,7 +680,7 @@ const u = (v = class extends Y {
|
|
|
673
680
|
_getSearchScrollTargetIndex() {
|
|
674
681
|
const e = this._searchTerm.trim().toLowerCase();
|
|
675
682
|
if (!e || this._flatRows.length === 0) return 0;
|
|
676
|
-
const t = this._flatRows.map((r, o) => ({ row: r, index: o })).filter(({ row: r }) =>
|
|
683
|
+
const t = this._flatRows.map((r, o) => ({ row: r, index: o })).filter(({ row: r }) => C(r.node.label, e));
|
|
677
684
|
if (t.length === 0) return 0;
|
|
678
685
|
const i = t.reduce(
|
|
679
686
|
(r, o) => o.row.level >= r.row.level ? o : r
|
|
@@ -688,9 +695,9 @@ const u = (v = class extends Y {
|
|
|
688
695
|
}
|
|
689
696
|
_loadUntilSearchTargetVisible() {
|
|
690
697
|
let e = 0;
|
|
691
|
-
for (; e++ < 100 && !(this._getSearchScrollTargetIndex() < this._flatRows.length || !
|
|
692
|
-
if (
|
|
693
|
-
if (!
|
|
698
|
+
for (; e++ < 100 && !(this._getSearchScrollTargetIndex() < this._flatRows.length || !S(this._searchVisibleIds, this._loadedIds) && !this._hasExpandedUnloadedSubtree()); ) {
|
|
699
|
+
if (S(this._searchVisibleIds, this._loadedIds)) {
|
|
700
|
+
if (!F(
|
|
694
701
|
this._searchVisibleIds,
|
|
695
702
|
this._loadedIds,
|
|
696
703
|
this._indexById,
|
|
@@ -711,7 +718,7 @@ const u = (v = class extends Y {
|
|
|
711
718
|
}
|
|
712
719
|
_hasExpandedUnloadedSubtree() {
|
|
713
720
|
for (const e of this._expandedIds)
|
|
714
|
-
if (
|
|
721
|
+
if (W(e, this._treeIndex, this._loadedIds))
|
|
715
722
|
return !0;
|
|
716
723
|
return !1;
|
|
717
724
|
}
|
|
@@ -722,7 +729,7 @@ const u = (v = class extends Y {
|
|
|
722
729
|
if (!e) return !1;
|
|
723
730
|
for (const t of this._expandedIds) {
|
|
724
731
|
const i = this._sourceById.get(t);
|
|
725
|
-
if (i &&
|
|
732
|
+
if (i && pe(t, this._treeIndex, this._loadedIds) && E(
|
|
726
733
|
i.label,
|
|
727
734
|
e,
|
|
728
735
|
!1,
|
|
@@ -735,36 +742,37 @@ const u = (v = class extends Y {
|
|
|
735
742
|
return !1;
|
|
736
743
|
}
|
|
737
744
|
_shouldLoadMoreOnScroll() {
|
|
738
|
-
return this._isLazyEnabled() ? this._isSearchActive() ?
|
|
745
|
+
return this._isLazyEnabled() ? this._isSearchActive() ? S(
|
|
739
746
|
this._searchVisibleIds,
|
|
740
747
|
this._loadedIds
|
|
741
748
|
) || this._hasExclusiveSearchFolderWithUnloadedChildren() : this._hasExpandedUnloadedSubtree() ? this._treeIndex.some(
|
|
742
749
|
(e) => !this._loadedIds.has(e.id)
|
|
743
|
-
) :
|
|
750
|
+
) : _e(this._treeIndex, this._loadedIds) : !1;
|
|
744
751
|
}
|
|
745
|
-
|
|
752
|
+
_getLazyLoadPriorityNodeId(e, t) {
|
|
746
753
|
if (!(!this._isSearchActive() && !this._hasExpandedUnloadedSubtree()))
|
|
747
754
|
return ve(
|
|
748
755
|
this._flatRows,
|
|
749
756
|
e,
|
|
757
|
+
t,
|
|
750
758
|
this._expandedIds,
|
|
751
759
|
this._treeIndex,
|
|
752
760
|
this._loadedIds,
|
|
753
|
-
this.
|
|
761
|
+
this._getScrollPrefetchMargin()
|
|
754
762
|
);
|
|
755
763
|
}
|
|
756
764
|
_getScrollPrefetchMargin() {
|
|
757
765
|
return Math.min(20, Math.max(5, Math.floor(this._getLazyPageSize() / 4)));
|
|
758
766
|
}
|
|
759
767
|
_onVirtualizerVisibilityChanged(e) {
|
|
760
|
-
const i =
|
|
761
|
-
if (
|
|
768
|
+
const t = e, i = t.first, s = t.last;
|
|
769
|
+
if (s == null || !this._shouldLoadMoreOnScroll() || this._lazyScrollLoading)
|
|
762
770
|
return;
|
|
763
|
-
const s = Math.max(
|
|
771
|
+
const r = this._getLazyLoadPriorityNodeId(i ?? s, s), o = Math.max(
|
|
764
772
|
0,
|
|
765
773
|
this._flatRows.length - this._getScrollPrefetchMargin()
|
|
766
774
|
);
|
|
767
|
-
|
|
775
|
+
r == null && s < o || (this._lazyScrollLoading = !0, this._loadMoreNodes(r), this.updateComplete.then(() => {
|
|
768
776
|
this._lazyScrollLoading = !1;
|
|
769
777
|
}));
|
|
770
778
|
}
|
|
@@ -773,23 +781,23 @@ const u = (v = class extends Y {
|
|
|
773
781
|
return ((t = (e = this.options) == null ? void 0 : e.title) == null ? void 0 : t.trim()) || "Treeview";
|
|
774
782
|
}
|
|
775
783
|
_renderTreeRow(e, t, i) {
|
|
776
|
-
const { isExpanded: s, hasChildren: r, isRowHighlighted: o, isSelectable:
|
|
784
|
+
const { isExpanded: s, hasChildren: r, isRowHighlighted: o, isSelectable: l } = i;
|
|
777
785
|
return h`
|
|
778
786
|
<div
|
|
779
787
|
id=${this._rowDomId(e.id)}
|
|
780
788
|
role="treeitem"
|
|
781
789
|
aria-level=${t + 1}
|
|
782
|
-
aria-expanded=${r ? s ? "true" : "false" :
|
|
783
|
-
class=${
|
|
790
|
+
aria-expanded=${r ? s ? "true" : "false" : m}
|
|
791
|
+
class=${g({
|
|
784
792
|
"node-row": !0,
|
|
785
|
-
selectable:
|
|
793
|
+
selectable: l,
|
|
786
794
|
selected: o
|
|
787
795
|
})}
|
|
788
796
|
style="--treeview-row-level: ${t}"
|
|
789
797
|
tabindex=${this._getRowTabIndex(e.id)}
|
|
790
|
-
@mousedown=${(
|
|
798
|
+
@mousedown=${(a) => a.preventDefault()}
|
|
791
799
|
@focus=${() => this._setActiveRow(e.id)}
|
|
792
|
-
@keydown=${(
|
|
800
|
+
@keydown=${(a) => this._handleRowKeyDown(a, e)}
|
|
793
801
|
@focusout=${this._handleRowFocusOut}
|
|
794
802
|
>
|
|
795
803
|
<div class="node-info">
|
|
@@ -818,8 +826,8 @@ const u = (v = class extends Y {
|
|
|
818
826
|
>
|
|
819
827
|
<nyx-icon
|
|
820
828
|
slot="icon"
|
|
821
|
-
class=${
|
|
822
|
-
.svg=${
|
|
829
|
+
class=${g({ expanded: t })}
|
|
830
|
+
.svg=${X}
|
|
823
831
|
></nyx-icon>
|
|
824
832
|
</nyx-button>
|
|
825
833
|
` : h`<span class="expander-placeholder" aria-hidden="true"></span>`;
|
|
@@ -828,12 +836,12 @@ const u = (v = class extends Y {
|
|
|
828
836
|
const t = e.icon;
|
|
829
837
|
return t ? typeof t == "string" ? h`<nyx-icon name=${t} variant="regular"></nyx-icon>` : h`
|
|
830
838
|
<nyx-icon
|
|
831
|
-
name=${t.name ??
|
|
839
|
+
name=${t.name ?? m}
|
|
832
840
|
variant=${t.variant ?? "regular"}
|
|
833
|
-
src=${t.src ??
|
|
841
|
+
src=${t.src ?? m}
|
|
834
842
|
.svg=${t.svg}
|
|
835
843
|
></nyx-icon>
|
|
836
|
-
` :
|
|
844
|
+
` : m;
|
|
837
845
|
}
|
|
838
846
|
_generateLightDomIcons() {
|
|
839
847
|
var i;
|
|
@@ -885,8 +893,8 @@ const u = (v = class extends Y {
|
|
|
885
893
|
}
|
|
886
894
|
/** Transitive set of prerequisite column ids for `columnId` (excludes itself). */
|
|
887
895
|
_requiredClosure(e) {
|
|
888
|
-
var
|
|
889
|
-
const t = ((
|
|
896
|
+
var l, a, d;
|
|
897
|
+
const t = ((l = this.options) == null ? void 0 : l.columns) ?? [], i = new Map(t.map((c) => [c.id, c])), s = [], r = /* @__PURE__ */ new Set([e]), o = [...((a = i.get(e)) == null ? void 0 : a.requires) ?? []];
|
|
890
898
|
for (; o.length; ) {
|
|
891
899
|
const c = o.pop();
|
|
892
900
|
r.has(c) || (r.add(c), s.push(c), o.push(...((d = i.get(c)) == null ? void 0 : d.requires) ?? []));
|
|
@@ -898,9 +906,9 @@ const u = (v = class extends Y {
|
|
|
898
906
|
var o;
|
|
899
907
|
const t = ((o = this.options) == null ? void 0 : o.columns) ?? [], i = [], s = /* @__PURE__ */ new Set([e]), r = [e];
|
|
900
908
|
for (; r.length; ) {
|
|
901
|
-
const
|
|
902
|
-
for (const
|
|
903
|
-
(
|
|
909
|
+
const l = r.pop();
|
|
910
|
+
for (const a of t)
|
|
911
|
+
(a.requires ?? []).includes(l) && !s.has(a.id) && (s.add(a.id), i.push(a.id), r.push(a.id));
|
|
904
912
|
}
|
|
905
913
|
return i;
|
|
906
914
|
}
|
|
@@ -912,15 +920,15 @@ const u = (v = class extends Y {
|
|
|
912
920
|
_handleCheck(e, t) {
|
|
913
921
|
const i = this._selectionNode(e);
|
|
914
922
|
if (this._isColumnDisabled(i, t)) return;
|
|
915
|
-
const r = !this._isNodeSelected(i, t), o = this._requiredClosure(t),
|
|
916
|
-
this._forEachInSubtree(this._selectionRoots(), e.id, (
|
|
923
|
+
const r = !this._isNodeSelected(i, t), o = this._requiredClosure(t), l = r ? [t, ...o] : [t, ...this._dependentsClosure(t)];
|
|
924
|
+
this._forEachInSubtree(this._selectionRoots(), e.id, (a) => {
|
|
917
925
|
r && o.some(
|
|
918
|
-
(c) => this._isColumnDisabled(
|
|
919
|
-
) ||
|
|
920
|
-
(d) => this._toggleNodeState(
|
|
926
|
+
(c) => this._isColumnDisabled(a, c)
|
|
927
|
+
) || l.forEach(
|
|
928
|
+
(d) => this._toggleNodeState(a, d, r)
|
|
921
929
|
);
|
|
922
|
-
}),
|
|
923
|
-
(
|
|
930
|
+
}), l.forEach(
|
|
931
|
+
(a) => this._updateParents(this._selectionRoots(), e.id, a)
|
|
924
932
|
), this._triggerChange();
|
|
925
933
|
}
|
|
926
934
|
_toggleNodeState(e, t, i) {
|
|
@@ -1047,7 +1055,7 @@ const u = (v = class extends Y {
|
|
|
1047
1055
|
}
|
|
1048
1056
|
this._searchDebounceTimer = setTimeout(() => {
|
|
1049
1057
|
this._searchDebounceTimer = null, this._applySearchTerm(t, i);
|
|
1050
|
-
},
|
|
1058
|
+
}, re);
|
|
1051
1059
|
}
|
|
1052
1060
|
_applySearchTerm(e, t) {
|
|
1053
1061
|
const i = t.trim(), s = e.trim();
|
|
@@ -1059,14 +1067,14 @@ const u = (v = class extends Y {
|
|
|
1059
1067
|
this._searchVisibleIds = /* @__PURE__ */ new Set(), this._expandedIdsBeforeSearch && (this._expandedIds = new Set(this._expandedIdsBeforeSearch), this._expandedIdsBeforeSearch = null), this._isLazyEnabled() ? this._commitLazyRows() : this._syncActiveRowWithVisibleRows(), this._updateSearchStatusMessage();
|
|
1060
1068
|
return;
|
|
1061
1069
|
}
|
|
1062
|
-
const t = this._ensureSearchIndex(), { visibleIds: i, expandIds: s } =
|
|
1070
|
+
const t = this._ensureSearchIndex(), { visibleIds: i, expandIds: s } = ae(
|
|
1063
1071
|
t,
|
|
1064
1072
|
e,
|
|
1065
1073
|
this._searchUserCollapsedIds
|
|
1066
1074
|
), r = new Set(s);
|
|
1067
1075
|
this._searchManualExpandedIds.forEach((o) => {
|
|
1068
1076
|
this._searchUserCollapsedIds.has(o) || r.add(o);
|
|
1069
|
-
}), this._searchVisibleIds = i, this._expandedIds = r, this._isLazyEnabled() ? (
|
|
1077
|
+
}), this._searchVisibleIds = i, this._expandedIds = r, this._isLazyEnabled() ? (F(
|
|
1070
1078
|
i,
|
|
1071
1079
|
this._loadedIds,
|
|
1072
1080
|
this._indexById,
|
|
@@ -1093,7 +1101,7 @@ const u = (v = class extends Y {
|
|
|
1093
1101
|
return this._isLazyEnabled() ? this._sourceHasChildren(e.id) : !!(e.children && e.children.length > 0);
|
|
1094
1102
|
}
|
|
1095
1103
|
_getVisibleTreeRows() {
|
|
1096
|
-
return this._isLazyEnabled() ? this._flatRows :
|
|
1104
|
+
return this._isLazyEnabled() ? this._flatRows : U({
|
|
1097
1105
|
items: this._items,
|
|
1098
1106
|
expandedIds: this._expandedIds,
|
|
1099
1107
|
hasSearch: this._isSearchActive(),
|
|
@@ -1114,10 +1122,10 @@ const u = (v = class extends Y {
|
|
|
1114
1122
|
}
|
|
1115
1123
|
let t;
|
|
1116
1124
|
const i = (r, o) => {
|
|
1117
|
-
for (const
|
|
1118
|
-
if (
|
|
1125
|
+
for (const l of r) {
|
|
1126
|
+
if (l.id === e)
|
|
1119
1127
|
return t = o ?? void 0, !0;
|
|
1120
|
-
if (
|
|
1128
|
+
if (l.children && i(l.children, l.id))
|
|
1121
1129
|
return !0;
|
|
1122
1130
|
}
|
|
1123
1131
|
return !1;
|
|
@@ -1128,12 +1136,12 @@ const u = (v = class extends Y {
|
|
|
1128
1136
|
this._setActiveRow(e), this.updateComplete.then(() => {
|
|
1129
1137
|
var i, s, r;
|
|
1130
1138
|
if (this._isLazyEnabled()) {
|
|
1131
|
-
const o = this._flatRows.findIndex((
|
|
1139
|
+
const o = this._flatRows.findIndex((l) => l.node.id === e);
|
|
1132
1140
|
if (o >= 0) {
|
|
1133
|
-
const
|
|
1141
|
+
const l = (i = this.shadowRoot) == null ? void 0 : i.querySelector(
|
|
1134
1142
|
"lit-virtualizer"
|
|
1135
1143
|
);
|
|
1136
|
-
(s =
|
|
1144
|
+
(s = l == null ? void 0 : l.scrollToIndex) == null || s.call(l, o, "nearest");
|
|
1137
1145
|
}
|
|
1138
1146
|
}
|
|
1139
1147
|
const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector(
|
|
@@ -1153,11 +1161,11 @@ const u = (v = class extends Y {
|
|
|
1153
1161
|
}
|
|
1154
1162
|
}
|
|
1155
1163
|
async _handleRowKeyDown(e, t) {
|
|
1156
|
-
var
|
|
1164
|
+
var a;
|
|
1157
1165
|
const i = e.currentTarget;
|
|
1158
1166
|
if (e.target !== i)
|
|
1159
1167
|
return;
|
|
1160
|
-
const s = this._getVisibleTreeRows(), r = s.findIndex((d) => d.node.id === t.id), o = this._nodeHasChildren(t),
|
|
1168
|
+
const s = this._getVisibleTreeRows(), r = s.findIndex((d) => d.node.id === t.id), o = this._nodeHasChildren(t), l = this._expandedIds.has(t.id);
|
|
1161
1169
|
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
|
|
1162
1170
|
const d = e.key === "ArrowDown" ? r + 1 : r - 1;
|
|
1163
1171
|
d >= 0 && d < s.length && (e.preventDefault(), this._focusRowById(s[d].node.id));
|
|
@@ -1172,7 +1180,7 @@ const u = (v = class extends Y {
|
|
|
1172
1180
|
}
|
|
1173
1181
|
if (e.key === "ArrowRight") {
|
|
1174
1182
|
if (!o) return;
|
|
1175
|
-
if (e.preventDefault(), !
|
|
1183
|
+
if (e.preventDefault(), !l) {
|
|
1176
1184
|
await this._toggleExpand(t, !0);
|
|
1177
1185
|
return;
|
|
1178
1186
|
}
|
|
@@ -1180,7 +1188,7 @@ const u = (v = class extends Y {
|
|
|
1180
1188
|
return;
|
|
1181
1189
|
}
|
|
1182
1190
|
if (e.key === "ArrowLeft") {
|
|
1183
|
-
if (e.preventDefault(), o &&
|
|
1191
|
+
if (e.preventDefault(), o && l) {
|
|
1184
1192
|
await this._toggleExpand(t, !1), i.focus();
|
|
1185
1193
|
return;
|
|
1186
1194
|
}
|
|
@@ -1197,7 +1205,7 @@ const u = (v = class extends Y {
|
|
|
1197
1205
|
if (d instanceof HTMLInputElement)
|
|
1198
1206
|
d.focus();
|
|
1199
1207
|
else {
|
|
1200
|
-
const c = (
|
|
1208
|
+
const c = (a = d.shadowRoot) == null ? void 0 : a.querySelector("button");
|
|
1201
1209
|
c == null || c.focus();
|
|
1202
1210
|
}
|
|
1203
1211
|
return;
|
|
@@ -1240,14 +1248,14 @@ const u = (v = class extends Y {
|
|
|
1240
1248
|
tabindex="-1"
|
|
1241
1249
|
name=${this._rowSelectionRadioName}
|
|
1242
1250
|
.checked=${this._isRowCheckboxChecked(e)}
|
|
1243
|
-
aria-label=${
|
|
1251
|
+
aria-label=${q(e.label)}
|
|
1244
1252
|
/>
|
|
1245
1253
|
</nyx-radio>
|
|
1246
1254
|
</div>
|
|
1247
1255
|
` : h`
|
|
1248
1256
|
<div class="row-checkbox">
|
|
1249
1257
|
<nyx-checkbox
|
|
1250
|
-
aria-label=${
|
|
1258
|
+
aria-label=${q(e.label)}
|
|
1251
1259
|
?checked=${this._isRowCheckboxChecked(e)}
|
|
1252
1260
|
?indeterminate=${this._isRowCheckboxIndeterminate(e)}
|
|
1253
1261
|
@click=${(t) => {
|
|
@@ -1257,14 +1265,14 @@ const u = (v = class extends Y {
|
|
|
1257
1265
|
<input type="checkbox" slot="input" tabindex="-1" />
|
|
1258
1266
|
</nyx-checkbox>
|
|
1259
1267
|
</div>
|
|
1260
|
-
` :
|
|
1268
|
+
` : m;
|
|
1261
1269
|
}
|
|
1262
1270
|
_renderNodeIconCell(e) {
|
|
1263
1271
|
return this._showNodeIcons() ? h`
|
|
1264
1272
|
<div class="node-type-icon-wrapper">
|
|
1265
1273
|
${this._isLazyEnabled() ? this._renderNodeTypeIcon(e) : h`<slot name="generated-tree-icon-${e.id}"></slot>`}
|
|
1266
1274
|
</div>
|
|
1267
|
-
` :
|
|
1275
|
+
` : m;
|
|
1268
1276
|
}
|
|
1269
1277
|
_renderColumnCheckboxes(e) {
|
|
1270
1278
|
return this._hasColumnPermissions() ? h`
|
|
@@ -1303,14 +1311,14 @@ const u = (v = class extends Y {
|
|
|
1303
1311
|
`
|
|
1304
1312
|
)}
|
|
1305
1313
|
</div>
|
|
1306
|
-
` :
|
|
1314
|
+
` : m;
|
|
1307
1315
|
}
|
|
1308
1316
|
render() {
|
|
1309
1317
|
var i, s, r;
|
|
1310
1318
|
const e = this._hasColumnPermissions(), t = e ? ((s = (i = this.options) == null ? void 0 : i.columns) == null ? void 0 : s.length) ?? 0 : 0;
|
|
1311
1319
|
return h`
|
|
1312
1320
|
<div
|
|
1313
|
-
class=${
|
|
1321
|
+
class=${g({
|
|
1314
1322
|
"nyx-treeview": !0,
|
|
1315
1323
|
"nyx-treeview--no-columns": !e,
|
|
1316
1324
|
"nyx-treeview--row-selection": this._showRowSelection(),
|
|
@@ -1321,7 +1329,7 @@ const u = (v = class extends Y {
|
|
|
1321
1329
|
>
|
|
1322
1330
|
<div class="search-container">
|
|
1323
1331
|
<nyx-input>
|
|
1324
|
-
<nyx-icon .svg=${
|
|
1332
|
+
<nyx-icon .svg=${ee} slot="iconLeft"></nyx-icon>
|
|
1325
1333
|
<input
|
|
1326
1334
|
class="search-input"
|
|
1327
1335
|
type="text"
|
|
@@ -1343,7 +1351,7 @@ const u = (v = class extends Y {
|
|
|
1343
1351
|
|
|
1344
1352
|
<div class="tree-scroll">
|
|
1345
1353
|
<div
|
|
1346
|
-
class=${
|
|
1354
|
+
class=${g({
|
|
1347
1355
|
"tree-header": !0,
|
|
1348
1356
|
"tree-header--no-columns": !e
|
|
1349
1357
|
})}
|
|
@@ -1352,18 +1360,18 @@ const u = (v = class extends Y {
|
|
|
1352
1360
|
${e ? h`
|
|
1353
1361
|
<div class="header-columns">
|
|
1354
1362
|
${this.options.columns.map(
|
|
1355
|
-
(o,
|
|
1363
|
+
(o, l) => h`
|
|
1356
1364
|
<div class="col-cell" title="${o.title || ""}">
|
|
1357
|
-
<slot name="generated-header-icon-${
|
|
1365
|
+
<slot name="generated-header-icon-${l}"></slot>
|
|
1358
1366
|
</div>
|
|
1359
1367
|
`
|
|
1360
1368
|
)}
|
|
1361
1369
|
</div>
|
|
1362
|
-
` :
|
|
1370
|
+
` : m}
|
|
1363
1371
|
</div>
|
|
1364
1372
|
|
|
1365
1373
|
<div
|
|
1366
|
-
class=${
|
|
1374
|
+
class=${g({
|
|
1367
1375
|
"tree-body": !0,
|
|
1368
1376
|
"tree-body--virtual": this._isLazyEnabled()
|
|
1369
1377
|
})}
|
|
@@ -1386,51 +1394,51 @@ const u = (v = class extends Y {
|
|
|
1386
1394
|
`;
|
|
1387
1395
|
}
|
|
1388
1396
|
_renderFlatRow(e) {
|
|
1389
|
-
const { node: t, level: i, revealSubtree: s, parentLabelMatched: r } = e, o = this._expandedIds.has(t.id),
|
|
1397
|
+
const { node: t, level: i, revealSubtree: s, parentLabelMatched: r } = e, o = this._expandedIds.has(t.id), l = e.hasChildrenInSource, a = this._showRowSelection(), d = this._isRowCheckboxChecked(t) || this._isRowCheckboxIndeterminate(t);
|
|
1390
1398
|
return h`
|
|
1391
1399
|
<div class="node-wrapper node-wrapper--flat">
|
|
1392
1400
|
${this._renderTreeRow(t, i, {
|
|
1393
1401
|
isExpanded: o,
|
|
1394
|
-
hasChildren:
|
|
1402
|
+
hasChildren: l,
|
|
1395
1403
|
isRowHighlighted: d,
|
|
1396
|
-
isSelectable:
|
|
1404
|
+
isSelectable: a
|
|
1397
1405
|
})}
|
|
1398
1406
|
</div>
|
|
1399
1407
|
`;
|
|
1400
1408
|
}
|
|
1401
1409
|
_renderNodes(e, t, i = !1, s = !1, r = !1) {
|
|
1402
|
-
const o = !!this._searchTerm.trim(),
|
|
1403
|
-
return
|
|
1404
|
-
|
|
1410
|
+
const o = !!this._searchTerm.trim(), l = this._searchTerm.trim().toLowerCase(), a = o && !r ? e.filter((d) => this._searchVisibleIds.has(d.id)) : e;
|
|
1411
|
+
return Q(
|
|
1412
|
+
a,
|
|
1405
1413
|
(d) => d.id,
|
|
1406
1414
|
(d) => {
|
|
1407
|
-
const c = this._expandedIds.has(d.id),
|
|
1415
|
+
const c = this._expandedIds.has(d.id), u = this._isLazyEnabled() ? this._sourceHasChildren(d.id) : !!(d.children && d.children.length > 0), f = this._isRowCheckboxChecked(d) || this._isRowCheckboxIndeterminate(d), w = this._showRowSelection(), b = O(
|
|
1408
1416
|
d.label,
|
|
1409
|
-
|
|
1417
|
+
l,
|
|
1410
1418
|
i,
|
|
1411
1419
|
s
|
|
1412
|
-
), N = !o ||
|
|
1420
|
+
), N = !o || b && E(
|
|
1413
1421
|
d.label,
|
|
1414
|
-
|
|
1422
|
+
l,
|
|
1415
1423
|
s,
|
|
1416
1424
|
d.id,
|
|
1417
1425
|
this._searchVisibleIds,
|
|
1418
1426
|
(R) => this._getSourceChildren(R)
|
|
1419
|
-
) ? d.children :
|
|
1427
|
+
) ? d.children : B(d, this._searchVisibleIds, l), I = s || o && !!l && d.label.toLowerCase().includes(l);
|
|
1420
1428
|
return h`
|
|
1421
1429
|
<div class="node-wrapper">
|
|
1422
1430
|
${this._renderTreeRow(d, t, {
|
|
1423
1431
|
isExpanded: c,
|
|
1424
|
-
hasChildren:
|
|
1425
|
-
isRowHighlighted:
|
|
1426
|
-
isSelectable:
|
|
1432
|
+
hasChildren: u,
|
|
1433
|
+
isRowHighlighted: f,
|
|
1434
|
+
isSelectable: w
|
|
1427
1435
|
})}
|
|
1428
|
-
${c &&
|
|
1436
|
+
${c && u ? h`<div class="node-children" role="group">
|
|
1429
1437
|
${this._renderNodes(
|
|
1430
1438
|
N,
|
|
1431
1439
|
t + 1,
|
|
1432
|
-
|
|
1433
|
-
|
|
1440
|
+
b,
|
|
1441
|
+
I,
|
|
1434
1442
|
!0
|
|
1435
1443
|
)}
|
|
1436
1444
|
</div>` : ""}
|
|
@@ -1439,44 +1447,44 @@ const u = (v = class extends Y {
|
|
|
1439
1447
|
}
|
|
1440
1448
|
);
|
|
1441
1449
|
}
|
|
1442
|
-
},
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
],
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
],
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
],
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
],
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
],
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
],
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
],
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
],
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
],
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
],
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
],
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
],
|
|
1479
|
-
let ke =
|
|
1450
|
+
}, x._nextTreeviewId = 0, x.styles = Y(se), x);
|
|
1451
|
+
p([
|
|
1452
|
+
J({ type: Object, noAccessor: !0 })
|
|
1453
|
+
], _.prototype, "options", 1);
|
|
1454
|
+
p([
|
|
1455
|
+
v()
|
|
1456
|
+
], _.prototype, "_items", 2);
|
|
1457
|
+
p([
|
|
1458
|
+
v()
|
|
1459
|
+
], _.prototype, "_expandedIds", 2);
|
|
1460
|
+
p([
|
|
1461
|
+
v()
|
|
1462
|
+
], _.prototype, "_searchTerm", 2);
|
|
1463
|
+
p([
|
|
1464
|
+
v()
|
|
1465
|
+
], _.prototype, "_searchStatusMessage", 2);
|
|
1466
|
+
p([
|
|
1467
|
+
v()
|
|
1468
|
+
], _.prototype, "_searchVisibleIds", 2);
|
|
1469
|
+
p([
|
|
1470
|
+
v()
|
|
1471
|
+
], _.prototype, "_searchUserCollapsedIds", 2);
|
|
1472
|
+
p([
|
|
1473
|
+
v()
|
|
1474
|
+
], _.prototype, "_searchManualExpandedIds", 2);
|
|
1475
|
+
p([
|
|
1476
|
+
v()
|
|
1477
|
+
], _.prototype, "_flatRows", 2);
|
|
1478
|
+
p([
|
|
1479
|
+
v()
|
|
1480
|
+
], _.prototype, "_loadedIds", 2);
|
|
1481
|
+
p([
|
|
1482
|
+
v()
|
|
1483
|
+
], _.prototype, "_activeRowId", 2);
|
|
1484
|
+
p([
|
|
1485
|
+
ie("nyx-change")
|
|
1486
|
+
], _.prototype, "onChange", 2);
|
|
1487
|
+
let ke = _;
|
|
1480
1488
|
customElements.get("nyx-treeview") || customElements.define("nyx-treeview", ke);
|
|
1481
1489
|
export {
|
|
1482
1490
|
ke as NyxTreeview
|