@toolbox-web/grid 1.12.1 → 1.13.0

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

@@ -1,4 +1,4 @@
-const A = /{{\s*([^}]+)\s*}}/g, g = "__DG_EMPTY__", C = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, _ = /__(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/, y = /* @__PURE__ */ new Set([
+const C = /{{\s*([^}]+)\s*}}/g, g = "__DG_EMPTY__", _ = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, y = /__(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/, D = /* @__PURE__ */ new Set([
   "script",
   "iframe",
   "object",
@@ -23,23 +23,23 @@ const A = /{{\s*([^}]+)\s*}}/g, g = "__DG_EMPTY__", C = /^[\w$. '?+\-*/%:()!<>=,
   "plaintext",
   "xmp",
   "listing"
-]), w = /^on\w+$/i, D = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), S = /^\s*(javascript|vbscript|data|blob):/i;
-function H(n) {
+]), b = /^on\w+$/i, S = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), H = /^\s*(javascript|vbscript|data|blob):/i;
+function T(n) {
   if (!n || typeof n != "string") return "";
   if (n.indexOf("<") === -1) return n;
   const e = document.createElement("template");
-  return e.innerHTML = n, T(e.content), e.innerHTML;
+  return e.innerHTML = n, L(e.content), e.innerHTML;
 }
-function T(n) {
+function L(n) {
   const e = [], t = n.querySelectorAll("*");
   for (const i of t) {
     const s = i.tagName.toLowerCase();
-    if (y.has(s)) {
+    if (D.has(s)) {
       e.push(i);
       continue;
     }
     if ((s === "svg" || i.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(i.attributes).some(
-      (o) => w.test(o.name) || o.name === "href" || o.name === "xlink:href"
+      (o) => b.test(o.name) || o.name === "href" || o.name === "xlink:href"
     )) {
       e.push(i);
       continue;
@@ -47,11 +47,11 @@ function T(n) {
     const r = [];
     for (const a of i.attributes) {
       const o = a.name.toLowerCase();
-      if (w.test(o)) {
+      if (b.test(o)) {
         r.push(a.name);
         continue;
       }
-      if (D.has(o) && S.test(a.value)) {
+      if (S.has(o) && H.test(a.value)) {
         r.push(a.name);
         continue;
       }
@@ -64,35 +64,36 @@ function T(n) {
   }
   e.forEach((i) => i.remove());
 }
-function L(n, e) {
+function I(n, e) {
   if (!n || n.indexOf("{{") === -1) return n;
-  const t = [], i = n.replace(A, (o, c) => {
-    const d = I(c, e);
+  const t = [], i = n.replace(C, (o, c) => {
+    const d = O(c, e);
     return t.push({ expr: c.trim(), result: d }), d;
-  }), s = O(i), r = t.length && t.every((o) => o.result === "" || o.result === g);
-  return /Reflect\.|\bProxy\b|ownKeys\(/.test(n) || r ? "" : s;
+  }), s = k(i), r = t.length && t.every((o) => o.result === "" || o.result === g);
+  return p.test(n) || r ? "" : s;
 }
-function I(n, e) {
-  if (n = (n || "").trim(), !n || /\b(Reflect|Proxy|ownKeys)\b/.test(n)) return g;
+function O(n, e) {
+  if (n = (n || "").trim(), !n || p.test(n)) return g;
   if (n === "value") return e.value == null ? g : String(e.value);
   if (n.startsWith("row.") && !/[()?]/.test(n) && !n.includes(":")) {
     const i = n.slice(4), s = e.row ? e.row[i] : void 0;
     return s == null ? g : String(s);
   }
-  if (n.length > 80 || !C.test(n) || _.test(n)) return g;
+  if (n.length > 80 || !_.test(n) || y.test(n)) return g;
   const t = n.match(/\./g);
   if (t && t.length > 1) return g;
   try {
     const s = new Function("value", "row", `return (${n});`)(e.value, e.row), r = s == null ? "" : String(s);
-    return /Reflect|Proxy|ownKeys/.test(r) ? g : r || g;
+    return p.test(r) ? g : r || g;
   } catch {
     return g;
   }
 }
-function O(n) {
-  return n && n.replace(new RegExp(g, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
+const p = /Reflect|Proxy|ownKeys/;
+function k(n) {
+  return n && n.replace(new RegExp(g, "g"), "").replace(/Reflect\.[^<>{}\s]+|\bProxy\b|ownKeys\([^)]*\)/g, "");
 }
-const b = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', k = {
+const x = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', N = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -101,11 +102,11 @@ const b = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰",
-  filter: b,
-  filterActive: b,
+  filter: x,
+  filterActive: x,
   print: "🖨️"
 };
-class N {
+class M {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -395,7 +396,7 @@ class N {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...k, ...e };
+    return { ...N, ...e };
   }
   // #region Animation Helpers
   /**
@@ -471,19 +472,19 @@ class N {
   }
   // #endregion
 }
-const R = "__tbw_expander", P = 32;
-function E(n) {
-  return n.field === R;
+const E = "__tbw_expander", q = 32;
+function v(n) {
+  return n.field === E;
 }
-function M(n) {
-  return n.find(E);
+function P(n) {
+  return n.find(v);
 }
-function q(n) {
+function F(n) {
   return {
-    field: R,
+    field: E,
     header: "",
     // No header text - visually merges with next column
-    width: P,
+    width: q,
     resizable: !1,
     sortable: !1,
     filterable: !1,
@@ -498,22 +499,22 @@ function q(n) {
     }
   };
 }
-function x(n, e) {
+function R(n, e) {
   const t = new Set(n);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function F(n, e) {
+function U(n, e) {
   const t = new Set(n);
   return t.add(e), t;
 }
-function U(n, e) {
+function z(n, e) {
   const t = new Set(n);
   return t.delete(e), t;
 }
-function z(n, e) {
+function G(n, e) {
   return n.has(e);
 }
-function G(n, e, t, i) {
+function W(n, e, t, i) {
   const s = document.createElement("div");
   s.className = "master-detail-row", s.setAttribute("data-detail-for", String(e)), s.setAttribute("role", "row");
   const r = document.createElement("div");
@@ -521,12 +522,12 @@ function G(n, e, t, i) {
   const a = t(n, e);
   return typeof a == "string" ? r.innerHTML = a : a instanceof HTMLElement && r.appendChild(a), s.appendChild(r), s;
 }
-const W = "@layer tbw-plugins{tbw-grid .cell[data-field=__tbw_expander]{border-right:none!important;padding:0;display:flex;align-items:center;justify-content:center}tbw-grid .header-row .cell[data-field=__tbw_expander]{display:none}tbw-grid .header-row .cell[data-field=__tbw_expander]+.cell{grid-column:1 / 3}tbw-grid .master-detail-expander{display:flex;align-items:center;justify-content:center;width:100%;height:100%}tbw-grid .master-detail-toggle{cursor:pointer;opacity:.7;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center}tbw-grid .master-detail-toggle:hover{opacity:1}tbw-grid .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}tbw-grid .master-detail-cell{padding:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem));overflow:auto}tbw-grid .master-detail-row.tbw-expanding{animation:tbw-detail-expand var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}tbw-grid .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:var(--tbw-detail-max-height, 31.25rem);padding-top:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem));padding-bottom:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem))}}@keyframes tbw-detail-collapse{0%{opacity:1;max-height:var(--tbw-detail-max-height, 31.25rem)}to{opacity:0;max-height:0}}}";
-class v extends N {
+const $ = "@layer tbw-plugins{tbw-grid .cell[data-field=__tbw_expander]{border-right:none!important;padding:0;display:flex;align-items:center;justify-content:center}tbw-grid .header-row .cell[data-field=__tbw_expander]{display:none}tbw-grid .header-row .cell[data-field=__tbw_expander]+.cell{grid-column:1 / 3}tbw-grid .master-detail-expander{display:flex;align-items:center;justify-content:center;width:100%;height:100%}tbw-grid .master-detail-toggle{cursor:pointer;opacity:.7;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center}tbw-grid .master-detail-toggle:hover{opacity:1}tbw-grid .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}tbw-grid .master-detail-cell{padding:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem));overflow:auto}tbw-grid .master-detail-row.tbw-expanding{animation:tbw-detail-expand var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}tbw-grid .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:var(--tbw-detail-max-height, 31.25rem);padding-top:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem));padding-bottom:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem))}}@keyframes tbw-detail-collapse{0%{opacity:1;max-height:var(--tbw-detail-max-height, 31.25rem)}to{opacity:0;max-height:0}}}";
+class A extends M {
   /** @internal */
   name = "masterDetail";
   /** @internal */
-  styles = W;
+  styles = $;
   /** @internal */
   get defaultConfig() {
     return {
@@ -588,8 +589,8 @@ class v extends N {
     s !== null && (d.animation = s === "false" ? !1 : s), r !== null && (d.showExpandColumn = r !== "false"), a !== null && (d.expandOnRowClick = a === "true"), o !== null && (d.collapseOnClickOutside = o === "true"), c !== null && (d.detailHeight = c === "auto" ? "auto" : parseInt(c, 10));
     const l = t.innerHTML.trim();
     l && !this.config.detailRenderer && (d.detailRenderer = (u, h) => {
-      const f = L(l, { value: u, row: u });
-      return H(f);
+      const f = I(l, { value: u, row: u });
+      return T(f);
     }), Object.keys(d).length > 0 && (this.config = { ...this.config, ...d });
   }
   // #endregion
@@ -666,13 +667,13 @@ class v extends N {
         return this.measuredDetailHeights.set(e, r), r;
     }
     const i = this.measuredDetailHeights.get(e);
-    return i && i > 0 ? i : typeof this.config?.detailHeight == "number" ? this.config.detailHeight : v.DEFAULT_DETAIL_HEIGHT;
+    return i && i > 0 ? i : typeof this.config?.detailHeight == "number" ? this.config.detailHeight : A.DEFAULT_DETAIL_HEIGHT;
   }
   /**
    * Toggle a row's detail and emit event.
    */
   toggleAndEmit(e, t) {
-    this.expandedRows = x(this.expandedRows, e);
+    this.expandedRows = R(this.expandedRows, e);
     const i = this.expandedRows.has(e);
     i && this.rowsToAnimate.add(e), this.emit("detail-expand", {
       rowIndex: t,
@@ -693,9 +694,9 @@ class v extends N {
     if (!(this.config.showExpandColumn === !0 || this.config.showExpandColumn !== !1 && !!this.config.detailRenderer))
       return [...e];
     const i = [...e];
-    if (M(i))
+    if (P(i))
       return i;
-    const r = q(this.name);
+    const r = F(this.name);
     return r.viewRenderer = (a) => {
       const { row: o } = a, c = this.expandedRows.has(o), d = document.createElement("span");
       d.className = "master-detail-expander expander-cell";
@@ -718,7 +719,7 @@ class v extends N {
   onKeyDown(e) {
     if (e.key !== " ") return;
     const t = this.grid._focusCol, i = this.grid._focusRow, s = this.columns[t];
-    if (!s || !E(s)) return;
+    if (!s || !v(s)) return;
     const r = this.rows[i];
     if (r)
       return e.preventDefault(), this.toggleAndEmit(r, i), this.requestRenderWithFocus(), !0;
@@ -773,10 +774,10 @@ class v extends N {
         f.previousElementSibling !== u && u.after(f);
         continue;
       }
-      const m = G(h, l, this.config.detailRenderer, a);
+      const m = W(h, l, this.config.detailRenderer, a);
       typeof this.config.detailHeight == "number" && (m.style.height = `${this.config.detailHeight}px`), u.after(m), this.detailElements.set(h, m);
-      const p = this.rowsToAnimate.has(h);
-      p && this.rowsToAnimate.delete(h), p && this.animateExpand(m, h, l) || requestAnimationFrame(() => {
+      const w = this.rowsToAnimate.has(h);
+      w && this.rowsToAnimate.delete(h), w && this.animateExpand(m, h, l) || requestAnimationFrame(() => {
         this.#e(m, h, l);
       });
     }
@@ -859,7 +860,7 @@ class v extends N {
    */
   expand(e) {
     const t = this.rows[e];
-    t && (this.rowsToAnimate.add(t), this.expandedRows = F(this.expandedRows, t), this.requestRender());
+    t && (this.rowsToAnimate.add(t), this.expandedRows = U(this.expandedRows, t), this.requestRender());
   }
   /**
    * Collapse the detail row at the given index.
@@ -867,7 +868,7 @@ class v extends N {
    */
   collapse(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = U(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = z(this.expandedRows, t), this.requestRender());
   }
   /**
    * Toggle the detail row at the given index.
@@ -875,7 +876,7 @@ class v extends N {
    */
   toggle(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = x(this.expandedRows, t), this.expandedRows.has(t) && this.rowsToAnimate.add(t), this.requestRender());
+    t && (this.expandedRows = R(this.expandedRows, t), this.expandedRows.has(t) && this.rowsToAnimate.add(t), this.requestRender());
   }
   /**
    * Check if the detail row at the given index is expanded.
@@ -884,7 +885,7 @@ class v extends N {
    */
   isExpanded(e) {
     const t = this.rows[e];
-    return t ? z(this.expandedRows, t) : !1;
+    return t ? G(this.expandedRows, t) : !1;
   }
   /**
    * Expand all detail rows.
@@ -938,6 +939,6 @@ class v extends N {
   // #endregion
 }
 export {
-  v as MasterDetailPlugin
+  A as MasterDetailPlugin
 };
 //# sourceMappingURL=index.js.map