@toolbox-web/grid-angular 0.3.1 → 0.5.0

package/index.js

@@ -1,31 +1,32 @@
-var Se = Object.create;
-var P = Object.defineProperty;
-var Ie = Object.getOwnPropertyDescriptor;
-var ne = (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 je = (n, e, t) => e in n ? P(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var Z = (n, e) => P(n, "name", { value: e, configurable: !0 });
-var h = (n) => [, , , Se(n?.[ne("metadata")] ?? null)], ie = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], A = (n) => n !== void 0 && typeof n != "function" ? D("Function expected") : n, Oe = (n, e, t, i, r) => ({ kind: ie[n], name: e, metadata: i, addInitializer: (s) => t._ ? D("Already initialized") : r.push(A(s || null)) }), Pe = (n, e) => je(e, ne("metadata"), n[3]), g = (n, e, t, i) => {
-  for (var r = 0, s = n[e >> 1], a = s && s.length; r < a; r++) e & 1 ? s[r].call(t) : i = s[r].call(t, i);
+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;
-}, w = (n, e, t, i, r, s) => {
-  var a, l, y, u, d, o = e & 7, T = !!(e & 8), f = !!(e & 16), I = o > 3 ? n.length + 1 : o ? T ? 1 : 2 : 0, Q = ie[o + 5], X = o > 3 && (n[I - 1] = []), Le = n[I] || (n[I] = []), p = o && (!f && !T && (r = r.prototype), o < 5 && (o > 3 || !f) && Ie(o < 4 ? r : { get [t]() {
-    return ee(this, s);
-  }, set [t](c) {
-    return te(this, s, c);
+}, 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));
-  o ? f && o < 4 && Z(s, (o > 2 ? "set " : o > 1 ? "get " : "") + t) : Z(r, t);
-  for (var j = i.length - 1; j >= 0; j--)
-    u = Oe(o, t, y = {}, n[3], Le), o && (u.static = T, u.private = f, d = u.access = { has: f ? (c) => Ne(r, c) : (c) => t in c }, o ^ 3 && (d.get = f ? (c) => (o ^ 1 ? ee : Me)(c, r, o ^ 4 ? s : p.get) : (c) => c[t]), o > 2 && (d.set = f ? (c, O) => te(c, r, O, o ^ 4 ? s : p.set) : (c, O) => c[t] = O)), l = (0, i[j])(o ? o < 4 ? f ? s : p[Q] : o > 4 ? void 0 : { get: p.get, set: p.set } : r, u), y._ = 1, o ^ 4 || l === void 0 ? A(l) && (o > 4 ? X.unshift(l) : o ? f ? s = l : p[Q] = l : r = l) : typeof l != "object" || l === null ? D("Object expected") : (A(a = l.get) && (p.get = a), A(a = l.set) && (p.set = a), A(a = l.init) && X.unshift(a));
-  return o || Pe(n, r), p && P(r, t, p), f ? o ^ 4 ? s : p : r;
+  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), Ne = (n, e) => Object(e) !== e ? D('Cannot use the "in" operator on this value') : n.has(e), ee = (n, e, t) => (N(n, e, "read from private field"), t ? t.call(n) : e.get(n));
-var te = (n, e, t, i) => (N(n, e, "write to private field"), i ? i.call(n, t) : e.set(n, t), t), Me = (n, e, t) => (N(n, e, "access private method"), t);
-import { inject as m, ElementRef as v, contentChild as S, TemplateRef as b, effect as C, Directive as E, input as R, InjectionToken as Ve, Injectable as _e, makeEnvironmentProviders as qe, EventEmitter as re, createComponent as se, EnvironmentInjector as Ge, ApplicationRef as ke, ViewContainerRef as xe, output as oe } from "@angular/core";
-import { DataGridElement as Ue } from "@toolbox-web/grid";
-import { MasterDetailPlugin as ae } from "@toolbox-web/grid/all";
-function le(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 le(n) {
   const e = Function.prototype.toString.call(n);
   return e.startsWith("class ") || e.startsWith("class{");
 }
-const Ce = /* @__PURE__ */ new Map();
-function Ee(n) {
-  return Ce.get(n);
+const Se = /* @__PURE__ */ new Map();
+function Pe(n) {
+  return Se.get(n);
 }
-var de, U;
-de = [E({ selector: "tbw-grid-column-editor" })];
-class M {
-  elementRef = m(v);
+var Ce, X;
+Ce = [E({ selector: "tbw-grid-column-editor" })];
+class V {
+  elementRef = u(R);
   /**
    * Query for the ng-template content child.
    */
-  template = S(b);
+  template = x(L);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = C(() => {
+  onTemplateReceived = y(() => {
     const e = this.template();
-    e && Ce.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 = w(U, 0, "GridColumnEditor", de, M), g(U, 1, M);
-const ye = /* @__PURE__ */ new Map();
-function be(n) {
-  return ye.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 pe, $;
-pe = [E({ selector: "tbw-grid-column-view" })];
-class V {
-  elementRef = m(v);
+var ye, z;
+ye = [E({ selector: "tbw-grid-column-view" })];
+class N {
+  elementRef = u(R);
   /**
    * Query for the ng-template content child.
    */
-  template = S(b);
+  template = x(L);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = C(() => {
+  onTemplateReceived = y(() => {
     const e = this.template();
-    e && ye.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;
   }
 }
-$ = h(null), V = w($, 0, "GridColumnView", pe, V), g($, 1, V);
-const Te = /* @__PURE__ */ new Map();
-function ce(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 Te.get(e);
+    return ke.get(e);
 }
-var fe, W;
-fe = [E({ selector: "tbw-grid-detail" })];
+var be, B;
+be = [E({ selector: "tbw-grid-detail" })];
 class _ {
-  elementRef = m(v);
+  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 = S(b);
+  template = x(L);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = C(() => {
+  onTemplateReceived = y(() => {
     const e = this.template();
-    e && Te.set(this.elementRef.nativeElement, e);
+    e && ke.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -116,38 +117,189 @@ class _ {
     return !0;
   }
 }
-W = h(null), _ = w(W, 0, "GridDetailView", fe, _), g(W, 1, _);
-const Ae = /* @__PURE__ */ new Map();
-function $e(n) {
-  return Ae.get(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 Ve.get(e);
 }
-var he, F;
-he = [E({ selector: "tbw-grid-tool-panel" })];
+var Ae, K;
+Ae = [E({
+  selector: "tbw-grid-responsive-card"
+})];
 class q {
-  elementRef = m(v);
+  elementRef = u(R);
+  /**
+   * The ng-template containing the card content.
+   */
+  template = x(L);
+  /**
+   * Effect that registers the template when it becomes available.
+   */
+  onTemplateReceived = y(() => {
+    const e = this.template();
+    e && Ve.set(
+      this.elementRef.nativeElement,
+      e
+    );
+  });
+  /**
+   * Type guard for template context inference.
+   */
+  static ngTemplateContextGuard(e, t) {
+    return !0;
+  }
+}
+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 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 = S(b);
+  template = x(L);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = C(() => {
+  onTemplateReceived = y(() => {
     const e = this.template(), t = this.elementRef.nativeElement;
     if (e) {
       t.setAttribute("id", this.id()), t.setAttribute("title", this.title());
       const i = this.icon();
       i && t.setAttribute("icon", i);
       const r = this.tooltip();
-      r && t.setAttribute("tooltip", r), t.setAttribute("order", String(this.order())), Ae.set(t, e);
+      r && t.setAttribute("tooltip", r), t.setAttribute("order", String(this.order())), Ne.set(t, e);
     }
   });
   /**
@@ -158,30 +310,30 @@ class q {
     return !0;
   }
 }
-F = h(null), q = w(F, 0, "GridToolPanel", he, q), g(F, 1, q);
-const J = /* @__PURE__ */ new Map(), K = /* @__PURE__ */ new Map();
-function We(n) {
-  const e = J.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 be(t);
+    return je(t);
 }
-function Fe(n) {
-  const e = K.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 Ee(t);
+    return Pe(t);
 }
-var ge, H;
-ge = [E({ selector: "[tbwRenderer]" })];
-class G {
-  template = m(b);
-  elementRef = m(v);
+var De, Z;
+De = [E({ selector: "[tbwRenderer]" })];
+class U {
+  template = u(L);
+  elementRef = u(R);
   columnElement = null;
   constructor() {
-    C(() => {
+    y(() => {
       this.registerTemplate();
     });
   }
@@ -189,10 +341,10 @@ class G {
     let e = this.elementRef.nativeElement?.parentElement;
     for (; e && e.tagName !== "TBW-GRID-COLUMN"; )
       e = e.parentElement;
-    e && (this.columnElement = e, J.set(e, this.template));
+    e && (this.columnElement = e, oe.set(e, this.template));
   }
   ngOnDestroy() {
-    this.columnElement && J.delete(this.columnElement);
+    this.columnElement && oe.delete(this.columnElement);
   }
   /**
    * Static type guard for template context.
@@ -202,15 +354,15 @@ class G {
     return !0;
   }
 }
-H = h(null), G = w(H, 0, "TbwRenderer", ge, G), g(H, 1, G);
-var we, B;
-we = [E({ selector: "[tbwEditor]" })];
-class k {
-  template = m(b);
-  elementRef = m(v);
+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() {
-    C(() => {
+    y(() => {
       this.registerTemplate();
     });
   }
@@ -218,10 +370,10 @@ class k {
     let e = this.elementRef.nativeElement?.parentElement;
     for (; e && e.tagName !== "TBW-GRID-COLUMN"; )
       e = e.parentElement;
-    e && (this.columnElement = e, K.set(e, this.template));
+    e && (this.columnElement = e, se.set(e, this.template));
   }
   ngOnDestroy() {
-    this.columnElement && K.delete(this.columnElement);
+    this.columnElement && se.delete(this.columnElement);
   }
   /**
    * Static type guard for template context.
@@ -231,14 +383,14 @@ class k {
     return !0;
   }
 }
-B = h(null), k = w(B, 0, "TbwEditor", we, k), g(B, 1, k);
-const De = new Ve("GRID_TYPE_DEFAULTS");
-var Re, Y;
-Re = [_e({ providedIn: "root" })];
-class L {
+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 = m(De, { optional: !0 });
+    const e = u(_e, { optional: !0 });
     if (e)
       for (const [t, i] of Object.entries(e))
         this.defaults.set(t, i);
@@ -292,23 +444,23 @@ class L {
       };
   }
 }
-Y = h(null), L = w(Y, 0, "GridTypeRegistry", Re, L), g(Y, 1, L);
-function Ke(n) {
-  return qe([{ provide: De, 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 me(n) {
-  const e = We(n);
-  return e || be(n);
+function Re(n) {
+  const e = ot(n);
+  return e || je(n);
 }
-function ue(n) {
-  const e = Fe(n);
-  return e || Ee(n);
+function Ee(n) {
+  const e = st(n);
+  return e || Pe(n);
 }
-class He {
+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(L, null);
+      this.typeRegistry = this.injector.get(M, null);
     } catch {
     }
   }
@@ -359,14 +511,14 @@ class He {
    */
   processColumn(e) {
     const t = { ...e };
-    return e.renderer && le(e.renderer) && (t.renderer = this.createComponentRenderer(e.renderer)), e.editor && le(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 me(e) !== void 0 || ue(e) !== void 0;
+    return Re(e) !== void 0 || Ee(e) !== void 0;
   }
   /**
    * Creates a view renderer function that creates an embedded view
@@ -376,7 +528,7 @@ class He {
    * allowing the grid to use its default rendering.
    */
   createRenderer(e) {
-    const t = me(e);
+    const t = Re(e);
     if (t)
       return (i) => {
         const r = {
@@ -384,8 +536,8 @@ class He {
           value: i.value,
           row: i.row,
           column: i.column
-        }, s = this.viewContainerRef.createEmbeddedView(t, r);
-        return this.viewRefs.push(s), s.detectChanges(), s.rootNodes[0];
+        }, o = this.viewContainerRef.createEmbeddedView(t, r);
+        return this.viewRefs.push(o), o.detectChanges(), o.rootNodes[0];
       };
   }
   /**
@@ -407,30 +559,43 @@ class He {
    * As long as the component emits `(commit)` with the new value.
    */
   createEditor(e) {
-    const t = ue(e);
-    return t ? (i) => {
-      const r = (o) => i.commit(o), s = () => i.cancel(), a = new re(), l = new re();
-      a.subscribe((o) => i.commit(o)), l.subscribe(() => i.cancel());
-      const y = {
-        $implicit: i.value,
-        value: i.value,
-        row: i.row,
-        column: i.column,
+    const t = Ee(e), i = e.closest("tbw-grid");
+    return t ? (r) => {
+      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: r,
+        onCommit: o,
         onCancel: s,
+        // FormControl from FormArray (if available)
+        control: d,
         // Deprecated: EventEmitters (for backwards compatibility)
-        commit: a,
-        cancel: l
-      }, u = this.viewContainerRef.createEmbeddedView(t, y);
-      this.viewRefs.push(u), u.detectChanges();
-      const d = u.rootNodes[0];
-      return d && d.addEventListener && (d.addEventListener("commit", (o) => {
-        const T = o;
-        i.commit(T.detail);
-      }), d.addEventListener("cancel", () => {
-        i.cancel();
-      })), d;
+        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();
+      })), C;
     } : (console.warn("[AngularGridAdapter] No editor template registered for element"), () => document.createElement("div"));
   }
   /**
@@ -438,16 +603,16 @@ class He {
    * Renders Angular templates for expandable detail rows.
    */
   createDetailRenderer(e) {
-    const t = ce(e);
+    const t = we(e);
     if (t)
       return (i) => {
         const r = {
           $implicit: i,
           row: i
-        }, s = this.viewContainerRef.createEmbeddedView(t, r);
-        this.viewRefs.push(s), s.detectChanges();
-        const a = document.createElement("div");
-        return s.rootNodes.forEach((l) => a.appendChild(l)), a;
+        }, 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;
       };
   }
   /**
@@ -458,16 +623,37 @@ class He {
    * without manual configuration in the Grid directive.
    */
   parseDetailElement(e) {
-    const t = ce(e.closest("tbw-grid"));
+    const t = we(e.closest("tbw-grid"));
     if (t)
       return (i) => {
         const r = {
           $implicit: i,
           row: i
-        }, s = this.viewContainerRef.createEmbeddedView(t, r);
+        }, 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;
+      };
+  }
+  /**
+   * Creates a responsive card renderer function for ResponsivePlugin.
+   * Renders Angular templates for card layout in responsive mode.
+   *
+   * @param gridElement - The grid element to look up the template for
+   * @returns A card renderer function or undefined if no template is found
+   */
+  createResponsiveCardRenderer(e) {
+    const t = nt(e);
+    if (t)
+      return (i, r) => {
+        const o = {
+          $implicit: i,
+          row: i,
+          index: r
+        }, s = this.viewContainerRef.createEmbeddedView(t, o);
         this.viewRefs.push(s), s.detectChanges();
-        const a = document.createElement("div");
-        return s.rootNodes.forEach((l) => a.appendChild(l)), a;
+        const l = document.createElement("div");
+        return s.rootNodes.forEach((m) => l.appendChild(m)), l;
       };
   }
   /**
@@ -475,18 +661,18 @@ class He {
    * The renderer creates an Angular template-based panel content.
    */
   createToolPanelRenderer(e) {
-    const t = $e(e);
+    const t = it(e);
     if (!t)
       return;
     const i = e.closest("tbw-grid");
     return (r) => {
-      const s = {
+      const o = {
         $implicit: i ?? r,
         grid: i ?? r
-      }, a = this.viewContainerRef.createEmbeddedView(t, s);
-      return this.viewRefs.push(a), a.detectChanges(), a.rootNodes.forEach((l) => r.appendChild(l)), () => {
-        const l = this.viewRefs.indexOf(a);
-        l > -1 && this.viewRefs.splice(l, 1), a.destroy();
+      }, 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();
       };
     };
   }
@@ -536,7 +722,7 @@ class He {
     return (t) => {
       const i = document.createElement("span");
       i.style.display = "contents";
-      const r = se(e, {
+      const r = pe(e, {
         environmentInjector: this.injector,
         hostElement: i
       });
@@ -555,7 +741,7 @@ class He {
     return (t) => {
       const i = document.createElement("span");
       i.style.display = "contents";
-      const r = se(e, {
+      const r = pe(e, {
         environmentInjector: this.injector,
         hostElement: i
       });
@@ -564,9 +750,9 @@ class He {
         row: t.row,
         column: t.column
       }), this.appRef.attachView(r.hostView), this.componentRefs.push(r), r.changeDetectorRef.detectChanges();
-      const s = r.instance;
-      return this.subscribeToOutput(s, "commit", (a) => t.commit(a)), this.subscribeToOutput(s, "cancel", () => t.cancel()), i.addEventListener("commit", (a) => {
-        const l = a;
+      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);
       }), i.addEventListener("cancel", () => {
         t.cancel();
@@ -601,17 +787,151 @@ class He {
     this.viewRefs.forEach((e) => e.destroy()), this.viewRefs = [], this.componentRefs.forEach((e) => e.destroy()), this.componentRefs = [];
   }
 }
-var ve, z;
-ve = [E({ selector: "tbw-grid" })];
-class x {
-  elementRef = m(v);
-  injector = m(Ge);
-  appRef = m(ke);
-  viewContainerRef = m(xe);
+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() {
-    C(() => {
+    y(() => {
       const e = this.angularConfig();
       if (!e || !this.adapter) return;
       const t = this.adapter.processGridConfig(e), i = this.elementRef.nativeElement;
@@ -636,7 +956,7 @@ class x {
    * <tbw-grid [customStyles]="customStyles">...</tbw-grid>
    * ```
    */
-  customStyles = R();
+  customStyles = f();
   /**
    * Angular-specific grid configuration that supports component classes for renderers/editors.
    *
@@ -673,7 +993,7 @@ class x {
    * ```
    */
   // 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.
@@ -689,7 +1009,7 @@ class x {
    * }
    * ```
    */
-  cellCommit = oe();
+  cellCommit = S();
   /**
    * Emitted when a row's values are committed (bulk/row editing).
    * Provides the row data and change tracking information.
@@ -699,9 +1019,9 @@ class x {
    * <tbw-grid (rowCommit)="onRowCommit($event)">...</tbw-grid>
    * ```
    */
-  rowCommit = oe();
+  rowCommit = S();
   ngOnInit() {
-    this.adapter = new He(this.injector, this.appRef, this.viewContainerRef), Ue.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 i = t.detail;
@@ -714,7 +1034,7 @@ class x {
   ngAfterContentInit() {
     const e = this.elementRef.nativeElement;
     e && typeof e.refreshColumns == "function" && setTimeout(() => {
-      e.refreshColumns(), this.configureMasterDetail(e), typeof e.refreshShellHeader == "function" && e.refreshShellHeader(), this.registerCustomStyles(e);
+      e.refreshColumns(), this.configureMasterDetail(e), this.configureResponsiveCard(e), typeof e.refreshShellHeader == "function" && e.refreshShellHeader(), this.registerCustomStyles(e);
     }, 0);
   }
   /**
@@ -734,7 +1054,7 @@ class x {
    */
   configureMasterDetail(e) {
     if (!this.adapter) return;
-    const t = e.getPlugin?.(ae);
+    const t = e.getPlugin?.(ge);
     if (t && typeof t.refreshDetailRenderer == "function") {
       t.refreshDetailRenderer();
       return;
@@ -743,38 +1063,66 @@ class x {
     if (!i) return;
     const r = this.adapter.createDetailRenderer(e);
     if (!r) return;
-    const s = i.getAttribute("animation");
-    let a = "slide";
-    s === "false" ? a = !1 : s === "fade" && (a = "fade");
-    const l = i.getAttribute("showExpandColumn") !== "false", y = new ae({
+    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: a
-    }), u = e.gridConfig || {}, d = u.plugins || [];
+      animation: s
+    }), d = e.gridConfig || {}, T = d.plugins || [];
     e.gridConfig = {
-      ...u,
-      plugins: [...d, y]
+      ...d,
+      plugins: [...T, m]
     };
   }
+  /**
+   * Configures the ResponsivePlugin with Angular template-based card renderer.
+   * - If plugin exists: updates its cardRenderer configuration
+   * - If plugin doesn't exist but <tbw-grid-responsive-card> is present: logs a warning
+   */
+  configureResponsiveCard(e) {
+    if (!this.adapter || !e.querySelector("tbw-grid-responsive-card")) return;
+    const i = this.adapter.createResponsiveCardRenderer(e);
+    if (!i) return;
+    const r = e.getPlugin?.(tt);
+    if (r) {
+      r.setCardRenderer(i);
+      return;
+    }
+    console.warn(
+      `[tbw-grid-angular] <tbw-grid-responsive-card> found but ResponsivePlugin is not configured.
+Add ResponsivePlugin to your gridConfig.plugins array:
+
+  import { ResponsivePlugin } from "@toolbox-web/grid/all";
+  gridConfig = {
+    plugins: [new ResponsivePlugin({ breakpoint: 600 })]
+  };`
+    );
+  }
   ngOnDestroy() {
     const e = this.elementRef.nativeElement;
     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);
   }
 }
-z = h(null), x = w(z, 0, "Grid", ve, x), g(z, 1, x);
+ne = h(null), Y = v(ne, 0, "Grid", Me, Y), g(ne, 1, Y);
 export {
-  He as AngularGridAdapter,
-  De as GRID_TYPE_DEFAULTS,
-  x 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,
-  q as GridToolPanel,
-  L as GridTypeRegistry,
-  k as TbwCellEditor,
-  G as TbwCellView,
-  k as TbwEditor,
-  G as TbwRenderer,
-  le as isComponentClass,
-  Ke 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
 };