@toolbox-web/grid-angular 0.8.0 → 0.9.0

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

@@ -341,11 +341,23 @@ function getFormArrayContext(gridElement) {
 class GridFormArray {
     elementRef = inject((ElementRef));
     cellCommitListener = null;
+    rowCommitListener = null;
     touchListener = null;
     /**
      * The FormArray to bind to the grid.
      */
     formArray = input.required(...(ngDevMode ? [{ debugName: "formArray" }] : []));
+    /**
+     * 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" }] : []));
     /**
      * Effect that syncs the FormArray value to the grid rows.
      */
@@ -369,6 +381,14 @@ class GridFormArray {
             this.#handleCellCommit(detail);
         };
         grid.addEventListener('cell-commit', this.cellCommitListener);
+        // Intercept row-commit events to prevent if FormGroup is invalid
+        this.rowCommitListener = (e) => {
+            if (!this.syncValidation())
+                return;
+            const detail = e.detail;
+            this.#handleRowCommit(e, detail);
+        };
+        grid.addEventListener('row-commit', this.rowCommitListener);
         // Mark FormArray as touched on first interaction
         this.touchListener = () => {
             this.formArray().markAsTouched();
@@ -387,6 +407,9 @@ class GridFormArray {
         if (this.cellCommitListener) {
             grid.removeEventListener('cell-commit', this.cellCommitListener);
         }
+        if (this.rowCommitListener) {
+            grid.removeEventListener('row-commit', this.rowCommitListener);
+        }
         if (this.touchListener) {
             grid.removeEventListener('click', this.touchListener);
         }
@@ -491,7 +514,7 @@ class GridFormArray {
      * Handles cell-commit events by updating the FormControl in the FormGroup.
      */
     #handleCellCommit(detail) {
-        const { rowIndex, field, value } = detail;
+        const { rowIndex, field, value, rowId } = detail;
         const rowFormGroup = this.#getRowFormGroup(rowIndex);
         if (rowFormGroup) {
             const control = rowFormGroup.get(field);
@@ -499,18 +522,83 @@ class GridFormArray {
                 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);
+                }
             }
         }
     }
+    /**
+     * Handles row-commit events - prevents commit if FormGroup has invalid controls.
+     */
+    #handleRowCommit(event, detail) {
+        const { rowIndex } = detail;
+        const rowFormGroup = this.#getRowFormGroup(rowIndex);
+        if (rowFormGroup && rowFormGroup.invalid) {
+            // Prevent row commit if the FormGroup is invalid
+            event.preventDefault();
+        }
+    }
+    /**
+     * 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;
+        // Get EditingPlugin via getPluginByName
+        const editingPlugin = grid.getPluginByName?.('editing');
+        if (!editingPlugin)
+            return;
+        if (control.invalid) {
+            // Get first error message to display
+            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];
+        // Common Angular validators
+        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:
+                // Custom validators may provide a message property
+                return typeof error === 'string' ? error : (error?.message ?? `Validation error: ${firstKey}`);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridFormArray, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: GridFormArray, isStandalone: true, selector: "tbw-grid[formArray]", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: GridFormArray, isStandalone: true, selector: "tbw-grid[formArray]", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, syncValidation: { classPropertyName: "syncValidation", publicName: "syncValidation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridFormArray, decorators: [{
             type: Directive,
             args: [{
                     selector: 'tbw-grid[formArray]',
                 }]
-        }], propDecorators: { formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", required: true }] }] } });
+        }], propDecorators: { formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", required: true }] }], syncValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncValidation", required: false }] }] } });
 
 /**
  * Registry to store responsive card templates by grid element.