@toolbox-web/grid 1.16.1 → 1.18.0

package/lib/plugins/responsive/index.js

@@ -44,36 +44,36 @@ function H(r) {
       t.push(i);
       continue;
     }
-    const a = [];
+    const l = [];
     for (const s of i.attributes) {
       const o = s.name.toLowerCase();
       if (v.test(o)) {
-        a.push(s.name);
+        l.push(s.name);
         continue;
       }
       if (A.has(o) && S.test(s.value)) {
-        a.push(s.name);
+        l.push(s.name);
         continue;
       }
       if (o === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(s.value)) {
-        a.push(s.name);
+        l.push(s.name);
         continue;
       }
     }
-    a.forEach((s) => i.removeAttribute(s));
+    l.forEach((s) => i.removeAttribute(s));
   }
   t.forEach((i) => i.remove());
 }
 function T(r, t) {
   if (!r || r.indexOf("{{") === -1) return r;
   const e = [], i = r.replace(y, (o, c) => {
-    const l = L(c, t);
-    return e.push({ expr: c.trim(), result: l }), l;
-  }), n = x(i), a = e.length && e.every((o) => o.result === "" || o.result === u);
-  return m.test(r) || a ? "" : n;
+    const a = L(c, t);
+    return e.push({ expr: c.trim(), result: a }), a;
+  }), n = x(i), l = e.length && e.every((o) => o.result === "" || o.result === u);
+  return w.test(r) || l ? "" : n;
 }
 function L(r, t) {
-  if (r = (r || "").trim(), !r || m.test(r)) return u;
+  if (r = (r || "").trim(), !r || w.test(r)) return u;
   if (r === "value") return t.value == null ? u : String(t.value);
   if (r.startsWith("row.") && !/[()?]/.test(r) && !r.includes(":")) {
     const i = r.slice(4), n = t.row ? t.row[i] : void 0;
@@ -83,13 +83,13 @@ function L(r, t) {
   const e = r.match(/\./g);
   if (e && e.length > 1) return u;
   try {
-    const n = new Function("value", "row", `return (${r});`)(t.value, t.row), a = n == null ? "" : String(n);
-    return m.test(a) ? u : a || u;
+    const n = new Function("value", "row", `return (${r});`)(t.value, t.row), l = n == null ? "" : String(n);
+    return w.test(l) ? u : l || u;
   } catch {
     return u;
   }
 }
-const m = /Reflect|Proxy|ownKeys/;
+const w = /Reflect|Proxy|ownKeys/;
 function x(r) {
   return r && r.replace(new RegExp(u, "g"), "").replace(/Reflect\.[^<>{}\s]+|\bProxy\b|ownKeys\([^)]*\)/g, "");
 }
@@ -102,43 +102,46 @@ const N = document.createElement("template");
 N.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
 function g(r, t) {
   if (r._virtualization?.enabled) {
-    const { rowHeight: s, container: o, viewportEl: c } = r._virtualization, l = o, h = c?.clientHeight ?? l?.clientHeight ?? 0;
-    if (l && h > 0) {
+    const { rowHeight: s, container: o, viewportEl: c } = r._virtualization, a = o, h = c?.clientHeight ?? a?.clientHeight ?? 0;
+    if (a && h > 0) {
       const d = r._focusRow * s;
-      d < l.scrollTop ? l.scrollTop = d : d + s > l.scrollTop + h && (l.scrollTop = d - h + s);
+      d < a.scrollTop ? a.scrollTop = d : d + s > a.scrollTop + h && (a.scrollTop = d - h + s);
     }
   }
   const e = r._activeEditRows !== void 0 && r._activeEditRows !== -1;
   e || r.refreshVirtualWindow(!1), M(r._bodyEl), Array.from(r._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((s) => {
     s.setAttribute("aria-selected", "false");
   });
-  const i = r._focusRow, n = r._virtualization.start ?? 0, a = r._virtualization.end ?? r._rows.length;
-  if (i >= n && i < a) {
+  const i = r._focusRow, n = r._virtualization.start ?? 0, l = r._virtualization.end ?? r._rows.length;
+  if (i >= n && i < l) {
     const s = r._bodyEl.querySelectorAll(".data-grid-row")[i - n];
     let o = s?.children[r._focusCol];
     if ((!o || !o.classList?.contains("cell")) && (o = s?.querySelector(`.cell[data-col="${r._focusCol}"]`) ?? s?.querySelector(".cell[data-col]")), o) {
       o.classList.add("cell-focus"), o.setAttribute("aria-selected", "true");
       const c = r.querySelector(".tbw-scroll-area");
       if (c && o && (!e || t?.forceHorizontalScroll)) {
-        const l = r._getHorizontalScrollOffsets?.(s ?? void 0, o) ?? { left: 0, right: 0 };
-        if (!l.skipScroll) {
-          const h = o.getBoundingClientRect(), d = c.getBoundingClientRect(), f = h.left - d.left + c.scrollLeft, w = f + h.width, p = c.scrollLeft + l.left, R = c.scrollLeft + c.clientWidth - l.right;
-          f < p ? c.scrollLeft = f - l.left : w > R && (c.scrollLeft = w - c.clientWidth + l.right);
+        const a = r._getHorizontalScrollOffsets?.(s ?? void 0, o) ?? { left: 0, right: 0 };
+        if (!a.skipScroll) {
+          const h = o.getBoundingClientRect(), d = c.getBoundingClientRect(), f = h.left - d.left + c.scrollLeft, m = f + h.width, p = c.scrollLeft + a.left, R = c.scrollLeft + c.clientWidth - a.right;
+          f < p ? c.scrollLeft = f - a.left : m > R && (c.scrollLeft = m - c.clientWidth + a.right);
         }
       }
-      if (r._activeEditRows !== void 0 && r._activeEditRows !== -1 && o.classList.contains("editing")) {
-        const l = o.querySelector(D);
-        if (l && document.activeElement !== l)
+      if (e && o.classList.contains("editing")) {
+        const a = o.querySelector(D);
+        if (a && document.activeElement !== a)
           try {
-            l.focus({ preventScroll: !0 });
+            a.focus({ preventScroll: !0 });
           } catch {
           }
-      } else if (!o.contains(document.activeElement)) {
+      } else if (e && !o.contains(document.activeElement)) {
         o.hasAttribute("tabindex") || o.setAttribute("tabindex", "-1");
         try {
           o.focus({ preventScroll: !0 });
         } catch {
         }
+      } else if (!e) {
+        const a = r;
+        document.activeElement !== a && a.focus({ preventScroll: !0 });
       }
     }
   }
@@ -646,20 +649,20 @@ class G extends z {
       const d = i.__frameworkAdapter.parseResponsiveCardElement(e);
       d && (this.config = { ...this.config, cardRenderer: d });
     }
-    const n = e.getAttribute("breakpoint"), a = e.getAttribute("card-row-height"), s = e.getAttribute("hidden-columns"), o = e.getAttribute("hide-header"), c = e.getAttribute("debounce-ms"), l = {};
+    const n = e.getAttribute("breakpoint"), l = e.getAttribute("card-row-height"), s = e.getAttribute("hidden-columns"), o = e.getAttribute("hide-header"), c = e.getAttribute("debounce-ms"), a = {};
     if (n !== null) {
       const d = parseInt(n, 10);
-      isNaN(d) || (l.breakpoint = d);
+      isNaN(d) || (a.breakpoint = d);
     }
-    if (a !== null && (l.cardRowHeight = a === "auto" ? "auto" : parseInt(a, 10)), s !== null && (l.hiddenColumns = s.split(",").map((d) => d.trim()).filter((d) => d.length > 0)), o !== null && (l.hideHeader = o !== "false"), c !== null) {
+    if (l !== null && (a.cardRowHeight = l === "auto" ? "auto" : parseInt(l, 10)), s !== null && (a.hiddenColumns = s.split(",").map((d) => d.trim()).filter((d) => d.length > 0)), o !== null && (a.hideHeader = o !== "false"), c !== null) {
       const d = parseInt(c, 10);
-      isNaN(d) || (l.debounceMs = d);
+      isNaN(d) || (a.debounceMs = d);
     }
     const h = e.innerHTML.trim();
-    h && !this.config.cardRenderer && !i.__frameworkAdapter?.parseResponsiveCardElement && (l.cardRenderer = (d) => {
-      const f = T(h, { value: d, row: d }), w = k(f), p = document.createElement("div");
-      return p.className = "tbw-responsive-card-content", p.innerHTML = w, p;
-    }), Object.keys(l).length > 0 && (this.config = { ...this.config, ...l });
+    h && !this.config.cardRenderer && !i.__frameworkAdapter?.parseResponsiveCardElement && (a.cardRenderer = (d) => {
+      const f = T(h, { value: d, row: d }), m = k(f), p = document.createElement("div");
+      return p.className = "tbw-responsive-card-content", p.innerHTML = m, p;
+    }), Object.keys(a).length > 0 && (this.config = { ...this.config, ...a });
   }
   // #endregion
   /**
@@ -693,9 +696,9 @@ class G extends z {
     if (!e && !i)
       return;
     const n = this.gridElement.querySelectorAll(".cell[data-field]");
-    for (const a of n) {
-      const s = a.getAttribute("data-field");
-      s && (this.#s.has(s) ? (a.setAttribute("data-responsive-hidden", ""), a.removeAttribute("data-responsive-value-only")) : this.#l.has(s) ? (a.setAttribute("data-responsive-value-only", ""), a.removeAttribute("data-responsive-hidden")) : (a.removeAttribute("data-responsive-hidden"), a.removeAttribute("data-responsive-value-only")));
+    for (const l of n) {
+      const s = l.getAttribute("data-field");
+      s && (this.#s.has(s) ? (l.setAttribute("data-responsive-hidden", ""), l.removeAttribute("data-responsive-value-only")) : this.#l.has(s) ? (l.setAttribute("data-responsive-value-only", ""), l.removeAttribute("data-responsive-hidden")) : (l.removeAttribute("data-responsive-hidden"), l.removeAttribute("data-responsive-value-only")));
     }
   }
   /**
@@ -775,8 +778,8 @@ class G extends z {
     e.replaceChildren();
     const n = this.config.cardRenderer(t, i);
     e.className = "data-grid-row responsive-card";
-    const a = this.config.cardRowHeight ?? "auto";
-    return a !== "auto" ? e.style.height = `${a}px` : e.style.height = "auto", e.appendChild(n), !0;
+    const l = this.config.cardRowHeight ?? "auto";
+    return l !== "auto" ? e.style.height = `${l}px` : e.style.height = "auto", e.appendChild(n), !0;
   }
   /**
    * Handle keyboard navigation in responsive mode.
@@ -851,7 +854,7 @@ class G extends z {
    * Check if there are any group rows in the current dataset.
    * Used to determine if we have mixed row heights.
    */
-  #w() {
+  #m() {
     for (const t of this.rows)
       if (t.__isGroupRow)
         return !0;
@@ -880,9 +883,9 @@ class G extends z {
    * @deprecated Use getRowHeight() instead. This hook will be removed in v3.0.
    */
   getExtraHeight() {
-    if (!this.#t || !this.config.cardRenderer || !this.#w())
+    if (!this.#t || !this.config.cardRenderer || !this.#m())
       return 0;
-    const t = this.#i ?? 28, e = this.#p(), i = this.#f(), { groupCount: n, cardCount: a } = this.#_(), s = n * Math.max(0, e - t), o = a * Math.max(0, i - t);
+    const t = this.#i ?? 28, e = this.#p(), i = this.#f(), { groupCount: n, cardCount: l } = this.#_(), s = n * Math.max(0, e - t), o = l * Math.max(0, i - t);
     return s + o;
   }
   /**
@@ -894,14 +897,14 @@ class G extends z {
    * @deprecated Use getRowHeight() instead. This hook will be removed in v3.0.
    */
   getExtraHeightBefore(t) {
-    if (!this.#t || !this.config.cardRenderer || !this.#w())
+    if (!this.#t || !this.config.cardRenderer || !this.#m())
       return 0;
-    const e = this.#i ?? 28, i = this.#p(), n = this.#f(), a = Math.max(0, i - e), s = Math.max(0, n - e);
+    const e = this.#i ?? 28, i = this.#p(), n = this.#f(), l = Math.max(0, i - e), s = Math.max(0, n - e);
     let o = 0, c = 0;
-    const l = this.rows, h = Math.min(t, l.length);
+    const a = this.rows, h = Math.min(t, a.length);
     for (let d = 0; d < h; d++)
-      l[d].__isGroupRow ? o++ : c++;
-    return o * a + c * s;
+      a[d].__isGroupRow ? o++ : c++;
+    return o * l + c * s;
   }
   /**
    * Get the height of a specific row based on its type (group row vs card row).
@@ -925,7 +928,7 @@ class G extends z {
     return t;
   }
   /** Pending refresh scheduled via microtask */
-  #m = !1;
+  #w = !1;
   /**
    * Measure card height from DOM after render and detect row count changes.
    * Called in afterRender to ensure scroll calculations are accurate.
@@ -945,7 +948,7 @@ class G extends z {
     if (!this.#t || !this.config.cardRenderer)
       return;
     let t = !1;
-    const e = this.grid, i = this.#w(), n = this.#C();
+    const e = this.grid, i = this.#m(), n = this.#C();
     if (n !== this.#g && (this.#g = n, t = !0), i) {
       const s = this.gridElement.querySelector(".data-grid-row.group-row");
       if (s) {
@@ -953,13 +956,13 @@ class G extends z {
         o > 0 && o !== this.#o && (this.#o = o, t = !0);
       }
     }
-    const a = this.gridElement.querySelector(".data-grid-row.responsive-card");
-    if (a) {
-      const s = a.getBoundingClientRect().height;
+    const l = this.gridElement.querySelector(".data-grid-row.responsive-card");
+    if (l) {
+      const s = l.getBoundingClientRect().height;
       s > 0 && s !== this.#r && (this.#r = s, t = !0, !i && e._virtualization && (e._virtualization.rowHeight = s));
     }
-    t && !this.#m && (this.#m = !0, queueMicrotask(() => {
-      this.#m = !1, this.grid && this.#t && this.grid.refreshVirtualWindow?.(!0, !0);
+    t && !this.#w && (this.#w = !0, queueMicrotask(() => {
+      this.#w = !1, this.grid && this.#t && this.grid.refreshVirtualWindow?.(!0, !0);
     }));
   }
 }