@toolbox-web/grid 0.4.1 → 0.5.0

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

@@ -13,8 +13,9 @@ import { ColumnGroup, GroupingColumnsConfig } from './types';
  * ```
  */
 export declare class GroupingColumnsPlugin extends BaseGridPlugin<GroupingColumnsConfig> {
+    #private;
     readonly name = "groupingColumns";
-    readonly version = "1.0.0";
+    readonly styles: string;
     protected get defaultConfig(): Partial<GroupingColumnsConfig>;
     private groups;
     private isActive;
@@ -46,6 +47,5 @@ export declare class GroupingColumnsPlugin extends BaseGridPlugin<GroupingColumn
      * Refresh column groups (recompute from current columns).
      */
     refresh(): void;
-    readonly styles: string;
 }
 //# sourceMappingURL=GroupingColumnsPlugin.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GroupingColumnsPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/grouping-columns/GroupingColumnsPlugin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAQrD,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAElE;;;;;;;;;;GAUG;AACH,qBAAa,qBAAsB,SAAQ,cAAc,CAAC,qBAAqB,CAAC;IAC9E,QAAQ,CAAC,IAAI,qBAAqB;IAClC,SAAkB,OAAO,WAAW;IAEpC,cAAuB,aAAa,IAAI,OAAO,CAAC,qBAAqB,CAAC,CAIrE;IAGD,OAAO,CAAC,MAAM,CAAqB;IACnC,OAAO,CAAC,QAAQ,CAAS;IAKhB,MAAM,IAAI,IAAI;IAQvB;;;OAGG;IACH,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,GAAG,GAAG,OAAO;IAchD,cAAc,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,GAAG,YAAY,EAAE;IA0ChE,WAAW,IAAI,IAAI;IA0C5B;;;OAGG;IACH,gBAAgB,IAAI,OAAO;IAI3B;;;OAGG;IACH,SAAS,IAAI,WAAW,EAAE;IAI1B;;;;OAIG;IACH,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,YAAY,EAAE;IAKhD;;OAEG;IACH,OAAO,IAAI,IAAI;IAOf,SAAkB,MAAM,SAAU;CAEnC"}
+{"version":3,"file":"GroupingColumnsPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/grouping-columns/GroupingColumnsPlugin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAQrD,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAElE;;;;;;;;;;GAUG;AACH,qBAAa,qBAAsB,SAAQ,cAAc,CAAC,qBAAqB,CAAC;;IAC9E,QAAQ,CAAC,IAAI,qBAAqB;IAClC,SAAkB,MAAM,SAAU;IAElC,cAAuB,aAAa,IAAI,OAAO,CAAC,qBAAqB,CAAC,CAIrE;IAGD,OAAO,CAAC,MAAM,CAAqB;IACnC,OAAO,CAAC,QAAQ,CAAS;IAKhB,MAAM,IAAI,IAAI;IAQvB;;;OAGG;IACH,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,GAAG,GAAG,OAAO;IAchD,cAAc,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,GAAG,YAAY,EAAE;IA0ChE,WAAW,IAAI,IAAI;IAkF5B;;;OAGG;IACH,gBAAgB,IAAI,OAAO;IAI3B;;;OAGG;IACH,SAAS,IAAI,WAAW,EAAE;IAI1B;;;;OAIG;IACH,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,YAAY,EAAE;IAKhD;;OAEG;IACH,OAAO,IAAI,IAAI;CAIhB"}

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

@@ -20,7 +20,7 @@ export declare function applyGroupedHeaderCellClasses(headerRowEl: HTMLElement |
  * Build the group header row element.
  *
  * @param groups - The computed column groups
- * @param columns - The column configurations
+ * @param columns - The column configurations (final array including any plugin-added columns)
  * @returns The group header row element, or null if no groups
  */
 export declare function buildGroupHeaderRow(groups: ColumnGroup[], columns: ColumnConfig[]): HTMLElement | null;

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;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"}
+{"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,CA4BtG;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

@@ -8,7 +8,7 @@ const g = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class a {
+class p {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -25,8 +25,11 @@ class a {
    * ```
    */
   static dependencies;
-  /** Plugin version - override in subclass if needed */
-  version = "1.0.0";
+  /**
+   * Plugin version - defaults to grid version for built-in plugins.
+   * Third-party plugins can override with their own semver.
+   */
+  version = typeof __GRID_VERSION__ < "u" ? __GRID_VERSION__ : "dev";
   /** CSS styles to inject into the grid's shadow DOM */
   styles;
   /** Custom cell renderers keyed by type name */
@@ -113,12 +116,28 @@ class a {
   emit(e, r) {
     this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: r, bubbles: !0 }));
   }
+  /**
+   * Emit a cancelable custom event from the grid.
+   * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
+   */
+  emitCancelable(e, r) {
+    const t = new CustomEvent(e, { detail: r, bubbles: !0, cancelable: !0 });
+    return this.grid?.dispatchEvent?.(t), t.defaultPrevented;
+  }
   /**
    * Request a re-render of the grid.
    */
   requestRender() {
     this.grid?.requestRender?.();
   }
+  /**
+   * Request a re-render and restore focus styling afterward.
+   * Use this when a plugin action (like expand/collapse) triggers a render
+   * but needs to maintain keyboard navigation focus.
+   */
+  requestRenderWithFocus() {
+    this.grid?.requestRenderWithFocus?.();
+  }
   /**
    * Request a lightweight style update without rebuilding DOM.
    * Use this instead of requestRender() when only CSS classes need updating.
@@ -153,10 +172,34 @@ class a {
     return this.grid?._visibleColumns ?? [];
   }
   /**
-   * Get the shadow root of the grid.
+   * Get the grid as an HTMLElement for direct DOM operations.
+   * Use sparingly - prefer the typed GridElementRef API when possible.
+   *
+   * @example
+   * ```ts
+   * const width = this.gridElement.clientWidth;
+   * this.gridElement.classList.add('my-plugin-active');
+   * ```
+   */
+  get gridElement() {
+    return this.grid;
+  }
+  /**
+   * Get the render root of the grid for DOM queries.
+   * @deprecated Use `gridElement` instead. This getter exists only for backward compatibility.
+   *
+   * With Shadow DOM removed, the grid element itself is the render root.
+   * All new code should use `this.gridElement` for DOM queries.
+   *
+   * @example
+   * // OLD (deprecated)
+   * const rows = this.shadowRoot?.querySelector('.rows');
+   *
+   * // NEW (preferred)
+   * const rows = this.gridElement.querySelector('.rows');
    */
   get shadowRoot() {
-    return this.grid?.shadowRoot ?? null;
+    return this.gridElement;
   }
   /**
    * Get the disconnect signal for event listener cleanup.
@@ -186,6 +229,51 @@ class a {
     const e = this.grid?.gridConfig?.icons ?? {};
     return { ...g, ...e };
   }
+  // #region Animation Helpers
+  /**
+   * Check if animations are enabled at the grid level.
+   * Respects gridConfig.animation.mode and the CSS variable set by the grid.
+   *
+   * Plugins should use this to skip animations when:
+   * - Animation mode is 'off' or `false`
+   * - User prefers reduced motion and mode is 'reduced-motion' (default)
+   *
+   * @example
+   * ```ts
+   * private get animationStyle(): 'slide' | 'fade' | false {
+   *   if (!this.isAnimationEnabled) return false;
+   *   return this.config.animation ?? 'slide';
+   * }
+   * ```
+   */
+  get isAnimationEnabled() {
+    const e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (e === !1 || e === "off") return !1;
+    if (e === !0 || e === "on") return !0;
+    const r = this.gridElement;
+    return r ? getComputedStyle(r).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
+  }
+  /**
+   * Get the animation duration in milliseconds from CSS variable.
+   * Falls back to 200ms if not set.
+   *
+   * Plugins can use this for their animation timing to stay consistent
+   * with the grid-level animation.duration setting.
+   *
+   * @example
+   * ```ts
+   * element.animate(keyframes, { duration: this.animationDuration });
+   * ```
+   */
+  get animationDuration() {
+    const e = this.gridElement;
+    if (e) {
+      const r = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), t = parseInt(r, 10);
+      if (!isNaN(t)) return t;
+    }
+    return 200;
+  }
+  // #endregion
   /**
    * Resolve an icon value to string or HTMLElement.
    * Checks plugin config first, then grid-level icons, then defaults.
@@ -215,55 +303,55 @@ class a {
   }
   // #endregion
 }
-function h(u) {
+function c(u) {
   if (!u.length) return [];
-  const e = /* @__PURE__ */ new Map(), r = [], t = (o, n) => {
-    if (!n.length) return;
-    const l = r[r.length - 1];
-    if (l && l.implicit && l.firstIndex + l.columns.length === o) {
-      l.columns.push(...n);
+  const e = /* @__PURE__ */ new Map(), r = [], t = (o, l) => {
+    if (!l.length) return;
+    const s = r[r.length - 1];
+    if (s && s.implicit && s.firstIndex + s.columns.length === o) {
+      s.columns.push(...l);
       return;
     }
     r.push({
       id: "__implicit__" + o,
       label: void 0,
-      columns: n,
+      columns: l,
       firstIndex: o,
       implicit: !0
     });
   };
-  let i = [], s = 0;
-  return u.forEach((o, n) => {
-    const l = o.group;
-    if (!l) {
-      i.length === 0 && (s = n), i.push(o);
+  let i = [], n = 0;
+  return u.forEach((o, l) => {
+    const s = o.group;
+    if (!s) {
+      i.length === 0 && (n = l), i.push(o);
       return;
     }
-    i.length && (t(s, i.slice()), i = []);
-    const c = typeof l == "string" ? l : l.id;
-    let d = e.get(c);
-    d || (d = {
-      id: c,
-      label: typeof l == "string" ? void 0 : l.label,
+    i.length && (t(n, i.slice()), i = []);
+    const d = typeof s == "string" ? s : s.id;
+    let a = e.get(d);
+    a || (a = {
+      id: d,
+      label: typeof s == "string" ? void 0 : s.label,
       columns: [],
-      firstIndex: n
-    }, 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;
+      firstIndex: l
+    }, e.set(d, a), r.push(a)), a.columns.push(o);
+  }), i.length && t(n, i), r.length === 1 && r[0].implicit && r[0].columns.length === u.length ? [] : r;
 }
-function p(u, e, r) {
+function h(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);
+  for (const n of e)
+    for (const o of n.columns)
+      o.field && t.set(o.field, n.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));
+  i.forEach((n) => {
+    const o = n.getAttribute("data-field") || "", l = t.get(o);
+    l && (n.classList.add("grouped"), n.getAttribute("data-group") || n.setAttribute("data-group", l));
   });
-  for (const s of e) {
-    const o = s.columns[s.columns.length - 1], n = i.find((l) => l.getAttribute("data-field") === o.field);
-    n && n.classList.add("group-end");
+  for (const n of e) {
+    const o = n.columns[n.columns.length - 1], l = i.find((s) => s.getAttribute("data-field") === o.field);
+    l && l.classList.add("group-end");
   }
 }
 function f(u, e) {
@@ -271,18 +359,20 @@ function f(u, e) {
   const r = document.createElement("div");
   r.className = "header-group-row", r.setAttribute("role", "row");
   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);
+    const i = t.columns[0], n = i ? e.findIndex((d) => d.field === i.field) : -1;
+    if (n === -1) continue;
+    const o = String(t.id).startsWith("__implicit__"), l = o ? "" : t.label || t.id, s = document.createElement("div");
+    s.className = "cell header-group-cell", o && s.classList.add("implicit-group"), s.setAttribute("data-group", String(t.id)), s.style.gridColumn = `${n + 1} / span ${t.columns.length}`, s.textContent = l, r.appendChild(s);
   }
   return r;
 }
 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 {
+const b = "@layer tbw-plugins{.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:var(--tbw-button-padding-sm, .25rem .5rem);font-weight:600;font-size:var(--tbw-font-size-sm, .9em);text-transform:uppercase;letter-spacing:.5px;border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong, 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, var(--tbw-color-border)))}.header-row .cell.group-end:last-child{border-right:none}.rows .cell.group-end{border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong, var(--tbw-color-border)))}.rows .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 p {
   name = "groupingColumns";
-  version = "1.0.0";
+  styles = b;
   get defaultConfig() {
     return {
       showGroupBorders: !0
@@ -314,37 +404,58 @@ class w extends a {
     const r = this.grid?.gridConfig?.columnGroups;
     let t;
     if (r && Array.isArray(r) && r.length > 0) {
-      const s = /* @__PURE__ */ new Map();
+      const n = /* @__PURE__ */ new Map();
       for (const o of r)
-        for (const n of o.children)
-          s.set(n, { id: o.id, label: o.header });
+        for (const l of o.children)
+          n.set(l, { id: o.id, label: o.header });
       t = e.map((o) => {
-        const n = s.get(o.field);
-        return n && !o.group ? { ...o, group: n } : o;
+        const l = n.get(o.field);
+        return l && !o.group ? { ...o, group: l } : o;
       });
     } else
       t = [...e];
-    const i = h(t);
+    const i = c(t);
     return i.length === 0 ? (this.isActive = !1, this.groups = [], t) : (this.isActive = !0, this.groups = i, t);
   }
   afterRender() {
-    if (!this.isActive || this.groups.length === 0) {
-      const o = this.shadowRoot?.querySelector(".header")?.querySelector(".header-group-row");
-      o && o.remove();
+    if (!this.isActive) {
+      const s = this.gridElement?.querySelector(".header")?.querySelector(".header-group-row");
+      s && s.remove();
       return;
     }
-    const e = this.shadowRoot?.querySelector(".header");
+    const e = this.gridElement?.querySelector(".header");
     if (!e) return;
     const r = e.querySelector(".header-group-row");
     r && r.remove();
-    const t = f(this.groups, this.columns);
-    if (t) {
-      t.classList.toggle("no-borders", !this.config.showGroupBorders);
-      const s = e.querySelector(".header-row");
-      s ? e.insertBefore(t, s) : e.appendChild(t);
+    const t = this.columns, i = c(t);
+    if (i.length === 0) return;
+    const n = f(i, t);
+    if (n) {
+      n.classList.toggle("no-borders", !this.config.showGroupBorders);
+      const l = e.querySelector(".header-row");
+      l ? e.insertBefore(n, l) : e.appendChild(n);
+    }
+    const o = e.querySelector(".header-row");
+    o && (o.classList.toggle("no-group-borders", !this.config.showGroupBorders), h(o, i)), this.#e(i);
+  }
+  /**
+   * Apply group-end class to all data cells in the last column of each group.
+   * This extends the strong border separator through all data rows.
+   */
+  #e(e) {
+    if (!this.config.showGroupBorders) return;
+    const r = this.gridElement;
+    if (!r) return;
+    const t = /* @__PURE__ */ new Set();
+    for (const n of e) {
+      const o = n.columns[n.columns.length - 1];
+      o?.field && t.add(o.field);
+    }
+    const i = r.querySelectorAll(".rows .cell[data-field]");
+    for (const n of i) {
+      const o = n.getAttribute("data-field");
+      o && t.has(o) ? n.classList.add("group-end") : n.classList.remove("group-end");
     }
-    const i = e.querySelector(".header-row");
-    i && (i.classList.toggle("no-group-borders", !this.config.showGroupBorders), p(i, this.groups, this.columns));
   }
   // #endregion
   // #region Public API
@@ -378,9 +489,6 @@ class w extends a {
     this.requestRender();
   }
   // #endregion
-  // #region Styles
-  styles = b;
-  // #endregion
 }
 export {
   w as GroupingColumnsPlugin