@toolbox-web/grid-angular 0.4.0 → 0.5.0

package/index.js

@@ -1,31 +1,32 @@
-var Oe = Object.create;
-var O = Object.defineProperty;
-var Ne = Object.getOwnPropertyDescriptor;
-var ie = (n, e) => (e = Symbol[n]) ? e : /* @__PURE__ */ Symbol.for("Symbol." + n), D = (n) => {
+var qe = Object.create;
+var j = Object.defineProperty;
+var $e = Object.getOwnPropertyDescriptor;
+var ue = (n, e) => (e = Symbol[n]) ? e : /* @__PURE__ */ Symbol.for("Symbol." + n), I = (n) => {
   throw TypeError(n);
 };
-var Me = (n, e, t) => e in n ? O(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var te = (n, e) => O(n, "name", { value: e, configurable: !0 });
-var h = (n) => [, , , Oe(n?.[ie("metadata")] ?? null)], se = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], A = (n) => n !== void 0 && typeof n != "function" ? D("Function expected") : n, Ve = (n, e, t, r, i) => ({ kind: se[n], name: e, metadata: r, addInitializer: (s) => t._ ? D("Already initialized") : i.push(A(s || null)) }), _e = (n, e) => Me(e, ie("metadata"), n[3]), g = (n, e, t, r) => {
-  for (var i = 0, s = n[e >> 1], o = s && s.length; i < o; i++) e & 1 ? s[i].call(t) : r = s[i].call(t, r);
-  return r;
-}, v = (n, e, t, r, i, s) => {
-  var o, l, w, u, d, a = e & 7, T = !!(e & 8), f = !!(e & 16), S = a > 3 ? n.length + 1 : a ? T ? 1 : 2 : 0, Z = se[a + 5], ee = a > 3 && (n[S - 1] = []), je = n[S] || (n[S] = []), p = a && (!f && !T && (i = i.prototype), a < 5 && (a > 3 || !f) && Ne(a < 4 ? i : { get [t]() {
-    return ne(this, s);
-  }, set [t](m) {
-    return re(this, s, m);
+var Ue = (n, e, t) => e in n ? j(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var ce = (n, e) => j(n, "name", { value: e, configurable: !0 });
+var h = (n) => [, , , qe(n?.[ue("metadata")] ?? null)], de = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], O = (n) => n !== void 0 && typeof n != "function" ? I("Function expected") : n, We = (n, e, t, i, r) => ({ kind: de[n], name: e, metadata: i, addInitializer: (o) => t._ ? I("Already initialized") : r.push(O(o || null)) }), He = (n, e) => Ue(e, ue("metadata"), n[3]), g = (n, e, t, i) => {
+  for (var r = 0, o = n[e >> 1], s = o && o.length; r < s; r++) e & 1 ? o[r].call(t) : i = o[r].call(t, i);
+  return i;
+}, v = (n, e, t, i, r, o) => {
+  var s, l, m, d, T, c = e & 7, C = !!(e & 8), a = !!(e & 16), b = c > 3 ? n.length + 1 : c ? C ? 1 : 2 : 0, D = de[c + 5], le = c > 3 && (n[b - 1] = []), Ge = n[b] || (n[b] = []), w = c && (!a && !C && (r = r.prototype), c < 5 && (c > 3 || !a) && $e(c < 4 ? r : { get [t]() {
+    return ae(this, o);
+  }, set [t](p) {
+    return me(this, o, p);
   } }, t));
-  a ? f && a < 4 && te(s, (a > 2 ? "set " : a > 1 ? "get " : "") + t) : te(i, t);
-  for (var I = r.length - 1; I >= 0; I--)
-    u = Ve(a, t, w = {}, n[3], je), a && (u.static = T, u.private = f, d = u.access = { has: f ? (m) => xe(i, m) : (m) => t in m }, a ^ 3 && (d.get = f ? (m) => (a ^ 1 ? ne : qe)(m, i, a ^ 4 ? s : p.get) : (m) => m[t]), a > 2 && (d.set = f ? (m, j) => re(m, i, j, a ^ 4 ? s : p.set) : (m, j) => m[t] = j)), l = (0, r[I])(a ? a < 4 ? f ? s : p[Z] : a > 4 ? void 0 : { get: p.get, set: p.set } : i, u), w._ = 1, a ^ 4 || l === void 0 ? A(l) && (a > 4 ? ee.unshift(l) : a ? f ? s = l : p[Z] = l : i = l) : typeof l != "object" || l === null ? D("Object expected") : (A(o = l.get) && (p.get = o), A(o = l.set) && (p.set = o), A(o = l.init) && ee.unshift(o));
-  return a || _e(n, i), p && O(i, t, p), f ? a ^ 4 ? s : p : i;
+  c ? a && c < 4 && ce(o, (c > 2 ? "set " : c > 1 ? "get " : "") + t) : ce(r, t);
+  for (var P = i.length - 1; P >= 0; P--)
+    d = We(c, t, m = {}, n[3], Ge), c && (d.static = C, d.private = a, T = d.access = { has: a ? (p) => Ye(r, p) : (p) => t in p }, c ^ 3 && (T.get = a ? (p) => (c ^ 1 ? ae : Xe)(p, r, c ^ 4 ? o : w.get) : (p) => p[t]), c > 2 && (T.set = a ? (p, F) => me(p, r, F, c ^ 4 ? o : w.set) : (p, F) => p[t] = F)), l = (0, i[P])(c ? c < 4 ? a ? o : w[D] : c > 4 ? void 0 : { get: w.get, set: w.set } : r, d), m._ = 1, c ^ 4 || l === void 0 ? O(l) && (c > 4 ? le.unshift(l) : c ? a ? o = l : w[D] = l : r = l) : typeof l != "object" || l === null ? I("Object expected") : (O(s = l.get) && (w.get = s), O(s = l.set) && (w.set = s), O(s = l.init) && le.unshift(s));
+  return c || He(n, r), w && j(r, t, w), a ? c ^ 4 ? o : w : r;
 };
-var N = (n, e, t) => e.has(n) || D("Cannot " + t), xe = (n, e) => Object(e) !== e ? D('Cannot use the "in" operator on this value') : n.has(e), ne = (n, e, t) => (N(n, e, "read from private field"), t ? t.call(n) : e.get(n));
-var re = (n, e, t, r) => (N(n, e, "write to private field"), r ? r.call(n, t) : e.set(n, t), t), qe = (n, e, t) => (N(n, e, "access private method"), t);
-import { inject as c, ElementRef as C, contentChild as L, TemplateRef as b, effect as E, Directive as y, input as R, InjectionToken as ke, Injectable as $e, makeEnvironmentProviders as Ge, EventEmitter as oe, createComponent as ae, EnvironmentInjector as Ue, ApplicationRef as We, ViewContainerRef as Fe, output as le } from "@angular/core";
-import { DataGridElement as He } from "@toolbox-web/grid";
-import { MasterDetailPlugin as ce, ResponsivePlugin as Be } from "@toolbox-web/grid/all";
-function me(n) {
+var k = (n, e, t) => e.has(n) || I("Cannot " + t), Ye = (n, e) => Object(e) !== e ? I('Cannot use the "in" operator on this value') : n.has(e), ae = (n, e, t) => (k(n, e, "read from private field"), t ? t.call(n) : e.get(n));
+var me = (n, e, t, i) => (k(n, e, "write to private field"), i ? i.call(n, t) : e.set(n, t), t), Xe = (n, e, t) => (k(n, e, "access private method"), t);
+import { inject as u, ElementRef as R, contentChild as x, TemplateRef as L, effect as y, Directive as E, input as f, InjectionToken as ze, Injectable as Be, makeEnvironmentProviders as Je, EventEmitter as fe, createComponent as pe, output as S, computed as A, EnvironmentInjector as Ke, ApplicationRef as Qe, ViewContainerRef as Ze } from "@angular/core";
+import { FormGroup as he } from "@angular/forms";
+import { DataGridElement as et } from "@toolbox-web/grid";
+import { MasterDetailPlugin as ge, ResponsivePlugin as tt } from "@toolbox-web/grid/all";
+function ve(n) {
   if (typeof n != "function" || n.prototype === void 0)
     return !1;
   if (Object.prototype.hasOwnProperty.call(n, "ɵcmp") || Object.prototype.hasOwnProperty.call(n, "ɵfac"))
@@ -33,22 +34,22 @@ function me(n) {
   const e = Function.prototype.toString.call(n);
   return e.startsWith("class ") || e.startsWith("class{");
 }
-const be = /* @__PURE__ */ new Map();
-function Te(n) {
-  return be.get(n);
+const Se = /* @__PURE__ */ new Map();
+function Pe(n) {
+  return Se.get(n);
 }
-var fe, U;
-fe = [y({ selector: "tbw-grid-column-editor" })];
-class M {
-  elementRef = c(C);
+var Ce, X;
+Ce = [E({ selector: "tbw-grid-column-editor" })];
+class V {
+  elementRef = u(R);
   /**
    * Query for the ng-template content child.
    */
-  template = L(b);
+  template = x(L);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = E(() => {
+  onTemplateReceived = y(() => {
     const e = this.template();
-    e && be.set(this.elementRef.nativeElement, e);
+    e && Se.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -58,23 +59,23 @@ class M {
     return !0;
   }
 }
-U = h(null), M = v(U, 0, "GridColumnEditor", fe, M), g(U, 1, M);
-const Ae = /* @__PURE__ */ new Map();
-function De(n) {
-  return Ae.get(n);
+X = h(null), V = v(X, 0, "GridColumnEditor", Ce, V), g(X, 1, V);
+const Fe = /* @__PURE__ */ new Map();
+function je(n) {
+  return Fe.get(n);
 }
-var he, W;
-he = [y({ selector: "tbw-grid-column-view" })];
-class V {
-  elementRef = c(C);
+var ye, z;
+ye = [E({ selector: "tbw-grid-column-view" })];
+class N {
+  elementRef = u(R);
   /**
    * Query for the ng-template content child.
    */
-  template = L(b);
+  template = x(L);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = E(() => {
+  onTemplateReceived = y(() => {
     const e = this.template();
-    e && Ae.set(this.elementRef.nativeElement, e);
+    e && Fe.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -84,29 +85,29 @@ class V {
     return !0;
   }
 }
-W = h(null), V = v(W, 0, "GridColumnView", he, V), g(W, 1, V);
-const Le = /* @__PURE__ */ new Map();
-function ue(n) {
+z = h(null), N = v(z, 0, "GridColumnView", ye, N), g(z, 1, N);
+const ke = /* @__PURE__ */ new Map();
+function we(n) {
   const e = n.querySelector("tbw-grid-detail");
   if (e)
-    return Le.get(e);
+    return ke.get(e);
 }
-var ge, F;
-ge = [y({ selector: "tbw-grid-detail" })];
+var be, B;
+be = [E({ selector: "tbw-grid-detail" })];
 class _ {
-  elementRef = c(C);
+  elementRef = u(R);
   /** Whether to show the expand/collapse column. Default: true */
-  showExpandColumn = R(!0);
+  showExpandColumn = f(!0);
   /** Animation style for expand/collapse. Default: 'slide' */
-  animation = R("slide");
+  animation = f("slide");
   /**
    * Query for the ng-template content child.
    */
-  template = L(b);
+  template = x(L);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = E(() => {
+  onTemplateReceived = y(() => {
     const e = this.template();
-    e && Le.set(this.elementRef.nativeElement, e);
+    e && ke.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -116,29 +117,146 @@ class _ {
     return !0;
   }
 }
-F = h(null), _ = v(F, 0, "GridDetailView", ge, _), g(F, 1, _);
-const Pe = /* @__PURE__ */ new Map();
-function Ye(n) {
+B = h(null), _ = v(B, 0, "GridDetailView", be, _), g(B, 1, _);
+const ie = /* @__PURE__ */ Symbol("formArrayContext");
+function rt(n) {
+  return n[ie];
+}
+var Te, J;
+Te = [E({
+  selector: "tbw-grid[formArray]"
+})];
+class G {
+  elementRef = u(R);
+  cellCommitListener = null;
+  touchListener = null;
+  /**
+   * The FormArray to bind to the grid.
+   */
+  formArray = f.required();
+  /**
+   * Effect that syncs the FormArray value to the grid rows.
+   */
+  syncFormArrayToGrid = y(() => {
+    const e = this.formArray(), t = this.elementRef.nativeElement;
+    t && e && (t.rows = e.getRawValue());
+  });
+  ngOnInit() {
+    const e = this.elementRef.nativeElement;
+    e && (this.#r(e), this.cellCommitListener = (t) => {
+      const i = t.detail;
+      this.#i(i);
+    }, e.addEventListener("cell-commit", this.cellCommitListener), this.touchListener = () => {
+      this.formArray().markAsTouched(), this.touchListener && (e.removeEventListener("click", this.touchListener), this.touchListener = null);
+    }, e.addEventListener("click", this.touchListener));
+  }
+  ngOnDestroy() {
+    const e = this.elementRef.nativeElement;
+    e && (this.cellCommitListener && e.removeEventListener("cell-commit", this.cellCommitListener), this.touchListener && e.removeEventListener("click", this.touchListener), this.#n(e));
+  }
+  /**
+   * Checks if the FormArray contains FormGroups.
+   */
+  #t() {
+    const e = this.formArray();
+    return e.length === 0 ? !1 : e.at(0) instanceof he;
+  }
+  /**
+   * Gets the FormGroup at a specific row index.
+   */
+  #e(e) {
+    const i = this.formArray().at(e);
+    return i instanceof he ? i : void 0;
+  }
+  /**
+   * Stores the FormArrayContext on the grid element.
+   */
+  #r(e) {
+    const t = (r) => this.#e(r), i = {
+      getRow: (r) => {
+        const s = this.formArray().at(r);
+        return s ? s.value : null;
+      },
+      updateField: (r, o, s) => {
+        const l = t(r);
+        if (l) {
+          const m = l.get(o);
+          m && (m.setValue(s), m.markAsDirty());
+        }
+      },
+      getValue: () => this.formArray().getRawValue(),
+      hasFormGroups: this.#t(),
+      getControl: (r, o) => {
+        const s = t(r);
+        if (s)
+          return s.get(o) ?? void 0;
+      },
+      getRowFormGroup: t,
+      isRowValid: (r) => {
+        const o = t(r);
+        return o ? o.valid : !0;
+      },
+      isRowTouched: (r) => {
+        const o = t(r);
+        return o ? o.touched : !1;
+      },
+      isRowDirty: (r) => {
+        const o = t(r);
+        return o ? o.dirty : !1;
+      },
+      getRowErrors: (r) => {
+        const o = t(r);
+        if (!o) return null;
+        const s = {};
+        let l = !1;
+        return Object.keys(o.controls).forEach((m) => {
+          const d = o.get(m);
+          d?.errors && (s[m] = d.errors, l = !0);
+        }), o.errors && (s._group = o.errors, l = !0), l ? s : null;
+      }
+    };
+    e[ie] = i;
+  }
+  /**
+   * Clears the FormArrayContext from the grid element.
+   */
+  #n(e) {
+    delete e[ie];
+  }
+  /**
+   * Handles cell-commit events by updating the FormControl in the FormGroup.
+   */
+  #i(e) {
+    const { rowIndex: t, field: i, value: r } = e, o = this.#e(t);
+    if (o) {
+      const s = o.get(i);
+      s && (s.setValue(r), s.markAsDirty(), s.markAsTouched());
+    }
+  }
+}
+J = h(null), G = v(J, 0, "GridFormArray", Te, G), g(J, 1, G);
+const Ve = /* @__PURE__ */ new Map();
+function nt(n) {
   const e = n.querySelector("tbw-grid-responsive-card");
   if (e)
-    return Pe.get(e);
+    return Ve.get(e);
 }
-var ve, H;
-ve = [y({
+var Ae, K;
+Ae = [E({
   selector: "tbw-grid-responsive-card"
 })];
-class x {
-  elementRef = c(C);
+class q {
+  elementRef = u(R);
   /**
    * The ng-template containing the card content.
    */
-  template = L(b);
+  template = x(L);
   /**
    * Effect that registers the template when it becomes available.
    */
-  onTemplateReceived = E(() => {
+  onTemplateReceived = y(() => {
     const e = this.template();
-    e && Pe.set(
+    e && Ve.set(
       this.elementRef.nativeElement,
       e
     );
@@ -150,38 +268,38 @@ class x {
     return !0;
   }
 }
-H = h(null), x = v(H, 0, "GridResponsiveCard", ve, x), g(H, 1, x);
-const Se = /* @__PURE__ */ new Map();
-function ze(n) {
-  return Se.get(n);
+K = h(null), q = v(K, 0, "GridResponsiveCard", Ae, q), g(K, 1, q);
+const Ne = /* @__PURE__ */ new Map();
+function it(n) {
+  return Ne.get(n);
 }
-var Re, B;
-Re = [y({ selector: "tbw-grid-tool-panel" })];
-class q {
-  elementRef = c(C);
+var Le, Q;
+Le = [E({ selector: "tbw-grid-tool-panel" })];
+class $ {
+  elementRef = u(R);
   /** Unique panel identifier (required) */
-  id = R.required({ alias: "id" });
+  id = f.required({ alias: "id" });
   /** Panel title shown in accordion header (required) */
-  title = R.required({ alias: "title" });
+  title = f.required({ alias: "title" });
   /** Icon for accordion section header (emoji or text) */
-  icon = R();
+  icon = f();
   /** Tooltip for accordion section header */
-  tooltip = R();
+  tooltip = f();
   /** Panel order priority (lower = first, default: 100) */
-  order = R(100);
+  order = f(100);
   /**
    * Query for the ng-template content child.
    */
-  template = L(b);
+  template = x(L);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = E(() => {
+  onTemplateReceived = y(() => {
     const e = this.template(), t = this.elementRef.nativeElement;
     if (e) {
       t.setAttribute("id", this.id()), t.setAttribute("title", this.title());
-      const r = this.icon();
-      r && t.setAttribute("icon", r);
-      const i = this.tooltip();
-      i && t.setAttribute("tooltip", i), t.setAttribute("order", String(this.order())), Se.set(t, e);
+      const i = this.icon();
+      i && t.setAttribute("icon", i);
+      const r = this.tooltip();
+      r && t.setAttribute("tooltip", r), t.setAttribute("order", String(this.order())), Ne.set(t, e);
     }
   });
   /**
@@ -192,30 +310,30 @@ class q {
     return !0;
   }
 }
-B = h(null), q = v(B, 0, "GridToolPanel", Re, q), g(B, 1, q);
-const Q = /* @__PURE__ */ new Map(), X = /* @__PURE__ */ new Map();
-function Je(n) {
-  const e = Q.get(n);
+Q = h(null), $ = v(Q, 0, "GridToolPanel", Le, $), g(Q, 1, $);
+const oe = /* @__PURE__ */ new Map(), se = /* @__PURE__ */ new Map();
+function ot(n) {
+  const e = oe.get(n);
   if (e) return e;
   const t = n.querySelector("tbw-grid-column-view");
   if (t)
-    return De(t);
+    return je(t);
 }
-function Ke(n) {
-  const e = X.get(n);
+function st(n) {
+  const e = se.get(n);
   if (e) return e;
   const t = n.querySelector("tbw-grid-column-editor");
   if (t)
-    return Te(t);
+    return Pe(t);
 }
-var we, Y;
-we = [y({ selector: "[tbwRenderer]" })];
-class k {
-  template = c(b);
-  elementRef = c(C);
+var De, Z;
+De = [E({ selector: "[tbwRenderer]" })];
+class U {
+  template = u(L);
+  elementRef = u(R);
   columnElement = null;
   constructor() {
-    E(() => {
+    y(() => {
       this.registerTemplate();
     });
   }
@@ -223,10 +341,10 @@ class k {
     let e = this.elementRef.nativeElement?.parentElement;
     for (; e && e.tagName !== "TBW-GRID-COLUMN"; )
       e = e.parentElement;
-    e && (this.columnElement = e, Q.set(e, this.template));
+    e && (this.columnElement = e, oe.set(e, this.template));
   }
   ngOnDestroy() {
-    this.columnElement && Q.delete(this.columnElement);
+    this.columnElement && oe.delete(this.columnElement);
   }
   /**
    * Static type guard for template context.
@@ -236,15 +354,15 @@ class k {
     return !0;
   }
 }
-Y = h(null), k = v(Y, 0, "TbwRenderer", we, k), g(Y, 1, k);
-var Ce, z;
-Ce = [y({ selector: "[tbwEditor]" })];
-class $ {
-  template = c(b);
-  elementRef = c(C);
+Z = h(null), U = v(Z, 0, "TbwRenderer", De, U), g(Z, 1, U);
+var Oe, ee;
+Oe = [E({ selector: "[tbwEditor]" })];
+class W {
+  template = u(L);
+  elementRef = u(R);
   columnElement = null;
   constructor() {
-    E(() => {
+    y(() => {
       this.registerTemplate();
     });
   }
@@ -252,10 +370,10 @@ class $ {
     let e = this.elementRef.nativeElement?.parentElement;
     for (; e && e.tagName !== "TBW-GRID-COLUMN"; )
       e = e.parentElement;
-    e && (this.columnElement = e, X.set(e, this.template));
+    e && (this.columnElement = e, se.set(e, this.template));
   }
   ngOnDestroy() {
-    this.columnElement && X.delete(this.columnElement);
+    this.columnElement && se.delete(this.columnElement);
   }
   /**
    * Static type guard for template context.
@@ -265,17 +383,17 @@ class $ {
     return !0;
   }
 }
-z = h(null), $ = v(z, 0, "TbwEditor", Ce, $), g(z, 1, $);
-const Ie = new ke("GRID_TYPE_DEFAULTS");
-var Ee, J;
-Ee = [$e({ providedIn: "root" })];
-class P {
+ee = h(null), W = v(ee, 0, "TbwEditor", Oe, W), g(ee, 1, W);
+const _e = new ze("GRID_TYPE_DEFAULTS");
+var Ie, te;
+Ie = [Be({ providedIn: "root" })];
+class M {
   defaults = /* @__PURE__ */ new Map();
   constructor() {
-    const e = c(Ie, { optional: !0 });
+    const e = u(_e, { optional: !0 });
     if (e)
-      for (const [t, r] of Object.entries(e))
-        this.defaults.set(t, r);
+      for (const [t, i] of Object.entries(e))
+        this.defaults.set(t, i);
   }
   /**
    * Register type-level defaults for a custom type.
@@ -326,23 +444,23 @@ class P {
       };
   }
 }
-J = h(null), P = v(J, 0, "GridTypeRegistry", Ee, P), g(J, 1, P);
-function nt(n) {
-  return Ge([{ provide: Ie, useValue: n }]);
+te = h(null), M = v(te, 0, "GridTypeRegistry", Ie, M), g(te, 1, M);
+function ft(n) {
+  return Je([{ provide: _e, useValue: n }]);
 }
-function de(n) {
-  const e = Je(n);
-  return e || De(n);
+function Re(n) {
+  const e = ot(n);
+  return e || je(n);
 }
-function pe(n) {
-  const e = Ke(n);
-  return e || Te(n);
+function Ee(n) {
+  const e = st(n);
+  return e || Pe(n);
 }
-class Qe {
-  constructor(e, t, r) {
-    this.injector = e, this.appRef = t, this.viewContainerRef = r, window.__ANGULAR_GRID_ADAPTER__ = this;
+class lt {
+  constructor(e, t, i) {
+    this.injector = e, this.appRef = t, this.viewContainerRef = i, window.__ANGULAR_GRID_ADAPTER__ = this;
     try {
-      this.typeRegistry = this.injector.get(P, null);
+      this.typeRegistry = this.injector.get(M, null);
     } catch {
     }
   }
@@ -378,7 +496,7 @@ class Qe {
   processGridConfig(e) {
     if (!e.columns)
       return e;
-    const t = e.columns.map((r) => this.processColumn(r));
+    const t = e.columns.map((i) => this.processColumn(i));
     return {
       ...e,
       columns: t
@@ -393,14 +511,14 @@ class Qe {
    */
   processColumn(e) {
     const t = { ...e };
-    return e.renderer && me(e.renderer) && (t.renderer = this.createComponentRenderer(e.renderer)), e.editor && me(e.editor) && (t.editor = this.createComponentEditor(e.editor)), t;
+    return e.renderer && ve(e.renderer) && (t.renderer = this.createComponentRenderer(e.renderer)), e.editor && ve(e.editor) && (t.editor = this.createComponentEditor(e.editor)), t;
   }
   /**
    * Determines if this adapter can handle the given element.
    * Checks if a template is registered for this element (structural or nested).
    */
   canHandle(e) {
-    return de(e) !== void 0 || pe(e) !== void 0;
+    return Re(e) !== void 0 || Ee(e) !== void 0;
   }
   /**
    * Creates a view renderer function that creates an embedded view
@@ -410,16 +528,16 @@ class Qe {
    * allowing the grid to use its default rendering.
    */
   createRenderer(e) {
-    const t = de(e);
+    const t = Re(e);
     if (t)
-      return (r) => {
-        const i = {
-          $implicit: r.value,
-          value: r.value,
-          row: r.row,
-          column: r.column
-        }, s = this.viewContainerRef.createEmbeddedView(t, i);
-        return this.viewRefs.push(s), s.detectChanges(), s.rootNodes[0];
+      return (i) => {
+        const r = {
+          $implicit: i.value,
+          value: i.value,
+          row: i.row,
+          column: i.column
+        }, o = this.viewContainerRef.createEmbeddedView(t, r);
+        return this.viewRefs.push(o), o.detectChanges(), o.rootNodes[0];
       };
   }
   /**
@@ -441,30 +559,43 @@ class Qe {
    * As long as the component emits `(commit)` with the new value.
    */
   createEditor(e) {
-    const t = pe(e);
+    const t = Ee(e), i = e.closest("tbw-grid");
     return t ? (r) => {
-      const i = (a) => r.commit(a), s = () => r.cancel(), o = new oe(), l = new oe();
-      o.subscribe((a) => r.commit(a)), l.subscribe(() => r.cancel());
-      const w = {
+      const o = (a) => r.commit(a), s = () => r.cancel(), l = new fe(), m = new fe();
+      l.subscribe((a) => r.commit(a)), m.subscribe(() => r.cancel());
+      let d;
+      if (i) {
+        const a = rt(i);
+        if (a?.hasFormGroups) {
+          const b = i.rows;
+          if (b) {
+            const D = b.indexOf(r.row);
+            D >= 0 && (d = a.getControl(D, r.field));
+          }
+        }
+      }
+      const T = {
         $implicit: r.value,
         value: r.value,
         row: r.row,
         column: r.column,
         // Preferred: simple callback functions
-        onCommit: i,
+        onCommit: o,
         onCancel: s,
+        // FormControl from FormArray (if available)
+        control: d,
         // Deprecated: EventEmitters (for backwards compatibility)
-        commit: o,
-        cancel: l
-      }, u = this.viewContainerRef.createEmbeddedView(t, w);
-      this.viewRefs.push(u), u.detectChanges();
-      const d = u.rootNodes[0];
-      return d && d.addEventListener && (d.addEventListener("commit", (a) => {
-        const T = a;
-        r.commit(T.detail);
-      }), d.addEventListener("cancel", () => {
+        commit: l,
+        cancel: m
+      }, c = this.viewContainerRef.createEmbeddedView(t, T);
+      this.viewRefs.push(c), c.detectChanges();
+      const C = c.rootNodes[0];
+      return C && C.addEventListener && (C.addEventListener("commit", (a) => {
+        const b = a;
+        r.commit(b.detail);
+      }), C.addEventListener("cancel", () => {
         r.cancel();
-      })), d;
+      })), C;
     } : (console.warn("[AngularGridAdapter] No editor template registered for element"), () => document.createElement("div"));
   }
   /**
@@ -472,16 +603,16 @@ class Qe {
    * Renders Angular templates for expandable detail rows.
    */
   createDetailRenderer(e) {
-    const t = ue(e);
+    const t = we(e);
     if (t)
-      return (r) => {
-        const i = {
-          $implicit: r,
-          row: r
-        }, s = this.viewContainerRef.createEmbeddedView(t, i);
-        this.viewRefs.push(s), s.detectChanges();
-        const o = document.createElement("div");
-        return s.rootNodes.forEach((l) => o.appendChild(l)), o;
+      return (i) => {
+        const r = {
+          $implicit: i,
+          row: i
+        }, o = this.viewContainerRef.createEmbeddedView(t, r);
+        this.viewRefs.push(o), o.detectChanges();
+        const s = document.createElement("div");
+        return o.rootNodes.forEach((l) => s.appendChild(l)), s;
       };
   }
   /**
@@ -492,16 +623,16 @@ class Qe {
    * without manual configuration in the Grid directive.
    */
   parseDetailElement(e) {
-    const t = ue(e.closest("tbw-grid"));
+    const t = we(e.closest("tbw-grid"));
     if (t)
-      return (r) => {
-        const i = {
-          $implicit: r,
-          row: r
-        }, s = this.viewContainerRef.createEmbeddedView(t, i);
-        this.viewRefs.push(s), s.detectChanges();
-        const o = document.createElement("div");
-        return s.rootNodes.forEach((l) => o.appendChild(l)), o;
+      return (i) => {
+        const r = {
+          $implicit: i,
+          row: i
+        }, o = this.viewContainerRef.createEmbeddedView(t, r);
+        this.viewRefs.push(o), o.detectChanges();
+        const s = document.createElement("div");
+        return o.rootNodes.forEach((l) => s.appendChild(l)), s;
       };
   }
   /**
@@ -512,17 +643,17 @@ class Qe {
    * @returns A card renderer function or undefined if no template is found
    */
   createResponsiveCardRenderer(e) {
-    const t = Ye(e);
+    const t = nt(e);
     if (t)
-      return (r, i) => {
-        const s = {
-          $implicit: r,
-          row: r,
-          index: i
-        }, o = this.viewContainerRef.createEmbeddedView(t, s);
-        this.viewRefs.push(o), o.detectChanges();
+      return (i, r) => {
+        const o = {
+          $implicit: i,
+          row: i,
+          index: r
+        }, s = this.viewContainerRef.createEmbeddedView(t, o);
+        this.viewRefs.push(s), s.detectChanges();
         const l = document.createElement("div");
-        return o.rootNodes.forEach((w) => l.appendChild(w)), l;
+        return s.rootNodes.forEach((m) => l.appendChild(m)), l;
       };
   }
   /**
@@ -530,18 +661,18 @@ class Qe {
    * The renderer creates an Angular template-based panel content.
    */
   createToolPanelRenderer(e) {
-    const t = ze(e);
+    const t = it(e);
     if (!t)
       return;
-    const r = e.closest("tbw-grid");
-    return (i) => {
-      const s = {
-        $implicit: r ?? i,
-        grid: r ?? i
-      }, o = this.viewContainerRef.createEmbeddedView(t, s);
-      return this.viewRefs.push(o), o.detectChanges(), o.rootNodes.forEach((l) => i.appendChild(l)), () => {
-        const l = this.viewRefs.indexOf(o);
-        l > -1 && this.viewRefs.splice(l, 1), o.destroy();
+    const i = e.closest("tbw-grid");
+    return (r) => {
+      const o = {
+        $implicit: i ?? r,
+        grid: i ?? r
+      }, s = this.viewContainerRef.createEmbeddedView(t, o);
+      return this.viewRefs.push(s), s.detectChanges(), s.rootNodes.forEach((l) => r.appendChild(l)), () => {
+        const l = this.viewRefs.indexOf(s);
+        l > -1 && this.viewRefs.splice(l, 1), s.destroy();
       };
     };
   }
@@ -578,10 +709,10 @@ class Qe {
     const t = this.typeRegistry.get(e);
     if (!t)
       return;
-    const r = {
+    const i = {
       editorParams: t.editorParams
     };
-    return t.renderer && (r.renderer = this.createComponentRenderer(t.renderer)), t.editor && (r.editor = this.createComponentEditor(t.editor)), r;
+    return t.renderer && (i.renderer = this.createComponentRenderer(t.renderer)), t.editor && (i.editor = this.createComponentEditor(t.editor)), i;
   }
   /**
    * Creates a renderer function from an Angular component class.
@@ -589,17 +720,17 @@ class Qe {
    */
   createComponentRenderer(e) {
     return (t) => {
-      const r = document.createElement("span");
-      r.style.display = "contents";
-      const i = ae(e, {
+      const i = document.createElement("span");
+      i.style.display = "contents";
+      const r = pe(e, {
         environmentInjector: this.injector,
-        hostElement: r
+        hostElement: i
       });
-      return this.setComponentInputs(i, {
+      return this.setComponentInputs(r, {
         value: t.value,
         row: t.row,
         column: t.column
-      }), this.appRef.attachView(i.hostView), this.componentRefs.push(i), i.changeDetectorRef.detectChanges(), r;
+      }), this.appRef.attachView(r.hostView), this.componentRefs.push(r), r.changeDetectorRef.detectChanges(), i;
     };
   }
   /**
@@ -608,24 +739,24 @@ class Qe {
    */
   createComponentEditor(e) {
     return (t) => {
-      const r = document.createElement("span");
-      r.style.display = "contents";
-      const i = ae(e, {
+      const i = document.createElement("span");
+      i.style.display = "contents";
+      const r = pe(e, {
         environmentInjector: this.injector,
-        hostElement: r
+        hostElement: i
       });
-      this.setComponentInputs(i, {
+      this.setComponentInputs(r, {
         value: t.value,
         row: t.row,
         column: t.column
-      }), this.appRef.attachView(i.hostView), this.componentRefs.push(i), i.changeDetectorRef.detectChanges();
-      const s = i.instance;
-      return this.subscribeToOutput(s, "commit", (o) => t.commit(o)), this.subscribeToOutput(s, "cancel", () => t.cancel()), r.addEventListener("commit", (o) => {
-        const l = o;
+      }), this.appRef.attachView(r.hostView), this.componentRefs.push(r), r.changeDetectorRef.detectChanges();
+      const o = r.instance;
+      return this.subscribeToOutput(o, "commit", (s) => t.commit(s)), this.subscribeToOutput(o, "cancel", () => t.cancel()), i.addEventListener("commit", (s) => {
+        const l = s;
         t.commit(l.detail);
-      }), r.addEventListener("cancel", () => {
+      }), i.addEventListener("cancel", () => {
         t.cancel();
-      }), r;
+      }), i;
     };
   }
   /**
@@ -633,18 +764,18 @@ class Qe {
    * Works with both EventEmitter and OutputEmitterRef (signal outputs).
    * @internal
    */
-  subscribeToOutput(e, t, r) {
-    const i = e[t];
-    i && typeof i.subscribe == "function" && i.subscribe(r);
+  subscribeToOutput(e, t, i) {
+    const r = e[t];
+    r && typeof r.subscribe == "function" && r.subscribe(i);
   }
   /**
    * Sets component inputs using Angular's setInput API.
    * @internal
    */
   setComponentInputs(e, t) {
-    for (const [r, i] of Object.entries(t))
+    for (const [i, r] of Object.entries(t))
       try {
-        e.setInput(r, i);
+        e.setInput(i, r);
       } catch {
       }
   }
@@ -656,21 +787,155 @@ class Qe {
     this.viewRefs.forEach((e) => e.destroy()), this.viewRefs = [], this.componentRefs.forEach((e) => e.destroy()), this.componentRefs = [];
   }
 }
-var ye, K;
-ye = [y({ selector: "tbw-grid" })];
-class G {
-  elementRef = c(C);
-  injector = c(Ue);
-  appRef = c(We);
-  viewContainerRef = c(Fe);
+var xe, re;
+xe = [E()];
+class H {
+  elementRef = u(R);
+  // ============================================================================
+  // Inputs
+  // ============================================================================
+  /**
+   * The cell value. Used when FormControl is not available.
+   * When a FormControl is provided, value is derived from control.value instead.
+   */
+  value = f();
+  /**
+   * The full row data object.
+   */
+  row = f();
+  /**
+   * The column configuration.
+   */
+  column = f();
+  /**
+   * The FormControl for this cell, if the grid is bound to a FormArray.
+   * When provided, the editor uses control.value instead of the value input.
+   */
+  control = f();
+  // ============================================================================
+  // Outputs
+  // ============================================================================
+  /**
+   * Emits when the user commits a new value.
+   */
+  commit = S();
+  /**
+   * Emits when the user cancels editing.
+   */
+  cancel = S();
+  // ============================================================================
+  // Computed State
+  // ============================================================================
+  /**
+   * The current value, derived from FormControl if available, otherwise from value input.
+   * This is the recommended way to get the current value in your editor template.
+   */
+  currentValue = A(() => {
+    const e = this.control();
+    return e ? e.value : this.value();
+  });
+  /**
+   * Whether the control is invalid (has validation errors).
+   * Returns false if no FormControl is available.
+   */
+  isInvalid = A(() => this.control()?.invalid ?? !1);
+  /**
+   * Whether the control is dirty (has been modified).
+   * Returns false if no FormControl is available.
+   */
+  isDirty = A(() => this.control()?.dirty ?? !1);
+  /**
+   * Whether the control has been touched.
+   * Returns false if no FormControl is available.
+   */
+  isTouched = A(() => this.control()?.touched ?? !1);
+  /**
+   * Whether the control has any validation errors.
+   */
+  hasErrors = A(() => {
+    const e = this.control();
+    return e?.errors != null && Object.keys(e.errors).length > 0;
+  });
+  /**
+   * The first error message from the control's validation errors.
+   * Returns an empty string if no errors.
+   */
+  firstErrorMessage = A(() => {
+    const e = this.control();
+    if (!e?.errors) return "";
+    const t = Object.keys(e.errors)[0];
+    return this.getErrorMessage(t, e.errors[t]);
+  });
+  /**
+   * All error messages from the control's validation errors.
+   */
+  allErrorMessages = A(() => {
+    const e = this.control();
+    return e?.errors ? Object.entries(e.errors).map(([t, i]) => this.getErrorMessage(t, i)) : [];
+  });
+  // ============================================================================
+  // Methods
+  // ============================================================================
+  /**
+   * Commit a new value. Emits the commit output AND dispatches a DOM event.
+   * The DOM event enables the grid's auto-wiring to catch the commit.
+   * Call this when the user confirms their edit.
+   */
+  commitValue(e) {
+    this.commit.emit(e), this.elementRef.nativeElement.dispatchEvent(new CustomEvent("commit", { detail: e, bubbles: !0 }));
+  }
+  /**
+   * Cancel editing. Emits the cancel output AND dispatches a DOM event.
+   * Call this when the user cancels (e.g., presses Escape).
+   */
+  cancelEdit() {
+    this.cancel.emit(), this.elementRef.nativeElement.dispatchEvent(new CustomEvent("cancel", { bubbles: !0 }));
+  }
+  /**
+   * Get a human-readable error message for a validation error.
+   * Override this method to customize error messages for your editor.
+   *
+   * @param errorKey - The validation error key (e.g., 'required', 'minlength')
+   * @param errorValue - The error value (e.g., { requiredLength: 5, actualLength: 3 })
+   * @returns A human-readable error message
+   */
+  getErrorMessage(e, t) {
+    switch (e) {
+      case "required":
+        return "This field is required";
+      case "minlength":
+        return `Minimum length is ${t?.requiredLength ?? "unknown"}`;
+      case "maxlength":
+        return `Maximum length is ${t?.requiredLength ?? "unknown"}`;
+      case "min":
+        return `Minimum value is ${t?.min ?? "unknown"}`;
+      case "max":
+        return `Maximum value is ${t?.max ?? "unknown"}`;
+      case "email":
+        return "Invalid email address";
+      case "pattern":
+        return "Invalid format";
+      default:
+        return `Invalid value (${e})`;
+    }
+  }
+}
+re = h(null), H = v(re, 0, "BaseGridEditor", xe, H), g(re, 1, H);
+var Me, ne;
+Me = [E({ selector: "tbw-grid" })];
+class Y {
+  elementRef = u(R);
+  injector = u(Ke);
+  appRef = u(Qe);
+  viewContainerRef = u(Ze);
   adapter = null;
   cellCommitListener = null;
   constructor() {
-    E(() => {
+    y(() => {
       const e = this.angularConfig();
       if (!e || !this.adapter) return;
-      const t = this.adapter.processGridConfig(e), r = this.elementRef.nativeElement;
-      r.gridConfig = t;
+      const t = this.adapter.processGridConfig(e), i = this.elementRef.nativeElement;
+      i.gridConfig = t;
     });
   }
   rowCommitListener = null;
@@ -691,7 +956,7 @@ class G {
    * <tbw-grid [customStyles]="customStyles">...</tbw-grid>
    * ```
    */
-  customStyles = R();
+  customStyles = f();
   /**
    * Angular-specific grid configuration that supports component classes for renderers/editors.
    *
@@ -728,7 +993,7 @@ class G {
    * ```
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  angularConfig = R();
+  angularConfig = f();
   /**
    * Emitted when a cell value is committed (inline editing).
    * Provides the row, field, new value, and change tracking information.
@@ -744,7 +1009,7 @@ class G {
    * }
    * ```
    */
-  cellCommit = le();
+  cellCommit = S();
   /**
    * Emitted when a row's values are committed (bulk/row editing).
    * Provides the row data and change tracking information.
@@ -754,16 +1019,16 @@ class G {
    * <tbw-grid (rowCommit)="onRowCommit($event)">...</tbw-grid>
    * ```
    */
-  rowCommit = le();
+  rowCommit = S();
   ngOnInit() {
-    this.adapter = new Qe(this.injector, this.appRef, this.viewContainerRef), He.registerAdapter(this.adapter);
+    this.adapter = new lt(this.injector, this.appRef, this.viewContainerRef), et.registerAdapter(this.adapter);
     const e = this.elementRef.nativeElement;
     this.cellCommitListener = (t) => {
-      const r = t.detail;
-      this.cellCommit.emit(r);
+      const i = t.detail;
+      this.cellCommit.emit(i);
     }, e.addEventListener("cell-commit", this.cellCommitListener), this.rowCommitListener = (t) => {
-      const r = t.detail;
-      this.rowCommit.emit(r);
+      const i = t.detail;
+      this.rowCommit.emit(i);
     }, e.addEventListener("row-commit", this.rowCommitListener), e.__frameworkAdapter = this.adapter;
   }
   ngAfterContentInit() {
@@ -789,26 +1054,26 @@ class G {
    */
   configureMasterDetail(e) {
     if (!this.adapter) return;
-    const t = e.getPlugin?.(ce);
+    const t = e.getPlugin?.(ge);
     if (t && typeof t.refreshDetailRenderer == "function") {
       t.refreshDetailRenderer();
       return;
     }
-    const r = e.querySelector("tbw-grid-detail");
-    if (!r) return;
-    const i = this.adapter.createDetailRenderer(e);
+    const i = e.querySelector("tbw-grid-detail");
     if (!i) return;
-    const s = r.getAttribute("animation");
-    let o = "slide";
-    s === "false" ? o = !1 : s === "fade" && (o = "fade");
-    const l = r.getAttribute("showExpandColumn") !== "false", w = new ce({
-      detailRenderer: i,
+    const r = this.adapter.createDetailRenderer(e);
+    if (!r) return;
+    const o = i.getAttribute("animation");
+    let s = "slide";
+    o === "false" ? s = !1 : o === "fade" && (s = "fade");
+    const l = i.getAttribute("showExpandColumn") !== "false", m = new ge({
+      detailRenderer: r,
       showExpandColumn: l,
-      animation: o
-    }), u = e.gridConfig || {}, d = u.plugins || [];
+      animation: s
+    }), d = e.gridConfig || {}, T = d.plugins || [];
     e.gridConfig = {
-      ...u,
-      plugins: [...d, w]
+      ...d,
+      plugins: [...T, m]
     };
   }
   /**
@@ -818,11 +1083,11 @@ class G {
    */
   configureResponsiveCard(e) {
     if (!this.adapter || !e.querySelector("tbw-grid-responsive-card")) return;
-    const r = this.adapter.createResponsiveCardRenderer(e);
-    if (!r) return;
-    const i = e.getPlugin?.(Be);
-    if (i) {
-      i.setCardRenderer(r);
+    const i = this.adapter.createResponsiveCardRenderer(e);
+    if (!i) return;
+    const r = e.getPlugin?.(tt);
+    if (r) {
+      r.setCardRenderer(i);
       return;
     }
     console.warn(
@@ -840,21 +1105,24 @@ Add ResponsivePlugin to your gridConfig.plugins array:
     e && (this.cellCommitListener && (e.removeEventListener("cell-commit", this.cellCommitListener), this.cellCommitListener = null), this.rowCommitListener && (e.removeEventListener("row-commit", this.rowCommitListener), this.rowCommitListener = null)), e && this.customStyles() && e.unregisterStyles?.("angular-custom-styles"), this.adapter && (this.adapter.destroy?.(), this.adapter = null);
   }
 }
-K = h(null), G = v(K, 0, "Grid", ye, G), g(K, 1, G);
+ne = h(null), Y = v(ne, 0, "Grid", Me, Y), g(ne, 1, Y);
 export {
-  Qe as AngularGridAdapter,
-  Ie as GRID_TYPE_DEFAULTS,
-  G as Grid,
-  M as GridColumnEditor,
-  V as GridColumnView,
+  lt as AngularGridAdapter,
+  H as BaseGridEditor,
+  _e as GRID_TYPE_DEFAULTS,
+  Y as Grid,
+  V as GridColumnEditor,
+  N as GridColumnView,
   _ as GridDetailView,
-  x as GridResponsiveCard,
-  q as GridToolPanel,
-  P as GridTypeRegistry,
-  $ as TbwCellEditor,
-  k as TbwCellView,
-  $ as TbwEditor,
-  k as TbwRenderer,
-  me as isComponentClass,
-  nt as provideGridTypeDefaults
+  G as GridFormArray,
+  q as GridResponsiveCard,
+  $ as GridToolPanel,
+  M as GridTypeRegistry,
+  W as TbwCellEditor,
+  U as TbwCellView,
+  W as TbwEditor,
+  U as TbwRenderer,
+  rt as getFormArrayContext,
+  ve as isComponentClass,
+  ft as provideGridTypeDefaults
 };