@toolbox-web/grid 1.1.2 → 1.3.0

package/lib/plugins/editing/EditingPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditingPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/editing/EditingPlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACtG,OAAO,KAAK,EACV,YAAY,EAIZ,kBAAkB,EACnB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,KAAK,EAA4C,aAAa,EAAkC,MAAM,SAAS,CAAC;AAMvH;;GAEG;AACH,eAAO,MAAM,yBAAyB,8GACiE,CAAC;AAwDxG;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,kBAAkB,GAAG,OAAO,CAElE;AAWD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAGjE;AA4DD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFG;AACH,qBAAa,aAAa,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,CAAC,aAAa,CAAC;;IAC3E;;;OAGG;IACH,gBAAyB,QAAQ,EAAE,cAAc,CAmB/C;IAEF,gBAAgB;IAChB,QAAQ,CAAC,IAAI,aAAa;IAC1B,gBAAgB;IAChB,SAAkB,MAAM,SAAU;IAElC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,aAAa,CAAC,CAI7D;IA0BD,gBAAgB;IACP,MAAM,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IA2DxC,gBAAgB;IACP,MAAM,IAAI,IAAI;IAavB;;;;;OAKG;IACM,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IA2B3D;;;OAGG;IACM,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IA0GxD;;;;OAIG;IACM,cAAc,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC,EAAE;IAsCtE;;;;;OAKG;IACM,WAAW,IAAI,IAAI;IAgC5B;;;OAGG;IACM,cAAc,IAAI,IAAI;IAQ/B;;;OAGG;IACH,IAAI,WAAW,IAAI,CAAC,EAAE,CAOrB;IAED;;OAEG;IACH,IAAI,aAAa,IAAI,MAAM,EAAE,CAE5B;IAED;;OAEG;IACH,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED;;OAEG;IACH,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED;;OAEG;IACH,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO;IAIvC;;OAEG;IACH,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO;IAI1D;;;OAGG;IACH,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO;IAYvC;;;OAGG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIxC;;;;OAIG;IACH,gBAAgB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI;IAexC;;;;;OAKG;IACH,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAepD;;;;;OAKG;IACH,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IA2CrC;;;OAGG;IACH,mBAAmB,IAAI,IAAI;IAM3B;;OAEG;IACH,mBAAmB,IAAI,IAAI;CA4c5B"}
+{"version":3,"file":"EditingPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/editing/EditingPlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACtG,OAAO,KAAK,EACV,YAAY,EAIZ,kBAAkB,EACnB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,KAAK,EAA4C,aAAa,EAAkC,MAAM,SAAS,CAAC;AAMvH;;GAEG;AACH,eAAO,MAAM,yBAAyB,8GACiE,CAAC;AAwDxG;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,kBAAkB,GAAG,OAAO,CAElE;AAWD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAGjE;AA4DD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFG;AACH,qBAAa,aAAa,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,CAAC,aAAa,CAAC;;IAC3E;;;OAGG;IACH,gBAAyB,QAAQ,EAAE,cAAc,CAmB/C;IAEF,gBAAgB;IAChB,QAAQ,CAAC,IAAI,aAAa;IAC1B,gBAAgB;IAChB,SAAkB,MAAM,SAAU;IAElC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,aAAa,CAAC,CAI7D;IA0BD,gBAAgB;IACP,MAAM,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IA2DxC,gBAAgB;IACP,MAAM,IAAI,IAAI;IAavB;;;;;OAKG;IACM,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IA2B3D;;;OAGG;IACM,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IA0GxD;;;;OAIG;IACM,cAAc,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC,EAAE;IAsCtE;;;;;OAKG;IACM,WAAW,IAAI,IAAI;IAgC5B;;;OAGG;IACM,cAAc,IAAI,IAAI;IAQ/B;;;OAGG;IACH,IAAI,WAAW,IAAI,CAAC,EAAE,CAOrB;IAED;;OAEG;IACH,IAAI,aAAa,IAAI,MAAM,EAAE,CAE5B;IAED;;OAEG;IACH,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED;;OAEG;IACH,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED;;OAEG;IACH,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO;IAIvC;;OAEG;IACH,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO;IAI1D;;;OAGG;IACH,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO;IAYvC;;;OAGG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIxC;;;;OAIG;IACH,gBAAgB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI;IAexC;;;;;OAKG;IACH,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAepD;;;;;OAKG;IACH,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IA2CrC;;;OAGG;IACH,mBAAmB,IAAI,IAAI;IAM3B;;OAEG;IACH,mBAAmB,IAAI,IAAI;CAqd5B"}

package/lib/plugins/editing/index.js

@@ -1,4 +1,33 @@
-const L = {
+const R = "data-animating", k = {
+  change: "--tbw-row-change-duration",
+  insert: "--tbw-row-insert-duration",
+  remove: "--tbw-row-remove-duration"
+}, A = {
+  change: 500,
+  insert: 300,
+  remove: 200
+};
+function P(s) {
+  const e = s.trim().toLowerCase();
+  return e.endsWith("ms") ? parseFloat(e) : e.endsWith("s") ? parseFloat(e) * 1e3 : parseFloat(e);
+}
+function T(s, e) {
+  const i = k[e], t = getComputedStyle(s).getPropertyValue(i);
+  if (t) {
+    const r = P(t);
+    if (!isNaN(r) && r > 0)
+      return r;
+  }
+  return A[e];
+}
+function I(s, e, i) {
+  s.removeAttribute(R), s.offsetWidth, s.setAttribute(R, e);
+  const t = T(s, e);
+  setTimeout(() => {
+    s.removeAttribute(R);
+  }, t);
+}
+const D = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -8,7 +37,7 @@ const L = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class k {
+class q {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -232,7 +261,7 @@ class k {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...L, ...e };
+    return { ...D, ...e };
   }
   // #region Animation Helpers
   /**
@@ -308,12 +337,12 @@ class k {
   }
   // #endregion
 }
-const P = "@layer tbw-plugins{tbw-grid{--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-row-bg: var(--tbw-editing-bg);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-editing-row-outline-color: var(--tbw-color-accent);--tbw-editing-row-outline-width: 1px}tbw-grid .data-grid-row:has(.editing){background:var(--tbw-editing-row-bg);outline:var(--tbw-editing-row-outline-width) solid var(--tbw-editing-row-outline-color);outline-offset:calc(-1 * var(--tbw-editing-row-outline-width))}tbw-grid .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex;min-height:calc(var(--tbw-row-height) + 2px);align-items:center;justify-content:center}tbw-grid .data-grid-row>.cell.editing input:not([type=checkbox]),tbw-grid .data-grid-row>.cell.editing select,tbw-grid .data-grid-row>.cell.editing textarea{width:100%;height:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}tbw-grid .tbw-editor-host{display:contents}}";
-function A(s) {
+const O = "@layer tbw-plugins{tbw-grid{--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-row-bg: var(--tbw-editing-bg);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-editing-row-outline-color: var(--tbw-color-accent);--tbw-editing-row-outline-width: 1px}tbw-grid .data-grid-row:has(.editing){background:var(--tbw-editing-row-bg);outline:var(--tbw-editing-row-outline-width) solid var(--tbw-editing-row-outline-color);outline-offset:calc(-1 * var(--tbw-editing-row-outline-width))}tbw-grid .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex;min-height:calc(var(--tbw-row-height) + 2px);align-items:center;justify-content:center}tbw-grid .data-grid-row>.cell.editing input:not([type=checkbox]),tbw-grid .data-grid-row>.cell.editing select,tbw-grid .data-grid-row>.cell.editing textarea{width:100%;height:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}tbw-grid .tbw-editor-host{display:contents}}";
+function N(s) {
   const e = s.options;
   return e ? typeof e == "function" ? e() : e : [];
 }
-function T(s) {
+function H(s) {
   return (e) => {
     const i = s.editorParams, t = document.createElement("input");
     t.type = "number", t.value = e.value != null ? String(e.value) : "", i?.min !== void 0 && (t.min = String(i.min)), i?.max !== void 0 && (t.max = String(i.max)), i?.step !== void 0 && (t.step = String(i.step)), i?.placeholder && (t.placeholder = i.placeholder);
@@ -323,13 +352,13 @@ function T(s) {
     }), t;
   };
 }
-function I() {
+function M() {
   return (s) => {
     const e = document.createElement("input");
     return e.type = "checkbox", e.checked = !!s.value, e.addEventListener("change", () => s.commit(e.checked)), e;
   };
 }
-function q(s) {
+function G(s) {
   return (e) => {
     const i = s.editorParams, t = document.createElement("input");
     return t.type = "date", e.value instanceof Date && (t.valueAsDate = e.value), i?.min && (t.min = i.min), i?.max && (t.max = i.max), i?.placeholder && (t.placeholder = i.placeholder), t.addEventListener("change", () => e.commit(t.valueAsDate)), t.addEventListener("keydown", (r) => {
@@ -337,14 +366,14 @@ function q(s) {
     }), t;
   };
 }
-function D(s) {
+function x(s) {
   return (e) => {
     const i = s.editorParams, t = document.createElement("select");
     if (s.multi && (t.multiple = !0), i?.includeEmpty) {
       const o = document.createElement("option");
       o.value = "", o.textContent = i.emptyLabel ?? "", t.appendChild(o);
     }
-    A(s).forEach((o) => {
+    N(s).forEach((o) => {
       const a = document.createElement("option");
       a.value = String(o.value), a.textContent = o.label, (s.multi && Array.isArray(e.value) && e.value.includes(o.value) || !s.multi && e.value === o.value) && (a.selected = !0), t.appendChild(a);
     });
@@ -360,7 +389,7 @@ function D(s) {
     }), t;
   };
 }
-function O(s) {
+function $(s) {
   return (e) => {
     const i = s.editorParams, t = document.createElement("input");
     return t.type = "text", t.value = e.value != null ? String(e.value) : "", i?.maxLength !== void 0 && (t.maxLength = i.maxLength), i?.pattern && (t.pattern = i.pattern), i?.placeholder && (t.placeholder = i.placeholder), t.addEventListener("blur", () => e.commit(t.value)), t.addEventListener("keydown", (r) => {
@@ -368,22 +397,22 @@ function O(s) {
     }), t;
   };
 }
-function N(s) {
+function F(s) {
   switch (s.type) {
     case "number":
-      return T(s);
+      return H(s);
     case "boolean":
-      return I();
+      return M();
     case "date":
-      return q(s);
+      return G(s);
     case "select":
-      return D(s);
+      return x(s);
     default:
-      return O(s);
+      return $(s);
   }
 }
-const R = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
-function H(s, e) {
+const _ = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
+function B(s, e) {
   if (e.editor) return e.editor;
   if (e.__editorTemplate) return "template";
   if (!e.type) return;
@@ -400,25 +429,25 @@ function H(s, e) {
 function E(s) {
   return !(typeof s != "string" || s === "__proto__" || s === "constructor" || s === "prototype");
 }
-function x(s) {
+function z(s) {
   const e = (s.__editingCellCount ?? 0) + 1;
   s.__editingCellCount = e, s.setAttribute("data-has-editing", "");
 }
-function G(s) {
+function U(s) {
   s.__editingCellCount = 0, s.removeAttribute("data-has-editing");
 }
 function v(s, e) {
   return s instanceof HTMLInputElement ? s.type === "checkbox" ? s.checked : s.type === "number" ? s.value === "" ? null : Number(s.value) : s.type === "date" ? s.valueAsDate : s.value : e?.type === "number" && s.value !== "" ? Number(s.value) : s.value;
 }
-function S(s) {
+function L(s) {
 }
-function M(s, e, i) {
+function j(s, e, i) {
   const t = s.querySelector("input,textarea,select");
   t && (t.addEventListener("blur", () => {
     i(v(t, e));
   }), t instanceof HTMLInputElement && t.type === "checkbox" ? t.addEventListener("change", () => i(t.checked)) : t instanceof HTMLSelectElement && t.addEventListener("change", () => i(v(t, e))));
 }
-class $ extends k {
+class V extends q {
   /**
    * Plugin manifest - declares owned properties for configuration validation.
    * @internal
@@ -446,7 +475,7 @@ class $ extends k {
   /** @internal */
   name = "editing";
   /** @internal */
-  styles = P;
+  styles = O;
   /** @internal */
   get defaultConfig() {
     return {
@@ -725,7 +754,7 @@ class $ extends k {
     }), setTimeout(() => {
       let a = n.querySelector(`.cell[data-col="${i._focusCol}"]`);
       if (a?.classList.contains("editing") || (a = n.querySelector(".cell.editing")), a?.classList.contains("editing")) {
-        const l = a.querySelector(R);
+        const l = a.querySelector(_);
         try {
           l?.focus({ preventScroll: !0 });
         } catch {
@@ -803,13 +832,13 @@ class $ extends k {
         changed: l,
         changedRows: this.changedRows,
         changedRowIds: this.changedRowIds
-      });
+      }), l && this.isAnimationEnabled && t.animateRow?.(e, "change");
     }
     this.#r.delete(e), this.#e = -1, this.#s = -1, this.#a();
     for (const l of this.#n)
       l.startsWith(`${e}:`) && this.#n.delete(l);
     o && (o.querySelectorAll(".cell.editing").forEach((l) => {
-      l.classList.remove("editing"), G(l.parentElement);
+      l.classList.remove("editing"), U(l.parentElement);
     }), this.requestRender()), this.#o = !0, o || (this.#u(t), this.#o = !1);
   }
   /**
@@ -827,7 +856,7 @@ class $ extends k {
       l = this.grid.getRowId(r);
     } catch {
     }
-    const c = l ? !this.#t.has(l) : !0, f = l ? (h) => this.grid.updateRow(l, h, "cascade") : S;
+    const c = l ? !this.#t.has(l) : !0, f = l ? (h) => this.grid.updateRow(l, h, "cascade") : L;
     if (this.emitCancelable("cell-commit", {
       row: r,
       rowId: l ?? "",
@@ -842,7 +871,7 @@ class $ extends k {
     })) return;
     r[n] = t, l && this.#t.add(l), this.#a();
     const d = a.findRenderedRowElement?.(e);
-    d && d.classList.add("changed");
+    d && (d.classList.add("changed"), I(d, "change"));
   }
   /**
    * Inject an editor into a cell.
@@ -854,10 +883,10 @@ class $ extends k {
       a = this.grid.getRowId(e);
     } catch {
     }
-    const l = a ? (u) => this.grid.updateRow(a, u, "cascade") : S, c = E(t.field) ? e[t.field] : void 0;
+    const l = a ? (u) => this.grid.updateRow(a, u, "cascade") : L, c = E(t.field) ? e[t.field] : void 0;
     n.classList.add("editing"), this.#n.add(`${i}:${r}`);
     const f = n.parentElement;
-    f && x(f);
+    f && z(f);
     let g = !1;
     const d = (u) => {
       g || this.#e === -1 || this.#l(i, t, u, e);
@@ -867,13 +896,13 @@ class $ extends k {
     p.className = "tbw-editor-host", n.innerHTML = "", n.appendChild(p), p.addEventListener("keydown", (u) => {
       u.key === "Enter" && (u.stopPropagation(), u.preventDefault(), g = !0, this.#i(i, !1)), u.key === "Escape" && (u.stopPropagation(), u.preventDefault(), h(), this.#i(i, !0));
     });
-    const m = t, y = m.__editorTemplate, b = H(this.grid, m) ?? N(t), C = c;
+    const m = t, y = m.__editorTemplate, b = B(this.grid, m) ?? F(t), C = c;
     if (b === "template" && y)
       this.#h(p, m, e, c, d, h, o, i);
     else if (typeof b == "string") {
       const u = document.createElement(b);
       u.value = C, u.addEventListener("change", () => d(u.value)), p.appendChild(u), o || queueMicrotask(() => {
-        p.querySelector(R)?.focus({ preventScroll: !0 });
+        p.querySelector(_)?.focus({ preventScroll: !0 });
       });
     } else if (typeof b == "function") {
       const u = {
@@ -886,8 +915,8 @@ class $ extends k {
         cancel: h,
         updateRow: l
       }, w = b(u);
-      typeof w == "string" ? (p.innerHTML = w, M(p, t, d)) : w instanceof Node && p.appendChild(w), o || queueMicrotask(() => {
-        p.querySelector(R)?.focus({ preventScroll: !0 });
+      typeof w == "string" ? (p.innerHTML = w, j(p, t, d)) : w instanceof Node && p.appendChild(w), o || queueMicrotask(() => {
+        p.querySelector(_)?.focus({ preventScroll: !0 });
       });
     } else if (b && typeof b == "object") {
       const u = document.createElement("div");
@@ -905,8 +934,8 @@ class $ extends k {
       if (b.mount)
         try {
           b.mount({ placeholder: u, context: w, spec: b });
-        } catch (_) {
-          console.warn(`[tbw-grid] External editor mount error for column '${t.field}':`, _);
+        } catch (S) {
+          console.warn(`[tbw-grid] External editor mount error for column '${t.field}':`, S);
         }
       else
         this.grid.dispatchEvent(
@@ -971,7 +1000,7 @@ class $ extends k {
   // #endregion
 }
 export {
-  $ as EditingPlugin,
-  N as defaultEditorFor
+  V as EditingPlugin,
+  F as defaultEditorFor
 };
 //# sourceMappingURL=index.js.map