@toolbox-web/grid 0.4.1 → 0.5.0

package/lib/plugins/master-detail/types.d.ts

@@ -1,15 +1,5 @@
 import { ExpandCollapseAnimation } from '../../core/types';
 export type { ExpandCollapseAnimation } from '../../core/types';
-/** View renderer function with optional marker for master-detail-wrapped renderers */
-export interface MasterDetailWrappedRenderer {
-    (ctx: {
-        value: unknown;
-        row: Record<string, unknown>;
-        column: unknown;
-    }): Node | string | null;
-    /** Marker to prevent double-wrapping */
-    __masterDetailWrapped?: boolean;
-}
 /** Configuration options for the master-detail plugin */
 export interface MasterDetailConfig {
     /** Renderer function that returns detail content for a row */

package/lib/plugins/master-detail/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/master-detail/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAChE,YAAY,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEhE,sFAAsF;AACtF,MAAM,WAAW,2BAA2B;IAC1C,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/F,wCAAwC;IACxC,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,yDAAyD;AACzD,MAAM,WAAW,kBAAkB;IACjC,8DAA8D;IAC9D,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC;IAC1F,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sEAAsE;IACtE,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,yDAAyD;AACzD,MAAM,WAAW,iBAAiB;IAChC,yDAAyD;IACzD,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,4CAA4C;IAC5C,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;CAC1C;AAED,2CAA2C;AAC3C,MAAM,WAAW,kBAAkB;IACjC,gDAAgD;IAChD,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB;IACnB,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,sCAAsC;IACtC,QAAQ,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/master-detail/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAChE,YAAY,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEhE,yDAAyD;AACzD,MAAM,WAAW,kBAAkB;IACjC,8DAA8D;IAC9D,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC;IAC1F,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sEAAsE;IACtE,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,yDAAyD;AACzD,MAAM,WAAW,iBAAiB;IAChC,yDAAyD;IACzD,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,4CAA4C;IAC5C,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;CAC1C;AAED,2CAA2C;AAC3C,MAAM,WAAW,kBAAkB;IACjC,gDAAgD;IAChD,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB;IACnB,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,sCAAsC;IACtC,QAAQ,EAAE,OAAO,CAAC;CACnB"}

package/lib/plugins/multi-sort/MultiSortPlugin.d.ts

@@ -11,7 +11,7 @@ import { MultiSortConfig, SortModel } from './types';
  */
 export declare class MultiSortPlugin extends BaseGridPlugin<MultiSortConfig> {
     readonly name = "multiSort";
-    readonly version = "1.0.0";
+    readonly styles: string;
     protected get defaultConfig(): Partial<MultiSortConfig>;
     private sortModel;
     detach(): void;
@@ -53,6 +53,5 @@ export declare class MultiSortPlugin extends BaseGridPlugin<MultiSortConfig> {
      * Rebuilds the sort model from all column states.
      */
     applyColumnState(field: string, state: ColumnState): void;
-    readonly styles: string;
 }
 //# sourceMappingURL=MultiSortPlugin.d.ts.map

package/lib/plugins/multi-sort/MultiSortPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSortPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/multi-sort/MultiSortPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1D;;;;;;;GAOG;AACH,qBAAa,eAAgB,SAAQ,cAAc,CAAC,eAAe,CAAC;IAClE,QAAQ,CAAC,IAAI,eAAe;IAC5B,SAAkB,OAAO,WAAW;IAEpC,cAAuB,aAAa,IAAI,OAAO,CAAC,eAAe,CAAC,CAK/D;IAGD,OAAO,CAAC,SAAS,CAAmB;IAK3B,MAAM,IAAI,IAAI;IAOd,WAAW,CAAC,IAAI,EAAE,SAAS,OAAO,EAAE,GAAG,OAAO,EAAE;IAOhD,aAAa,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO;IAe/C,WAAW,IAAI,IAAI;IAiE5B;;;OAGG;IACH,YAAY,IAAI,SAAS,EAAE;IAI3B;;;OAGG;IACH,YAAY,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI;IAMtC;;OAEG;IACH,SAAS,IAAI,IAAI;IAMjB;;;;OAIG;IACH,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAI/C;;;;OAIG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS;IAO3D;;OAEG;IACM,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,SAAS;IAaxE;;;OAGG;IACM,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAG,IAAI;IA8BlE,SAAkB,MAAM,SAAU;CAEnC"}
+{"version":3,"file":"MultiSortPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/multi-sort/MultiSortPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1D;;;;;;;GAOG;AACH,qBAAa,eAAgB,SAAQ,cAAc,CAAC,eAAe,CAAC;IAClE,QAAQ,CAAC,IAAI,eAAe;IAC5B,SAAkB,MAAM,SAAU;IAElC,cAAuB,aAAa,IAAI,OAAO,CAAC,eAAe,CAAC,CAK/D;IAGD,OAAO,CAAC,SAAS,CAAmB;IAK3B,MAAM,IAAI,IAAI;IAOd,WAAW,CAAC,IAAI,EAAE,SAAS,OAAO,EAAE,GAAG,OAAO,EAAE;IAOhD,aAAa,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO;IAe/C,WAAW,IAAI,IAAI;IAiE5B;;;OAGG;IACH,YAAY,IAAI,SAAS,EAAE;IAI3B;;;OAGG;IACH,YAAY,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI;IAMtC;;OAEG;IACH,SAAS,IAAI,IAAI;IAMjB;;;;OAIG;IACH,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAI/C;;;;OAIG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS;IAO3D;;OAEG;IACM,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,SAAS;IAaxE;;;OAGG;IACM,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAG,IAAI;CA2BnE"}

package/lib/plugins/multi-sort/index.js

@@ -1,4 +1,4 @@
-const x = {
+const b = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -8,7 +8,7 @@ const x = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class M {
+class x {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -25,8 +25,11 @@ class M {
    * ```
    */
   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 M {
   emit(t, e) {
     this.grid?.dispatchEvent?.(new CustomEvent(t, { detail: e, bubbles: !0 }));
   }
+  /**
+   * Emit a cancelable custom event from the grid.
+   * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
+   */
+  emitCancelable(t, e) {
+    const o = new CustomEvent(t, { detail: e, bubbles: !0, cancelable: !0 });
+    return this.grid?.dispatchEvent?.(o), o.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 M {
     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.
@@ -184,8 +227,53 @@ class M {
    */
   get gridIcons() {
     const t = this.grid?.gridConfig?.icons ?? {};
-    return { ...x, ...t };
+    return { ...b, ...t };
   }
+  // #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 t = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (t === !1 || t === "off") return !1;
+    if (t === !0 || t === "on") return !0;
+    const e = this.gridElement;
+    return e ? getComputedStyle(e).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 t = this.gridElement;
+    if (t) {
+      const e = getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(), o = parseInt(e, 10);
+      if (!isNaN(o)) return o;
+    }
+    return 200;
+  }
+  // #endregion
   /**
    * Resolve an icon value to string or HTMLElement.
    * Checks plugin config first, then grid-level icons, then defaults.
@@ -216,33 +304,33 @@ class M {
   // #endregion
 }
 function S(r, t, e) {
-  return t.length ? [...r].sort((n, o) => {
-    for (const i of t) {
-      const d = e.find((a) => a.field === i.field)?.sortComparator ?? C, u = n[i.field], f = o[i.field], s = d(u, f, n, o);
+  return t.length ? [...r].sort((o, i) => {
+    for (const n of t) {
+      const d = e.find((c) => c.field === n.field)?.sortComparator ?? y, u = o[n.field], f = i[n.field], s = d(u, f, o, i);
       if (s !== 0)
-        return i.direction === "asc" ? s : -s;
+        return n.direction === "asc" ? s : -s;
     }
     return 0;
   }) : [...r];
 }
-function C(r, t) {
+function y(r, t) {
   return r == null && t == null ? 0 : r == null ? 1 : t == null ? -1 : typeof r == "number" && typeof t == "number" ? r - t : r instanceof Date && t instanceof Date ? r.getTime() - t.getTime() : typeof r == "boolean" && typeof t == "boolean" ? r === t ? 0 : r ? -1 : 1 : String(r).localeCompare(String(t));
 }
-function y(r, t, e, n) {
-  const o = r.find((i) => i.field === t);
-  return e ? o ? o.direction === "asc" ? r.map((i) => i.field === t ? { ...i, direction: "desc" } : i) : r.filter((i) => i.field !== t) : r.length < n ? [...r, { field: t, direction: "asc" }] : r : o?.direction === "asc" ? [{ field: t, direction: "desc" }] : o?.direction === "desc" ? [] : [{ field: t, direction: "asc" }];
+function C(r, t, e, o) {
+  const i = r.find((n) => n.field === t);
+  return e ? i ? i.direction === "asc" ? r.map((n) => n.field === t ? { ...n, direction: "desc" } : n) : r.filter((n) => n.field !== t) : r.length < o ? [...r, { field: t, direction: "asc" }] : r : i?.direction === "asc" ? [{ field: t, direction: "desc" }] : i?.direction === "desc" ? [] : [{ field: t, direction: "asc" }];
 }
 function h(r, t) {
-  const e = r.findIndex((n) => n.field === t);
+  const e = r.findIndex((o) => o.field === t);
   return e >= 0 ? e + 1 : void 0;
 }
 function m(r, t) {
   return r.find((e) => e.field === t)?.direction;
 }
-const b = '.header-cell[data-sort=asc]:after{content:"↑";margin-left:4px;opacity:.8}.header-cell[data-sort=desc]:after{content:"↓";margin-left:4px;opacity:.8}.sort-indicator{margin-left:4px;opacity:.8}.sort-index{font-size:10px;background:var(--tbw-multi-sort-badge-bg, var(--tbw-color-panel-bg));color:var(--tbw-multi-sort-badge-color, var(--tbw-color-fg));border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;margin-left:2px;font-weight:600}';
-class w extends M {
+const M = '@layer tbw-plugins{.header-cell[data-sort=asc]:after{content:"↑";margin-left:4px;opacity:.8}.header-cell[data-sort=desc]:after{content:"↓";margin-left:4px;opacity:.8}.sort-indicator{margin-left:4px;opacity:.8}.sort-index{font-size:10px;background:var(--tbw-multi-sort-badge-bg, var(--tbw-color-panel-bg));color:var(--tbw-multi-sort-badge-color, var(--tbw-color-fg));border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;margin-left:2px;font-weight:600}}';
+class w extends x {
   name = "multiSort";
-  version = "1.0.0";
+  styles = M;
   get defaultConfig() {
     return {
       maxSortColumns: 3,
@@ -262,29 +350,29 @@ class w extends M {
     return this.sortModel.length === 0 ? [...t] : S([...t], this.sortModel, [...this.columns]);
   }
   onHeaderClick(t) {
-    if (!this.columns.find((i) => i.field === t.field)?.sortable) return !1;
-    const n = t.originalEvent.shiftKey, o = this.config.maxSortColumns ?? 3;
-    return this.sortModel = y(this.sortModel, t.field, n, o), this.emit("sort-change", { sortModel: [...this.sortModel] }), this.requestRender(), !0;
+    if (!this.columns.find((n) => n.field === t.field)?.sortable) return !1;
+    const o = t.originalEvent.shiftKey, i = this.config.maxSortColumns ?? 3;
+    return this.sortModel = C(this.sortModel, t.field, o, i), this.emit("sort-change", { sortModel: [...this.sortModel] }), this.requestRender(), !0;
   }
   afterRender() {
-    const t = this.shadowRoot;
+    const t = this.gridElement;
     if (!t) return;
     const e = this.config.showSortIndex !== !1;
-    t.querySelectorAll(".header-row .cell[data-field]").forEach((o) => {
-      const i = o.getAttribute("data-field");
-      if (!i) return;
-      const c = h(this.sortModel, i), d = m(this.sortModel, i);
-      if (o.querySelector(".sort-index")?.remove(), d) {
-        o.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove(), o.setAttribute("data-sort", d);
+    t.querySelectorAll(".header-row .cell[data-field]").forEach((i) => {
+      const n = i.getAttribute("data-field");
+      if (!n) return;
+      const a = h(this.sortModel, n), d = m(this.sortModel, n);
+      if (i.querySelector(".sort-index")?.remove(), d) {
+        i.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove(), i.setAttribute("data-sort", d);
         const s = document.createElement("span");
         s.className = "sort-indicator", this.setIcon(s, this.resolveIcon(d === "asc" ? "sortAsc" : "sortDesc"));
-        const a = o.querySelector(".tbw-filter-btn"), p = o.querySelector(".resize-handle"), g = a ?? p;
-        if (g ? o.insertBefore(s, g) : o.appendChild(s), e && this.sortModel.length > 1 && c !== void 0) {
+        const c = i.querySelector(".tbw-filter-btn"), p = i.querySelector(".resize-handle"), g = c ?? p;
+        if (g ? i.insertBefore(s, g) : i.appendChild(s), e && this.sortModel.length > 1 && a !== void 0) {
           const l = document.createElement("span");
-          l.className = "sort-index", l.textContent = String(c), s.nextSibling ? o.insertBefore(l, s.nextSibling) : o.appendChild(l);
+          l.className = "sort-index", l.textContent = String(a), s.nextSibling ? i.insertBefore(l, s.nextSibling) : i.appendChild(l);
         }
       } else
-        o.removeAttribute("data-sort");
+        i.removeAttribute("data-sort");
     });
   }
   // #endregion
@@ -331,7 +419,7 @@ class w extends M {
    * Return sort state for a column if it's in the sort model.
    */
   getColumnState(t) {
-    const e = this.sortModel.findIndex((o) => o.field === t);
+    const e = this.sortModel.findIndex((i) => i.field === t);
     return e === -1 ? void 0 : {
       sort: {
         direction: this.sortModel[e].direction,
@@ -345,19 +433,16 @@ class w extends M {
    */
   applyColumnState(t, e) {
     if (!e.sort) {
-      this.sortModel = this.sortModel.filter((i) => i.field !== t);
+      this.sortModel = this.sortModel.filter((n) => n.field !== t);
       return;
     }
-    const n = this.sortModel.findIndex((i) => i.field === t), o = {
+    const o = this.sortModel.findIndex((n) => n.field === t), i = {
       field: t,
       direction: e.sort.direction
     };
-    n !== -1 ? this.sortModel[n] = o : this.sortModel.splice(e.sort.priority, 0, o);
+    o !== -1 ? this.sortModel[o] = i : this.sortModel.splice(e.sort.priority, 0, i);
   }
   // #endregion
-  // #region Styles
-  styles = b;
-  // #endregion
 }
 export {
   w as MultiSortPlugin