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

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

@@ -0,0 +1,770 @@
+import { a as initializationComponentPath, s as emitComponentInitialized, t as DfFieldOutlet } from "./ng-forge-dynamic-forms-df-field-outlet.directive-CQsDMV-s.mjs";
+import { n as createHiddenSignal, r as createRenderReadySignal, s as mapFieldToInputs, u as injectFieldRegistry } from "./ng-forge-dynamic-forms-resolve-field-ByGa5cpo.mjs";
+import { n as getNormalizedArrayMetadata, t as getFieldDefaultValue } from "./ng-forge-dynamic-forms-default-value-D5M4MNE-.mjs";
+import { t as ArrayItemRegistryService } from "./ng-forge-dynamic-forms-array-item-registry.service-D-AxVLdk.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, EnvironmentInjector, Injector, computed, inject, input, linkedSignal, runInInjectionContext, signal } from "@angular/core";
+import { explicitEffect } from "ngxtension/explicit-effect";
+import { catchError, filter, firstValueFrom, forkJoin, from, map, of, tap } from "rxjs";
+import { ARRAY_CONTEXT, DynamicFormLogger, EventBus, FIELD_SIGNAL_CONTEXT, GROUP_CONTEXT, getFieldValueHandling, injectFieldSignalContext, isEqual, isGroupField } from "@ng-forge/dynamic-forms/internal";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+var ArrayFieldStateMachine = class {
+	_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();
+	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");
+		}
+		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 injector = createItemInjector({
+		itemFormAccessor: computed(() => {
+			const parentForm = parentFieldSignalContext.form;
+			const index = indexSignal();
+			const arrayFieldTree = parentForm[arrayField.key];
+			if (!arrayFieldTree) return;
+			return arrayFieldTree[index];
+		}, {
+			...ngDevMode ? { debugName: "itemFormAccessor" } : /* istanbul ignore next */ {},
+			equal: isEqual
+		}),
+		indexSignal,
+		parentFieldSignalContext,
+		parentInjector,
+		arrayField,
+		primitiveFieldKey
+	});
+	return {
+		injector,
+		inputs: runInInjectionContext(injector, () => {
+			return mapFieldToInputs(template, registry);
+		})
+	};
+}
+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(void 0);
+	const itemId = existingItemId ?? generateItemId();
+	const indexSignal = linkedSignal(() => {
+		return itemPositionMap().get(itemId) ?? index;
+	}, ...ngDevMode ? [{ debugName: "indexSignal" }] : /* istanbul ignore next */ []);
+	const fieldObservables = templates.map((template) => from(loadTypeComponent(template.type)).pipe(map((component) => {
+		if (destroyRef.destroyed) return;
+		if (!component) return;
+		const { injector, inputs } = createArrayItemInjectorAndInputs({
+			template,
+			indexSignal,
+			parentFieldSignalContext,
+			parentInjector,
+			registry,
+			arrayField,
+			primitiveFieldKey
+		});
+		if (!inputs) return;
+		return {
+			key: template.key,
+			fieldDef: template,
+			component,
+			injector,
+			inputs,
+			renderReady: createRenderReadySignal(inputs, registry.get(template.type)),
+			hidden: createHiddenSignal(inputs)
+		};
+	}), catchError((error) => {
+		if (!destroyRef.destroyed) parentInjector.get(DynamicFormLogger).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(void 0);
+	})));
+	return forkJoin(fieldObservables).pipe(map((fields) => {
+		const validFields = fields.filter((f) => f !== void 0);
+		if (validFields.length === 0) return;
+		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));
+}
+var ArrayFieldComponent = 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), ...ngDevMode ? [{ debugName: "slot" }] : /* istanbul ignore next */ []);
+	generateItemId = () => this.slot().nextId();
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	key = input.required(...ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []);
+	className = input(...ngDevMode ? [void 0, { debugName: "className" }] : /* istanbul ignore next */ []);
+	hidden = input(false, ...ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => {
+		const base = "df-field df-array";
+		const custom = this.className();
+		return custom ? `${base} ${custom}` : base;
+	}, ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...ngDevMode ? [{ debugName: "rawFieldRegistry" }] : /* istanbul ignore next */ []);
+	autoRemoveButton = computed(() => {
+		return getNormalizedArrayMetadata(this.field())?.autoRemoveButton;
+	}, ...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;
+	}, ...ngDevMode ? [{ debugName: "primitiveFieldKey" }] : /* istanbul ignore next */ []);
+	rawItemTemplates = computed(() => {
+		return (this.field().fields || []).map((def) => {
+			return Array.isArray(def) ? def : [def];
+		});
+	}, ...ngDevMode ? [{ debugName: "rawItemTemplates" }] : /* istanbul ignore next */ []);
+	fallbackTemplate = computed(() => {
+		const raw = getNormalizedArrayMetadata(this.field())?.template;
+		if (!raw) return void 0;
+		return Array.isArray(raw) ? [...raw] : [raw];
+	}, ...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];
+		});
+	}, ...ngDevMode ? [{ debugName: "itemTemplates" }] : /* istanbul ignore next */ []);
+	arrayFieldTree = computed(() => {
+		return this.parentFieldSignalContext.form[this.field().key];
+	}, ...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);
+	}, ...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;
+	}, ...ngDevMode ? [{ debugName: "arrayFieldTrees" }] : /* istanbul ignore next */ []);
+	resolvedItemsSignal = signal([], ...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]));
+	}, ...ngDevMode ? [{ debugName: "itemPositionMap" }] : /* istanbul ignore next */ []);
+	resolvedItems = computed(() => this.resolvedItemsSignal(), ...ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []);
+	allResolvedFieldsRenderReady = computed(() => this.resolvedItems().every((item) => item.fields.every((field) => field.renderReady())), ...ngDevMode ? [{ debugName: "allResolvedFieldsRenderReady" }] : /* istanbul ignore next */ []);
+	atMaxLength = computed(() => {
+		const maxLength = this.field().maxLength;
+		if (maxLength === void 0) return false;
+		return this.currentArrayValue().length >= maxLength;
+	}, ...ngDevMode ? [{ debugName: "atMaxLength" }] : /* istanbul ignore next */ []);
+	autoRemoveCache = /* @__PURE__ */ 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") {
+				if ((Array.isArray(action.template) ? action.template : action.template ? [action.template] : []).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;
+				}
+				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 isPrimitiveItem = !Array.isArray(template) && 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 !== void 0 ? 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());
+				if (templateField.type === "group" || templateField.type === "row" || templateField.type === "container") {
+					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 : void 0
+		}).pipe(catchError((error) => {
+			this.logger.error(`Failed to resolve array item at index ${insertIndex}:`, error);
+			return of(void 0);
+		})));
+		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)) : void 0;
+				const existingItemIds = useSurvival ? slot.itemOrder.slice() : void 0;
+				const run = this.fsm.dispatch({ kind: "initial" });
+				this.resolveAllItems(fieldTrees, run, positionalTemplates, existingItemIds);
+				break;
+			}
+			case "append": {
+				const run = this.fsm.dispatch({ kind: "append" });
+				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" });
+				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(void 0);
+		})));
+		try {
+			const items = await firstValueFrom(forkJoin(safeItemObservables).pipe(map((items) => items.filter((item) => item !== void 0))));
+			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(void 0);
+			}));
+		});
+		try {
+			const newItems = await firstValueFrom(forkJoin(safeItemObservables).pipe(map((items) => items.filter((item) => item !== void 0))));
+			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,
+			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(void 0);
+	}
+	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 === void 0 || 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.2.5",
+		ngImport: i0,
+		type: ArrayFieldComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.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.2.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-Dv9mPnJ3.mjs.map