@toolbox-web/grid-angular 0.9.1 → 0.11.0

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

@@ -1,8 +1,12 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, contentChild, TemplateRef, effect, Directive, input, InjectionToken, Injectable, makeEnvironmentProviders, EventEmitter, createComponent, signal, afterNextRender, computed, output, EnvironmentInjector, ApplicationRef, ViewContainerRef } from '@angular/core';
+import { inject, ElementRef, contentChild, TemplateRef, effect, Directive, input, DestroyRef, InjectionToken, Injectable, makeEnvironmentProviders, EventEmitter, createComponent, signal, afterNextRender, computed, output, EnvironmentInjector, ApplicationRef, ViewContainerRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormGroup } from '@angular/forms';
+import { startWith, debounceTime } from 'rxjs/operators';
 import { DataGridElement } from '@toolbox-web/grid';
 
+// #endregion
+// #region Utilities
 /**
  * Type guard to check if a value is an Angular component class.
  *
@@ -26,6 +30,7 @@ function isComponentClass(value) {
     const fnString = Function.prototype.toString.call(value);
     return fnString.startsWith('class ') || fnString.startsWith('class{');
 }
+// #endregion
 
 // Global registry mapping DOM elements to their templates
 const editorTemplateRegistry = new Map();
@@ -279,13 +284,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
         }], propDecorators: { showExpandColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandColumn", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 // Symbol for storing form context on the grid element
-const FORM_ARRAY_CONTEXT = Symbol('formArrayContext');
+const FORM_ARRAY_CONTEXT$1 = Symbol('formArrayContext');
 /**
  * Gets the FormArrayContext from a grid element, if present.
  * @internal
  */
 function getFormArrayContext(gridElement) {
-    return gridElement[FORM_ARRAY_CONTEXT];
+    return gridElement[FORM_ARRAY_CONTEXT$1];
 }
 /**
  * Directive that binds a FormArray directly to the grid.
@@ -339,10 +344,13 @@ function getFormArrayContext(gridElement) {
  * - Automatically syncs FormArray changes to the grid
  */
 class GridFormArray {
+    destroyRef = inject(DestroyRef);
     elementRef = inject((ElementRef));
     cellCommitListener = null;
     rowCommitListener = null;
     touchListener = null;
+    valueChangesSubscription = null;
+    statusChangesSubscriptions = [];
     /**
      * The FormArray to bind to the grid.
      */
@@ -354,20 +362,30 @@ class GridFormArray {
      * - 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
      */
     syncValidation = input(true, ...(ngDevMode ? [{ debugName: "syncValidation" }] : []));
     /**
-     * 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.
      */
     syncFormArrayToGrid = effect(() => {
         const formArray = this.formArray();
         const grid = this.elementRef.nativeElement;
-        if (grid && formArray) {
-            // Get the raw value (including disabled controls)
+        if (!grid || !formArray)
+            return;
+        // Unsubscribe from previous FormArray if any
+        this.valueChangesSubscription?.unsubscribe();
+        // Subscribe to valueChanges to sync grid rows when FormArray content changes.
+        // Use startWith to immediately sync the current value.
+        // Note: We use getRawValue() to include disabled controls.
+        this.valueChangesSubscription = formArray.valueChanges
+            .pipe(startWith(formArray.getRawValue()), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
             grid.rows = formArray.getRawValue();
-        }
+        });
     }, ...(ngDevMode ? [{ debugName: "syncFormArrayToGrid" }] : []));
     ngOnInit() {
         const grid = this.elementRef.nativeElement;
@@ -399,6 +417,15 @@ class GridFormArray {
             }
         };
         grid.addEventListener('click', this.touchListener);
+        // If in grid mode with syncValidation, set up reactive validation
+        // Wait for grid to be ready so we can detect the editing mode
+        grid.ready?.().then(() => {
+            if (this.syncValidation() && this.#isGridMode()) {
+                this.#setupReactiveValidation();
+                // Sync initial validation state for all existing controls
+                this.#syncAllValidationState();
+            }
+        });
     }
     ngOnDestroy() {
         const grid = this.elementRef.nativeElement;
@@ -413,8 +440,96 @@ class GridFormArray {
         if (this.touchListener) {
             grid.removeEventListener('click', this.touchListener);
         }
+        if (this.valueChangesSubscription) {
+            this.valueChangesSubscription.unsubscribe();
+        }
+        // Clean up status change subscriptions (grid mode)
+        this.statusChangesSubscriptions.forEach((sub) => sub.unsubscribe());
+        this.statusChangesSubscriptions = [];
         this.#clearFormContext(grid);
     }
+    /**
+     * Checks if the EditingPlugin is in 'grid' mode.
+     */
+    #isGridMode() {
+        const grid = this.elementRef.nativeElement;
+        if (!grid)
+            return false;
+        const editingPlugin = grid.getPluginByName?.('editing');
+        return editingPlugin?.config?.mode === 'grid';
+    }
+    /**
+     * Sets up reactive validation syncing for grid mode.
+     * Subscribes to statusChanges on all FormControls to update validation state in real-time.
+     */
+    #setupReactiveValidation() {
+        const formArray = this.formArray();
+        const grid = this.elementRef.nativeElement;
+        if (!grid)
+            return;
+        // Clean up any existing subscriptions
+        this.statusChangesSubscriptions.forEach((sub) => sub.unsubscribe());
+        this.statusChangesSubscriptions = [];
+        // Subscribe to each FormGroup's statusChanges
+        for (let rowIndex = 0; rowIndex < formArray.length; rowIndex++) {
+            const rowFormGroup = this.#getRowFormGroup(rowIndex);
+            if (!rowFormGroup)
+                continue;
+            // Get the row ID for this row
+            const rowId = this.#getRowId(grid, rowIndex);
+            if (!rowId)
+                continue;
+            // Subscribe to status changes for each control in the FormGroup
+            Object.keys(rowFormGroup.controls).forEach((field) => {
+                const control = rowFormGroup.get(field);
+                if (!control)
+                    return;
+                const sub = control.statusChanges.pipe(debounceTime(50), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+                    this.#syncControlValidationToGrid(rowId, field, control);
+                });
+                this.statusChangesSubscriptions.push(sub);
+            });
+        }
+    }
+    /**
+     * Syncs validation state for all controls in the FormArray.
+     * Called once on init in grid mode to show pre-existing validation errors.
+     */
+    #syncAllValidationState() {
+        const formArray = this.formArray();
+        const grid = this.elementRef.nativeElement;
+        if (!grid)
+            return;
+        for (let rowIndex = 0; rowIndex < formArray.length; rowIndex++) {
+            const rowFormGroup = this.#getRowFormGroup(rowIndex);
+            if (!rowFormGroup)
+                continue;
+            const rowId = this.#getRowId(grid, rowIndex);
+            if (!rowId)
+                continue;
+            Object.keys(rowFormGroup.controls).forEach((field) => {
+                const control = rowFormGroup.get(field);
+                if (control) {
+                    this.#syncControlValidationToGrid(rowId, field, control);
+                }
+            });
+        }
+    }
+    /**
+     * Gets the row ID for a given row index using the grid's getRowId method.
+     */
+    #getRowId(grid, rowIndex) {
+        try {
+            const rows = grid.rows;
+            const row = rows?.[rowIndex];
+            if (!row)
+                return undefined;
+            return grid.getRowId?.(row);
+        }
+        catch {
+            return undefined;
+        }
+    }
     /**
      * Checks if the FormArray contains FormGroups.
      */
@@ -502,13 +617,13 @@ class GridFormArray {
                 return hasErrors ? errors : null;
             },
         };
-        grid[FORM_ARRAY_CONTEXT] = context;
+        grid[FORM_ARRAY_CONTEXT$1] = context;
     }
     /**
      * Clears the FormArrayContext from the grid element.
      */
     #clearFormContext(grid) {
-        delete grid[FORM_ARRAY_CONTEXT];
+        delete grid[FORM_ARRAY_CONTEXT$1];
     }
     /**
      * Handles cell-commit events by updating the FormControl in the FormGroup.
@@ -1169,7 +1284,7 @@ function getAnyEditorTemplate(element) {
  * ```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',
@@ -1180,7 +1295,7 @@ function getAnyEditorTemplate(element) {
  *     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));
  *   }
  * }
  * ```
@@ -1219,7 +1334,7 @@ function getAnyEditorTemplate(element) {
  * - Handles editor callbacks (onCommit/onCancel)
  * - Manages view lifecycle and change detection
  */
-class AngularGridAdapter {
+class GridAdapter {
     injector;
     appRef;
     viewContainerRef;
@@ -1249,9 +1364,9 @@ class AngularGridAdapter {
      *
      * @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 },
      *   ],
@@ -1259,7 +1374,7 @@ class AngularGridAdapter {
      *
      * // In component
      * constructor() {
-     *   const adapter = inject(AngularGridAdapter); // or create new instance
+     *   const adapter = inject(GridAdapter); // or create new instance
      *   this.processedConfig = adapter.processGridConfig(config);
      * }
      * ```
@@ -1268,14 +1383,39 @@ class AngularGridAdapter {
      * @returns Processed GridConfig with actual renderer/editor functions
      */
     processGridConfig(config) {
-        if (!config.columns) {
-            return config;
+        const result = { ...config };
+        // Process columns
+        if (config.columns) {
+            result.columns = config.columns.map((col) => this.processColumn(col));
         }
-        const processedColumns = config.columns.map((col) => this.processColumn(col));
-        return {
-            ...config,
-            columns: processedColumns,
-        };
+        // Process typeDefaults - convert Angular component classes to renderer/editor functions
+        if (config.typeDefaults) {
+            result.typeDefaults = this.processTypeDefaults(config.typeDefaults);
+        }
+        return result;
+    }
+    /**
+     * 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(typeDefaults) {
+        const processed = {};
+        for (const [type, config] of Object.entries(typeDefaults)) {
+            const processedConfig = { ...config };
+            // Convert renderer component class to function
+            if (config.renderer && isComponentClass(config.renderer)) {
+                processedConfig.renderer = this.createComponentRenderer(config.renderer);
+            }
+            // Convert editor component class to function
+            if (config.editor && isComponentClass(config.editor)) {
+                processedConfig.editor = this.createComponentEditor(config.editor);
+            }
+            processed[type] = processedConfig;
+        }
+        return processed;
     }
     /**
      * Processes a single column configuration, converting component class references
@@ -1318,6 +1458,11 @@ class AngularGridAdapter {
             return undefined;
         }
         return (ctx) => {
+            // Skip rendering if the cell is in editing mode
+            // This prevents the renderer from overwriting the editor when the grid re-renders
+            if (ctx.cellEl?.classList.contains('editing')) {
+                return null;
+            }
             // Create the context for the template
             const context = {
                 $implicit: ctx.value,
@@ -1358,10 +1503,10 @@ class AngularGridAdapter {
         // Find the parent grid element for FormArray context access
         const gridElement = element.closest('tbw-grid');
         if (!template) {
-            // No warning - this can happen during early initialization before Angular
-            // registers structural directive templates. The grid will re-parse columns
-            // after templates are registered.
-            return () => document.createElement('div');
+            // No template registered - return undefined to let the grid use its default editor.
+            // This allows columns with only *tbwRenderer (no *tbwEditor) to still be editable
+            // using the built-in text/number/boolean editors.
+            return undefined;
         }
         return (ctx) => {
             // Create simple callback functions (preferred)
@@ -1591,31 +1736,58 @@ class AngularGridAdapter {
         }
         return typeDefault;
     }
+    /**
+     * Creates and mounts an Angular component dynamically.
+     * Shared logic between renderer and editor component creation.
+     * @internal
+     */
+    mountComponent(componentClass, inputs) {
+        // Create a host element for the component
+        const hostElement = document.createElement('span');
+        hostElement.style.display = 'contents';
+        // Create the component dynamically
+        const componentRef = createComponent(componentClass, {
+            environmentInjector: this.injector,
+            hostElement,
+        });
+        // Set inputs - components should have value, row, column inputs
+        this.setComponentInputs(componentRef, inputs);
+        // Attach to app for change detection
+        this.appRef.attachView(componentRef.hostView);
+        this.componentRefs.push(componentRef);
+        // Trigger change detection
+        componentRef.changeDetectorRef.detectChanges();
+        return { hostElement, componentRef };
+    }
+    /**
+     * Wires up commit/cancel handlers for an editor component.
+     * Supports both Angular outputs and DOM CustomEvents.
+     * @internal
+     */
+    wireEditorCallbacks(hostElement, componentRef, commit, cancel) {
+        // Subscribe to Angular outputs (commit/cancel) on the component instance.
+        // This works with Angular's output() signal API.
+        const instance = componentRef.instance;
+        this.subscribeToOutput(instance, 'commit', commit);
+        this.subscribeToOutput(instance, 'cancel', cancel);
+        // Also listen for DOM events as fallback (for components that dispatch CustomEvents)
+        hostElement.addEventListener('commit', (e) => {
+            const customEvent = e;
+            commit(customEvent.detail);
+        });
+        hostElement.addEventListener('cancel', () => cancel());
+    }
     /**
      * Creates a renderer function from an Angular component class.
      * @internal
      */
     createComponentRenderer(componentClass) {
         return (ctx) => {
-            // Create a host element for the component
-            const hostElement = document.createElement('span');
-            hostElement.style.display = 'contents';
-            // Create the component dynamically
-            const componentRef = createComponent(componentClass, {
-                environmentInjector: this.injector,
-                hostElement,
-            });
-            // Set inputs - components should have value, row, column inputs
-            this.setComponentInputs(componentRef, {
+            const { hostElement } = this.mountComponent(componentClass, {
                 value: ctx.value,
                 row: ctx.row,
                 column: ctx.column,
             });
-            // Attach to app for change detection
-            this.appRef.attachView(componentRef.hostView);
-            this.componentRefs.push(componentRef);
-            // Trigger change detection
-            componentRef.changeDetectorRef.detectChanges();
             return hostElement;
         };
     }
@@ -1625,38 +1797,12 @@ class AngularGridAdapter {
      */
     createComponentEditor(componentClass) {
         return (ctx) => {
-            // Create a host element for the component
-            const hostElement = document.createElement('span');
-            hostElement.style.display = 'contents';
-            // Create the component dynamically
-            const componentRef = createComponent(componentClass, {
-                environmentInjector: this.injector,
-                hostElement,
-            });
-            // Set inputs - components should have value, row, column inputs
-            this.setComponentInputs(componentRef, {
+            const { hostElement, componentRef } = this.mountComponent(componentClass, {
                 value: ctx.value,
                 row: ctx.row,
                 column: ctx.column,
             });
-            // Attach to app for change detection
-            this.appRef.attachView(componentRef.hostView);
-            this.componentRefs.push(componentRef);
-            // Trigger change detection
-            componentRef.changeDetectorRef.detectChanges();
-            // Subscribe to Angular outputs (commit/cancel) on the component instance.
-            // This works with Angular's output() signal API.
-            const instance = componentRef.instance;
-            this.subscribeToOutput(instance, 'commit', (value) => ctx.commit(value));
-            this.subscribeToOutput(instance, 'cancel', () => ctx.cancel());
-            // Also listen for DOM events as fallback (for components that dispatch CustomEvents)
-            hostElement.addEventListener('commit', (e) => {
-                const customEvent = e;
-                ctx.commit(customEvent.detail);
-            });
-            hostElement.addEventListener('cancel', () => {
-                ctx.cancel();
-            });
+            this.wireEditorCallbacks(hostElement, componentRef, (value) => ctx.commit(value), () => ctx.cancel());
             return hostElement;
         };
     }
@@ -1699,6 +1845,11 @@ class AngularGridAdapter {
         this.componentRefs = [];
     }
 }
+/**
+ * @deprecated Use `GridAdapter` instead. This alias will be removed in a future version.
+ * @see {@link GridAdapter}
+ */
+const AngularGridAdapter = GridAdapter;
 
 /**
  * Icon configuration registry for Angular applications.
@@ -2377,6 +2528,490 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             type: Directive
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], commit: [{ type: i0.Output, args: ["commit"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
 
+// Symbol for storing form context on the grid element (shared with GridFormArray)
+const FORM_ARRAY_CONTEXT = Symbol('formArrayContext');
+/**
+ * Gets the FormArrayContext from a grid element, if present.
+ * @internal
+ */
+function getLazyFormContext(gridElement) {
+    return gridElement[FORM_ARRAY_CONTEXT];
+}
+/**
+ * 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
+ */
+class GridLazyForm {
+    elementRef = inject((ElementRef));
+    // Cache of FormGroups by row reference
+    formGroupCache = new Map();
+    // Map from row reference to rowIndex (needed for getControl)
+    rowIndexMap = new Map();
+    // Track which row is currently being edited
+    editingRowIndex = null;
+    cellCommitListener = null;
+    rowCommitListener = null;
+    rowsChangeListener = null;
+    /**
+     * 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)]],
+     * });
+     * ```
+     */
+    lazyForm = input.required(...(ngDevMode ? [{ debugName: "lazyForm" }] : []));
+    /**
+     * 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
+     */
+    syncValidation = input(true, ...(ngDevMode ? [{ debugName: "syncValidation" }] : []));
+    /**
+     * 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
+     */
+    keepFormGroups = input(false, ...(ngDevMode ? [{ debugName: "keepFormGroups" }] : []));
+    /**
+     * Emitted when a row's form values change.
+     * Useful for auto-save, validation display, or syncing to external state.
+     */
+    rowFormChange = output();
+    ngOnInit() {
+        const grid = this.elementRef.nativeElement;
+        if (!grid)
+            return;
+        // Store the form context for AngularGridAdapter to access
+        this.#storeFormContext(grid);
+        // Listen for cell-commit to update FormControl and sync validation
+        this.cellCommitListener = (e) => {
+            const detail = e.detail;
+            this.#handleCellCommit(detail);
+        };
+        grid.addEventListener('cell-commit', this.cellCommitListener);
+        // Listen for row-commit to sync FormGroup values back to row and cleanup
+        this.rowCommitListener = (e) => {
+            const detail = e.detail;
+            this.#handleRowCommit(e, detail);
+        };
+        grid.addEventListener('row-commit', this.rowCommitListener);
+        // Listen for rows-change to update row index mappings
+        this.rowsChangeListener = () => {
+            this.#updateRowIndexMap();
+        };
+        grid.addEventListener('rows-change', this.rowsChangeListener);
+        // Initial row index mapping
+        this.#updateRowIndexMap();
+    }
+    ngOnDestroy() {
+        const grid = this.elementRef.nativeElement;
+        if (!grid)
+            return;
+        if (this.cellCommitListener) {
+            grid.removeEventListener('cell-commit', this.cellCommitListener);
+        }
+        if (this.rowCommitListener) {
+            grid.removeEventListener('row-commit', this.rowCommitListener);
+        }
+        if (this.rowsChangeListener) {
+            grid.removeEventListener('rows-change', this.rowsChangeListener);
+        }
+        this.#clearFormContext(grid);
+        this.formGroupCache.clear();
+        this.rowIndexMap.clear();
+    }
+    // #region FormArrayContext Implementation
+    /**
+     * Gets or creates the FormGroup for a row.
+     * This is the core lazy initialization logic.
+     */
+    #getOrCreateFormGroup(row, rowIndex) {
+        let formGroup = this.formGroupCache.get(row);
+        if (!formGroup) {
+            const factory = this.lazyForm();
+            formGroup = factory(row, rowIndex);
+            this.formGroupCache.set(row, formGroup);
+            this.rowIndexMap.set(row, rowIndex);
+        }
+        return formGroup;
+    }
+    /**
+     * Gets the FormGroup for a row if it exists (without creating).
+     */
+    #getRowFormGroup(rowIndex) {
+        const grid = this.elementRef.nativeElement;
+        const rows = grid?.rows;
+        if (!rows || rowIndex < 0 || rowIndex >= rows.length)
+            return undefined;
+        const row = rows[rowIndex];
+        return this.formGroupCache.get(row);
+    }
+    /**
+     * Stores the FormArrayContext on the grid element.
+     * This uses the same interface as GridFormArray for compatibility.
+     */
+    #storeFormContext(grid) {
+        const context = {
+            getRow: (rowIndex) => {
+                const rows = grid.rows;
+                if (!rows || rowIndex < 0 || rowIndex >= rows.length)
+                    return null;
+                return rows[rowIndex];
+            },
+            updateField: (rowIndex, field, value) => {
+                const formGroup = this.#getRowFormGroup(rowIndex);
+                if (formGroup) {
+                    const control = formGroup.get(field);
+                    if (control) {
+                        control.setValue(value);
+                        control.markAsDirty();
+                    }
+                }
+            },
+            getValue: () => {
+                return (grid.rows ?? []);
+            },
+            // Always true for lazy forms - we create FormGroups on demand
+            hasFormGroups: true,
+            getControl: (rowIndex, field) => {
+                const rows = grid.rows;
+                if (!rows || rowIndex < 0 || rowIndex >= rows.length)
+                    return undefined;
+                const row = rows[rowIndex];
+                // LAZY: Create the FormGroup when first needed
+                const formGroup = this.#getOrCreateFormGroup(row, rowIndex);
+                return formGroup.get(field) ?? undefined;
+            },
+            getRowFormGroup: (rowIndex) => {
+                const rows = grid.rows;
+                if (!rows || rowIndex < 0 || rowIndex >= rows.length)
+                    return undefined;
+                const row = rows[rowIndex];
+                // LAZY: Create the FormGroup when first needed
+                return this.#getOrCreateFormGroup(row, rowIndex);
+            },
+            isRowValid: (rowIndex) => {
+                const formGroup = this.#getRowFormGroup(rowIndex);
+                // If no FormGroup exists yet, consider it valid (not edited)
+                if (!formGroup)
+                    return true;
+                return formGroup.valid;
+            },
+            isRowTouched: (rowIndex) => {
+                const formGroup = this.#getRowFormGroup(rowIndex);
+                if (!formGroup)
+                    return false;
+                return formGroup.touched;
+            },
+            isRowDirty: (rowIndex) => {
+                const formGroup = this.#getRowFormGroup(rowIndex);
+                if (!formGroup)
+                    return false;
+                return formGroup.dirty;
+            },
+            getRowErrors: (rowIndex) => {
+                const formGroup = this.#getRowFormGroup(rowIndex);
+                if (!formGroup)
+                    return null;
+                const errors = {};
+                let hasErrors = false;
+                Object.keys(formGroup.controls).forEach((field) => {
+                    const control = formGroup.get(field);
+                    if (control?.errors) {
+                        errors[field] = control.errors;
+                        hasErrors = true;
+                    }
+                });
+                if (formGroup.errors) {
+                    errors['_group'] = formGroup.errors;
+                    hasErrors = true;
+                }
+                return hasErrors ? errors : null;
+            },
+        };
+        grid[FORM_ARRAY_CONTEXT] = context;
+    }
+    /**
+     * Clears the FormArrayContext from the grid element.
+     */
+    #clearFormContext(grid) {
+        delete grid[FORM_ARRAY_CONTEXT];
+    }
+    // #endregion
+    // #region Event Handlers
+    /**
+     * Updates the row index map when rows change.
+     * This ensures we can find FormGroups by row reference after sorting/filtering.
+     */
+    #updateRowIndexMap() {
+        const grid = this.elementRef.nativeElement;
+        const rows = grid?.rows;
+        if (!rows)
+            return;
+        this.rowIndexMap.clear();
+        rows.forEach((row, index) => {
+            if (this.formGroupCache.has(row)) {
+                this.rowIndexMap.set(row, index);
+            }
+        });
+    }
+    /**
+     * Handles cell-commit events by updating the FormControl in the FormGroup.
+     */
+    #handleCellCommit(detail) {
+        const { rowIndex, field, value, rowId } = detail;
+        const formGroup = this.#getRowFormGroup(rowIndex);
+        if (formGroup) {
+            const control = formGroup.get(field);
+            if (control) {
+                control.setValue(value);
+                control.markAsDirty();
+                control.markAsTouched();
+                // Sync Angular validation state to grid's visual invalid styling
+                if (this.syncValidation() && rowId) {
+                    this.#syncControlValidationToGrid(rowId, field, control);
+                }
+                // Emit change event
+                const grid = this.elementRef.nativeElement;
+                const row = grid?.rows?.[rowIndex];
+                if (row) {
+                    this.rowFormChange.emit({
+                        rowIndex,
+                        rowId,
+                        row,
+                        formGroup,
+                        values: formGroup.value,
+                        valid: formGroup.valid,
+                        dirty: formGroup.dirty,
+                    });
+                }
+            }
+        }
+    }
+    /**
+     * Handles row-commit events.
+     * - Prevents commit if FormGroup is invalid (when syncValidation is true)
+     * - Syncs FormGroup values back to the row
+     * - Cleans up FormGroup if keepFormGroups is false
+     */
+    #handleRowCommit(event, detail) {
+        const { rowIndex, rowId } = detail;
+        const grid = this.elementRef.nativeElement;
+        const rows = grid?.rows;
+        if (!rows || rowIndex < 0 || rowIndex >= rows.length)
+            return;
+        const row = rows[rowIndex];
+        const formGroup = this.formGroupCache.get(row);
+        if (!formGroup)
+            return;
+        // Prevent commit if invalid (when syncValidation is enabled)
+        if (this.syncValidation() && formGroup.invalid) {
+            // Mark all controls as touched to show validation errors
+            formGroup.markAllAsTouched();
+            event.preventDefault();
+            return;
+        }
+        // Sync FormGroup values back to the row object
+        if (formGroup.dirty) {
+            const formValue = formGroup.value;
+            Object.keys(formValue).forEach((field) => {
+                if (field in row) {
+                    row[field] = formValue[field];
+                }
+            });
+        }
+        // Clean up FormGroup if not keeping them
+        if (!this.keepFormGroups()) {
+            this.formGroupCache.delete(row);
+            this.rowIndexMap.delete(row);
+            // Clear any validation state in the grid
+            if (rowId) {
+                const editingPlugin = grid.getPluginByName?.('editing');
+                editingPlugin?.clearRowInvalid(rowId);
+            }
+        }
+    }
+    // #endregion
+    // #region Validation Sync
+    /**
+     * Syncs a FormControl's validation state to the grid's visual invalid styling.
+     */
+    #syncControlValidationToGrid(rowId, field, control) {
+        const grid = this.elementRef.nativeElement;
+        if (!grid)
+            return;
+        const editingPlugin = grid.getPluginByName?.('editing');
+        if (!editingPlugin)
+            return;
+        if (control.invalid) {
+            const errorMessage = this.#getFirstErrorMessage(control);
+            editingPlugin.setInvalid(rowId, field, errorMessage);
+        }
+        else {
+            editingPlugin.clearInvalid(rowId, field);
+        }
+    }
+    /**
+     * Gets a human-readable error message from the first validation error.
+     */
+    #getFirstErrorMessage(control) {
+        const errors = control.errors;
+        if (!errors)
+            return '';
+        const firstKey = Object.keys(errors)[0];
+        const error = errors[firstKey];
+        switch (firstKey) {
+            case 'required':
+                return 'This field is required';
+            case 'minlength':
+                return `Minimum length is ${error.requiredLength}`;
+            case 'maxlength':
+                return `Maximum length is ${error.requiredLength}`;
+            case 'min':
+                return `Minimum value is ${error.min}`;
+            case 'max':
+                return `Maximum value is ${error.max}`;
+            case 'email':
+                return 'Invalid email address';
+            case 'pattern':
+                return 'Invalid format';
+            default:
+                return typeof error === 'string' ? error : (error?.message ?? `Validation error: ${firstKey}`);
+        }
+    }
+    // #endregion
+    // #region Public API
+    /**
+     * 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) {
+        return this.#getRowFormGroup(rowIndex);
+    }
+    /**
+     * Gets all cached FormGroups.
+     * Useful for bulk validation or inspection.
+     *
+     * @returns Map of row objects to their FormGroups
+     */
+    getAllFormGroups() {
+        return this.formGroupCache;
+    }
+    /**
+     * Clears all cached FormGroups.
+     * Useful when the underlying data changes significantly.
+     */
+    clearAllFormGroups() {
+        this.formGroupCache.clear();
+        this.rowIndexMap.clear();
+    }
+    /**
+     * Validates all currently cached FormGroups.
+     *
+     * @returns true if all FormGroups are valid, false otherwise
+     */
+    validateAll() {
+        for (const formGroup of this.formGroupCache.values()) {
+            if (formGroup.invalid) {
+                formGroup.markAllAsTouched();
+                return false;
+            }
+        }
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridLazyForm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: GridLazyForm, isStandalone: true, selector: "tbw-grid[lazyForm]", inputs: { lazyForm: { classPropertyName: "lazyForm", publicName: "lazyForm", isSignal: true, isRequired: true, transformFunction: null }, syncValidation: { classPropertyName: "syncValidation", publicName: "syncValidation", isSignal: true, isRequired: false, transformFunction: null }, keepFormGroups: { classPropertyName: "keepFormGroups", publicName: "keepFormGroups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowFormChange: "rowFormChange" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridLazyForm, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tbw-grid[lazyForm]',
+                }]
+        }], propDecorators: { lazyForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyForm", required: true }] }], syncValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncValidation", required: false }] }], keepFormGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepFormGroups", required: false }] }], rowFormChange: [{ type: i0.Output, args: ["rowFormChange"] }] } });
+
 /**
  * Directive that automatically registers the Angular adapter with tbw-grid elements.
  *
@@ -2407,7 +3042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * ```
  *
  * 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
@@ -2420,11 +3055,18 @@ class Grid {
     iconRegistry = inject(GridIconRegistry, { optional: true });
     adapter = null;
     constructor() {
-        // Effect to process angularConfig and apply to grid
+        // Effect to process gridConfig and apply to grid
         // This merges feature input plugins with the user's config plugins
         effect(() => {
-            const angularCfg = this.angularConfig();
+            const deprecatedAngularConfig = this.angularConfig();
             const userGridConfig = this.gridConfig();
+            // Emit deprecation warning if angularConfig is used
+            if (deprecatedAngularConfig && !userGridConfig) {
+                console.warn('[tbw-grid] The [angularConfig] input is deprecated. Use [gridConfig] instead. ' +
+                    'The gridConfig input now accepts GridConfig directly.');
+            }
+            // Use gridConfig preferentially, fall back to deprecated angularConfig
+            const angularCfg = userGridConfig ?? deprecatedAngularConfig;
             if (!this.adapter)
                 return;
             // Create plugins from feature inputs
@@ -2448,25 +3090,24 @@ class Grid {
             // Registry icons are base, config.icons override them
             const registryIcons = this.iconRegistry?.getAll();
             if (registryIcons && Object.keys(registryIcons).length > 0) {
-                const existingIcons = angularCfg?.icons || userGridConfig?.icons || {};
+                const existingIcons = angularCfg?.icons || {};
                 coreConfigOverrides['icons'] = { ...registryIcons, ...existingIcons };
             }
-            // If angularConfig is provided, process it (converts component classes to renderer functions)
+            // If gridConfig is provided, process it (converts component classes to renderer functions)
             const processedConfig = angularCfg ? this.adapter.processGridConfig(angularCfg) : null;
-            // IMPORTANT: If user is NOT using angularConfig input, and there are no feature plugins
+            // IMPORTANT: If user is NOT using gridConfig input, and there are no feature plugins
             // or config overrides to merge, do NOT overwrite grid.gridConfig.
             // This allows [gridConfig]="myConfig" binding to work correctly without the directive
             // creating a new object that strips properties like typeDefaults.
             const hasFeaturePlugins = featurePlugins.length > 0;
             const hasConfigOverrides = Object.keys(coreConfigOverrides).length > 0;
-            // Use the gridConfig input signal (preferred) or fallback to what's on the grid element
             // The input signal gives us reactive tracking of the user's config
-            const existingConfig = userGridConfig || {};
-            if (!processedConfig && !hasFeaturePlugins && !hasConfigOverrides && !userGridConfig) {
+            const existingConfig = angularCfg || {};
+            if (!processedConfig && !hasFeaturePlugins && !hasConfigOverrides && !angularCfg) {
                 // Nothing to merge and no config input - let the user's DOM binding work directly
                 return;
             }
-            // Merge: existing config (from [gridConfig] input) < processed angularConfig < feature plugins
+            // Merge: processed config < feature plugins
             const configPlugins = processedConfig?.plugins || existingConfig.plugins || [];
             const mergedPlugins = [...featurePlugins, ...configPlugins];
             // Build the final config, preserving ALL existing properties (including typeDefaults)
@@ -2595,65 +3236,55 @@ class Grid {
      */
     loading = input(...(ngDevMode ? [undefined, { debugName: "loading" }] : []));
     /**
-     * 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' }
-     * ];
+     *
+     * // Config with component classes
+     * config: GridConfig<Employee> = {
+     *   columns: [
+     *     { field: 'name', header: 'Name' },
+     *     { field: 'bonus', header: 'Bonus', editable: true, editor: BonusEditorComponent }
+     *   ]
+     * };
      * ```
      *
      * ```html
-     * <tbw-grid [gridConfig]="config" [columns]="columns" />
+     * <tbw-grid [gridConfig]="config" [rows]="employees"></tbw-grid>
      * ```
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     gridConfig = input(...(ngDevMode ? [undefined, { debugName: "gridConfig" }] : []));
     /**
-     * Angular-specific grid configuration that supports component classes for renderers/editors.
+     * @deprecated Use `gridConfig` instead. This input will be removed in a future version.
      *
-     * Use this input when you want to specify Angular component classes directly in column configs.
-     * Components must implement the appropriate interfaces:
-     * - Renderers: `AngularCellRenderer<TRow, TValue>` - requires `value()` and `row()` signal inputs
-     * - Editors: `AngularCellEditor<TRow, TValue>` - adds `commit` and `cancel` outputs
-     *
-     * The directive automatically processes component classes and converts them to grid-compatible
-     * renderer/editor functions before applying to the grid.
-     *
-     * @example
-     * ```typescript
-     * // Component that implements AngularCellEditor
-     * @Component({...})
-     * export class BonusEditorComponent implements AngularCellEditor<Employee, number> {
-     *   value = input.required<number>();
-     *   row = input.required<Employee>();
-     *   commit = output<number>();
-     *   cancel = output<void>();
-     * }
-     *
-     * // In your grid config
-     * config: AngularGridConfig<Employee> = {
-     *   columns: [
-     *     { field: 'name', header: 'Name' },
-     *     { field: 'bonus', header: 'Bonus', editable: true, editor: BonusEditorComponent }
-     *   ]
-     * };
-     * ```
+     * The `angularConfig` name was inconsistent with React and Vue adapters, which both use `gridConfig`.
+     * The `gridConfig` input now accepts `GridConfig` directly.
      *
      * ```html
-     * <tbw-grid [angularConfig]="config" [rows]="employees"></tbw-grid>
+     * <!-- Before -->
+     * <tbw-grid [angularConfig]="config" />
+     *
+     * <!-- After -->
+     * <tbw-grid [gridConfig]="config" />
      * ```
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2697,6 +3328,9 @@ class Grid {
      * <tbw-grid [editing]="'click'" />
      * <tbw-grid [editing]="'dblclick'" />
      * <tbw-grid [editing]="'manual'" />
+     *
+     * <!-- Full config with callbacks -->
+     * <tbw-grid [editing]="{ editOn: 'dblclick', onBeforeEditClose: myCallback }" />
      * ```
      */
     editing = input(...(ngDevMode ? [undefined, { debugName: "editing" }] : []));
@@ -2966,7 +3600,7 @@ class Grid {
      * <tbw-grid [export]="{ filename: 'data.csv' }" />
      * ```
      */
-    exportFeature = input(...(ngDevMode ? [undefined, { debugName: "exportFeature" }] : []));
+    exportFeature = input(undefined, { ...(ngDevMode ? { debugName: "exportFeature" } : {}), alias: 'export' });
     /**
      * Enable print functionality.
      *
@@ -3284,7 +3918,7 @@ class Grid {
     eventListeners = new Map();
     ngOnInit() {
         // Create and register the adapter
-        this.adapter = new AngularGridAdapter(this.injector, this.appRef, this.viewContainerRef);
+        this.adapter = new GridAdapter(this.injector, this.appRef, this.viewContainerRef);
         DataGridElement.registerAdapter(this.adapter);
         const grid = this.elementRef.nativeElement;
         // Wire up all event listeners based on eventOutputMap
@@ -3485,12 +4119,12 @@ class Grid {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: Grid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: Grid, isStandalone: true, selector: "tbw-grid", inputs: { customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, angularConfig: { classPropertyName: "angularConfig", publicName: "angularConfig", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, clipboard: { classPropertyName: "clipboard", publicName: "clipboard", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, filtering: { classPropertyName: "filtering", publicName: "filtering", isSignal: true, isRequired: false, transformFunction: null }, reorder: { classPropertyName: "reorder", publicName: "reorder", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null }, pinnedColumns: { classPropertyName: "pinnedColumns", publicName: "pinnedColumns", isSignal: true, isRequired: false, transformFunction: null }, groupingColumns: { classPropertyName: "groupingColumns", publicName: "groupingColumns", isSignal: true, isRequired: false, transformFunction: null }, columnVirtualization: { classPropertyName: "columnVirtualization", publicName: "columnVirtualization", isSignal: true, isRequired: false, transformFunction: null }, rowReorder: { classPropertyName: "rowReorder", publicName: "rowReorder", isSignal: true, isRequired: false, transformFunction: null }, groupingRows: { classPropertyName: "groupingRows", publicName: "groupingRows", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, undoRedo: { classPropertyName: "undoRedo", publicName: "undoRedo", isSignal: true, isRequired: false, transformFunction: null }, exportFeature: { classPropertyName: "exportFeature", publicName: "exportFeature", isSignal: true, isRequired: false, transformFunction: null }, print: { classPropertyName: "print", publicName: "print", isSignal: true, isRequired: false, transformFunction: null }, pivot: { classPropertyName: "pivot", publicName: "pivot", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { 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" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: Grid, isStandalone: true, selector: "tbw-grid", inputs: { customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, angularConfig: { classPropertyName: "angularConfig", publicName: "angularConfig", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, clipboard: { classPropertyName: "clipboard", publicName: "clipboard", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, filtering: { classPropertyName: "filtering", publicName: "filtering", isSignal: true, isRequired: false, transformFunction: null }, reorder: { classPropertyName: "reorder", publicName: "reorder", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null }, pinnedColumns: { classPropertyName: "pinnedColumns", publicName: "pinnedColumns", isSignal: true, isRequired: false, transformFunction: null }, groupingColumns: { classPropertyName: "groupingColumns", publicName: "groupingColumns", isSignal: true, isRequired: false, transformFunction: null }, columnVirtualization: { classPropertyName: "columnVirtualization", publicName: "columnVirtualization", isSignal: true, isRequired: false, transformFunction: null }, rowReorder: { classPropertyName: "rowReorder", publicName: "rowReorder", isSignal: true, isRequired: false, transformFunction: null }, groupingRows: { classPropertyName: "groupingRows", publicName: "groupingRows", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, undoRedo: { classPropertyName: "undoRedo", publicName: "undoRedo", isSignal: true, isRequired: false, transformFunction: null }, exportFeature: { classPropertyName: "exportFeature", publicName: "export", isSignal: true, isRequired: false, transformFunction: null }, print: { classPropertyName: "print", publicName: "print", isSignal: true, isRequired: false, transformFunction: null }, pivot: { classPropertyName: "pivot", publicName: "pivot", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { 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" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: Grid, decorators: [{
             type: Directive,
             args: [{ selector: 'tbw-grid' }]
-        }], ctorParameters: () => [], propDecorators: { customStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyles", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], angularConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "angularConfig", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], clipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboard", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }], filtering: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtering", required: false }] }], reorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorder", required: false }] }], visibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibility", required: false }] }], pinnedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedColumns", required: false }] }], groupingColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingColumns", required: false }] }], columnVirtualization: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVirtualization", required: false }] }], rowReorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowReorder", required: false }] }], groupingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingRows", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], masterDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetail", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], undoRedo: [{ type: i0.Input, args: [{ isSignal: true, alias: "undoRedo", required: false }] }], exportFeature: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFeature", required: false }] }], print: [{ type: i0.Input, args: [{ isSignal: true, alias: "print", required: false }] }], pivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "pivot", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellActivate: [{ type: i0.Output, args: ["cellActivate"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], rowCommit: [{ type: i0.Output, args: ["rowCommit"] }], changedRowsReset: [{ type: i0.Output, args: ["changedRowsReset"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnMove: [{ type: i0.Output, args: ["columnMove"] }], columnVisibility: [{ type: i0.Output, args: ["columnVisibility"] }], columnStateChange: [{ type: i0.Output, args: ["columnStateChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowMove: [{ type: i0.Output, args: ["rowMove"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], treeExpand: [{ type: i0.Output, args: ["treeExpand"] }], detailExpand: [{ type: i0.Output, args: ["detailExpand"] }], responsiveChange: [{ type: i0.Output, args: ["responsiveChange"] }], copy: [{ type: i0.Output, args: ["copy"] }], paste: [{ type: i0.Output, args: ["paste"] }], undoRedoAction: [{ type: i0.Output, args: ["undoRedoAction"] }], exportComplete: [{ type: i0.Output, args: ["exportComplete"] }], printStart: [{ type: i0.Output, args: ["printStart"] }], printComplete: [{ type: i0.Output, args: ["printComplete"] }] } });
+        }], ctorParameters: () => [], propDecorators: { customStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyles", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], angularConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "angularConfig", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], clipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboard", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }], filtering: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtering", required: false }] }], reorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorder", required: false }] }], visibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibility", required: false }] }], pinnedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedColumns", required: false }] }], groupingColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingColumns", required: false }] }], columnVirtualization: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVirtualization", required: false }] }], rowReorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowReorder", required: false }] }], groupingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingRows", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], masterDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetail", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], undoRedo: [{ type: i0.Input, args: [{ isSignal: true, alias: "undoRedo", required: false }] }], exportFeature: [{ type: i0.Input, args: [{ isSignal: true, alias: "export", required: false }] }], print: [{ type: i0.Input, args: [{ isSignal: true, alias: "print", required: false }] }], pivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "pivot", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellActivate: [{ type: i0.Output, args: ["cellActivate"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], rowCommit: [{ type: i0.Output, args: ["rowCommit"] }], changedRowsReset: [{ type: i0.Output, args: ["changedRowsReset"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnMove: [{ type: i0.Output, args: ["columnMove"] }], columnVisibility: [{ type: i0.Output, args: ["columnVisibility"] }], columnStateChange: [{ type: i0.Output, args: ["columnStateChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowMove: [{ type: i0.Output, args: ["rowMove"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], treeExpand: [{ type: i0.Output, args: ["treeExpand"] }], detailExpand: [{ type: i0.Output, args: ["detailExpand"] }], responsiveChange: [{ type: i0.Output, args: ["responsiveChange"] }], copy: [{ type: i0.Output, args: ["copy"] }], paste: [{ type: i0.Output, args: ["paste"] }], undoRedoAction: [{ type: i0.Output, args: ["undoRedoAction"] }], exportComplete: [{ type: i0.Output, args: ["exportComplete"] }], printStart: [{ type: i0.Output, args: ["printStart"] }], printComplete: [{ type: i0.Output, args: ["printComplete"] }] } });
 
 /**
  * @packageDocumentation
@@ -3498,10 +4132,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  *
  * Provides directives for seamless Angular integration with the grid component.
  */
+// Primary export - use this
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 { 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 };
 //# sourceMappingURL=toolbox-web-grid-angular.mjs.map