@ng-forge/dynamic-forms 0.6.0 → 0.6.1

package/fesm2022/{ng-forge-dynamic-forms-ng-forge-dynamic-forms-Bf6Qnz0T.mjs → ng-forge-dynamic-forms-ng-forge-dynamic-forms-DXXp5M0q.mjs}

@@ -3,8 +3,8 @@ import { InjectionToken, inject, Injectable, isSignal, untracked, isDevMode, isW
 import { NgComponentOutlet } from '@angular/common';
 import { toObservable, toSignal, takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
 import { submit, email, min, max, minLength, maxLength, pattern, required, validate, validateAsync, validateHttp, disabled, readonly, hidden, applyEach, applyWhenValue, applyWhen, apply, schema, validateStandardSchema, validateTree, form, provideSignalFormsConfig } from '@angular/forms/signals';
-import { isObservable, firstValueFrom, switchMap, EMPTY, from, Subject, filter, debounceTime, distinctUntilChanged, tap, startWith, pairwise, map as map$1, Observable, combineLatestWith, auditTime, exhaustMap, scheduled, queueScheduler, of, merge, timer, catchError as catchError$1, concat, defer, combineLatest, pipe, forkJoin, scan as scan$1, concatMap, take as take$1 } from 'rxjs';
-import { scan, map, filter as filter$1, take, switchMap as switchMap$1, shareReplay, catchError } from 'rxjs/operators';
+import { isObservable, firstValueFrom, exhaustMap, EMPTY, from, catchError, Subject, filter, TimeoutError, of, throwError, debounceTime, distinctUntilChanged, tap, take as take$1, startWith, pairwise, map as map$1, switchMap as switchMap$1, Observable, takeUntil, combineLatestWith, auditTime, scheduled, queueScheduler, merge, timer, concat, defer, combineLatest, pipe, forkJoin, scan as scan$1, concatMap } from 'rxjs';
+import { scan, map, filter as filter$1, take, switchMap, timeout, catchError as catchError$1, shareReplay } from 'rxjs/operators';
 import { explicitEffect } from 'ngxtension/explicit-effect';
 import { HttpClient } from '@angular/common/http';
 import { isStandardSchemaMarker } from '@ng-forge/dynamic-forms/schema';
@@ -14,12 +14,11 @@ import { NG_STATUS_CLASSES } from '@angular/forms/signals/compat';
  * Wraps a submission action to handle both Promise and Observable returns.
  * Converts Observables to Promises for compatibility with Angular Signal Forms' submit().
  *
- * The return type uses `void` to match Angular Signal Forms' expected action signature.
- * The actual result from the action is preserved but typed as void since Angular's
- * submit() function handles the result internally.
+ * Errors are NOT caught here — they propagate so that submit() can reject its Promise,
+ * allowing the caller's catchError to log and keep the submission stream alive.
  *
  * @param action - The submission action function
- * @returns A wrapped function that always returns a Promise
+ * @returns A wrapped function that returns a Promise
  */
 function wrapSubmissionAction(action) {
     return async (formTree) => {
@@ -39,7 +38,7 @@ function wrapSubmissionAction(action) {
  * - Listens for submit events from the event bus
  * - If a submission.action is configured, wraps it and uses Angular Signal Forms' submit()
  * - Handles both Promise and Observable returns from the action
- * - Uses switchMap to cancel any in-flight submission when a new one starts
+ * - Uses exhaustMap to ignore new submissions while one is in-flight (first-submit-wins)
  *
  * The returned Observable should be subscribed to with takeUntilDestroyed() in the component.
  *
@@ -59,14 +58,24 @@ function wrapSubmissionAction(action) {
  * ```
  */
 function createSubmissionHandler(options) {
-    const { eventBus, configSignal, formSignal } = options;
-    return eventBus.on('submit').pipe(switchMap(() => {
+    const { eventBus, configSignal, formSignal, validSignal, logger } = options;
+    // exhaustMap ensures first-submit-wins: a second submit event while the first
+    // is in-flight is silently dropped rather than cancelling the running Promise.
+    // switchMap would unsubscribe the Observable wrapper but cannot cancel the
+    // underlying Promise, causing both side effects to execute.
+    return eventBus.on('submit').pipe(exhaustMap(() => {
         const submissionConfig = configSignal().submission;
         // If no submission action is configured, let the submitted output handle it
         // This maintains backward compatibility for users handling submission manually
         if (!submissionConfig?.action) {
             return EMPTY;
         }
+        // Guard: match the (submitted) output's safety contract — reject submission
+        // when the form is invalid or has pending async validators.
+        if (!validSignal()) {
+            logger.debug('Submission action skipped: form is not valid (invalid or pending async validators)');
+            return EMPTY;
+        }
         // Type assertion needed: submission.action accepts the form tree but its signature
         // is defined broadly in FormConfig. The actual runtime type is FieldTree<TModel>.
         const wrappedAction = wrapSubmissionAction(submissionConfig.action);
@@ -75,7 +84,12 @@ function createSubmissionHandler(options) {
         // - Sets form.submitting() to true during execution
         // - Applies server errors to form fields on completion
         // - Sets form.submitting() to false when done
-        return from(submit(formSignal(), wrappedAction));
+        // catchError keeps the exhaustMap stream alive after action failure —
+        // without it, an unhandled error would terminate all future submissions.
+        return from(submit(formSignal(), wrappedAction)).pipe(catchError((error) => {
+            logger.error('Submission action failed:', error);
+            return EMPTY;
+        }));
     }));
 }
 
@@ -331,6 +345,33 @@ function createArrayItemIdGenerator() {
     return () => `item-${counter++}`;
 }
 
+/**
+ * Injection token for the dynamic forms logger.
+ *
+ * Provided by provideDynamicForm() with ConsoleLogger as default.
+ * Override with withLoggerConfig(false) to disable logging.
+ */
+const DynamicFormLogger = new InjectionToken('DynamicFormLogger');
+
+/**
+ * No-operation logger implementation.
+ * All methods are no-ops - used in production by default.
+ */
+class NoopLogger {
+    debug() {
+        // Intentionally empty
+    }
+    info() {
+        // Intentionally empty
+    }
+    warn() {
+        // Intentionally empty
+    }
+    error() {
+        // Intentionally empty
+    }
+}
+
 /**
  * Safely attempts to inject a dependency using an InjectionToken.
  * Returns the default value if called outside an injection context.
@@ -364,77 +405,83 @@ function attachFormValue(event, formValue) {
     return Object.assign(Object.create(prototype), event, { formValue });
 }
 /**
- * Event bus service for form-wide event communication.
+ * Event bus for form-wide event communication between field components.
  *
- * Provides type-safe event dispatching and subscription for form components
- * to communicate without direct coupling. Uses RxJS observables for reactive
- * event handling and supports both single event type and multiple event type subscriptions.
+ * **Intended for use inside DynamicForm** — i.e. within custom field components,
+ * field mappers, or other services that live inside the form's component injector.
+ * Inject it directly to dispatch or observe events from within a field:
  *
- * @example
  * ```typescript
- * @Component({
- *   providers: [EventBus]
- * })
- * export class MyFormComponent {
- *   constructor(private eventBus: EventBus) {
- *     // Subscribe to form submission events
- *     this.eventBus.on<SubmitEvent>('submit').subscribe(() => {
- *       console.log('Form was submitted');
- *     });
- *
- *     // Subscribe to multiple event types
- *     this.eventBus.on<SubmitEvent | FormResetEvent>(['submit', 'form-reset']).subscribe(event => {
- *       console.log('Form event:', event.type);
- *     });
- *   }
+ * // Inside a custom field component
+ * export class MyFieldComponent {
+ *   private readonly eventBus = inject(EventBus);
  *
- *   onSubmit() {
- *     // Dispatch a submit event
- *     this.eventBus.dispatch(SubmitEvent);
+ *   onAction() {
+ *     this.eventBus.dispatch(arrayEvent('items').append(template));
  *   }
  * }
  * ```
+ *
+ * **If you are outside DynamicForm** (e.g. in a host component or a service that wraps
+ * the form), use {@link EventDispatcher} instead. Injecting `EventBus` in a parent
+ * component gives you a *different instance* that the form knows nothing about.
+ *
+ * `EventBus` is scoped to each `DynamicForm` instance via `provideDynamicFormDI()`.
+ * It provides type-safe dispatching and RxJS-based subscription for all form events.
+ *
+ * @see EventDispatcher — for dispatching events from outside the form
  */
+const FALLBACK_LOGGER = new NoopLogger();
 class EventBus {
     pipeline$ = new Subject();
     globalEmitFormValue = safeInjectToken(EMIT_FORM_VALUE_ON_EVENTS, false);
     rootFormRegistry = safeInjectClass(RootFormRegistryService, null);
     formOptions = safeInjectToken(FORM_OPTIONS, null);
+    logger = safeInjectToken(DynamicFormLogger, FALLBACK_LOGGER);
     events$ = this.pipeline$.asObservable();
+    dispatch(eventOrConstructor, ...args) {
+        if (typeof eventOrConstructor !== 'function' && 'type' in eventOrConstructor) {
+            this.emit(eventOrConstructor);
+        }
+        else {
+            this.emit(new eventOrConstructor(...args));
+        }
+    }
     /**
-     * Dispatches an event to all subscribers.
-     *
-     * Creates an instance of the provided event constructor and broadcasts it
-     * through the event pipeline to all active subscribers.
-     *
-     * If `withEventFormValue()` is enabled globally or `options.emitFormValueOnEvents`
-     * is set to `true` in the form config, the current form value will be attached
-     * to the event's `formValue` property.
-     *
-     * @param eventConstructor - Constructor function for the event to dispatch
-     *
-     * @example
-     * ```typescript
-     * // Dispatch a submit event
-     * eventBus.dispatch(SubmitEvent);
-     *
-     * // Dispatch a custom event
-     * eventBus.dispatch(CustomFormEvent);
-     * ```
+     * Dispatches a pre-created event instance directly.
+     * Used internally by EventDispatcher to forward events into the bus.
+     * @internal
+     */
+    emitInstance(event) {
+        this.emit(event);
+    }
+    /**
+     * Shared emit path for both dispatch() and emitInstance().
+     * Attaches form value if configured, then pushes to the pipeline.
      */
-    // TypeScript limitation: Must use ConstructorParameters which relies on `any` in FormEventConstructor
-    dispatch(eventConstructor, ...args) {
-        const event = new eventConstructor(...args);
+    emit(event) {
         if (this.shouldEmitFormValue()) {
             const formValue = this.rootFormRegistry?.formValue();
             // Only attach if form value exists and has at least one field.
             // Empty objects {} are not attached - use hasFormValue() to check.
             if (formValue && Object.keys(formValue).length > 0) {
-                this.pipeline$.next(attachFormValue(event, formValue));
+                this.safeEmit(attachFormValue(event, formValue));
                 return;
             }
         }
-        this.pipeline$.next(event);
+        this.safeEmit(event);
+    }
+    /**
+     * Emits an event through the pipeline. Catches any synchronous exception that escapes
+     * RxJS's own error handling so dispatch() callers are never disrupted by a failing subscriber.
+     */
+    safeEmit(event) {
+        try {
+            this.pipeline$.next(event);
+        }
+        catch (err) {
+            this.logger.error('[Dynamic Forms] Exception in EventBus subscriber during dispatch', err);
+        }
     }
     /**
      * Determines whether form value should be attached to events.
@@ -485,10 +532,10 @@ class EventBus {
         }
         return this.pipeline$.pipe(filter((event) => event.type === eventType));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: EventBus, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: EventBus });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventBus, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventBus });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: EventBus, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventBus, decorators: [{
             type: Injectable
         }] });
 
@@ -506,6 +553,15 @@ class ComponentInitializedEvent {
     }
 }
 
+/**
+ * Injection token for configuring the initialization timeout in milliseconds.
+ * Defaults to 10 seconds. When the timeout is reached, a warning is logged
+ * and (initialized) emits true as a best-effort fallback.
+ */
+const INITIALIZATION_TIMEOUT_MS = new InjectionToken('INITIALIZATION_TIMEOUT_MS', {
+    providedIn: 'root',
+    factory: () => 10_000,
+});
 /**
  * Creates an observable that tracks component initialization progress.
  *
@@ -568,8 +624,10 @@ function createDetailedInitializationTracker(eventBus, expectedCount) {
  * Uses shareReplay({ bufferSize: 1, refCount: false }) to ensure exactly one emission
  * that can be received by late subscribers and keeps the subscription alive.
  *
- * This utility function replaces the manual ReplaySubject pattern for tracking initialization.
- * The count includes container components (dynamic-form, pages, rows, groups).
+ * Includes a configurable timeout (default 10s via INITIALIZATION_TIMEOUT_MS)
+ * so that (initialized) does not hang forever if a container component throws
+ * before emitting its initialization event. On timeout, a warning is logged
+ * and true is emitted as a best-effort fallback.
  *
  * @param options - Configuration options for initialization tracking
  * @returns Observable<boolean> that emits true when all components are initialized
@@ -589,12 +647,29 @@ function createDetailedInitializationTracker(eventBus, expectedCount) {
  */
 function setupInitializationTracking(options) {
     const { eventBus, totalComponentsCount, injector, componentId } = options;
-    return toObservable(totalComponentsCount, { injector }).pipe(take(1), switchMap$1((count) => {
+    const timeoutMs = injector.get(INITIALIZATION_TIMEOUT_MS);
+    const logger = injector.get(DynamicFormLogger);
+    return toObservable(totalComponentsCount, { injector }).pipe(take(1), switchMap((count) => {
+        let tracking$;
         if (count === 1) {
             // Only dynamic-form component, emit immediately when it initializes
-            return eventBus.on('component-initialized').pipe(filter$1((event) => event.componentType === 'dynamic-form' && event.componentId === componentId), map(() => true), take(1));
+            tracking$ = eventBus.on('component-initialized').pipe(filter$1((event) => event.componentType === 'dynamic-form' && event.componentId === componentId), map(() => true), take(1));
         }
-        return createInitializationTracker(eventBus, count);
+        else {
+            tracking$ = createInitializationTracker(eventBus, count);
+        }
+        // Timeout guard: emit best-effort true if a container throws before initializing
+        return tracking$.pipe(timeout(timeoutMs), catchError$1((error) => {
+            if (error instanceof TimeoutError) {
+                logger.warn(`Initialization timed out after ${timeoutMs}ms. ` +
+                    `Expected ${count} component(s) to initialize but not all reported in time. ` +
+                    'This may indicate a container component threw during initialization. ' +
+                    'Emitting (initialized) as best-effort.');
+                // Emit true as best-effort so consumers are not stuck waiting forever
+                return of(true);
+            }
+            return throwError(() => error);
+        }));
     }), shareReplay({ bufferSize: 1, refCount: false }));
 }
 
@@ -747,14 +822,6 @@ function isDisplayOnlyField(field) {
     return field.type === 'text' || isContainerField(field);
 }
 
-/**
- * Injection token for the dynamic forms logger.
- *
- * Provided by provideDynamicForm() with ConsoleLogger as default.
- * Override with withLoggerConfig(false) to disable logging.
- */
-const DynamicFormLogger = new InjectionToken('DynamicFormLogger');
-
 /**
  * Default debounce duration in milliseconds.
  */
@@ -1361,10 +1428,18 @@ class FunctionRegistryService {
         return this.propertyDerivationFunctions.get(name) ?? this.derivationFunctions.get(name);
     }
     /**
-     * Get all property derivation functions as an object
+     * Get all property derivation functions as an object.
+     *
+     * Merges both `derivationFunctions` and `propertyDerivationFunctions` maps,
+     * with `propertyDerivationFunctions` taking precedence. This allows users
+     * to migrate functions from `propertyDerivations` to `derivations` without
+     * breaking property derivation lookups.
      */
     getPropertyDerivationFunctions() {
-        return Object.fromEntries(this.propertyDerivationFunctions);
+        return {
+            ...Object.fromEntries(this.derivationFunctions),
+            ...Object.fromEntries(this.propertyDerivationFunctions),
+        };
     }
     /**
      * Set property derivation functions from a config object.
@@ -1689,10 +1764,10 @@ class FunctionRegistryService {
         this.clearAsyncValidators();
         this.clearHttpValidators();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FunctionRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FunctionRegistryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FunctionRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FunctionRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FunctionRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FunctionRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -1731,10 +1806,10 @@ class SchemaRegistryService {
         }
         return schema;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SchemaRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SchemaRegistryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SchemaRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SchemaRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SchemaRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SchemaRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -2234,6 +2309,9 @@ class FieldContextRegistryService {
         }
         const resolved = {};
         for (const [key, value] of Object.entries(externalDataRecord)) {
+            if (!isSignal(value)) {
+                throw new DynamicFormError(`externalData["${key}"] must be a Signal. Got: ${typeof value}. Wrap it with signal(yourValue).`);
+            }
             resolved[key] = reactive ? value() : untracked(() => value());
         }
         return resolved;
@@ -2312,10 +2390,10 @@ class FieldContextRegistryService {
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FieldContextRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FieldContextRegistryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldContextRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldContextRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FieldContextRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldContextRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -2812,6 +2890,9 @@ class Tokenizer {
             value += this.expression[this.position];
             this.position++;
         }
+        if (!/^\d+(\.\d+)?$/.test(value)) {
+            throw new ExpressionParserError(`Invalid number: ${value}`, start, this.expression);
+        }
         return { type: TokenType.NUMBER, value, position: start };
     }
     readIdentifierOrKeyword() {
@@ -2934,7 +3015,12 @@ class Parser {
         if (this.isAtEnd()) {
             throw new ExpressionParserError('Empty expression', 0, this.expression);
         }
-        return this.parseExpression();
+        const result = this.parseExpression();
+        if (!this.isAtEnd()) {
+            const token = this.peek();
+            throw new ExpressionParserError(`Unexpected token '${token.value}' at position ${token.position} — expression has trailing content`, token.position, this.expression);
+        }
+        return result;
     }
     parseExpression() {
         return this.parseLogicalOr();
@@ -5504,6 +5590,9 @@ function createDerivationWarningTracker() {
  * Resolves an `HttpRequestConfig` into an `HttpResourceRequest` by evaluating
  * expression-based query params and (optionally) body values.
  *
+ * Returns `null` if any path parameter resolves to `undefined` or `null`,
+ * signaling that the request should be suppressed (the URL would be malformed).
+ *
  * `debounceMs` is intentionally ignored — it's used by HTTP derivations/conditions (PRs 3-4),
  * not by validators.
  */
@@ -5512,7 +5601,12 @@ function resolveHttpRequest(config, context) {
     if (config.params) {
         for (const [key, expression] of Object.entries(config.params)) {
             const value = ExpressionParser.evaluate(expression, context);
-            url = url.replace(`:${key}`, encodeURIComponent(value != null ? String(value) : ''));
+            if (value == null) {
+                context.logger.debug(`HTTP request suppressed: path param '${key}' resolved to ${String(value)} ` +
+                    `(expression: '${expression}'). The request will not be sent.`);
+                return null;
+            }
+            url = url.replace(`:${key}`, encodeURIComponent(String(value)));
         }
     }
     if (config.queryParams) {
@@ -5553,6 +5647,20 @@ function resolveHttpRequest(config, context) {
     return request;
 }
 
+/**
+ * Creates a staleness guard for HTTP/async derivation streams.
+ *
+ * - Call `invalidate()` when tearing down the current generation of streams.
+ * - Pipe HTTP requests through `takeUntil(guard$)` to automatically discard
+ *   in-flight responses that arrive after the generation has been invalidated.
+ */
+function createStreamGuard() {
+    const subject = new Subject();
+    return {
+        invalidate: () => subject.next(),
+        guard$: subject.asObservable().pipe(take$1(1)),
+    };
+}
 const LOG_PREFIX$1 = 'HTTP Derivation -';
 const DEFAULT_HTTP_DEBOUNCE_MS = 300;
 /**
@@ -5597,7 +5705,7 @@ function createHttpDerivationStream(entry, formValue$, context) {
         if (changedFields.size === 0)
             return false;
         return entry.dependsOn.some((dep) => changedFields.has(dep));
-    }), debounceTime(debounceMs), switchMap(({ current, changedFields }) => {
+    }), debounceTime(debounceMs), switchMap$1(({ current, changedFields }) => {
         return new Observable((subscriber) => {
             const formAccessor = untracked(() => context.form());
             // Check stopOnUserOverride — skip if the user has manually edited the target field
@@ -5668,15 +5776,28 @@ function createHttpDerivationStream(entry, formValue$, context) {
                     return;
                 }
             }
-            // Resolve the HTTP request (evaluates expressions in queryParams/body)
+            // Returns null when a path param is undefined — suppress the request
             const resolvedRequest = resolveHttpRequest(entry.http, evalContext);
-            // Make the HTTP request
+            if (!resolvedRequest) {
+                const derivationLogger = untracked(() => context.derivationLogger());
+                derivationLogger.evaluation({
+                    debugName: entry.debugName,
+                    fieldKey: entry.fieldKey,
+                    result: 'skipped',
+                    skipReason: 'condition-false',
+                });
+                subscriber.complete();
+                return;
+            }
+            // Make the HTTP request. takeUntil(guard$) automatically discards responses
+            // that arrive after the config has changed and the guard has been invalidated.
             const method = (resolvedRequest.method ?? 'GET').toUpperCase();
             const httpSub = context.httpClient
                 .request(method, resolvedRequest.url, {
                 body: resolvedRequest.body,
                 headers: resolvedRequest.headers,
             })
+                .pipe(takeUntil(context.guard$))
                 .subscribe({
                 next: (response) => {
                     try {
@@ -5721,12 +5842,14 @@ function createHttpDerivationStream(entry, formValue$, context) {
                     subscriber.complete();
                 },
             });
-            // Cleanup subscription on unsubscribe (switchMap cancellation)
+            // Cleanup: RxJS unsubscription cancels the in-flight HTTP request.
+            // Angular's HttpClient uses an internal AbortController when operating with
+            // the fetch backend, so unsubscribing is sufficient for network cancellation.
             return () => {
                 httpSub.unsubscribe();
             };
         });
-    }), catchError((error) => {
+    }), catchError$1((error) => {
         // Safety net — should not normally be reached since inner errors are caught
         const message = error instanceof Error ? error.message : String(error);
         context.logger.warn(`${LOG_PREFIX$1} Unexpected stream error for '${entry.fieldKey}': ${message}`);
@@ -5776,7 +5899,7 @@ function createAsyncDerivationStream(entry, formValue$, context) {
         if (changedFields.size === 0)
             return false;
         return entry.dependsOn.some((dep) => changedFields.has(dep));
-    }), debounceTime(debounceMs), switchMap(({ current, changedFields }) => {
+    }), debounceTime(debounceMs), switchMap$1(({ current, changedFields }) => {
         return new Observable((subscriber) => {
             const formAccessor = untracked(() => context.form());
             // Check stopOnUserOverride — skip if the user has manually edited the target field
@@ -5897,7 +6020,7 @@ function createAsyncDerivationStream(entry, formValue$, context) {
                 asyncSub.unsubscribe();
             };
         });
-    }), catchError((error) => {
+    }), catchError$1((error) => {
         // Safety net — should not normally be reached since inner errors are caught
         const message = error instanceof Error ? error.message : String(error);
         context.logger.warn(`${LOG_PREFIX} Unexpected stream error for '${entry.fieldKey}': ${message}`);
@@ -5934,6 +6057,12 @@ class DerivationOrchestrator {
     asyncFunctionSubscriptions = [];
     /** Identity keys of current async entries for smart teardown comparison */
     lastAsyncEntryKeys = null;
+    /**
+     * Guard for detecting stale HTTP responses. Call `invalidate()` on teardown to cancel
+     * in-flight requests from the previous generation. Each HTTP stream subscribes via
+     * `takeUntil(guard$)` — when `invalidate()` fires, all in-flight requests are discarded.
+     */
+    streamGuard = createStreamGuard();
     /**
      * Computed signal containing the collected and validated derivations.
      * Returns null if no derivations are defined.
@@ -6007,7 +6136,7 @@ class DerivationOrchestrator {
         // switchMap: For debounced derivations, it's OK to cancel pending work
         // if new changes come in - we want the latest debounced values.
         // (Unlike onChange which uses exhaustMap to prevent cancellation)
-        switchMap(({ changedFields }) => {
+        switchMap$1(({ changedFields }) => {
             const collection = untracked(() => this.derivationCollection());
             const formAccessor = untracked(() => this.config.form());
             if (!collection || !formAccessor)
@@ -6126,6 +6255,7 @@ class DerivationOrchestrator {
                     customFunctions: () => this.functionRegistry.getCustomFunctions(),
                     externalData: () => this.resolveExternalData(),
                     warningTracker: this.warningTracker,
+                    guard$: this.streamGuard.guard$,
                 };
                 const stream = createHttpDerivationStream(entry, formValue$, context).pipe(takeUntilDestroyed(this.destroyRef));
                 this.httpSubscriptions.push(stream.subscribe({
@@ -6135,9 +6265,11 @@ class DerivationOrchestrator {
         });
     }
     /**
-     * Tears down all active HTTP derivation streams.
+     * Tears down all active HTTP derivation streams. Invalidating the stream guard
+     * cancels any in-flight HTTP responses from the old generation via `takeUntil`.
      */
     teardownHttpStreams() {
+        this.streamGuard.invalidate();
         for (const sub of this.httpSubscriptions) {
             sub.unsubscribe();
         }
@@ -6528,7 +6660,7 @@ function computePropertyValue(entry, evalContext, applicatorContext) {
     if (entry.functionName) {
         const fn = applicatorContext.propertyDerivationFunctions?.[entry.functionName];
         if (!fn) {
-            throw new DynamicFormError(`Property derivation function '${entry.functionName}' not found in customFnConfig.propertyDerivations`);
+            throw new DynamicFormError(`Property derivation function '${entry.functionName}' not found in customFnConfig.derivations or customFnConfig.propertyDerivations`);
         }
         return fn(evalContext);
     }
@@ -6800,7 +6932,7 @@ class PropertyDerivationOrchestrator {
             .pipe(debounceTime(DEFAULT_DEBOUNCE_MS), startWith(null), pairwise(), filter((pair) => pair[1] !== null), map$1(([previous, current]) => ({
             current,
             changedFields: getChangedKeys(previous, current),
-        })), filter(({ changedFields }) => changedFields.size > 0), switchMap(({ changedFields }) => {
+        })), filter(({ changedFields }) => changedFields.size > 0), switchMap$1(({ changedFields }) => {
             const collection = untracked(() => this.propertyDerivationCollection());
             if (!collection)
                 return of(null);
@@ -7233,6 +7365,7 @@ class PageOrchestratorComponent {
     eventBus = inject(EventBus);
     fieldContextRegistry = inject(FieldContextRegistryService);
     functionRegistry = inject(FunctionRegistryService);
+    formOptions = inject(FORM_OPTIONS, { optional: true });
     /**
      * Array of page field definitions to render
      */
@@ -7320,13 +7453,11 @@ class PageOrchestratorComponent {
         }
         const currentPage = pages[currentIndex];
         const pageFields = currentPage.fields || [];
-        // Check validity of each field on the current page
+        // Collect all leaf field keys, recursively traversing group/row containers
+        const leafKeys = collectLeafFieldKeys(pageFields);
+        // Check validity of each leaf field on the current page
         // Fields are stored at root level in the form (pages don't add nesting)
-        for (const fieldDef of pageFields) {
-            const fieldKey = fieldDef.key;
-            if (!fieldKey)
-                continue;
-            // Access the field from the form using bracket notation
+        for (const fieldKey of leafKeys) {
             const field = form[fieldKey];
             if (field && typeof field === 'function') {
                 const fieldState = field();
@@ -7351,12 +7482,33 @@ class PageOrchestratorComponent {
     constructor() {
         // Setup event listeners for navigation
         this.setupEventListeners();
+        // B15: Auto-navigate away when current page becomes hidden
+        explicitEffect([this.state, this.visiblePageIndices], ([state, visibleIndices]) => {
+            const currentVisiblePosition = visibleIndices.indexOf(state.currentPageIndex);
+            if (currentVisiblePosition === -1 && visibleIndices.length > 0) {
+                // Current page is hidden — navigate to the nearest visible page
+                const nearest = this.findNearestVisiblePage(state.currentPageIndex, visibleIndices);
+                if (nearest !== -1) {
+                    this.navigateToPage(nearest);
+                }
+            }
+        });
     }
     /**
      * Navigate to the next visible page, skipping hidden pages.
      * @returns Navigation result
      */
     navigateToNextPage() {
+        // Guard: do not advance if current page has invalid fields.
+        // Respects disableWhenPageInvalid option (defaults to true).
+        const disableWhenPageInvalid = this.formOptions?.()?.nextButton?.disableWhenPageInvalid ?? true;
+        if (disableWhenPageInvalid && !this.currentPageValid()) {
+            return {
+                success: false,
+                newPageIndex: this.state().currentPageIndex,
+                error: 'Current page has invalid fields',
+            };
+        }
         const currentState = this.state();
         const visibleIndices = this.visiblePageIndices();
         if (currentState.isLastPage) {
@@ -7426,7 +7578,7 @@ class PageOrchestratorComponent {
     navigateToPage(pageIndex) {
         const currentState = this.state();
         const totalPages = currentState.totalPages;
-        // Validate page index
+        // Validate page index bounds
         if (pageIndex < 0 || pageIndex >= totalPages) {
             return {
                 success: false,
@@ -7434,6 +7586,15 @@ class PageOrchestratorComponent {
                 error: `Invalid page index: ${pageIndex}. Valid range is 0 to ${totalPages - 1}`,
             };
         }
+        // Validate target page is visible
+        const visibleIndices = this.visiblePageIndices();
+        if (!visibleIndices.includes(pageIndex)) {
+            return {
+                success: false,
+                newPageIndex: currentState.currentPageIndex,
+                error: `Cannot navigate to hidden page at index ${pageIndex}. Visible pages: [${visibleIndices.join(', ')}]`,
+            };
+        }
         // Check if already on target page
         if (pageIndex === currentState.currentPageIndex) {
             return {
@@ -7451,6 +7612,23 @@ class PageOrchestratorComponent {
             newPageIndex: pageIndex,
         };
     }
+    /**
+     * Finds the nearest visible page index to the given index.
+     * Prefers the forward (higher index) page when equidistant.
+     */
+    findNearestVisiblePage(currentIndex, visibleIndices) {
+        let nearest = -1;
+        let minDistance = Infinity;
+        for (const idx of visibleIndices) {
+            const distance = Math.abs(idx - currentIndex);
+            // Prefer forward (higher index) when tied
+            if (distance < minDistance || (distance === minDistance && idx > nearest)) {
+                minDistance = distance;
+                nearest = idx;
+            }
+        }
+        return nearest;
+    }
     /**
      * Set up event listeners for navigation events
      */
@@ -7507,8 +7685,8 @@ class PageOrchestratorComponent {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: PageOrchestratorComponent, isStandalone: true, selector: "div[page-orchestrator]", inputs: { pageFields: { classPropertyName: "pageFields", publicName: "pageFields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, fieldSignalContext: { classPropertyName: "fieldSignalContext", publicName: "fieldSignalContext", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-current-page": "state().currentPageIndex", "attr.data-total-pages": "state().totalPages" }, classAttribute: "df-page-orchestrator" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PageOrchestratorComponent, isStandalone: true, selector: "div[page-orchestrator]", inputs: { pageFields: { classPropertyName: "pageFields", publicName: "pageFields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, fieldSignalContext: { classPropertyName: "fieldSignalContext", publicName: "fieldSignalContext", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-current-page": "state().currentPageIndex", "attr.data-total-pages": "state().totalPages" }, classAttribute: "df-page-orchestrator" }, providers: [
             {
                 provide: FIELD_SIGNAL_CONTEXT,
                 useFactory: (orchestrator) => orchestrator.extendedFieldSignalContext(),
@@ -7538,9 +7716,9 @@ class PageOrchestratorComponent {
         }
       }
     }
-  `, isInline: true, styles: [":host{display:block;position:relative;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./ng-forge-dynamic-forms-page-field.component-_mRHaw7x.mjs').then(m => m.default)], () => [import('./ng-forge-dynamic-forms-page-field.component-_mRHaw7x.mjs').then(m => m.default)]] });
+  `, isInline: true, styles: [":host{display:block;position:relative;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./ng-forge-dynamic-forms-page-field.component-D6M_uJKu.mjs').then(m => m.default)], () => [import('./ng-forge-dynamic-forms-page-field.component-D6M_uJKu.mjs').then(m => m.default)]] });
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.4", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [import('./ng-forge-dynamic-forms-page-field.component-_mRHaw7x.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.0", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [import('./ng-forge-dynamic-forms-page-field.component-D6M_uJKu.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'div[page-orchestrator]', imports: [PageFieldComponent], template: `
     @for (pageField of pageFields(); track pageField.key; let i = $index) {
@@ -7578,6 +7756,33 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.4", ng
                             },
                         ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;position:relative;width:100%}\n"] }]
             }], ctorParameters: () => [], propDecorators: { pageFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageFields", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], fieldSignalContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldSignalContext", required: true }] }] } }) });
+/**
+ * Recursively collects form-tree keys for all value-bearing nodes on a page.
+ *
+ * Row fields are layout-only containers whose children are flattened to the
+ * parent level in the form tree, so we recurse through them transparently.
+ *
+ * Group fields create a nested sub-tree in the form (form['address']['street']).
+ * Their group-level FieldTree node aggregates child validity, so we use the
+ * group's own key — not the individual child keys — to check validity.
+ *
+ * Array fields are also accessed by their own key; the ArrayFieldTree node
+ * covers minLength/maxLength and any item-level validators.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- accepts any field shape for recursive traversal
+function collectLeafFieldKeys(fields) {
+    const keys = [];
+    for (const field of fields) {
+        if (isRowField(field)) {
+            // Row children are at the same form-tree level as the row itself
+            keys.push(...collectLeafFieldKeys(field.fields));
+        }
+        else if (field.key) {
+            keys.push(field.key);
+        }
+    }
+    return keys;
+}
 
 /**
  * Symbol key for storing normalization metadata on array field objects.
@@ -7925,8 +8130,8 @@ function isFunctionHttpValidator(config) {
 /**
  * Evaluates an HTTP response against a `HttpValidationResponseMapping` to produce a validation result.
  *
- * - `validWhen` truthy → `null` (valid, no error)
- * - `validWhen` falsy → `{ kind: errorKind, ...evaluatedErrorParams }`
+ * - `validWhen` === `true` → `null` (valid, no error)
+ * - `validWhen` !== `true` → `{ kind: errorKind, ...evaluatedErrorParams }`
  * - Expression error → logs warning, returns `{ kind: errorKind }` (fail-closed)
  *
  * Expressions are evaluated with scope `{ response }` only.
@@ -7934,8 +8139,11 @@ function isFunctionHttpValidator(config) {
 function evaluateHttpValidationResponse(response, mapping, logger) {
     const scope = { response };
     try {
-        const isValid = ExpressionParser.evaluate(mapping.validWhen, scope);
-        if (isValid) {
+        const result = ExpressionParser.evaluate(mapping.validWhen, scope);
+        if (typeof result !== 'boolean') {
+            logger.warn(`validWhen expression "${mapping.validWhen}" returned non-boolean value:`, result, 'Expected true or false.');
+        }
+        if (result === true) {
             return null;
         }
         const error = { kind: mapping.errorKind };
@@ -8039,12 +8247,16 @@ class HttpConditionFunctionCacheService {
 /**
  * Extracts a boolean from an HTTP response using an optional expression.
  * When `responseExpression` is provided, evaluates it with `{ response }` scope.
+ * Truthy values are treated as `true` — non-boolean results trigger a warning to encourage explicit boolean expressions.
  * Otherwise, coerces the response to boolean.
  */
 function extractBoolean(response, responseExpression, pendingValue, logger) {
     if (responseExpression) {
         try {
             const result = ExpressionParser.evaluate(responseExpression, { response });
+            if (typeof result !== 'boolean') {
+                logger.warn(`responseExpression "${responseExpression}" returned non-boolean value:`, result, 'Consider returning a boolean explicitly.');
+            }
             return !!result;
         }
         catch (error) {
@@ -8065,7 +8277,10 @@ function extractBoolean(response, responseExpression, pendingValue, logger) {
  * Must be called in injection context (same as `createLogicFunction`).
  */
 function createHttpConditionLogicFunction(condition) {
-    const httpClient = inject(HttpClient);
+    const httpClient = inject(HttpClient, { optional: true });
+    if (!httpClient) {
+        throw new DynamicFormError('HttpClient is required for HTTP conditions. Add provideHttpClient() to your providers.');
+    }
     const fieldContextRegistry = inject(FieldContextRegistryService);
     const functionRegistry = inject(FunctionRegistryService);
     const injector = inject(Injector);
@@ -8094,7 +8309,7 @@ function createHttpConditionLogicFunction(condition) {
             // inside Angular Signal Forms' BooleanOrLogic.compute (a computed), so we must
             // clear the active reactive consumer before creating the observable pipeline.
             const resultValue = untracked(() => {
-                const pipeline = toObservable(resolvedRequest, { injector }).pipe(debounceTime(debounceMs), distinctUntilChanged((prev, curr) => stableStringify(prev) === stableStringify(curr)), filter((request) => request !== undefined), switchMap((request) => {
+                const pipeline = toObservable(resolvedRequest, { injector }).pipe(debounceTime(debounceMs), distinctUntilChanged((prev, curr) => stableStringify(prev) === stableStringify(curr)), filter((request) => request !== undefined), switchMap$1((request) => {
                     const method = request.method ?? 'GET';
                     const options = {};
                     if (request.body)
@@ -8104,7 +8319,7 @@ function createHttpConditionLogicFunction(condition) {
                     return httpClient.request(method, request.url, options).pipe(map$1((response) => extractBoolean(response, condition.responseExpression, pendingValue, logger)), tap((value) => {
                         const requestKey = stableStringify(request);
                         cache.set(requestKey, value, cacheDurationMs);
-                    }), catchError$1((error) => {
+                    }), catchError((error) => {
                         logger.warn('HTTP condition request failed:', error);
                         return of(pendingValue);
                     }));
@@ -8116,8 +8331,11 @@ function createHttpConditionLogicFunction(condition) {
         }
         // Build reactive evaluation context (creates signal dependencies on form values)
         const evaluationContext = fieldContextRegistry.createReactiveEvaluationContext(ctx, functionRegistry.getCustomFunctions());
-        // Resolve the HTTP request config into a concrete request
+        // Returns null when a path param is undefined — skip the request and return pending value
         const resolved = resolveHttpRequest(condition.http, evaluationContext);
+        if (!resolved) {
+            return signalPair.resultValue();
+        }
         const requestKey = stableStringify(resolved);
         // Check response cache first
         const cachedResult = cache.get(requestKey);
@@ -8189,7 +8407,7 @@ function createAsyncConditionLogicFunction(condition) {
             // inside Angular Signal Forms' BooleanOrLogic.compute (a computed), so we must
             // clear the active reactive consumer before creating the observable pipeline.
             const resultValue = untracked(() => {
-                const pipeline = toObservable(trigger, { injector }).pipe(debounceTime(debounceMs), distinctUntilChanged(), filter((value) => value !== undefined), switchMap(() => {
+                const pipeline = toObservable(trigger, { injector }).pipe(debounceTime(debounceMs), distinctUntilChanged(), filter((value) => value !== undefined), switchMap$1(() => {
                     // Look up the async function at call time (fresh reference)
                     const asyncFn = functionRegistry.getAsyncConditionFunction(condition.asyncFunctionName);
                     if (!asyncFn) {
@@ -8202,7 +8420,7 @@ function createAsyncConditionLogicFunction(condition) {
                     // concat ensures pendingValue is emitted immediately when a new trigger
                     // arrives, before the async call resolves. This prevents the signal from
                     // showing a stale resolved value during re-evaluation.
-                    return concat(of(pendingValue), from(asyncFn(evaluationContext)).pipe(map$1((result) => !!result), catchError$1((error) => {
+                    return concat(of(pendingValue), from(asyncFn(evaluationContext)).pipe(map$1((result) => !!result), catchError((error) => {
                         logger.warn('Async Condition - function failed:', error);
                         return of(pendingValue);
                     })));
@@ -8519,7 +8737,18 @@ function applyValidator(config, fieldPath) {
             break;
         case 'pattern':
             if (config.value instanceof RegExp || typeof config.value === 'string') {
-                const regexPattern = typeof config.value === 'string' ? new RegExp(config.value) : config.value;
+                let regexPattern;
+                if (typeof config.value === 'string') {
+                    try {
+                        regexPattern = new RegExp(config.value);
+                    }
+                    catch (e) {
+                        throw new DynamicFormError(`Invalid regex pattern in validator: '${config.value}' — ${e instanceof Error ? e.message : String(e)}`);
+                    }
+                }
+                else {
+                    regexPattern = config.value;
+                }
                 applyPatternValidator(fieldPath, regexPattern, config.expression);
             }
             break;
@@ -8710,7 +8939,8 @@ function applyDeclarativeHttpValidator(config, fieldPath) {
             // validateHttp's request runs inside Angular's resource API — it NEEDS reactive
             // dependencies to re-trigger when the field value changes.
             const evalCtx = fieldContextRegistry.createReactiveEvaluationContext(ctx, functionRegistry.getCustomFunctions());
-            return resolveHttpRequest(config.http, evalCtx);
+            // resolveHttpRequest returns null when a path param is undefined — convert to undefined to skip validation
+            return resolveHttpRequest(config.http, evalCtx) ?? undefined;
         },
         onSuccess: (response) => {
             return evaluateHttpValidationResponse(response, config.responseMapping, logger);
@@ -8909,7 +9139,18 @@ function applyStringValidators(path, config) {
         maxLength(path, config.maxLength);
     }
     if (config.pattern) {
-        const regex = typeof config.pattern === 'string' ? new RegExp(config.pattern) : config.pattern;
+        let regex;
+        if (typeof config.pattern === 'string') {
+            try {
+                regex = new RegExp(config.pattern);
+            }
+            catch (e) {
+                throw new DynamicFormError(`Invalid regex pattern: '${config.pattern}' — ${e instanceof Error ? e.message : String(e)}`);
+            }
+        }
+        else {
+            regex = config.pattern;
+        }
         pattern(path, regex);
     }
 }
@@ -9916,7 +10157,7 @@ function tryCreateSchemaEntry(fieldKey, config) {
 function convertBuiltInToCustomValidator(config) {
     const expression = config.expression;
     if (!expression) {
-        throw new Error(`Built-in validator ${config.type} missing required expression for cross-field conversion`);
+        throw new DynamicFormError(`Built-in validator ${config.type} missing required expression for cross-field conversion`);
     }
     let validationExpression;
     switch (config.type) {
@@ -9937,13 +10178,13 @@ function convertBuiltInToCustomValidator(config) {
             try {
                 new RegExp(expression);
             }
-            catch {
-                throw new Error(`Invalid regex pattern in cross-field validator: ${expression}`);
+            catch (e) {
+                throw new DynamicFormError(`Invalid regex pattern in cross-field validator: '${expression}' — ${e instanceof Error ? e.message : String(e)}`);
             }
             validationExpression = `fieldValue == null || new RegExp(${JSON.stringify(expression)}).test(fieldValue)`;
             break;
         default:
-            throw new Error(`Cannot convert ${config.type} validator to custom validator`);
+            throw new DynamicFormError(`Cannot convert ${config.type} validator to custom validator`);
     }
     return {
         type: 'custom',
@@ -10409,6 +10650,38 @@ function createPropertyOverrideStore() {
  */
 const PROPERTY_OVERRIDE_STORE = new InjectionToken('PROPERTY_OVERRIDE_STORE');
 
+/**
+ * Known standard field properties where a missing key likely indicates a typo.
+ * Override keys not in this set are assumed to be intentional dynamic properties
+ * and will not trigger dev-mode warnings.
+ */
+const KNOWN_FIELD_PROPERTY_NAMES = [
+    'label',
+    'placeholder',
+    'disabled',
+    'readonly',
+    'required',
+    'className',
+    'tabIndex',
+    'validationMessages',
+    'options',
+    'props',
+    'hint',
+    'tooltip',
+    'prefix',
+    'suffix',
+    'min',
+    'max',
+    'minLength',
+    'maxLength',
+    'step',
+    'pattern',
+    'rows',
+    'cols',
+    'multiple',
+    'appearance',
+];
+const KNOWN_FIELD_PROPERTIES = new Set(KNOWN_FIELD_PROPERTY_NAMES);
 /**
  * Applies property overrides to a field's input record.
  *
@@ -10425,8 +10698,9 @@ const PROPERTY_OVERRIDE_STORE = new InjectionToken('PROPERTY_OVERRIDE_STORE');
  * Array-valued overrides replace wholesale (no merging).
  * Returns `inputs` unchanged if overrides is empty (no clone).
  *
- * In dev mode, warns when an override key doesn't match any existing input property,
- * which may indicate a typo in the `targetProperty` configuration.
+ * In dev mode, warns when a known standard field property override key doesn't match
+ * any existing input property, which may indicate a typo in the `targetProperty`
+ * configuration. Dynamic/custom property keys are silently accepted.
  *
  * @param inputs - The current field inputs record
  * @param overrides - Record of property names to override values
@@ -10443,12 +10717,12 @@ function applyPropertyOverrides(inputs, overrides) {
     for (const key of keys) {
         const value = overrides[key];
         const dotIndex = key.indexOf('.');
-        // Dev-mode check: warn if the override key doesn't match any existing input property.
-        // This catches typos like 'mindata' instead of 'minDate'. False positives are possible
-        // for properties intentionally added by derivations that aren't in the initial config.
+        // Dev-mode check: warn only when a known standard field property is missing from inputs,
+        // which likely indicates a typo. Dynamic/custom keys are intentionally skipped to avoid
+        // false positives for properties added by derivations that aren't in the initial config.
         if (isDevMode()) {
             const topLevelKey = dotIndex === -1 ? key : key.substring(0, dotIndex);
-            if (!(topLevelKey in inputs)) {
+            if (KNOWN_FIELD_PROPERTIES.has(topLevelKey) && !(topLevelKey in inputs)) {
                 console.warn(`[Dynamic Forms] Property override '${key}' does not match any existing input property. ` +
                     'This may indicate a typo in the targetProperty configuration. ' +
                     `Available properties: ${Object.keys(inputs).join(', ')}`);
@@ -10647,7 +10921,7 @@ function resolveField(fieldDef, context) {
             injector: context.injector,
             inputs,
         };
-    }), catchError$1((error) => {
+    }), catchError((error) => {
         // Only call onError if component is not destroyed to avoid accessing cleaned-up state
         if (!context.destroyRef.destroyed) {
             context.onError?.(fieldDef, error);
@@ -10706,7 +10980,7 @@ function reconcileFields(prev, curr) {
  * Used by container components (page, group) to resolve their child fields.
  */
 function createFieldResolutionPipe(getContext) {
-    return pipe(switchMap((fields) => {
+    return pipe(switchMap$1((fields) => {
         if (!fields || fields.length === 0) {
             return of([]);
         }
@@ -11065,6 +11339,131 @@ function injectFieldRegistry() {
     };
 }
 
+/**
+ * Collects all field keys, types, and validates regex patterns from a field tree
+ * by recursively traversing containers (page, row, group, array).
+ *
+ * @param collectKeys - Whether to add field keys to data.keys for duplicate detection.
+ *   Set to false when inside an array container: array item fields share template keys
+ *   across items by design (e.g. every item has 'name', 'email'), so they must not
+ *   participate in global duplicate-key checking.
+ */
+function collectFieldData(fields, data, collectKeys = true) {
+    for (const field of fields) {
+        if (collectKeys && field.key) {
+            data.keys.push(field.key);
+        }
+        if (field.type) {
+            data.types.add(field.type);
+        }
+        const fieldWithValidation = field;
+        if ('pattern' in field && typeof fieldWithValidation.pattern === 'string') {
+            validateRegexPattern(fieldWithValidation.pattern, field.key || '<unknown>', data.regexErrors);
+        }
+        if ('validators' in field && fieldWithValidation.validators) {
+            for (const validator of fieldWithValidation.validators) {
+                if (validator.type === 'pattern' && 'value' in validator && typeof validator.value === 'string') {
+                    validateRegexPattern(validator.value, field.key || '<unknown>', data.regexErrors);
+                }
+            }
+        }
+        if (hasChildFields(field)) {
+            // Array item fields share template keys across items by design — stop collecting keys
+            // once inside an array. Types and regex patterns are still validated.
+            const childCollectKeys = collectKeys && field.type !== 'array';
+            const children = normalizeFieldsArray(field.fields);
+            for (const child of children) {
+                if (Array.isArray(child)) {
+                    collectFieldData(child, data, childCollectKeys);
+                }
+                else {
+                    collectFieldData([child], data, childCollectKeys);
+                }
+            }
+        }
+    }
+}
+/**
+ * Validates a single regex pattern string, collecting errors rather than throwing.
+ */
+function validateRegexPattern(pattern, fieldKey, errors) {
+    try {
+        new RegExp(pattern);
+    }
+    catch (e) {
+        errors.push(`Invalid regex pattern in validator for field '${fieldKey}': '${pattern}' — ${e instanceof Error ? e.message : String(e)}`);
+    }
+}
+/**
+ * Validates that no duplicate field keys exist in the config.
+ * Throws a DynamicFormError listing all duplicates if any are found.
+ *
+ * @throws {DynamicFormError} When duplicate keys are detected
+ */
+function validateNoDuplicateKeys(allKeys) {
+    const seen = new Set();
+    const duplicates = new Set();
+    for (const key of allKeys) {
+        if (seen.has(key)) {
+            duplicates.add(key);
+        }
+        seen.add(key);
+    }
+    if (duplicates.size > 0) {
+        const duplicateList = Array.from(duplicates)
+            .map((k) => `'${k}'`)
+            .join(', ');
+        throw new DynamicFormError(`Duplicate field keys detected: ${duplicateList}. Each field key must be unique within a form config.`);
+    }
+}
+/**
+ * Validates that every field type referenced in the config exists in the registry.
+ * Logs a warning for unregistered types — unknown fields are skipped during rendering
+ * rather than blocking the whole form (graceful degradation).
+ *
+ * Skips validation when the registry is empty (no UI adapter has been registered),
+ * since the core library tests operate without a field registry.
+ */
+function validateFieldTypesRegistered(allTypes, registry, logger) {
+    if (registry.size === 0)
+        return;
+    const unregistered = [];
+    for (const type of allTypes) {
+        if (!registry.has(type)) {
+            unregistered.push(type);
+        }
+    }
+    if (unregistered.length > 0) {
+        const typeList = unregistered.map((t) => `'${t}'`).join(', ');
+        logger.warn(`Unknown field type(s): ${typeList}. Register them via provideDynamicForm(...withXxxFields()) or a custom registry entry. These fields will be skipped during rendering.`);
+    }
+}
+/**
+ * Validates a form config at bootstrap time, checking for:
+ * - Duplicate field keys (throws — this is always a developer error)
+ * - Unregistered field types (warns — form degrades gracefully, skipping unknown fields)
+ * - Invalid regex patterns in validators (throws — invalid regex will cause runtime errors)
+ *
+ * Should be called once during form setup, before fields are processed.
+ *
+ * @throws {DynamicFormError} When duplicate keys or invalid regex patterns are detected
+ */
+function validateFormConfig(fields, registry, logger) {
+    const data = {
+        keys: [],
+        types: new Set(),
+        regexErrors: [],
+    };
+    collectFieldData(fields, data);
+    validateNoDuplicateKeys(data.keys);
+    validateFieldTypesRegistered(data.types, registry, logger);
+    if (data.regexErrors.length > 0) {
+        throw new DynamicFormError(data.regexErrors.length === 1
+            ? data.regexErrors[0]
+            : `Invalid regex pattern(s) found:\n${data.regexErrors.map((e) => `  - ${e}`).join('\n')}`);
+    }
+}
+
 /**
  * Injection token for global value exclusion defaults.
  *
@@ -11415,7 +11814,7 @@ class FormStateMachine {
     /** Sets up sequential action processing via `concatMap`. */
     setupActionProcessing() {
         this.actions$
-            .pipe(concatMap((action) => this.processAction(action).pipe(catchError$1((error) => {
+            .pipe(concatMap((action) => this.processAction(action).pipe(catchError((error) => {
             this.config.logger.error(`Action '${action.type}' failed:`, error);
             this.recoverFromError(error, action);
             return EMPTY;
@@ -11498,6 +11897,12 @@ class FormStateMachine {
                 sideEffects: [{ type: Effect.CreateForm }],
             };
         }
+        // Guard: reject config changes during active submission to prevent races
+        // between the in-flight action Promise and form teardown/rebuild.
+        if (this.config.isSubmitting?.()) {
+            this.config.logger.warn('Config changed during active submission; ignoring. Apply config changes after submission completes.');
+            return { state, sideEffects: [] };
+        }
         if (isReadyState(state)) {
             return {
                 state: createTransitioningState(Phase.Teardown, state.config, config, state.formSetup),
@@ -11881,38 +12286,35 @@ class FormStateManager {
         debugName: 'FormStateManager.entity',
         equal: isEqual,
     });
+    /**
+     * Schema derived from the current form config and field setup.
+     * Separated from `form` so schema construction is memoized independently.
+     * Requires `runInInjectionContext` because `createSchemaFromFields` calls `inject()` internally.
+     */
+    formSchema = computed(() => runInInjectionContext(this.injector, () => {
+        const setup = this.formSetup();
+        const config = this.activeConfig();
+        if (!config)
+            return undefined;
+        if (setup.schemaFields?.length) {
+            const crossFieldCollection = collectCrossFieldEntries(setup.schemaFields);
+            return createSchemaFromFields(setup.schemaFields, setup.registry, {
+                crossFieldValidators: crossFieldCollection.validators,
+                formLevelSchema: config.schema,
+            });
+        }
+        if (config.schema) {
+            return createFormLevelSchema(config.schema);
+        }
+        return undefined;
+    }), ...(ngDevMode ? [{ debugName: "formSchema" }] : []));
     /**
      * The Angular Signal Form instance.
      */
     form = computed(() => {
-        return runInInjectionContext(this.injector, () => {
-            const setup = this.formSetup();
-            const config = this.activeConfig();
-            let formInstance;
-            if (!config) {
-                formInstance = untracked(() => form(this.entity));
-            }
-            else {
-                const hasFields = setup.schemaFields && setup.schemaFields.length > 0;
-                const hasFormSchema = config.schema !== undefined;
-                if (hasFields) {
-                    const crossFieldCollection = collectCrossFieldEntries(setup.schemaFields);
-                    const combinedSchema = createSchemaFromFields(setup.schemaFields, setup.registry, {
-                        crossFieldValidators: crossFieldCollection.validators,
-                        formLevelSchema: config.schema,
-                    });
-                    formInstance = untracked(() => form(this.entity, combinedSchema));
-                }
-                else if (hasFormSchema) {
-                    const formSchema = createFormLevelSchema(config.schema);
-                    formInstance = untracked(() => form(this.entity, formSchema));
-                }
-                else {
-                    formInstance = untracked(() => form(this.entity));
-                }
-            }
-            return formInstance;
-        });
+        const schema = this.formSchema();
+        const injector = this.injector;
+        return untracked(() => (schema ? form(this.entity, schema, { injector }) : form(this.entity, { injector })));
     }, ...(ngDevMode ? [{ debugName: "form" }] : []));
     /** Whether resolvedFields has caught up with fieldsSource (set in constructor). */
     isFieldPipelineSettled;
@@ -12057,7 +12459,7 @@ class FormStateManager {
     // Constructor
     // ─────────────────────────────────────────────────────────────────────────────
     constructor() {
-        this.resolvedFields = derivedFromDeferred(this.fieldsSource, pipe(switchMap((fields) => {
+        this.resolvedFields = derivedFromDeferred(this.fieldsSource, pipe(switchMap$1((fields) => {
             if (!fields || fields.length === 0) {
                 return of([]);
             }
@@ -12124,7 +12526,10 @@ class FormStateManager {
                 return false;
             }
             return true;
-        }), switchMap(() => {
+        }), 
+        // switchMap is intentional here: mapping is synchronous (reads signals, no async Promise).
+        // The exhaustMap concern in createSubmissionHandler does not apply to this path.
+        switchMap$1(() => {
             const config = this.activeConfig();
             const submissionConfig = config?.submission;
             if (submissionConfig?.action) {
@@ -12148,6 +12553,7 @@ class FormStateManager {
                 return this.createFormSetupFromConfig(config.fields ?? [], detectFormMode(config.fields ?? []).mode, this.rawFieldRegistry());
             },
             captureValue: () => this.formValue(),
+            isSubmitting: this.submitting,
             isFieldPipelineSettled: () => this.isFieldPipelineSettled(),
             restoreValue: (values, validKeys) => {
                 const filtered = {};
@@ -12284,6 +12690,9 @@ class FormStateManager {
     }
     createFormSetupFromConfig(fields, mode, registry) {
         const normalizedFields = normalizeSimplifiedArrays(fields);
+        // Validate after normalization so simplified array templates are already expanded
+        // into full ArrayField.fields and are reachable during traversal.
+        validateFormConfig(normalizedFields, registry, this.logger);
         const flattenedFields = this.fieldProcessors.memoizedFlattenFields(normalizedFields, registry);
         const flattenedFieldsForRendering = this.memoizedFlattenFieldsForRendering(normalizedFields, registry);
         const fieldsById = this.fieldProcessors.memoizedKeyBy(flattenedFields);
@@ -12313,10 +12722,10 @@ class FormStateManager {
     ngOnDestroy() {
         this.machine.dispatch({ type: Action.Destroy });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FormStateManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FormStateManager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormStateManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormStateManager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FormStateManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormStateManager, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -12496,25 +12905,6 @@ class ConsoleLogger {
     }
 }
 
-/**
- * No-operation logger implementation.
- * All methods are no-ops - used in production by default.
- */
-class NoopLogger {
-    debug() {
-        // Intentionally empty
-    }
-    info() {
-        // Intentionally empty
-    }
-    warn() {
-        // Intentionally empty
-    }
-    error() {
-        // Intentionally empty
-    }
-}
-
 /**
  * Injection token for derivation logging configuration.
  *
@@ -12662,6 +13052,87 @@ function provideDynamicFormDI() {
     ];
 }
 
+/**
+ * Injectable service for dispatching events into a DynamicForm from outside the form.
+ *
+ * ## When to use
+ *
+ * Use `EventDispatcher` when you need to drive form behaviour **from the host component** —
+ * for example, appending array items in response to a field value change, triggering a form
+ * reset from a toolbar button, or reacting to external application state.
+ *
+ * This is the recommended alternative to accessing the form's internals via `viewChild`.
+ *
+ * ## Setup
+ *
+ * Provide `EventDispatcher` at the **host component** level (not root). DynamicForm
+ * automatically detects it and connects its internal event bus to the dispatcher.
+ *
+ * ```typescript
+ * @Component({
+ *   providers: [EventDispatcher],
+ *   template: `<form [dynamic-form]="config" [(value)]="formValue"></form>`
+ * })
+ * export class MyComponent {
+ *   readonly dispatcher = inject(EventDispatcher);
+ *   readonly formValue = signal<Record<string, unknown>>({});
+ *
+ *   constructor() {
+ *     effect(() => {
+ *       const category = this.formValue()?.['category'] as string | undefined;
+ *       if (category) {
+ *         this.dispatcher.dispatch(
+ *           arrayEvent('tasks').append([{ key: 'name', type: 'input', label: 'Task', value: category }])
+ *         );
+ *       }
+ *     });
+ *   }
+ * }
+ * ```
+ *
+ * ## Multi-form note
+ *
+ * If multiple `DynamicForm` instances exist under the same provider scope, **all forms**
+ * will receive dispatched events. To target a specific form, scope the provider to a
+ * wrapper component that contains only that form.
+ *
+ * ## What events can be dispatched
+ *
+ * Any `FormEvent` instance is accepted — array events, reset/clear events, custom events, etc.
+ * The `arrayEvent()` builder is the recommended way to construct array manipulation events:
+ *
+ * ```typescript
+ * dispatcher.dispatch(arrayEvent('tasks').append(template));
+ * dispatcher.dispatch(arrayEvent('tasks').removeAt(0));
+ * dispatcher.dispatch(new FormResetEvent());
+ * ```
+ */
+class EventDispatcher {
+    bus;
+    /**
+     * Dispatches a form event into the connected DynamicForm's event bus.
+     * No-op if no form is currently connected.
+     *
+     * @param event - A FormEvent instance. Use the `arrayEvent()` builder for array operations.
+     */
+    dispatch(event) {
+        this.bus?.emitInstance(event);
+    }
+    /** @internal - Called by DynamicForm on init */
+    connect(bus) {
+        this.bus = bus;
+    }
+    /** @internal - Called by DynamicForm on destroy */
+    disconnect() {
+        this.bus = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventDispatcher });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventDispatcher, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * Dynamic form component — renders a form based on configuration.
  * Delegates state management to `FormStateManager`.
@@ -12688,20 +13159,10 @@ class DynamicForm {
     injector = inject(Injector);
     eventBus = inject(EventBus);
     logger = inject(DynamicFormLogger);
-    /**
-     * Connect input signals to the shared deps holder BEFORE injecting FormStateManager.
-     * Field initializers run in declaration order, so this runs after inputs are created
-     * but before stateManager is injected. FormStateManager reads from these signals
-     * in computeds/effects, which are all lazy and evaluated after construction.
-     */
-    _connectStateDeps = (() => {
-        const deps = inject(FORM_STATE_DEPS);
-        deps.config = this.config;
-        deps.formOptions = this.formOptions;
-        deps.value = this.value;
-    })();
-    /** State manager that owns all form state. */
-    stateManager = inject((FormStateManager));
+    dispatcher = inject(EventDispatcher, { optional: true });
+    /** State manager that owns all form state. Initialized via connectDeps() to guarantee
+     * FORM_STATE_DEPS is populated before FormStateManager is injected. */
+    stateManager = this.connectDeps();
     // ─────────────────────────────────────────────────────────────────────────────
     // Private State
     // ─────────────────────────────────────────────────────────────────────────────
@@ -12750,9 +13211,16 @@ class DynamicForm {
     // ─────────────────────────────────────────────────────────────────────────────
     // Computed Signals - Internal
     // ─────────────────────────────────────────────────────────────────────────────
+    /**
+     * Recursively counts container components that will emit ComponentInitializedEvent.
+     * Includes the dynamic-form component itself (+1).
+     *
+     * Recurses into all container children, including those nested inside array
+     * item templates, to avoid a premature (initialized) emission.
+     */
     totalComponentsCount = computed(() => {
         const fields = this.stateManager.formSetup()?.fields ?? [];
-        return fields.filter(isContainerField).length + 1;
+        return countContainersRecursive(fields) + 1;
     }, ...(ngDevMode ? [{ debugName: "totalComponentsCount" }] : []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Initialization
@@ -12799,14 +13267,16 @@ class DynamicForm {
     // Constructor
     // ─────────────────────────────────────────────────────────────────────────────
     constructor() {
+        this.dispatcher?.connect(this.eventBus);
+        this.destroyRef.onDestroy(() => this.dispatcher?.disconnect());
+        // Inject orchestrators eagerly so derivation streams are set up before the first
+        // render cycle. Previously afterNextRender() deferred injection, causing
+        // (initialized) to fire before derivations ran. The circular dependency that
+        // originally motivated the deferral is resolved via dynamic-form-di.ts.
+        this.injector.get(DERIVATION_ORCHESTRATOR);
+        this.injector.get(PROPERTY_DERIVATION_ORCHESTRATOR);
         this.setupEffects();
         this.setupEventHandlers();
-        // Lazily inject orchestrators to avoid circular dependency.
-        // The orchestrators' constructors set up RxJS subscriptions that process derivations.
-        afterNextRender(() => {
-            this.injector.get(DERIVATION_ORCHESTRATOR);
-            this.injector.get(PROPERTY_DERIVATION_ORCHESTRATOR);
-        });
     }
     /**
      * Handles native form submission triggered by:
@@ -12842,19 +13312,34 @@ class DynamicForm {
             }
         });
     }
+    /**
+     * Populates FORM_STATE_DEPS with this component's input signals, then injects
+     * FormStateManager. Must be called as a field initializer (after the input signals
+     * are declared) so that FormStateManager reads populated deps when it is constructed.
+     * inject() is valid here because field initializers run inside the injection context.
+     */
+    connectDeps() {
+        const deps = inject(FORM_STATE_DEPS);
+        deps.config = this.config;
+        deps.formOptions = this.formOptions;
+        deps.value = this.value;
+        return inject((FormStateManager));
+    }
     setupEventHandlers() {
         createSubmissionHandler({
             eventBus: this.eventBus,
             configSignal: this.config,
             formSignal: this.form,
+            validSignal: this.valid,
+            logger: this.logger,
         })
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             error: (err) => this.logger.error('Submission handler error', err),
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: DynamicForm, isStandalone: true, selector: "form[dynamic-form]", inputs: { config: { classPropertyName: "config", publicName: "dynamic-form", isSignal: true, isRequired: true, transformFunction: null }, formOptions: { classPropertyName: "formOptions", publicName: "formOptions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted", reset: "reset", cleared: "cleared", events: "events", initialized: "initialized", onPageChange: "onPageChange", onPageNavigationStateChange: "onPageNavigationStateChange" }, host: { attributes: { "novalidate": "" }, listeners: { "submit": "onNativeSubmit($event)" }, properties: { "class.disabled": "disabled()", "class.df-form-paged": "formModeDetection().mode === \"paged\"", "class.df-form-non-paged": "formModeDetection().mode === \"non-paged\"", "attr.data-form-mode": "formModeDetection().mode" }, classAttribute: "df-dynamic-form df-form" }, providers: [provideDynamicFormDI()], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DynamicForm, isStandalone: true, selector: "form[dynamic-form]", inputs: { config: { classPropertyName: "config", publicName: "dynamic-form", isSignal: true, isRequired: true, transformFunction: null }, formOptions: { classPropertyName: "formOptions", publicName: "formOptions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted", reset: "reset", cleared: "cleared", events: "events", initialized: "initialized", onPageChange: "onPageChange", onPageNavigationStateChange: "onPageNavigationStateChange" }, host: { attributes: { "novalidate": "" }, listeners: { "submit": "onNativeSubmit($event)" }, properties: { "class.disabled": "disabled()", "class.df-form-paged": "formModeDetection().mode === \"paged\"", "class.df-form-non-paged": "formModeDetection().mode === \"non-paged\"", "attr.data-form-mode": "formModeDetection().mode" }, classAttribute: "df-dynamic-form df-form" }, providers: [provideDynamicFormDI()], ngImport: i0, template: `
     @if (shouldRender()) {
       @if (formModeDetection().mode === 'paged') {
         <div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="form()" [fieldSignalContext]="fieldSignalContext()"></div>
@@ -12866,7 +13351,7 @@ class DynamicForm {
     }
   `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}:host>*{grid-column:1/-1}:host.df-form-spacing-custom{--df-grid-row-gap: var(--form-custom-spacing, 1.5rem)}:host.df-form-gap-none{--df-grid-row-gap: 0}:host.df-form-gap-xs{--df-grid-row-gap: .25rem}:host.df-form-gap-sm{--df-grid-row-gap: .5rem}:host.df-form-gap-md{--df-grid-row-gap: 1rem}:host.df-form-gap-lg{--df-grid-row-gap: 1.5rem}:host.df-form-gap-xl{--df-grid-row-gap: 2rem}:host.df-form-paged{--df-grid-row-gap: 0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: PageOrchestratorComponent, selector: "div[page-orchestrator]", inputs: ["pageFields", "form", "fieldSignalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DynamicForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DynamicForm, decorators: [{
             type: Component,
             args: [{ selector: 'form[dynamic-form]', imports: [NgComponentOutlet, PageOrchestratorComponent], template: `
     @if (shouldRender()) {
@@ -12888,6 +13373,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                         '(submit)': 'onNativeSubmit($event)',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}:host>*{grid-column:1/-1}:host.df-form-spacing-custom{--df-grid-row-gap: var(--form-custom-spacing, 1.5rem)}:host.df-form-gap-none{--df-grid-row-gap: 0}:host.df-form-gap-xs{--df-grid-row-gap: .25rem}:host.df-form-gap-sm{--df-grid-row-gap: .5rem}:host.df-form-gap-md{--df-grid-row-gap: 1rem}:host.df-form-gap-lg{--df-grid-row-gap: 1.5rem}:host.df-form-gap-xl{--df-grid-row-gap: 2rem}:host.df-form-paged{--df-grid-row-gap: 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamic-form", required: true }] }], formOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formOptions", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], validityChange: [{ type: i0.Output, args: ["validityChange"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], submitted: [{ type: i0.Output, args: ["submitted"] }], reset: [{ type: i0.Output, args: ["reset"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], events: [{ type: i0.Output, args: ["events"] }], initialized: [{ type: i0.Output, args: ["initialized"] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }], onPageNavigationStateChange: [{ type: i0.Output, args: ["onPageNavigationStateChange"] }] } });
+/**
+ * Recursively counts container fields (page, row, group, array) in a field tree.
+ * Descends into container children including array item templates to ensure
+ * nested containers are counted for accurate initialization tracking.
+ */
+function countContainersRecursive(fields) {
+    let count = 0;
+    for (const field of fields) {
+        if (isContainerField(field)) {
+            count += 1;
+            if (hasChildFields(field)) {
+                const children = field.fields;
+                if (Array.isArray(children)) {
+                    for (const child of children) {
+                        if (Array.isArray(child)) {
+                            // Array item template: FieldDef[] (object items)
+                            count += countContainersRecursive(child);
+                        }
+                        else if (child != null && isContainerField(child)) {
+                            count += countContainersRecursive([child]);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return count;
+}
 
 /**
  * No-op logger for when no logger is provided.
@@ -13413,13 +13926,13 @@ const BUILT_IN_FIELDS = [
     },
     {
         name: 'page',
-        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-_mRHaw7x.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-D6M_uJKu.mjs'),
         mapper: pageFieldMapper,
         valueHandling: 'flatten',
     },
     {
         name: 'text',
-        loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-CmkBZk4p.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-Ael-STTb.mjs'),
         mapper: textFieldMapper,
         valueHandling: 'exclude',
     },
@@ -14185,10 +14698,10 @@ class DynamicTextPipe {
         }
         return of(value || '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DynamicTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: DynamicTextPipe, isStandalone: true, name: "dynamicText" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DynamicTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: DynamicTextPipe, isStandalone: true, name: "dynamicText" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DynamicTextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DynamicTextPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dynamicText',
@@ -14209,12 +14722,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
  * @param injector - The injector to use for afterNextRender scheduling
  */
 function emitComponentInitialized(eventBus, componentType, componentKey, injector) {
+    const logger = injector.get(DynamicFormLogger);
     afterNextRender(() => {
         try {
             eventBus.dispatch(ComponentInitializedEvent, componentType, componentKey);
         }
-        catch {
-            // Input not available - component may have been destroyed
+        catch (error) {
+            logger.error(`Failed to emit initialization event for ${componentType} '${componentKey}'`, error);
         }
     }, { injector });
 }
@@ -14309,14 +14823,14 @@ class RowFieldComponent {
     setupEffects() {
         setupContainerInitEffect(this.resolvedFields, this.eventBus, 'row', () => this.field().key, this.injector);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RowFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: RowFieldComponent, isStandalone: true, selector: "div[row-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "class.disabled": "disabled()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RowFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: RowFieldComponent, isStandalone: true, selector: "div[row-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "class.disabled": "disabled()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, ngImport: i0, template: `
     @for (field of resolvedFields(); track field.key) {
       <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
     }
   `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{display:flex;flex-wrap:wrap;gap:var(--df-grid-gap);align-items:flex-start;width:100%}:host ::ng-deep>*:not([class*=df-col-]){flex:0 0 auto}:host ::ng-deep>.df-col-1{flex:0 0 calc(8.3333333333% - var(--df-grid-gap) * .9166666667);max-width:calc(8.3333333333% - var(--df-grid-gap) * .9166666667)}:host ::ng-deep>.df-col-2{flex:0 0 calc(16.6666666667% - var(--df-grid-gap) * .8333333333);max-width:calc(16.6666666667% - var(--df-grid-gap) * .8333333333)}:host ::ng-deep>.df-col-3{flex:0 0 calc(25% - var(--df-grid-gap) * .75);max-width:calc(25% - var(--df-grid-gap) * .75)}:host ::ng-deep>.df-col-4{flex:0 0 calc(33.3333333333% - var(--df-grid-gap) * .6666666667);max-width:calc(33.3333333333% - var(--df-grid-gap) * .6666666667)}:host ::ng-deep>.df-col-5{flex:0 0 calc(41.6666666667% - var(--df-grid-gap) * .5833333333);max-width:calc(41.6666666667% - var(--df-grid-gap) * .5833333333)}:host ::ng-deep>.df-col-6{flex:0 0 calc(50% - var(--df-grid-gap) * .5);max-width:calc(50% - var(--df-grid-gap) * .5)}:host ::ng-deep>.df-col-7{flex:0 0 calc(58.3333333333% - var(--df-grid-gap) * .4166666667);max-width:calc(58.3333333333% - var(--df-grid-gap) * .4166666667)}:host ::ng-deep>.df-col-8{flex:0 0 calc(66.6666666667% - var(--df-grid-gap) * .3333333333);max-width:calc(66.6666666667% - var(--df-grid-gap) * .3333333333)}:host ::ng-deep>.df-col-9{flex:0 0 calc(75% - var(--df-grid-gap) * .25);max-width:calc(75% - var(--df-grid-gap) * .25)}:host ::ng-deep>.df-col-10{flex:0 0 calc(83.3333333333% - var(--df-grid-gap) * .1666666667);max-width:calc(83.3333333333% - var(--df-grid-gap) * .1666666667)}:host ::ng-deep>.df-col-11{flex:0 0 calc(91.6666666667% - var(--df-grid-gap) * .0833333333);max-width:calc(91.6666666667% - var(--df-grid-gap) * .0833333333)}:host ::ng-deep>.df-col-12{flex:0 0 calc(100% - var(--df-grid-gap) * 0);max-width:calc(100% - var(--df-grid-gap) * 0)}:host.df-gap-custom{--df-grid-gap: var(--row-custom-gap, 1rem)}@media(max-width:576px){:host.df-row-mobile-stack{flex-direction:column}:host.df-row-mobile-stack ::ng-deep>*{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:577px)and (max-width:768px){:host.df-row-tablet-2col ::ng-deep>*{flex:0 0 calc(50% - var(--df-grid-gap) / 2);max-width:calc(50% - var(--df-grid-gap) / 2)}}:host.df-container-hidden{display:none}@media(max-width:576px){:host{flex-direction:column}:host ::ng-deep>*{flex:0 0 100%!important;max-width:100%!important}:host.df-row-mobile-keep-cols{flex-direction:row}:host.df-row-mobile-keep-cols ::ng-deep>*:not([class*=df-col-]){flex:0 0 auto!important;max-width:none!important}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RowFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RowFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[row-field]', imports: [NgComponentOutlet], template: `
     @for (field of resolvedFields(); track field.key) {
@@ -14480,21 +14994,20 @@ class GroupFieldComponent {
     // ─────────────────────────────────────────────────────────────────────────────
     setupEffects() {
         setupContainerInitEffect(this.resolvedFields, this.eventBus, 'group', () => this.field().key, this.injector);
-        explicitEffect([this.nestedFieldTree], ([tree]) => {
+        explicitEffect([this.nestedFieldTree, this.field], ([tree, field]) => {
             if (!tree) {
-                const groupKey = this.field().key;
-                this.logger.warn(`Group field "${groupKey}" not found in parent form. ` + `Ensure the parent form schema includes this group field.`);
+                this.logger.warn(`Group field "${field.key}" not found in parent form. ` + `Ensure the parent form schema includes this group field.`);
             }
-        });
+        }, { defer: true });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: GroupFieldComponent, isStandalone: true, selector: "fieldset[group-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted" }, host: { attributes: { "role": "group" }, properties: { "class": "hostClasses()", "class.disabled": "disabled()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GroupFieldComponent, isStandalone: true, selector: "fieldset[group-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted" }, host: { attributes: { "role": "group" }, properties: { "class": "hostClasses()", "class.disabled": "disabled()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, ngImport: i0, template: `
     @for (field of resolvedFields(); track field.key) {
       <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
     }
   `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{border:none;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}:host>*{grid-column:1/-1}:host.df-container-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: GroupFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GroupFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fieldset[group-field]', imports: [NgComponentOutlet], template: `
     @for (field of resolvedFields(); track field.key) {
@@ -14734,7 +15247,7 @@ function resolveArrayItem(options) {
             injector,
             inputs,
         };
-    }), catchError$1((error) => {
+    }), catchError((error) => {
         if (!destroyRef.destroyed) {
             const logger = parentInjector.get(DynamicFormLogger);
             logger.error(`Failed to load component for field type '${template.type}' at index ${index} ` +
@@ -14941,6 +15454,18 @@ class ArrayFieldComponent {
     }, ...(ngDevMode ? [{ debugName: "itemPositionMap" }] : []));
     /** Read-only view of resolved items for template consumption. */
     resolvedItems = computed(() => this.resolvedItemsSignal(), ...(ngDevMode ? [{ debugName: "resolvedItems" }] : []));
+    /**
+     * Whether the array has reached its configured maxLength.
+     * Exposed as a public signal so add-button components can bind [disabled]="atMaxLength()".
+     */
+    atMaxLength = computed(() => {
+        const maxLength = this.field().maxLength;
+        if (maxLength === undefined)
+            return false;
+        const arrayKey = this.field().key;
+        const currentArray = getArrayValue(this.parentFieldSignalContext.value(), arrayKey);
+        return currentArray.length >= maxLength;
+    }, ...(ngDevMode ? [{ debugName: "atMaxLength" }] : []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Auto-remove Cache
     // ─────────────────────────────────────────────────────────────────────────────
@@ -15061,7 +15586,7 @@ class ArrayFieldComponent {
             loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
             generateItemId: this.generateItemId,
             primitiveFieldKey: isPrimitiveItem ? templates[0].key : undefined,
-        }).pipe(catchError$1((error) => {
+        }).pipe(catchError((error) => {
             this.logger.error(`Failed to resolve array item at index ${insertIndex}:`, error);
             return of(undefined);
         })));
@@ -15130,7 +15655,7 @@ class ArrayFieldComponent {
             return;
         }
         // Wrap each item observable to catch individual errors
-        const safeItemObservables = fieldTrees.map((_, i) => this.createResolveItemObservable(i, positionalTemplates?.[i]).pipe(catchError$1((error) => {
+        const safeItemObservables = fieldTrees.map((_, i) => this.createResolveItemObservable(i, positionalTemplates?.[i]).pipe(catchError((error) => {
             this.logger.error(`Failed to resolve array item at index ${i}:`, error);
             return of(undefined);
         })));
@@ -15169,7 +15694,7 @@ class ArrayFieldComponent {
         // Wrap each item observable to catch individual errors
         const safeItemObservables = itemsToResolve.map((_, i) => {
             const index = startIndex + i;
-            return this.createResolveItemObservable(index).pipe(catchError$1((error) => {
+            return this.createResolveItemObservable(index).pipe(catchError((error) => {
                 this.logger.error(`Failed to resolve array item at index ${index}:`, error);
                 return of(undefined);
             }));
@@ -15269,15 +15794,27 @@ class ArrayFieldComponent {
         const currentArray = getArrayValue(currentValue, arrayKey);
         if (currentArray.length === 0)
             return;
-        // When index is provided, validate it's within bounds. Out-of-bounds is a no-op.
-        // When index is undefined, remove the last item (pop behavior).
-        const removeIndex = index !== undefined ? index : currentArray.length - 1;
-        // Ignore out-of-bounds indices - they should be a no-op, not remove the last item
-        if (removeIndex < 0 || removeIndex >= currentArray.length)
+        // When index is undefined or -1, remove the last item.
+        let removeIndex;
+        if (index === undefined || index === -1) {
+            removeIndex = currentArray.length - 1;
+        }
+        else if (index < -1 || index >= currentArray.length) {
+            this.logger.warn(`removeArrayItem index ${index} is out of bounds for array '${arrayKey}' with length ${currentArray.length}. Operation skipped.`);
             return;
+        }
+        else {
+            removeIndex = index;
+        }
         // Update resolvedItems FIRST - remove the item at the specified index.
         // This ensures differential update sees "none" (lengths already match).
         // Remaining items' linkedSignal indices auto-update via itemPositionMap.
+        //
+        // When the item is removed from resolvedItemsSignal, the @for loop removes the DOM element
+        // and NgComponentOutlet destroys the component view, triggering DestroyRef callbacks.
+        // Async validators use Angular's resource API tied to the form-level schema path — when the
+        // array value is updated below, the resource's params re-evaluate. If the removed item's path
+        // no longer exists, params returns undefined, cancelling the pending validation automatically.
         const removedItem = this.resolvedItemsSignal()[removeIndex];
         if (removedItem) {
             this.templateRegistry.delete(removedItem.id);
@@ -15294,8 +15831,8 @@ class ArrayFieldComponent {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         parentForm().value.set({ ...currentValue, [arrayKey]: newArray });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ArrayFieldComponent, isStandalone: true, selector: "array-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ArrayFieldComponent, isStandalone: true, selector: "array-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, providers: [
             // Each array gets its own template registry to track templates used for dynamically added items
             { provide: ARRAY_TEMPLATE_REGISTRY, useFactory: () => new Map() },
             // Each array gets its own ID generator for SSR hydration compatibility
@@ -15316,7 +15853,7 @@ class ArrayFieldComponent {
     }
   `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{display:grid;grid-template-columns:1fr;gap:var(--df-array-item-gap, var(--df-grid-row-gap, .5rem));width:100%}:host>*{grid-column:1/-1}:host.df-container-hidden{display:none}.df-array-item{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}.df-array-item>*{grid-column:1/-1}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ArrayFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ArrayFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'array-field', imports: [NgComponentOutlet], template: `
     @for (item of resolvedItems(); track item.id; let i = $index) {
@@ -15491,5 +16028,5 @@ function extractErrorParams(error) {
  * Generated bundle index. Do not edit.
  */
 
-export { baseFieldMapper as $, isContainerField as A, isDisplayOnlyField as B, ConsoleLogger as C, DynamicFormLogger as D, EventBus as E, isGroupField as F, isLeafField as G, isPageField as H, isValueBearingField as I, AppendArrayItemEvent as J, FormClearEvent as K, FormResetEvent as L, InsertArrayItemEvent as M, NoopLogger as N, NextPageEvent as O, PageChangeEvent as P, PopArrayItemEvent as Q, PrependArrayItemEvent as R, PreviousPageEvent as S, RemoveAtIndexEvent as T, ShiftArrayItemEvent as U, SubmitEvent as V, arrayEvent as W, createField as X, field as Y, formConfig as Z, DynamicFormError as _, createFieldResolutionPipe as a, buildBaseInputs as a0, arrayFieldMapper as a1, groupFieldMapper as a2, pageFieldMapper as a3, rowFieldMapper as a4, textFieldMapper as a5, FIELD_REGISTRY as a6, ARRAY_CONTEXT as a7, DEFAULT_PROPS as a8, DEFAULT_VALIDATION_MESSAGES as a9, FIELD_SIGNAL_CONTEXT as aa, FORM_OPTIONS as ab, dynamicTextToObservable as ac, ArrayFieldComponent as ad, GroupFieldComponent as ae, RowFieldComponent as af, applyValidator as ag, applyValidators as ah, getArrayLength as ai, resolveTokens as aj, BUILT_IN_FIELDS as ak, isEqual as al, omit as am, interpolateParams as an, applyMetaToElement as ao, RootFormRegistryService as ap, DynamicTextPipe as b, computeContainerHostClasses as c, derivedFromDeferred as d, DynamicForm as e, withEventFormValue as f, withValueExclusionDefaults as g, hasFormValue as h, injectFieldRegistry as i, isFormStateCondition as j, resolveNextButtonDisabled as k, resolveNonFieldHidden as l, resolveNonFieldDisabled as m, evaluateNonFieldHidden as n, evaluateNonFieldDisabled as o, provideDynamicForm as p, isCheckedField as q, resolveSubmitButtonDisabled as r, setupContainerInitEffect as s, isValueField as t, isRowField as u, validatePageNesting as v, withLoggerConfig as w, isSimplifiedArrayField as x, isPropertyDerivationLogicConfig as y, isArrayField as z };
-//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-Bf6Qnz0T.mjs.map
+export { hasFormValue as $, ARRAY_CONTEXT as A, BUILT_IN_FIELDS as B, ConsoleLogger as C, DynamicFormLogger as D, EventBus as E, FIELD_REGISTRY as F, GroupFieldComponent as G, applyMetaToElement as H, INITIALIZATION_TIMEOUT_MS as I, applyValidator as J, applyValidators as K, arrayEvent as L, arrayFieldMapper as M, NextPageEvent as N, baseFieldMapper as O, PageChangeEvent as P, buildBaseInputs as Q, RemoveAtIndexEvent as R, ShiftArrayItemEvent as S, createField as T, dynamicTextToObservable as U, evaluateNonFieldDisabled as V, evaluateNonFieldHidden as W, field as X, formConfig as Y, getArrayLength as Z, groupFieldMapper as _, createFieldResolutionPipe as a, interpolateParams as a0, isArrayField as a1, isCheckedField as a2, isContainerField as a3, isDisplayOnlyField as a4, isEqual as a5, isFormStateCondition as a6, isGroupField as a7, isLeafField as a8, isPageField as a9, isPropertyDerivationLogicConfig as aa, isRowField as ab, isSimplifiedArrayField as ac, isValueBearingField as ad, isValueField as ae, omit as af, pageFieldMapper as ag, provideDynamicForm as ah, resolveNextButtonDisabled as ai, resolveNonFieldDisabled as aj, resolveNonFieldHidden as ak, resolveSubmitButtonDisabled as al, resolveTokens as am, rowFieldMapper as an, textFieldMapper as ao, withEventFormValue as ap, withLoggerConfig as aq, withValueExclusionDefaults as ar, DynamicTextPipe as b, computeContainerHostClasses as c, derivedFromDeferred as d, AppendArrayItemEvent as e, ArrayFieldComponent as f, DEFAULT_PROPS as g, DEFAULT_VALIDATION_MESSAGES as h, injectFieldRegistry as i, DynamicForm as j, DynamicFormError as k, EventDispatcher as l, FIELD_SIGNAL_CONTEXT as m, FORM_OPTIONS as n, FormClearEvent as o, FormResetEvent as p, InsertArrayItemEvent as q, NoopLogger as r, setupContainerInitEffect as s, PopArrayItemEvent as t, PrependArrayItemEvent as u, validatePageNesting as v, PreviousPageEvent as w, RootFormRegistryService as x, RowFieldComponent as y, SubmitEvent as z };
+//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-DXXp5M0q.mjs.map