@toolbox-web/grid 0.2.8 → 0.3.1

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

@@ -0,0 +1,147 @@
+import { BaseGridPlugin, GridElement, RowClickEvent } from '../../core/plugin/base-plugin';
+import { ColumnConfig } from '../../core/types';
+import { MasterDetailConfig } from './types';
+/**
+ * Master/Detail Plugin for tbw-grid
+ *
+ * @example
+ * ```ts
+ * new MasterDetailPlugin({
+ *   enabled: true,
+ *   detailRenderer: (row) => `<div>Details for ${row.name}</div>`,
+ *   expandOnRowClick: true,
+ * })
+ * ```
+ */
+export declare class MasterDetailPlugin extends BaseGridPlugin<MasterDetailConfig> {
+    #private;
+    readonly name = "masterDetail";
+    readonly version = "1.0.0";
+    protected get defaultConfig(): Partial<MasterDetailConfig>;
+    /**
+     * Called when plugin is attached to the grid.
+     * Parses light DOM for `<tbw-grid-detail>` elements to configure detail templates.
+     */
+    attach(grid: GridElement): void;
+    /**
+     * Parse `<tbw-grid-detail>` elements from the grid's light DOM.
+     *
+     * Allows declarative configuration:
+     * ```html
+     * <tbw-grid [rows]="data">
+     *   <tbw-grid-detail>
+     *     <div class="detail-content">
+     *       <p>Name: {{ row.name }}</p>
+     *       <p>Email: {{ row.email }}</p>
+     *     </div>
+     *   </tbw-grid-detail>
+     * </tbw-grid>
+     * ```
+     *
+     * Attributes:
+     * - `animation`: 'slide' | 'fade' | 'false' (default: 'slide')
+     * - `show-expand-column`: 'true' | 'false' (default: 'true')
+     * - `expand-on-row-click`: 'true' | 'false' (default: 'false')
+     * - `collapse-on-click-outside`: 'true' | 'false' (default: 'false')
+     * - `height`: number (pixels) or 'auto' (default: 'auto')
+     */
+    private parseLightDomDetail;
+    /**
+     * Check if animations are enabled at the grid level.
+     * Respects gridConfig.animation.mode and CSS variable.
+     */
+    private get isAnimationEnabled();
+    /**
+     * Get expand/collapse animation style from plugin config.
+     */
+    private get animationStyle();
+    /**
+     * Get animation duration from CSS variable (set by grid).
+     */
+    private get animationDuration();
+    /**
+     * Apply expand animation to a detail element.
+     */
+    private animateExpand;
+    /**
+     * Apply collapse animation to a detail element and remove after animation.
+     */
+    private animateCollapse;
+    private expandedRows;
+    private detailElements;
+    detach(): void;
+    processColumns(columns: readonly ColumnConfig[]): ColumnConfig[];
+    onRowClick(event: RowClickEvent): boolean | void;
+    onCellClick(): boolean | void;
+    afterRender(): void;
+    /**
+     * Called on scroll to sync detail elements with visible rows.
+     * Removes details for rows that scrolled out of view and reattaches for visible rows.
+     */
+    onScrollRender(): void;
+    /**
+     * Return total extra height from all expanded detail rows.
+     * Used by grid virtualization to adjust scrollbar height.
+     */
+    getExtraHeight(): number;
+    /**
+     * Return extra height that appears before a given row index.
+     * This is the sum of heights of all expanded details whose parent row is before the given index.
+     */
+    getExtraHeightBefore(beforeRowIndex: number): number;
+    /**
+     * Adjust the virtualization start index to keep expanded row visible while its detail is visible.
+     * This ensures the detail scrolls smoothly out of view instead of disappearing abruptly.
+     */
+    adjustVirtualStart(start: number, scrollTop: number, rowHeight: number): number;
+    /**
+     * Expand the detail row at the given index.
+     * @param rowIndex - Index of the row to expand
+     */
+    expand(rowIndex: number): void;
+    /**
+     * Collapse the detail row at the given index.
+     * @param rowIndex - Index of the row to collapse
+     */
+    collapse(rowIndex: number): void;
+    /**
+     * Toggle the detail row at the given index.
+     * @param rowIndex - Index of the row to toggle
+     */
+    toggle(rowIndex: number): void;
+    /**
+     * Check if the detail row at the given index is expanded.
+     * @param rowIndex - Index of the row to check
+     * @returns Whether the detail row is expanded
+     */
+    isExpanded(rowIndex: number): boolean;
+    /**
+     * Expand all detail rows.
+     */
+    expandAll(): void;
+    /**
+     * Collapse all detail rows.
+     */
+    collapseAll(): void;
+    /**
+     * Get the indices of all expanded rows.
+     * @returns Array of row indices that are expanded
+     */
+    getExpandedRows(): number[];
+    /**
+     * Get the detail element for a specific row.
+     * @param rowIndex - Index of the row
+     * @returns The detail HTMLElement or undefined
+     */
+    getDetailElement(rowIndex: number): HTMLElement | undefined;
+    /**
+     * Re-parse light DOM to refresh the detail renderer.
+     * Call this after framework templates are registered (e.g., Angular ngAfterContentInit).
+     *
+     * This allows frameworks to register templates asynchronously and then
+     * update the plugin's detailRenderer.
+     */
+    refreshDetailRenderer(): void;
+    readonly styles: string;
+}
+//# sourceMappingURL=MasterDetailPlugin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MasterDetailPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/master-detail/MasterDetailPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC3F,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,kBAAkB,CAAC;AASjE,OAAO,KAAK,EAA+C,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAO/F;;;;;;;;;;;GAWG;AACH,qBAAa,kBAAmB,SAAQ,cAAc,CAAC,kBAAkB,CAAC;;IACxE,QAAQ,CAAC,IAAI,kBAAkB;IAC/B,SAAkB,OAAO,WAAW;IAEpC,cAAuB,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC,CAQlE;IAID;;;OAGG;IACM,MAAM,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAKxC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,mBAAmB;IAqE3B;;;OAGG;IACH,OAAO,KAAK,kBAAkB,GAc7B;IAED;;OAEG;IACH,OAAO,KAAK,cAAc,GAGzB;IAED;;OAEG;IACH,OAAO,KAAK,iBAAiB,GAQ5B;IAED;;OAEG;IACH,OAAO,CAAC,aAAa;IAarB;;OAEG;IACH,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,cAAc,CAAoC;IAKjD,MAAM,IAAI,IAAI;IAQd,cAAc,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,GAAG,YAAY,EAAE;IAyEhE,UAAU,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IAehD,WAAW,IAAI,OAAO,GAAG,IAAI;IAS7B,WAAW,IAAI,IAAI;IAI5B;;;OAGG;IACM,cAAc,IAAI,IAAI;IA2E/B;;;OAGG;IACM,cAAc,IAAI,MAAM;IAejC;;;OAGG;IACM,oBAAoB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM;IAkB7D;;;OAGG;IACM,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM;IAgDxF;;;OAGG;IACH,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAQ9B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAQhC;;;OAGG;IACH,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAQ9B;;;;OAIG;IACH,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO;IAKrC;;OAEG;IACH,SAAS,IAAI,IAAI;IAOjB;;OAEG;IACH,WAAW,IAAI,IAAI;IAKnB;;;OAGG;IACH,eAAe,IAAI,MAAM,EAAE;IAS3B;;;;OAIG;IACH,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS;IAK3D;;;;;;OAMG;IACH,qBAAqB,IAAI,IAAI;IAc7B,SAAkB,MAAM,SAAU;CAEnC"}

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

@@ -0,0 +1,7 @@
+/**
+ * Master Detail Plugin Entry Point
+ * Re-exports plugin class and types for tree-shakeable imports.
+ */
+export { MasterDetailPlugin } from './MasterDetailPlugin';
+export type { ExpandCollapseAnimation, MasterDetailConfig } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/master-detail/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}

package/lib/plugins/master-detail/index.js

@@ -1,4 +1,98 @@
-const w = {
+const R = /{{\s*([^}]+)\s*}}/g, f = "__DG_EMPTY__", x = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, b = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/, E = /* @__PURE__ */ new Set([
+  "script",
+  "iframe",
+  "object",
+  "embed",
+  "form",
+  "input",
+  "button",
+  "textarea",
+  "select",
+  "link",
+  "meta",
+  "base",
+  "style",
+  "template",
+  "slot",
+  "portal",
+  "frame",
+  "frameset",
+  "applet",
+  "noscript",
+  "noembed",
+  "plaintext",
+  "xmp",
+  "listing"
+]), w = /^on\w+$/i, v = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), y = /^\s*(javascript|vbscript|data|blob):/i;
+function S(i) {
+  if (!i || typeof i != "string") return "";
+  if (i.indexOf("<") === -1) return i;
+  const e = document.createElement("template");
+  return e.innerHTML = i, C(e.content), e.innerHTML;
+}
+function C(i) {
+  const e = [], t = i.querySelectorAll("*");
+  for (const n of t) {
+    const o = n.tagName.toLowerCase();
+    if (E.has(o)) {
+      e.push(n);
+      continue;
+    }
+    if ((o === "svg" || n.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(n.attributes).some(
+      (s) => w.test(s.name) || s.name === "href" || s.name === "xlink:href"
+    )) {
+      e.push(n);
+      continue;
+    }
+    const l = [];
+    for (const r of n.attributes) {
+      const s = r.name.toLowerCase();
+      if (w.test(s)) {
+        l.push(r.name);
+        continue;
+      }
+      if (v.has(s) && y.test(r.value)) {
+        l.push(r.name);
+        continue;
+      }
+      if (s === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(r.value)) {
+        l.push(r.name);
+        continue;
+      }
+    }
+    l.forEach((r) => n.removeAttribute(r));
+  }
+  e.forEach((n) => n.remove());
+}
+function A(i, e) {
+  if (!i || i.indexOf("{{") === -1) return i;
+  const t = [], n = i.replace(R, (s, a) => {
+    const d = D(a, e);
+    return t.push({ expr: a.trim(), result: d }), d;
+  }), o = H(n), l = t.length && t.every((s) => s.result === "" || s.result === f);
+  return /Reflect\.|\bProxy\b|ownKeys\(/.test(i) || l ? "" : o;
+}
+function D(i, e) {
+  if (i = (i || "").trim(), !i || /\b(Reflect|Proxy|ownKeys)\b/.test(i)) return f;
+  if (i === "value") return e.value == null ? f : String(e.value);
+  if (i.startsWith("row.") && !/[()?]/.test(i) && !i.includes(":")) {
+    const n = i.slice(4), o = e.row ? e.row[n] : void 0;
+    return o == null ? f : String(o);
+  }
+  if (i.length > 80 || !x.test(i) || b.test(i)) return f;
+  const t = i.match(/\./g);
+  if (t && t.length > 1) return f;
+  try {
+    const o = new Function("value", "row", `return (${i});`)(e.value, e.row), l = o == null ? "" : String(o);
+    return /Reflect|Proxy|ownKeys/.test(l) ? f : l || f;
+  } catch {
+    return f;
+  }
+}
+function H(i) {
+  return i && i.replace(new RegExp(f, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
+}
+const k = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -8,7 +102,7 @@ const w = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class m {
+class _ {
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -133,7 +227,7 @@ class m {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...w, ...e };
+    return { ...k, ...e };
   }
   /**
    * Resolve an icon value to string or HTMLElement.
@@ -164,31 +258,31 @@ class m {
   }
   // #endregion
 }
-function p(c, e) {
-  const t = new Set(c);
+function p(i, e) {
+  const t = new Set(i);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function x(c, e) {
-  const t = new Set(c);
+function L(i, e) {
+  const t = new Set(i);
   return t.add(e), t;
 }
-function R(c, e) {
-  const t = new Set(c);
+function T(i, e) {
+  const t = new Set(i);
   return t.delete(e), t;
 }
-function b(c, e) {
-  return c.has(e);
+function I(i, e) {
+  return i.has(e);
 }
-function E(c, e, t, i) {
+function O(i, e, t, n) {
   const o = document.createElement("div");
   o.className = "master-detail-row", o.setAttribute("data-detail-for", String(e)), o.setAttribute("role", "row");
-  const a = document.createElement("div");
-  a.className = "master-detail-cell", a.setAttribute("role", "cell"), a.style.gridColumn = `1 / ${i + 1}`;
-  const r = t(c, e);
-  return typeof r == "string" ? a.innerHTML = r : r instanceof HTMLElement && a.appendChild(r), o.appendChild(a), o;
+  const l = document.createElement("div");
+  l.className = "master-detail-cell", l.setAttribute("role", "cell"), l.style.gridColumn = `1 / ${n + 1}`;
+  const r = t(i, e);
+  return typeof r == "string" ? l.innerHTML = r : r instanceof HTMLElement && l.appendChild(r), o.appendChild(l), o;
 }
-const y = ".master-detail-cell-wrapper{display:flex;align-items:center;gap:4px}.master-detail-toggle{cursor:pointer;opacity:.7;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center}.master-detail-toggle:hover{opacity:1}.master-detail-row{grid-column:1 / -1;display:grid;background:var(--tbw-master-detail-bg, var(--tbw-color-row-alt));border-bottom:1px solid var(--tbw-master-detail-border, var(--tbw-color-border));overflow:hidden}.master-detail-cell{padding:16px;overflow:auto}.master-detail-row.tbw-expanding{animation:tbw-detail-expand var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}.master-detail-row.tbw-collapsing{animation:tbw-detail-collapse var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-detail-expand{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}to{opacity:1;max-height:500px;padding-top:16px;padding-bottom:16px}}@keyframes tbw-detail-collapse{0%{opacity:1;max-height:500px}to{opacity:0;max-height:0}}";
-class C extends m {
+const N = ".master-detail-cell-wrapper{display:flex;align-items:center;gap:4px}.master-detail-toggle{cursor:pointer;opacity:.7;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center}.master-detail-toggle:hover{opacity:1}.master-detail-row{grid-column:1 / -1;display:grid;background:var(--tbw-master-detail-bg, var(--tbw-color-row-alt));border-bottom:1px solid var(--tbw-master-detail-border, var(--tbw-color-border));overflow:hidden}.master-detail-cell{padding:16px;overflow:auto}.master-detail-row.tbw-expanding{animation:tbw-detail-expand var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}.master-detail-row.tbw-collapsing{animation:tbw-detail-collapse var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-detail-expand{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}to{opacity:1;max-height:500px;padding-top:16px;padding-bottom:16px}}@keyframes tbw-detail-collapse{0%{opacity:1;max-height:500px}to{opacity:0;max-height:0}}";
+class q extends _ {
   name = "masterDetail";
   version = "1.0.0";
   get defaultConfig() {
@@ -201,6 +295,58 @@ class C extends m {
       // Plugin's own default
     };
   }
+  // #region Light DOM Parsing
+  /**
+   * Called when plugin is attached to the grid.
+   * Parses light DOM for `<tbw-grid-detail>` elements to configure detail templates.
+   */
+  attach(e) {
+    super.attach(e), this.parseLightDomDetail();
+  }
+  /**
+   * Parse `<tbw-grid-detail>` elements from the grid's light DOM.
+   *
+   * Allows declarative configuration:
+   * ```html
+   * <tbw-grid [rows]="data">
+   *   <tbw-grid-detail>
+   *     <div class="detail-content">
+   *       <p>Name: {{ row.name }}</p>
+   *       <p>Email: {{ row.email }}</p>
+   *     </div>
+   *   </tbw-grid-detail>
+   * </tbw-grid>
+   * ```
+   *
+   * Attributes:
+   * - `animation`: 'slide' | 'fade' | 'false' (default: 'slide')
+   * - `show-expand-column`: 'true' | 'false' (default: 'true')
+   * - `expand-on-row-click`: 'true' | 'false' (default: 'false')
+   * - `collapse-on-click-outside`: 'true' | 'false' (default: 'false')
+   * - `height`: number (pixels) or 'auto' (default: 'auto')
+   */
+  parseLightDomDetail() {
+    const e = this.grid;
+    if (!e || typeof e.querySelector != "function") return;
+    const t = e.querySelector("tbw-grid-detail");
+    if (!t) return;
+    const n = e;
+    if (n.__frameworkAdapter?.parseDetailElement) {
+      const c = n.__frameworkAdapter.parseDetailElement(t);
+      if (c) {
+        this.config = { ...this.config, detailRenderer: c };
+        return;
+      }
+    }
+    const o = t.getAttribute("animation"), l = t.getAttribute("show-expand-column"), r = t.getAttribute("expand-on-row-click"), s = t.getAttribute("collapse-on-click-outside"), a = t.getAttribute("height"), d = {};
+    o !== null && (d.animation = o === "false" ? !1 : o), l !== null && (d.showExpandColumn = l !== "false"), r !== null && (d.expandOnRowClick = r === "true"), s !== null && (d.collapseOnClickOutside = s === "true"), a !== null && (d.detailHeight = a === "auto" ? "auto" : parseInt(a, 10));
+    const u = t.innerHTML.trim();
+    u && !this.config.detailRenderer && (d.detailRenderer = (c, h) => {
+      const g = A(u, { value: c, row: c });
+      return S(g);
+    }), Object.keys(d).length > 0 && (this.config = { ...this.config, ...d });
+  }
+  // #endregion
   // #region Animation Helpers
   /**
    * Check if animations are enabled at the grid level.
@@ -210,8 +356,8 @@ class C extends m {
     const t = this.grid.effectiveConfig?.animation?.mode ?? "reduced-motion";
     if (t === !1 || t === "off") return !1;
     if (t === !0 || t === "on") return !0;
-    const i = this.shadowRoot?.host;
-    return i ? getComputedStyle(i).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
+    const n = this.shadowRoot?.host;
+    return n ? getComputedStyle(n).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
   }
   /**
    * Get expand/collapse animation style from plugin config.
@@ -225,8 +371,8 @@ class C extends m {
   get animationDuration() {
     const e = this.shadowRoot?.host;
     if (e) {
-      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), i = parseInt(t, 10);
-      if (!isNaN(i)) return i;
+      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), n = parseInt(t, 10);
+      if (!isNaN(n)) return n;
     }
     return 200;
   }
@@ -251,10 +397,10 @@ class C extends m {
       return;
     }
     e.classList.add("tbw-collapsing");
-    const i = () => {
+    const n = () => {
       e.classList.remove("tbw-collapsing"), t();
     };
-    e.addEventListener("animationend", i, { once: !0 }), setTimeout(i, this.animationDuration + 50);
+    e.addEventListener("animationend", n, { once: !0 }), setTimeout(n, this.animationDuration + 50);
   }
   // #endregion
   // #region Internal State
@@ -272,31 +418,31 @@ class C extends m {
       return [...e];
     const t = [...e];
     if (t.length > 0) {
-      const i = { ...t[0] }, o = i.viewRenderer;
+      const n = { ...t[0] }, o = n.viewRenderer;
       if (o?.__masterDetailWrapped)
         return t;
-      const a = (r) => {
-        const { value: s, row: n } = r, d = this.expandedRows.has(n), l = document.createElement("span");
-        l.className = "master-detail-cell-wrapper";
-        const h = document.createElement("span");
-        h.className = `master-detail-toggle${d ? " expanded" : ""}`, this.setIcon(h, this.resolveIcon(d ? "collapse" : "expand")), h.setAttribute("role", "button"), h.setAttribute("tabindex", "0"), h.setAttribute("aria-expanded", String(d)), h.setAttribute("aria-label", d ? "Collapse details" : "Expand details"), h.addEventListener("click", (g) => {
+      const l = (r) => {
+        const { value: s, row: a } = r, d = this.expandedRows.has(a), u = document.createElement("span");
+        u.className = "master-detail-cell-wrapper";
+        const c = document.createElement("span");
+        c.className = `master-detail-toggle${d ? " expanded" : ""}`, this.setIcon(c, this.resolveIcon(d ? "collapse" : "expand")), c.setAttribute("role", "button"), c.setAttribute("tabindex", "0"), c.setAttribute("aria-expanded", String(d)), c.setAttribute("aria-label", d ? "Collapse details" : "Expand details"), c.addEventListener("click", (g) => {
           g.stopPropagation();
-          const f = this.rows.indexOf(n);
-          this.expandedRows = p(this.expandedRows, n), this.emit("detail-expand", {
-            rowIndex: f,
-            row: n,
-            expanded: this.expandedRows.has(n)
+          const m = this.rows.indexOf(a);
+          this.expandedRows = p(this.expandedRows, a), this.emit("detail-expand", {
+            rowIndex: m,
+            row: a,
+            expanded: this.expandedRows.has(a)
           }), this.requestRender();
-        }), l.appendChild(h);
-        const u = document.createElement("span");
+        }), u.appendChild(c);
+        const h = document.createElement("span");
         if (o) {
           const g = o(r);
-          g instanceof Node ? u.appendChild(g) : u.textContent = String(g ?? s ?? "");
+          g instanceof Node ? h.appendChild(g) : h.textContent = String(g ?? s ?? "");
         } else
-          u.textContent = String(s ?? "");
-        return l.appendChild(u), l;
+          h.textContent = String(s ?? "");
+        return u.appendChild(h), u;
       };
-      a.__masterDetailWrapped = !0, i.viewRenderer = a, t[0] = i;
+      l.__masterDetailWrapped = !0, n.viewRenderer = l, t[0] = n;
     }
     return t;
   }
@@ -329,26 +475,26 @@ class C extends m {
     if (!this.config.detailRenderer) return;
     const e = this.shadowRoot?.querySelector(".rows");
     if (!e) return;
-    const t = /* @__PURE__ */ new Map(), i = e.querySelectorAll(".data-grid-row"), o = this.columns.length;
-    for (const r of i) {
-      const s = r.querySelector(".cell[data-row]"), n = s ? parseInt(s.getAttribute("data-row") ?? "-1", 10) : -1;
-      n >= 0 && t.set(n, r);
+    const t = /* @__PURE__ */ new Map(), n = e.querySelectorAll(".data-grid-row"), o = this.columns.length;
+    for (const r of n) {
+      const s = r.querySelector(".cell[data-row]"), a = s ? parseInt(s.getAttribute("data-row") ?? "-1", 10) : -1;
+      a >= 0 && t.set(a, r);
     }
-    const a = e.querySelectorAll(".master-detail-row");
-    for (const r of a) {
-      const s = parseInt(r.getAttribute("data-detail-for") ?? "-1", 10), n = s >= 0 ? this.rows[s] : void 0, d = n && this.expandedRows.has(n), l = t.has(s);
-      (!d || !l) && (r.remove(), n && this.detailElements.delete(n));
+    const l = e.querySelectorAll(".master-detail-row");
+    for (const r of l) {
+      const s = parseInt(r.getAttribute("data-detail-for") ?? "-1", 10), a = s >= 0 ? this.rows[s] : void 0, d = a && this.expandedRows.has(a), u = t.has(s);
+      (!d || !u) && (r.remove(), a && this.detailElements.delete(a));
     }
     for (const [r, s] of t) {
-      const n = this.rows[r];
-      if (!n || !this.expandedRows.has(n)) continue;
-      const d = this.detailElements.get(n);
+      const a = this.rows[r];
+      if (!a || !this.expandedRows.has(a)) continue;
+      const d = this.detailElements.get(a);
       if (d) {
         d.previousElementSibling !== s && s.after(d);
         continue;
       }
-      const l = E(n, r, this.config.detailRenderer, o);
-      typeof this.config.detailHeight == "number" && (l.style.height = `${this.config.detailHeight}px`), s.after(l), this.detailElements.set(n, l), this.animateExpand(l);
+      const u = O(a, r, this.config.detailRenderer, o);
+      typeof this.config.detailHeight == "number" && (u.style.height = `${this.config.detailHeight}px`), s.after(u), this.detailElements.set(a, u), this.animateExpand(u);
     }
   }
   /**
@@ -358,9 +504,9 @@ class C extends m {
   getExtraHeight() {
     let e = 0;
     for (const t of this.expandedRows) {
-      const i = this.detailElements.get(t);
-      if (i)
-        e += i.offsetHeight;
+      const n = this.detailElements.get(t);
+      if (n)
+        e += n.offsetHeight;
       else {
         const o = this.config?.detailHeight;
         e += typeof o == "number" ? o : 150;
@@ -374,12 +520,12 @@ class C extends m {
    */
   getExtraHeightBefore(e) {
     let t = 0;
-    for (const i of this.expandedRows) {
-      const o = this.rows.indexOf(i);
+    for (const n of this.expandedRows) {
+      const o = this.rows.indexOf(n);
       if (o >= 0 && o < e) {
-        const a = this.detailElements.get(i);
-        if (a)
-          t += a.offsetHeight;
+        const l = this.detailElements.get(n);
+        if (l)
+          t += l.offsetHeight;
         else {
           const r = this.config?.detailHeight;
           t += typeof r == "number" ? r : 150;
@@ -392,20 +538,20 @@ class C extends m {
    * Adjust the virtualization start index to keep expanded row visible while its detail is visible.
    * This ensures the detail scrolls smoothly out of view instead of disappearing abruptly.
    */
-  adjustVirtualStart(e, t, i) {
+  adjustVirtualStart(e, t, n) {
     if (this.expandedRows.size === 0) return e;
     const o = [];
     for (const s of this.expandedRows) {
-      const n = this.rows.indexOf(s);
-      n >= 0 && o.push({ index: n, row: s });
+      const a = this.rows.indexOf(s);
+      a >= 0 && o.push({ index: a, row: s });
     }
-    o.sort((s, n) => s.index - n.index);
-    let a = e, r = 0;
-    for (const { index: s, row: n } of o) {
-      const d = s * i + r, h = this.detailElements.get(n)?.offsetHeight ?? (typeof this.config?.detailHeight == "number" ? this.config.detailHeight : 150), u = d + i + h;
-      r += h, !(s >= e) && u > t && s < a && (a = s);
+    o.sort((s, a) => s.index - a.index);
+    let l = e, r = 0;
+    for (const { index: s, row: a } of o) {
+      const d = s * n + r, c = this.detailElements.get(a)?.offsetHeight ?? (typeof this.config?.detailHeight == "number" ? this.config.detailHeight : 150), h = d + n + c;
+      r += c, !(s >= e) && h > t && s < l && (l = s);
     }
-    return a;
+    return l;
   }
   // #endregion
   // #region Public API
@@ -415,7 +561,7 @@ class C extends m {
    */
   expand(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = x(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = L(this.expandedRows, t), this.requestRender());
   }
   /**
    * Collapse the detail row at the given index.
@@ -423,7 +569,7 @@ class C extends m {
    */
   collapse(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = R(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = T(this.expandedRows, t), this.requestRender());
   }
   /**
    * Toggle the detail row at the given index.
@@ -440,7 +586,7 @@ class C extends m {
    */
   isExpanded(e) {
     const t = this.rows[e];
-    return t ? b(this.expandedRows, t) : !1;
+    return t ? I(this.expandedRows, t) : !1;
   }
   /**
    * Expand all detail rows.
@@ -463,8 +609,8 @@ class C extends m {
   getExpandedRows() {
     const e = [];
     for (const t of this.expandedRows) {
-      const i = this.rows.indexOf(t);
-      i >= 0 && e.push(i);
+      const n = this.rows.indexOf(t);
+      n >= 0 && e.push(n);
     }
     return e;
   }
@@ -477,12 +623,23 @@ class C extends m {
     const t = this.rows[e];
     return t ? this.detailElements.get(t) : void 0;
   }
+  /**
+   * Re-parse light DOM to refresh the detail renderer.
+   * Call this after framework templates are registered (e.g., Angular ngAfterContentInit).
+   *
+   * This allows frameworks to register templates asynchronously and then
+   * update the plugin's detailRenderer.
+   */
+  refreshDetailRenderer() {
+    const e = this.config.detailRenderer;
+    this.config = { ...this.config, detailRenderer: void 0 }, this.parseLightDomDetail(), !this.config.detailRenderer && e && (this.config = { ...this.config, detailRenderer: e });
+  }
   // #endregion
   // #region Styles
-  styles = y;
+  styles = N;
   // #endregion
 }
 export {
-  C as MasterDetailPlugin
+  q as MasterDetailPlugin
 };
 //# sourceMappingURL=index.js.map