@toolbox-web/grid 1.3.0 → 1.4.0

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

@@ -1,4 +1,4 @@
-const x = /{{\s*([^}]+)\s*}}/g, u = "__DG_EMPTY__", R = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, E = /__(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/, v = /* @__PURE__ */ new Set([
+const R = /{{\s*([^}]+)\s*}}/g, u = "__DG_EMPTY__", E = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, v = /__(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([
   "script",
   "iframe",
   "object",
@@ -23,23 +23,23 @@ const x = /{{\s*([^}]+)\s*}}/g, u = "__DG_EMPTY__", R = /^[\w$. '?+\-*/%:()!<>=,
   "plaintext",
   "xmp",
   "listing"
-]), g = /^on\w+$/i, y = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), C = /^\s*(javascript|vbscript|data|blob):/i;
-function _(n) {
+]), h = /^on\w+$/i, C = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), _ = /^\s*(javascript|vbscript|data|blob):/i;
+function A(n) {
   if (!n || typeof n != "string") return "";
   if (n.indexOf("<") === -1) return n;
   const e = document.createElement("template");
-  return e.innerHTML = n, A(e.content), e.innerHTML;
+  return e.innerHTML = n, D(e.content), e.innerHTML;
 }
-function A(n) {
+function D(n) {
   const e = [], t = n.querySelectorAll("*");
   for (const i of t) {
     const s = i.tagName.toLowerCase();
-    if (v.has(s)) {
+    if (y.has(s)) {
       e.push(i);
       continue;
     }
     if ((s === "svg" || i.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(i.attributes).some(
-      (r) => g.test(r.name) || r.name === "href" || r.name === "xlink:href"
+      (r) => h.test(r.name) || r.name === "href" || r.name === "xlink:href"
     )) {
       e.push(i);
       continue;
@@ -47,11 +47,11 @@ function A(n) {
     const l = [];
     for (const o of i.attributes) {
       const r = o.name.toLowerCase();
-      if (g.test(r)) {
+      if (h.test(r)) {
         l.push(o.name);
         continue;
       }
-      if (y.has(r) && C.test(o.value)) {
+      if (C.has(r) && _.test(o.value)) {
         l.push(o.name);
         continue;
       }
@@ -64,22 +64,22 @@ function A(n) {
   }
   e.forEach((i) => i.remove());
 }
-function D(n, e) {
+function S(n, e) {
   if (!n || n.indexOf("{{") === -1) return n;
-  const t = [], i = n.replace(x, (r, a) => {
-    const d = S(a, e);
+  const t = [], i = n.replace(R, (r, a) => {
+    const d = L(a, e);
     return t.push({ expr: a.trim(), result: d }), d;
-  }), s = L(i), l = t.length && t.every((r) => r.result === "" || r.result === u);
+  }), s = I(i), l = t.length && t.every((r) => r.result === "" || r.result === u);
   return /Reflect\.|\bProxy\b|ownKeys\(/.test(n) || l ? "" : s;
 }
-function S(n, e) {
+function L(n, e) {
   if (n = (n || "").trim(), !n || /\b(Reflect|Proxy|ownKeys)\b/.test(n)) return u;
   if (n === "value") return e.value == null ? u : 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 ? u : String(s);
   }
-  if (n.length > 80 || !R.test(n) || E.test(n)) return u;
+  if (n.length > 80 || !E.test(n) || v.test(n)) return u;
   const t = n.match(/\./g);
   if (t && t.length > 1) return u;
   try {
@@ -89,10 +89,10 @@ function S(n, e) {
     return u;
   }
 }
-function L(n) {
+function I(n) {
   return n && n.replace(new RegExp(u, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
 }
-const I = {
+const g = '<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>', T = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -100,9 +100,12 @@ const I = {
   sortNone: "⇅",
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
-  toolPanel: "☰"
+  toolPanel: "☰",
+  filter: g,
+  filterActive: g,
+  print: "🖨️"
 };
-class T {
+class H {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -326,7 +329,7 @@ class T {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...I, ...e };
+    return { ...T, ...e };
   }
   // #region Animation Helpers
   /**
@@ -402,19 +405,19 @@ class T {
   }
   // #endregion
 }
-const p = "__tbw_expander", H = 32;
-function m(n) {
-  return n.field === p;
-}
-function k(n) {
-  return n.find(m);
+const m = "__tbw_expander", k = 32;
+function w(n) {
+  return n.field === m;
 }
 function O(n) {
+  return n.find(w);
+}
+function N(n) {
   return {
-    field: p,
+    field: m,
     header: "",
     // No header text - visually merges with next column
-    width: H,
+    width: k,
     resizable: !1,
     sortable: !1,
     filterable: !1,
@@ -429,22 +432,22 @@ function O(n) {
     }
   };
 }
-function h(n, e) {
+function p(n, e) {
   const t = new Set(n);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function N(n, e) {
+function q(n, e) {
   const t = new Set(n);
   return t.add(e), t;
 }
-function q(n, e) {
+function P(n, e) {
   const t = new Set(n);
   return t.delete(e), t;
 }
-function P(n, e) {
+function M(n, e) {
   return n.has(e);
 }
-function M(n, e, t, i) {
+function F(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 l = document.createElement("div");
@@ -452,12 +455,12 @@ function M(n, e, t, i) {
   const o = t(n, e);
   return typeof o == "string" ? l.innerHTML = o : o instanceof HTMLElement && l.appendChild(o), s.appendChild(l), s;
 }
-const F = "@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 w extends T {
+const U = "@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 b extends H {
   /** @internal */
   name = "masterDetail";
   /** @internal */
-  styles = F;
+  styles = U;
   /** @internal */
   get defaultConfig() {
     return {
@@ -519,8 +522,8 @@ class w extends T {
     s !== null && (d.animation = s === "false" ? !1 : s), l !== null && (d.showExpandColumn = l !== "false"), o !== null && (d.expandOnRowClick = o === "true"), r !== null && (d.collapseOnClickOutside = r === "true"), a !== null && (d.detailHeight = a === "auto" ? "auto" : parseInt(a, 10));
     const c = t.innerHTML.trim();
     c && !this.config.detailRenderer && (d.detailRenderer = (f, G) => {
-      const b = D(c, { value: f, row: f });
-      return _(b);
+      const x = S(c, { value: f, row: f });
+      return A(x);
     }), Object.keys(d).length > 0 && (this.config = { ...this.config, ...d });
   }
   // #endregion
@@ -569,13 +572,13 @@ class w extends T {
    */
   getDetailHeight(e) {
     const t = this.detailElements.get(e);
-    return t ? t.offsetHeight : typeof this.config?.detailHeight == "number" ? this.config.detailHeight : w.DEFAULT_DETAIL_HEIGHT;
+    return t ? t.offsetHeight : typeof this.config?.detailHeight == "number" ? this.config.detailHeight : b.DEFAULT_DETAIL_HEIGHT;
   }
   /**
    * Toggle a row's detail and emit event.
    */
   toggleAndEmit(e, t) {
-    this.expandedRows = h(this.expandedRows, e), this.emit("detail-expand", {
+    this.expandedRows = p(this.expandedRows, e), this.emit("detail-expand", {
       rowIndex: t,
       row: e,
       expanded: this.expandedRows.has(e)
@@ -594,9 +597,9 @@ class w extends T {
     if (!(this.config.showExpandColumn === !0 || this.config.showExpandColumn !== !1 && !!this.config.detailRenderer))
       return [...e];
     const i = [...e];
-    if (k(i))
+    if (O(i))
       return i;
-    const l = O(this.name);
+    const l = N(this.name);
     return l.viewRenderer = (o) => {
       const { row: r } = o, a = this.expandedRows.has(r), d = document.createElement("span");
       d.className = "master-detail-expander expander-cell";
@@ -619,7 +622,7 @@ class w extends T {
   onKeyDown(e) {
     if (e.key !== " ") return;
     const t = this.grid._focusCol, i = this.grid._focusRow, s = this.columns[t];
-    if (!s || !m(s)) return;
+    if (!s || !w(s)) return;
     const l = this.rows[i];
     if (l)
       return e.preventDefault(), this.toggleAndEmit(l, i), this.requestRenderWithFocus(), !0;
@@ -662,7 +665,7 @@ class w extends T {
         d.previousElementSibling !== r && r.after(d);
         continue;
       }
-      const c = M(a, o, this.config.detailRenderer, s);
+      const c = F(a, o, this.config.detailRenderer, s);
       typeof this.config.detailHeight == "number" && (c.style.height = `${this.config.detailHeight}px`), r.after(c), this.detailElements.set(a, c), this.animateExpand(c);
     }
   }
@@ -715,7 +718,7 @@ class w extends T {
    */
   expand(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = N(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = q(this.expandedRows, t), this.requestRender());
   }
   /**
    * Collapse the detail row at the given index.
@@ -723,7 +726,7 @@ class w extends T {
    */
   collapse(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = q(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = P(this.expandedRows, t), this.requestRender());
   }
   /**
    * Toggle the detail row at the given index.
@@ -731,7 +734,7 @@ class w extends T {
    */
   toggle(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = h(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = p(this.expandedRows, t), this.requestRender());
   }
   /**
    * Check if the detail row at the given index is expanded.
@@ -740,7 +743,7 @@ class w extends T {
    */
   isExpanded(e) {
     const t = this.rows[e];
-    return t ? P(this.expandedRows, t) : !1;
+    return t ? M(this.expandedRows, t) : !1;
   }
   /**
    * Expand all detail rows.
@@ -794,6 +797,6 @@ class w extends T {
   // #endregion
 }
 export {
-  w as MasterDetailPlugin
+  b as MasterDetailPlugin
 };
 //# sourceMappingURL=index.js.map