@ng-forge/dynamic-forms 1.3.0-next.2 → 1.3.0-next.3

package/fesm2022/ng-forge-dynamic-forms-array-field.component-CSCKq_1K.mjs

@@ -1,750 +0,0 @@
-import * as i0 from '@angular/core';
-import { signal, computed, runInInjectionContext, Injector, linkedSignal, inject, DestroyRef, EnvironmentInjector, input, ChangeDetectionStrategy, Component } from '@angular/core';
-import { m as mapFieldToInputs, f as createHiddenSignal, g as createRenderReadySignal, i as injectFieldRegistry, A as ArrayItemRegistryService, h as getNormalizedArrayMetadata, j as emitComponentInitialized, d as initializationComponentPath, k as getFieldDefaultValue, D as DfFieldOutlet } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-CXQe_5td.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 { isEqual, FIELD_SIGNAL_CONTEXT, ARRAY_CONTEXT, GROUP_CONTEXT, DynamicFormLogger, injectFieldSignalContext, EventBus, getFieldValueHandling, isGroupField } from '@ng-forge/dynamic-forms/internal';
-
-class ArrayFieldStateMachine {
-    _state = signal('idle', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
-    _runId = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_runId" }] : /* istanbul ignore next */ []));
-    lastEmittedRunId = -1;
-    _hasEverEmitted = false;
-    state = this._state.asReadonly();
-    runId = this._runId.asReadonly();
-        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':
-                                                break;
-        }
-        return {
-            id: nextId,
-            isStale: () => this._runId() !== nextId,
-            resolve: () => {
-                if (this._runId() === nextId && this._state() === 'pending') {
-                    this._state.set('settled');
-                }
-            },
-        };
-    }
-        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;
-    }
-}
-
-function getArrayValue(value, key) {
-    const arrayValue = value?.[key];
-    return Array.isArray(arrayValue) ? arrayValue : [];
-}
-function determineDifferentialOperation(currentItems, newLength) {
-    const currentLength = currentItems.length;
-    if (newLength === 0) {
-        return { type: 'clear' };
-    }
-    if (currentLength === 0) {
-        return { type: 'initial', fieldTreesLength: newLength };
-    }
-                if (newLength > currentLength) {
-                return { type: 'append', startIndex: currentLength, endIndex: newLength };
-    }
-    if (newLength < currentLength) {
-                                        return { type: 'recreate' };
-    }
-        return { type: 'none' };
-}
-
-function createArrayItemInjectorAndInputs(options) {
-    const { template, indexSignal, parentFieldSignalContext, parentInjector, registry, arrayField, primitiveFieldKey } = options;
-                        const itemFormAccessor = computed(() => {
-        const parentForm = parentFieldSignalContext.form;
-        const index = indexSignal();
-                const arrayFieldTree = parentForm[arrayField.key];
-        if (!arrayFieldTree) {
-            return undefined;
-        }
-        return arrayFieldTree[index];
-    }, { ...(ngDevMode ? { debugName: "itemFormAccessor" } : /* istanbul ignore next */ {}), equal: isEqual });
-    const injector = createItemInjector({
-        itemFormAccessor,
-        indexSignal,
-        parentFieldSignalContext,
-        parentInjector,
-        arrayField,
-        primitiveFieldKey,
-    });
-            const inputs = runInInjectionContext(injector, () => {
-        return mapFieldToInputs(template, registry);
-    });
-    return { injector, inputs };
-}
-function createItemInjector(options) {
-    const { itemFormAccessor, indexSignal, parentFieldSignalContext, parentInjector, arrayField, primitiveFieldKey } = options;
-            const arrayContext = {
-        arrayKey: arrayField.key,
-        index: indexSignal,
-        get formValue() {
-            return parentFieldSignalContext.value();
-        },
-        field: arrayField,
-    };
-            let cachedPrimitiveRaw;
-    let cachedPrimitiveWrapped;
-    return Injector.create({
-        parent: parentInjector,
-        providers: [
-            {
-                provide: FIELD_SIGNAL_CONTEXT,
-                                                useFactory: (injector) => ({
-                    injector,
-                    value: parentFieldSignalContext.value,
-                                                                                defaultValues: () => ({}),
-                    get form() {
-                        const raw = itemFormAccessor();
-                        if (!raw) {
-                                                                                                                                            return {};
-                        }
-                                                                                                                        if (primitiveFieldKey) {
-                                                        if (raw !== cachedPrimitiveRaw) {
-                                cachedPrimitiveRaw = raw;
-                                cachedPrimitiveWrapped = { [primitiveFieldKey]: raw };
-                            }
-                            return cachedPrimitiveWrapped;
-                        }
-                        return raw;
-                    },
-                }),
-                deps: [Injector],
-            },
-            { provide: ARRAY_CONTEXT, useValue: arrayContext },
-                                                                                    { provide: GROUP_CONTEXT, useValue: EMPTY_GROUP_CONTEXT },
-        ],
-    });
-}
-const EMPTY_GROUP_CONTEXT = { groupPath: signal('') };
-
-function resolveArrayItem(options) {
-    const { index, templates, arrayField, itemPositionMap, parentFieldSignalContext, parentInjector, registry, destroyRef, loadTypeComponent, generateItemId, existingItemId, primitiveFieldKey, } = options;
-    if (templates.length === 0) {
-        return of(undefined);
-    }
-                const itemId = existingItemId ?? generateItemId();
-        const indexSignal = linkedSignal(() => {
-        const positionMap = itemPositionMap();
-        return positionMap.get(itemId) ?? index;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "indexSignal" }] : /* istanbul ignore next */ []));
-        const fieldObservables = templates.map((template) => from(loadTypeComponent(template.type)).pipe(map((component) => {
-        if (destroyRef.destroyed) {
-            return undefined;
-        }
-                if (!component) {
-            return undefined;
-        }
-        const { injector, inputs } = createArrayItemInjectorAndInputs({
-            template,
-            indexSignal,
-            parentFieldSignalContext,
-            parentInjector,
-            registry,
-            arrayField,
-            primitiveFieldKey,
-        });
-                if (!inputs) {
-            return undefined;
-        }
-        return {
-            key: template.key,
-            fieldDef: template,
-            component,
-            injector,
-            inputs,
-            renderReady: createRenderReadySignal(inputs, registry.get(template.type)),
-            hidden: createHiddenSignal(inputs),
-        };
-    }), catchError((error) => {
-        if (!destroyRef.destroyed) {
-            const logger = parentInjector.get(DynamicFormLogger);
-            logger.error(`Failed to load component for field type '${template.type}' at index ${index} ` +
-                `within array '${arrayField.key}'. Ensure the field type is registered in your field registry.`, error);
-        }
-        return of(undefined);
-    })));
-    return forkJoin(fieldObservables).pipe(map((fields) => {
-        const validFields = fields.filter((f) => f !== undefined);
-                if (validFields.length === 0) {
-            return undefined;
-        }
-        return {
-            id: itemId,
-            fields: validFields,
-        };
-    }));
-}
-
-const ARRAY_EVENT_TYPES = [
-    'append-array-item',
-    'prepend-array-item',
-    'insert-array-item',
-    'move-array-item',
-    'pop-array-item',
-    'shift-array-item',
-    'remove-at-index',
-];
-function toArrayAction(event) {
-    switch (event.type) {
-        case 'append-array-item':
-            return { action: 'add', template: event.template };
-        case 'prepend-array-item':
-            return { action: 'add', template: event.template, index: 0 };
-        case 'insert-array-item':
-            return { action: 'add', template: event.template, index: event.index };
-        case 'move-array-item':
-            return { action: 'move', fromIndex: event.fromIndex, toIndex: event.toIndex };
-        case 'pop-array-item':
-            return { action: 'remove' };
-        case 'shift-array-item':
-            return { action: 'remove', index: 0 };
-        case 'remove-at-index':
-            return { action: 'remove', index: event.index };
-    }
-}
-function observeArrayActions(eventBus, arrayKey) {
-    return eventBus.on(ARRAY_EVENT_TYPES).pipe(filter((event) => event.arrayKey === arrayKey()), map(toArrayAction));
-}
-
-class ArrayFieldComponent {
-                destroyRef = inject(DestroyRef);
-    fieldRegistry = injectFieldRegistry();
-    parentFieldSignalContext = injectFieldSignalContext();
-    parentInjector = inject(Injector);
-    environmentInjector = inject(EnvironmentInjector);
-    eventBus = inject(EventBus);
-    logger = inject(DynamicFormLogger);
-    arrayItemRegistry = inject(ArrayItemRegistryService);
-    groupContext = inject(GROUP_CONTEXT, { optional: true });
-                            slot = computed(() => this.arrayItemRegistry.slotFor(this.field().key), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "slot" }] : /* istanbul ignore next */ []));
-        generateItemId = () => this.slot().nextId();
-                field = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-    key = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    className = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
-    hidden = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
-                hostClasses = computed(() => {
-        const base = 'df-field df-array';
-        const custom = this.className();
-        return custom ? `${base} ${custom}` : base;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    rawFieldRegistry = computed(() => this.fieldRegistry.raw, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : /* istanbul ignore next */ []));
-        autoRemoveButton = computed(() => {
-        const metadata = getNormalizedArrayMetadata(this.field());
-        return metadata?.autoRemoveButton;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "autoRemoveButton" }] : /* istanbul ignore next */ []));
-        primitiveFieldKey = linkedSignal(() => {
-                const metadata = getNormalizedArrayMetadata(this.field());
-        if (metadata?.primitiveFieldKey) {
-            return metadata.primitiveFieldKey;
-        }
-                const definitions = this.field().fields || [];
-        if (definitions.length > 0 && !Array.isArray(definitions[0])) {
-            return definitions[0].key;
-        }
-        return undefined;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "primitiveFieldKey" }] : /* istanbul ignore next */ []));
-        rawItemTemplates = computed(() => {
-        const arrayField = this.field();
-        const definitions = arrayField.fields || [];
-        return definitions.map((def) => {
-            return (Array.isArray(def) ? def : [def]);
-        });
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rawItemTemplates" }] : /* istanbul ignore next */ []));
-        fallbackTemplate = computed(() => {
-        const raw = getNormalizedArrayMetadata(this.field())?.template;
-        if (!raw)
-            return undefined;
-        return (Array.isArray(raw) ? [...raw] : [raw]);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fallbackTemplate" }] : /* istanbul ignore next */ []));
-        itemTemplates = computed(() => {
-        const raw = this.rawItemTemplates();
-        const removeButton = this.autoRemoveButton();
-        if (!removeButton)
-            return raw;
-        return raw.map((normalized) => {
-            return [...normalized, removeButton];
-        });
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "itemTemplates" }] : /* istanbul ignore next */ []));
-        arrayFieldTree = computed(() => {
-        const parentForm = this.parentFieldSignalContext.form;
-        return parentForm[this.field().key];
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "arrayFieldTree" }] : /* istanbul ignore next */ []));
-        currentArrayValue = computed(() => {
-        const tree = this.arrayFieldTree();
-        if (tree) {
-            const value = tree().value();
-            return Array.isArray(value) ? value : [];
-        }
-        return getArrayValue(this.parentFieldSignalContext.value(), this.field().key);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentArrayValue" }] : /* istanbul ignore next */ []));
-    arrayFieldTrees = computed(() => {
-        const arrayValue = this.currentArrayValue();
-        if (arrayValue.length === 0)
-            return [];
-        const arrayFieldTree = this.arrayFieldTree();
-        if (!arrayFieldTree)
-            return arrayValue.map(() => null);
-                const items = [];
-        for (let i = 0; i < arrayValue.length; i++) {
-                        const itemFieldTree = arrayFieldTree[i];
-            items.push(itemFieldTree ?? null);
-        }
-        return items;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "arrayFieldTrees" }] : /* istanbul ignore next */ []));
-                resolvedItemsSignal = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedItemsSignal" }] : /* istanbul ignore next */ []));
-            fsm = new ArrayFieldStateMachine();
-        itemPositionMap = computed(() => {
-        const items = this.resolvedItemsSignal();
-        return new Map(items.map((item, idx) => [item.id, idx]));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "itemPositionMap" }] : /* istanbul ignore next */ []));
-        resolvedItems = computed(() => this.resolvedItemsSignal(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
-    allResolvedFieldsRenderReady = computed(() => this.resolvedItems().every((item) => item.fields.every((field) => field.renderReady())), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "allResolvedFieldsRenderReady" }] : /* istanbul ignore next */ []));
-        atMaxLength = computed(() => {
-        const maxLength = this.field().maxLength;
-        if (maxLength === undefined)
-            return false;
-        return this.currentArrayValue().length >= maxLength;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "atMaxLength" }] : /* istanbul ignore next */ []));
-                    autoRemoveCache = new WeakMap();
-                constructor() {
-        this.setupEffects();
-        this.setupEventHandlers();
-    }
-                setupEffects() {
-                explicitEffect([this.arrayFieldTrees], ([fieldTrees]) => {
-            this.performDifferentialUpdate(fieldTrees);
-        });
-        explicitEffect([this.fsm.state, this.allResolvedFieldsRenderReady], ([, allReady]) => {
-            if (this.fsm.shouldEmit(allReady)) {
-                emitComponentInitialized(this.eventBus, 'array', initializationComponentPath(this.field().key, this.groupContext?.groupPath()), this.parentInjector);
-            }
-        });
-    }
-    setupEventHandlers() {
-        observeArrayActions(this.eventBus, () => this.key())
-            .pipe(takeUntilDestroyed())
-            .subscribe((action) => {
-            if (action.action === 'add') {
-                                const templates = Array.isArray(action.template) ? action.template : action.template ? [action.template] : [];
-                if (templates.length === 0) {
-                    this.logger.error(`Cannot add item to array '${this.key()}': template is REQUIRED. ` +
-                        'Buttons must specify an explicit template property. ' +
-                        'There is no default template - each add operation must provide its own.');
-                    return;
-                }
-                void this.handleAddFromEvent(action.template, action.index);
-            }
-            else if (action.action === 'move') {
-                this.moveItem(action.fromIndex, action.toIndex);
-            }
-            else {
-                this.removeItem(action.index);
-            }
-        });
-    }
-        async handleAddFromEvent(template, index) {
-                                        const templates = Array.isArray(template) ? [...template] : [template];
-        const isSingleField = !Array.isArray(template);
-        const isPrimitiveItem = isSingleField && getFieldValueHandling(templates[0].type, this.rawFieldRegistry()) !== 'flatten';
-                        if (isPrimitiveItem && templates[0].key && !this.primitiveFieldKey()) {
-            this.primitiveFieldKey.set(templates[0].key);
-        }
-        if (templates.length === 0) {
-            this.logger.error(`Cannot add item to array '${this.field().key}': no field templates provided. ` +
-                'Buttons must specify an explicit template property when adding array items.');
-            return;
-        }
-        const arrayKey = this.field().key;
-        const parentForm = this.parentFieldSignalContext.form;
-        const currentValue = parentForm().value();
-        const currentArray = getArrayValue(currentValue, arrayKey);
-        const insertIndex = index !== undefined ? Math.min(index, currentArray.length) : currentArray.length;
-                let value;
-        if (isPrimitiveItem) {
-                        value = getFieldDefaultValue(templates[0], this.rawFieldRegistry());
-        }
-        else {
-                        value = {};
-            for (const templateField of templates) {
-                const rawValue = getFieldDefaultValue(templateField, this.rawFieldRegistry());
-                const valueHandling = getFieldValueHandling(templateField.type, this.rawFieldRegistry());
-                const isContainer = templateField.type === 'group' || templateField.type === 'row' || templateField.type === 'container';
-                if (isContainer) {
-                    if (isGroupField(templateField)) {
-                                                value = { ...value, [templateField.key]: rawValue };
-                    }
-                    else {
-                                                value = { ...value, ...rawValue };
-                    }
-                }
-                else if (valueHandling === 'include' && templateField.key) {
-                    value = { ...value, [templateField.key]: rawValue };
-                }
-            }
-        }
-                        const run = this.fsm.dispatch({ kind: 'append' });
-                const resolveTemplates = this.withAutoRemove(templates);
-                const resolvedItem = await firstValueFrom(resolveArrayItem({
-            index: insertIndex,
-            templates: resolveTemplates,
-            arrayField: this.field(),
-            itemPositionMap: this.itemPositionMap,
-            parentFieldSignalContext: this.parentFieldSignalContext,
-            parentInjector: this.parentInjector,
-            registry: this.rawFieldRegistry(),
-            destroyRef: this.destroyRef,
-            loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
-            generateItemId: this.generateItemId,
-            primitiveFieldKey: isPrimitiveItem ? templates[0].key : undefined,
-        }).pipe(catchError((error) => {
-            this.logger.error(`Failed to resolve array item at index ${insertIndex}:`, error);
-            return of(undefined);
-        })));
-        if (run.isStale() || !resolvedItem) {
-            return;
-        }
-                this.slot().templates.set(resolvedItem.id, templates);
-                this.slot().itemOrder.splice(insertIndex, 0, resolvedItem.id);
-                this.resolvedItemsSignal.update((current) => {
-            const newItems = [...current];
-            newItems.splice(insertIndex, 0, resolvedItem);
-            return newItems;
-        });
-                const newArray = [...currentArray];
-        newArray.splice(insertIndex, 0, value);
-                                parentForm().value.set({ ...currentValue, [arrayKey]: newArray });
-    }
-    performDifferentialUpdate(fieldTrees) {
-        const resolvedItems = this.resolvedItemsSignal();
-        const operation = determineDifferentialOperation(resolvedItems, fieldTrees.length);
-                        if (operation.type === 'none') {
-            return;
-        }
-        switch (operation.type) {
-            case 'clear': {
-                                this.slot().templates.clear();
-                this.resolvedItemsSignal.set([]);
-                const run = this.fsm.dispatch({ kind: 'clear' });
-                                                if (resolvedItems.length === 0 && !this.fsm.hasEverEmitted) {
-                    run.resolve();
-                }
-                break;
-            }
-            case 'initial': {
-                                                                                                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': {
-                const run = this.fsm.dispatch({ kind: 'append' });
-                void this.appendItems(fieldTrees, operation.startIndex, operation.endIndex, run);
-                break;
-            }
-            case 'recreate': {
-                                                                const positionalTemplates = resolvedItems.map((item) => {
-                                                            return this.slot().templates.get(item.id);
-                });
-                this.resolvedItemsSignal.set([]);
-                const run = this.fsm.dispatch({ kind: 'recreate' });
-                void this.resolveAllItems(fieldTrees, run, positionalTemplates);
-                break;
-            }
-        }
-    }
-    async resolveAllItems(fieldTrees, run, positionalTemplates, existingItemIds) {
-        if (fieldTrees.length === 0) {
-            this.resolvedItemsSignal.set([]);
-            return;
-        }
-                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 (!run.isStale()) {
-                                if (positionalTemplates) {
-                                        const newItemIds = new Set(items.map((item) => item.id));
-                    for (const existingId of this.slot().templates.keys()) {
-                        if (!newItemIds.has(existingId)) {
-                            this.slot().templates.delete(existingId);
-                        }
-                    }
-                    items.forEach((item, idx) => {
-                        const template = positionalTemplates[idx];
-                        if (template) {
-                            this.slot().templates.set(item.id, template);
-                        }
-                    });
-                }
-                                                const slot = this.slot();
-                slot.itemOrder.length = 0;
-                for (const item of items)
-                    slot.itemOrder.push(item.id);
-                this.resolvedItemsSignal.set(items);
-                                run.resolve();
-            }
-        }
-        catch (err) {
-            this.logger.error('Failed to resolve array items:', err);
-            this.resolvedItemsSignal.set([]);
-        }
-    }
-    async appendItems(fieldTrees, startIndex, endIndex, run) {
-        const itemsToResolve = fieldTrees.slice(startIndex, endIndex);
-        if (itemsToResolve.length === 0)
-            return;
-                const safeItemObservables = itemsToResolve.map((_, i) => {
-            const index = startIndex + i;
-            return this.createResolveItemObservable(index).pipe(catchError((error) => {
-                this.logger.error(`Failed to resolve array item at index ${index}:`, error);
-                return of(undefined);
-            }));
-        });
-        try {
-            const newItems = await firstValueFrom(forkJoin(safeItemObservables).pipe(map((items) => items.filter((item) => item !== undefined))));
-            if (!run.isStale()) {
-                const slot = this.slot();
-                for (const item of newItems)
-                    slot.itemOrder.push(item.id);
-                this.resolvedItemsSignal.update((current) => [...current, ...newItems]);
-            }
-        }
-        catch (err) {
-            this.logger.error('Failed to append array items:', err);
-        }
-    }
-        createResolveItemObservable(index, overrideTemplate, existingItemId) {
-        const itemTemplates = this.itemTemplates();
-        const primitiveKey = this.primitiveFieldKey();
-                if (overrideTemplate && overrideTemplate.length > 0) {
-            return resolveArrayItem({
-                index,
-                templates: this.withAutoRemove(overrideTemplate),
-                arrayField: this.field(),
-                itemPositionMap: this.itemPositionMap,
-                parentFieldSignalContext: this.parentFieldSignalContext,
-                parentInjector: this.parentInjector,
-                registry: this.rawFieldRegistry(),
-                destroyRef: this.destroyRef,
-                loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
-                generateItemId: this.generateItemId,
-                existingItemId,
-                primitiveFieldKey: primitiveKey,
-            });
-        }
-                const templates = itemTemplates[index];
-        if (templates && templates.length > 0) {
-            return resolveArrayItem({
-                index,
-                templates: templates,
-                arrayField: this.field(),
-                itemPositionMap: this.itemPositionMap,
-                parentFieldSignalContext: this.parentFieldSignalContext,
-                parentInjector: this.parentInjector,
-                registry: this.rawFieldRegistry(),
-                destroyRef: this.destroyRef,
-                loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
-                generateItemId: this.generateItemId,
-                existingItemId,
-                primitiveFieldKey: primitiveKey,
-            });
-        }
-                        const fallback = this.fallbackTemplate();
-        if (fallback && fallback.length > 0) {
-            return resolveArrayItem({
-                index,
-                templates: this.withAutoRemove(fallback),
-                arrayField: this.field(),
-                itemPositionMap: this.itemPositionMap,
-                parentFieldSignalContext: this.parentFieldSignalContext,
-                parentInjector: this.parentInjector,
-                registry: this.rawFieldRegistry(),
-                destroyRef: this.destroyRef,
-                loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
-                generateItemId: this.generateItemId,
-                existingItemId,
-                primitiveFieldKey: primitiveKey,
-            }).pipe(tap((item) => {
-                                                if (item)
-                    this.slot().templates.set(item.id, fallback);
-            }));
-        }
-                                                this.logger.warn(`No template found for array item at index ${index}. This likely occured for a Full-API array element that was created from the DynamicForm's value being set directly, which is currently not supported. Consider using the simplified array API.`);
-        return of(undefined);
-    }
-        withAutoRemove(templates) {
-        const removeButton = this.autoRemoveButton();
-        if (!removeButton)
-            return templates;
-        let cached = this.autoRemoveCache.get(templates);
-        if (cached)
-            return cached;
-        cached = [...templates, removeButton];
-        this.autoRemoveCache.set(templates, cached);
-        return cached;
-    }
-        moveItem(fromIndex, toIndex) {
-        const arrayKey = this.field().key;
-        const parentForm = this.parentFieldSignalContext.form;
-        const currentValue = parentForm().value();
-        const currentArray = getArrayValue(currentValue, arrayKey);
-        const length = currentArray.length;
-        if (fromIndex < 0 || fromIndex >= length) {
-            this.logger.warn(`moveArrayItem fromIndex ${fromIndex} is out of bounds for array '${arrayKey}' with length ${length}. Operation skipped.`);
-            return;
-        }
-        if (toIndex < 0 || toIndex >= length) {
-            this.logger.warn(`moveArrayItem toIndex ${toIndex} is out of bounds for array '${arrayKey}' with length ${length}. Operation skipped.`);
-            return;
-        }
-        if (fromIndex === toIndex)
-            return;
-                                                                const rawTemplates = this.rawItemTemplates();
-        const currentItems = this.resolvedItemsSignal();
-        const lo = Math.min(fromIndex, toIndex);
-        const hi = Math.max(fromIndex, toIndex);
-        for (let i = lo; i <= hi; i++) {
-            const item = currentItems[i];
-            if (item && !this.slot().templates.has(item.id) && i < rawTemplates.length) {
-                this.slot().templates.set(item.id, rawTemplates[i]);
-            }
-        }
-                this.resolvedItemsSignal.update((current) => {
-            const newItems = [...current];
-            const [moved] = newItems.splice(fromIndex, 1);
-            newItems.splice(toIndex, 0, moved);
-            return newItems;
-        });
-                this.slot().moveItem(fromIndex, toIndex);
-                const newArray = [...currentArray];
-        const [movedValue] = newArray.splice(fromIndex, 1);
-        newArray.splice(toIndex, 0, movedValue);
-                parentForm().value.set({ ...currentValue, [arrayKey]: newArray });
-    }
-        removeItem(index) {
-        const arrayKey = this.field().key;
-        const parentForm = this.parentFieldSignalContext.form;
-        const currentValue = parentForm().value();
-        const currentArray = getArrayValue(currentValue, arrayKey);
-        if (currentArray.length === 0)
-            return;
-                let removeIndex;
-        if (index === undefined || index === -1) {
-            removeIndex = currentArray.length - 1;
-        }
-        else if (index < -1 || index >= currentArray.length) {
-            this.logger.warn(`removeArrayItem index ${index} is out of bounds for array '${arrayKey}' with length ${currentArray.length}. Operation skipped.`);
-            return;
-        }
-        else {
-            removeIndex = index;
-        }
-                                                                                const removedItem = this.resolvedItemsSignal()[removeIndex];
-        if (removedItem) {
-            this.slot().templates.delete(removedItem.id);
-        }
-                        this.slot().removeAt(removeIndex);
-        this.resolvedItemsSignal.update((current) => {
-            const newItems = [...current];
-            newItems.splice(removeIndex, 1);
-            return newItems;
-        });
-                const newArray = [...currentArray];
-        newArray.splice(removeIndex, 1);
-                        parentForm().value.set({ ...currentValue, [arrayKey]: newArray });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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"
-        role="group"
-        [attr.aria-label]="'Item ' + (i + 1)"
-        [attr.data-array-item-id]="item.id"
-        [attr.data-array-item-index]="i"
-      >
-        @for (field of item.fields; track $index) {
-          <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
-        }
-      </div>
-    }
-  `, 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: "22.1.5", ngImport: i0, type: ArrayFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'array-field', imports: [DfFieldOutlet], template: `
-    @for (item of resolvedItems(); track item.id; let i = $index) {
-      <div
-        class="df-array-item"
-        role="group"
-        [attr.aria-label]="'Item ' + (i + 1)"
-        [attr.data-array-item-id]="item.id"
-        [attr.data-array-item-index]="i"
-      >
-        @for (field of item.fields; track $index) {
-          <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
-        }
-      </div>
-    }
-  `, host: {
-                        '[class]': 'hostClasses()',
-                        '[class.df-container-hidden]': 'hidden()',
-                        '[attr.aria-hidden]': 'hidden() || null',
-                        '[id]': '`${key()}`',
-                        '[attr.data-testid]': 'key()',
-                    }, 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-CSCKq_1K.mjs.map