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

package/fesm2022/ng-forge-dynamic-forms-page-field.component-BRjQmWC9.mjs

@@ -0,0 +1,295 @@
+import { h as FIELD_WINDOWING, i as initializationComponentKey, n as collectInitializingContainerKeys, o as setupContainerInitEffect, p as resolveFieldWindowing, r as computeContainerHostClasses, t as DfFieldOutlet } from "./ng-forge-dynamic-forms-df-field-outlet.directive-CQsDMV-s.mjs";
+import { t as createFieldResolutionPipe, u as injectFieldRegistry } from "./ng-forge-dynamic-forms-resolve-field-ByGa5cpo.mjs";
+import { t as ActivePageInitializedEvent } from "./ng-forge-dynamic-forms-active-page-initialized.event-CiKN-mcc.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, EnvironmentInjector, Injector, afterRenderEffect, computed, inject, input, signal } from "@angular/core";
+import { explicitEffect } from "ngxtension/explicit-effect";
+import { DynamicFormLogger, EventBus, FORM_OPTIONS, derivedFromDeferred, getGridClassString, isContainerField, validatePageNesting } from "@ng-forge/dynamic-forms/internal";
+import { outputFromObservable, takeUntilDestroyed } from "@angular/core/rxjs-interop";
+var PageFieldComponent = class PageFieldComponent {
+	destroyRef = inject(DestroyRef);
+	fieldRegistry = injectFieldRegistry();
+	injector = inject(Injector);
+	environmentInjector = inject(EnvironmentInjector);
+	eventBus = inject(EventBus);
+	logger = inject(DynamicFormLogger);
+	formOptions = inject(FORM_OPTIONS, { optional: true });
+	globalFieldWindowing = inject(FIELD_WINDOWING);
+	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 */ []);
+	pageIndex = input.required(...ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []);
+	isVisible = input.required(...ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => computeContainerHostClasses("page-field", this.className()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	disabled = computed(() => this.field().disabled || false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	isValid = computed(() => validatePageNesting(this.field()), ...ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []);
+	fieldWindowing = computed(() => resolveFieldWindowing(this.globalFieldWindowing, this.formOptions?.()?.fieldWindowing), ...ngDevMode ? [{ debugName: "fieldWindowing" }] : /* istanbul ignore next */ []);
+	rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...ngDevMode ? [{ debugName: "rawFieldRegistry" }] : /* istanbul ignore next */ []);
+	nextPage = outputFromObservable(this.eventBus.on("next-page"));
+	previousPage = outputFromObservable(this.eventBus.on("previous-page"));
+	pageChange = outputFromObservable(this.eventBus.on("page-change"));
+	fieldsSource = computed(() => {
+		if (!this.isValid()) return [];
+		return this.field().fields || [];
+	}, ...ngDevMode ? [{ debugName: "fieldsSource" }] : /* istanbul ignore next */ []);
+	resolvedFields = derivedFromDeferred(this.fieldsSource, createFieldResolutionPipe(() => ({
+		loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
+		registry: this.rawFieldRegistry(),
+		injector: this.injector,
+		destroyRef: this.destroyRef,
+		onError: (fieldDef, error) => {
+			const fieldKey = fieldDef.key || "<no key>";
+			this.logger.error(`Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}) within page '${this.field().key}'. Ensure the field type is registered in your field registry.`, error);
+		}
+	})), {
+		initialValue: [],
+		injector: this.injector
+	});
+	initializedContainers = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "initializedContainers" }] : /* istanbul ignore next */ []);
+	expectedContainerKeys = computed(() => collectInitializingContainerKeys(this.fieldsSource()), ...ngDevMode ? [{ debugName: "expectedContainerKeys" }] : /* istanbul ignore next */ []);
+	renderReady = computed(() => {
+		const source = this.fieldsSource();
+		const fields = this.resolvedFields();
+		const initialized = this.initializedContainers();
+		return fields.length === source.length && fields.every((field) => field.renderReady()) && this.expectedContainerKeys().every((key) => initialized.has(key));
+	}, ...ngDevMode ? [{ debugName: "renderReady" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.eventBus.on("component-initialized").pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+			const key = initializationComponentKey(event.componentType, event.componentId);
+			this.initializedContainers.update((current) => {
+				if (current.has(key)) return current;
+				const next = new Set(current);
+				next.add(key);
+				return next;
+			});
+		});
+		this.setupEffects();
+	}
+	windowsField(field, index) {
+		const w = this.fieldWindowing();
+		return w.enabled && index >= w.eager && !isContainerField(field.fieldDef);
+	}
+	placeholderGridClass(field) {
+		const grid = getGridClassString(field.fieldDef);
+		return grid ? `df-field-placeholder ${grid}` : "df-field-placeholder";
+	}
+	setupEffects() {
+		setupContainerInitEffect(this.resolvedFields, this.eventBus, "page", () => this.field().key, this.injector);
+		let announced = null;
+		afterRenderEffect({ write: () => {
+			if (!this.isVisible()) {
+				announced = null;
+				return;
+			}
+			if (!this.renderReady()) return;
+			const visit = `${this.pageIndex()}:${this.key()}`;
+			if (announced === visit) return;
+			announced = visit;
+			this.eventBus.dispatch(ActivePageInitializedEvent, this.pageIndex(), this.key());
+		} });
+		explicitEffect([this.isValid, this.field], ([valid, pageField]) => {
+			if (!valid) this.logger.error(`Invalid configuration: Page '${pageField.key}' contains nested page fields. Pages cannot contain other pages. Consider using groups or rows for nested structure.`, pageField);
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: PageFieldComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.5",
+		type: PageFieldComponent,
+		isStandalone: true,
+		selector: "section[page-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
+			},
+			pageIndex: {
+				classPropertyName: "pageIndex",
+				publicName: "pageIndex",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			isVisible: {
+				classPropertyName: "isVisible",
+				publicName: "isVisible",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			nextPage: "nextPage",
+			previousPage: "previousPage",
+			pageChange: "pageChange"
+		},
+		host: { properties: {
+			"class": "hostClasses()",
+			"class.disabled": "disabled()",
+			"class.df-page-visible": "isVisible()",
+			"class.df-page-hidden": "!isVisible()",
+			"attr.aria-hidden": "!isVisible()",
+			"attr.data-page-index": "pageIndex()",
+			"id": "`${key()}`",
+			"attr.data-testid": "key()"
+		} },
+		ngImport: i0,
+		template: `
+    @for (field of resolvedFields(); track field.key; let i = $index) {
+      @if (windowsField(field, i)) {
+        @if (!field.hidden()) {
+          @defer (on viewport) {
+            <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+          } @placeholder {
+            <div
+              [class]="placeholderGridClass(field)"
+              [style.min-height]="fieldWindowing().placeholderHeight"
+              [attr.data-field-key]="field.key"
+              aria-hidden="true"
+            ></div>
+          }
+        }
+      } @else {
+        <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+      }
+    }
+  `,
+		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;width:100%;gap:var(--df-grid-row-gap, .5rem);transition:opacity .2s ease-in-out}:host.df-page-spacing-custom{--df-grid-row-gap: var(--df-page-custom-spacing, 1.5rem)}:host.df-page-visible{opacity:1}:host.df-page-hidden{display:none;opacity:0;pointer-events:none}:host[aria-hidden=true]{pointer-events:none;visibility:hidden}@media(prefers-reduced-motion:no-preference){:host{transition:opacity var(--df-page-transition-duration, .3s) var(--df-page-transition-timing, ease-in-out),transform var(--df-page-transition-duration, .3s) var(--df-page-transition-timing, ease-in-out)}:host.df-page-visible{transform:translate(0)}:host.df-page-hidden{transform:translate(var(--df-page-slide-offset, -10px))}}@media(prefers-reduced-motion:reduce){:host{transition:none}}.df-field-placeholder{display:block}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: DfFieldOutlet,
+			selector: "[dfFieldOutlet]",
+			inputs: ["dfFieldOutlet", "dfFieldOutletEnvironmentInjector"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		deferBlockDependencies: [() => [DfFieldOutlet]]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: PageFieldComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "section[page-field]",
+			imports: [DfFieldOutlet],
+			template: `
+    @for (field of resolvedFields(); track field.key; let i = $index) {
+      @if (windowsField(field, i)) {
+        @if (!field.hidden()) {
+          @defer (on viewport) {
+            <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+          } @placeholder {
+            <div
+              [class]="placeholderGridClass(field)"
+              [style.min-height]="fieldWindowing().placeholderHeight"
+              [attr.data-field-key]="field.key"
+              aria-hidden="true"
+            ></div>
+          }
+        }
+      } @else {
+        <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
+      }
+    }
+  `,
+			host: {
+				"[class]": "hostClasses()",
+				"[class.disabled]": "disabled()",
+				"[class.df-page-visible]": "isVisible()",
+				"[class.df-page-hidden]": "!isVisible()",
+				"[attr.aria-hidden]": "!isVisible()",
+				"[attr.data-page-index]": "pageIndex()",
+				"[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;width:100%;gap:var(--df-grid-row-gap, .5rem);transition:opacity .2s ease-in-out}:host.df-page-spacing-custom{--df-grid-row-gap: var(--df-page-custom-spacing, 1.5rem)}:host.df-page-visible{opacity:1}:host.df-page-hidden{display:none;opacity:0;pointer-events:none}:host[aria-hidden=true]{pointer-events:none;visibility:hidden}@media(prefers-reduced-motion:no-preference){:host{transition:opacity var(--df-page-transition-duration, .3s) var(--df-page-transition-timing, ease-in-out),transform var(--df-page-transition-duration, .3s) var(--df-page-transition-timing, ease-in-out)}:host.df-page-visible{transform:translate(0)}:host.df-page-hidden{transform:translate(var(--df-page-slide-offset, -10px))}}@media(prefers-reduced-motion:reduce){:host{transition:none}}.df-field-placeholder{display:block}\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
+			}]
+		}],
+		pageIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pageIndex",
+				required: true
+			}]
+		}],
+		isVisible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isVisible",
+				required: true
+			}]
+		}],
+		nextPage: [{
+			type: i0.Output,
+			args: ["nextPage"]
+		}],
+		previousPage: [{
+			type: i0.Output,
+			args: ["previousPage"]
+		}],
+		pageChange: [{
+			type: i0.Output,
+			args: ["pageChange"]
+		}]
+	}
+});
+export { PageFieldComponent as default };
+
+//# sourceMappingURL=ng-forge-dynamic-forms-page-field.component-BRjQmWC9.mjs.map

package/fesm2022/ng-forge-dynamic-forms-page-field.component-BRjQmWC9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-page-field.component-BRjQmWC9.mjs","names":[],"sources":["../../../../packages/dynamic-forms/src/lib/fields/page/page-field.component.ts"],"sourcesContent":["import {\n  afterRenderEffect,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  EnvironmentInjector,\n  inject,\n  Injector,\n  input,\n  signal,\n} from '@angular/core';\nimport { DfFieldOutlet } from '../../directives/df-field-outlet/df-field-outlet.directive';\nimport { outputFromObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { derivedFromDeferred } from '@ng-forge/dynamic-forms/internal';\nimport { createFieldResolutionPipe, ResolvedField } from '../../utils/resolve-field/resolve-field';\nimport {\n  collectInitializingContainerKeys,\n  computeContainerHostClasses,\n  initializationComponentKey,\n  setupContainerInitEffect,\n} from '../../utils/container-utils/container-utils';\nimport { PageField, validatePageNesting } from '@ng-forge/dynamic-forms/internal';\nimport { injectFieldRegistry } from '../../utils/inject-field-registry/inject-field-registry';\nimport { EventBus } from '@ng-forge/dynamic-forms/internal';\nimport { NextPageEvent, PageChangeEvent, PreviousPageEvent } from '../../events/constants';\nimport { FieldDef } from '@ng-forge/dynamic-forms/internal';\nimport { DynamicFormLogger } from '@ng-forge/dynamic-forms/internal';\nimport { FORM_OPTIONS } from '@ng-forge/dynamic-forms/internal';\nimport { getGridClassString } from '@ng-forge/dynamic-forms/internal';\nimport { isContainerField } from '@ng-forge/dynamic-forms/internal';\nimport { FIELD_WINDOWING } from '../../providers/features/field-windowing/field-windowing.token';\nimport { resolveFieldWindowing } from '../../providers/features/field-windowing/resolve-field-windowing';\nimport { ActivePageInitializedEvent } from '../../events/constants/active-page-initialized.event';\nimport { ComponentInitializedEvent } from '@ng-forge/dynamic-forms/internal';\n\n/** Renders a single page in multi-page (wizard) forms. */\n@Component({\n  selector: 'section[page-field]',\n  imports: [DfFieldOutlet],\n  template: `\n    @for (field of resolvedFields(); track field.key; let i = $index) {\n      @if (windowsField(field, i)) {\n        @if (!field.hidden()) {\n          @defer (on viewport) {\n            <ng-container *dfFieldOutlet=\"field; environmentInjector: environmentInjector\" />\n          } @placeholder {\n            <div\n              [class]=\"placeholderGridClass(field)\"\n              [style.min-height]=\"fieldWindowing().placeholderHeight\"\n              [attr.data-field-key]=\"field.key\"\n              aria-hidden=\"true\"\n            ></div>\n          }\n        }\n      } @else {\n        <ng-container *dfFieldOutlet=\"field; environmentInjector: environmentInjector\" />\n      }\n    }\n  `,\n  styleUrl: './page-field.component.scss',\n  host: {\n    '[class]': 'hostClasses()',\n    '[class.disabled]': 'disabled()',\n    '[class.df-page-visible]': 'isVisible()',\n    '[class.df-page-hidden]': '!isVisible()',\n    '[attr.aria-hidden]': '!isVisible()',\n    '[attr.data-page-index]': 'pageIndex()',\n    '[id]': '`${key()}`',\n    '[attr.data-testid]': 'key()',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class PageFieldComponent {\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Dependencies\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly fieldRegistry = injectFieldRegistry();\n  private readonly injector = inject(Injector);\n  protected readonly environmentInjector = inject(EnvironmentInjector);\n  private readonly eventBus = inject(EventBus);\n  private readonly logger = inject(DynamicFormLogger);\n  private readonly formOptions = inject(FORM_OPTIONS, { optional: true });\n  private readonly globalFieldWindowing = inject(FIELD_WINDOWING);\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Inputs\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  field = input.required<PageField>();\n  key = input.required<string>();\n  className = input<string>();\n  pageIndex = input.required<number>();\n  isVisible = input.required<boolean>();\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Computed Signals\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  readonly hostClasses = computed(() => computeContainerHostClasses('page-field', this.className()));\n\n  readonly disabled = computed(() => this.field().disabled || false);\n\n  readonly isValid = computed(() => validatePageNesting(this.field()));\n\n  /**\n   * Effective field-windowing config for this page. Per-form\n   * `FormOptions.fieldWindowing` wins over the global `withFieldWindowing()`\n   * default; both fall back to disabled (fully eager).\n   */\n  protected readonly fieldWindowing = computed(() =>\n    resolveFieldWindowing(this.globalFieldWindowing, this.formOptions?.()?.fieldWindowing),\n  );\n\n  private readonly rawFieldRegistry = computed(() => this.fieldRegistry.raw);\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Outputs\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  readonly nextPage = outputFromObservable(this.eventBus.on<NextPageEvent>('next-page'));\n  readonly previousPage = outputFromObservable(this.eventBus.on<PreviousPageEvent>('previous-page'));\n  readonly pageChange = outputFromObservable(this.eventBus.on<PageChangeEvent>('page-change'));\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Field Resolution\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  private readonly fieldsSource = computed(() => {\n    if (!this.isValid()) {\n      return [];\n    }\n    return this.field().fields || [];\n  });\n\n  protected readonly resolvedFields = derivedFromDeferred(\n    this.fieldsSource,\n    createFieldResolutionPipe(() => ({\n      loadTypeComponent: (type: string) => this.fieldRegistry.loadTypeComponent(type),\n      registry: this.rawFieldRegistry(),\n      injector: this.injector,\n      destroyRef: this.destroyRef,\n      onError: (fieldDef: FieldDef<unknown>, error: unknown) => {\n        const fieldKey = fieldDef.key || '<no key>';\n        this.logger.error(\n          `Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}) ` +\n            `within page '${this.field().key}'. Ensure the field type is registered in your field registry.`,\n          error,\n        );\n      },\n    })),\n    { initialValue: [] as ResolvedField[], injector: this.injector },\n  );\n\n  private readonly initializedContainers = signal<ReadonlySet<string>>(new Set());\n\n  private readonly expectedContainerKeys = computed(() => collectInitializingContainerKeys(this.fieldsSource()));\n\n  private readonly renderReady = computed(() => {\n    const source = this.fieldsSource();\n    const fields = this.resolvedFields();\n    const initialized = this.initializedContainers();\n    return (\n      fields.length === source.length &&\n      fields.every((field) => field.renderReady()) &&\n      this.expectedContainerKeys().every((key) => initialized.has(key))\n    );\n  });\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Constructor\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  constructor() {\n    this.eventBus\n      .on<ComponentInitializedEvent>('component-initialized')\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe((event) => {\n        const key = initializationComponentKey(event.componentType, event.componentId);\n        this.initializedContainers.update((current) => {\n          if (current.has(key)) return current;\n          const next = new Set(current);\n          next.add(key);\n          return next;\n        });\n      });\n    this.setupEffects();\n  }\n\n  /**\n   * Whether a field should be deferred by field windowing. Containers are never\n   * windowed: they emit `ComponentInitializedEvent`, which the form's init\n   * tracker counts, so deferring one would stall `initialized` until it scrolls\n   * into view. Leaf fields carry no such count, so they defer freely.\n   */\n  protected windowsField(field: ResolvedField, index: number): boolean {\n    const w = this.fieldWindowing();\n    return w.enabled && index >= w.eager && !isContainerField(field.fieldDef);\n  }\n\n  /** Class string for a windowed field's placeholder — matches the real field's grid column. */\n  protected placeholderGridClass(field: ResolvedField): string {\n    const grid = getGridClassString(field.fieldDef);\n    return grid ? `df-field-placeholder ${grid}` : 'df-field-placeholder';\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Private Methods\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  private setupEffects(): void {\n    setupContainerInitEffect(this.resolvedFields, this.eventBus, 'page', () => this.field().key, this.injector);\n\n    // Announced once per visit. `renderReady` tracks `resolvedFields`, which moves on every\n    // reconciliation, so without this an event named \"initialized\" re-fires for one page.\n    // Cleared when the page goes away, so returning to it announces again.\n    let announced: string | null = null;\n    afterRenderEffect({\n      write: () => {\n        if (!this.isVisible()) {\n          announced = null;\n          return;\n        }\n        if (!this.renderReady()) return;\n        const visit = `${this.pageIndex()}:${this.key()}`;\n        if (announced === visit) return;\n        announced = visit;\n        this.eventBus.dispatch(ActivePageInitializedEvent, this.pageIndex(), this.key());\n      },\n    });\n\n    explicitEffect([this.isValid, this.field], ([valid, pageField]) => {\n      if (!valid) {\n        this.logger.error(\n          `Invalid configuration: Page '${pageField.key}' contains nested page fields. ` +\n            `Pages cannot contain other pages. Consider using groups or rows for nested structure.`,\n          pageField,\n        );\n      }\n    });\n  }\n}\n"],"mappings":"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"}