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.
Files changed (233) hide show
  1. package/dist/animations.js +28 -51
  2. package/dist/animations.js.map +1 -1
  3. package/dist/base-path.js +19 -31
  4. package/dist/base-path.js.map +1 -1
  5. package/dist/custom-elements.json +11504 -11499
  6. package/dist/dark.css +1 -302
  7. package/dist/date.js +16 -36
  8. package/dist/date.js.map +1 -1
  9. package/dist/element-utils.js +20 -81
  10. package/dist/element-utils.js.map +1 -1
  11. package/dist/event.js +49 -165
  12. package/dist/event.js.map +1 -1
  13. package/dist/form-associated-element-BjeJn7j8.js +101 -0
  14. package/dist/{form-associated-element-DEQ4y-jn.js.map → form-associated-element-BjeJn7j8.js.map} +1 -1
  15. package/dist/icon-DmsqtDpL.js +102 -0
  16. package/dist/{icon-CReYMzAK.js.map → icon-DmsqtDpL.js.map} +1 -1
  17. package/dist/light.css +1 -731
  18. package/dist/localize.js +36 -111
  19. package/dist/localize.js.map +1 -1
  20. package/dist/packages/wje-accordion-item/accordion-item.element.d.ts +3 -2
  21. package/dist/permissions.js +14 -41
  22. package/dist/permissions.js.map +1 -1
  23. package/dist/popup.element-CbkhthPP.js +806 -0
  24. package/dist/{popup.element-CwXvVFK7.js.map → popup.element-CbkhthPP.js.map} +1 -1
  25. package/dist/router-links-CNsJ-elb.js +105 -0
  26. package/dist/{router-links-wjqCnncc.js.map → router-links-CNsJ-elb.js.map} +1 -1
  27. package/dist/skeleton.css +1 -197
  28. package/dist/styles.css +1 -866
  29. package/dist/universal-service.js +48 -109
  30. package/dist/universal-service.js.map +1 -1
  31. package/dist/utils.js +11 -18
  32. package/dist/utils.js.map +1 -1
  33. package/dist/web-types.json +760 -760
  34. package/dist/wje-accordion-item.js +33 -106
  35. package/dist/wje-accordion-item.js.map +1 -1
  36. package/dist/wje-accordion.js +19 -84
  37. package/dist/wje-accordion.js.map +1 -1
  38. package/dist/wje-animation.js +37 -4258
  39. package/dist/wje-animation.js.map +1 -1
  40. package/dist/wje-aside.js +9 -34
  41. package/dist/wje-aside.js.map +1 -1
  42. package/dist/wje-avatar.js +36 -126
  43. package/dist/wje-avatar.js.map +1 -1
  44. package/dist/wje-badge.js +10 -52
  45. package/dist/wje-badge.js.map +1 -1
  46. package/dist/wje-breadcrumb.js +205 -672
  47. package/dist/wje-breadcrumb.js.map +1 -1
  48. package/dist/wje-breadcrumbs.js +177 -633
  49. package/dist/wje-breadcrumbs.js.map +1 -1
  50. package/dist/wje-button-group.js +48 -153
  51. package/dist/wje-button-group.js.map +1 -1
  52. package/dist/wje-button.js +92 -413
  53. package/dist/wje-button.js.map +1 -1
  54. package/dist/wje-card-content.js +7 -30
  55. package/dist/wje-card-content.js.map +1 -1
  56. package/dist/wje-card-controls.js +7 -30
  57. package/dist/wje-card-controls.js.map +1 -1
  58. package/dist/wje-card-header.js +7 -30
  59. package/dist/wje-card-header.js.map +1 -1
  60. package/dist/wje-card-subtitle.js +7 -34
  61. package/dist/wje-card-subtitle.js.map +1 -1
  62. package/dist/wje-card-title.js +7 -34
  63. package/dist/wje-card-title.js.map +1 -1
  64. package/dist/wje-card.js +15 -71
  65. package/dist/wje-card.js.map +1 -1
  66. package/dist/wje-carousel-item.js +12 -56
  67. package/dist/wje-carousel-item.js.map +1 -1
  68. package/dist/wje-carousel.js +154 -509
  69. package/dist/wje-carousel.js.map +1 -1
  70. package/dist/wje-checkbox.js +50 -227
  71. package/dist/wje-checkbox.js.map +1 -1
  72. package/dist/wje-chip.js +43 -160
  73. package/dist/wje-chip.js.map +1 -1
  74. package/dist/wje-col.js +7 -20
  75. package/dist/wje-col.js.map +1 -1
  76. package/dist/wje-color-picker.js +445 -1464
  77. package/dist/wje-color-picker.js.map +1 -1
  78. package/dist/wje-container.js +9 -35
  79. package/dist/wje-container.js.map +1 -1
  80. package/dist/wje-copy-button.js +64 -204
  81. package/dist/wje-copy-button.js.map +1 -1
  82. package/dist/wje-dialog.js +85 -553
  83. package/dist/wje-dialog.js.map +1 -1
  84. package/dist/wje-divider.js +7 -34
  85. package/dist/wje-divider.js.map +1 -1
  86. package/dist/wje-dropdown.js +78 -305
  87. package/dist/wje-dropdown.js.map +1 -1
  88. package/dist/wje-element.js +191 -700
  89. package/dist/wje-element.js.map +1 -1
  90. package/dist/wje-file-upload-item.js +51 -156
  91. package/dist/wje-file-upload-item.js.map +1 -1
  92. package/dist/wje-file-upload.js +181 -619
  93. package/dist/wje-file-upload.js.map +1 -1
  94. package/dist/wje-footer.js +7 -31
  95. package/dist/wje-footer.js.map +1 -1
  96. package/dist/wje-form.js +7 -32
  97. package/dist/wje-form.js.map +1 -1
  98. package/dist/wje-format-digital.js +26 -118
  99. package/dist/wje-format-digital.js.map +1 -1
  100. package/dist/wje-grid.js +7 -33
  101. package/dist/wje-grid.js.map +1 -1
  102. package/dist/wje-header.js +9 -35
  103. package/dist/wje-header.js.map +1 -1
  104. package/dist/wje-icon-library.js +12 -18
  105. package/dist/wje-icon-library.js.map +1 -1
  106. package/dist/wje-icon-picker.js +65 -320
  107. package/dist/wje-icon-picker.js.map +1 -1
  108. package/dist/wje-icon.js +1 -1
  109. package/dist/wje-img-comparer.js +37 -114
  110. package/dist/wje-img-comparer.js.map +1 -1
  111. package/dist/wje-img.js +50 -198
  112. package/dist/wje-img.js.map +1 -1
  113. package/dist/wje-infinite-scroll.js +94 -346
  114. package/dist/wje-infinite-scroll.js.map +1 -1
  115. package/dist/wje-input-file.js +23 -84
  116. package/dist/wje-input-file.js.map +1 -1
  117. package/dist/wje-input.js +78 -392
  118. package/dist/wje-input.js.map +1 -1
  119. package/dist/wje-item.js +11 -64
  120. package/dist/wje-item.js.map +1 -1
  121. package/dist/wje-kanban.js +124 -401
  122. package/dist/wje-kanban.js.map +1 -1
  123. package/dist/wje-label.js +9 -32
  124. package/dist/wje-label.js.map +1 -1
  125. package/dist/wje-level-indicator.js +38 -157
  126. package/dist/wje-level-indicator.js.map +1 -1
  127. package/dist/wje-list.js +10 -40
  128. package/dist/wje-list.js.map +1 -1
  129. package/dist/wje-main.js +7 -31
  130. package/dist/wje-main.js.map +1 -1
  131. package/dist/wje-masonry.js +66 -211
  132. package/dist/wje-masonry.js.map +1 -1
  133. package/dist/wje-master.js +45 -161
  134. package/dist/wje-master.js.map +1 -1
  135. package/dist/wje-menu-button.js +10 -38
  136. package/dist/wje-menu-button.js.map +1 -1
  137. package/dist/wje-menu-item.js +127 -577
  138. package/dist/wje-menu-item.js.map +1 -1
  139. package/dist/wje-menu-label.js +9 -35
  140. package/dist/wje-menu-label.js.map +1 -1
  141. package/dist/wje-menu.js +14 -49
  142. package/dist/wje-menu.js.map +1 -1
  143. package/dist/wje-option.js +48 -279
  144. package/dist/wje-option.js.map +1 -1
  145. package/dist/wje-options.js +130 -384
  146. package/dist/wje-options.js.map +1 -1
  147. package/dist/wje-orgchart-group.js +16 -52
  148. package/dist/wje-orgchart-group.js.map +1 -1
  149. package/dist/wje-orgchart-item.js +24 -93
  150. package/dist/wje-orgchart-item.js.map +1 -1
  151. package/dist/wje-orgchart.js +18 -68
  152. package/dist/wje-orgchart.js.map +1 -1
  153. package/dist/wje-pagination.js +113 -397
  154. package/dist/wje-pagination.js.map +1 -1
  155. package/dist/wje-popup.js +3 -3
  156. package/dist/wje-popup.js.map +1 -1
  157. package/dist/wje-progress-bar.js +53 -205
  158. package/dist/wje-progress-bar.js.map +1 -1
  159. package/dist/wje-qr-code.js +398 -2980
  160. package/dist/wje-qr-code.js.map +1 -1
  161. package/dist/wje-radio-group.js +52 -190
  162. package/dist/wje-radio-group.js.map +1 -1
  163. package/dist/wje-radio.js +24 -118
  164. package/dist/wje-radio.js.map +1 -1
  165. package/dist/wje-rate.js +62 -266
  166. package/dist/wje-rate.js.map +1 -1
  167. package/dist/wje-relative-time.js +24 -99
  168. package/dist/wje-relative-time.js.map +1 -1
  169. package/dist/wje-reorder-dropzone.js +9 -31
  170. package/dist/wje-reorder-dropzone.js.map +1 -1
  171. package/dist/wje-reorder-handle.js +67 -204
  172. package/dist/wje-reorder-handle.js.map +1 -1
  173. package/dist/wje-reorder-item.js +14 -44
  174. package/dist/wje-reorder-item.js.map +1 -1
  175. package/dist/wje-reorder.js +61 -246
  176. package/dist/wje-reorder.js.map +1 -1
  177. package/dist/wje-route.js +6 -24
  178. package/dist/wje-route.js.map +1 -1
  179. package/dist/wje-router-link.js +11 -39
  180. package/dist/wje-router-link.js.map +1 -1
  181. package/dist/wje-router-outlet.js +76 -172
  182. package/dist/wje-router-outlet.js.map +1 -1
  183. package/dist/wje-routerx.js +537 -1331
  184. package/dist/wje-routerx.js.map +1 -1
  185. package/dist/wje-row.js +9 -31
  186. package/dist/wje-row.js.map +1 -1
  187. package/dist/wje-select.js +326 -1152
  188. package/dist/wje-select.js.map +1 -1
  189. package/dist/wje-slider.js +44 -225
  190. package/dist/wje-slider.js.map +1 -1
  191. package/dist/wje-sliding-container.js +295 -1319
  192. package/dist/wje-sliding-container.js.map +1 -1
  193. package/dist/wje-split-view.js +35 -121
  194. package/dist/wje-split-view.js.map +1 -1
  195. package/dist/wje-status.js +14 -45
  196. package/dist/wje-status.js.map +1 -1
  197. package/dist/wje-step.js +9 -32
  198. package/dist/wje-step.js.map +1 -1
  199. package/dist/wje-stepper.js +109 -357
  200. package/dist/wje-stepper.js.map +1 -1
  201. package/dist/wje-store.js +67 -360
  202. package/dist/wje-store.js.map +1 -1
  203. package/dist/wje-tab-group.js +85 -314
  204. package/dist/wje-tab-group.js.map +1 -1
  205. package/dist/wje-tab-panel.js +7 -28
  206. package/dist/wje-tab-panel.js.map +1 -1
  207. package/dist/wje-tab.js +21 -198
  208. package/dist/wje-tab.js.map +1 -1
  209. package/dist/wje-textarea.js +64 -264
  210. package/dist/wje-textarea.js.map +1 -1
  211. package/dist/wje-thumbnail.js +10 -51
  212. package/dist/wje-thumbnail.js.map +1 -1
  213. package/dist/wje-toast.js +127 -632
  214. package/dist/wje-toast.js.map +1 -1
  215. package/dist/wje-toggle.js +52 -177
  216. package/dist/wje-toggle.js.map +1 -1
  217. package/dist/wje-toolbar-action.js +128 -456
  218. package/dist/wje-toolbar-action.js.map +1 -1
  219. package/dist/wje-toolbar.js +75 -270
  220. package/dist/wje-toolbar.js.map +1 -1
  221. package/dist/wje-tooltip.js +50 -161
  222. package/dist/wje-tooltip.js.map +1 -1
  223. package/dist/wje-tree-item.js +70 -301
  224. package/dist/wje-tree-item.js.map +1 -1
  225. package/dist/wje-tree.js +145 -489
  226. package/dist/wje-tree.js.map +1 -1
  227. package/dist/wje-visually-hidden.js +7 -34
  228. package/dist/wje-visually-hidden.js.map +1 -1
  229. package/package.json +3 -2
  230. package/dist/form-associated-element-DEQ4y-jn.js +0 -245
  231. package/dist/icon-CReYMzAK.js +0 -245
  232. package/dist/popup.element-CwXvVFK7.js +0 -2133
  233. 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 WJElement from "./wje-element.js";
5
- const styles = "/*\n[ WJ Tree ]\n*/\n\n:host {\n position: relative;\n width: 100%;\n font-size: 0;\n}\n";
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 (e == null ? void 0 : e.preventDefault) e.preventDefault();
27
- if (this.reorder && this.isReorderHandleEvent(e)) return;
28
- const selectedItem = this.getTreeItemFromEvent(e);
29
- if (!selectedItem) return;
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 = el == null ? void 0 : el.classList) == null ? void 0 : _a2.contains("toggle");
33
- });
34
- if (isClickButton) return;
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(e)) return;
52
- const item = this.getTreeItemFromEvent(e);
53
- if (!item) return;
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 target = this.getTreeItemFromEvent(e);
69
- if (!this.canDrop(this.draggedItem, target)) {
70
- this.clearDropState();
71
- return;
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
- e.preventDefault();
86
- const target = this.dropTarget || this.getTreeItemFromEvent(e);
87
- const position = this.dropPosition || this.getDropPosition(e, target);
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
- this.dropTarget = null;
107
- this.dropPosition = null;
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
- * Enables reordering tree items by dragging an element assigned to the start slot.
126
- * @param {boolean} value Whether reordering is enabled.
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 styles;
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
- this.syncAria();
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 template = this.querySelector("template");
162
- const items = this.querySelectorAll("wje-tree-item");
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
- item.selection = this.selection;
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 fragment = document.createDocumentFragment();
180
- let native = document.createElement("div");
181
- native.setAttribute("part", "native");
182
- native.classList.add("native-tree");
183
- let slot = document.createElement("slot");
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
- this.addEventListener("dragstart", this.handleDragStart);
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
- this.removeEventListener("dragstart", this.handleDragStart);
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
- * Retrieves and appends a template slot to a tree item.
227
- * @param {HTMLElement} item The DOM element to which the slot content will be appended.
228
- * @param {HTMLTemplateElement|null} template Template that may provide reusable slot content.
229
- * @param {string} slotName Name of the projected slot content to clone.
230
- * @returns {void}
231
- */
232
- appendTemplateSlot(item, template, slotName) {
233
- const slot = template == null ? void 0 : template.content.querySelector(`[slot="${slotName}"]`);
234
- if (!slot) return;
235
- const templateSlotClass = this.getTemplateSlotClass(slotName);
236
- const existing = item.querySelector(`:scope > [slot="${slotName}"].${templateSlotClass}`);
237
- if (existing) return;
238
- const slotClone = slot.cloneNode(true);
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 path = ((_a = e.composedPath) == null ? void 0 : _a.call(e)) || [];
273
- const pathItem = path.find((el) => this.isTreeItem(el) && this.contains(el));
274
- if (pathItem) return pathItem;
275
- const targetItem = (_c = (_b = e.target) == null ? void 0 : _b.closest) == null ? void 0 : _c.call(_b, "wje-tree-item");
276
- return targetItem && this.contains(targetItem) ? targetItem : null;
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 = e.composedPath) == null ? void 0 : _a.call(e)) || []).some((el) => {
113
+ return (((_a = e2.composedPath) == null ? void 0 : _a.call(e2)) || []).some((e3) => {
286
114
  var _a2;
287
- return (_a2 = el == null ? void 0 : el.classList) == null ? void 0 : _a2.contains("wje-tree-drag-handle");
115
+ return (_a2 = e3 == null ? void 0 : e3.classList) == null ? void 0 : _a2.contains("wje-tree-drag-handle");
288
116
  });
289
117
  }
290
- /**
291
- * Checks whether a node is a tree item element.
292
- * @param {object} node The node to inspect.
293
- * @returns {boolean}
294
- */
295
- isTreeItem(node) {
296
- return node instanceof Element && node.localName === "wje-tree-item";
297
- }
298
- /**
299
- * Returns direct tree item children for a tree or tree item parent.
300
- * @param {HTMLElement} parent The parent element.
301
- * @returns {HTMLElement[]}
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 row = (_a = target == null ? void 0 : target.shadowRoot) == null ? void 0 : _a.querySelector(".item");
332
- const rect = ((_b = row == null ? void 0 : row.getBoundingClientRect) == null ? void 0 : _b.call(row)) || ((_c = target == null ? void 0 : target.getBoundingClientRect) == null ? void 0 : _c.call(target));
333
- if (!rect) return "after";
334
- const topBoundary = rect.top + rect.height * 0.25;
335
- const bottomBoundary = rect.bottom - rect.height * 0.25;
336
- if (e.clientY < topBoundary) return "before";
337
- if (e.clientY > bottomBoundary) return "after";
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
- this.getDropPositionClass("before"),
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
- this.clearDropState();
376
- this.draggedItem = null;
377
- }
378
- /**
379
- * Returns the internal class used to render a drop marker.
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(draggedItem, targetItem)) return null;
396
- const fromParent = draggedItem.parentElement;
397
- const fromParentItem = (_a = fromParent == null ? void 0 : fromParent.closest) == null ? void 0 : _a.call(fromParent, "wje-tree-item");
398
- const fromIndex = this.getTreeItemIndex(draggedItem);
399
- if (position === "inside") {
400
- targetItem.appendChild(draggedItem);
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 toParent = draggedItem.parentElement;
409
- const toParentItem = (_c = toParent == null ? void 0 : toParent.closest) == null ? void 0 : _c.call(toParent, "wje-tree-item");
410
- const toIndex = this.getTreeItemIndex(draggedItem);
411
- const orderElements = this.getOrderElements(toParent);
412
- const order = orderElements.map((item) => item.innerText.trim());
413
- this.refreshMovedItems([fromParentItem, toParentItem, targetItem]);
414
- return {
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
- * Returns stable ids for direct tree item children when they are available.
449
- * @param {HTMLElement} parent Parent whose direct tree item children should be serialized.
450
- * @returns {Array<string|null>}
451
- */
452
- getOrderIds(parent) {
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((item) => {
177
+ this.getAllItems().forEach((e2) => {
470
178
  var _a, _b;
471
- item.selection = this.selection;
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
- * Redraws affected parent items so expand/collapse affordances match current children.
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
- if (this.isTreeItem(item)) (_a = item.refresh) == null ? void 0 : _a.call(item);
185
+ this.isTreeItem(e3) && ((_a = e3.refresh) == null ? void 0 : _a.call(e3));
485
186
  });
486
187
  }
487
- /**
488
- * Updates the state of a checkbox, syncing the state both upwards to parent elements
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 parent = (_a = item.parentElement) == null ? void 0 : _a.closest("wje-tree-item");
534
- if (parent) {
535
- this.updateParentState(parent);
536
- this.propagateStateUpwards(parent);
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
- * Propagates the selected state of an item to its children recursively. Depending on the `isInitialSync` flag,
541
- * it also determines how the state should be applied to the child items and updates the parent state if needed.
542
- * @param {object} item The item whose state is being propagated to its child items. The item must have properties
543
- * such as `selected` and methods like `getChildrenItems` to retrieve its child elements.
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
- Tree.define("wje-tree", Tree);
213
+ t.define("wje-tree", t);
558
214
  export {
559
- Tree as default
215
+ t as default
560
216
  };
561
217
  //# sourceMappingURL=wje-tree.js.map