@toolbox-web/grid-angular 0.4.0 → 0.6.0

package/index.js

@@ -1,54 +1,56 @@
-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) => {
-  throw TypeError(n);
+var _e = Object.create;
+var N = Object.defineProperty;
+var $e = Object.getOwnPropertyDescriptor;
+var pe = (i, e) => (e = Symbol[i]) ? e : /* @__PURE__ */ Symbol.for("Symbol." + i), j = (i) => {
+  throw TypeError(i);
 };
-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 ze = (i, e, t) => e in i ? N(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var ue = (i, e) => N(i, "name", { value: e, configurable: !0 });
+var E = (i) => [, , , _e(i?.[pe("metadata")] ?? null)], fe = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], O = (i) => i !== void 0 && typeof i != "function" ? j("Function expected") : i, Be = (i, e, t, n, r) => ({ kind: fe[i], name: e, metadata: n, addInitializer: (o) => t._ ? j("Already initialized") : r.push(O(o || null)) }), Ue = (i, e) => ze(e, pe("metadata"), i[3]), y = (i, e, t, n) => {
+  for (var r = 0, o = i[e >> 1], s = o && o.length; r < s; r++) e & 1 ? o[r].call(t) : n = o[r].call(t, n);
+  return n;
+}, b = (i, e, t, n, r, o) => {
+  var s, l, g, w, A, a = e & 7, R = !!(e & 8), f = !!(e & 16), S = a > 3 ? i.length + 1 : a ? R ? 1 : 2 : 0, M = fe[a + 5], u = a > 3 && (i[S - 1] = []), m = i[S] || (i[S] = []), d = a && (!f && !R && (r = r.prototype), a < 5 && (a > 3 || !f) && $e(a < 4 ? r : { get [t]() {
+    return me(this, o);
+  }, set [t](h) {
+    return de(this, o, h);
   } }, 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;
+  a ? f && a < 4 && ue(o, (a > 2 ? "set " : a > 1 ? "get " : "") + t) : ue(r, t);
+  for (var C = n.length - 1; C >= 0; C--)
+    w = Be(a, t, g = {}, i[3], m), a && (w.static = R, w.private = f, A = w.access = { has: f ? (h) => Je(r, h) : (h) => t in h }, a ^ 3 && (A.get = f ? (h) => (a ^ 1 ? me : We)(h, r, a ^ 4 ? o : d.get) : (h) => h[t]), a > 2 && (A.set = f ? (h, L) => de(h, r, L, a ^ 4 ? o : d.set) : (h, L) => h[t] = L)), l = (0, n[C])(a ? a < 4 ? f ? o : d[M] : a > 4 ? void 0 : { get: d.get, set: d.set } : r, w), g._ = 1, a ^ 4 || l === void 0 ? O(l) && (a > 4 ? u.unshift(l) : a ? f ? o = l : d[M] = l : r = l) : typeof l != "object" || l === null ? j("Object expected") : (O(s = l.get) && (d.get = s), O(s = l.set) && (d.set = s), O(s = l.init) && u.unshift(s));
+  return a || Ue(i, r), d && N(r, t, d), f ? a ^ 4 ? o : d : 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) {
-  if (typeof n != "function" || n.prototype === void 0)
+var V = (i, e, t) => e.has(i) || j("Cannot " + t), Je = (i, e) => Object(e) !== e ? j('Cannot use the "in" operator on this value') : i.has(e), me = (i, e, t) => (V(i, e, "read from private field"), t ? t.call(i) : e.get(i));
+var de = (i, e, t, n) => (V(i, e, "write to private field"), n ? n.call(i, t) : e.set(i, t), t), We = (i, e, t) => (V(i, e, "access private method"), t);
+import { inject as v, ElementRef as T, contentChild as k, TemplateRef as F, effect as D, Directive as x, input as c, InjectionToken as He, Injectable as Ye, makeEnvironmentProviders as Xe, EventEmitter as ge, createComponent as he, signal as G, afterNextRender as Ke, computed as P, output as p, EnvironmentInjector as Qe, ApplicationRef as Ze, ViewContainerRef as et } from "@angular/core";
+import { FormGroup as ve } from "@angular/forms";
+import { c as tt } from "./feature-registry-C-cKloXB.js";
+import { a as wt, g as Rt, b as Ct, i as Et, r as yt } from "./feature-registry-C-cKloXB.js";
+import { DataGridElement as nt } from "@toolbox-web/grid";
+function we(i) {
+  if (typeof i != "function" || i.prototype === void 0)
     return !1;
-  if (Object.prototype.hasOwnProperty.call(n, "ɵcmp") || Object.prototype.hasOwnProperty.call(n, "ɵfac"))
+  if (Object.prototype.hasOwnProperty.call(i, "ɵcmp") || Object.prototype.hasOwnProperty.call(i, "ɵfac"))
     return !0;
-  const e = Function.prototype.toString.call(n);
+  const e = Function.prototype.toString.call(i);
   return e.startsWith("class ") || e.startsWith("class{");
 }
-const be = /* @__PURE__ */ new Map();
-function Te(n) {
-  return be.get(n);
+const Oe = /* @__PURE__ */ new Map();
+function je(i) {
+  return Oe.get(i);
 }
-var fe, U;
-fe = [y({ selector: "tbw-grid-column-editor" })];
-class M {
-  elementRef = c(C);
+var ye, X;
+ye = [x({ selector: "tbw-grid-column-editor" })];
+class q {
+  elementRef = v(T);
   /**
    * Query for the ng-template content child.
    */
-  template = L(b);
+  template = k(F);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = E(() => {
+  onTemplateReceived = D(() => {
     const e = this.template();
-    e && be.set(this.elementRef.nativeElement, e);
+    e && Oe.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -58,23 +60,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 = E(null), q = b(X, 0, "GridColumnEditor", ye, q), y(X, 1, q);
+const ke = /* @__PURE__ */ new Map();
+function Ie(i) {
+  return ke.get(i);
 }
-var he, W;
-he = [y({ selector: "tbw-grid-column-view" })];
-class V {
-  elementRef = c(C);
+var be, K;
+be = [x({ selector: "tbw-grid-column-view" })];
+class _ {
+  elementRef = v(T);
   /**
    * Query for the ng-template content child.
    */
-  template = L(b);
+  template = k(F);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = E(() => {
+  onTemplateReceived = D(() => {
     const e = this.template();
-    e && Ae.set(this.elementRef.nativeElement, e);
+    e && ke.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -84,29 +86,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) {
-  const e = n.querySelector("tbw-grid-detail");
+K = E(null), _ = b(K, 0, "GridColumnView", be, _), y(K, 1, _);
+const Ne = /* @__PURE__ */ new Map();
+function Re(i) {
+  const e = i.querySelector("tbw-grid-detail");
   if (e)
-    return Le.get(e);
+    return Ne.get(e);
 }
-var ge, F;
-ge = [y({ selector: "tbw-grid-detail" })];
-class _ {
-  elementRef = c(C);
+var Te, Q;
+Te = [x({ selector: "tbw-grid-detail" })];
+class $ {
+  elementRef = v(T);
   /** Whether to show the expand/collapse column. Default: true */
-  showExpandColumn = R(!0);
+  showExpandColumn = c(!0);
   /** Animation style for expand/collapse. Default: 'slide' */
-  animation = R("slide");
+  animation = c("slide");
   /**
    * Query for the ng-template content child.
    */
-  template = L(b);
+  template = k(F);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = E(() => {
+  onTemplateReceived = D(() => {
     const e = this.template();
-    e && Le.set(this.elementRef.nativeElement, e);
+    e && Ne.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -116,29 +118,146 @@ class _ {
     return !0;
   }
 }
-F = h(null), _ = v(F, 0, "GridDetailView", ge, _), g(F, 1, _);
-const Pe = /* @__PURE__ */ new Map();
-function Ye(n) {
-  const e = n.querySelector("tbw-grid-responsive-card");
+Q = E(null), $ = b(Q, 0, "GridDetailView", Te, $), y(Q, 1, $);
+const le = /* @__PURE__ */ Symbol("formArrayContext");
+function rt(i) {
+  return i[le];
+}
+var Ae, Z;
+Ae = [x({
+  selector: "tbw-grid[formArray]"
+})];
+class z {
+  elementRef = v(T);
+  cellCommitListener = null;
+  touchListener = null;
+  /**
+   * The FormArray to bind to the grid.
+   */
+  formArray = c.required();
+  /**
+   * Effect that syncs the FormArray value to the grid rows.
+   */
+  syncFormArrayToGrid = D(() => {
+    const e = this.formArray(), t = this.elementRef.nativeElement;
+    t && e && (t.rows = e.getRawValue());
+  });
+  ngOnInit() {
+    const e = this.elementRef.nativeElement;
+    e && (this.#n(e), this.cellCommitListener = (t) => {
+      const n = t.detail;
+      this.#i(n);
+    }, 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.#r(e));
+  }
+  /**
+   * Checks if the FormArray contains FormGroups.
+   */
+  #t() {
+    const e = this.formArray();
+    return e.length === 0 ? !1 : e.at(0) instanceof ve;
+  }
+  /**
+   * Gets the FormGroup at a specific row index.
+   */
+  #e(e) {
+    const n = this.formArray().at(e);
+    return n instanceof ve ? n : void 0;
+  }
+  /**
+   * Stores the FormArrayContext on the grid element.
+   */
+  #n(e) {
+    const t = (r) => this.#e(r), n = {
+      getRow: (r) => {
+        const s = this.formArray().at(r);
+        return s ? s.value : null;
+      },
+      updateField: (r, o, s) => {
+        const l = t(r);
+        if (l) {
+          const g = l.get(o);
+          g && (g.setValue(s), g.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((g) => {
+          const w = o.get(g);
+          w?.errors && (s[g] = w.errors, l = !0);
+        }), o.errors && (s._group = o.errors, l = !0), l ? s : null;
+      }
+    };
+    e[le] = n;
+  }
+  /**
+   * Clears the FormArrayContext from the grid element.
+   */
+  #r(e) {
+    delete e[le];
+  }
+  /**
+   * Handles cell-commit events by updating the FormControl in the FormGroup.
+   */
+  #i(e) {
+    const { rowIndex: t, field: n, value: r } = e, o = this.#e(t);
+    if (o) {
+      const s = o.get(n);
+      s && (s.setValue(r), s.markAsDirty(), s.markAsTouched());
+    }
+  }
+}
+Z = E(null), z = b(Z, 0, "GridFormArray", Ae, z), y(Z, 1, z);
+const Ve = /* @__PURE__ */ new Map();
+function it(i) {
+  const e = i.querySelector("tbw-grid-responsive-card");
   if (e)
-    return Pe.get(e);
+    return Ve.get(e);
 }
-var ve, H;
-ve = [y({
+var xe, ee;
+xe = [x({
   selector: "tbw-grid-responsive-card"
 })];
-class x {
-  elementRef = c(C);
+class B {
+  elementRef = v(T);
   /**
    * The ng-template containing the card content.
    */
-  template = L(b);
+  template = k(F);
   /**
    * Effect that registers the template when it becomes available.
    */
-  onTemplateReceived = E(() => {
+  onTemplateReceived = D(() => {
     const e = this.template();
-    e && Pe.set(
+    e && Ve.set(
       this.elementRef.nativeElement,
       e
     );
@@ -150,38 +269,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);
+ee = E(null), B = b(ee, 0, "GridResponsiveCard", xe, B), y(ee, 1, B);
+const Ge = /* @__PURE__ */ new Map();
+function ot(i) {
+  return Ge.get(i);
 }
-var Re, B;
-Re = [y({ selector: "tbw-grid-tool-panel" })];
-class q {
-  elementRef = c(C);
+var Se, te;
+Se = [x({ selector: "tbw-grid-tool-panel" })];
+class U {
+  elementRef = v(T);
   /** Unique panel identifier (required) */
-  id = R.required({ alias: "id" });
+  id = c.required({ alias: "id" });
   /** Panel title shown in accordion header (required) */
-  title = R.required({ alias: "title" });
+  title = c.required({ alias: "title" });
   /** Icon for accordion section header (emoji or text) */
-  icon = R();
+  icon = c();
   /** Tooltip for accordion section header */
-  tooltip = R();
+  tooltip = c();
   /** Panel order priority (lower = first, default: 100) */
-  order = R(100);
+  order = c(100);
   /**
    * Query for the ng-template content child.
    */
-  template = L(b);
+  template = k(F);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = E(() => {
+  onTemplateReceived = D(() => {
     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 n = this.icon();
+      n && t.setAttribute("icon", n);
+      const r = this.tooltip();
+      r && t.setAttribute("tooltip", r), t.setAttribute("order", String(this.order())), Ge.set(t, e);
     }
   });
   /**
@@ -192,30 +311,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);
+te = E(null), U = b(te, 0, "GridToolPanel", Se, U), y(te, 1, U);
+const ce = /* @__PURE__ */ new Map(), ae = /* @__PURE__ */ new Map();
+function st(i) {
+  const e = ce.get(i);
   if (e) return e;
-  const t = n.querySelector("tbw-grid-column-view");
+  const t = i.querySelector("tbw-grid-column-view");
   if (t)
-    return De(t);
+    return Ie(t);
 }
-function Ke(n) {
-  const e = X.get(n);
+function lt(i) {
+  const e = ae.get(i);
   if (e) return e;
-  const t = n.querySelector("tbw-grid-column-editor");
+  const t = i.querySelector("tbw-grid-column-editor");
   if (t)
-    return Te(t);
+    return je(t);
 }
-var we, Y;
-we = [y({ selector: "[tbwRenderer]" })];
-class k {
-  template = c(b);
-  elementRef = c(C);
+var Le, ne;
+Le = [x({ selector: "[tbwRenderer]" })];
+class J {
+  template = v(F);
+  elementRef = v(T);
   columnElement = null;
   constructor() {
-    E(() => {
+    D(() => {
       this.registerTemplate();
     });
   }
@@ -223,10 +342,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, ce.set(e, this.template));
   }
   ngOnDestroy() {
-    this.columnElement && Q.delete(this.columnElement);
+    this.columnElement && ce.delete(this.columnElement);
   }
   /**
    * Static type guard for template context.
@@ -236,15 +355,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);
+ne = E(null), J = b(ne, 0, "TbwRenderer", Le, J), y(ne, 1, J);
+var De, re;
+De = [x({ selector: "[tbwEditor]" })];
+class W {
+  template = v(F);
+  elementRef = v(T);
   columnElement = null;
   constructor() {
-    E(() => {
+    D(() => {
       this.registerTemplate();
     });
   }
@@ -252,10 +371,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, ae.set(e, this.template));
   }
   ngOnDestroy() {
-    this.columnElement && X.delete(this.columnElement);
+    this.columnElement && ae.delete(this.columnElement);
   }
   /**
    * Static type guard for template context.
@@ -265,17 +384,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 {
+re = E(null), W = b(re, 0, "TbwEditor", De, W), y(re, 1, W);
+const qe = new He("GRID_TYPE_DEFAULTS");
+var Pe, ie;
+Pe = [Ye({ providedIn: "root" })];
+class I {
   defaults = /* @__PURE__ */ new Map();
   constructor() {
-    const e = c(Ie, { optional: !0 });
+    const e = v(qe, { optional: !0 });
     if (e)
-      for (const [t, r] of Object.entries(e))
-        this.defaults.set(t, r);
+      for (const [t, n] of Object.entries(e))
+        this.defaults.set(t, n);
   }
   /**
    * Register type-level defaults for a custom type.
@@ -326,23 +445,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 }]);
+ie = E(null), I = b(ie, 0, "GridTypeRegistry", Pe, I), y(ie, 1, I);
+function ft(i) {
+  return Xe([{ provide: qe, useValue: i }]);
 }
-function de(n) {
-  const e = Je(n);
-  return e || De(n);
+function Ce(i) {
+  const e = st(i);
+  return e || Ie(i);
 }
-function pe(n) {
-  const e = Ke(n);
-  return e || Te(n);
+function Ee(i) {
+  const e = lt(i);
+  return e || je(i);
 }
-class Qe {
-  constructor(e, t, r) {
-    this.injector = e, this.appRef = t, this.viewContainerRef = r, window.__ANGULAR_GRID_ADAPTER__ = this;
+class ct {
+  constructor(e, t, n) {
+    this.injector = e, this.appRef = t, this.viewContainerRef = n, window.__ANGULAR_GRID_ADAPTER__ = this;
     try {
-      this.typeRegistry = this.injector.get(P, null);
+      this.typeRegistry = this.injector.get(I, null);
     } catch {
     }
   }
@@ -378,7 +497,7 @@ class Qe {
   processGridConfig(e) {
     if (!e.columns)
       return e;
-    const t = e.columns.map((r) => this.processColumn(r));
+    const t = e.columns.map((n) => this.processColumn(n));
     return {
       ...e,
       columns: t
@@ -393,14 +512,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 && we(e.renderer) && (t.renderer = this.createComponentRenderer(e.renderer)), e.editor && we(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 Ce(e) !== void 0 || Ee(e) !== void 0;
   }
   /**
    * Creates a view renderer function that creates an embedded view
@@ -410,16 +529,16 @@ class Qe {
    * allowing the grid to use its default rendering.
    */
   createRenderer(e) {
-    const t = de(e);
+    const t = Ce(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 (n) => {
+        const r = {
+          $implicit: n.value,
+          value: n.value,
+          row: n.row,
+          column: n.column
+        }, o = this.viewContainerRef.createEmbeddedView(t, r);
+        return this.viewRefs.push(o), o.detectChanges(), o.rootNodes[0];
       };
   }
   /**
@@ -441,47 +560,60 @@ class Qe {
    * As long as the component emits `(commit)` with the new value.
    */
   createEditor(e) {
-    const t = pe(e);
+    const t = Ee(e), n = 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 = (f) => r.commit(f), s = () => r.cancel(), l = new ge(), g = new ge();
+      l.subscribe((f) => r.commit(f)), g.subscribe(() => r.cancel());
+      let w;
+      if (n) {
+        const f = rt(n);
+        if (f?.hasFormGroups) {
+          const S = n.rows;
+          if (S) {
+            const M = S.indexOf(r.row);
+            M >= 0 && (w = f.getControl(M, r.field));
+          }
+        }
+      }
+      const A = {
         $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: w,
         // 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: g
+      }, a = this.viewContainerRef.createEmbeddedView(t, A);
+      this.viewRefs.push(a), a.detectChanges();
+      const R = a.rootNodes[0];
+      return R && R.addEventListener && (R.addEventListener("commit", (f) => {
+        const S = f;
+        r.commit(S.detail);
+      }), R.addEventListener("cancel", () => {
         r.cancel();
-      })), d;
-    } : (console.warn("[AngularGridAdapter] No editor template registered for element"), () => document.createElement("div"));
+      })), R;
+    } : () => document.createElement("div");
   }
   /**
    * Creates a detail renderer function for MasterDetailPlugin.
    * Renders Angular templates for expandable detail rows.
    */
   createDetailRenderer(e) {
-    const t = ue(e);
+    const t = Re(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 (n) => {
+        const r = {
+          $implicit: n,
+          row: n
+        }, 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 +624,16 @@ class Qe {
    * without manual configuration in the Grid directive.
    */
   parseDetailElement(e) {
-    const t = ue(e.closest("tbw-grid"));
+    const t = Re(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 (n) => {
+        const r = {
+          $implicit: n,
+          row: n
+        }, 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 +644,17 @@ class Qe {
    * @returns A card renderer function or undefined if no template is found
    */
   createResponsiveCardRenderer(e) {
-    const t = Ye(e);
+    const t = it(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 (n, r) => {
+        const o = {
+          $implicit: n,
+          row: n,
+          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((g) => l.appendChild(g)), l;
       };
   }
   /**
@@ -530,18 +662,18 @@ class Qe {
    * The renderer creates an Angular template-based panel content.
    */
   createToolPanelRenderer(e) {
-    const t = ze(e);
+    const t = ot(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 n = e.closest("tbw-grid");
+    return (r) => {
+      const o = {
+        $implicit: n ?? r,
+        grid: n ?? 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 +710,10 @@ class Qe {
     const t = this.typeRegistry.get(e);
     if (!t)
       return;
-    const r = {
+    const n = {
       editorParams: t.editorParams
     };
-    return t.renderer && (r.renderer = this.createComponentRenderer(t.renderer)), t.editor && (r.editor = this.createComponentEditor(t.editor)), r;
+    return t.renderer && (n.renderer = this.createComponentRenderer(t.renderer)), t.editor && (n.editor = this.createComponentEditor(t.editor)), n;
   }
   /**
    * Creates a renderer function from an Angular component class.
@@ -589,17 +721,17 @@ class Qe {
    */
   createComponentRenderer(e) {
     return (t) => {
-      const r = document.createElement("span");
-      r.style.display = "contents";
-      const i = ae(e, {
+      const n = document.createElement("span");
+      n.style.display = "contents";
+      const r = he(e, {
         environmentInjector: this.injector,
-        hostElement: r
+        hostElement: n
       });
-      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(), n;
     };
   }
   /**
@@ -608,24 +740,24 @@ class Qe {
    */
   createComponentEditor(e) {
     return (t) => {
-      const r = document.createElement("span");
-      r.style.display = "contents";
-      const i = ae(e, {
+      const n = document.createElement("span");
+      n.style.display = "contents";
+      const r = he(e, {
         environmentInjector: this.injector,
-        hostElement: r
+        hostElement: n
       });
-      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()), n.addEventListener("commit", (s) => {
+        const l = s;
         t.commit(l.detail);
-      }), r.addEventListener("cancel", () => {
+      }), n.addEventListener("cancel", () => {
         t.cancel();
-      }), r;
+      }), n;
     };
   }
   /**
@@ -633,18 +765,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, n) {
+    const r = e[t];
+    r && typeof r.subscribe == "function" && r.subscribe(n);
   }
   /**
    * Sets component inputs using Angular's setInput API.
    * @internal
    */
   setComponentInputs(e, t) {
-    for (const [r, i] of Object.entries(t))
+    for (const [n, r] of Object.entries(t))
       try {
-        e.setInput(r, i);
+        e.setInput(n, r);
       } catch {
       }
   }
@@ -656,24 +788,252 @@ 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);
+function gt() {
+  const i = v(T), e = G(!1), t = G(null), n = G(null);
+  Ke(() => {
+    const u = i.nativeElement.querySelector("tbw-grid");
+    if (!u) {
+      console.warn("[injectGrid] No tbw-grid element found in component");
+      return;
+    }
+    n.set(u), u.ready?.().then(async () => {
+      e.set(!0);
+      const m = u.getConfig?.();
+      m && t.set(m);
+    });
+  });
+  const r = P(() => {
+    const u = t();
+    return u?.columns ? u.columns.filter((m) => !m.hidden) : [];
+  }), o = async () => {
+    const u = n();
+    return u ? u.getConfig?.() ?? null : null;
+  }, s = async () => {
+    const u = n();
+    u && await u.forceLayout?.();
+  }, l = async (u) => {
+    const m = n();
+    m && await m.toggleGroup?.(u);
+  }, g = (u, m) => {
+    n()?.registerStyles?.(u, m);
+  }, w = (u) => {
+    n()?.unregisterStyles?.(u);
+  }, A = () => {
+    const u = n(), m = u?.getPluginByName?.("selection");
+    if (!m) {
+      console.warn("[injectGrid] selectAll requires SelectionPlugin");
+      return;
+    }
+    if (m.config?.mode === "row") {
+      const d = u?.rows ?? [], C = new Set(d.map((h, L) => L));
+      m.selected = C, m.requestAfterRender?.();
+    }
+  }, a = () => {
+    const m = n()?.getPluginByName?.("selection");
+    if (!m) return;
+    const d = m.config?.mode;
+    d === "row" ? m.selected = /* @__PURE__ */ new Set() : (d === "range" || d === "cell") && (m.ranges = []), m.requestAfterRender?.();
+  }, R = () => {
+    const m = n()?.getPluginByName?.("selection");
+    if (!m) return /* @__PURE__ */ new Set();
+    if (m.config?.mode === "row")
+      return new Set(m.selected ?? []);
+    const d = m.ranges ?? [], C = /* @__PURE__ */ new Set();
+    for (const h of d)
+      for (let L = h.startRow; L <= h.endRow; L++)
+        C.add(L);
+    return C;
+  };
+  return {
+    element: n,
+    isReady: e,
+    config: t,
+    visibleColumns: r,
+    getConfig: o,
+    forceLayout: s,
+    toggleGroup: l,
+    registerStyles: g,
+    unregisterStyles: w,
+    selectAll: A,
+    clearSelection: a,
+    getSelectedIndices: R,
+    getSelectedRows: () => {
+      const u = n();
+      if (!u) return [];
+      const m = u.rows ?? [], d = R();
+      return Array.from(d).filter((C) => C >= 0 && C < m.length).map((C) => m[C]);
+    },
+    exportToCsv: (u) => {
+      const d = n()?.getPluginByName?.("export");
+      if (!d) {
+        console.warn("[injectGrid] exportToCsv requires ExportPlugin");
+        return;
+      }
+      d.exportToCsv?.(u);
+    },
+    exportToJson: (u) => {
+      const d = n()?.getPluginByName?.("export");
+      if (!d) {
+        console.warn("[injectGrid] exportToJson requires ExportPlugin");
+        return;
+      }
+      d.exportToJson?.(u);
+    }
+  };
+}
+var Fe, oe;
+Fe = [x()];
+class H {
+  elementRef = v(T);
+  // ============================================================================
+  // Inputs
+  // ============================================================================
+  /**
+   * The cell value. Used when FormControl is not available.
+   * When a FormControl is provided, value is derived from control.value instead.
+   */
+  value = c();
+  /**
+   * The full row data object.
+   */
+  row = c();
+  /**
+   * The column configuration.
+   */
+  column = c();
+  /**
+   * 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 = c();
+  // ============================================================================
+  // Outputs
+  // ============================================================================
+  /**
+   * Emits when the user commits a new value.
+   */
+  commit = p();
+  /**
+   * Emits when the user cancels editing.
+   */
+  cancel = p();
+  // ============================================================================
+  // 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 = P(() => {
+    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 = P(() => this.control()?.invalid ?? !1);
+  /**
+   * Whether the control is dirty (has been modified).
+   * Returns false if no FormControl is available.
+   */
+  isDirty = P(() => this.control()?.dirty ?? !1);
+  /**
+   * Whether the control has been touched.
+   * Returns false if no FormControl is available.
+   */
+  isTouched = P(() => this.control()?.touched ?? !1);
+  /**
+   * Whether the control has any validation errors.
+   */
+  hasErrors = P(() => {
+    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 = P(() => {
+    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 = P(() => {
+    const e = this.control();
+    return e?.errors ? Object.entries(e.errors).map(([t, n]) => this.getErrorMessage(t, n)) : [];
+  });
+  // ============================================================================
+  // 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})`;
+    }
+  }
+}
+oe = E(null), H = b(oe, 0, "BaseGridEditor", Fe, H), y(oe, 1, H);
+var Me, se;
+Me = [x({ selector: "tbw-grid" })];
+class Y {
+  elementRef = v(T);
+  injector = v(Qe);
+  appRef = v(Ze);
+  viewContainerRef = v(et);
   adapter = null;
-  cellCommitListener = null;
   constructor() {
-    E(() => {
+    D(() => {
       const e = this.angularConfig();
-      if (!e || !this.adapter) return;
-      const t = this.adapter.processGridConfig(e), r = this.elementRef.nativeElement;
-      r.gridConfig = t;
+      if (!this.adapter) return;
+      const t = e ? this.adapter.processGridConfig(e) : {}, n = this.createFeaturePlugins(), r = t.plugins || [], o = [...n, ...r], s = this.elementRef.nativeElement;
+      s.gridConfig = {
+        ...t,
+        plugins: o.length > 0 ? o : void 0
+      };
     });
   }
-  rowCommitListener = null;
   /**
    * Custom CSS styles to inject into the grid.
    * Use this to style custom cell renderers, editors, or detail panels.
@@ -691,7 +1051,7 @@ class G {
    * <tbw-grid [customStyles]="customStyles">...</tbw-grid>
    * ```
    */
-  customStyles = R();
+  customStyles = c();
   /**
    * Angular-specific grid configuration that supports component classes for renderers/editors.
    *
@@ -728,7 +1088,387 @@ class G {
    * ```
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  angularConfig = R();
+  angularConfig = c();
+  // ═══════════════════════════════════════════════════════════════════════════
+  // FEATURE INPUTS - Declarative plugin configuration
+  // ═══════════════════════════════════════════════════════════════════════════
+  /**
+   * Enable cell/row/range selection.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/selection';
+   * ```
+   *
+   * @example
+   * ```html
+   * <!-- Shorthand - just the mode -->
+   * <tbw-grid [selection]="'range'" />
+   *
+   * <!-- Full config object -->
+   * <tbw-grid [selection]="{ mode: 'range', checkbox: true }" />
+   * ```
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  selection = c();
+  /**
+   * Enable inline cell editing.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/editing';
+   * ```
+   *
+   * @example
+   * ```html
+   * <!-- Enable with default trigger (dblclick) -->
+   * <tbw-grid [editing]="true" />
+   *
+   * <!-- Specify trigger -->
+   * <tbw-grid [editing]="'click'" />
+   * <tbw-grid [editing]="'dblclick'" />
+   * <tbw-grid [editing]="'manual'" />
+   * ```
+   */
+  editing = c();
+  /**
+   * Enable clipboard copy/paste. Requires selection to be enabled.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/clipboard';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [selection]="'range'" [clipboard]="true" />
+   * ```
+   */
+  clipboard = c();
+  /**
+   * Enable right-click context menu.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/context-menu';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [contextMenu]="true" />
+   * ```
+   */
+  contextMenu = c();
+  /**
+   * Enable column sorting.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/sorting';
+   * ```
+   *
+   * @example
+   * ```html
+   * <!-- Enable with default (multi-sort) -->
+   * <tbw-grid [sorting]="true" />
+   *
+   * <!-- Single column sort only -->
+   * <tbw-grid [sorting]="'single'" />
+   *
+   * <!-- Multi-column sort -->
+   * <tbw-grid [sorting]="'multi'" />
+   * ```
+   */
+  sorting = c();
+  /**
+   * Enable column filtering.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/filtering';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [filtering]="true" />
+   * <tbw-grid [filtering]="{ debounceMs: 200 }" />
+   * ```
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  filtering = c();
+  /**
+   * Enable column drag-to-reorder.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/reorder';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [reorder]="true" />
+   * ```
+   */
+  reorder = c();
+  /**
+   * Enable column visibility toggle panel.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/visibility';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [visibility]="true" />
+   * ```
+   */
+  visibility = c();
+  /**
+   * Enable pinned/sticky columns.
+   * Columns are pinned via the `sticky` column property.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/pinned-columns';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [pinnedColumns]="true" [columns]="[
+   *   { field: 'id', sticky: 'left' },
+   *   { field: 'name' },
+   *   { field: 'actions', sticky: 'right' }
+   * ]" />
+   * ```
+   */
+  pinnedColumns = c();
+  /**
+   * Enable multi-level column headers (column groups).
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/grouping-columns';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [groupingColumns]="{ columnGroups: [...] }" />
+   * ```
+   */
+  groupingColumns = c();
+  /**
+   * Enable horizontal column virtualization for wide grids.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/column-virtualization';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [columnVirtualization]="true" />
+   * ```
+   */
+  columnVirtualization = c();
+  /**
+   * Enable row drag-to-reorder.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/row-reorder';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [rowReorder]="true" />
+   * ```
+   */
+  rowReorder = c();
+  /**
+   * Enable row grouping by field values.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/grouping-rows';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [groupingRows]="{ groupBy: ['department'] }" />
+   * ```
+   */
+  groupingRows = c();
+  /**
+   * Enable pinned rows (aggregation/status bar).
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/pinned-rows';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [pinnedRows]="{ bottom: [{ type: 'aggregation' }] }" />
+   * ```
+   */
+  pinnedRows = c();
+  /**
+   * Enable hierarchical tree view.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/tree';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [tree]="{ childrenField: 'children' }" />
+   * ```
+   */
+  tree = c();
+  /**
+   * Enable master-detail expandable rows.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/master-detail';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [masterDetail]="{ detailRenderer: detailFn }" />
+   * ```
+   */
+  masterDetail = c();
+  /**
+   * Enable responsive card layout for narrow viewports.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/responsive';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [responsive]="{ breakpoint: 768 }" />
+   * ```
+   */
+  responsive = c();
+  /**
+   * Enable undo/redo for cell edits. Requires editing to be enabled.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/undo-redo';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [editing]="'dblclick'" [undoRedo]="true" />
+   * ```
+   */
+  undoRedo = c();
+  /**
+   * Enable CSV/JSON export functionality.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/export';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [export]="true" />
+   * <tbw-grid [export]="{ filename: 'data.csv' }" />
+   * ```
+   */
+  exportFeature = c();
+  /**
+   * Enable print functionality.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/print';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [print]="true" />
+   * ```
+   */
+  print = c();
+  /**
+   * Enable pivot table functionality.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/pivot';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [pivot]="{ rowFields: ['category'], valueField: 'sales' }" />
+   * ```
+   */
+  pivot = c();
+  /**
+   * Enable server-side data operations.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/server-side';
+   * ```
+   *
+   * @example
+   * ```html
+   * <tbw-grid [serverSide]="{ dataSource: fetchDataFn }" />
+   * ```
+   */
+  serverSide = c();
+  // ═══════════════════════════════════════════════════════════════════════════
+  // EVENT OUTPUTS - All grid events
+  // ═══════════════════════════════════════════════════════════════════════════
+  /**
+   * Emitted when a cell is clicked.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (cellClick)="onCellClick($event)">...</tbw-grid>
+   * ```
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  cellClick = p();
+  /**
+   * Emitted when a row is clicked.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (rowClick)="onRowClick($event)">...</tbw-grid>
+   * ```
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  rowClick = p();
+  /**
+   * Emitted when a cell is activated (Enter key or double-click).
+   *
+   * @example
+   * ```html
+   * <tbw-grid (cellActivate)="onCellActivate($event)">...</tbw-grid>
+   * ```
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  cellActivate = p();
+  /**
+   * Emitted when a cell value changes (before commit).
+   *
+   * @example
+   * ```html
+   * <tbw-grid (cellChange)="onCellChange($event)">...</tbw-grid>
+   * ```
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  cellChange = p();
   /**
    * Emitted when a cell value is committed (inline editing).
    * Provides the row, field, new value, and change tracking information.
@@ -744,7 +1484,7 @@ class G {
    * }
    * ```
    */
-  cellCommit = le();
+  cellCommit = p();
   /**
    * Emitted when a row's values are committed (bulk/row editing).
    * Provides the row data and change tracking information.
@@ -754,17 +1494,240 @@ class G {
    * <tbw-grid (rowCommit)="onRowCommit($event)">...</tbw-grid>
    * ```
    */
-  rowCommit = le();
+  rowCommit = p();
+  /**
+   * Emitted when the changed rows are reset.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (changedRowsReset)="onChangedRowsReset($event)">...</tbw-grid>
+   * ```
+   */
+  changedRowsReset = p();
+  /**
+   * Emitted when sort state changes.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (sortChange)="onSortChange($event)">...</tbw-grid>
+   * ```
+   */
+  sortChange = p();
+  /**
+   * Emitted when filter values change.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (filterChange)="onFilterChange($event)">...</tbw-grid>
+   * ```
+   */
+  filterChange = p();
+  /**
+   * Emitted when a column is resized.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (columnResize)="onColumnResize($event)">...</tbw-grid>
+   * ```
+   */
+  columnResize = p();
+  /**
+   * Emitted when a column is moved via drag-and-drop.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (columnMove)="onColumnMove($event)">...</tbw-grid>
+   * ```
+   */
+  columnMove = p();
+  /**
+   * Emitted when column visibility changes.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (columnVisibility)="onColumnVisibility($event)">...</tbw-grid>
+   * ```
+   */
+  columnVisibility = p();
+  /**
+   * Emitted when column state changes (resize, reorder, visibility).
+   *
+   * @example
+   * ```html
+   * <tbw-grid (columnStateChange)="onColumnStateChange($event)">...</tbw-grid>
+   * ```
+   */
+  columnStateChange = p();
+  /**
+   * Emitted when selection changes.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (selectionChange)="onSelectionChange($event)">...</tbw-grid>
+   * ```
+   */
+  selectionChange = p();
+  /**
+   * Emitted when a row is moved via drag-and-drop.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (rowMove)="onRowMove($event)">...</tbw-grid>
+   * ```
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  rowMove = p();
+  /**
+   * Emitted when a group is expanded or collapsed.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (groupToggle)="onGroupToggle($event)">...</tbw-grid>
+   * ```
+   */
+  groupToggle = p();
+  /**
+   * Emitted when a tree node is expanded.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (treeExpand)="onTreeExpand($event)">...</tbw-grid>
+   * ```
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  treeExpand = p();
+  /**
+   * Emitted when a detail panel is expanded or collapsed.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (detailExpand)="onDetailExpand($event)">...</tbw-grid>
+   * ```
+   */
+  detailExpand = p();
+  /**
+   * Emitted when responsive mode changes (table ↔ card).
+   *
+   * @example
+   * ```html
+   * <tbw-grid (responsiveChange)="onResponsiveChange($event)">...</tbw-grid>
+   * ```
+   */
+  responsiveChange = p();
+  /**
+   * Emitted when cells are copied to clipboard.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (copy)="onCopy($event)">...</tbw-grid>
+   * ```
+   */
+  copy = p();
+  /**
+   * Emitted when cells are pasted from clipboard.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (paste)="onPaste($event)">...</tbw-grid>
+   * ```
+   */
+  paste = p();
+  /**
+   * Emitted when undo/redo is performed.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (undoRedoAction)="onUndoRedo($event)">...</tbw-grid>
+   * ```
+   */
+  undoRedoAction = p();
+  /**
+   * Emitted when export completes.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (exportComplete)="onExportComplete($event)">...</tbw-grid>
+   * ```
+   */
+  exportComplete = p();
+  /**
+   * Emitted when print starts.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (printStart)="onPrintStart($event)">...</tbw-grid>
+   * ```
+   */
+  printStart = p();
+  /**
+   * Emitted when print completes.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (printComplete)="onPrintComplete($event)">...</tbw-grid>
+   * ```
+   */
+  printComplete = p();
+  // Map of output names to event names for automatic wiring
+  eventOutputMap = {
+    cellClick: "cell-click",
+    rowClick: "row-click",
+    cellActivate: "cell-activate",
+    cellChange: "cell-change",
+    cellCommit: "cell-commit",
+    rowCommit: "row-commit",
+    changedRowsReset: "changed-rows-reset",
+    sortChange: "sort-change",
+    filterChange: "filter-change",
+    columnResize: "column-resize",
+    columnMove: "column-move",
+    columnVisibility: "column-visibility",
+    columnStateChange: "column-state-change",
+    selectionChange: "selection-change",
+    rowMove: "row-move",
+    groupToggle: "group-toggle",
+    treeExpand: "tree-expand",
+    detailExpand: "detail-expand",
+    responsiveChange: "responsive-change",
+    copy: "copy",
+    paste: "paste",
+    undoRedoAction: "undo-redo",
+    exportComplete: "export-complete",
+    printStart: "print-start",
+    printComplete: "print-complete"
+  };
+  // Store event listeners for cleanup
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  eventListeners = /* @__PURE__ */ new Map();
   ngOnInit() {
-    this.adapter = new Qe(this.injector, this.appRef, this.viewContainerRef), He.registerAdapter(this.adapter);
+    this.adapter = new ct(this.injector, this.appRef, this.viewContainerRef), nt.registerAdapter(this.adapter);
     const e = this.elementRef.nativeElement;
-    this.cellCommitListener = (t) => {
-      const r = t.detail;
-      this.cellCommit.emit(r);
-    }, e.addEventListener("cell-commit", this.cellCommitListener), this.rowCommitListener = (t) => {
-      const r = t.detail;
-      this.rowCommit.emit(r);
-    }, e.addEventListener("row-commit", this.rowCommitListener), e.__frameworkAdapter = this.adapter;
+    this.setupEventListeners(e), e.__frameworkAdapter = this.adapter;
+  }
+  /**
+   * Sets up event listeners for all outputs using the eventOutputMap.
+   */
+  setupEventListeners(e) {
+    for (const [t, n] of Object.entries(this.eventOutputMap)) {
+      const r = (o) => {
+        const s = o.detail;
+        this[t].emit(s);
+      };
+      e.addEventListener(n, r), this.eventListeners.set(n, r);
+    }
+  }
+  /**
+   * Creates plugins from feature inputs.
+   * Uses the feature registry to allow tree-shaking - only imported features are bundled.
+   * Returns the array of created plugins (doesn't modify grid).
+   */
+  createFeaturePlugins() {
+    const e = [], t = (n, r) => {
+      if (r == null || r === !1) return;
+      const o = tt(n, r);
+      o && e.push(o);
+    };
+    return t("selection", this.selection()), t("editing", this.editing()), t("clipboard", this.clipboard()), t("contextMenu", this.contextMenu()), t("sorting", this.sorting()), t("filtering", this.filtering()), t("reorder", this.reorder()), t("visibility", this.visibility()), t("pinnedColumns", this.pinnedColumns()), t("groupingColumns", this.groupingColumns()), t("columnVirtualization", this.columnVirtualization()), t("rowReorder", this.rowReorder()), t("groupingRows", this.groupingRows()), t("pinnedRows", this.pinnedRows()), t("tree", this.tree()), t("masterDetail", this.masterDetail()), t("responsive", this.responsive()), t("undoRedo", this.undoRedo()), t("export", this.exportFeature()), t("print", this.print()), t("pivot", this.pivot()), t("serverSide", this.serverSide()), e;
   }
   ngAfterContentInit() {
     const e = this.elementRef.nativeElement;
@@ -785,30 +1748,30 @@ class G {
   /**
    * Configures the MasterDetailPlugin after Angular templates are registered.
    * - If plugin exists: refresh its detail renderer
-   * - If plugin doesn't exist but <tbw-grid-detail> is present: create and add the plugin
+   * - If plugin doesn't exist but <tbw-grid-detail> is present: dynamically import and add the plugin
    */
-  configureMasterDetail(e) {
+  async configureMasterDetail(e) {
     if (!this.adapter) return;
-    const t = e.getPlugin?.(ce);
+    const t = e.gridConfig?.plugins?.find((R) => R.name === "masterDetail");
     if (t && typeof t.refreshDetailRenderer == "function") {
       t.refreshDetailRenderer();
       return;
     }
-    const r = e.querySelector("tbw-grid-detail");
+    const n = e.querySelector("tbw-grid-detail");
+    if (!n) return;
+    const r = this.adapter.createDetailRenderer(e);
     if (!r) return;
-    const i = this.adapter.createDetailRenderer(e);
-    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 o = n.getAttribute("animation");
+    let s = "slide";
+    o === "false" ? s = !1 : o === "fade" && (s = "fade");
+    const l = n.getAttribute("showExpandColumn") !== "false", { MasterDetailPlugin: g } = await import("@toolbox-web/grid/plugins/master-detail"), w = new g({
+      detailRenderer: r,
       showExpandColumn: l,
-      animation: o
-    }), u = e.gridConfig || {}, d = u.plugins || [];
+      animation: s
+    }), A = e.gridConfig || {}, a = A.plugins || [];
     e.gridConfig = {
-      ...u,
-      plugins: [...d, w]
+      ...A,
+      plugins: [...a, w]
     };
   }
   /**
@@ -818,18 +1781,18 @@ 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 n = this.adapter.createResponsiveCardRenderer(e);
+    if (!n) return;
+    const r = e.gridConfig?.plugins?.find((o) => o.name === "responsive");
+    if (r && typeof r.setCardRenderer == "function") {
+      r.setCardRenderer(n);
       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";
+  import { ResponsivePlugin } from "@toolbox-web/grid/plugins/responsive";
   gridConfig = {
     plugins: [new ResponsivePlugin({ breakpoint: 600 })]
   };`
@@ -837,24 +1800,39 @@ Add ResponsivePlugin to your gridConfig.plugins array:
   }
   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);
+    if (e) {
+      for (const [t, n] of this.eventListeners)
+        e.removeEventListener(t, n);
+      this.eventListeners.clear();
+    }
+    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);
+se = E(null), Y = b(se, 0, "Grid", Me, Y), y(se, 1, Y);
 export {
-  Qe as AngularGridAdapter,
-  Ie as GRID_TYPE_DEFAULTS,
-  G as Grid,
-  M as GridColumnEditor,
-  V 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
+  ct as AngularGridAdapter,
+  H as BaseGridEditor,
+  qe as GRID_TYPE_DEFAULTS,
+  Y as Grid,
+  q as GridColumnEditor,
+  _ as GridColumnView,
+  $ as GridDetailView,
+  z as GridFormArray,
+  B as GridResponsiveCard,
+  U as GridToolPanel,
+  I as GridTypeRegistry,
+  W as TbwCellEditor,
+  J as TbwCellView,
+  W as TbwEditor,
+  J as TbwRenderer,
+  wt as clearFeatureRegistry,
+  tt as createPluginFromFeature,
+  Rt as getFeatureFactory,
+  rt as getFormArrayContext,
+  Ct as getRegisteredFeatures,
+  gt as injectGrid,
+  we as isComponentClass,
+  Et as isFeatureRegistered,
+  ft as provideGridTypeDefaults,
+  yt as registerFeature
 };