@breadstone/mosaik-elements-angular 0.0.186 → 0.0.188

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 0.0.188 (2025-12-02)
+
+### 🚀 Features
+
+- **directives:** update FormFieldDirective to improve error handling and usage documentation ([7c07bb43fd](https://github.com/RueDeRennes/mosaik/commit/7c07bb43fd))
+
+### 🩹 Fixes
+
+- **directives:** rename applyError to setError for clarity in FormFieldDirective ([747560c657](https://github.com/RueDeRennes/mosaik/commit/747560c657))
+- **directives:** enhance error handling in FormFieldDirective to check for invalid state ([3b098ac14c](https://github.com/RueDeRennes/mosaik/commit/3b098ac14c))
+
+## 0.0.187 (2025-12-02)
+
+This was a version bump only for mosaik-elements-angular to align it with other projects, there were no code changes.
+
 ## 0.0.186 (2025-12-02)
 
 ### 🚀 Features

package/fesm2022/mosaik-elements-angular.mjs

@@ -61727,72 +61727,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                 args: [{ required: true }]
             }] } });
 
-// #region Imports
-// #endregion
+//#region Imports
+//#endregion
 /**
- * Directive for binding Signal Form validation errors to mosaik-form-field elements.
- * Automatically sets the native error property with the first validation error message.
+ * Attribute-Directive that binds a `FieldState` to `FormFieldElement`.
+ * It observes the validation `errors()` and `touched()` state of the field,
+ * and automatically updates the Element’s `error` property — always using the **last** validation error (if any) when the field has been touched.
  *
  * @public
- *
- * @example
+ * @Usage
  * ```html
- * <mosaik-form-field [error]="emailField">
- *   <input type="email" [value]="emailField.value()" />
+ * <mosaik-form-field [fieldState]="form.someField()">
+ *   <mosaik-textbox [field]="form.someField" … />
  * </mosaik-form-field>
  * ```
  */
 class FormFieldDirective {
-    // #region Fields
+    //#region Fields
     _elementRef;
-    // #endregion
-    // #region Ctor
-    /**
-     * Constructs a new instance of the `{@link FormFieldErrorDirective}` class.
-     *
-     * @public
-     */
-    constructor(elementRef = inject(ElementRef)) {
+    //#endregion
+    //#region Ctor
+    constructor(elementRef = inject((ElementRef))) {
         this._elementRef = elementRef;
+        // Observe changes in the fieldState signal. Whenever it changes (value, errors, touched…),
+        // we recalc the error message and apply it to the Web Component.
         effect(() => {
-            const fieldState = this.field();
-            this.updateErrorProperty(fieldState);
+            const fs = this.fieldState();
+            this.setError(fs);
         });
     }
-    // #endregion
-    field = input.required({ ...(ngDevMode ? { debugName: "field" } : {}) });
-    // #region Methods
+    //#endregion
+    //#region Properties
     /**
-     * Updates the error property of the form field element based on the provided FieldState.
+     * The FieldState to observe for validation errors.
      *
-     * @private
-     * @param fieldState The FieldState containing validation information.
+     * @required
+     * @public
+     * @example
+     * ```html
+     * <mosaik-form-field [fieldState]="form.someField()">
+     *   …
+     * </mosaik-form-field>
+     * ```
+     */
+    fieldState = input.required({ ...(ngDevMode ? { debugName: "fieldState" } : {}) });
+    //#endregion
+    //#region Methods
+    /**
+     * Maps the FieldState (errors + touched) to the Element error property.
+     * If there is at least one error AND the field has been touched → set error to the
+     * last error.message. Otherwise clear the error.
+     *
+     * @param fieldState The current FieldState
      */
-    updateErrorProperty(fieldState) {
-        const element = this._elementRef.nativeElement;
+    setError(fieldState) {
+        const el = this._elementRef.nativeElement;
         if (!fieldState) {
-            element.error = '';
+            el.error = '';
             return;
         }
-        const errors = fieldState.errors();
-        if (errors.length > 0 && fieldState.touched()) {
-            const firstError = errors[0];
-            const errorMessage = firstError.message;
-            element.error = errorMessage ?? '';
+        const errors = fieldState.errors(); // array of validation errors
+        const isTouched = fieldState.touched(); // whether the field was touched
+        const isInvalid = fieldState.invalid(); // whether the field is invalid
+        if (errors.length > 0 && isTouched && isInvalid) {
+            // Use the last error in the array as the “active” error message
+            const lastError = errors[errors.length - 1];
+            el.error = lastError.message ?? '';
         }
         else {
-            element.error = '';
+            // No errors or not touched yet → clear error
+            el.error = '';
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FormFieldDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: FormFieldDirective, isStandalone: true, selector: "mosaik-form-field[field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: FormFieldDirective, isStandalone: true, selector: "mosaik-form-field", inputs: { fieldState: { classPropertyName: "fieldState", publicName: "fieldState", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FormFieldDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'mosaik-form-field[field]'
+                    // applies to your custom element
+                    selector: 'mosaik-form-field'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }] } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { fieldState: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldState", required: true }] }] } });
 
 // #region Imports
 // #endregion