@toolbox-web/grid 1.19.0 → 1.19.2

package/all.js

@@ -113,8 +113,8 @@ class In extends F {
     e.preventDefault();
     const i = _e(t, this.config), n = this.#s(), r = n?.ranges?.[0], o = r?.from.row ?? 0, s = r?.from.col ?? 0, d = r && (n?.mode === "range" || n?.mode === "row") && (r.from.row !== r.to.row || r.from.col !== r.to.col) ? { endRow: r.to.row, endCol: r.to.col } : null, c = d?.endCol ?? this.columns.length - 1, u = this.columns[s], h = u ? { row: o, col: s, field: u.field, bounds: d } : null, f = [], g = i[0]?.length ?? 0;
     for (let m = 0; m < g && s + m <= c; m++) {
-      const x = this.columns[s + m];
-      x && !x.hidden && f.push(x.field);
+      const y = this.columns[s + m];
+      y && !y.hidden && f.push(y.field);
     }
     const p = { rows: i, text: t, target: h, fields: f };
     this.emit("paste", p), this.#o(p);
@@ -1365,28 +1365,28 @@ class Fn extends F {
         b.stopPropagation(), b.preventDefault(), f(), this.#h(t, !0);
       }
     });
-    const p = i, m = p.__editorTemplate, x = zt(this.grid, p) ?? Kt(i), E = d, P = `${t}:${i.field}`, D = [];
+    const p = i, m = p.__editorTemplate, y = zt(this.grid, p) ?? Kt(i), E = d, P = `${t}:${i.field}`, D = [];
     this.#f.set(P, (b) => {
       for (const w of D) w(b);
     });
     const _ = (b) => {
       D.push(b);
     };
-    if (x === "template" && m)
+    if (y === "template" && m)
       this.#R(g, p, e, d, h, f, o, t), _((b) => {
         const w = g.querySelector(
           "input,textarea,select"
         );
         w && (w instanceof HTMLInputElement && w.type === "checkbox" ? w.checked = !!b : w.value = String(b ?? ""));
       });
-    else if (typeof x == "string") {
-      const b = document.createElement(x);
+    else if (typeof y == "string") {
+      const b = document.createElement(y);
       b.value = E, b.addEventListener("change", () => h(b.value)), _((w) => {
         b.value = w;
       }), g.appendChild(b), o || queueMicrotask(() => {
         g.querySelector(G)?.focus({ preventScroll: !0 });
       });
-    } else if (typeof x == "function") {
+    } else if (typeof y == "function") {
       const b = {
         row: e,
         rowId: s ?? "",
@@ -1397,7 +1397,7 @@ class Fn extends F {
         cancel: f,
         updateRow: l,
         onValueChange: _
-      }, w = x(b);
+      }, w = y(b);
       typeof w == "string" ? (g.innerHTML = w, Vt(g, i, h, d), _((I) => {
         const R = g.querySelector(
           "input,textarea,select"
@@ -1408,7 +1408,7 @@ class Fn extends F {
       }) : r.setAttribute("data-editor-managed", "")), o || queueMicrotask(() => {
         g.querySelector(G)?.focus({ preventScroll: !0 });
       });
-    } else if (x && typeof x == "object") {
+    } else if (y && typeof y == "object") {
       const b = document.createElement("div");
       b.setAttribute("data-external-editor", ""), b.setAttribute("data-field", i.field), g.appendChild(b), r.setAttribute("data-editor-managed", "");
       const w = {
@@ -1422,15 +1422,15 @@ class Fn extends F {
         updateRow: l,
         onValueChange: _
       };
-      if (x.mount)
+      if (y.mount)
         try {
-          x.mount({ placeholder: b, context: w, spec: x });
+          y.mount({ placeholder: b, context: w, spec: y });
         } catch (I) {
           console.warn(`[tbw-grid] External editor mount error for column '${i.field}':`, I);
         }
       else
         this.grid.dispatchEvent(
-          new CustomEvent("mount-external-editor", { detail: { placeholder: b, spec: x, context: w } })
+          new CustomEvent("mount-external-editor", { detail: { placeholder: b, spec: y, context: w } })
         );
     }
   }
@@ -2159,8 +2159,8 @@ class z extends F {
     }), e.appendChild(u);
     const m = document.createElement("div");
     m.className = "tbw-filter-values";
-    const x = document.createElement("div");
-    x.className = "tbw-filter-values-spacer", m.appendChild(x);
+    const y = document.createElement("div");
+    y.className = "tbw-filter-values-spacer", m.appendChild(y);
     const E = document.createElement("div");
     E.className = "tbw-filter-values-content", m.appendChild(E);
     const P = /* @__PURE__ */ new Map();
@@ -2176,11 +2176,11 @@ class z extends F {
       M.type = "checkbox", M.className = "tbw-filter-checkbox", M.checked = P.get(S) ?? !0, M.dataset.value = S, M.addEventListener("change", () => {
         P.set(S, M.checked), p();
       });
-      const y = document.createElement("span");
-      return y.textContent = L, k.appendChild(M), k.appendChild(y), k;
+      const x = document.createElement("span");
+      return x.textContent = L, k.appendChild(M), k.appendChild(x), k;
     }, b = () => {
       const v = D.length, C = m.clientHeight, L = m.scrollTop;
-      if (x.style.height = `${v * s}px`, xt(v, z.LIST_BYPASS_THRESHOLD / 3)) {
+      if (y.style.height = `${v * s}px`, xt(v, z.LIST_BYPASS_THRESHOLD / 3)) {
         E.innerHTML = "", E.style.transform = "translateY(0px)", D.forEach((k, M) => {
           E.appendChild(_(k, M));
         });
@@ -2202,7 +2202,7 @@ class z extends F {
         const k = l(S), M = C ? k : k.toLowerCase();
         return !v || M.includes(L);
       }), D.length === 0) {
-        x.style.height = "0px", E.innerHTML = "";
+        y.style.height = "0px", E.innerHTML = "";
         const S = document.createElement("div");
         S.className = "tbw-filter-no-match", S.textContent = "No matching values", E.appendChild(S);
         return;
@@ -2251,8 +2251,8 @@ class z extends F {
       }
       return B;
     }, d = i.filter((A) => typeof A == "number" && !isNaN(A)), c = d.length > 0 ? Math.min(...d) : 0, u = d.length > 0 ? Math.max(...d) : 100, h = l(o?.min ?? s?.min, c), f = l(o?.max ?? s?.max, u), g = o?.step ?? s?.step ?? 1, p = this.filters.get(n);
-    let m = h, x = f;
-    p?.operator === "between" ? (m = l(p.value, h), x = l(p.valueTo, f)) : p?.operator === "greaterThanOrEqual" ? m = l(p.value, h) : p?.operator === "lessThanOrEqual" && (x = l(p.value, f));
+    let m = h, y = f;
+    p?.operator === "between" ? (m = l(p.value, h), y = l(p.valueTo, f)) : p?.operator === "greaterThanOrEqual" ? m = l(p.value, h) : p?.operator === "lessThanOrEqual" && (y = l(p.value, f));
     const E = document.createElement("div");
     E.className = "tbw-filter-range-inputs";
     const P = document.createElement("div");
@@ -2268,7 +2268,7 @@ class z extends F {
     const I = document.createElement("label");
     I.textContent = "Max", I.className = "tbw-filter-range-label";
     const R = document.createElement("input");
-    R.type = "number", R.className = "tbw-filter-range-input", R.min = String(h), R.max = String(f), R.step = String(g), R.value = String(x), w.appendChild(I), w.appendChild(R), E.appendChild(w), e.appendChild(E);
+    R.type = "number", R.className = "tbw-filter-range-input", R.min = String(h), R.max = String(f), R.step = String(g), R.value = String(y), w.appendChild(I), w.appendChild(R), E.appendChild(w), e.appendChild(E);
     const T = document.createElement("div");
     T.className = "tbw-filter-range-slider";
     const N = document.createElement("div");
@@ -2278,7 +2278,7 @@ class z extends F {
     const C = document.createElement("input");
     C.type = "range", C.className = "tbw-filter-range-thumb tbw-filter-range-thumb-min", C.min = String(h), C.max = String(f), C.step = String(g), C.value = String(m);
     const L = document.createElement("input");
-    L.type = "range", L.className = "tbw-filter-range-thumb tbw-filter-range-thumb-max", L.min = String(h), L.max = String(f), L.step = String(g), L.value = String(x), T.appendChild(N), T.appendChild(v), T.appendChild(C), T.appendChild(L), e.appendChild(T);
+    L.type = "range", L.className = "tbw-filter-range-thumb tbw-filter-range-thumb-max", L.min = String(h), L.max = String(f), L.step = String(g), L.value = String(y), T.appendChild(N), T.appendChild(v), T.appendChild(C), T.appendChild(L), e.appendChild(T);
     const S = () => {
       const A = parseFloat(C.value), B = parseFloat(L.value), Q = f - h, Re = (A - h) / Q * 100, vt = (B - h) / Q * 100;
       v.style.left = `${Re}%`, v.style.width = `${vt - Re}%`;
@@ -2303,16 +2303,16 @@ class z extends F {
       const A = parseFloat(_.value), B = parseFloat(R.value);
       t.applyTextFilter("between", A, B);
     }), k.appendChild(M);
-    const y = document.createElement("button");
-    y.className = "tbw-filter-clear-btn", y.textContent = "Clear Filter", y.addEventListener("click", () => {
+    const x = document.createElement("button");
+    x.className = "tbw-filter-clear-btn", x.textContent = "Clear Filter", x.addEventListener("click", () => {
       t.clearFilter();
-    }), k.appendChild(y), e.appendChild(k);
+    }), k.appendChild(x), e.appendChild(k);
   }
   renderDateFilterPanel(e, t, i) {
-    const { field: n, column: r } = t, o = r.filterParams, s = r.editorParams, l = i.filter((y) => y instanceof Date || typeof y == "string" && !isNaN(Date.parse(y))).map((y) => y instanceof Date ? y : new Date(y)).filter((y) => !isNaN(y.getTime())), d = l.length > 0 ? new Date(Math.min(...l.map((y) => y.getTime()))) : null, c = l.length > 0 ? new Date(Math.max(...l.map((y) => y.getTime()))) : null, u = (y) => y ? y.toISOString().split("T")[0] : "", h = (y) => y ? typeof y == "string" ? y : typeof y == "number" ? u(new Date(y)) : "" : "", f = h(o?.min) || h(s?.min) || u(d), g = h(o?.max) || h(s?.max) || u(c), p = this.filters.get(n);
-    let m = "", x = "";
+    const { field: n, column: r } = t, o = r.filterParams, s = r.editorParams, l = i.filter((x) => x instanceof Date || typeof x == "string" && !isNaN(Date.parse(x))).map((x) => x instanceof Date ? x : new Date(x)).filter((x) => !isNaN(x.getTime())), d = l.length > 0 ? new Date(Math.min(...l.map((x) => x.getTime()))) : null, c = l.length > 0 ? new Date(Math.max(...l.map((x) => x.getTime()))) : null, u = (x) => x ? x.toISOString().split("T")[0] : "", h = (x) => x ? typeof x == "string" ? x : typeof x == "number" ? u(new Date(x)) : "" : "", f = h(o?.min) || h(s?.min) || u(d), g = h(o?.max) || h(s?.max) || u(c), p = this.filters.get(n);
+    let m = "", y = "";
     const E = p?.operator === "blank";
-    p?.operator === "between" ? (m = h(p.value) || "", x = h(p.valueTo) || "") : p?.operator === "greaterThanOrEqual" ? m = h(p.value) || "" : p?.operator === "lessThanOrEqual" && (x = h(p.value) || "");
+    p?.operator === "between" ? (m = h(p.value) || "", y = h(p.valueTo) || "") : p?.operator === "greaterThanOrEqual" ? m = h(p.value) || "" : p?.operator === "lessThanOrEqual" && (y = h(p.value) || "");
     const P = document.createElement("div");
     P.className = "tbw-filter-date-range";
     const D = document.createElement("div");
@@ -2328,15 +2328,15 @@ class z extends F {
     const R = document.createElement("label");
     R.textContent = "To", R.className = "tbw-filter-range-label";
     const T = document.createElement("input");
-    T.type = "date", T.className = "tbw-filter-date-input", f && (T.min = f), g && (T.max = g), T.value = x, I.appendChild(R), I.appendChild(T), P.appendChild(I), e.appendChild(P);
+    T.type = "date", T.className = "tbw-filter-date-input", f && (T.min = f), g && (T.max = g), T.value = y, I.appendChild(R), I.appendChild(T), P.appendChild(I), e.appendChild(P);
     const N = document.createElement("label");
     N.className = "tbw-filter-blank-option";
     const v = document.createElement("input");
     v.type = "checkbox", v.className = "tbw-filter-blank-checkbox", v.checked = E;
     const C = document.createTextNode("Show only blank");
     N.appendChild(v), N.appendChild(C);
-    const L = (y) => {
-      b.disabled = y, T.disabled = y, P.classList.toggle("tbw-filter-disabled", y);
+    const L = (x) => {
+      b.disabled = x, T.disabled = x, P.classList.toggle("tbw-filter-disabled", x);
     };
     L(E), v.addEventListener("change", () => {
       L(v.checked);
@@ -2349,8 +2349,8 @@ class z extends F {
         t.applyTextFilter("blank", "");
         return;
       }
-      const y = b.value, A = T.value;
-      y && A ? t.applyTextFilter("between", y, A) : y ? t.applyTextFilter("greaterThanOrEqual", y) : A ? t.applyTextFilter("lessThanOrEqual", A) : t.clearFilter();
+      const x = b.value, A = T.value;
+      x && A ? t.applyTextFilter("between", x, A) : x ? t.applyTextFilter("greaterThanOrEqual", x) : A ? t.applyTextFilter("lessThanOrEqual", A) : t.clearFilter();
     }), S.appendChild(k);
     const M = document.createElement("button");
     M.className = "tbw-filter-clear-btn", M.textContent = "Clear Filter", M.addEventListener("click", () => {
@@ -3214,7 +3214,14 @@ class ut extends F {
     }
     for (const [c, u] of this.detailElements) {
       const h = this.rows.indexOf(c), f = this.expandedRows.has(c), g = h >= 0 && d.has(h);
-      (!f || !g) && (u.parentNode && u.remove(), this.detailElements.delete(c));
+      if (!f || !g) {
+        const p = this.grid.__frameworkAdapter;
+        if (p?.unmount) {
+          const y = u.querySelector(".master-detail-cell")?.firstElementChild;
+          y && p.unmount(y);
+        }
+        u.parentNode && u.remove(), this.detailElements.delete(c);
+      }
     }
     for (const [c, u] of d) {
       const h = this.rows[c];
@@ -3956,8 +3963,8 @@ function pt(a, e, t, i, n, r, o) {
   const l = e[0], d = e.slice(1), c = d.length > 0, u = Ni(a, l);
   for (const [h, f] of u) {
     const g = o ? `${o}|${h}` : h, p = Qe(f, t, i, n), m = Ze(p);
-    let x;
-    c && (x = pt(
+    let y;
+    c && (y = pt(
       f,
       d,
       t,
@@ -3972,7 +3979,7 @@ function pt(a, e, t, i, n, r, o) {
       values: p,
       total: m,
       isGroup: c,
-      children: x,
+      children: y,
       rowCount: f.length
     });
   }
@@ -5595,7 +5602,8 @@ class Bn extends F {
     return {
       mode: "cell",
       triggerOn: "click",
-      enabled: !0
+      enabled: !0,
+      multiSelect: !0
     };
   }
   selected = /* @__PURE__ */ new Set();
@@ -5661,13 +5669,13 @@ class Bn extends F {
     if (r === "row") {
       if (!this.isRowSelectable(t))
         return !1;
-      const d = n.shiftKey, c = n.ctrlKey || n.metaKey, u = s?.meta?.checkboxColumn === !0;
-      if (d && this.anchor !== null) {
-        const h = Math.min(this.anchor, t), f = Math.max(this.anchor, t);
-        c || this.selected.clear();
-        for (let g = h; g <= f; g++)
-          this.isRowSelectable(g) && this.selected.add(g);
-      } else if (c || u)
+      const d = this.config.multiSelect !== !1, c = n.shiftKey && d, u = (n.ctrlKey || n.metaKey) && d, h = s?.meta?.checkboxColumn === !0;
+      if (c && this.anchor !== null) {
+        const f = Math.min(this.anchor, t), g = Math.max(this.anchor, t);
+        u || this.selected.clear();
+        for (let p = f; p <= g; p++)
+          this.isRowSelectable(p) && this.selected.add(p);
+      } else if (u || h && d)
         this.selected.has(t) ? this.selected.delete(t) : this.selected.add(t), this.anchor = t;
       else {
         if (this.selected.size === 1 && this.selected.has(t))
@@ -5679,7 +5687,7 @@ class Bn extends F {
     if (r === "range") {
       if (l || !this.isCellSelectable(t, i))
         return !1;
-      const d = n.shiftKey, c = n.ctrlKey || n.metaKey;
+      const d = n.shiftKey, c = (n.ctrlKey || n.metaKey) && this.config.multiSelect !== !1;
       if (d && this.cellAnchor) {
         const u = ge(this.cellAnchor, { row: t, col: i }), h = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null;
         if (h && ee(h, u))
@@ -5719,28 +5727,29 @@ class Bn extends F {
         this.isCellSelectable(r, o) ? this.selectedCell = { row: r, col: o } : this.selectedCell = null, this.emit("selection-change", this.#i()), this.requestAfterRender();
       }), !1;
     if (t === "row") {
+      const r = this.config.multiSelect !== !1;
       if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-        const r = e.shiftKey;
-        return r && this.anchor === null && (this.anchor = this.grid._focusRow), queueMicrotask(() => {
-          const o = this.grid._focusRow;
-          if (r && this.anchor !== null) {
+        const o = e.shiftKey && r;
+        return o && this.anchor === null && (this.anchor = this.grid._focusRow), queueMicrotask(() => {
+          const s = this.grid._focusRow;
+          if (o && this.anchor !== null) {
             this.selected.clear();
-            const s = Math.min(this.anchor, o), l = Math.max(this.anchor, o);
-            for (let d = s; d <= l; d++)
-              this.isRowSelectable(d) && this.selected.add(d);
+            const l = Math.min(this.anchor, s), d = Math.max(this.anchor, s);
+            for (let c = l; c <= d; c++)
+              this.isRowSelectable(c) && this.selected.add(c);
           } else
-            this.isRowSelectable(o) ? (this.selected.clear(), this.selected.add(o), this.anchor = o) : this.selected.clear();
-          this.lastSelected = o, this.explicitSelection = !0, this.emit("selection-change", this.#i()), this.requestAfterRender();
+            this.isRowSelectable(s) ? (this.selected.clear(), this.selected.add(s), this.anchor = s) : this.selected.clear();
+          this.lastSelected = s, this.explicitSelection = !0, this.emit("selection-change", this.#i()), this.requestAfterRender();
         }), !1;
       }
-      if (e.key === "a" && (e.ctrlKey || e.metaKey))
+      if (r && e.key === "a" && (e.ctrlKey || e.metaKey))
         return this.grid.query("isEditing").some(Boolean) ? !1 : (e.preventDefault(), e.stopPropagation(), this.selectAll(), !0);
     }
     if (t === "range" && n) {
       const r = e.key === "Tab", o = e.shiftKey && !r;
       return o && !this.cellAnchor && (this.cellAnchor = { row: this.grid._focusRow, col: this.grid._focusCol }), this.pendingKeyboardUpdate = { shiftKey: o }, queueMicrotask(() => this.requestAfterRender()), !1;
     }
-    return t === "range" && e.key === "a" && (e.ctrlKey || e.metaKey) ? this.grid.query("isEditing").some(Boolean) ? !1 : (e.preventDefault(), e.stopPropagation(), this.selectAll(), !0) : !1;
+    return t === "range" && this.config.multiSelect !== !1 && e.key === "a" && (e.ctrlKey || e.metaKey) ? this.grid.query("isEditing").some(Boolean) ? !1 : (e.preventDefault(), e.stopPropagation(), this.selectAll(), !0) : !1;
   }
   onCellMouseDown(e) {
     if (!this.isSelectionEnabled() || this.config.mode !== "range" || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
@@ -5748,7 +5757,7 @@ class Bn extends F {
     if (t && W(t) || !this.isCellSelectable(e.rowIndex, e.colIndex) || e.originalEvent.shiftKey && this.cellAnchor)
       return;
     this.isDragging = !0;
-    const i = e.rowIndex, n = e.colIndex, r = e.originalEvent.ctrlKey || e.originalEvent.metaKey, o = {
+    const i = e.rowIndex, n = e.colIndex, r = (e.originalEvent.ctrlKey || e.originalEvent.metaKey) && this.config.multiSelect !== !1, o = {
       startRow: i,
       startCol: n,
       endRow: i,
@@ -5795,7 +5804,7 @@ class Bn extends F {
       },
       headerRenderer: () => {
         const e = document.createElement("div");
-        e.className = "tbw-checkbox-header";
+        if (e.className = "tbw-checkbox-header", this.config.multiSelect === !1) return e;
         const t = document.createElement("input");
         return t.type = "checkbox", t.className = "tbw-select-all-checkbox", t.addEventListener("click", (i) => {
           i.stopPropagation(), i.target.checked ? this.selectAll() : this.clearSelection();
@@ -5920,32 +5929,34 @@ class Bn extends F {
     return cn(e, t, this.ranges);
   }
   selectAll() {
-    const { mode: e } = this.config;
-    if (e === "row") {
-      this.selected.clear();
-      for (let t = 0; t < this.rows.length; t++)
-        this.isRowSelectable(t) && this.selected.add(t);
-      this.explicitSelection = !0, this.emit("selection-change", this.#i()), this.requestAfterRender();
-    } else if (e === "range") {
-      const t = this.rows.length, i = this.columns.length;
-      if (t > 0 && i > 0) {
-        const n = {
-          startRow: 0,
-          startCol: 0,
-          endRow: t - 1,
-          endCol: i - 1
-        };
-        this.ranges = [n], this.activeRange = n, this.emit("selection-change", this.#i()), this.requestAfterRender();
+    const { mode: e, multiSelect: t } = this.config;
+    if (t !== !1) {
+      if (e === "row") {
+        this.selected.clear();
+        for (let i = 0; i < this.rows.length; i++)
+          this.isRowSelectable(i) && this.selected.add(i);
+        this.explicitSelection = !0, this.emit("selection-change", this.#i()), this.requestAfterRender();
+      } else if (e === "range") {
+        const i = this.rows.length, n = this.columns.length;
+        if (i > 0 && n > 0) {
+          const r = {
+            startRow: 0,
+            startCol: 0,
+            endRow: i - 1,
+            endCol: n - 1
+          };
+          this.ranges = [r], this.activeRange = r, this.emit("selection-change", this.#i()), this.requestAfterRender();
+        }
       }
     }
   }
   selectRows(e) {
-    if (this.config.mode === "row") {
-      this.selected.clear();
-      for (const t of e)
-        t >= 0 && t < this.rows.length && this.isRowSelectable(t) && this.selected.add(t);
-      this.anchor = e.length > 0 ? e[e.length - 1] : null, this.explicitSelection = !0, this.emit("selection-change", this.#i()), this.requestAfterRender();
-    }
+    if (this.config.mode !== "row") return;
+    const t = this.config.multiSelect === !1 && e.length > 1 ? [e[e.length - 1]] : e;
+    this.selected.clear();
+    for (const i of t)
+      i >= 0 && i < this.rows.length && this.isRowSelectable(i) && this.selected.add(i);
+    this.anchor = t.length > 0 ? t[t.length - 1] : null, this.explicitSelection = !0, this.emit("selection-change", this.#i()), this.requestAfterRender();
   }
   getSelectedRowIndices() {
     return [...this.selected].sort((e, t) => e - t);
@@ -6283,13 +6294,13 @@ class $n extends F {
           const E = document.createElement("span");
           E.className = "tree-spacer", m.appendChild(E);
         }
-      const x = document.createElement("span");
-      if (x.className = "tree-content", n) {
+      const y = document.createElement("span");
+      if (y.className = "tree-content", n) {
         const E = n(d);
-        E instanceof Node ? x.appendChild(E) : typeof E == "string" && (x.innerHTML = E);
+        E instanceof Node ? y.appendChild(E) : typeof E == "string" && (y.innerHTML = E);
       } else
-        x.textContent = u != null ? String(u) : "";
-      return m.appendChild(x), m;
+        y.textContent = u != null ? String(u) : "";
+      return m.appendChild(y), m;
     };
     return t[0] = { ...i, viewRenderer: l }, t;
   }