@ng-forge/dynamic-forms 0.9.0-next.9 → 0.9.0

package/README.md

@@ -20,6 +20,7 @@ Core library for building type-safe, dynamic Angular forms with signal forms int
 
 | @ng-forge/dynamic-forms | Angular       |
 | ----------------------- | ------------- |
+| 0.9.x                   | >=21.2.0      |
 | 0.8.x                   | >=21.2.0      |
 | 0.7.x                   | >=21.2.0      |
 | 0.6.x                   | >=21.1.0      |

package/fesm2022/{ng-forge-dynamic-forms-array-field.component-us7mQtVQ.mjs → ng-forge-dynamic-forms-array-field.component-Tw49K5kz.mjs}

@@ -1,10 +1,62 @@
 import * as i0 from '@angular/core';
-import { computed, runInInjectionContext, Injector, linkedSignal, inject, DestroyRef, EnvironmentInjector, input, signal, ChangeDetectionStrategy, Component } from '@angular/core';
-import { R as RootFormRegistryService, g as isEqual, m as mapFieldToInputs, F as FIELD_SIGNAL_CONTEXT, A as ARRAY_CONTEXT, j as createRenderReadySignal, D as DynamicFormLogger, i as injectFieldRegistry, E as EventBus, k as ARRAY_TEMPLATE_REGISTRY, l as ARRAY_ITEM_ID_GENERATOR, n as getNormalizedArrayMetadata, o as getFieldValueHandling, p as getFieldDefaultValue, q as isGroupField, f as DfFieldOutlet, s as createArrayItemIdGenerator } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-CfbmSRM_.mjs';
+import { signal, computed, runInInjectionContext, Injector, linkedSignal, inject, DestroyRef, EnvironmentInjector, input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { O as RootFormRegistryService, ax as isEqual, aL as mapFieldToInputs, v as FIELD_SIGNAL_CONTEXT, e as ARRAY_CONTEXT, G as GROUP_CONTEXT, a5 as createHiddenSignal, a6 as createRenderReadySignal, s as DynamicFormLogger, ao as injectFieldRegistry, ap as injectFieldSignalContext, E as EventBus, g as ArrayItemRegistryService, ak as getNormalizedArrayMetadata, aj as getFieldValueHandling, ai as getFieldDefaultValue, aA as isGroupField, o as DfFieldOutlet } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-Be1Lk0qR.mjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { of, from, map, catchError, forkJoin, filter, firstValueFrom, tap } from 'rxjs';
 import { explicitEffect } from 'ngxtension/explicit-effect';
-import { e as emitComponentInitialized } from './ng-forge-dynamic-forms-emit-initialization-DqQ8BA4W.mjs';
+import { e as emitComponentInitialized } from './ng-forge-dynamic-forms-emit-initialization-9l5gPNQc.mjs';
+
+class ArrayFieldStateMachine {
+    _state = signal('idle', ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
+    _runId = signal(0, ...(ngDevMode ? [{ debugName: "_runId" }] : /* istanbul ignore next */ []));
+    lastEmittedRunId = -1;
+    _hasEverEmitted = false;
+    state = this._state.asReadonly();
+    runId = this._runId.asReadonly();
+    /** True after the first `componentInitialized` pulse has fired for this component. */
+    get hasEverEmitted() {
+        return this._hasEverEmitted;
+    }
+    dispatch(op) {
+        const nextId = this._runId() + 1;
+        this._runId.set(nextId);
+        switch (op.kind) {
+            case 'clear':
+            case 'initial':
+            case 'recreate':
+                this._state.set('pending');
+                break;
+            case 'append':
+                // append doesn't reset state — mirrors today's behavior where
+                // appendItems leaves the init-cycle tracking alone.
+                break;
+        }
+        return {
+            id: nextId,
+            isStale: () => this._runId() !== nextId,
+            resolve: () => {
+                if (this._runId() === nextId && this._state() === 'pending') {
+                    this._state.set('settled');
+                }
+            },
+        };
+    }
+    /**
+     * Edge-trigger for the emit-effect. Returns true exactly once per `settled` run
+     * when `allReady` is true. Side-effect: records the run as emitted and transitions
+     * the state back to `idle`. Subsequent calls without a fresh dispatch return false.
+     */
+    shouldEmit(allReady) {
+        if (this._state() !== 'settled' || !allReady)
+            return false;
+        if (this.lastEmittedRunId === this._runId())
+            return false;
+        this.lastEmittedRunId = this._runId();
+        this._hasEverEmitted = true;
+        this._state.set('idle');
+        return true;
+    }
+}
 
 /**
  * Safely extracts an array value from a model object.
@@ -173,9 +225,22 @@ function createItemInjector(options) {
                 deps: [Injector],
             },
             { provide: ARRAY_CONTEXT, useValue: arrayContext },
+            // Reset GROUP_CONTEXT at the array boundary: inner groups inside each
+            // item start their path fresh, matching how value-derivation and
+            // property-derivation collectors key entries
+            // (`{arrayKey}.$.{innerGroupPath}.{fieldKey}`). Without this, an outer
+            // group around the array would leak into descendants' DOM IDs and
+            // override-store keys, drifting from the collector.
+            { provide: GROUP_CONTEXT, useValue: EMPTY_GROUP_CONTEXT },
         ],
     });
 }
+/**
+ * Sentinel `GroupContext` provided at array item boundaries. Static `signal('')`
+ * means `applyGroupPrefix` no-ops (empty path) and any inner group composes its
+ * own path from this empty base.
+ */
+const EMPTY_GROUP_CONTEXT = { groupPath: signal('') };
 
 /**
  * Resolves a single array item with all its fields for declarative rendering.
@@ -185,12 +250,14 @@ function createItemInjector(options) {
  * Supports multiple sibling templates (e.g., name + email without a wrapper).
  */
 function resolveArrayItem(options) {
-    const { index, templates, arrayField, itemPositionMap, parentFieldSignalContext, parentInjector, registry, destroyRef, loadTypeComponent, generateItemId, primitiveFieldKey, } = options;
+    const { index, templates, arrayField, itemPositionMap, parentFieldSignalContext, parentInjector, registry, destroyRef, loadTypeComponent, generateItemId, existingItemId, primitiveFieldKey, } = options;
     if (templates.length === 0) {
         return of(undefined);
     }
-    // Generate ONE id for this array item (shared by all fields for tracking)
-    const itemId = generateItemId();
+    // Generate ONE id for this array item (shared by all fields for tracking), unless
+    // the caller is rehydrating an existing item — in which case reuse its id so the
+    // form-scoped template registry continues to map cleanly.
+    const itemId = existingItemId ?? generateItemId();
     // O(1) position lookup via Map instead of O(n) indexOf()
     const indexSignal = linkedSignal(() => {
         const positionMap = itemPositionMap();
@@ -225,6 +292,7 @@ function resolveArrayItem(options) {
             injector,
             inputs,
             renderReady: createRenderReadySignal(inputs, registry.get(template.type)),
+            hidden: createHiddenSignal(inputs),
         };
     }), catchError((error) => {
         if (!destroyRef.destroyed) {
@@ -319,13 +387,21 @@ class ArrayFieldComponent {
     // ─────────────────────────────────────────────────────────────────────────────
     destroyRef = inject(DestroyRef);
     fieldRegistry = injectFieldRegistry();
-    parentFieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
+    parentFieldSignalContext = injectFieldSignalContext();
     parentInjector = inject(Injector);
     environmentInjector = inject(EnvironmentInjector);
     eventBus = inject(EventBus);
     logger = inject(DynamicFormLogger);
-    templateRegistry = inject(ARRAY_TEMPLATE_REGISTRY);
-    generateItemId = inject(ARRAY_ITEM_ID_GENERATOR);
+    arrayItemRegistry = inject(ArrayItemRegistryService);
+    // Form-scoped slot keyed by the array's path. Survives this component's lifecycle so that
+    // `@if`-gated arrays can be destroyed and recreated without losing dynamically-added items.
+    // NOTE: keyed by `field().key` for now — nested arrays with the same key in different scopes
+    // would currently collide. Today's per-component-provider model has the same constraint
+    // (no nested-array hide/show tests exist). Path-aware keying is a follow-up.
+    // `field()` is `input.required`, so the slot reference is resolved lazily.
+    slot = computed(() => this.arrayItemRegistry.slotFor(this.field().key), ...(ngDevMode ? [{ debugName: "slot" }] : /* istanbul ignore next */ []));
+    /** Bound id-generator reference threaded to `resolveArrayItem` so callsites stay terse. */
+    generateItemId = () => this.slot().nextId();
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
@@ -453,9 +529,9 @@ class ArrayFieldComponent {
     // State Signals
     // ─────────────────────────────────────────────────────────────────────────────
     resolvedItemsSignal = signal([], ...(ngDevMode ? [{ debugName: "resolvedItemsSignal" }] : /* istanbul ignore next */ []));
-    updateVersion = signal(0, ...(ngDevMode ? [{ debugName: "updateVersion" }] : /* istanbul ignore next */ []));
-    pendingInitializationCycle = signal(null, ...(ngDevMode ? [{ debugName: "pendingInitializationCycle" }] : /* istanbul ignore next */ []));
-    settledInitializationCycle = signal(null, ...(ngDevMode ? [{ debugName: "settledInitializationCycle" }] : /* istanbul ignore next */ []));
+    // Explicit state machine for async resolution + componentInitialized emission.
+    // Replaces the prior updateVersion + pendingInitializationCycle + settledInitializationCycle trio.
+    fsm = new ArrayFieldStateMachine();
     /**
      * Map of item IDs to their current positions. O(1) lookup vs O(n) indexOf().
      * Used by child linkedSignals to reactively track their position in the array.
@@ -505,10 +581,9 @@ class ArrayFieldComponent {
         explicitEffect([this.arrayFieldTrees], ([fieldTrees]) => {
             this.performDifferentialUpdate(fieldTrees);
         });
-        explicitEffect([this.pendingInitializationCycle, this.settledInitializationCycle, this.allResolvedFieldsRenderReady], ([pending, settled, allReady]) => {
-            if (pending !== null && settled === pending && allReady) {
+        explicitEffect([this.fsm.state, this.allResolvedFieldsRenderReady], ([, allReady]) => {
+            if (this.fsm.shouldEmit(allReady)) {
                 emitComponentInitialized(this.eventBus, 'array', this.field().key, this.parentInjector);
-                this.pendingInitializationCycle.set(null);
             }
         });
     }
@@ -594,9 +669,9 @@ class ArrayFieldComponent {
                 }
             }
         }
-        // Increment version and create resolved item BEFORE updating value
-        this.updateVersion.update((v) => v + 1);
-        const currentVersion = this.updateVersion();
+        // Dispatch an append run — bumps runId so any in-flight differential update
+        // becomes stale, but state stays in its current phase.
+        const run = this.fsm.dispatch({ kind: 'append' });
         // Append auto-remove button to resolution templates (for rendering only)
         const resolveTemplates = this.withAutoRemove(templates);
         // Resolve the new item
@@ -616,11 +691,13 @@ class ArrayFieldComponent {
             this.logger.error(`Failed to resolve array item at index ${insertIndex}:`, error);
             return of(undefined);
         })));
-        if (currentVersion !== this.updateVersion() || !resolvedItem) {
+        if (run.isStale() || !resolvedItem) {
             return;
         }
         // Store the template used for this item so it can be re-used during recreate operations
-        this.templateRegistry.set(resolvedItem.id, templates);
+        this.slot().templates.set(resolvedItem.id, templates);
+        // Mirror the insert into slot.itemOrder so survival across hide/show stays consistent.
+        this.slot().itemOrder.splice(insertIndex, 0, resolvedItem.id);
         // Insert resolved item at correct position
         this.resolvedItemsSignal.update((current) => {
             const newItems = [...current];
@@ -638,31 +715,43 @@ class ArrayFieldComponent {
     performDifferentialUpdate(fieldTrees) {
         const resolvedItems = this.resolvedItemsSignal();
         const operation = determineDifferentialOperation(resolvedItems, fieldTrees.length);
-        // Only increment version for operations that do actual work.
-        // "none" operations (value-only changes) should not interfere with async add operations.
+        // "none" operations (value-only changes) don't kick the state machine — they shouldn't
+        // interfere with in-flight async resolutions.
         if (operation.type === 'none') {
             return;
         }
-        this.updateVersion.update((v) => v + 1);
-        const currentVersion = this.updateVersion();
         switch (operation.type) {
-            case 'clear':
+            case 'clear': {
                 // Clean up template registry when all items are removed
-                this.templateRegistry.clear();
+                this.slot().templates.clear();
                 this.resolvedItemsSignal.set([]);
-                if (resolvedItems.length === 0 && this.pendingInitializationCycle() === null && this.settledInitializationCycle() === null) {
-                    this.pendingInitializationCycle.set(currentVersion);
-                    this.settledInitializationCycle.set(currentVersion);
+                const run = this.fsm.dispatch({ kind: 'clear' });
+                // First-ever clear with no items: synthesize a resolve so the emit-effect fires
+                // the init pulse (matches the form-starts-empty case from the prior implementation).
+                if (resolvedItems.length === 0 && !this.fsm.hasEverEmitted) {
+                    run.resolve();
                 }
                 break;
-            case 'initial':
-                this.pendingInitializationCycle.set(currentVersion);
-                this.settledInitializationCycle.set(null);
-                void this.resolveAllItems(fieldTrees, currentVersion);
+            }
+            case 'initial': {
+                // If the slot has surviving state from a prior ArrayFieldComponent instance (same
+                // form, same array path, just a different render cycle — e.g. an `@if`-gated array
+                // that was hidden then re-shown), reuse the stored templates AND ids so dynamically-
+                // added items rebuild correctly. When the slot is empty this collapses to a normal
+                // initial resolve via Priority 2/3.
+                const slot = this.slot();
+                const useSurvival = slot.itemOrder.length === fieldTrees.length && fieldTrees.length > 0;
+                const positionalTemplates = useSurvival ? slot.itemOrder.map((id) => slot.templates.get(id)) : undefined;
+                const existingItemIds = useSurvival ? slot.itemOrder.slice() : undefined;
+                const run = this.fsm.dispatch({ kind: 'initial' });
+                void this.resolveAllItems(fieldTrees, run, positionalTemplates, existingItemIds);
                 break;
-            case 'append':
-                void this.appendItems(fieldTrees, operation.startIndex, operation.endIndex, currentVersion);
+            }
+            case 'append': {
+                const run = this.fsm.dispatch({ kind: 'append' });
+                void this.appendItems(fieldTrees, operation.startIndex, operation.endIndex, run);
                 break;
+            }
             case 'recreate': {
                 // Capture templates by item ID so each item is recreated with its original template,
                 // even after move operations that change positions. Registry entries (from dynamic adds
@@ -670,49 +759,53 @@ class ArrayFieldComponent {
                 const positionalTemplates = resolvedItems.map((item) => {
                     // Registry entries (from dynamic adds or moves) take priority;
                     // unmoved initial items return undefined → falls through to itemTemplates[idx] during resolve.
-                    return this.templateRegistry.get(item.id);
+                    return this.slot().templates.get(item.id);
                 });
                 this.resolvedItemsSignal.set([]);
-                this.pendingInitializationCycle.set(currentVersion);
-                this.settledInitializationCycle.set(null);
-                void this.resolveAllItems(fieldTrees, currentVersion, positionalTemplates);
+                const run = this.fsm.dispatch({ kind: 'recreate' });
+                void this.resolveAllItems(fieldTrees, run, positionalTemplates);
                 break;
             }
         }
     }
-    async resolveAllItems(fieldTrees, updateId, positionalTemplates) {
+    async resolveAllItems(fieldTrees, run, positionalTemplates, existingItemIds) {
         if (fieldTrees.length === 0) {
             this.resolvedItemsSignal.set([]);
             return;
         }
         // Wrap each item observable to catch individual errors
-        const safeItemObservables = fieldTrees.map((_, i) => this.createResolveItemObservable(i, positionalTemplates?.[i]).pipe(catchError((error) => {
+        const safeItemObservables = fieldTrees.map((_, i) => this.createResolveItemObservable(i, positionalTemplates?.[i], existingItemIds?.[i]).pipe(catchError((error) => {
             this.logger.error(`Failed to resolve array item at index ${i}:`, error);
             return of(undefined);
         })));
         try {
             const items = await firstValueFrom(forkJoin(safeItemObservables).pipe(map((items) => items.filter((item) => item !== undefined))));
-            if (updateId === this.updateVersion()) {
+            if (!run.isStale()) {
                 // Update template registry with new item IDs for dynamically added items
                 if (positionalTemplates) {
                     // Clean up old entries and add new ones
                     const newItemIds = new Set(items.map((item) => item.id));
-                    for (const existingId of this.templateRegistry.keys()) {
+                    for (const existingId of this.slot().templates.keys()) {
                         if (!newItemIds.has(existingId)) {
-                            this.templateRegistry.delete(existingId);
+                            this.slot().templates.delete(existingId);
                         }
                     }
                     items.forEach((item, idx) => {
                         const template = positionalTemplates[idx];
                         if (template) {
-                            this.templateRegistry.set(item.id, template);
+                            this.slot().templates.set(item.id, template);
                         }
                     });
                 }
+                // Mirror the resolved item ids into the slot's itemOrder so a future component
+                // recreate (e.g. after an @if hide cycle) can rehydrate via the survival path.
+                const slot = this.slot();
+                slot.itemOrder.length = 0;
+                for (const item of items)
+                    slot.itemOrder.push(item.id);
                 this.resolvedItemsSignal.set(items);
-                if (this.pendingInitializationCycle() === updateId) {
-                    this.settledInitializationCycle.set(updateId);
-                }
+                // Mark this run settled so the emit-effect can fire componentInitialized once allReady is true.
+                run.resolve();
             }
         }
         catch (err) {
@@ -720,7 +813,7 @@ class ArrayFieldComponent {
             this.resolvedItemsSignal.set([]);
         }
     }
-    async appendItems(fieldTrees, startIndex, endIndex, updateId) {
+    async appendItems(fieldTrees, startIndex, endIndex, run) {
         const itemsToResolve = fieldTrees.slice(startIndex, endIndex);
         if (itemsToResolve.length === 0)
             return;
@@ -734,7 +827,10 @@ class ArrayFieldComponent {
         });
         try {
             const newItems = await firstValueFrom(forkJoin(safeItemObservables).pipe(map((items) => items.filter((item) => item !== undefined))));
-            if (updateId === this.updateVersion()) {
+            if (!run.isStale()) {
+                const slot = this.slot();
+                for (const item of newItems)
+                    slot.itemOrder.push(item.id);
                 this.resolvedItemsSignal.update((current) => [...current, ...newItems]);
             }
         }
@@ -755,7 +851,7 @@ class ArrayFieldComponent {
      *    Priority 1.
      * 4. Return undefined (item cannot be resolved without a template)
      */
-    createResolveItemObservable(index, overrideTemplate) {
+    createResolveItemObservable(index, overrideTemplate, existingItemId) {
         const itemTemplates = this.itemTemplates();
         const primitiveKey = this.primitiveFieldKey();
         // Priority 1: Use override template (from recreate with stored templates)
@@ -771,6 +867,7 @@ class ArrayFieldComponent {
                 destroyRef: this.destroyRef,
                 loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
                 generateItemId: this.generateItemId,
+                existingItemId,
                 primitiveFieldKey: primitiveKey,
             });
         }
@@ -788,6 +885,7 @@ class ArrayFieldComponent {
                 destroyRef: this.destroyRef,
                 loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
                 generateItemId: this.generateItemId,
+                existingItemId,
                 primitiveFieldKey: primitiveKey,
             });
         }
@@ -806,12 +904,13 @@ class ArrayFieldComponent {
                 destroyRef: this.destroyRef,
                 loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
                 generateItemId: this.generateItemId,
+                existingItemId,
                 primitiveFieldKey: primitiveKey,
             }).pipe(tap((item) => {
                 // Register the fallback template against the generated item id so subsequent
                 // recreates hit Priority 1 instead of re-resolving via this branch.
                 if (item)
-                    this.templateRegistry.set(item.id, fallback);
+                    this.slot().templates.set(item.id, fallback);
             }));
         }
         // Priority 4: no template available. Full-API arrays are positional by design —
@@ -881,8 +980,8 @@ class ArrayFieldComponent {
         const hi = Math.max(fromIndex, toIndex);
         for (let i = lo; i <= hi; i++) {
             const item = currentItems[i];
-            if (item && !this.templateRegistry.has(item.id) && i < rawTemplates.length) {
-                this.templateRegistry.set(item.id, rawTemplates[i]);
+            if (item && !this.slot().templates.has(item.id) && i < rawTemplates.length) {
+                this.slot().templates.set(item.id, rawTemplates[i]);
             }
         }
         // Reorder resolvedItems — splice preserves object identity (no destroy/recreate)
@@ -892,6 +991,8 @@ class ArrayFieldComponent {
             newItems.splice(toIndex, 0, moved);
             return newItems;
         });
+        // Keep slot.itemOrder in sync so the post-recreate survival path sees the moved order.
+        this.slot().moveItem(fromIndex, toIndex);
         // Reorder form value array the same way
         const newArray = [...currentArray];
         const [movedValue] = newArray.splice(fromIndex, 1);
@@ -935,8 +1036,11 @@ class ArrayFieldComponent {
         // no longer exists, params returns undefined, cancelling the pending validation automatically.
         const removedItem = this.resolvedItemsSignal()[removeIndex];
         if (removedItem) {
-            this.templateRegistry.delete(removedItem.id);
+            this.slot().templates.delete(removedItem.id);
         }
+        // Keep slot.itemOrder in sync so the post-recreate survival path doesn't try to
+        // restore an id that's no longer in the form value.
+        this.slot().removeAt(removeIndex);
         this.resolvedItemsSignal.update((current) => {
             const newItems = [...current];
             newItems.splice(removeIndex, 1);
@@ -949,13 +1053,8 @@ class ArrayFieldComponent {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         parentForm().value.set({ ...currentValue, [arrayKey]: newArray });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ArrayFieldComponent, isStandalone: true, selector: "array-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, providers: [
-            // Each array gets its own template registry to track templates used for dynamically added items
-            { provide: ARRAY_TEMPLATE_REGISTRY, useFactory: () => new Map() },
-            // Each array gets its own ID generator for SSR hydration compatibility
-            { provide: ARRAY_ITEM_ID_GENERATOR, useFactory: createArrayItemIdGenerator },
-        ], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ArrayFieldComponent, isStandalone: true, selector: "array-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, ngImport: i0, template: `
     @for (item of resolvedItems(); track item.id; let i = $index) {
       <div
         class="df-array-item"
@@ -965,13 +1064,15 @@ class ArrayFieldComponent {
         [attr.data-array-item-index]="i"
       >
         @for (field of item.fields; track $index) {
-          <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+          @if (!field.hidden()) {
+            <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+          }
         }
       </div>
     }
-  `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{display:grid;grid-template-columns:1fr;gap:var(--df-array-item-gap, var(--df-grid-row-gap, .5rem));width:100%}:host>*{grid-column:1/-1}:host.df-container-hidden{display:none}.df-array-item{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}.df-array-item>*{grid-column:1/-1}\n"], dependencies: [{ kind: "directive", type: DfFieldOutlet, selector: "[dfFieldOutlet]", inputs: ["dfFieldOutlet", "dfFieldOutletEnvironmentInjector"] }], 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-array-item-gap, var(--df-grid-row-gap, .5rem));width:100%}:host>*{grid-column:1/-1}:host.df-container-hidden{display:none}.df-array-item{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}.df-array-item>*{grid-column:1/-1}\n"], dependencies: [{ kind: "directive", type: DfFieldOutlet, selector: "[dfFieldOutlet]", inputs: ["dfFieldOutlet", "dfFieldOutletEnvironmentInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ArrayFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ArrayFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'array-field', imports: [DfFieldOutlet], template: `
     @for (item of resolvedItems(); track item.id; let i = $index) {
@@ -983,7 +1084,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
         [attr.data-array-item-index]="i"
       >
         @for (field of item.fields; track $index) {
-          <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+          @if (!field.hidden()) {
+            <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+          }
         }
       </div>
     }
@@ -993,13 +1096,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         '[attr.aria-hidden]': 'hidden() || null',
                         '[id]': '`${key()}`',
                         '[attr.data-testid]': 'key()',
-                    }, providers: [
-                        // Each array gets its own template registry to track templates used for dynamically added items
-                        { provide: ARRAY_TEMPLATE_REGISTRY, useFactory: () => new Map() },
-                        // Each array gets its own ID generator for SSR hydration compatibility
-                        { provide: ARRAY_ITEM_ID_GENERATOR, useFactory: createArrayItemIdGenerator },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{display:grid;grid-template-columns:1fr;gap:var(--df-array-item-gap, var(--df-grid-row-gap, .5rem));width:100%}:host>*{grid-column:1/-1}:host.df-container-hidden{display:none}.df-array-item{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}.df-array-item>*{grid-column:1/-1}\n"] }]
+                    }, 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-array-item-gap, var(--df-grid-row-gap, .5rem));width:100%}:host>*{grid-column:1/-1}:host.df-container-hidden{display:none}.df-array-item{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}.df-array-item>*{grid-column:1/-1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }] } });
 
 export { ArrayFieldComponent, ArrayFieldComponent as default };
-//# sourceMappingURL=ng-forge-dynamic-forms-array-field.component-us7mQtVQ.mjs.map
+//# sourceMappingURL=ng-forge-dynamic-forms-array-field.component-Tw49K5kz.mjs.map