@toolbox-web/grid-angular 0.9.1 → 0.11.0

package/types/toolbox-web-grid-angular.d.ts

@@ -1,8 +1,8 @@
 import * as _angular_core from '@angular/core';
 import { Type, EnvironmentInjector, ApplicationRef, ViewContainerRef, InjectionToken, EnvironmentProviders, Signal, TemplateRef, EventEmitter, OnInit, OnDestroy, AfterContentInit } from '@angular/core';
-import { GridConfig, ColumnConfig, FrameworkAdapter, ColumnViewRenderer, ColumnEditorSpec, TypeDefault, GridIcons, DataGridElement, ExpandCollapseAnimation, CellClickDetail, RowClickDetail, CellActivateDetail, CellChangeDetail, SortChangeDetail, ColumnResizeDetail, GridColumnState } from '@toolbox-web/grid';
-import { AbstractControl, FormArray, FormGroup } from '@angular/forms';
-import { ChangedRowsResetDetail } from '@toolbox-web/grid/plugins/editing';
+import { GridConfig as GridConfig$1, ColumnConfig as ColumnConfig$1, FrameworkAdapter, TypeDefault as TypeDefault$1, ColumnViewRenderer, ColumnEditorSpec, GridIcons, DataGridElement, ExpandCollapseAnimation, CellClickDetail, RowClickDetail, CellActivateDetail, CellChangeDetail, SortChangeDetail, ColumnResizeDetail, GridColumnState } from '@toolbox-web/grid';
+import { AbstractControl, FormGroup, FormArray } from '@angular/forms';
+import { EditingConfig, ChangedRowsResetDetail } from '@toolbox-web/grid/plugins/editing';
 import { SelectionConfig, ClipboardConfig, ContextMenuConfig, MultiSortConfig, FilterConfig, ReorderConfig, VisibilityConfig, GroupingColumnsConfig, ColumnVirtualizationConfig, RowReorderConfig, GroupingRowsConfig, PinnedRowsConfig, TreeConfig, MasterDetailConfig, ResponsivePluginConfig, UndoRedoConfig, ExportConfig, PrintConfig, PivotConfig, ServerSideConfig, FilterChangeDetail, ColumnMoveDetail, ColumnVisibilityDetail, SelectionChangeDetail, RowMoveDetail, GroupToggleDetail, TreeExpandDetail, DetailExpandDetail, ResponsiveChangeDetail, CopyDetail, PasteDetail, UndoRedoDetail, ExportCompleteDetail, PrintStartDetail, PrintCompleteDetail } from '@toolbox-web/grid/all';
 
 /**
@@ -13,7 +13,7 @@ import { SelectionConfig, ClipboardConfig, ContextMenuConfig, MultiSortConfig, F
  */
 
 /**
- * Interface for Angular renderer components.
+ * Interface for cell renderer components.
  *
  * Renderer components receive the cell value, row data, and column config as inputs.
  * Use Angular signal inputs for reactive updates.
@@ -21,20 +21,20 @@ import { SelectionConfig, ClipboardConfig, ContextMenuConfig, MultiSortConfig, F
  * @example
  * ```typescript
  * import { Component, input } from '@angular/core';
- * import type { AngularCellRenderer } from '@toolbox-web/grid-angular';
+ * import type { CellRenderer } from '@toolbox-web/grid-angular';
  *
  * @Component({
  *   selector: 'app-status-badge',
  *   template: `<span [class]="'badge-' + value()">{{ value() }}</span>`
  * })
- * export class StatusBadgeComponent implements AngularCellRenderer<Employee, string> {
+ * export class StatusBadgeComponent implements CellRenderer<Employee, string> {
  *   value = input.required<string>();
  *   row = input.required<Employee>();
  *   column = input<unknown>();
  * }
  * ```
  */
-interface AngularCellRenderer<TRow = unknown, TValue = unknown> {
+interface CellRenderer<TRow = unknown, TValue = unknown> {
     /** The cell value - use `input<TValue>()` or `input.required<TValue>()` */
     value: {
         (): TValue | undefined;
@@ -49,7 +49,12 @@ interface AngularCellRenderer<TRow = unknown, TValue = unknown> {
     };
 }
 /**
- * Interface for Angular editor components.
+ * @deprecated Use `CellRenderer` instead.
+ * @see {@link CellRenderer}
+ */
+type AngularCellRenderer<TRow = unknown, TValue = unknown> = CellRenderer<TRow, TValue>;
+/**
+ * Interface for cell editor components.
  *
  * Editor components receive the cell value, row data, and column config as inputs,
  * plus must emit `commit` and `cancel` outputs.
@@ -57,7 +62,7 @@ interface AngularCellRenderer<TRow = unknown, TValue = unknown> {
  * @example
  * ```typescript
  * import { Component, input, output } from '@angular/core';
- * import type { AngularCellEditor } from '@toolbox-web/grid-angular';
+ * import type { CellEditor } from '@toolbox-web/grid-angular';
  *
  * @Component({
  *   selector: 'app-status-editor',
@@ -68,7 +73,7 @@ interface AngularCellRenderer<TRow = unknown, TValue = unknown> {
  *     </select>
  *   `
  * })
- * export class StatusEditorComponent implements AngularCellEditor<Employee, string> {
+ * export class StatusEditorComponent implements CellEditor<Employee, string> {
  *   value = input.required<string>();
  *   row = input.required<Employee>();
  *   column = input<unknown>();
@@ -77,7 +82,7 @@ interface AngularCellRenderer<TRow = unknown, TValue = unknown> {
  * }
  * ```
  */
-interface AngularCellEditor<TRow = unknown, TValue = unknown> extends AngularCellRenderer<TRow, TValue> {
+interface CellEditor<TRow = unknown, TValue = unknown> extends CellRenderer<TRow, TValue> {
     /** Emit to commit the new value - use `output<TValue>()` */
     commit: {
         emit(value: TValue): void;
@@ -94,17 +99,59 @@ interface AngularCellEditor<TRow = unknown, TValue = unknown> extends AngularCel
     };
 }
 /**
- * Angular-specific column configuration.
+ * @deprecated Use `CellEditor` instead.
+ * @see {@link CellEditor}
+ */
+type AngularCellEditor<TRow = unknown, TValue = unknown> = CellEditor<TRow, TValue>;
+/**
+ * Type default configuration.
+ *
+ * Allows Angular component classes for renderers and editors in typeDefaults.
+ *
+ * @example
+ * ```typescript
+ * import type { GridConfig, TypeDefault } from '@toolbox-web/grid-angular';
+ *
+ * const config: GridConfig<Employee> = {
+ *   typeDefaults: {
+ *     boolean: {
+ *       renderer: (ctx) => { ... },  // vanilla JS renderer
+ *       editor: CheckboxEditorComponent, // Angular component
+ *     },
+ *     date: {
+ *       editor: DatePickerComponent, // Angular component
+ *     }
+ *   }
+ * };
+ * ```
+ */
+interface TypeDefault<TRow = unknown> {
+    /** Format function for cell display */
+    format?: (value: unknown, row: TRow) => string;
+    /** Cell renderer - can be vanilla JS function or Angular component */
+    renderer?: ColumnConfig$1<TRow>['renderer'] | Type<CellRenderer<TRow, unknown>>;
+    /** Cell editor - can be vanilla JS function or Angular component */
+    editor?: ColumnConfig$1<TRow>['editor'] | Type<CellEditor<TRow, unknown>>;
+    /** Default editor parameters */
+    editorParams?: Record<string, unknown>;
+}
+/**
+ * @deprecated Use `TypeDefault` instead.
+ * @see {@link TypeDefault}
+ */
+type AngularTypeDefault<TRow = unknown> = TypeDefault<TRow>;
+/**
+ * Column configuration for Angular applications.
  *
  * Extends the base ColumnConfig to allow Angular component classes
  * to be used directly as renderers and editors.
  *
  * @example
  * ```typescript
- * import type { AngularColumnConfig } from '@toolbox-web/grid-angular';
+ * import type { ColumnConfig } from '@toolbox-web/grid-angular';
  * import { StatusBadgeComponent, StatusEditorComponent } from './components';
  *
- * const columns: AngularColumnConfig<Employee>[] = [
+ * const columns: ColumnConfig<Employee>[] = [
  *   { field: 'name', header: 'Name' },
  *   {
  *     field: 'status',
@@ -116,28 +163,51 @@ interface AngularCellEditor<TRow = unknown, TValue = unknown> extends AngularCel
  * ];
  * ```
  */
-interface AngularColumnConfig<TRow = unknown> extends Omit<ColumnConfig<TRow>, 'renderer' | 'editor'> {
+interface ColumnConfig<TRow = unknown> extends Omit<ColumnConfig$1<TRow>, 'renderer' | 'editor'> {
     /**
      * Cell renderer - can be:
      * - A function `(ctx) => HTMLElement | string`
-     * - An Angular component class implementing AngularCellRenderer
+     * - An Angular component class implementing CellRenderer
      */
-    renderer?: ColumnConfig<TRow>['renderer'] | Type<AngularCellRenderer<TRow, unknown>>;
+    renderer?: ColumnConfig$1<TRow>['renderer'] | Type<CellRenderer<TRow, unknown>>;
     /**
      * Cell editor - can be:
      * - A function `(ctx) => HTMLElement`
-     * - An Angular component class implementing AngularCellEditor
+     * - An Angular component class implementing CellEditor
      */
-    editor?: ColumnConfig<TRow>['editor'] | Type<AngularCellEditor<TRow, unknown>>;
+    editor?: ColumnConfig$1<TRow>['editor'] | Type<CellEditor<TRow, unknown>>;
 }
 /**
- * Angular-specific grid configuration.
+ * @deprecated Use `ColumnConfig` instead.
+ * @see {@link ColumnConfig}
+ */
+type AngularColumnConfig<TRow = unknown> = ColumnConfig<TRow>;
+/**
+ * Grid configuration for Angular applications.
+ *
+ * Extends the base GridConfig to use Angular-augmented ColumnConfig and TypeDefault.
+ * This allows component classes as renderers/editors.
  *
- * Extends the base GridConfig to use AngularColumnConfig.
+ * @example
+ * ```typescript
+ * import type { GridConfig, ColumnConfig } from '@toolbox-web/grid-angular';
+ *
+ * const config: GridConfig<Employee> = {
+ *   columns: [...],
+ *   plugins: [...],
+ * };
+ * ```
  */
-interface AngularGridConfig<TRow = unknown> extends Omit<GridConfig<TRow>, 'columns'> {
-    columns?: AngularColumnConfig<TRow>[];
+interface GridConfig<TRow = unknown> extends Omit<GridConfig$1<TRow>, 'columns' | 'typeDefaults'> {
+    columns?: ColumnConfig<TRow>[];
+    /** Type-level defaults that can use Angular component classes */
+    typeDefaults?: Record<string, TypeDefault<TRow>>;
 }
+/**
+ * @deprecated Use `GridConfig` instead.
+ * @see {@link GridConfig}
+ */
+type AngularGridConfig<TRow = unknown> = GridConfig<TRow>;
 /**
  * Type guard to check if a value is an Angular component class.
  *
@@ -160,7 +230,7 @@ declare function isComponentClass(value: unknown): value is Type<unknown>;
  * ```typescript
  * import { Component, inject, EnvironmentInjector, ApplicationRef, ViewContainerRef } from '@angular/core';
  * import { GridElement } from '@toolbox-web/grid';
- * import { AngularGridAdapter } from '@toolbox-web/grid-angular';
+ * import { GridAdapter } from '@toolbox-web/grid-angular';
  *
  * @Component({
  *   selector: 'app-root',
@@ -171,7 +241,7 @@ declare function isComponentClass(value: unknown): value is Type<unknown>;
  *     const injector = inject(EnvironmentInjector);
  *     const appRef = inject(ApplicationRef);
  *     const viewContainerRef = inject(ViewContainerRef);
- *     GridElement.registerAdapter(new AngularGridAdapter(injector, appRef, viewContainerRef));
+ *     GridElement.registerAdapter(new GridAdapter(injector, appRef, viewContainerRef));
  *   }
  * }
  * ```
@@ -210,7 +280,7 @@ declare function isComponentClass(value: unknown): value is Type<unknown>;
  * - Handles editor callbacks (onCommit/onCancel)
  * - Manages view lifecycle and change detection
  */
-declare class AngularGridAdapter implements FrameworkAdapter {
+declare class GridAdapter implements FrameworkAdapter {
     private injector;
     private appRef;
     private viewContainerRef;
@@ -226,9 +296,9 @@ declare class AngularGridAdapter implements FrameworkAdapter {
      *
      * @example
      * ```typescript
-     * import { AngularGridAdapter, type AngularGridConfig } from '@toolbox-web/grid-angular';
+     * import { GridAdapter, type GridConfig } from '@toolbox-web/grid-angular';
      *
-     * const config: AngularGridConfig<Employee> = {
+     * const config: GridConfig<Employee> = {
      *   columns: [
      *     { field: 'status', renderer: StatusBadgeComponent, editor: StatusEditorComponent },
      *   ],
@@ -236,7 +306,7 @@ declare class AngularGridAdapter implements FrameworkAdapter {
      *
      * // In component
      * constructor() {
-     *   const adapter = inject(AngularGridAdapter); // or create new instance
+     *   const adapter = inject(GridAdapter); // or create new instance
      *   this.processedConfig = adapter.processGridConfig(config);
      * }
      * ```
@@ -244,7 +314,15 @@ declare class AngularGridAdapter implements FrameworkAdapter {
      * @param config - Angular grid configuration with possible component class references
      * @returns Processed GridConfig with actual renderer/editor functions
      */
-    processGridConfig<TRow = unknown>(config: AngularGridConfig<TRow>): GridConfig<TRow>;
+    processGridConfig<TRow = unknown>(config: GridConfig<TRow>): GridConfig$1<TRow>;
+    /**
+     * Processes typeDefaults configuration, converting component class references
+     * to actual renderer/editor functions.
+     *
+     * @param typeDefaults - Angular type defaults with possible component class references
+     * @returns Processed TypeDefault record
+     */
+    processTypeDefaults<TRow = unknown>(typeDefaults: Record<string, TypeDefault<TRow>>): Record<string, TypeDefault$1<TRow>>;
     /**
      * Processes a single column configuration, converting component class references
      * to actual renderer/editor functions.
@@ -252,7 +330,7 @@ declare class AngularGridAdapter implements FrameworkAdapter {
      * @param column - Angular column configuration
      * @returns Processed ColumnConfig
      */
-    processColumn<TRow = unknown>(column: AngularColumnConfig<TRow>): ColumnConfig<TRow>;
+    processColumn<TRow = unknown>(column: ColumnConfig<TRow>): ColumnConfig$1<TRow>;
     /**
      * Determines if this adapter can handle the given element.
      * Checks if a template is registered for this element (structural or nested).
@@ -284,7 +362,7 @@ declare class AngularGridAdapter implements FrameworkAdapter {
      * ```
      * As long as the component emits `(commit)` with the new value.
      */
-    createEditor<TRow = unknown, TValue = unknown>(element: HTMLElement): ColumnEditorSpec<TRow, TValue>;
+    createEditor<TRow = unknown, TValue = unknown>(element: HTMLElement): ColumnEditorSpec<TRow, TValue> | undefined;
     /**
      * Creates a detail renderer function for MasterDetailPlugin.
      * Renders Angular templates for expandable detail rows.
@@ -338,7 +416,19 @@ declare class AngularGridAdapter implements FrameworkAdapter {
      * };
      * ```
      */
-    getTypeDefault<TRow = unknown>(type: string): TypeDefault<TRow> | undefined;
+    getTypeDefault<TRow = unknown>(type: string): TypeDefault$1<TRow> | undefined;
+    /**
+     * Creates and mounts an Angular component dynamically.
+     * Shared logic between renderer and editor component creation.
+     * @internal
+     */
+    private mountComponent;
+    /**
+     * Wires up commit/cancel handlers for an editor component.
+     * Supports both Angular outputs and DOM CustomEvents.
+     * @internal
+     */
+    private wireEditorCallbacks;
     /**
      * Creates a renderer function from an Angular component class.
      * @internal
@@ -366,6 +456,11 @@ declare class AngularGridAdapter implements FrameworkAdapter {
      */
     destroy(): void;
 }
+/**
+ * @deprecated Use `GridAdapter` instead. This alias will be removed in a future version.
+ * @see {@link GridAdapter}
+ */
+declare const AngularGridAdapter: typeof GridAdapter;
 
 /**
  * Type-level default registry for Angular applications.
@@ -375,10 +470,20 @@ declare class AngularGridAdapter implements FrameworkAdapter {
  */
 
 /**
- * Angular-specific type default configuration.
- * Uses Angular component types instead of function-based renderers/editors.
+ * Type default registration configuration.
+ * Uses Angular component types for renderers/editors.
+ *
+ * @example
+ * ```typescript
+ * const defaults: Record<string, TypeDefaultRegistration> = {
+ *   country: {
+ *     renderer: CountryCellComponent,
+ *     editor: CountryEditorComponent,
+ *   },
+ * };
+ * ```
  */
-interface AngularTypeDefault<TRow = unknown> {
+interface TypeDefaultRegistration<TRow = unknown> {
     /** Angular component class for rendering cells of this type */
     renderer?: Type<any>;
     /** Angular component class for editing cells of this type */
@@ -389,7 +494,7 @@ interface AngularTypeDefault<TRow = unknown> {
 /**
  * Injection token for providing type defaults at app level.
  */
-declare const GRID_TYPE_DEFAULTS: InjectionToken<Record<string, AngularTypeDefault<unknown>>>;
+declare const GRID_TYPE_DEFAULTS: InjectionToken<Record<string, TypeDefaultRegistration<unknown>>>;
 /**
  * Injectable service for managing type-level defaults.
  *
@@ -435,11 +540,11 @@ declare class GridTypeRegistry {
      * @param type - The type name (e.g., 'country', 'currency')
      * @param defaults - Renderer/editor configuration
      */
-    register<T = unknown>(type: string, defaults: AngularTypeDefault<T>): void;
+    register<T = unknown>(type: string, defaults: TypeDefaultRegistration<T>): void;
     /**
      * Get type defaults for a given type.
      */
-    get(type: string): AngularTypeDefault | undefined;
+    get(type: string): TypeDefaultRegistration | undefined;
     /**
      * Remove type defaults for a type.
      */
@@ -458,7 +563,7 @@ declare class GridTypeRegistry {
      *
      * @internal
      */
-    getAsTypeDefault(type: string): TypeDefault | undefined;
+    getAsTypeDefault(type: string): TypeDefault$1 | undefined;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridTypeRegistry, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<GridTypeRegistry>;
 }
@@ -482,7 +587,7 @@ declare class GridTypeRegistry {
  * };
  * ```
  */
-declare function provideGridTypeDefaults(defaults: Record<string, AngularTypeDefault>): EnvironmentProviders;
+declare function provideGridTypeDefaults(defaults: Record<string, TypeDefaultRegistration>): EnvironmentProviders;
 
 /**
  * Icon configuration registry for Angular applications.
@@ -600,31 +705,65 @@ declare function provideGridIcons(icons: Partial<GridIcons>): EnvironmentProvide
 
 /**
  * Selection convenience methods returned from injectGrid.
+ *
+ * @deprecated These methods are deprecated and will be removed in a future version.
+ * Use `injectGridSelection()` from `@toolbox-web/grid-angular/features/selection` instead.
+ *
+ * @example
+ * ```typescript
+ * // Old (deprecated)
+ * const grid = injectGrid();
+ * grid.selectAll();
+ *
+ * // New (recommended)
+ * import { injectGridSelection } from '@toolbox-web/grid-angular/features/selection';
+ * const selection = injectGridSelection();
+ * selection.selectAll();
+ * ```
  */
 interface SelectionMethods<TRow = unknown> {
     /**
      * Select all rows in the grid.
      * Requires SelectionPlugin with mode: 'row'.
+     * @deprecated Use `injectGridSelection()` from `@toolbox-web/grid-angular/features/selection` instead.
      */
     selectAll: () => void;
     /**
      * Clear all selection.
      * Works with any SelectionPlugin mode.
+     * @deprecated Use `injectGridSelection()` from `@toolbox-web/grid-angular/features/selection` instead.
      */
     clearSelection: () => void;
     /**
      * Get selected row indices.
      * Returns Set of selected row indices.
+     * @deprecated Use `injectGridSelection()` from `@toolbox-web/grid-angular/features/selection` instead.
      */
     getSelectedIndices: () => Set<number>;
     /**
      * Get selected rows data.
      * Returns array of selected row objects.
+     * @deprecated Use `injectGridSelection()` from `@toolbox-web/grid-angular/features/selection` instead.
      */
     getSelectedRows: () => TRow[];
 }
 /**
  * Export convenience methods returned from injectGrid.
+ *
+ * @deprecated These methods are deprecated and will be removed in a future version.
+ * Use `injectGridExport()` from `@toolbox-web/grid-angular/features/export` instead.
+ *
+ * @example
+ * ```typescript
+ * // Old (deprecated)
+ * const grid = injectGrid();
+ * grid.exportToCsv('data.csv');
+ *
+ * // New (recommended)
+ * import { injectGridExport } from '@toolbox-web/grid-angular/features/export';
+ * const gridExport = injectGridExport();
+ * gridExport.exportToCsv('data.csv');
+ * ```
  */
 interface ExportMethods {
     /**
@@ -632,6 +771,7 @@ interface ExportMethods {
      * Requires ExportPlugin to be loaded.
      *
      * @param filename - Optional filename (defaults to 'export.csv')
+     * @deprecated Use `injectGridExport()` from `@toolbox-web/grid-angular/features/export` instead.
      */
     exportToCsv: (filename?: string) => void;
     /**
@@ -639,11 +779,17 @@ interface ExportMethods {
      * Requires ExportPlugin to be loaded.
      *
      * @param filename - Optional filename (defaults to 'export.json')
+     * @deprecated Use `injectGridExport()` from `@toolbox-web/grid-angular/features/export` instead.
      */
     exportToJson: (filename?: string) => void;
 }
 /**
  * Return type for injectGrid function.
+ *
+ * Note: Selection and export convenience methods are deprecated.
+ * Use feature-specific inject functions instead:
+ * - `injectGridSelection()` from `@toolbox-web/grid-angular/features/selection`
+ * - `injectGridExport()` from `@toolbox-web/grid-angular/features/export`
  */
 interface InjectGridReturn<TRow = unknown> extends SelectionMethods<TRow>, ExportMethods {
     /** Direct access to the typed grid element */
@@ -651,9 +797,9 @@ interface InjectGridReturn<TRow = unknown> extends SelectionMethods<TRow>, Expor
     /** Whether the grid is ready */
     isReady: Signal<boolean>;
     /** Current grid configuration */
-    config: Signal<GridConfig<TRow> | null>;
+    config: Signal<GridConfig$1<TRow> | null>;
     /** Get the effective configuration */
-    getConfig: () => Promise<GridConfig<TRow> | null>;
+    getConfig: () => Promise<GridConfig$1<TRow> | null>;
     /** Force a layout recalculation */
     forceLayout: () => Promise<void>;
     /** Toggle a group row */
@@ -663,7 +809,7 @@ interface InjectGridReturn<TRow = unknown> extends SelectionMethods<TRow>, Expor
     /** Unregister custom styles */
     unregisterStyles: (id: string) => void;
     /** Get current visible columns */
-    visibleColumns: Signal<ColumnConfig<TRow>[]>;
+    visibleColumns: Signal<ColumnConfig$1<TRow>[]>;
 }
 /**
  * Angular inject function for programmatic access to a grid instance.
@@ -851,7 +997,7 @@ declare abstract class BaseGridEditor<TRow = unknown, TValue = unknown> {
     /**
      * The column configuration.
      */
-    readonly column: _angular_core.InputSignal<ColumnConfig<TRow> | undefined>;
+    readonly column: _angular_core.InputSignal<ColumnConfig$1<TRow> | undefined>;
     /**
      * The FormControl for this cell, if the grid is bound to a FormArray.
      * When provided, the editor uses control.value instead of the value input.
@@ -1282,10 +1428,13 @@ declare function getFormArrayContext(gridElement: HTMLElement): FormArrayContext
  */
 declare class GridFormArray implements OnInit, OnDestroy {
     #private;
+    private readonly destroyRef;
     private elementRef;
     private cellCommitListener;
     private rowCommitListener;
     private touchListener;
+    private valueChangesSubscription;
+    private statusChangesSubscriptions;
     /**
      * The FormArray to bind to the grid.
      */
@@ -1297,12 +1446,14 @@ declare class GridFormArray implements OnInit, OnDestroy {
      * - After a cell commit, if the FormControl is invalid, the cell is marked with `setInvalid()`
      * - When a FormControl becomes valid, `clearInvalid()` is called
      * - On `row-commit`, if the row's FormGroup has invalid controls, the commit is prevented
+     * - In grid mode: validation state is synced on initial render and updated reactively
      *
      * @default true
      */
     readonly syncValidation: _angular_core.InputSignal<boolean>;
     /**
-     * Effect that syncs the FormArray value to the grid rows.
+     * Effect that sets up valueChanges subscription when FormArray changes.
+     * This handles both initial binding and when the FormArray reference changes.
      */
     private syncFormArrayToGrid;
     ngOnInit(): void;
@@ -1311,6 +1462,190 @@ declare class GridFormArray implements OnInit, OnDestroy {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridFormArray, "tbw-grid[formArray]", never, { "formArray": { "alias": "formArray"; "required": true; "isSignal": true; }; "syncValidation": { "alias": "syncValidation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Gets the FormArrayContext from a grid element, if present.
+ * @internal
+ */
+declare function getLazyFormContext(gridElement: HTMLElement): FormArrayContext | undefined;
+/**
+ * Factory function type for creating FormGroups lazily.
+ * Called when a row enters edit mode for the first time.
+ *
+ * @template TRow The row data type
+ * @param row The row data object
+ * @param rowIndex The row index in the grid
+ * @returns A FormGroup for the row (only include editable fields)
+ */
+type LazyFormFactory<TRow = unknown> = (row: TRow, rowIndex: number) => FormGroup;
+/**
+ * Event emitted when a row's form values have changed.
+ */
+interface RowFormChangeEvent<TRow = unknown> {
+    /** The row index */
+    rowIndex: number;
+    /** The row ID (if available) */
+    rowId?: string;
+    /** The original row data */
+    row: TRow;
+    /** The FormGroup for this row */
+    formGroup: FormGroup;
+    /** The current form values */
+    values: Partial<TRow>;
+    /** Whether the form is valid */
+    valid: boolean;
+    /** Whether the form is dirty */
+    dirty: boolean;
+}
+/**
+ * Directive that provides lazy FormGroup creation for grid editing.
+ *
+ * Unlike `GridFormArray` which creates all FormGroups upfront, this directive
+ * creates FormGroups on-demand only when a row enters edit mode. This provides
+ * much better performance for large datasets while still enabling full
+ * Angular Reactive Forms integration.
+ *
+ * ## Key Benefits
+ *
+ * - **Performance**: Only creates FormGroups for rows being edited (20-100x fewer controls)
+ * - **Same DX**: Editors still receive `control` in their context for validation
+ * - **Memory efficient**: FormGroups are cleaned up when rows exit edit mode
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component, inject, signal } from '@angular/core';
+ * import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+ * import { Grid, GridLazyForm, TbwEditor } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [Grid, GridLazyForm, TbwEditor, ReactiveFormsModule],
+ *   template: \`
+ *     <tbw-grid
+ *       [rows]="employees()"
+ *       [lazyForm]="createRowForm"
+ *       [gridConfig]="config">
+ *
+ *       <tbw-grid-column field="firstName">
+ *         <input *tbwEditor="let _; control as ctrl"
+ *                [formControl]="ctrl"
+ *                [class.is-invalid]="ctrl?.invalid && ctrl?.touched" />
+ *       </tbw-grid-column>
+ *     </tbw-grid>
+ *   \`
+ * })
+ * export class MyComponent {
+ *   private fb = inject(FormBuilder);
+ *   employees = signal(generateEmployees(1000));
+ *
+ *   // Factory called when editing starts - only include editable fields!
+ *   createRowForm = (row: Employee): FormGroup => this.fb.group({
+ *     firstName: [row.firstName, Validators.required],
+ *     lastName: [row.lastName, Validators.minLength(2)],
+ *     salary: [row.salary, [Validators.required, Validators.min(0)]],
+ *   });
+ *
+ *   gridConfig = { columns: [...] };
+ * }
+ * ```
+ *
+ * ## How It Works
+ *
+ * 1. Rows come from `[rows]` input (plain data array)
+ * 2. When a cell enters edit mode, the FormGroup is created lazily
+ * 3. Editors receive the FormControl in their template context
+ * 4. On commit, FormGroup values are synced back to the row
+ * 5. FormGroup is cleaned up when the row exits edit mode (configurable)
+ *
+ * ## Performance Comparison
+ *
+ * | Rows | GridFormArray (20 fields) | GridLazyForm |
+ * |------|---------------------------|--------------|
+ * | 100  | 2,000 controls           | ~20 controls |
+ * | 500  | 10,000 controls          | ~20 controls |
+ * | 1000 | 20,000 controls          | ~20 controls |
+ *
+ * @see GridFormArray For small datasets with full upfront validation
+ */
+declare class GridLazyForm<TRow = unknown> implements OnInit, OnDestroy {
+    #private;
+    private elementRef;
+    private formGroupCache;
+    private rowIndexMap;
+    private editingRowIndex;
+    private cellCommitListener;
+    private rowCommitListener;
+    private rowsChangeListener;
+    /**
+     * Factory function to create a FormGroup for a row.
+     * Called lazily when the row first enters edit mode.
+     *
+     * @example
+     * ```typescript
+     * createRowForm = (row: Employee): FormGroup => this.fb.group({
+     *   firstName: [row.firstName, Validators.required],
+     *   lastName: [row.lastName],
+     *   salary: [row.salary, [Validators.min(0)]],
+     * });
+     * ```
+     */
+    readonly lazyForm: _angular_core.InputSignal<LazyFormFactory<TRow>>;
+    /**
+     * Whether to automatically sync Angular validation state to grid's visual invalid styling.
+     *
+     * When enabled:
+     * - After a cell commit, if the FormControl is invalid, the cell is marked with `setInvalid()`
+     * - When a FormControl becomes valid, `clearInvalid()` is called
+     * - On `row-commit`, if the row's FormGroup has invalid controls, the commit is prevented
+     *
+     * @default true
+     */
+    readonly syncValidation: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to keep FormGroups cached after a row exits edit mode.
+     *
+     * - `true`: FormGroups are kept, preserving dirty/touched state across edit sessions
+     * - `false`: FormGroups are disposed when the row exits edit mode (default)
+     *
+     * @default false
+     */
+    readonly keepFormGroups: _angular_core.InputSignal<boolean>;
+    /**
+     * Emitted when a row's form values change.
+     * Useful for auto-save, validation display, or syncing to external state.
+     */
+    readonly rowFormChange: _angular_core.OutputEmitterRef<RowFormChangeEvent<TRow>>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Gets the FormGroup for a row, if it exists.
+     * Unlike the context methods, this does NOT create a FormGroup lazily.
+     *
+     * @param rowIndex The row index
+     * @returns The FormGroup or undefined
+     */
+    getFormGroup(rowIndex: number): FormGroup | undefined;
+    /**
+     * Gets all cached FormGroups.
+     * Useful for bulk validation or inspection.
+     *
+     * @returns Map of row objects to their FormGroups
+     */
+    getAllFormGroups(): ReadonlyMap<TRow, FormGroup>;
+    /**
+     * Clears all cached FormGroups.
+     * Useful when the underlying data changes significantly.
+     */
+    clearAllFormGroups(): void;
+    /**
+     * Validates all currently cached FormGroups.
+     *
+     * @returns true if all FormGroups are valid, false otherwise
+     */
+    validateAll(): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridLazyForm<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridLazyForm<any>, "tbw-grid[lazyForm]", never, { "lazyForm": { "alias": "lazyForm"; "required": true; "isSignal": true; }; "syncValidation": { "alias": "syncValidation"; "required": false; "isSignal": true; }; "keepFormGroups": { "alias": "keepFormGroups"; "required": false; "isSignal": true; }; }, { "rowFormChange": "rowFormChange"; }, never, never, true, never>;
+}
+
 /**
  * Context object passed to the responsive card template.
  *
@@ -1539,7 +1874,7 @@ interface RowCommitEvent<TRow = unknown> {
  * ```
  *
  * The directive automatically:
- * - Creates an AngularGridAdapter instance
+ * - Creates a GridAdapter instance
  * - Registers it with the GridElement
  * - Injects custom styles into the grid
  * - Handles cleanup on destruction
@@ -1660,55 +1995,30 @@ declare class Grid implements OnInit, AfterContentInit, OnDestroy {
      */
     loading: _angular_core.InputSignal<boolean | undefined>;
     /**
-     * Core grid configuration object.
+     * Grid configuration object with optional Angular-specific extensions.
      *
-     * Use this input for the base GridConfig (typeDefaults, getRowId, etc.).
-     * This is the same as binding directly to the web component's gridConfig property,
-     * but allows the directive to properly merge feature plugins and config overrides.
+     * Accepts Angular-augmented `GridConfig` from `@toolbox-web/grid-angular`.
+     * You can specify Angular component classes directly for renderers and editors.
      *
-     * For Angular-specific features (component class renderers/editors), use `angularConfig` instead.
+     * Component classes must implement the appropriate interfaces:
+     * - Renderers: `CellRenderer<TRow, TValue>` - requires `value()` and `row()` signal inputs
+     * - Editors: `CellEditor<TRow, TValue>` - adds `commit` and `cancel` outputs
      *
      * @example
      * ```typescript
+     * // Simple config with plain renderers
      * config: GridConfig = {
+     *   columns: [
+     *     { field: 'name', header: 'Name' },
+     *     { field: 'active', type: 'boolean' }
+     *   ],
      *   typeDefaults: {
      *     boolean: { renderer: (ctx) => ctx.value ? '✓' : '✗' }
      *   }
      * };
-     * columns = [
-     *   { field: 'active', type: 'boolean' }
-     * ];
-     * ```
-     *
-     * ```html
-     * <tbw-grid [gridConfig]="config" [columns]="columns" />
-     * ```
-     */
-    gridConfig: _angular_core.InputSignal<any>;
-    /**
-     * Angular-specific grid configuration that supports component classes for renderers/editors.
-     *
-     * Use this input when you want to specify Angular component classes directly in column configs.
-     * Components must implement the appropriate interfaces:
-     * - Renderers: `AngularCellRenderer<TRow, TValue>` - requires `value()` and `row()` signal inputs
-     * - Editors: `AngularCellEditor<TRow, TValue>` - adds `commit` and `cancel` outputs
-     *
-     * The directive automatically processes component classes and converts them to grid-compatible
-     * renderer/editor functions before applying to the grid.
-     *
-     * @example
-     * ```typescript
-     * // Component that implements AngularCellEditor
-     * @Component({...})
-     * export class BonusEditorComponent implements AngularCellEditor<Employee, number> {
-     *   value = input.required<number>();
-     *   row = input.required<Employee>();
-     *   commit = output<number>();
-     *   cancel = output<void>();
-     * }
      *
-     * // In your grid config
-     * config: AngularGridConfig<Employee> = {
+     * // Config with component classes
+     * config: GridConfig<Employee> = {
      *   columns: [
      *     { field: 'name', header: 'Name' },
      *     { field: 'bonus', header: 'Bonus', editable: true, editor: BonusEditorComponent }
@@ -1717,10 +2027,25 @@ declare class Grid implements OnInit, AfterContentInit, OnDestroy {
      * ```
      *
      * ```html
-     * <tbw-grid [angularConfig]="config" [rows]="employees"></tbw-grid>
+     * <tbw-grid [gridConfig]="config" [rows]="employees"></tbw-grid>
+     * ```
+     */
+    gridConfig: _angular_core.InputSignal<GridConfig<any> | undefined>;
+    /**
+     * @deprecated Use `gridConfig` instead. This input will be removed in a future version.
+     *
+     * The `angularConfig` name was inconsistent with React and Vue adapters, which both use `gridConfig`.
+     * The `gridConfig` input now accepts `GridConfig` directly.
+     *
+     * ```html
+     * <!-- Before -->
+     * <tbw-grid [angularConfig]="config" />
+     *
+     * <!-- After -->
+     * <tbw-grid [gridConfig]="config" />
      * ```
      */
-    angularConfig: _angular_core.InputSignal<AngularGridConfig<any> | undefined>;
+    angularConfig: _angular_core.InputSignal<GridConfig<any> | undefined>;
     /**
      * Enable cell/row/range selection.
      *
@@ -1756,9 +2081,12 @@ declare class Grid implements OnInit, AfterContentInit, OnDestroy {
      * <tbw-grid [editing]="'click'" />
      * <tbw-grid [editing]="'dblclick'" />
      * <tbw-grid [editing]="'manual'" />
+     *
+     * <!-- Full config with callbacks -->
+     * <tbw-grid [editing]="{ editOn: 'dblclick', onBeforeEditClose: myCallback }" />
      * ```
      */
-    editing: _angular_core.InputSignal<boolean | "click" | "dblclick" | "manual" | undefined>;
+    editing: _angular_core.InputSignal<boolean | "click" | "dblclick" | "manual" | EditingConfig | undefined>;
     /**
      * Enable clipboard copy/paste. Requires selection to be enabled.
      *
@@ -2333,7 +2661,7 @@ declare class Grid implements OnInit, AfterContentInit, OnDestroy {
     private configureResponsiveCard;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Grid, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "tbw-grid", never, { "customStyles": { "alias": "customStyles"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "gridConfig": { "alias": "gridConfig"; "required": false; "isSignal": true; }; "angularConfig": { "alias": "angularConfig"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "editing": { "alias": "editing"; "required": false; "isSignal": true; }; "clipboard": { "alias": "clipboard"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; "multiSort": { "alias": "multiSort"; "required": false; "isSignal": true; }; "sorting": { "alias": "sorting"; "required": false; "isSignal": true; }; "filtering": { "alias": "filtering"; "required": false; "isSignal": true; }; "reorder": { "alias": "reorder"; "required": false; "isSignal": true; }; "visibility": { "alias": "visibility"; "required": false; "isSignal": true; }; "pinnedColumns": { "alias": "pinnedColumns"; "required": false; "isSignal": true; }; "groupingColumns": { "alias": "groupingColumns"; "required": false; "isSignal": true; }; "columnVirtualization": { "alias": "columnVirtualization"; "required": false; "isSignal": true; }; "rowReorder": { "alias": "rowReorder"; "required": false; "isSignal": true; }; "groupingRows": { "alias": "groupingRows"; "required": false; "isSignal": true; }; "pinnedRows": { "alias": "pinnedRows"; "required": false; "isSignal": true; }; "tree": { "alias": "tree"; "required": false; "isSignal": true; }; "masterDetail": { "alias": "masterDetail"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "undoRedo": { "alias": "undoRedo"; "required": false; "isSignal": true; }; "exportFeature": { "alias": "exportFeature"; "required": false; "isSignal": true; }; "print": { "alias": "print"; "required": false; "isSignal": true; }; "pivot": { "alias": "pivot"; "required": false; "isSignal": true; }; "serverSide": { "alias": "serverSide"; "required": false; "isSignal": true; }; }, { "cellClick": "cellClick"; "rowClick": "rowClick"; "cellActivate": "cellActivate"; "cellChange": "cellChange"; "cellCommit": "cellCommit"; "rowCommit": "rowCommit"; "changedRowsReset": "changedRowsReset"; "sortChange": "sortChange"; "filterChange": "filterChange"; "columnResize": "columnResize"; "columnMove": "columnMove"; "columnVisibility": "columnVisibility"; "columnStateChange": "columnStateChange"; "selectionChange": "selectionChange"; "rowMove": "rowMove"; "groupToggle": "groupToggle"; "treeExpand": "treeExpand"; "detailExpand": "detailExpand"; "responsiveChange": "responsiveChange"; "copy": "copy"; "paste": "paste"; "undoRedoAction": "undoRedoAction"; "exportComplete": "exportComplete"; "printStart": "printStart"; "printComplete": "printComplete"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "tbw-grid", never, { "customStyles": { "alias": "customStyles"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "gridConfig": { "alias": "gridConfig"; "required": false; "isSignal": true; }; "angularConfig": { "alias": "angularConfig"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "editing": { "alias": "editing"; "required": false; "isSignal": true; }; "clipboard": { "alias": "clipboard"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; "multiSort": { "alias": "multiSort"; "required": false; "isSignal": true; }; "sorting": { "alias": "sorting"; "required": false; "isSignal": true; }; "filtering": { "alias": "filtering"; "required": false; "isSignal": true; }; "reorder": { "alias": "reorder"; "required": false; "isSignal": true; }; "visibility": { "alias": "visibility"; "required": false; "isSignal": true; }; "pinnedColumns": { "alias": "pinnedColumns"; "required": false; "isSignal": true; }; "groupingColumns": { "alias": "groupingColumns"; "required": false; "isSignal": true; }; "columnVirtualization": { "alias": "columnVirtualization"; "required": false; "isSignal": true; }; "rowReorder": { "alias": "rowReorder"; "required": false; "isSignal": true; }; "groupingRows": { "alias": "groupingRows"; "required": false; "isSignal": true; }; "pinnedRows": { "alias": "pinnedRows"; "required": false; "isSignal": true; }; "tree": { "alias": "tree"; "required": false; "isSignal": true; }; "masterDetail": { "alias": "masterDetail"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "undoRedo": { "alias": "undoRedo"; "required": false; "isSignal": true; }; "exportFeature": { "alias": "export"; "required": false; "isSignal": true; }; "print": { "alias": "print"; "required": false; "isSignal": true; }; "pivot": { "alias": "pivot"; "required": false; "isSignal": true; }; "serverSide": { "alias": "serverSide"; "required": false; "isSignal": true; }; }, { "cellClick": "cellClick"; "rowClick": "rowClick"; "cellActivate": "cellActivate"; "cellChange": "cellChange"; "cellCommit": "cellCommit"; "rowCommit": "rowCommit"; "changedRowsReset": "changedRowsReset"; "sortChange": "sortChange"; "filterChange": "filterChange"; "columnResize": "columnResize"; "columnMove": "columnMove"; "columnVisibility": "columnVisibility"; "columnStateChange": "columnStateChange"; "selectionChange": "selectionChange"; "rowMove": "rowMove"; "groupToggle": "groupToggle"; "treeExpand": "treeExpand"; "detailExpand": "detailExpand"; "responsiveChange": "responsiveChange"; "copy": "copy"; "paste": "paste"; "undoRedoAction": "undoRedoAction"; "exportComplete": "exportComplete"; "printStart": "printStart"; "printComplete": "printComplete"; }, never, never, true, never>;
 }
 
 /**
@@ -2502,6 +2830,6 @@ declare class TbwEditor implements OnDestroy {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwEditor, "[tbwEditor]", never, {}, {}, never, never, true, never>;
 }
 
-export { AngularGridAdapter, BaseGridEditor, GRID_ICONS, GRID_TYPE_DEFAULTS, Grid, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridIconRegistry, GridResponsiveCard, GridToolPanel, GridTypeRegistry, TbwEditor as TbwCellEditor, TbwRenderer as TbwCellView, TbwEditor, TbwRenderer, clearFeatureRegistry, createPluginFromFeature, getFeatureFactory, getFormArrayContext, getRegisteredFeatures, injectGrid, isComponentClass, isFeatureRegistered, provideGridIcons, provideGridTypeDefaults, registerFeature };
-export type { AngularCellEditor, AngularCellRenderer, AngularColumnConfig, AngularGridConfig, AngularTypeDefault, CellCommitEvent, ExportMethods, FeatureName, FormArrayContext, GridCellContext, GridDetailContext, GridEditorContext, GridResponsiveCardContext, GridToolPanelContext, InjectGridReturn, PluginFactory, RowCommitEvent, SelectionMethods, StructuralCellContext, StructuralEditorContext };
+export { AngularGridAdapter, BaseGridEditor, GRID_ICONS, GRID_TYPE_DEFAULTS, Grid, GridAdapter, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridIconRegistry, GridLazyForm, GridResponsiveCard, GridToolPanel, GridTypeRegistry, TbwEditor as TbwCellEditor, TbwRenderer as TbwCellView, TbwEditor, TbwRenderer, clearFeatureRegistry, createPluginFromFeature, getFeatureFactory, getFormArrayContext, getLazyFormContext, getRegisteredFeatures, injectGrid, isComponentClass, isFeatureRegistered, provideGridIcons, provideGridTypeDefaults, registerFeature };
+export type { AngularCellEditor, AngularCellRenderer, AngularColumnConfig, AngularGridConfig, AngularTypeDefault, CellCommitEvent, CellEditor, CellRenderer, ColumnConfig, ExportMethods, FeatureName, FormArrayContext, GridCellContext, GridConfig, GridDetailContext, GridEditorContext, GridResponsiveCardContext, GridToolPanelContext, InjectGridReturn, LazyFormFactory, PluginFactory, RowCommitEvent, RowFormChangeEvent, SelectionMethods, StructuralCellContext, StructuralEditorContext, TypeDefault, TypeDefaultRegistration };
 //# sourceMappingURL=toolbox-web-grid-angular.d.ts.map