@toolbox-web/grid 0.3.3 → 0.4.1

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

@@ -1,4 +1,4 @@
-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([
+const m = /{{\s*([^}]+)\s*}}/g, f = "__DG_EMPTY__", R = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, x = /__(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/, b = /* @__PURE__ */ new Set([
   "script",
   "iframe",
   "object",
@@ -23,8 +23,8 @@ const R = /{{\s*([^}]+)\s*}}/g, f = "__DG_EMPTY__", x = /^[\w$. '?+\-*/%:()!<>=,
   "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) {
+]), w = /^on\w+$/i, E = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), v = /^\s*(javascript|vbscript|data|blob):/i;
+function y(i) {
   if (!i || typeof i != "string") return "";
   if (i.indexOf("<") === -1) return i;
   const e = document.createElement("template");
@@ -33,66 +33,66 @@ function S(i) {
 function C(i) {
   const e = [], t = i.querySelectorAll("*");
   for (const n of t) {
-    const o = n.tagName.toLowerCase();
-    if (E.has(o)) {
+    const s = n.tagName.toLowerCase();
+    if (b.has(s)) {
       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"
+    if ((s === "svg" || n.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(n.attributes).some(
+      (o) => w.test(o.name) || o.name === "href" || o.name === "xlink:href"
     )) {
       e.push(n);
       continue;
     }
-    const l = [];
+    const a = [];
     for (const r of n.attributes) {
-      const s = r.name.toLowerCase();
-      if (w.test(s)) {
-        l.push(r.name);
+      const o = r.name.toLowerCase();
+      if (w.test(o)) {
+        a.push(r.name);
         continue;
       }
-      if (v.has(s) && y.test(r.value)) {
-        l.push(r.name);
+      if (E.has(o) && v.test(r.value)) {
+        a.push(r.name);
         continue;
       }
-      if (s === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(r.value)) {
-        l.push(r.name);
+      if (o === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(r.value)) {
+        a.push(r.name);
         continue;
       }
     }
-    l.forEach((r) => n.removeAttribute(r));
+    a.forEach((r) => n.removeAttribute(r));
   }
   e.forEach((n) => n.remove());
 }
-function A(i, e) {
+function S(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;
+  const t = [], n = i.replace(m, (o, l) => {
+    const d = A(l, e);
+    return t.push({ expr: l.trim(), result: d }), d;
+  }), s = D(n), a = t.length && t.every((o) => o.result === "" || o.result === f);
+  return /Reflect\.|\bProxy\b|ownKeys\(/.test(i) || a ? "" : s;
 }
-function D(i, e) {
+function A(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);
+    const n = i.slice(4), s = e.row ? e.row[n] : void 0;
+    return s == null ? f : String(s);
   }
-  if (i.length > 80 || !x.test(i) || b.test(i)) return f;
+  if (i.length > 80 || !R.test(i) || x.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;
+    const s = new Function("value", "row", `return (${i});`)(e.value, e.row), a = s == null ? "" : String(s);
+    return /Reflect|Proxy|ownKeys/.test(a) ? f : a || f;
   } catch {
     return f;
   }
 }
-function H(i) {
+function D(i) {
   return i && i.replace(new RegExp(f, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
 }
-const k = {
+const H = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -103,6 +103,22 @@ const k = {
   toolPanel: "☰"
 };
 class _ {
+  /**
+   * 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 */
@@ -119,6 +135,12 @@ class _ {
   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
@@ -133,19 +155,48 @@ class _ {
   /**
    * 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);
@@ -219,7 +270,7 @@ class _ {
    * 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.
@@ -227,7 +278,7 @@ class _ {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...k, ...e };
+    return { ...H, ...e };
   }
   /**
    * Resolve an icon value to string or HTMLElement.
@@ -262,26 +313,26 @@ function p(i, e) {
   const t = new Set(i);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function L(i, e) {
+function k(i, e) {
   const t = new Set(i);
   return t.add(e), t;
 }
-function T(i, e) {
+function L(i, e) {
   const t = new Set(i);
   return t.delete(e), t;
 }
-function I(i, e) {
+function T(i, e) {
   return i.has(e);
 }
-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 l = document.createElement("div");
-  l.className = "master-detail-cell", l.setAttribute("role", "cell"), l.style.gridColumn = `1 / ${n + 1}`;
+function I(i, e, t, n) {
+  const s = document.createElement("div");
+  s.className = "master-detail-row", s.setAttribute("data-detail-for", String(e)), s.setAttribute("role", "row");
+  const a = document.createElement("div");
+  a.className = "master-detail-cell", a.setAttribute("role", "cell"), a.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;
+  return typeof r == "string" ? a.innerHTML = r : r instanceof HTMLElement && a.appendChild(r), s.appendChild(a), s;
 }
-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}}";
+const O = ".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";
@@ -338,12 +389,12 @@ class q extends _ {
         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 s = t.getAttribute("animation"), a = t.getAttribute("show-expand-column"), r = t.getAttribute("expand-on-row-click"), o = t.getAttribute("collapse-on-click-outside"), l = t.getAttribute("height"), d = {};
+    s !== null && (d.animation = s === "false" ? !1 : s), a !== null && (d.showExpandColumn = a !== "false"), r !== null && (d.expandOnRowClick = r === "true"), o !== null && (d.collapseOnClickOutside = o === "true"), l !== null && (d.detailHeight = l === "auto" ? "auto" : parseInt(l, 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);
+      const g = S(u, { value: c, row: c });
+      return y(g);
     }), Object.keys(d).length > 0 && (this.config = { ...this.config, ...d });
   }
   // #endregion
@@ -418,31 +469,23 @@ class q extends _ {
       return [...e];
     const t = [...e];
     if (t.length > 0) {
-      const n = { ...t[0] }, o = n.viewRenderer;
-      if (o?.__masterDetailWrapped)
+      const n = { ...t[0] }, s = n.viewRenderer;
+      if (s?.__masterDetailWrapped)
         return t;
-      const l = (r) => {
-        const { value: s, row: a } = r, d = this.expandedRows.has(a), u = document.createElement("span");
+      const a = (r) => {
+        const { value: o, row: l } = r, d = this.expandedRows.has(l), 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 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();
-        }), u.appendChild(c);
+        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"), u.appendChild(c);
         const h = document.createElement("span");
-        if (o) {
-          const g = o(r);
-          g instanceof Node ? h.appendChild(g) : h.textContent = String(g ?? s ?? "");
+        if (s) {
+          const g = s(r);
+          g instanceof Node ? h.appendChild(g) : h.textContent = String(g ?? o ?? "");
         } else
-          h.textContent = String(s ?? "");
+          h.textContent = String(o ?? "");
         return u.appendChild(h), u;
       };
-      l.__masterDetailWrapped = !0, n.viewRenderer = l, t[0] = n;
+      a.__masterDetailWrapped = !0, n.viewRenderer = a, t[0] = n;
     }
     return t;
   }
@@ -454,7 +497,15 @@ class q extends _ {
         expanded: this.expandedRows.has(e.row)
       }), this.requestRender(), !1;
   }
-  onCellClick() {
+  onCellClick(e) {
+    if (e.originalEvent?.target?.classList.contains("master-detail-toggle")) {
+      const n = e.row, s = e.rowIndex;
+      return this.expandedRows = p(this.expandedRows, n), this.emit("detail-expand", {
+        rowIndex: s,
+        row: n,
+        expanded: this.expandedRows.has(n)
+      }), this.requestRender(), !0;
+    }
     this.expandedRows.size > 0 && queueMicrotask(() => this.#e());
   }
   afterRender() {
@@ -475,26 +526,26 @@ class q extends _ {
     if (!this.config.detailRenderer) return;
     const e = this.shadowRoot?.querySelector(".rows");
     if (!e) return;
-    const t = /* @__PURE__ */ new Map(), n = e.querySelectorAll(".data-grid-row"), o = this.columns.length;
+    const t = /* @__PURE__ */ new Map(), n = e.querySelectorAll(".data-grid-row"), s = 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 o = r.querySelector(".cell[data-row]"), l = o ? parseInt(o.getAttribute("data-row") ?? "-1", 10) : -1;
+      l >= 0 && t.set(l, r);
     }
-    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));
+    const a = e.querySelectorAll(".master-detail-row");
+    for (const r of a) {
+      const o = parseInt(r.getAttribute("data-detail-for") ?? "-1", 10), l = o >= 0 ? this.rows[o] : void 0, d = l && this.expandedRows.has(l), u = t.has(o);
+      (!d || !u) && (r.remove(), l && this.detailElements.delete(l));
     }
-    for (const [r, s] of t) {
-      const a = this.rows[r];
-      if (!a || !this.expandedRows.has(a)) continue;
-      const d = this.detailElements.get(a);
+    for (const [r, o] of t) {
+      const l = this.rows[r];
+      if (!l || !this.expandedRows.has(l)) continue;
+      const d = this.detailElements.get(l);
       if (d) {
-        d.previousElementSibling !== s && s.after(d);
+        d.previousElementSibling !== o && o.after(d);
         continue;
       }
-      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);
+      const u = I(l, r, this.config.detailRenderer, s);
+      typeof this.config.detailHeight == "number" && (u.style.height = `${this.config.detailHeight}px`), o.after(u), this.detailElements.set(l, u), this.animateExpand(u);
     }
   }
   /**
@@ -508,8 +559,8 @@ class q extends _ {
       if (n)
         e += n.offsetHeight;
       else {
-        const o = this.config?.detailHeight;
-        e += typeof o == "number" ? o : 150;
+        const s = this.config?.detailHeight;
+        e += typeof s == "number" ? s : 150;
       }
     }
     return e;
@@ -521,11 +572,11 @@ class q extends _ {
   getExtraHeightBefore(e) {
     let t = 0;
     for (const n of this.expandedRows) {
-      const o = this.rows.indexOf(n);
-      if (o >= 0 && o < e) {
-        const l = this.detailElements.get(n);
-        if (l)
-          t += l.offsetHeight;
+      const s = this.rows.indexOf(n);
+      if (s >= 0 && s < e) {
+        const a = this.detailElements.get(n);
+        if (a)
+          t += a.offsetHeight;
         else {
           const r = this.config?.detailHeight;
           t += typeof r == "number" ? r : 150;
@@ -540,18 +591,18 @@ class q extends _ {
    */
   adjustVirtualStart(e, t, n) {
     if (this.expandedRows.size === 0) return e;
-    const o = [];
-    for (const s of this.expandedRows) {
-      const a = this.rows.indexOf(s);
-      a >= 0 && o.push({ index: a, row: s });
+    const s = [];
+    for (const o of this.expandedRows) {
+      const l = this.rows.indexOf(o);
+      l >= 0 && s.push({ index: l, row: o });
     }
-    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);
+    s.sort((o, l) => o.index - l.index);
+    let a = e, r = 0;
+    for (const { index: o, row: l } of s) {
+      const d = o * n + r, c = this.detailElements.get(l)?.offsetHeight ?? (typeof this.config?.detailHeight == "number" ? this.config.detailHeight : 150), h = d + n + c;
+      r += c, !(o >= e) && h > t && o < a && (a = o);
     }
-    return l;
+    return a;
   }
   // #endregion
   // #region Public API
@@ -561,7 +612,7 @@ class q extends _ {
    */
   expand(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = L(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = k(this.expandedRows, t), this.requestRender());
   }
   /**
    * Collapse the detail row at the given index.
@@ -569,7 +620,7 @@ class q extends _ {
    */
   collapse(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = T(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = L(this.expandedRows, t), this.requestRender());
   }
   /**
    * Toggle the detail row at the given index.
@@ -586,7 +637,7 @@ class q extends _ {
    */
   isExpanded(e) {
     const t = this.rows[e];
-    return t ? I(this.expandedRows, t) : !1;
+    return t ? T(this.expandedRows, t) : !1;
   }
   /**
    * Expand all detail rows.
@@ -632,11 +683,14 @@ class q extends _ {
    */
   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 });
+    if (this.config = { ...this.config, detailRenderer: void 0 }, this.parseLightDomDetail(), !this.config.detailRenderer && e && (this.config = { ...this.config, detailRenderer: e }), this.config.detailRenderer) {
+      const t = this.grid;
+      typeof t.refreshColumns == "function" ? t.refreshColumns() : this.requestRender();
+    }
   }
   // #endregion
   // #region Styles
-  styles = N;
+  styles = O;
   // #endregion
 }
 export {