@toolbox-web/grid 0.3.3 → 0.4.1

package/lib/plugins/grouping-columns/grouping-columns.d.ts

@@ -15,7 +15,7 @@ export declare function computeColumnGroups<T>(columns: ColumnConfig<T>[]): Colu
  * @param groups - The computed column groups
  * @param columns - The column configurations
  */
-export declare function applyGroupedHeaderCellClasses(headerRowEl: HTMLElement | null, groups: ColumnGroup[], columns: ColumnConfig<any>[]): void;
+export declare function applyGroupedHeaderCellClasses(headerRowEl: HTMLElement | null, groups: ColumnGroup[], columns: ColumnConfig[]): void;
 /**
  * Build the group header row element.
  *
@@ -23,19 +23,19 @@ export declare function applyGroupedHeaderCellClasses(headerRowEl: HTMLElement |
  * @param columns - The column configurations
  * @returns The group header row element, or null if no groups
  */
-export declare function buildGroupHeaderRow(groups: ColumnGroup[], columns: ColumnConfig<any>[]): HTMLElement | null;
+export declare function buildGroupHeaderRow(groups: ColumnGroup[], columns: ColumnConfig[]): HTMLElement | null;
 /**
  * Check if any columns have group configuration.
  *
  * @param columns - The column configurations
  * @returns True if at least one column has a group
  */
-export declare function hasColumnGroups(columns: ColumnConfig<any>[]): boolean;
+export declare function hasColumnGroups(columns: ColumnConfig[]): boolean;
 /**
  * Get group ID for a specific column.
  *
  * @param column - The column configuration
  * @returns The group ID, or undefined if not grouped
  */
-export declare function getColumnGroupId(column: ColumnConfig<any>): string | undefined;
+export declare function getColumnGroupId(column: ColumnConfig): string | undefined;
 //# sourceMappingURL=grouping-columns.d.ts.map

package/lib/plugins/grouping-columns/grouping-columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grouping-columns.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/grouping-columns/grouping-columns.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAuB,MAAM,SAAS,CAAC;AAEhE;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,CAmEnF;AAED;;;;;;GAMG;AACH,wBAAgB,6BAA6B,CAC3C,WAAW,EAAE,WAAW,GAAG,IAAI,EAC/B,MAAM,EAAE,WAAW,EAAE,EACrB,OAAO,EAAE,YAAY,CAAC,GAAG,CAAC,EAAE,GAC3B,IAAI,CA8BN;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,WAAW,EAAE,EACrB,OAAO,EAAE,YAAY,CAAC,GAAG,CAAC,EAAE,GAC3B,WAAW,GAAG,IAAI,CA0BpB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,OAAO,CAErE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,SAAS,CAI9E"}
+{"version":3,"file":"grouping-columns.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/grouping-columns/grouping-columns.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,WAAW,EAAuB,MAAM,SAAS,CAAC;AAEhE;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,CA+DnF;AAED;;;;;;GAMG;AACH,wBAAgB,6BAA6B,CAC3C,WAAW,EAAE,WAAW,GAAG,IAAI,EAC/B,MAAM,EAAE,WAAW,EAAE,EACrB,OAAO,EAAE,YAAY,EAAE,GACtB,IAAI,CA8BN;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,WAAW,GAAG,IAAI,CAuBtG;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,YAAY,EAAE,GAAG,OAAO,CAEhE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,GAAG,SAAS,CAIzE"}

package/lib/plugins/grouping-columns/index.js

@@ -1,4 +1,4 @@
-const c = {
+const g = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -9,6 +9,22 @@ const c = {
   toolPanel: "☰"
 };
 class a {
+  /**
+   * Plugin dependencies - declare other plugins this one requires.
+   *
+   * Dependencies are validated when the plugin is attached.
+   * Required dependencies throw an error if missing.
+   * Optional dependencies log an info message if missing.
+   *
+   * @example
+   * ```typescript
+   * static readonly dependencies: PluginDependency[] = [
+   *   { name: 'editing', required: true, reason: 'Tracks cell edits for undo/redo' },
+   *   { name: 'selection', required: false, reason: 'Enables selection-based undo' },
+   * ];
+   * ```
+   */
+  static dependencies;
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -25,6 +41,12 @@ class a {
   config;
   /** User-provided configuration from constructor */
   userConfig;
+  /**
+   * Plugin-level AbortController for event listener cleanup.
+   * Created fresh in attach(), aborted in detach().
+   * This ensures event listeners are properly cleaned up when plugins are re-attached.
+   */
+  #e;
   /**
    * Default configuration - subclasses should override this getter.
    * Note: This must be a getter (not property initializer) for proper inheritance
@@ -39,19 +61,48 @@ class a {
   /**
    * Called when the plugin is attached to a grid.
    * Override to set up event listeners, initialize state, etc.
+   *
+   * @example
+   * ```ts
+   * attach(grid: GridElement): void {
+   *   super.attach(grid);
+   *   // Set up document-level listeners with auto-cleanup
+   *   document.addEventListener('keydown', this.handleEscape, {
+   *     signal: this.disconnectSignal
+   *   });
+   * }
+   * ```
    */
   attach(e) {
-    this.grid = e, this.config = { ...this.defaultConfig, ...this.userConfig };
+    this.#e?.abort(), this.#e = new AbortController(), this.grid = e, this.config = { ...this.defaultConfig, ...this.userConfig };
   }
   /**
    * Called when the plugin is detached from a grid.
    * Override to clean up event listeners, timers, etc.
+   *
+   * @example
+   * ```ts
+   * detach(): void {
+   *   // Clean up any state not handled by disconnectSignal
+   *   this.selectedRows.clear();
+   *   this.cache = null;
+   * }
+   * ```
    */
   detach() {
+    this.#e?.abort(), this.#e = void 0;
   }
   /**
    * Get another plugin instance from the same grid.
    * Use for inter-plugin communication.
+   *
+   * @example
+   * ```ts
+   * const selection = this.getPlugin(SelectionPlugin);
+   * if (selection) {
+   *   const selectedRows = selection.getSelectedRows();
+   * }
+   * ```
    */
   getPlugin(e) {
     return this.grid?.getPlugin(e);
@@ -125,7 +176,7 @@ class a {
    * document.addEventListener('keydown', handler, { signal: this.disconnectSignal });
    */
   get disconnectSignal() {
-    return this.grid?.disconnectSignal;
+    return this.#e?.signal ?? this.grid?.disconnectSignal;
   }
   /**
    * Get the grid-level icons configuration.
@@ -133,7 +184,7 @@ class a {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...c, ...e };
+    return { ...g, ...e };
   }
   /**
    * Resolve an icon value to string or HTMLElement.
@@ -164,13 +215,13 @@ class a {
   }
   // #endregion
 }
-function h(l) {
-  if (!l.length) return [];
+function h(u) {
+  if (!u.length) return [];
   const e = /* @__PURE__ */ new Map(), r = [], t = (o, n) => {
     if (!n.length) return;
-    const u = r[r.length - 1];
-    if (u && u.implicit && u.firstIndex + u.columns.length === o) {
-      u.columns.push(...n);
+    const l = r[r.length - 1];
+    if (l && l.implicit && l.firstIndex + l.columns.length === o) {
+      l.columns.push(...n);
       return;
     }
     r.push({
@@ -182,51 +233,51 @@ function h(l) {
     });
   };
   let i = [], s = 0;
-  return l.forEach((o, n) => {
-    const u = o.group;
-    if (!u) {
+  return u.forEach((o, n) => {
+    const l = o.group;
+    if (!l) {
       i.length === 0 && (s = n), i.push(o);
       return;
     }
     i.length && (t(s, i.slice()), i = []);
-    const g = typeof u == "string" ? u : u.id;
-    let d = e.get(g);
+    const c = typeof l == "string" ? l : l.id;
+    let d = e.get(c);
     d || (d = {
-      id: g,
-      label: typeof u == "string" ? void 0 : u.label,
+      id: c,
+      label: typeof l == "string" ? void 0 : l.label,
       columns: [],
       firstIndex: n
-    }, e.set(g, d), r.push(d)), d.columns.push(o);
-  }), i.length && t(s, i), r.length === 1 && r[0].implicit && r[0].columns.length === l.length ? [] : r;
+    }, e.set(c, d), r.push(d)), d.columns.push(o);
+  }), i.length && t(s, i), r.length === 1 && r[0].implicit && r[0].columns.length === u.length ? [] : r;
 }
-function p(l, e, r) {
-  if (!e.length || !l) return;
+function p(u, e, r) {
+  if (!e.length || !u) return;
   const t = /* @__PURE__ */ new Map();
   for (const s of e)
     for (const o of s.columns)
-      o?.field && t.set(o.field, s.id);
-  const i = Array.from(l.querySelectorAll(".cell[data-field]"));
+      o.field && t.set(o.field, s.id);
+  const i = Array.from(u.querySelectorAll(".cell[data-field]"));
   i.forEach((s) => {
     const o = s.getAttribute("data-field") || "", n = t.get(o);
     n && (s.classList.add("grouped"), s.getAttribute("data-group") || s.setAttribute("data-group", n));
   });
   for (const s of e) {
-    const o = s.columns[s.columns.length - 1], n = i.find((u) => u.getAttribute("data-field") === o.field);
+    const o = s.columns[s.columns.length - 1], n = i.find((l) => l.getAttribute("data-field") === o.field);
     n && n.classList.add("group-end");
   }
 }
-function f(l, e) {
-  if (l.length === 0) return null;
+function f(u, e) {
+  if (u.length === 0) return null;
   const r = document.createElement("div");
   r.className = "header-group-row", r.setAttribute("role", "row");
-  for (const t of l) {
-    const i = t.firstIndex != null ? t.firstIndex : e.findIndex((u) => t.columns.includes(u)), s = String(t.id).startsWith("__implicit__"), o = s ? "" : t.label || t.id, n = document.createElement("div");
+  for (const t of u) {
+    const i = t.firstIndex != null ? t.firstIndex : e.findIndex((l) => t.columns.includes(l)), s = String(t.id).startsWith("__implicit__"), o = s ? "" : t.label || t.id, n = document.createElement("div");
     n.className = "cell header-group-cell", s && n.classList.add("implicit-group"), n.setAttribute("data-group", String(t.id)), n.style.gridColumn = `${i + 1} / span ${t.columns.length}`, n.textContent = o, r.appendChild(n);
   }
   return r;
 }
-function m(l) {
-  return l.some((e) => e.group != null);
+function m(u) {
+  return u.some((e) => e.group != null);
 }
 const b = ".header-group-row{display:grid;grid-auto-flow:column;background:var(--tbw-grouping-columns-header-bg, var(--tbw-color-header-bg));border-bottom:1px solid var(--tbw-grouping-columns-border, var(--tbw-color-border))}.header-group-cell{display:flex;align-items:center;justify-content:center;padding:4px 8px;font-weight:600;font-size:.9em;text-transform:uppercase;letter-spacing:.5px;border-right:1px solid var(--tbw-grouping-columns-border, var(--tbw-color-border))}.header-group-cell:last-child{border-right:none}.header-row .cell.grouped{border-top:none}.header-row .cell.group-end{border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong))}.header-row .cell.group-end:last-child{border-right:none}.header-group-row.no-borders{border-bottom:none}.header-group-row.no-borders .header-group-cell{border-right:none}.header-row.no-group-borders .cell.group-end{border-right:1px solid var(--tbw-color-border)}";
 class w extends a {