@toolbox-web/grid-angular 0.0.1 → 0.1.1

package/index.js

@@ -1,46 +1,46 @@
-var me = Object.create;
+var ye = Object.create;
 var M = Object.defineProperty;
-var ue = Object.getOwnPropertyDescriptor;
-var K = (i, e) => (e = Symbol[i]) ? e : /* @__PURE__ */ Symbol.for("Symbol." + i), C = (i) => {
+var Te = Object.getOwnPropertyDescriptor;
+var ee = (i, e) => (e = Symbol[i]) ? e : /* @__PURE__ */ Symbol.for("Symbol." + i), L = (i) => {
   throw TypeError(i);
 };
-var fe = (i, e, t) => e in i ? M(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var F = (i, e) => M(i, "name", { value: e, configurable: !0 });
-var h = (i) => [, , , me(i?.[K("metadata")] ?? null)], Q = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], E = (i) => i !== void 0 && typeof i != "function" ? C("Function expected") : i, pe = (i, e, t, n, r) => ({ kind: Q[i], name: e, metadata: n, addInitializer: (s) => t._ ? C("Already initialized") : r.push(E(s || null)) }), he = (i, e) => fe(e, K("metadata"), i[3]), g = (i, e, t, n) => {
-  for (var r = 0, s = i[e >> 1], o = s && s.length; r < o; r++) e & 1 ? s[r].call(t) : n = s[r].call(t, 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;
-}, R = (i, e, t, n, r, s) => {
-  var o, a, w, m, v, l = e & 7, D = !!(e & 8), u = !!(e & 16), N = l > 3 ? i.length + 1 : l ? D ? 1 : 2 : 0, z = Q[l + 5], B = l > 3 && (i[N - 1] = []), de = i[N] || (i[N] = []), d = l && (!u && !D && (r = r.prototype), l < 5 && (l > 3 || !u) && ue(l < 4 ? r : { get [t]() {
-    return G(this, s);
+}, 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);
   }, set [t](c) {
-    return J(this, s, c);
+    return Z(this, s, c);
   } }, t));
-  l ? u && l < 4 && F(s, (l > 2 ? "set " : l > 1 ? "get " : "") + t) : F(r, t);
-  for (var S = n.length - 1; S >= 0; S--)
-    m = pe(l, t, w = {}, i[3], de), l && (m.static = D, m.private = u, v = m.access = { has: u ? (c) => ge(r, c) : (c) => t in c }, l ^ 3 && (v.get = u ? (c) => (l ^ 1 ? G : Re)(c, r, l ^ 4 ? s : d.get) : (c) => c[t]), l > 2 && (v.set = u ? (c, _) => J(c, r, _, l ^ 4 ? s : d.set) : (c, _) => c[t] = _)), a = (0, n[S])(l ? l < 4 ? u ? s : d[z] : l > 4 ? void 0 : { get: d.get, set: d.set } : r, m), w._ = 1, l ^ 4 || a === void 0 ? E(a) && (l > 4 ? B.unshift(a) : l ? u ? s = a : d[z] = a : r = a) : typeof a != "object" || a === null ? C("Object expected") : (E(o = a.get) && (d.get = o), E(o = a.set) && (d.set = o), E(o = a.init) && B.unshift(o));
-  return l || he(i, r), d && M(r, t, d), u ? l ^ 4 ? s : d : r;
+  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;
 };
-var P = (i, e, t) => e.has(i) || C("Cannot " + t), ge = (i, e) => Object(e) !== e ? C('Cannot use the "in" operator on this value') : i.has(e), G = (i, e, t) => (P(i, e, "read from private field"), t ? t.call(i) : e.get(i));
-var J = (i, e, t, n) => (P(i, e, "write to private field"), n ? n.call(i, t) : e.set(i, t), t), Re = (i, e, t) => (P(i, e, "access private method"), t);
-import { inject as p, ElementRef as b, contentChild as A, TemplateRef as T, effect as x, Directive as y, input as f, EventEmitter as W, EnvironmentInjector as we, ApplicationRef as ve, ViewContainerRef as Ee } from "@angular/core";
-import { DataGridElement as Ce } from "@toolbox-web/grid";
-import { MasterDetailPlugin as X } from "@toolbox-web/grid/all";
-const oe = /* @__PURE__ */ new Map();
-function Y(i) {
-  return oe.get(i);
+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 te, O;
-te = [y({ selector: "tbw-grid-column-editor" })];
-class j {
-  elementRef = p(b);
+var ae, G;
+ae = [E({ selector: "tbw-grid-column-editor" })];
+class O {
+  elementRef = u(R);
   /**
    * Query for the ng-template content child.
    */
-  template = A(T);
+  template = D(y);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = x(() => {
+  onTemplateReceived = T(() => {
     const e = this.template();
-    e && oe.set(this.elementRef.nativeElement, e);
+    e && he.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -50,23 +50,23 @@ class j {
     return !0;
   }
 }
-O = h(null), j = R(O, 0, "GridColumnEditor", te, j), g(O, 1, j);
-const ae = /* @__PURE__ */ new Map();
-function Z(i) {
-  return ae.get(i);
+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);
 }
-var ie, V;
-ie = [y({ selector: "tbw-grid-column-view" })];
-class $ {
-  elementRef = p(b);
+var ce, H;
+ce = [E({ selector: "tbw-grid-column-view" })];
+class V {
+  elementRef = u(R);
   /**
    * Query for the ng-template content child.
    */
-  template = A(T);
+  template = D(y);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = x(() => {
+  onTemplateReceived = T(() => {
     const e = this.template();
-    e && ae.set(this.elementRef.nativeElement, e);
+    e && we.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -76,29 +76,29 @@ class $ {
     return !0;
   }
 }
-V = h(null), $ = R(V, 0, "GridColumnView", ie, $), g(V, 1, $);
-const le = /* @__PURE__ */ new Map();
-function ee(i) {
+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");
   if (e)
-    return le.get(e);
+    return Re.get(e);
 }
-var ne, k;
-ne = [y({ selector: "tbw-grid-detail" })];
+var me, U;
+me = [E({ selector: "tbw-grid-detail" })];
 class q {
-  elementRef = p(b);
+  elementRef = u(R);
   /** Whether to show the expand/collapse column. Default: true */
-  showExpandColumn = f(!0);
+  showExpandColumn = v(!0);
   /** Animation style for expand/collapse. Default: 'slide' */
-  animation = f("slide");
+  animation = v("slide");
   /**
    * Query for the ng-template content child.
    */
-  template = A(T);
+  template = D(y);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = x(() => {
+  onTemplateReceived = T(() => {
     const e = this.template();
-    e && le.set(this.elementRef.nativeElement, e);
+    e && Re.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -108,38 +108,38 @@ class q {
     return !0;
   }
 }
-k = h(null), q = R(k, 0, "GridDetailView", ne, q), g(k, 1, q);
-const ce = /* @__PURE__ */ new Map();
-function be(i) {
-  return ce.get(i);
+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);
 }
-var re, L;
-re = [y({ selector: "tbw-grid-tool-panel" })];
+var ue, B;
+ue = [E({ selector: "tbw-grid-tool-panel" })];
 class I {
-  elementRef = p(b);
+  elementRef = u(R);
   /** Unique panel identifier (required) */
-  id = f.required({ alias: "id" });
+  id = v.required({ alias: "id" });
   /** Panel title shown in accordion header (required) */
-  title = f.required({ alias: "title" });
+  title = v.required({ alias: "title" });
   /** Icon for accordion section header (emoji or text) */
-  icon = f();
+  icon = v();
   /** Tooltip for accordion section header */
-  tooltip = f();
+  tooltip = v();
   /** Panel order priority (lower = first, default: 100) */
-  order = f(100);
+  order = v(100);
   /**
    * Query for the ng-template content child.
    */
-  template = A(T);
+  template = D(y);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = x(() => {
+  onTemplateReceived = T(() => {
     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 r = this.tooltip();
-      r && t.setAttribute("tooltip", r), t.setAttribute("order", String(this.order())), ce.set(t, e);
+      r && t.setAttribute("tooltip", r), t.setAttribute("order", String(this.order())), Ee.set(t, e);
     }
   });
   /**
@@ -150,53 +150,163 @@ class I {
     return !0;
   }
 }
-L = h(null), I = R(L, 0, "GridToolPanel", re, I), g(L, 1, I);
-class ye {
+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);
+  if (e) return e;
+  const t = i.querySelector("tbw-grid-column-view");
+  if (t)
+    return ve(t);
+}
+function qe(i) {
+  const e = J.get(i);
+  if (e) return e;
+  const t = i.querySelector("tbw-grid-column-editor");
+  if (t)
+    return ge(t);
+}
+var de, W;
+de = [E({ selector: "[tbwRenderer]" })];
+class P {
+  template = u(y);
+  elementRef = u(R);
+  columnElement = null;
+  constructor() {
+    T(() => {
+      this.registerTemplate();
+    });
+  }
+  registerTemplate() {
+    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));
+  }
+  ngOnDestroy() {
+    this.columnElement && F.delete(this.columnElement);
+  }
+  /**
+   * Static type guard for template context.
+   * Uses `any` defaults for ergonomic template usage.
+   */
+  static ngTemplateContextGuard(e, t) {
+    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);
+  columnElement = null;
+  constructor() {
+    T(() => {
+      this.registerTemplate();
+    });
+  }
+  registerTemplate() {
+    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));
+  }
+  ngOnDestroy() {
+    this.columnElement && J.delete(this.columnElement);
+  }
+  /**
+   * Static type guard for template context.
+   * Uses `any` defaults for ergonomic template usage.
+   */
+  static ngTemplateContextGuard(e, t) {
+    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);
+}
+function le(i) {
+  const e = qe(i);
+  return e || ge(i);
+}
+class Ie {
   constructor(e, t, n) {
     this.injector = e, this.appRef = t, this.viewContainerRef = n, window.__ANGULAR_GRID_ADAPTER__ = this;
   }
   viewRefs = [];
   /**
    * Determines if this adapter can handle the given element.
-   * Checks if a template is registered for this element.
+   * Checks if a template is registered for this element (structural or nested).
    */
   canHandle(e) {
-    return Z(e) !== void 0 || Y(e) !== void 0;
+    return oe(e) !== void 0 || le(e) !== void 0;
   }
   /**
    * Creates a view renderer function that creates an embedded view
    * from the registered template and returns its DOM element.
+   *
+   * Returns undefined if no template is registered for this element,
+   * allowing the grid to use its default rendering.
    */
   createRenderer(e) {
-    const t = Z(e);
-    return t ? (n) => {
-      const r = {
-        $implicit: n.value,
-        value: n.value,
-        row: n.row,
-        column: n.column
-      }, s = this.viewContainerRef.createEmbeddedView(t, r);
-      return this.viewRefs.push(s), s.detectChanges(), s.rootNodes[0];
-    } : (console.warn("[AngularGridAdapter] No template registered for element"), () => "");
+    const t = oe(e);
+    if (t)
+      return (n) => {
+        const r = {
+          $implicit: n.value,
+          value: n.value,
+          row: n.row,
+          column: n.column
+        }, s = this.viewContainerRef.createEmbeddedView(t, r);
+        return this.viewRefs.push(s), s.detectChanges(), s.rootNodes[0];
+      };
   }
   /**
-   * Creates an editor spec that creates an embedded view
-   * with commit/cancel EventEmitters in the context.
+   * Creates an editor spec that creates an embedded view.
+   *
+   * **Auto-wiring**: The adapter automatically listens for `commit` and `cancel`
+   * CustomEvents on the rendered component. If the component emits these events,
+   * the adapter will call the grid's commit/cancel functions automatically.
+   *
+   * This means templates can be simplified from:
+   * ```html
+   * <app-editor *tbwEditor="let value; onCommit as onCommit"
+   *   [value]="value" (commit)="onCommit($event)" />
+   * ```
+   * To just:
+   * ```html
+   * <app-editor *tbwEditor="let value" [value]="value" />
+   * ```
+   * As long as the component emits `(commit)` with the new value.
    */
   createEditor(e) {
-    const t = Y(e);
+    const t = le(e);
     return t ? (n) => {
-      const r = new W(), s = new W();
-      r.subscribe((m) => n.commit(m)), s.subscribe(() => n.cancel());
-      const o = {
+      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,
-        commit: r,
-        cancel: s
-      }, a = this.viewContainerRef.createEmbeddedView(t, o);
-      return this.viewRefs.push(a), a.detectChanges(), a.rootNodes[0];
+        // 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];
+      return d && d.addEventListener && (d.addEventListener("commit", (o) => {
+        const b = o;
+        n.commit(b.detail);
+      }), d.addEventListener("cancel", () => {
+        n.cancel();
+      })), d;
     } : (console.warn("[AngularGridAdapter] No editor template registered for element"), () => document.createElement("div"));
   }
   /**
@@ -204,7 +314,7 @@ class ye {
    * Renders Angular templates for expandable detail rows.
    */
   createDetailRenderer(e) {
-    const t = ee(e);
+    const t = se(e);
     if (t)
       return (n) => {
         const r = {
@@ -212,8 +322,8 @@ class ye {
           row: n
         }, s = this.viewContainerRef.createEmbeddedView(t, r);
         this.viewRefs.push(s), s.detectChanges();
-        const o = document.createElement("div");
-        return s.rootNodes.forEach((a) => o.appendChild(a)), o;
+        const l = document.createElement("div");
+        return s.rootNodes.forEach((a) => l.appendChild(a)), l;
       };
   }
   /**
@@ -224,7 +334,7 @@ class ye {
    * without manual configuration in the Grid directive.
    */
   parseDetailElement(e) {
-    const t = ee(e.closest("tbw-grid"));
+    const t = se(e.closest("tbw-grid"));
     if (t)
       return (n) => {
         const r = {
@@ -232,8 +342,8 @@ class ye {
           row: n
         }, s = this.viewContainerRef.createEmbeddedView(t, r);
         this.viewRefs.push(s), s.detectChanges();
-        const o = document.createElement("div");
-        return s.rootNodes.forEach((a) => o.appendChild(a)), o;
+        const l = document.createElement("div");
+        return s.rootNodes.forEach((a) => l.appendChild(a)), l;
       };
   }
   /**
@@ -241,7 +351,7 @@ class ye {
    * The renderer creates an Angular template-based panel content.
    */
   createToolPanelRenderer(e) {
-    const t = be(e);
+    const t = Oe(e);
     if (!t)
       return;
     const n = e.closest("tbw-grid");
@@ -249,10 +359,10 @@ class ye {
       const s = {
         $implicit: n ?? r,
         grid: n ?? r
-      }, o = this.viewContainerRef.createEmbeddedView(t, s);
-      return this.viewRefs.push(o), o.detectChanges(), o.rootNodes.forEach((a) => r.appendChild(a)), () => {
-        const a = this.viewRefs.indexOf(o);
-        a > -1 && this.viewRefs.splice(a, 1), o.destroy();
+      }, 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();
       };
     };
   }
@@ -264,14 +374,16 @@ class ye {
     this.viewRefs.forEach((e) => e.destroy()), this.viewRefs = [];
   }
 }
-var se, U;
-se = [y({ selector: "tbw-grid" })];
-class H {
-  elementRef = p(b);
-  injector = p(we);
-  appRef = p(ve);
-  viewContainerRef = p(Ee);
+var pe, z;
+pe = [E({ selector: "tbw-grid" })];
+class $ {
+  elementRef = u(R);
+  injector = u(Ne);
+  appRef = u(xe);
+  viewContainerRef = u(Me);
   adapter = null;
+  cellCommitListener = null;
+  rowCommitListener = null;
   /**
    * Custom CSS styles to inject into the grid's shadow DOM.
    * Use this to style custom cell renderers, editors, or detail panels.
@@ -289,11 +401,43 @@ class H {
    * <tbw-grid [customStyles]="customStyles">...</tbw-grid>
    * ```
    */
-  customStyles = f();
+  customStyles = v();
+  /**
+   * Emitted when a cell value is committed (inline editing).
+   * Provides the row, field, new value, and change tracking information.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (cellCommit)="onCellCommit($event)">...</tbw-grid>
+   * ```
+   *
+   * ```typescript
+   * onCellCommit(event: CellCommitEvent) {
+   *   console.log(`Changed ${event.field} to ${event.value} in row ${event.rowIndex}`);
+   * }
+   * ```
+   */
+  cellCommit = ne();
+  /**
+   * Emitted when a row's values are committed (bulk/row editing).
+   * Provides the row data and change tracking information.
+   *
+   * @example
+   * ```html
+   * <tbw-grid (rowCommit)="onRowCommit($event)">...</tbw-grid>
+   * ```
+   */
+  rowCommit = ne();
   ngOnInit() {
-    this.adapter = new ye(this.injector, this.appRef, this.viewContainerRef), Ce.registerAdapter(this.adapter);
+    this.adapter = new Ie(this.injector, this.appRef, this.viewContainerRef), _e.registerAdapter(this.adapter);
     const e = this.elementRef.nativeElement;
-    e.__frameworkAdapter = this.adapter;
+    this.cellCommitListener = (t) => {
+      const n = t.detail;
+      this.cellCommit.emit(n);
+    }, e.addEventListener("cell-commit", this.cellCommitListener), this.rowCommitListener = (t) => {
+      const n = t.detail;
+      this.rowCommit.emit(n);
+    }, e.addEventListener("row-commit", this.rowCommitListener), e.__frameworkAdapter = this.adapter;
   }
   ngAfterContentInit() {
     const e = this.elementRef.nativeElement;
@@ -318,7 +462,7 @@ class H {
    */
   configureMasterDetail(e) {
     if (!this.adapter) return;
-    const t = e.getPlugin?.(X);
+    const t = e.getPlugin?.(re);
     if (t && typeof t.refreshDetailRenderer == "function") {
       t.refreshDetailRenderer();
       return;
@@ -328,29 +472,33 @@ class H {
     const r = this.adapter.createDetailRenderer(e);
     if (!r) return;
     const s = n.getAttribute("animation");
-    let o = "slide";
-    s === "false" ? o = !1 : s === "fade" && (o = "fade");
-    const a = n.getAttribute("showExpandColumn") !== "false", w = new X({
+    let l = "slide";
+    s === "false" ? l = !1 : s === "fade" && (l = "fade");
+    const a = n.getAttribute("showExpandColumn") !== "false", C = new re({
       detailRenderer: r,
       showExpandColumn: a,
-      animation: o
-    }), m = e.gridConfig || {}, v = m.plugins || [];
+      animation: l
+    }), m = e.gridConfig || {}, d = m.plugins || [];
     e.gridConfig = {
       ...m,
-      plugins: [...v, w]
+      plugins: [...d, C]
     };
   }
   ngOnDestroy() {
     const e = this.elementRef.nativeElement;
-    e && this.customStyles() && e.unregisterStyles?.("angular-custom-styles"), this.adapter && (this.adapter.destroy?.(), this.adapter = null);
+    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);
   }
 }
-U = h(null), H = R(U, 0, "Grid", se, H), g(U, 1, H);
+z = h(null), $ = w(z, 0, "Grid", pe, $), g(z, 1, $);
 export {
-  ye as AngularGridAdapter,
-  H as Grid,
-  j as GridColumnEditor,
-  $ as GridColumnView,
+  Ie as AngularGridAdapter,
+  $ as Grid,
+  O as GridColumnEditor,
+  V as GridColumnView,
   q as GridDetailView,
-  I as GridToolPanel
+  I as GridToolPanel,
+  j as TbwCellEditor,
+  P as TbwCellView,
+  j as TbwEditor,
+  P as TbwRenderer
 };

package/lib/angular-grid-adapter.d.ts

@@ -26,7 +26,17 @@ import { ColumnEditorSpec, ColumnViewRenderer, FrameworkAdapter } from '../../..
  * }
  * ```
  *
- * **Declarative configuration in templates:**
+ * **Declarative configuration in templates (structural directive - recommended):**
+ * ```html
+ * <tbw-grid>
+ *   <tbw-grid-column field="status">
+ *     <app-status-badge *tbwRenderer="let value; row as row" [value]="value" />
+ *     <app-status-editor *tbwEditor="let value" [value]="value" />
+ *   </tbw-grid-column>
+ * </tbw-grid>
+ * ```
+ *
+ * **Declarative configuration in templates (nested directive - legacy):**
  * ```html
  * <tbw-grid>
  *   <tbw-grid-column field="status">
@@ -36,8 +46,8 @@ import { ColumnEditorSpec, ColumnViewRenderer, FrameworkAdapter } from '../../..
  *       </ng-template>
  *     </tbw-grid-column-view>
  *     <tbw-grid-column-editor>
- *       <ng-template let-value let-commit="commit" let-cancel="cancel">
- *         <app-status-select [value]="value" (commit)="commit.emit($event)" (cancel)="cancel.emit()" />
+ *       <ng-template let-value let-onCommit="onCommit" let-onCancel="onCancel">
+ *         <app-status-select [value]="value" (commit)="onCommit($event)" (cancel)="onCancel()" />
  *       </ng-template>
  *     </tbw-grid-column-editor>
  *   </tbw-grid-column>
@@ -45,9 +55,9 @@ import { ColumnEditorSpec, ColumnViewRenderer, FrameworkAdapter } from '../../..
  * ```
  *
  * The adapter automatically:
- * - Detects Angular templates registered by directives
+ * - Detects Angular templates registered by directives (both structural and nested)
  * - Creates embedded views with cell context (value, row, column)
- * - Handles editor outputs (commit/cancel) via EventEmitters
+ * - Handles editor callbacks (onCommit/onCancel)
  * - Manages view lifecycle and change detection
  */
 export declare class AngularGridAdapter implements FrameworkAdapter {
@@ -58,17 +68,34 @@ export declare class AngularGridAdapter implements FrameworkAdapter {
     constructor(injector: EnvironmentInjector, appRef: ApplicationRef, viewContainerRef: ViewContainerRef);
     /**
      * Determines if this adapter can handle the given element.
-     * Checks if a template is registered for this element.
+     * Checks if a template is registered for this element (structural or nested).
      */
     canHandle(element: HTMLElement): boolean;
     /**
      * Creates a view renderer function that creates an embedded view
      * from the registered template and returns its DOM element.
+     *
+     * Returns undefined if no template is registered for this element,
+     * allowing the grid to use its default rendering.
      */
     createRenderer<TRow = unknown, TValue = unknown>(element: HTMLElement): ColumnViewRenderer<TRow, TValue>;
     /**
-     * Creates an editor spec that creates an embedded view
-     * with commit/cancel EventEmitters in the context.
+     * Creates an editor spec that creates an embedded view.
+     *
+     * **Auto-wiring**: The adapter automatically listens for `commit` and `cancel`
+     * CustomEvents on the rendered component. If the component emits these events,
+     * the adapter will call the grid's commit/cancel functions automatically.
+     *
+     * This means templates can be simplified from:
+     * ```html
+     * <app-editor *tbwEditor="let value; onCommit as onCommit"
+     *   [value]="value" (commit)="onCommit($event)" />
+     * ```
+     * To just:
+     * ```html
+     * <app-editor *tbwEditor="let value" [value]="value" />
+     * ```
+     * As long as the component emits `(commit)` with the new value.
      */
     createEditor<TRow = unknown, TValue = unknown>(element: HTMLElement): ColumnEditorSpec<TRow, TValue>;
     /**