@toolbox-web/grid-angular 0.0.1

package/index.d.ts

@@ -0,0 +1,11 @@
+export { AngularGridAdapter } from './lib/angular-grid-adapter';
+export { GridColumnEditor } from './lib/directives/grid-column-editor.directive';
+export type { GridEditorContext } from './lib/directives/grid-column-editor.directive';
+export { GridColumnView } from './lib/directives/grid-column-view.directive';
+export type { GridCellContext } from './lib/directives/grid-column-view.directive';
+export { GridDetailView } from './lib/directives/grid-detail-view.directive';
+export type { GridDetailContext } from './lib/directives/grid-detail-view.directive';
+export { GridToolPanel } from './lib/directives/grid-tool-panel.directive';
+export type { GridToolPanelContext } from './lib/directives/grid-tool-panel.directive';
+export { Grid } from './lib/directives/grid.directive';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../libs/grid-angular/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AACjF,YAAY,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,YAAY,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,YAAY,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,iCAAiC,CAAC"}

package/index.js

@@ -0,0 +1,356 @@
+var me = 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) => {
+  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);
+  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);
+  }, set [t](c) {
+    return J(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;
+};
+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 te, O;
+te = [y({ selector: "tbw-grid-column-editor" })];
+class j {
+  elementRef = p(b);
+  /**
+   * Query for the ng-template content child.
+   */
+  template = A(T);
+  /** Effect that triggers when the template is available */
+  onTemplateReceived = x(() => {
+    const e = this.template();
+    e && oe.set(this.elementRef.nativeElement, e);
+  });
+  /**
+   * Static type guard for template context.
+   * Enables type inference in templates.
+   */
+  static ngTemplateContextGuard(e, t) {
+    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);
+}
+var ie, V;
+ie = [y({ selector: "tbw-grid-column-view" })];
+class $ {
+  elementRef = p(b);
+  /**
+   * Query for the ng-template content child.
+   */
+  template = A(T);
+  /** Effect that triggers when the template is available */
+  onTemplateReceived = x(() => {
+    const e = this.template();
+    e && ae.set(this.elementRef.nativeElement, e);
+  });
+  /**
+   * Static type guard for template context.
+   * Enables type inference in templates.
+   */
+  static ngTemplateContextGuard(e, t) {
+    return !0;
+  }
+}
+V = h(null), $ = R(V, 0, "GridColumnView", ie, $), g(V, 1, $);
+const le = /* @__PURE__ */ new Map();
+function ee(i) {
+  const e = i.querySelector("tbw-grid-detail");
+  if (e)
+    return le.get(e);
+}
+var ne, k;
+ne = [y({ selector: "tbw-grid-detail" })];
+class q {
+  elementRef = p(b);
+  /** Whether to show the expand/collapse column. Default: true */
+  showExpandColumn = f(!0);
+  /** Animation style for expand/collapse. Default: 'slide' */
+  animation = f("slide");
+  /**
+   * Query for the ng-template content child.
+   */
+  template = A(T);
+  /** Effect that triggers when the template is available */
+  onTemplateReceived = x(() => {
+    const e = this.template();
+    e && le.set(this.elementRef.nativeElement, e);
+  });
+  /**
+   * Static type guard for template context.
+   * Enables type inference in templates.
+   */
+  static ngTemplateContextGuard(e, t) {
+    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);
+}
+var re, L;
+re = [y({ selector: "tbw-grid-tool-panel" })];
+class I {
+  elementRef = p(b);
+  /** Unique panel identifier (required) */
+  id = f.required({ alias: "id" });
+  /** Panel title shown in accordion header (required) */
+  title = f.required({ alias: "title" });
+  /** Icon for accordion section header (emoji or text) */
+  icon = f();
+  /** Tooltip for accordion section header */
+  tooltip = f();
+  /** Panel order priority (lower = first, default: 100) */
+  order = f(100);
+  /**
+   * Query for the ng-template content child.
+   */
+  template = A(T);
+  /** Effect that triggers when the template is available */
+  onTemplateReceived = x(() => {
+    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);
+    }
+  });
+  /**
+   * Static type guard for template context.
+   * Enables type inference in templates.
+   */
+  static ngTemplateContextGuard(e, t) {
+    return !0;
+  }
+}
+L = h(null), I = R(L, 0, "GridToolPanel", re, I), g(L, 1, I);
+class ye {
+  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.
+   */
+  canHandle(e) {
+    return Z(e) !== void 0 || Y(e) !== void 0;
+  }
+  /**
+   * Creates a view renderer function that creates an embedded view
+   * from the registered template and returns its DOM element.
+   */
+  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"), () => "");
+  }
+  /**
+   * Creates an editor spec that creates an embedded view
+   * with commit/cancel EventEmitters in the context.
+   */
+  createEditor(e) {
+    const t = Y(e);
+    return t ? (n) => {
+      const r = new W(), s = new W();
+      r.subscribe((m) => n.commit(m)), s.subscribe(() => n.cancel());
+      const o = {
+        $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];
+    } : (console.warn("[AngularGridAdapter] No editor template registered for element"), () => document.createElement("div"));
+  }
+  /**
+   * Creates a detail renderer function for MasterDetailPlugin.
+   * Renders Angular templates for expandable detail rows.
+   */
+  createDetailRenderer(e) {
+    const t = ee(e);
+    if (t)
+      return (n) => {
+        const r = {
+          $implicit: n,
+          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;
+      };
+  }
+  /**
+   * Framework adapter hook called by MasterDetailPlugin during attach().
+   * Parses the <tbw-grid-detail> element and returns an Angular template-based renderer.
+   *
+   * This enables MasterDetailPlugin to automatically use Angular templates
+   * without manual configuration in the Grid directive.
+   */
+  parseDetailElement(e) {
+    const t = ee(e.closest("tbw-grid"));
+    if (t)
+      return (n) => {
+        const r = {
+          $implicit: n,
+          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;
+      };
+  }
+  /**
+   * Creates a tool panel renderer from a light DOM element.
+   * The renderer creates an Angular template-based panel content.
+   */
+  createToolPanelRenderer(e) {
+    const t = be(e);
+    if (!t)
+      return;
+    const n = e.closest("tbw-grid");
+    return (r) => {
+      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();
+      };
+    };
+  }
+  /**
+   * Clean up all view references.
+   * Call this when your app/component is destroyed.
+   */
+  destroy() {
+    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);
+  adapter = null;
+  /**
+   * Custom CSS styles to inject into the grid's shadow DOM.
+   * Use this to style custom cell renderers, editors, or detail panels.
+   *
+   * @example
+   * ```typescript
+   * // In your component
+   * customStyles = `
+   *   .my-detail-panel { padding: 16px; }
+   *   .my-status-badge { border-radius: 4px; }
+   * `;
+   * ```
+   *
+   * ```html
+   * <tbw-grid [customStyles]="customStyles">...</tbw-grid>
+   * ```
+   */
+  customStyles = f();
+  ngOnInit() {
+    this.adapter = new ye(this.injector, this.appRef, this.viewContainerRef), Ce.registerAdapter(this.adapter);
+    const e = this.elementRef.nativeElement;
+    e.__frameworkAdapter = this.adapter;
+  }
+  ngAfterContentInit() {
+    const e = this.elementRef.nativeElement;
+    e && typeof e.refreshColumns == "function" && setTimeout(() => {
+      e.refreshColumns(), this.configureMasterDetail(e), typeof e.refreshShellHeader == "function" && e.refreshShellHeader(), this.registerCustomStyles(e);
+    }, 0);
+  }
+  /**
+   * Registers custom styles into the grid's shadow DOM.
+   * Uses the grid's registerStyles() API for clean encapsulation.
+   */
+  registerCustomStyles(e) {
+    const t = this.customStyles();
+    t && e.ready?.().then(() => {
+      e.registerStyles?.("angular-custom-styles", t);
+    });
+  }
+  /**
+   * 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
+   */
+  configureMasterDetail(e) {
+    if (!this.adapter) return;
+    const t = e.getPlugin?.(X);
+    if (t && typeof t.refreshDetailRenderer == "function") {
+      t.refreshDetailRenderer();
+      return;
+    }
+    const n = e.querySelector("tbw-grid-detail");
+    if (!n) return;
+    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({
+      detailRenderer: r,
+      showExpandColumn: a,
+      animation: o
+    }), m = e.gridConfig || {}, v = m.plugins || [];
+    e.gridConfig = {
+      ...m,
+      plugins: [...v, w]
+    };
+  }
+  ngOnDestroy() {
+    const e = this.elementRef.nativeElement;
+    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);
+export {
+  ye as AngularGridAdapter,
+  H as Grid,
+  j as GridColumnEditor,
+  $ as GridColumnView,
+  q as GridDetailView,
+  I as GridToolPanel
+};

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

@@ -0,0 +1,98 @@
+import { ApplicationRef, EnvironmentInjector, ViewContainerRef } from '@angular/core';
+import { ColumnEditorSpec, ColumnViewRenderer, FrameworkAdapter } from '../../../../dist/libs/grid/index.d.ts';
+/**
+ * Framework adapter that enables zero-boilerplate integration of Angular components
+ * with the grid's light DOM configuration API.
+ *
+ * ## Usage
+ *
+ * **One-time setup in your app:**
+ * ```typescript
+ * import { Component, inject, EnvironmentInjector, ApplicationRef, ViewContainerRef } from '@angular/core';
+ * import { GridElement } from '@toolbox-web/grid';
+ * import { AngularGridAdapter } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   selector: 'app-root',
+ *   // ...
+ * })
+ * export class AppComponent {
+ *   constructor() {
+ *     const injector = inject(EnvironmentInjector);
+ *     const appRef = inject(ApplicationRef);
+ *     const viewContainerRef = inject(ViewContainerRef);
+ *     GridElement.registerAdapter(new AngularGridAdapter(injector, appRef, viewContainerRef));
+ *   }
+ * }
+ * ```
+ *
+ * **Declarative configuration in templates:**
+ * ```html
+ * <tbw-grid>
+ *   <tbw-grid-column field="status">
+ *     <tbw-grid-column-view>
+ *       <ng-template let-value let-row="row">
+ *         <app-status-badge [value]="value" [row]="row" />
+ *       </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>
+ *     </tbw-grid-column-editor>
+ *   </tbw-grid-column>
+ * </tbw-grid>
+ * ```
+ *
+ * The adapter automatically:
+ * - Detects Angular templates registered by directives
+ * - Creates embedded views with cell context (value, row, column)
+ * - Handles editor outputs (commit/cancel) via EventEmitters
+ * - Manages view lifecycle and change detection
+ */
+export declare class AngularGridAdapter implements FrameworkAdapter {
+    private injector;
+    private appRef;
+    private viewContainerRef;
+    private viewRefs;
+    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.
+     */
+    canHandle(element: HTMLElement): boolean;
+    /**
+     * Creates a view renderer function that creates an embedded view
+     * from the registered template and returns its DOM element.
+     */
+    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.
+     */
+    createEditor<TRow = unknown, TValue = unknown>(element: HTMLElement): ColumnEditorSpec<TRow, TValue>;
+    /**
+     * Creates a detail renderer function for MasterDetailPlugin.
+     * Renders Angular templates for expandable detail rows.
+     */
+    createDetailRenderer<TRow = unknown>(gridElement: HTMLElement): ((row: TRow) => HTMLElement) | undefined;
+    /**
+     * Framework adapter hook called by MasterDetailPlugin during attach().
+     * Parses the <tbw-grid-detail> element and returns an Angular template-based renderer.
+     *
+     * This enables MasterDetailPlugin to automatically use Angular templates
+     * without manual configuration in the Grid directive.
+     */
+    parseDetailElement<TRow = unknown>(detailElement: Element): ((row: TRow, rowIndex: number) => HTMLElement | string) | undefined;
+    /**
+     * Creates a tool panel renderer from a light DOM element.
+     * The renderer creates an Angular template-based panel content.
+     */
+    createToolPanelRenderer(element: HTMLElement): ((container: HTMLElement) => void | (() => void)) | undefined;
+    /**
+     * Clean up all view references.
+     * Call this when your app/component is destroyed.
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=angular-grid-adapter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"angular-grid-adapter.d.ts","sourceRoot":"","sources":["../../../../libs/grid-angular/src/lib/angular-grid-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EAEd,mBAAmB,EAGnB,gBAAgB,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAGV,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAM3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,qBAAa,kBAAmB,YAAW,gBAAgB;IAIvD,OAAO,CAAC,QAAQ;IAChB,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,gBAAgB;IAL1B,OAAO,CAAC,QAAQ,CAAkC;gBAGxC,QAAQ,EAAE,mBAAmB,EAC7B,MAAM,EAAE,cAAc,EACtB,gBAAgB,EAAE,gBAAgB;IAM5C;;;OAGG;IACH,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAIxC;;;OAGG;IACH,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC;IA8BxG;;;OAGG;IACH,YAAY,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC;IAwCpG;;;OAGG;IACH,oBAAoB,CAAC,IAAI,GAAG,OAAO,EAAE,WAAW,EAAE,WAAW,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,WAAW,CAAC,GAAG,SAAS;IA4BxG;;;;;;OAMG;IACH,kBAAkB,CAAC,IAAI,GAAG,OAAO,EAC/B,aAAa,EAAE,OAAO,GACrB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,GAAG,SAAS;IA4BtE;;;OAGG;IACH,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,SAAS,EAAE,WAAW,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS;IAsC5G;;;OAGG;IACH,OAAO,IAAI,IAAI;CAIhB"}

package/lib/component-registry.d.ts

@@ -0,0 +1,63 @@
+import { Type } from '@angular/core';
+/**
+ * Register an Angular component as a grid cell renderer.
+ * Call this at module level (outside the class) to register on import.
+ *
+ * @example
+ * ```typescript
+ * import { Component, input } from '@angular/core';
+ * import { registerGridRenderer, GridCellRenderer } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   selector: 'app-status-badge',
+ *   template: `<span [class]="'status-' + value()">{{ value() }}</span>`,
+ * })
+ * export class StatusBadgeComponent implements GridCellRenderer<string> {
+ *   value = input.required<string>();
+ *   row = input<unknown>();
+ * }
+ *
+ * // Register at module level - runs when file is imported
+ * registerGridRenderer('app-status-badge', StatusBadgeComponent);
+ * ```
+ */
+export declare function registerGridRenderer(tagName: string, componentType: Type<unknown>): void;
+/**
+ * Register an Angular component as a grid cell editor.
+ * Call this at module level (outside the class) to register on import.
+ *
+ * @example
+ * ```typescript
+ * import { Component, input, output } from '@angular/core';
+ * import { registerGridEditor, GridCellEditor } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   selector: 'app-status-select',
+ *   template: `<select [value]="value()" (change)="onChange($event)">...</select>`,
+ * })
+ * export class StatusSelectComponent implements GridCellEditor<string> {
+ *   value = input.required<string>();
+ *   commit = output<string>();
+ *   cancel = output<void>();
+ *
+ *   onChange(e: Event) {
+ *     this.commit.emit((e.target as HTMLSelectElement).value);
+ *   }
+ * }
+ *
+ * // Register at module level - runs when file is imported
+ * registerGridEditor('app-status-select', StatusSelectComponent);
+ * ```
+ */
+export declare function registerGridEditor(tagName: string, componentType: Type<unknown>): void;
+/**
+ * Get a registered component by tag name.
+ * Used internally by AngularGridAdapter.
+ */
+export declare function getRegisteredComponent(tagName: string): Type<unknown> | undefined;
+/**
+ * Get all registered components.
+ * Used internally by AngularGridAdapter.
+ */
+export declare function getAllRegisteredComponents(): Map<string, Type<unknown>>;
+//# sourceMappingURL=component-registry.d.ts.map

package/lib/component-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-registry.d.ts","sourceRoot":"","sources":["../../../../libs/grid-angular/src/lib/component-registry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAmCrC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAExF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAEtF;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,SAAS,CAEjF;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,IAAI,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAEvE"}

package/lib/directives/grid-column-editor.directive.d.ts

@@ -0,0 +1,80 @@
+import { EventEmitter, TemplateRef } from '@angular/core';
+/**
+ * Context object passed to the cell editor template.
+ * Contains the cell value, row data, column configuration, and commit/cancel functions.
+ */
+export interface GridEditorContext<TValue = unknown, TRow = unknown> {
+    /** The cell value for this column */
+    $implicit: TValue;
+    /** The cell value (explicit binding) */
+    value: TValue;
+    /** The full row data object */
+    row: TRow;
+    /** The column configuration */
+    column: unknown;
+    /** Event emitter to commit the edited value */
+    commit: EventEmitter<TValue>;
+    /** Event emitter to cancel editing */
+    cancel: EventEmitter<void>;
+}
+/**
+ * Gets the editor template registered for a given element.
+ * Used by AngularGridAdapter to retrieve templates at render time.
+ */
+export declare function getEditorTemplate(element: HTMLElement): TemplateRef<GridEditorContext> | undefined;
+/**
+ * Directive that captures an `<ng-template>` for use as a cell editor.
+ *
+ * This enables declarative Angular component usage with proper input bindings
+ * that satisfy Angular's AOT compiler.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <tbw-grid-column field="status" editable>
+ *   <tbw-grid-column-editor>
+ *     <ng-template let-value let-row="row" let-commit="commit" let-cancel="cancel">
+ *       <app-status-select
+ *         [value]="value"
+ *         [row]="row"
+ *         (commit)="commit.emit($event)"
+ *         (cancel)="cancel.emit()"
+ *       />
+ *     </ng-template>
+ *   </tbw-grid-column-editor>
+ * </tbw-grid-column>
+ * ```
+ *
+ * The template context provides:
+ * - `$implicit` / `value`: The cell value
+ * - `row`: The full row data object
+ * - `column`: The column configuration
+ * - `commit`: EventEmitter to commit the new value
+ * - `cancel`: EventEmitter to cancel editing
+ *
+ * Import the directive in your component:
+ *
+ * ```typescript
+ * import { GridColumnEditor } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [GridColumnEditor],
+ *   // ...
+ * })
+ * ```
+ */
+export declare class GridColumnEditor {
+    private elementRef;
+    /**
+     * Query for the ng-template content child.
+     */
+    template: import('@angular/core').Signal<TemplateRef<any> | undefined>;
+    /** Effect that triggers when the template is available */
+    private onTemplateReceived;
+    /**
+     * Static type guard for template context.
+     * Enables type inference in templates.
+     */
+    static ngTemplateContextGuard(dir: GridColumnEditor, ctx: unknown): ctx is GridEditorContext;
+}
+//# sourceMappingURL=grid-column-editor.directive.d.ts.map

package/lib/directives/grid-column-editor.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-column-editor.directive.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/grid-column-editor.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+C,YAAY,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAE/G;;;GAGG;AACH,MAAM,WAAW,iBAAiB,CAAC,MAAM,GAAG,OAAO,EAAE,IAAI,GAAG,OAAO;IACjE,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,GAAG,EAAE,IAAI,CAAC;IACV,+BAA+B;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC7B,sCAAsC;IACtC,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;CAC5B;AAKD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAElG;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBACa,gBAAgB;IAC3B,OAAO,CAAC,UAAU,CAAmC;IAErD;;OAEG;IACH,QAAQ,+DAAgD;IAExD,0DAA0D;IAC1D,OAAO,CAAC,kBAAkB,CAMvB;IAEH;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,GAAG,EAAE,gBAAgB,EAAE,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,iBAAiB;CAG7F"}

package/lib/directives/grid-column-view.directive.d.ts

@@ -0,0 +1,69 @@
+import { TemplateRef } from '@angular/core';
+/**
+ * Context object passed to the cell renderer template.
+ * Contains the cell value, row data, and column configuration.
+ */
+export interface GridCellContext<TValue = unknown, TRow = unknown> {
+    /** The cell value for this column */
+    $implicit: TValue;
+    /** The cell value (explicit binding) */
+    value: TValue;
+    /** The full row data object */
+    row: TRow;
+    /** The column configuration */
+    column: unknown;
+}
+/**
+ * Gets the template registered for a given element.
+ * Used by AngularGridAdapter to retrieve templates at render time.
+ */
+export declare function getViewTemplate(element: HTMLElement): TemplateRef<GridCellContext> | undefined;
+/**
+ * Directive that captures an `<ng-template>` for use as a cell renderer.
+ *
+ * This enables declarative Angular component usage with proper input bindings
+ * that satisfy Angular's AOT compiler.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <tbw-grid-column field="status">
+ *   <tbw-grid-column-view>
+ *     <ng-template let-value let-row="row">
+ *       <app-status-badge [value]="value" [row]="row" />
+ *     </ng-template>
+ *   </tbw-grid-column-view>
+ * </tbw-grid-column>
+ * ```
+ *
+ * The template context provides:
+ * - `$implicit` / `value`: The cell value
+ * - `row`: The full row data object
+ * - `column`: The column configuration
+ *
+ * Import the directive in your component:
+ *
+ * ```typescript
+ * import { GridColumnView } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [GridColumnView],
+ *   // ...
+ * })
+ * ```
+ */
+export declare class GridColumnView {
+    private elementRef;
+    /**
+     * Query for the ng-template content child.
+     */
+    template: import('@angular/core').Signal<TemplateRef<any> | undefined>;
+    /** Effect that triggers when the template is available */
+    private onTemplateReceived;
+    /**
+     * Static type guard for template context.
+     * Enables type inference in templates.
+     */
+    static ngTemplateContextGuard(dir: GridColumnView, ctx: unknown): ctx is GridCellContext;
+}
+//# sourceMappingURL=grid-column-view.directive.d.ts.map

package/lib/directives/grid-column-view.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-column-view.directive.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/grid-column-view.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuD,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjG;;;GAGG;AACH,MAAM,WAAW,eAAe,CAAC,MAAM,GAAG,OAAO,EAAE,IAAI,GAAG,OAAO;IAC/D,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,GAAG,EAAE,IAAI,CAAC;IACV,+BAA+B;IAC/B,MAAM,EAAE,OAAO,CAAC;CACjB;AAKD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,CAAC,eAAe,CAAC,GAAG,SAAS,CAE9F;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,cAAc;IACzB,OAAO,CAAC,UAAU,CAAmC;IAErD;;OAEG;IACH,QAAQ,+DAA8C;IAEtD,0DAA0D;IAC1D,OAAO,CAAC,kBAAkB,CAMvB;IAEH;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,GAAG,EAAE,cAAc,EAAE,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,eAAe;CAGzF"}

package/lib/directives/grid-detail-view.directive.d.ts

@@ -0,0 +1,75 @@
+import { TemplateRef } from '@angular/core';
+import { ExpandCollapseAnimation } from '../../../../../dist/libs/grid/index.d.ts';
+/**
+ * Context object passed to the detail renderer template.
+ * Contains the row data for the expanded detail view.
+ */
+export interface GridDetailContext<TRow = unknown> {
+    /** The row data (implicit binding for let-row) */
+    $implicit: TRow;
+    /** The row data (explicit binding) */
+    row: TRow;
+}
+/**
+ * Gets the detail template registered for a given grid element.
+ * Used by AngularGridAdapter to retrieve templates at render time.
+ */
+export declare function getDetailTemplate(gridElement: HTMLElement): TemplateRef<GridDetailContext> | undefined;
+/**
+ * Gets the configuration for the detail view.
+ */
+export declare function getDetailConfig(gridElement: HTMLElement): {
+    showExpandColumn?: boolean;
+    animation?: ExpandCollapseAnimation;
+} | undefined;
+/**
+ * Directive that captures an `<ng-template>` for use as a master-detail row renderer.
+ *
+ * This enables declarative Angular component usage for expandable detail rows
+ * that appear below the main row when expanded.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <tbw-grid [rows]="rows" [gridConfig]="config">
+ *   <tbw-grid-detail [showExpandColumn]="true" animation="slide">
+ *     <ng-template let-row>
+ *       <app-detail-panel [employee]="row" />
+ *     </ng-template>
+ *   </tbw-grid-detail>
+ * </tbw-grid>
+ * ```
+ *
+ * The template context provides:
+ * - `$implicit` / `row`: The full row data object
+ *
+ * Import the directive in your component:
+ *
+ * ```typescript
+ * import { GridDetailView } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [GridDetailView],
+ *   // ...
+ * })
+ * ```
+ */
+export declare class GridDetailView {
+    private elementRef;
+    /** Whether to show the expand/collapse column. Default: true */
+    showExpandColumn: import('@angular/core').InputSignal<boolean>;
+    /** Animation style for expand/collapse. Default: 'slide' */
+    animation: import('@angular/core').InputSignal<ExpandCollapseAnimation>;
+    /**
+     * Query for the ng-template content child.
+     */
+    template: import('@angular/core').Signal<TemplateRef<any> | undefined>;
+    /** Effect that triggers when the template is available */
+    private onTemplateReceived;
+    /**
+     * Static type guard for template context.
+     * Enables type inference in templates.
+     */
+    static ngTemplateContextGuard(dir: GridDetailView, ctx: unknown): ctx is GridDetailContext;
+}
+//# sourceMappingURL=grid-detail-view.directive.d.ts.map

package/lib/directives/grid-detail-view.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-detail-view.directive.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/grid-detail-view.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8D,WAAW,EAAE,MAAM,eAAe,CAAC;AACxG,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAEjE;;;GAGG;AACH,MAAM,WAAW,iBAAiB,CAAC,IAAI,GAAG,OAAO;IAC/C,kDAAkD;IAClD,SAAS,EAAE,IAAI,CAAC;IAChB,sCAAsC;IACtC,GAAG,EAAE,IAAI,CAAC;CACX;AAKD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAOtG;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC7B,WAAW,EAAE,WAAW,GACvB;IAAE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,uBAAuB,CAAA;CAAE,GAAG,SAAS,CAgBjF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,cAAc;IACzB,OAAO,CAAC,UAAU,CAAmC;IAErD,gEAAgE;IAChE,gBAAgB,+CAAwB;IAExC,4DAA4D;IAC5D,SAAS,+DAA2C;IAEpD;;OAEG;IACH,QAAQ,+DAAgD;IAExD,0DAA0D;IAC1D,OAAO,CAAC,kBAAkB,CAMvB;IAEH;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,GAAG,EAAE,cAAc,EAAE,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,iBAAiB;CAG3F"}

package/lib/directives/grid-tool-panel.directive.d.ts

@@ -0,0 +1,91 @@
+import { TemplateRef } from '@angular/core';
+/**
+ * Context object passed to the tool panel template.
+ * Provides access to grid-related information for the panel content.
+ */
+export interface GridToolPanelContext {
+    /** The grid element (implicit binding) */
+    $implicit: HTMLElement;
+    /** The grid element */
+    grid: HTMLElement;
+}
+/**
+ * Gets the tool panel template registered for a given tool panel element.
+ * Used by AngularGridAdapter to retrieve templates at render time.
+ */
+export declare function getToolPanelTemplate(panelElement: HTMLElement): TemplateRef<GridToolPanelContext> | undefined;
+/**
+ * Gets all tool panel elements with registered templates within a grid element.
+ */
+export declare function getToolPanelElements(gridElement: HTMLElement): HTMLElement[];
+/**
+ * Directive that captures an `<ng-template>` for use as a custom tool panel.
+ *
+ * This enables declarative Angular component usage for tool panels
+ * that appear in the grid's side panel.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <tbw-grid [rows]="rows" [gridConfig]="config">
+ *   <tbw-grid-tool-panel
+ *     id="quick-filters"
+ *     title="Quick Filters"
+ *     icon="🔍"
+ *     tooltip="Apply quick filters"
+ *     [order]="10"
+ *   >
+ *     <ng-template let-grid>
+ *       <app-quick-filters [grid]="grid" />
+ *     </ng-template>
+ *   </tbw-grid-tool-panel>
+ * </tbw-grid>
+ * ```
+ *
+ * The template context provides:
+ * - `$implicit` / `grid`: The grid element reference
+ *
+ * ### Attributes
+ *
+ * - `id` (required): Unique identifier for the panel
+ * - `title` (required): Panel title shown in accordion header
+ * - `icon`: Icon for accordion section header (emoji or text)
+ * - `tooltip`: Tooltip for accordion section header
+ * - `order`: Panel order priority (lower = first, default: 100)
+ *
+ * Import the directive in your component:
+ *
+ * ```typescript
+ * import { GridToolPanel } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [GridToolPanel],
+ *   // ...
+ * })
+ * ```
+ */
+export declare class GridToolPanel {
+    private elementRef;
+    /** Unique panel identifier (required) */
+    id: import('@angular/core').InputSignal<string>;
+    /** Panel title shown in accordion header (required) */
+    title: import('@angular/core').InputSignal<string>;
+    /** Icon for accordion section header (emoji or text) */
+    icon: import('@angular/core').InputSignal<string | undefined>;
+    /** Tooltip for accordion section header */
+    tooltip: import('@angular/core').InputSignal<string | undefined>;
+    /** Panel order priority (lower = first, default: 100) */
+    order: import('@angular/core').InputSignal<number>;
+    /**
+     * Query for the ng-template content child.
+     */
+    template: import('@angular/core').Signal<TemplateRef<any> | undefined>;
+    /** Effect that triggers when the template is available */
+    private onTemplateReceived;
+    /**
+     * Static type guard for template context.
+     * Enables type inference in templates.
+     */
+    static ngTemplateContextGuard(dir: GridToolPanel, ctx: unknown): ctx is GridToolPanelContext;
+}
+//# sourceMappingURL=grid-tool-panel.directive.d.ts.map

package/lib/directives/grid-tool-panel.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-tool-panel.directive.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/grid-tool-panel.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8D,WAAW,EAAE,MAAM,eAAe,CAAC;AAExG;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,0CAA0C;IAC1C,SAAS,EAAE,WAAW,CAAC;IACvB,uBAAuB;IACvB,IAAI,EAAE,WAAW,CAAC;CACnB;AAKD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,WAAW,GAAG,WAAW,CAAC,oBAAoB,CAAC,GAAG,SAAS,CAE7G;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,EAAE,CAG5E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,aAAa;IACxB,OAAO,CAAC,UAAU,CAAmC;IAErD,yCAAyC;IACzC,EAAE,8CAA2C;IAE7C,uDAAuD;IACvD,KAAK,8CAA8C;IAEnD,wDAAwD;IACxD,IAAI,0DAAmB;IAEvB,2CAA2C;IAC3C,OAAO,0DAAmB;IAE1B,yDAAyD;IACzD,KAAK,8CAAsB;IAE3B;;OAEG;IACH,QAAQ,+DAAmD;IAE3D,0DAA0D;IAC1D,OAAO,CAAC,kBAAkB,CAoBvB;IAEH;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,oBAAoB;CAG7F"}

package/lib/directives/grid.directive.d.ts

@@ -0,0 +1,76 @@
+import { AfterContentInit, OnDestroy, OnInit } from '@angular/core';
+/**
+ * Directive that automatically registers the Angular adapter with tbw-grid elements.
+ *
+ * This directive eliminates the need to manually register the adapter in your component
+ * constructor. Simply import this directive and it will handle adapter registration.
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+ * import { Grid } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   selector: 'app-root',
+ *   imports: [Grid],
+ *   schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ *   template: `
+ *     <tbw-grid [rows]="rows" [gridConfig]="config" [customStyles]="myStyles">
+ *       <!-- column templates -->
+ *     </tbw-grid>
+ *   `
+ * })
+ * export class AppComponent {
+ *   rows = [...];
+ *   config = {...};
+ *   myStyles = `.my-class { color: red; }`;
+ * }
+ * ```
+ *
+ * The directive automatically:
+ * - Creates an AngularGridAdapter instance
+ * - Registers it with the GridElement
+ * - Injects custom styles into the grid's shadow DOM
+ * - Handles cleanup on destruction
+ */
+export declare class Grid implements OnInit, AfterContentInit, OnDestroy {
+    private elementRef;
+    private injector;
+    private appRef;
+    private viewContainerRef;
+    private adapter;
+    /**
+     * Custom CSS styles to inject into the grid's shadow DOM.
+     * Use this to style custom cell renderers, editors, or detail panels.
+     *
+     * @example
+     * ```typescript
+     * // In your component
+     * customStyles = `
+     *   .my-detail-panel { padding: 16px; }
+     *   .my-status-badge { border-radius: 4px; }
+     * `;
+     * ```
+     *
+     * ```html
+     * <tbw-grid [customStyles]="customStyles">...</tbw-grid>
+     * ```
+     */
+    customStyles: import('@angular/core').InputSignal<string | undefined>;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    /**
+     * Registers custom styles into the grid's shadow DOM.
+     * Uses the grid's registerStyles() API for clean encapsulation.
+     */
+    private registerCustomStyles;
+    /**
+     * 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
+     */
+    private configureMasterDetail;
+    ngOnDestroy(): void;
+}
+//# sourceMappingURL=grid.directive.d.ts.map

package/lib/directives/grid.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.directive.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/grid.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAOhB,SAAS,EACT,MAAM,EAEP,MAAM,eAAe,CAAC;AAKvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,IAAK,YAAW,MAAM,EAAE,gBAAgB,EAAE,SAAS;IAC9D,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,OAAO,CAAmC;IAElD;;;;;;;;;;;;;;;;OAgBG;IACH,YAAY,0DAAmB;IAE/B,QAAQ,IAAI,IAAI;IAWhB,kBAAkB,IAAI,IAAI;IAwB1B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAU5B;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IA4C7B,WAAW,IAAI,IAAI;CAapB"}

package/lib/directives/index.d.ts

@@ -0,0 +1,6 @@
+export { GridColumnEditor } from './grid-column-editor.directive';
+export { GridColumnView } from './grid-column-view.directive';
+export { GridDetailView } from './grid-detail-view.directive';
+export { GridToolPanel } from './grid-tool-panel.directive';
+export { Grid } from './grid.directive';
+//# sourceMappingURL=index.d.ts.map

package/lib/directives/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/grid-angular.d.ts

@@ -0,0 +1,2 @@
+export declare function gridAngular(): string;
+//# sourceMappingURL=grid-angular.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid-angular.d.ts","sourceRoot":"","sources":["../../../../libs/grid-angular/src/lib/grid-angular.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,IAAI,MAAM,CAEpC"}

package/lib/interfaces/grid-cell-editor.d.ts

@@ -0,0 +1,85 @@
+import { InjectionToken, InputSignal, OutputEmitterRef } from '@angular/core';
+/**
+ * Interface for Angular components used as cell editors in the grid.
+ *
+ * Components implementing this interface can be used inside `<tbw-grid-column-editor>`
+ * and will automatically receive cell data via inputs and emit changes via outputs.
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component, input, output } from '@angular/core';
+ * import { GridCellEditor, GRID_CELL_EDITOR } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   selector: 'app-status-select',
+ *   template: `
+ *     <select [value]="value()" (change)="onChange($event)">
+ *       <option value="active">Active</option>
+ *       <option value="inactive">Inactive</option>
+ *     </select>
+ *   `,
+ *   providers: [{ provide: GRID_CELL_EDITOR, useExisting: StatusSelectComponent }]
+ * })
+ * export class StatusSelectComponent implements GridCellEditor<string> {
+ *   value = input.required<string>();
+ *   row = input<unknown>();
+ *   column = input<unknown>();
+ *
+ *   commit = output<string>();
+ *   cancel = output<void>();
+ *
+ *   onChange(event: Event) {
+ *     this.commit.emit((event.target as HTMLSelectElement).value);
+ *   }
+ * }
+ * ```
+ *
+ * Then use in your template:
+ * ```html
+ * <tbw-grid-column field="status" editable>
+ *   <tbw-grid-column-editor>
+ *     <app-status-select />
+ *   </tbw-grid-column-editor>
+ * </tbw-grid-column>
+ * ```
+ */
+export interface GridCellEditor<TValue = unknown, TRow = unknown> {
+    /**
+     * The current cell value for editing.
+     * This is automatically set by the grid adapter.
+     */
+    value: InputSignal<TValue>;
+    /**
+     * The full row data object.
+     * Optional - only needed if your editor needs access to other columns.
+     */
+    row?: InputSignal<TRow>;
+    /**
+     * The column configuration object.
+     * Optional - only needed if your editor needs column metadata.
+     */
+    column?: InputSignal<unknown>;
+    /**
+     * Emit when the user commits the edited value.
+     * The grid will update the cell with this value.
+     */
+    commit: OutputEmitterRef<TValue>;
+    /**
+     * Emit when the user cancels editing.
+     * The grid will revert to the original value.
+     */
+    cancel: OutputEmitterRef<void>;
+}
+/**
+ * Injection token for cell editor components.
+ *
+ * Components must provide themselves with this token to be auto-discovered:
+ * ```typescript
+ * @Component({
+ *   providers: [{ provide: GRID_CELL_EDITOR, useExisting: MyEditorComponent }]
+ * })
+ * ```
+ */
+export declare const GRID_CELL_EDITOR: InjectionToken<GridCellEditor<unknown, unknown>>;
+//# sourceMappingURL=grid-cell-editor.d.ts.map

package/lib/interfaces/grid-cell-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-cell-editor.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/interfaces/grid-cell-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,WAAW,cAAc,CAAC,MAAM,GAAG,OAAO,EAAE,IAAI,GAAG,OAAO;IAC9D;;;OAGG;IACH,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAE3B;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAE9B;;;OAGG;IACH,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAEjC;;;OAGG;IACH,MAAM,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;CAChC;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,kDAAuD,CAAC"}

package/lib/interfaces/grid-cell-renderer.d.ts

@@ -0,0 +1,63 @@
+import { InjectionToken, InputSignal } from '@angular/core';
+/**
+ * Interface for Angular components used as cell renderers in the grid.
+ *
+ * Components implementing this interface can be used inside `<tbw-grid-column-view>`
+ * and will automatically receive cell data via inputs.
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component, input } from '@angular/core';
+ * import { GridCellRenderer, GRID_CELL_RENDERER } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   selector: 'app-status-badge',
+ *   template: `<span [class]="value()">{{ value() }}</span>`,
+ *   providers: [{ provide: GRID_CELL_RENDERER, useExisting: StatusBadgeComponent }]
+ * })
+ * export class StatusBadgeComponent implements GridCellRenderer {
+ *   value = input.required<string>();
+ *   row = input<unknown>();
+ *   column = input<unknown>();
+ * }
+ * ```
+ *
+ * Then use in your template:
+ * ```html
+ * <tbw-grid-column field="status">
+ *   <tbw-grid-column-view>
+ *     <app-status-badge />
+ *   </tbw-grid-column-view>
+ * </tbw-grid-column>
+ * ```
+ */
+export interface GridCellRenderer<TValue = unknown, TRow = unknown> {
+    /**
+     * The cell value for this column.
+     * This is automatically set by the grid adapter.
+     */
+    value: InputSignal<TValue>;
+    /**
+     * The full row data object.
+     * Optional - only needed if your renderer needs access to other columns.
+     */
+    row?: InputSignal<TRow>;
+    /**
+     * The column configuration object.
+     * Optional - only needed if your renderer needs column metadata.
+     */
+    column?: InputSignal<unknown>;
+}
+/**
+ * Injection token for cell renderer components.
+ *
+ * Components must provide themselves with this token to be auto-discovered:
+ * ```typescript
+ * @Component({
+ *   providers: [{ provide: GRID_CELL_RENDERER, useExisting: MyRendererComponent }]
+ * })
+ * ```
+ */
+export declare const GRID_CELL_RENDERER: InjectionToken<GridCellRenderer<unknown, unknown>>;
+//# sourceMappingURL=grid-cell-renderer.d.ts.map

package/lib/interfaces/grid-cell-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-cell-renderer.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/interfaces/grid-cell-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,WAAW,gBAAgB,CAAC,MAAM,GAAG,OAAO,EAAE,IAAI,GAAG,OAAO;IAChE;;;OAGG;IACH,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAE3B;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC/B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,oDAA2D,CAAC"}

package/lib/interfaces/index.d.ts

@@ -0,0 +1,5 @@
+export { GRID_CELL_EDITOR } from './grid-cell-editor';
+export type { GridCellEditor } from './grid-cell-editor';
+export { GRID_CELL_RENDERER } from './grid-cell-renderer';
+export type { GridCellRenderer } from './grid-cell-renderer';
+//# sourceMappingURL=index.d.ts.map

package/lib/interfaces/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/interfaces/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC"}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@toolbox-web/grid-angular",
+  "version": "0.0.1",
+  "description": "Angular adapter for @toolbox-web/grid data grid component",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "keywords": [
+    "angular",
+    "data-grid",
+    "web-component",
+    "toolbox-web"
+  ],
+  "license": "MIT",
+  "author": "Oystein Amundsen",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OysteinAmundsen/toolbox.git",
+    "directory": "libs/grid-angular"
+  },
+  "homepage": "https://github.com/OysteinAmundsen/toolbox/tree/main/libs/grid-angular#readme",
+  "bugs": {
+    "url": "https://github.com/OysteinAmundsen/toolbox/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/build": "^21.0.4",
+    "@angular/cli": "^21.0.4",
+    "@angular/compiler-cli": "^21.0.0",
+    "@toolbox-web/grid": ">=0.2.0"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=17.0.0",
+    "@toolbox-web/grid": ">=0.2.0"
+  }
+}