@toolbox-web/grid 0.4.1 → 0.5.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 (176) hide show
  1. package/README.md +9 -13
  2. package/all.js +1678 -1588
  3. package/all.js.map +1 -1
  4. package/index.js +762 -568
  5. package/index.js.map +1 -1
  6. package/lib/core/grid.d.ts +21 -0
  7. package/lib/core/grid.d.ts.map +1 -1
  8. package/lib/core/internal/config-manager.d.ts +1 -0
  9. package/lib/core/internal/config-manager.d.ts.map +1 -1
  10. package/lib/core/internal/dom-builder.d.ts +2 -0
  11. package/lib/core/internal/dom-builder.d.ts.map +1 -1
  12. package/lib/core/internal/header.d.ts.map +1 -1
  13. package/lib/core/internal/keyboard.d.ts.map +1 -1
  14. package/lib/core/internal/resize.d.ts.map +1 -1
  15. package/lib/core/internal/rows.d.ts.map +1 -1
  16. package/lib/core/internal/shell.d.ts +19 -13
  17. package/lib/core/internal/shell.d.ts.map +1 -1
  18. package/lib/core/internal/utils.d.ts +1 -0
  19. package/lib/core/internal/utils.d.ts.map +1 -1
  20. package/lib/core/plugin/base-plugin.d.ts +70 -3
  21. package/lib/core/plugin/base-plugin.d.ts.map +1 -1
  22. package/lib/core/plugin/expander-column.d.ts +51 -0
  23. package/lib/core/plugin/expander-column.d.ts.map +1 -0
  24. package/lib/core/plugin/plugin-manager.d.ts +6 -2
  25. package/lib/core/plugin/plugin-manager.d.ts.map +1 -1
  26. package/lib/core/plugin/types.d.ts +117 -1
  27. package/lib/core/plugin/types.d.ts.map +1 -1
  28. package/lib/core/types.d.ts +10 -5
  29. package/lib/core/types.d.ts.map +1 -1
  30. package/lib/plugins/clipboard/ClipboardPlugin.d.ts +5 -4
  31. package/lib/plugins/clipboard/ClipboardPlugin.d.ts.map +1 -1
  32. package/lib/plugins/clipboard/index.d.ts +1 -1
  33. package/lib/plugins/clipboard/index.d.ts.map +1 -1
  34. package/lib/plugins/clipboard/index.js +295 -190
  35. package/lib/plugins/clipboard/index.js.map +1 -1
  36. package/lib/plugins/clipboard/types.d.ts +72 -2
  37. package/lib/plugins/clipboard/types.d.ts.map +1 -1
  38. package/lib/plugins/column-virtualization/ColumnVirtualizationPlugin.d.ts +0 -1
  39. package/lib/plugins/column-virtualization/ColumnVirtualizationPlugin.d.ts.map +1 -1
  40. package/lib/plugins/column-virtualization/index.js +143 -56
  41. package/lib/plugins/column-virtualization/index.js.map +1 -1
  42. package/lib/plugins/context-menu/ContextMenuPlugin.d.ts +0 -1
  43. package/lib/plugins/context-menu/ContextMenuPlugin.d.ts.map +1 -1
  44. package/lib/plugins/context-menu/index.js +189 -102
  45. package/lib/plugins/context-menu/index.js.map +1 -1
  46. package/lib/plugins/editing/EditingPlugin.d.ts +2 -7
  47. package/lib/plugins/editing/EditingPlugin.d.ts.map +1 -1
  48. package/lib/plugins/editing/index.js +227 -150
  49. package/lib/plugins/editing/index.js.map +1 -1
  50. package/lib/plugins/export/ExportPlugin.d.ts +0 -1
  51. package/lib/plugins/export/ExportPlugin.d.ts.map +1 -1
  52. package/lib/plugins/export/index.js +184 -97
  53. package/lib/plugins/export/index.js.map +1 -1
  54. package/lib/plugins/filtering/FilteringPlugin.d.ts +14 -3
  55. package/lib/plugins/filtering/FilteringPlugin.d.ts.map +1 -1
  56. package/lib/plugins/filtering/index.js +296 -176
  57. package/lib/plugins/filtering/index.js.map +1 -1
  58. package/lib/plugins/grouping-columns/GroupingColumnsPlugin.d.ts +2 -2
  59. package/lib/plugins/grouping-columns/GroupingColumnsPlugin.d.ts.map +1 -1
  60. package/lib/plugins/grouping-columns/grouping-columns.d.ts +1 -1
  61. package/lib/plugins/grouping-columns/grouping-columns.d.ts.map +1 -1
  62. package/lib/plugins/grouping-columns/index.js +169 -61
  63. package/lib/plugins/grouping-columns/index.js.map +1 -1
  64. package/lib/plugins/grouping-rows/GroupingRowsPlugin.d.ts +14 -2
  65. package/lib/plugins/grouping-rows/GroupingRowsPlugin.d.ts.map +1 -1
  66. package/lib/plugins/grouping-rows/index.js +243 -140
  67. package/lib/plugins/grouping-rows/index.js.map +1 -1
  68. package/lib/plugins/master-detail/MasterDetailPlugin.d.ts +13 -11
  69. package/lib/plugins/master-detail/MasterDetailPlugin.d.ts.map +1 -1
  70. package/lib/plugins/master-detail/index.js +278 -196
  71. package/lib/plugins/master-detail/index.js.map +1 -1
  72. package/lib/plugins/master-detail/types.d.ts +0 -10
  73. package/lib/plugins/master-detail/types.d.ts.map +1 -1
  74. package/lib/plugins/multi-sort/MultiSortPlugin.d.ts +1 -2
  75. package/lib/plugins/multi-sort/MultiSortPlugin.d.ts.map +1 -1
  76. package/lib/plugins/multi-sort/index.js +125 -40
  77. package/lib/plugins/multi-sort/index.js.map +1 -1
  78. package/lib/plugins/pinned-columns/PinnedColumnsPlugin.d.ts +0 -1
  79. package/lib/plugins/pinned-columns/PinnedColumnsPlugin.d.ts.map +1 -1
  80. package/lib/plugins/pinned-columns/index.js +156 -75
  81. package/lib/plugins/pinned-columns/index.js.map +1 -1
  82. package/lib/plugins/pinned-columns/pinned-columns.d.ts +2 -2
  83. package/lib/plugins/pinned-columns/pinned-columns.d.ts.map +1 -1
  84. package/lib/plugins/pinned-rows/PinnedRowsPlugin.d.ts +1 -2
  85. package/lib/plugins/pinned-rows/PinnedRowsPlugin.d.ts.map +1 -1
  86. package/lib/plugins/pinned-rows/index.js +202 -117
  87. package/lib/plugins/pinned-rows/index.js.map +1 -1
  88. package/lib/plugins/pivot/PivotPlugin.d.ts +26 -4
  89. package/lib/plugins/pivot/PivotPlugin.d.ts.map +1 -1
  90. package/lib/plugins/pivot/index.js +413 -314
  91. package/lib/plugins/pivot/index.js.map +1 -1
  92. package/lib/plugins/pivot/pivot-rows.d.ts +2 -1
  93. package/lib/plugins/pivot/pivot-rows.d.ts.map +1 -1
  94. package/lib/plugins/reorder/ReorderPlugin.d.ts +13 -10
  95. package/lib/plugins/reorder/ReorderPlugin.d.ts.map +1 -1
  96. package/lib/plugins/reorder/index.d.ts +1 -1
  97. package/lib/plugins/reorder/index.d.ts.map +1 -1
  98. package/lib/plugins/reorder/index.js +296 -223
  99. package/lib/plugins/reorder/index.js.map +1 -1
  100. package/lib/plugins/selection/SelectionPlugin.d.ts +21 -3
  101. package/lib/plugins/selection/SelectionPlugin.d.ts.map +1 -1
  102. package/lib/plugins/selection/index.d.ts +2 -2
  103. package/lib/plugins/selection/index.d.ts.map +1 -1
  104. package/lib/plugins/selection/index.js +282 -141
  105. package/lib/plugins/selection/index.js.map +1 -1
  106. package/lib/plugins/selection/types.d.ts +24 -0
  107. package/lib/plugins/selection/types.d.ts.map +1 -1
  108. package/lib/plugins/server-side/ServerSidePlugin.d.ts +0 -1
  109. package/lib/plugins/server-side/ServerSidePlugin.d.ts.map +1 -1
  110. package/lib/plugins/server-side/index.js +96 -9
  111. package/lib/plugins/server-side/index.js.map +1 -1
  112. package/lib/plugins/tree/TreePlugin.d.ts +5 -1
  113. package/lib/plugins/tree/TreePlugin.d.ts.map +1 -1
  114. package/lib/plugins/tree/index.js +209 -113
  115. package/lib/plugins/tree/index.js.map +1 -1
  116. package/lib/plugins/tree/types.d.ts +0 -10
  117. package/lib/plugins/tree/types.d.ts.map +1 -1
  118. package/lib/plugins/undo-redo/UndoRedoPlugin.d.ts +0 -1
  119. package/lib/plugins/undo-redo/UndoRedoPlugin.d.ts.map +1 -1
  120. package/lib/plugins/undo-redo/index.js +98 -11
  121. package/lib/plugins/undo-redo/index.js.map +1 -1
  122. package/lib/plugins/visibility/VisibilityPlugin.d.ts +7 -4
  123. package/lib/plugins/visibility/VisibilityPlugin.d.ts.map +1 -1
  124. package/lib/plugins/visibility/index.js +155 -64
  125. package/lib/plugins/visibility/index.js.map +1 -1
  126. package/package.json +1 -1
  127. package/themes/dg-theme-bootstrap.css +55 -53
  128. package/themes/dg-theme-contrast.css +42 -40
  129. package/themes/dg-theme-large.css +38 -37
  130. package/themes/dg-theme-material.css +54 -52
  131. package/themes/dg-theme-standard.css +19 -17
  132. package/themes/dg-theme-vibrant.css +16 -14
  133. package/umd/grid.all.umd.js +23 -24
  134. package/umd/grid.all.umd.js.map +1 -1
  135. package/umd/grid.umd.js +12 -11
  136. package/umd/grid.umd.js.map +1 -1
  137. package/umd/plugins/clipboard.umd.js +5 -7
  138. package/umd/plugins/clipboard.umd.js.map +1 -1
  139. package/umd/plugins/column-virtualization.umd.js +1 -1
  140. package/umd/plugins/column-virtualization.umd.js.map +1 -1
  141. package/umd/plugins/context-menu.umd.js +1 -1
  142. package/umd/plugins/context-menu.umd.js.map +1 -1
  143. package/umd/plugins/editing.umd.js +1 -1
  144. package/umd/plugins/editing.umd.js.map +1 -1
  145. package/umd/plugins/export.umd.js +1 -1
  146. package/umd/plugins/export.umd.js.map +1 -1
  147. package/umd/plugins/filtering.umd.js +1 -1
  148. package/umd/plugins/filtering.umd.js.map +1 -1
  149. package/umd/plugins/grouping-columns.umd.js +1 -1
  150. package/umd/plugins/grouping-columns.umd.js.map +1 -1
  151. package/umd/plugins/grouping-rows.umd.js +1 -1
  152. package/umd/plugins/grouping-rows.umd.js.map +1 -1
  153. package/umd/plugins/master-detail.umd.js +1 -1
  154. package/umd/plugins/master-detail.umd.js.map +1 -1
  155. package/umd/plugins/multi-sort.umd.js +1 -1
  156. package/umd/plugins/multi-sort.umd.js.map +1 -1
  157. package/umd/plugins/pinned-columns.umd.js +1 -1
  158. package/umd/plugins/pinned-columns.umd.js.map +1 -1
  159. package/umd/plugins/pinned-rows.umd.js +1 -1
  160. package/umd/plugins/pinned-rows.umd.js.map +1 -1
  161. package/umd/plugins/pivot.umd.js +1 -1
  162. package/umd/plugins/pivot.umd.js.map +1 -1
  163. package/umd/plugins/reorder.umd.js +1 -1
  164. package/umd/plugins/reorder.umd.js.map +1 -1
  165. package/umd/plugins/selection.umd.js +1 -1
  166. package/umd/plugins/selection.umd.js.map +1 -1
  167. package/umd/plugins/server-side.umd.js +1 -1
  168. package/umd/plugins/server-side.umd.js.map +1 -1
  169. package/umd/plugins/tree.umd.js +1 -1
  170. package/umd/plugins/tree.umd.js.map +1 -1
  171. package/umd/plugins/undo-redo.umd.js +1 -1
  172. package/umd/plugins/undo-redo.umd.js.map +1 -1
  173. package/umd/plugins/visibility.umd.js +1 -1
  174. package/umd/plugins/visibility.umd.js.map +1 -1
  175. package/lib/core/internal/editing.d.ts +0 -76
  176. package/lib/core/internal/editing.d.ts.map +0 -1
@@ -1,4 +1,4 @@
1
- const A = {
1
+ const E = {
2
2
  expand: "▶",
3
3
  collapse: "▼",
4
4
  sortAsc: "▲",
@@ -8,7 +8,7 @@ const A = {
8
8
  dragHandle: "⋮⋮",
9
9
  toolPanel: "☰"
10
10
  };
11
- class R {
11
+ class A {
12
12
  /**
13
13
  * Plugin dependencies - declare other plugins this one requires.
14
14
  *
@@ -25,8 +25,11 @@ class R {
25
25
  * ```
26
26
  */
27
27
  static dependencies;
28
- /** Plugin version - override in subclass if needed */
29
- version = "1.0.0";
28
+ /**
29
+ * Plugin version - defaults to grid version for built-in plugins.
30
+ * Third-party plugins can override with their own semver.
31
+ */
32
+ version = typeof __GRID_VERSION__ < "u" ? __GRID_VERSION__ : "dev";
30
33
  /** CSS styles to inject into the grid's shadow DOM */
31
34
  styles;
32
35
  /** Custom cell renderers keyed by type name */
@@ -110,8 +113,16 @@ class R {
110
113
  /**
111
114
  * Emit a custom event from the grid.
112
115
  */
113
- emit(t, n) {
114
- this.grid?.dispatchEvent?.(new CustomEvent(t, { detail: n, bubbles: !0 }));
116
+ emit(t, e) {
117
+ this.grid?.dispatchEvent?.(new CustomEvent(t, { detail: e, bubbles: !0 }));
118
+ }
119
+ /**
120
+ * Emit a cancelable custom event from the grid.
121
+ * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
122
+ */
123
+ emitCancelable(t, e) {
124
+ const o = new CustomEvent(t, { detail: e, bubbles: !0, cancelable: !0 });
125
+ return this.grid?.dispatchEvent?.(o), o.defaultPrevented;
115
126
  }
116
127
  /**
117
128
  * Request a re-render of the grid.
@@ -119,6 +130,14 @@ class R {
119
130
  requestRender() {
120
131
  this.grid?.requestRender?.();
121
132
  }
133
+ /**
134
+ * Request a re-render and restore focus styling afterward.
135
+ * Use this when a plugin action (like expand/collapse) triggers a render
136
+ * but needs to maintain keyboard navigation focus.
137
+ */
138
+ requestRenderWithFocus() {
139
+ this.grid?.requestRenderWithFocus?.();
140
+ }
122
141
  /**
123
142
  * Request a lightweight style update without rebuilding DOM.
124
143
  * Use this instead of requestRender() when only CSS classes need updating.
@@ -153,10 +172,34 @@ class R {
153
172
  return this.grid?._visibleColumns ?? [];
154
173
  }
155
174
  /**
156
- * Get the shadow root of the grid.
175
+ * Get the grid as an HTMLElement for direct DOM operations.
176
+ * Use sparingly - prefer the typed GridElementRef API when possible.
177
+ *
178
+ * @example
179
+ * ```ts
180
+ * const width = this.gridElement.clientWidth;
181
+ * this.gridElement.classList.add('my-plugin-active');
182
+ * ```
183
+ */
184
+ get gridElement() {
185
+ return this.grid;
186
+ }
187
+ /**
188
+ * Get the render root of the grid for DOM queries.
189
+ * @deprecated Use `gridElement` instead. This getter exists only for backward compatibility.
190
+ *
191
+ * With Shadow DOM removed, the grid element itself is the render root.
192
+ * All new code should use `this.gridElement` for DOM queries.
193
+ *
194
+ * @example
195
+ * // OLD (deprecated)
196
+ * const rows = this.shadowRoot?.querySelector('.rows');
197
+ *
198
+ * // NEW (preferred)
199
+ * const rows = this.gridElement.querySelector('.rows');
157
200
  */
158
201
  get shadowRoot() {
159
- return this.grid?.shadowRoot ?? null;
202
+ return this.gridElement;
160
203
  }
161
204
  /**
162
205
  * Get the disconnect signal for event listener cleanup.
@@ -184,8 +227,53 @@ class R {
184
227
  */
185
228
  get gridIcons() {
186
229
  const t = this.grid?.gridConfig?.icons ?? {};
187
- return { ...A, ...t };
230
+ return { ...E, ...t };
188
231
  }
232
+ // #region Animation Helpers
233
+ /**
234
+ * Check if animations are enabled at the grid level.
235
+ * Respects gridConfig.animation.mode and the CSS variable set by the grid.
236
+ *
237
+ * Plugins should use this to skip animations when:
238
+ * - Animation mode is 'off' or `false`
239
+ * - User prefers reduced motion and mode is 'reduced-motion' (default)
240
+ *
241
+ * @example
242
+ * ```ts
243
+ * private get animationStyle(): 'slide' | 'fade' | false {
244
+ * if (!this.isAnimationEnabled) return false;
245
+ * return this.config.animation ?? 'slide';
246
+ * }
247
+ * ```
248
+ */
249
+ get isAnimationEnabled() {
250
+ const t = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
251
+ if (t === !1 || t === "off") return !1;
252
+ if (t === !0 || t === "on") return !0;
253
+ const e = this.gridElement;
254
+ return e ? getComputedStyle(e).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
255
+ }
256
+ /**
257
+ * Get the animation duration in milliseconds from CSS variable.
258
+ * Falls back to 200ms if not set.
259
+ *
260
+ * Plugins can use this for their animation timing to stay consistent
261
+ * with the grid-level animation.duration setting.
262
+ *
263
+ * @example
264
+ * ```ts
265
+ * element.animate(keyframes, { duration: this.animationDuration });
266
+ * ```
267
+ */
268
+ get animationDuration() {
269
+ const t = this.gridElement;
270
+ if (t) {
271
+ const e = getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(), o = parseInt(e, 10);
272
+ if (!isNaN(o)) return o;
273
+ }
274
+ return 200;
275
+ }
276
+ // #endregion
189
277
  /**
190
278
  * Resolve an icon value to string or HTMLElement.
191
279
  * Checks plugin config first, then grid-level icons, then defaults.
@@ -194,8 +282,8 @@ class R {
194
282
  * @param pluginOverride - Optional plugin-level override
195
283
  * @returns The resolved icon value
196
284
  */
197
- resolveIcon(t, n) {
198
- return n !== void 0 ? n : this.gridIcons[t];
285
+ resolveIcon(t, e) {
286
+ return e !== void 0 ? e : this.gridIcons[t];
199
287
  }
200
288
  /**
201
289
  * Set an icon value on an element.
@@ -204,8 +292,8 @@ class R {
204
292
  * @param element - The element to set the icon on
205
293
  * @param icon - The icon value (string or HTMLElement)
206
294
  */
207
- setIcon(t, n) {
208
- typeof n == "string" ? t.innerHTML = n : n instanceof HTMLElement && (t.innerHTML = "", t.appendChild(n.cloneNode(!0)));
295
+ setIcon(t, e) {
296
+ typeof e == "string" ? t.innerHTML = e : e instanceof HTMLElement && (t.innerHTML = "", t.appendChild(e.cloneNode(!0)));
209
297
  }
210
298
  /**
211
299
  * Log a warning message.
@@ -216,90 +304,90 @@ class R {
216
304
  // #endregion
217
305
  }
218
306
  const p = {
219
- sum: (e, t) => e.reduce((n, i) => n + (Number(i[t]) || 0), 0),
220
- avg: (e, t) => {
221
- const n = e.reduce((i, r) => i + (Number(r[t]) || 0), 0);
222
- return e.length ? n / e.length : 0;
307
+ sum: (n, t) => n.reduce((e, o) => e + (Number(o[t]) || 0), 0),
308
+ avg: (n, t) => {
309
+ const e = n.reduce((o, r) => o + (Number(r[t]) || 0), 0);
310
+ return n.length ? e / n.length : 0;
223
311
  },
224
- count: (e) => e.length,
225
- min: (e, t) => Math.min(...e.map((n) => Number(n[t]) || 1 / 0)),
226
- max: (e, t) => Math.max(...e.map((n) => Number(n[t]) || -1 / 0)),
227
- first: (e, t) => e[0]?.[t],
228
- last: (e, t) => e[e.length - 1]?.[t]
229
- }, u = /* @__PURE__ */ new Map(), d = {
312
+ count: (n) => n.length,
313
+ min: (n, t) => Math.min(...n.map((e) => Number(e[t]) || 1 / 0)),
314
+ max: (n, t) => Math.max(...n.map((e) => Number(e[t]) || -1 / 0)),
315
+ first: (n, t) => n[0]?.[t],
316
+ last: (n, t) => n[n.length - 1]?.[t]
317
+ }, f = /* @__PURE__ */ new Map(), d = {
230
318
  /**
231
319
  * Register a custom aggregator function.
232
320
  */
233
- register(e, t) {
234
- u.set(e, t);
321
+ register(n, t) {
322
+ f.set(n, t);
235
323
  },
236
324
  /**
237
325
  * Unregister a custom aggregator function.
238
326
  */
239
- unregister(e) {
240
- u.delete(e);
327
+ unregister(n) {
328
+ f.delete(n);
241
329
  },
242
330
  /**
243
331
  * Get an aggregator function by reference.
244
332
  */
245
- get(e) {
246
- if (e !== void 0)
247
- return typeof e == "function" ? e : u.get(e) ?? p[e];
333
+ get(n) {
334
+ if (n !== void 0)
335
+ return typeof n == "function" ? n : f.get(n) ?? p[n];
248
336
  },
249
337
  /**
250
338
  * Run an aggregator on a set of rows.
251
339
  */
252
- run(e, t, n, i) {
253
- const r = this.get(e);
254
- return r ? r(t, n, i) : void 0;
340
+ run(n, t, e, o) {
341
+ const r = this.get(n);
342
+ return r ? r(t, e, o) : void 0;
255
343
  },
256
344
  /**
257
345
  * Check if an aggregator exists.
258
346
  */
259
- has(e) {
260
- return u.has(e) || e in p;
347
+ has(n) {
348
+ return f.has(n) || n in p;
261
349
  },
262
350
  /**
263
351
  * List all available aggregator names.
264
352
  */
265
353
  list() {
266
- return [...Object.keys(p), ...u.keys()];
354
+ return [...Object.keys(p), ...f.keys()];
267
355
  }
268
356
  };
269
357
  d.register.bind(d);
270
358
  d.unregister.bind(d);
271
- const w = d.get.bind(d);
359
+ const b = d.get.bind(d);
272
360
  d.run.bind(d);
273
361
  d.list.bind(d);
274
- function E(e) {
275
- return typeof e == "object" && e !== null && "aggFunc" in e;
362
+ function R(n) {
363
+ return typeof n == "object" && n !== null && "aggFunc" in n;
276
364
  }
277
- function m(e, t) {
278
- const n = document.createElement("div");
279
- n.className = "tbw-pinned-rows", n.setAttribute("role", "presentation"), n.setAttribute("aria-live", "polite");
280
- const i = document.createElement("div");
281
- i.className = "tbw-pinned-rows-left";
365
+ function m(n, t) {
366
+ const e = document.createElement("div");
367
+ e.className = "tbw-pinned-rows", e.setAttribute("role", "presentation"), e.setAttribute("aria-live", "polite");
368
+ const o = document.createElement("div");
369
+ o.className = "tbw-pinned-rows-left";
282
370
  const r = document.createElement("div");
283
371
  r.className = "tbw-pinned-rows-center";
284
372
  const s = document.createElement("div");
285
- if (s.className = "tbw-pinned-rows-right", e.showRowCount !== !1) {
286
- const o = document.createElement("span");
287
- o.className = "tbw-status-panel tbw-status-panel-row-count", o.textContent = `Total: ${t.totalRows} rows`, i.appendChild(o);
288
- }
289
- if (e.showFilteredCount && t.filteredRows !== t.totalRows) {
290
- const o = document.createElement("span");
291
- o.className = "tbw-status-panel tbw-status-panel-filtered-count", o.textContent = `Filtered: ${t.filteredRows}`, i.appendChild(o);
292
- }
293
- if (e.showSelectedCount && t.selectedRows > 0) {
294
- const o = document.createElement("span");
295
- o.className = "tbw-status-panel tbw-status-panel-selected-count", o.textContent = `Selected: ${t.selectedRows}`, s.appendChild(o);
296
- }
297
- if (e.customPanels)
298
- for (const o of e.customPanels) {
299
- const a = x(o, t);
300
- switch (o.position) {
373
+ if (s.className = "tbw-pinned-rows-right", n.showRowCount !== !1) {
374
+ const i = document.createElement("span");
375
+ i.className = "tbw-status-panel tbw-status-panel-row-count", i.textContent = `Total: ${t.totalRows} rows`, o.appendChild(i);
376
+ }
377
+ if (n.showFilteredCount && t.filteredRows !== t.totalRows) {
378
+ const i = document.createElement("span");
379
+ i.className = "tbw-status-panel tbw-status-panel-filtered-count", i.textContent = `Filtered: ${t.filteredRows}`, o.appendChild(i);
380
+ }
381
+ if (n.showSelectedCount && t.selectedRows > 0) {
382
+ const i = document.createElement("span");
383
+ i.className = "tbw-status-panel tbw-status-panel-selected-count", i.textContent = `Selected: ${t.selectedRows}`, s.appendChild(i);
384
+ }
385
+ if (n.customPanels)
386
+ for (const i of n.customPanels) {
387
+ const a = y(i, t);
388
+ switch (i.position) {
301
389
  case "left":
302
- i.appendChild(a);
390
+ o.appendChild(a);
303
391
  break;
304
392
  case "center":
305
393
  r.appendChild(a);
@@ -309,62 +397,62 @@ function m(e, t) {
309
397
  break;
310
398
  }
311
399
  }
312
- return n.appendChild(i), n.appendChild(r), n.appendChild(s), n;
400
+ return e.appendChild(o), e.appendChild(r), e.appendChild(s), e;
313
401
  }
314
- function b(e) {
402
+ function w(n) {
315
403
  const t = document.createElement("div");
316
- return t.className = `tbw-aggregation-rows tbw-aggregation-rows-${e}`, t.setAttribute("role", "presentation"), t;
404
+ return t.className = `tbw-aggregation-rows tbw-aggregation-rows-${n}`, t.setAttribute("role", "presentation"), t;
317
405
  }
318
- function C(e, t, n, i) {
319
- e.innerHTML = "";
406
+ function C(n, t, e, o) {
407
+ n.innerHTML = "";
320
408
  for (const r of t) {
321
409
  const s = document.createElement("div");
322
410
  if (s.className = "tbw-aggregation-row", s.setAttribute("role", "presentation"), r.id && s.setAttribute("data-aggregation-id", r.id), r.fullWidth) {
323
- const o = document.createElement("div");
324
- o.className = "tbw-aggregation-cell tbw-aggregation-cell-full", o.style.gridColumn = "1 / -1", o.textContent = r.label || "", s.appendChild(o);
411
+ const i = document.createElement("div");
412
+ i.className = "tbw-aggregation-cell tbw-aggregation-cell-full", i.style.gridColumn = "1 / -1", i.textContent = r.label || "", s.appendChild(i);
325
413
  } else
326
- for (const o of n) {
414
+ for (const i of e) {
327
415
  const a = document.createElement("div");
328
- a.className = "tbw-aggregation-cell", a.setAttribute("data-field", o.field);
329
- let l, f;
330
- const h = r.aggregators?.[o.field];
416
+ a.className = "tbw-aggregation-cell", a.setAttribute("data-field", i.field);
417
+ let l, u;
418
+ const h = r.aggregators?.[i.field];
331
419
  if (h)
332
- if (E(h)) {
333
- const g = w(h.aggFunc);
334
- g && (l = g(i, o.field, o)), f = h.formatter;
420
+ if (R(h)) {
421
+ const g = b(h.aggFunc);
422
+ g && (l = g(o, i.field, i)), u = h.formatter;
335
423
  } else {
336
- const g = w(h);
337
- g && (l = g(i, o.field, o));
424
+ const g = b(h);
425
+ g && (l = g(o, i.field, i));
338
426
  }
339
- else if (r.cells && Object.prototype.hasOwnProperty.call(r.cells, o.field)) {
340
- const g = r.cells[o.field];
341
- typeof g == "function" ? l = g(i, o.field, o) : l = g;
427
+ else if (r.cells && Object.prototype.hasOwnProperty.call(r.cells, i.field)) {
428
+ const g = r.cells[i.field];
429
+ typeof g == "function" ? l = g(o, i.field, i) : l = g;
342
430
  }
343
- l != null ? a.textContent = f ? f(l, o.field, o) : String(l) : a.textContent = "", s.appendChild(a);
431
+ l != null ? a.textContent = u ? u(l, i.field, i) : String(l) : a.textContent = "", s.appendChild(a);
344
432
  }
345
- e.appendChild(s);
433
+ n.appendChild(s);
346
434
  }
347
435
  }
348
- function x(e, t) {
349
- const n = document.createElement("div");
350
- n.className = "tbw-status-panel tbw-status-panel-custom", n.id = `status-panel-${e.id}`;
351
- const i = e.render(t);
352
- return typeof i == "string" ? n.innerHTML = i : n.appendChild(i), n;
436
+ function y(n, t) {
437
+ const e = document.createElement("div");
438
+ e.className = "tbw-status-panel tbw-status-panel-custom", e.id = `status-panel-${n.id}`;
439
+ const o = n.render(t);
440
+ return typeof o == "string" ? e.innerHTML = o : e.appendChild(o), e;
353
441
  }
354
- function v(e, t, n, i, r) {
442
+ function v(n, t, e, o, r) {
355
443
  return {
356
- totalRows: e.length,
357
- filteredRows: r?.cachedResult?.length ?? e.length,
358
- selectedRows: i?.selected?.size ?? 0,
444
+ totalRows: n.length,
445
+ filteredRows: r?.cachedResult?.length ?? n.length,
446
+ selectedRows: o?.selected?.size ?? 0,
359
447
  columns: t,
360
- rows: e,
361
- grid: n
448
+ rows: n,
449
+ grid: e
362
450
  };
363
451
  }
364
- const B = ".tbw-footer{flex-shrink:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-color-panel-bg)}.tbw-pinned-rows{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--tbw-pinned-rows-bg, var(--tbw-color-panel-bg));border-top:1px solid var(--tbw-pinned-rows-border, var(--tbw-color-border));font-size:12px;color:var(--tbw-pinned-rows-color, var(--tbw-color-fg-muted));min-height:32px;box-sizing:border-box;min-width:fit-content}.tbw-pinned-rows-left,.tbw-pinned-rows-center,.tbw-pinned-rows-right{display:flex;align-items:center;gap:16px}.tbw-pinned-rows-left{justify-content:flex-start}.tbw-pinned-rows-center{justify-content:center;flex:1}.tbw-pinned-rows-right{justify-content:flex-end}.tbw-status-panel{white-space:nowrap}.tbw-aggregation-rows{min-width:fit-content;background:var(--tbw-aggregation-bg, var(--tbw-color-header-bg))}.tbw-aggregation-rows-top{border-bottom:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-rows-bottom{border-top:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-row{display:grid;grid-template-columns:var(--tbw-column-template);font-size:var(--tbw-aggregation-font-size, .8em);font-weight:var(--tbw-aggregation-font-weight, 600)}.tbw-aggregation-cell{padding:var(--tbw-cell-padding, 2px 8px);min-height:var(--tbw-row-height, 28px);display:flex;align-items:center;border-right:1px solid var(--tbw-color-border-cell)}.tbw-aggregation-cell:last-child{border-right:0}.tbw-aggregation-cell-full{grid-column:1 / -1;border-right:0}";
365
- class y extends R {
452
+ const S = "@layer tbw-plugins{.tbw-footer{flex-shrink:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-color-panel-bg)}.tbw-pinned-rows{display:flex;align-items:center;justify-content:space-between;padding:var(--tbw-button-padding, var(--tbw-spacing-md, .5rem) var(--tbw-spacing-lg, .75rem));background:var(--tbw-pinned-rows-bg, var(--tbw-color-panel-bg));border-top:1px solid var(--tbw-pinned-rows-border, var(--tbw-color-border));font-size:var(--tbw-font-size-xs, .75rem);color:var(--tbw-pinned-rows-color, var(--tbw-color-fg-muted));min-height:32px;box-sizing:border-box;min-width:fit-content}.tbw-pinned-rows-left,.tbw-pinned-rows-center,.tbw-pinned-rows-right{display:flex;align-items:center;gap:var(--tbw-spacing-xl, 1rem)}.tbw-pinned-rows-left{justify-content:flex-start}.tbw-pinned-rows-center{justify-content:center;flex:1}.tbw-pinned-rows-right{justify-content:flex-end}.tbw-status-panel{white-space:nowrap}.tbw-aggregation-rows{min-width:fit-content;background:var(--tbw-aggregation-bg, var(--tbw-color-header-bg))}.tbw-aggregation-rows-top{border-bottom:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-rows-bottom{border-top:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-row{display:grid;grid-template-columns:var(--tbw-column-template);font-size:var(--tbw-aggregation-font-size, .8em);font-weight:var(--tbw-aggregation-font-weight, 600)}.tbw-aggregation-cell{padding:var(--tbw-cell-padding, .125rem .5rem);min-height:var(--tbw-row-height, 1.75rem);display:flex;align-items:center;border-right:1px solid var(--tbw-color-border-cell)}.tbw-aggregation-cell:last-child{border-right:0}.tbw-aggregation-cell-full{grid-column:1 / -1;border-right:0}}";
453
+ class B extends A {
366
454
  name = "pinnedRows";
367
- version = "1.0.0";
455
+ styles = S;
368
456
  get defaultConfig() {
369
457
  return {
370
458
  position: "bottom",
@@ -386,23 +474,23 @@ class y extends R {
386
474
  // #endregion
387
475
  // #region Hooks
388
476
  afterRender() {
389
- const t = this.shadowRoot;
477
+ const t = this.gridElement;
390
478
  if (!t) return;
391
- const n = t.querySelector(".tbw-scroll-area") ?? t.querySelector(".tbw-grid-content") ?? t.children[0];
392
- if (!n) return;
393
- this.footerWrapper && !n.contains(this.footerWrapper) && (this.footerWrapper = null, this.bottomAggregationContainer = null, this.infoBarElement = null), this.topAggregationContainer && !n.contains(this.topAggregationContainer) && (this.topAggregationContainer = null), this.infoBarElement && !n.contains(this.infoBarElement) && (this.infoBarElement = null);
394
- const i = this.getSelectionState(), r = this.getFilterState(), s = v(
479
+ const e = t.querySelector(".tbw-scroll-area") ?? t.querySelector(".tbw-grid-content") ?? t.children[0];
480
+ if (!e) return;
481
+ this.footerWrapper && !e.contains(this.footerWrapper) && (this.footerWrapper = null, this.bottomAggregationContainer = null, this.infoBarElement = null), this.topAggregationContainer && !e.contains(this.topAggregationContainer) && (this.topAggregationContainer = null), this.infoBarElement && !e.contains(this.infoBarElement) && (this.infoBarElement = null);
482
+ const o = this.getSelectionState(), r = this.getFilterState(), s = v(
395
483
  this.rows,
396
484
  this.columns,
397
485
  this.grid,
398
- i,
486
+ o,
399
487
  r
400
- ), o = this.config.aggregationRows || [], a = o.filter((c) => c.position === "top"), l = o.filter((c) => c.position !== "top");
488
+ ), i = this.config.aggregationRows || [], a = i.filter((c) => c.position === "top"), l = i.filter((c) => c.position !== "top");
401
489
  if (a.length > 0) {
402
490
  if (!this.topAggregationContainer) {
403
- this.topAggregationContainer = b("top");
491
+ this.topAggregationContainer = w("top");
404
492
  const c = t.querySelector(".header");
405
- c && c.nextSibling ? n.insertBefore(this.topAggregationContainer, c.nextSibling) : n.appendChild(this.topAggregationContainer);
493
+ c && c.nextSibling ? e.insertBefore(this.topAggregationContainer, c.nextSibling) : e.appendChild(this.topAggregationContainer);
406
494
  }
407
495
  C(
408
496
  this.topAggregationContainer,
@@ -411,16 +499,16 @@ class y extends R {
411
499
  this.rows
412
500
  );
413
501
  } else this.topAggregationContainer && (this.topAggregationContainer.remove(), this.topAggregationContainer = null);
414
- const f = this.config.showRowCount !== !1 || this.config.showSelectedCount && s.selectedRows > 0 || this.config.showFilteredCount && s.filteredRows !== s.totalRows || this.config.customPanels && this.config.customPanels.length > 0, h = f && this.config.position !== "top", g = l.length > 0 || h;
415
- if (f && this.config.position === "top")
502
+ const u = this.config.showRowCount !== !1 || this.config.showSelectedCount && s.selectedRows > 0 || this.config.showFilteredCount && s.filteredRows !== s.totalRows || this.config.customPanels && this.config.customPanels.length > 0, h = u && this.config.position !== "top", g = l.length > 0 || h;
503
+ if (u && this.config.position === "top")
416
504
  if (!this.infoBarElement)
417
- this.infoBarElement = m(this.config, s), n.insertBefore(this.infoBarElement, n.firstChild);
505
+ this.infoBarElement = m(this.config, s), e.insertBefore(this.infoBarElement, e.firstChild);
418
506
  else {
419
507
  const c = m(this.config, s);
420
508
  this.infoBarElement.replaceWith(c), this.infoBarElement = c;
421
509
  }
422
510
  else this.config.position === "top" && this.infoBarElement && (this.infoBarElement.remove(), this.infoBarElement = null);
423
- g ? (this.footerWrapper || (this.footerWrapper = document.createElement("div"), this.footerWrapper.className = "tbw-footer", n.appendChild(this.footerWrapper)), this.footerWrapper.innerHTML = "", l.length > 0 && (this.bottomAggregationContainer || (this.bottomAggregationContainer = b("bottom")), this.footerWrapper.appendChild(this.bottomAggregationContainer), C(
511
+ g ? (this.footerWrapper || (this.footerWrapper = document.createElement("div"), this.footerWrapper.className = "tbw-footer", e.appendChild(this.footerWrapper)), this.footerWrapper.innerHTML = "", l.length > 0 && (this.bottomAggregationContainer || (this.bottomAggregationContainer = w("bottom")), this.footerWrapper.appendChild(this.bottomAggregationContainer), C(
424
512
  this.bottomAggregationContainer,
425
513
  l,
426
514
  this.visibleColumns,
@@ -462,13 +550,13 @@ class y extends R {
462
550
  * @returns The context with row counts and other info
463
551
  */
464
552
  getContext() {
465
- const t = this.getSelectionState(), n = this.getFilterState();
553
+ const t = this.getSelectionState(), e = this.getFilterState();
466
554
  return v(
467
555
  this.rows,
468
556
  this.columns,
469
557
  this.grid,
470
558
  t,
471
- n
559
+ e
472
560
  );
473
561
  }
474
562
  /**
@@ -483,7 +571,7 @@ class y extends R {
483
571
  * @param id - The panel ID to remove
484
572
  */
485
573
  removePanel(t) {
486
- this.config.customPanels && (this.config.customPanels = this.config.customPanels.filter((n) => n.id !== t), this.requestRender());
574
+ this.config.customPanels && (this.config.customPanels = this.config.customPanels.filter((e) => e.id !== t), this.requestRender());
487
575
  }
488
576
  /**
489
577
  * Add an aggregation row.
@@ -497,14 +585,11 @@ class y extends R {
497
585
  * @param id - The aggregation row ID to remove
498
586
  */
499
587
  removeAggregationRow(t) {
500
- this.config.aggregationRows && (this.config.aggregationRows = this.config.aggregationRows.filter((n) => n.id !== t), this.requestRender());
588
+ this.config.aggregationRows && (this.config.aggregationRows = this.config.aggregationRows.filter((e) => e.id !== t), this.requestRender());
501
589
  }
502
590
  // #endregion
503
- // #region Styles
504
- styles = B;
505
- // #endregion
506
591
  }
507
592
  export {
508
- y as PinnedRowsPlugin
593
+ B as PinnedRowsPlugin
509
594
  };
510
595
  //# sourceMappingURL=index.js.map