@toolbox-web/grid-angular 0.4.0 → 0.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"angular-grid-adapter.d.ts","sourceRoot":"","sources":["../../../../libs/grid-angular/src/lib/angular-grid-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EAId,mBAAmB,EAInB,gBAAgB,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAEV,YAAY,EAEZ,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,UAAU,EACV,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAoB,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAkC7G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,qBAAa,kBAAmB,YAAW,gBAAgB;IAMvD,OAAO,CAAC,QAAQ;IAChB,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,gBAAgB;IAP1B,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,YAAY,CAAiC;gBAG3C,QAAQ,EAAE,mBAAmB,EAC7B,MAAM,EAAE,cAAc,EACtB,gBAAgB,EAAE,gBAAgB;IAa5C;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,iBAAiB,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC;IAapF;;;;;;OAMG;IACH,aAAa,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,EAAE,mBAAmB,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC;IAgBpF;;;OAGG;IACH,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAIxC;;;;;;OAMG;IACH,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC;IA+BxG;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC;IA4DpG;;;OAGG;IACH,oBAAoB,CAAC,IAAI,GAAG,OAAO,EAAE,WAAW,EAAE,WAAW,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,WAAW,CAAC,GAAG,SAAS;IA4BxG;;;;;;OAMG;IACH,kBAAkB,CAAC,IAAI,GAAG,OAAO,EAC/B,aAAa,EAAE,OAAO,GACrB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,GAAG,SAAS;IA4BtE;;;;;;OAMG;IACH,4BAA4B,CAAC,IAAI,GAAG,OAAO,EACzC,WAAW,EAAE,WAAW,GACvB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,CAAC,GAAG,SAAS;IA6B7D;;;OAGG;IACH,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,SAAS,EAAE,WAAW,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS;IAsC5G;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,SAAS;IA2B3E;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAgC/B;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IA+C7B;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAczB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAU1B;;;OAGG;IACH,OAAO,IAAI,IAAI;CAMhB"}
+{"version":3,"file":"angular-grid-adapter.d.ts","sourceRoot":"","sources":["../../../../libs/grid-angular/src/lib/angular-grid-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EAId,mBAAmB,EAInB,gBAAgB,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAEV,YAAY,EAEZ,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,UAAU,EACV,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAoB,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAmC7G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,qBAAa,kBAAmB,YAAW,gBAAgB;IAMvD,OAAO,CAAC,QAAQ;IAChB,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,gBAAgB;IAP1B,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,YAAY,CAAiC;gBAG3C,QAAQ,EAAE,mBAAmB,EAC7B,MAAM,EAAE,cAAc,EACtB,gBAAgB,EAAE,gBAAgB;IAa5C;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,iBAAiB,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC;IAapF;;;;;;OAMG;IACH,aAAa,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,EAAE,mBAAmB,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC;IAgBpF;;;OAGG;IACH,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAIxC;;;;;;OAMG;IACH,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC;IA+BxG;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC;IAiFpG;;;OAGG;IACH,oBAAoB,CAAC,IAAI,GAAG,OAAO,EAAE,WAAW,EAAE,WAAW,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,WAAW,CAAC,GAAG,SAAS;IA4BxG;;;;;;OAMG;IACH,kBAAkB,CAAC,IAAI,GAAG,OAAO,EAC/B,aAAa,EAAE,OAAO,GACrB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,GAAG,SAAS;IA4BtE;;;;;;OAMG;IACH,4BAA4B,CAAC,IAAI,GAAG,OAAO,EACzC,WAAW,EAAE,WAAW,GACvB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,CAAC,GAAG,SAAS;IA6B7D;;;OAGG;IACH,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,SAAS,EAAE,WAAW,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS;IAsC5G;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,SAAS;IA2B3E;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAgC/B;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IA+C7B;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAczB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAU1B;;;OAGG;IACH,OAAO,IAAI,IAAI;CAMhB"}

package/lib/base-grid-editor.d.ts

@@ -0,0 +1,145 @@
+import { AbstractControl } from '@angular/forms';
+import { ColumnConfig } from '../../../../dist/libs/grid/index.d.ts';
+/**
+ * Base class for grid cell editors.
+ *
+ * Provides common functionality for Angular cell editors:
+ * - Automatic value resolution from FormControl or value input
+ * - Common inputs (value, row, column, control)
+ * - Common outputs (commit, cancel)
+ * - Validation state helpers
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { BaseGridEditor } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   selector: 'app-my-editor',
+ *   template: \`
+ *     <input
+ *       [value]="currentValue()"
+ *       [class.is-invalid]="isInvalid()"
+ *       (input)="commitValue($event.target.value)"
+ *       (keydown.escape)="cancelEdit()"
+ *     />
+ *     @if (hasErrors()) {
+ *       <div class="error">{{ firstErrorMessage() }}</div>
+ *     }
+ *   \`
+ * })
+ * export class MyEditorComponent extends BaseGridEditor<MyRow, string> {
+ *   // Override to customize error messages
+ *   protected override getErrorMessage(errorKey: string): string {
+ *     if (errorKey === 'required') return 'This field is required';
+ *     if (errorKey === 'minlength') return 'Too short';
+ *     return super.getErrorMessage(errorKey);
+ *   }
+ * }
+ * ```
+ *
+ * ## Template Syntax
+ *
+ * When using the base class, you only need to pass the control:
+ *
+ * ```html
+ * <tbw-grid-column field="name">
+ *   <app-my-editor *tbwEditor="let _; control as control" [control]="control" />
+ * </tbw-grid-column>
+ * ```
+ *
+ * Or without FormArray binding (fallback to value):
+ *
+ * ```html
+ * <tbw-grid-column field="name">
+ *   <app-my-editor *tbwEditor="let value" [value]="value" />
+ * </tbw-grid-column>
+ * ```
+ *
+ * @typeParam TRow - The row data type
+ * @typeParam TValue - The cell value type
+ */
+export declare abstract class BaseGridEditor<TRow = unknown, TValue = unknown> {
+    private readonly elementRef;
+    /**
+     * The cell value. Used when FormControl is not available.
+     * When a FormControl is provided, value is derived from control.value instead.
+     */
+    readonly value: import('@angular/core').InputSignal<TValue | undefined>;
+    /**
+     * The full row data object.
+     */
+    readonly row: import('@angular/core').InputSignal<TRow | undefined>;
+    /**
+     * The column configuration.
+     */
+    readonly column: import('@angular/core').InputSignal<ColumnConfig<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.
+     */
+    readonly control: import('@angular/core').InputSignal<AbstractControl<any, any, any> | undefined>;
+    /**
+     * Emits when the user commits a new value.
+     */
+    readonly commit: import('@angular/core').OutputEmitterRef<TValue>;
+    /**
+     * Emits when the user cancels editing.
+     */
+    readonly cancel: import('@angular/core').OutputEmitterRef<void>;
+    /**
+     * The current value, derived from FormControl if available, otherwise from value input.
+     * This is the recommended way to get the current value in your editor template.
+     */
+    readonly currentValue: import('@angular/core').Signal<TValue | undefined>;
+    /**
+     * Whether the control is invalid (has validation errors).
+     * Returns false if no FormControl is available.
+     */
+    readonly isInvalid: import('@angular/core').Signal<boolean>;
+    /**
+     * Whether the control is dirty (has been modified).
+     * Returns false if no FormControl is available.
+     */
+    readonly isDirty: import('@angular/core').Signal<boolean>;
+    /**
+     * Whether the control has been touched.
+     * Returns false if no FormControl is available.
+     */
+    readonly isTouched: import('@angular/core').Signal<boolean>;
+    /**
+     * Whether the control has any validation errors.
+     */
+    readonly hasErrors: import('@angular/core').Signal<boolean>;
+    /**
+     * The first error message from the control's validation errors.
+     * Returns an empty string if no errors.
+     */
+    readonly firstErrorMessage: import('@angular/core').Signal<string>;
+    /**
+     * All error messages from the control's validation errors.
+     */
+    readonly allErrorMessages: import('@angular/core').Signal<string[]>;
+    /**
+     * Commit a new value. Emits the commit output AND dispatches a DOM event.
+     * The DOM event enables the grid's auto-wiring to catch the commit.
+     * Call this when the user confirms their edit.
+     */
+    commitValue(newValue: TValue): void;
+    /**
+     * Cancel editing. Emits the cancel output AND dispatches a DOM event.
+     * Call this when the user cancels (e.g., presses Escape).
+     */
+    cancelEdit(): void;
+    /**
+     * Get a human-readable error message for a validation error.
+     * Override this method to customize error messages for your editor.
+     *
+     * @param errorKey - The validation error key (e.g., 'required', 'minlength')
+     * @param errorValue - The error value (e.g., { requiredLength: 5, actualLength: 3 })
+     * @returns A human-readable error message
+     */
+    protected getErrorMessage(errorKey: string, errorValue?: unknown): string;
+}
+//# sourceMappingURL=base-grid-editor.d.ts.map

package/lib/base-grid-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-grid-editor.d.ts","sourceRoot":"","sources":["../../../../libs/grid-angular/src/lib/base-grid-editor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,8BACsB,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO;IACnE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IAMjD;;;OAGG;IACH,QAAQ,CAAC,KAAK,0DAAmB;IAEjC;;OAEG;IACH,QAAQ,CAAC,GAAG,wDAAiB;IAE7B;;OAEG;IACH,QAAQ,CAAC,MAAM,sEAA+B;IAE9C;;;OAGG;IACH,QAAQ,CAAC,OAAO,kFAA4B;IAM5C;;OAEG;IACH,QAAQ,CAAC,MAAM,mDAAoB;IAEnC;;OAEG;IACH,QAAQ,CAAC,MAAM,iDAAkB;IAMjC;;;OAGG;IACH,QAAQ,CAAC,YAAY,qDAMlB;IAEH;;;OAGG;IACH,QAAQ,CAAC,SAAS,0CAEf;IAEH;;;OAGG;IACH,QAAQ,CAAC,OAAO,0CAEb;IAEH;;;OAGG;IACH,QAAQ,CAAC,SAAS,0CAEf;IAEH;;OAEG;IACH,QAAQ,CAAC,SAAS,0CAGf;IAEH;;;OAGG;IACH,QAAQ,CAAC,iBAAiB,yCAMvB;IAEH;;OAEG;IACH,QAAQ,CAAC,gBAAgB,2CAKtB;IAMH;;;;OAIG;IACH,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IASnC;;;OAGG;IACH,UAAU,IAAI,IAAI;IAQlB;;;;;;;OAOG;IACH,SAAS,CAAC,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM;CA4B1E"}

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

@@ -1,4 +1,5 @@
 import { EventEmitter, TemplateRef } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
 /**
  * Context object passed to the cell editor template.
  * Contains the cell value, row data, column configuration, and commit/cancel functions.
@@ -22,6 +23,22 @@ export interface GridEditorContext<TValue = unknown, TRow = unknown> {
      * Use with Angular event binding: `(cancel)="onCancel()"`
      */
     onCancel: () => void;
+    /**
+     * The FormControl for this cell, if the grid is bound to a FormArray with FormGroups.
+     *
+     * This allows custom editors to bind directly to the control for validation display:
+     * ```html
+     * <input *tbwEditor="let value; control as ctrl"
+     *        [formControl]="ctrl"
+     *        [class.is-invalid]="ctrl?.invalid && ctrl?.touched" />
+     * ```
+     *
+     * Returns `undefined` if:
+     * - The grid is not bound to a FormArray
+     * - The FormArray doesn't contain FormGroups
+     * - The field doesn't exist in the FormGroup
+     */
+    control?: AbstractControl;
     /**
      * @deprecated Use `onCommit` callback function instead. Will be removed in v2.0.
      * EventEmitter for commit - requires `.emit()` call.

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

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

package/lib/directives/grid-form-array.directive.d.ts

@@ -0,0 +1,141 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { AbstractControl, FormArray, FormGroup } from '@angular/forms';
+/**
+ * Context provided to the grid containing form-related information.
+ * This can be accessed by other directives to get form controls.
+ */
+export interface FormArrayContext {
+    /** Get the row data at a specific index */
+    getRow<T = unknown>(rowIndex: number): T | null;
+    /** Update a field value at a specific row */
+    updateField(rowIndex: number, field: string, value: unknown): void;
+    /** Get the current form value (all rows) */
+    getValue<T = unknown>(): T[];
+    /**
+     * Get the FormControl for a specific cell.
+     * Only available when using FormArray with FormGroup rows.
+     *
+     * @param rowIndex - The row index
+     * @param field - The field name
+     * @returns The AbstractControl for the cell, or undefined if not available
+     */
+    getControl(rowIndex: number, field: string): AbstractControl | undefined;
+    /**
+     * Whether the grid is backed by a FormArray of FormGroups.
+     * When true, `getControl()` will return cell-level controls.
+     */
+    hasFormGroups: boolean;
+    /**
+     * Get the FormGroup for a specific row.
+     * Only available when using FormArray with FormGroup rows.
+     *
+     * @param rowIndex - The row index
+     * @returns The FormGroup for the row, or undefined if not available
+     */
+    getRowFormGroup(rowIndex: number): FormGroup | undefined;
+    /**
+     * Check if a row is valid (all controls in the FormGroup are valid).
+     * Returns true if not using FormArray or if the row doesn't exist.
+     *
+     * @param rowIndex - The row index
+     * @returns true if the row is valid, false if any control is invalid
+     */
+    isRowValid(rowIndex: number): boolean;
+    /**
+     * Check if a row has been touched (any control in the FormGroup is touched).
+     * Returns false if not using FormArray or if the row doesn't exist.
+     *
+     * @param rowIndex - The row index
+     * @returns true if any control in the row is touched
+     */
+    isRowTouched(rowIndex: number): boolean;
+    /**
+     * Check if a row is dirty (any control in the FormGroup is dirty).
+     * Returns false if not using FormArray or if the row doesn't exist.
+     *
+     * @param rowIndex - The row index
+     * @returns true if any control in the row is dirty
+     */
+    isRowDirty(rowIndex: number): boolean;
+    /**
+     * Get validation errors for a specific row.
+     * Aggregates errors from all controls in the FormGroup.
+     *
+     * @param rowIndex - The row index
+     * @returns Object with field names as keys and their errors, or null if no errors
+     */
+    getRowErrors(rowIndex: number): Record<string, unknown> | null;
+}
+/**
+ * Gets the FormArrayContext from a grid element, if present.
+ * @internal
+ */
+export declare function getFormArrayContext(gridElement: HTMLElement): FormArrayContext | undefined;
+/**
+ * Directive that binds a FormArray directly to the grid.
+ *
+ * This is the recommended way to integrate tbw-grid with Angular Reactive Forms.
+ * Use a FormArray of FormGroups for row-level validation and cell-level control access.
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component, inject } from '@angular/core';
+ * import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+ * import { Grid, GridFormArray } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [Grid, GridFormArray, ReactiveFormsModule],
+ *   template: \`
+ *     <form [formGroup]="form">
+ *       <tbw-grid [formArray]="form.controls.rows" [columns]="columns" />
+ *     </form>
+ *   \`
+ * })
+ * export class MyComponent {
+ *   private fb = inject(FormBuilder);
+ *
+ *   form = this.fb.group({
+ *     rows: this.fb.array([
+ *       this.fb.group({ name: 'Alice', age: 30 }),
+ *       this.fb.group({ name: 'Bob', age: 25 }),
+ *     ])
+ *   });
+ *
+ *   columns = [
+ *     { field: 'name', header: 'Name', editable: true },
+ *     { field: 'age', header: 'Age', editable: true }
+ *   ];
+ * }
+ * ```
+ *
+ * ## How It Works
+ *
+ * - **FormArray → Grid**: The grid displays the FormArray's value as rows
+ * - **Grid → FormArray**: When a cell is edited, the corresponding FormControl is updated
+ * - FormArrayContext is available for accessing cell-level controls
+ *
+ * ## Features
+ *
+ * - Works naturally with FormArray inside a FormGroup
+ * - Provides cell-level FormControl access for validation
+ * - Supports row-level validation state aggregation
+ * - Automatically syncs FormArray changes to the grid
+ */
+export declare class GridFormArray implements OnInit, OnDestroy {
+    #private;
+    private elementRef;
+    private cellCommitListener;
+    private touchListener;
+    /**
+     * The FormArray to bind to the grid.
+     */
+    readonly formArray: import('@angular/core').InputSignal<FormArray<any>>;
+    /**
+     * Effect that syncs the FormArray value to the grid rows.
+     */
+    private syncFormArrayToGrid;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+}
+//# sourceMappingURL=grid-form-array.directive.d.ts.map

package/lib/directives/grid-form-array.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-form-array.directive.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/grid-form-array.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgD,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAChG,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGvE;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,MAAM,CAAC,CAAC,GAAG,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC;IAChD,6CAA6C;IAC7C,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACnE,4CAA4C;IAC5C,QAAQ,CAAC,CAAC,GAAG,OAAO,KAAK,CAAC,EAAE,CAAC;IAC7B;;;;;;;OAOG;IACH,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS,CAAC;IACzE;;;OAGG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IACzD;;;;;;OAMG;IACH,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IACtC;;;;;;OAMG;IACH,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IACxC;;;;;;OAMG;IACH,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IACtC;;;;;;OAMG;IACH,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;CAChE;AAKD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,WAAW,GAAG,gBAAgB,GAAG,SAAS,CAE1F;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBAGa,aAAc,YAAW,MAAM,EAAE,SAAS;;IACrD,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,kBAAkB,CAAqC;IAC/D,OAAO,CAAC,aAAa,CAAqC;IAE1D;;OAEG;IACH,QAAQ,CAAC,SAAS,sDAA+B;IAEjD;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAOxB;IAEH,QAAQ,IAAI,IAAI;IA0BhB,WAAW,IAAI,IAAI;CAgIpB"}

package/lib/directives/index.d.ts

@@ -1,6 +1,8 @@
 export { GridColumnEditor } from './grid-column-editor.directive';
 export { GridColumnView } from './grid-column-view.directive';
 export { GridDetailView } from './grid-detail-view.directive';
+export { getFormArrayContext, GridFormArray } from './grid-form-array.directive';
+export type { FormArrayContext } from './grid-form-array.directive';
 export { GridResponsiveCard } from './grid-responsive-card.directive';
 export { GridToolPanel } from './grid-tool-panel.directive';
 export { Grid } from './grid.directive';

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

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

package/lib/directives/structural-directives.d.ts

@@ -1,4 +1,5 @@
 import { OnDestroy, TemplateRef } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
 /**
  * Context type for structural directives with `any` defaults.
  * This provides better ergonomics in templates without requiring explicit type annotations.
@@ -38,6 +39,15 @@ export interface StructuralEditorContext<TValue = any, TRow = any> {
      * Callback function to cancel editing.
      */
     onCancel: () => void;
+    /**
+     * The FormControl for this cell, if the grid is bound to a FormArray with FormGroups.
+     *
+     * Returns `undefined` if:
+     * - The grid is not bound to a FormArray
+     * - The FormArray doesn't contain FormGroups
+     * - The field doesn't exist in the FormGroup
+     */
+    control?: AbstractControl;
 }
 /**
  * Gets the view template registered by the structural directive for a given column element.

package/lib/directives/structural-directives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"structural-directives.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/structural-directives.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyC,SAAS,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI9F;;;;;GAKG;AAEH,MAAM,WAAW,qBAAqB,CAAC,MAAM,GAAG,GAAG,EAAE,IAAI,GAAG,GAAG;IAC7D,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,GAAG,EAAE,IAAI,CAAC;IACV,+BAA+B;IAE/B,MAAM,EAAE,GAAG,CAAC;CACb;AAED;;;;;GAKG;AAEH,MAAM,WAAW,uBAAuB,CAAC,MAAM,GAAG,GAAG,EAAE,IAAI,GAAG,GAAG;IAC/D,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,GAAG,EAAE,IAAI,CAAC;IACV,+BAA+B;IAE/B,MAAM,EAAE,GAAG,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,aAAa,EAAE,WAAW,GAAG,WAAW,CAAC,qBAAqB,CAAC,GAAG,SAAS,CAWpH;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,aAAa,EAAE,WAAW,GACzB,WAAW,CAAC,uBAAuB,CAAC,GAAG,SAAS,CAWlD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBACa,WAAY,YAAW,SAAS;IAC3C,OAAO,CAAC,QAAQ,CAA8C;IAC9D,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,aAAa,CAA4B;;IAWjD,OAAO,CAAC,gBAAgB;IAcxB,WAAW,IAAI,IAAI;IAMnB;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,qBAAqB;CAG5F;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,qBACa,SAAU,YAAW,SAAS;IACzC,OAAO,CAAC,QAAQ,CAAgD;IAChE,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,aAAa,CAA4B;;IAQjD,OAAO,CAAC,gBAAgB;IAaxB,WAAW,IAAI,IAAI;IAMnB;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,uBAAuB;CAG5F"}
+{"version":3,"file":"structural-directives.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/structural-directives.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyC,SAAS,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD;;;;;GAKG;AAEH,MAAM,WAAW,qBAAqB,CAAC,MAAM,GAAG,GAAG,EAAE,IAAI,GAAG,GAAG;IAC7D,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,GAAG,EAAE,IAAI,CAAC;IACV,+BAA+B;IAE/B,MAAM,EAAE,GAAG,CAAC;CACb;AAED;;;;;GAKG;AAEH,MAAM,WAAW,uBAAuB,CAAC,MAAM,GAAG,GAAG,EAAE,IAAI,GAAG,GAAG;IAC/D,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,GAAG,EAAE,IAAI,CAAC;IACV,+BAA+B;IAE/B,MAAM,EAAE,GAAG,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAMD;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,aAAa,EAAE,WAAW,GAAG,WAAW,CAAC,qBAAqB,CAAC,GAAG,SAAS,CAWpH;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,aAAa,EAAE,WAAW,GACzB,WAAW,CAAC,uBAAuB,CAAC,GAAG,SAAS,CAWlD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBACa,WAAY,YAAW,SAAS;IAC3C,OAAO,CAAC,QAAQ,CAA8C;IAC9D,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,aAAa,CAA4B;;IAWjD,OAAO,CAAC,gBAAgB;IAcxB,WAAW,IAAI,IAAI;IAMnB;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,qBAAqB;CAG5F;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,qBACa,SAAU,YAAW,SAAS;IACzC,OAAO,CAAC,QAAQ,CAAgD;IAChE,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,aAAa,CAA4B;;IAQjD,OAAO,CAAC,gBAAgB;IAaxB,WAAW,IAAI,IAAI;IAMnB;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,uBAAuB;CAG5F"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolbox-web/grid-angular",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Angular adapter for @toolbox-web/grid data grid component",
   "type": "module",
   "main": "./index.js",
@@ -48,6 +48,6 @@
   },
   "peerDependencies": {
     "@angular/core": ">=17.0.0",
-    "@toolbox-web/grid": ">=0.4.0"
+    "@toolbox-web/grid": ">=1.0.0"
   }
 }