@toolbox-web/grid-angular 0.1.3 → 0.3.0

package/index.js

@@ -1,46 +1,54 @@
-var ye = Object.create;
-var M = Object.defineProperty;
-var Te = Object.getOwnPropertyDescriptor;
-var ee = (i, e) => (e = Symbol[i]) ? e : /* @__PURE__ */ Symbol.for("Symbol." + i), L = (i) => {
-  throw TypeError(i);
+var Se = Object.create;
+var P = Object.defineProperty;
+var Ie = Object.getOwnPropertyDescriptor;
+var ne = (n, e) => (e = Symbol[n]) ? e : /* @__PURE__ */ Symbol.for("Symbol." + n), D = (n) => {
+  throw TypeError(n);
 };
-var be = (i, e, t) => e in i ? M(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var X = (i, e) => M(i, "name", { value: e, configurable: !0 });
-var h = (i) => [, , , ye(i?.[ee("metadata")] ?? null)], te = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], A = (i) => i !== void 0 && typeof i != "function" ? L("Function expected") : i, Ae = (i, e, t, n, r) => ({ kind: te[i], name: e, metadata: n, addInitializer: (s) => t._ ? L("Already initialized") : r.push(A(s || null)) }), Le = (i, e) => be(e, ee("metadata"), i[3]), g = (i, e, t, n) => {
-  for (var r = 0, s = i[e >> 1], l = s && s.length; r < l; r++) e & 1 ? s[r].call(t) : n = s[r].call(t, n);
-  return n;
-}, w = (i, e, t, n, r, s) => {
-  var l, a, C, m, d, o = e & 7, b = !!(e & 8), p = !!(e & 16), S = o > 3 ? i.length + 1 : o ? b ? 1 : 2 : 0, K = te[o + 5], Q = o > 3 && (i[S - 1] = []), Ce = i[S] || (i[S] = []), f = o && (!p && !b && (r = r.prototype), o < 5 && (o > 3 || !p) && Te(o < 4 ? r : { get [t]() {
-    return Y(this, s);
+var je = (n, e, t) => e in n ? P(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var Z = (n, e) => P(n, "name", { value: e, configurable: !0 });
+var h = (n) => [, , , Se(n?.[ne("metadata")] ?? null)], ie = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], A = (n) => n !== void 0 && typeof n != "function" ? D("Function expected") : n, Oe = (n, e, t, i, r) => ({ kind: ie[n], name: e, metadata: i, addInitializer: (s) => t._ ? D("Already initialized") : r.push(A(s || null)) }), Pe = (n, e) => je(e, ne("metadata"), n[3]), g = (n, e, t, i) => {
+  for (var r = 0, s = n[e >> 1], a = s && s.length; r < a; r++) e & 1 ? s[r].call(t) : i = s[r].call(t, i);
+  return i;
+}, w = (n, e, t, i, r, s) => {
+  var a, l, y, u, d, o = e & 7, T = !!(e & 8), f = !!(e & 16), I = o > 3 ? n.length + 1 : o ? T ? 1 : 2 : 0, Q = ie[o + 5], X = o > 3 && (n[I - 1] = []), Le = n[I] || (n[I] = []), p = o && (!f && !T && (r = r.prototype), o < 5 && (o > 3 || !f) && Ie(o < 4 ? r : { get [t]() {
+    return ee(this, s);
   }, set [t](c) {
-    return Z(this, s, c);
+    return te(this, s, c);
   } }, t));
-  o ? p && o < 4 && X(s, (o > 2 ? "set " : o > 1 ? "get " : "") + t) : X(r, t);
-  for (var N = n.length - 1; N >= 0; N--)
-    m = Ae(o, t, C = {}, i[3], Ce), o && (m.static = b, m.private = p, d = m.access = { has: p ? (c) => De(r, c) : (c) => t in c }, o ^ 3 && (d.get = p ? (c) => (o ^ 1 ? Y : Se)(c, r, o ^ 4 ? s : f.get) : (c) => c[t]), o > 2 && (d.set = p ? (c, x) => Z(c, r, x, o ^ 4 ? s : f.set) : (c, x) => c[t] = x)), a = (0, n[N])(o ? o < 4 ? p ? s : f[K] : o > 4 ? void 0 : { get: f.get, set: f.set } : r, m), C._ = 1, o ^ 4 || a === void 0 ? A(a) && (o > 4 ? Q.unshift(a) : o ? p ? s = a : f[K] = a : r = a) : typeof a != "object" || a === null ? L("Object expected") : (A(l = a.get) && (f.get = l), A(l = a.set) && (f.set = l), A(l = a.init) && Q.unshift(l));
-  return o || Le(i, r), f && M(r, t, f), p ? o ^ 4 ? s : f : r;
+  o ? f && o < 4 && Z(s, (o > 2 ? "set " : o > 1 ? "get " : "") + t) : Z(r, t);
+  for (var j = i.length - 1; j >= 0; j--)
+    u = Oe(o, t, y = {}, n[3], Le), o && (u.static = T, u.private = f, d = u.access = { has: f ? (c) => Ne(r, c) : (c) => t in c }, o ^ 3 && (d.get = f ? (c) => (o ^ 1 ? ee : Me)(c, r, o ^ 4 ? s : p.get) : (c) => c[t]), o > 2 && (d.set = f ? (c, O) => te(c, r, O, o ^ 4 ? s : p.set) : (c, O) => c[t] = O)), l = (0, i[j])(o ? o < 4 ? f ? s : p[Q] : o > 4 ? void 0 : { get: p.get, set: p.set } : r, u), y._ = 1, o ^ 4 || l === void 0 ? A(l) && (o > 4 ? X.unshift(l) : o ? f ? s = l : p[Q] = l : r = l) : typeof l != "object" || l === null ? D("Object expected") : (A(a = l.get) && (p.get = a), A(a = l.set) && (p.set = a), A(a = l.init) && X.unshift(a));
+  return o || Pe(n, r), p && P(r, t, p), f ? o ^ 4 ? s : p : r;
 };
-var _ = (i, e, t) => e.has(i) || L("Cannot " + t), De = (i, e) => Object(e) !== e ? L('Cannot use the "in" operator on this value') : i.has(e), Y = (i, e, t) => (_(i, e, "read from private field"), t ? t.call(i) : e.get(i));
-var Z = (i, e, t, n) => (_(i, e, "write to private field"), n ? n.call(i, t) : e.set(i, t), t), Se = (i, e, t) => (_(i, e, "access private method"), t);
-import { inject as u, ElementRef as R, contentChild as D, TemplateRef as y, effect as T, Directive as E, input as v, EventEmitter as ie, EnvironmentInjector as Ne, ApplicationRef as xe, ViewContainerRef as Me, output as ne } from "@angular/core";
-import { DataGridElement as _e } from "@toolbox-web/grid";
-import { MasterDetailPlugin as re } from "@toolbox-web/grid/all";
-const he = /* @__PURE__ */ new Map();
-function ge(i) {
-  return he.get(i);
+var N = (n, e, t) => e.has(n) || D("Cannot " + t), Ne = (n, e) => Object(e) !== e ? D('Cannot use the "in" operator on this value') : n.has(e), ee = (n, e, t) => (N(n, e, "read from private field"), t ? t.call(n) : e.get(n));
+var te = (n, e, t, i) => (N(n, e, "write to private field"), i ? i.call(n, t) : e.set(n, t), t), Me = (n, e, t) => (N(n, e, "access private method"), t);
+import { inject as m, ElementRef as v, contentChild as S, TemplateRef as b, effect as C, Directive as E, input as R, InjectionToken as Ve, Injectable as _e, makeEnvironmentProviders as qe, EventEmitter as re, createComponent as se, EnvironmentInjector as Ge, ApplicationRef as ke, ViewContainerRef as xe, output as oe } from "@angular/core";
+import { DataGridElement as Ue } from "@toolbox-web/grid";
+import { MasterDetailPlugin as ae } from "@toolbox-web/grid/all";
+function le(n) {
+  if (typeof n != "function" || n.prototype === void 0)
+    return !1;
+  if (Object.prototype.hasOwnProperty.call(n, "ɵcmp") || Object.prototype.hasOwnProperty.call(n, "ɵfac"))
+    return !0;
+  const e = Function.prototype.toString.call(n);
+  return e.startsWith("class ") || e.startsWith("class{");
+}
+const Ce = /* @__PURE__ */ new Map();
+function Ee(n) {
+  return Ce.get(n);
 }
-var ae, G;
-ae = [E({ selector: "tbw-grid-column-editor" })];
-class O {
-  elementRef = u(R);
+var de, U;
+de = [E({ selector: "tbw-grid-column-editor" })];
+class M {
+  elementRef = m(v);
   /**
    * Query for the ng-template content child.
    */
-  template = D(y);
+  template = S(b);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = T(() => {
+  onTemplateReceived = C(() => {
     const e = this.template();
-    e && he.set(this.elementRef.nativeElement, e);
+    e && Ce.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -50,23 +58,23 @@ class O {
     return !0;
   }
 }
-G = h(null), O = w(G, 0, "GridColumnEditor", ae, O), g(G, 1, O);
-const we = /* @__PURE__ */ new Map();
-function ve(i) {
-  return we.get(i);
+U = h(null), M = w(U, 0, "GridColumnEditor", de, M), g(U, 1, M);
+const ye = /* @__PURE__ */ new Map();
+function be(n) {
+  return ye.get(n);
 }
-var ce, H;
-ce = [E({ selector: "tbw-grid-column-view" })];
+var pe, $;
+pe = [E({ selector: "tbw-grid-column-view" })];
 class V {
-  elementRef = u(R);
+  elementRef = m(v);
   /**
    * Query for the ng-template content child.
    */
-  template = D(y);
+  template = S(b);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = T(() => {
+  onTemplateReceived = C(() => {
     const e = this.template();
-    e && we.set(this.elementRef.nativeElement, e);
+    e && ye.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -76,29 +84,29 @@ class V {
     return !0;
   }
 }
-H = h(null), V = w(H, 0, "GridColumnView", ce, V), g(H, 1, V);
-const Re = /* @__PURE__ */ new Map();
-function se(i) {
-  const e = i.querySelector("tbw-grid-detail");
+$ = h(null), V = w($, 0, "GridColumnView", pe, V), g($, 1, V);
+const Te = /* @__PURE__ */ new Map();
+function ce(n) {
+  const e = n.querySelector("tbw-grid-detail");
   if (e)
-    return Re.get(e);
+    return Te.get(e);
 }
-var me, U;
-me = [E({ selector: "tbw-grid-detail" })];
-class q {
-  elementRef = u(R);
+var fe, W;
+fe = [E({ selector: "tbw-grid-detail" })];
+class _ {
+  elementRef = m(v);
   /** Whether to show the expand/collapse column. Default: true */
-  showExpandColumn = v(!0);
+  showExpandColumn = R(!0);
   /** Animation style for expand/collapse. Default: 'slide' */
-  animation = v("slide");
+  animation = R("slide");
   /**
    * Query for the ng-template content child.
    */
-  template = D(y);
+  template = S(b);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = T(() => {
+  onTemplateReceived = C(() => {
     const e = this.template();
-    e && Re.set(this.elementRef.nativeElement, e);
+    e && Te.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -108,38 +116,38 @@ class q {
     return !0;
   }
 }
-U = h(null), q = w(U, 0, "GridDetailView", me, q), g(U, 1, q);
-const Ee = /* @__PURE__ */ new Map();
-function Oe(i) {
-  return Ee.get(i);
+W = h(null), _ = w(W, 0, "GridDetailView", fe, _), g(W, 1, _);
+const Ae = /* @__PURE__ */ new Map();
+function $e(n) {
+  return Ae.get(n);
 }
-var ue, B;
-ue = [E({ selector: "tbw-grid-tool-panel" })];
-class I {
-  elementRef = u(R);
+var he, F;
+he = [E({ selector: "tbw-grid-tool-panel" })];
+class q {
+  elementRef = m(v);
   /** Unique panel identifier (required) */
-  id = v.required({ alias: "id" });
+  id = R.required({ alias: "id" });
   /** Panel title shown in accordion header (required) */
-  title = v.required({ alias: "title" });
+  title = R.required({ alias: "title" });
   /** Icon for accordion section header (emoji or text) */
-  icon = v();
+  icon = R();
   /** Tooltip for accordion section header */
-  tooltip = v();
+  tooltip = R();
   /** Panel order priority (lower = first, default: 100) */
-  order = v(100);
+  order = R(100);
   /**
    * Query for the ng-template content child.
    */
-  template = D(y);
+  template = S(b);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = T(() => {
+  onTemplateReceived = C(() => {
     const e = this.template(), t = this.elementRef.nativeElement;
     if (e) {
       t.setAttribute("id", this.id()), t.setAttribute("title", this.title());
-      const n = this.icon();
-      n && t.setAttribute("icon", n);
+      const i = this.icon();
+      i && t.setAttribute("icon", i);
       const r = this.tooltip();
-      r && t.setAttribute("tooltip", r), t.setAttribute("order", String(this.order())), Ee.set(t, e);
+      r && t.setAttribute("tooltip", r), t.setAttribute("order", String(this.order())), Ae.set(t, e);
     }
   });
   /**
@@ -150,30 +158,30 @@ class I {
     return !0;
   }
 }
-B = h(null), I = w(B, 0, "GridToolPanel", ue, I), g(B, 1, I);
-const F = /* @__PURE__ */ new Map(), J = /* @__PURE__ */ new Map();
-function Ve(i) {
-  const e = F.get(i);
+F = h(null), q = w(F, 0, "GridToolPanel", he, q), g(F, 1, q);
+const J = /* @__PURE__ */ new Map(), K = /* @__PURE__ */ new Map();
+function We(n) {
+  const e = J.get(n);
   if (e) return e;
-  const t = i.querySelector("tbw-grid-column-view");
+  const t = n.querySelector("tbw-grid-column-view");
   if (t)
-    return ve(t);
+    return be(t);
 }
-function qe(i) {
-  const e = J.get(i);
+function Fe(n) {
+  const e = K.get(n);
   if (e) return e;
-  const t = i.querySelector("tbw-grid-column-editor");
+  const t = n.querySelector("tbw-grid-column-editor");
   if (t)
-    return ge(t);
+    return Ee(t);
 }
-var de, W;
-de = [E({ selector: "[tbwRenderer]" })];
-class P {
-  template = u(y);
-  elementRef = u(R);
+var ge, H;
+ge = [E({ selector: "[tbwRenderer]" })];
+class G {
+  template = m(b);
+  elementRef = m(v);
   columnElement = null;
   constructor() {
-    T(() => {
+    C(() => {
       this.registerTemplate();
     });
   }
@@ -181,10 +189,10 @@ class P {
     let e = this.elementRef.nativeElement?.parentElement;
     for (; e && e.tagName !== "TBW-GRID-COLUMN"; )
       e = e.parentElement;
-    e && (this.columnElement = e, F.set(e, this.template));
+    e && (this.columnElement = e, J.set(e, this.template));
   }
   ngOnDestroy() {
-    this.columnElement && F.delete(this.columnElement);
+    this.columnElement && J.delete(this.columnElement);
   }
   /**
    * Static type guard for template context.
@@ -194,15 +202,15 @@ class P {
     return !0;
   }
 }
-W = h(null), P = w(W, 0, "TbwRenderer", de, P), g(W, 1, P);
-var fe, k;
-fe = [E({ selector: "[tbwEditor]" })];
-class j {
-  template = u(y);
-  elementRef = u(R);
+H = h(null), G = w(H, 0, "TbwRenderer", ge, G), g(H, 1, G);
+var we, B;
+we = [E({ selector: "[tbwEditor]" })];
+class k {
+  template = m(b);
+  elementRef = m(v);
   columnElement = null;
   constructor() {
-    T(() => {
+    C(() => {
       this.registerTemplate();
     });
   }
@@ -210,10 +218,10 @@ class j {
     let e = this.elementRef.nativeElement?.parentElement;
     for (; e && e.tagName !== "TBW-GRID-COLUMN"; )
       e = e.parentElement;
-    e && (this.columnElement = e, J.set(e, this.template));
+    e && (this.columnElement = e, K.set(e, this.template));
   }
   ngOnDestroy() {
-    this.columnElement && J.delete(this.columnElement);
+    this.columnElement && K.delete(this.columnElement);
   }
   /**
    * Static type guard for template context.
@@ -223,26 +231,142 @@ class j {
     return !0;
   }
 }
-k = h(null), j = w(k, 0, "TbwEditor", fe, j), g(k, 1, j);
-function oe(i) {
-  const e = Ve(i);
-  return e || ve(i);
+B = h(null), k = w(B, 0, "TbwEditor", we, k), g(B, 1, k);
+const De = new Ve("GRID_TYPE_DEFAULTS");
+var Re, Y;
+Re = [_e({ providedIn: "root" })];
+class L {
+  defaults = /* @__PURE__ */ new Map();
+  constructor() {
+    const e = m(De, { optional: !0 });
+    if (e)
+      for (const [t, i] of Object.entries(e))
+        this.defaults.set(t, i);
+  }
+  /**
+   * Register type-level defaults for a custom type.
+   *
+   * @param type - The type name (e.g., 'country', 'currency')
+   * @param defaults - Renderer/editor configuration
+   */
+  register(e, t) {
+    this.defaults.set(e, t);
+  }
+  /**
+   * Get type defaults for a given type.
+   */
+  get(e) {
+    return this.defaults.get(e);
+  }
+  /**
+   * Remove type defaults for a type.
+   */
+  unregister(e) {
+    this.defaults.delete(e);
+  }
+  /**
+   * Check if a type has registered defaults.
+   */
+  has(e) {
+    return this.defaults.has(e);
+  }
+  /**
+   * Get all registered type names.
+   */
+  getRegisteredTypes() {
+    return Array.from(this.defaults.keys());
+  }
+  /**
+   * Convert to TypeDefault for use with grid's typeDefaults.
+   * This is used internally by the adapter.
+   *
+   * @internal
+   */
+  getAsTypeDefault(e) {
+    const t = this.defaults.get(e);
+    if (t)
+      return {
+        editorParams: t.editorParams
+        // renderer and editor are handled by the adapter which creates
+        // the actual functions that instantiate Angular components
+      };
+  }
+}
+Y = h(null), L = w(Y, 0, "GridTypeRegistry", Re, L), g(Y, 1, L);
+function Ke(n) {
+  return qe([{ provide: De, useValue: n }]);
 }
-function le(i) {
-  const e = qe(i);
-  return e || ge(i);
+function me(n) {
+  const e = We(n);
+  return e || be(n);
 }
-class Ie {
-  constructor(e, t, n) {
-    this.injector = e, this.appRef = t, this.viewContainerRef = n, window.__ANGULAR_GRID_ADAPTER__ = this;
+function ue(n) {
+  const e = Fe(n);
+  return e || Ee(n);
+}
+class He {
+  constructor(e, t, i) {
+    this.injector = e, this.appRef = t, this.viewContainerRef = i, window.__ANGULAR_GRID_ADAPTER__ = this;
+    try {
+      this.typeRegistry = this.injector.get(L, null);
+    } catch {
+    }
   }
   viewRefs = [];
+  componentRefs = [];
+  typeRegistry = null;
+  /**
+   * Processes an Angular grid configuration, converting component class references
+   * to actual renderer/editor functions.
+   *
+   * Call this method on your gridConfig before passing it to the grid.
+   *
+   * @example
+   * ```typescript
+   * import { AngularGridAdapter, type AngularGridConfig } from '@toolbox-web/grid-angular';
+   *
+   * const config: AngularGridConfig<Employee> = {
+   *   columns: [
+   *     { field: 'status', renderer: StatusBadgeComponent, editor: StatusEditorComponent },
+   *   ],
+   * };
+   *
+   * // In component
+   * constructor() {
+   *   const adapter = inject(AngularGridAdapter); // or create new instance
+   *   this.processedConfig = adapter.processGridConfig(config);
+   * }
+   * ```
+   *
+   * @param config - Angular grid configuration with possible component class references
+   * @returns Processed GridConfig with actual renderer/editor functions
+   */
+  processGridConfig(e) {
+    if (!e.columns)
+      return e;
+    const t = e.columns.map((i) => this.processColumn(i));
+    return {
+      ...e,
+      columns: t
+    };
+  }
+  /**
+   * Processes a single column configuration, converting component class references
+   * to actual renderer/editor functions.
+   *
+   * @param column - Angular column configuration
+   * @returns Processed ColumnConfig
+   */
+  processColumn(e) {
+    const t = { ...e };
+    return e.renderer && le(e.renderer) && (t.renderer = this.createComponentRenderer(e.renderer)), e.editor && le(e.editor) && (t.editor = this.createComponentEditor(e.editor)), t;
+  }
   /**
    * Determines if this adapter can handle the given element.
    * Checks if a template is registered for this element (structural or nested).
    */
   canHandle(e) {
-    return oe(e) !== void 0 || le(e) !== void 0;
+    return me(e) !== void 0 || ue(e) !== void 0;
   }
   /**
    * Creates a view renderer function that creates an embedded view
@@ -252,14 +376,14 @@ class Ie {
    * allowing the grid to use its default rendering.
    */
   createRenderer(e) {
-    const t = oe(e);
+    const t = me(e);
     if (t)
-      return (n) => {
+      return (i) => {
         const r = {
-          $implicit: n.value,
-          value: n.value,
-          row: n.row,
-          column: n.column
+          $implicit: i.value,
+          value: i.value,
+          row: i.row,
+          column: i.column
         }, s = this.viewContainerRef.createEmbeddedView(t, r);
         return this.viewRefs.push(s), s.detectChanges(), s.rootNodes[0];
       };
@@ -283,29 +407,29 @@ class Ie {
    * As long as the component emits `(commit)` with the new value.
    */
   createEditor(e) {
-    const t = le(e);
-    return t ? (n) => {
-      const r = (o) => n.commit(o), s = () => n.cancel(), l = new ie(), a = new ie();
-      l.subscribe((o) => n.commit(o)), a.subscribe(() => n.cancel());
-      const C = {
-        $implicit: n.value,
-        value: n.value,
-        row: n.row,
-        column: n.column,
+    const t = ue(e);
+    return t ? (i) => {
+      const r = (o) => i.commit(o), s = () => i.cancel(), a = new re(), l = new re();
+      a.subscribe((o) => i.commit(o)), l.subscribe(() => i.cancel());
+      const y = {
+        $implicit: i.value,
+        value: i.value,
+        row: i.row,
+        column: i.column,
         // Preferred: simple callback functions
         onCommit: r,
         onCancel: s,
         // Deprecated: EventEmitters (for backwards compatibility)
-        commit: l,
-        cancel: a
-      }, m = this.viewContainerRef.createEmbeddedView(t, C);
-      this.viewRefs.push(m), m.detectChanges();
-      const d = m.rootNodes[0];
+        commit: a,
+        cancel: l
+      }, u = this.viewContainerRef.createEmbeddedView(t, y);
+      this.viewRefs.push(u), u.detectChanges();
+      const d = u.rootNodes[0];
       return d && d.addEventListener && (d.addEventListener("commit", (o) => {
-        const b = o;
-        n.commit(b.detail);
+        const T = o;
+        i.commit(T.detail);
       }), d.addEventListener("cancel", () => {
-        n.cancel();
+        i.cancel();
       })), d;
     } : (console.warn("[AngularGridAdapter] No editor template registered for element"), () => document.createElement("div"));
   }
@@ -314,16 +438,16 @@ class Ie {
    * Renders Angular templates for expandable detail rows.
    */
   createDetailRenderer(e) {
-    const t = se(e);
+    const t = ce(e);
     if (t)
-      return (n) => {
+      return (i) => {
         const r = {
-          $implicit: n,
-          row: n
+          $implicit: i,
+          row: i
         }, s = this.viewContainerRef.createEmbeddedView(t, r);
         this.viewRefs.push(s), s.detectChanges();
-        const l = document.createElement("div");
-        return s.rootNodes.forEach((a) => l.appendChild(a)), l;
+        const a = document.createElement("div");
+        return s.rootNodes.forEach((l) => a.appendChild(l)), a;
       };
   }
   /**
@@ -334,16 +458,16 @@ class Ie {
    * without manual configuration in the Grid directive.
    */
   parseDetailElement(e) {
-    const t = se(e.closest("tbw-grid"));
+    const t = ce(e.closest("tbw-grid"));
     if (t)
-      return (n) => {
+      return (i) => {
         const r = {
-          $implicit: n,
-          row: n
+          $implicit: i,
+          row: i
         }, s = this.viewContainerRef.createEmbeddedView(t, r);
         this.viewRefs.push(s), s.detectChanges();
-        const l = document.createElement("div");
-        return s.rootNodes.forEach((a) => l.appendChild(a)), l;
+        const a = document.createElement("div");
+        return s.rootNodes.forEach((l) => a.appendChild(l)), a;
       };
   }
   /**
@@ -351,41 +475,152 @@ class Ie {
    * The renderer creates an Angular template-based panel content.
    */
   createToolPanelRenderer(e) {
-    const t = Oe(e);
+    const t = $e(e);
     if (!t)
       return;
-    const n = e.closest("tbw-grid");
+    const i = e.closest("tbw-grid");
     return (r) => {
       const s = {
-        $implicit: n ?? r,
-        grid: n ?? r
-      }, l = this.viewContainerRef.createEmbeddedView(t, s);
-      return this.viewRefs.push(l), l.detectChanges(), l.rootNodes.forEach((a) => r.appendChild(a)), () => {
-        const a = this.viewRefs.indexOf(l);
-        a > -1 && this.viewRefs.splice(a, 1), l.destroy();
+        $implicit: i ?? r,
+        grid: i ?? r
+      }, a = this.viewContainerRef.createEmbeddedView(t, s);
+      return this.viewRefs.push(a), a.detectChanges(), a.rootNodes.forEach((l) => r.appendChild(l)), () => {
+        const l = this.viewRefs.indexOf(a);
+        l > -1 && this.viewRefs.splice(l, 1), a.destroy();
       };
     };
   }
   /**
-   * Clean up all view references.
+   * Gets type-level defaults from the application's GridTypeRegistry.
+   *
+   * This enables application-wide type defaults configured via `provideGridTypeDefaults()`.
+   * The returned TypeDefault contains renderer/editor functions that instantiate
+   * Angular components dynamically.
+   *
+   * @example
+   * ```typescript
+   * // app.config.ts
+   * export const appConfig: ApplicationConfig = {
+   *   providers: [
+   *     provideGridTypeDefaults({
+   *       country: {
+   *         renderer: CountryCellComponent,
+   *         editor: CountryEditorComponent
+   *       }
+   *     })
+   *   ]
+   * };
+   *
+   * // Any grid with type: 'country' columns will use these components
+   * gridConfig = {
+   *   columns: [{ field: 'country', type: 'country' }]
+   * };
+   * ```
+   */
+  getTypeDefault(e) {
+    if (!this.typeRegistry)
+      return;
+    const t = this.typeRegistry.get(e);
+    if (!t)
+      return;
+    const i = {
+      editorParams: t.editorParams
+    };
+    return t.renderer && (i.renderer = this.createComponentRenderer(t.renderer)), t.editor && (i.editor = this.createComponentEditor(t.editor)), i;
+  }
+  /**
+   * Creates a renderer function from an Angular component class.
+   * @internal
+   */
+  createComponentRenderer(e) {
+    return (t) => {
+      const i = document.createElement("span");
+      i.style.display = "contents";
+      const r = se(e, {
+        environmentInjector: this.injector,
+        hostElement: i
+      });
+      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;
+    };
+  }
+  /**
+   * Creates an editor function from an Angular component class.
+   * @internal
+   */
+  createComponentEditor(e) {
+    return (t) => {
+      const i = document.createElement("span");
+      i.style.display = "contents";
+      const r = se(e, {
+        environmentInjector: this.injector,
+        hostElement: i
+      });
+      this.setComponentInputs(r, {
+        value: t.value,
+        row: t.row,
+        column: t.column
+      }), this.appRef.attachView(r.hostView), this.componentRefs.push(r), r.changeDetectorRef.detectChanges();
+      const s = r.instance;
+      return this.subscribeToOutput(s, "commit", (a) => t.commit(a)), this.subscribeToOutput(s, "cancel", () => t.cancel()), i.addEventListener("commit", (a) => {
+        const l = a;
+        t.commit(l.detail);
+      }), i.addEventListener("cancel", () => {
+        t.cancel();
+      }), i;
+    };
+  }
+  /**
+   * Subscribes to an Angular output on a component instance.
+   * Works with both EventEmitter and OutputEmitterRef (signal outputs).
+   * @internal
+   */
+  subscribeToOutput(e, t, i) {
+    const r = e[t];
+    r && typeof r.subscribe == "function" && r.subscribe(i);
+  }
+  /**
+   * Sets component inputs using Angular's setInput API.
+   * @internal
+   */
+  setComponentInputs(e, t) {
+    for (const [i, r] of Object.entries(t))
+      try {
+        e.setInput(i, r);
+      } catch {
+      }
+  }
+  /**
+   * Clean up all view references and component references.
    * Call this when your app/component is destroyed.
    */
   destroy() {
-    this.viewRefs.forEach((e) => e.destroy()), this.viewRefs = [];
+    this.viewRefs.forEach((e) => e.destroy()), this.viewRefs = [], this.componentRefs.forEach((e) => e.destroy()), this.componentRefs = [];
   }
 }
-var pe, z;
-pe = [E({ selector: "tbw-grid" })];
-class $ {
-  elementRef = u(R);
-  injector = u(Ne);
-  appRef = u(xe);
-  viewContainerRef = u(Me);
+var ve, z;
+ve = [E({ selector: "tbw-grid" })];
+class x {
+  elementRef = m(v);
+  injector = m(Ge);
+  appRef = m(ke);
+  viewContainerRef = m(xe);
   adapter = null;
   cellCommitListener = null;
+  constructor() {
+    C(() => {
+      const e = this.angularConfig();
+      if (!e || !this.adapter) return;
+      const t = this.adapter.processGridConfig(e), i = this.elementRef.nativeElement;
+      i.gridConfig = t;
+    });
+  }
   rowCommitListener = null;
   /**
-   * Custom CSS styles to inject into the grid's shadow DOM.
+   * Custom CSS styles to inject into the grid.
    * Use this to style custom cell renderers, editors, or detail panels.
    *
    * @example
@@ -401,7 +636,44 @@ class $ {
    * <tbw-grid [customStyles]="customStyles">...</tbw-grid>
    * ```
    */
-  customStyles = v();
+  customStyles = R();
+  /**
+   * Angular-specific grid configuration that supports component classes for renderers/editors.
+   *
+   * Use this input when you want to specify Angular component classes directly in column configs.
+   * Components must implement the appropriate interfaces:
+   * - Renderers: `AngularCellRenderer<TRow, TValue>` - requires `value()` and `row()` signal inputs
+   * - Editors: `AngularCellEditor<TRow, TValue>` - adds `commit` and `cancel` outputs
+   *
+   * The directive automatically processes component classes and converts them to grid-compatible
+   * renderer/editor functions before applying to the grid.
+   *
+   * @example
+   * ```typescript
+   * // Component that implements AngularCellEditor
+   * @Component({...})
+   * export class BonusEditorComponent implements AngularCellEditor<Employee, number> {
+   *   value = input.required<number>();
+   *   row = input.required<Employee>();
+   *   commit = output<number>();
+   *   cancel = output<void>();
+   * }
+   *
+   * // In your grid config
+   * config: AngularGridConfig<Employee> = {
+   *   columns: [
+   *     { field: 'name', header: 'Name' },
+   *     { field: 'bonus', header: 'Bonus', editable: true, editor: BonusEditorComponent }
+   *   ]
+   * };
+   * ```
+   *
+   * ```html
+   * <tbw-grid [angularConfig]="config" [rows]="employees"></tbw-grid>
+   * ```
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  angularConfig = R();
   /**
    * Emitted when a cell value is committed (inline editing).
    * Provides the row, field, new value, and change tracking information.
@@ -417,7 +689,7 @@ class $ {
    * }
    * ```
    */
-  cellCommit = ne();
+  cellCommit = oe();
   /**
    * Emitted when a row's values are committed (bulk/row editing).
    * Provides the row data and change tracking information.
@@ -427,16 +699,16 @@ class $ {
    * <tbw-grid (rowCommit)="onRowCommit($event)">...</tbw-grid>
    * ```
    */
-  rowCommit = ne();
+  rowCommit = oe();
   ngOnInit() {
-    this.adapter = new Ie(this.injector, this.appRef, this.viewContainerRef), _e.registerAdapter(this.adapter);
+    this.adapter = new He(this.injector, this.appRef, this.viewContainerRef), Ue.registerAdapter(this.adapter);
     const e = this.elementRef.nativeElement;
     this.cellCommitListener = (t) => {
-      const n = t.detail;
-      this.cellCommit.emit(n);
+      const i = t.detail;
+      this.cellCommit.emit(i);
     }, e.addEventListener("cell-commit", this.cellCommitListener), this.rowCommitListener = (t) => {
-      const n = t.detail;
-      this.rowCommit.emit(n);
+      const i = t.detail;
+      this.rowCommit.emit(i);
     }, e.addEventListener("row-commit", this.rowCommitListener), e.__frameworkAdapter = this.adapter;
   }
   ngAfterContentInit() {
@@ -446,7 +718,7 @@ class $ {
     }, 0);
   }
   /**
-   * Registers custom styles into the grid's shadow DOM.
+   * Registers custom styles into the grid.
    * Uses the grid's registerStyles() API for clean encapsulation.
    */
   registerCustomStyles(e) {
@@ -462,26 +734,26 @@ class $ {
    */
   configureMasterDetail(e) {
     if (!this.adapter) return;
-    const t = e.getPlugin?.(re);
+    const t = e.getPlugin?.(ae);
     if (t && typeof t.refreshDetailRenderer == "function") {
       t.refreshDetailRenderer();
       return;
     }
-    const n = e.querySelector("tbw-grid-detail");
-    if (!n) return;
+    const i = e.querySelector("tbw-grid-detail");
+    if (!i) return;
     const r = this.adapter.createDetailRenderer(e);
     if (!r) return;
-    const s = n.getAttribute("animation");
-    let l = "slide";
-    s === "false" ? l = !1 : s === "fade" && (l = "fade");
-    const a = n.getAttribute("showExpandColumn") !== "false", C = new re({
+    const s = i.getAttribute("animation");
+    let a = "slide";
+    s === "false" ? a = !1 : s === "fade" && (a = "fade");
+    const l = i.getAttribute("showExpandColumn") !== "false", y = new ae({
       detailRenderer: r,
-      showExpandColumn: a,
-      animation: l
-    }), m = e.gridConfig || {}, d = m.plugins || [];
+      showExpandColumn: l,
+      animation: a
+    }), u = e.gridConfig || {}, d = u.plugins || [];
     e.gridConfig = {
-      ...m,
-      plugins: [...d, C]
+      ...u,
+      plugins: [...d, y]
     };
   }
   ngOnDestroy() {
@@ -489,16 +761,20 @@ class $ {
     e && (this.cellCommitListener && (e.removeEventListener("cell-commit", this.cellCommitListener), this.cellCommitListener = null), this.rowCommitListener && (e.removeEventListener("row-commit", this.rowCommitListener), this.rowCommitListener = null)), e && this.customStyles() && e.unregisterStyles?.("angular-custom-styles"), this.adapter && (this.adapter.destroy?.(), this.adapter = null);
   }
 }
-z = h(null), $ = w(z, 0, "Grid", pe, $), g(z, 1, $);
+z = h(null), x = w(z, 0, "Grid", ve, x), g(z, 1, x);
 export {
-  Ie as AngularGridAdapter,
-  $ as Grid,
-  O as GridColumnEditor,
+  He as AngularGridAdapter,
+  De as GRID_TYPE_DEFAULTS,
+  x as Grid,
+  M as GridColumnEditor,
   V as GridColumnView,
-  q as GridDetailView,
-  I as GridToolPanel,
-  j as TbwCellEditor,
-  P as TbwCellView,
-  j as TbwEditor,
-  P as TbwRenderer
+  _ as GridDetailView,
+  q as GridToolPanel,
+  L as GridTypeRegistry,
+  k as TbwCellEditor,
+  G as TbwCellView,
+  k as TbwEditor,
+  G as TbwRenderer,
+  le as isComponentClass,
+  Ke as provideGridTypeDefaults
 };