@ng-forge/dynamic-forms 0.7.0 → 0.8.0-next.2

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

@@ -1,128 +1,58 @@
 import * as i0 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, 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, 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 { InjectionToken, reflectComponentType, Injector, inject, EnvironmentInjector, DestroyRef, computed, input, ViewContainerRef, signal, Directive, Injectable, isSignal, untracked, isWritableSignal, isDevMode, linkedSignal, ChangeDetectionStrategy, Component, resourceFromSnapshots, runInInjectionContext, afterNextRender, model, makeEnvironmentProviders, Pipe, viewChild, TemplateRef } from '@angular/core';
 import { explicitEffect } from 'ngxtension/explicit-effect';
+import { of, forkJoin, from, catchError, map, switchMap, isObservable, firstValueFrom, exhaustMap, EMPTY, Subject, filter, TimeoutError, throwError, debounceTime, distinctUntilChanged, tap, take as take$1, startWith, pairwise, Observable, takeUntil, combineLatestWith, auditTime, scheduled, queueScheduler, merge, timer, defer, combineLatest, pipe, scan as scan$1, concatMap } from 'rxjs';
+import { takeUntilDestroyed, toObservable, toSignal, 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 { scan, map as map$1, filter as filter$1, take, switchMap as switchMap$1, timeout, catchError as catchError$1, shareReplay } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
 import { isStandardSchemaMarker } from '@ng-forge/dynamic-forms/schema';
 import { NG_STATUS_CLASSES } from '@angular/forms/signals/compat';
 
 /**
- * Wraps a submission action to handle both Promise and Observable returns.
- * Converts Observables to Promises for compatibility with Angular Signal Forms' submit().
+ * Type guard for WrapperTypeDefinition.
  *
- * Errors are NOT caught here — they propagate so that submit() can reject its Promise,
- * allowing the caller's catchError to log and keep the submission stream alive.
- *
- * @param action - The submission action function
- * @returns A wrapped function that returns a Promise
+ * Discriminates via `wrapperName` — field types use `name`, wrapper types use `wrapperName`.
  */
-function wrapSubmissionAction(action) {
-    return async (formTree) => {
-        const result = action(formTree);
-        // If the action returns an Observable, convert it to a Promise
-        if (isObservable(result)) {
-            await firstValueFrom(result);
-            return;
-        }
-        await Promise.resolve(result);
-    };
+function isWrapperTypeDefinition(value) {
+    return typeof value === 'object' && value !== null && 'wrapperName' in value;
 }
 /**
- * Creates an Observable that handles form submission with optional submission action.
- *
- * This utility encapsulates the submission handling logic:
- * - Listens for submit events from the event bus
- * - If a submission.action is configured, wraps it and uses Angular Signal Forms' submit()
- * - Handles both Promise and Observable returns from the action
- * - Uses exhaustMap to ignore new submissions while one is in-flight (first-submit-wins)
- *
- * The returned Observable should be subscribed to with takeUntilDestroyed() in the component.
- *
- * @param options - Configuration options for the submission handler
- * @returns Observable that processes submissions (emits when submission completes)
+ * Injection token for the wrapper type registry.
  *
- * @example
- * ```typescript
- * // In component constructor
- * createSubmissionHandler({
- *   eventBus: this.eventBus,
- *   configSignal: this.config,
- *   formSignal: this.form,
- * })
- *   .pipe(takeUntilDestroyed())
- *   .subscribe();
- * ```
+ * Provides access to the map of registered wrapper types. The registry is
+ * populated via `provideDynamicForm()` and used by `ContainerFieldComponent` to
+ * resolve wrapper types to their component implementations.
  */
-function createSubmissionHandler(options) {
-    const { eventBus, configSignal, formSignal, validSignal, logger } = options;
-    // exhaustMap ensures first-submit-wins: a second submit event while the first
-    // is in-flight is silently dropped rather than cancelling the running Promise.
-    // switchMap would unsubscribe the Observable wrapper but cannot cancel the
-    // underlying Promise, causing both side effects to execute.
-    return eventBus.on('submit').pipe(exhaustMap(() => {
-        const submissionConfig = configSignal().submission;
-        // If no submission action is configured, let the submitted output handle it
-        // This maintains backward compatibility for users handling submission manually
-        if (!submissionConfig?.action) {
-            return EMPTY;
-        }
-        // Guard: match the (submitted) output's safety contract — reject submission
-        // when the form is invalid or has pending async validators.
-        if (!validSignal()) {
-            logger.debug('Submission action skipped: form is not valid (invalid or pending async validators)');
-            return EMPTY;
-        }
-        // Type assertion needed: submission.action accepts the form tree but its signature
-        // is defined broadly in FormConfig. The actual runtime type is FieldTree<TModel>.
-        const wrappedAction = wrapSubmissionAction(submissionConfig.action);
-        // Use Angular Signal Forms' native submit() function
-        // This automatically:
-        // - Sets form.submitting() to true during execution
-        // - Applies server errors to form fields on completion
-        // - Sets form.submitting() to false when done
-        // catchError keeps the exhaustMap stream alive after action failure —
-        // without it, an unhandled error would terminate all future submissions.
-        return from(submit(formSignal(), wrappedAction)).pipe(catchError((error) => {
-            logger.error('Submission action failed:', error);
-            return EMPTY;
-        }));
-    }));
-}
-
+const WRAPPER_REGISTRY = new InjectionToken('WRAPPER_REGISTRY', {
+    providedIn: 'root',
+    factory: () => new Map(),
+});
 /**
- * Injection token for globally enabling form value emission on events.
+ * Component cache for loaded wrapper components.
  *
- * When set to `true`, all events dispatched through the EventBus will include
- * the current form value in the `formValue` property.
- *
- * This token is configured via `withEventFormValue()` feature function.
- * Per-form overrides can be set via `options.emitFormValueOnEvents` in the form config.
+ * Caches resolved wrapper component classes for instant re-resolution.
+ * SSR-safe because it's DI-scoped, not module-scoped.
  *
- * @internal
+ * NOTE: The cache grows across the application lifetime. It's bounded by the
+ * number of wrapper types registered (typically small), so this is not a leak;
+ * the COMPONENT_CACHE for field types has the same shape.
  */
-const EMIT_FORM_VALUE_ON_EVENTS = new InjectionToken('EMIT_FORM_VALUE_ON_EVENTS', {
+const WRAPPER_COMPONENT_CACHE = new InjectionToken('WRAPPER_COMPONENT_CACHE', {
     providedIn: 'root',
-    factory: () => false,
+    factory: () => new Map(),
 });
-
 /**
- * Registry service that provides access to the root form and its values.
- *
- * Constructed via factory in `provideDynamicFormDI` with signals from
- * `FormStateManager` — no DI injection, no Maps, no lifecycle.
+ * Pre-computed reverse index: `fieldType → WrapperConfig[]` for every
+ * registered `WrapperTypeDefinition.types` entry. Built once in the
+ * `provideDynamicForm(...)` factory so `resolveWrappers` can look up
+ * auto-associations in O(1) per field instead of scanning the full
+ * wrapper registry on every render.
  */
-class RootFormRegistryService {
-    formValue;
-    rootForm;
-    constructor(formValue, rootForm) {
-        this.formValue = formValue;
-        this.rootForm = rootForm;
-    }
-}
+const WRAPPER_AUTO_ASSOCIATIONS = new InjectionToken('WRAPPER_AUTO_ASSOCIATIONS', {
+    providedIn: 'root',
+    factory: () => new Map(),
+});
 
 /**
  * Base error class for all Dynamic Forms errors.
@@ -139,6 +69,18 @@ class DynamicFormError extends Error {
     }
 }
 
+/**
+ * Injection token for form-level default wrappers.
+ *
+ * Provides a Signal of the `defaultWrappers` array from FormConfig. Consumed by
+ * `DfFieldOutlet` / `ContainerFieldComponent` to merge into each field's
+ * effective wrapper chain (lowest priority after auto-associations, higher
+ * than field-level `wrappers`).
+ *
+ * Provided once at the DynamicForm level and inherited via Angular's
+ * hierarchical injector.
+ */
+const DEFAULT_WRAPPERS = new InjectionToken('DEFAULT_WRAPPERS');
 /**
  * Injection token for providing field signal context to mappers and components.
  *
@@ -345,6 +287,201 @@ function createArrayItemIdGenerator() {
     return () => `item-${counter++}`;
 }
 
+/**
+ * Module-level cache keyed by component class. `reflectComponentType` returns
+ * immutable metadata per class, so we probe it once and reuse the resulting
+ * `Set<templateName>` for every `setInputIfDeclared` call afterwards.
+ *
+ * We cache `templateName` (the public input name, aka alias) rather than
+ * `propName` (the class field name) because `ComponentRef.setInput()` keys by
+ * the public name — that's also the name wrapper configs use. An aliased
+ * input declared as `input(..., { alias: 'header' })` with class field
+ * `headerText` must be addressed as `'header'`; caching `propName` would
+ * leave the alias out of the declared set and silently drop config values.
+ *
+ * SSR-safe: the WeakMap is keyed by the component class object — classes are
+ * created per Angular application bootstrap and GC'd with it, so this does not
+ * leak state between server renders.
+ */
+const inputNamesCache = new WeakMap();
+function getDeclaredInputs(componentType) {
+    let inputs = inputNamesCache.get(componentType);
+    if (!inputs) {
+        const meta = reflectComponentType(componentType);
+        inputs = new Set(meta?.inputs.map((i) => i.templateName) ?? []);
+        inputNamesCache.set(componentType, inputs);
+    }
+    return inputs;
+}
+/**
+ * Set an input on a ComponentRef only when the target component actually declares it.
+ *
+ * Angular's `ComponentRef.setInput()` throws NG0303 when the input is missing.
+ * For config keys driven by user data (e.g. a wrapper config containing a prop
+ * the wrapper doesn't care about) that would surface as a noisy runtime error.
+ * We probe the component's metadata via `reflectComponentType` (public API),
+ * cached per component class — called once per input key per emission, so
+ * avoiding the reflection scan on each call is meaningful under heavy typing.
+ */
+function setInputIfDeclared(ref, inputName, value) {
+    const declared = getDeclaredInputs(ref.componentType);
+    if (declared.has(inputName)) {
+        ref.setInput(inputName, value);
+    }
+}
+/**
+ * Narrows an ES-module-with-default-export from a bare component class.
+ * Lazy component loaders may return either shape depending on how the user
+ * wrote the import expression (`import('./x')` vs `import('./x').then(m => m.Foo)`).
+ */
+function hasDefaultExport(value) {
+    return typeof value === 'object' && value !== null && 'default' in value && !!value.default;
+}
+/**
+ * Pick the component class out of whatever a lazy loader returned.
+ */
+function resolveDefaultExport(result) {
+    return hasDefaultExport(result) ? result.default : result;
+}
+/**
+ * Resolve a wrapper type name to its component class, with DI-scoped caching.
+ */
+async function loadWrapperComponent(type, registry, cache) {
+    const cached = cache.get(type);
+    if (cached)
+        return cached;
+    const definition = registry.get(type);
+    if (!definition)
+        return undefined;
+    const component = resolveDefaultExport(await definition.loadComponent());
+    if (component)
+        cache.set(type, component);
+    return component;
+}
+/**
+ * Load every wrapper for a chain, all-or-nothing. A single failed load
+ * aborts the whole chain (emits `[]`) so the field renders bare rather
+ * than in a partially-wrapped, visually-misleading state. Each failure
+ * is logged; field-type resolution still throws — this isn't silent.
+ */
+function loadWrapperComponents(configs, registry, cache, logger) {
+    if (configs.length === 0)
+        return of([]);
+    return forkJoin(configs.map((config) => from(loadWrapperComponent(config.type, registry, cache)).pipe(catchError(() => of(undefined)), map((component) => {
+        if (!component) {
+            logger.error(`Wrapper type '${config.type}' could not be loaded. Ensure it is registered via provideDynamicForm().`);
+            return null;
+        }
+        return { config, component };
+    })))).pipe(map((results) => (results.some((r) => r === null) ? [] : results)));
+}
+/**
+ * Recursively create each wrapper component, threading the next one (or the
+ * innermost content) into its `#fieldComponent` slot.
+ *
+ * Each wrapper receives:
+ * - Each of its config properties (minus `type`) as an individual Angular input
+ * - `fieldInputs` as a single input, if provided
+ *
+ * Returns the list of wrapper `ComponentRef`s — callers retain them for later
+ * cleanup and for re-setting `fieldInputs` when the mapper signal emits.
+ */
+function renderWrapperChain(options) {
+    const refs = [];
+    renderStep(options.outerContainer, options.loadedWrappers, options, refs);
+    return refs;
+}
+function renderStep(slot, remaining, options, refs) {
+    if (remaining.length === 0) {
+        options.renderInnermost(slot);
+        return;
+    }
+    const [wrapper, ...rest] = remaining;
+    // `slot.injector` is the element injector seen from inside the current slot —
+    // for nested slots that includes the outer wrapper's component, enabling
+    // `inject(OuterWrapper)`. When a field injector is provided we merge it in
+    // front so tokens like `ARRAY_CONTEXT` also resolve.
+    const wrapperInjector = options.fieldInjector ? createWrapperAwareInjector(options.fieldInjector, slot.injector) : slot.injector;
+    const ref = slot.createComponent(wrapper.component, {
+        environmentInjector: options.environmentInjector,
+        injector: wrapperInjector,
+    });
+    refs.push(ref);
+    for (const [key, value] of Object.entries(wrapper.config)) {
+        // `type` is the registry discriminant; `fieldInputs` is set explicitly
+        // below. Don't let a stray config key override either.
+        if (key === 'type' || key === 'fieldInputs')
+            continue;
+        setInputIfDeclared(ref, key, value);
+    }
+    if (options.fieldInputs !== undefined) {
+        setInputIfDeclared(ref, 'fieldInputs', options.fieldInputs);
+    }
+    // Required to resolve `viewChild.required('fieldComponent')` before we
+    // recurse into the slot. O(chain length) CD passes per rebuild — acceptable
+    // for typical chains (≤3); refactor to a template-based render if it bites.
+    ref.changeDetectorRef.detectChanges();
+    const inner = resolveInnerSlot(ref);
+    if (!inner) {
+        options.logger.error(`Wrapper component for type '${wrapper.config.type}' does not provide a 'fieldComponent' ViewContainerRef. ` +
+            `Ensure the wrapper component has a viewChild('fieldComponent', { read: ViewContainerRef }) query ` +
+            `and that #fieldComponent is not inside a conditional (@if, @defer).`);
+        // Unwind: destroy every wrapper built so far, including this one, so the
+        // caller doesn't end up with a partial chain left in the DOM.
+        while (refs.length)
+            refs.pop().destroy();
+        return;
+    }
+    renderStep(inner, rest, options, refs);
+}
+/**
+ * Read a wrapper's `#fieldComponent` ViewContainerRef. `viewChild.required`
+ * throws when the query can't resolve (missing template ref, or ref sitting
+ * inside `@if` / `@defer` / `@for`); any throw from this pure signal read
+ * means the slot is unusable, so we return undefined and let the caller log
+ * the actionable "wrapper missing fieldComponent" message.
+ */
+function resolveInnerSlot(ref) {
+    const contract = ref.instance;
+    try {
+        return contract.fieldComponent?.();
+    }
+    catch {
+        return undefined;
+    }
+}
+/**
+ * Merged injector: check the field-level injector first (for tokens like
+ * `ARRAY_CONTEXT` / `FIELD_SIGNAL_CONTEXT`), fall back to the element-chain
+ * injector (so nested wrappers can still `inject(OuterWrapper)`).
+ *
+ * Precedence: a field-level token shadows a same-named token provided by an
+ * outer wrapper. That matches "more specific context wins" but is worth
+ * keeping in mind if a wrapper exports service tokens.
+ */
+function createWrapperAwareInjector(fieldInjector, elementInjector) {
+    if (fieldInjector === elementInjector)
+        return fieldInjector;
+    return new WrapperAwareInjector(fieldInjector, elementInjector);
+}
+/** Sentinel — distinguishes "token not found" from a legitimate `undefined` provider value. */
+const WRAPPER_NOT_FOUND = {};
+class WrapperAwareInjector extends Injector {
+    fieldInjector;
+    elementInjector;
+    constructor(fieldInjector, elementInjector) {
+        super();
+        this.fieldInjector = fieldInjector;
+        this.elementInjector = elementInjector;
+    }
+    get(token, notFoundValue, options) {
+        const field = this.fieldInjector.get(token, WRAPPER_NOT_FOUND, options);
+        if (field !== WRAPPER_NOT_FOUND)
+            return field;
+        return this.elementInjector.get(token, notFoundValue, options);
+    }
+}
+
 /**
  * Injection token for the dynamic forms logger.
  *
@@ -353,6 +490,567 @@ function createArrayItemIdGenerator() {
  */
 const DynamicFormLogger = new InjectionToken('DynamicFormLogger');
 
+/**
+ * Shared empty chain — returned when no wrappers apply so callers get a
+ * stable reference. Freezing makes accidental mutation observable.
+ */
+const EMPTY_WRAPPERS = Object.freeze([]);
+/**
+ * Element-wise identity (`===`) comparator for wrapper chains. Used as the
+ * `equal` option on signal memoisation so reconciled `FieldDef`s with the
+ * same chain don't churn downstream — relies on `WrapperConfig` objects
+ * being stable across ticks, which holds for configs declared in
+ * `FormConfig` / `createWrappers(...)`.
+ */
+function isSameWrapperChain(a, b) {
+    if (a === b)
+        return true;
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+}
+/**
+ * Resolves the wrapper chain for a field.
+ *
+ * Merge order (outermost → innermost): auto-associations, form defaults,
+ * field-level wrappers. `wrappers: null` skips all three; `skipAutoWrappers` /
+ * `skipDefaultWrappers` on the field opt out of individual layers. Fresh
+ * array per call — downstream memoisation is on the consuming computed.
+ */
+function resolveWrappers(field, defaultWrappers, autoAssociations) {
+    if (field.wrappers === null) {
+        return EMPTY_WRAPPERS;
+    }
+    const autoWrappers = field.skipAutoWrappers ? EMPTY_WRAPPERS : (autoAssociations.get(field.type) ?? EMPTY_WRAPPERS);
+    const defaults = field.skipDefaultWrappers ? EMPTY_WRAPPERS : (defaultWrappers ?? EMPTY_WRAPPERS);
+    const fieldLevel = field.wrappers ?? EMPTY_WRAPPERS;
+    if (autoWrappers.length === 0 && defaults.length === 0 && fieldLevel.length === 0) {
+        return EMPTY_WRAPPERS;
+    }
+    return [...autoWrappers, ...defaults, ...fieldLevel];
+}
+
+/**
+ * Owns the wrapper-chain lifecycle for a field or container: async component
+ * loading, switchMap-based cancellation of stale loads, flicker-tolerant
+ * rebuilds (only structural changes tear down), and `fieldInputs` push-through.
+ * Must be called from a DI injection context.
+ */
+function createWrapperChainController(opts) {
+    const deps = injectChainDeps();
+    const state = createStateSignal(opts);
+    const mounted = { value: null };
+    let refs = [];
+    buildEmissionStream(state, deps)
+        .pipe(takeUntilDestroyed(deps.destroyRef))
+        .subscribe((emission) => {
+        // Wrap the whole render path — a throw here (bad wrapper template,
+        // caller's renderInnermost blew up, etc.) would otherwise terminate
+        // the subscription and silently freeze subsequent chain updates.
+        try {
+            refs = applyEmission(emission, { opts, deps, mounted, refs });
+        }
+        catch (err) {
+            deps.logger.error('Wrapper chain render failed; tearing down partial state.', err);
+            opts.vcr().clear();
+            refs = [];
+            mounted.value = null;
+        }
+    });
+    pushFieldInputsOnChange(opts, () => refs);
+    deps.destroyRef.onDestroy(() => opts.vcr().clear());
+}
+function injectChainDeps() {
+    return {
+        registry: inject(WRAPPER_REGISTRY),
+        cache: inject(WRAPPER_COMPONENT_CACHE),
+        logger: inject(DynamicFormLogger),
+        destroyRef: inject(DestroyRef),
+        environmentInjector: inject(EnvironmentInjector),
+    };
+}
+function createStateSignal(opts) {
+    return computed(() => ({
+        open: opts.gate?.() ?? true,
+        wrappers: opts.wrappers(),
+        rebuildKey: opts.rebuildKey?.(),
+    }), { equal: (a, b) => a.open === b.open && a.rebuildKey === b.rebuildKey && isSameWrapperChain(a.wrappers, b.wrappers) });
+}
+/**
+ * Resolve a `ChainState` into a `ChainEmission`. `switchMap` cancellation
+ * guarantees in-flight async loads are discarded when a newer state arrives.
+ */
+function buildEmissionStream(state, deps) {
+    return toObservable(state).pipe(switchMap((s) => resolveLoadedWrappers(s, deps)));
+}
+function resolveLoadedWrappers(state, deps) {
+    if (!state.open) {
+        return of({ state, loaded: null });
+    }
+    if (state.wrappers.every((w) => deps.cache.has(w.type))) {
+        // Sync fast-path — the cache only holds SUCCESSFUL loads, so "every cached"
+        // means every wrapper was previously resolved cleanly. No need to re-log.
+        const loaded = state.wrappers.map((config) => ({ config, component: deps.cache.get(config.type) }));
+        return of({ state, loaded });
+    }
+    return loadWrapperComponents(state.wrappers, deps.registry, deps.cache, deps.logger).pipe(map((loaded) => ({ state, loaded })));
+}
+/**
+ * Diff what's mounted against the next state and act:
+ *   - Gate-only flicker → no-op (preserve the mounted chain)
+ *   - Structural change → beforeRebuild → vcr.clear → render fresh
+ *   - Idempotent re-emission → no-op
+ *
+ * Returns the (possibly new) wrapper refs so the caller can track them for
+ * `fieldInputs` push-through.
+ */
+function applyEmission({ state, loaded }, ctx) {
+    const { opts, deps, mounted, refs } = ctx;
+    const vcr = opts.vcr();
+    const structurallyChanged = isStructurallyDifferent(mounted.value, state);
+    // Gate-only flicker after first mount — keep the chain alive so the user's
+    // focus / caret / scroll survive. The caller's rawInputs effect continues
+    // to push live mapper outputs through the still-mounted innermost.
+    if (!structurallyChanged && !state.open)
+        return refs;
+    // Real structural change — tear down. Angular cascades destroy through
+    // every nested ComponentRef, so walking `refs` manually is redundant.
+    // `beforeRebuild` gives the caller a chance to detach views it wants to
+    // preserve (e.g. the innermost field when only wrappers changed).
+    if (structurallyChanged && mounted.value !== null) {
+        opts.beforeRebuild?.();
+        vcr.clear();
+        mounted.value = null;
+    }
+    if (!state.open || loaded === null)
+        return [];
+    // Same structure + already mounted — idempotent re-emission, nothing to do.
+    if (mounted.value !== null)
+        return refs;
+    const newRefs = renderWrapperChain({
+        outerContainer: vcr,
+        loadedWrappers: loaded,
+        environmentInjector: deps.environmentInjector,
+        logger: deps.logger,
+        fieldInputs: opts.fieldInputs?.(),
+        fieldInjector: opts.fieldInjector?.(),
+        renderInnermost: opts.renderInnermost,
+    });
+    mounted.value = { wrappers: state.wrappers, rebuildKey: state.rebuildKey };
+    return newRefs;
+}
+function isStructurallyDifferent(mounted, next) {
+    if (mounted === null)
+        return true;
+    if (mounted.rebuildKey !== next.rebuildKey)
+        return true;
+    return !isSameWrapperChain(mounted.wrappers, next.wrappers);
+}
+/**
+ * Push the latest `fieldInputs` bag to every mounted wrapper whenever it
+ * changes — without rebuilding the chain. No-op when the chain is empty
+ * (gated off, or nothing rendered yet).
+ */
+function pushFieldInputsOnChange(opts, getRefs) {
+    if (!opts.fieldInputs)
+        return;
+    explicitEffect([opts.fieldInputs], ([fi]) => {
+        for (const ref of getRefs())
+            setInputIfDeclared(ref, 'fieldInputs', fi);
+    });
+}
+
+/**
+ * Get the length of an array FieldTree.
+ */
+function getArrayLength(arrayFieldTree) {
+    const value = arrayFieldTree().value();
+    return Array.isArray(value) ? value.length : 0;
+}
+/**
+ * Build a `ReadonlyFieldTree` by extracting the whitelisted read signals from a
+ * Signal Forms `FieldTree`. Returns a fresh plain object — no casting, no proxying,
+ * so consumers only see the narrow surface and Angular's `WritableSignal` capability
+ * on `value` is hidden.
+ */
+function toReadonlyFieldTree(field) {
+    const state = field();
+    return {
+        value: state.value,
+        valid: state.valid,
+        invalid: state.invalid,
+        touched: state.touched,
+        dirty: state.dirty,
+        required: state.required,
+        disabled: state.disabled,
+        hidden: state.hidden,
+        errors: state.errors,
+    };
+}
+/**
+ * DI-scoped cache for `ReadonlyFieldTree` views, keyed on the source FieldTree
+ * identity. A fresh WeakMap per root injector keeps renders isolated under SSR —
+ * Angular creates a new root injector per request, so there's no shared state
+ * between server renders (same pattern as `COMPONENT_CACHE`).
+ *
+ * @internal
+ */
+const READONLY_FIELD_TREE_CACHE = new InjectionToken('READONLY_FIELD_TREE_CACHE', {
+    providedIn: 'root',
+    factory: () => new WeakMap(),
+});
+/**
+ * Cached variant of {@link toReadonlyFieldTree}. Each FieldTree instance is a
+ * stable reference for the lifetime of its form, so one `ReadonlyFieldTree`
+ * view per tree is enough. Callers on hot paths (`pushInputs` on every mapper
+ * emission) avoid re-allocating the nine-property view object.
+ *
+ * @internal
+ */
+function toReadonlyFieldTreeCached(cache, field) {
+    const key = field;
+    const cached = cache.get(key);
+    if (cached)
+        return cached;
+    const view = toReadonlyFieldTree(field);
+    cache.set(key, view);
+    return view;
+}
+
+/**
+ * Structural directive that renders a `ResolvedField` with its effective
+ * wrapper chain.
+ *
+ * Replaces `*ngComponentOutlet` in field-rendering templates. When the field
+ * has no wrappers, the component is created directly at the outlet position
+ * (no extra DOM nesting). When wrappers apply, they chain outermost-first and
+ * the field renders in the innermost slot.
+ *
+ * Effective wrappers are merged from (outermost → innermost):
+ * 1. `WrapperTypeDefinition.types` auto-associations for the field's `type`
+ * 2. `FormConfig.defaultWrappers`
+ * 3. Field-level `FieldDef.wrappers` (`null` = explicit opt-out; `[]` does not
+ *    opt out — auto + defaults still apply)
+ *
+ * Wrapper config keys (minus `type`) are pushed as individual Angular inputs;
+ * every wrapper also receives `fieldInputs` — a `WrapperFieldInputs` bag that
+ * includes the field's mapper outputs and a `ReadonlyFieldTree` view of its
+ * form state.
+ *
+ * Rendering is gated by `field.renderReady()` — the directive waits until
+ * the mapper produces the required inputs before instantiating the component.
+ * Once rendered, a transient `renderReady → false` does *not* tear the chain
+ * down; the controller keeps the mounted components alive and ignores the
+ * flicker. Only a structural change (wrappers or component class) triggers
+ * a rebuild.
+ *
+ * @example
+ * ```html
+ * \@for (field of resolvedFields(); track field.key) {
+ *   <ng-container *dfFieldOutlet="field; environmentInjector: envInjector" />
+ * }
+ * ```
+ */
+class DfFieldOutlet {
+    // Named to match the structural directive microsyntax directly
+    // (`*dfFieldOutlet="field; environmentInjector: env"`) so no aliasing is needed.
+    dfFieldOutlet = input.required(...(ngDevMode ? [{ debugName: "dfFieldOutlet" }] : /* istanbul ignore next */ []));
+    dfFieldOutletEnvironmentInjector = input(undefined, ...(ngDevMode ? [{ debugName: "dfFieldOutletEnvironmentInjector" }] : /* istanbul ignore next */ []));
+    vcrRef = inject(ViewContainerRef);
+    vcr = signal(this.vcrRef).asReadonly();
+    destroyRef = inject(DestroyRef);
+    wrapperAutoAssociations = inject(WRAPPER_AUTO_ASSOCIATIONS);
+    defaultWrappersSignal = inject(DEFAULT_WRAPPERS, { optional: true });
+    readonlyFieldCache = inject(READONLY_FIELD_TREE_CACHE);
+    fieldRef;
+    /**
+     * VCR the `fieldRef`'s host view is currently inserted into (either the outer
+     * VCR when there are no wrappers, or the innermost wrapper's `#fieldComponent`
+     * slot). Tracked so `beforeRebuild` can detach the view before the outer VCR
+     * cascade-destroys it.
+     */
+    fieldSlot;
+    /** Focus + caret captured during detach, replayed after re-insert. */
+    focusSnapshot;
+    /**
+     * Last rawInputs reference pushed to the innermost field. Used to dedupe the
+     * rawInputs effect when the same snapshot was already applied as part of the
+     * initial render — keeps per-keystroke input updates O(changed-keys) instead
+     * of re-walking the whole input bag.
+     */
+    lastPushedInputs;
+    componentIdentity = computed(() => this.dfFieldOutlet().component, ...(ngDevMode ? [{ debugName: "componentIdentity" }] : /* istanbul ignore next */ []));
+    renderReady = computed(() => this.dfFieldOutlet().renderReady(), ...(ngDevMode ? [{ debugName: "renderReady" }] : /* istanbul ignore next */ []));
+    rawInputs = computed(() => this.dfFieldOutlet().inputs(), ...(ngDevMode ? [{ debugName: "rawInputs" }] : /* istanbul ignore next */ []));
+    /**
+     * Effective wrapper chain. Element-wise identity comparison keeps the signal
+     * stable across `ResolvedField` reference changes that don't actually change
+     * the chain — avoids rebuilds on reconciled fields.
+     */
+    wrappers = computed(() => resolveWrappers(this.dfFieldOutlet().fieldDef, this.defaultWrappersSignal?.(), this.wrapperAutoAssociations), { ...(ngDevMode ? { debugName: "wrappers" } : /* istanbul ignore next */ {}), equal: isSameWrapperChain });
+    /**
+     * `fieldInputs` bag handed to every wrapper in the chain. Memoised on
+     * `rawInputs` identity so repeated emissions with the same underlying object
+     * return the same view and don't cascade OnPush re-evaluations.
+     */
+    fieldInputs = computed(() => this.buildFieldInputs(this.rawInputs()), ...(ngDevMode ? [{ debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
+    defaultEnvInjector = inject(EnvironmentInjector);
+    /** Environment injector for the innermost field component — `[environmentInjector]` input takes precedence over the directive's own DI. */
+    fieldEnvInjector = computed(() => this.dfFieldOutletEnvironmentInjector() ?? this.defaultEnvInjector, ...(ngDevMode ? [{ debugName: "fieldEnvInjector" }] : /* istanbul ignore next */ []));
+    /** Field-level injector (FIELD_SIGNAL_CONTEXT, ARRAY_CONTEXT, …). Threaded to the controller so wrappers can inject it too. */
+    fieldInjector = computed(() => this.dfFieldOutlet().injector, ...(ngDevMode ? [{ debugName: "fieldInjector" }] : /* istanbul ignore next */ []));
+    constructor() {
+        createWrapperChainController({
+            vcr: this.vcr,
+            wrappers: this.wrappers,
+            gate: this.renderReady,
+            rebuildKey: this.componentIdentity,
+            fieldInputs: this.fieldInputs,
+            fieldInjector: this.fieldInjector,
+            beforeRebuild: () => this.detachFieldRef(),
+            renderInnermost: (slot) => {
+                const resolved = this.dfFieldOutlet();
+                if (this.fieldRef && this.fieldRef.componentType === resolved.component) {
+                    // Same component class — re-insert the preserved hostView. Browser
+                    // loses focus on detach, so we replay the snapshot captured in
+                    // detachFieldRef. Input value persists on the DOM node itself.
+                    slot.insert(this.fieldRef.hostView);
+                    this.fieldSlot = slot;
+                    this.pushRawInputs(this.fieldRef, this.rawInputs());
+                    this.restoreFocusSnapshot();
+                    return;
+                }
+                // Different component class — discard the old ref and create fresh.
+                // Merge field + element injectors so the field can inject ancestor
+                // wrappers AND form-context tokens (ARRAY_CONTEXT etc.).
+                // Clear state before createComponent — if it throws (bad provider,
+                // invalid class) we don't want to leak a reference to a destroyed ref
+                // that the same-component branch would later try to re-insert.
+                this.focusSnapshot = undefined;
+                this.lastPushedInputs = undefined;
+                const previousRef = this.fieldRef;
+                this.fieldRef = undefined;
+                this.fieldSlot = undefined;
+                previousRef?.destroy();
+                this.fieldRef = slot.createComponent(resolved.component, {
+                    environmentInjector: this.fieldEnvInjector(),
+                    injector: createWrapperAwareInjector(resolved.injector, slot.injector),
+                });
+                this.fieldSlot = slot;
+                this.pushRawInputs(this.fieldRef, this.rawInputs());
+            },
+        });
+        // Push rawInputs to the innermost field. Safe mid-rebuild — renderInnermost
+        // re-reads rawInputs synchronously on mount, so skipping here loses nothing.
+        explicitEffect([this.rawInputs], ([rawInputs]) => {
+            if (!this.fieldRef)
+                return;
+            if (this.lastPushedInputs === rawInputs)
+                return;
+            this.pushRawInputs(this.fieldRef, rawInputs);
+        });
+        this.destroyRef.onDestroy(() => {
+            // Only destroy when detached — vcr.clear() cascades otherwise.
+            if (this.fieldRef && !this.fieldSlot)
+                this.fieldRef.destroy();
+            this.fieldRef = undefined;
+            this.fieldSlot = undefined;
+            this.lastPushedInputs = undefined;
+        });
+    }
+    detachFieldRef() {
+        if (!this.fieldRef)
+            return;
+        if (!this.fieldSlot) {
+            // Stranded fieldRef — destroy to prevent a leak.
+            this.fieldRef.destroy();
+            this.fieldRef = undefined;
+            return;
+        }
+        this.captureFocusSnapshot();
+        const idx = this.fieldSlot.indexOf(this.fieldRef.hostView);
+        if (idx >= 0)
+            this.fieldSlot.detach(idx);
+        this.fieldSlot = undefined;
+    }
+    /** Capture active element + selection before the hostView is detached from DOM. */
+    captureFocusSnapshot() {
+        if (!this.fieldRef)
+            return;
+        const hostEl = this.fieldRef.location.nativeElement;
+        const active = document.activeElement;
+        if (!(active instanceof HTMLElement) || !hostEl.contains(active))
+            return;
+        const sel = active;
+        this.focusSnapshot = {
+            element: active,
+            selectionStart: typeof sel.selectionStart === 'number' ? sel.selectionStart : null,
+            selectionEnd: typeof sel.selectionEnd === 'number' ? sel.selectionEnd : null,
+        };
+    }
+    /** Re-apply the pre-detach focus + caret after the hostView is back in the DOM. */
+    restoreFocusSnapshot() {
+        const snap = this.focusSnapshot;
+        this.focusSnapshot = undefined;
+        if (!snap || !snap.element.isConnected)
+            return;
+        snap.element.focus();
+        if (snap.selectionStart !== null && snap.selectionEnd !== null && 'setSelectionRange' in snap.element) {
+            snap.element.setSelectionRange(snap.selectionStart, snap.selectionEnd);
+        }
+    }
+    pushRawInputs(ref, rawInputs) {
+        // Ref-identity dedupe per key — mappers must emit immutable snapshots.
+        const last = this.lastPushedInputs;
+        for (const [key, value] of Object.entries(rawInputs)) {
+            if (last && last[key] === value)
+                continue;
+            setInputIfDeclared(ref, key, value);
+        }
+        this.lastPushedInputs = rawInputs;
+    }
+    buildFieldInputs(rawInputs) {
+        const fieldTreeCandidate = rawInputs['field'];
+        // A FieldTree is a callable (() => FieldState). We expose it to wrappers via a narrow
+        // read-only view; raw FieldTree is still pushed to the innermost component for writes.
+        const readonlyField = fieldTreeCandidate && typeof fieldTreeCandidate === 'function'
+            ? toReadonlyFieldTreeCached(this.readonlyFieldCache, fieldTreeCandidate)
+            : undefined;
+        // Shallow spread — relies on the mapper contract (see WrapperFieldInputs)
+        // that rawInputs are emitted as fresh snapshots, not mutated in place.
+        return {
+            ...rawInputs,
+            field: readonlyField,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DfFieldOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: DfFieldOutlet, isStandalone: true, selector: "[dfFieldOutlet]", inputs: { dfFieldOutlet: { classPropertyName: "dfFieldOutlet", publicName: "dfFieldOutlet", isSignal: true, isRequired: true, transformFunction: null }, dfFieldOutletEnvironmentInjector: { classPropertyName: "dfFieldOutletEnvironmentInjector", publicName: "dfFieldOutletEnvironmentInjector", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DfFieldOutlet, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dfFieldOutlet]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { dfFieldOutlet: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfFieldOutlet", required: true }] }], dfFieldOutletEnvironmentInjector: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfFieldOutletEnvironmentInjector", required: false }] }] } });
+
+/**
+ * Wraps a submission action to handle both Promise and Observable returns.
+ * Converts Observables to Promises for compatibility with Angular Signal Forms' submit().
+ *
+ * Errors are NOT caught here — they propagate so that submit() can reject its Promise,
+ * allowing the caller's catchError to log and keep the submission stream alive.
+ *
+ * @param action - The submission action function
+ * @returns A wrapped function that returns a Promise
+ */
+function wrapSubmissionAction(action) {
+    return async (formTree) => {
+        const result = action(formTree);
+        // If the action returns an Observable, convert it to a Promise
+        if (isObservable(result)) {
+            await firstValueFrom(result);
+            return;
+        }
+        await Promise.resolve(result);
+    };
+}
+/**
+ * Creates an Observable that handles form submission with optional submission action.
+ *
+ * This utility encapsulates the submission handling logic:
+ * - Listens for submit events from the event bus
+ * - If a submission.action is configured, wraps it and uses Angular Signal Forms' submit()
+ * - Handles both Promise and Observable returns from the action
+ * - Uses exhaustMap to ignore new submissions while one is in-flight (first-submit-wins)
+ *
+ * The returned Observable should be subscribed to with takeUntilDestroyed() in the component.
+ *
+ * @param options - Configuration options for the submission handler
+ * @returns Observable that processes submissions (emits when submission completes)
+ *
+ * @example
+ * ```typescript
+ * // In component constructor
+ * createSubmissionHandler({
+ *   eventBus: this.eventBus,
+ *   configSignal: this.config,
+ *   formSignal: this.form,
+ * })
+ *   .pipe(takeUntilDestroyed())
+ *   .subscribe();
+ * ```
+ */
+function createSubmissionHandler(options) {
+    const { eventBus, configSignal, formSignal, validSignal, logger } = options;
+    // exhaustMap ensures first-submit-wins: a second submit event while the first
+    // is in-flight is silently dropped rather than cancelling the running Promise.
+    // switchMap would unsubscribe the Observable wrapper but cannot cancel the
+    // underlying Promise, causing both side effects to execute.
+    return eventBus.on('submit').pipe(exhaustMap(() => {
+        const submissionConfig = configSignal().submission;
+        // If no submission action is configured, let the submitted output handle it
+        // This maintains backward compatibility for users handling submission manually
+        if (!submissionConfig?.action) {
+            return EMPTY;
+        }
+        // Guard: match the (submitted) output's safety contract — reject submission
+        // when the form is invalid or has pending async validators.
+        if (!validSignal()) {
+            logger.debug('Submission action skipped: form is not valid (invalid or pending async validators)');
+            return EMPTY;
+        }
+        // Type assertion needed: submission.action accepts the form tree but its signature
+        // is defined broadly in FormConfig. The actual runtime type is FieldTree<TModel>.
+        const wrappedAction = wrapSubmissionAction(submissionConfig.action);
+        // Use Angular Signal Forms' native submit() function
+        // This automatically:
+        // - Sets form.submitting() to true during execution
+        // - Applies server errors to form fields on completion
+        // - Sets form.submitting() to false when done
+        // catchError keeps the exhaustMap stream alive after action failure —
+        // without it, an unhandled error would terminate all future submissions.
+        return from(submit(formSignal(), wrappedAction)).pipe(catchError((error) => {
+            logger.error('Submission action failed:', error);
+            return EMPTY;
+        }));
+    }));
+}
+
+/**
+ * Injection token for globally enabling form value emission on events.
+ *
+ * When set to `true`, all events dispatched through the EventBus will include
+ * the current form value in the `formValue` property.
+ *
+ * This token is configured via `withEventFormValue()` feature function.
+ * Per-form overrides can be set via `options.emitFormValueOnEvents` in the form config.
+ *
+ * @internal
+ */
+const EMIT_FORM_VALUE_ON_EVENTS = new InjectionToken('EMIT_FORM_VALUE_ON_EVENTS', {
+    providedIn: 'root',
+    factory: () => false,
+});
+
+/**
+ * Registry service that provides access to the root form and its values.
+ *
+ * Constructed via factory in `provideDynamicFormDI` with signals from
+ * `FormStateManager` — no DI injection, no Maps, no lifecycle.
+ */
+class RootFormRegistryService {
+    formValue;
+    rootForm;
+    constructor(formValue, rootForm) {
+        this.formValue = formValue;
+        this.rootForm = rootForm;
+    }
+}
+
 /**
  * No-operation logger implementation.
  * All methods are no-ops - used in production by default.
@@ -532,10 +1230,10 @@ class EventBus {
         }
         return this.pipeline$.pipe(filter((event) => event.type === eventType));
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EventBus, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EventBus });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EventBus, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EventBus, decorators: [{
             type: Injectable
         }] });
 
@@ -588,7 +1286,7 @@ const INITIALIZATION_TIMEOUT_MS = new InjectionToken('INITIALIZATION_TIMEOUT_MS'
  * ```
  */
 function createInitializationTracker(eventBus, expectedCount) {
-    return eventBus.on('component-initialized').pipe(scan((count) => count + 1, 0), map((currentCount) => currentCount >= expectedCount), filter$1((isComplete) => isComplete));
+    return eventBus.on('component-initialized').pipe(scan((count) => count + 1, 0), map$1((currentCount) => currentCount >= expectedCount), filter$1((isComplete) => isComplete));
 }
 /**
  * Creates an observable that tracks component initialization progress with detailed status.
@@ -613,7 +1311,7 @@ function createInitializationTracker(eventBus, expectedCount) {
  * ```
  */
 function createDetailedInitializationTracker(eventBus, expectedCount) {
-    return eventBus.on('component-initialized').pipe(scan((count) => count + 1, 0), map((currentCount) => ({
+    return eventBus.on('component-initialized').pipe(scan((count) => count + 1, 0), map$1((currentCount) => ({
         currentCount,
         expectedCount,
         isComplete: currentCount >= expectedCount,
@@ -649,11 +1347,11 @@ function setupInitializationTracking(options) {
     const { eventBus, totalComponentsCount, injector, componentId } = options;
     const timeoutMs = injector.get(INITIALIZATION_TIMEOUT_MS);
     const logger = injector.get(DynamicFormLogger);
-    return toObservable(totalComponentsCount, { injector }).pipe(take(1), switchMap((count) => {
+    return toObservable(totalComponentsCount, { injector }).pipe(take(1), switchMap$1((count) => {
         let tracking$;
         if (count === 1) {
             // Only dynamic-form component, emit immediately when it initializes
-            tracking$ = eventBus.on('component-initialized').pipe(filter$1((event) => event.componentType === 'dynamic-form' && event.componentId === componentId), map(() => true), take(1));
+            tracking$ = eventBus.on('component-initialized').pipe(filter$1((event) => event.componentType === 'dynamic-form' && event.componentId === componentId), map$1(() => true), take(1));
         }
         else {
             tracking$ = createInitializationTracker(eventBus, count);
@@ -787,6 +1485,14 @@ function isSimplifiedArrayField(field) {
     return field.type === 'array' && 'template' in field;
 }
 
+/**
+ * Type guard for ContainerField with proper type narrowing
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Type guard must accept any field type
+function isContainerTypedField(field) {
+    return field.type === 'container' && 'fields' in field && 'wrappers' in field;
+}
+
 /**
  * Type guard to check if a field definition has child fields.
  * This is a looser check that works with FieldDef<unknown> without requiring RegisteredFieldTypes.
@@ -795,7 +1501,7 @@ function hasChildFields(field) {
     return 'fields' in field && field.fields != null;
 }
 /** Container field type names */
-const CONTAINER_TYPES$1 = new Set(['page', 'row', 'group', 'array']);
+const CONTAINER_TYPES$1 = new Set(['page', 'row', 'group', 'array', 'container']);
 function isContainerField(field) {
     return CONTAINER_TYPES$1.has(field.type);
 }
@@ -1709,10 +2415,10 @@ class FunctionRegistryService {
         this.clearAsyncValidators();
         this.clearHttpValidators();
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FunctionRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FunctionRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FunctionRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FunctionRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -1751,10 +2457,10 @@ class SchemaRegistryService {
         }
         return schema;
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SchemaRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SchemaRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SchemaRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SchemaRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -2335,10 +3041,10 @@ class 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FieldContextRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FieldContextRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FieldContextRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FieldContextRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -5566,7 +6272,7 @@ function createHttpDerivationStream(entry, formValue$, context) {
     // Capture after the guard — TS narrows this to `string` here
     const responseExpression = entry.responseExpression;
     const debounceMs = entry.debounceMs ?? DEFAULT_HTTP_DEBOUNCE_MS;
-    return formValue$.pipe(startWith(null), pairwise(), map$1(([previous, current]) => ({
+    return formValue$.pipe(startWith(null), pairwise(), map(([previous, current]) => ({
         current: current,
         changedFields: getChangedKeys(previous, current),
     })), 
@@ -5575,7 +6281,7 @@ function createHttpDerivationStream(entry, formValue$, context) {
         if (changedFields.size === 0)
             return false;
         return entry.dependsOn.some((dep) => changedFields.has(dep));
-    }), debounceTime(debounceMs), switchMap$1(({ current, changedFields }) => {
+    }), debounceTime(debounceMs), switchMap(({ current, changedFields }) => {
         return new Observable((subscriber) => {
             const formAccessor = untracked(() => context.form());
             // Check stopOnUserOverride — skip if the user has manually edited the target field
@@ -5760,7 +6466,7 @@ function createAsyncDerivationStream(entry, formValue$, context) {
     // first emission (null vs actual form value), so every dependsOn field matches.
     // This intentionally fires the async derivation on initial form load — same
     // pattern as http-derivation-stream.ts.
-    return formValue$.pipe(startWith(null), pairwise(), map$1(([previous, current]) => ({
+    return formValue$.pipe(startWith(null), pairwise(), map(([previous, current]) => ({
         current: current,
         changedFields: getChangedKeys(previous, current),
     })), 
@@ -5769,7 +6475,7 @@ function createAsyncDerivationStream(entry, formValue$, context) {
         if (changedFields.size === 0)
             return false;
         return entry.dependsOn.some((dep) => changedFields.has(dep));
-    }), debounceTime(debounceMs), switchMap$1(({ current, changedFields }) => {
+    }), debounceTime(debounceMs), switchMap(({ current, changedFields }) => {
         return new Observable((subscriber) => {
             const formAccessor = untracked(() => context.form());
             // Check stopOnUserOverride — skip if the user has manually edited the target field
@@ -5971,7 +6677,7 @@ class DerivationOrchestrator {
         auditTime(0), 
         // startWith + pairwise: Track previous and current values to detect changed fields.
         // This enables reEngageOnDependencyChange for onChange derivations.
-        startWith(null), pairwise(), filter((pair) => pair[1] !== null), map$1(([previous, current]) => ({
+        startWith(null), pairwise(), filter((pair) => pair[1] !== null), map(([previous, current]) => ({
             collection: current[0],
             formAccessor: current[2],
             changedFields: getChangedKeys(previous?.[1] ?? null, current[1]),
@@ -5999,14 +6705,14 @@ class DerivationOrchestrator {
         debounceTime(DEFAULT_DEBOUNCE_MS), 
         // startWith + pairwise: Track previous and current values to detect changes.
         // startWith(null) ensures pairwise has an initial value to pair with.
-        startWith(null), pairwise(), filter((pair) => pair[1] !== null), map$1(([previous, current]) => ({
+        startWith(null), pairwise(), filter((pair) => pair[1] !== null), map(([previous, current]) => ({
             current,
             changedFields: getChangedKeys(previous, current),
         })), filter(({ changedFields }) => changedFields.size > 0), 
         // switchMap: For debounced derivations, it's OK to cancel pending work
         // if new changes come in - we want the latest debounced values.
         // (Unlike onChange which uses exhaustMap to prevent cancellation)
-        switchMap$1(({ changedFields }) => {
+        switchMap(({ changedFields }) => {
             const collection = untracked(() => this.derivationCollection());
             const formAccessor = untracked(() => this.config.form());
             if (!collection || !formAccessor)
@@ -6027,11 +6733,11 @@ class DerivationOrchestrator {
     createPeriodStream(debounceMs, collection, formAccessor, changedFields) {
         const additionalWait = Math.max(0, debounceMs - DEFAULT_DEBOUNCE_MS);
         if (additionalWait === 0) {
-            return of(null).pipe(map$1(() => {
+            return of(null).pipe(map(() => {
                 this.applyDebouncedEntriesForPeriod(debounceMs, collection, formAccessor, changedFields);
             }));
         }
-        return timer(additionalWait).pipe(map$1(() => {
+        return timer(additionalWait).pipe(map(() => {
             const currentCollection = untracked(() => this.derivationCollection());
             const currentFormAccessor = untracked(() => this.config.form());
             if (currentCollection && currentFormAccessor) {
@@ -6766,10 +7472,10 @@ class PropertyDerivationOrchestrator {
     }
     setupDebouncedStream() {
         toObservable(this.config.formValue, { injector: this.injector })
-            .pipe(debounceTime(DEFAULT_DEBOUNCE_MS), startWith(null), pairwise(), filter((pair) => pair[1] !== null), map$1(([previous, current]) => ({
+            .pipe(debounceTime(DEFAULT_DEBOUNCE_MS), startWith(null), pairwise(), filter((pair) => pair[1] !== null), map(([previous, current]) => ({
             current,
             changedFields: getChangedKeys(previous, current),
-        })), filter(({ changedFields }) => changedFields.size > 0), switchMap$1(({ changedFields }) => {
+        })), filter(({ changedFields }) => changedFields.size > 0), switchMap(({ changedFields }) => {
             const collection = untracked(() => this.propertyDerivationCollection());
             if (!collection)
                 return of(null);
@@ -6785,7 +7491,7 @@ class PropertyDerivationOrchestrator {
     }
     createPeriodStream(debounceMs, collection, changedFields) {
         const additionalWait = Math.max(0, debounceMs - DEFAULT_DEBOUNCE_MS);
-        return timer(additionalWait).pipe(map$1(() => {
+        return timer(additionalWait).pipe(map(() => {
             // For periods beyond DEFAULT_DEBOUNCE_MS, re-read collection as it may have changed during the wait.
             // For zero-wait periods, use the original collection directly since no time has elapsed.
             const currentCollection = additionalWait > 0 ? (untracked(() => this.propertyDerivationCollection()) ?? collection) : collection;
@@ -7134,6 +7840,40 @@ class ShiftArrayItemEvent {
     }
 }
 
+/**
+ * Event dispatched to move an existing item from one index to another within an array field.
+ *
+ * This is an atomic reorder operation — the item at `fromIndex` is removed and
+ * reinserted at `toIndex`. No template is required because the existing item
+ * (resolved component, form value, and stored template) is preserved.
+ *
+ * @example
+ * ```typescript
+ * // Use the builder API (recommended)
+ * eventBus.dispatch(arrayEvent('contacts').move(0, 2));
+ *
+ * // Or instantiate directly
+ * eventBus.dispatch(new MoveArrayItemEvent('contacts', 0, 2));
+ * ```
+ */
+class MoveArrayItemEvent {
+    arrayKey;
+    fromIndex;
+    toIndex;
+    type = 'move-array-item';
+    constructor(
+    /** The key of the array field containing the item to move */
+    arrayKey, 
+    /** The current index of the item to move */
+    fromIndex, 
+    /** The target index to move the item to */
+    toIndex) {
+        this.arrayKey = arrayKey;
+        this.fromIndex = fromIndex;
+        this.toIndex = toIndex;
+    }
+}
+
 /**
  * Event dispatched to remove an item at a SPECIFIC INDEX from an array field.
  *
@@ -7522,8 +8262,8 @@ class PageOrchestratorComponent {
         }
         return false;
     }
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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(),
@@ -7553,9 +8293,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-Cen4ArED.mjs').then(m => m.default)], () => [import('./ng-forge-dynamic-forms-page-field.component-Cen4ArED.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-DV-EX9U0.mjs').then(m => m.default)], () => [import('./ng-forge-dynamic-forms-page-field.component-DV-EX9U0.mjs').then(m => m.default)]] });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.8", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [import('./ng-forge-dynamic-forms-page-field.component-DV-EX9U0.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) {
@@ -7707,7 +8447,7 @@ function validateSimplifiedTemplate(field) {
  * Expands a simplified array field into a full ArrayField + optional add button.
  */
 function expandSimplifiedArray(field) {
-    const { template, value = [], addButton, removeButton, key, logic, minLength, maxLength } = field;
+    const { template, value = [], addButton, removeButton, key, logic, minLength, maxLength, wrappers, skipAutoWrappers, skipDefaultWrappers, } = field;
     const isObjectTemplate = Array.isArray(template);
     const values = value;
     // Validate template before expansion
@@ -7744,16 +8484,35 @@ function expandSimplifiedArray(field) {
     if (maxLength !== undefined) {
         arrayFieldObj['maxLength'] = maxLength;
     }
+    if (wrappers !== undefined) {
+        arrayFieldObj['wrappers'] = wrappers;
+    }
+    if (skipAutoWrappers !== undefined) {
+        arrayFieldObj['skipAutoWrappers'] = skipAutoWrappers;
+    }
+    if (skipDefaultWrappers !== undefined) {
+        arrayFieldObj['skipDefaultWrappers'] = skipDefaultWrappers;
+    }
     // Safe cast: we're constructing a valid ArrayField shape with key, type, and fields
     const arrayField = arrayFieldObj;
-    // Store normalization metadata via Symbol property instead of a runtime property
+    // Store normalization metadata via Symbol property instead of a runtime property.
+    // `template` always gets populated so the array component can resolve untracked
+    // items (e.g., from external form-value updates).
+    //
+    // For object templates, we must include the auto-generated remove button in the stored
+    // template because object arrays embed the button inside each item's fields (via
+    // buildObjectItem) rather than via the `autoRemoveButton` metadata. Without this,
+    // items resolved from metadata would render without the remove button that
+    // originally-declared items have. Primitive templates keep the button as separate
+    // metadata and pass the raw template through — withAutoRemove() appends the button
+    // at resolution time from autoRemoveButton.
     const primitiveFieldKey = !isObjectTemplate ? template.key : undefined;
-    if (hasAutoRemove || primitiveFieldKey) {
-        setNormalizedArrayMetadata(arrayFieldObj, {
-            ...(hasAutoRemove && { autoRemoveButton: buildRemoveButton(removeButton) }),
-            ...(primitiveFieldKey && { primitiveFieldKey }),
-        });
-    }
+    const metadataTemplate = isObjectTemplate ? buildObjectItemTemplate(template, removeButton) : template;
+    setNormalizedArrayMetadata(arrayFieldObj, {
+        ...(hasAutoRemove && { autoRemoveButton: buildRemoveButton(removeButton) }),
+        ...(primitiveFieldKey && { primitiveFieldKey }),
+        template: metadataTemplate,
+    });
     // Construct the add button (sibling, placed after the array)
     let addButtonField;
     if (addButton !== false) {
@@ -7826,7 +8585,7 @@ function buildRemoveButton(config) {
  * Type guard to check if a field is a container with fields
  */
 function isContainerWithFields(field) {
-    return ((field.type === 'row' || field.type === 'group' || field.type === 'page') &&
+    return ((field.type === 'row' || field.type === 'group' || field.type === 'page' || field.type === 'container') &&
         'fields' in field &&
         Array.isArray(field.fields));
 }
@@ -8239,7 +8998,7 @@ function createHttpConditionLogicFunction(condition) {
                             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) => {
+                        return httpClient.request(method, request.url, options).pipe(map((response) => extractBoolean(response, condition.responseExpression, pendingValue, logger)), tap((value) => {
                             const requestKey = stableStringify(request);
                             cache.set(requestKey, value, cacheDurationMs);
                         }), catchError((error) => {
@@ -8364,7 +9123,7 @@ function createAsyncConditionLogicFunction(condition) {
                         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) => {
+                        return from(asyncFn(evaluationContext)).pipe(map((result) => !!result), catchError((error) => {
                             logger.warn('Async Condition - function failed:', error);
                             return of(pendingValue);
                         }));
@@ -9147,8 +9906,8 @@ function getNumberValidationConfig(fieldDef) {
  * Cross-field validators are skipped at field level and applied at form level via validateTree.
  */
 function mapFieldToForm(fieldDef, fieldPath) {
-    // Layout containers (page, row) - flatten children to current level
-    if (isPageField(fieldDef) || isRowField(fieldDef)) {
+    // Layout containers (page, row, container) - flatten children to current level
+    if (isPageField(fieldDef) || isRowField(fieldDef) || isContainerTypedField(fieldDef)) {
         mapContainerChildren(fieldDef.fields, fieldPath);
         return;
     }
@@ -9305,8 +10064,8 @@ function mapArrayFieldToForm(arrayField, fieldPath) {
         const pathRecord = itemPath;
         // Map ALL unique template fields from all object items
         for (const templateField of allObjectFields) {
-            if (isRowField(templateField) || isPageField(templateField)) {
-                // Row/page templates flatten their children
+            if (isRowField(templateField) || isPageField(templateField) || isContainerTypedField(templateField)) {
+                // Row/page/container templates flatten their children
                 mapContainerChildren(templateField.fields, itemPath);
             }
             else if (isGroupField(templateField)) {
@@ -9345,8 +10104,8 @@ function mapArrayFieldToForm(arrayField, fieldPath) {
 function collectFieldsFromObjectItem(itemFields, allFields) {
     const seenKeys = new Set(allFields.map((f) => f.key).filter(Boolean));
     for (const field of itemFields) {
-        // For row/page fields, we need to collect their children's keys
-        if (isRowField(field) || isPageField(field)) {
+        // For row/page/container fields, we need to collect their children's keys
+        if (isRowField(field) || isPageField(field) || isContainerTypedField(field)) {
             // Use a synthetic key for container fields to dedupe them
             const containerKey = `__container_${field.type}_${JSON.stringify(field.fields?.map((f) => f.key))}`;
             if (!seenKeys.has(containerKey)) {
@@ -9477,17 +10236,24 @@ function getFieldDefaultValue(field, registry) {
         }
         return groupDefaults;
     }
-    // Use explicit value if provided, with type-specific handling for null
+    // Narrow once: `field` is FieldDef<unknown>, but value/nullable are defined on BaseValueField.
+    // This cast avoids per-access `as` and documents what we're reading.
+    const valueField = field;
+    const isNullable = valueField.nullable === true;
+    // Use explicit value if provided (including null when nullable)
     if ('value' in field) {
-        // If value is explicitly set (even to null/undefined), respect it
-        if (field.value !== null && field.value !== undefined) {
-            return field.value;
+        if (valueField.value !== null && valueField.value !== undefined) {
+            return valueField.value;
         }
-        // Handle explicit null: use type-specific default
-        if (field.value === null) {
-            return field.type === 'checkbox' ? false : '';
+        // Preserve explicit null for nullable fields
+        if (valueField.value === null && isNullable) {
+            return null;
         }
-        // Handle explicit undefined: fall through to type-specific defaults
+        // Non-nullable null and undefined both fall through to type-specific defaults below
+    }
+    // Nullable fields with no explicit value default to null
+    if (isNullable) {
+        return null;
     }
     // Type-specific defaults when no value is specified
     if (field.type === 'checkbox') {
@@ -9519,8 +10285,8 @@ function getFieldDefaultValue(field, registry) {
                     // Groups wrap their value under the group key
                     itemValue[templateField.key] = fieldValue;
                 }
-                else if (templateField.type === 'row') {
-                    // Rows flatten their fields directly
+                else if (templateField.type === 'row' || templateField.type === 'container') {
+                    // Rows and containers flatten their fields directly
                     if (fieldValue && typeof fieldValue === 'object') {
                         itemValue = { ...itemValue, ...fieldValue };
                     }
@@ -10209,18 +10975,20 @@ function flattenFields(fields, registry, options = {}) {
         // Step 1: Determine how this field type should handle its value in the form
         // valueHandling can be: 'include', 'exclude', or 'flatten'
         const valueHandling = getFieldValueHandling(field.type, registry);
-        // Step 2: Check if this is a row field that should be preserved for DOM rendering
+        // Step 2: Check if this is a row or container field that should be preserved for DOM rendering
         // Row fields need to render their container element for grid layouts to work
-        if (options.preserveRows && isRowField(field)) {
+        // Container fields need to render their container for the wrapper chain
+        if (options.preserveRows && (isRowField(field) || isContainerTypedField(field))) {
             if (field.fields) {
                 // Recursively flatten children while preserving row structure
                 const flattenedChildren = flattenFields(normalizeFieldsArray(field.fields), registry, options);
-                // Keep the row field in the result with its flattened children
-                // This allows the row component to render its container while children are flattened
+                // Keep the row/container field in the result with its flattened children
+                // This allows the container component to render while children are flattened
+                const autoPrefix = isRowField(field) ? 'auto_row' : 'auto_container';
                 result.push({
                     ...field,
                     fields: flattenedChildren,
-                    key: field.key || `auto_row_${autoKeyCounter++}`,
+                    key: field.key || `${autoPrefix}_${autoKeyCounter++}`,
                 });
             }
         }
@@ -10792,6 +11560,17 @@ function mapFieldToInputs(fieldDef, fieldRegistry) {
     });
 }
 
+function createRenderReadySignal(inputs, definition) {
+    const explicitRenderReadyWhen = definition?.renderReadyWhen;
+    const requiredInputs = definition?.mapper && explicitRenderReadyWhen === undefined ? ['field'] : (explicitRenderReadyWhen ?? []);
+    if (requiredInputs.length === 0) {
+        return computed(() => true);
+    }
+    return computed(() => {
+        const currentInputs = inputs();
+        return requiredInputs.every((inputName) => currentInputs[inputName] !== undefined);
+    });
+}
 /**
  * Resolves a single field definition to a ResolvedField using RxJS.
  * Loads the component asynchronously and maps inputs in the injection context.
@@ -10805,7 +11584,7 @@ function mapFieldToInputs(fieldDef, fieldRegistry) {
  * @returns Observable that emits ResolvedField or undefined (for componentless fields or on error)
  */
 function resolveField(fieldDef, context) {
-    return from(context.loadTypeComponent(fieldDef.type)).pipe(map$1((component) => {
+    return from(context.loadTypeComponent(fieldDef.type)).pipe(map((component) => {
         // Check if component is destroyed before proceeding
         if (context.destroyRef.destroyed) {
             return undefined;
@@ -10816,15 +11595,18 @@ function resolveField(fieldDef, context) {
         }
         // Run mapper in injection context
         const inputs = runInInjectionContext(context.injector, () => mapFieldToInputs(fieldDef, context.registry));
+        const definition = context.registry.get(fieldDef.type);
         // Fields with components should always have inputs (componentless fields are handled above)
         if (!inputs) {
             return undefined;
         }
         return {
             key: fieldDef.key,
+            fieldDef,
             component,
             injector: context.injector,
             inputs,
+            renderReady: createRenderReadySignal(inputs, definition),
         };
     }), catchError((error) => {
         // Only call onError if component is not destroyed to avoid accessing cleaned-up state
@@ -10850,14 +11632,17 @@ function resolveFieldSync(fieldDef, context) {
         return undefined;
     }
     const inputs = runInInjectionContext(context.injector, () => mapFieldToInputs(fieldDef, context.registry));
+    const definition = context.registry.get(fieldDef.type);
     if (!inputs) {
         return undefined;
     }
     return {
         key: fieldDef.key,
+        fieldDef,
         component,
         injector: context.injector,
         inputs,
+        renderReady: createRenderReadySignal(inputs, definition),
     };
 }
 /**
@@ -10885,13 +11670,13 @@ function reconcileFields(prev, curr) {
  * Used by container components (page, group) to resolve their child fields.
  */
 function createFieldResolutionPipe(getContext) {
-    return pipe(switchMap$1((fields) => {
+    return pipe(switchMap((fields) => {
         if (!fields || fields.length === 0) {
             return of([]);
         }
         const context = getContext();
         return forkJoin(fields.map((f) => resolveField(f, context)));
-    }), map$1((fields) => fields.filter((f) => f !== undefined)), scan$1(reconcileFields, []));
+    }), map((fields) => fields.filter((f) => f !== undefined)), scan$1(reconcileFields, []));
 }
 
 /**
@@ -11156,13 +11941,8 @@ function injectFieldRegistry() {
             if (cached) {
                 return cached;
             }
-            // Handle async loading
             try {
-                const result = await fieldType.loadComponent();
-                // Handle ES module imports - extract default export if needed
-                const moduleResult = result;
-                const component = (typeof moduleResult === 'object' && 'default' in moduleResult && moduleResult.default) || result;
-                // Populate cache for future sync lookups
+                const component = resolveDefaultExport(await fieldType.loadComponent());
                 if (component) {
                     componentCache.set(name, component);
                 }
@@ -12344,13 +13124,13 @@ class FormStateManager {
     cleared$;
     /** Emits once when the state machine reaches 'ready'. Useful for tests. */
     get ready$() {
-        return this.machine.state$.pipe(filter(isReadyState), take$1(1), map$1(() => undefined));
+        return this.machine.state$.pipe(filter(isReadyState), take$1(1), map(() => undefined));
     }
     // ─────────────────────────────────────────────────────────────────────────────
     // Constructor
     // ─────────────────────────────────────────────────────────────────────────────
     constructor() {
-        this.resolvedFields = derivedFromDeferred(this.fieldsSource, pipe(switchMap$1((fields) => {
+        this.resolvedFields = derivedFromDeferred(this.fieldsSource, pipe(switchMap((fields) => {
             if (!fields || fields.length === 0) {
                 return of([]);
             }
@@ -12399,13 +13179,13 @@ class FormStateManager {
             if (asyncObs.length === 0) {
                 return of(results);
             }
-            return forkJoin(asyncObs).pipe(map$1((asyncResults) => {
+            return forkJoin(asyncObs).pipe(map((asyncResults) => {
                 for (let j = 0; j < asyncResults.length; j++) {
                     results[asyncIndexes[j]] = asyncResults[j];
                 }
                 return results;
             }));
-        }), map$1((fields) => fields.filter((f) => f !== undefined)), scan$1(reconcileFields, [])), { initialValue: [], injector: this.injector });
+        }), map((fields) => fields.filter((f) => f !== undefined)), scan$1(reconcileFields, [])), { initialValue: [], injector: this.injector });
         // Length comparison works because reconcileFields preserves ordering and
         // fieldsSource changes atomically during transitions (lengths won't match until settled).
         this.isFieldPipelineSettled = computed(() => {
@@ -12420,7 +13200,7 @@ class FormStateManager {
         }), 
         // switchMap is intentional here: mapping is synchronous (reads signals, no async Promise).
         // The exhaustMap concern in createSubmissionHandler does not apply to this path.
-        switchMap$1(() => {
+        switchMap(() => {
             const config = this.activeConfig();
             const submissionConfig = config?.submission;
             if (submissionConfig?.action) {
@@ -12431,8 +13211,8 @@ class FormStateManager {
             }
             return of(this.filteredFormValue());
         }), takeUntilDestroyed(this.destroyRef));
-        this.reset$ = this.eventBus.on('form-reset').pipe(map$1(() => undefined), takeUntilDestroyed(this.destroyRef));
-        this.cleared$ = this.eventBus.on('form-clear').pipe(map$1(() => undefined), takeUntilDestroyed(this.destroyRef));
+        this.reset$ = this.eventBus.on('form-reset').pipe(map(() => undefined), takeUntilDestroyed(this.destroyRef));
+        this.cleared$ = this.eventBus.on('form-clear').pipe(map(() => undefined), takeUntilDestroyed(this.destroyRef));
         // Create the state machine eagerly
         this.machine = createFormStateMachine({
             injector: this.injector,
@@ -12602,10 +13382,10 @@ class FormStateManager {
     ngOnDestroy() {
         this.machine.dispatch({ type: Action.Destroy });
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormStateManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormStateManager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FormStateManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormStateManager, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -12876,6 +13656,11 @@ function provideDynamicFormDI() {
             useFactory: (stateManager) => computed(() => stateManager.activeConfig()?.defaultProps),
             deps: [FormStateManager],
         },
+        {
+            provide: DEFAULT_WRAPPERS,
+            useFactory: (stateManager) => computed(() => stateManager.activeConfig()?.defaultWrappers),
+            deps: [FormStateManager],
+        },
         {
             provide: DEFAULT_VALIDATION_MESSAGES,
             useFactory: (stateManager) => computed(() => stateManager.activeConfig()?.defaultValidationMessages),
@@ -13006,10 +13791,10 @@ class EventDispatcher {
     disconnect() {
         this.bus = undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EventDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EventDispatcher });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EventDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EventDispatcher });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EventDispatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EventDispatcher, decorators: [{
             type: Injectable
         }] });
 
@@ -13219,8 +14004,8 @@ class DynamicForm {
             error: (err) => this.logger.error('Submission handler error', err),
         });
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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()) {
       @switch (formModeDetection().mode) {
         @case ('paged') {
@@ -13228,14 +14013,7 @@ class DynamicForm {
         }
         @case ('non-paged') {
           @for (field of resolvedFields(); track field.key) {
-            <ng-container
-              *ngComponentOutlet="
-                field.component;
-                injector: field.injector;
-                environmentInjector: environmentInjector;
-                inputs: field.inputs()
-              "
-            />
+            <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
           }
         }
         @default {
@@ -13243,11 +14021,11 @@ class DynamicForm {
         }
       }
     }
-  `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}:host>*{grid-column:1/-1}:host.df-form-spacing-custom{--df-grid-row-gap: var(--form-custom-spacing, 1.5rem)}:host.df-form-gap-none{--df-grid-row-gap: 0}:host.df-form-gap-xs{--df-grid-row-gap: .25rem}:host.df-form-gap-sm{--df-grid-row-gap: .5rem}:host.df-form-gap-md{--df-grid-row-gap: 1rem}:host.df-form-gap-lg{--df-grid-row-gap: 1.5rem}:host.df-form-gap-xl{--df-grid-row-gap: 2rem}:host.df-form-paged{--df-grid-row-gap: 0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: PageOrchestratorComponent, selector: "div[page-orchestrator]", inputs: ["pageFields", "form", "fieldSignalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: DfFieldOutlet, selector: "[dfFieldOutlet]", inputs: ["dfFieldOutlet", "dfFieldOutletEnvironmentInjector"] }, { 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.6", ngImport: i0, type: DynamicForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicForm, decorators: [{
             type: Component,
-            args: [{ selector: 'form[dynamic-form]', imports: [NgComponentOutlet, PageOrchestratorComponent], template: `
+            args: [{ selector: 'form[dynamic-form]', imports: [DfFieldOutlet, PageOrchestratorComponent], template: `
     @if (shouldRender()) {
       @switch (formModeDetection().mode) {
         @case ('paged') {
@@ -13255,14 +14033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
         }
         @case ('non-paged') {
           @for (field of resolvedFields(); track field.key) {
-            <ng-container
-              *ngComponentOutlet="
-                field.component;
-                injector: field.injector;
-                environmentInjector: environmentInjector;
-                inputs: field.inputs()
-              "
-            />
+            <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
           }
         }
         @default {
@@ -13281,7 +14052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}:host>*{grid-column:1/-1}:host.df-form-spacing-custom{--df-grid-row-gap: var(--form-custom-spacing, 1.5rem)}:host.df-form-gap-none{--df-grid-row-gap: 0}:host.df-form-gap-xs{--df-grid-row-gap: .25rem}:host.df-form-gap-sm{--df-grid-row-gap: .5rem}:host.df-form-gap-md{--df-grid-row-gap: 1rem}:host.df-form-gap-lg{--df-grid-row-gap: 1.5rem}:host.df-form-gap-xl{--df-grid-row-gap: 2rem}:host.df-form-paged{--df-grid-row-gap: 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamic-form", required: true }] }], formOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formOptions", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], validityChange: [{ type: i0.Output, args: ["validityChange"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], submitted: [{ type: i0.Output, args: ["submitted"] }], reset: [{ type: i0.Output, args: ["reset"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], events: [{ type: i0.Output, args: ["events"] }], initialized: [{ type: i0.Output, args: ["initialized"] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }], onPageNavigationStateChange: [{ type: i0.Output, args: ["onPageNavigationStateChange"] }] } });
 /**
- * Recursively counts container fields (page, row, group, array) in a field tree.
+ * Recursively counts container fields (page, row, group, array, wrapper) in a field tree.
  * Descends into container children including array item templates to ensure
  * nested containers are counted for accurate initialization tracking.
  */
@@ -13698,24 +14469,28 @@ function groupFieldMapper(fieldDef) {
     });
 }
 
+const ROW_WRAPPERS = [{ type: 'row' }];
 /**
- * Maps a row field definition to component inputs.
+ * Maps a row field definition to container component inputs.
  *
- * Row components are layout containers that don't change the form shape.
- * The row component will inject FIELD_SIGNAL_CONTEXT directly.
+ * `row` is a virtual field type: it resolves to `ContainerFieldComponent` with a
+ * synthesized `{ type: 'row' }` wrapper, so the user-facing config stays
+ * `{ type: 'row', fields: [...] }` while the runtime uses the container +
+ * wrapper pipeline.
  *
  * Supports hidden state resolution via `logic` array or static `hidden` property.
- *
- * @param fieldDef The row field definition
- * @returns Signal containing Record of input names to values for ngComponentOutlet
  */
 function rowFieldMapper(fieldDef) {
     const rootFormRegistry = inject(RootFormRegistryService);
     const className = buildClassName(fieldDef);
     return computed(() => {
+        // Rebuilt each emission so logic-driven updates to fieldDef (e.g. `disabled`)
+        // flow through. Shallow spread is safe while RowField has no nested
+        // mutable props; add a deep-clone if that stops being true.
+        const containerField = { ...fieldDef, wrappers: ROW_WRAPPERS };
         const inputs = {
             key: fieldDef.key,
-            field: fieldDef,
+            field: containerField,
             ...(className !== undefined && { className }),
         };
         applyHiddenLogic(inputs, fieldDef, rootFormRegistry);
@@ -13774,6 +14549,38 @@ function textFieldMapper(fieldDef) {
     });
 }
 
+/**
+ * Maps a container field definition to component inputs.
+ *
+ * Container components are layout containers that don't change the form shape.
+ * The container component will inject FIELD_SIGNAL_CONTEXT directly.
+ *
+ * Supports hidden state resolution via `logic` array or static `hidden` property.
+ *
+ * @param fieldDef The container field definition
+ * @returns Signal containing Record of input names to values for ngComponentOutlet
+ */
+function containerFieldMapper(fieldDef) {
+    const rootFormRegistry = inject(RootFormRegistryService);
+    const className = buildClassName(fieldDef);
+    return computed(() => {
+        // Nullify wrapper-related props on the field passed to the container
+        // component — DfFieldOutlet handles field-level wrappers at the outlet
+        // level. Passing them here would cause double-wrapping since the
+        // container's internal wrapper chain also resolves from `this.field()`.
+        // We set wrappers to undefined (not stripped) so the object identity
+        // stays close to the original fieldDef shape.
+        const containerField = { ...fieldDef, wrappers: undefined, skipAutoWrappers: undefined, skipDefaultWrappers: undefined };
+        const inputs = {
+            key: fieldDef.key,
+            field: containerField,
+            ...(className !== undefined && { className }),
+        };
+        applyHiddenLogic(inputs, fieldDef, rootFormRegistry);
+        return inputs;
+    });
+}
+
 /**
  * Built-in field types provided by the dynamic form library.
  *
@@ -13805,6 +14612,14 @@ function textFieldMapper(fieldDef) {
  * { type: 'page', key: 'step1', fields: [...] }
  * ```
  */
+/**
+ * Base field type definitions for fields that don't use the `field` input.
+ * Used by display-only fields like `text` that render immediately without
+ * waiting for form value integration.
+ */
+const DISPLAY_FIELD_TYPES_BASE = {
+    renderReadyWhen: [],
+};
 /**
  * Built-in field types provided by the dynamic form library.
  *
@@ -13815,7 +14630,10 @@ function textFieldMapper(fieldDef) {
 const BUILT_IN_FIELDS = [
     {
         name: 'row',
-        loadComponent: () => Promise.resolve().then(function () { return rowField_component; }),
+        // `row` is a virtual field type: it maps to ContainerFieldComponent, and
+        // the rowFieldMapper injects a `{ type: 'row' }` wrapper so the container
+        // renders the flex/grid layout via RowWrapperComponent.
+        loadComponent: () => Promise.resolve().then(function () { return containerField_component; }),
         mapper: rowFieldMapper,
         valueHandling: 'flatten',
     },
@@ -13833,23 +14651,90 @@ const BUILT_IN_FIELDS = [
     },
     {
         name: 'page',
-        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-Cen4ArED.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-DV-EX9U0.mjs'),
         mapper: pageFieldMapper,
         valueHandling: 'flatten',
     },
     {
         name: 'text',
-        loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-cE1EUmYR.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-CHC8v87r.mjs'),
         mapper: textFieldMapper,
         valueHandling: 'exclude',
+        ...DISPLAY_FIELD_TYPES_BASE,
     },
     {
         name: 'hidden',
         // Componentless field - no loadComponent or mapper needed
         valueHandling: 'include',
     },
+    {
+        name: 'container',
+        loadComponent: () => Promise.resolve().then(function () { return containerField_component; }),
+        mapper: containerFieldMapper,
+        valueHandling: 'flatten',
+    },
+];
+const BUILT_IN_WRAPPERS = [
+    {
+        wrapperName: 'css',
+        loadComponent: () => import('./ng-forge-dynamic-forms-css-wrapper.component-CGNGJoqv.mjs'),
+    },
+    {
+        wrapperName: 'row',
+        loadComponent: () => import('./ng-forge-dynamic-forms-row-wrapper.component-BIvEUoia.mjs'),
+    },
 ];
 
+/**
+ * Bundle wrapper registrations into a single object that can be passed to
+ * `provideDynamicForm(...)`.
+ *
+ * @example
+ * ```typescript
+ * const appWrappers = createWrappers(
+ *   {
+ *     wrapperName: 'section',
+ *     loadComponent: () => import('./section-wrapper'),
+ *     props: wrapperProps<SectionWrapper>(),
+ *   },
+ *   {
+ *     wrapperName: 'highlight',
+ *     loadComponent: () => import('./highlight-wrapper'),
+ *     types: ['input', 'select'],
+ *     props: wrapperProps<HighlightWrapper>(),
+ *   },
+ * );
+ *
+ * declare module '@ng-forge/dynamic-forms' {
+ *   interface FieldRegistryWrappers extends InferWrapperRegistry<typeof appWrappers> {}
+ * }
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideDynamicForm(appWrappers)],
+ * });
+ * ```
+ */
+function createWrappers(...registrations) {
+    return {
+        ɵkind: 'wrappers',
+        ɵregistrations: registrations,
+        ɵdefinitions: registrations.map(({ wrapperName, loadComponent, types }) => ({
+            wrapperName,
+            loadComponent,
+            types,
+        })),
+    };
+}
+/** Type guard for a `WrappersBundle`. */
+function isWrappersBundle(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        'ɵkind' in value &&
+        value.ɵkind === 'wrappers' &&
+        'ɵdefinitions' in value &&
+        Array.isArray(value.ɵdefinitions));
+}
+
 /**
  * Provider function to configure the dynamic form system with field types and options.
  *
@@ -13899,19 +14784,14 @@ const BUILT_IN_FIELDS = [
  * @public
  */
 function provideDynamicForm(...items) {
-    // Separate field types from features
-    const fieldTypes = items.filter((item) => !isDynamicFormFeature(item));
+    // Separate field types, wrapper types, wrapper bundles, and features
+    const fieldTypes = items.filter((item) => !isDynamicFormFeature(item) && !isWrapperTypeDefinition(item) && !isWrappersBundle(item));
+    const wrapperTypes = items.filter(isWrapperTypeDefinition);
+    const wrapperBundles = items.filter(isWrappersBundle);
     const features = items.filter(isDynamicFormFeature);
     const fields = [...BUILT_IN_FIELDS, ...fieldTypes];
-    // Extract config providers from field type arrays
-    const configProviders = [];
-    fieldTypes.forEach((fieldTypeArray) => {
-        const fieldTypeWithConfig = fieldTypeArray;
-        if (fieldTypeWithConfig.__configProviders) {
-            configProviders.push(...fieldTypeWithConfig.__configProviders);
-        }
-    });
-    // Extract providers from features
+    const wrappers = [...BUILT_IN_WRAPPERS, ...wrapperTypes, ...wrapperBundles.flatMap((bundle) => bundle.ɵdefinitions)];
+    // Extract providers from features (includes config features like material-config, bootstrap-config, etc.)
     const featureProviders = [];
     const hasLoggerFeature = features.some((feature) => feature.ɵkind === 'logger');
     features.forEach((feature) => {
@@ -13938,7 +14818,41 @@ function provideDynamicForm(...items) {
                 return registry;
             },
         },
-        ...configProviders,
+        // Always provide default Wrapper classes
+        {
+            provide: WRAPPER_REGISTRY,
+            useFactory: () => {
+                const logger = inject(DynamicFormLogger);
+                const registry = new Map();
+                // Add custom wrapper types
+                wrappers.forEach((wrapperType) => {
+                    if (registry.has(wrapperType.wrapperName)) {
+                        logger.warn(`Wrapper type "${wrapperType.wrapperName}" is already registered. Overwriting.`);
+                    }
+                    registry.set(wrapperType.wrapperName, wrapperType);
+                });
+                return registry;
+            },
+        },
+        // Pre-computed reverse index for auto-association lookup — built once so
+        // resolveWrappers is O(1) per field render instead of scanning every
+        // registered wrapper.
+        {
+            provide: WRAPPER_AUTO_ASSOCIATIONS,
+            useFactory: () => {
+                const autoMap = new Map();
+                for (const wrapperType of wrappers) {
+                    if (!wrapperType.types)
+                        continue;
+                    for (const fieldType of wrapperType.types) {
+                        const existing = autoMap.get(fieldType) ?? [];
+                        existing.push({ type: wrapperType.wrapperName });
+                        autoMap.set(fieldType, existing);
+                    }
+                }
+                return autoMap;
+            },
+        },
         ...featureProviders,
     ]);
 }
@@ -14073,8 +14987,38 @@ function withValueExclusionDefaults(config) {
     return createFeature('value-exclusion', [{ provide: VALUE_EXCLUSION_DEFAULTS, useValue: resolved }]);
 }
 
+/**
+ * Zero-cost type carrier used in wrapper registrations.
+ *
+ * Returns `undefined` at runtime but is typed as `T`, so TypeScript can
+ * thread a wrapper's config type through `createWrappers(...)` into the
+ * `InferWrapperRegistry<typeof ...>` utility without requiring users to
+ * hand-write the augmentation shape.
+ *
+ * @example
+ * ```typescript
+ * const wrappers = createWrappers(
+ *   {
+ *     wrapperName: 'section',
+ *     loadComponent: () => import('./section-wrapper'),
+ *     props: wrapperProps<SectionWrapper>(),
+ *   },
+ * );
+ *
+ * declare module '@ng-forge/dynamic-forms' {
+ *   interface FieldRegistryWrappers extends InferWrapperRegistry<typeof wrappers> {}
+ * }
+ * ```
+ */
+function wrapperProps() {
+    return undefined;
+}
+
 function isValueField(field) {
-    return 'value' in field;
+    // `nullable: true` without an explicit `value` is still a value-bearing declaration:
+    // the field resolves to `null` at runtime. Treating it as a value field keeps
+    // downstream narrowing consistent with getFieldDefaultValue's behavior.
+    return 'value' in field || 'nullable' in field;
 }
 
 function isCheckedField(field) {
@@ -14112,10 +15056,13 @@ function isCheckedField(field) {
  * eventBus.dispatch(arrayEvent('contacts').pop());      // Remove last
  * eventBus.dispatch(arrayEvent('contacts').shift());    // Remove first
  * eventBus.dispatch(arrayEvent('contacts').removeAt(2)); // Remove at index
+ *
+ * // Reordering items (no template needed, preserves item identity)
+ * eventBus.dispatch(arrayEvent('contacts').move(0, 2)); // Move first to third
  * ```
  *
  * @param arrayKey - The key of the array field to operate on
- * @returns An object with methods for all 6 array operations
+ * @returns An object with methods for all 7 array operations
  */
 function arrayEvent(arrayKey) {
     return {
@@ -14226,6 +15173,22 @@ function arrayEvent(arrayKey) {
          * ```
          */
         removeAt: (index) => new RemoveAtIndexEvent(arrayKey, index),
+        /**
+         * Move an existing item from one position to another within the array.
+         * This is an atomic reorder — the item is NOT destroyed and recreated.
+         * The resolved component, form value, and stored template are preserved.
+         *
+         * @param from - The current index of the item to move
+         * @param to - The target index to move the item to
+         * @returns A MoveArrayItemEvent to dispatch
+         *
+         * @example
+         * ```typescript
+         * // Move item from index 0 to index 2
+         * eventBus.dispatch(arrayEvent('contacts').move(0, 2));
+         * ```
+         */
+        move: (from, to) => new MoveArrayItemEvent(arrayKey, from, to),
     };
 }
 
@@ -14341,11 +15304,11 @@ function formConfig(config) {
 /**
  * Container field types that do NOT support labels
  */
-const CONTAINER_TYPES = ['group', 'row', 'array'];
+const CONTAINER_TYPES = ['group', 'row', 'array', 'container'];
 /**
  * Container and page field types that only support 'hidden' logic
  */
-const HIDDEN_ONLY_LOGIC_TYPES = ['group', 'row', 'array', 'page'];
+const HIDDEN_ONLY_LOGIC_TYPES = ['group', 'row', 'array', 'container', 'page'];
 /**
  * Field types that support options at the field level
  */
@@ -14605,10 +15568,10 @@ class DynamicTextPipe {
         }
         return of(value || '');
     }
-    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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: DynamicTextPipe, isStandalone: true, name: "dynamicText" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: DynamicTextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicTextPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dynamicText',
@@ -14658,111 +15621,30 @@ function computeContainerHostClasses(containerType, className) {
  * When resolved fields become non-empty, emits a ComponentInitializedEvent
  * via afterNextRender to signal the container is ready.
  *
+ * `componentType` may be a static value or a lazy getter — the latter lets
+ * virtual field types (e.g. `row`, which renders via ContainerFieldComponent)
+ * preserve their original type on the emitted event instead of collapsing to
+ * the host component's type.
+ *
  * @param resolvedFields - Signal of resolved fields
  * @param eventBus - EventBus for dispatching initialization events
- * @param componentType - The type of container component
+ * @param componentType - Static type, or a getter evaluated at emission time
  * @param fieldKeyFn - Function returning the field's key
  * @param injector - Injector for afterNextRender scheduling
  */
 function setupContainerInitEffect(resolvedFields, eventBus, componentType, fieldKeyFn, injector) {
-    explicitEffect([resolvedFields], ([fields]) => {
-        if (fields.length > 0) {
-            emitComponentInitialized(eventBus, componentType, fieldKeyFn(), injector);
+    const allReady = computed(() => {
+        const fields = resolvedFields();
+        return fields.length > 0 && fields.every((field) => field.renderReady());
+    }, ...(ngDevMode ? [{ debugName: "allReady" }] : /* istanbul ignore next */ []));
+    explicitEffect([allReady], ([ready]) => {
+        if (ready) {
+            const type = typeof componentType === 'function' ? componentType() : componentType;
+            emitComponentInitialized(eventBus, type, fieldKeyFn(), injector);
         }
     });
 }
 
-/**
- * Layout container for horizontal field arrangement.
- *
- * Does not create a new form context - fields share the parent's context.
- * Field values are flattened into the parent form (no nesting under row key).
- * Purely a visual/layout container with no impact on form structure.
- */
-class RowFieldComponent {
-    // ─────────────────────────────────────────────────────────────────────────────
-    // Dependencies
-    // ─────────────────────────────────────────────────────────────────────────────
-    destroyRef = inject(DestroyRef);
-    fieldRegistry = injectFieldRegistry();
-    injector = inject(Injector);
-    environmentInjector = inject(EnvironmentInjector);
-    eventBus = inject(EventBus);
-    logger = inject(DynamicFormLogger);
-    // ─────────────────────────────────────────────────────────────────────────────
-    // Inputs
-    // ─────────────────────────────────────────────────────────────────────────────
-    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" }] : /* 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" }] : /* istanbul ignore next */ []));
-    resolvedFields = derivedFromDeferred(this.fieldsSource, createFieldResolutionPipe(() => ({
-        loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
-        registry: this.rawFieldRegistry(),
-        injector: this.injector,
-        destroyRef: this.destroyRef,
-        onError: (fieldDef, error) => {
-            const fieldKey = fieldDef.key || '<no key>';
-            const rowKey = this.field().key || '<no key>';
-            this.logger.error(`Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}) ` +
-                `within row '${rowKey}'. Ensure the field type is registered in your field registry.`, error);
-        },
-    })), { initialValue: [], injector: this.injector });
-    // ─────────────────────────────────────────────────────────────────────────────
-    // Constructor
-    // ─────────────────────────────────────────────────────────────────────────────
-    constructor() {
-        this.setupEffects();
-    }
-    // ─────────────────────────────────────────────────────────────────────────────
-    // Private Methods
-    // ─────────────────────────────────────────────────────────────────────────────
-    setupEffects() {
-        setupContainerInitEffect(this.resolvedFields, this.eventBus, 'row', () => this.field().key, this.injector);
-    }
-    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; 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 ::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.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; environmentInjector: environmentInjector; inputs: field.inputs()"
-      />
-    }
-  `, host: {
-                        '[class]': 'hostClasses()',
-                        '[class.disabled]': 'disabled()',
-                        '[class.df-container-hidden]': 'hidden()',
-                        '[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 ::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({
-    __proto__: null,
-    RowFieldComponent: RowFieldComponent,
-    default: RowFieldComponent
-});
-
 /**
  * Container component for rendering nested form groups.
  *
@@ -14915,22 +15797,18 @@ class GroupFieldComponent {
             }
         }, { defer: true });
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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; environmentInjector: environmentInjector; inputs: field.inputs()"
-      />
+      <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
     }
-  `, 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 });
+  `, 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: DfFieldOutlet, selector: "[dfFieldOutlet]", inputs: ["dfFieldOutlet", "dfFieldOutletEnvironmentInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: GroupFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: GroupFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fieldset[group-field]', imports: [NgComponentOutlet], template: `
+            args: [{ selector: 'fieldset[group-field]', imports: [DfFieldOutlet], template: `
     @for (field of resolvedFields(); track field.key) {
-      <ng-container
-        *ngComponentOutlet="field.component; injector: field.injector; environmentInjector: environmentInjector; inputs: field.inputs()"
-      />
+      <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
     }
   `, host: {
                         '[class]': 'hostClasses()',
@@ -15140,7 +16018,7 @@ function resolveArrayItem(options) {
         return positionMap.get(itemId) ?? index;
     }, ...(ngDevMode ? [{ debugName: "indexSignal" }] : /* istanbul ignore next */ []));
     // Resolve all templates in parallel
-    const fieldObservables = templates.map((template) => from(loadTypeComponent(template.type)).pipe(map$1((component) => {
+    const fieldObservables = templates.map((template) => from(loadTypeComponent(template.type)).pipe(map((component) => {
         if (destroyRef.destroyed) {
             return undefined;
         }
@@ -15162,9 +16040,12 @@ function resolveArrayItem(options) {
             return undefined;
         }
         return {
+            key: template.key,
+            fieldDef: template,
             component,
             injector,
             inputs,
+            renderReady: createRenderReadySignal(inputs, registry.get(template.type)),
         };
     }), catchError((error) => {
         if (!destroyRef.destroyed) {
@@ -15174,7 +16055,7 @@ function resolveArrayItem(options) {
         }
         return of(undefined);
     })));
-    return forkJoin(fieldObservables).pipe(map$1((fields) => {
+    return forkJoin(fieldObservables).pipe(map((fields) => {
         const validFields = fields.filter((f) => f !== undefined);
         // If no fields resolved, return undefined
         if (validFields.length === 0) {
@@ -15194,6 +16075,7 @@ const ARRAY_EVENT_TYPES = [
     'append-array-item',
     'prepend-array-item',
     'insert-array-item',
+    'move-array-item',
     'pop-array-item',
     'shift-array-item',
     'remove-at-index',
@@ -15210,6 +16092,8 @@ function toArrayAction(event) {
             return { action: 'add', template: event.template, index: 0 };
         case 'insert-array-item':
             return { action: 'add', template: event.template, index: event.index };
+        case 'move-array-item':
+            return { action: 'move', fromIndex: event.fromIndex, toIndex: event.toIndex };
         case 'pop-array-item':
             return { action: 'remove' };
         case 'shift-array-item':
@@ -15239,13 +16123,13 @@ function toArrayAction(event) {
  * ```
  */
 function observeArrayActions(eventBus, arrayKey) {
-    return eventBus.on(ARRAY_EVENT_TYPES).pipe(filter((event) => event.arrayKey === arrayKey()), map$1(toArrayAction));
+    return eventBus.on(ARRAY_EVENT_TYPES).pipe(filter((event) => event.arrayKey === arrayKey()), map(toArrayAction));
 }
 
 /**
  * Container component for rendering dynamic arrays of fields.
  *
- * Supports add/remove operations via the arrayEvent() builder API.
+ * Supports add/remove/move operations via the arrayEvent() builder API.
  * Uses differential updates to optimize rendering - only recreates items when necessary.
  * Each item gets a scoped injector with ARRAY_CONTEXT for position-aware operations.
  * Supports multiple sibling fields per array item (e.g., name + email without a wrapper).
@@ -15315,6 +16199,38 @@ class ArrayFieldComponent {
         }
         return undefined;
     }, ...(ngDevMode ? [{ debugName: "primitiveFieldKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Normalized item templates WITHOUT auto-remove button appended.
+     * Each element is normalized to an array: single FieldDef → [FieldDef], array stays as-is.
+     *
+     * Used by moveItem() to stash raw templates into the templateRegistry, preserving
+     * the invariant that registry entries are pre-synthesis (withAutoRemove() adds the
+     * button during resolution).
+     */
+    rawItemTemplates = computed(() => {
+        const arrayField = this.field();
+        const definitions = arrayField.fields || [];
+        return definitions.map((def) => {
+            return (Array.isArray(def) ? def : [def]);
+        });
+    }, ...(ngDevMode ? [{ debugName: "rawItemTemplates" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolves the effective fallback template for this array — used when the form
+     * value contains an item with no registered template (i.e., items that were
+     * neither added via event handlers nor covered by a positional entry in `fields`).
+     *
+     * Populated from `SimplifiedArrayField.template` via normalization metadata, so every
+     * simplified array gets an automatic default. Returns undefined for full-API arrays;
+     * `createResolveItemObservable` then falls back to warn-and-drop.
+     *
+     * Homogeneous arrays only — all fallback items receive the same template.
+     */
+    fallbackTemplate = computed(() => {
+        const raw = getNormalizedArrayMetadata(this.field())?.template;
+        if (!raw)
+            return undefined;
+        return (Array.isArray(raw) ? [...raw] : [raw]);
+    }, ...(ngDevMode ? [{ debugName: "fallbackTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Gets the item templates (field definitions) for the array.
      * Each element can be either:
@@ -15328,17 +16244,12 @@ class ArrayFieldComponent {
      * Returns normalized templates where all items are arrays for consistent handling.
      */
     itemTemplates = computed(() => {
-        const arrayField = this.field();
-        const definitions = arrayField.fields || [];
+        const raw = this.rawItemTemplates();
         const removeButton = this.autoRemoveButton();
-        // Normalize: single FieldDef → [FieldDef], array stays as-is
-        // Append auto-remove button if configured (for primitive simplified arrays)
-        return definitions.map((def) => {
-            const normalized = (Array.isArray(def) ? def : [def]);
-            if (removeButton) {
-                return [...normalized, removeButton];
-            }
-            return normalized;
+        if (!removeButton)
+            return raw;
+        return raw.map((normalized) => {
+            return [...normalized, removeButton];
         });
     }, ...(ngDevMode ? [{ debugName: "itemTemplates" }] : /* istanbul ignore next */ []));
     arrayFieldTrees = computed(() => {
@@ -15364,6 +16275,8 @@ class ArrayFieldComponent {
     // ─────────────────────────────────────────────────────────────────────────────
     resolvedItemsSignal = signal([], ...(ngDevMode ? [{ debugName: "resolvedItemsSignal" }] : /* istanbul ignore next */ []));
     updateVersion = signal(0, ...(ngDevMode ? [{ debugName: "updateVersion" }] : /* istanbul ignore next */ []));
+    pendingInitializationCycle = signal(null, ...(ngDevMode ? [{ debugName: "pendingInitializationCycle" }] : /* istanbul ignore next */ []));
+    settledInitializationCycle = signal(null, ...(ngDevMode ? [{ debugName: "settledInitializationCycle" }] : /* 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.
@@ -15374,6 +16287,7 @@ class ArrayFieldComponent {
     }, ...(ngDevMode ? [{ debugName: "itemPositionMap" }] : /* istanbul ignore next */ []));
     /** Read-only view of resolved items for template consumption. */
     resolvedItems = computed(() => this.resolvedItemsSignal(), ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+    allResolvedFieldsRenderReady = computed(() => this.resolvedItems().every((item) => item.fields.every((field) => field.renderReady())), ...(ngDevMode ? [{ debugName: "allResolvedFieldsRenderReady" }] : /* istanbul ignore next */ []));
     /**
      * Whether the array has reached its configured maxLength.
      * Exposed as a public signal so add-button components can bind [disabled]="atMaxLength()".
@@ -15412,6 +16326,12 @@ class ArrayFieldComponent {
         explicitEffect([this.arrayFieldTrees], ([fieldTrees]) => {
             this.performDifferentialUpdate(fieldTrees);
         });
+        explicitEffect([this.pendingInitializationCycle, this.settledInitializationCycle, this.allResolvedFieldsRenderReady], ([pending, settled, allReady]) => {
+            if (pending !== null && settled === pending && allReady) {
+                emitComponentInitialized(this.eventBus, 'array', this.field().key, this.parentInjector);
+                this.pendingInitializationCycle.set(null);
+            }
+        });
     }
     setupEventHandlers() {
         observeArrayActions(this.eventBus, () => this.key())
@@ -15428,6 +16348,9 @@ class ArrayFieldComponent {
                 }
                 void this.handleAddFromEvent(action.template, action.index);
             }
+            else if (action.action === 'move') {
+                this.moveItem(action.fromIndex, action.toIndex);
+            }
             else {
                 this.removeItem(action.index);
             }
@@ -15442,9 +16365,13 @@ class ArrayFieldComponent {
      * Supports both primitive (single FieldDef) and object (FieldDef[]) templates.
      */
     async handleAddFromEvent(template, index) {
-        // Normalize template to mutable array for consistent handling
+        // Normalize template to mutable array for consistent handling.
+        // A single FieldDef with valueHandling: 'flatten' (container, row) is an object item
+        // whose children should be flattened — NOT a primitive item. Only true leaf fields
+        // (input, checkbox, etc.) are primitive when passed as a single FieldDef.
         const templates = Array.isArray(template) ? [...template] : [template];
-        const isPrimitiveItem = !Array.isArray(template);
+        const isSingleField = !Array.isArray(template);
+        const isPrimitiveItem = isSingleField && getFieldValueHandling(templates[0].type, this.rawFieldRegistry()) !== 'flatten';
         // Track primitive field key for full-API arrays that start empty.
         // Simplified arrays already have this info from normalization metadata.
         if (isPrimitiveItem && templates[0].key && !this.primitiveFieldKey()) {
@@ -15472,14 +16399,14 @@ class ArrayFieldComponent {
             for (const templateField of templates) {
                 const rawValue = getFieldDefaultValue(templateField, this.rawFieldRegistry());
                 const valueHandling = getFieldValueHandling(templateField.type, this.rawFieldRegistry());
-                const isContainer = templateField.type === 'group' || templateField.type === 'row';
+                const isContainer = templateField.type === 'group' || templateField.type === 'row' || templateField.type === 'container';
                 if (isContainer) {
                     if (isGroupField(templateField)) {
                         // Groups wrap their fields under the group key
                         value = { ...value, [templateField.key]: rawValue };
                     }
                     else {
-                        // Rows flatten their fields directly
+                        // Rows and containers flatten their fields directly
                         value = { ...value, ...rawValue };
                     }
                 }
@@ -15544,26 +16471,31 @@ class ArrayFieldComponent {
                 // Clean up template registry when all items are removed
                 this.templateRegistry.clear();
                 this.resolvedItemsSignal.set([]);
+                if (resolvedItems.length === 0 && this.pendingInitializationCycle() === null && this.settledInitializationCycle() === null) {
+                    this.pendingInitializationCycle.set(currentVersion);
+                    this.settledInitializationCycle.set(currentVersion);
+                }
                 break;
             case 'initial':
+                this.pendingInitializationCycle.set(currentVersion);
+                this.settledInitializationCycle.set(null);
                 void this.resolveAllItems(fieldTrees, currentVersion);
                 break;
             case 'append':
                 void this.appendItems(fieldTrees, operation.startIndex, operation.endIndex, currentVersion);
                 break;
             case 'recreate': {
-                // Before clearing, capture templates by position for items beyond defined templates.
-                // This allows dynamically added items to be recreated with their original templates.
-                const itemTemplates = this.itemTemplates();
-                const positionalTemplates = resolvedItems.map((item, idx) => {
-                    // For items within the defined templates range, use the config directly
-                    if (idx < itemTemplates.length) {
-                        return undefined; // Will use itemTemplates[idx] during resolve
-                    }
-                    // For dynamically added items, look up their stored template
+                // Capture templates by item ID so each item is recreated with its original template,
+                // even after move operations that change positions. Registry entries (from dynamic adds
+                // or moves) take priority over positional itemTemplates lookup.
+                const positionalTemplates = resolvedItems.map((item) => {
+                    // Registry entries (from dynamic adds or moves) take priority;
+                    // unmoved initial items return undefined → falls through to itemTemplates[idx] during resolve.
                     return this.templateRegistry.get(item.id);
                 });
                 this.resolvedItemsSignal.set([]);
+                this.pendingInitializationCycle.set(currentVersion);
+                this.settledInitializationCycle.set(null);
                 void this.resolveAllItems(fieldTrees, currentVersion, positionalTemplates);
                 break;
             }
@@ -15580,7 +16512,7 @@ class ArrayFieldComponent {
             return of(undefined);
         })));
         try {
-            const items = await firstValueFrom(forkJoin(safeItemObservables).pipe(map$1((items) => items.filter((item) => item !== undefined))));
+            const items = await firstValueFrom(forkJoin(safeItemObservables).pipe(map((items) => items.filter((item) => item !== undefined))));
             if (updateId === this.updateVersion()) {
                 // Update template registry with new item IDs for dynamically added items
                 if (positionalTemplates) {
@@ -15599,7 +16531,9 @@ class ArrayFieldComponent {
                     });
                 }
                 this.resolvedItemsSignal.set(items);
-                emitComponentInitialized(this.eventBus, 'array', this.field().key, this.parentInjector);
+                if (this.pendingInitializationCycle() === updateId) {
+                    this.settledInitializationCycle.set(updateId);
+                }
             }
         }
         catch (err) {
@@ -15620,7 +16554,7 @@ class ArrayFieldComponent {
             }));
         });
         try {
-            const newItems = await firstValueFrom(forkJoin(safeItemObservables).pipe(map$1((items) => items.filter((item) => item !== undefined))));
+            const newItems = await firstValueFrom(forkJoin(safeItemObservables).pipe(map((items) => items.filter((item) => item !== undefined))));
             if (updateId === this.updateVersion()) {
                 this.resolvedItemsSignal.update((current) => [...current, ...newItems]);
             }
@@ -15635,7 +16569,12 @@ class ArrayFieldComponent {
      * Template resolution order:
      * 1. Use overrideTemplate if provided (from recreate with stored templates)
      * 2. Use itemTemplates[index] if within defined templates range
-     * 3. Return undefined (item cannot be resolved without a template)
+     * 3. Use the simplified-array fallback template (from normalization metadata) for
+     *    untracked items present in the form value (e.g., external `value.set`, parent
+     *    two-way binding, initial values beyond what was declared via simplified `value`).
+     *    Registers the resolved item in templateRegistry so subsequent recreates use
+     *    Priority 1.
+     * 4. Return undefined (item cannot be resolved without a template)
      */
     createResolveItemObservable(index, overrideTemplate) {
         const itemTemplates = this.itemTemplates();
@@ -15673,10 +16612,35 @@ class ArrayFieldComponent {
                 primitiveFieldKey: primitiveKey,
             });
         }
-        // No template available - this shouldn't happen in normal operation.
-        // Dynamically added items should always have their template stored in the registry.
-        this.logger.warn(`No template found for array item at index ${index}. ` +
-            'This may indicate a bug - dynamically added items should have their templates stored.');
+        // Priority 3: Use the metadata fallback template for untracked items in the form value.
+        // Homogeneous only — every fallback item receives the same template regardless of value shape.
+        const fallback = this.fallbackTemplate();
+        if (fallback && fallback.length > 0) {
+            return resolveArrayItem({
+                index,
+                templates: this.withAutoRemove(fallback),
+                arrayField: this.field(),
+                itemPositionMap: this.itemPositionMap,
+                parentFieldSignalContext: this.parentFieldSignalContext,
+                parentInjector: this.parentInjector,
+                registry: this.rawFieldRegistry(),
+                destroyRef: this.destroyRef,
+                loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
+                generateItemId: this.generateItemId,
+                primitiveFieldKey: primitiveKey,
+            }).pipe(tap((item) => {
+                // Register the fallback template against the generated item id so subsequent
+                // recreates hit Priority 1 instead of re-resolving via this branch.
+                if (item)
+                    this.templateRegistry.set(item.id, fallback);
+            }));
+        }
+        // Priority 4: no template available. Full-API arrays are positional by design —
+        // `fields` declares one template per item, so values extending past `fields.length`
+        // (e.g., from external `value.set`, parent two-way binding, or initial values on a
+        // `fields: []` array) have no template to render. Use the simplified array API
+        // (`template` + `value`) when you need homogeneous arrays with value-driven items.
+        this.logger.warn(`No template found for array item at index ${index}. This likely occured for a Full-API array element that was created from the DynamicForm's value being set directly, which is currently not supported. Consider using the simplified array API.`);
         return of(undefined);
     }
     /**
@@ -15701,6 +16665,61 @@ class ArrayFieldComponent {
         this.autoRemoveCache.set(templates, cached);
         return cached;
     }
+    /**
+     * Handles move operations — reorders an existing item without destroying it.
+     * Updates resolvedItems and form value atomically. Since the array length
+     * doesn't change, `determineDifferentialOperation` returns 'none' and no
+     * recreate is triggered. The `@for` loop tracks by `item.id`, so Angular
+     * moves the DOM node instead of destroying/recreating. The `itemPositionMap`
+     * computed auto-recomputes, propagating new indices to child linkedSignals.
+     */
+    moveItem(fromIndex, toIndex) {
+        const arrayKey = this.field().key;
+        const parentForm = this.parentFieldSignalContext.form;
+        const currentValue = parentForm().value();
+        const currentArray = getArrayValue(currentValue, arrayKey);
+        const length = currentArray.length;
+        if (fromIndex < 0 || fromIndex >= length) {
+            this.logger.warn(`moveArrayItem fromIndex ${fromIndex} is out of bounds for array '${arrayKey}' with length ${length}. Operation skipped.`);
+            return;
+        }
+        if (toIndex < 0 || toIndex >= length) {
+            this.logger.warn(`moveArrayItem toIndex ${toIndex} is out of bounds for array '${arrayKey}' with length ${length}. Operation skipped.`);
+            return;
+        }
+        if (fromIndex === toIndex)
+            return;
+        // Register raw (pre-auto-remove) templates for all items whose position will change.
+        // Initial items use itemTemplates[currentIndex] during recreate, but after
+        // a move their position no longer matches their original template. Stashing
+        // the template by item ID lets the recreate path resolve the correct one.
+        // We use rawItemTemplates (without auto-remove button) because the recreate path
+        // calls withAutoRemove() during resolution — storing the synthesized version would
+        // cause duplicate remove buttons.
+        const rawTemplates = this.rawItemTemplates();
+        const currentItems = this.resolvedItemsSignal();
+        const lo = Math.min(fromIndex, toIndex);
+        const hi = Math.max(fromIndex, toIndex);
+        for (let i = lo; i <= hi; i++) {
+            const item = currentItems[i];
+            if (item && !this.templateRegistry.has(item.id) && i < rawTemplates.length) {
+                this.templateRegistry.set(item.id, rawTemplates[i]);
+            }
+        }
+        // Reorder resolvedItems — splice preserves object identity (no destroy/recreate)
+        this.resolvedItemsSignal.update((current) => {
+            const newItems = [...current];
+            const [moved] = newItems.splice(fromIndex, 1);
+            newItems.splice(toIndex, 0, moved);
+            return newItems;
+        });
+        // Reorder form value array the same way
+        const newArray = [...currentArray];
+        const [movedValue] = newArray.splice(fromIndex, 1);
+        newArray.splice(toIndex, 0, movedValue);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        parentForm().value.set({ ...currentValue, [arrayKey]: newArray });
+    }
     /**
      * Handles remove operations from events (pop, shift, removeAt).
      * Updates resolvedItems FIRST, then form value - this ensures differential
@@ -15751,8 +16770,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.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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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
@@ -15767,17 +16786,15 @@ class ArrayFieldComponent {
         [attr.data-array-item-index]="i"
       >
         @for (field of item.fields; track $index) {
-          <ng-container
-            *ngComponentOutlet="field.component; injector: field.injector; environmentInjector: environmentInjector; inputs: field.inputs()"
-          />
+          <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
         }
       </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 });
+  `, 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: DfFieldOutlet, selector: "[dfFieldOutlet]", inputs: ["dfFieldOutlet", "dfFieldOutletEnvironmentInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ArrayFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ArrayFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'array-field', imports: [NgComponentOutlet], template: `
+            args: [{ selector: 'array-field', imports: [DfFieldOutlet], template: `
     @for (item of resolvedItems(); track item.id; let i = $index) {
       <div
         class="df-array-item"
@@ -15787,9 +16804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
         [attr.data-array-item-index]="i"
       >
         @for (field of item.fields; track $index) {
-          <ng-container
-            *ngComponentOutlet="field.component; injector: field.injector; environmentInjector: environmentInjector; inputs: field.inputs()"
-          />
+          <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
         }
       </div>
     }
@@ -15814,12 +16829,95 @@ var arrayField_component = /*#__PURE__*/Object.freeze({
 });
 
 /**
- * Get the length of an array FieldTree.
+ * Layout container that wraps child fields with UI chrome.
+ *
+ * Resolves children like a row, then chains wrapper components around them
+ * using imperative `ViewContainerRef.createComponent()` — each wrapper's
+ * `#fieldComponent` slot hosts the next wrapper or the children template.
+ *
+ * Does not create a new form context - fields share the parent's context.
+ * Field values are flattened into the parent form (no nesting under container key).
+ * Purely a visual/layout container with no impact on form structure.
  */
-function getArrayLength(arrayFieldTree) {
-    const value = arrayFieldTree().value();
-    return Array.isArray(value) ? value.length : 0;
+class ContainerFieldComponent {
+    destroyRef = inject(DestroyRef);
+    fieldRegistry = injectFieldRegistry();
+    injector = inject(Injector);
+    environmentInjector = inject(EnvironmentInjector);
+    eventBus = inject(EventBus);
+    logger = inject(DynamicFormLogger);
+    wrapperAutoAssociations = inject(WRAPPER_AUTO_ASSOCIATIONS);
+    defaultWrappersSignal = inject(DEFAULT_WRAPPERS, { optional: true });
+    childrenTpl = viewChild.required('childrenTpl', { read: TemplateRef });
+    wrapperContainer = viewChild.required('wrapperContainer', { read: ViewContainerRef });
+    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 */ []));
+    hostClasses = computed(() => computeContainerHostClasses('container', 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 */ []));
+    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(),
+        injector: this.injector,
+        destroyRef: this.destroyRef,
+        onError: (fieldDef, error) => {
+            const fieldKey = fieldDef.key || '<no key>';
+            const containerKey = this.field().key || '<no key>';
+            this.logger.error(`Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}) ` +
+                `within container '${containerKey}'. Ensure the field type is registered in your field registry.`, error);
+        },
+    })), { initialValue: [], injector: this.injector });
+    wrappers = computed(() => resolveWrappers(this.field(), this.defaultWrappersSignal?.(), this.wrapperAutoAssociations), { ...(ngDevMode ? { debugName: "wrappers" } : /* istanbul ignore next */ {}), equal: isSameWrapperChain });
+    constructor() {
+        // `row` is a virtual field type backed by ContainerFieldComponent — at
+        // runtime the spread in rowFieldMapper preserves `type: 'row'` on the
+        // field input, even though the declared type is `ContainerField`. Widen
+        // here so `(events)` consumers filtering by `componentType === 'row'`
+        // keep receiving emissions.
+        setupContainerInitEffect(this.resolvedFields, this.eventBus, () => (this.field().type === 'row' ? 'row' : 'container'), () => this.field().key, this.injector);
+        createWrapperChainController({
+            vcr: this.wrapperContainer,
+            wrappers: this.wrappers,
+            renderInnermost: (slot) => slot.createEmbeddedView(this.childrenTpl()),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ContainerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ContainerFieldComponent, isStandalone: true, selector: "div[container-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()" } }, viewQueries: [{ propertyName: "childrenTpl", first: true, predicate: ["childrenTpl"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "wrapperContainer", first: true, predicate: ["wrapperContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+    <ng-template #childrenTpl>
+      @for (field of resolvedFields(); track field.key) {
+        <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+      }
+    </ng-template>
+    <ng-container #wrapperContainer></ng-container>
+  `, isInline: true, styles: [":host{display:block;width:100%}:host.df-container-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: DfFieldOutlet, selector: "[dfFieldOutlet]", inputs: ["dfFieldOutlet", "dfFieldOutletEnvironmentInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ContainerFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[container-field]', imports: [DfFieldOutlet], template: `
+    <ng-template #childrenTpl>
+      @for (field of resolvedFields(); track field.key) {
+        <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+      }
+    </ng-template>
+    <ng-container #wrapperContainer></ng-container>
+  `, host: {
+                        '[class]': 'hostClasses()',
+                        '[class.disabled]': 'disabled()',
+                        '[class.df-container-hidden]': 'hidden()',
+                        '[attr.aria-hidden]': 'hidden() || null',
+                        '[id]': '`${key()}`',
+                        '[attr.data-testid]': 'key()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host.df-container-hidden{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { childrenTpl: [{ type: i0.ViewChild, args: ['childrenTpl', { ...{ read: TemplateRef }, isSignal: true }] }], wrapperContainer: [{ type: i0.ViewChild, args: ['wrapperContainer', { ...{ read: ViewContainerRef }, isSignal: true }] }], 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 containerField_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ContainerFieldComponent: ContainerFieldComponent,
+    default: ContainerFieldComponent
+});
 
 /**
  * Interpolates {{param}} placeholders in message with error values
@@ -15952,5 +17050,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, 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
+export { evaluateNonFieldDisabled 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, PreviousPageEvent as H, INITIALIZATION_TIMEOUT_MS as I, RootFormRegistryService as J, SubmitEvent as K, applyMetaToElement as L, MoveArrayItemEvent as M, NextPageEvent as N, applyValidator as O, PageChangeEvent as P, applyValidators as Q, RemoveAtIndexEvent as R, ShiftArrayItemEvent as S, arrayEvent as T, arrayFieldMapper as U, baseFieldMapper as V, WRAPPER_REGISTRY as W, buildBaseInputs as X, containerFieldMapper as Y, createField as Z, createWrappers as _, createFieldResolutionPipe as a, evaluateNonFieldHidden as a0, field as a1, formConfig as a2, getArrayLength as a3, groupFieldMapper as a4, hasFormValue as a5, interpolateParams as a6, isArrayField as a7, isCheckedField as a8, isContainerField as a9, withPreviousValue as aA, withValueExclusionDefaults as aB, wrapperProps as aC, isContainerTypedField as aa, isDisplayOnlyField as ab, isEqual as ac, isFormStateCondition as ad, isGroupField as ae, isLeafField as af, isPageField as ag, isRowField as ah, isSimplifiedArrayField as ai, isValueBearingField as aj, isValueField as ak, isWrapperTypeDefinition as al, isWrappersBundle as am, omit as an, pageFieldMapper as ao, provideDynamicForm as ap, resolveNextButtonDisabled as aq, resolveNonFieldDisabled as ar, resolveNonFieldHidden as as, resolveSubmitButtonDisabled as at, resolveTokens as au, rowFieldMapper as av, textFieldMapper as aw, toReadonlyFieldTree as ax, withEventFormValue as ay, withLoggerConfig as az, DfFieldOutlet as b, computeContainerHostClasses as c, derivedFromDeferred as d, DynamicTextPipe as e, dynamicTextToObservable as f, AppendArrayItemEvent as g, ArrayFieldComponent as h, injectFieldRegistry as i, ContainerFieldComponent as j, DEFAULT_PROPS as k, DEFAULT_VALIDATION_MESSAGES as l, DEFAULT_WRAPPERS as m, DynamicForm as n, DynamicFormError as o, EventDispatcher as p, FIELD_SIGNAL_CONTEXT as q, FORM_OPTIONS as r, setupContainerInitEffect as s, FormClearEvent as t, FormResetEvent as u, validatePageNesting as v, InsertArrayItemEvent as w, NoopLogger as x, PopArrayItemEvent as y, PrependArrayItemEvent as z };
+//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-BwoONrnj.mjs.map