@ng-forge/dynamic-forms 1.1.0 → 1.2.0-next.1

package/fesm2022/{ng-forge-dynamic-forms-ng-forge-dynamic-forms-Du3V5AOb.mjs → ng-forge-dynamic-forms-ng-forge-dynamic-forms-ZiNaCWHl.mjs}

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { reflectComponentType, Injector, inject, EnvironmentInjector, DestroyRef, computed, signal, input, ViewContainerRef, Directive, linkedSignal, ChangeDetectionStrategy, Component, Injectable, InjectionToken, isSignal, runInInjectionContext, afterNextRender, untracked, PendingTasks, ElementRef, PLATFORM_ID, isDevMode, TemplateRef, model, contentChildren, makeEnvironmentProviders } from '@angular/core';
+import { reflectComponentType, Injector, inject, EnvironmentInjector, DestroyRef, computed, signal, input, ViewContainerRef, Directive, InjectionToken, linkedSignal, ChangeDetectionStrategy, Component, Injectable, isSignal, runInInjectionContext, afterNextRender, untracked, PendingTasks, ElementRef, PLATFORM_ID, isDevMode, TemplateRef, model, contentChildren, makeEnvironmentProviders } from '@angular/core';
 import { explicitEffect } from 'ngxtension/explicit-effect';
-import { DynamicFormLogger, WRAPPER_COMPONENT_CACHE, WRAPPER_REGISTRY, toReadonlyFieldTreeCached, writeToFieldValue, WRAPPER_AUTO_ASSOCIATIONS, DEFAULT_WRAPPERS, READONLY_FIELD_TREE_CACHE, getGridClassString, EventBus, FieldContextRegistryService, FunctionRegistryService, FORM_OPTIONS, evaluateCondition, FIELD_SIGNAL_CONTEXT, isRowField, isContainerField, isArrayField, hasChildFields, isSimplifiedArrayField, DynamicFormError, isStateLogicConfig, isDerivationLogicConfig, isFormStateCondition, createFormStateLogicFunction, createDebouncedLogicFunction, createLogicFunction, ExpressionParser, requiresTreeValidation, applyValidator, isPageField, isGenericContainerField, isGroupField, getFieldValueHandling, normalizeFieldsArray, getNestedValue, extractStringDependencies, isCrossFieldStateLogic, extractExpressionDependencies, isCrossFieldSchema, keyBy, mapValues, isEqual, hasTargetProperty, ARRAY_CONTEXT, GROUP_CONTEXT, FORM_ID_PREFIX, baseFieldMapper, detectFormMode, validatePageNesting, FIELD_REGISTRY, assertNever, ADDON_TYPE_REGISTRY, deepMergeDefaults, derivedFromDeferred, createWarningTracker, RootFormRegistryService, DEFAULT_PROPS, DEFAULT_VALIDATION_MESSAGES, EXTERNAL_DATA, DEPRECATION_WARNING_TRACKER, createAddonActionRegistry, ADDON_ACTION_REGISTRY, HttpConditionCache, HTTP_CONDITION_CACHE, HttpConditionFunctionCacheService, AsyncConditionFunctionCacheService, DynamicValueFunctionCacheService, LogicFunctionCacheService, setupInitializationTracking, ComponentInitializedEvent, 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 { DynamicFormLogger, WRAPPER_COMPONENT_CACHE, WRAPPER_REGISTRY, toReadonlyFieldTreeCached, writeToFieldValue, WRAPPER_AUTO_ASSOCIATIONS, DEFAULT_WRAPPERS, READONLY_FIELD_TREE_CACHE, getGridClassString, EventBus, FieldContextRegistryService, FunctionRegistryService, FORM_OPTIONS, evaluateCondition, FIELD_SIGNAL_CONTEXT, isRowField, isContainerField, isArrayField, hasChildFields, isSimplifiedArrayField, DynamicFormError, isStateLogicConfig, isDerivationLogicConfig, isFormStateCondition, createFormStateLogicFunction, createDebouncedLogicFunction, createLogicFunction, ExpressionParser, applyValidator, isPageField, isGenericContainerField, isGroupField, getFieldValueHandling, normalizeFieldsArray, keyBy, mapValues, isEqual, hasTargetProperty, ARRAY_CONTEXT, GROUP_CONTEXT, FORM_ID_PREFIX, baseFieldMapper, detectFormMode, validatePageNesting, FIELD_REGISTRY, assertNever, ADDON_TYPE_REGISTRY, deepMergeDefaults, derivedFromDeferred, createWarningTracker, RootFormRegistryService, DEFAULT_PROPS, DEFAULT_VALIDATION_MESSAGES, EXTERNAL_DATA, DEPRECATION_WARNING_TRACKER, createAddonActionRegistry, ADDON_ACTION_REGISTRY, HttpConditionCache, HTTP_CONDITION_CACHE, HttpConditionFunctionCacheService, AsyncConditionFunctionCacheService, DynamicValueFunctionCacheService, LogicFunctionCacheService, setupInitializationTracking, ComponentInitializedEvent, 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 { takeUntilDestroyed, toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
 import { of, forkJoin, from, catchError, map, switchMap, isObservable, firstValueFrom, exhaustMap, EMPTY, debounceTime, distinctUntilChanged, tap, pipe, scan, Observable, Subject, concatMap, filter, take } from 'rxjs';
-import { submit, required, disabled, readonly, hidden, applyEach, applyWhenValue, applyWhen, apply, email, minLength, maxLength, pattern, min, max, schema, validateStandardSchema, validateTree, form, provideSignalFormsConfig } from '@angular/forms/signals';
+import { submit, required, disabled, readonly, hidden, applyEach, applyWhenValue, applyWhen, apply, email, minLength, maxLength, pattern, min, max, schema, validateStandardSchema, form, provideSignalFormsConfig } from '@angular/forms/signals';
 import { isStandardSchemaMarker } from '@ng-forge/dynamic-forms/schema';
 import { isPlatformBrowser, AsyncPipe, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import { NG_STATUS_CLASSES } from '@angular/forms/signals/compat';
@@ -559,11 +559,23 @@ class PageNavigationStateChangeEvent {
     }
 }
 
+const PAGE_PRELOAD_WINDOW = new InjectionToken('PAGE_PRELOAD_WINDOW', {
+    providedIn: 'root',
+    factory: () => 1,
+});
+
+function clampWindowSize(value, fallback) {
+    if (value === undefined || !Number.isFinite(value))
+        return fallback;
+    return Math.max(0, Math.floor(value));
+}
+
 class PageOrchestratorComponent {
     eventBus = inject(EventBus);
     fieldContextRegistry = inject(FieldContextRegistryService);
     functionRegistry = inject(FunctionRegistryService);
     formOptions = inject(FORM_OPTIONS, { optional: true });
+    globalPreloadWindow = inject(PAGE_PRELOAD_WINDOW);
         pageFields = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageFields" }] : /* istanbul ignore next */ []));
         form = input.required(/* @ts-ignore */
@@ -633,6 +645,14 @@ class PageOrchestratorComponent {
         currentPageValid: this.currentPageValid,
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "extendedFieldSignalContext" }] : /* istanbul ignore next */ []));
+        preloadWindow = computed(() => {
+        const perForm = this.formOptions?.()?.pagePreloadWindow;
+                return clampWindowSize(perForm, this.globalPreloadWindow);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "preloadWindow" }] : /* istanbul ignore next */ []));
+        isWithinPreloadWindow(i) {
+        return Math.abs(i - this.state().currentPageIndex) <= this.preloadWindow();
+    }
     constructor() {
                 this.setupEventListeners();
                 explicitEffect([this.state, this.visiblePageIndices], ([state, visibleIndices]) => {
@@ -808,8 +828,8 @@ class PageOrchestratorComponent {
         \`@if (!field.hidden())\` gate in page-field.component.ts.
       -->
       @if (!pageHiddenStates()[i]) {
-        @if (i === state().currentPageIndex || i === state().currentPageIndex + 1 || i === state().currentPageIndex - 1) {
-          <!-- Current and adjacent pages (±1): render immediately for flicker-free navigation -->
+        @if (isWithinPreloadWindow(i)) {
+          <!-- Current and preloaded neighbour pages: render immediately for flicker-free navigation -->
           @defer (on immediate) {
             <section
               page-field
@@ -822,21 +842,30 @@ class PageOrchestratorComponent {
             <div class="df-page-placeholder" [attr.data-page-index]="i" [attr.data-page-key]="pageField.key"></div>
           }
         } @else {
-          <!-- Distant pages: defer until browser is idle for memory savings -->
-          @defer (on idle) {
-            <section page-field [field]="pageField" [key]="pageField.key" [pageIndex]="i" [isVisible]="false"></section>
-          } @placeholder {
-            <div class="df-page-placeholder" [attr.data-page-index]="i" [attr.data-page-key]="pageField.key"></div>
-          }
+          <!--
+            Pages outside the preload window render only a lightweight placeholder
+            — they are NOT mounted. Mounting every page eagerly (previously via
+            \`@defer (on idle)\`, which fires almost immediately post-load) put all
+            fields of every page in the DOM at once: O(all-fields) initial render
+            blocking + O(all-fields) change detection on every keystroke, with no
+            visible benefit since only one page is shown at a time.
+
+            Form state (schema/value/validators) derives from config, not from
+            mounted components, so leaving a page unmounted does not affect
+            validity, derivations, or navigation. A page mounts the moment
+            navigation brings it into the preload window (above), which is
+            flicker-free for sequential next/previous navigation. The window size
+            is configurable via \`withPagePreload(n)\` or \`FormOptions.pagePreloadWindow\`.
+          -->
+          <div class="df-page-placeholder" [attr.data-page-index]="i" [attr.data-page-key]="pageField.key"></div>
         }
       }
     }
   `, 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-amWhCdHL.mjs').then(m => m.default)], () => [/* @ts-ignore */
-                import('./ng-forge-dynamic-forms-page-field.component-amWhCdHL.mjs').then(m => m.default)]] });
+                import('./ng-forge-dynamic-forms-page-field.component-Wbz6S8iH.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-amWhCdHL.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
+        import('./ng-forge-dynamic-forms-page-field.component-Wbz6S8iH.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) {
@@ -848,8 +877,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.1", ng
         \`@if (!field.hidden())\` gate in page-field.component.ts.
       -->
       @if (!pageHiddenStates()[i]) {
-        @if (i === state().currentPageIndex || i === state().currentPageIndex + 1 || i === state().currentPageIndex - 1) {
-          <!-- Current and adjacent pages (±1): render immediately for flicker-free navigation -->
+        @if (isWithinPreloadWindow(i)) {
+          <!-- Current and preloaded neighbour pages: render immediately for flicker-free navigation -->
           @defer (on immediate) {
             <section
               page-field
@@ -862,12 +891,22 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.1", ng
             <div class="df-page-placeholder" [attr.data-page-index]="i" [attr.data-page-key]="pageField.key"></div>
           }
         } @else {
-          <!-- Distant pages: defer until browser is idle for memory savings -->
-          @defer (on idle) {
-            <section page-field [field]="pageField" [key]="pageField.key" [pageIndex]="i" [isVisible]="false"></section>
-          } @placeholder {
-            <div class="df-page-placeholder" [attr.data-page-index]="i" [attr.data-page-key]="pageField.key"></div>
-          }
+          <!--
+            Pages outside the preload window render only a lightweight placeholder
+            — they are NOT mounted. Mounting every page eagerly (previously via
+            \`@defer (on idle)\`, which fires almost immediately post-load) put all
+            fields of every page in the DOM at once: O(all-fields) initial render
+            blocking + O(all-fields) change detection on every keystroke, with no
+            visible benefit since only one page is shown at a time.
+
+            Form state (schema/value/validators) derives from config, not from
+            mounted components, so leaving a page unmounted does not affect
+            validity, derivations, or navigation. A page mounts the moment
+            navigation brings it into the preload window (above), which is
+            flicker-free for sequential next/previous navigation. The window size
+            is configurable via \`withPagePreload(n)\` or \`FormOptions.pagePreloadWindow\`.
+          -->
+          <div class="df-page-placeholder" [attr.data-page-index]="i" [attr.data-page-key]="pageField.key"></div>
         }
       }
     }
@@ -1262,11 +1301,6 @@ function applySchema(config, fieldPath) {
 function createSchemaFunction(schema, logger) {
     return (path) => {
                 schema.validators?.forEach((validatorConfig) => {
-                                    if (requiresTreeValidation(validatorConfig)) {
-                logger?.warn(`Validator "${validatorConfig.type}" in schema definition "${schema.name}" uses a cross-field expression, ` +
-                    `which is not supported on schema definition validators; it was skipped.`);
-                return;
-            }
             applyValidator(validatorConfig, path);
         });
                 schema.logic?.forEach((logicConfig) => {
@@ -1728,28 +1762,9 @@ const VALIDATION_EXECUTION_DEFAULTS = new InjectionToken('VALIDATION_EXECUTION_D
     }),
 });
 
-function getFieldTreeByKey(ctx, key) {
-        if (!key.includes('.')) {
-        return ctx.fieldTree[key];
-    }
-        const parts = key.split('.');
-    let current = ctx.fieldTree;
-    for (const part of parts) {
-                        if (!current || (typeof current !== 'object' && typeof current !== 'function')) {
-            return undefined;
-        }
-        current = current[part];
-    }
-    return current;
-}
-function createSchemaFromFields(fields, registry, optionsOrValidators) {
-            const functionRegistry = inject(FunctionRegistryService);
-    const logger = inject(DynamicFormLogger);
-    const validationExecutionDefaults = inject(VALIDATION_EXECUTION_DEFAULTS);
-        const options = Array.isArray(optionsOrValidators)
-        ? { crossFieldValidators: optionsOrValidators }
-        : (optionsOrValidators ?? {});
-    const { crossFieldValidators, formLevelSchema } = options;
+function createSchemaFromFields(fields, registry, options = {}) {
+            const validationExecutionDefaults = inject(VALIDATION_EXECUTION_DEFAULTS);
+    const { formLevelSchema } = options;
     const rootContext = {
         validateWhenHidden: options.validateWhenHidden ?? validationExecutionDefaults.validateWhenHidden,
         ancestorAlwaysHidden: false,
@@ -1779,105 +1794,12 @@ function createSchemaFromFields(fields, registry, optionsOrValidators) {
                 continue;
             }
                                                 mapFieldToForm(fieldDef, fieldPath, rootContext);
-        }
-                if (crossFieldValidators && crossFieldValidators.length > 0) {
-            applyCrossFieldTreeValidator(path, crossFieldValidators, functionRegistry, logger);
         }
                 if (formLevelSchema) {
             applyFormLevelSchema(path, formLevelSchema);
         }
     });
 }
-function applyCrossFieldTreeValidator(rootPath, validators, functionRegistry, logger) {
-        const customFunctions = functionRegistry.getCustomFunctions();
-                const customValidators = validators.filter((entry) => {
-        if (entry.config.type !== 'custom') {
-            logger.warn(`Unexpected non-custom validator in cross-field tree for "${entry.sourceFieldKey}"; ignoring.`);
-            return false;
-        }
-        return true;
-    });
-    validateTree(rootPath, (ctx) => {
-        if (customValidators.length === 0) {
-            return null;         }
-                const formValue = ctx.value();
-        const errors = [];
-        for (const entry of customValidators) {
-            const { sourceFieldKey, config } = entry;
-            try {
-                const error = evaluateCrossFieldValidator(entry, formValue, sourceFieldKey, ctx, customFunctions, logger);
-                if (error) {
-                    errors.push(error);
-                }
-            }
-            catch (err) {
-                logger.error(`Error evaluating cross-field validator for ${sourceFieldKey}:`, err);
-                                const targetField = getFieldTreeByKey(ctx, sourceFieldKey);
-                if (targetField) {
-                    const customConfig = config;
-                    errors.push({
-                        kind: customConfig.kind || config.type || 'custom',
-                        fieldTree: targetField,
-                    });
-                }
-            }
-        }
-        return errors.length > 0 ? errors : null;
-    });
-}
-function evaluateCrossFieldValidator(entry, formValue, sourceFieldKey, ctx, customFunctions, logger) {
-    const { config } = entry;
-    const fieldValue = getNestedValue(formValue, sourceFieldKey);
-        const evaluationContext = {
-        fieldValue,
-        formValue,
-        fieldPath: sourceFieldKey,
-        customFunctions,
-        logger,
-    };
-        return evaluateCustomCrossFieldValidator(config, evaluationContext, sourceFieldKey, ctx);
-}
-function evaluateCustomCrossFieldValidator(config, evaluationContext, sourceFieldKey, ctx) {
-    if (!config.expression) {
-        return null;
-    }
-    const { fieldValue, formValue, logger, customFunctions } = evaluationContext;
-            if (config.when) {
-        const conditionMet = evaluateCondition(config.when, {
-            fieldValue,
-            formValue,
-            fieldPath: sourceFieldKey,
-            customFunctions: customFunctions || {},
-            logger,
-        });
-        if (!conditionMet) {
-            return null;         }
-    }
-        const result = ExpressionParser.evaluate(config.expression, evaluationContext);
-        if (result) {
-        return null;
-    }
-        const targetField = getFieldTreeByKey(ctx, sourceFieldKey);
-    if (!targetField) {
-        evaluationContext.logger.warn(`Cross-field validator references non-existent field "${sourceFieldKey}"`);
-        return null;
-    }
-    const errorObj = {
-        kind: config.kind || 'custom',
-        fieldTree: targetField,
-    };
-        if (config.errorParams) {
-        for (const [key, expression] of Object.entries(config.errorParams)) {
-            try {
-                errorObj[key] = ExpressionParser.evaluate(expression, evaluationContext);
-            }
-            catch (error) {
-                evaluationContext.logger.warn(`Failed to evaluate error param expression "${key}": ${expression}`, error);
-            }
-        }
-    }
-    return errorObj;
-}
 function fieldsToDefaultValues(fields, registry) {
     const defaultValues = {};
     for (const field of fields) {
@@ -1895,152 +1817,6 @@ function fieldsToDefaultValues(fields, registry) {
     return defaultValues;
 }
 
-function createEmptyCollection() {
-    return {
-        validators: [],
-        logic: [],
-        schemas: [],
-    };
-}
-function collectCrossFieldEntries(fields) {
-    const collection = createEmptyCollection();
-    traverseFields(fields, collection, '');
-    return collection;
-}
-function traverseFields(fields, collection, pathPrefix) {
-    for (const field of fields) {
-        collectFromField(field, collection, pathPrefix);
-                if (hasChildFields(field)) {
-                                                                        const groupKey = isGroupField(field) ? field.key : undefined;
-            const childPrefix = groupKey ? (pathPrefix ? `${pathPrefix}.${groupKey}` : groupKey) : pathPrefix;
-            traverseFields(normalizeFieldsArray(field.fields), collection, childPrefix);
-        }
-    }
-}
-function collectFromField(field, collection, pathPrefix) {
-    const fieldKey = field.key;
-    if (!fieldKey)
-        return;
-    const fullKey = pathPrefix ? `${pathPrefix}.${fieldKey}` : fieldKey;
-    const validationField = field;
-        if (validationField.validators) {
-        for (const config of validationField.validators) {
-            const entry = tryCreateValidatorEntry(fullKey, config);
-            if (entry) {
-                collection.validators.push(entry);
-            }
-        }
-    }
-        if (validationField.logic) {
-        for (const config of validationField.logic) {
-            const entry = tryCreateLogicEntry(fullKey, config);
-            if (entry) {
-                collection.logic.push(entry);
-            }
-        }
-    }
-        if (validationField.schemas) {
-        for (const config of validationField.schemas) {
-            const entry = tryCreateSchemaEntry(fullKey, config);
-            if (entry) {
-                collection.schemas.push(entry);
-            }
-        }
-    }
-}
-function tryCreateValidatorEntry(fieldKey, config) {
-    if (!requiresTreeValidation(config)) {
-        return null;     }
-    if (config.type === 'custom') {
-        const customConfig = config;
-        return {
-            sourceFieldKey: fieldKey,
-            config,
-            dependsOn: extractStringDependencies(customConfig.expression || ''),
-            category: 'validator',
-        };
-    }
-    const builtInConfig = config;
-    return {
-        sourceFieldKey: fieldKey,
-        config: convertBuiltInToCustomValidator(builtInConfig),
-        validatorType: config.type,
-        dependsOn: extractStringDependencies(builtInConfig.expression || ''),
-        category: 'validator',
-    };
-}
-function tryCreateLogicEntry(fieldKey, config) {
-            if (!isStateLogicConfig(config)) {
-        return null;
-    }
-    if (!isCrossFieldStateLogic(config)) {
-        return null;
-    }
-    const condition = config.condition;
-    return {
-        sourceFieldKey: fieldKey,
-        logicType: config.type,
-        condition,
-        config: config,
-        dependsOn: extractExpressionDependencies(condition),
-        category: 'logic',
-    };
-}
-function tryCreateSchemaEntry(fieldKey, config) {
-    if (!isCrossFieldSchema(config)) {
-        return null;
-    }
-    const condition = config.condition;
-    return {
-        sourceFieldKey: fieldKey,
-        config,
-        condition,
-        dependsOn: extractExpressionDependencies(condition),
-        category: 'schema',
-    };
-}
-function convertBuiltInToCustomValidator(config) {
-    const expression = config.expression;
-    if (!expression) {
-        throw new DynamicFormError(`Built-in validator ${config.type} missing required expression for cross-field conversion`);
-    }
-    let validationExpression;
-    switch (config.type) {
-        case 'min':
-            validationExpression = `fieldValue == null || fieldValue >= (${expression})`;
-            break;
-        case 'max':
-            validationExpression = `fieldValue == null || fieldValue <= (${expression})`;
-            break;
-        case 'minLength':
-            validationExpression = `fieldValue == null || (typeof fieldValue !== 'string' && !Array.isArray(fieldValue)) || fieldValue.length >= (${expression})`;
-            break;
-        case 'maxLength':
-            validationExpression = `fieldValue == null || (typeof fieldValue !== 'string' && !Array.isArray(fieldValue)) || fieldValue.length <= (${expression})`;
-            break;
-        case 'pattern':
-                        try {
-                new RegExp(expression);
-            }
-            catch (e) {
-                throw new DynamicFormError(`Invalid regex pattern in cross-field validator: '${expression}' — ${e instanceof Error ? e.message : String(e)}`);
-            }
-            validationExpression = `fieldValue == null || new RegExp(${JSON.stringify(expression)}).test(fieldValue)`;
-            break;
-        default:
-            throw new DynamicFormError(`Cannot convert ${config.type} validator to custom validator`);
-    }
-    return {
-        type: 'custom',
-        expression: validationExpression,
-        kind: config.type,
-        when: config.when,
-        errorParams: {
-            [config.type]: expression,
-        },
-    };
-}
-
 function inheritContainerExclusion(container, child) {
     const inheritedHidden = container.hidden === true || child.inheritedExclusionState?.hidden === true;
     const inheritedDisabled = container.disabled === true || child.inheritedExclusionState?.disabled === true;
@@ -3608,9 +3384,7 @@ class FormStateManager {
         if (!config)
             return undefined;
         if (setup.schemaFields?.length) {
-            const crossFieldCollection = collectCrossFieldEntries(setup.schemaFields);
             return createSchemaFromFields(setup.schemaFields, setup.registry, {
-                crossFieldValidators: crossFieldCollection.validators,
                 formLevelSchema: config.schema,
                 validateWhenHidden: this.effectiveFormOptions().validateWhenHidden,
             });
@@ -4105,7 +3879,7 @@ function createDerivationRenderGate() {
         if (!has || engine() !== 'idle')
             return;
         engine.set('loading');
-                pendingTasks.run(() => import('./ng-forge-dynamic-forms-bootstrap-derivation-orchestrator-CcoUnroD.mjs')
+                pendingTasks.run(() => import('./ng-forge-dynamic-forms-bootstrap-derivation-orchestrator-CkqvXXs_.mjs')
             .then(({ bootstrapDerivationOrchestrator }) => {
             runInInjectionContext(injector, () => bootstrapDerivationOrchestrator());
             engine.set('wired');
@@ -4353,6 +4127,25 @@ 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 */
@@ -4368,6 +4161,7 @@ class DynamicForm {
     logger = inject(DynamicFormLogger);
     dispatcher = inject(EventDispatcher, { optional: true });
     templateRegistry = inject(DfFieldTemplateRegistry);
+    globalFieldWindowing = inject(FIELD_WINDOWING);
                     _projectedTemplates = contentChildren(DfTemplate, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_projectedTemplates" }] : /* istanbul ignore next */ []));
     stateManager = this.connectDeps();
@@ -4395,6 +4189,8 @@ class DynamicForm {
     shouldRender = computed(() => this.stateManager.shouldRender() && this.derivationReady(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
         resolvedFields = this.stateManager.resolvedFields;
+        fieldWindowing = computed(() => resolveFieldWindowing(this.globalFieldWindowing, this.effectiveFormOptions()?.fieldWindowing), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldWindowing" }] : /* istanbul ignore next */ []));
                     totalComponentsCount = computed(() => {
         const fields = this.stateManager.formSetup()?.fields ?? [];
         return countContainersRecursive(fields) + 1;
@@ -4425,6 +4221,14 @@ class DynamicForm {
         onNativeSubmit(event) {
         event.preventDefault();
         this.eventBus.dispatch(FormSubmitEvent);
+    }
+        windowsField(field, index) {
+        const w = this.fieldWindowing();
+        return w.enabled && index >= w.eager && !isContainerField(field.fieldDef);
+    }
+        placeholderGridClass(field) {
+        const grid = getGridClassString(field.fieldDef);
+        return grid ? `df-field-placeholder ${grid}` : 'df-field-placeholder';
     }
                 setupEffects() {
                 explicitEffect([this.formModeDetection, this.pageFieldDefinitions], ([{ mode }, pages]) => {
@@ -4480,13 +4284,26 @@ class DynamicForm {
           <div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="form()" [fieldSignalContext]="fieldSignalContext()"></div>
         }
         @case ('non-paged') {
-          @for (field of resolvedFields(); track field.key) {
+          @for (field of resolvedFields(); track field.key; let i = $index) {
             <!-- @if + DfFieldOutlet's own renderReady-&-!hidden gate together silence NG01916:
                  the template @if removes the host from the DOM (Angular's prescribed pattern), and
                  the directive's gate stops a same-CD-pass mount before [formField] can warn.
                  Don't dedupe one without the other — see DfFieldOutlet.renderReady. -->
             @if (!field.hidden()) {
-              <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+              @if (windowsField(field, i)) {
+                @defer (on viewport) {
+                  <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+                } @placeholder {
+                  <div
+                    [class]="placeholderGridClass(field)"
+                    [style.min-height]="fieldWindowing().placeholderHeight"
+                    [attr.data-field-key]="field.key"
+                    aria-hidden="true"
+                  ></div>
+                }
+              } @else {
+                <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+              }
             }
           }
         }
@@ -4495,7 +4312,7 @@ class DynamicForm {
         }
       }
     }
-  `, isInline: true, styles: [".df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);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, .5rem);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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-sm, .5rem)}.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, 12),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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-md, .5rem)}.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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-lg, .5rem)}.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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-xl, .5rem)}.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, .5rem);width:100%}:host>*{grid-column:1/-1}:host.df-form-spacing-custom{--df-grid-row-gap: var(--df-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{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 });
+  `, isInline: true, styles: [".df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);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, .5rem);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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-sm, .5rem)}.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, 12),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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-md, .5rem)}.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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-lg, .5rem)}.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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-xl, .5rem)}.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, .5rem);width:100%}:host>*{grid-column:1/-1}:host.df-form-spacing-custom{--df-grid-row-gap: var(--df-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{gap:0}.df-field-placeholder{display:block}\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, deferBlockDependencies: [() => [DfFieldOutlet]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DynamicForm, decorators: [{
             type: Component,
@@ -4506,13 +4323,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
           <div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="form()" [fieldSignalContext]="fieldSignalContext()"></div>
         }
         @case ('non-paged') {
-          @for (field of resolvedFields(); track field.key) {
+          @for (field of resolvedFields(); track field.key; let i = $index) {
             <!-- @if + DfFieldOutlet's own renderReady-&-!hidden gate together silence NG01916:
                  the template @if removes the host from the DOM (Angular's prescribed pattern), and
                  the directive's gate stops a same-CD-pass mount before [formField] can warn.
                  Don't dedupe one without the other — see DfFieldOutlet.renderReady. -->
             @if (!field.hidden()) {
-              <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+              @if (windowsField(field, i)) {
+                @defer (on viewport) {
+                  <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+                } @placeholder {
+                  <div
+                    [class]="placeholderGridClass(field)"
+                    [style.min-height]="fieldWindowing().placeholderHeight"
+                    [attr.data-field-key]="field.key"
+                    aria-hidden="true"
+                  ></div>
+                }
+              } @else {
+                <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+              }
             }
           }
         }
@@ -4533,7 +4363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '[attr.data-form-mode]': 'formModeDetection().mode',
                         '[attr.id]': 'idPrefix() || null',
                         '(submit)': 'onNativeSubmit($event)',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);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, .5rem);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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-sm, .5rem)}.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, 12),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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-md, .5rem)}.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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-lg, .5rem)}.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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-xl, .5rem)}.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, .5rem);width:100%}:host>*{grid-column:1/-1}:host.df-form-spacing-custom{--df-grid-row-gap: var(--df-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{gap:0}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);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, .5rem);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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-sm, .5rem)}.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, 12),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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-md, .5rem)}.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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-lg, .5rem)}.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, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-xl, .5rem)}.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, .5rem);width:100%}:host>*{grid-column:1/-1}:host.df-form-spacing-custom{--df-grid-row-gap: var(--df-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{gap:0}.df-field-placeholder{display:block}\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"] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], _projectedTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfTemplate), { isSignal: true }] }], 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"] }] } });
 function countContainersRecursive(fields) {
     let count = 0;
@@ -4604,28 +4434,28 @@ const DISPLAY_FIELD_TYPES_BASE = {
 const BUILT_IN_FIELDS = [
     {
         name: 'row',
-                                loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-DZfVWjiM.mjs'),
+                                loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-CM1pY9v5.mjs'),
         mapper: rowFieldMapper,
         valueHandling: 'flatten',
         ...CONTAINER_FIELD_TYPES_BASE,
     },
     {
         name: 'group',
-        loadComponent: () => import('./ng-forge-dynamic-forms-group-field.component-CPFgu3pM.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-group-field.component-D4JhDffB.mjs'),
         mapper: groupFieldMapper,
         valueHandling: 'include',
         ...CONTAINER_FIELD_TYPES_BASE,
     },
     {
         name: 'array',
-        loadComponent: () => import('./ng-forge-dynamic-forms-array-field.component-CvjDqYyq.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-array-field.component-BVnXnaNw.mjs'),
         mapper: arrayFieldMapper,
         valueHandling: 'include',
         ...CONTAINER_FIELD_TYPES_BASE,
     },
     {
         name: 'page',
-        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-amWhCdHL.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-Wbz6S8iH.mjs'),
         mapper: pageFieldMapper,
         valueHandling: 'flatten',
         ...CONTAINER_FIELD_TYPES_BASE,
@@ -4643,7 +4473,7 @@ const BUILT_IN_FIELDS = [
     },
     {
         name: 'container',
-        loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-DZfVWjiM.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-CM1pY9v5.mjs'),
         mapper: containerFieldMapper,
         valueHandling: 'flatten',
         ...CONTAINER_FIELD_TYPES_BASE,
@@ -4841,6 +4671,20 @@ function withValueExclusionDefaults(config) {
     return createFeature('value-exclusion', [{ provide: VALUE_EXCLUSION_DEFAULTS, useValue: resolved }]);
 }
 
+function withPagePreload(window) {
+    const resolved = clampWindowSize(window, 1);
+    return createFeature('page-preload', [{ provide: PAGE_PRELOAD_WINDOW, useValue: resolved }]);
+}
+
+function withFieldWindowing(config) {
+    const resolved = {
+        enabled: true,
+        eager: clampWindowSize(config?.eager, 12),
+        placeholderHeight: config?.placeholderHeight ?? '4rem',
+    };
+    return createFeature('field-windowing', [{ provide: FIELD_WINDOWING, useValue: resolved }]);
+}
+
 function withValidationExecutionDefaults(config) {
     const resolved = {
         validateWhenHidden: config?.validateWhenHidden ?? false,
@@ -5046,5 +4890,5 @@ function arrayEvent(arrayKey) {
 
 
 
-export { withValueExclusionDefaults as $, ArrayItemRegistryService as A, BUILT_IN_FIELDS as B, CONTAINER_FIELD_PROCESSORS as C, DfFieldOutlet as D, EventDispatcher as E, FormStateManager as F, PrependArrayItemEvent as G, PreviousPageEvent as H, InsertArrayItemEvent as I, TextAddonComponent as J, arrayEvent as K, createWrappers as L, MoveArrayItemEvent as M, NextPageEvent as N, isWrappersBundle as O, PROPERTY_OVERRIDE_STORE as P, provideDynamicForm as Q, RemoveAtIndexEvent as R, ShiftArrayItemEvent as S, TemplateAddonComponent as T, sanitizeFormConfig as U, withAddonActions as V, withCustomAddon as W, withEventFormValue as X, withLegacyStatusClasses as Y, withLoggerConfig as Z, withValidationExecutionDefaults as _, isSameWrapperChain as a, wrapperProps as a0, createWrapperChainController as b, createFieldResolutionPipe as c, createSchemaFromFields as d, createHiddenSignal as e, createRenderReadySignal as f, getNormalizedArrayMetadata as g, getFieldDefaultValue as h, injectFieldRegistry as i, DEV_MODE as j, DEFAULT_DEBOUNCE_MS as k, DERIVATION_WARNING_TRACKER as l, mapFieldToInputs as m, DERIVATION_LOG_CONFIG as n, AppendArrayItemEvent as o, ComponentAddonComponent as p, ConsoleLogger as q, resolveWrappers as r, DfTemplate as s, traverseFieldsWithContext as t, DynamicForm as u, FormClearEvent as v, FormResetEvent as w, FormSubmitEvent as x, PageChangeEvent as y, PopArrayItemEvent as z };
-//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-Du3V5AOb.mjs.map
+export { withLegacyStatusClasses as $, ArrayItemRegistryService as A, BUILT_IN_FIELDS as B, CONTAINER_FIELD_PROCESSORS as C, DfFieldOutlet as D, EventDispatcher as E, FIELD_WINDOWING as F, PageChangeEvent as G, PopArrayItemEvent as H, InsertArrayItemEvent as I, PrependArrayItemEvent as J, PreviousPageEvent as K, TextAddonComponent as L, MoveArrayItemEvent as M, NextPageEvent as N, arrayEvent as O, PROPERTY_OVERRIDE_STORE as P, createWrappers as Q, RemoveAtIndexEvent as R, ShiftArrayItemEvent as S, TemplateAddonComponent as T, isWrappersBundle as U, provideDynamicForm as V, sanitizeFormConfig as W, withAddonActions as X, withCustomAddon as Y, withEventFormValue as Z, withFieldWindowing as _, isSameWrapperChain as a, withLoggerConfig as a0, withPagePreload as a1, withValidationExecutionDefaults as a2, withValueExclusionDefaults as a3, wrapperProps as a4, createWrapperChainController as b, createFieldResolutionPipe as c, createSchemaFromFields as d, createHiddenSignal as e, createRenderReadySignal as f, getNormalizedArrayMetadata as g, getFieldDefaultValue as h, injectFieldRegistry as i, resolveFieldWindowing as j, DEV_MODE as k, DEFAULT_DEBOUNCE_MS as l, mapFieldToInputs as m, DERIVATION_WARNING_TRACKER as n, FormStateManager as o, DERIVATION_LOG_CONFIG as p, AppendArrayItemEvent as q, resolveWrappers as r, ComponentAddonComponent as s, traverseFieldsWithContext as t, ConsoleLogger as u, DfTemplate as v, DynamicForm as w, FormClearEvent as x, FormResetEvent as y, FormSubmitEvent as z };
+//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-ZiNaCWHl.mjs.map