ngx-vest-forms 2.4.0 → 2.5.0

package/fesm2022/ngx-vest-forms.mjs

@@ -1,8 +1,8 @@
 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 { InjectionToken, isDevMode, inject, ElementRef, DestroyRef, ChangeDetectorRef, signal, linkedSignal, computed, input, effect, untracked, Directive, contentChild, Injector, afterEveryRender, ChangeDetectionStrategy, Component, booleanAttribute, Optional } from '@angular/core';
 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';
+import { startWith, merge, filter, map, switchMap, take, of, scan, distinctUntilChanged, timer, Observable, catchError, EMPTY, debounceTime, tap, race, from } from 'rxjs';
 
 /**
  * @deprecated Use NGX_ERROR_DISPLAY_MODE_TOKEN instead
@@ -443,6 +443,81 @@ function stringifyFieldPath(path) {
     return result;
 }
 
+const DEFAULT_INVALID_SELECTOR = [
+    '.ngx-control-wrapper--invalid',
+    '.ngx-form-group-wrapper--invalid',
+    'input[aria-invalid="true"]',
+    'textarea[aria-invalid="true"]',
+    'select[aria-invalid="true"]',
+].join(', ');
+const DEFAULT_FOCUS_SELECTOR = [
+    'input:not([type="hidden"]):not([disabled])',
+    'textarea:not([disabled])',
+    'select:not([disabled])',
+    'button:not([disabled])',
+    'a[href]',
+    '[tabindex]:not([tabindex="-1"]):not([disabled])',
+].join(', ');
+/**
+ * Focus candidates that are already invalid.
+ * This ensures invalid group wrappers focus a failing control before any valid sibling.
+ */
+const INVALID_FOCUS_PREFERRED_SELECTOR = [
+    'input[aria-invalid="true"]:not([type="hidden"]):not([disabled])',
+    'textarea[aria-invalid="true"]:not([disabled])',
+    'select[aria-invalid="true"]:not([disabled])',
+    '[aria-invalid="true"][tabindex]:not([tabindex="-1"]):not([disabled])',
+].join(', ');
+const REDUCED_MOTION_MEDIA_QUERY = '(prefers-reduced-motion: reduce)';
+function prefersReducedMotion() {
+    return (typeof globalThis.matchMedia === 'function' &&
+        globalThis.matchMedia(REDUCED_MOTION_MEDIA_QUERY).matches);
+}
+function resolveFirstInvalidScrollBehavior(behavior) {
+    if (behavior !== undefined) {
+        return behavior;
+    }
+    return prefersReducedMotion() ? 'auto' : 'smooth';
+}
+function resolveFirstInvalidElement(root, invalidSelector) {
+    try {
+        const firstInvalid = root.querySelector(invalidSelector);
+        return firstInvalid instanceof HTMLElement ? firstInvalid : null;
+    }
+    catch {
+        return null;
+    }
+}
+function openCollapsedDetailsAncestors(root, element) {
+    let current = element;
+    while (current !== root) {
+        const parentElement = current.parentElement;
+        if (!parentElement) {
+            break;
+        }
+        if (parentElement instanceof HTMLDetailsElement) {
+            parentElement.open = true;
+        }
+        current = parentElement;
+    }
+}
+function resolveFirstInvalidFocusTarget(firstInvalid, focusSelector) {
+    const preferredInvalidTarget = firstInvalid.querySelector(INVALID_FOCUS_PREFERRED_SELECTOR);
+    if (preferredInvalidTarget instanceof HTMLElement) {
+        return preferredInvalidTarget;
+    }
+    try {
+        if (firstInvalid.matches(focusSelector)) {
+            return firstInvalid;
+        }
+        const fallbackTarget = firstInvalid.querySelector(focusSelector);
+        return fallbackTarget instanceof HTMLElement ? fallbackTarget : null;
+    }
+    catch {
+        return null;
+    }
+}
+
 const ROOT_FORM = 'rootForm';
 
 const ERROR_MESSAGES_KEY = 'errors';
@@ -887,8 +962,14 @@ class FormDirective {
      * even when the form's aggregate touched flag is already true.
      */
     #blurTick;
+    /**
+     * Counter signal tied to validation feedback updates so `formState()` can
+     * recompute whenever the underlying error set changes.
+     */
+    #validationFeedbackTick;
     constructor() {
         this.ngForm = inject(NgForm, { self: true });
+        this.elementRef = inject((ElementRef));
         this.destroyRef = inject(DestroyRef);
         this.cdr = inject(ChangeDetectorRef);
         this.configDebounceTime = inject(NGX_VALIDATION_CONFIG_DEBOUNCE_TOKEN);
@@ -954,8 +1035,9 @@ class FormDirective {
          * when form status changes but actual values/errors remain the same.
          */
         this.formState = computed(() => {
-            // Tie to status signal to ensure recomputation on validation changes
-            this.#statusSignal();
+            // Tie to validation feedback instead of aggregate status so errors update
+            // even when the root form remains INVALID -> INVALID.
+            this.#validationFeedbackTick();
             return {
                 valid: this.ngForm.form.valid,
                 errors: getAllFormErrors(this.ngForm.form),
@@ -1007,6 +1089,21 @@ class FormDirective {
          * @param v
          */
         this.validationConfig = input(null, ...(ngDevMode ? [{ debugName: "validationConfig" }] : []));
+        /**
+         * Emits whenever validation feedback may have changed, even if the aggregate
+         * root form status string stays the same.
+         */
+        this.validationFeedback$ = merge(this.ngForm.form.events.pipe(filter((v) => v instanceof StatusChangeEvent), map((v) => v.status), filter((v) => v !== 'PENDING')), this.ngForm.ngSubmit.pipe(switchMap(() => {
+            if (this.ngForm.form.status === 'PENDING') {
+                return this.ngForm.form.statusChanges.pipe(filter((status) => status !== 'PENDING'), take(1));
+            }
+            return of(this.ngForm.form.status);
+        })));
+        /**
+         * Counter signal tied to validation feedback updates so `formState()` can
+         * recompute whenever the underlying error set changes.
+         */
+        this.#validationFeedbackTick = toSignal(this.validationFeedback$.pipe(scan((count) => count + 1, 0), startWith(0)), { initialValue: 0 });
         this.pending$ = this.ngForm.form.events.pipe(filter((v) => v instanceof StatusChangeEvent), map((v) => v.status), filter((v) => v === 'PENDING'), distinctUntilChanged());
         /**
          * Emits every time the form status changes in a state
@@ -1033,18 +1130,7 @@ class FormDirective {
          *
          * Cleanup is handled automatically by the directive when it's destroyed.
          */
-        this.errorsChange = outputFromObservable(merge(
-        // Status change events (non-PENDING) - emit immediately
-        this.ngForm.form.events.pipe(filter((v) => v instanceof StatusChangeEvent), map((v) => v.status), filter((v) => v !== 'PENDING')), 
-        // Submit events - wait for async validation to complete before emitting
-        this.ngForm.ngSubmit.pipe(switchMap(() => {
-            // If form is PENDING (async validation in progress), wait for it to complete
-            if (this.ngForm.form.status === 'PENDING') {
-                return this.ngForm.form.statusChanges.pipe(filter((status) => status !== 'PENDING'), take(1));
-            }
-            // Form not pending, emit immediately
-            return of(this.ngForm.form.status);
-        }))).pipe(map(() => getAllFormErrors(this.ngForm.form)), takeUntilDestroyed(this.destroyRef)));
+        this.errorsChange = outputFromObservable(this.validationFeedback$.pipe(map(() => getAllFormErrors(this.ngForm.form)), takeUntilDestroyed(this.destroyRef)));
         /**
          * Triggered as soon as the form becomes dirty
          *
@@ -1278,6 +1364,46 @@ class FormDirective {
         this.ngForm.form.markAllAsTouched();
         this.#blurTick.update((v) => v + 1);
     }
+    /**
+     * Finds the first invalid element in this form, scrolls it into view, and focuses it.
+     *
+     * Useful in custom submit flows where `markAllAsTouched()` is triggered externally
+     * and the app then wants to guide keyboard and assistive-technology users to the
+     * first failing field.
+     *
+     * @returns The focused element when a focusable target exists, otherwise the first
+     *          matched invalid element. Returns `null` when no invalid element is found.
+     */
+    focusFirstInvalidControl(options = {}) {
+        const { block = 'center', inline = 'nearest', focus = true, preventScrollOnFocus = true, openCollapsedParents = true, invalidSelector = DEFAULT_INVALID_SELECTOR, focusSelector = DEFAULT_FOCUS_SELECTOR, } = options;
+        const behavior = resolveFirstInvalidScrollBehavior(options.behavior);
+        const root = this.elementRef.nativeElement;
+        const firstInvalid = resolveFirstInvalidElement(root, invalidSelector);
+        if (!firstInvalid) {
+            return null;
+        }
+        if (openCollapsedParents) {
+            openCollapsedDetailsAncestors(root, firstInvalid);
+        }
+        const focusTarget = resolveFirstInvalidFocusTarget(firstInvalid, focusSelector);
+        const scrollTarget = focusTarget ?? firstInvalid;
+        scrollTarget.scrollIntoView({ behavior, block, inline });
+        if (focus && focusTarget) {
+            focusTarget.focus({ preventScroll: preventScrollOnFocus });
+        }
+        return focusTarget ?? firstInvalid;
+    }
+    /**
+     * Finds and scrolls the first invalid element into view without moving focus.
+     *
+     * @returns The resolved element, or `null` when no invalid element is found.
+     */
+    scrollToFirstInvalidControl(options = {}) {
+        return this.focusFirstInvalidControl({
+            ...options,
+            focus: false,
+        });
+    }
     /**
      * Host handler: called whenever any descendant field loses focus.
      * Used to make touched-path tracking react immediately on blur/tab.
@@ -4129,5 +4255,5 @@ function keepFieldsWhen(currentState, conditions) {
  * Generated bundle index. Do not edit.
  */
 
-export { ControlWrapperComponent, FormControlStateDirective, FormDirective, FormErrorControlDirective, FormErrorDisplayDirective, FormGroupWrapperComponent, FormModelDirective, FormModelGroupDirective, NGX_ERROR_DISPLAY_MODE_TOKEN, NGX_VALIDATION_CONFIG_DEBOUNCE_TOKEN, NGX_WARNING_DISPLAY_MODE_TOKEN, NgxVestForms, ROOT_FORM, ROOT_FORM as ROOT_FORM_CONSTANT, SC_ERROR_DISPLAY_MODE_TOKEN, ValidateRootFormDirective, ValidationConfigBuilder, arrayToObject, clearFields, clearFieldsWhen, cloneDeep, createDebouncedPendingState, createEmptyFormState, createValidationConfig, deepArrayToObject, fastDeepEqual, getAllFormErrors, getFormControlField, getFormGroupField, keepFieldsWhen, mergeValuesAndRawValues, objectToArray, parseFieldPath, set, setValueAtPath, shallowEqual, stringifyFieldPath, validateShape, vestForms, vestFormsViewProviders };
+export { ControlWrapperComponent, DEFAULT_FOCUS_SELECTOR, DEFAULT_INVALID_SELECTOR, FormControlStateDirective, FormDirective, FormErrorControlDirective, FormErrorDisplayDirective, FormGroupWrapperComponent, FormModelDirective, FormModelGroupDirective, NGX_ERROR_DISPLAY_MODE_TOKEN, NGX_VALIDATION_CONFIG_DEBOUNCE_TOKEN, NGX_WARNING_DISPLAY_MODE_TOKEN, NgxVestForms, ROOT_FORM, ROOT_FORM as ROOT_FORM_CONSTANT, SC_ERROR_DISPLAY_MODE_TOKEN, ValidateRootFormDirective, ValidationConfigBuilder, arrayToObject, clearFields, clearFieldsWhen, cloneDeep, createDebouncedPendingState, createEmptyFormState, createValidationConfig, deepArrayToObject, fastDeepEqual, getAllFormErrors, getFormControlField, getFormGroupField, keepFieldsWhen, mergeAriaDescribedBy, mergeValuesAndRawValues, objectToArray, parseAriaIdTokens, parseFieldPath, resolveAssociationTargets, set, setValueAtPath, shallowEqual, stringifyFieldPath, validateShape, vestForms, vestFormsViewProviders };
 //# sourceMappingURL=ngx-vest-forms.mjs.map