@ng-forge/dynamic-forms 1.2.0-next.7 → 1.2.0-next.8

package/fesm2022/{ng-forge-dynamic-forms-ng-forge-dynamic-forms-DCX7tvaB.mjs → ng-forge-dynamic-forms-ng-forge-dynamic-forms-tA8ZkP8i.mjs}

@@ -1,13 +1,132 @@
 import * as i0 from '@angular/core';
-import { reflectComponentType, Injector, inject, EnvironmentInjector, DestroyRef, computed, signal, afterNextRender, input, ViewContainerRef, Directive, InjectionToken, Injectable, isSignal, runInInjectionContext, untracked, linkedSignal, injectAsync, resource, ChangeDetectionStrategy, Component, PendingTasks, ElementRef, PLATFORM_ID, isDevMode, TemplateRef, model, contentChildren, makeEnvironmentProviders } from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, DestroyRef, Injectable, reflectComponentType, Injector, EnvironmentInjector, computed, signal, afterNextRender, input, ViewContainerRef, Directive, isSignal, runInInjectionContext, untracked, linkedSignal, injectAsync, resource, ChangeDetectionStrategy, Component, PendingTasks, ElementRef, isDevMode, TemplateRef, model, contentChildren, makeEnvironmentProviders } from '@angular/core';
 import { explicitEffect } from 'ngxtension/explicit-effect';
-import { DynamicFormLogger, WRAPPER_COMPONENT_CACHE, WRAPPER_REGISTRY, toReadonlyFieldTreeCached, writeToFieldValue, ComponentInitializedEvent, isPageField, isGroupField, isArrayField, isRowField, isGenericContainerField, hasChildFields, normalizeFieldsArray, WRAPPER_AUTO_ASSOCIATIONS, DEFAULT_WRAPPERS, READONLY_FIELD_TREE_CACHE, EventBus, getGridClassString, GROUP_CONTEXT, isContainerField, isSimplifiedArrayField, DynamicFormError, getFieldValueHandling, keyBy, mapValues, isEqual, isDerivationLogicConfig, hasTargetProperty, ARRAY_CONTEXT, FORM_ID_PREFIX, baseFieldMapper, detectFormMode, validatePageNesting, FIELD_REGISTRY, assertNever, FunctionRegistryService, ADDON_TYPE_REGISTRY, deepMergeDefaults, FIELD_SIGNAL_CONTEXT, derivedFromDeferred, FieldContextRegistryService, FORM_OPTIONS, evaluateCondition, createWarningTracker, RootFormRegistryService, DEFAULT_PROPS, DEFAULT_VALIDATION_MESSAGES, EXTERNAL_DATA, DEPRECATION_WARNING_TRACKER, createAddonActionRegistry, ADDON_ACTION_REGISTRY, HttpConditionCache, HTTP_CONDITION_CACHE, HttpConditionFunctionCacheService, AsyncConditionFunctionCacheService, DynamicValueFunctionCacheService, LogicFunctionCacheService, DF_FIELD_TEMPLATES, rowFieldMapper, groupFieldMapper, arrayFieldMapper, pageFieldMapper, textFieldMapper, containerFieldMapper, isWrapperTypeDefinition, ADDON_TYPE_COMPONENT_CACHE, ADDON_TYPE_DEFINITIONS, createDefaultDerivationLogConfig, NoopLogger, EMIT_FORM_VALUE_ON_EVENTS, DynamicTextPipe, ADDON_ACTION_HANDLERS } from '@ng-forge/dynamic-forms/internal';
+import { derivedFrom } from 'ngxtension/derived-from';
+import { of, Observable, distinctUntilChanged, forkJoin, from, catchError, map, switchMap, pipe, isObservable, firstValueFrom, exhaustMap, EMPTY, scan, Subject, concatMap, filter, take, shareReplay } from 'rxjs';
+import { DynamicFormLogger, WRAPPER_COMPONENT_LOAD_CACHE, WRAPPER_COMPONENT_CACHE, WRAPPER_REGISTRY, toReadonlyFieldTreeCached, writeToFieldValue, ComponentInitializedEvent, isPageField, isGroupField, isArrayField, isRowField, isGenericContainerField, hasChildFields, normalizeFieldsArray, WRAPPER_AUTO_ASSOCIATIONS, DEFAULT_WRAPPERS, READONLY_FIELD_TREE_CACHE, EventBus, getGridClassString, FORM_OPTIONS, GROUP_CONTEXT, FIELD_REGISTRY, DynamicFormError, isContainerField, isSimplifiedArrayField, getFieldValueHandling, keyBy, mapValues, isEqual, isDerivationLogicConfig, hasTargetProperty, ARRAY_CONTEXT, FORM_ID_PREFIX, baseFieldMapper, detectFormMode, validatePageNesting, assertNever, FunctionRegistryService, ADDON_TYPE_REGISTRY, deepMergeDefaults, FIELD_SIGNAL_CONTEXT, derivedFromDeferred, FieldContextRegistryService, evaluateCondition, createWarningTracker, RootFormRegistryService, DEFAULT_PROPS, DEFAULT_VALIDATION_MESSAGES, EXTERNAL_DATA, DEPRECATION_WARNING_TRACKER, createAddonActionRegistry, ADDON_ACTION_REGISTRY, HttpConditionCache, HTTP_CONDITION_CACHE, HttpConditionFunctionCacheService, AsyncConditionFunctionCacheService, DynamicValueFunctionCacheService, LogicFunctionCacheService, DF_FIELD_TEMPLATES, rowFieldMapper, groupFieldMapper, arrayFieldMapper, pageFieldMapper, textFieldMapper, containerFieldMapper, isWrapperTypeDefinition, ADDON_TYPE_COMPONENT_CACHE, ADDON_TYPE_DEFINITIONS, createDefaultDerivationLogConfig, NoopLogger, EMIT_FORM_VALUE_ON_EVENTS, DynamicTextPipe, ADDON_ACTION_HANDLERS } from '@ng-forge/dynamic-forms/internal';
+import { isPlatformBrowser, AsyncPipe, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import { takeUntilDestroyed, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
-import { of, forkJoin, from, catchError, map, switchMap, isObservable, firstValueFrom, exhaustMap, EMPTY, pipe, scan, Observable, Subject, concatMap, filter, take, shareReplay } from 'rxjs';
 import { submit, form, provideSignalFormsConfig } from '@angular/forms/signals';
-import { isPlatformBrowser, AsyncPipe, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import { NG_STATUS_CLASSES } from '@angular/forms/signals/compat';
 
+const FIELD_WINDOWING = new InjectionToken('FIELD_WINDOWING', {
+    providedIn: 'root',
+    factory: () => ({ enabled: false, eager: 12, placeholderHeight: '4rem', park: { enabled: false, margin: '100%' } }),
+});
+
+function clampWindowSize(value, fallback) {
+    if (value === undefined || !Number.isFinite(value))
+        return fallback;
+    return Math.max(0, Math.floor(value));
+}
+
+const DEFAULT_MARGIN = '100%';
+const ROOT_MARGIN_PART = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?(?:px|%)$/i;
+function normalizeFieldParkingMargin(value, fallback = DEFAULT_MARGIN) {
+    const normalizedFallback = isValidRootMargin(fallback) ? fallback.trim() : DEFAULT_MARGIN;
+    if (!value || !isValidRootMargin(value))
+        return normalizedFallback;
+    return value.trim().split(/\s+/).join(' ');
+}
+function isValidRootMargin(value) {
+    const parts = value.trim().split(/\s+/);
+    return parts.length >= 1 && parts.length <= 4 && parts.every((part) => ROOT_MARGIN_PART.test(part));
+}
+
+function resolveFieldWindowing(global, perForm) {
+    if (perForm === undefined) {
+        return global;
+    }
+    if (typeof perForm === 'boolean') {
+        return { ...global, enabled: perForm };
+    }
+    const configuresMounting = 'eager' in perForm || 'placeholderHeight' in perForm || Object.keys(perForm).length === 0;
+    return {
+        enabled: configuresMounting ? true : global.enabled,
+        eager: clampWindowSize(perForm.eager, global.eager),
+        placeholderHeight: perForm.placeholderHeight ?? global.placeholderHeight,
+        park: resolveFieldParking(global.park, perForm.park),
+    };
+}
+function resolveFieldParking(global, perForm) {
+    if (perForm === undefined)
+        return global;
+    if (typeof perForm === 'boolean')
+        return { ...global, enabled: perForm };
+    return { enabled: true, margin: normalizeFieldParkingMargin(perForm.margin, global.margin) };
+}
+
+const ALWAYS_VISIBLE = of(true);
+class FieldViewportObserver {
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID)) && typeof IntersectionObserver !== 'undefined';
+    observers = new Map();
+    constructor() {
+        inject(DestroyRef).onDestroy(() => {
+            for (const { observer } of this.observers.values())
+                observer.disconnect();
+            this.observers.clear();
+        });
+    }
+    observe(el, rootMargin) {
+        if (!this.isBrowser)
+            return ALWAYS_VISIBLE;
+        rootMargin = normalizeFieldParkingMargin(rootMargin);
+        return new Observable((subscriber) => {
+            const listener = (visible) => subscriber.next(visible);
+            this.startObserving(el, rootMargin, listener);
+                        subscriber.next(true);
+            return () => this.stopObserving(el, rootMargin, listener);
+        }).pipe(distinctUntilChanged());
+    }
+    startObserving(el, rootMargin, listener) {
+        const entry = this.observerFor(rootMargin);
+        const listeners = entry.listeners.get(el);
+        if (listeners) {
+            listeners.add(listener);
+            return;
+        }
+        entry.listeners.set(el, new Set([listener]));
+        entry.observer.observe(el);
+    }
+    stopObserving(el, rootMargin, listener) {
+        const entry = this.observers.get(rootMargin);
+        if (!entry)
+            return;
+        const listeners = entry.listeners.get(el);
+        if (!listeners)
+            return;
+        listeners.delete(listener);
+        if (listeners.size > 0)
+            return;
+        entry.observer.unobserve(el);
+        entry.listeners.delete(el);
+        if (entry.listeners.size > 0)
+            return;
+        entry.observer.disconnect();
+        this.observers.delete(rootMargin);
+    }
+    observerFor(rootMargin) {
+        const existing = this.observers.get(rootMargin);
+        if (existing)
+            return existing;
+        const listeners = new Map();
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                for (const listener of listeners.get(entry.target) ?? [])
+                    listener(entry.isIntersecting);
+            }
+        }, { rootMargin });
+        const entry = { observer, listeners };
+        this.observers.set(rootMargin, entry);
+        return entry;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldViewportObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldViewportObserver });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldViewportObserver, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 const EMPTY_WRAPPERS = Object.freeze([]);
 const FIELD_ERRORS_WRAPPER = 'field-errors';
 const FIELD_ERRORS_CONFIG = Object.freeze({ type: FIELD_ERRORS_WRAPPER });
@@ -67,22 +186,29 @@ function hasDefaultExport(value) {
 function resolveDefaultExport(result) {
     return hasDefaultExport(result) ? result.default : result;
 }
-async function loadWrapperComponent(type, registry, cache) {
+async function loadWrapperComponent(type, registry, cache, loadCache) {
     const cached = cache.get(type);
     if (cached)
         return cached;
+    const pending = loadCache?.get(type);
+    if (pending)
+        return pending;
     const definition = registry.get(type);
     if (!definition)
         return undefined;
-    const component = resolveDefaultExport(await definition.loadComponent());
-    if (component)
-        cache.set(type, component);
-    return component;
-}
-function loadWrapperComponents(configs, registry, cache, logger) {
+    const load = (async () => {
+        const component = resolveDefaultExport(await definition.loadComponent());
+        if (component)
+            cache.set(type, component);
+        return component;
+    })().finally(() => loadCache?.delete(type));
+    loadCache?.set(type, load);
+    return load;
+}
+function loadWrapperComponents(configs, registry, cache, logger, loadCache) {
     if (configs.length === 0)
         return of([]);
-    return forkJoin(configs.map((config) => from(loadWrapperComponent(config.type, registry, cache)).pipe(catchError(() => of(undefined)), map((component) => {
+    return forkJoin(configs.map((config) => from(loadWrapperComponent(config.type, registry, cache, loadCache)).pipe(catchError(() => of(undefined)), map((component) => {
         if (!component) {
                         if (DEV_MODE) {
                 logger.error(`Wrapper type '${config.type}' could not be loaded. Ensure it is registered via provideDynamicForm().`);
@@ -199,6 +325,7 @@ function injectChainDeps() {
     return {
         registry: inject(WRAPPER_REGISTRY),
         cache: inject(WRAPPER_COMPONENT_CACHE),
+        loadCache: inject(WRAPPER_COMPONENT_LOAD_CACHE),
         logger: inject(DynamicFormLogger),
         destroyRef: inject(DestroyRef),
         environmentInjector: inject(EnvironmentInjector),
@@ -222,7 +349,7 @@ function resolveLoadedWrappers(state, deps) {
                         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 })));
+    return loadWrapperComponents(state.wrappers, deps.registry, deps.cache, deps.logger, deps.loadCache).pipe(map((loaded) => ({ state, loaded })));
 }
 function applyEmission({ state, loaded }, ctx) {
     const { opts, deps, mounted, refs } = ctx;
@@ -300,14 +427,19 @@ class FieldComponentSlot {
     state = signal(EMPTY_STATE, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
         lastInputs = null;
+        _parked = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_parked" }] : /* istanbul ignore next */ []));
         phase = () => this.state().phase;
         snapshot = () => this.state();
+        parked = this._parked.asReadonly();
         mountOrReuse(slot, component, fieldInjector, environmentInjector, rawInputs, fieldInputs) {
         const current = this.state();
         if (current.phase !== 'empty' && current.ref.componentType === component) {
             slot.insert(current.ref.hostView);
             this.lastInputs = null;
             this.state.set(Object.freeze({ phase: 'mounted', ref: current.ref, slot }));
+                                    if (this._parked())
+                current.ref.changeDetectorRef.detach();
             this.pushInputs(rawInputs, fieldInputs);
             if (current.phase === 'detached')
                 this.replayFocus(current.focusSnapshot);
@@ -316,6 +448,7 @@ class FieldComponentSlot {
                                         if (current.phase !== 'empty')
             current.ref.destroy();
         this.lastInputs = null;
+                        this._parked.set(false);
         this.state.set(EMPTY_STATE);
         const ref = slot.createComponent(component, {
             environmentInjector,
@@ -352,12 +485,34 @@ class FieldComponentSlot {
         this.lastInputs = null;
         this.state.set(Object.freeze({ phase: 'detached', ref: current.ref, focusSnapshot }));
                         return idx < 0;
+    }
+        park() {
+        const current = this.state();
+        if (current.phase === 'empty' || this._parked())
+            return;
+        current.ref.changeDetectorRef.detach();
+        this._parked.set(true);
+    }
+        refresh() {
+        const current = this.state();
+        if (current.phase === 'empty' || !this._parked())
+            return;
+        current.ref.changeDetectorRef.detectChanges();
+    }
+        unpark() {
+        const current = this.state();
+        if (current.phase === 'empty' || !this._parked())
+            return;
+        current.ref.changeDetectorRef.reattach();
+        current.ref.changeDetectorRef.markForCheck();
+        this._parked.set(false);
     }
         destroyOnTeardown() {
         const current = this.state();
         if (current.phase === 'detached')
             current.ref.destroy();
         this.lastInputs = null;
+        this._parked.set(false);
         this.state.set(EMPTY_STATE);
     }
     captureFocus(ref) {
@@ -450,6 +605,32 @@ function setupContainerInitEffect(resolvedFields, eventBus, componentType, field
     });
 }
 
+const EMPTY_ERRORS = Object.freeze([]);
+function snapshotParkedDomState(fieldTree) {
+    const state = fieldTree?.();
+    if (!state)
+        return null;
+    return {
+        disabled: state.disabled?.() ?? false,
+        readonly: state.readonly?.() ?? false,
+        required: state.required?.() ?? false,
+        touched: state.touched?.() ?? false,
+        dirty: state.dirty?.() ?? false,
+        errors: state.errors?.() ?? EMPTY_ERRORS,
+    };
+}
+function isSameParkedDomState(a, b) {
+    return (a === b ||
+        (a !== null &&
+            b !== null &&
+            a.disabled === b.disabled &&
+            a.readonly === b.readonly &&
+            a.required === b.required &&
+            a.touched === b.touched &&
+            a.dirty === b.dirty &&
+            a.errors === b.errors));
+}
+
 class DfFieldOutlet {
             dfFieldOutlet = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dfFieldOutlet" }] : /* istanbul ignore next */ []));
@@ -464,7 +645,7 @@ class DfFieldOutlet {
     readonlyFieldCache = inject(READONLY_FIELD_TREE_CACHE);
     eventBus = inject(EventBus, { optional: true });
     injector = inject(Injector);
-        fieldComponent = new FieldComponentSlot();
+    fieldComponent = new FieldComponentSlot();
     componentIdentity = computed(() => this.dfFieldOutlet().component, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "componentIdentity" }] : /* istanbul ignore next */ []));
         renderReady = computed(() => this.dfFieldOutlet().renderReady() && !this.dfFieldOutlet().hidden(), /* @ts-ignore */
@@ -477,12 +658,35 @@ class DfFieldOutlet {
         fieldInputs = computed(() => buildFieldInputs(this.rawInputs(), this.readonlyFieldCache, this.dfFieldOutlet().fieldDef.type, this.dfFieldOutlet().fieldDef.validationMessages), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
     defaultEnvInjector = inject(EnvironmentInjector);
-        fieldEnvInjector = computed(() => this.dfFieldOutletEnvironmentInjector() ?? this.defaultEnvInjector, /* @ts-ignore */
+    fieldEnvInjector = computed(() => this.dfFieldOutletEnvironmentInjector() ?? this.defaultEnvInjector, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fieldEnvInjector" }] : /* istanbul ignore next */ []));
-        fieldInjector = computed(() => this.dfFieldOutlet().injector, /* @ts-ignore */
+    fieldInjector = computed(() => this.dfFieldOutlet().injector, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fieldInjector" }] : /* istanbul ignore next */ []));
         outermostHostClasses = computed(() => getGridClassString(this.dfFieldOutlet().fieldDef) || undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "outermostHostClasses" }] : /* istanbul ignore next */ []));
+    formOptions = inject(FORM_OPTIONS, { optional: true });
+    globalFieldWindowing = inject(FIELD_WINDOWING);
+    viewportObserver = inject(FieldViewportObserver, { optional: true });
+    parking = computed(() => resolveFieldWindowing(this.globalFieldWindowing, this.formOptions?.()?.fieldWindowing).park, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parking" }] : /* istanbul ignore next */ []));
+        observedElement = computed(() => {
+        const state = this.fieldComponent.snapshot();
+        return state.phase === 'empty' ? null : state.ref.location.nativeElement;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "observedElement" }] : /* istanbul ignore next */ []));
+    visibility = derivedFrom([this.observedElement, this.parking], pipe(switchMap(([element, parking]) => {
+        const observer = this.viewportObserver;
+        return parking.enabled && element && observer ? observer.observe(element, parking.margin) : of(true);
+    })), { initialValue: true });
+    focusEpoch = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusEpoch" }] : /* istanbul ignore next */ []));
+    parked = computed(() => this.parking().enabled && !this.visibility(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parked" }] : /* istanbul ignore next */ []));
+    fieldTree = computed(() => {
+        const candidate = this.rawInputs()['field'];
+        return typeof candidate === 'function' ? candidate : undefined;
+    }, { ...(ngDevMode ? { debugName: "fieldTree" } : /* istanbul ignore next */ {}), equal: Object.is });
+        parkedDomState = computed(() => (this.parked() ? snapshotParkedDomState(this.fieldTree()) : null), { ...(ngDevMode ? { debugName: "parkedDomState" } : /* istanbul ignore next */ {}), equal: isSameParkedDomState });
     constructor() {
         createWrapperChainController({
             vcr: this.vcr,
@@ -498,8 +702,8 @@ class DfFieldOutlet {
                 this.fieldComponent.mountOrReuse(slot, resolved.component, resolved.injector, this.fieldEnvInjector(), this.rawInputs(), this.fieldInputs());
             },
         });
-                                        explicitEffect([this.rawInputs, this.fieldInputs], ([rawInputs, fieldInputs]) => this.fieldComponent.pushInputs(rawInputs, fieldInputs));
-                                explicitEffect([this.hidden], ([hidden]) => {
+                explicitEffect([this.rawInputs, this.fieldInputs], ([rawInputs, fieldInputs]) => this.fieldComponent.pushInputs(rawInputs, fieldInputs));
+                explicitEffect([this.hidden], ([hidden]) => {
             if (!hidden || !this.eventBus)
                 return;
             const resolved = this.dfFieldOutlet();
@@ -507,8 +711,41 @@ class DfFieldOutlet {
             for (const { type, path } of collectInitializingContainers([resolved.fieldDef], groupContext?.groupPath())) {
                 emitComponentInitialized(this.eventBus, type, path, this.injector);
             }
+        });
+                explicitEffect([this.observedElement, this.parking], ([element, parking], onCleanup) => {
+            if (!parking.enabled || !element)
+                return;
+                        const bumpEpoch = () => queueMicrotask(() => {
+                if (!this.destroyRef.destroyed)
+                    this.focusEpoch.update((n) => n + 1);
+            });
+            element.addEventListener('focusin', bumpEpoch);
+            element.addEventListener('focusout', bumpEpoch);
+            onCleanup(() => {
+                element.removeEventListener('focusin', bumpEpoch);
+                element.removeEventListener('focusout', bumpEpoch);
+            });
+        });
+                explicitEffect([this.parked, this.focusEpoch, this.parkedDomState], ([parked, , domState]) => {
+            if (parked && this.canPark(domState)) {
+                const alreadyParked = this.fieldComponent.parked();
+                this.fieldComponent.park();
+                if (alreadyParked)
+                    this.fieldComponent.refresh();
+            }
+            else {
+                this.fieldComponent.unpark();
+            }
         });
         this.destroyRef.onDestroy(() => this.fieldComponent.destroyOnTeardown());
+    }
+        canPark(domState) {
+        const element = this.observedElement();
+        if (!element)
+            return false;
+        if (element.contains(document.activeElement))
+            return false;
+        return (domState?.errors.length ?? 0) === 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DfFieldOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", 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 });
@@ -554,51 +791,77 @@ class FormSubmitEvent {
     type = 'submit';
 }
 
-class PageChangeEvent {
-    currentPageIndex;
-    totalPages;
-    previousPageIndex;
-    type = 'page-change';
-    constructor(
-        currentPageIndex, 
-        totalPages, 
-        previousPageIndex) {
-        this.currentPageIndex = currentPageIndex;
-        this.totalPages = totalPages;
-        this.previousPageIndex = previousPageIndex;
-    }
-}
-
-class PagerStateEvent {
-    state;
-    type = 'pager-state';
-    constructor(state) {
-        this.state = state;
-    }
-}
-
-const PAGE_PRELOAD_WINDOW = new InjectionToken('PAGE_PRELOAD_WINDOW', {
+const COMPONENT_CACHE = new InjectionToken('COMPONENT_CACHE', {
     providedIn: 'root',
-    factory: () => 1,
+    factory: () => new Map(),
 });
-
-function clampWindowSize(value, fallback) {
-    if (value === undefined || !Number.isFinite(value))
-        return fallback;
-    return Math.max(0, Math.floor(value));
-}
-
-function collectLeafFieldKeys(fields) {
-    const keys = [];
-    for (const field of fields) {
-        if (isRowField(field) || isGenericContainerField(field)) {
-            keys.push(...collectLeafFieldKeys(field.fields));
-        }
-        else if (field.key) {
-            keys.push(field.key);
-        }
-    }
-    return keys;
+const COMPONENT_LOAD_CACHE = new InjectionToken('COMPONENT_LOAD_CACHE', {
+    providedIn: 'root',
+    factory: () => new Map(),
+});
+function injectFieldRegistry() {
+    const registry = inject(FIELD_REGISTRY);
+    const componentCache = inject(COMPONENT_CACHE);
+    const componentLoadCache = inject(COMPONENT_LOAD_CACHE);
+    return {
+                getType(name) {
+            return registry.get(name);
+        },
+                hasType(name) {
+            return registry.has(name);
+        },
+                async loadTypeComponent(name) {
+            const fieldType = registry.get(name);
+            if (!fieldType) {
+                throw new DynamicFormError(`Field type "${name}" is not registered`);
+            }
+                        if (!fieldType.loadComponent) {
+                return undefined;
+            }
+                        const cached = componentCache.get(name);
+            if (cached) {
+                return cached;
+            }
+            const pending = componentLoadCache.get(name);
+            if (pending) {
+                return pending;
+            }
+            try {
+                const load = fieldType
+                    .loadComponent()
+                    .then(resolveDefaultExport)
+                    .then((component) => {
+                    if (component) {
+                        componentCache.set(name, component);
+                    }
+                    return component;
+                })
+                    .catch((error) => {
+                    throw new DynamicFormError(`Failed to load component for field type "${name}": ${error}`);
+                })
+                    .finally(() => componentLoadCache.delete(name));
+                componentLoadCache.set(name, load);
+                return load;
+            }
+            catch (error) {
+                throw new DynamicFormError(`Failed to load component for field type "${name}": ${error}`);
+            }
+        },
+                getLoadedComponent(name) {
+            return componentCache.get(name);
+        },
+                getTypes() {
+            return Array.from(registry.values());
+        },
+                registerTypes(types) {
+            types.forEach((type) => {
+                registry.set(type.name, type);
+            });
+        },
+                get raw() {
+            return registry;
+        },
+    };
 }
 
 const NORMALIZED_ARRAY_METADATA = Symbol('normalizedArrayMetadata');
@@ -748,6 +1011,128 @@ function buildRemoveButton(config) {
     };
 }
 
+function collectFieldDefs(fields, out = []) {
+    for (const field of fields ?? []) {
+        out.push(field);
+        const children = field.fields;
+        if (Array.isArray(children)) {
+                        for (const child of children) {
+                if (Array.isArray(child))
+                    collectFieldDefs(child, out);
+                else
+                    collectFieldDefs([child], out);
+            }
+        }
+        const metadata = getNormalizedArrayMetadata(field);
+        const template = metadata?.template;
+        if (Array.isArray(template))
+            collectFieldDefs(template, out);
+        else if (template)
+            collectFieldDefs([template], out);
+        if (metadata?.autoRemoveButton)
+            collectFieldDefs([metadata.autoRemoveButton], out);
+    }
+    return out;
+}
+function injectFormComponentPreloader() {
+    const fieldRegistry = injectFieldRegistry();
+    const wrapperRegistry = inject(WRAPPER_REGISTRY);
+    const wrapperCache = inject(WRAPPER_COMPONENT_CACHE);
+    const wrapperLoadCache = inject(WRAPPER_COMPONENT_LOAD_CACHE);
+    const autoAssociations = inject(WRAPPER_AUTO_ASSOCIATIONS);
+    const defaultWrappers = inject(DEFAULT_WRAPPERS, { optional: true });
+    const preloadedConfigs = new WeakSet();
+    const preloadedFieldRoots = new WeakSet();
+    const preloadFields = (fields) => {
+        const unseenFields = fields.filter((field) => {
+            if (preloadedFieldRoots.has(field))
+                return false;
+            preloadedFieldRoots.add(field);
+            return true;
+        });
+        if (unseenFields.length === 0)
+            return;
+        const normalizedFields = normalizeSimplifiedArrays(unseenFields);
+        const defs = collectFieldDefs(normalizedFields);
+        if (defs.length === 0)
+            return;
+        const fieldTypes = new Set();
+        const wrapperTypes = new Set();
+        for (const def of defs) {
+            if (def.type)
+                fieldTypes.add(def.type);
+                                                for (const wrapper of resolveWrappers(def, defaultWrappers?.(), autoAssociations, wrapperRegistry)) {
+                wrapperTypes.add(wrapper.type);
+            }
+        }
+        const started = [];
+        for (const type of fieldTypes) {
+            if (fieldRegistry.getLoadedComponent(type))
+                continue;
+            started.push(Promise.resolve(fieldRegistry.loadTypeComponent(type)).catch(() => undefined));
+        }
+        for (const type of wrapperTypes) {
+            if (wrapperCache.has(type))
+                continue;
+            started.push(loadWrapperComponent(type, wrapperRegistry, wrapperCache, wrapperLoadCache).catch(() => undefined));
+        }
+                void Promise.allSettled(started);
+    };
+    return {
+        preloadConfig: (config) => {
+            if (preloadedConfigs.has(config))
+                return;
+            preloadedConfigs.add(config);
+            const fields = config.fields;
+                                                if (fields.length > 0 && fields.every(isPageField))
+                return;
+            preloadFields(fields);
+        },
+        preloadFields,
+    };
+}
+
+class PageChangeEvent {
+    currentPageIndex;
+    totalPages;
+    previousPageIndex;
+    type = 'page-change';
+    constructor(
+        currentPageIndex, 
+        totalPages, 
+        previousPageIndex) {
+        this.currentPageIndex = currentPageIndex;
+        this.totalPages = totalPages;
+        this.previousPageIndex = previousPageIndex;
+    }
+}
+
+class PagerStateEvent {
+    state;
+    type = 'pager-state';
+    constructor(state) {
+        this.state = state;
+    }
+}
+
+const PAGE_PRELOAD_WINDOW = new InjectionToken('PAGE_PRELOAD_WINDOW', {
+    providedIn: 'root',
+    factory: () => 1,
+});
+
+function collectLeafFieldKeys(fields) {
+    const keys = [];
+    for (const field of fields) {
+        if (isRowField(field) || isGenericContainerField(field)) {
+            keys.push(...collectLeafFieldKeys(field.fields));
+        }
+        else if (field.key) {
+            keys.push(field.key);
+        }
+    }
+    return keys;
+}
+
 function createSlot() {
     let counter = 0;
     const templates = new Map();
@@ -1458,79 +1843,6 @@ function isValidFormConfiguration(fields) {
     return FormModeValidator.validateFormConfiguration(fields).isValid;
 }
 
-const COMPONENT_CACHE = new InjectionToken('COMPONENT_CACHE', {
-    providedIn: 'root',
-    factory: () => new Map(),
-});
-const COMPONENT_LOAD_CACHE = new InjectionToken('COMPONENT_LOAD_CACHE', {
-    providedIn: 'root',
-    factory: () => new Map(),
-});
-function injectFieldRegistry() {
-    const registry = inject(FIELD_REGISTRY);
-    const componentCache = inject(COMPONENT_CACHE);
-    const componentLoadCache = inject(COMPONENT_LOAD_CACHE);
-    return {
-                getType(name) {
-            return registry.get(name);
-        },
-                hasType(name) {
-            return registry.has(name);
-        },
-                async loadTypeComponent(name) {
-            const fieldType = registry.get(name);
-            if (!fieldType) {
-                throw new DynamicFormError(`Field type "${name}" is not registered`);
-            }
-                        if (!fieldType.loadComponent) {
-                return undefined;
-            }
-                        const cached = componentCache.get(name);
-            if (cached) {
-                return cached;
-            }
-            const pending = componentLoadCache.get(name);
-            if (pending) {
-                return pending;
-            }
-            try {
-                const load = fieldType
-                    .loadComponent()
-                    .then(resolveDefaultExport)
-                    .then((component) => {
-                    if (component) {
-                        componentCache.set(name, component);
-                    }
-                    return component;
-                })
-                    .catch((error) => {
-                    throw new DynamicFormError(`Failed to load component for field type "${name}": ${error}`);
-                })
-                    .finally(() => componentLoadCache.delete(name));
-                componentLoadCache.set(name, load);
-                return load;
-            }
-            catch (error) {
-                throw new DynamicFormError(`Failed to load component for field type "${name}": ${error}`);
-            }
-        },
-                getLoadedComponent(name) {
-            return componentCache.get(name);
-        },
-                getTypes() {
-            return Array.from(registry.values());
-        },
-                registerTypes(types) {
-            types.forEach((type) => {
-                registry.set(type.name, type);
-            });
-        },
-                get raw() {
-            return registry;
-        },
-    };
-}
-
 function collectFieldData(fields, data, registry, pathPrefix, collectKeys = true) {
     for (const field of fields) {
                                 const valueHandling = field.type ? getFieldValueHandling(field.type, registry) : 'include';
@@ -2623,7 +2935,7 @@ class FormStateManager {
         debugName: 'FormStateManager.entity',
         equal: isEqual,
     });
-        loadFormSchemaService = injectAsync(() => import('./ng-forge-dynamic-forms-form-schema.service-C3cVSmft.mjs'));
+        loadFormSchemaService = injectAsync(() => import('./ng-forge-dynamic-forms-form-schema.service-BzbBv-r0.mjs'));
         formSchemaRequest = computed(() => {
         const setup = this.formSetup();
         const config = this.activeConfig();
@@ -3252,6 +3564,10 @@ class PageOrchestratorComponent {
     ...(ngDevMode ? [{ debugName: "pageRenderStates" }] : /* istanbul ignore next */ []));
     constructor() {
                 this.setupEventListeners();
+                                const preloader = injectFormComponentPreloader();
+        explicitEffect([this.pageRenderStates], ([states]) => {
+            preloader.preloadFields(states.filter((page) => !page.hidden && (page.active || page.preload)).map((page) => page.field));
+        });
                         explicitEffect([this.schemaCurrent, this.pageFields], ([schemaCurrent]) => {
             const ownership = this.activePageOwnership();
             if (!schemaCurrent || ownership.initialized)
@@ -3467,10 +3783,10 @@ class PageOrchestratorComponent {
       }
     }
   `, isInline: true, styles: [":host{display:block;position:relative;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [/* @ts-ignore */
-                import('./ng-forge-dynamic-forms-page-field.component-D16ey8r-.mjs').then(m => m.default)]] });
+                import('./ng-forge-dynamic-forms-page-field.component-DCdBvJ-h.mjs').then(m => m.default)]] });
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.1", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [/* @ts-ignore */
-        import('./ng-forge-dynamic-forms-page-field.component-D16ey8r-.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
+        import('./ng-forge-dynamic-forms-page-field.component-DCdBvJ-h.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'div[page-orchestrator]', imports: [PageFieldComponent], template: `
     @for (page of pageRenderStates(); track page.field.key) {
@@ -3589,7 +3905,7 @@ function createDerivationRenderGate() {
         if (!has || engine() !== 'idle')
             return;
         engine.set('loading');
-                pendingTasks.run(() => import('./ng-forge-dynamic-forms-bootstrap-derivation-orchestrator-BfxYqAQA.mjs')
+                pendingTasks.run(() => import('./ng-forge-dynamic-forms-bootstrap-derivation-orchestrator-BB8jAcY4.mjs')
             .then(({ bootstrapDerivationOrchestrator }) => {
             runInInjectionContext(injector, () => bootstrapDerivationOrchestrator());
             engine.set('wired');
@@ -3749,6 +4065,7 @@ function coreProviders() {
             deps: [FormStateManager],
         },
                         FormIdPrefixService,
+                        FieldViewportObserver,
         {
             provide: FORM_ID_PREFIX,
             useFactory: (svc) => svc.prefix,
@@ -3837,25 +4154,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
             type: Injectable
         }] });
 
-const FIELD_WINDOWING = new InjectionToken('FIELD_WINDOWING', {
-    providedIn: 'root',
-    factory: () => ({ enabled: false, eager: 12, placeholderHeight: '4rem' }),
-});
-
-function resolveFieldWindowing(global, perForm) {
-    if (perForm === undefined) {
-        return global;
-    }
-    if (typeof perForm === 'boolean') {
-        return { ...global, enabled: perForm };
-    }
-    return {
-        enabled: true,
-        eager: clampWindowSize(perForm.eager, global.eager),
-        placeholderHeight: perForm.placeholderHeight ?? global.placeholderHeight,
-    };
-}
-
 class DynamicForm {
                     config = input.required({ ...(ngDevMode ? { debugName: "config" } : /* istanbul ignore next */ {}), alias: 'dynamic-form' });
         formOptions = input(undefined, /* @ts-ignore */
@@ -3951,6 +4249,8 @@ class DynamicForm {
         this.dispatcher?.connect(this.eventBus);
         this.destroyRef.onDestroy(() => this.dispatcher?.disconnect());
                                                         inject(FORM_INITIALIZER, { optional: true });
+                                                const preload = injectFormComponentPreloader();
+        explicitEffect([this.config], ([config]) => preload.preloadConfig(config));
         this.setupEffects();
         this.setupEventHandlers();
     }
@@ -4144,28 +4444,28 @@ const DISPLAY_FIELD_TYPES_BASE = {
 const BUILT_IN_FIELDS = [
     {
         name: 'row',
-                                loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-Cj2msZp_.mjs'),
+                                loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-DfQ0y-77.mjs'),
         mapper: rowFieldMapper,
         valueHandling: 'flatten',
         ...CONTAINER_FIELD_TYPES_BASE,
     },
     {
         name: 'group',
-        loadComponent: () => import('./ng-forge-dynamic-forms-group-field.component-DN6X506r.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-group-field.component-DxHD5I8E.mjs'),
         mapper: groupFieldMapper,
         valueHandling: 'include',
         ...CONTAINER_FIELD_TYPES_BASE,
     },
     {
         name: 'array',
-        loadComponent: () => import('./ng-forge-dynamic-forms-array-field.component-DK7dAQv7.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-array-field.component-6yyDriVB.mjs'),
         mapper: arrayFieldMapper,
         valueHandling: 'include',
         ...CONTAINER_FIELD_TYPES_BASE,
     },
     {
         name: 'page',
-        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-D16ey8r-.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-DCdBvJ-h.mjs'),
         mapper: pageFieldMapper,
         valueHandling: 'flatten',
         ...CONTAINER_FIELD_TYPES_BASE,
@@ -4183,7 +4483,7 @@ const BUILT_IN_FIELDS = [
     },
     {
         name: 'container',
-        loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-Cj2msZp_.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-DfQ0y-77.mjs'),
         mapper: containerFieldMapper,
         valueHandling: 'flatten',
         ...CONTAINER_FIELD_TYPES_BASE,
@@ -4404,6 +4704,7 @@ function withFieldWindowing(config) {
         enabled: true,
         eager: clampWindowSize(config?.eager, 12),
         placeholderHeight: config?.placeholderHeight ?? '4rem',
+        park: resolveFieldParking({ enabled: true, margin: '100%' }, config?.park),
     };
     return createFeature('field-windowing', [{ provide: FIELD_WINDOWING, useValue: resolved }]);
 }
@@ -4743,4 +5044,4 @@ function arrayEvent(arrayKey) {
 
 
 export { arrayEvent as $, ArrayItemRegistryService as A, BUILT_IN_FIELDS as B, CONTAINER_FIELD_PROCESSORS as C, DfFieldOutlet as D, DfTemplate as E, FIELD_WINDOWING as F, DynamicForm as G, EventDispatcher as H, FormClearEvent as I, FormResetEvent as J, FormSubmitEvent as K, GoToPageEvent as L, InsertArrayItemEvent as M, MoveArrayItemEvent as N, NextPageEvent as O, PROPERTY_OVERRIDE_STORE as P, PageChangeEvent as Q, PagerStateEvent as R, SchemaRegistryService as S, PopArrayItemEvent as T, PrependArrayItemEvent as U, VALIDATION_EXECUTION_DEFAULTS as V, PreviousPageEvent as W, RemoveAtIndexEvent as X, ShiftArrayItemEvent as Y, TemplateAddonComponent as Z, TextAddonComponent as _, createFieldResolutionPipe as a, createWrappers as a0, isWrappersBundle as a1, provideDynamicForm as a2, sanitizeFormConfig as a3, withAddonActions as a4, withCustomAddon as a5, withEventFormValue as a6, withFieldWindowing as a7, withLegacyStatusClasses as a8, withLoggerConfig as a9, withPagePreload as aa, withValidationExecutionDefaults as ab, withValueExclusionDefaults as ac, wrapperProps as ad, isSameWrapperChain as b, computeContainerHostClasses as c, initializationComponentPath as d, createWrapperChainController as e, createHiddenSignal as f, createRenderReadySignal as g, getNormalizedArrayMetadata as h, injectFieldRegistry as i, emitComponentInitialized as j, getFieldDefaultValue as k, resolveFieldWindowing as l, mapFieldToInputs as m, collectInitializingContainerKeys as n, ActivePageInitializedEvent as o, initializationComponentKey as p, DEV_MODE as q, resolveWrappers as r, setupContainerInitEffect as s, traverseFieldsWithContext as t, DERIVATION_WARNING_TRACKER as u, FormStateManager as v, DERIVATION_LOG_CONFIG as w, AppendArrayItemEvent as x, ComponentAddonComponent as y, ConsoleLogger as z };
-//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-DCX7tvaB.mjs.map
+//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-tA8ZkP8i.mjs.map