@toolbox-web/grid-angular 0.12.1 → 0.13.1

package/README.md

@@ -822,6 +822,85 @@ if (context?.hasFormGroups) {
 | `getRowErrors(idx)`    | `Record<string, unknown> \| null` | Aggregated errors from all controls, or null |
 | `getRowFormGroup(idx)` | `FormGroup \| undefined`          | The FormGroup for the row                    |
 
+## Base Classes for Custom Editors & Filters
+
+The adapter provides base classes that eliminate boilerplate when building custom editors and filter panels.
+
+| Base Class | Extends | Purpose |
+| --- | --- | --- |
+| `BaseGridEditor` | — | Common inputs (`value`, `row`, `column`, `control`), outputs (`commit`, `cancel`), validation helpers |
+| `BaseGridEditorCVA` | `BaseGridEditor` | Adds `ControlValueAccessor` for dual grid + standalone form use |
+| `BaseOverlayEditor` | `BaseGridEditor` | Floating overlay panel with CSS Anchor Positioning, focus gating, click-outside detection |
+| `BaseFilterPanel` | — | Ready-made `params` input for `FilteringPlugin`, with `applyAndClose()` / `clearAndClose()` helpers |
+
+### BaseOverlayEditor Example
+
+```typescript
+import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { BaseOverlayEditor } from '@toolbox-web/grid-angular';
+
+@Component({
+  selector: 'app-date-editor',
+  template: `
+    <input
+      #inlineInput
+      readonly
+      [value]="currentValue()"
+      (click)="onInlineClick()"
+      (keydown)="onInlineKeydown($event)"
+    />
+    <div #panel class="tbw-overlay-panel" style="width: 280px; padding: 12px;">
+      <input type="date" [value]="currentValue()" (change)="selectAndClose($event.target.value)" />
+      <button (click)="hideOverlay()">Cancel</button>
+    </div>
+  `
+})
+export class DateEditorComponent extends BaseOverlayEditor<MyRow, string> implements AfterViewInit {
+  @ViewChild('panel') panelRef!: ElementRef<HTMLElement>;
+  @ViewChild('inlineInput') inputRef!: ElementRef<HTMLInputElement>;
+
+  protected override overlayPosition = 'below' as const;
+
+  ngAfterViewInit(): void {
+    this.initOverlay(this.panelRef.nativeElement);
+    if (this.isCellFocused()) this.showOverlay();
+  }
+
+  protected getInlineInput() { return this.inputRef?.nativeElement ?? null; }
+  protected onOverlayOutsideClick() { this.hideOverlay(); }
+
+  selectAndClose(date: string): void {
+    this.commitValue(date);
+    this.hideOverlay();
+  }
+}
+```
+
+### BaseFilterPanel Example
+
+```typescript
+import { Component, ViewChild, ElementRef } from '@angular/core';
+import { BaseFilterPanel } from '@toolbox-web/grid-angular';
+
+@Component({
+  selector: 'app-text-filter',
+  template: `
+    <input #input (keydown.enter)="applyAndClose()" />
+    <button (click)="applyAndClose()">Apply</button>
+    <button (click)="clearAndClose()">Clear</button>
+  `
+})
+export class TextFilterComponent extends BaseFilterPanel {
+  @ViewChild('input') input!: ElementRef<HTMLInputElement>;
+
+  applyFilter(): void {
+    this.params().applyTextFilter('contains', this.input.nativeElement.value);
+  }
+}
+```
+
+> See the [full Base Classes documentation](https://toolboxjs.com/?path=/docs/grid-angular-base-classes--docs) for detailed API tables, all overlay positions, and CVA usage.
+
 ## API Reference
 
 ### Exported Directives
@@ -837,6 +916,15 @@ if (context?.hasFormGroups) {
 | `GridDetailView`   | `tbw-grid-detail`                                    | Master-detail panel template           |
 | `GridToolPanel`    | `tbw-grid-tool-panel`                                | Custom sidebar panel                   |
 
+### Base Classes
+
+| Class | Description |
+| --- | --- |
+| `BaseGridEditor<TRow, TValue>` | Base class for inline cell editors with validation helpers |
+| `BaseGridEditorCVA<TRow, TValue>` | `BaseGridEditor` + `ControlValueAccessor` for dual grid/form editors |
+| `BaseOverlayEditor<TRow, TValue>` | `BaseGridEditor` + floating overlay panel infrastructure |
+| `BaseFilterPanel` | Base class for custom filter panels with `params` input |
+
 ### Type Registry
 
 | Export                      | Description                                  |
@@ -915,6 +1003,16 @@ import type {
   AngularTypeDefault,
   // Reactive Forms
   FormArrayContext,
+  // Overlay position type
+  OverlayPosition,
+} from '@toolbox-web/grid-angular';
+
+// Base classes for custom editors and filter panels
+import {
+  BaseGridEditor,
+  BaseGridEditorCVA,
+  BaseOverlayEditor,
+  BaseFilterPanel,
 } from '@toolbox-web/grid-angular';
 
 // Type guard for component class detection

package/fesm2022/toolbox-web-grid-angular-features-clipboard.mjs

@@ -1,5 +1,5 @@
-import { ClipboardPlugin } from '@toolbox-web/grid/plugins/clipboard';
 import { registerFeature } from '@toolbox-web/grid-angular';
+import { ClipboardPlugin } from '@toolbox-web/grid/plugins/clipboard';
 
 /**
  * Clipboard feature for @toolbox-web/grid-angular

package/fesm2022/toolbox-web-grid-angular-features-clipboard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toolbox-web-grid-angular-features-clipboard.mjs","sources":["../../../../libs/grid-angular/features/clipboard/src/index.ts","../../../../libs/grid-angular/features/clipboard/src/toolbox-web-grid-angular-features-clipboard.ts"],"sourcesContent":["/**\n * Clipboard feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `clipboard` input on Grid directive.\n * Requires selection feature to be enabled.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/selection';\n * import '@toolbox-web/grid-angular/features/clipboard';\n *\n * <tbw-grid [selection]=\"'range'\" [clipboard]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport { ClipboardPlugin } from '@toolbox-web/grid/plugins/clipboard';\nimport { registerFeature } from '@toolbox-web/grid-angular';\n\nregisterFeature('clipboard', (config) => {\n  if (config === true) {\n    return new ClipboardPlugin();\n  }\n  return new ClipboardPlugin(config ?? undefined);\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;AAeG;AAKH,eAAe,CAAC,WAAW,EAAE,CAAC,MAAM,KAAI;AACtC,IAAA,IAAI,MAAM,KAAK,IAAI,EAAE;QACnB,OAAO,IAAI,eAAe,EAAE;IAC9B;AACA,IAAA,OAAO,IAAI,eAAe,CAAC,MAAM,IAAI,SAAS,CAAC;AACjD,CAAC,CAAC;;ACzBF;;AAEG"}
+{"version":3,"file":"toolbox-web-grid-angular-features-clipboard.mjs","sources":["../../../../libs/grid-angular/features/clipboard/src/index.ts","../../../../libs/grid-angular/features/clipboard/src/toolbox-web-grid-angular-features-clipboard.ts"],"sourcesContent":["/**\n * Clipboard feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `clipboard` input on Grid directive.\n * Requires selection feature to be enabled.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/selection';\n * import '@toolbox-web/grid-angular/features/clipboard';\n *\n * <tbw-grid [selection]=\"'range'\" [clipboard]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport { ClipboardPlugin } from '@toolbox-web/grid/plugins/clipboard';\n\nregisterFeature('clipboard', (config) => {\n  if (config === true) {\n    return new ClipboardPlugin();\n  }\n  return new ClipboardPlugin(config ?? undefined);\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;AAeG;AAKH,eAAe,CAAC,WAAW,EAAE,CAAC,MAAM,KAAI;AACtC,IAAA,IAAI,MAAM,KAAK,IAAI,EAAE;QACnB,OAAO,IAAI,eAAe,EAAE;IAC9B;AACA,IAAA,OAAO,IAAI,eAAe,CAAC,MAAM,IAAI,SAAS,CAAC;AACjD,CAAC,CAAC;;ACzBF;;AAEG"}

package/fesm2022/toolbox-web-grid-angular-features-export.mjs

@@ -1,4 +1,4 @@
-import { inject, ElementRef, signal } from '@angular/core';
+import { inject, ElementRef, DestroyRef, signal, afterNextRender } from '@angular/core';
 import { registerFeature } from '@toolbox-web/grid-angular';
 import { ExportPlugin } from '@toolbox-web/grid/plugins/export';
 
@@ -74,6 +74,7 @@ registerFeature('export', (config) => {
  */
 function injectGridExport() {
     const elementRef = inject(ElementRef);
+    const destroyRef = inject(DestroyRef);
     const isReady = signal(false, ...(ngDevMode ? [{ debugName: "isReady" }] : []));
     // Lazy discovery: cached grid reference
     let cachedGrid = null;
@@ -99,6 +100,20 @@ function injectGridExport() {
     const getPlugin = () => {
         return getGrid()?.getPlugin(ExportPlugin);
     };
+    // Eagerly discover the grid after the first render so isReady updates
+    // without requiring a programmatic method call. Falls back to a
+    // MutationObserver for lazy-rendered tabs, *ngIf, @defer, etc.
+    afterNextRender(() => {
+        if (getGrid())
+            return;
+        const host = elementRef.nativeElement;
+        const observer = new MutationObserver(() => {
+            if (getGrid())
+                observer.disconnect();
+        });
+        observer.observe(host, { childList: true, subtree: true });
+        destroyRef.onDestroy(() => observer.disconnect());
+    });
     return {
         isReady: isReady.asReadonly(),
         exportToCsv: (filename, params) => {

package/fesm2022/toolbox-web-grid-angular-features-export.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toolbox-web-grid-angular-features-export.mjs","sources":["../../../../libs/grid-angular/features/export/src/index.ts","../../../../libs/grid-angular/features/export/src/toolbox-web-grid-angular-features-export.ts"],"sourcesContent":["/**\n * Export feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `export` input on Grid directive.\n * Also exports `injectGridExport()` for programmatic export control.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/export';\n *\n * <tbw-grid [export]=\"true\" />\n * <tbw-grid [export]=\"{ fileName: 'data.csv' }\" />\n * ```\n *\n * @example Using injectGridExport\n * ```typescript\n * import { injectGridExport } from '@toolbox-web/grid-angular/features/export';\n *\n * @Component({...})\n * export class MyComponent {\n *   private gridExport = injectGridExport();\n *\n *   exportData() {\n *     this.gridExport.exportToCsv('employees.csv');\n *   }\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { ElementRef, inject, signal, type Signal } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport { ExportPlugin, type ExportFormat, type ExportParams } from '@toolbox-web/grid/plugins/export';\n\nregisterFeature('export', (config) => {\n  if (config === true) {\n    return new ExportPlugin();\n  }\n  return new ExportPlugin(config ?? undefined);\n});\n\n/**\n * Export methods returned from injectGridExport.\n *\n * Uses lazy discovery - the grid is found on first method call, not during initialization.\n * This ensures it works with lazy-rendered tabs, conditional rendering, etc.\n */\nexport interface ExportMethods {\n  /**\n   * Export grid data to CSV file.\n   * @param filename - Optional filename (defaults to 'export.csv')\n   * @param params - Optional export parameters\n   */\n  exportToCsv: (filename?: string, params?: Partial<ExportParams>) => void;\n\n  /**\n   * Export grid data to Excel file (XML Spreadsheet format).\n   * @param filename - Optional filename (defaults to 'export.xlsx')\n   * @param params - Optional export parameters\n   */\n  exportToExcel: (filename?: string, params?: Partial<ExportParams>) => void;\n\n  /**\n   * Export grid data to JSON file.\n   * @param filename - Optional filename (defaults to 'export.json')\n   * @param params - Optional export parameters\n   */\n  exportToJson: (filename?: string, params?: Partial<ExportParams>) => void;\n\n  /**\n   * Check if an export is currently in progress.\n   */\n  isExporting: () => boolean;\n\n  /**\n   * Get information about the last export.\n   */\n  getLastExport: () => { format: ExportFormat; timestamp: Date } | null;\n\n  /**\n   * Signal indicating if grid is ready.\n   * The grid is discovered lazily, so this updates when first method call succeeds.\n   */\n  isReady: Signal<boolean>;\n}\n\n/**\n * Angular inject function for programmatic export control.\n *\n * Uses **lazy grid discovery** - the grid element is found when methods are called,\n * not during initialization. This ensures it works reliably with:\n * - Lazy-rendered tabs\n * - Conditional rendering (*ngIf)\n * - Dynamic component loading\n *\n * @example\n * ```typescript\n * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n * import { Grid } from '@toolbox-web/grid-angular';\n * import '@toolbox-web/grid-angular/features/export';\n * import { injectGridExport } from '@toolbox-web/grid-angular/features/export';\n *\n * @Component({\n *   selector: 'app-my-grid',\n *   imports: [Grid],\n *   schemas: [CUSTOM_ELEMENTS_SCHEMA],\n *   template: `\n *     <button (click)=\"handleExport()\">Export CSV</button>\n *     <tbw-grid [rows]=\"rows\" [export]=\"true\"></tbw-grid>\n *   `\n * })\n * export class MyGridComponent {\n *   gridExport = injectGridExport();\n *\n *   handleExport() {\n *     this.gridExport.exportToCsv('employees.csv');\n *   }\n * }\n * ```\n */\nexport function injectGridExport(): ExportMethods {\n  const elementRef = inject(ElementRef);\n  const isReady = signal(false);\n\n  // Lazy discovery: cached grid reference\n  let cachedGrid: DataGridElement | null = null;\n  let readyPromiseStarted = false;\n\n  /**\n   * Lazily find the grid element. Called on each method invocation.\n   * Caches the reference once found and triggers ready() check.\n   */\n  const getGrid = (): DataGridElement | null => {\n    if (cachedGrid) return cachedGrid;\n\n    const grid = elementRef.nativeElement.querySelector('tbw-grid') as DataGridElement | null;\n    if (grid) {\n      cachedGrid = grid;\n      // Start ready() check only once\n      if (!readyPromiseStarted) {\n        readyPromiseStarted = true;\n        grid.ready?.().then(() => isReady.set(true));\n      }\n    }\n    return grid;\n  };\n\n  const getPlugin = (): ExportPlugin | undefined => {\n    return getGrid()?.getPlugin(ExportPlugin);\n  };\n\n  return {\n    isReady: isReady.asReadonly(),\n\n    exportToCsv: (filename?: string, params?: Partial<ExportParams>) => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:export] ExportPlugin not found.\\n\\n` +\n            `  → Enable export on the grid:\\n` +\n            `    <tbw-grid [export]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.exportCsv({ ...params, fileName: filename ?? params?.fileName ?? 'export.csv' });\n    },\n\n    exportToExcel: (filename?: string, params?: Partial<ExportParams>) => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:export] ExportPlugin not found.\\n\\n` +\n            `  → Enable export on the grid:\\n` +\n            `    <tbw-grid [export]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.exportExcel({ ...params, fileName: filename ?? params?.fileName ?? 'export.xlsx' });\n    },\n\n    exportToJson: (filename?: string, params?: Partial<ExportParams>) => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:export] ExportPlugin not found.\\n\\n` +\n            `  → Enable export on the grid:\\n` +\n            `    <tbw-grid [export]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.exportJson({ ...params, fileName: filename ?? params?.fileName ?? 'export.json' });\n    },\n\n    isExporting: () => {\n      return getPlugin()?.isExporting() ?? false;\n    },\n\n    getLastExport: () => {\n      return getPlugin()?.getLastExport() ?? null;\n    },\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"toolbox-web-grid-angular-features-export.mjs","sources":["../../../../libs/grid-angular/features/export/src/index.ts","../../../../libs/grid-angular/features/export/src/toolbox-web-grid-angular-features-export.ts"],"sourcesContent":["/**\n * Export feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `export` input on Grid directive.\n * Also exports `injectGridExport()` for programmatic export control.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/export';\n *\n * <tbw-grid [export]=\"true\" />\n * <tbw-grid [export]=\"{ fileName: 'data.csv' }\" />\n * ```\n *\n * @example Using injectGridExport\n * ```typescript\n * import { injectGridExport } from '@toolbox-web/grid-angular/features/export';\n *\n * @Component({...})\n * export class MyComponent {\n *   private gridExport = injectGridExport();\n *\n *   exportData() {\n *     this.gridExport.exportToCsv('employees.csv');\n *   }\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { afterNextRender, DestroyRef, ElementRef, inject, signal, type Signal } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport { ExportPlugin, type ExportFormat, type ExportParams } from '@toolbox-web/grid/plugins/export';\n\nregisterFeature('export', (config) => {\n  if (config === true) {\n    return new ExportPlugin();\n  }\n  return new ExportPlugin(config ?? undefined);\n});\n\n/**\n * Export methods returned from injectGridExport.\n *\n * Uses lazy discovery - the grid is found on first method call, not during initialization.\n * This ensures it works with lazy-rendered tabs, conditional rendering, etc.\n */\nexport interface ExportMethods {\n  /**\n   * Export grid data to CSV file.\n   * @param filename - Optional filename (defaults to 'export.csv')\n   * @param params - Optional export parameters\n   */\n  exportToCsv: (filename?: string, params?: Partial<ExportParams>) => void;\n\n  /**\n   * Export grid data to Excel file (XML Spreadsheet format).\n   * @param filename - Optional filename (defaults to 'export.xlsx')\n   * @param params - Optional export parameters\n   */\n  exportToExcel: (filename?: string, params?: Partial<ExportParams>) => void;\n\n  /**\n   * Export grid data to JSON file.\n   * @param filename - Optional filename (defaults to 'export.json')\n   * @param params - Optional export parameters\n   */\n  exportToJson: (filename?: string, params?: Partial<ExportParams>) => void;\n\n  /**\n   * Check if an export is currently in progress.\n   */\n  isExporting: () => boolean;\n\n  /**\n   * Get information about the last export.\n   */\n  getLastExport: () => { format: ExportFormat; timestamp: Date } | null;\n\n  /**\n   * Signal indicating if grid is ready.\n   * The grid is discovered lazily, so this updates when first method call succeeds.\n   */\n  isReady: Signal<boolean>;\n}\n\n/**\n * Angular inject function for programmatic export control.\n *\n * Uses **lazy grid discovery** - the grid element is found when methods are called,\n * not during initialization. This ensures it works reliably with:\n * - Lazy-rendered tabs\n * - Conditional rendering (*ngIf)\n * - Dynamic component loading\n *\n * @example\n * ```typescript\n * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n * import { Grid } from '@toolbox-web/grid-angular';\n * import '@toolbox-web/grid-angular/features/export';\n * import { injectGridExport } from '@toolbox-web/grid-angular/features/export';\n *\n * @Component({\n *   selector: 'app-my-grid',\n *   imports: [Grid],\n *   schemas: [CUSTOM_ELEMENTS_SCHEMA],\n *   template: `\n *     <button (click)=\"handleExport()\">Export CSV</button>\n *     <tbw-grid [rows]=\"rows\" [export]=\"true\"></tbw-grid>\n *   `\n * })\n * export class MyGridComponent {\n *   gridExport = injectGridExport();\n *\n *   handleExport() {\n *     this.gridExport.exportToCsv('employees.csv');\n *   }\n * }\n * ```\n */\nexport function injectGridExport(): ExportMethods {\n  const elementRef = inject(ElementRef);\n  const destroyRef = inject(DestroyRef);\n  const isReady = signal(false);\n\n  // Lazy discovery: cached grid reference\n  let cachedGrid: DataGridElement | null = null;\n  let readyPromiseStarted = false;\n\n  /**\n   * Lazily find the grid element. Called on each method invocation.\n   * Caches the reference once found and triggers ready() check.\n   */\n  const getGrid = (): DataGridElement | null => {\n    if (cachedGrid) return cachedGrid;\n\n    const grid = elementRef.nativeElement.querySelector('tbw-grid') as DataGridElement | null;\n    if (grid) {\n      cachedGrid = grid;\n      // Start ready() check only once\n      if (!readyPromiseStarted) {\n        readyPromiseStarted = true;\n        grid.ready?.().then(() => isReady.set(true));\n      }\n    }\n    return grid;\n  };\n\n  const getPlugin = (): ExportPlugin | undefined => {\n    return getGrid()?.getPlugin(ExportPlugin);\n  };\n\n  // Eagerly discover the grid after the first render so isReady updates\n  // without requiring a programmatic method call. Falls back to a\n  // MutationObserver for lazy-rendered tabs, *ngIf, @defer, etc.\n  afterNextRender(() => {\n    if (getGrid()) return;\n\n    const host = elementRef.nativeElement as HTMLElement;\n    const observer = new MutationObserver(() => {\n      if (getGrid()) observer.disconnect();\n    });\n    observer.observe(host, { childList: true, subtree: true });\n\n    destroyRef.onDestroy(() => observer.disconnect());\n  });\n\n  return {\n    isReady: isReady.asReadonly(),\n\n    exportToCsv: (filename?: string, params?: Partial<ExportParams>) => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:export] ExportPlugin not found.\\n\\n` +\n            `  → Enable export on the grid:\\n` +\n            `    <tbw-grid [export]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.exportCsv({ ...params, fileName: filename ?? params?.fileName ?? 'export.csv' });\n    },\n\n    exportToExcel: (filename?: string, params?: Partial<ExportParams>) => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:export] ExportPlugin not found.\\n\\n` +\n            `  → Enable export on the grid:\\n` +\n            `    <tbw-grid [export]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.exportExcel({ ...params, fileName: filename ?? params?.fileName ?? 'export.xlsx' });\n    },\n\n    exportToJson: (filename?: string, params?: Partial<ExportParams>) => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:export] ExportPlugin not found.\\n\\n` +\n            `  → Enable export on the grid:\\n` +\n            `    <tbw-grid [export]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.exportJson({ ...params, fileName: filename ?? params?.fileName ?? 'export.json' });\n    },\n\n    isExporting: () => {\n      return getPlugin()?.isExporting() ?? false;\n    },\n\n    getLastExport: () => {\n      return getPlugin()?.getLastExport() ?? null;\n    },\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/toolbox-web-grid-angular-features-filtering.mjs

@@ -1,4 +1,4 @@
-import { inject, ElementRef, signal } from '@angular/core';
+import { inject, ElementRef, DestroyRef, signal, afterNextRender } from '@angular/core';
 import { registerFeature } from '@toolbox-web/grid-angular';
 import { FilteringPlugin } from '@toolbox-web/grid/plugins/filtering';
 
@@ -74,6 +74,7 @@ registerFeature('filtering', (config) => {
  */
 function injectGridFiltering() {
     const elementRef = inject(ElementRef);
+    const destroyRef = inject(DestroyRef);
     const isReady = signal(false, ...(ngDevMode ? [{ debugName: "isReady" }] : []));
     let cachedGrid = null;
     let readyPromiseStarted = false;
@@ -93,6 +94,20 @@ function injectGridFiltering() {
     const getPlugin = () => {
         return getGrid()?.getPlugin(FilteringPlugin);
     };
+    // Eagerly discover the grid after the first render so isReady updates
+    // without requiring a programmatic method call. Falls back to a
+    // MutationObserver for lazy-rendered tabs, *ngIf, @defer, etc.
+    afterNextRender(() => {
+        if (getGrid())
+            return;
+        const host = elementRef.nativeElement;
+        const observer = new MutationObserver(() => {
+            if (getGrid())
+                observer.disconnect();
+        });
+        observer.observe(host, { childList: true, subtree: true });
+        destroyRef.onDestroy(() => observer.disconnect());
+    });
     return {
         isReady: isReady.asReadonly(),
         setFilter: (field, filter) => {

package/fesm2022/toolbox-web-grid-angular-features-filtering.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toolbox-web-grid-angular-features-filtering.mjs","sources":["../../../../libs/grid-angular/features/filtering/src/index.ts","../../../../libs/grid-angular/features/filtering/src/toolbox-web-grid-angular-features-filtering.ts"],"sourcesContent":["/**\n * Filtering feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `filtering` input on Grid directive.\n * Also exports `injectGridFiltering()` for programmatic filter control.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/filtering';\n *\n * <tbw-grid [filtering]=\"true\" />\n * <tbw-grid [filtering]=\"{ debounceMs: 200 }\" />\n * ```\n *\n * @example Using injectGridFiltering\n * ```typescript\n * import { injectGridFiltering } from '@toolbox-web/grid-angular/features/filtering';\n *\n * @Component({...})\n * export class MyComponent {\n *   private filtering = injectGridFiltering();\n *\n *   filterByStatus(status: string) {\n *     this.filtering.setFilter('status', { operator: 'equals', value: status });\n *   }\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { ElementRef, inject, signal, type Signal } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport { FilteringPlugin, type FilterModel } from '@toolbox-web/grid/plugins/filtering';\n\nregisterFeature('filtering', (config) => {\n  if (config === true) {\n    return new FilteringPlugin();\n  }\n  return new FilteringPlugin(config ?? undefined);\n});\n\n/**\n * Filtering methods returned from injectGridFiltering.\n *\n * Uses lazy discovery - the grid is found on first method call, not during initialization.\n */\nexport interface FilteringMethods {\n  /**\n   * Set a filter on a specific field.\n   * @param field - The field name to filter\n   * @param filter - Filter configuration, or null to remove\n   */\n  setFilter: (field: string, filter: Omit<FilterModel, 'field'> | null) => void;\n\n  /**\n   * Get the current filter for a field.\n   */\n  getFilter: (field: string) => FilterModel | undefined;\n\n  /**\n   * Get all active filters.\n   */\n  getFilters: () => FilterModel[];\n\n  /**\n   * Set all filters at once (replaces existing).\n   */\n  setFilterModel: (filters: FilterModel[]) => void;\n\n  /**\n   * Clear all active filters.\n   */\n  clearAllFilters: () => void;\n\n  /**\n   * Clear filter for a specific field.\n   */\n  clearFieldFilter: (field: string) => void;\n\n  /**\n   * Check if a field has an active filter.\n   */\n  isFieldFiltered: (field: string) => boolean;\n\n  /**\n   * Get the count of rows after filtering.\n   */\n  getFilteredRowCount: () => number;\n\n  /**\n   * Get unique values for a field (for building filter dropdowns).\n   */\n  getUniqueValues: (field: string) => unknown[];\n\n  /**\n   * Signal indicating if grid is ready.\n   */\n  isReady: Signal<boolean>;\n}\n\n/**\n * Angular inject function for programmatic filter control.\n *\n * Uses **lazy grid discovery** - the grid element is found when methods are called,\n * not during initialization.\n *\n * @example\n * ```typescript\n * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n * import { Grid } from '@toolbox-web/grid-angular';\n * import '@toolbox-web/grid-angular/features/filtering';\n * import { injectGridFiltering } from '@toolbox-web/grid-angular/features/filtering';\n *\n * @Component({\n *   selector: 'app-my-grid',\n *   imports: [Grid],\n *   schemas: [CUSTOM_ELEMENTS_SCHEMA],\n *   template: `\n *     <input (input)=\"applyFilter($event)\" placeholder=\"Filter by name...\" />\n *     <span>{{ filtering.getFilteredRowCount() }} results</span>\n *     <button (click)=\"filtering.clearAllFilters()\">Clear</button>\n *     <tbw-grid [rows]=\"rows\" [filtering]=\"true\"></tbw-grid>\n *   `\n * })\n * export class MyGridComponent {\n *   filtering = injectGridFiltering();\n *\n *   applyFilter(event: Event) {\n *     const value = (event.target as HTMLInputElement).value;\n *     this.filtering.setFilter('name', value ? { operator: 'contains', value } : null);\n *   }\n * }\n * ```\n */\nexport function injectGridFiltering(): FilteringMethods {\n  const elementRef = inject(ElementRef);\n  const isReady = signal(false);\n\n  let cachedGrid: DataGridElement | null = null;\n  let readyPromiseStarted = false;\n\n  const getGrid = (): DataGridElement | null => {\n    if (cachedGrid) return cachedGrid;\n\n    const grid = elementRef.nativeElement.querySelector('tbw-grid') as DataGridElement | null;\n    if (grid) {\n      cachedGrid = grid;\n      if (!readyPromiseStarted) {\n        readyPromiseStarted = true;\n        grid.ready?.().then(() => isReady.set(true));\n      }\n    }\n    return grid;\n  };\n\n  const getPlugin = (): FilteringPlugin | undefined => {\n    return getGrid()?.getPlugin(FilteringPlugin);\n  };\n\n  return {\n    isReady: isReady.asReadonly(),\n\n    setFilter: (field: string, filter: Omit<FilterModel, 'field'> | null) => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n            `  → Enable filtering on the grid:\\n` +\n            `    <tbw-grid [filtering]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.setFilter(field, filter);\n    },\n\n    getFilter: (field: string) => getPlugin()?.getFilter(field),\n\n    getFilters: () => getPlugin()?.getFilters() ?? [],\n\n    setFilterModel: (filters: FilterModel[]) => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n            `  → Enable filtering on the grid:\\n` +\n            `    <tbw-grid [filtering]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.setFilterModel(filters);\n    },\n\n    clearAllFilters: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n            `  → Enable filtering on the grid:\\n` +\n            `    <tbw-grid [filtering]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.clearAllFilters();\n    },\n\n    clearFieldFilter: (field: string) => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n            `  → Enable filtering on the grid:\\n` +\n            `    <tbw-grid [filtering]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.clearFieldFilter(field);\n    },\n\n    isFieldFiltered: (field: string) => getPlugin()?.isFieldFiltered(field) ?? false,\n\n    getFilteredRowCount: () => getPlugin()?.getFilteredRowCount() ?? 0,\n\n    getUniqueValues: (field: string) => getPlugin()?.getUniqueValues(field) ?? [],\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"toolbox-web-grid-angular-features-filtering.mjs","sources":["../../../../libs/grid-angular/features/filtering/src/index.ts","../../../../libs/grid-angular/features/filtering/src/toolbox-web-grid-angular-features-filtering.ts"],"sourcesContent":["/**\n * Filtering feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `filtering` input on Grid directive.\n * Also exports `injectGridFiltering()` for programmatic filter control.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/filtering';\n *\n * <tbw-grid [filtering]=\"true\" />\n * <tbw-grid [filtering]=\"{ debounceMs: 200 }\" />\n * ```\n *\n * @example Using injectGridFiltering\n * ```typescript\n * import { injectGridFiltering } from '@toolbox-web/grid-angular/features/filtering';\n *\n * @Component({...})\n * export class MyComponent {\n *   private filtering = injectGridFiltering();\n *\n *   filterByStatus(status: string) {\n *     this.filtering.setFilter('status', { operator: 'equals', value: status });\n *   }\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { afterNextRender, DestroyRef, ElementRef, inject, signal, type Signal } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport { FilteringPlugin, type FilterModel } from '@toolbox-web/grid/plugins/filtering';\n\nregisterFeature('filtering', (config) => {\n  if (config === true) {\n    return new FilteringPlugin();\n  }\n  return new FilteringPlugin(config ?? undefined);\n});\n\n/**\n * Filtering methods returned from injectGridFiltering.\n *\n * Uses lazy discovery - the grid is found on first method call, not during initialization.\n */\nexport interface FilteringMethods {\n  /**\n   * Set a filter on a specific field.\n   * @param field - The field name to filter\n   * @param filter - Filter configuration, or null to remove\n   */\n  setFilter: (field: string, filter: Omit<FilterModel, 'field'> | null) => void;\n\n  /**\n   * Get the current filter for a field.\n   */\n  getFilter: (field: string) => FilterModel | undefined;\n\n  /**\n   * Get all active filters.\n   */\n  getFilters: () => FilterModel[];\n\n  /**\n   * Set all filters at once (replaces existing).\n   */\n  setFilterModel: (filters: FilterModel[]) => void;\n\n  /**\n   * Clear all active filters.\n   */\n  clearAllFilters: () => void;\n\n  /**\n   * Clear filter for a specific field.\n   */\n  clearFieldFilter: (field: string) => void;\n\n  /**\n   * Check if a field has an active filter.\n   */\n  isFieldFiltered: (field: string) => boolean;\n\n  /**\n   * Get the count of rows after filtering.\n   */\n  getFilteredRowCount: () => number;\n\n  /**\n   * Get unique values for a field (for building filter dropdowns).\n   */\n  getUniqueValues: (field: string) => unknown[];\n\n  /**\n   * Signal indicating if grid is ready.\n   */\n  isReady: Signal<boolean>;\n}\n\n/**\n * Angular inject function for programmatic filter control.\n *\n * Uses **lazy grid discovery** - the grid element is found when methods are called,\n * not during initialization.\n *\n * @example\n * ```typescript\n * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n * import { Grid } from '@toolbox-web/grid-angular';\n * import '@toolbox-web/grid-angular/features/filtering';\n * import { injectGridFiltering } from '@toolbox-web/grid-angular/features/filtering';\n *\n * @Component({\n *   selector: 'app-my-grid',\n *   imports: [Grid],\n *   schemas: [CUSTOM_ELEMENTS_SCHEMA],\n *   template: `\n *     <input (input)=\"applyFilter($event)\" placeholder=\"Filter by name...\" />\n *     <span>{{ filtering.getFilteredRowCount() }} results</span>\n *     <button (click)=\"filtering.clearAllFilters()\">Clear</button>\n *     <tbw-grid [rows]=\"rows\" [filtering]=\"true\"></tbw-grid>\n *   `\n * })\n * export class MyGridComponent {\n *   filtering = injectGridFiltering();\n *\n *   applyFilter(event: Event) {\n *     const value = (event.target as HTMLInputElement).value;\n *     this.filtering.setFilter('name', value ? { operator: 'contains', value } : null);\n *   }\n * }\n * ```\n */\nexport function injectGridFiltering(): FilteringMethods {\n  const elementRef = inject(ElementRef);\n  const destroyRef = inject(DestroyRef);\n  const isReady = signal(false);\n\n  let cachedGrid: DataGridElement | null = null;\n  let readyPromiseStarted = false;\n\n  const getGrid = (): DataGridElement | null => {\n    if (cachedGrid) return cachedGrid;\n\n    const grid = elementRef.nativeElement.querySelector('tbw-grid') as DataGridElement | null;\n    if (grid) {\n      cachedGrid = grid;\n      if (!readyPromiseStarted) {\n        readyPromiseStarted = true;\n        grid.ready?.().then(() => isReady.set(true));\n      }\n    }\n    return grid;\n  };\n\n  const getPlugin = (): FilteringPlugin | undefined => {\n    return getGrid()?.getPlugin(FilteringPlugin);\n  };\n\n  // Eagerly discover the grid after the first render so isReady updates\n  // without requiring a programmatic method call. Falls back to a\n  // MutationObserver for lazy-rendered tabs, *ngIf, @defer, etc.\n  afterNextRender(() => {\n    if (getGrid()) return;\n\n    const host = elementRef.nativeElement as HTMLElement;\n    const observer = new MutationObserver(() => {\n      if (getGrid()) observer.disconnect();\n    });\n    observer.observe(host, { childList: true, subtree: true });\n\n    destroyRef.onDestroy(() => observer.disconnect());\n  });\n\n  return {\n    isReady: isReady.asReadonly(),\n\n    setFilter: (field: string, filter: Omit<FilterModel, 'field'> | null) => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n            `  → Enable filtering on the grid:\\n` +\n            `    <tbw-grid [filtering]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.setFilter(field, filter);\n    },\n\n    getFilter: (field: string) => getPlugin()?.getFilter(field),\n\n    getFilters: () => getPlugin()?.getFilters() ?? [],\n\n    setFilterModel: (filters: FilterModel[]) => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n            `  → Enable filtering on the grid:\\n` +\n            `    <tbw-grid [filtering]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.setFilterModel(filters);\n    },\n\n    clearAllFilters: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n            `  → Enable filtering on the grid:\\n` +\n            `    <tbw-grid [filtering]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.clearAllFilters();\n    },\n\n    clearFieldFilter: (field: string) => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n            `  → Enable filtering on the grid:\\n` +\n            `    <tbw-grid [filtering]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.clearFieldFilter(field);\n    },\n\n    isFieldFiltered: (field: string) => getPlugin()?.isFieldFiltered(field) ?? false,\n\n    getFilteredRowCount: () => getPlugin()?.getFilteredRowCount() ?? 0,\n\n    getUniqueValues: (field: string) => getPlugin()?.getUniqueValues(field) ?? [],\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/toolbox-web-grid-angular-features-pinned-columns.mjs

@@ -11,7 +11,7 @@ import { registerFeature } from '@toolbox-web/grid-angular';
  * import '@toolbox-web/grid-angular/features/pinned-columns';
  *
  * <tbw-grid [pinnedColumns]="true" [columns]="[
- *   { field: 'id', sticky: 'left' },
+ *   { field: 'id', pinned: 'left' },
  *   { field: 'name' }
  * ]" />
  * ```

package/fesm2022/toolbox-web-grid-angular-features-pinned-columns.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toolbox-web-grid-angular-features-pinned-columns.mjs","sources":["../../../../libs/grid-angular/features/pinned-columns/src/index.ts","../../../../libs/grid-angular/features/pinned-columns/src/toolbox-web-grid-angular-features-pinned-columns.ts"],"sourcesContent":["/**\n * Pinned columns feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `pinnedColumns` input on Grid directive.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/pinned-columns';\n *\n * <tbw-grid [pinnedColumns]=\"true\" [columns]=\"[\n *   { field: 'id', sticky: 'left' },\n *   { field: 'name' }\n * ]\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport { PinnedColumnsPlugin } from '@toolbox-web/grid/plugins/pinned-columns';\nimport { registerFeature } from '@toolbox-web/grid-angular';\n\nregisterFeature('pinnedColumns', () => {\n  return new PinnedColumnsPlugin();\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;AAgBG;AAKH,eAAe,CAAC,eAAe,EAAE,MAAK;IACpC,OAAO,IAAI,mBAAmB,EAAE;AAClC,CAAC,CAAC;;ACvBF;;AAEG"}
+{"version":3,"file":"toolbox-web-grid-angular-features-pinned-columns.mjs","sources":["../../../../libs/grid-angular/features/pinned-columns/src/index.ts","../../../../libs/grid-angular/features/pinned-columns/src/toolbox-web-grid-angular-features-pinned-columns.ts"],"sourcesContent":["/**\n * Pinned columns feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `pinnedColumns` input on Grid directive.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/pinned-columns';\n *\n * <tbw-grid [pinnedColumns]=\"true\" [columns]=\"[\n *   { field: 'id', pinned: 'left' },\n *   { field: 'name' }\n * ]\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport { PinnedColumnsPlugin } from '@toolbox-web/grid/plugins/pinned-columns';\nimport { registerFeature } from '@toolbox-web/grid-angular';\n\nregisterFeature('pinnedColumns', () => {\n  return new PinnedColumnsPlugin();\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;AAgBG;AAKH,eAAe,CAAC,eAAe,EAAE,MAAK;IACpC,OAAO,IAAI,mBAAmB,EAAE;AAClC,CAAC,CAAC;;ACvBF;;AAEG"}

package/fesm2022/toolbox-web-grid-angular-features-print.mjs

@@ -1,4 +1,4 @@
-import { inject, ElementRef, signal } from '@angular/core';
+import { inject, ElementRef, DestroyRef, signal, afterNextRender } from '@angular/core';
 import { registerFeature } from '@toolbox-web/grid-angular';
 import { PrintPlugin } from '@toolbox-web/grid/plugins/print';
 
@@ -73,6 +73,7 @@ registerFeature('print', (config) => {
  */
 function injectGridPrint() {
     const elementRef = inject(ElementRef);
+    const destroyRef = inject(DestroyRef);
     const isReady = signal(false, ...(ngDevMode ? [{ debugName: "isReady" }] : []));
     let cachedGrid = null;
     let readyPromiseStarted = false;
@@ -92,6 +93,20 @@ function injectGridPrint() {
     const getPlugin = () => {
         return getGrid()?.getPlugin(PrintPlugin);
     };
+    // Eagerly discover the grid after the first render so isReady updates
+    // without requiring a programmatic method call. Falls back to a
+    // MutationObserver for lazy-rendered tabs, *ngIf, @defer, etc.
+    afterNextRender(() => {
+        if (getGrid())
+            return;
+        const host = elementRef.nativeElement;
+        const observer = new MutationObserver(() => {
+            if (getGrid())
+                observer.disconnect();
+        });
+        observer.observe(host, { childList: true, subtree: true });
+        destroyRef.onDestroy(() => observer.disconnect());
+    });
     return {
         isReady: isReady.asReadonly(),
         print: async (params) => {

package/fesm2022/toolbox-web-grid-angular-features-print.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toolbox-web-grid-angular-features-print.mjs","sources":["../../../../libs/grid-angular/features/print/src/index.ts","../../../../libs/grid-angular/features/print/src/toolbox-web-grid-angular-features-print.ts"],"sourcesContent":["/**\n * Print feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `print` input on Grid directive.\n * Also exports `injectGridPrint()` for programmatic print control.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/print';\n *\n * <tbw-grid [print]=\"true\" />\n * ```\n *\n * @example Using injectGridPrint\n * ```typescript\n * import { injectGridPrint } from '@toolbox-web/grid-angular/features/print';\n *\n * @Component({...})\n * export class MyComponent {\n *   private gridPrint = injectGridPrint();\n *\n *   printReport() {\n *     this.gridPrint.print({ title: 'My Report' });\n *   }\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { ElementRef, inject, signal, type Signal } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport { PrintPlugin, type PrintParams } from '@toolbox-web/grid/plugins/print';\n\nregisterFeature('print', (config) => {\n  if (config === true) {\n    return new PrintPlugin();\n  }\n  return new PrintPlugin(config ?? undefined);\n});\n\n/**\n * Print methods returned from injectGridPrint.\n *\n * Uses lazy discovery - the grid is found on first method call, not during initialization.\n */\nexport interface PrintMethods {\n  /**\n   * Print the grid.\n   * Opens browser print dialog after preparing the grid for printing.\n   * @param params - Optional print parameters\n   */\n  print: (params?: PrintParams) => Promise<void>;\n\n  /**\n   * Check if a print operation is currently in progress.\n   */\n  isPrinting: () => boolean;\n\n  /**\n   * Signal indicating if grid is ready.\n   */\n  isReady: Signal<boolean>;\n}\n\n/**\n * Angular inject function for programmatic print control.\n *\n * Uses **lazy grid discovery** - the grid element is found when methods are called,\n * not during initialization.\n *\n * @example\n * ```typescript\n * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n * import { Grid } from '@toolbox-web/grid-angular';\n * import '@toolbox-web/grid-angular/features/print';\n * import { injectGridPrint } from '@toolbox-web/grid-angular/features/print';\n *\n * @Component({\n *   selector: 'app-my-grid',\n *   imports: [Grid],\n *   schemas: [CUSTOM_ELEMENTS_SCHEMA],\n *   template: `\n *     <button (click)=\"handlePrint()\" [disabled]=\"gridPrint.isPrinting()\">\n *       {{ gridPrint.isPrinting() ? 'Printing...' : 'Print' }}\n *     </button>\n *     <tbw-grid [rows]=\"rows\" [print]=\"true\"></tbw-grid>\n *   `\n * })\n * export class MyGridComponent {\n *   gridPrint = injectGridPrint();\n *\n *   async handlePrint() {\n *     await this.gridPrint.print({ title: 'Employee Report', isolate: true });\n *     console.log('Print dialog closed');\n *   }\n * }\n * ```\n */\nexport function injectGridPrint(): PrintMethods {\n  const elementRef = inject(ElementRef);\n  const isReady = signal(false);\n\n  let cachedGrid: DataGridElement | null = null;\n  let readyPromiseStarted = false;\n\n  const getGrid = (): DataGridElement | null => {\n    if (cachedGrid) return cachedGrid;\n\n    const grid = elementRef.nativeElement.querySelector('tbw-grid') as DataGridElement | null;\n    if (grid) {\n      cachedGrid = grid;\n      if (!readyPromiseStarted) {\n        readyPromiseStarted = true;\n        grid.ready?.().then(() => isReady.set(true));\n      }\n    }\n    return grid;\n  };\n\n  const getPlugin = (): PrintPlugin | undefined => {\n    return getGrid()?.getPlugin(PrintPlugin);\n  };\n\n  return {\n    isReady: isReady.asReadonly(),\n\n    print: async (params?: PrintParams) => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:print] PrintPlugin not found.\\n\\n` +\n            `  → Enable print on the grid:\\n` +\n            `    <tbw-grid [print]=\"true\" />`,\n        );\n        return;\n      }\n      await plugin.print(params);\n    },\n\n    isPrinting: () => getPlugin()?.isPrinting() ?? false,\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BG;AAOH,eAAe,CAAC,OAAO,EAAE,CAAC,MAAM,KAAI;AAClC,IAAA,IAAI,MAAM,KAAK,IAAI,EAAE;QACnB,OAAO,IAAI,WAAW,EAAE;IAC1B;AACA,IAAA,OAAO,IAAI,WAAW,CAAC,MAAM,IAAI,SAAS,CAAC;AAC7C,CAAC,CAAC;AA0BF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCG;SACa,eAAe,GAAA;AAC7B,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AACrC,IAAA,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,mDAAC;IAE7B,IAAI,UAAU,GAA2B,IAAI;IAC7C,IAAI,mBAAmB,GAAG,KAAK;IAE/B,MAAM,OAAO,GAAG,MAA6B;AAC3C,QAAA,IAAI,UAAU;AAAE,YAAA,OAAO,UAAU;QAEjC,MAAM,IAAI,GAAG,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,UAAU,CAA2B;QACzF,IAAI,IAAI,EAAE;YACR,UAAU,GAAG,IAAI;YACjB,IAAI,CAAC,mBAAmB,EAAE;gBACxB,mBAAmB,GAAG,IAAI;AAC1B,gBAAA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAC9C;QACF;AACA,QAAA,OAAO,IAAI;AACb,IAAA,CAAC;IAED,MAAM,SAAS,GAAG,MAA8B;AAC9C,QAAA,OAAO,OAAO,EAAE,EAAE,SAAS,CAAC,WAAW,CAAC;AAC1C,IAAA,CAAC;IAED,OAAO;AACL,QAAA,OAAO,EAAE,OAAO,CAAC,UAAU,EAAE;AAE7B,QAAA,KAAK,EAAE,OAAO,MAAoB,KAAI;AACpC,YAAA,MAAM,MAAM,GAAG,SAAS,EAAE;YAC1B,IAAI,CAAC,MAAM,EAAE;gBACX,OAAO,CAAC,IAAI,CACV,CAAA,2CAAA,CAA6C;oBAC3C,CAAA,+BAAA,CAAiC;AACjC,oBAAA,CAAA,+BAAA,CAAiC,CACpC;gBACD;YACF;AACA,YAAA,MAAM,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;QAC5B,CAAC;QAED,UAAU,EAAE,MAAM,SAAS,EAAE,EAAE,UAAU,EAAE,IAAI,KAAK;KACrD;AACH;;AC/IA;;AAEG;;;;"}
+{"version":3,"file":"toolbox-web-grid-angular-features-print.mjs","sources":["../../../../libs/grid-angular/features/print/src/index.ts","../../../../libs/grid-angular/features/print/src/toolbox-web-grid-angular-features-print.ts"],"sourcesContent":["/**\n * Print feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `print` input on Grid directive.\n * Also exports `injectGridPrint()` for programmatic print control.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/print';\n *\n * <tbw-grid [print]=\"true\" />\n * ```\n *\n * @example Using injectGridPrint\n * ```typescript\n * import { injectGridPrint } from '@toolbox-web/grid-angular/features/print';\n *\n * @Component({...})\n * export class MyComponent {\n *   private gridPrint = injectGridPrint();\n *\n *   printReport() {\n *     this.gridPrint.print({ title: 'My Report' });\n *   }\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { afterNextRender, DestroyRef, ElementRef, inject, signal, type Signal } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport { PrintPlugin, type PrintParams } from '@toolbox-web/grid/plugins/print';\n\nregisterFeature('print', (config) => {\n  if (config === true) {\n    return new PrintPlugin();\n  }\n  return new PrintPlugin(config ?? undefined);\n});\n\n/**\n * Print methods returned from injectGridPrint.\n *\n * Uses lazy discovery - the grid is found on first method call, not during initialization.\n */\nexport interface PrintMethods {\n  /**\n   * Print the grid.\n   * Opens browser print dialog after preparing the grid for printing.\n   * @param params - Optional print parameters\n   */\n  print: (params?: PrintParams) => Promise<void>;\n\n  /**\n   * Check if a print operation is currently in progress.\n   */\n  isPrinting: () => boolean;\n\n  /**\n   * Signal indicating if grid is ready.\n   */\n  isReady: Signal<boolean>;\n}\n\n/**\n * Angular inject function for programmatic print control.\n *\n * Uses **lazy grid discovery** - the grid element is found when methods are called,\n * not during initialization.\n *\n * @example\n * ```typescript\n * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n * import { Grid } from '@toolbox-web/grid-angular';\n * import '@toolbox-web/grid-angular/features/print';\n * import { injectGridPrint } from '@toolbox-web/grid-angular/features/print';\n *\n * @Component({\n *   selector: 'app-my-grid',\n *   imports: [Grid],\n *   schemas: [CUSTOM_ELEMENTS_SCHEMA],\n *   template: `\n *     <button (click)=\"handlePrint()\" [disabled]=\"gridPrint.isPrinting()\">\n *       {{ gridPrint.isPrinting() ? 'Printing...' : 'Print' }}\n *     </button>\n *     <tbw-grid [rows]=\"rows\" [print]=\"true\"></tbw-grid>\n *   `\n * })\n * export class MyGridComponent {\n *   gridPrint = injectGridPrint();\n *\n *   async handlePrint() {\n *     await this.gridPrint.print({ title: 'Employee Report', isolate: true });\n *     console.log('Print dialog closed');\n *   }\n * }\n * ```\n */\nexport function injectGridPrint(): PrintMethods {\n  const elementRef = inject(ElementRef);\n  const destroyRef = inject(DestroyRef);\n  const isReady = signal(false);\n\n  let cachedGrid: DataGridElement | null = null;\n  let readyPromiseStarted = false;\n\n  const getGrid = (): DataGridElement | null => {\n    if (cachedGrid) return cachedGrid;\n\n    const grid = elementRef.nativeElement.querySelector('tbw-grid') as DataGridElement | null;\n    if (grid) {\n      cachedGrid = grid;\n      if (!readyPromiseStarted) {\n        readyPromiseStarted = true;\n        grid.ready?.().then(() => isReady.set(true));\n      }\n    }\n    return grid;\n  };\n\n  const getPlugin = (): PrintPlugin | undefined => {\n    return getGrid()?.getPlugin(PrintPlugin);\n  };\n\n  // Eagerly discover the grid after the first render so isReady updates\n  // without requiring a programmatic method call. Falls back to a\n  // MutationObserver for lazy-rendered tabs, *ngIf, @defer, etc.\n  afterNextRender(() => {\n    if (getGrid()) return;\n\n    const host = elementRef.nativeElement as HTMLElement;\n    const observer = new MutationObserver(() => {\n      if (getGrid()) observer.disconnect();\n    });\n    observer.observe(host, { childList: true, subtree: true });\n\n    destroyRef.onDestroy(() => observer.disconnect());\n  });\n\n  return {\n    isReady: isReady.asReadonly(),\n\n    print: async (params?: PrintParams) => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:print] PrintPlugin not found.\\n\\n` +\n            `  → Enable print on the grid:\\n` +\n            `    <tbw-grid [print]=\"true\" />`,\n        );\n        return;\n      }\n      await plugin.print(params);\n    },\n\n    isPrinting: () => getPlugin()?.isPrinting() ?? false,\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BG;AAOH,eAAe,CAAC,OAAO,EAAE,CAAC,MAAM,KAAI;AAClC,IAAA,IAAI,MAAM,KAAK,IAAI,EAAE;QACnB,OAAO,IAAI,WAAW,EAAE;IAC1B;AACA,IAAA,OAAO,IAAI,WAAW,CAAC,MAAM,IAAI,SAAS,CAAC;AAC7C,CAAC,CAAC;AA0BF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCG;SACa,eAAe,GAAA;AAC7B,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AACrC,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AACrC,IAAA,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,mDAAC;IAE7B,IAAI,UAAU,GAA2B,IAAI;IAC7C,IAAI,mBAAmB,GAAG,KAAK;IAE/B,MAAM,OAAO,GAAG,MAA6B;AAC3C,QAAA,IAAI,UAAU;AAAE,YAAA,OAAO,UAAU;QAEjC,MAAM,IAAI,GAAG,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,UAAU,CAA2B;QACzF,IAAI,IAAI,EAAE;YACR,UAAU,GAAG,IAAI;YACjB,IAAI,CAAC,mBAAmB,EAAE;gBACxB,mBAAmB,GAAG,IAAI;AAC1B,gBAAA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAC9C;QACF;AACA,QAAA,OAAO,IAAI;AACb,IAAA,CAAC;IAED,MAAM,SAAS,GAAG,MAA8B;AAC9C,QAAA,OAAO,OAAO,EAAE,EAAE,SAAS,CAAC,WAAW,CAAC;AAC1C,IAAA,CAAC;;;;IAKD,eAAe,CAAC,MAAK;AACnB,QAAA,IAAI,OAAO,EAAE;YAAE;AAEf,QAAA,MAAM,IAAI,GAAG,UAAU,CAAC,aAA4B;AACpD,QAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;AACzC,YAAA,IAAI,OAAO,EAAE;gBAAE,QAAQ,CAAC,UAAU,EAAE;AACtC,QAAA,CAAC,CAAC;AACF,QAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;QAE1D,UAAU,CAAC,SAAS,CAAC,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;AACnD,IAAA,CAAC,CAAC;IAEF,OAAO;AACL,QAAA,OAAO,EAAE,OAAO,CAAC,UAAU,EAAE;AAE7B,QAAA,KAAK,EAAE,OAAO,MAAoB,KAAI;AACpC,YAAA,MAAM,MAAM,GAAG,SAAS,EAAE;YAC1B,IAAI,CAAC,MAAM,EAAE;gBACX,OAAO,CAAC,IAAI,CACV,CAAA,2CAAA,CAA6C;oBAC3C,CAAA,+BAAA,CAAiC;AACjC,oBAAA,CAAA,+BAAA,CAAiC,CACpC;gBACD;YACF;AACA,YAAA,MAAM,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;QAC5B,CAAC;QAED,UAAU,EAAE,MAAM,SAAS,EAAE,EAAE,UAAU,EAAE,IAAI,KAAK;KACrD;AACH;;AC/JA;;AAEG;;;;"}

package/fesm2022/toolbox-web-grid-angular-features-selection.mjs

@@ -1,4 +1,4 @@
-import { inject, ElementRef, DestroyRef, signal } from '@angular/core';
+import { inject, ElementRef, DestroyRef, signal, afterNextRender } from '@angular/core';
 import { registerFeature } from '@toolbox-web/grid-angular';
 import { SelectionPlugin } from '@toolbox-web/grid/plugins/selection';
 
@@ -141,6 +141,40 @@ function injectGridSelection() {
     const getPlugin = () => {
         return getGrid()?.getPlugin(SelectionPlugin);
     };
+    /**
+     * Sync reactive signals with the current plugin state.
+     * Called once when the grid is first discovered and ready.
+     */
+    const syncSignals = () => {
+        const plugin = getPlugin();
+        if (plugin) {
+            selectionSignal.set(plugin.getSelection());
+            const mode = plugin.config?.mode;
+            selectedRowIndicesSignal.set(mode === 'row' ? plugin.getSelectedRowIndices() : []);
+        }
+    };
+    // Discover the grid after the first render so the selection-change
+    // listener is attached without requiring a programmatic method call.
+    // Uses a MutationObserver as fallback for lazy-rendered tabs, *ngIf,
+    // @defer, etc. where the grid may not be in the DOM on first render.
+    afterNextRender(() => {
+        const grid = getGrid();
+        if (grid) {
+            grid.ready?.().then(syncSignals);
+            return;
+        }
+        // Grid not in DOM yet — watch for it to appear.
+        const host = elementRef.nativeElement;
+        const observer = new MutationObserver(() => {
+            const discovered = getGrid();
+            if (discovered) {
+                observer.disconnect();
+                discovered.ready?.().then(syncSignals);
+            }
+        });
+        observer.observe(host, { childList: true, subtree: true });
+        destroyRef.onDestroy(() => observer.disconnect());
+    });
     return {
         isReady: isReady.asReadonly(),
         selection: selectionSignal.asReadonly(),

package/fesm2022/toolbox-web-grid-angular-features-selection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toolbox-web-grid-angular-features-selection.mjs","sources":["../../../../libs/grid-angular/features/selection/src/index.ts","../../../../libs/grid-angular/features/selection/src/toolbox-web-grid-angular-features-selection.ts"],"sourcesContent":["/**\n * Selection feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `selection` input on Grid directive.\n * Also exports `injectGridSelection()` for programmatic selection control.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/selection';\n *\n * <tbw-grid [selection]=\"'range'\" />\n * ```\n *\n * @example Using injectGridSelection\n * ```typescript\n * import { injectGridSelection } from '@toolbox-web/grid-angular/features/selection';\n *\n * @Component({...})\n * export class MyComponent {\n *   private selection = injectGridSelection<Employee>();\n *\n *   selectAll() {\n *     this.selection.selectAll();\n *   }\n *\n *   getSelected() {\n *     return this.selection.getSelection();\n *   }\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { DestroyRef, ElementRef, inject, signal, type Signal } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport {\n  SelectionPlugin,\n  type CellRange,\n  type SelectionChangeDetail,\n  type SelectionResult,\n} from '@toolbox-web/grid/plugins/selection';\n\nregisterFeature('selection', (config) => {\n  // Handle shorthand: 'cell', 'row', 'range'\n  if (config === 'cell' || config === 'row' || config === 'range') {\n    return new SelectionPlugin({ mode: config });\n  }\n  // Full config object\n  return new SelectionPlugin(config ?? undefined);\n});\n\n/**\n * Selection methods returned from injectGridSelection.\n *\n * Uses lazy discovery - the grid is found on first method call, not during initialization.\n * This ensures it works with lazy-rendered tabs, conditional rendering, etc.\n */\nexport interface SelectionMethods {\n  /**\n   * Select all rows (row mode) or all cells (range mode).\n   */\n  selectAll: () => void;\n\n  /**\n   * Clear all selection.\n   */\n  clearSelection: () => void;\n\n  /**\n   * Get the current selection state (imperative, point-in-time snapshot).\n   * For reactive selection state, use the `selection` signal instead.\n   */\n  getSelection: () => SelectionResult | null;\n\n  /**\n   * Check if a specific cell is selected.\n   */\n  isCellSelected: (row: number, col: number) => boolean;\n\n  /**\n   * Set selection ranges programmatically.\n   */\n  setRanges: (ranges: CellRange[]) => void;\n\n  /**\n   * Reactive selection state. Updates automatically whenever the selection changes.\n   * Null when no SelectionPlugin is active or no selection has been made yet.\n   *\n   * @example\n   * ```typescript\n   * readonly selection = injectGridSelection();\n   *\n   * // In template:\n   * // {{ selection.selection()?.ranges?.length ?? 0 }} cells selected\n   *\n   * // In computed:\n   * readonly hasSelection = computed(() => (this.selection.selection()?.ranges?.length ?? 0) > 0);\n   * ```\n   */\n  selection: Signal<SelectionResult | null>;\n\n  /**\n   * Reactive selected row indices (sorted ascending). Updates automatically.\n   * Convenience signal for row-mode selection — returns `[]` in cell/range modes\n   * or when nothing is selected.\n   *\n   * @example\n   * ```typescript\n   * readonly selection = injectGridSelection();\n   *\n   * // In template:\n   * // {{ selection.selectedRowIndices().length }} rows selected\n   *\n   * // In computed:\n   * readonly selectedRows = computed(() =>\n   *   this.selection.selectedRowIndices().map(i => this.rows[i])\n   * );\n   * ```\n   */\n  selectedRowIndices: Signal<number[]>;\n\n  /**\n   * Signal indicating if grid is ready.\n   * The grid is discovered lazily, so this updates when first method call succeeds.\n   */\n  isReady: Signal<boolean>;\n}\n\n/**\n * Angular inject function for programmatic selection control.\n *\n * Uses **lazy grid discovery** - the grid element is found when methods are called,\n * not during initialization. This ensures it works reliably with:\n * - Lazy-rendered tabs\n * - Conditional rendering (*ngIf)\n * - Dynamic component loading\n *\n * @example\n * ```typescript\n * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n * import { Grid } from '@toolbox-web/grid-angular';\n * import '@toolbox-web/grid-angular/features/selection';\n * import { injectGridSelection } from '@toolbox-web/grid-angular/features/selection';\n *\n * @Component({\n *   selector: 'app-my-grid',\n *   imports: [Grid],\n *   schemas: [CUSTOM_ELEMENTS_SCHEMA],\n *   template: `\n *     <button (click)=\"handleSelectAll()\">Select All</button>\n *     <tbw-grid [rows]=\"rows\" [selection]=\"'range'\"></tbw-grid>\n *   `\n * })\n * export class MyGridComponent {\n *   selection = injectGridSelection();\n *\n *   handleSelectAll() {\n *     this.selection.selectAll();\n *   }\n *\n *   getSelectedRows() {\n *     const selection = this.selection.getSelection();\n *     if (!selection) return [];\n *     // Derive rows from selection.ranges as needed\n *   }\n * }\n * ```\n */\nexport function injectGridSelection<TRow = unknown>(): SelectionMethods {\n  const elementRef = inject(ElementRef);\n  const destroyRef = inject(DestroyRef);\n  const isReady = signal(false);\n\n  // Reactive selection state\n  const selectionSignal = signal<SelectionResult | null>(null);\n  const selectedRowIndicesSignal = signal<number[]>([]);\n\n  // Lazy discovery: cached grid reference\n  let cachedGrid: DataGridElement<TRow> | null = null;\n  let readyPromiseStarted = false;\n  let listenerAttached = false;\n\n  /**\n   * Handle selection-change events from the grid.\n   * Updates both reactive signals.\n   */\n  const onSelectionChange = (e: Event): void => {\n    const detail = (e as CustomEvent<SelectionChangeDetail>).detail;\n    const plugin = getPlugin();\n    if (plugin) {\n      selectionSignal.set(plugin.getSelection());\n      selectedRowIndicesSignal.set(detail.mode === 'row' ? plugin.getSelectedRowIndices() : []);\n    }\n  };\n\n  /**\n   * Attach the selection-change event listener to the grid element.\n   * Called once when the grid is first discovered.\n   */\n  const attachListener = (grid: DataGridElement<TRow>): void => {\n    if (listenerAttached) return;\n    listenerAttached = true;\n\n    grid.addEventListener('selection-change', onSelectionChange);\n\n    destroyRef.onDestroy(() => {\n      grid.removeEventListener('selection-change', onSelectionChange);\n    });\n  };\n\n  /**\n   * Lazily find the grid element. Called on each method invocation.\n   * Caches the reference once found and triggers ready() check.\n   */\n  const getGrid = (): DataGridElement<TRow> | null => {\n    if (cachedGrid) return cachedGrid;\n\n    const grid = elementRef.nativeElement.querySelector('tbw-grid') as DataGridElement<TRow> | null;\n    if (grid) {\n      cachedGrid = grid;\n      attachListener(grid);\n      // Start ready() check only once\n      if (!readyPromiseStarted) {\n        readyPromiseStarted = true;\n        grid.ready?.().then(() => isReady.set(true));\n      }\n    }\n    return grid;\n  };\n\n  const getPlugin = (): SelectionPlugin | undefined => {\n    return getGrid()?.getPlugin(SelectionPlugin);\n  };\n\n  return {\n    isReady: isReady.asReadonly(),\n    selection: selectionSignal.asReadonly(),\n    selectedRowIndices: selectedRowIndicesSignal.asReadonly(),\n\n    selectAll: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:selection] SelectionPlugin not found.\\n\\n` +\n            `  → Enable selection on the grid:\\n` +\n            `    <tbw-grid [selection]=\"'range'\" />`,\n        );\n        return;\n      }\n      const grid = getGrid();\n      // Cast to any to access protected config\n      const mode = (plugin as any).config?.mode;\n\n      if (mode === 'row') {\n        const rowCount = grid?.rows?.length ?? 0;\n        const allIndices = new Set<number>();\n        for (let i = 0; i < rowCount; i++) allIndices.add(i);\n        (plugin as any).selected = allIndices;\n        (plugin as any).requestAfterRender?.();\n      } else if (mode === 'range') {\n        const rowCount = grid?.rows?.length ?? 0;\n        const colCount = (grid as any)?._columns?.length ?? 0;\n        if (rowCount > 0 && colCount > 0) {\n          plugin.setRanges([{ from: { row: 0, col: 0 }, to: { row: rowCount - 1, col: colCount - 1 } }]);\n        }\n      }\n    },\n\n    clearSelection: () => {\n      getPlugin()?.clearSelection();\n    },\n\n    getSelection: () => {\n      return getPlugin()?.getSelection() ?? null;\n    },\n\n    isCellSelected: (row: number, col: number) => {\n      return getPlugin()?.isCellSelected(row, col) ?? false;\n    },\n\n    setRanges: (ranges: CellRange[]) => {\n      getPlugin()?.setRanges(ranges);\n    },\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"toolbox-web-grid-angular-features-selection.mjs","sources":["../../../../libs/grid-angular/features/selection/src/index.ts","../../../../libs/grid-angular/features/selection/src/toolbox-web-grid-angular-features-selection.ts"],"sourcesContent":["/**\n * Selection feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `selection` input on Grid directive.\n * Also exports `injectGridSelection()` for programmatic selection control.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/selection';\n *\n * <tbw-grid [selection]=\"'range'\" />\n * ```\n *\n * @example Using injectGridSelection\n * ```typescript\n * import { injectGridSelection } from '@toolbox-web/grid-angular/features/selection';\n *\n * @Component({...})\n * export class MyComponent {\n *   private selection = injectGridSelection<Employee>();\n *\n *   selectAll() {\n *     this.selection.selectAll();\n *   }\n *\n *   getSelected() {\n *     return this.selection.getSelection();\n *   }\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { afterNextRender, DestroyRef, ElementRef, inject, signal, type Signal } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport {\n  SelectionPlugin,\n  type CellRange,\n  type SelectionChangeDetail,\n  type SelectionResult,\n} from '@toolbox-web/grid/plugins/selection';\n\nregisterFeature('selection', (config) => {\n  // Handle shorthand: 'cell', 'row', 'range'\n  if (config === 'cell' || config === 'row' || config === 'range') {\n    return new SelectionPlugin({ mode: config });\n  }\n  // Full config object\n  return new SelectionPlugin(config ?? undefined);\n});\n\n/**\n * Selection methods returned from injectGridSelection.\n *\n * Uses lazy discovery - the grid is found on first method call, not during initialization.\n * This ensures it works with lazy-rendered tabs, conditional rendering, etc.\n */\nexport interface SelectionMethods {\n  /**\n   * Select all rows (row mode) or all cells (range mode).\n   */\n  selectAll: () => void;\n\n  /**\n   * Clear all selection.\n   */\n  clearSelection: () => void;\n\n  /**\n   * Get the current selection state (imperative, point-in-time snapshot).\n   * For reactive selection state, use the `selection` signal instead.\n   */\n  getSelection: () => SelectionResult | null;\n\n  /**\n   * Check if a specific cell is selected.\n   */\n  isCellSelected: (row: number, col: number) => boolean;\n\n  /**\n   * Set selection ranges programmatically.\n   */\n  setRanges: (ranges: CellRange[]) => void;\n\n  /**\n   * Reactive selection state. Updates automatically whenever the selection changes.\n   * Null when no SelectionPlugin is active or no selection has been made yet.\n   *\n   * @example\n   * ```typescript\n   * readonly selection = injectGridSelection();\n   *\n   * // In template:\n   * // {{ selection.selection()?.ranges?.length ?? 0 }} cells selected\n   *\n   * // In computed:\n   * readonly hasSelection = computed(() => (this.selection.selection()?.ranges?.length ?? 0) > 0);\n   * ```\n   */\n  selection: Signal<SelectionResult | null>;\n\n  /**\n   * Reactive selected row indices (sorted ascending). Updates automatically.\n   * Convenience signal for row-mode selection — returns `[]` in cell/range modes\n   * or when nothing is selected.\n   *\n   * @example\n   * ```typescript\n   * readonly selection = injectGridSelection();\n   *\n   * // In template:\n   * // {{ selection.selectedRowIndices().length }} rows selected\n   *\n   * // In computed:\n   * readonly selectedRows = computed(() =>\n   *   this.selection.selectedRowIndices().map(i => this.rows[i])\n   * );\n   * ```\n   */\n  selectedRowIndices: Signal<number[]>;\n\n  /**\n   * Signal indicating if grid is ready.\n   * The grid is discovered lazily, so this updates when first method call succeeds.\n   */\n  isReady: Signal<boolean>;\n}\n\n/**\n * Angular inject function for programmatic selection control.\n *\n * Uses **lazy grid discovery** - the grid element is found when methods are called,\n * not during initialization. This ensures it works reliably with:\n * - Lazy-rendered tabs\n * - Conditional rendering (*ngIf)\n * - Dynamic component loading\n *\n * @example\n * ```typescript\n * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n * import { Grid } from '@toolbox-web/grid-angular';\n * import '@toolbox-web/grid-angular/features/selection';\n * import { injectGridSelection } from '@toolbox-web/grid-angular/features/selection';\n *\n * @Component({\n *   selector: 'app-my-grid',\n *   imports: [Grid],\n *   schemas: [CUSTOM_ELEMENTS_SCHEMA],\n *   template: `\n *     <button (click)=\"handleSelectAll()\">Select All</button>\n *     <tbw-grid [rows]=\"rows\" [selection]=\"'range'\"></tbw-grid>\n *   `\n * })\n * export class MyGridComponent {\n *   selection = injectGridSelection();\n *\n *   handleSelectAll() {\n *     this.selection.selectAll();\n *   }\n *\n *   getSelectedRows() {\n *     const selection = this.selection.getSelection();\n *     if (!selection) return [];\n *     // Derive rows from selection.ranges as needed\n *   }\n * }\n * ```\n */\nexport function injectGridSelection<TRow = unknown>(): SelectionMethods {\n  const elementRef = inject(ElementRef);\n  const destroyRef = inject(DestroyRef);\n  const isReady = signal(false);\n\n  // Reactive selection state\n  const selectionSignal = signal<SelectionResult | null>(null);\n  const selectedRowIndicesSignal = signal<number[]>([]);\n\n  // Lazy discovery: cached grid reference\n  let cachedGrid: DataGridElement<TRow> | null = null;\n  let readyPromiseStarted = false;\n  let listenerAttached = false;\n\n  /**\n   * Handle selection-change events from the grid.\n   * Updates both reactive signals.\n   */\n  const onSelectionChange = (e: Event): void => {\n    const detail = (e as CustomEvent<SelectionChangeDetail>).detail;\n    const plugin = getPlugin();\n    if (plugin) {\n      selectionSignal.set(plugin.getSelection());\n      selectedRowIndicesSignal.set(detail.mode === 'row' ? plugin.getSelectedRowIndices() : []);\n    }\n  };\n\n  /**\n   * Attach the selection-change event listener to the grid element.\n   * Called once when the grid is first discovered.\n   */\n  const attachListener = (grid: DataGridElement<TRow>): void => {\n    if (listenerAttached) return;\n    listenerAttached = true;\n\n    grid.addEventListener('selection-change', onSelectionChange);\n\n    destroyRef.onDestroy(() => {\n      grid.removeEventListener('selection-change', onSelectionChange);\n    });\n  };\n\n  /**\n   * Lazily find the grid element. Called on each method invocation.\n   * Caches the reference once found and triggers ready() check.\n   */\n  const getGrid = (): DataGridElement<TRow> | null => {\n    if (cachedGrid) return cachedGrid;\n\n    const grid = elementRef.nativeElement.querySelector('tbw-grid') as DataGridElement<TRow> | null;\n    if (grid) {\n      cachedGrid = grid;\n      attachListener(grid);\n      // Start ready() check only once\n      if (!readyPromiseStarted) {\n        readyPromiseStarted = true;\n        grid.ready?.().then(() => isReady.set(true));\n      }\n    }\n    return grid;\n  };\n\n  const getPlugin = (): SelectionPlugin | undefined => {\n    return getGrid()?.getPlugin(SelectionPlugin);\n  };\n\n  /**\n   * Sync reactive signals with the current plugin state.\n   * Called once when the grid is first discovered and ready.\n   */\n  const syncSignals = (): void => {\n    const plugin = getPlugin();\n    if (plugin) {\n      selectionSignal.set(plugin.getSelection());\n      const mode = (plugin as any).config?.mode;\n      selectedRowIndicesSignal.set(mode === 'row' ? plugin.getSelectedRowIndices() : []);\n    }\n  };\n\n  // Discover the grid after the first render so the selection-change\n  // listener is attached without requiring a programmatic method call.\n  // Uses a MutationObserver as fallback for lazy-rendered tabs, *ngIf,\n  // @defer, etc. where the grid may not be in the DOM on first render.\n  afterNextRender(() => {\n    const grid = getGrid();\n    if (grid) {\n      grid.ready?.().then(syncSignals);\n      return;\n    }\n\n    // Grid not in DOM yet — watch for it to appear.\n    const host = elementRef.nativeElement as HTMLElement;\n    const observer = new MutationObserver(() => {\n      const discovered = getGrid();\n      if (discovered) {\n        observer.disconnect();\n        discovered.ready?.().then(syncSignals);\n      }\n    });\n    observer.observe(host, { childList: true, subtree: true });\n\n    destroyRef.onDestroy(() => observer.disconnect());\n  });\n\n  return {\n    isReady: isReady.asReadonly(),\n    selection: selectionSignal.asReadonly(),\n    selectedRowIndices: selectedRowIndicesSignal.asReadonly(),\n\n    selectAll: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:selection] SelectionPlugin not found.\\n\\n` +\n            `  → Enable selection on the grid:\\n` +\n            `    <tbw-grid [selection]=\"'range'\" />`,\n        );\n        return;\n      }\n      const grid = getGrid();\n      // Cast to any to access protected config\n      const mode = (plugin as any).config?.mode;\n\n      if (mode === 'row') {\n        const rowCount = grid?.rows?.length ?? 0;\n        const allIndices = new Set<number>();\n        for (let i = 0; i < rowCount; i++) allIndices.add(i);\n        (plugin as any).selected = allIndices;\n        (plugin as any).requestAfterRender?.();\n      } else if (mode === 'range') {\n        const rowCount = grid?.rows?.length ?? 0;\n        const colCount = (grid as any)?._columns?.length ?? 0;\n        if (rowCount > 0 && colCount > 0) {\n          plugin.setRanges([{ from: { row: 0, col: 0 }, to: { row: rowCount - 1, col: colCount - 1 } }]);\n        }\n      }\n    },\n\n    clearSelection: () => {\n      getPlugin()?.clearSelection();\n    },\n\n    getSelection: () => {\n      return getPlugin()?.getSelection() ?? null;\n    },\n\n    isCellSelected: (row: number, col: number) => {\n      return getPlugin()?.isCellSelected(row, col) ?? false;\n    },\n\n    setRanges: (ranges: CellRange[]) => {\n      getPlugin()?.setRanges(ranges);\n    },\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/toolbox-web-grid-angular-features-undo-redo.mjs

@@ -1,4 +1,4 @@
-import { inject, ElementRef, signal } from '@angular/core';
+import { inject, ElementRef, DestroyRef, signal, afterNextRender } from '@angular/core';
 import { registerFeature } from '@toolbox-web/grid-angular';
 import { UndoRedoPlugin } from '@toolbox-web/grid/plugins/undo-redo';
 
@@ -69,15 +69,48 @@ registerFeature('undoRedo', (config) => {
  */
 function injectGridUndoRedo() {
     const elementRef = inject(ElementRef);
+    const destroyRef = inject(DestroyRef);
     const isReady = signal(false, ...(ngDevMode ? [{ debugName: "isReady" }] : []));
+    // Reactive undo/redo availability signals
+    const canUndoSignal = signal(false, ...(ngDevMode ? [{ debugName: "canUndoSignal" }] : []));
+    const canRedoSignal = signal(false, ...(ngDevMode ? [{ debugName: "canRedoSignal" }] : []));
     let cachedGrid = null;
     let readyPromiseStarted = false;
+    let listenerAttached = false;
+    /**
+     * Sync canUndo/canRedo signals with the current plugin state.
+     */
+    const syncSignals = () => {
+        const plugin = getPlugin();
+        if (plugin) {
+            canUndoSignal.set(plugin.canUndo());
+            canRedoSignal.set(plugin.canRedo());
+        }
+    };
+    /**
+     * Attach event listeners to the grid for undo/redo state changes.
+     * Listens for `undo`, `redo`, and `cell-commit` DOM events.
+     */
+    const attachListeners = (grid) => {
+        if (listenerAttached)
+            return;
+        listenerAttached = true;
+        grid.addEventListener('undo', syncSignals);
+        grid.addEventListener('redo', syncSignals);
+        grid.addEventListener('cell-commit', syncSignals);
+        destroyRef.onDestroy(() => {
+            grid.removeEventListener('undo', syncSignals);
+            grid.removeEventListener('redo', syncSignals);
+            grid.removeEventListener('cell-commit', syncSignals);
+        });
+    };
     const getGrid = () => {
         if (cachedGrid)
             return cachedGrid;
         const grid = elementRef.nativeElement.querySelector('tbw-grid');
         if (grid) {
             cachedGrid = grid;
+            attachListeners(grid);
             if (!readyPromiseStarted) {
                 readyPromiseStarted = true;
                 grid.ready?.().then(() => isReady.set(true));
@@ -88,8 +121,30 @@ function injectGridUndoRedo() {
     const getPlugin = () => {
         return getGrid()?.getPlugin(UndoRedoPlugin);
     };
+    // Eagerly discover the grid after the first render so event listeners
+    // are attached and isReady updates without requiring a programmatic
+    // method call. Falls back to MutationObserver for lazy-rendered content.
+    afterNextRender(() => {
+        const grid = getGrid();
+        if (grid) {
+            grid.ready?.().then(syncSignals);
+            return;
+        }
+        const host = elementRef.nativeElement;
+        const observer = new MutationObserver(() => {
+            const discovered = getGrid();
+            if (discovered) {
+                observer.disconnect();
+                discovered.ready?.().then(syncSignals);
+            }
+        });
+        observer.observe(host, { childList: true, subtree: true });
+        destroyRef.onDestroy(() => observer.disconnect());
+    });
     return {
         isReady: isReady.asReadonly(),
+        canUndo: canUndoSignal.asReadonly(),
+        canRedo: canRedoSignal.asReadonly(),
         undo: () => {
             const plugin = getPlugin();
             if (!plugin) {
@@ -98,7 +153,9 @@ function injectGridUndoRedo() {
                     `    <tbw-grid [editing]="'dblclick'" [undoRedo]="true" />`);
                 return null;
             }
-            return plugin.undo();
+            const result = plugin.undo();
+            syncSignals();
+            return result;
         },
         redo: () => {
             const plugin = getPlugin();
@@ -108,10 +165,10 @@ function injectGridUndoRedo() {
                     `    <tbw-grid [editing]="'dblclick'" [undoRedo]="true" />`);
                 return null;
             }
-            return plugin.redo();
+            const result = plugin.redo();
+            syncSignals();
+            return result;
         },
-        canUndo: () => getPlugin()?.canUndo() ?? false,
-        canRedo: () => getPlugin()?.canRedo() ?? false,
         clearHistory: () => {
             const plugin = getPlugin();
             if (!plugin) {
@@ -121,6 +178,7 @@ function injectGridUndoRedo() {
                 return;
             }
             plugin.clearHistory();
+            syncSignals();
         },
         getUndoStack: () => getPlugin()?.getUndoStack() ?? [],
         getRedoStack: () => getPlugin()?.getRedoStack() ?? [],