@ng-forge/dynamic-forms 0.6.1 → 0.7.0

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

@@ -1,9 +1,9 @@
 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, exhaustMap, EMPTY, from, catchError, Subject, filter, TimeoutError, of, throwError, debounceTime, distinctUntilChanged, tap, take as take$1, startWith, pairwise, map as map$1, switchMap as switchMap$1, Observable, takeUntil, combineLatestWith, auditTime, scheduled, queueScheduler, merge, timer, concat, defer, combineLatest, pipe, forkJoin, scan as scan$1, concatMap } from 'rxjs';
+import { 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';
@@ -532,10 +532,10 @@ class EventBus {
         }
         return this.pipeline$.pipe(filter((event) => event.type === eventType));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventBus, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventBus });
+    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.2.0", ngImport: i0, type: EventBus, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EventBus, decorators: [{
             type: Injectable
         }] });
 
@@ -1240,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: ... }`
  *
@@ -1292,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();
@@ -1405,58 +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.
-     *
-     * Merges both `derivationFunctions` and `propertyDerivationFunctions` maps,
-     * with `propertyDerivationFunctions` taking precedence. This allows users
-     * to migrate functions from `propertyDerivations` to `derivations` without
-     * breaking property derivation lookups.
-     */
-    getPropertyDerivationFunctions() {
-        return {
-            ...Object.fromEntries(this.derivationFunctions),
-            ...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
     // ─────────────────────────────────────────────────────────────────────────────
     /**
@@ -1757,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.2.0", ngImport: i0, type: FunctionRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FunctionRegistryService });
+    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.2.0", ngImport: i0, type: FunctionRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FunctionRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -1806,10 +1751,10 @@ class SchemaRegistryService {
         }
         return schema;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SchemaRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SchemaRegistryService });
+    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.2.0", ngImport: i0, type: SchemaRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SchemaRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -2390,10 +2335,10 @@ class FieldContextRegistryService {
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldContextRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldContextRegistryService });
+    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.2.0", ngImport: i0, type: FieldContextRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FieldContextRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -2721,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
  */
@@ -3595,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':
@@ -3637,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;
     }
@@ -3651,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;
@@ -4578,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.
  *
@@ -4651,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') {
@@ -4708,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);
@@ -4826,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.
@@ -4857,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
 // ============================================================================
@@ -6083,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();
@@ -6658,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.derivations or customFnConfig.propertyDerivations`);
+            throw new DynamicFormError(`Property derivation function '${entry.functionName}' not found in customFnConfig.derivations`);
         }
         return fn(evalContext);
     }
@@ -6707,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 —
@@ -6767,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`.
  *
@@ -6899,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).
@@ -6959,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,
@@ -6975,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,
@@ -7369,17 +7206,17 @@ class PageOrchestratorComponent {
     /**
      * 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.
@@ -7388,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.
@@ -7399,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.
@@ -7414,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
      */
@@ -7433,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.
      *
@@ -7467,7 +7304,7 @@ class PageOrchestratorComponent {
             }
         }
         return true;
-    }, ...(ngDevMode ? [{ debugName: "currentPageValid" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "currentPageValid" }] : /* istanbul ignore next */ []));
     /**
      * Extended field signal context that includes currentPageValid.
      *
@@ -7478,7 +7315,7 @@ 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();
@@ -7685,8 +7522,8 @@ class PageOrchestratorComponent {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PageOrchestratorComponent, isStandalone: true, selector: "div[page-orchestrator]", inputs: { pageFields: { classPropertyName: "pageFields", publicName: "pageFields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, fieldSignalContext: { classPropertyName: "fieldSignalContext", publicName: "fieldSignalContext", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-current-page": "state().currentPageIndex", "attr.data-total-pages": "state().totalPages" }, classAttribute: "df-page-orchestrator" }, providers: [
+    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(),
@@ -7716,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-D6M_uJKu.mjs').then(m => m.default)], () => [import('./ng-forge-dynamic-forms-page-field.component-D6M_uJKu.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.2.0", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [import('./ng-forge-dynamic-forms-page-field.component-D6M_uJKu.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
+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) {
@@ -8244,6 +8081,83 @@ class HttpConditionFunctionCacheService {
     httpConditionFunctionCache = new Map();
 }
 
+/**
+ * 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 Angular's `resource.snapshot` + `resourceFromSnapshots` composition pattern.
+ *
+ * @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.
@@ -8269,10 +8183,10 @@ function extractBoolean(response, responseExpression, pendingValue, logger) {
 /**
  * Creates a logic function for an HTTP condition.
  *
- * 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 `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`).
  */
@@ -8303,30 +8217,45 @@ 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$1((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);
-                    }));
-                }), 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)
@@ -8334,7 +8263,7 @@ function createHttpConditionLogicFunction(condition) {
         // Returns null when a path param is undefined — skip the request and return pending value
         const resolved = resolveHttpRequest(condition.http, evaluationContext);
         if (!resolved) {
-            return signalPair.resultValue();
+            return signalPair.resultResource.value();
         }
         const requestKey = stableStringify(resolved);
         // Check response cache first
@@ -8342,15 +8271,15 @@ function createHttpConditionLogicFunction(condition) {
         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;
@@ -8374,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`).
  */
@@ -8401,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$1(() => {
-                    // 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((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)
@@ -8438,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;
@@ -8574,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).
@@ -8758,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;
@@ -8979,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)) {
@@ -9017,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) {
@@ -9027,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.)
@@ -10353,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'), {
@@ -10385,7 +10334,7 @@ function createContainerFieldProcessors() {
         },
         maxSize: 10,
     });
-    return { memoizedFlattenFields, memoizedKeyBy, memoizedDefaultValues };
+    return { memoizedFlattenFields, memoizedFlattenFieldsForRendering, memoizedKeyBy, memoizedDefaultValues };
 }
 /**
  * Shared container field processors injection token.
@@ -10407,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.
  *
@@ -11802,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();
@@ -12076,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);
@@ -12103,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.
@@ -12153,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.
      */
@@ -12162,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.
      */
@@ -12174,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).
      */
@@ -12190,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).
      */
@@ -12201,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();
@@ -12236,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
     // ─────────────────────────────────────────────────────────────────────────────
@@ -12307,7 +12198,7 @@ class FormStateManager {
             return createFormLevelSchema(config.schema);
         }
         return undefined;
-    }), ...(ngDevMode ? [{ debugName: "formSchema" }] : []));
+    }), ...(ngDevMode ? [{ debugName: "formSchema" }] : /* istanbul ignore next */ []));
     /**
      * The Angular Signal Form instance.
      */
@@ -12315,7 +12206,7 @@ class FormStateManager {
         const schema = this.formSchema();
         const injector = this.injector;
         return untracked(() => (schema ? form(this.entity, schema, { injector }) : form(this.entity, { injector })));
-    }, ...(ngDevMode ? [{ debugName: "form" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
     /** Whether resolvedFields has caught up with fieldsSource (set in constructor). */
     isFieldPipelineSettled;
     /**
@@ -12342,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.
      *
@@ -12379,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
     // ─────────────────────────────────────────────────────────────────────────────
@@ -12420,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)
@@ -12439,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;
     // ─────────────────────────────────────────────────────────────────────────────
@@ -12519,7 +12410,7 @@ 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');
@@ -12667,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);
         }
@@ -12682,10 +12566,6 @@ 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) {
@@ -12694,7 +12574,7 @@ class FormStateManager {
         // 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;
@@ -12722,10 +12602,10 @@ class FormStateManager {
     ngOnDestroy() {
         this.machine.dispatch({ type: Action.Destroy });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormStateManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormStateManager });
+    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.2.0", ngImport: i0, type: FormStateManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FormStateManager, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -13126,10 +13006,10 @@ class EventDispatcher {
     disconnect() {
         this.bus = undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EventDispatcher });
+    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.0", ngImport: i0, type: EventDispatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EventDispatcher, decorators: [{
             type: Injectable
         }] });
 
@@ -13147,16 +13027,17 @@ 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);
     dispatcher = inject(EventDispatcher, { optional: true });
@@ -13221,7 +13102,7 @@ class DynamicForm {
     totalComponentsCount = computed(() => {
         const fields = this.stateManager.formSetup()?.fields ?? [];
         return countContainersRecursive(fields) + 1;
-    }, ...(ngDevMode ? [{ debugName: "totalComponentsCount" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "totalComponentsCount" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Initialization
     // ─────────────────────────────────────────────────────────────────────────────
@@ -13338,28 +13219,54 @@ class DynamicForm {
             error: (err) => this.logger.error('Submission handler error', err),
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DynamicForm, isStandalone: true, selector: "form[dynamic-form]", inputs: { config: { classPropertyName: "config", publicName: "dynamic-form", isSignal: true, isRequired: true, transformFunction: null }, formOptions: { classPropertyName: "formOptions", publicName: "formOptions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted", reset: "reset", cleared: "cleared", events: "events", initialized: "initialized", onPageChange: "onPageChange", onPageNavigationStateChange: "onPageNavigationStateChange" }, host: { attributes: { "novalidate": "" }, listeners: { "submit": "onNativeSubmit($event)" }, properties: { "class.disabled": "disabled()", "class.df-form-paged": "formModeDetection().mode === \"paged\"", "class.df-form-non-paged": "formModeDetection().mode === \"non-paged\"", "attr.data-form-mode": "formModeDetection().mode" }, classAttribute: "df-dynamic-form df-form" }, providers: [provideDynamicFormDI()], ngImport: i0, template: `
+    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.2.0", 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;
         }
       }
     }
@@ -13926,13 +13833,13 @@ const BUILT_IN_FIELDS = [
     },
     {
         name: 'page',
-        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-D6M_uJKu.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-Ael-STTb.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-cE1EUmYR.mjs'),
         mapper: textFieldMapper,
         valueHandling: 'exclude',
     },
@@ -14698,14 +14605,13 @@ class DynamicTextPipe {
         }
         return of(value || '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DynamicTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: DynamicTextPipe, isStandalone: true, name: "dynamicText" });
+    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.2.0", 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,
                 }]
         }] });
 
@@ -14780,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(),
@@ -14823,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.2.0", ngImport: i0, type: RowFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: RowFieldComponent, isStandalone: true, selector: "div[row-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "class.disabled": "disabled()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, ngImport: i0, template: `
+    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.2.0", 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()',
@@ -14843,7 +14754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", 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({
@@ -14867,6 +14778,7 @@ class GroupFieldComponent {
     fieldRegistry = injectFieldRegistry();
     parentFieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
     injector = inject(Injector);
+    environmentInjector = inject(EnvironmentInjector);
     eventBus = inject(EventBus);
     logger = inject(DynamicFormLogger);
     // ─────────────────────────────────────────────────────────────────────────────
@@ -14876,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,
@@ -14901,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
@@ -14925,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 {
@@ -14971,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(),
@@ -15000,18 +14915,22 @@ class GroupFieldComponent {
             }
         }, { defer: true });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GroupFieldComponent, isStandalone: true, selector: "fieldset[group-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted" }, host: { attributes: { "role": "group" }, properties: { "class": "hostClasses()", "class.disabled": "disabled()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, ngImport: i0, template: `
+    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.2.0", 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()',
@@ -15112,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,
@@ -15219,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) {
@@ -15339,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);
@@ -15346,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
     // ─────────────────────────────────────────────────────────────────────────────
@@ -15357,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.
@@ -15368,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.
@@ -15394,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:
@@ -15420,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;
@@ -15438,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.
@@ -15451,9 +15371,9 @@ 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()".
@@ -15465,7 +15385,7 @@ class ArrayFieldComponent {
         const arrayKey = this.field().key;
         const currentArray = getArrayValue(this.parentFieldSignalContext.value(), arrayKey);
         return currentArray.length >= maxLength;
-    }, ...(ngDevMode ? [{ debugName: "atMaxLength" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "atMaxLength" }] : /* istanbul ignore next */ []));
     // ─────────────────────────────────────────────────────────────────────────────
     // Auto-remove Cache
     // ─────────────────────────────────────────────────────────────────────────────
@@ -15831,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.2.0", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ArrayFieldComponent, isStandalone: true, selector: "array-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, providers: [
+    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
@@ -15847,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.2.0", 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) {
@@ -15865,7 +15787,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", 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>
     }
@@ -16028,5 +15952,5 @@ function extractErrorParams(error) {
  * Generated bundle index. Do not edit.
  */
 
-export { hasFormValue as $, ARRAY_CONTEXT as A, BUILT_IN_FIELDS as B, ConsoleLogger as C, DynamicFormLogger as D, EventBus as E, FIELD_REGISTRY as F, GroupFieldComponent as G, applyMetaToElement as H, INITIALIZATION_TIMEOUT_MS as I, applyValidator as J, applyValidators as K, arrayEvent as L, arrayFieldMapper as M, NextPageEvent as N, baseFieldMapper as O, PageChangeEvent as P, buildBaseInputs as Q, RemoveAtIndexEvent as R, ShiftArrayItemEvent as S, createField as T, dynamicTextToObservable as U, evaluateNonFieldDisabled as V, evaluateNonFieldHidden as W, field as X, formConfig as Y, getArrayLength as Z, groupFieldMapper as _, createFieldResolutionPipe as a, interpolateParams as a0, isArrayField as a1, isCheckedField as a2, isContainerField as a3, isDisplayOnlyField as a4, isEqual as a5, isFormStateCondition as a6, isGroupField as a7, isLeafField as a8, isPageField as a9, isPropertyDerivationLogicConfig as aa, isRowField as ab, isSimplifiedArrayField as ac, isValueBearingField as ad, isValueField as ae, omit as af, pageFieldMapper as ag, provideDynamicForm as ah, resolveNextButtonDisabled as ai, resolveNonFieldDisabled as aj, resolveNonFieldHidden as ak, resolveSubmitButtonDisabled as al, resolveTokens as am, rowFieldMapper as an, textFieldMapper as ao, withEventFormValue as ap, withLoggerConfig as aq, withValueExclusionDefaults as ar, DynamicTextPipe as b, computeContainerHostClasses as c, derivedFromDeferred as d, AppendArrayItemEvent as e, ArrayFieldComponent as f, DEFAULT_PROPS as g, DEFAULT_VALIDATION_MESSAGES as h, injectFieldRegistry as i, DynamicForm as j, DynamicFormError as k, EventDispatcher as l, FIELD_SIGNAL_CONTEXT as m, FORM_OPTIONS as n, FormClearEvent as o, FormResetEvent as p, InsertArrayItemEvent as q, NoopLogger as r, setupContainerInitEffect as s, PopArrayItemEvent as t, PrependArrayItemEvent as u, validatePageNesting as v, PreviousPageEvent as w, RootFormRegistryService as x, RowFieldComponent as y, SubmitEvent as z };
-//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-DXXp5M0q.mjs.map
+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