ngx-vest-forms 2.3.1 → 2.4.0

package/fesm2022/ngx-vest-forms.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, isDevMode, inject, DestroyRef, ChangeDetectorRef, signal, linkedSignal, computed, input, effect, untracked, Directive, contentChild, Injector, afterEveryRender, ElementRef, ChangeDetectionStrategy, Component, booleanAttribute, Optional } from '@angular/core';
-import { FormGroup, FormArray, NgForm, StatusChangeEvent, ValueChangeEvent, PristineChangeEvent, NgModel, NgModelGroup, NG_ASYNC_VALIDATORS, ControlContainer, FormsModule } from '@angular/forms';
+import { isFormArray, isFormGroup, NgForm, StatusChangeEvent, ValueChangeEvent, PristineChangeEvent, FormGroup, FormArray, NgModel, NgModelGroup, NG_ASYNC_VALIDATORS, ControlContainer, FormsModule } from '@angular/forms';
 import { toSignal, outputFromObservable, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { startWith, filter, map, distinctUntilChanged, merge, switchMap, take, of, timer, Observable, catchError, EMPTY, debounceTime, tap, race, from } from 'rxjs';
 
@@ -326,8 +326,6 @@ function fastDeepEqual(obj1, obj2, maxDepth = 10) {
     return true;
 }
 
-const ROOT_FORM = 'rootForm';
-
 /**
  * Utilities for working with field paths in dot/bracket notation and Standard Schema path arrays.
  *
@@ -346,6 +344,16 @@ const ROOT_FORM = 'rootForm';
  * // Returns: 'user.addresses[0].street'
  * ```
  */
+const UNSAFE_PATH_SEGMENTS = new Set(['__proto__', 'prototype', 'constructor']);
+/**
+ * @internal
+ * Returns whether a path segment is unsafe for object writes/merges.
+ *
+ * Unsafe segments are blocked to prevent prototype pollution vectors.
+ */
+function isUnsafePathSegment(segment) {
+    return typeof segment === 'string' && UNSAFE_PATH_SEGMENTS.has(segment);
+}
 /**
  * @internal
  * Internal utility for parsing field path strings.
@@ -435,37 +443,44 @@ function stringifyFieldPath(path) {
     return result;
 }
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
+const ROOT_FORM = 'rootForm';
+
+const ERROR_MESSAGES_KEY = 'errors';
+const WARNING_MESSAGES_KEY = 'warnings';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
 /**
  * Recursively calculates the path of a form control
  * @param formGroup
  * @param control
  */
+function getChildEntries(container) {
+    if (isFormArray(container)) {
+        return container.controls.map((child, index) => [String(index), child]);
+    }
+    return Object.entries(container.controls);
+}
 function getControlPath(formGroup, control) {
     // First attempt: depth-first traversal from provided root
-    for (const key in formGroup.controls) {
-        if (Object.prototype.hasOwnProperty.call(formGroup.controls, key)) {
-            const child = formGroup.get(key);
-            if (child === control) {
-                return key;
-            }
-            if (child instanceof FormGroup || child instanceof FormArray) {
-                const subPath = getControlPath(child, control);
-                if (subPath) {
-                    return `${key}.${subPath}`;
-                }
+    for (const [key, child] of getChildEntries(formGroup)) {
+        if (child === control) {
+            return key;
+        }
+        if (isFormGroup(child) || isFormArray(child)) {
+            const subPath = getControlPath(child, control);
+            if (subPath) {
+                return `${key}.${subPath}`;
             }
         }
     }
     // Fallback: walk up the parent chain from control to root
     let current = control;
     const segments = [];
-    while (current && current.parent) {
+    while (current?.parent) {
         const parent = current.parent;
-        if (!parent?.controls)
-            break;
-        for (const key of Object.keys(parent.controls)) {
-            if (parent.controls[key] === current) {
+        for (const [key, controlInParent] of getChildEntries(parent)) {
+            if (controlInParent === current) {
                 segments.unshift(key);
                 break;
             }
@@ -477,7 +492,10 @@ function getControlPath(formGroup, control) {
     }
     // Last resort: try control.name if available
     const name = control.name;
-    return name ?? '';
+    if (typeof name === 'string') {
+        return name;
+    }
+    return '';
 }
 /**
  * Recursively calculates the path of a form group
@@ -485,12 +503,11 @@ function getControlPath(formGroup, control) {
  * @param control
  */
 function getGroupPath(formGroup, control) {
-    for (const key of Object.keys(formGroup.controls)) {
-        const ctrl = formGroup.get(key);
+    for (const [key, ctrl] of getChildEntries(formGroup)) {
         if (ctrl === control) {
             return key;
         }
-        if (ctrl instanceof FormGroup) {
+        if (isFormGroup(ctrl)) {
             const path = getGroupPath(ctrl, control);
             if (path) {
                 return `${key}.${path}`;
@@ -536,8 +553,11 @@ function getFormGroupField(rootForm, control) {
  * to include disabled field values in form submissions. Use Angular's `getRawValue()`
  * method on your form if you need to access disabled field values.
  *
- * This RxJS operator merges the value of the form with the raw value.
+ * This utility merges the value of the form with the raw value.
  * By doing this we can assure that we don't lose values of disabled form fields
+ *
+ * Security: Unsafe prototype-related keys (`__proto__`, `prototype`, `constructor`)
+ * are skipped during recursive merge.
  * @param form
  */
 function mergeValuesAndRawValues(form) {
@@ -554,15 +574,18 @@ function mergeValuesAndRawValues(form) {
     // Recursive function to merge rawValue into value
     function mergeRecursive(target, source) {
         for (const key of Object.keys(source)) {
-            if (target[key] === undefined) {
+            if (isUnsafePathSegment(key)) {
+                continue;
+            }
+            const sourceValue = source[key];
+            const targetValue = target[key];
+            if (targetValue === undefined) {
                 // If the key is not in the target, add it directly (for disabled fields)
-                target[key] = source[key];
+                target[key] = sourceValue;
             }
-            else if (typeof source[key] === 'object' &&
-                source[key] !== null &&
-                !Array.isArray(source[key])) {
+            else if (isRecord(sourceValue) && isRecord(targetValue)) {
                 // If the value is an object, merge it recursively
-                mergeRecursive(target[key], source[key]);
+                mergeRecursive(targetValue, sourceValue);
             }
             // If the target already has the key with a primitive value, it's left as is to maintain references
         }
@@ -573,6 +596,12 @@ function mergeValuesAndRawValues(form) {
 function isPrimitive(value) {
     return (value === null || (typeof value !== 'object' && typeof value !== 'function'));
 }
+function getStringArrayError(errors, key) {
+    const value = errors?.[key];
+    return Array.isArray(value)
+        ? value.filter((v) => typeof v === 'string')
+        : undefined;
+}
 /**
  * Performs a deep-clone of an object
  * @param obj
@@ -608,22 +637,44 @@ function cloneDeep(object) {
     throw new Error("Unable to copy object! Its type isn't supported.");
 }
 /**
- * Sets a value in an object in the correct path
- * @param obj
- * @param path
- * @param value
+ * Sets a value in an object at the provided field path.
+ *
+ * Supports dot and bracket notation via `parseFieldPath()`.
+ * Examples: `user.profile.name`, `addresses[0].street`.
+ *
+ * Security: If any path segment matches an unsafe prototype-related key
+ * (`__proto__`, `prototype`, `constructor`), the write is ignored.
+ *
+ * @param obj - Target object to mutate.
+ * @param path - Dot/bracket field path.
+ * @param value - Value to assign at the resolved path.
  */
 function setValueAtPath(obj, path, value) {
-    const keys = path.split('.');
+    const keys = parseFieldPath(path);
+    if (keys.length === 0) {
+        return;
+    }
     let current = obj;
     for (let i = 0; i < keys.length - 1; i++) {
-        const key = keys[i];
-        if (!current[key]) {
+        const segment = keys[i];
+        if (segment === undefined) {
+            continue;
+        }
+        if (isUnsafePathSegment(segment)) {
+            return;
+        }
+        const key = String(segment);
+        const next = current[key];
+        if (!isRecord(next)) {
             current[key] = {};
         }
         current = current[key];
     }
-    current[keys[keys.length - 1]] = value;
+    const lastSegment = keys[keys.length - 1];
+    if (lastSegment === undefined || isUnsafePathSegment(lastSegment)) {
+        return;
+    }
+    current[String(lastSegment)] = value;
 }
 /**
  * @deprecated Use {@link setValueAtPath} instead
@@ -648,9 +699,10 @@ function getAllFormErrors(form) {
         return errors;
     }
     // Collect root form errors (from ValidateRootFormDirective) before processing children
-    if (form.errors && form.enabled) {
-        if (form.errors['errors'] && Array.isArray(form.errors['errors'])) {
-            errors[ROOT_FORM] = form.errors['errors'];
+    if (form.enabled) {
+        const rootErrors = getStringArrayError(form.errors, ERROR_MESSAGES_KEY);
+        if (rootErrors) {
+            errors[ROOT_FORM] = rootErrors;
         }
     }
     function collect(control, pathParts) {
@@ -658,48 +710,44 @@ function getAllFormErrors(form) {
         // Skip processing the root form control directly in NgxFormDirective
         if (pathParts.length === 0 && control === form) {
             // Instead, iterate its children if it's a group/array
-            if (control instanceof FormGroup || control instanceof FormArray) {
-                for (const key of Object.keys(control.controls)) {
-                    const childControl = control.get(key);
+            if (isFormGroup(control) || isFormArray(control)) {
+                for (const [key, childControl] of getChildEntries(control)) {
+                    const numericKey = Number(key);
                     const nextPath = [
                         // ...pathParts, // pathParts is empty here
-                        Number.isNaN(Number(key)) ? key : Number(key),
+                        Number.isNaN(numericKey) ? key : numericKey,
                     ];
-                    if (childControl) {
-                        collect(childControl, nextPath);
-                    }
+                    collect(childControl, nextPath);
                 }
             }
             return; // Stop processing for the root form itself at this level
         }
-        if (control instanceof FormGroup || control instanceof FormArray) {
-            for (const key of Object.keys(control.controls)) {
-                const childControl = control.get(key);
+        if (isFormGroup(control) || isFormArray(control)) {
+            for (const [key, childControl] of getChildEntries(control)) {
+                const numericKey = Number(key);
                 const nextPath = [
                     ...pathParts,
-                    Number.isNaN(Number(key)) ? key : Number(key),
+                    Number.isNaN(numericKey) ? key : numericKey,
                 ];
-                if (childControl) {
-                    collect(childControl, nextPath);
-                }
+                collect(childControl, nextPath);
             }
         }
         // Attach control errors (both errors and warnings)
-        if (control.errors && control.enabled) {
-            // If errors is an array, assign it
-            if (control.errors['errors'] && Array.isArray(control.errors['errors'])) {
-                errors[pathString] = control.errors['errors'];
+        if (control.enabled) {
+            const fieldErrors = getStringArrayError(control.errors, ERROR_MESSAGES_KEY);
+            if (fieldErrors) {
+                errors[pathString] = fieldErrors;
             }
             // Optionally, add warnings if present
-            if (control.errors['warnings'] &&
-                Array.isArray(control.errors['warnings'])) {
+            const fieldWarnings = getStringArrayError(control.errors, WARNING_MESSAGES_KEY);
+            if (fieldWarnings) {
                 // Attach warnings as a property on the error array (non-enumerable)
                 // This is still done here for field-specific warnings, but not for root warnings.
                 if (!errors[pathString]) {
                     errors[pathString] = []; // Ensure array exists if only warnings are present
                 }
                 Object.defineProperty(errors[pathString], 'warnings', {
-                    value: control.errors['warnings'],
+                    value: fieldWarnings,
                     enumerable: false, // Keep it non-enumerable as per previous behavior for field warnings
                     configurable: true,
                     writable: true,
@@ -833,6 +881,12 @@ class FormDirective {
      * Track the Angular form status as a signal for advanced status flags
      */
     #statusSignal;
+    /**
+     * Reactive counter incremented on any focusout within the form.
+     * This guarantees recomputation for every blur/tab interaction,
+     * even when the form's aggregate touched flag is already true.
+     */
+    #blurTick;
     constructor() {
         this.ngForm = inject(NgForm, { self: true });
         this.destroyRef = inject(DestroyRef);
@@ -872,6 +926,26 @@ class FormDirective {
          * Track the Angular form status as a signal for advanced status flags
          */
         this.#statusSignal = toSignal(this.ngForm.form.statusChanges.pipe(startWith(this.ngForm.form.status)), { initialValue: this.ngForm.form.status });
+        /**
+         * Reactive counter incremented on any focusout within the form.
+         * This guarantees recomputation for every blur/tab interaction,
+         * even when the form's aggregate touched flag is already true.
+         */
+        this.#blurTick = signal(0, ...(ngDevMode ? [{ debugName: "#blurTick" }] : []));
+        /**
+         * Computed signal that returns field paths for all touched (or submitted) leaf controls.
+         * Updates reactively when controls are touched (blur) or when form status changes.
+         *
+         * This enables consumers to determine which fields the user has interacted with,
+         * useful for filtering errors/warnings to match the form's visible validation state.
+         *
+         * @publicApi
+         */
+        this.touchedFieldPaths = computed(() => {
+            this.#blurTick();
+            this.#statusSignal();
+            return this.#collectTouchedPaths(this.ngForm.form, this.ngForm.submitted);
+        }, ...(ngDevMode ? [{ debugName: "touchedFieldPaths" }] : []));
         /**
          * Computed signal for form state with validity and errors.
          * Used by templates and tests as vestForm.formState().valid/errors
@@ -1013,6 +1087,7 @@ class FormDirective {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             this.ngForm.form.markAllAsTouched();
+            this.#blurTick.update((v) => v + 1);
         });
         /**
          * Single bidirectional synchronization effect using linkedSignal.
@@ -1201,6 +1276,18 @@ class FormDirective {
      */
     markAllAsTouched() {
         this.ngForm.form.markAllAsTouched();
+        this.#blurTick.update((v) => v + 1);
+    }
+    /**
+     * Host handler: called whenever any descendant field loses focus.
+     * Used to make touched-path tracking react immediately on blur/tab.
+     */
+    onFormFocusOut() {
+        // Run on the next microtask to ensure Angular has already applied
+        // control.touched changes for the field that just blurred.
+        queueMicrotask(() => {
+            this.#blurTick.update((v) => v + 1);
+        });
     }
     /**
      * Resets the form to a pristine, untouched state with optional new values.
@@ -1272,17 +1359,18 @@ class FormDirective {
         // Trigger validation update to clear any stale errors
         // Now synchronous since detectChanges() has flushed DOM updates
         this.ngForm.form.updateValueAndValidity({ emitEvent: true });
+        this.#blurTick.update((v) => v + 1);
     }
     /**
-     * This will feed the formValueCache, debounce it till the next tick
-     * and create an asynchronous validator that runs a vest suite
-     * @param field
-     * @param validationOptions
-     * @returns an asynchronous validator function
-     */
-    /**
-     * V2 async validator pattern: uses timer() + switchMap for proper re-validation.
-     * Each invocation builds a fresh one-shot observable, ensuring progressive validation.
+     * Creates a one-shot async validator function for a specific field path.
+     *
+     * The returned validator:
+     * - snapshots the current form model,
+     * - injects the candidate control value at `field`,
+     * - runs the Vest suite with debouncing,
+     * - maps Vest errors/warnings into Angular `ValidationErrors | null`.
+     *
+     * Warnings are stored in `fieldWarnings` to keep warnings non-blocking when no errors exist.
      */
     createAsyncValidator(field, validationOptions) {
         const suite = this.suite();
@@ -1402,7 +1490,6 @@ class FormDirective {
      * 3. Waiting for form to be idle before triggering dependents
      * 4. Waiting for all dependent controls to exist
      * 5. Updating dependent field validity with loop prevention
-     * 6. Touch state propagation from trigger to dependents
      *
      * @param form - The NgForm instance
      * @param triggerField - Field path that triggers validation (e.g., 'password')
@@ -1444,7 +1531,11 @@ class FormDirective {
         }
         // Form is PENDING, wait for it to become idle
         const idle$ = form.statusChanges.pipe(filter((s) => s !== 'PENDING'), take(1));
-        const timeout$ = timer(2000);
+        const timeout$ = timer(2000).pipe(tap(() => {
+            if (isDevMode()) {
+                console.warn('[ngx-vest-forms] validationConfig: timed out waiting for form to leave PENDING state (2s). Continuing dependent validation to avoid stalling.');
+            }
+        }));
         return race(idle$, timeout$).pipe(map(() => control));
     }
     /**
@@ -1461,16 +1552,28 @@ class FormDirective {
         if (allDependentsExist) {
             return of(control);
         }
-        // Wait for dependent controls to be added to the form
-        return form.statusChanges.pipe(startWith(form.status), filter(() => dependents.every((depField) => !!form.get(depField))), take(1), map(() => control));
+        // Wait for dependent controls to be added to the form, but bound the wait to avoid silent stalls.
+        const dependentControlsReady$ = form.statusChanges.pipe(startWith(form.status), filter(() => dependents.every((depField) => !!form.get(depField))), take(1), map(() => control));
+        const timeout$ = timer(2000).pipe(tap(() => {
+            if (isDevMode()) {
+                const unresolved = dependents.filter((depField) => !form.get(depField));
+                console.warn(`[ngx-vest-forms] validationConfig: timed out waiting for dependent controls (2s): ${unresolved.join(', ')}. Continuing without waiting further.`);
+            }
+        }), map(() => control));
+        return race(dependentControlsReady$, timeout$).pipe(take(1));
     }
     /**
      * Updates validation for all dependent fields.
      *
      * Handles:
-     * - Touch state propagation (mark dependents touched when trigger is touched)
      * - Loop prevention via validationInProgress set
-     * - Silent validation (emitEvent: false) to prevent feedback loops
+     * - Silent validation updates that avoid feedback loops
+     *
+     * Note: Touch state is NOT propagated to prevent premature error display
+     * on conditionally revealed fields.
+     *
+     * Note: This method does NOT propagate touch state from trigger to dependent fields.
+     * Dependent fields only show errors after the user directly interacts with them.
      *
      * @param form - The NgForm instance
      * @param control - The trigger control
@@ -1490,11 +1593,20 @@ class FormDirective {
                 // CRITICAL: Mark the dependent field as in-progress BEFORE calling updateValueAndValidity
                 // This prevents the dependent field's valueChanges from triggering its own validationConfig
                 this.validationInProgress.add(depField);
-                // Propagate touch state BEFORE validation to avoid duplicate class updates
-                // markAsTouched() triggers change detection, so we do it once before updateValueAndValidity
-                if (control.touched && !dependentControl.touched) {
-                    dependentControl.markAsTouched({ onlySelf: true });
-                }
+                // NOTE: Touch propagation removed (PR #78)
+                // Previously, we propagated touch state from trigger to dependent fields.
+                // This caused UX issues where dependent fields showed errors immediately
+                // after being revealed by a toggle, even though the user never interacted with them.
+                //
+                // With this change:
+                // - Errors on dependent fields only show after the user directly touches/blurs them
+                // - ARIA attributes (aria-invalid) still work correctly via isInvalid check
+                // - Warnings still show after validation via hasBeenValidated check
+                //
+                // The removed code was:
+                // if (control.touched && !dependentControl.touched) {
+                //   dependentControl.markAsTouched({ onlySelf: true });
+                // }
                 // emitEvent: true is REQUIRED for async validators to actually run
                 // The validationInProgress Set prevents infinite loops:
                 // 1. Field A changes → triggers validation on dependent field B
@@ -1526,14 +1638,43 @@ class FormDirective {
             }
         }, VALIDATION_IN_PROGRESS_TIMEOUT_MS);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: FormDirective, isStandalone: true, selector: "form[scVestForm], form[ngxVestForm]", inputs: { formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null }, suite: { classPropertyName: "suite", publicName: "suite", isSignal: true, isRequired: false, transformFunction: null }, formShape: { classPropertyName: "formShape", publicName: "formShape", isSignal: true, isRequired: false, transformFunction: null }, validationConfig: { classPropertyName: "validationConfig", publicName: "validationConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formValueChange: "formValueChange", errorsChange: "errorsChange", dirtyChange: "dirtyChange", validChange: "validChange" }, exportAs: ["scVestForm", "ngxVestForm"], ngImport: i0 }); }
+    /**
+     * Collects field paths of all touched (or submitted) leaf controls
+     * by walking the form control tree.
+     */
+    #collectTouchedPaths(control, submitted) {
+        const fields = [];
+        const collect = (current, path) => {
+            if (current instanceof FormGroup) {
+                for (const [name, child] of Object.entries(current.controls)) {
+                    collect(child, [...path, name]);
+                }
+                return;
+            }
+            if (current instanceof FormArray) {
+                current.controls.forEach((child, index) => {
+                    collect(child, [...path, index]);
+                });
+                return;
+            }
+            if ((submitted || current.touched) && path.length > 0) {
+                fields.push(stringifyFieldPath(path));
+            }
+        };
+        collect(control, []);
+        return fields;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: FormDirective, isStandalone: true, selector: "form[scVestForm], form[ngxVestForm]", inputs: { formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null }, suite: { classPropertyName: "suite", publicName: "suite", isSignal: true, isRequired: false, transformFunction: null }, formShape: { classPropertyName: "formShape", publicName: "formShape", isSignal: true, isRequired: false, transformFunction: null }, validationConfig: { classPropertyName: "validationConfig", publicName: "validationConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formValueChange: "formValueChange", errorsChange: "errorsChange", dirtyChange: "dirtyChange", validChange: "validChange" }, host: { listeners: { "focusout": "onFormFocusOut()" } }, exportAs: ["scVestForm", "ngxVestForm"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form[scVestForm], form[ngxVestForm]',
                     exportAs: 'scVestForm, ngxVestForm',
+                    host: {
+                        '(focusout)': 'onFormFocusOut()',
+                    },
                 }]
         }], ctorParameters: () => [], propDecorators: { formValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formValue", required: false }] }], suite: [{ type: i0.Input, args: [{ isSignal: true, alias: "suite", required: false }] }], formShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "formShape", required: false }] }], validationConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationConfig", required: false }] }], formValueChange: [{ type: i0.Output, args: ["formValueChange"] }], errorsChange: [{ type: i0.Output, args: ["errorsChange"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], validChange: [{ type: i0.Output, args: ["validChange"] }] } });
 
@@ -1720,19 +1861,21 @@ class FormControlStateDirective {
             }
             // Listen to control changes
             const sub = control.control?.statusChanges?.subscribe(() => {
-                const { status, valid, invalid, pending, disabled, pristine, errors, touched, dirty, } = control;
+                const { status, valid, invalid, pending, disabled, pristine, errors, touched, } = control;
                 const currentStatus = status;
                 // Mark as validated when any of the following conditions are met:
                 // 1. The control has been touched (user blurred the field).
                 // 2. The control's status has actually changed (not the first status emission),
-                //    AND the new status is not 'PENDING' (validation completed),
-                //    AND the control has been interacted with (dirty).
+                //    AND the new status is not 'PENDING' (validation completed).
                 //
                 // This ensures hasBeenValidated is true for:
                 //   - User blur events (touched becomes true)
-                //   - User-triggered validations (dirty)
-                //   - ValidationConfig-triggered validations that result in the control becoming touched
-                // But NOT for initial page load validations.
+                //   - Any validation that changes status (e.g., typing then validation completes)
+                //   - ValidationConfig-triggered validations (status changed without touch/dirty)
+                // But NOT for initial page load validations (previousStatus === null).
+                //
+                // Note: The dirty check was removed to support validationConfig-triggered validations.
+                // This allows warnings to show even when the field hasn't been touched/dirtied by the user.
                 //
                 // Accessibility: The logic is structured for clarity and maintainability.
                 // IMPORTANT: Read touched/dirty directly from control, not from signal,
@@ -1741,8 +1884,7 @@ class FormControlStateDirective {
                     (this.#previousStatus !== null && // Not the first status emission
                         this.#previousStatus !== currentStatus && // Status actually changed
                         currentStatus !== null &&
-                        currentStatus !== 'PENDING' &&
-                        dirty) // Or control value changed (typed)
+                        currentStatus !== 'PENDING') // Validation completed (not pending)
                 ) {
                     this.#interactionState.update((state) => ({
                         ...state,
@@ -1796,13 +1938,23 @@ class FormControlStateDirective {
                     // Mark as validated when control becomes touched (e.g., user blurred the field)
                     // This handles the case where blur doesn't trigger statusChanges (field already invalid)
                     const shouldMarkValidated = newTouched && !currentInteraction.isTouched;
+                    // Reset hasBeenValidated when a control transitions back to pristine interaction state
+                    // (e.g., after form.resetForm()).
+                    //
+                    // This prevents stale warning display on untouched fields after reset while preserving
+                    // validationConfig-triggered behavior during normal interaction.
+                    const wasResetToPristineInteraction = !newTouched &&
+                        !newDirty &&
+                        (currentInteraction.isTouched || currentInteraction.isDirty);
                     this.#interactionState.update((state) => ({
                         ...state,
                         isTouched: newTouched,
                         isDirty: newDirty,
-                        hasBeenValidated: shouldMarkValidated
-                            ? true
-                            : state.hasBeenValidated,
+                        hasBeenValidated: wasResetToPristineInteraction
+                            ? false
+                            : shouldMarkValidated
+                                ? true
+                                : state.hasBeenValidated,
                     }));
                 }
                 // Sync pending state only when it transitions from true to false
@@ -1854,10 +2006,10 @@ class FormControlStateDirective {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormControlStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.1", type: FormControlStateDirective, isStandalone: true, selector: "[formControlState], [ngxControlState]", queries: [{ propertyName: "contentNgModel", first: true, predicate: NgModel, descendants: true, isSignal: true }, { propertyName: "contentNgModelGroup", first: true, predicate: NgModelGroup, descendants: true, isSignal: true }], exportAs: ["formControlState", "ngxControlState"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormControlStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.3", type: FormControlStateDirective, isStandalone: true, selector: "[formControlState], [ngxControlState]", queries: [{ propertyName: "contentNgModel", first: true, predicate: NgModel, descendants: true, isSignal: true }, { propertyName: "contentNgModelGroup", first: true, predicate: NgModelGroup, descendants: true, isSignal: true }], exportAs: ["formControlState", "ngxControlState"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormControlStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormControlStateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[formControlState], [ngxControlState]',
@@ -2086,10 +2238,10 @@ class FormErrorDisplayDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormErrorDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: FormErrorDisplayDirective, isStandalone: true, selector: "[formErrorDisplay], [ngxErrorDisplay]", inputs: { errorDisplayMode: { classPropertyName: "errorDisplayMode", publicName: "errorDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, warningDisplayMode: { classPropertyName: "warningDisplayMode", publicName: "warningDisplayMode", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["formErrorDisplay", "ngxErrorDisplay"], hostDirectives: [{ directive: FormControlStateDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormErrorDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: FormErrorDisplayDirective, isStandalone: true, selector: "[formErrorDisplay], [ngxErrorDisplay]", inputs: { errorDisplayMode: { classPropertyName: "errorDisplayMode", publicName: "errorDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, warningDisplayMode: { classPropertyName: "warningDisplayMode", publicName: "warningDisplayMode", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["formErrorDisplay", "ngxErrorDisplay"], hostDirectives: [{ directive: FormControlStateDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormErrorDisplayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormErrorDisplayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[formErrorDisplay], [ngxErrorDisplay]',
@@ -2098,6 +2250,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { errorDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplayMode", required: false }] }], warningDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "warningDisplayMode", required: false }] }] } });
 
+/**
+ * Splits an `aria-describedby` attribute value into normalized token IDs.
+ */
+function parseAriaIdTokens(value) {
+    return (value ?? '')
+        .split(/\s+/)
+        .map((token) => token.trim())
+        .filter(Boolean);
+}
+/**
+ * Merges currently-active wrapper IDs into an existing `aria-describedby` value.
+ *
+ * Existing tokens owned by the wrapper are removed first, then current active IDs
+ * are appended while preserving non-owned tokens and token uniqueness.
+ */
+function mergeAriaDescribedBy(existing, activeIds, ownedIds) {
+    const ownedIdSet = new Set(ownedIds);
+    const existingTokens = parseAriaIdTokens(existing);
+    const existingWithoutOwned = existingTokens.filter((token) => !ownedIdSet.has(token));
+    const merged = [...existingWithoutOwned];
+    const mergedIdSet = new Set(merged);
+    for (const id of activeIds) {
+        if (!mergedIdSet.has(id)) {
+            merged.push(id);
+            mergedIdSet.add(id);
+        }
+    }
+    return merged.length > 0 ? merged.join(' ') : null;
+}
+/**
+ * Resolves control targets based on ARIA association mode.
+ */
+function resolveAssociationTargets(controls, mode) {
+    if (mode === 'none') {
+        return [];
+    }
+    if (mode === 'single-control') {
+        return controls.length === 1 ? [...controls] : [];
+    }
+    return [...controls];
+}
+
 /**
  * Creates a debounced pending state signal that prevents flashing validation messages.
  *
@@ -2201,7 +2395,7 @@ function createDebouncedPendingState(isPending, options = {}) {
 // Counter for unique IDs
 let nextUniqueId$2 = 0;
 /**
- * Accessible form control wrapper with WCAG 2.2 AA compliance.
+ * Accessible form control wrapper built with WCAG 2.2 AA considerations.
  *
  * Wrap form fields to automatically display validation errors, warnings, and pending states
  * with proper accessibility attributes.
@@ -2292,7 +2486,7 @@ let nextUniqueId$2 = 0;
  *   <ngx-control-wrapper>
  *     <input name="username" ngModel />
  *   </ngx-control-wrapper>
- *   /// If async validation is running for >200ms, a spinner and 'Validating…' will be shown.
+ *   /// If async validation is running for >500ms, a spinner and 'Validating…' will be shown.
  *   /// Once shown, the validation message stays visible for minimum 500ms to prevent flashing.
  *   /// If Vest warnings are present, they will be shown below errors.
  *
@@ -2301,13 +2495,14 @@ let nextUniqueId$2 = 0;
  *   import { NGX_ERROR_DISPLAY_MODE_TOKEN } from 'ngx-vest-forms';
  *   @Component({
  *     providers: [
- *       provide(NGX_ERROR_DISPLAY_MODE_TOKEN, { useValue: 'submit' })
+ *       provide(NGX_ERROR_DISPLAY_MODE_TOKEN, { useValue: 'on-submit' })
  *     ]
  *   })
  *   export class MyComponent {}
  *
  * Best Practices:
- *   - Use for every input or group in your forms.
+ *   - Use for single-control wrappers.
+ *   - For multi-control/group containers, prefer `ngx-form-group-wrapper`.
  *   - Do not manually display errors for individual fields; rely on this wrapper.
  *   - Validate with tools like Accessibility Insights and real screen reader testing.
  *
@@ -2315,22 +2510,6 @@ let nextUniqueId$2 = 0;
  * @see https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22 - ARIA22: Using role=status
  */
 class ControlWrapperComponent {
-    mergeAriaDescribedBy(existing, wrapperActiveIds) {
-        const existingTokens = (existing ?? '')
-            .split(/\s+/)
-            .map((t) => t.trim())
-            .filter(Boolean);
-        // Remove any previous wrapper-owned IDs from the existing list.
-        const existingWithoutWrapper = existingTokens.filter((t) => !this.wrapperOwnedDescribedByIds.includes(t));
-        // Append current wrapper IDs, preserving existing order and uniqueness.
-        const merged = [...existingWithoutWrapper];
-        for (const id of wrapperActiveIds) {
-            if (!merged.includes(id)) {
-                merged.push(id);
-            }
-        }
-        return merged.length > 0 ? merged.join(' ') : null;
-    }
     constructor() {
         this.errorDisplay = inject(FormErrorDisplayDirective, {
             self: true,
@@ -2414,20 +2593,12 @@ class ControlWrapperComponent {
                 return;
             }
             const describedBy = this.ariaDescribedBy();
-            const wrapperActiveIds = describedBy
-                ? describedBy.split(/\s+/).filter(Boolean)
-                : [];
+            const wrapperActiveIds = parseAriaIdTokens(describedBy);
             const shouldShowErrors = this.errorDisplay.shouldShowErrors();
-            const targets = (() => {
-                const controls = this.formControls();
-                if (mode === 'single-control') {
-                    return controls.length === 1 ? controls : [];
-                }
-                return controls;
-            })();
+            const targets = resolveAssociationTargets(this.formControls(), mode);
             targets.forEach((control) => {
                 // Update aria-describedby (merge, don't overwrite)
-                const nextDescribedBy = this.mergeAriaDescribedBy(control.getAttribute('aria-describedby'), wrapperActiveIds);
+                const nextDescribedBy = mergeAriaDescribedBy(control.getAttribute('aria-describedby'), wrapperActiveIds, this.wrapperOwnedDescribedByIds);
                 if (nextDescribedBy) {
                     control.setAttribute('aria-describedby', nextDescribedBy);
                 }
@@ -2493,10 +2664,10 @@ class ControlWrapperComponent {
         const controls = this.elementRef.nativeElement.querySelectorAll('input, select, textarea');
         this.formControls.set(Array.from(controls));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ControlWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ControlWrapperComponent, isStandalone: true, selector: "ngx-control-wrapper, sc-control-wrapper, [scControlWrapper], [ngxControlWrapper], [ngx-control-wrapper], [sc-control-wrapper]", inputs: { ariaAssociationMode: { classPropertyName: "ariaAssociationMode", publicName: "ariaAssociationMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngx-control-wrapper--invalid": "errorDisplay.shouldShowErrors()", "attr.aria-busy": "errorDisplay.isPending() ? 'true' : null" }, classAttribute: "ngx-control-wrapper sc-control-wrapper" }, hostDirectives: [{ directive: FormErrorDisplayDirective, inputs: ["errorDisplayMode", "errorDisplayMode", "warningDisplayMode", "warningDisplayMode"] }], ngImport: i0, template: "<div class=\"ngx-control-wrapper__content\">\n  <ng-content />\n</div>\n\n<!--\n  WCAG 2.2 AA Compliance for Inline Field Validation:\n\n  IMPORTANT DISTINCTION - Field-level vs Form-level errors:\n  - FIELD-LEVEL errors (this component): Use role=\"status\" with aria-live=\"polite\"\n    These are inline validation messages that appear as users interact with fields.\n    Using \"assertive\" would be too disruptive when users are filling out multiple fields.\n  - FORM-LEVEL blocking errors (e.g., submission failed): Should use role=\"alert\" with\n    aria-live=\"assertive\" in a separate form-level error summary component.\n\n  This component handles FIELD-LEVEL messages:\n  - Errors: role=\"status\" with aria-live=\"polite\" (non-disruptive, field is already\n    marked with aria-invalid=\"true\" and aria-describedby points here)\n  - Warnings: role=\"status\" with aria-live=\"polite\" (informational, doesn't block)\n  - Pending: role=\"status\" with aria-live=\"polite\" (status update)\n\n  The aria-invalid=\"true\" + aria-describedby association on the input provides\n  the primary accessibility pathway; the live region is supplementary.\n\n  @see https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA21 - Using aria-invalid\n  @see https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22 - Using role=status\n-->\n<div\n  [id]=\"errorId\"\n  class=\"text-sm text-red-600\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  @if (errorDisplay.shouldShowErrors()) {\n    <ul class=\"m-0 mt-1 list-none space-y-1 p-0\">\n      @for (error of errorDisplay.errors(); track error) {\n        <li>{{ error }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<!--\n  Warnings: Non-blocking validation messages (Vest warn())\n  - Use role=\"status\" with aria-live=\"polite\" per WCAG ARIA22\n  - Default: show after validation runs or touch; configurable to require touch only\n  - Warnings do NOT affect field validity - they're informational only\n-->\n<div\n  [id]=\"warningId\"\n  class=\"text-sm text-yellow-700\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  @if (shouldShowWarnings()) {\n    <ul class=\"m-0 mt-1 list-none space-y-1 p-0\">\n      @for (warn of errorDisplay.warnings(); track warn) {\n        <li>{{ warn }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<!-- Pending state is also stable; content appears only after the debounce delay -->\n<div\n  [id]=\"pendingId\"\n  class=\"absolute top-0 right-0 flex items-center gap-1 text-xs text-gray-500\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  @if (showPendingMessage()) {\n    <span\n      class=\"inline-block h-3 w-3 animate-spin rounded-full border-2 border-gray-400 border-t-transparent\"\n      aria-hidden=\"true\"\n    ></span>\n    Validating\u2026\n  }\n</div>\n", styles: [":host{display:block;position:relative}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ControlWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ControlWrapperComponent, isStandalone: true, selector: "ngx-control-wrapper, sc-control-wrapper, [scControlWrapper], [ngxControlWrapper], [ngx-control-wrapper], [sc-control-wrapper]", inputs: { ariaAssociationMode: { classPropertyName: "ariaAssociationMode", publicName: "ariaAssociationMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngx-control-wrapper--invalid": "errorDisplay.shouldShowErrors()", "attr.aria-busy": "errorDisplay.isPending() ? 'true' : null" }, classAttribute: "ngx-control-wrapper sc-control-wrapper" }, hostDirectives: [{ directive: FormErrorDisplayDirective, inputs: ["errorDisplayMode", "errorDisplayMode", "warningDisplayMode", "warningDisplayMode"] }], ngImport: i0, template: "<div class=\"ngx-control-wrapper__content\">\n  <ng-content />\n</div>\n\n<!--\n  WCAG 2.2 AA Compliance for Inline Field Validation:\n\n  IMPORTANT DISTINCTION - Field-level vs Form-level errors:\n  - FIELD-LEVEL errors (this component): Use role=\"status\" with aria-live=\"polite\"\n    These are inline validation messages that appear as users interact with fields.\n    Using \"assertive\" would be too disruptive when users are filling out multiple fields.\n  - FORM-LEVEL blocking errors (e.g., submission failed): Should use role=\"alert\" with\n    aria-live=\"assertive\" in a separate form-level error summary component.\n\n  This component handles FIELD-LEVEL messages:\n  - Errors: role=\"status\" with aria-live=\"polite\" (non-disruptive, field is already\n    marked with aria-invalid=\"true\" and aria-describedby points here)\n  - Warnings: role=\"status\" with aria-live=\"polite\" (informational, doesn't block)\n  - Pending: role=\"status\" with aria-live=\"polite\" (status update)\n\n  The aria-invalid=\"true\" + aria-describedby association on the input provides\n  the primary accessibility pathway; the live region is supplementary.\n\n  @see https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA21 - Using aria-invalid\n  @see https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22 - Using role=status\n-->\n<div\n  [id]=\"errorId\"\n  class=\"text-sm text-red-600\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  @if (errorDisplay.shouldShowErrors()) {\n    <ul class=\"m-0 mt-1 list-none space-y-1 p-0\">\n      @for (error of errorDisplay.errors(); track error) {\n        <li>{{ error }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<!--\n  Warnings: Non-blocking validation messages (Vest warn())\n  - Use role=\"status\" with aria-live=\"polite\" per WCAG ARIA22\n  - Default: show after validation runs or touch; configurable to require touch only\n  - Warnings do NOT affect field validity - they're informational only\n-->\n<div\n  [id]=\"warningId\"\n  class=\"text-sm text-yellow-700\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  @if (shouldShowWarnings()) {\n    <ul class=\"m-0 mt-1 list-none space-y-1 p-0\">\n      @for (warn of errorDisplay.warnings(); track warn) {\n        <li>{{ warn }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<!-- Pending state is also stable; content appears only after the debounce delay -->\n<div\n  [id]=\"pendingId\"\n  class=\"absolute top-0 right-0 flex items-center gap-1 text-xs text-gray-500\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  @if (showPendingMessage()) {\n    <span\n      class=\"inline-block h-3 w-3 animate-spin rounded-full border-2 border-gray-400 border-t-transparent\"\n      aria-hidden=\"true\"\n    ></span>\n    Validating\u2026\n  }\n</div>\n", styles: [":host{display:block;position:relative}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ControlWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ControlWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-control-wrapper, sc-control-wrapper, [scControlWrapper], [ngxControlWrapper], [ngx-control-wrapper], [sc-control-wrapper]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ngx-control-wrapper sc-control-wrapper',
@@ -2547,7 +2718,7 @@ class FormGroupWrapperComponent {
             if (this.errorDisplay.shouldShowErrors()) {
                 ids.push(this.errorId);
             }
-            if (this.errorDisplay.warnings().length > 0) {
+            if (this.errorDisplay.shouldShowWarnings()) {
                 ids.push(this.warningId);
             }
             if (this.showPendingMessage()) {
@@ -2556,21 +2727,21 @@ class FormGroupWrapperComponent {
             return ids.length > 0 ? ids.join(' ') : null;
         }, ...(ngDevMode ? [{ debugName: "describedByIds" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormGroupWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FormGroupWrapperComponent, isStandalone: true, selector: "ngx-form-group-wrapper, sc-form-group-wrapper, [ngxFormGroupWrapper], [scFormGroupWrapper], [ngx-form-group-wrapper], [sc-form-group-wrapper]", inputs: { pendingDebounce: { classPropertyName: "pendingDebounce", publicName: "pendingDebounce", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngx-form-group-wrapper--invalid": "errorDisplay.shouldShowErrors()", "attr.aria-busy": "errorDisplay.isPending() ? 'true' : null" }, classAttribute: "ngx-form-group-wrapper sc-form-group-wrapper" }, exportAs: ["formGroupWrapper", "ngxFormGroupWrapper"], hostDirectives: [{ directive: FormErrorDisplayDirective, inputs: ["errorDisplayMode", "errorDisplayMode"] }], ngImport: i0, template: "<div class=\"ngx-form-group-wrapper__content\">\n  <ng-content />\n</div>\n\n<!--\n  Keep regions stable in the DOM so IDs are always valid targets.\n  This wrapper does NOT modify descendant controls.\n-->\n<div [id]=\"errorId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (errorDisplay.shouldShowErrors() && errorDisplay.errors().length > 0) {\n    <ul>\n      @for (error of errorDisplay.errors(); track error) {\n        <li>{{ error }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<div [id]=\"warningId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (errorDisplay.warnings().length > 0) {\n    <ul>\n      @for (warn of errorDisplay.warnings(); track warn) {\n        <li>{{ warn }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<div [id]=\"pendingId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (showPendingMessage()) {\n    <span aria-hidden=\"true\">Validating\u2026</span>\n  }\n</div>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormGroupWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FormGroupWrapperComponent, isStandalone: true, selector: "ngx-form-group-wrapper, sc-form-group-wrapper, [ngxFormGroupWrapper], [scFormGroupWrapper]", inputs: { pendingDebounce: { classPropertyName: "pendingDebounce", publicName: "pendingDebounce", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngx-form-group-wrapper--invalid": "errorDisplay.shouldShowErrors()", "attr.aria-busy": "errorDisplay.isPending() ? 'true' : null" }, classAttribute: "ngx-form-group-wrapper sc-form-group-wrapper" }, exportAs: ["ngxFormGroupWrapper"], hostDirectives: [{ directive: FormErrorDisplayDirective, inputs: ["errorDisplayMode", "errorDisplayMode", "warningDisplayMode", "warningDisplayMode"] }], ngImport: i0, template: "<div class=\"ngx-form-group-wrapper__content\">\n  <ng-content />\n</div>\n\n<!--\n  Keep regions stable in the DOM so IDs are always valid targets.\n  This wrapper does NOT modify descendant controls.\n-->\n<div [id]=\"errorId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (errorDisplay.shouldShowErrors() && errorDisplay.errors().length > 0) {\n    <ul>\n      @for (error of errorDisplay.errors(); track error) {\n        <li>{{ error }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<div [id]=\"warningId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (errorDisplay.shouldShowWarnings()) {\n    <ul>\n      @for (warn of errorDisplay.warnings(); track warn) {\n        <li>{{ warn }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<div [id]=\"pendingId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (showPendingMessage()) {\n    <span aria-hidden=\"true\">Validating\u2026</span>\n  }\n</div>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormGroupWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormGroupWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-form-group-wrapper, sc-form-group-wrapper, [ngxFormGroupWrapper], [scFormGroupWrapper], [ngx-form-group-wrapper], [sc-form-group-wrapper]', exportAs: 'formGroupWrapper, ngxFormGroupWrapper', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'ngx-form-group-wrapper, sc-form-group-wrapper, [ngxFormGroupWrapper], [scFormGroupWrapper]', exportAs: 'ngxFormGroupWrapper', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ngx-form-group-wrapper sc-form-group-wrapper',
                         '[class.ngx-form-group-wrapper--invalid]': 'errorDisplay.shouldShowErrors()',
                         '[attr.aria-busy]': "errorDisplay.isPending() ? 'true' : null",
                     }, hostDirectives: [
                         {
                             directive: FormErrorDisplayDirective,
-                            inputs: ['errorDisplayMode'],
+                            inputs: ['errorDisplayMode', 'warningDisplayMode'],
                         },
-                    ], template: "<div class=\"ngx-form-group-wrapper__content\">\n  <ng-content />\n</div>\n\n<!--\n  Keep regions stable in the DOM so IDs are always valid targets.\n  This wrapper does NOT modify descendant controls.\n-->\n<div [id]=\"errorId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (errorDisplay.shouldShowErrors() && errorDisplay.errors().length > 0) {\n    <ul>\n      @for (error of errorDisplay.errors(); track error) {\n        <li>{{ error }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<div [id]=\"warningId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (errorDisplay.warnings().length > 0) {\n    <ul>\n      @for (warn of errorDisplay.warnings(); track warn) {\n        <li>{{ warn }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<div [id]=\"pendingId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (showPendingMessage()) {\n    <span aria-hidden=\"true\">Validating\u2026</span>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
+                    ], template: "<div class=\"ngx-form-group-wrapper__content\">\n  <ng-content />\n</div>\n\n<!--\n  Keep regions stable in the DOM so IDs are always valid targets.\n  This wrapper does NOT modify descendant controls.\n-->\n<div [id]=\"errorId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (errorDisplay.shouldShowErrors() && errorDisplay.errors().length > 0) {\n    <ul>\n      @for (error of errorDisplay.errors(); track error) {\n        <li>{{ error }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<div [id]=\"warningId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (errorDisplay.shouldShowWarnings()) {\n    <ul>\n      @for (warn of errorDisplay.warnings(); track warn) {\n        <li>{{ warn }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<div [id]=\"pendingId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (showPendingMessage()) {\n    <span aria-hidden=\"true\">Validating\u2026</span>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { pendingDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "pendingDebounce", required: false }] }] } });
 
 let nextUniqueId = 0;
@@ -2584,20 +2755,6 @@ let nextUniqueId = 0;
  * It does not render any UI; you can use the generated IDs to render messages.
  */
 class FormErrorControlDirective {
-    mergeAriaDescribedBy(existing, activeIds) {
-        const existingTokens = (existing ?? '')
-            .split(/\s+/)
-            .map((t) => t.trim())
-            .filter(Boolean);
-        const existingWithoutOwned = existingTokens.filter((t) => !this.ownedDescribedByIds.includes(t));
-        const merged = [...existingWithoutOwned];
-        for (const id of activeIds) {
-            if (!merged.includes(id)) {
-                merged.push(id);
-            }
-        }
-        return merged.length > 0 ? merged.join(' ') : null;
-    }
     constructor() {
         this.errorDisplay = inject(FormErrorDisplayDirective, {
             self: true,
@@ -2632,7 +2789,7 @@ class FormErrorControlDirective {
             if (this.errorDisplay.shouldShowErrors()) {
                 ids.push(this.errorId);
             }
-            if (this.errorDisplay.warnings().length > 0) {
+            if (this.errorDisplay.shouldShowWarnings()) {
                 ids.push(this.warningId);
             }
             if (this.showPendingMessage()) {
@@ -2653,19 +2810,11 @@ class FormErrorControlDirective {
             if (mode === 'none')
                 return;
             const describedBy = this.ariaDescribedBy();
-            const activeIds = describedBy
-                ? describedBy.split(/\s+/).filter(Boolean)
-                : [];
+            const activeIds = parseAriaIdTokens(describedBy);
             const shouldShowErrors = this.errorDisplay.shouldShowErrors();
-            const targets = (() => {
-                const controls = this.formControls();
-                if (mode === 'single-control') {
-                    return controls.length === 1 ? controls : [];
-                }
-                return controls;
-            })();
+            const targets = resolveAssociationTargets(this.formControls(), mode);
             for (const control of targets) {
-                const nextDescribedBy = this.mergeAriaDescribedBy(control.getAttribute('aria-describedby'), activeIds);
+                const nextDescribedBy = mergeAriaDescribedBy(control.getAttribute('aria-describedby'), activeIds, this.ownedDescribedByIds);
                 if (nextDescribedBy) {
                     control.setAttribute('aria-describedby', nextDescribedBy);
                 }
@@ -2721,10 +2870,10 @@ class FormErrorControlDirective {
         const controls = this.elementRef.nativeElement.querySelectorAll('input, select, textarea');
         this.formControls.set(Array.from(controls));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormErrorControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: FormErrorControlDirective, isStandalone: true, selector: "[formErrorControl], [ngxErrorControl]", inputs: { ariaAssociationMode: { classPropertyName: "ariaAssociationMode", publicName: "ariaAssociationMode", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["formErrorControl", "ngxErrorControl"], hostDirectives: [{ directive: FormErrorDisplayDirective, inputs: ["errorDisplayMode", "errorDisplayMode"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormErrorControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: FormErrorControlDirective, isStandalone: true, selector: "[formErrorControl], [ngxErrorControl]", inputs: { ariaAssociationMode: { classPropertyName: "ariaAssociationMode", publicName: "ariaAssociationMode", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["formErrorControl", "ngxErrorControl"], hostDirectives: [{ directive: FormErrorDisplayDirective, inputs: ["errorDisplayMode", "errorDisplayMode", "warningDisplayMode", "warningDisplayMode"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormErrorControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormErrorControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[formErrorControl], [ngxErrorControl]',
@@ -2732,50 +2881,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                     hostDirectives: [
                         {
                             directive: FormErrorDisplayDirective,
-                            inputs: ['errorDisplayMode'],
+                            inputs: ['errorDisplayMode', 'warningDisplayMode'],
                         },
                     ],
                 }]
         }], ctorParameters: () => [], propDecorators: { ariaAssociationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaAssociationMode", required: false }] }] } });
 
 /**
- * Hooks into the ngModelGroup selector and triggers an asynchronous validation for a form group
- * It will use a vest suite behind the scenes
+ * @internal
+ * Shared bridge for resolving a field path and invoking FormDirective async validation.
+ * Keeps fail-open semantics for missing context/path while consolidating behavior.
+ *
+ * @param control - Control being validated by Angular forms.
+ * @param context - Optional parent form directive context.
+ * @param resolveField - Resolver that maps the control to a field path.
+ * @param validationOptions - Per-control validation options.
+ * @param source - Caller identifier for diagnostics.
+ */
+function runAsyncValidationBridge(control, context, resolveField, validationOptions, source) {
+    if (!control) {
+        return of(null);
+    }
+    if (!context) {
+        if (isDevMode()) {
+            console.warn(`[ngx-vest-forms] ${source}: No FormDirective context found. Validation skipped (fail-open).`);
+        }
+        return of(null);
+    }
+    const field = resolveField(control);
+    if (!field) {
+        if (isDevMode()) {
+            console.warn(`[ngx-vest-forms] ${source}: Could not resolve control path. Ensure the control has a valid name/path and is registered in the form tree.`);
+        }
+        return of(null);
+    }
+    const asyncValidator = context.createAsyncValidator(field, validationOptions);
+    const validationResult = asyncValidator(control);
+    if (validationResult instanceof Observable) {
+        return validationResult;
+    }
+    if (validationResult instanceof Promise) {
+        return from(validationResult);
+    }
+    return of(validationResult ?? null);
+}
+
+/**
+ * Hooks into `ngModelGroup`/`ngxModelGroup` and runs async group-level validation
+ * through the parent `FormDirective` Vest suite bridge.
  */
 class FormModelGroupDirective {
     constructor() {
+        /**
+         * Per-group async validation options.
+         *
+         * Defaults to no debounce (`{ debounceTime: 0 }`).
+         */
         this.validationOptions = input({ debounceTime: 0 }, ...(ngDevMode ? [{ debugName: "validationOptions" }] : []));
         this.formDirective = inject(FormDirective, { optional: true });
     }
+    /**
+     * Runs async validation for the current model-group control.
+     *
+     * Returns `null` (fail-open) when used outside an `ngxVestForm` context.
+     */
     validate(control) {
-        // Null check for control
-        if (!control) {
-            return of(null);
-        }
-        // Null check for form context
-        const context = this.formDirective;
-        if (!context) {
-            return of(null);
-        }
-        const { ngForm } = context;
-        const field = getFormGroupField(ngForm.control, control);
-        if (!field) {
-            return of(null);
-        }
-        const asyncValidator = context.createAsyncValidator(field, this.validationOptions());
-        const validationResult = asyncValidator(control);
-        if (validationResult instanceof Observable) {
-            return validationResult;
-        }
-        else if (validationResult instanceof Promise) {
-            return from(validationResult);
-        }
-        else {
-            return of(null);
-        }
+        return runAsyncValidationBridge(control, this.formDirective, (currentControl) => {
+            const context = this.formDirective;
+            if (!context)
+                return '';
+            return getFormGroupField(context.ngForm.control, currentControl);
+        }, this.validationOptions(), 'FormModelGroupDirective');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormModelGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: FormModelGroupDirective, isStandalone: true, selector: "[ngModelGroup],[ngxModelGroup]", inputs: { validationOptions: { classPropertyName: "validationOptions", publicName: "validationOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormModelGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: FormModelGroupDirective, isStandalone: true, selector: "[ngModelGroup],[ngxModelGroup]", inputs: { validationOptions: { classPropertyName: "validationOptions", publicName: "validationOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_ASYNC_VALIDATORS,
                 useExisting: FormModelGroupDirective,
@@ -2783,7 +2962,7 @@ class FormModelGroupDirective {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormModelGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormModelGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngModelGroup],[ngxModelGroup]',
@@ -2798,11 +2977,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
         }], propDecorators: { validationOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationOptions", required: false }] }] } });
 
 /**
- * Hooks into the ngModel selector and triggers an asynchronous validation for a form model
- * It will use a vest suite behind the scenes
+ * Hooks into `ngModel`/`ngxModel` and runs async field-level validation
+ * through the parent `FormDirective` Vest suite bridge.
  */
 class FormModelDirective {
     constructor() {
+        /**
+         * Per-control async validation options.
+         *
+         * Defaults to no debounce (`{ debounceTime: 0 }`).
+         */
         this.validationOptions = input({ debounceTime: 0 }, ...(ngDevMode ? [{ debugName: "validationOptions" }] : []));
         /**
          * Reference to the form that needs to be validated
@@ -2813,36 +2997,21 @@ class FormModelDirective {
             optional: true,
         });
     }
+    /**
+     * Runs field-level async validation for this control.
+     *
+     * Returns `null` (fail-open) when used outside an `ngxVestForm` context.
+     */
     validate(control) {
-        // Null check for control
-        if (!control) {
-            return of(null);
-        }
-        // Null check for form context
-        const context = this.formDirective;
-        if (!context) {
-            return of(null);
-        }
-        const { ngForm } = context;
-        const field = getFormControlField(ngForm.control, control);
-        if (!field) {
-            return of(null);
-        }
-        const asyncValidator = context.createAsyncValidator(field, this.validationOptions());
-        // Pass the control to the validator
-        const validationResult = asyncValidator(control);
-        if (validationResult instanceof Observable) {
-            return validationResult;
-        }
-        else if (validationResult instanceof Promise) {
-            return from(validationResult);
-        }
-        else {
-            return of(null);
-        }
+        return runAsyncValidationBridge(control, this.formDirective, (currentControl) => {
+            const context = this.formDirective;
+            if (!context)
+                return '';
+            return getFormControlField(context.ngForm.control, currentControl);
+        }, this.validationOptions(), 'FormModelDirective');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormModelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: FormModelDirective, isStandalone: true, selector: "[ngModel],[ngxModel]", inputs: { validationOptions: { classPropertyName: "validationOptions", publicName: "validationOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormModelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: FormModelDirective, isStandalone: true, selector: "[ngModel],[ngxModel]", inputs: { validationOptions: { classPropertyName: "validationOptions", publicName: "validationOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_ASYNC_VALIDATORS,
                 useExisting: FormModelDirective,
@@ -2850,7 +3019,7 @@ class FormModelDirective {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormModelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormModelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngModel],[ngxModel]',
@@ -3087,8 +3256,8 @@ class ValidateRootFormDirective {
             }), take(1), takeUntilDestroyed(this.destroyRef));
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ValidateRootFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: ValidateRootFormDirective, isStandalone: true, selector: "form[validateRootForm], form[ngxValidateRootForm]", inputs: { validationOptions: { classPropertyName: "validationOptions", publicName: "validationOptions", isSignal: true, isRequired: false, transformFunction: null }, formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null }, suite: { classPropertyName: "suite", publicName: "suite", isSignal: true, isRequired: false, transformFunction: null }, validateRootForm: { classPropertyName: "validateRootForm", publicName: "validateRootForm", isSignal: true, isRequired: false, transformFunction: null }, ngxValidateRootForm: { classPropertyName: "ngxValidateRootForm", publicName: "ngxValidateRootForm", isSignal: true, isRequired: false, transformFunction: null }, validateRootFormMode: { classPropertyName: "validateRootFormMode", publicName: "validateRootFormMode", isSignal: true, isRequired: false, transformFunction: null }, ngxValidateRootFormMode: { classPropertyName: "ngxValidateRootFormMode", publicName: "ngxValidateRootFormMode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ValidateRootFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: ValidateRootFormDirective, isStandalone: true, selector: "form[validateRootForm], form[ngxValidateRootForm]", inputs: { validationOptions: { classPropertyName: "validationOptions", publicName: "validationOptions", isSignal: true, isRequired: false, transformFunction: null }, formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null }, suite: { classPropertyName: "suite", publicName: "suite", isSignal: true, isRequired: false, transformFunction: null }, validateRootForm: { classPropertyName: "validateRootForm", publicName: "validateRootForm", isSignal: true, isRequired: false, transformFunction: null }, ngxValidateRootForm: { classPropertyName: "ngxValidateRootForm", publicName: "ngxValidateRootForm", isSignal: true, isRequired: false, transformFunction: null }, validateRootFormMode: { classPropertyName: "validateRootFormMode", publicName: "validateRootFormMode", isSignal: true, isRequired: false, transformFunction: null }, ngxValidateRootFormMode: { classPropertyName: "ngxValidateRootFormMode", publicName: "ngxValidateRootFormMode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_ASYNC_VALIDATORS,
                 useExisting: ValidateRootFormDirective,
@@ -3096,7 +3265,7 @@ class ValidateRootFormDirective {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ValidateRootFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ValidateRootFormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form[validateRootForm], form[ngxValidateRootForm]',
@@ -3235,6 +3404,10 @@ function createEmptyFormState() {
     };
 }
 
+// NOTE: `typeof ngDevMode !== 'undefined' && ngDevMode` is kept inline
+// (not extracted to a helper) because Angular's build optimizer relies on
+// this exact pattern for tree-shaking dev-only code from production bundles.
+const LOG_PREFIX = '[ngx-vest-forms] ValidationConfigBuilder';
 /**
  * Fluent builder for creating type-safe validation configurations.
  *
@@ -3324,7 +3497,7 @@ class ValidationConfigBuilder {
         if (typeof ngDevMode !== 'undefined' && ngDevMode) {
             const duplicates = deps.filter((d) => existing.includes(d));
             if (duplicates.length > 0) {
-                console.warn(`[ngx-vest-forms] ValidationConfigBuilder: Duplicate dependencies detected.\n` +
+                console.warn(`${LOG_PREFIX}: Duplicate dependencies detected.\n` +
                     `  Trigger: '${trigger}'\n` +
                     `  Duplicates: ${duplicates.map((d) => `'${d}'`).join(', ')}\n` +
                     `  These will be automatically deduplicated.`);
@@ -3392,7 +3565,7 @@ class ValidationConfigBuilder {
             const hasField1ToField2 = this.config[field1]?.includes(field2) ?? false;
             const hasField2ToField1 = this.config[field2]?.includes(field1) ?? false;
             if (hasField1ToField2 && hasField2ToField1) {
-                console.warn(`[ngx-vest-forms] ValidationConfigBuilder: Duplicate bidirectional relationship detected.\n` +
+                console.warn(`${LOG_PREFIX}: Duplicate bidirectional relationship detected.\n` +
                     `  Fields: '${field1}' ↔ '${field2}'\n` +
                     `  This bidirectional relationship was already configured.`);
             }
@@ -3627,11 +3800,6 @@ function createValidationConfig() {
     return new ValidationConfigBuilder();
 }
 
-/**
- * Converts a flat array to an object with numeric keys.
- * Does not recurse into nested arrays or objects.
- * Uses reduce() for optimal single-pass conversion.
- */
 function arrayToObject(array) {
     return array.reduce((acc, value, index) => {
         acc[index] = value;
@@ -3686,7 +3854,11 @@ function objectToArray(object, keys) {
     if (processed && typeof processed === 'object' && !Array.isArray(processed)) {
         const entries = Object.entries(processed);
         if (entries.length === 1) {
-            const [k, v] = entries[0];
+            const firstEntry = entries[0];
+            if (!firstEntry) {
+                return processed;
+            }
+            const [k, v] = firstEntry;
             if (keys.includes(k) &&
                 Array.isArray(v) &&
                 v.every((element) => typeof element === 'object' && element !== null)) {
@@ -3785,7 +3957,7 @@ function isNumericObject(value) {
  * Uses `Object.entries()` for efficient field clearing without mutation.
  * Only processes fields that need to be cleared, preserving other field values.
  *
- * @template T - The form model type, must extend Record<string, any>
+ * @template T - The form model type, must extend Record<string, unknown>
  * @param currentState - The current form state object
  * @param conditions - Object mapping field names to boolean conditions (true = clear field)
  * @returns New state object with specified fields cleared (set to undefined)
@@ -3838,11 +4010,12 @@ function isNumericObject(value) {
  */
 function clearFieldsWhen(currentState, conditions) {
     const result = { ...currentState };
-    Object.entries(conditions).forEach(([fieldName, shouldClear]) => {
+    for (const fieldName of Object.keys(conditions)) {
+        const shouldClear = conditions[fieldName];
         if (shouldClear) {
             result[fieldName] = undefined;
         }
-    });
+    }
     return result;
 }
 /**
@@ -3857,7 +4030,7 @@ function clearFieldsWhen(currentState, conditions) {
  * **Note:** Unlike `clearFieldsWhen`, this function always clears the specified fields
  * regardless of conditions. Use this when you want unconditional field removal.
  *
- * @template T - The form model type, must extend Record<string, any>
+ * @template T - The form model type, must extend Record<string, unknown>
  * @param currentState - The current form state object
  * @param fieldsToClear - Array of field names to clear (set to undefined)
  * @returns New state object with specified fields cleared
@@ -3883,9 +4056,9 @@ function clearFieldsWhen(currentState, conditions) {
  */
 function clearFields(currentState, fieldsToClear) {
     const result = { ...currentState };
-    fieldsToClear.forEach((fieldName) => {
+    for (const fieldName of fieldsToClear) {
         result[fieldName] = undefined;
-    });
+    }
     return result;
 }
 /**
@@ -3902,7 +4075,7 @@ function clearFields(currentState, fieldsToClear) {
  *
  * **Returns:** `Partial<T>` because the result may not contain all original fields.
  *
- * @template T - The form model type, must extend Record<string, any>
+ * @template T - The form model type, must extend Record<string, unknown>
  * @param currentState - The current form state object
  * @param conditions - Object mapping field names to boolean conditions (true = keep field)
  * @returns New state object containing only fields where condition is true
@@ -3939,12 +4112,12 @@ function clearFields(currentState, fieldsToClear) {
  */
 function keepFieldsWhen(currentState, conditions) {
     const result = {};
-    Object.entries(conditions).forEach(([fieldName, shouldKeep]) => {
+    for (const fieldName of Object.keys(conditions)) {
+        const shouldKeep = conditions[fieldName];
         if (shouldKeep && fieldName in currentState) {
-            result[fieldName] =
-                currentState[fieldName];
+            result[fieldName] = currentState[fieldName];
         }
-    });
+    }
     return result;
 }