@cas-smartdesign/tree 4.0.5 → 4.1.0
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/docs/3_lazy_loading.js +1 -1
- package/dist/docs/doc.css +1 -1
- package/dist/docs/doc.mjs +78 -81
- package/dist/tree-with-externals.js +34 -52
- package/dist/tree-with-externals.js.map +4 -4
- package/dist/tree.mjs +205 -207
- package/dist/tree.mjs.map +1 -1
- package/npm-third-party-licenses.json +52 -47
- package/package.json +10 -10
package/dist/tree.mjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { LitElement as I,
|
|
1
|
+
import { LitElement as I, unsafeCSS as C, css as k, html as r, render as R } from "lit";
|
|
2
2
|
import { property as a } from "lit/decorators/property.js";
|
|
3
3
|
import { SDCheckbox as O } from "@cas-smartdesign/checkbox";
|
|
4
4
|
import { RadioButton as B } from "@cas-smartdesign/radio-button-group";
|
|
5
|
-
const
|
|
5
|
+
const D = 16, S = 35;
|
|
6
6
|
class E {
|
|
7
|
-
constructor(e,
|
|
8
|
-
this.id = e, this.text =
|
|
7
|
+
constructor(e, t, s, i) {
|
|
8
|
+
this.id = e, this.text = t, this.path = s, this.nodes = i, this.depth = 0, this.selectionState = "unchecked", this.expanded = !1, this.parentSelectionAllowed = !1, this.lastLoadingChild = !1, this.loading = !1, this.disabled = !1, this.parent = [], s ? (this.depth = s.length - 1, this.parent = s.slice(0, -1)) : this.path = [e], this.childCount = i ? i.length : 0;
|
|
9
9
|
}
|
|
10
10
|
updateSelectionStateOfChildren() {
|
|
11
11
|
this.nodes.forEach((e) => {
|
|
@@ -13,8 +13,7 @@ class E {
|
|
|
13
13
|
if (e.childrenType === "radio" || A(e))
|
|
14
14
|
return;
|
|
15
15
|
e.selectionState = "checked";
|
|
16
|
-
} else
|
|
17
|
-
this.selectionState === "unchecked" && (e.selectionState = "unchecked");
|
|
16
|
+
} else this.selectionState === "unchecked" && (e.selectionState = "unchecked");
|
|
18
17
|
e.updateSelectionStateOfChildren();
|
|
19
18
|
});
|
|
20
19
|
}
|
|
@@ -39,10 +38,10 @@ class E {
|
|
|
39
38
|
return !0;
|
|
40
39
|
}
|
|
41
40
|
}
|
|
42
|
-
const T = (d) =>
|
|
43
|
-
class
|
|
44
|
-
constructor(e,
|
|
45
|
-
super(e,
|
|
41
|
+
const T = (d) => d?.type === "checkbox", A = (d) => d?.type === "radio";
|
|
42
|
+
class q extends E {
|
|
43
|
+
constructor(e, t, s, i) {
|
|
44
|
+
super(e, t, s, i), this.type = "checkbox";
|
|
46
45
|
}
|
|
47
46
|
toggle() {
|
|
48
47
|
this.selectionState === "checked" ? this.selectionState = "unchecked" : this.selectionState = "checked", this.updateBranch();
|
|
@@ -53,23 +52,23 @@ class P extends E {
|
|
|
53
52
|
updateSelectionStateByChildren() {
|
|
54
53
|
if (this.nodes.length === 0)
|
|
55
54
|
return;
|
|
56
|
-
const e = this.nodes.map((
|
|
55
|
+
const e = this.nodes.map((s) => s.selectionState === "checked" || s.selectionState === "indeterminate"), t = e.some(Boolean);
|
|
57
56
|
if (this.parentSelectionAllowed)
|
|
58
|
-
this.selectionState =
|
|
57
|
+
this.selectionState = t ? "checked" : "unchecked";
|
|
59
58
|
else {
|
|
60
|
-
const
|
|
61
|
-
this.childrenType === "radio" ? this.selectionState =
|
|
59
|
+
const s = e.every(Boolean), i = this.nodes.map((n) => n.selectionState).some((n) => n === "indeterminate");
|
|
60
|
+
this.childrenType === "radio" ? this.selectionState = t ? "checked" : "unchecked" : i ? this.selectionState = "indeterminate" : s ? this.selectionState = "checked" : t ? this.selectionState = "indeterminate" : this.selectionState = "unchecked";
|
|
62
61
|
}
|
|
63
62
|
}
|
|
64
63
|
getFlattenedSubtree(e) {
|
|
65
|
-
return e.reduce((
|
|
66
|
-
T(
|
|
64
|
+
return e.reduce((t, s) => t.concat(
|
|
65
|
+
T(s) && s.childCount > 0 && s.expanded ? [s, ...this.getFlattenedSubtree(s.nodes)] : s
|
|
67
66
|
), []);
|
|
68
67
|
}
|
|
69
68
|
}
|
|
70
69
|
class v extends E {
|
|
71
|
-
constructor(e,
|
|
72
|
-
super(e,
|
|
70
|
+
constructor(e, t, s, i) {
|
|
71
|
+
super(e, t, s, i), this.type = "radio";
|
|
73
72
|
}
|
|
74
73
|
toggle() {
|
|
75
74
|
this.selectionState === "checked" ? this.selectionState = "unchecked" : (this.selectionState = "checked", this.clearSiblings()), this.updateBranch();
|
|
@@ -87,21 +86,21 @@ class v extends E {
|
|
|
87
86
|
updateSelectionStateByChildren() {
|
|
88
87
|
if (this.nodes.length === 0)
|
|
89
88
|
return;
|
|
90
|
-
this.nodes.map((
|
|
89
|
+
this.nodes.map((t) => t.selectionState === "checked").some(Boolean) ? this.selectionState = "checked" : this.selectionState = "unchecked";
|
|
91
90
|
}
|
|
92
91
|
clearSiblings() {
|
|
93
|
-
this.getSiblings().forEach((
|
|
94
|
-
|
|
92
|
+
this.getSiblings().forEach((t) => {
|
|
93
|
+
t.uncheck();
|
|
95
94
|
});
|
|
96
95
|
}
|
|
97
96
|
}
|
|
98
|
-
const
|
|
99
|
-
var
|
|
100
|
-
for (var i =
|
|
101
|
-
(o = d[n]) && (i =
|
|
102
|
-
return
|
|
103
|
-
},
|
|
104
|
-
const c = (
|
|
97
|
+
const z = `:host{width:100%;display:block;contain:layout;position:absolute}:host([readonly][focused]){background-color:#1467ba4d}.node{height:35px;display:flex;align-items:center}.node .expander,.node .placeholder{height:28px;width:30px;flex-shrink:0}.node .expander{cursor:pointer;background-position:center;background-size:24px;flex:0 0 auto}.node .expander.more{background-image:url("data:image/svg+xml,%3csvg%20height='32'%20viewBox='0%200%2032%2032'%20width='32'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m15%2021%209.5-9.5%209.5%209.5'%20fill='none'%20stroke='%23999'%20stroke-linecap='square'%20stroke-width='2'%20transform='matrix(0%201%20-1%200%2032.25%20-8.25)'/%3e%3c/svg%3e")}.node .expander.less{background-image:url("data:image/svg+xml,%3csvg%20height='32'%20viewBox='0%200%2032%2032'%20width='32'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m19.75%206.75%209.5%209.5-9.5%209.5'%20fill='none'%20stroke='%23999'%20stroke-linecap='square'%20stroke-width='2'%20transform='matrix(0%201%20-1%200%2032.25%20-8.25)'/%3e%3c/svg%3e")}.node .label{outline:none}.node .input{overflow:hidden}.node ul{list-style-type:none;margin:0;padding:0}`;
|
|
98
|
+
var M = Object.defineProperty, u = (d, e, t, s) => {
|
|
99
|
+
for (var i = void 0, n = d.length - 1, o; n >= 0; n--)
|
|
100
|
+
(o = d[n]) && (i = o(e, t, i) || i);
|
|
101
|
+
return i && M(e, t, i), i;
|
|
102
|
+
}, p;
|
|
103
|
+
const c = (p = class extends I {
|
|
105
104
|
constructor() {
|
|
106
105
|
super(...arguments), this.text = "", this.expanded = !1, this.childCount = 0, this.focused = !1, this.readonly = !1, this.depth = 0, this.path = [], this.type = "checkbox", this.selectionState = "unchecked", this.disabled = !1, this.loading = !1, this.onSelectionChange = () => {
|
|
107
106
|
if (!this.readonly) {
|
|
@@ -130,15 +129,15 @@ const c = (f = class extends I {
|
|
|
130
129
|
}
|
|
131
130
|
static get styles() {
|
|
132
131
|
return [
|
|
133
|
-
|
|
134
|
-
${
|
|
132
|
+
k`
|
|
133
|
+
${C(z)}
|
|
135
134
|
`
|
|
136
135
|
];
|
|
137
136
|
}
|
|
138
137
|
render() {
|
|
139
138
|
const e = this.childCount > 0 || this.children.length > 0;
|
|
140
139
|
return r`
|
|
141
|
-
<li class="node" style="margin-left: ${this.depth *
|
|
140
|
+
<li class="node" style="margin-left: ${this.depth * D}px">
|
|
142
141
|
${e ? r` <div class="expander ${this.expanded ? "less" : "more"}" @click="${this.toggle}"></div> ` : r` <div class="placeholder"></div> `}
|
|
143
142
|
${this.readonly ? r` <div class="label">${this.text}</div> ` : r`
|
|
144
143
|
${this.type === "checkbox" ? r`
|
|
@@ -190,10 +189,9 @@ const c = (f = class extends I {
|
|
|
190
189
|
}
|
|
191
190
|
}
|
|
192
191
|
getState(e) {
|
|
193
|
-
|
|
194
|
-
const s = Array.isArray(e) ? [...e, this.nodeId] : [this.nodeId], t = [...this.children].map((o) => o.getState(s));
|
|
192
|
+
const t = Array.isArray(e) ? [...e, this.nodeId] : [this.nodeId], s = [...this.children].map((n) => n.getState(t));
|
|
195
193
|
let i;
|
|
196
|
-
return this.type === "checkbox" ? i = new
|
|
194
|
+
return this.type === "checkbox" ? i = new q(this.nodeId, this.text, t, s) : i = new v(this.nodeId, this.text, t, s), i.selectionState = this.selectionState, i.childrenType = s[0]?.type, i.expanded = this.expanded, i.disabled = this.disabled, i;
|
|
197
195
|
}
|
|
198
196
|
dispatchExpansionEvent() {
|
|
199
197
|
this.dispatchEvent(
|
|
@@ -204,94 +202,94 @@ const c = (f = class extends I {
|
|
|
204
202
|
})
|
|
205
203
|
);
|
|
206
204
|
}
|
|
207
|
-
},
|
|
208
|
-
B.ensureDefined(), O.ensureDefined(), customElements.get(
|
|
209
|
-
},
|
|
205
|
+
}, p.ID = "sd-tree-node", p.ensureDefined = () => {
|
|
206
|
+
B.ensureDefined(), O.ensureDefined(), customElements.get(p.ID) || customElements.define(p.ID, p);
|
|
207
|
+
}, p);
|
|
210
208
|
u([
|
|
211
209
|
a({ type: String, reflect: !0, attribute: !0 })
|
|
212
|
-
], c.prototype, "text"
|
|
210
|
+
], c.prototype, "text");
|
|
213
211
|
u([
|
|
214
212
|
a({ type: Boolean, reflect: !0, attribute: !0 })
|
|
215
|
-
], c.prototype, "expanded"
|
|
213
|
+
], c.prototype, "expanded");
|
|
216
214
|
u([
|
|
217
215
|
a({ type: String, reflect: !0, attribute: "node-id" })
|
|
218
|
-
], c.prototype, "nodeId"
|
|
216
|
+
], c.prototype, "nodeId");
|
|
219
217
|
u([
|
|
220
218
|
a({ type: Number, reflect: !0, attribute: "child-count" })
|
|
221
|
-
], c.prototype, "childCount"
|
|
219
|
+
], c.prototype, "childCount");
|
|
222
220
|
u([
|
|
223
221
|
a({ type: Boolean, reflect: !0, attribute: !0 })
|
|
224
|
-
], c.prototype, "focused"
|
|
222
|
+
], c.prototype, "focused");
|
|
225
223
|
u([
|
|
226
224
|
a({ type: Boolean, reflect: !0, attribute: !0 })
|
|
227
|
-
], c.prototype, "readonly"
|
|
225
|
+
], c.prototype, "readonly");
|
|
228
226
|
u([
|
|
229
227
|
a({ type: Number })
|
|
230
|
-
], c.prototype, "depth"
|
|
228
|
+
], c.prototype, "depth");
|
|
231
229
|
u([
|
|
232
230
|
a({ type: Array, attribute: !1 })
|
|
233
|
-
], c.prototype, "path"
|
|
231
|
+
], c.prototype, "path");
|
|
234
232
|
u([
|
|
235
233
|
a({ type: String, reflect: !0, attribute: !0 })
|
|
236
|
-
], c.prototype, "type"
|
|
234
|
+
], c.prototype, "type");
|
|
237
235
|
u([
|
|
238
236
|
a({ type: String, reflect: !0, attribute: "selection-state" })
|
|
239
|
-
], c.prototype, "selectionState"
|
|
237
|
+
], c.prototype, "selectionState");
|
|
240
238
|
u([
|
|
241
239
|
a({ type: Boolean, reflect: !0, attribute: !0 })
|
|
242
|
-
], c.prototype, "disabled"
|
|
240
|
+
], c.prototype, "disabled");
|
|
243
241
|
u([
|
|
244
242
|
a({ type: Boolean, reflect: !0, attribute: !0 })
|
|
245
|
-
], c.prototype, "loading"
|
|
246
|
-
let
|
|
247
|
-
const
|
|
248
|
-
var
|
|
249
|
-
for (var i =
|
|
250
|
-
(o = d[n]) && (i =
|
|
251
|
-
return
|
|
252
|
-
},
|
|
253
|
-
const w = (
|
|
243
|
+
], c.prototype, "loading");
|
|
244
|
+
let P = c;
|
|
245
|
+
const F = ":host{position:absolute;width:100%}:host([readonly]) li{padding-left:30px}li{height:35px;padding-left:34px}.text{vertical-align:middle;line-height:35px;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;color:#111;font-size:16px}";
|
|
246
|
+
var U = Object.defineProperty, L = (d, e, t, s) => {
|
|
247
|
+
for (var i = void 0, n = d.length - 1, o; n >= 0; n--)
|
|
248
|
+
(o = d[n]) && (i = o(e, t, i) || i);
|
|
249
|
+
return i && U(e, t, i), i;
|
|
250
|
+
}, f;
|
|
251
|
+
const w = (f = class extends I {
|
|
254
252
|
constructor() {
|
|
255
253
|
super(...arguments), this.readonly = !1, this.depth = 0;
|
|
256
254
|
}
|
|
257
255
|
static get styles() {
|
|
258
256
|
return [
|
|
259
|
-
|
|
260
|
-
${
|
|
257
|
+
k`
|
|
258
|
+
${C(F)}
|
|
261
259
|
`
|
|
262
260
|
];
|
|
263
261
|
}
|
|
264
262
|
render() {
|
|
265
263
|
return r`
|
|
266
|
-
<li class="root" style="margin-left: ${this.depth *
|
|
264
|
+
<li class="root" style="margin-left: ${this.depth * D}px;">
|
|
267
265
|
<div class="text">
|
|
268
266
|
<slot>Loading...</slot>
|
|
269
267
|
</div>
|
|
270
268
|
</li>
|
|
271
269
|
`;
|
|
272
270
|
}
|
|
273
|
-
},
|
|
274
|
-
customElements.get(
|
|
275
|
-
},
|
|
271
|
+
}, f.ID = "sd-tree-loading-indicator", f.ensureDefined = () => {
|
|
272
|
+
customElements.get(f.ID) || customElements.define(f.ID, f);
|
|
273
|
+
}, f);
|
|
276
274
|
L([
|
|
277
275
|
a({ type: Boolean, reflect: !0, attribute: !0 })
|
|
278
|
-
], w.prototype, "readonly"
|
|
276
|
+
], w.prototype, "readonly");
|
|
279
277
|
L([
|
|
280
278
|
a({ type: Number })
|
|
281
|
-
], w.prototype, "depth"
|
|
282
|
-
let
|
|
283
|
-
const y = (d, e = 1,
|
|
284
|
-
(
|
|
285
|
-
i.childCount > 0 && i.expanded ? [i, ...y(i.nodes, e - 1,
|
|
279
|
+
], w.prototype, "depth");
|
|
280
|
+
let V = w;
|
|
281
|
+
const y = (d, e = 1, t = 0) => e > 0 ? d.reduce(
|
|
282
|
+
(s, i) => s.concat(
|
|
283
|
+
i.childCount > 0 && i.expanded ? [i, ...y(i.nodes, e - 1, t + 1)] : i
|
|
286
284
|
),
|
|
287
285
|
[]
|
|
288
|
-
) : d.slice(),
|
|
286
|
+
) : d.slice(), J = (d, e, t = 0) => {
|
|
289
287
|
if (!e)
|
|
290
288
|
return null;
|
|
291
|
-
const
|
|
292
|
-
return e.length - 1 ===
|
|
293
|
-
},
|
|
294
|
-
const o = Math.max(0, n *
|
|
289
|
+
const s = e[t], i = d.find((n) => n.id === s);
|
|
290
|
+
return e.length - 1 === t ? i : i?.nodes.length > 0 ? J(i.nodes, e, t + 1) : null;
|
|
291
|
+
}, K = (d, e, t, s, i, n) => {
|
|
292
|
+
const o = Math.max(0, n * s), l = Math.min(o, d * s), h = Math.max(0, d * s - i + s);
|
|
295
293
|
switch (e) {
|
|
296
294
|
case "start":
|
|
297
295
|
return l;
|
|
@@ -303,28 +301,28 @@ const y = (d, e = 1, s = 0) => e > 0 ? d.reduce(
|
|
|
303
301
|
}
|
|
304
302
|
case "auto":
|
|
305
303
|
default:
|
|
306
|
-
return
|
|
307
|
-
}
|
|
308
|
-
},
|
|
309
|
-
const
|
|
310
|
-
return
|
|
311
|
-
}, b = (d, e) => d.findIndex((
|
|
312
|
-
var
|
|
313
|
-
for (var i =
|
|
314
|
-
(o = d[n]) && (i = (
|
|
315
|
-
return
|
|
316
|
-
},
|
|
317
|
-
const N = (
|
|
304
|
+
return t >= h && t <= l ? t : t < h ? h : l;
|
|
305
|
+
}
|
|
306
|
+
}, $ = (d) => d && typeof d != "string", ee = (d, e) => {
|
|
307
|
+
const t = d.find((s) => $(s) && JSON.stringify(s.path) === JSON.stringify(e));
|
|
308
|
+
return $(t) ? t : null;
|
|
309
|
+
}, b = (d, e) => d.findIndex((t) => typeof t == "string" && t === JSON.stringify(e)), x = (d) => typeof d == "string", G = ":host{display:block;position:relative;contain:layout;overflow:auto}:host(:focus){outline:none}ul{list-style-type:none;margin:0;padding:0}.root{width:100%}";
|
|
310
|
+
var H = Object.defineProperty, j = Object.getOwnPropertyDescriptor, m = (d, e, t, s) => {
|
|
311
|
+
for (var i = s > 1 ? void 0 : s ? j(e, t) : e, n = d.length - 1, o; n >= 0; n--)
|
|
312
|
+
(o = d[n]) && (i = (s ? o(e, t, i) : o(i)) || i);
|
|
313
|
+
return s && i && H(e, t, i), i;
|
|
314
|
+
}, g;
|
|
315
|
+
const N = (g = class extends I {
|
|
318
316
|
constructor() {
|
|
319
317
|
super(), this.pageSize = 50, this.loadingText = "Loading...", this.parentSelectionAllowed = !1, this.readonly = !1, this._lastKnownHeight = 0, this._lastKnownScrollTop = 0, this._lastRenderedScrollTop = 0, this._visibleItemsNum = 0, this._firstVisibleIndex = 0, this._lastVisibleIndex = 0, this._firstRenderedIndex = 0, this._lastRenderedIndex = 0, this._focusIndex = -1, this._flattenedNodes = [], this._rootItemsLoading = !1, this._rootNodeCount = 0, this._loadedRootNodeCount = 0, this._allNodeCount = 0, this._nodeStates = /* @__PURE__ */ new Map(), this.onScroll = () => {
|
|
320
318
|
this._lastKnownScrollTop = this.scrollTop;
|
|
321
319
|
const e = this._lastRenderedScrollTop - this._lastKnownScrollTop;
|
|
322
320
|
Math.abs(e) >= S && (this._lastRenderedScrollTop = this._lastKnownScrollTop, this.requestUpdate());
|
|
323
321
|
}, this.handleNodeExpansion = (e) => {
|
|
324
|
-
const { path:
|
|
325
|
-
this.updateAfterExpansion(
|
|
322
|
+
const { path: t, expanded: s } = e.detail;
|
|
323
|
+
this.updateAfterExpansion(t, s);
|
|
326
324
|
}, this.handleKeyDown = (e) => {
|
|
327
|
-
let
|
|
325
|
+
let t = !0;
|
|
328
326
|
switch (e.key) {
|
|
329
327
|
case "ArrowDown": {
|
|
330
328
|
this.focusIndex = this.normalizeIndex(this.focusIndex + 1);
|
|
@@ -335,34 +333,34 @@ const N = (x = class extends I {
|
|
|
335
333
|
break;
|
|
336
334
|
}
|
|
337
335
|
case "ArrowRight": {
|
|
338
|
-
const
|
|
339
|
-
if (
|
|
340
|
-
if (
|
|
341
|
-
const i = this.querySelector(`[node-id='${
|
|
336
|
+
const s = this.focusedNode;
|
|
337
|
+
if (s)
|
|
338
|
+
if (s.childCount > 0 && !s.expanded) {
|
|
339
|
+
const i = this.querySelector(`[node-id='${s.id}']`);
|
|
342
340
|
i && i.expand();
|
|
343
341
|
} else
|
|
344
342
|
this.focusIndex = this.normalizeIndex(this.focusIndex + 1);
|
|
345
343
|
break;
|
|
346
344
|
}
|
|
347
345
|
case "ArrowLeft": {
|
|
348
|
-
const
|
|
349
|
-
if (
|
|
350
|
-
if (
|
|
351
|
-
const i = this.querySelector(`[node-id='${
|
|
346
|
+
const s = this.focusedNode;
|
|
347
|
+
if (s)
|
|
348
|
+
if (s.childCount > 0 && s.expanded) {
|
|
349
|
+
const i = this.querySelector(`[node-id='${s.id}']`);
|
|
352
350
|
i && i.collapse();
|
|
353
351
|
} else
|
|
354
352
|
this.focusIndex = this.normalizeIndex(this.focusIndex - 1);
|
|
355
353
|
break;
|
|
356
354
|
}
|
|
357
355
|
case "Enter": {
|
|
358
|
-
const
|
|
359
|
-
|
|
356
|
+
const s = this.focusedNode;
|
|
357
|
+
s && (this.toggleSelection(s.path), this.updateComplete.then(() => {
|
|
360
358
|
this.dispatchEvent(
|
|
361
359
|
new CustomEvent("selection", {
|
|
362
360
|
detail: {
|
|
363
|
-
path:
|
|
364
|
-
checked:
|
|
365
|
-
indeterminate:
|
|
361
|
+
path: s.path,
|
|
362
|
+
checked: s.selectionState === "checked",
|
|
363
|
+
indeterminate: s.selectionState === "indeterminate"
|
|
366
364
|
},
|
|
367
365
|
bubbles: !0,
|
|
368
366
|
composed: !0
|
|
@@ -372,17 +370,17 @@ const N = (x = class extends I {
|
|
|
372
370
|
break;
|
|
373
371
|
}
|
|
374
372
|
default: {
|
|
375
|
-
|
|
373
|
+
t = !1;
|
|
376
374
|
break;
|
|
377
375
|
}
|
|
378
376
|
}
|
|
379
|
-
|
|
377
|
+
t && (e.preventDefault(), e.stopPropagation());
|
|
380
378
|
}, this.handleNodeSelection = (e) => {
|
|
381
379
|
if (e.target == this)
|
|
382
380
|
return;
|
|
383
381
|
this._reusePreviousRenderData = !0;
|
|
384
|
-
const { path:
|
|
385
|
-
this.focusIndex = b(this._flattenedNodes,
|
|
382
|
+
const { path: t } = e.detail;
|
|
383
|
+
this.focusIndex = b(this._flattenedNodes, t), this.focus(), this.toggleSelection(t), this.updateComplete.then(() => {
|
|
386
384
|
this._reusePreviousRenderData = !1;
|
|
387
385
|
});
|
|
388
386
|
}, this.getFlattenedNodeId = (e) => JSON.stringify(e.path), this.nodeGetter = (e) => e ? this._nodeStates.get(JSON.stringify(e)) : null, this._resizeObserver = new ResizeObserver(() => {
|
|
@@ -400,23 +398,23 @@ const N = (x = class extends I {
|
|
|
400
398
|
}
|
|
401
399
|
set focusIndex(e) {
|
|
402
400
|
if (e >= -1 && e < this._allNodeCount) {
|
|
403
|
-
const
|
|
404
|
-
this._focusIndex = e, (e <= this._firstVisibleIndex || this._lastVisibleIndex <= e) && this.scrollToNode(e),
|
|
401
|
+
const t = this._focusIndex;
|
|
402
|
+
this._focusIndex = e, (e <= this._firstVisibleIndex || this._lastVisibleIndex <= e) && this.scrollToNode(e), t != e && this.requestUpdate("focusIndex", t);
|
|
405
403
|
}
|
|
406
404
|
}
|
|
407
405
|
setNodes(e) {
|
|
408
|
-
this.stopLoadingIndicator(), this.setLastLoadingChildren(e, this.rootNodeCount, e.length), e.forEach((
|
|
406
|
+
this.stopLoadingIndicator(), this.setLastLoadingChildren(e, this.rootNodeCount, e.length), e.forEach((t, s) => {
|
|
409
407
|
const i = [...e];
|
|
410
|
-
i.splice(
|
|
408
|
+
i.splice(s, 1), this.updateNodeMap(t, i);
|
|
411
409
|
}), this.updateCount(e), this._loadedRootNodeCount = e.length, this._flattenedNodes = y(e, 1 / 0).map(this.getFlattenedNodeId), this.requestUpdate();
|
|
412
410
|
}
|
|
413
|
-
addNodes(e,
|
|
414
|
-
this.stopLoadingIndicator(
|
|
411
|
+
addNodes(e, t) {
|
|
412
|
+
this.stopLoadingIndicator(t), e.forEach((i, n) => {
|
|
415
413
|
const o = [...e];
|
|
416
414
|
o.splice(n, 1), this.updateNodeMap(i, o);
|
|
417
415
|
});
|
|
418
|
-
const
|
|
419
|
-
|
|
416
|
+
const s = this.nodeGetter(t);
|
|
417
|
+
s ? s.expanded && (this._allNodeCount += e.length + this.getNodeCount(e)) : this._loadedRootNodeCount += e.length, this.updateFlattenedNodes(e, t), this.requestUpdate();
|
|
420
418
|
}
|
|
421
419
|
connectedCallback() {
|
|
422
420
|
super.connectedCallback(), this._resizeObserver.observe(this);
|
|
@@ -426,8 +424,8 @@ const N = (x = class extends I {
|
|
|
426
424
|
}
|
|
427
425
|
static get styles() {
|
|
428
426
|
return [
|
|
429
|
-
|
|
430
|
-
${
|
|
427
|
+
k`
|
|
428
|
+
${C(G)}
|
|
431
429
|
`
|
|
432
430
|
];
|
|
433
431
|
}
|
|
@@ -448,20 +446,20 @@ const N = (x = class extends I {
|
|
|
448
446
|
</div>
|
|
449
447
|
`;
|
|
450
448
|
}
|
|
451
|
-
scrollToNode(e,
|
|
452
|
-
this.scrollTop =
|
|
449
|
+
scrollToNode(e, t = "auto") {
|
|
450
|
+
this.scrollTop = K(
|
|
453
451
|
this.normalizeIndex(e),
|
|
454
|
-
|
|
452
|
+
t,
|
|
455
453
|
this.scrollTop,
|
|
456
454
|
S,
|
|
457
455
|
this.height,
|
|
458
456
|
this._allNodeCount
|
|
459
457
|
);
|
|
460
458
|
}
|
|
461
|
-
updateNodeMap(e,
|
|
462
|
-
e && (e.nodeGetter = this.nodeGetter, e.getSiblings = () =>
|
|
459
|
+
updateNodeMap(e, t) {
|
|
460
|
+
e && (e.nodeGetter = this.nodeGetter, e.getSiblings = () => t, this._nodeStates.set(JSON.stringify(e.path), e), e.nodes.forEach((s, i) => {
|
|
463
461
|
const n = [...e.nodes];
|
|
464
|
-
n.splice(i, 1), this.updateNodeMap(
|
|
462
|
+
n.splice(i, 1), this.updateNodeMap(s, n);
|
|
465
463
|
}));
|
|
466
464
|
}
|
|
467
465
|
updateParentSelectionAllowed() {
|
|
@@ -473,15 +471,15 @@ const N = (x = class extends I {
|
|
|
473
471
|
const e = this._flattenedNodes.slice(this._firstRenderedIndex, this._lastRenderedIndex + 1);
|
|
474
472
|
R(
|
|
475
473
|
r`
|
|
476
|
-
${e.map((
|
|
477
|
-
const i =
|
|
478
|
-
if (!
|
|
474
|
+
${e.map((t, s) => {
|
|
475
|
+
const i = s + this._firstRenderedIndex, n = this.getTopPosition(i);
|
|
476
|
+
if (!x(t))
|
|
479
477
|
return r`
|
|
480
|
-
<sd-tree-loading-indicator .depth="${
|
|
478
|
+
<sd-tree-loading-indicator .depth="${t.depth}" style="transform: translateY(${n}px)"
|
|
481
479
|
>${this.loadingText}</sd-tree-loading-indicator
|
|
482
480
|
>
|
|
483
481
|
`;
|
|
484
|
-
const o = this._nodeStates.get(
|
|
482
|
+
const o = this._nodeStates.get(t), l = i === this.focusIndex;
|
|
485
483
|
let h = o.disabled;
|
|
486
484
|
return this.parentSelectionAllowed || (h = h || o.hasRadioButtonDescendant()), r`
|
|
487
485
|
<sd-tree-node
|
|
@@ -513,21 +511,21 @@ const N = (x = class extends I {
|
|
|
513
511
|
if (this._lastRenderedScrollTop = this.scrollTop, this._visibleItemsNum = Math.min(Math.ceil(this.height / S), this._allNodeCount), this._visibleItemsNum > 0) {
|
|
514
512
|
this._firstVisibleIndex = this.normalizeIndex(Math.floor(this._lastRenderedScrollTop / S)), this._lastVisibleIndex = this.normalizeIndex(this._firstVisibleIndex + this._visibleItemsNum), this._firstRenderedIndex = this.normalizeIndex(this._firstVisibleIndex - 2), this._lastRenderedIndex = this.normalizeIndex(this._lastVisibleIndex + 2);
|
|
515
513
|
for (const e of this._flattenedNodes.slice(this._firstRenderedIndex, this._lastRenderedIndex + 1)) {
|
|
516
|
-
const
|
|
517
|
-
if (
|
|
518
|
-
if (
|
|
519
|
-
const
|
|
520
|
-
if (
|
|
521
|
-
if (this.needsFurtherData(
|
|
522
|
-
this.requestData(
|
|
514
|
+
const t = x(e) && this._nodeStates.get(e);
|
|
515
|
+
if (t) {
|
|
516
|
+
if (t.lastLoadingChild) {
|
|
517
|
+
const s = t.parentNode;
|
|
518
|
+
if (s) {
|
|
519
|
+
if (this.needsFurtherData(s)) {
|
|
520
|
+
this.requestData(s);
|
|
523
521
|
break;
|
|
524
522
|
}
|
|
525
523
|
} else if (this._loadedRootNodeCount < this.rootNodeCount && !this._rootItemsLoading) {
|
|
526
524
|
this.requestData();
|
|
527
525
|
break;
|
|
528
526
|
}
|
|
529
|
-
} else if (this.needsFurtherData(
|
|
530
|
-
this.requestData(
|
|
527
|
+
} else if (this.needsFurtherData(t)) {
|
|
528
|
+
this.requestData(t);
|
|
531
529
|
break;
|
|
532
530
|
}
|
|
533
531
|
}
|
|
@@ -539,7 +537,7 @@ const N = (x = class extends I {
|
|
|
539
537
|
return e.expanded && e.childCount > e.nodes.length && this.nodeIndex(e.id) + e.nodes.length < this._lastRenderedIndex;
|
|
540
538
|
}
|
|
541
539
|
nodeIndex(e) {
|
|
542
|
-
return this._flattenedNodes.findIndex((
|
|
540
|
+
return this._flattenedNodes.findIndex((t) => t === e);
|
|
543
541
|
}
|
|
544
542
|
normalizeIndex(e) {
|
|
545
543
|
return Math.max(0, Math.min(e, this._allNodeCount - 1));
|
|
@@ -548,23 +546,23 @@ const N = (x = class extends I {
|
|
|
548
546
|
return this.offsetHeight;
|
|
549
547
|
}
|
|
550
548
|
requestData(e) {
|
|
551
|
-
if (!
|
|
552
|
-
const
|
|
553
|
-
this.startLoadingIndicator(
|
|
549
|
+
if (!e?.loading) {
|
|
550
|
+
const t = e?.path;
|
|
551
|
+
this.startLoadingIndicator(t), this.dispatchEvent(
|
|
554
552
|
new CustomEvent("data-request", {
|
|
555
|
-
detail: { path:
|
|
553
|
+
detail: { path: t }
|
|
556
554
|
})
|
|
557
555
|
);
|
|
558
556
|
}
|
|
559
557
|
}
|
|
560
|
-
updateAfterExpansion(e,
|
|
561
|
-
const
|
|
562
|
-
if (
|
|
563
|
-
|
|
558
|
+
updateAfterExpansion(e, t) {
|
|
559
|
+
const s = this._nodeStates.get(JSON.stringify(e));
|
|
560
|
+
if (s) {
|
|
561
|
+
s.expanded = t;
|
|
564
562
|
const i = b(this._flattenedNodes, e), n = this._flattenedNodes[this.focusIndex];
|
|
565
|
-
if (
|
|
566
|
-
const o = this.addSubtree(
|
|
567
|
-
l && h && this.requestData(
|
|
563
|
+
if (t) {
|
|
564
|
+
const o = this.addSubtree(s, i + 1), l = s.childCount > s.nodes.length, h = i + s.nodes.length < this._lastRenderedIndex;
|
|
565
|
+
l && h && this.requestData(s), this._allNodeCount += o;
|
|
568
566
|
} else {
|
|
569
567
|
const o = this.removeSubtree(i);
|
|
570
568
|
this._allNodeCount -= o;
|
|
@@ -576,67 +574,67 @@ const N = (x = class extends I {
|
|
|
576
574
|
}
|
|
577
575
|
this.requestUpdate();
|
|
578
576
|
}
|
|
579
|
-
addSubtree(e,
|
|
580
|
-
const
|
|
581
|
-
return this._flattenedNodes.splice(
|
|
577
|
+
addSubtree(e, t) {
|
|
578
|
+
const s = this.getFlattenedSubtree(e.nodes);
|
|
579
|
+
return this._flattenedNodes.splice(t, 0, ...s), s.length;
|
|
582
580
|
}
|
|
583
581
|
getFlattenedSubtree(e) {
|
|
584
|
-
return e.reduce((
|
|
585
|
-
|
|
582
|
+
return e.reduce((t, s) => t.concat(
|
|
583
|
+
s && s.childCount > 0 && s.expanded ? [JSON.stringify(s.path), ...this.getFlattenedSubtree(s.nodes)] : JSON.stringify(s.path)
|
|
586
584
|
), []);
|
|
587
585
|
}
|
|
588
586
|
removeSubtree(e) {
|
|
589
|
-
const
|
|
590
|
-
let
|
|
591
|
-
return
|
|
587
|
+
const t = this.getNextNonDescendantIndex(e);
|
|
588
|
+
let s = 0;
|
|
589
|
+
return t !== -1 ? (s = t - e - 1, this._flattenedNodes.splice(e + 1, s)) : (s = this._flattenedNodes.length - e - 1, this._flattenedNodes.splice(e + 1)), s;
|
|
592
590
|
}
|
|
593
591
|
// Returns the index of the node which is the next node
|
|
594
592
|
// in this._flattenedNodes after the descendants of the given node.
|
|
595
593
|
// This is used for removing the descendans of a node from this._flattenedNodes
|
|
596
594
|
// after collapsing it.
|
|
597
595
|
getNextNonDescendantIndex(e) {
|
|
598
|
-
const
|
|
599
|
-
if (
|
|
596
|
+
const t = this._flattenedNodes[e], s = x(t) && this._nodeStates.get(t);
|
|
597
|
+
if (s)
|
|
600
598
|
for (let i = e + 1; i < this._flattenedNodes.length; i++) {
|
|
601
|
-
const n = this._flattenedNodes[i], o =
|
|
602
|
-
if (o && o.path.length <=
|
|
599
|
+
const n = this._flattenedNodes[i], o = x(n) && this._nodeStates.get(n);
|
|
600
|
+
if (o && o.path.length <= s.path.length)
|
|
603
601
|
return i;
|
|
604
602
|
}
|
|
605
603
|
return -1;
|
|
606
604
|
}
|
|
607
605
|
get focusedNode() {
|
|
608
606
|
const e = this._flattenedNodes[this.focusIndex];
|
|
609
|
-
return
|
|
607
|
+
return x(e) && this._nodeStates.get(e);
|
|
610
608
|
}
|
|
611
609
|
toggleSelection(e) {
|
|
612
610
|
this.nodeGetter(e).toggle(), this.requestUpdate();
|
|
613
611
|
}
|
|
614
|
-
updateFlattenedNodes(e,
|
|
615
|
-
if (
|
|
616
|
-
const
|
|
617
|
-
if (
|
|
612
|
+
updateFlattenedNodes(e, t) {
|
|
613
|
+
if (t) {
|
|
614
|
+
const s = b(this._flattenedNodes, t), i = this._flattenedNodes[s];
|
|
615
|
+
if (x(i)) {
|
|
618
616
|
const n = this._nodeStates.get(i);
|
|
619
617
|
if (n) {
|
|
620
|
-
const o =
|
|
618
|
+
const o = s + n.nodes.length + 1, l = n.depth, h = y(e, 1 / 0, l + 1).map(
|
|
621
619
|
this.getFlattenedNodeId
|
|
622
620
|
);
|
|
623
621
|
n.expanded && this._flattenedNodes.splice(o, 0, ...h), n.nodes = [...n.nodes, ...e], n.loading = !1, this.updateLastLoadingChild(n.nodes, h);
|
|
624
622
|
}
|
|
625
623
|
}
|
|
626
624
|
} else {
|
|
627
|
-
const
|
|
628
|
-
this.updateLastLoadingChild(this._flattenedNodes,
|
|
625
|
+
const s = y(e, 1 / 0).map(this.getFlattenedNodeId);
|
|
626
|
+
this.updateLastLoadingChild(this._flattenedNodes, s), this._flattenedNodes = [...this._flattenedNodes, ...s];
|
|
629
627
|
}
|
|
630
628
|
}
|
|
631
|
-
updateLastLoadingChild(e,
|
|
632
|
-
const
|
|
629
|
+
updateLastLoadingChild(e, t) {
|
|
630
|
+
const s = e[e.length - 1], i = x(s) && this._nodeStates.get(s), n = t[t.length - 1], o = x(n) && this._nodeStates.get(n);
|
|
633
631
|
if (i && (i.lastLoadingChild = !1), o) {
|
|
634
632
|
const l = o.parentNode;
|
|
635
633
|
(l && l.childCount > l.nodes.length || !l && this.rootNodeCount > this._loadedRootNodeCount) && (o.lastLoadingChild = !0);
|
|
636
634
|
}
|
|
637
635
|
}
|
|
638
|
-
setLastLoadingChildren(e,
|
|
639
|
-
if (
|
|
636
|
+
setLastLoadingChildren(e, t, s) {
|
|
637
|
+
if (s < t) {
|
|
640
638
|
const i = e[e.length - 1];
|
|
641
639
|
i && (i.lastLoadingChild = !0);
|
|
642
640
|
}
|
|
@@ -646,10 +644,10 @@ const N = (x = class extends I {
|
|
|
646
644
|
}
|
|
647
645
|
startLoadingIndicator(e) {
|
|
648
646
|
if (e) {
|
|
649
|
-
const
|
|
650
|
-
if (
|
|
651
|
-
const
|
|
652
|
-
|
|
647
|
+
const t = this._nodeStates.get(JSON.stringify(e));
|
|
648
|
+
if (t) {
|
|
649
|
+
const s = b(this._flattenedNodes, e);
|
|
650
|
+
t.loading = !0, this.addPlaceholders(s, t);
|
|
653
651
|
}
|
|
654
652
|
} else
|
|
655
653
|
this._rootItemsLoading = !0, this._flattenedNodes = [
|
|
@@ -658,51 +656,51 @@ const N = (x = class extends I {
|
|
|
658
656
|
];
|
|
659
657
|
this.updateNodes();
|
|
660
658
|
}
|
|
661
|
-
addPlaceholders(e,
|
|
662
|
-
const
|
|
659
|
+
addPlaceholders(e, t) {
|
|
660
|
+
const s = e + t.nodes.length + 1, i = t.childCount - t.nodes.length;
|
|
663
661
|
this._flattenedNodes.splice(
|
|
664
|
-
|
|
662
|
+
s,
|
|
665
663
|
0,
|
|
666
664
|
...new Array(i).fill({
|
|
667
|
-
depth:
|
|
665
|
+
depth: t.depth + 1
|
|
668
666
|
})
|
|
669
667
|
);
|
|
670
668
|
}
|
|
671
669
|
stopLoadingIndicator(e) {
|
|
672
670
|
if (e) {
|
|
673
|
-
const
|
|
674
|
-
if (
|
|
675
|
-
const
|
|
676
|
-
this.removePlaceHolders(
|
|
671
|
+
const t = this._nodeStates.get(JSON.stringify(e));
|
|
672
|
+
if (t && (t.loading = !1, t.expanded)) {
|
|
673
|
+
const s = b(this._flattenedNodes, e);
|
|
674
|
+
this.removePlaceHolders(s, t);
|
|
677
675
|
}
|
|
678
676
|
} else {
|
|
679
677
|
this._rootItemsLoading = !1;
|
|
680
|
-
const
|
|
681
|
-
this._flattenedNodes.splice(
|
|
678
|
+
const t = this._flattenedNodes.findIndex((s) => !x(s));
|
|
679
|
+
this._flattenedNodes.splice(t);
|
|
682
680
|
}
|
|
683
681
|
}
|
|
684
|
-
removePlaceHolders(e,
|
|
685
|
-
const
|
|
686
|
-
this._flattenedNodes.splice(
|
|
682
|
+
removePlaceHolders(e, t) {
|
|
683
|
+
const s = e + t.nodes.length + 1, i = t.childCount - t.nodes.length;
|
|
684
|
+
this._flattenedNodes.splice(s, i);
|
|
687
685
|
}
|
|
688
686
|
// this method is used to synchronize this.nodes property
|
|
689
687
|
// to the declaratively created nodes
|
|
690
688
|
syncState() {
|
|
691
|
-
const
|
|
692
|
-
this.addNodes(
|
|
689
|
+
const t = [...this.children].map((s) => s.getState());
|
|
690
|
+
this.addNodes(t), this.rootNodeCount = t.length, this.innerHTML = "";
|
|
693
691
|
}
|
|
694
692
|
updateCount(e) {
|
|
695
693
|
this._allNodeCount = e.length + this.getNodeCount(e);
|
|
696
694
|
}
|
|
697
695
|
getNodeCount(e) {
|
|
698
|
-
let
|
|
699
|
-
return e.forEach((
|
|
700
|
-
|
|
701
|
-
}),
|
|
696
|
+
let t = 0;
|
|
697
|
+
return e.forEach((s) => {
|
|
698
|
+
s.expanded && (t += s.childCount + this.getNodeCount(s.nodes));
|
|
699
|
+
}), t;
|
|
702
700
|
}
|
|
703
|
-
},
|
|
704
|
-
|
|
705
|
-
},
|
|
701
|
+
}, g.ID = "sd-tree", g.ensureDefined = () => {
|
|
702
|
+
P.ensureDefined(), V.ensureDefined(), customElements.get(g.ID) || customElements.define(g.ID, g);
|
|
703
|
+
}, g);
|
|
706
704
|
m([
|
|
707
705
|
a({ type: String })
|
|
708
706
|
], N.prototype, "loadingText", 2);
|
|
@@ -718,21 +716,21 @@ m([
|
|
|
718
716
|
m([
|
|
719
717
|
a({ type: Number, attribute: "focus-index", reflect: !0 })
|
|
720
718
|
], N.prototype, "focusIndex", 1);
|
|
721
|
-
let
|
|
722
|
-
|
|
719
|
+
let Y = N;
|
|
720
|
+
Y.ensureDefined();
|
|
723
721
|
export {
|
|
724
|
-
|
|
722
|
+
q as CheckboxNode,
|
|
725
723
|
E as Node,
|
|
726
724
|
v as RadioButtonNode,
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
725
|
+
Y as Tree,
|
|
726
|
+
ee as findNode,
|
|
727
|
+
J as findNodeByPath,
|
|
730
728
|
b as findNodeIndex,
|
|
731
729
|
y as flattenNodes,
|
|
732
|
-
|
|
730
|
+
K as getOffsetForIndexAndAlignment,
|
|
733
731
|
T as isCheckboxNode,
|
|
734
|
-
|
|
735
|
-
|
|
732
|
+
x as isFlattenedNode,
|
|
733
|
+
$ as isNode,
|
|
736
734
|
A as isRadioButtonNode
|
|
737
735
|
};
|
|
738
736
|
//# sourceMappingURL=tree.mjs.map
|