@toolbox-web/grid-angular 0.5.0 → 0.7.0

package/index.js

@@ -1,55 +1,56 @@
-var qe = Object.create;
-var j = Object.defineProperty;
+var _e = Object.create;
+var N = 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 pe = (i, e) => (e = Symbol[i]) ? e : /* @__PURE__ */ Symbol.for("Symbol." + i), j = (i) => {
+  throw TypeError(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;
-}, 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);
+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 y = (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]), b = (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;
+}, T = (i, e, t, n, r, o) => {
+  var s, l, f, g, E, a = e & 7, R = !!(e & 8), h = !!(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 && (!h && !R && (r = r.prototype), a < 5 && (a > 3 || !h) && $e(a < 4 ? r : { get [t]() {
+    return me(this, o);
+  }, set [t](v) {
+    return de(this, o, v);
   } }, t));
-  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;
+  a ? h && a < 4 && ue(o, (a > 2 ? "set " : a > 1 ? "get " : "") + t) : ue(r, t);
+  for (var C = n.length - 1; C >= 0; C--)
+    g = Be(a, t, f = {}, i[3], m), a && (g.static = R, g.private = h, E = g.access = { has: h ? (v) => Je(r, v) : (v) => t in v }, a ^ 3 && (E.get = h ? (v) => (a ^ 1 ? me : We)(v, r, a ^ 4 ? o : d.get) : (v) => v[t]), a > 2 && (E.set = h ? (v, L) => de(v, r, L, a ^ 4 ? o : d.set) : (v, L) => v[t] = L)), l = (0, n[C])(a ? a < 4 ? h ? o : d[M] : a > 4 ? void 0 : { get: d.get, set: d.set } : r, g), f._ = 1, a ^ 4 || l === void 0 ? O(l) && (a > 4 ? u.unshift(l) : a ? h ? 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), h ? a ^ 4 ? o : d : r;
 };
-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)
+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 w, ElementRef as A, 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 Se = /* @__PURE__ */ new Map();
-function Pe(n) {
-  return Se.get(n);
+const Oe = /* @__PURE__ */ new Map();
+function je(i) {
+  return Oe.get(i);
 }
-var Ce, X;
-Ce = [E({ selector: "tbw-grid-column-editor" })];
-class V {
-  elementRef = u(R);
+var ye, X;
+ye = [x({ selector: "tbw-grid-column-editor" })];
+class q {
+  elementRef = w(A);
   /**
    * Query for the ng-template content child.
    */
-  template = x(L);
+  template = k(F);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = y(() => {
+  onTemplateReceived = D(() => {
     const e = this.template();
-    e && Se.set(this.elementRef.nativeElement, e);
+    e && Oe.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -59,23 +60,23 @@ class V {
     return !0;
   }
 }
-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);
+X = y(null), q = T(X, 0, "GridColumnEditor", ye, q), b(X, 1, q);
+const ke = /* @__PURE__ */ new Map();
+function Ie(i) {
+  return ke.get(i);
 }
-var ye, z;
-ye = [E({ selector: "tbw-grid-column-view" })];
-class N {
-  elementRef = u(R);
+var be, K;
+be = [x({ selector: "tbw-grid-column-view" })];
+class _ {
+  elementRef = w(A);
   /**
    * Query for the ng-template content child.
    */
-  template = x(L);
+  template = k(F);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = y(() => {
+  onTemplateReceived = D(() => {
     const e = this.template();
-    e && Fe.set(this.elementRef.nativeElement, e);
+    e && ke.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -85,29 +86,29 @@ class N {
     return !0;
   }
 }
-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");
+K = y(null), _ = T(K, 0, "GridColumnView", be, _), b(K, 1, _);
+const Ne = /* @__PURE__ */ new Map();
+function Re(i) {
+  const e = i.querySelector("tbw-grid-detail");
   if (e)
-    return ke.get(e);
+    return Ne.get(e);
 }
-var be, B;
-be = [E({ selector: "tbw-grid-detail" })];
-class _ {
-  elementRef = u(R);
+var Te, Q;
+Te = [x({ selector: "tbw-grid-detail" })];
+class $ {
+  elementRef = w(A);
   /** Whether to show the expand/collapse column. Default: true */
-  showExpandColumn = f(!0);
+  showExpandColumn = c(!0);
   /** Animation style for expand/collapse. Default: 'slide' */
-  animation = f("slide");
+  animation = c("slide");
   /**
    * Query for the ng-template content child.
    */
-  template = x(L);
+  template = k(F);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = y(() => {
+  onTemplateReceived = D(() => {
     const e = this.template();
-    e && ke.set(this.elementRef.nativeElement, e);
+    e && Ne.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -117,62 +118,62 @@ class _ {
     return !0;
   }
 }
-B = h(null), _ = v(B, 0, "GridDetailView", be, _), g(B, 1, _);
-const ie = /* @__PURE__ */ Symbol("formArrayContext");
-function rt(n) {
-  return n[ie];
+Q = y(null), $ = T(Q, 0, "GridDetailView", Te, $), b(Q, 1, $);
+const le = /* @__PURE__ */ Symbol("formArrayContext");
+function rt(i) {
+  return i[le];
 }
-var Te, J;
-Te = [E({
+var Ae, Z;
+Ae = [x({
   selector: "tbw-grid[formArray]"
 })];
-class G {
-  elementRef = u(R);
+class z {
+  elementRef = w(A);
   cellCommitListener = null;
   touchListener = null;
   /**
    * The FormArray to bind to the grid.
    */
-  formArray = f.required();
+  formArray = c.required();
   /**
    * Effect that syncs the FormArray value to the grid rows.
    */
-  syncFormArrayToGrid = y(() => {
+  syncFormArrayToGrid = D(() => {
     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 && (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.#n(e));
+    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 he;
+    return e.length === 0 ? !1 : e.at(0) instanceof ve;
   }
   /**
    * Gets the FormGroup at a specific row index.
    */
   #e(e) {
-    const i = this.formArray().at(e);
-    return i instanceof he ? i : void 0;
+    const n = this.formArray().at(e);
+    return n instanceof ve ? n : void 0;
   }
   /**
    * Stores the FormArrayContext on the grid element.
    */
-  #r(e) {
-    const t = (r) => this.#e(r), i = {
+  #n(e) {
+    const t = (r) => this.#e(r), n = {
       getRow: (r) => {
         const s = this.formArray().at(r);
         return s ? s.value : null;
@@ -180,8 +181,8 @@ class G {
       updateField: (r, o, s) => {
         const l = t(r);
         if (l) {
-          const m = l.get(o);
-          m && (m.setValue(s), m.markAsDirty());
+          const f = l.get(o);
+          f && (f.setValue(s), f.markAsDirty());
         }
       },
       getValue: () => this.formArray().getRawValue(),
@@ -209,52 +210,52 @@ class G {
         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);
+        return Object.keys(o.controls).forEach((f) => {
+          const g = o.get(f);
+          g?.errors && (s[f] = g.errors, l = !0);
         }), o.errors && (s._group = o.errors, l = !0), l ? s : null;
       }
     };
-    e[ie] = i;
+    e[le] = n;
   }
   /**
    * Clears the FormArrayContext from the grid element.
    */
-  #n(e) {
-    delete e[ie];
+  #r(e) {
+    delete e[le];
   }
   /**
    * 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);
+    const { rowIndex: t, field: n, value: r } = e, o = this.#e(t);
     if (o) {
-      const s = o.get(i);
+      const s = o.get(n);
       s && (s.setValue(r), s.markAsDirty(), s.markAsTouched());
     }
   }
 }
-J = h(null), G = v(J, 0, "GridFormArray", Te, G), g(J, 1, G);
+Z = y(null), z = T(Z, 0, "GridFormArray", Ae, z), b(Z, 1, z);
 const Ve = /* @__PURE__ */ new Map();
-function nt(n) {
-  const e = n.querySelector("tbw-grid-responsive-card");
+function it(i) {
+  const e = i.querySelector("tbw-grid-responsive-card");
   if (e)
     return Ve.get(e);
 }
-var Ae, K;
-Ae = [E({
+var xe, ee;
+xe = [x({
   selector: "tbw-grid-responsive-card"
 })];
-class q {
-  elementRef = u(R);
+class B {
+  elementRef = w(A);
   /**
    * The ng-template containing the card content.
    */
-  template = x(L);
+  template = k(F);
   /**
    * Effect that registers the template when it becomes available.
    */
-  onTemplateReceived = y(() => {
+  onTemplateReceived = D(() => {
     const e = this.template();
     e && Ve.set(
       this.elementRef.nativeElement,
@@ -268,38 +269,38 @@ class q {
     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);
+ee = y(null), B = T(ee, 0, "GridResponsiveCard", xe, B), b(ee, 1, B);
+const Ge = /* @__PURE__ */ new Map();
+function ot(i) {
+  return Ge.get(i);
 }
-var Le, Q;
-Le = [E({ selector: "tbw-grid-tool-panel" })];
-class $ {
-  elementRef = u(R);
+var Se, te;
+Se = [x({ selector: "tbw-grid-tool-panel" })];
+class U {
+  elementRef = w(A);
   /** Unique panel identifier (required) */
-  id = f.required({ alias: "id" });
+  id = c.required({ alias: "id" });
   /** Panel title shown in accordion header (required) */
-  title = f.required({ alias: "title" });
+  title = c.required({ alias: "title" });
   /** Icon for accordion section header (emoji or text) */
-  icon = f();
+  icon = c();
   /** Tooltip for accordion section header */
-  tooltip = f();
+  tooltip = c();
   /** Panel order priority (lower = first, default: 100) */
-  order = f(100);
+  order = c(100);
   /**
    * Query for the ng-template content child.
    */
-  template = x(L);
+  template = k(F);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = y(() => {
+  onTemplateReceived = D(() => {
     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 n = this.icon();
+      n && t.setAttribute("icon", n);
       const r = this.tooltip();
-      r && t.setAttribute("tooltip", r), t.setAttribute("order", String(this.order())), Ne.set(t, e);
+      r && t.setAttribute("tooltip", r), t.setAttribute("order", String(this.order())), Ge.set(t, e);
     }
   });
   /**
@@ -310,30 +311,30 @@ class $ {
     return !0;
   }
 }
-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);
+te = y(null), U = T(te, 0, "GridToolPanel", Se, U), b(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 je(t);
+    return Ie(t);
 }
-function st(n) {
-  const e = se.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 Pe(t);
+    return je(t);
 }
-var De, Z;
-De = [E({ selector: "[tbwRenderer]" })];
-class U {
-  template = u(L);
-  elementRef = u(R);
+var Le, ne;
+Le = [x({ selector: "[tbwRenderer]" })];
+class J {
+  template = w(F);
+  elementRef = w(A);
   columnElement = null;
   constructor() {
-    y(() => {
+    D(() => {
       this.registerTemplate();
     });
   }
@@ -341,10 +342,10 @@ class U {
     let e = this.elementRef.nativeElement?.parentElement;
     for (; e && e.tagName !== "TBW-GRID-COLUMN"; )
       e = e.parentElement;
-    e && (this.columnElement = e, oe.set(e, this.template));
+    e && (this.columnElement = e, ce.set(e, this.template));
   }
   ngOnDestroy() {
-    this.columnElement && oe.delete(this.columnElement);
+    this.columnElement && ce.delete(this.columnElement);
   }
   /**
    * Static type guard for template context.
@@ -354,15 +355,15 @@ class U {
     return !0;
   }
 }
-Z = h(null), U = v(Z, 0, "TbwRenderer", De, U), g(Z, 1, U);
-var Oe, ee;
-Oe = [E({ selector: "[tbwEditor]" })];
+ne = y(null), J = T(ne, 0, "TbwRenderer", Le, J), b(ne, 1, J);
+var De, re;
+De = [x({ selector: "[tbwEditor]" })];
 class W {
-  template = u(L);
-  elementRef = u(R);
+  template = w(F);
+  elementRef = w(A);
   columnElement = null;
   constructor() {
-    y(() => {
+    D(() => {
       this.registerTemplate();
     });
   }
@@ -370,10 +371,10 @@ class W {
     let e = this.elementRef.nativeElement?.parentElement;
     for (; e && e.tagName !== "TBW-GRID-COLUMN"; )
       e = e.parentElement;
-    e && (this.columnElement = e, se.set(e, this.template));
+    e && (this.columnElement = e, ae.set(e, this.template));
   }
   ngOnDestroy() {
-    this.columnElement && se.delete(this.columnElement);
+    this.columnElement && ae.delete(this.columnElement);
   }
   /**
    * Static type guard for template context.
@@ -383,17 +384,17 @@ class W {
     return !0;
   }
 }
-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 {
+re = y(null), W = T(re, 0, "TbwEditor", De, W), b(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 = u(_e, { optional: !0 });
+    const e = w(qe, { optional: !0 });
     if (e)
-      for (const [t, i] of Object.entries(e))
-        this.defaults.set(t, i);
+      for (const [t, n] of Object.entries(e))
+        this.defaults.set(t, n);
   }
   /**
    * Register type-level defaults for a custom type.
@@ -444,23 +445,23 @@ class M {
       };
   }
 }
-te = h(null), M = v(te, 0, "GridTypeRegistry", Ie, M), g(te, 1, M);
-function ft(n) {
-  return Je([{ provide: _e, useValue: n }]);
+ie = y(null), I = T(ie, 0, "GridTypeRegistry", Pe, I), b(ie, 1, I);
+function ft(i) {
+  return Xe([{ provide: qe, useValue: i }]);
 }
-function Re(n) {
-  const e = ot(n);
-  return e || je(n);
+function Ce(i) {
+  const e = st(i);
+  return e || Ie(i);
 }
-function Ee(n) {
-  const e = st(n);
-  return e || Pe(n);
+function Ee(i) {
+  const e = lt(i);
+  return e || je(i);
 }
-class lt {
-  constructor(e, t, i) {
-    this.injector = e, this.appRef = t, this.viewContainerRef = i, 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(M, null);
+      this.typeRegistry = this.injector.get(I, null);
     } catch {
     }
   }
@@ -496,7 +497,7 @@ class lt {
   processGridConfig(e) {
     if (!e.columns)
       return e;
-    const t = e.columns.map((i) => this.processColumn(i));
+    const t = e.columns.map((n) => this.processColumn(n));
     return {
       ...e,
       columns: t
@@ -511,14 +512,14 @@ class lt {
    */
   processColumn(e) {
     const t = { ...e };
-    return e.renderer && ve(e.renderer) && (t.renderer = this.createComponentRenderer(e.renderer)), e.editor && ve(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 Re(e) !== void 0 || Ee(e) !== void 0;
+    return Ce(e) !== void 0 || Ee(e) !== void 0;
   }
   /**
    * Creates a view renderer function that creates an embedded view
@@ -528,14 +529,14 @@ class lt {
    * allowing the grid to use its default rendering.
    */
   createRenderer(e) {
-    const t = Re(e);
+    const t = Ce(e);
     if (t)
-      return (i) => {
+      return (n) => {
         const r = {
-          $implicit: i.value,
-          value: i.value,
-          row: i.row,
-          column: i.column
+          $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];
       };
@@ -559,22 +560,22 @@ class lt {
    * As long as the component emits `(commit)` with the new value.
    */
   createEditor(e) {
-    const t = Ee(e), i = e.closest("tbw-grid");
+    const t = Ee(e), n = 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 o = (h) => r.commit(h), s = () => r.cancel(), l = new ge(), f = new ge();
+      l.subscribe((h) => r.commit(h)), f.subscribe(() => r.cancel());
+      let g;
+      if (n) {
+        const h = rt(n);
+        if (h?.hasFormGroups) {
+          const S = n.rows;
+          if (S) {
+            const M = S.indexOf(r.row);
+            M >= 0 && (g = h.getControl(M, r.field));
           }
         }
       }
-      const T = {
+      const E = {
         $implicit: r.value,
         value: r.value,
         row: r.row,
@@ -583,32 +584,32 @@ class lt {
         onCommit: o,
         onCancel: s,
         // FormControl from FormArray (if available)
-        control: d,
+        control: g,
         // Deprecated: EventEmitters (for backwards compatibility)
         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", () => {
+        cancel: f
+      }, a = this.viewContainerRef.createEmbeddedView(t, E);
+      this.viewRefs.push(a), a.detectChanges();
+      const R = a.rootNodes[0];
+      return R && R.addEventListener && (R.addEventListener("commit", (h) => {
+        const S = h;
+        r.commit(S.detail);
+      }), R.addEventListener("cancel", () => {
         r.cancel();
-      })), C;
-    } : (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 = we(e);
+    const t = Re(e);
     if (t)
-      return (i) => {
+      return (n) => {
         const r = {
-          $implicit: i,
-          row: i
+          $implicit: n,
+          row: n
         }, o = this.viewContainerRef.createEmbeddedView(t, r);
         this.viewRefs.push(o), o.detectChanges();
         const s = document.createElement("div");
@@ -623,12 +624,12 @@ class lt {
    * without manual configuration in the Grid directive.
    */
   parseDetailElement(e) {
-    const t = we(e.closest("tbw-grid"));
+    const t = Re(e.closest("tbw-grid"));
     if (t)
-      return (i) => {
+      return (n) => {
         const r = {
-          $implicit: i,
-          row: i
+          $implicit: n,
+          row: n
         }, o = this.viewContainerRef.createEmbeddedView(t, r);
         this.viewRefs.push(o), o.detectChanges();
         const s = document.createElement("div");
@@ -643,17 +644,17 @@ class lt {
    * @returns A card renderer function or undefined if no template is found
    */
   createResponsiveCardRenderer(e) {
-    const t = nt(e);
+    const t = it(e);
     if (t)
-      return (i, r) => {
+      return (n, r) => {
         const o = {
-          $implicit: i,
-          row: i,
+          $implicit: n,
+          row: n,
           index: r
         }, s = this.viewContainerRef.createEmbeddedView(t, o);
         this.viewRefs.push(s), s.detectChanges();
         const l = document.createElement("div");
-        return s.rootNodes.forEach((m) => l.appendChild(m)), l;
+        return s.rootNodes.forEach((f) => l.appendChild(f)), l;
       };
   }
   /**
@@ -661,14 +662,14 @@ class lt {
    * The renderer creates an Angular template-based panel content.
    */
   createToolPanelRenderer(e) {
-    const t = it(e);
+    const t = ot(e);
     if (!t)
       return;
-    const i = e.closest("tbw-grid");
+    const n = e.closest("tbw-grid");
     return (r) => {
       const o = {
-        $implicit: i ?? r,
-        grid: i ?? r
+        $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);
@@ -709,10 +710,10 @@ class lt {
     const t = this.typeRegistry.get(e);
     if (!t)
       return;
-    const i = {
+    const n = {
       editorParams: t.editorParams
     };
-    return t.renderer && (i.renderer = this.createComponentRenderer(t.renderer)), t.editor && (i.editor = this.createComponentEditor(t.editor)), i;
+    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.
@@ -720,17 +721,17 @@ class lt {
    */
   createComponentRenderer(e) {
     return (t) => {
-      const i = document.createElement("span");
-      i.style.display = "contents";
-      const r = pe(e, {
+      const n = document.createElement("span");
+      n.style.display = "contents";
+      const r = he(e, {
         environmentInjector: this.injector,
-        hostElement: i
+        hostElement: n
       });
       return this.setComponentInputs(r, {
         value: t.value,
         row: t.row,
         column: t.column
-      }), this.appRef.attachView(r.hostView), this.componentRefs.push(r), r.changeDetectorRef.detectChanges(), i;
+      }), this.appRef.attachView(r.hostView), this.componentRefs.push(r), r.changeDetectorRef.detectChanges(), n;
     };
   }
   /**
@@ -739,11 +740,11 @@ class lt {
    */
   createComponentEditor(e) {
     return (t) => {
-      const i = document.createElement("span");
-      i.style.display = "contents";
-      const r = pe(e, {
+      const n = document.createElement("span");
+      n.style.display = "contents";
+      const r = he(e, {
         environmentInjector: this.injector,
-        hostElement: i
+        hostElement: n
       });
       this.setComponentInputs(r, {
         value: t.value,
@@ -751,12 +752,12 @@ class lt {
         column: t.column
       }), this.appRef.attachView(r.hostView), this.componentRefs.push(r), r.changeDetectorRef.detectChanges();
       const o = r.instance;
-      return this.subscribeToOutput(o, "commit", (s) => t.commit(s)), this.subscribeToOutput(o, "cancel", () => t.cancel()), i.addEventListener("commit", (s) => {
+      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);
-      }), i.addEventListener("cancel", () => {
+      }), n.addEventListener("cancel", () => {
         t.cancel();
-      }), i;
+      }), n;
     };
   }
   /**
@@ -764,18 +765,18 @@ class lt {
    * Works with both EventEmitter and OutputEmitterRef (signal outputs).
    * @internal
    */
-  subscribeToOutput(e, t, i) {
+  subscribeToOutput(e, t, n) {
     const r = e[t];
-    r && typeof r.subscribe == "function" && r.subscribe(i);
+    r && typeof r.subscribe == "function" && r.subscribe(n);
   }
   /**
    * Sets component inputs using Angular's setInput API.
    * @internal
    */
   setComponentInputs(e, t) {
-    for (const [i, r] of Object.entries(t))
+    for (const [n, r] of Object.entries(t))
       try {
-        e.setInput(i, r);
+        e.setInput(n, r);
       } catch {
       }
   }
@@ -787,10 +788,103 @@ class lt {
     this.viewRefs.forEach((e) => e.destroy()), this.viewRefs = [], this.componentRefs.forEach((e) => e.destroy()), this.componentRefs = [];
   }
 }
-var xe, re;
-xe = [E()];
+function gt() {
+  const i = w(A), 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);
+  }, f = (u, m) => {
+    n()?.registerStyles?.(u, m);
+  }, g = (u) => {
+    n()?.unregisterStyles?.(u);
+  }, E = () => {
+    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((v, 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 v of d)
+      for (let L = v.startRow; L <= v.endRow; L++)
+        C.add(L);
+    return C;
+  };
+  return {
+    element: n,
+    isReady: e,
+    config: t,
+    visibleColumns: r,
+    getConfig: o,
+    forceLayout: s,
+    toggleGroup: l,
+    registerStyles: f,
+    unregisterStyles: g,
+    selectAll: E,
+    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 = u(R);
+  elementRef = w(A);
   // ============================================================================
   // Inputs
   // ============================================================================
@@ -798,31 +892,31 @@ class H {
    * The cell value. Used when FormControl is not available.
    * When a FormControl is provided, value is derived from control.value instead.
    */
-  value = f();
+  value = c();
   /**
    * The full row data object.
    */
-  row = f();
+  row = c();
   /**
    * The column configuration.
    */
-  column = f();
+  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 = f();
+  control = c();
   // ============================================================================
   // Outputs
   // ============================================================================
   /**
    * Emits when the user commits a new value.
    */
-  commit = S();
+  commit = p();
   /**
    * Emits when the user cancels editing.
    */
-  cancel = S();
+  cancel = p();
   // ============================================================================
   // Computed State
   // ============================================================================
@@ -830,7 +924,7 @@ class H {
    * 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(() => {
+  currentValue = P(() => {
     const e = this.control();
     return e ? e.value : this.value();
   });
@@ -838,21 +932,21 @@ class H {
    * Whether the control is invalid (has validation errors).
    * Returns false if no FormControl is available.
    */
-  isInvalid = A(() => this.control()?.invalid ?? !1);
+  isInvalid = P(() => 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);
+  isDirty = P(() => this.control()?.dirty ?? !1);
   /**
    * Whether the control has been touched.
    * Returns false if no FormControl is available.
    */
-  isTouched = A(() => this.control()?.touched ?? !1);
+  isTouched = P(() => this.control()?.touched ?? !1);
   /**
    * Whether the control has any validation errors.
    */
-  hasErrors = A(() => {
+  hasErrors = P(() => {
     const e = this.control();
     return e?.errors != null && Object.keys(e.errors).length > 0;
   });
@@ -860,7 +954,7 @@ class H {
    * The first error message from the control's validation errors.
    * Returns an empty string if no errors.
    */
-  firstErrorMessage = A(() => {
+  firstErrorMessage = P(() => {
     const e = this.control();
     if (!e?.errors) return "";
     const t = Object.keys(e.errors)[0];
@@ -869,9 +963,9 @@ class H {
   /**
    * All error messages from the control's validation errors.
    */
-  allErrorMessages = A(() => {
+  allErrorMessages = P(() => {
     const e = this.control();
-    return e?.errors ? Object.entries(e.errors).map(([t, i]) => this.getErrorMessage(t, i)) : [];
+    return e?.errors ? Object.entries(e.errors).map(([t, n]) => this.getErrorMessage(t, n)) : [];
   });
   // ============================================================================
   // Methods
@@ -920,25 +1014,29 @@ class H {
     }
   }
 }
-re = h(null), H = v(re, 0, "BaseGridEditor", xe, H), g(re, 1, H);
-var Me, ne;
-Me = [E({ selector: "tbw-grid" })];
+oe = y(null), H = T(oe, 0, "BaseGridEditor", Fe, H), b(oe, 1, H);
+var Me, se;
+Me = [x({ selector: "tbw-grid" })];
 class Y {
-  elementRef = u(R);
-  injector = u(Ke);
-  appRef = u(Qe);
-  viewContainerRef = u(Ze);
+  elementRef = w(A);
+  injector = w(Qe);
+  appRef = w(Ze);
+  viewContainerRef = w(et);
   adapter = null;
-  cellCommitListener = null;
   constructor() {
-    y(() => {
+    D(() => {
       const e = this.angularConfig();
-      if (!e || !this.adapter) return;
-      const t = this.adapter.processGridConfig(e), i = this.elementRef.nativeElement;
-      i.gridConfig = t;
+      if (!this.adapter) return;
+      const t = e ? this.adapter.processGridConfig(e) : {}, n = this.createFeaturePlugins(), r = t.plugins || [], o = [...n, ...r], s = this.sortable(), l = this.filterable(), f = this.selectable(), g = {};
+      s !== void 0 && (g.sortable = s), l !== void 0 && (g.filterable = l), f !== void 0 && (g.selectable = f);
+      const E = this.elementRef.nativeElement;
+      E.gridConfig = {
+        ...t,
+        ...g,
+        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.
@@ -956,7 +1054,68 @@ class Y {
    * <tbw-grid [customStyles]="customStyles">...</tbw-grid>
    * ```
    */
-  customStyles = f();
+  customStyles = c();
+  /**
+   * Grid-wide sorting toggle.
+   * When false, disables sorting for all columns regardless of their individual `sortable` setting.
+   * When true (default), columns with `sortable: true` can be sorted.
+   *
+   * This is a core grid config property, not a plugin feature.
+   * For multi-column sorting, also add the `[multiSort]` feature.
+   *
+   * @default true
+   *
+   * @example
+   * ```html
+   * <!-- Disable all sorting -->
+   * <tbw-grid [sortable]="false" />
+   *
+   * <!-- Enable sorting (default) - columns still need sortable: true -->
+   * <tbw-grid [sortable]="true" />
+   *
+   * <!-- Enable multi-column sorting -->
+   * <tbw-grid [sortable]="true" [multiSort]="true" />
+   * ```
+   */
+  sortable = c();
+  /**
+   * Grid-wide filtering toggle.
+   * When false, disables filtering for all columns regardless of their individual `filterable` setting.
+   * When true (default), columns with `filterable: true` can be filtered.
+   *
+   * Requires the FilteringPlugin to be loaded.
+   *
+   * @default true
+   *
+   * @example
+   * ```html
+   * <!-- Disable all filtering -->
+   * <tbw-grid [filterable]="false" [filtering]="true" />
+   *
+   * <!-- Enable filtering (default) -->
+   * <tbw-grid [filterable]="true" [filtering]="true" />
+   * ```
+   */
+  filterable = c();
+  /**
+   * Grid-wide selection toggle.
+   * When false, disables selection for all rows/cells.
+   * When true (default), selection is enabled based on plugin mode.
+   *
+   * Requires the SelectionPlugin to be loaded.
+   *
+   * @default true
+   *
+   * @example
+   * ```html
+   * <!-- Disable all selection -->
+   * <tbw-grid [selectable]="false" [selection]="'range'" />
+   *
+   * <!-- Enable selection (default) -->
+   * <tbw-grid [selectable]="true" [selection]="'range'" />
+   * ```
+   */
+  selectable = c();
   /**
    * Angular-specific grid configuration that supports component classes for renderers/editors.
    *
@@ -993,7 +1152,401 @@ class Y {
    * ```
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  angularConfig = f();
+  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 multi-column sorting.
+   *
+   * Multi-sort allows users to sort by multiple columns simultaneously.
+   * For basic single-column sorting, columns with `sortable: true` work without this plugin.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/multi-sort';
+   * ```
+   *
+   * @example
+   * ```html
+   * <!-- Enable multi-column sorting -->
+   * <tbw-grid [multiSort]="true" />
+   *
+   * <!-- Limit to single column (uses plugin but restricts to 1 column) -->
+   * <tbw-grid [multiSort]="'single'" />
+   *
+   * <!-- Full config -->
+   * <tbw-grid [multiSort]="{ maxSortColumns: 3 }" />
+   * ```
+   */
+  multiSort = c();
+  /**
+   * @deprecated Use `[multiSort]` instead. Will be removed in a future version.
+   *
+   * Enable column sorting. This is an alias for `[multiSort]`.
+   *
+   * **Requires feature import:**
+   * ```typescript
+   * import '@toolbox-web/grid-angular/features/multi-sort';
+   * ```
+   */
+  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.
@@ -1009,7 +1562,7 @@ class Y {
    * }
    * ```
    */
-  cellCommit = S();
+  cellCommit = p();
   /**
    * Emitted when a row's values are committed (bulk/row editing).
    * Provides the row data and change tracking information.
@@ -1019,17 +1572,240 @@ class Y {
    * <tbw-grid (rowCommit)="onRowCommit($event)">...</tbw-grid>
    * ```
    */
-  rowCommit = S();
+  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 lt(this.injector, this.appRef, this.viewContainerRef), et.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 i = t.detail;
-      this.cellCommit.emit(i);
-    }, e.addEventListener("cell-commit", this.cellCommitListener), this.rowCommitListener = (t) => {
-      const i = t.detail;
-      this.rowCommit.emit(i);
-    }, 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("multiSort", this.multiSort() ?? 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;
@@ -1050,30 +1826,30 @@ class Y {
   /**
    * 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?.(ge);
+    const t = e.gridConfig?.plugins?.find((R) => R.name === "masterDetail");
     if (t && typeof t.refreshDetailRenderer == "function") {
       t.refreshDetailRenderer();
       return;
     }
-    const i = e.querySelector("tbw-grid-detail");
-    if (!i) return;
+    const n = e.querySelector("tbw-grid-detail");
+    if (!n) return;
     const r = this.adapter.createDetailRenderer(e);
     if (!r) return;
-    const o = i.getAttribute("animation");
+    const o = n.getAttribute("animation");
     let s = "slide";
     o === "false" ? s = !1 : o === "fade" && (s = "fade");
-    const l = i.getAttribute("showExpandColumn") !== "false", m = new ge({
+    const l = n.getAttribute("showExpandColumn") !== "false", { MasterDetailPlugin: f } = await import("@toolbox-web/grid/plugins/master-detail"), g = new f({
       detailRenderer: r,
       showExpandColumn: l,
       animation: s
-    }), d = e.gridConfig || {}, T = d.plugins || [];
+    }), E = e.gridConfig || {}, a = E.plugins || [];
     e.gridConfig = {
-      ...d,
-      plugins: [...T, m]
+      ...E,
+      plugins: [...a, g]
     };
   }
   /**
@@ -1083,18 +1859,18 @@ class Y {
    */
   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);
+    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 })]
   };`
@@ -1102,27 +1878,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);
   }
 }
-ne = h(null), Y = v(ne, 0, "Grid", Me, Y), g(ne, 1, Y);
+se = y(null), Y = T(se, 0, "Grid", Me, Y), b(se, 1, Y);
 export {
-  lt as AngularGridAdapter,
+  ct as AngularGridAdapter,
   H as BaseGridEditor,
-  _e as GRID_TYPE_DEFAULTS,
+  qe as GRID_TYPE_DEFAULTS,
   Y as Grid,
-  V as GridColumnEditor,
-  N as GridColumnView,
-  _ as GridDetailView,
-  G as GridFormArray,
-  q as GridResponsiveCard,
-  $ as GridToolPanel,
-  M as GridTypeRegistry,
+  q as GridColumnEditor,
+  _ as GridColumnView,
+  $ as GridDetailView,
+  z as GridFormArray,
+  B as GridResponsiveCard,
+  U as GridToolPanel,
+  I as GridTypeRegistry,
   W as TbwCellEditor,
-  U as TbwCellView,
+  J as TbwCellView,
   W as TbwEditor,
-  U as TbwRenderer,
+  J as TbwRenderer,
+  wt as clearFeatureRegistry,
+  tt as createPluginFromFeature,
+  Rt as getFeatureFactory,
   rt as getFormArrayContext,
-  ve as isComponentClass,
-  ft as provideGridTypeDefaults
+  Ct as getRegisteredFeatures,
+  gt as injectGrid,
+  we as isComponentClass,
+  Et as isFeatureRegistered,
+  ft as provideGridTypeDefaults,
+  yt as registerFeature
 };