@ng-forge/dynamic-forms 0.6.0 → 0.7.0

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

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, isSignal, untracked, isDevMode, isWritableSignal, Injector, DestroyRef, computed, input, linkedSignal, ChangeDetectionStrategy, Component, signal, runInInjectionContext, afterNextRender, model, makeEnvironmentProviders, Pipe } from '@angular/core';
+import { InjectionToken, inject, Injectable, isSignal, untracked, isWritableSignal, isDevMode, Injector, DestroyRef, computed, input, linkedSignal, ChangeDetectionStrategy, Component, resourceFromSnapshots, signal, runInInjectionContext, afterNextRender, model, EnvironmentInjector, makeEnvironmentProviders, Pipe } from '@angular/core';
 import { NgComponentOutlet } from '@angular/common';
-import { toObservable, toSignal, takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
+import { toObservable, toSignal, takeUntilDestroyed, rxResource, 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, 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.6", ngImport: i0, type: EventBus, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", 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.6", 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.
  */
@@ -1173,12 +1240,12 @@ function assertNever(value) {
  *    - Example: `noSpaces: (ctx) => ctx.value().includes(' ') ? { kind: 'noSpaces' } : null`
  *
  * 3. **Async Validators** - For asynchronous validation (debouncing, database lookups, etc.)
- *    - Used in: validators array on fields with type 'customAsync'
+ *    - Used in: validators array on fields with type 'async'
  *    - Return type: Observable<ValidationError | ValidationError[] | null>
  *    - Example: `checkUsername: (ctx) => userService.checkAvailability(ctx.value())`
  *
  * 4. **HTTP Validators** - For HTTP-based validation with automatic request cancellation
- *    - Used in: validators array on fields with type 'customHttp'
+ *    - Used in: validators array on fields with type 'http'
  *    - Configuration object with url, method, mapResponse, etc.
  *    - Example: `{ url: '/api/check', method: 'GET', mapResponse: ... }`
  *
@@ -1225,8 +1292,6 @@ class FunctionRegistryService {
     customFunctions = new Map();
     customFunctionScopes = new Map();
     derivationFunctions = new Map();
-    // TODO(@ng-forge): remove deprecated code in next minor
-    propertyDerivationFunctions = new Map();
     asyncDerivationFunctions = new Map();
     asyncConditionFunctions = new Map();
     validators = new Map();
@@ -1338,50 +1403,6 @@ class FunctionRegistryService {
         this.derivationFunctions.clear();
     }
     // ─────────────────────────────────────────────────────────────────────────────
-    // Property Derivation Functions
-    // TODO(@ng-forge): remove deprecated code in next minor
-    // ─────────────────────────────────────────────────────────────────────────────
-    /**
-     * Register a property derivation function.
-     *
-     * Property derivation functions compute derived values for field properties
-     * (like `minDate`, `options`, `label`) and are called when a
-     * `PropertyDerivationLogicConfig` references them by `functionName`.
-     *
-     * @param name - Unique identifier for the function
-     * @param fn - Function that receives EvaluationContext and returns the derived property value
-     */
-    registerPropertyDerivationFunction(name, fn) {
-        this.propertyDerivationFunctions.set(name, fn);
-    }
-    /**
-     * Get a property derivation function by name
-     */
-    getPropertyDerivationFunction(name) {
-        return this.propertyDerivationFunctions.get(name) ?? this.derivationFunctions.get(name);
-    }
-    /**
-     * Get all property derivation functions as an object
-     */
-    getPropertyDerivationFunctions() {
-        return Object.fromEntries(this.propertyDerivationFunctions);
-    }
-    /**
-     * Set property derivation functions from a config object.
-     * Only updates functions if their references have changed.
-     *
-     * @param functions - Object mapping function names to property derivation functions
-     */
-    setPropertyDerivationFunctions(functions) {
-        this.setRegistryIfChanged(this.propertyDerivationFunctions, functions);
-    }
-    /**
-     * Clear all property derivation functions
-     */
-    clearPropertyDerivationFunctions() {
-        this.propertyDerivationFunctions.clear();
-    }
-    // ─────────────────────────────────────────────────────────────────────────────
     // Async Derivation Functions
     // ─────────────────────────────────────────────────────────────────────────────
     /**
@@ -1682,17 +1703,16 @@ class FunctionRegistryService {
     clearAll() {
         this.clearCustomFunctions();
         this.clearDerivationFunctions();
-        this.clearPropertyDerivationFunctions();
         this.clearAsyncDerivationFunctions();
         this.clearAsyncConditionFunctions();
         this.clearValidators();
         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.6", ngImport: i0, type: FunctionRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", 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.6", ngImport: i0, type: FunctionRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -1731,10 +1751,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.6", ngImport: i0, type: SchemaRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", 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.6", ngImport: i0, type: SchemaRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -2234,6 +2254,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 +2335,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.6", ngImport: i0, type: FieldContextRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", 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.6", ngImport: i0, type: FieldContextRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -2643,24 +2666,6 @@ function countArrayPlaceholders(path) {
     return path.split('.').filter((part) => part === '$').length;
 }
 
-/**
- * Emits a deprecation warning once per unique key in dev mode only.
- * Subsequent calls with the same `id` are silently ignored.
- *
- * @param logger - The DynamicFormLogger instance for output
- * @param tracker - DI-scoped tracker to deduplicate warnings
- * @param id - Unique identifier for this deprecation (e.g., 'type:propertyDerivation')
- * @param message - Human-readable deprecation message
- *
- * @public
- */
-function warnDeprecated(logger, tracker, id, message) {
-    if (isDevMode() && !tracker.warnedKeys.has(id)) {
-        tracker.warnedKeys.add(id);
-        logger.warn(`[Dynamic Forms] DEPRECATED: ${message}`);
-    }
-}
-
 /**
  * Token types for expression parsing
  */
@@ -2812,6 +2817,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 +2942,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();
@@ -3509,16 +3522,22 @@ function evaluateCondition(expression, context) {
     switch (expression.type) {
         case 'fieldValue':
             return evaluateFieldValueCondition(expression, context);
-        case 'formValue':
-            // TODO(@ng-forge): remove deprecated code in next minor
-            if (context.deprecationTracker) {
-                warnDeprecated(context.logger, context.deprecationTracker, 'condition:formValue', "Condition type 'formValue' is deprecated. Use 'fieldValue' with a specific fieldPath, or 'javascript' for complex form-level comparisons.");
-            }
-            return evaluateFormValueCondition(expression, context);
         case 'javascript':
             return evaluateJavaScriptExpression(expression, context);
-        case 'custom':
-            return evaluateCustomFunction(expression, context);
+        case 'custom': {
+            const customFn = context.customFunctions?.[expression.functionName];
+            if (!customFn) {
+                context.logger.error('Custom function not found:', expression.functionName);
+                return false;
+            }
+            try {
+                return !!customFn(context);
+            }
+            catch (error) {
+                context.logger.error('Error executing custom function:', expression.functionName, error);
+                return false;
+            }
+        }
         case 'and':
             return evaluateAndCondition(expression, context);
         case 'or':
@@ -3551,12 +3570,9 @@ function evaluateFieldValueCondition(expression, context) {
             : undefined;
     return compareValues(fieldValue, expression.value, expression.operator);
 }
-function evaluateFormValueCondition(expression, context) {
-    return compareValues(context.formValue, expression.value, expression.operator);
-}
 function evaluateJavaScriptExpression(expression, context) {
     try {
-        // Use secure AST-based expression parser instead of new Function()
+        // Use secure AST-based expression parser instead of dynamic code execution
         const result = ExpressionParser.evaluate(expression.expression, context);
         return !!result;
     }
@@ -3565,25 +3581,6 @@ function evaluateJavaScriptExpression(expression, context) {
         return false;
     }
 }
-function evaluateCustomFunction(expression, context) {
-    const fnName = 'functionName' in expression ? expression.functionName : expression.expression;
-    // TODO(@ng-forge): remove deprecated code in next minor
-    if (!('functionName' in expression) && context.deprecationTracker) {
-        warnDeprecated(context.logger, context.deprecationTracker, 'condition:custom:expression', "CustomCondition 'expression' field is deprecated. Use 'functionName' instead.");
-    }
-    const customFn = context.customFunctions?.[fnName];
-    if (!customFn) {
-        context.logger.error('Custom function not found:', fnName);
-        return false;
-    }
-    try {
-        return !!customFn(context);
-    }
-    catch (error) {
-        context.logger.error('Error executing custom function:', fnName, error);
-        return false;
-    }
-}
 function evaluateAndCondition(expression, context) {
     if (expression.conditions.length === 0)
         return false;
@@ -4492,21 +4489,6 @@ function isStateLogicConfig(config) {
 function isDerivationLogicConfig(config) {
     return config.type === 'derivation';
 }
-// TODO(@ng-forge): remove deprecated code in next minor
-/**
- * Type guard to check if a logic config is a PropertyDerivationLogicConfig.
- *
- * @deprecated Use `isDerivationLogicConfig(config) && hasTargetProperty(config)` instead.
- * Will be removed in a future minor version.
- *
- * @param config - The logic config to check
- * @returns true if the config is for property derivation
- *
- * @public
- */
-function isPropertyDerivationLogicConfig(config) {
-    return config.type === 'propertyDerivation';
-}
 /**
  * Type guard to check if a derivation config targets a property rather than the field value.
  *
@@ -4565,18 +4547,13 @@ function isCrossFieldExpression(expr, context) {
         case 'fieldValue':
             // fieldPath means it references another field's value
             return !!expr.fieldPath;
-        case 'formValue':
-            // formValue type always accesses the form state
-            return true;
         case 'javascript':
             // Check for formValue.* patterns in the expression string
             return FORM_VALUE_ACCESS_PATTERN.test(expr.expression || '');
         case 'custom': {
             // For custom functions, determine scope from registry or default to cross-field.
-            // Support both new API (functionName) and deprecated API (expression).
-            //
             // Look up function scope from registry if context is provided
-            const functionName = 'functionName' in expr ? expr.functionName : expr.expression;
+            const functionName = expr.functionName;
             if (context?.getFunctionScope && functionName) {
                 const scope = context.getFunctionScope(functionName);
                 if (scope === 'field') {
@@ -4622,10 +4599,6 @@ function extractExpressionDependencies(expr) {
                 deps.add(expr.fieldPath.split('.')[0]);
             }
             break;
-        case 'formValue':
-            // Full form access - depends on everything
-            deps.add('*');
-            break;
         case 'javascript':
             // Extract from formValue.* patterns in expression
             extractFromExpressionString(expr.expression || '', deps);
@@ -4740,7 +4713,7 @@ function isCrossFieldBuiltInValidator(config) {
  * because they require field-level registration.
  */
 function isResourceBasedValidator(config) {
-    return config.type === 'customAsync' || config.type === 'customHttp' || config.type === 'http';
+    return config.type === 'async' || config.type === 'http';
 }
 /**
  * Detects if a validator's `when` condition is cross-field.
@@ -4771,23 +4744,6 @@ function hasCrossFieldWhenCondition(config, context) {
 function isCrossFieldStateLogic(config, context) {
     return isCrossFieldExpression(config.condition, context);
 }
-/**
- * Detects if a LogicConfig has a cross-field condition.
- *
- * @param config The logic configuration to check
- * @param context Optional context providing function scope lookup
- * @returns true if the logic condition references other fields
- *
- * @deprecated Use `isCrossFieldStateLogic` for state logic configs.
- *             Derivation logic is handled by the derivation system.
- */
-function isCrossFieldLogic(config, context) {
-    // Only check state logic configs
-    if (!isStateLogicConfig(config)) {
-        return false;
-    }
-    return isCrossFieldExpression(config.condition, context);
-}
 // ============================================================================
 // Schema Detection
 // ============================================================================
@@ -5504,6 +5460,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 +5471,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 +5517,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 +5575,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 +5646,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 +5712,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 +5769,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 +5890,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 +5927,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.
@@ -5954,7 +5953,7 @@ class DerivationOrchestrator {
             this.warnAboutWildcardDependencies(collection.entries, fields.length);
             this.warnAboutMisconfiguredReEngagement(collection.entries);
             return collection;
-        }, ...(ngDevMode ? [{ debugName: "derivationCollection" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "derivationCollection" }] : /* istanbul ignore next */ []));
         this.setupOnChangeStream();
         this.setupDebouncedStream();
         this.setupHttpStreams();
@@ -6007,7 +6006,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 +6125,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 +6135,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();
         }
@@ -6526,9 +6528,9 @@ function computePropertyValue(entry, evalContext, applicatorContext) {
     }
     // Custom function
     if (entry.functionName) {
-        const fn = applicatorContext.propertyDerivationFunctions?.[entry.functionName];
+        const fn = applicatorContext.derivationFunctions?.[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`);
         }
         return fn(evalContext);
     }
@@ -6575,7 +6577,7 @@ function buildPropertyOverrideKey(arrayKey, index, fieldKey) {
 /**
  * Collects all property derivation entries from field definitions.
  *
- * Traverses the field definition tree and extracts `type: 'propertyDerivation'`
+ * Traverses the field definition tree and extracts `type: 'derivation'` with `targetProperty`
  * entries from each field's `logic` array.
  *
  * No topological sort is needed because property derivations don't chain —
@@ -6635,46 +6637,13 @@ function collectFromField$1(field, entries, context) {
     const validationField = field;
     if (validationField.logic) {
         for (const logicConfig of validationField.logic) {
-            if (isPropertyDerivationLogicConfig(logicConfig)) {
-                // TODO(@ng-forge): remove deprecated code in next minor
-                // Deprecated path — emit warning, then process normally
-                warnDeprecated(context.logger, context.tracker, 'type:propertyDerivation', "Logic type 'propertyDerivation' is deprecated. Use type: 'derivation' with targetProperty instead.");
-                const entry = createPropertyDerivationEntry(fieldKey, logicConfig, context);
-                entries.push(entry);
-            }
-            else if (isDerivationLogicConfig(logicConfig) && hasTargetProperty(logicConfig)) {
-                // New unified path: type: 'derivation' + targetProperty → property derivation pipeline
+            if (isDerivationLogicConfig(logicConfig) && hasTargetProperty(logicConfig)) {
                 const entry = createPropertyDerivationEntryFromDerivation(fieldKey, logicConfig, context);
                 entries.push(entry);
             }
         }
     }
 }
-/**
- * Creates a property derivation entry from a `PropertyDerivationLogicConfig`.
- *
- * @internal
- */
-function createPropertyDerivationEntry(fieldKey, config, context) {
-    const effectiveFieldKey = buildPropertyOverrideKey(context.arrayPath, context.arrayPath ? PLACEHOLDER_INDEX : undefined, fieldKey);
-    const dependsOn = extractDependencies(config);
-    const condition = config.condition ?? true;
-    const trigger = config.trigger ?? 'onChange';
-    const debounceMs = trigger === 'debounced' ? config.debounceMs : undefined;
-    return {
-        fieldKey: effectiveFieldKey,
-        targetProperty: config.targetProperty,
-        dependsOn,
-        condition,
-        value: config.value,
-        expression: config.expression,
-        functionName: config.functionName,
-        trigger,
-        debounceMs,
-        debugName: config.debugName,
-        originalConfig: config,
-    };
-}
 /**
  * Creates a property derivation entry from a `DerivationLogicConfig` that has `targetProperty`.
  *
@@ -6767,7 +6736,7 @@ class PropertyDerivationOrchestrator {
                 return null;
             }
             return collection;
-        }, ...(ngDevMode ? [{ debugName: "propertyDerivationCollection" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "propertyDerivationCollection" }] : /* istanbul ignore next */ []));
         // Side effects react to collection changes: clear the store, register fields, warn.
         // schemaFields is included in the dependency array to ensure the field count is always
         // in sync with the collection (avoids reading a stale value via untracked).
@@ -6800,7 +6769,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);
@@ -6827,7 +6796,7 @@ class PropertyDerivationOrchestrator {
         const applicatorContext = {
             formValue: this.config.formValue,
             store: this.config.store,
-            propertyDerivationFunctions: this.functionRegistry.getPropertyDerivationFunctions(),
+            derivationFunctions: this.functionRegistry.getDerivationFunctions(),
             customFunctions: this.functionRegistry.getCustomFunctions(),
             externalData: this.resolveExternalData(),
             logger: this.logger,
@@ -6843,7 +6812,7 @@ class PropertyDerivationOrchestrator {
         const applicatorContext = {
             formValue: this.config.formValue,
             store: this.config.store,
-            propertyDerivationFunctions: this.functionRegistry.getPropertyDerivationFunctions(),
+            derivationFunctions: this.functionRegistry.getDerivationFunctions(),
             customFunctions: this.functionRegistry.getCustomFunctions(),
             externalData: this.resolveExternalData(),
             logger: this.logger,
@@ -7233,20 +7202,21 @@ class PageOrchestratorComponent {
     eventBus = inject(EventBus);
     fieldContextRegistry = inject(FieldContextRegistryService);
     functionRegistry = inject(FunctionRegistryService);
+    formOptions = inject(FORM_OPTIONS, { optional: true });
     /**
      * Array of page field definitions to render
      */
-    pageFields = input.required(...(ngDevMode ? [{ debugName: "pageFields" }] : []));
+    pageFields = input.required(...(ngDevMode ? [{ debugName: "pageFields" }] : /* istanbul ignore next */ []));
     /**
      * Root form instance from parent DynamicForm.
      * Uses FieldTree<unknown> to accept any form type.
      */
-    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
     /**
      * Field signal context for child fields
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- FieldSignalContext is contravariant in TModel, using any allows accepting any form type
-    fieldSignalContext = input.required(...(ngDevMode ? [{ debugName: "fieldSignalContext" }] : []));
+    fieldSignalContext = input.required(...(ngDevMode ? [{ debugName: "fieldSignalContext" }] : /* istanbul ignore next */ []));
     /**
      * Computed signal that tracks which pages are hidden.
      * Returns an array of booleans where true means the page is hidden.
@@ -7255,7 +7225,7 @@ class PageOrchestratorComponent {
     pageHiddenStates = computed(() => {
         const pages = this.pageFields();
         return pages.map((page) => this.evaluatePageHidden(page));
-    }, ...(ngDevMode ? [{ debugName: "pageHiddenStates" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "pageHiddenStates" }] : /* istanbul ignore next */ []));
     /**
      * Computed signal that returns indices of visible (non-hidden) pages.
      * This is used for navigation to skip hidden pages.
@@ -7266,7 +7236,7 @@ class PageOrchestratorComponent {
             .map((hidden, index) => ({ index, hidden }))
             .filter((item) => !item.hidden)
             .map((item) => item.index);
-    }, ...(ngDevMode ? [{ debugName: "visiblePageIndices" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "visiblePageIndices" }] : /* istanbul ignore next */ []));
     /**
      * Internal signal for current page index that tracks with page fields.
      * This tracks the actual page index, not the visible page index.
@@ -7281,7 +7251,7 @@ class PageOrchestratorComponent {
             return 0;
         // Start on page 0 (will be adjusted if page 0 is hidden by initial navigation)
         return 0;
-    }, ...(ngDevMode ? [{ debugName: "currentPageIndex" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "currentPageIndex" }] : /* istanbul ignore next */ []));
     /**
      * Computed state for the orchestrator
      */
@@ -7300,7 +7270,7 @@ class PageOrchestratorComponent {
             isLastPage: isLastVisiblePage,
             navigationDisabled: false,
         };
-    }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
     /**
      * Signal indicating whether all fields on the current page are valid.
      *
@@ -7320,13 +7290,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();
@@ -7336,7 +7304,7 @@ class PageOrchestratorComponent {
             }
         }
         return true;
-    }, ...(ngDevMode ? [{ debugName: "currentPageValid" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "currentPageValid" }] : /* istanbul ignore next */ []));
     /**
      * Extended field signal context that includes currentPageValid.
      *
@@ -7347,16 +7315,37 @@ class PageOrchestratorComponent {
     extendedFieldSignalContext = computed(() => ({
         ...this.fieldSignalContext(),
         currentPageValid: this.currentPageValid,
-    }), ...(ngDevMode ? [{ debugName: "extendedFieldSignalContext" }] : []));
+    }), ...(ngDevMode ? [{ debugName: "extendedFieldSignalContext" }] : /* istanbul ignore next */ []));
     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 +7415,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 +7423,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 +7449,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 +7522,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.6", ngImport: i0, type: PageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 +7553,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-Cen4ArED.mjs').then(m => m.default)], () => [import('./ng-forge-dynamic-forms-page-field.component-Cen4ArED.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.6", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [import('./ng-forge-dynamic-forms-page-field.component-Cen4ArED.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 +7593,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 +7967,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 +7976,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 };
@@ -8037,35 +8082,119 @@ class HttpConditionFunctionCacheService {
 }
 
 /**
- * Extracts a boolean from an HTTP response using an optional expression.
- * When `responseExpression` is provided, evaluates it with `{ response }` scope.
- * Otherwise, coerces the response to boolean.
- */
-function extractBoolean(response, responseExpression, pendingValue, logger) {
-    if (responseExpression) {
-        try {
-            const result = ExpressionParser.evaluate(responseExpression, { response });
-            return !!result;
-        }
-        catch (error) {
-            logger.warn(`Failed to evaluate responseExpression '${responseExpression}':`, error);
-            return pendingValue;
-        }
-    }
-    return !!response;
-}
-/**
- * Creates a logic function for an HTTP condition.
+ * Wraps a `Resource` so that the previous resolved value is preserved while the resource
+ * is loading or reloading. This prevents UI flicker when params change and a new request
+ * is in-flight — the consumer sees the stale value with a `loading`/`reloading` status
+ * instead of `undefined`.
  *
- * Uses a signal-based async resolution pattern: the LogicFn updates a `resolvedRequest` signal,
- * a reactive pipeline fetches the response and updates a `resultValue` signal.
- * The LogicFn returns the current `resultValue()`, which starts as `pendingValue` and
- * transitions to the actual HTTP result.
+ * Uses Angular's `resource.snapshot` + `resourceFromSnapshots` composition pattern.
  *
- * Must be called in injection context (same as `createLogicFunction`).
- */
-function createHttpConditionLogicFunction(condition) {
-    const httpClient = inject(HttpClient);
+ * @example
+ * ```typescript
+ * const user = withPreviousValue(
+ *   resource({ params: () => userId(), loader: ({ params }) => fetchUser(params) })
+ * );
+ * // user.value() keeps the old user data during loading transitions
+ * ```
+ *
+ * @experimental Uses Angular's experimental resource composition APIs.
+ */
+function withPreviousValue(input) {
+    const derived = linkedSignal({ ...(ngDevMode ? { debugName: "derived" } : /* istanbul ignore next */ {}), source: input.snapshot,
+        computation: (snapshot, previous) => {
+            // During loading/reloading, keep the previous resolved value if available.
+            // Don't preserve values from error states — those aren't useful to show.
+            if ((snapshot.status === 'loading' || snapshot.status === 'reloading') &&
+                previous !== undefined &&
+                previous.value.status !== 'error') {
+                return { status: snapshot.status, value: previous.value.value };
+            }
+            return snapshot;
+        } });
+    return resourceFromSnapshots(derived);
+}
+
+/**
+ * Type guard to check if a value is an array of Signals.
+ * @internal
+ */
+function isSignalArray(value) {
+    return Array.isArray(value) && value.every((item) => isSignal(item));
+}
+/**
+ * Type guard to check if a value is a record (object) of Signals.
+ * @internal
+ */
+function isSignalRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value) && Object.values(value).every((item) => isSignal(item));
+}
+// Implementation
+function derivedFromDeferred(source, operator, options) {
+    const deferred$ = defer(() => {
+        // Handle single signal
+        if (isSignal(source)) {
+            return toObservable(source, { injector: options.injector });
+        }
+        // Handle array of signals
+        if (isSignalArray(source)) {
+            const observables = source.map((s) => toObservable(s, { injector: options.injector }));
+            return combineLatest(observables);
+        }
+        // Handle object of signals
+        if (isSignalRecord(source)) {
+            const keys = Object.keys(source);
+            const observables = keys.map((key) => toObservable(source[key], { injector: options.injector }));
+            return combineLatest(observables, (...values) => {
+                const result = {};
+                keys.forEach((key, index) => {
+                    result[key] = values[index];
+                });
+                return result;
+            });
+        }
+        // Fallback - should not happen with proper typing
+        throw new Error('Invalid source type. Expected a Signal, array of Signals, or object of Signals.');
+    }).pipe(operator);
+    return toSignal(deferred$, { initialValue: options.initialValue, injector: options.injector });
+}
+
+/**
+ * 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) {
+            logger.warn(`Failed to evaluate responseExpression '${responseExpression}':`, error);
+            return pendingValue;
+        }
+    }
+    return !!response;
+}
+/**
+ * Creates a logic function for an HTTP condition.
+ *
+ * Uses Angular's `rxResource()` API with snapshot composition for async resolution:
+ * the LogicFn updates a `resolvedRequest` signal, a debounced version feeds into
+ * an `rxResource()` that manages the HTTP lifecycle, and `withPreviousValue()` preserves
+ * the last resolved boolean during re-fetching to prevent UI flicker.
+ *
+ * Must be called in injection context (same as `createLogicFunction`).
+ */
+function createHttpConditionLogicFunction(condition) {
+    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);
@@ -8088,51 +8217,69 @@ function createHttpConditionLogicFunction(condition) {
         const contextKey = safeReadPathKeys(ctx).join('.');
         let signalPair = perFunctionSignalStore.get(contextKey);
         if (!signalPair) {
-            const resolvedRequest = signal(undefined, ...(ngDevMode ? [{ debugName: "resolvedRequest" }] : []));
-            // Wrap in untracked() to avoid NG0602: toObservable() internally calls effect(),
+            const resolvedRequest = signal(undefined, ...(ngDevMode ? [{ debugName: "resolvedRequest" }] : /* istanbul ignore next */ []));
+            // Wrap in untracked() to avoid NG0602: resource() internally creates effects,
             // which cannot be created inside a reactive context (computed). The LogicFn runs
             // 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 method = request.method ?? 'GET';
-                    const options = {};
-                    if (request.body)
-                        options['body'] = request.body;
-                    if (request.headers)
-                        options['headers'] = request.headers;
-                    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) => {
-                        logger.warn('HTTP condition request failed:', error);
-                        return of(pendingValue);
-                    }));
-                }), startWith(pendingValue));
-                return toSignal(pipeline, { injector, initialValue: pendingValue });
+            // clear the active reactive consumer before creating the resource pipeline.
+            const resultResource = untracked(() => {
+                // Create a debounced, stabilized version of the request signal.
+                // This prevents rapid re-fetches when form values change quickly.
+                const debouncedRequest = derivedFromDeferred(resolvedRequest, pipe(debounceTime(debounceMs), distinctUntilChanged((prev, curr) => stableStringify(prev) === stableStringify(curr))), { initialValue: undefined, injector });
+                // rxResource() manages the HTTP lifecycle natively with Observables:
+                // auto-cancellation via unsubscription, loading/resolved/error status tracking,
+                // and signal-based reactivity.
+                const httpResource = rxResource({
+                    params: () => debouncedRequest() ?? undefined,
+                    // When params() returns undefined, rxResource() enters idle state and skips the stream.
+                    stream: ({ params: request }) => {
+                        const method = request.method ?? 'GET';
+                        const options = {};
+                        if (request.body)
+                            options['body'] = request.body;
+                        if (request.headers)
+                            options['headers'] = request.headers;
+                        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((error) => {
+                            logger.warn('HTTP condition request failed:', error);
+                            return of(pendingValue);
+                        }));
+                    },
+                    defaultValue: pendingValue,
+                    injector,
+                });
+                // Snapshot composition: preserve the previous boolean result during re-fetching.
+                // Without this, the condition would briefly flash to pendingValue when params change,
+                // causing visible UI flicker (e.g., a conditionally visible field briefly disappearing).
+                return withPreviousValue(httpResource);
             });
-            signalPair = { resolvedRequest, resultValue };
+            signalPair = { resolvedRequest, resultResource };
             perFunctionSignalStore.set(contextKey, signalPair);
         }
         // 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.resultResource.value();
+        }
         const requestKey = stableStringify(resolved);
         // Check response cache first
         const cachedResult = cache.get(requestKey);
         if (cachedResult !== undefined) {
             return cachedResult;
         }
-        // Update the resolved request signal (triggers pipeline if request changed)
-        const { resolvedRequest, resultValue } = signalPair;
+        // Update the resolved request signal (triggers resource if request changed)
+        const { resolvedRequest, resultResource } = signalPair;
         untracked(() => {
             const current = resolvedRequest();
             if (stableStringify(current) !== requestKey) {
                 resolvedRequest.set(resolved);
             }
         });
-        return resultValue();
+        return resultResource.value();
     };
     cacheService.httpConditionFunctionCache.set(cacheKey, fn);
     return fn;
@@ -8156,10 +8303,11 @@ class AsyncConditionFunctionCacheService {
 /**
  * Creates a logic function for an async condition.
  *
- * Uses a signal-based async resolution pattern: the LogicFn updates a `trigger` signal,
- * a reactive pipeline calls the async function and updates a `resultValue` signal.
- * The LogicFn returns the current `resultValue()`, which starts as `pendingValue` and
- * transitions to the actual async result.
+ * Uses Angular's `rxResource()` API with snapshot composition for async resolution:
+ * the LogicFn updates a `trigger` signal (serialized evaluation context), a debounced
+ * version feeds into an `rxResource()` that manages the async function lifecycle, and
+ * `withPreviousValue()` preserves the last resolved boolean during re-evaluation
+ * to prevent UI flicker.
  *
  * Must be called in injection context (same as `createLogicFunction`).
  */
@@ -8183,33 +8331,53 @@ function createAsyncConditionLogicFunction(condition) {
         const contextKey = safeReadPathKeys(ctx).join('.');
         let signalPair = perFunctionSignalStore.get(contextKey);
         if (!signalPair) {
-            const trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : []));
-            // Wrap in untracked() to avoid NG0602: toObservable() internally calls effect(),
+            const trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+            const ctxByTrigger = new Map();
+            // Wrap in untracked() to avoid NG0602: resource() internally creates effects,
             // which cannot be created inside a reactive context (computed). The LogicFn runs
             // 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(() => {
-                    // Look up the async function at call time (fresh reference)
-                    const asyncFn = functionRegistry.getAsyncConditionFunction(condition.asyncFunctionName);
-                    if (!asyncFn) {
-                        logger.warn(`Async Condition - function '${condition.asyncFunctionName}' not found. ` +
-                            `Register it in customFnConfig.asyncConditions.`);
-                        return of(pendingValue);
-                    }
-                    // Build evaluation context from current registry state
-                    const evaluationContext = untracked(() => fieldContextRegistry.createReactiveEvaluationContext(ctx, functionRegistry.getCustomFunctions()));
-                    // 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) => {
-                        logger.warn('Async Condition - function failed:', error);
-                        return of(pendingValue);
-                    })));
-                }));
-                return toSignal(pipeline, { injector, initialValue: pendingValue });
+            // clear the active reactive consumer before creating the resource pipeline.
+            const resultResource = untracked(() => {
+                // Debounce the trigger to batch rapid form value changes.
+                const debouncedTrigger = derivedFromDeferred(trigger, pipe(debounceTime(debounceMs), distinctUntilChanged()), {
+                    initialValue: undefined,
+                    injector,
+                });
+                // rxResource() manages the async function lifecycle natively with Observables:
+                // auto-cancellation via unsubscription and signal-based reactivity.
+                const asyncResource = rxResource({
+                    params: () => debouncedTrigger() ?? undefined,
+                    stream: ({ params: triggerKey }) => {
+                        // Look up the async function at call time (fresh reference)
+                        const asyncFn = functionRegistry.getAsyncConditionFunction(condition.asyncFunctionName);
+                        if (!asyncFn) {
+                            logger.warn(`Async Condition - function '${condition.asyncFunctionName}' not found. ` +
+                                `Register it in customFnConfig.asyncConditions.`);
+                            return of(pendingValue);
+                        }
+                        // Retrieve the FieldContext that was captured when this trigger key was set.
+                        // This avoids a race condition where a mutable ref could be overwritten by
+                        // a later LogicFn call before the loader finishes executing.
+                        const capturedCtx = ctxByTrigger.get(triggerKey);
+                        if (!capturedCtx)
+                            return of(pendingValue);
+                        const evaluationContext = untracked(() => fieldContextRegistry.createReactiveEvaluationContext(capturedCtx, functionRegistry.getCustomFunctions()));
+                        // asyncFn may return Promise<boolean> or Observable<boolean>.
+                        // from() normalizes both to Observable.
+                        return from(asyncFn(evaluationContext)).pipe(map$1((result) => !!result), catchError((error) => {
+                            logger.warn('Async Condition - function failed:', error);
+                            return of(pendingValue);
+                        }));
+                    },
+                    defaultValue: pendingValue,
+                    injector,
+                });
+                // Snapshot composition: preserve the previous boolean result during re-evaluation.
+                // Without this, the condition would briefly flash to pendingValue when the async
+                // function is re-invoked, causing visible UI flicker.
+                return withPreviousValue(asyncResource);
             });
-            signalPair = { trigger, resultValue };
+            signalPair = { trigger, resultResource, ctxByTrigger };
             perFunctionSignalStore.set(contextKey, signalPair);
         }
         // Build reactive evaluation context (creates signal dependencies on form values)
@@ -8220,15 +8388,18 @@ function createAsyncConditionLogicFunction(condition) {
             fieldValue: evaluationContext.fieldValue,
             externalData: evaluationContext.externalData,
         });
-        // Update the trigger signal (triggers pipeline if context changed)
-        const { trigger: triggerSignal, resultValue } = signalPair;
+        // Capture the FieldContext for this trigger key so the loader can retrieve it.
+        // Only keep the latest — previous entries are stale once the trigger changes.
+        const { trigger: triggerSignal, resultResource, ctxByTrigger } = signalPair;
+        ctxByTrigger.clear();
+        ctxByTrigger.set(contextSnapshot, ctx);
         untracked(() => {
             const current = triggerSignal();
             if (current !== contextSnapshot) {
                 triggerSignal.set(contextSnapshot);
             }
         });
-        return resultValue();
+        return resultResource.value();
     };
     cacheService.asyncConditionFunctionCache.set(cacheKey, fn);
     return fn;
@@ -8356,7 +8527,7 @@ function createDebouncedLogicFunction(expression, debounceMs) {
         let signalPair = cacheService.debouncedSignalStore.get(contextKey);
         if (!signalPair) {
             // Create a signal to hold the immediate evaluation result
-            const immediateValue = signal(false, ...(ngDevMode ? [{ debugName: "immediateValue" }] : []));
+            const immediateValue = signal(false, ...(ngDevMode ? [{ debugName: "immediateValue" }] : /* istanbul ignore next */ []));
             // Wrap in untracked() to avoid NG0602: toObservable() internally calls effect(),
             // which cannot be created inside a reactive context (computed). The LogicFn runs
             // inside Angular Signal Forms' BooleanOrLogic.compute (a computed).
@@ -8519,7 +8690,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;
@@ -8529,22 +8711,6 @@ function applyValidator(config, fieldPath) {
         case 'async':
             applyAsyncValidator(config, path);
             break;
-        case 'customAsync': {
-            // TODO(@ng-forge): remove deprecated code in next minor
-            const logger = inject(DynamicFormLogger);
-            const tracker = inject(DEPRECATION_WARNING_TRACKER);
-            warnDeprecated(logger, tracker, 'type:customAsync', "Validator type 'customAsync' is deprecated. Use type: 'async' instead.");
-            applyAsyncValidator(config, path);
-            break;
-        }
-        case 'customHttp': {
-            // TODO(@ng-forge): remove deprecated code in next minor
-            const logger = inject(DynamicFormLogger);
-            const tracker = inject(DEPRECATION_WARNING_TRACKER);
-            warnDeprecated(logger, tracker, 'type:customHttp', "Validator type 'customHttp' is deprecated. Use type: 'http' with functionName instead.");
-            applyFunctionHttpValidator(config, path);
-            break;
-        }
         case 'http':
             applyUnifiedHttpValidator(config, path);
             break;
@@ -8710,7 +8876,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);
@@ -8749,8 +8916,8 @@ function getConfigDebounceMs(config) {
     return undefined;
 }
 function applyLogic(config, fieldPath) {
-    // Value derivations and property derivations are handled by their respective orchestrators — skip them.
-    if (isDerivationLogicConfig(config) || isPropertyDerivationLogicConfig(config))
+    // Value derivations (including property derivations via targetProperty) are handled by their orchestrators — skip them.
+    if (isDerivationLogicConfig(config))
         return;
     // Guard against unrecognized logic types that may be added in the future.
     if (!isStateLogicConfig(config)) {
@@ -8787,6 +8954,10 @@ function applyLogicFn(type, path, logicFn) {
         case 'required':
             required(path, { when: logicFn });
             break;
+        default: {
+            const _exhaustive = type;
+            throw new DynamicFormError(`Unhandled state logic type: ${_exhaustive}`);
+        }
     }
 }
 function applyMultipleLogic(configs, fieldPath) {
@@ -8797,7 +8968,7 @@ function applyMultipleLogic(configs, fieldPath) {
  * Create a type predicate function from a predicate string.
  *
  * Uses the secure ExpressionParser with whitelist-based evaluation instead of
- * new Function() / eval. This provides security through:
+ * dynamic code execution. This provides security through:
  * - AST-based parsing (no code execution)
  * - Whitelisted operators only
  * - Whitelisted methods only (Array.isArray, typeof, instanceof, etc.)
@@ -8909,7 +9080,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 +10098,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 +10119,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',
@@ -10112,17 +10294,25 @@ function flattenFields(fields, registry, options = {}) {
  * @returns Object containing memoized processing functions
  */
 function createContainerFieldProcessors() {
+    const createFieldsResolver = (preserveRows = false) => (fields, registry) => {
+        let key = '';
+        for (const f of fields) {
+            key += (f.key ?? '') + ':' + (f.type ?? '') + '|';
+        }
+        return key + registry.size + '|' + preserveRows;
+    };
     const memoizedFlattenFields = memoize((fields, registry) => flattenFields([...fields], registry), {
         // registry.size is a valid cache key proxy because the field registry is populated
         // once at bootstrap and never mutated at runtime. If the registry were mutable,
         // we would need a content-based hash instead.
-        resolver: (fields, registry) => {
-            let key = '';
-            for (const f of fields) {
-                key += (f.key ?? '') + ':' + (f.type ?? '') + '|';
-            }
-            return key + registry.size;
-        },
+        resolver: createFieldsResolver(),
+        maxSize: 10,
+    });
+    const memoizedFlattenFieldsForRendering = memoize((fields, registry) => flattenFields([...fields], registry, { preserveRows: true }), {
+        // registry.size is a valid cache key proxy because the field registry is populated
+        // once at bootstrap and never mutated at runtime. If the registry were mutable,
+        // we would need a content-based hash instead.
+        resolver: createFieldsResolver(true),
         maxSize: 10,
     });
     const memoizedKeyBy = memoize((fields) => keyBy(fields, 'key'), {
@@ -10144,7 +10334,7 @@ function createContainerFieldProcessors() {
         },
         maxSize: 10,
     });
-    return { memoizedFlattenFields, memoizedKeyBy, memoizedDefaultValues };
+    return { memoizedFlattenFields, memoizedFlattenFieldsForRendering, memoizedKeyBy, memoizedDefaultValues };
 }
 /**
  * Shared container field processors injection token.
@@ -10166,50 +10356,6 @@ const CONTAINER_FIELD_PROCESSORS = new InjectionToken('CONTAINER_FIELD_PROCESSOR
     factory: () => createContainerFieldProcessors(),
 });
 
-/**
- * Type guard to check if a value is an array of Signals.
- * @internal
- */
-function isSignalArray(value) {
-    return Array.isArray(value) && value.every((item) => isSignal(item));
-}
-/**
- * Type guard to check if a value is a record (object) of Signals.
- * @internal
- */
-function isSignalRecord(value) {
-    return typeof value === 'object' && value !== null && !Array.isArray(value) && Object.values(value).every((item) => isSignal(item));
-}
-// Implementation
-function derivedFromDeferred(source, operator, options) {
-    const deferred$ = defer(() => {
-        // Handle single signal
-        if (isSignal(source)) {
-            return toObservable(source, { injector: options.injector });
-        }
-        // Handle array of signals
-        if (isSignalArray(source)) {
-            const observables = source.map((s) => toObservable(s, { injector: options.injector }));
-            return combineLatest(observables);
-        }
-        // Handle object of signals
-        if (isSignalRecord(source)) {
-            const keys = Object.keys(source);
-            const observables = keys.map((key) => toObservable(source[key], { injector: options.injector }));
-            return combineLatest(observables, (...values) => {
-                const result = {};
-                keys.forEach((key, index) => {
-                    result[key] = values[index];
-                });
-                return result;
-            });
-        }
-        // Fallback - should not happen with proper typing
-        throw new Error('Invalid source type. Expected a Signal, array of Signals, or object of Signals.');
-    }).pipe(operator);
-    return toSignal(deferred$, { initialValue: options.initialValue, injector: options.injector });
-}
-
 /**
  * Generates CSS class string for responsive grid layout based on field column configuration.
  *
@@ -10409,6 +10555,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 +10603,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 +10622,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 +10826,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 +10885,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 +11244,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.
  *
@@ -11403,7 +11707,7 @@ class FormStateMachine {
     }
     constructor(config) {
         this.config = config;
-        this._state = signal(createUninitializedState(), ...(ngDevMode ? [{ debugName: "_state" }] : []));
+        this._state = signal(createUninitializedState(), ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
         this.state = this._state.asReadonly();
         this.state$ = toObservable(this._state, { injector: config.injector });
         this.setupActionProcessing();
@@ -11415,7 +11719,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 +11802,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),
@@ -11671,7 +11981,6 @@ class FormStateManager {
     injector = inject(Injector);
     destroyRef = inject(DestroyRef);
     logger = inject(DynamicFormLogger);
-    deprecationTracker = inject(DEPRECATION_WARNING_TRACKER, { optional: true });
     eventBus = inject(EventBus);
     functionRegistry = inject(FunctionRegistryService);
     schemaRegistry = inject(SchemaRegistryService);
@@ -11698,26 +12007,13 @@ class FormStateManager {
     // Memoized Functions
     // ─────────────────────────────────────────────────────────────────────────────
     fieldProcessors = inject(CONTAINER_FIELD_PROCESSORS);
-    memoizedFlattenFieldsForRendering = memoize((fields, registry) => flattenFields(fields, registry, { preserveRows: true }), {
-        // registry.size is a valid cache key proxy because the field registry is populated
-        // once at bootstrap and never mutated at runtime. If the registry were mutable,
-        // we would need a content-based hash instead.
-        resolver: (fields, registry) => {
-            let key = '';
-            for (const f of fields) {
-                key += (f.key ?? '') + ':' + (f.type ?? '') + '|';
-            }
-            return key + registry.size;
-        },
-        maxSize: 10,
-    });
     // ─────────────────────────────────────────────────────────────────────────────
     // Internal State Signals
     // ─────────────────────────────────────────────────────────────────────────────
     /**
      * Field loading errors accumulated during resolution.
      */
-    fieldLoadingErrors = signal([], ...(ngDevMode ? [{ debugName: "fieldLoadingErrors" }] : []));
+    fieldLoadingErrors = signal([], ...(ngDevMode ? [{ debugName: "fieldLoadingErrors" }] : /* istanbul ignore next */ []));
     /**
      * Class-level form cache for the "hold until settled" pattern.
      * MUST be class-level — a local variable in the computed would reset on re-evaluation.
@@ -11748,7 +12044,7 @@ class FormStateManager {
         if (state.type === LifecycleState.Initializing)
             return state.config;
         return undefined;
-    }, ...(ngDevMode ? [{ debugName: "activeConfig" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "activeConfig" }] : /* istanbul ignore next */ []));
     /**
      * Current render phase: 'render' = showing form, 'teardown' = hiding old components.
      */
@@ -11757,9 +12053,9 @@ class FormStateManager {
         if (isTransitioningState(state) && state.phase === Phase.Teardown)
             return Phase.Teardown;
         return 'render';
-    }, ...(ngDevMode ? [{ debugName: "renderPhase" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "renderPhase" }] : /* istanbul ignore next */ []));
     /** Whether to render the form template. */
-    shouldRender = computed(() => this.activeConfig() !== undefined, ...(ngDevMode ? [{ debugName: "shouldRender" }] : []));
+    shouldRender = computed(() => this.activeConfig() !== undefined, ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
     /**
      * Computed form mode detection with validation.
      */
@@ -11769,14 +12065,14 @@ class FormStateManager {
             return { mode: 'non-paged', isValid: true, errors: [] };
         }
         return detectFormMode(config.fields || []);
-    }, ...(ngDevMode ? [{ debugName: "formModeDetection" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "formModeDetection" }] : /* istanbul ignore next */ []));
     /** Validation result for the current form configuration. */
     formConfigValidation = computed(() => {
         const config = this.activeConfig();
         if (!config)
             return { isValid: true, errors: [], warnings: [] };
         return FormModeValidator.validateFormConfiguration(config.fields || []);
-    }, ...(ngDevMode ? [{ debugName: "formConfigValidation" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "formConfigValidation" }] : /* istanbul ignore next */ []));
     /**
      * Effective form options (merged from config and input).
      */
@@ -11785,7 +12081,7 @@ class FormStateManager {
         const configOptions = config?.options || {};
         const inputOptions = this.deps.formOptions() ?? undefined;
         return { ...configOptions, ...inputOptions };
-    }, ...(ngDevMode ? [{ debugName: "effectiveFormOptions" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "effectiveFormOptions" }] : /* istanbul ignore next */ []));
     /**
      * Page field definitions (for paged forms).
      */
@@ -11796,11 +12092,11 @@ class FormStateManager {
             return config.fields.filter(isPageField);
         }
         return [];
-    }, ...(ngDevMode ? [{ debugName: "pageFieldDefinitions" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "pageFieldDefinitions" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Computed Signals - Form Setup
     // ─────────────────────────────────────────────────────────────────────────────
-    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : []));
+    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : /* istanbul ignore next */ []));
     /** Computed form setup — reads from the state machine, computed from config on bootstrap. */
     formSetup = computed(() => {
         const registry = this.rawFieldRegistry();
@@ -11831,18 +12127,18 @@ class FormStateManager {
             return this.createFormSetupFromConfig(config.fields, modeDetection.mode, registry);
         }
         return this.createEmptyFormSetup(registry);
-    }, ...(ngDevMode ? [{ debugName: "formSetup" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "formSetup" }] : /* istanbul ignore next */ []));
     /**
      * Default values computed from field definitions.
      */
-    defaultValues = linkedSignal(() => this.formSetup().defaultValues, ...(ngDevMode ? [{ debugName: "defaultValues" }] : []));
+    defaultValues = linkedSignal(() => this.formSetup().defaultValues, ...(ngDevMode ? [{ debugName: "defaultValues" }] : /* istanbul ignore next */ []));
     /** Valid field keys — memoized separately so the Set isn't rebuilt on every keystroke. */
     validKeys = computed(() => {
         const schemaFields = this.formSetup().schemaFields;
         if (!schemaFields || schemaFields.length === 0)
             return undefined;
         return new Set(schemaFields.map((f) => f.key).filter((key) => key !== undefined));
-    }, ...(ngDevMode ? [{ debugName: "validKeys" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "validKeys" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Computed Signals - Entity & Form
     // ─────────────────────────────────────────────────────────────────────────────
@@ -11881,39 +12177,36 @@ 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" }] : /* istanbul ignore next */ []));
     /**
      * 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;
-        });
-    }, ...(ngDevMode ? [{ debugName: "form" }] : []));
+        const schema = this.formSchema();
+        const injector = this.injector;
+        return untracked(() => (schema ? form(this.entity, schema, { injector }) : form(this.entity, { injector })));
+    }, ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
     /** Whether resolvedFields has caught up with fieldsSource (set in constructor). */
     isFieldPipelineSettled;
     /**
@@ -11940,14 +12233,14 @@ class FormStateManager {
                 return currentForm;
             },
         };
-    }, ...(ngDevMode ? [{ debugName: "fieldSignalContext" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "fieldSignalContext" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Computed Signals - Form State
     // ─────────────────────────────────────────────────────────────────────────────
     /** Intermediate computed that unwraps the double-signal (form()()) once. */
-    formInstance = computed(() => this.form()(), ...(ngDevMode ? [{ debugName: "formInstance" }] : []));
+    formInstance = computed(() => this.form()(), ...(ngDevMode ? [{ debugName: "formInstance" }] : /* istanbul ignore next */ []));
     /** Current form values (reactive). */
-    formValue = computed(() => this.formInstance().value(), ...(ngDevMode ? [{ debugName: "formValue" }] : []));
+    formValue = computed(() => this.formInstance().value(), ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
     /**
      * Form values filtered by value exclusion rules.
      *
@@ -11977,25 +12270,25 @@ class FormStateManager {
         // FieldTree doesn't expose this index signature, so we use a helper cast.
         const fieldTreeRecord = asFieldTreeRecord(formTree);
         return filterFormValue(rawValue, setup.schemaFields, fieldTreeRecord, setup.registry, this.valueExclusionDefaults, formOptions);
-    }, ...(ngDevMode ? [{ debugName: "filteredFormValue" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "filteredFormValue" }] : /* istanbul ignore next */ []));
     /** Whether the form is currently valid. */
-    valid = computed(() => this.formInstance().valid(), ...(ngDevMode ? [{ debugName: "valid" }] : []));
+    valid = computed(() => this.formInstance().valid(), ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
     /** Whether the form is currently invalid. */
-    invalid = computed(() => this.formInstance().invalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    invalid = computed(() => this.formInstance().invalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     /** Whether any form field has been modified. */
-    dirty = computed(() => this.formInstance().dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : []));
+    dirty = computed(() => this.formInstance().dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
     /** Whether any form field has been touched (blurred). */
-    touched = computed(() => this.formInstance().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    touched = computed(() => this.formInstance().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     /** Current validation errors from all fields. */
-    errors = computed(() => this.formInstance().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    errors = computed(() => this.formInstance().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
     /** Whether the form is disabled (from options or form state). */
     disabled = computed(() => {
         const optionsDisabled = this.effectiveFormOptions().disabled;
         const formDisabled = this.formInstance().disabled();
         return optionsDisabled ?? formDisabled;
-    }, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** Whether the form is currently submitting. */
-    submitting = computed(() => this.formInstance().submitting(), ...(ngDevMode ? [{ debugName: "submitting" }] : []));
+    submitting = computed(() => this.formInstance().submitting(), ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Field Resolution
     // ─────────────────────────────────────────────────────────────────────────────
@@ -12018,7 +12311,7 @@ class FormStateManager {
             }
         }
         return this.formSetup().fields;
-    }, { ...(ngDevMode ? { debugName: "fieldsSource" } : {}), equal: (a, b) => {
+    }, { ...(ngDevMode ? { debugName: "fieldsSource" } : /* istanbul ignore next */ {}), equal: (a, b) => {
             if (a === b)
                 return true;
             if (a.length !== b.length)
@@ -12037,7 +12330,7 @@ class FormStateManager {
     fieldInjector = computed(() => Injector.create({
         parent: this.injector,
         providers: [{ provide: FIELD_SIGNAL_CONTEXT, useValue: this.fieldSignalContext() }],
-    }), ...(ngDevMode ? [{ debugName: "fieldInjector" }] : []));
+    }), ...(ngDevMode ? [{ debugName: "fieldInjector" }] : /* istanbul ignore next */ []));
     /** Resolved fields ready for rendering. */
     resolvedFields;
     // ─────────────────────────────────────────────────────────────────────────────
@@ -12057,7 +12350,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([]);
             }
@@ -12117,14 +12410,17 @@ class FormStateManager {
         // fieldsSource changes atomically during transitions (lengths won't match until settled).
         this.isFieldPipelineSettled = computed(() => {
             return this.fieldsSource().length === this.resolvedFields().length;
-        }, ...(ngDevMode ? [{ debugName: "isFieldPipelineSettled" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "isFieldPipelineSettled" }] : /* istanbul ignore next */ []));
         this.submitted$ = this.eventBus.on('submit').pipe(filter(() => {
             if (!this.valid()) {
                 this.logger.debug('Form submitted while invalid, not emitting to (submitted) output');
                 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 +12444,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 = {};
@@ -12261,13 +12558,6 @@ class FormStateManager {
         if (customFnConfig.derivations) {
             this.functionRegistry.setDerivationFunctions(customFnConfig.derivations);
         }
-        // TODO(@ng-forge): remove deprecated code in next minor
-        if (customFnConfig.propertyDerivations) {
-            if (this.deprecationTracker) {
-                warnDeprecated(this.logger, this.deprecationTracker, 'customFnConfig:propertyDerivations', "customFnConfig.propertyDerivations is deprecated. Register functions under 'derivations' instead and use type: 'derivation' with targetProperty.");
-            }
-            this.functionRegistry.setPropertyDerivationFunctions(customFnConfig.propertyDerivations);
-        }
         if (customFnConfig.asyncDerivations) {
             this.functionRegistry.setAsyncDerivationFunctions(customFnConfig.asyncDerivations);
         }
@@ -12276,16 +12566,15 @@ class FormStateManager {
         }
         this.functionRegistry.setValidators(customFnConfig.validators);
         this.functionRegistry.setAsyncValidators(customFnConfig.asyncValidators);
-        // TODO(@ng-forge): remove deprecated code in next minor
-        if (customFnConfig.httpValidators && this.deprecationTracker) {
-            warnDeprecated(this.logger, this.deprecationTracker, 'customFnConfig:httpValidators', "customFnConfig.httpValidators registration path is deprecated. Use type: 'http' with functionName (for function-based) or http + responseMapping (for declarative).");
-        }
         this.functionRegistry.setHttpValidators(customFnConfig.httpValidators);
     }
     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 flattenedFieldsForRendering = this.fieldProcessors.memoizedFlattenFieldsForRendering(normalizedFields, registry);
         const fieldsById = this.fieldProcessors.memoizedKeyBy(flattenedFields);
         const defaultValues = this.fieldProcessors.memoizedDefaultValues(fieldsById, registry);
         const fieldsToRender = mode === 'paged' ? [] : flattenedFieldsForRendering;
@@ -12313,10 +12602,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.6", ngImport: i0, type: FormStateManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", 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.6", ngImport: i0, type: FormStateManager, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -12496,25 +12785,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 +12932,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.6", ngImport: i0, type: EventDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EventDispatcher });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EventDispatcher, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * Dynamic form component — renders a form based on configuration.
  * Delegates state management to `FormStateManager`.
@@ -12676,32 +13027,23 @@ class DynamicForm {
     // Inputs (must be declared BEFORE deps connection and stateManager injection)
     // ─────────────────────────────────────────────────────────────────────────────
     /** Form configuration defining the structure, validation, and behavior. */
-    config = input.required({ ...(ngDevMode ? { debugName: "config" } : {}), alias: 'dynamic-form' });
+    config = input.required({ ...(ngDevMode ? { debugName: "config" } : /* istanbul ignore next */ {}), alias: 'dynamic-form' });
     /** Runtime form options that override config options when provided. */
-    formOptions = input(undefined, ...(ngDevMode ? [{ debugName: "formOptions" }] : []));
+    formOptions = input(undefined, ...(ngDevMode ? [{ debugName: "formOptions" }] : /* istanbul ignore next */ []));
     /** Form values for two-way data binding. */
-    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Dependencies
     // ─────────────────────────────────────────────────────────────────────────────
     destroyRef = inject(DestroyRef);
     injector = inject(Injector);
+    environmentInjector = inject(EnvironmentInjector);
     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,10 +13092,17 @@ 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;
-    }, ...(ngDevMode ? [{ debugName: "totalComponentsCount" }] : []));
+        return countContainersRecursive(fields) + 1;
+    }, ...(ngDevMode ? [{ debugName: "totalComponentsCount" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Initialization
     // ─────────────────────────────────────────────────────────────────────────────
@@ -12799,14 +13148,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,39 +13193,80 @@ 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.6", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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>
-      } @else {
-        @for (field of resolvedFields(); track field.key) {
-          <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
+      @switch (formModeDetection().mode) {
+        @case ('paged') {
+          <div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="form()" [fieldSignalContext]="fieldSignalContext()"></div>
+        }
+        @case ('non-paged') {
+          @for (field of resolvedFields(); track field.key) {
+            <ng-container
+              *ngComponentOutlet="
+                field.component;
+                injector: field.injector;
+                environmentInjector: environmentInjector;
+                inputs: field.inputs()
+              "
+            />
+          }
+        }
+        @default {
+          never;
         }
       }
     }
   `, 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.6", ngImport: i0, type: DynamicForm, decorators: [{
             type: Component,
             args: [{ selector: 'form[dynamic-form]', imports: [NgComponentOutlet, PageOrchestratorComponent], template: `
     @if (shouldRender()) {
-      @if (formModeDetection().mode === 'paged') {
-        <div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="form()" [fieldSignalContext]="fieldSignalContext()"></div>
-      } @else {
-        @for (field of resolvedFields(); track field.key) {
-          <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
+      @switch (formModeDetection().mode) {
+        @case ('paged') {
+          <div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="form()" [fieldSignalContext]="fieldSignalContext()"></div>
+        }
+        @case ('non-paged') {
+          @for (field of resolvedFields(); track field.key) {
+            <ng-container
+              *ngComponentOutlet="
+                field.component;
+                injector: field.injector;
+                environmentInjector: environmentInjector;
+                inputs: field.inputs()
+              "
+            />
+          }
+        }
+        @default {
+          never;
         }
       }
     }
@@ -12888,6 +13280,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 +13833,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-Cen4ArED.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-cE1EUmYR.mjs'),
         mapper: textFieldMapper,
         valueHandling: 'exclude',
     },
@@ -14185,14 +14605,13 @@ 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.6", ngImport: i0, type: DynamicTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.6", 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.6", ngImport: i0, type: DynamicTextPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dynamicText',
-                    standalone: true,
                 }]
         }] });
 
@@ -14209,12 +14628,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 });
 }
@@ -14266,25 +14686,26 @@ class RowFieldComponent {
     destroyRef = inject(DestroyRef);
     fieldRegistry = injectFieldRegistry();
     injector = inject(Injector);
+    environmentInjector = inject(EnvironmentInjector);
     eventBus = inject(EventBus);
     logger = inject(DynamicFormLogger);
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
-    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
-    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Computed Signals
     // ─────────────────────────────────────────────────────────────────────────────
-    hostClasses = computed(() => computeContainerHostClasses('row', this.className()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    disabled = computed(() => this.field().disabled || false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : []));
+    hostClasses = computed(() => computeContainerHostClasses('row', this.className()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.field().disabled || false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Field Resolution
     // ─────────────────────────────────────────────────────────────────────────────
-    fieldsSource = computed(() => (this.field().fields || []), ...(ngDevMode ? [{ debugName: "fieldsSource" }] : []));
+    fieldsSource = computed(() => (this.field().fields || []), ...(ngDevMode ? [{ debugName: "fieldsSource" }] : /* istanbul ignore next */ []));
     resolvedFields = derivedFromDeferred(this.fieldsSource, createFieldResolutionPipe(() => ({
         loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
         registry: this.rawFieldRegistry(),
@@ -14309,18 +14730,22 @@ 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.6", ngImport: i0, type: RowFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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()" />
+      <ng-container
+        *ngComponentOutlet="field.component; injector: field.injector; environmentInjector: environmentInjector; 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 });
+  `, 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 ::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 ::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.6", ngImport: i0, type: RowFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[row-field]', imports: [NgComponentOutlet], template: `
     @for (field of resolvedFields(); track field.key) {
-      <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
+      <ng-container
+        *ngComponentOutlet="field.component; injector: field.injector; environmentInjector: environmentInjector; inputs: field.inputs()"
+      />
     }
   `, host: {
                         '[class]': 'hostClasses()',
@@ -14329,7 +14754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                         '[attr.aria-hidden]': 'hidden() || null',
                         '[id]': '`${key()}`',
                         '[attr.data-testid]': 'key()',
-                    }, 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: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"] }]
+                    }, 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: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 ::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 ::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"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }] } });
 
 var rowField_component = /*#__PURE__*/Object.freeze({
@@ -14353,6 +14778,7 @@ class GroupFieldComponent {
     fieldRegistry = injectFieldRegistry();
     parentFieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
     injector = inject(Injector);
+    environmentInjector = inject(EnvironmentInjector);
     eventBus = inject(EventBus);
     logger = inject(DynamicFormLogger);
     // ─────────────────────────────────────────────────────────────────────────────
@@ -14362,24 +14788,26 @@ class GroupFieldComponent {
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
-    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
-    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Computed Signals
     // ─────────────────────────────────────────────────────────────────────────────
-    hostClasses = computed(() => computeContainerHostClasses('group', this.className()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : []));
+    hostClasses = computed(() => computeContainerHostClasses('group', this.className()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : /* istanbul ignore next */ []));
     formSetup = computed(() => {
         const groupField = this.field();
         const registry = this.rawFieldRegistry();
         if (groupField.fields && groupField.fields.length > 0) {
             const flattenedFields = this.fieldProcessors.memoizedFlattenFields(groupField.fields, registry);
+            const flattenedFieldsForRendering = this.fieldProcessors.memoizedFlattenFieldsForRendering(groupField.fields, registry);
             const fieldsById = this.fieldProcessors.memoizedKeyBy(flattenedFields);
             const defaultValues = this.fieldProcessors.memoizedDefaultValues(fieldsById, registry);
             return {
-                fields: flattenedFields,
+                fields: flattenedFieldsForRendering,
+                schemaFields: flattenedFields,
                 originalFields: groupField.fields,
                 defaultValues,
                 registry,
@@ -14387,12 +14815,13 @@ class GroupFieldComponent {
         }
         return {
             fields: [],
+            schemaFields: [],
             originalFields: [],
             defaultValues: {},
             registry,
         };
-    }, ...(ngDevMode ? [{ debugName: "formSetup" }] : []));
-    defaultValues = linkedSignal(() => this.formSetup().defaultValues, ...(ngDevMode ? [{ debugName: "defaultValues" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "formSetup" }] : /* istanbul ignore next */ []));
+    defaultValues = linkedSignal(() => this.formSetup().defaultValues, ...(ngDevMode ? [{ debugName: "defaultValues" }] : /* istanbul ignore next */ []));
     /**
      * Entity computed from parent value, group key, and defaults.
      * Uses deep equality check to prevent unnecessary updates when
@@ -14411,28 +14840,28 @@ class GroupFieldComponent {
     form = computed(() => {
         return runInInjectionContext(this.injector, () => {
             const setup = this.formSetup();
-            if (setup.fields.length > 0) {
-                const schema = createSchemaFromFields(setup.fields, setup.registry);
+            if (setup.schemaFields.length > 0) {
+                const schema = createSchemaFromFields(setup.schemaFields, setup.registry);
                 return untracked(() => form(this.entity, schema));
             }
             return untracked(() => form(this.entity));
         });
-    }, ...(ngDevMode ? [{ debugName: "form" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Public State Signals
     // ─────────────────────────────────────────────────────────────────────────────
-    formValue = computed(() => this.entity(), ...(ngDevMode ? [{ debugName: "formValue" }] : []));
-    valid = computed(() => this.form()().valid(), ...(ngDevMode ? [{ debugName: "valid" }] : []));
-    invalid = computed(() => this.form()().invalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : []));
-    dirty = computed(() => this.form()().dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : []));
-    touched = computed(() => this.form()().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : []));
-    errors = computed(() => this.form()().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : []));
-    disabled = computed(() => this.form()().disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    formValue = computed(() => this.entity(), ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
+    valid = computed(() => this.form()().valid(), ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => this.form()().invalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = computed(() => this.form()().dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    touched = computed(() => this.form()().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    errors = computed(() => this.form()().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.form()().disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     nestedFieldTree = computed(() => {
         const parentForm = this.parentFieldSignalContext.form;
         const groupKey = this.field().key;
         return parentForm[groupKey];
-    }, ...(ngDevMode ? [{ debugName: "nestedFieldTree" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "nestedFieldTree" }] : /* istanbul ignore next */ []));
     groupFieldSignalContext = (() => {
         const nestedFieldTree = this.nestedFieldTree;
         return {
@@ -14457,7 +14886,7 @@ class GroupFieldComponent {
     // ─────────────────────────────────────────────────────────────────────────────
     // Field Resolution
     // ─────────────────────────────────────────────────────────────────────────────
-    fieldsSource = computed(() => this.formSetup().fields, ...(ngDevMode ? [{ debugName: "fieldsSource" }] : []));
+    fieldsSource = computed(() => this.formSetup().fields, ...(ngDevMode ? [{ debugName: "fieldsSource" }] : /* istanbul ignore next */ []));
     resolvedFields = derivedFromDeferred(this.fieldsSource, createFieldResolutionPipe(() => ({
         loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
         registry: this.rawFieldRegistry(),
@@ -14480,25 +14909,28 @@ 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.6", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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()" />
+      <ng-container
+        *ngComponentOutlet="field.component; injector: field.injector; environmentInjector: environmentInjector; 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.6", ngImport: i0, type: GroupFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fieldset[group-field]', imports: [NgComponentOutlet], template: `
     @for (field of resolvedFields(); track field.key) {
-      <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
+      <ng-container
+        *ngComponentOutlet="field.component; injector: field.injector; environmentInjector: environmentInjector; inputs: field.inputs()"
+      />
     }
   `, host: {
                         '[class]': 'hostClasses()',
@@ -14599,7 +15031,7 @@ function createArrayItemInjectorAndInputs(options) {
             return undefined;
         }
         return arrayFieldTree[index];
-    }, { ...(ngDevMode ? { debugName: "itemFormAccessor" } : {}), equal: isEqual });
+    }, { ...(ngDevMode ? { debugName: "itemFormAccessor" } : /* istanbul ignore next */ {}), equal: isEqual });
     const injector = createItemInjector({
         itemFormAccessor,
         indexSignal,
@@ -14706,7 +15138,7 @@ function resolveArrayItem(options) {
     const indexSignal = linkedSignal(() => {
         const positionMap = itemPositionMap();
         return positionMap.get(itemId) ?? index;
-    }, ...(ngDevMode ? [{ debugName: "indexSignal" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "indexSignal" }] : /* istanbul ignore next */ []));
     // Resolve all templates in parallel
     const fieldObservables = templates.map((template) => from(loadTypeComponent(template.type)).pipe(map$1((component) => {
         if (destroyRef.destroyed) {
@@ -14734,7 +15166,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} ` +
@@ -14826,6 +15258,7 @@ class ArrayFieldComponent {
     fieldRegistry = injectFieldRegistry();
     parentFieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
     parentInjector = inject(Injector);
+    environmentInjector = inject(EnvironmentInjector);
     eventBus = inject(EventBus);
     logger = inject(DynamicFormLogger);
     templateRegistry = inject(ARRAY_TEMPLATE_REGISTRY);
@@ -14833,10 +15266,10 @@ class ArrayFieldComponent {
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
-    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
-    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Computed Signals
     // ─────────────────────────────────────────────────────────────────────────────
@@ -14844,8 +15277,8 @@ class ArrayFieldComponent {
         const base = 'df-field df-array';
         const custom = this.className();
         return custom ? `${base} ${custom}` : base;
-    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : /* istanbul ignore next */ []));
     /**
      * Gets the auto-remove button FieldDef from normalization metadata.
      * Set by simplified array normalization for primitive arrays with remove buttons.
@@ -14855,7 +15288,7 @@ class ArrayFieldComponent {
     autoRemoveButton = computed(() => {
         const metadata = getNormalizedArrayMetadata(this.field());
         return metadata?.autoRemoveButton;
-    }, ...(ngDevMode ? [{ debugName: "autoRemoveButton" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "autoRemoveButton" }] : /* istanbul ignore next */ []));
     /**
      * For primitive array items, the key of the value field template (e.g., 'value').
      * Used to wrap the FormControl in the item context so getFieldTree(key) works.
@@ -14881,7 +15314,7 @@ class ArrayFieldComponent {
             return definitions[0].key;
         }
         return undefined;
-    }, ...(ngDevMode ? [{ debugName: "primitiveFieldKey" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "primitiveFieldKey" }] : /* istanbul ignore next */ []));
     /**
      * Gets the item templates (field definitions) for the array.
      * Each element can be either:
@@ -14907,7 +15340,7 @@ class ArrayFieldComponent {
             }
             return normalized;
         });
-    }, ...(ngDevMode ? [{ debugName: "itemTemplates" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "itemTemplates" }] : /* istanbul ignore next */ []));
     arrayFieldTrees = computed(() => {
         const arrayKey = this.field().key;
         const parentForm = this.parentFieldSignalContext.form;
@@ -14925,12 +15358,12 @@ class ArrayFieldComponent {
             items.push(itemFieldTree ?? null);
         }
         return items;
-    }, ...(ngDevMode ? [{ debugName: "arrayFieldTrees" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "arrayFieldTrees" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // State Signals
     // ─────────────────────────────────────────────────────────────────────────────
-    resolvedItemsSignal = signal([], ...(ngDevMode ? [{ debugName: "resolvedItemsSignal" }] : []));
-    updateVersion = signal(0, ...(ngDevMode ? [{ debugName: "updateVersion" }] : []));
+    resolvedItemsSignal = signal([], ...(ngDevMode ? [{ debugName: "resolvedItemsSignal" }] : /* istanbul ignore next */ []));
+    updateVersion = signal(0, ...(ngDevMode ? [{ debugName: "updateVersion" }] : /* istanbul ignore next */ []));
     /**
      * Map of item IDs to their current positions. O(1) lookup vs O(n) indexOf().
      * Used by child linkedSignals to reactively track their position in the array.
@@ -14938,9 +15371,21 @@ class ArrayFieldComponent {
     itemPositionMap = computed(() => {
         const items = this.resolvedItemsSignal();
         return new Map(items.map((item, idx) => [item.id, idx]));
-    }, ...(ngDevMode ? [{ debugName: "itemPositionMap" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "itemPositionMap" }] : /* istanbul ignore next */ []));
     /** Read-only view of resolved items for template consumption. */
-    resolvedItems = computed(() => this.resolvedItemsSignal(), ...(ngDevMode ? [{ debugName: "resolvedItems" }] : []));
+    resolvedItems = computed(() => this.resolvedItemsSignal(), ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+    /**
+     * 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" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Auto-remove Cache
     // ─────────────────────────────────────────────────────────────────────────────
@@ -15061,7 +15506,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 +15575,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 +15614,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 +15714,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 +15751,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.6", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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
@@ -15310,13 +15767,15 @@ class ArrayFieldComponent {
         [attr.data-array-item-index]="i"
       >
         @for (field of item.fields; track $index) {
-          <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
+          <ng-container
+            *ngComponentOutlet="field.component; injector: field.injector; environmentInjector: environmentInjector; inputs: field.inputs()"
+          />
         }
       </div>
     }
   `, 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.6", ngImport: i0, type: ArrayFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'array-field', imports: [NgComponentOutlet], template: `
     @for (item of resolvedItems(); track item.id; let i = $index) {
@@ -15328,7 +15787,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
         [attr.data-array-item-index]="i"
       >
         @for (field of item.fields; track $index) {
-          <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
+          <ng-container
+            *ngComponentOutlet="field.component; injector: field.injector; environmentInjector: environmentInjector; inputs: field.inputs()"
+          />
         }
       </div>
     }
@@ -15491,5 +15952,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, isRowField as aa, isSimplifiedArrayField as ab, isValueBearingField as ac, isValueField as ad, omit as ae, pageFieldMapper as af, provideDynamicForm as ag, resolveNextButtonDisabled as ah, resolveNonFieldDisabled as ai, resolveNonFieldHidden as aj, resolveSubmitButtonDisabled as ak, resolveTokens as al, rowFieldMapper as am, textFieldMapper as an, withEventFormValue as ao, withLoggerConfig as ap, withPreviousValue 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-Sad9wa1d.mjs.map