wj-elements 0.7.7 → 0.8.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/animations.js +28 -51
- package/dist/animations.js.map +1 -1
- package/dist/base-path.js +19 -31
- package/dist/base-path.js.map +1 -1
- package/dist/custom-elements.json +11504 -11499
- package/dist/dark.css +1 -302
- package/dist/date.js +16 -36
- package/dist/date.js.map +1 -1
- package/dist/element-utils.js +20 -81
- package/dist/element-utils.js.map +1 -1
- package/dist/event.js +49 -165
- package/dist/event.js.map +1 -1
- package/dist/form-associated-element-BjeJn7j8.js +101 -0
- package/dist/{form-associated-element-DEQ4y-jn.js.map → form-associated-element-BjeJn7j8.js.map} +1 -1
- package/dist/icon-DmsqtDpL.js +102 -0
- package/dist/{icon-CReYMzAK.js.map → icon-DmsqtDpL.js.map} +1 -1
- package/dist/light.css +1 -731
- package/dist/localize.js +36 -111
- package/dist/localize.js.map +1 -1
- package/dist/packages/wje-accordion-item/accordion-item.element.d.ts +3 -2
- package/dist/permissions.js +14 -41
- package/dist/permissions.js.map +1 -1
- package/dist/popup.element-CbkhthPP.js +806 -0
- package/dist/{popup.element-CwXvVFK7.js.map → popup.element-CbkhthPP.js.map} +1 -1
- package/dist/router-links-CNsJ-elb.js +105 -0
- package/dist/{router-links-wjqCnncc.js.map → router-links-CNsJ-elb.js.map} +1 -1
- package/dist/skeleton.css +1 -197
- package/dist/styles.css +1 -866
- package/dist/universal-service.js +48 -109
- package/dist/universal-service.js.map +1 -1
- package/dist/utils.js +11 -18
- package/dist/utils.js.map +1 -1
- package/dist/web-types.json +760 -760
- package/dist/wje-accordion-item.js +33 -106
- package/dist/wje-accordion-item.js.map +1 -1
- package/dist/wje-accordion.js +19 -84
- package/dist/wje-accordion.js.map +1 -1
- package/dist/wje-animation.js +37 -4258
- package/dist/wje-animation.js.map +1 -1
- package/dist/wje-aside.js +9 -34
- package/dist/wje-aside.js.map +1 -1
- package/dist/wje-avatar.js +36 -126
- package/dist/wje-avatar.js.map +1 -1
- package/dist/wje-badge.js +10 -52
- package/dist/wje-badge.js.map +1 -1
- package/dist/wje-breadcrumb.js +205 -672
- package/dist/wje-breadcrumb.js.map +1 -1
- package/dist/wje-breadcrumbs.js +177 -633
- package/dist/wje-breadcrumbs.js.map +1 -1
- package/dist/wje-button-group.js +48 -153
- package/dist/wje-button-group.js.map +1 -1
- package/dist/wje-button.js +92 -413
- package/dist/wje-button.js.map +1 -1
- package/dist/wje-card-content.js +7 -30
- package/dist/wje-card-content.js.map +1 -1
- package/dist/wje-card-controls.js +7 -30
- package/dist/wje-card-controls.js.map +1 -1
- package/dist/wje-card-header.js +7 -30
- package/dist/wje-card-header.js.map +1 -1
- package/dist/wje-card-subtitle.js +7 -34
- package/dist/wje-card-subtitle.js.map +1 -1
- package/dist/wje-card-title.js +7 -34
- package/dist/wje-card-title.js.map +1 -1
- package/dist/wje-card.js +15 -71
- package/dist/wje-card.js.map +1 -1
- package/dist/wje-carousel-item.js +12 -56
- package/dist/wje-carousel-item.js.map +1 -1
- package/dist/wje-carousel.js +154 -509
- package/dist/wje-carousel.js.map +1 -1
- package/dist/wje-checkbox.js +50 -227
- package/dist/wje-checkbox.js.map +1 -1
- package/dist/wje-chip.js +43 -160
- package/dist/wje-chip.js.map +1 -1
- package/dist/wje-col.js +7 -20
- package/dist/wje-col.js.map +1 -1
- package/dist/wje-color-picker.js +445 -1464
- package/dist/wje-color-picker.js.map +1 -1
- package/dist/wje-container.js +9 -35
- package/dist/wje-container.js.map +1 -1
- package/dist/wje-copy-button.js +64 -204
- package/dist/wje-copy-button.js.map +1 -1
- package/dist/wje-dialog.js +85 -553
- package/dist/wje-dialog.js.map +1 -1
- package/dist/wje-divider.js +7 -34
- package/dist/wje-divider.js.map +1 -1
- package/dist/wje-dropdown.js +78 -305
- package/dist/wje-dropdown.js.map +1 -1
- package/dist/wje-element.js +191 -700
- package/dist/wje-element.js.map +1 -1
- package/dist/wje-file-upload-item.js +51 -156
- package/dist/wje-file-upload-item.js.map +1 -1
- package/dist/wje-file-upload.js +181 -619
- package/dist/wje-file-upload.js.map +1 -1
- package/dist/wje-footer.js +7 -31
- package/dist/wje-footer.js.map +1 -1
- package/dist/wje-form.js +7 -32
- package/dist/wje-form.js.map +1 -1
- package/dist/wje-format-digital.js +26 -118
- package/dist/wje-format-digital.js.map +1 -1
- package/dist/wje-grid.js +7 -33
- package/dist/wje-grid.js.map +1 -1
- package/dist/wje-header.js +9 -35
- package/dist/wje-header.js.map +1 -1
- package/dist/wje-icon-library.js +12 -18
- package/dist/wje-icon-library.js.map +1 -1
- package/dist/wje-icon-picker.js +65 -320
- package/dist/wje-icon-picker.js.map +1 -1
- package/dist/wje-icon.js +1 -1
- package/dist/wje-img-comparer.js +37 -114
- package/dist/wje-img-comparer.js.map +1 -1
- package/dist/wje-img.js +50 -198
- package/dist/wje-img.js.map +1 -1
- package/dist/wje-infinite-scroll.js +94 -346
- package/dist/wje-infinite-scroll.js.map +1 -1
- package/dist/wje-input-file.js +23 -84
- package/dist/wje-input-file.js.map +1 -1
- package/dist/wje-input.js +78 -392
- package/dist/wje-input.js.map +1 -1
- package/dist/wje-item.js +11 -64
- package/dist/wje-item.js.map +1 -1
- package/dist/wje-kanban.js +124 -401
- package/dist/wje-kanban.js.map +1 -1
- package/dist/wje-label.js +9 -32
- package/dist/wje-label.js.map +1 -1
- package/dist/wje-level-indicator.js +38 -157
- package/dist/wje-level-indicator.js.map +1 -1
- package/dist/wje-list.js +10 -40
- package/dist/wje-list.js.map +1 -1
- package/dist/wje-main.js +7 -31
- package/dist/wje-main.js.map +1 -1
- package/dist/wje-masonry.js +66 -211
- package/dist/wje-masonry.js.map +1 -1
- package/dist/wje-master.js +45 -161
- package/dist/wje-master.js.map +1 -1
- package/dist/wje-menu-button.js +10 -38
- package/dist/wje-menu-button.js.map +1 -1
- package/dist/wje-menu-item.js +127 -577
- package/dist/wje-menu-item.js.map +1 -1
- package/dist/wje-menu-label.js +9 -35
- package/dist/wje-menu-label.js.map +1 -1
- package/dist/wje-menu.js +14 -49
- package/dist/wje-menu.js.map +1 -1
- package/dist/wje-option.js +48 -279
- package/dist/wje-option.js.map +1 -1
- package/dist/wje-options.js +130 -384
- package/dist/wje-options.js.map +1 -1
- package/dist/wje-orgchart-group.js +16 -52
- package/dist/wje-orgchart-group.js.map +1 -1
- package/dist/wje-orgchart-item.js +24 -93
- package/dist/wje-orgchart-item.js.map +1 -1
- package/dist/wje-orgchart.js +18 -68
- package/dist/wje-orgchart.js.map +1 -1
- package/dist/wje-pagination.js +113 -397
- package/dist/wje-pagination.js.map +1 -1
- package/dist/wje-popup.js +3 -3
- package/dist/wje-popup.js.map +1 -1
- package/dist/wje-progress-bar.js +53 -205
- package/dist/wje-progress-bar.js.map +1 -1
- package/dist/wje-qr-code.js +398 -2980
- package/dist/wje-qr-code.js.map +1 -1
- package/dist/wje-radio-group.js +52 -190
- package/dist/wje-radio-group.js.map +1 -1
- package/dist/wje-radio.js +24 -118
- package/dist/wje-radio.js.map +1 -1
- package/dist/wje-rate.js +62 -266
- package/dist/wje-rate.js.map +1 -1
- package/dist/wje-relative-time.js +24 -99
- package/dist/wje-relative-time.js.map +1 -1
- package/dist/wje-reorder-dropzone.js +9 -31
- package/dist/wje-reorder-dropzone.js.map +1 -1
- package/dist/wje-reorder-handle.js +67 -204
- package/dist/wje-reorder-handle.js.map +1 -1
- package/dist/wje-reorder-item.js +14 -44
- package/dist/wje-reorder-item.js.map +1 -1
- package/dist/wje-reorder.js +61 -246
- package/dist/wje-reorder.js.map +1 -1
- package/dist/wje-route.js +6 -24
- package/dist/wje-route.js.map +1 -1
- package/dist/wje-router-link.js +11 -39
- package/dist/wje-router-link.js.map +1 -1
- package/dist/wje-router-outlet.js +76 -172
- package/dist/wje-router-outlet.js.map +1 -1
- package/dist/wje-routerx.js +537 -1331
- package/dist/wje-routerx.js.map +1 -1
- package/dist/wje-row.js +9 -31
- package/dist/wje-row.js.map +1 -1
- package/dist/wje-select.js +326 -1152
- package/dist/wje-select.js.map +1 -1
- package/dist/wje-slider.js +44 -225
- package/dist/wje-slider.js.map +1 -1
- package/dist/wje-sliding-container.js +295 -1319
- package/dist/wje-sliding-container.js.map +1 -1
- package/dist/wje-split-view.js +35 -121
- package/dist/wje-split-view.js.map +1 -1
- package/dist/wje-status.js +14 -45
- package/dist/wje-status.js.map +1 -1
- package/dist/wje-step.js +9 -32
- package/dist/wje-step.js.map +1 -1
- package/dist/wje-stepper.js +109 -357
- package/dist/wje-stepper.js.map +1 -1
- package/dist/wje-store.js +67 -360
- package/dist/wje-store.js.map +1 -1
- package/dist/wje-tab-group.js +85 -314
- package/dist/wje-tab-group.js.map +1 -1
- package/dist/wje-tab-panel.js +7 -28
- package/dist/wje-tab-panel.js.map +1 -1
- package/dist/wje-tab.js +21 -198
- package/dist/wje-tab.js.map +1 -1
- package/dist/wje-textarea.js +64 -264
- package/dist/wje-textarea.js.map +1 -1
- package/dist/wje-thumbnail.js +10 -51
- package/dist/wje-thumbnail.js.map +1 -1
- package/dist/wje-toast.js +127 -632
- package/dist/wje-toast.js.map +1 -1
- package/dist/wje-toggle.js +52 -177
- package/dist/wje-toggle.js.map +1 -1
- package/dist/wje-toolbar-action.js +128 -456
- package/dist/wje-toolbar-action.js.map +1 -1
- package/dist/wje-toolbar.js +75 -270
- package/dist/wje-toolbar.js.map +1 -1
- package/dist/wje-tooltip.js +50 -161
- package/dist/wje-tooltip.js.map +1 -1
- package/dist/wje-tree-item.js +70 -301
- package/dist/wje-tree-item.js.map +1 -1
- package/dist/wje-tree.js +145 -489
- package/dist/wje-tree.js.map +1 -1
- package/dist/wje-visually-hidden.js +7 -34
- package/dist/wje-visually-hidden.js.map +1 -1
- package/package.json +3 -2
- package/dist/form-associated-element-DEQ4y-jn.js +0 -245
- package/dist/icon-CReYMzAK.js +0 -245
- package/dist/popup.element-CwXvVFK7.js +0 -2133
- package/dist/router-links-wjqCnncc.js +0 -156
package/dist/wje-tree.js
CHANGED
|
@@ -1,561 +1,217 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
class Tree extends WJElement {
|
|
7
|
-
/**
|
|
8
|
-
* Creates an instance of Tree.
|
|
9
|
-
*/
|
|
4
|
+
import e from "./wje-element.js";
|
|
5
|
+
class t extends e {
|
|
10
6
|
constructor() {
|
|
11
7
|
super();
|
|
12
|
-
/**
|
|
13
|
-
* The class name for the component.
|
|
14
|
-
* @type {string}
|
|
15
|
-
*/
|
|
16
8
|
__publicField(this, "className", "Tree");
|
|
17
|
-
|
|
18
|
-
* Handles the click event triggered by the user interaction.
|
|
19
|
-
* Identifies the closest tree item element to the event target and sets it
|
|
20
|
-
* as the selected item. Ensures that only one item is selected at a time, resetting
|
|
21
|
-
* the selection state for all other items.
|
|
22
|
-
* @param {Event} e The click event object.
|
|
23
|
-
*/
|
|
24
|
-
__publicField(this, "handleClick", (e) => {
|
|
9
|
+
__publicField(this, "handleClick", (e2) => {
|
|
25
10
|
var _a;
|
|
26
|
-
if (
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
if (!
|
|
30
|
-
const isClickButton = (((_a = e.composedPath) == null ? void 0 : _a.call(e)) || []).some((el) => {
|
|
11
|
+
if ((e2 == null ? void 0 : e2.preventDefault) && e2.preventDefault(), this.reorder && this.isReorderHandleEvent(e2)) return;
|
|
12
|
+
const t2 = this.getTreeItemFromEvent(e2);
|
|
13
|
+
if (!t2) return;
|
|
14
|
+
if (!(((_a = e2.composedPath) == null ? void 0 : _a.call(e2)) || []).some((e3) => {
|
|
31
15
|
var _a2;
|
|
32
|
-
return (_a2 =
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
if (this.selection === "single") {
|
|
36
|
-
for (let item of this.getAllItems()) {
|
|
37
|
-
item.selected = item === selectedItem;
|
|
38
|
-
}
|
|
39
|
-
} else if (this.selection === "multiple") {
|
|
40
|
-
selectedItem.selected = !selectedItem.selected;
|
|
41
|
-
this.updateCheckboxState(selectedItem);
|
|
42
|
-
}
|
|
16
|
+
return (_a2 = e3 == null ? void 0 : e3.classList) == null ? void 0 : _a2.contains("toggle");
|
|
17
|
+
})) if ("single" === this.selection) for (let e3 of this.getAllItems()) e3.selected = e3 === t2;
|
|
18
|
+
else "multiple" === this.selection && (t2.selected = !t2.selected, this.updateCheckboxState(t2));
|
|
43
19
|
});
|
|
44
|
-
|
|
45
|
-
* Starts dragging a tree item when the drag begins from the configured start slot handle.
|
|
46
|
-
* @param {DragEvent} e The drag event.
|
|
47
|
-
* @returns {void}
|
|
48
|
-
*/
|
|
49
|
-
__publicField(this, "handleDragStart", (e) => {
|
|
20
|
+
__publicField(this, "handleDragStart", (e2) => {
|
|
50
21
|
var _a;
|
|
51
|
-
if (!this.reorder || !this.isReorderHandleEvent(
|
|
52
|
-
const
|
|
53
|
-
|
|
54
|
-
this.draggedItem = item;
|
|
55
|
-
item.classList.add("wje-tree-dragging");
|
|
56
|
-
if (e.dataTransfer) {
|
|
57
|
-
e.dataTransfer.effectAllowed = "move";
|
|
58
|
-
e.dataTransfer.setData("text/plain", ((_a = item.textContent) == null ? void 0 : _a.trim()) || "");
|
|
59
|
-
}
|
|
22
|
+
if (!this.reorder || !this.isReorderHandleEvent(e2)) return;
|
|
23
|
+
const t2 = this.getTreeItemFromEvent(e2);
|
|
24
|
+
t2 && (this.draggedItem = t2, t2.classList.add("wje-tree-dragging"), e2.dataTransfer && (e2.dataTransfer.effectAllowed = "move", e2.dataTransfer.setData("text/plain", ((_a = t2.textContent) == null ? void 0 : _a.trim()) || "")));
|
|
60
25
|
});
|
|
61
|
-
|
|
62
|
-
* Updates the current drop target and exposes a visual drop position.
|
|
63
|
-
* @param {DragEvent} e The drag event.
|
|
64
|
-
* @returns {void}
|
|
65
|
-
*/
|
|
66
|
-
__publicField(this, "handleDragOver", (e) => {
|
|
26
|
+
__publicField(this, "handleDragOver", (e2) => {
|
|
67
27
|
if (!this.reorder || !this.draggedItem) return;
|
|
68
|
-
const
|
|
69
|
-
if (!this.canDrop(this.draggedItem,
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
e.preventDefault();
|
|
74
|
-
if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
|
|
75
|
-
const position = this.getDropPosition(e, target);
|
|
76
|
-
this.setDropState(target, position);
|
|
28
|
+
const t2 = this.getTreeItemFromEvent(e2);
|
|
29
|
+
if (!this.canDrop(this.draggedItem, t2)) return void this.clearDropState();
|
|
30
|
+
e2.preventDefault(), e2.dataTransfer && (e2.dataTransfer.dropEffect = "move");
|
|
31
|
+
const r = this.getDropPosition(e2, t2);
|
|
32
|
+
this.setDropState(t2, r);
|
|
77
33
|
});
|
|
78
|
-
|
|
79
|
-
* Completes a tree item move.
|
|
80
|
-
* @param {DragEvent} e The drop event.
|
|
81
|
-
* @returns {void}
|
|
82
|
-
*/
|
|
83
|
-
__publicField(this, "handleDrop", (e) => {
|
|
34
|
+
__publicField(this, "handleDrop", (e2) => {
|
|
84
35
|
if (!this.reorder || !this.draggedItem) return;
|
|
85
|
-
|
|
86
|
-
const
|
|
87
|
-
|
|
88
|
-
const detail = this.moveItem(this.draggedItem, target, position);
|
|
89
|
-
if (detail) {
|
|
90
|
-
this.dispatchEvent(new CustomEvent("wje-tree:move", {
|
|
91
|
-
detail,
|
|
92
|
-
bubbles: true,
|
|
93
|
-
composed: true
|
|
94
|
-
}));
|
|
95
|
-
}
|
|
96
|
-
this.clearDragState();
|
|
36
|
+
e2.preventDefault();
|
|
37
|
+
const t2 = this.dropTarget || this.getTreeItemFromEvent(e2), r = this.dropPosition || this.getDropPosition(e2, t2), s = this.moveItem(this.draggedItem, t2, r);
|
|
38
|
+
s && this.dispatchEvent(new CustomEvent("wje-tree:move", { detail: s, bubbles: true, composed: true })), this.clearDragState();
|
|
97
39
|
});
|
|
98
|
-
/**
|
|
99
|
-
* Clears drag state after the browser drag operation ends.
|
|
100
|
-
* @returns {void}
|
|
101
|
-
*/
|
|
102
40
|
__publicField(this, "handleDragEnd", () => {
|
|
103
41
|
this.clearDragState();
|
|
104
42
|
});
|
|
105
|
-
this.draggedItem = null;
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
* Sets the selection attribute for the element.
|
|
111
|
-
* @param {string} value The value to set as the selection attribute.
|
|
112
|
-
*/
|
|
113
|
-
set selection(value) {
|
|
114
|
-
this.setAttribute("selection", value);
|
|
115
|
-
}
|
|
116
|
-
/**
|
|
117
|
-
* Gets the current selection mode for the element.
|
|
118
|
-
* If no selection is explicitly set, it defaults to 'single'.
|
|
119
|
-
* @returns {string} The current selection mode, either set by the element's attribute or the default value 'single'.
|
|
120
|
-
*/
|
|
43
|
+
this.draggedItem = null, this.dropTarget = null, this.dropPosition = null;
|
|
44
|
+
}
|
|
45
|
+
set selection(e2) {
|
|
46
|
+
this.setAttribute("selection", e2);
|
|
47
|
+
}
|
|
121
48
|
get selection() {
|
|
122
49
|
return this.getAttribute("selection") || "single";
|
|
123
50
|
}
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
*/
|
|
128
|
-
set reorder(value) {
|
|
129
|
-
if (value) this.setAttribute("reorder", "");
|
|
130
|
-
else this.removeAttribute("reorder");
|
|
131
|
-
}
|
|
132
|
-
/**
|
|
133
|
-
* Indicates whether tree items can be reordered with the start slot handle.
|
|
134
|
-
* @returns {boolean}
|
|
135
|
-
*/
|
|
51
|
+
set reorder(e2) {
|
|
52
|
+
e2 ? this.setAttribute("reorder", "") : this.removeAttribute("reorder");
|
|
53
|
+
}
|
|
136
54
|
get reorder() {
|
|
137
55
|
return this.hasAttribute("reorder");
|
|
138
56
|
}
|
|
139
|
-
/**
|
|
140
|
-
* Returns the CSS stylesheet for the component.
|
|
141
|
-
* @static
|
|
142
|
-
* @returns {CSSStyleSheet} The CSS stylesheet
|
|
143
|
-
*/
|
|
144
57
|
static get cssStyleSheet() {
|
|
145
|
-
return
|
|
58
|
+
return ":host{position:relative;width:100%;font-size:0}";
|
|
146
59
|
}
|
|
147
|
-
/**
|
|
148
|
-
* Setup attributes for the Button element.
|
|
149
|
-
*/
|
|
150
60
|
setupAttributes() {
|
|
151
|
-
this.isShadowRoot = "open";
|
|
152
|
-
|
|
153
|
-
}
|
|
154
|
-
/**
|
|
155
|
-
* A method called before the drawing or rendering process of tree items.
|
|
156
|
-
* It iterates through all `wje-tree-item` elements, updating their selection state
|
|
157
|
-
* and managing their expand/collapse icons accordingly.
|
|
158
|
-
* @returns {void} This method does not return a value.
|
|
159
|
-
*/
|
|
61
|
+
this.isShadowRoot = "open", this.syncAria();
|
|
62
|
+
}
|
|
160
63
|
beforeDraw() {
|
|
161
|
-
const
|
|
162
|
-
|
|
163
|
-
items == null ? void 0 : items.forEach((item) => {
|
|
64
|
+
const e2 = this.querySelector("template"), t2 = this.querySelectorAll("wje-tree-item");
|
|
65
|
+
t2 == null ? void 0 : t2.forEach((t3) => {
|
|
164
66
|
var _a;
|
|
165
|
-
|
|
166
|
-
(_a = item.syncNestingState) == null ? void 0 : _a.call(item);
|
|
167
|
-
this.appendTemplateSlot(item, template, "expand");
|
|
168
|
-
this.appendTemplateSlot(item, template, "collapse");
|
|
169
|
-
this.appendTemplateSlot(item, template, "start");
|
|
170
|
-
this.appendTemplateSlot(item, template, "end");
|
|
171
|
-
if (this.reorder) this.setupReorderHandle(item);
|
|
67
|
+
t3.selection = this.selection, (_a = t3.syncNestingState) == null ? void 0 : _a.call(t3), this.appendTemplateSlot(t3, e2, "expand"), this.appendTemplateSlot(t3, e2, "collapse"), this.appendTemplateSlot(t3, e2, "start"), this.appendTemplateSlot(t3, e2, "end"), this.reorder && this.setupReorderHandle(t3);
|
|
172
68
|
});
|
|
173
69
|
}
|
|
174
|
-
/**
|
|
175
|
-
* Draw method for the tree.
|
|
176
|
-
* @returns {object} Document fragment
|
|
177
|
-
*/
|
|
178
70
|
draw() {
|
|
179
|
-
let
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
native.appendChild(slot);
|
|
185
|
-
fragment.appendChild(native);
|
|
186
|
-
return fragment;
|
|
187
|
-
}
|
|
188
|
-
/**
|
|
189
|
-
* Called after the draw process of the component is completed.
|
|
190
|
-
* Typically used to add event listeners or perform operations
|
|
191
|
-
* that are dependent on the component's drawn state.
|
|
192
|
-
* @returns {void} This method does not return a value.
|
|
193
|
-
*/
|
|
71
|
+
let e2 = document.createDocumentFragment(), t2 = document.createElement("div");
|
|
72
|
+
t2.setAttribute("part", "native"), t2.classList.add("native-tree");
|
|
73
|
+
let r = document.createElement("slot");
|
|
74
|
+
return t2.appendChild(r), e2.appendChild(t2), e2;
|
|
75
|
+
}
|
|
194
76
|
afterDraw() {
|
|
195
|
-
this.addEventListener("click", this.handleClick);
|
|
196
|
-
|
|
197
|
-
this.addEventListener("dragover", this.handleDragOver);
|
|
198
|
-
this.addEventListener("drop", this.handleDrop);
|
|
199
|
-
this.addEventListener("dragend", this.handleDragEnd);
|
|
200
|
-
this.syncAria();
|
|
201
|
-
}
|
|
202
|
-
/**
|
|
203
|
-
* Syncs ARIA attributes on the host element.
|
|
204
|
-
*/
|
|
77
|
+
this.addEventListener("click", this.handleClick), this.addEventListener("dragstart", this.handleDragStart), this.addEventListener("dragover", this.handleDragOver), this.addEventListener("drop", this.handleDrop), this.addEventListener("dragend", this.handleDragEnd), this.syncAria();
|
|
78
|
+
}
|
|
205
79
|
syncAria() {
|
|
206
|
-
this.setAriaState({
|
|
207
|
-
role: "tree",
|
|
208
|
-
multiselectable: this.selection === "multiple" ? "true" : void 0
|
|
209
|
-
});
|
|
80
|
+
this.setAriaState({ role: "tree", multiselectable: "multiple" === this.selection ? "true" : void 0 });
|
|
210
81
|
}
|
|
211
82
|
beforeDisconnect() {
|
|
212
|
-
this.removeEventListener("click", this.handleClick);
|
|
213
|
-
|
|
214
|
-
this.removeEventListener("dragover", this.handleDragOver);
|
|
215
|
-
this.removeEventListener("drop", this.handleDrop);
|
|
216
|
-
this.removeEventListener("dragend", this.handleDragEnd);
|
|
217
|
-
}
|
|
218
|
-
/**
|
|
219
|
-
* Retrieves all items that match the selector 'wje-tree-item' within the current context.
|
|
220
|
-
* @returns {Array<Element>} An array of all matching DOM elements.
|
|
221
|
-
*/
|
|
83
|
+
this.removeEventListener("click", this.handleClick), this.removeEventListener("dragstart", this.handleDragStart), this.removeEventListener("dragover", this.handleDragOver), this.removeEventListener("drop", this.handleDrop), this.removeEventListener("dragend", this.handleDragEnd);
|
|
84
|
+
}
|
|
222
85
|
getAllItems() {
|
|
223
86
|
return [...this.querySelectorAll("wje-tree-item")];
|
|
224
87
|
}
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
slotClone.classList.add("wje-tree-template-slot", templateSlotClass);
|
|
240
|
-
item.append(slotClone);
|
|
241
|
-
}
|
|
242
|
-
/**
|
|
243
|
-
* Returns the internal class used to identify cloned template slot content.
|
|
244
|
-
* @param {string} slotName Name of the projected slot.
|
|
245
|
-
* @returns {string}
|
|
246
|
-
*/
|
|
247
|
-
getTemplateSlotClass(slotName) {
|
|
248
|
-
return `wje-tree-template-slot-${slotName}`;
|
|
249
|
-
}
|
|
250
|
-
/**
|
|
251
|
-
* Marks direct start slot content as the drag handle for reorderable trees.
|
|
252
|
-
* @param {HTMLElement} item Host item that receives draggable start content.
|
|
253
|
-
* @returns {void}
|
|
254
|
-
*/
|
|
255
|
-
setupReorderHandle(item) {
|
|
256
|
-
const handles = item.querySelectorAll(':scope > [slot="start"]');
|
|
257
|
-
handles.forEach((handle) => {
|
|
258
|
-
handle.setAttribute("draggable", "true");
|
|
259
|
-
handle.classList.add("wje-tree-drag-handle");
|
|
260
|
-
if (!handle.hasAttribute("aria-label")) {
|
|
261
|
-
handle.setAttribute("aria-label", "Move tree item");
|
|
262
|
-
}
|
|
88
|
+
appendTemplateSlot(e2, t2, r) {
|
|
89
|
+
const s = t2 == null ? void 0 : t2.content.querySelector(`[slot="${r}"]`);
|
|
90
|
+
if (!s) return;
|
|
91
|
+
const i = this.getTemplateSlotClass(r);
|
|
92
|
+
if (e2.querySelector(`:scope > [slot="${r}"].${i}`)) return;
|
|
93
|
+
const n = s.cloneNode(true);
|
|
94
|
+
n.classList.add("wje-tree-template-slot", i), e2.append(n);
|
|
95
|
+
}
|
|
96
|
+
getTemplateSlotClass(e2) {
|
|
97
|
+
return `wje-tree-template-slot-${e2}`;
|
|
98
|
+
}
|
|
99
|
+
setupReorderHandle(e2) {
|
|
100
|
+
e2.querySelectorAll(':scope > [slot="start"]').forEach((e3) => {
|
|
101
|
+
e3.setAttribute("draggable", "true"), e3.classList.add("wje-tree-drag-handle"), e3.hasAttribute("aria-label") || e3.setAttribute("aria-label", "Move tree item");
|
|
263
102
|
});
|
|
264
103
|
}
|
|
265
|
-
|
|
266
|
-
* Finds a tree item from a composed event path.
|
|
267
|
-
* @param {Event} e User interaction that may originate inside shadow DOM.
|
|
268
|
-
* @returns {HTMLElement|null}
|
|
269
|
-
*/
|
|
270
|
-
getTreeItemFromEvent(e) {
|
|
104
|
+
getTreeItemFromEvent(e2) {
|
|
271
105
|
var _a, _b, _c;
|
|
272
|
-
const
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
/**
|
|
279
|
-
* Checks whether the event started from a reorder handle.
|
|
280
|
-
* @param {Event} e User interaction to inspect.
|
|
281
|
-
* @returns {boolean}
|
|
282
|
-
*/
|
|
283
|
-
isReorderHandleEvent(e) {
|
|
106
|
+
const t2 = (((_a = e2.composedPath) == null ? void 0 : _a.call(e2)) || []).find((e3) => this.isTreeItem(e3) && this.contains(e3));
|
|
107
|
+
if (t2) return t2;
|
|
108
|
+
const r = (_c = (_b = e2.target) == null ? void 0 : _b.closest) == null ? void 0 : _c.call(_b, "wje-tree-item");
|
|
109
|
+
return r && this.contains(r) ? r : null;
|
|
110
|
+
}
|
|
111
|
+
isReorderHandleEvent(e2) {
|
|
284
112
|
var _a;
|
|
285
|
-
return (((_a =
|
|
113
|
+
return (((_a = e2.composedPath) == null ? void 0 : _a.call(e2)) || []).some((e3) => {
|
|
286
114
|
var _a2;
|
|
287
|
-
return (_a2 =
|
|
115
|
+
return (_a2 = e3 == null ? void 0 : e3.classList) == null ? void 0 : _a2.contains("wje-tree-drag-handle");
|
|
288
116
|
});
|
|
289
117
|
}
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
getDirectTreeItems(parent) {
|
|
304
|
-
return Array.from((parent == null ? void 0 : parent.children) || []).filter((child) => this.isTreeItem(child));
|
|
305
|
-
}
|
|
306
|
-
/**
|
|
307
|
-
* Gets the index of a tree item among direct tree item siblings.
|
|
308
|
-
* @param {HTMLElement} item Element whose sibling position should be resolved.
|
|
309
|
-
* @returns {number}
|
|
310
|
-
*/
|
|
311
|
-
getTreeItemIndex(item) {
|
|
312
|
-
return this.getDirectTreeItems(item.parentElement).indexOf(item);
|
|
313
|
-
}
|
|
314
|
-
/**
|
|
315
|
-
* Determines whether the dragged item can be dropped on the target.
|
|
316
|
-
* @param {HTMLElement} draggedItem Item currently being moved.
|
|
317
|
-
* @param {HTMLElement} targetItem Candidate item under the pointer.
|
|
318
|
-
* @returns {boolean}
|
|
319
|
-
*/
|
|
320
|
-
canDrop(draggedItem, targetItem) {
|
|
321
|
-
return !!draggedItem && !!targetItem && draggedItem !== targetItem && !draggedItem.contains(targetItem);
|
|
322
|
-
}
|
|
323
|
-
/**
|
|
324
|
-
* Resolves the drop position against the visible tree item row.
|
|
325
|
-
* @param {DragEvent} e Browser drag event carrying pointer coordinates.
|
|
326
|
-
* @param {HTMLElement|null} target Item used to calculate row boundaries.
|
|
327
|
-
* @returns {'before'|'inside'|'after'}
|
|
328
|
-
*/
|
|
329
|
-
getDropPosition(e, target) {
|
|
118
|
+
isTreeItem(e2) {
|
|
119
|
+
return e2 instanceof Element && "wje-tree-item" === e2.localName;
|
|
120
|
+
}
|
|
121
|
+
getDirectTreeItems(e2) {
|
|
122
|
+
return Array.from((e2 == null ? void 0 : e2.children) || []).filter((e3) => this.isTreeItem(e3));
|
|
123
|
+
}
|
|
124
|
+
getTreeItemIndex(e2) {
|
|
125
|
+
return this.getDirectTreeItems(e2.parentElement).indexOf(e2);
|
|
126
|
+
}
|
|
127
|
+
canDrop(e2, t2) {
|
|
128
|
+
return !!e2 && !!t2 && e2 !== t2 && !e2.contains(t2);
|
|
129
|
+
}
|
|
130
|
+
getDropPosition(e2, t2) {
|
|
330
131
|
var _a, _b, _c;
|
|
331
|
-
const
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
return "inside";
|
|
339
|
-
}
|
|
340
|
-
/**
|
|
341
|
-
* Applies the visual drop position to the current target item.
|
|
342
|
-
* @param {HTMLElement} target Item currently showing insertion feedback.
|
|
343
|
-
* @param {string} position Resolved insertion area for the target row.
|
|
344
|
-
* @returns {void}
|
|
345
|
-
*/
|
|
346
|
-
setDropState(target, position) {
|
|
347
|
-
if (this.dropTarget !== target || this.dropPosition !== position) {
|
|
348
|
-
this.clearDropState();
|
|
349
|
-
this.dropTarget = target;
|
|
350
|
-
this.dropPosition = position;
|
|
351
|
-
target.classList.add(this.getDropPositionClass(position));
|
|
352
|
-
}
|
|
132
|
+
const r = (_a = t2 == null ? void 0 : t2.shadowRoot) == null ? void 0 : _a.querySelector(".item"), s = ((_b = r == null ? void 0 : r.getBoundingClientRect) == null ? void 0 : _b.call(r)) || ((_c = t2 == null ? void 0 : t2.getBoundingClientRect) == null ? void 0 : _c.call(t2));
|
|
133
|
+
if (!s) return "after";
|
|
134
|
+
const i = s.top + 0.25 * s.height, n = s.bottom - 0.25 * s.height;
|
|
135
|
+
return e2.clientY < i ? "before" : e2.clientY > n ? "after" : "inside";
|
|
136
|
+
}
|
|
137
|
+
setDropState(e2, t2) {
|
|
138
|
+
this.dropTarget === e2 && this.dropPosition === t2 || (this.clearDropState(), this.dropTarget = e2, this.dropPosition = t2, e2.classList.add(this.getDropPositionClass(t2)));
|
|
353
139
|
}
|
|
354
|
-
/**
|
|
355
|
-
* Clears visual drop target state.
|
|
356
|
-
* @returns {void}
|
|
357
|
-
*/
|
|
358
140
|
clearDropState() {
|
|
359
141
|
var _a;
|
|
360
|
-
(_a = this.dropTarget) == null ? void 0 : _a.classList.remove(
|
|
361
|
-
|
|
362
|
-
this.getDropPositionClass("inside"),
|
|
363
|
-
this.getDropPositionClass("after")
|
|
364
|
-
);
|
|
365
|
-
this.dropTarget = null;
|
|
366
|
-
this.dropPosition = null;
|
|
367
|
-
}
|
|
368
|
-
/**
|
|
369
|
-
* Clears the active drag state.
|
|
370
|
-
* @returns {void}
|
|
371
|
-
*/
|
|
142
|
+
(_a = this.dropTarget) == null ? void 0 : _a.classList.remove(this.getDropPositionClass("before"), this.getDropPositionClass("inside"), this.getDropPositionClass("after")), this.dropTarget = null, this.dropPosition = null;
|
|
143
|
+
}
|
|
372
144
|
clearDragState() {
|
|
373
145
|
var _a;
|
|
374
|
-
(_a = this.draggedItem) == null ? void 0 : _a.classList.remove("wje-tree-dragging");
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
* @param {'before'|'inside'|'after'} position Drop marker position.
|
|
381
|
-
* @returns {string}
|
|
382
|
-
*/
|
|
383
|
-
getDropPositionClass(position) {
|
|
384
|
-
return `wje-tree-drop-${position}`;
|
|
385
|
-
}
|
|
386
|
-
/**
|
|
387
|
-
* Moves a tree item relative to another tree item and syncs nesting metadata.
|
|
388
|
-
* @param {HTMLElement} draggedItem The item being moved.
|
|
389
|
-
* @param {HTMLElement} targetItem Item that receives or anchors the moved item.
|
|
390
|
-
* @param {'before'|'inside'|'after'} position The target position.
|
|
391
|
-
* @returns {object|null} Move detail, or null when the move is invalid.
|
|
392
|
-
*/
|
|
393
|
-
moveItem(draggedItem, targetItem, position = "after") {
|
|
146
|
+
(_a = this.draggedItem) == null ? void 0 : _a.classList.remove("wje-tree-dragging"), this.clearDropState(), this.draggedItem = null;
|
|
147
|
+
}
|
|
148
|
+
getDropPositionClass(e2) {
|
|
149
|
+
return `wje-tree-drop-${e2}`;
|
|
150
|
+
}
|
|
151
|
+
moveItem(e2, t2, r = "after") {
|
|
394
152
|
var _a, _b, _c;
|
|
395
|
-
if (!this.canDrop(
|
|
396
|
-
const
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
(_b = targetItem.setChildrenExpanded) == null ? void 0 : _b.call(targetItem, true);
|
|
402
|
-
} else {
|
|
403
|
-
const parent = targetItem.parentElement;
|
|
404
|
-
const reference = position === "before" ? targetItem : targetItem.nextSibling;
|
|
405
|
-
parent.insertBefore(draggedItem, reference);
|
|
153
|
+
if (!this.canDrop(e2, t2)) return null;
|
|
154
|
+
const s = e2.parentElement, i = (_a = s == null ? void 0 : s.closest) == null ? void 0 : _a.call(s, "wje-tree-item"), n = this.getTreeItemIndex(e2);
|
|
155
|
+
if ("inside" === r) t2.appendChild(e2), (_b = t2.setChildrenExpanded) == null ? void 0 : _b.call(t2, true);
|
|
156
|
+
else {
|
|
157
|
+
const s2 = t2.parentElement, i2 = "before" === r ? t2 : t2.nextSibling;
|
|
158
|
+
s2.insertBefore(e2, i2);
|
|
406
159
|
}
|
|
407
160
|
this.syncTreeItems();
|
|
408
|
-
const
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
item: draggedItem,
|
|
416
|
-
target: targetItem,
|
|
417
|
-
position,
|
|
418
|
-
from: fromIndex,
|
|
419
|
-
to: toIndex,
|
|
420
|
-
order,
|
|
421
|
-
orderElements,
|
|
422
|
-
orderIds: this.getOrderIds(toParent),
|
|
423
|
-
itemId: this.getItemId(draggedItem),
|
|
424
|
-
targetId: this.getItemId(targetItem),
|
|
425
|
-
fromParentItem,
|
|
426
|
-
toParentItem,
|
|
427
|
-
fromParentId: this.getItemId(fromParentItem),
|
|
428
|
-
toParentId: this.getItemId(toParentItem),
|
|
429
|
-
fromParent,
|
|
430
|
-
toParent,
|
|
431
|
-
fromIndex,
|
|
432
|
-
toIndex
|
|
433
|
-
};
|
|
434
|
-
}
|
|
435
|
-
/**
|
|
436
|
-
* Returns cloned direct tree item children for an event detail.
|
|
437
|
-
* @param {HTMLElement} parent Parent whose direct tree item children should be serialized.
|
|
438
|
-
* @returns {HTMLElement[]}
|
|
439
|
-
*/
|
|
440
|
-
getOrderElements(parent) {
|
|
441
|
-
return this.getDirectTreeItems(parent).map((item) => {
|
|
442
|
-
const clone = item.cloneNode(true);
|
|
443
|
-
clone.querySelectorAll(".wje-tree-template-slot").forEach((slot) => slot.remove());
|
|
444
|
-
return clone;
|
|
161
|
+
const a = e2.parentElement, o = (_c = a == null ? void 0 : a.closest) == null ? void 0 : _c.call(a, "wje-tree-item"), l = this.getTreeItemIndex(e2), d = this.getOrderElements(a), h = d.map((e3) => e3.innerText.trim());
|
|
162
|
+
return this.refreshMovedItems([i, o, t2]), { item: e2, target: t2, position: r, from: n, to: l, order: h, orderElements: d, orderIds: this.getOrderIds(a), itemId: this.getItemId(e2), targetId: this.getItemId(t2), fromParentItem: i, toParentItem: o, fromParentId: this.getItemId(i), toParentId: this.getItemId(o), fromParent: s, toParent: a, fromIndex: n, toIndex: l };
|
|
163
|
+
}
|
|
164
|
+
getOrderElements(e2) {
|
|
165
|
+
return this.getDirectTreeItems(e2).map((e3) => {
|
|
166
|
+
const t2 = e3.cloneNode(true);
|
|
167
|
+
return t2.querySelectorAll(".wje-tree-template-slot").forEach((e4) => e4.remove()), t2;
|
|
445
168
|
});
|
|
446
169
|
}
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
return this.getDirectTreeItems(parent).map((item) => this.getItemId(item));
|
|
454
|
-
}
|
|
455
|
-
/**
|
|
456
|
-
* Gets an application-facing id from a tree item.
|
|
457
|
-
* @param {HTMLElement|null} item Tree item to read.
|
|
458
|
-
* @returns {string|null}
|
|
459
|
-
*/
|
|
460
|
-
getItemId(item) {
|
|
461
|
-
if (!this.isTreeItem(item)) return null;
|
|
462
|
-
return item.getAttribute("value") || item.id || null;
|
|
463
|
-
}
|
|
464
|
-
/**
|
|
465
|
-
* Syncs item selection mode and nesting metadata after a DOM move.
|
|
466
|
-
* @returns {void}
|
|
467
|
-
*/
|
|
170
|
+
getOrderIds(e2) {
|
|
171
|
+
return this.getDirectTreeItems(e2).map((e3) => this.getItemId(e3));
|
|
172
|
+
}
|
|
173
|
+
getItemId(e2) {
|
|
174
|
+
return this.isTreeItem(e2) && (e2.getAttribute("value") || e2.id) || null;
|
|
175
|
+
}
|
|
468
176
|
syncTreeItems() {
|
|
469
|
-
this.getAllItems().forEach((
|
|
177
|
+
this.getAllItems().forEach((e2) => {
|
|
470
178
|
var _a, _b;
|
|
471
|
-
|
|
472
|
-
(_a = item.syncNestingState) == null ? void 0 : _a.call(item);
|
|
473
|
-
(_b = item.syncAria) == null ? void 0 : _b.call(item);
|
|
179
|
+
e2.selection = this.selection, (_a = e2.syncNestingState) == null ? void 0 : _a.call(e2), (_b = e2.syncAria) == null ? void 0 : _b.call(e2);
|
|
474
180
|
});
|
|
475
181
|
}
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
* @param {HTMLElement[]} items Items that may need refresh.
|
|
479
|
-
* @returns {void}
|
|
480
|
-
*/
|
|
481
|
-
refreshMovedItems(items) {
|
|
482
|
-
[...new Set(items)].forEach((item) => {
|
|
182
|
+
refreshMovedItems(e2) {
|
|
183
|
+
[...new Set(e2)].forEach((e3) => {
|
|
483
184
|
var _a;
|
|
484
|
-
|
|
185
|
+
this.isTreeItem(e3) && ((_a = e3.refresh) == null ? void 0 : _a.call(e3));
|
|
485
186
|
});
|
|
486
187
|
}
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
* and downwards to child elements as necessary.
|
|
490
|
-
* @param {object} changedItem The specific item whose checkbox state has changed.
|
|
491
|
-
* @param {boolean} [isInitialSync] Indicates whether the state update is part of the initial synchronization process.
|
|
492
|
-
* @returns {void} This method does not return a value.
|
|
493
|
-
*/
|
|
494
|
-
updateCheckboxState(changedItem, isInitialSync = false) {
|
|
495
|
-
this.isInitialSync = isInitialSync;
|
|
496
|
-
this.propagateStateDownwards(changedItem);
|
|
497
|
-
this.propagateStateUpwards(changedItem);
|
|
498
|
-
}
|
|
499
|
-
/**
|
|
500
|
-
* Updates the state of the parent item based on the state of its child items.
|
|
501
|
-
* Recursively propagates changes up to all parent items to reflect the selection
|
|
502
|
-
* or indeterminate state accurately.
|
|
503
|
-
* @param {object} item The current tree item whose parent state needs to be updated.
|
|
504
|
-
* It is expected to have properties `selected`, `indeterminate`,
|
|
505
|
-
* and a method `getChildrenItems({ includeDisabled: boolean })`.
|
|
506
|
-
* @returns {void} This method does not return a value.
|
|
507
|
-
*/
|
|
508
|
-
updateParentState(item) {
|
|
509
|
-
var _a;
|
|
510
|
-
const children = item.getChildrenItems({ includeDisabled: false });
|
|
511
|
-
if (children.length) {
|
|
512
|
-
const areAllChildrenChecked = children.every((child) => child.selected);
|
|
513
|
-
const areSomeChildrenChecked = children.some((child) => child.selected);
|
|
514
|
-
const areSomeChildrenIndeterminate = children.some((child) => child.indeterminate);
|
|
515
|
-
item.selected = areAllChildrenChecked;
|
|
516
|
-
item.indeterminate = areSomeChildrenIndeterminate || areSomeChildrenChecked && !areAllChildrenChecked;
|
|
517
|
-
} else {
|
|
518
|
-
item.indeterminate = false;
|
|
519
|
-
}
|
|
520
|
-
const parent = (_a = item.parentElement) == null ? void 0 : _a.closest("wje-tree-item");
|
|
521
|
-
if (parent) {
|
|
522
|
-
this.updateParentState(parent);
|
|
523
|
-
}
|
|
188
|
+
updateCheckboxState(e2, t2 = false) {
|
|
189
|
+
this.isInitialSync = t2, this.propagateStateDownwards(e2), this.propagateStateUpwards(e2);
|
|
524
190
|
}
|
|
525
|
-
|
|
526
|
-
* Propagates the state changes of an item upwards through its ancestors in the hierarchy.
|
|
527
|
-
* Calls the `updateParentState` method for each parent element until no parent exists.
|
|
528
|
-
* @param {HTMLElement} item The current item whose state to propagate to its parent.
|
|
529
|
-
* @returns {void} This method does not return a value.
|
|
530
|
-
*/
|
|
531
|
-
propagateStateUpwards(item) {
|
|
191
|
+
updateParentState(e2) {
|
|
532
192
|
var _a;
|
|
533
|
-
const
|
|
534
|
-
if (
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
}
|
|
193
|
+
const t2 = e2.getChildrenItems({ includeDisabled: false });
|
|
194
|
+
if (t2.length) {
|
|
195
|
+
const r2 = t2.every((e3) => e3.selected), s = t2.some((e3) => e3.selected), i = t2.some((e3) => e3.indeterminate);
|
|
196
|
+
e2.selected = r2, e2.indeterminate = i || s && !r2;
|
|
197
|
+
} else e2.indeterminate = false;
|
|
198
|
+
const r = (_a = e2.parentElement) == null ? void 0 : _a.closest("wje-tree-item");
|
|
199
|
+
r && this.updateParentState(r);
|
|
200
|
+
}
|
|
201
|
+
propagateStateUpwards(e2) {
|
|
202
|
+
var _a;
|
|
203
|
+
const t2 = (_a = e2.parentElement) == null ? void 0 : _a.closest("wje-tree-item");
|
|
204
|
+
t2 && (this.updateParentState(t2), this.propagateStateUpwards(t2));
|
|
538
205
|
}
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
* @returns {void} This method does not return a value.
|
|
545
|
-
*/
|
|
546
|
-
propagateStateDownwards(item) {
|
|
547
|
-
const isChecked = item.selected;
|
|
548
|
-
item.getChildrenItems().forEach((child) => {
|
|
549
|
-
child.selected = this.isInitialSync ? isChecked || child.selected : !child.disabled && isChecked;
|
|
550
|
-
this.propagateStateDownwards(child);
|
|
551
|
-
});
|
|
552
|
-
if (this.isInitialSync) {
|
|
553
|
-
this.updateParentState(item);
|
|
554
|
-
}
|
|
206
|
+
propagateStateDownwards(e2) {
|
|
207
|
+
const t2 = e2.selected;
|
|
208
|
+
e2.getChildrenItems().forEach((e3) => {
|
|
209
|
+
e3.selected = this.isInitialSync ? t2 || e3.selected : !e3.disabled && t2, this.propagateStateDownwards(e3);
|
|
210
|
+
}), this.isInitialSync && this.updateParentState(e2);
|
|
555
211
|
}
|
|
556
212
|
}
|
|
557
|
-
|
|
213
|
+
t.define("wje-tree", t);
|
|
558
214
|
export {
|
|
559
|
-
|
|
215
|
+
t as default
|
|
560
216
|
};
|
|
561
217
|
//# sourceMappingURL=wje-tree.js.map
|