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

package/fesm2022/ng-forge-dynamic-forms-df-field-outlet.directive-CQsDMV-s.mjs

@@ -0,0 +1,644 @@
+import { i as renderWrapperChain, o as setInputIfDeclared, r as loadWrapperComponents, t as createWrapperAwareInjector } from "./ng-forge-dynamic-forms-wrapper-chain-BnntfNU1.mjs";
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, EnvironmentInjector, Injectable, InjectionToken, Injector, PLATFORM_ID, ViewContainerRef, afterNextRender, computed, inject, input, signal } from "@angular/core";
+import { explicitEffect } from "ngxtension/explicit-effect";
+import { derivedFrom } from "ngxtension/derived-from";
+import { Observable, distinctUntilChanged, map, of, pipe, switchMap } from "rxjs";
+import { ComponentInitializedEvent, DEFAULT_WRAPPERS, DynamicFormLogger, EventBus, FORM_OPTIONS, GROUP_CONTEXT, READONLY_FIELD_TREE_CACHE, WRAPPER_AUTO_ASSOCIATIONS, WRAPPER_COMPONENT_CACHE, WRAPPER_COMPONENT_LOAD_CACHE, WRAPPER_REGISTRY, getGridClassString, hasChildFields, isArrayField, isGenericContainerField, isGroupField, isPageField, isRowField, normalizeFieldsArray, toReadonlyFieldTreeCached, writeToFieldValue } from "@ng-forge/dynamic-forms/internal";
+import { isPlatformBrowser } from "@angular/common";
+import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
+const FIELD_WINDOWING = new InjectionToken("FIELD_WINDOWING", {
+	providedIn: "root",
+	factory: () => ({
+		enabled: false,
+		eager: 12,
+		placeholderHeight: "4rem",
+		park: {
+			enabled: false,
+			margin: "100%"
+		}
+	})
+});
+function clampWindowSize(value, fallback) {
+	if (value === void 0 || !Number.isFinite(value)) return fallback;
+	return Math.max(0, Math.floor(value));
+}
+const DEFAULT_MARGIN = "100%";
+const ROOT_MARGIN_PART = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?(?:px|%)$/i;
+function normalizeFieldParkingMargin(value, fallback = DEFAULT_MARGIN) {
+	const normalizedFallback = isValidRootMargin(fallback) ? fallback.trim() : DEFAULT_MARGIN;
+	if (!value || !isValidRootMargin(value)) return normalizedFallback;
+	return value.trim().split(/\s+/).join(" ");
+}
+function isValidRootMargin(value) {
+	const parts = value.trim().split(/\s+/);
+	return parts.length >= 1 && parts.length <= 4 && parts.every((part) => ROOT_MARGIN_PART.test(part));
+}
+function resolveFieldWindowing(global, perForm) {
+	if (perForm === void 0) return global;
+	if (typeof perForm === "boolean") return {
+		...global,
+		enabled: perForm
+	};
+	return {
+		enabled: "eager" in perForm || "placeholderHeight" in perForm || Object.keys(perForm).length === 0 ? true : global.enabled,
+		eager: clampWindowSize(perForm.eager, global.eager),
+		placeholderHeight: perForm.placeholderHeight ?? global.placeholderHeight,
+		park: resolveFieldParking(global.park, perForm.park)
+	};
+}
+function resolveFieldParking(global, perForm) {
+	if (perForm === void 0) return global;
+	if (typeof perForm === "boolean") return {
+		...global,
+		enabled: perForm
+	};
+	return {
+		enabled: true,
+		margin: normalizeFieldParkingMargin(perForm.margin, global.margin)
+	};
+}
+const ALWAYS_VISIBLE = of(true);
+var FieldViewportObserver = class FieldViewportObserver {
+	isBrowser = isPlatformBrowser(inject(PLATFORM_ID)) && typeof IntersectionObserver !== "undefined";
+	observers = /* @__PURE__ */ new Map();
+	constructor() {
+		inject(DestroyRef).onDestroy(() => {
+			for (const { observer } of this.observers.values()) observer.disconnect();
+			this.observers.clear();
+		});
+	}
+	observe(el, rootMargin) {
+		if (!this.isBrowser) return ALWAYS_VISIBLE;
+		rootMargin = normalizeFieldParkingMargin(rootMargin);
+		return new Observable((subscriber) => {
+			const listener = (visible) => subscriber.next(visible);
+			this.startObserving(el, rootMargin, listener);
+			subscriber.next(true);
+			return () => this.stopObserving(el, rootMargin, listener);
+		}).pipe(distinctUntilChanged());
+	}
+	startObserving(el, rootMargin, listener) {
+		const entry = this.observerFor(rootMargin);
+		const listeners = entry.listeners.get(el);
+		if (listeners) {
+			listeners.add(listener);
+			return;
+		}
+		entry.listeners.set(el, /* @__PURE__ */ new Set([listener]));
+		entry.observer.observe(el);
+	}
+	stopObserving(el, rootMargin, listener) {
+		const entry = this.observers.get(rootMargin);
+		if (!entry) return;
+		const listeners = entry.listeners.get(el);
+		if (!listeners) return;
+		listeners.delete(listener);
+		if (listeners.size > 0) return;
+		entry.observer.unobserve(el);
+		entry.listeners.delete(el);
+		if (entry.listeners.size > 0) return;
+		entry.observer.disconnect();
+		this.observers.delete(rootMargin);
+	}
+	observerFor(rootMargin) {
+		const existing = this.observers.get(rootMargin);
+		if (existing) return existing;
+		const listeners = /* @__PURE__ */ new Map();
+		const entry = {
+			observer: new IntersectionObserver((entries) => {
+				for (const entry of entries) for (const listener of listeners.get(entry.target) ?? []) listener(entry.isIntersecting);
+			}, { rootMargin }),
+			listeners
+		};
+		this.observers.set(rootMargin, entry);
+		return entry;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: FieldViewportObserver,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: FieldViewportObserver
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: FieldViewportObserver,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => []
+});
+const EMPTY_WRAPPERS = Object.freeze([]);
+const FIELD_ERRORS_WRAPPER = "field-errors";
+const FIELD_ERRORS_CONFIG = Object.freeze({ type: FIELD_ERRORS_WRAPPER });
+function isSameWrapperChain(a, b) {
+	if (a === b) return true;
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
+function resolveWrappers(field, defaultWrappers, autoAssociations, wrapperRegistry) {
+	if (field.wrappers === null) return EMPTY_WRAPPERS;
+	const autoWrappers = field.skipAutoWrappers ? EMPTY_WRAPPERS : autoAssociations.get(field.type) ?? EMPTY_WRAPPERS;
+	const defaults = field.skipDefaultWrappers ? EMPTY_WRAPPERS : defaultWrappers ?? EMPTY_WRAPPERS;
+	const fieldLevel = field.wrappers ?? EMPTY_WRAPPERS;
+	const composed = [
+		...autoWrappers,
+		...defaults,
+		...fieldLevel
+	];
+	if (needsErrorWrapper(field, composed, wrapperRegistry)) composed.push(FIELD_ERRORS_CONFIG);
+	return composed.length === 0 ? EMPTY_WRAPPERS : composed;
+}
+const VALIDATABLE_CONTAINERS = /* @__PURE__ */ new Set(["group", "array"]);
+function needsErrorWrapper(field, composed, wrapperRegistry) {
+	if (!VALIDATABLE_CONTAINERS.has(field.type)) return false;
+	if (!field.validators || field.validators.length === 0) return false;
+	return !composed.some((w) => w.type === FIELD_ERRORS_WRAPPER || wrapperRegistry.get(w.type)?.rendersFieldErrors);
+}
+function createWrapperChainController(opts) {
+	const deps = injectChainDeps();
+	const state = createStateSignal(opts);
+	const mounted = { value: null };
+	const detached = { value: null };
+	let refs = [];
+	buildEmissionStream(state, deps).pipe(takeUntilDestroyed(deps.destroyRef)).subscribe((emission) => {
+		try {
+			refs = applyEmission(emission, {
+				opts,
+				deps,
+				mounted,
+				refs,
+				detached
+			});
+		} catch (err) {
+			deps.logger.error("Wrapper chain render failed; tearing down partial state.", err);
+			opts.vcr().clear();
+			refs = [];
+			mounted.value = null;
+			detached.value?.destroy();
+			detached.value = null;
+		}
+	});
+	pushFieldInputsOnChange(opts, () => refs);
+	deps.destroyRef.onDestroy(() => {
+		detached.value?.destroy();
+		opts.vcr().clear();
+	});
+}
+function injectChainDeps() {
+	return {
+		registry: inject(WRAPPER_REGISTRY),
+		cache: inject(WRAPPER_COMPONENT_CACHE),
+		loadCache: inject(WRAPPER_COMPONENT_LOAD_CACHE),
+		logger: inject(DynamicFormLogger),
+		destroyRef: inject(DestroyRef),
+		environmentInjector: inject(EnvironmentInjector)
+	};
+}
+function createStateSignal(opts) {
+	return computed(() => ({
+		open: opts.gate?.() ?? true,
+		wrappers: opts.wrappers(),
+		rebuildKey: opts.rebuildKey?.()
+	}), { equal: (a, b) => a.open === b.open && a.rebuildKey === b.rebuildKey && isSameWrapperChain(a.wrappers, b.wrappers) });
+}
+function buildEmissionStream(state, deps) {
+	return toObservable(state).pipe(switchMap((s) => resolveLoadedWrappers(s, deps)));
+}
+function resolveLoadedWrappers(state, deps) {
+	if (!state.open) return of({
+		state,
+		loaded: null
+	});
+	if (state.wrappers.every((w) => deps.cache.has(w.type))) {
+		const loaded = state.wrappers.map((config) => ({
+			config,
+			component: deps.cache.get(config.type)
+		}));
+		return of({
+			state,
+			loaded
+		});
+	}
+	return loadWrapperComponents(state.wrappers, deps.registry, deps.cache, deps.logger, deps.loadCache).pipe(map((loaded) => ({
+		state,
+		loaded
+	})));
+}
+function applyEmission({ state, loaded }, ctx) {
+	const { opts, deps, mounted, refs } = ctx;
+	const vcr = opts.vcr();
+	const structurallyChanged = isStructurallyDifferent(mounted.value, state);
+	if (!structurallyChanged && !state.open) {
+		if (vcr.length > 0) ctx.detached.value = vcr.detach(0) ?? ctx.detached.value;
+		return refs;
+	}
+	if (state.open && !structurallyChanged && mounted.value !== null && ctx.detached.value) {
+		vcr.insert(ctx.detached.value);
+		ctx.detached.value = null;
+		return refs;
+	}
+	if (structurallyChanged && mounted.value !== null) {
+		const preservesDetachedOuterView = opts.beforeRebuild?.() === true;
+		if (ctx.detached.value && !preservesDetachedOuterView) ctx.detached.value.destroy();
+		ctx.detached.value = null;
+		vcr.clear();
+		mounted.value = null;
+	}
+	if (!state.open || loaded === null) return [];
+	if (mounted.value !== null) return refs;
+	const newRefs = renderWrapperChain({
+		outerContainer: vcr,
+		loadedWrappers: loaded,
+		environmentInjector: deps.environmentInjector,
+		logger: deps.logger,
+		fieldInputs: opts.fieldInputs?.(),
+		fieldInjector: opts.fieldInjector?.(),
+		outermostHostClasses: opts.outermostHostClasses?.(),
+		renderInnermost: opts.renderInnermost
+	});
+	mounted.value = {
+		wrappers: state.wrappers,
+		rebuildKey: state.rebuildKey
+	};
+	return newRefs;
+}
+function isStructurallyDifferent(mounted, next) {
+	if (mounted === null) return true;
+	if (mounted.rebuildKey !== next.rebuildKey) return true;
+	return !isSameWrapperChain(mounted.wrappers, next.wrappers);
+}
+function pushFieldInputsOnChange(opts, getRefs) {
+	if (!opts.fieldInputs) return;
+	explicitEffect([opts.fieldInputs], ([fi]) => {
+		for (const ref of getRefs()) setInputIfDeclared(ref, "fieldInputs", fi);
+	});
+}
+function buildFieldInputs(rawInputs, cache, fieldType, validationMessages) {
+	const fieldTreeCandidate = rawInputs["field"];
+	const hasFieldTree = fieldTreeCandidate !== void 0 && typeof fieldTreeCandidate === "function";
+	const readonlyField = hasFieldTree ? toReadonlyFieldTreeCached(cache, fieldTreeCandidate) : void 0;
+	const setValue = hasFieldTree ? (next) => writeToFieldValue(fieldTreeCandidate().value, next) : void 0;
+	return {
+		...rawInputs,
+		type: fieldType,
+		field: readonlyField,
+		setValue,
+		...validationMessages !== void 0 && { validationMessages }
+	};
+}
+const EMPTY_STATE = Object.freeze({ phase: "empty" });
+var FieldComponentSlot = class {
+	state = signal(EMPTY_STATE, ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	lastInputs = null;
+	_parked = signal(false, ...ngDevMode ? [{ debugName: "_parked" }] : /* istanbul ignore next */ []);
+	phase = () => this.state().phase;
+	snapshot = () => this.state();
+	parked = this._parked.asReadonly();
+	mountOrReuse(slot, component, fieldInjector, environmentInjector, rawInputs, fieldInputs) {
+		const current = this.state();
+		if (current.phase !== "empty" && current.ref.componentType === component) {
+			slot.insert(current.ref.hostView);
+			this.lastInputs = null;
+			this.state.set(Object.freeze({
+				phase: "mounted",
+				ref: current.ref,
+				slot
+			}));
+			if (this._parked()) current.ref.changeDetectorRef.detach();
+			this.pushInputs(rawInputs, fieldInputs);
+			if (current.phase === "detached") this.replayFocus(current.focusSnapshot);
+			return;
+		}
+		if (current.phase !== "empty") current.ref.destroy();
+		this.lastInputs = null;
+		this._parked.set(false);
+		this.state.set(EMPTY_STATE);
+		const ref = slot.createComponent(component, {
+			environmentInjector,
+			injector: createWrapperAwareInjector(fieldInjector, slot.injector)
+		});
+		this.state.set(Object.freeze({
+			phase: "mounted",
+			ref,
+			slot
+		}));
+		this.pushInputs(rawInputs, fieldInputs);
+	}
+	pushInputs(rawInputs, fieldInputs) {
+		const current = this.state();
+		if (current.phase !== "mounted") return;
+		const prev = this.lastInputs;
+		if (prev === rawInputs) return;
+		for (const [key, value] of Object.entries(rawInputs)) {
+			if (prev && prev[key] === value) continue;
+			current.ref.setInput(key, value);
+		}
+		if (fieldInputs !== void 0) setInputIfDeclared(current.ref, "fieldInputs", fieldInputs);
+		this.lastInputs = rawInputs;
+	}
+	detach() {
+		const current = this.state();
+		if (current.phase !== "mounted") return false;
+		const focusSnapshot = this.captureFocus(current.ref);
+		const idx = current.slot.indexOf(current.ref.hostView);
+		if (idx >= 0) current.slot.detach(idx);
+		this.lastInputs = null;
+		this.state.set(Object.freeze({
+			phase: "detached",
+			ref: current.ref,
+			focusSnapshot
+		}));
+		return idx < 0;
+	}
+	park() {
+		const current = this.state();
+		if (current.phase === "empty" || this._parked()) return;
+		current.ref.changeDetectorRef.detach();
+		this._parked.set(true);
+	}
+	refresh() {
+		const current = this.state();
+		if (current.phase === "empty" || !this._parked()) return;
+		current.ref.changeDetectorRef.detectChanges();
+	}
+	unpark() {
+		const current = this.state();
+		if (current.phase === "empty" || !this._parked()) return;
+		current.ref.changeDetectorRef.reattach();
+		current.ref.changeDetectorRef.markForCheck();
+		this._parked.set(false);
+	}
+	destroyOnTeardown() {
+		const current = this.state();
+		if (current.phase === "detached") current.ref.destroy();
+		this.lastInputs = null;
+		this._parked.set(false);
+		this.state.set(EMPTY_STATE);
+	}
+	captureFocus(ref) {
+		const hostEl = ref.location.nativeElement;
+		const active = document.activeElement;
+		if (!(active instanceof HTMLElement) || !hostEl.contains(active)) return null;
+		const sel = active;
+		return {
+			element: active,
+			selectionStart: typeof sel.selectionStart === "number" ? sel.selectionStart : null,
+			selectionEnd: typeof sel.selectionEnd === "number" ? sel.selectionEnd : null
+		};
+	}
+	replayFocus(snap) {
+		if (!snap || !snap.element.isConnected) return;
+		snap.element.focus();
+		if (snap.selectionStart !== null && snap.selectionEnd !== null && "setSelectionRange" in snap.element) snap.element.setSelectionRange(snap.selectionStart, snap.selectionEnd);
+	}
+};
+function emitComponentInitialized(eventBus, componentType, componentKey, injector) {
+	const logger = injector.get(DynamicFormLogger);
+	afterNextRender(() => {
+		try {
+			eventBus.dispatch(ComponentInitializedEvent, componentType, componentKey);
+		} catch (error) {
+			logger.error(`Failed to emit initialization event for ${componentType} '${componentKey}'`, error);
+		}
+	}, { injector });
+}
+function initializationComponentKey(type, key) {
+	return `${type}:${key}`;
+}
+function initializationComponentPath(key, groupPath) {
+	return groupPath ? `${groupPath}.${key}` : key;
+}
+function initializationComponentType(field) {
+	if (isPageField(field)) return "page";
+	if (isGroupField(field)) return "group";
+	if (isArrayField(field)) return "array";
+	if (isRowField(field) || isGenericContainerField(field)) return "container";
+}
+function collectInitializingContainers(fields, groupPath = "") {
+	const identities = [];
+	for (const field of fields) {
+		if (field.hidden === true) continue;
+		const type = initializationComponentType(field);
+		const componentPath = initializationComponentPath(field.key, groupPath);
+		if (type && field.key) identities.push({
+			type,
+			path: componentPath
+		});
+		if (!hasChildFields(field)) continue;
+		const childGroupPath = isGroupField(field) ? componentPath : groupPath;
+		for (const child of normalizeFieldsArray(field.fields)) identities.push(...collectInitializingContainers(Array.isArray(child) ? child : [child], childGroupPath));
+	}
+	return identities;
+}
+function collectInitializingContainerKeys(fields, groupPath = "") {
+	return collectInitializingContainers(fields, groupPath).map(({ type, path }) => initializationComponentKey(type, path));
+}
+function computeContainerHostClasses(containerType, className) {
+	const base = `df-field df-${containerType}`;
+	return className ? `${base} ${className}` : base;
+}
+function setupContainerInitEffect(resolvedFields, eventBus, componentType, fieldKeyFn, injector) {
+	const allReady = computed(() => {
+		const fields = resolvedFields();
+		return fields.length > 0 && fields.every((field) => field.renderReady());
+	}, ...ngDevMode ? [{ debugName: "allReady" }] : /* istanbul ignore next */ []);
+	explicitEffect([allReady], ([ready]) => {
+		if (ready) emitComponentInitialized(eventBus, typeof componentType === "function" ? componentType() : componentType, fieldKeyFn(), injector);
+	});
+}
+const EMPTY_ERRORS = Object.freeze([]);
+function snapshotParkedDomState(fieldTree) {
+	const state = fieldTree?.();
+	if (!state) return null;
+	return {
+		disabled: state.disabled?.() ?? false,
+		readonly: state.readonly?.() ?? false,
+		required: state.required?.() ?? false,
+		touched: state.touched?.() ?? false,
+		dirty: state.dirty?.() ?? false,
+		errors: state.errors?.() ?? EMPTY_ERRORS
+	};
+}
+function isSameParkedDomState(a, b) {
+	return a === b || a !== null && b !== null && a.disabled === b.disabled && a.readonly === b.readonly && a.required === b.required && a.touched === b.touched && a.dirty === b.dirty && a.errors === b.errors;
+}
+var DfFieldOutlet = class DfFieldOutlet {
+	dfFieldOutlet = input.required(...ngDevMode ? [{ debugName: "dfFieldOutlet" }] : /* istanbul ignore next */ []);
+	dfFieldOutletEnvironmentInjector = input(void 0, ...ngDevMode ? [{ debugName: "dfFieldOutletEnvironmentInjector" }] : /* istanbul ignore next */ []);
+	vcrRef = inject(ViewContainerRef);
+	vcr = signal(this.vcrRef).asReadonly();
+	destroyRef = inject(DestroyRef);
+	wrapperAutoAssociations = inject(WRAPPER_AUTO_ASSOCIATIONS);
+	wrapperRegistry = inject(WRAPPER_REGISTRY);
+	defaultWrappersSignal = inject(DEFAULT_WRAPPERS, { optional: true });
+	readonlyFieldCache = inject(READONLY_FIELD_TREE_CACHE);
+	eventBus = inject(EventBus, { optional: true });
+	injector = inject(Injector);
+	fieldComponent = new FieldComponentSlot();
+	componentIdentity = computed(() => this.dfFieldOutlet().component, ...ngDevMode ? [{ debugName: "componentIdentity" }] : /* istanbul ignore next */ []);
+	renderReady = computed(() => this.dfFieldOutlet().renderReady() && !this.dfFieldOutlet().hidden(), ...ngDevMode ? [{ debugName: "renderReady" }] : /* istanbul ignore next */ []);
+	hidden = computed(() => this.dfFieldOutlet().hidden(), ...ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []);
+	rawInputs = computed(() => this.dfFieldOutlet().inputs(), ...ngDevMode ? [{ debugName: "rawInputs" }] : /* istanbul ignore next */ []);
+	wrappers = computed(() => resolveWrappers(this.dfFieldOutlet().fieldDef, this.defaultWrappersSignal?.(), this.wrapperAutoAssociations, this.wrapperRegistry), {
+		...ngDevMode ? { debugName: "wrappers" } : /* istanbul ignore next */ {},
+		equal: isSameWrapperChain
+	});
+	fieldInputs = computed(() => buildFieldInputs(this.rawInputs(), this.readonlyFieldCache, this.dfFieldOutlet().fieldDef.type, this.dfFieldOutlet().fieldDef.validationMessages), ...ngDevMode ? [{ debugName: "fieldInputs" }] : /* istanbul ignore next */ []);
+	defaultEnvInjector = inject(EnvironmentInjector);
+	fieldEnvInjector = computed(() => this.dfFieldOutletEnvironmentInjector() ?? this.defaultEnvInjector, ...ngDevMode ? [{ debugName: "fieldEnvInjector" }] : /* istanbul ignore next */ []);
+	fieldInjector = computed(() => this.dfFieldOutlet().injector, ...ngDevMode ? [{ debugName: "fieldInjector" }] : /* istanbul ignore next */ []);
+	outermostHostClasses = computed(() => getGridClassString(this.dfFieldOutlet().fieldDef) || void 0, ...ngDevMode ? [{ debugName: "outermostHostClasses" }] : /* istanbul ignore next */ []);
+	formOptions = inject(FORM_OPTIONS, { optional: true });
+	globalFieldWindowing = inject(FIELD_WINDOWING);
+	viewportObserver = inject(FieldViewportObserver, { optional: true });
+	parking = computed(() => resolveFieldWindowing(this.globalFieldWindowing, this.formOptions?.()?.fieldWindowing).park, ...ngDevMode ? [{ debugName: "parking" }] : /* istanbul ignore next */ []);
+	observedElement = computed(() => {
+		const state = this.fieldComponent.snapshot();
+		return state.phase === "empty" ? null : state.ref.location.nativeElement;
+	}, ...ngDevMode ? [{ debugName: "observedElement" }] : /* istanbul ignore next */ []);
+	visibility = derivedFrom([this.observedElement, this.parking], pipe(switchMap(([element, parking]) => {
+		const observer = this.viewportObserver;
+		return parking.enabled && element && observer ? observer.observe(element, parking.margin) : of(true);
+	})), { initialValue: true });
+	focusEpoch = signal(0, ...ngDevMode ? [{ debugName: "focusEpoch" }] : /* istanbul ignore next */ []);
+	parked = computed(() => this.parking().enabled && !this.visibility(), ...ngDevMode ? [{ debugName: "parked" }] : /* istanbul ignore next */ []);
+	fieldTree = computed(() => {
+		const candidate = this.rawInputs()["field"];
+		return typeof candidate === "function" ? candidate : void 0;
+	}, {
+		...ngDevMode ? { debugName: "fieldTree" } : /* istanbul ignore next */ {},
+		equal: Object.is
+	});
+	parkedDomState = computed(() => this.parked() ? snapshotParkedDomState(this.fieldTree()) : null, {
+		...ngDevMode ? { debugName: "parkedDomState" } : /* istanbul ignore next */ {},
+		equal: isSameParkedDomState
+	});
+	constructor() {
+		createWrapperChainController({
+			vcr: this.vcr,
+			wrappers: this.wrappers,
+			gate: this.renderReady,
+			rebuildKey: this.componentIdentity,
+			fieldInputs: this.fieldInputs,
+			fieldInjector: this.fieldInjector,
+			outermostHostClasses: this.outermostHostClasses,
+			beforeRebuild: () => this.fieldComponent.detach(),
+			renderInnermost: (slot) => {
+				const resolved = this.dfFieldOutlet();
+				this.fieldComponent.mountOrReuse(slot, resolved.component, resolved.injector, this.fieldEnvInjector(), this.rawInputs(), this.fieldInputs());
+			}
+		});
+		explicitEffect([this.rawInputs, this.fieldInputs], ([rawInputs, fieldInputs]) => this.fieldComponent.pushInputs(rawInputs, fieldInputs));
+		explicitEffect([this.hidden], ([hidden]) => {
+			if (!hidden || !this.eventBus) return;
+			const resolved = this.dfFieldOutlet();
+			const groupContext = resolved.injector.get(GROUP_CONTEXT, null);
+			for (const { type, path } of collectInitializingContainers([resolved.fieldDef], groupContext?.groupPath())) emitComponentInitialized(this.eventBus, type, path, this.injector);
+		});
+		explicitEffect([this.observedElement, this.parking], ([element, parking], onCleanup) => {
+			if (!parking.enabled || !element) return;
+			const bumpEpoch = () => queueMicrotask(() => {
+				if (!this.destroyRef.destroyed) this.focusEpoch.update((n) => n + 1);
+			});
+			element.addEventListener("focusin", bumpEpoch);
+			element.addEventListener("focusout", bumpEpoch);
+			onCleanup(() => {
+				element.removeEventListener("focusin", bumpEpoch);
+				element.removeEventListener("focusout", bumpEpoch);
+			});
+		});
+		explicitEffect([
+			this.parked,
+			this.focusEpoch,
+			this.parkedDomState
+		], ([parked, , domState]) => {
+			if (parked && this.canPark(domState)) {
+				const alreadyParked = this.fieldComponent.parked();
+				this.fieldComponent.park();
+				if (alreadyParked) this.fieldComponent.refresh();
+			} else this.fieldComponent.unpark();
+		});
+		this.destroyRef.onDestroy(() => this.fieldComponent.destroyOnTeardown());
+	}
+	canPark(domState) {
+		const element = this.observedElement();
+		if (!element) return false;
+		if (element.contains(document.activeElement)) return false;
+		return (domState?.errors.length ?? 0) === 0;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: DfFieldOutlet,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.5",
+		type: DfFieldOutlet,
+		isStandalone: true,
+		selector: "[dfFieldOutlet]",
+		inputs: {
+			dfFieldOutlet: {
+				classPropertyName: "dfFieldOutlet",
+				publicName: "dfFieldOutlet",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			dfFieldOutletEnvironmentInjector: {
+				classPropertyName: "dfFieldOutletEnvironmentInjector",
+				publicName: "dfFieldOutletEnvironmentInjector",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: DfFieldOutlet,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[dfFieldOutlet]" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		dfFieldOutlet: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dfFieldOutlet",
+				required: true
+			}]
+		}],
+		dfFieldOutletEnvironmentInjector: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dfFieldOutletEnvironmentInjector",
+				required: false
+			}]
+		}]
+	}
+});
+export { initializationComponentPath as a, createWrapperChainController as c, FieldViewportObserver as d, resolveFieldParking as f, FIELD_WINDOWING as h, initializationComponentKey as i, isSameWrapperChain as l, clampWindowSize as m, collectInitializingContainerKeys as n, setupContainerInitEffect as o, resolveFieldWindowing as p, computeContainerHostClasses as r, emitComponentInitialized as s, DfFieldOutlet as t, resolveWrappers as u };
+
+//# sourceMappingURL=ng-forge-dynamic-forms-df-field-outlet.directive-CQsDMV-s.mjs.map