@ng-forge/dynamic-forms 0.1.1 → 0.1.2

package/fesm2022/{ng-forge-dynamic-forms-page-field.component-DjrahUgb.mjs → ng-forge-dynamic-forms-page-field.component-ZVrJUMNb.mjs}

@@ -3,7 +3,7 @@ import { inject, DestroyRef, Injector, input, computed, ChangeDetectionStrategy,
 import { NgComponentOutlet } from '@angular/common';
 import { outputFromObservable } from '@angular/core/rxjs-interop';
 import { pipe, switchMap, of, forkJoin, map, scan } from 'rxjs';
-import { i as injectFieldRegistry, E as EventBus, v as validatePageNesting, d as derivedFromDeferred, r as resolveField, a as reconcileFields, e as emitComponentInitialized } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-Dcd04rfS.mjs';
+import { i as injectFieldRegistry, E as EventBus, v as validatePageNesting, d as derivedFromDeferred, r as resolveField, a as reconcileFields, e as emitComponentInitialized } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-BWj75LVN.mjs';
 import { explicitEffect } from 'ngxtension/explicit-effect';
 
 /**
@@ -76,13 +76,22 @@ class PageFieldComponent {
         return forkJoin(fields.map((f) => resolveField(f, context)));
     }), map((fields) => fields.filter((f) => f !== undefined)), scan(reconcileFields, [])), { initialValue: [], injector: this.injector });
     // ─────────────────────────────────────────────────────────────────────────────
-    // Effects
+    // Constructor
     // ─────────────────────────────────────────────────────────────────────────────
-    emitInitializedOnFieldsResolved = explicitEffect([this.resolvedFields], ([fields]) => {
-        if (fields.length > 0) {
-            emitComponentInitialized(this.eventBus, 'page', this.field().key, this.injector);
-        }
-    });
+    constructor() {
+        this.setupEffects();
+    }
+    // ─────────────────────────────────────────────────────────────────────────────
+    // Private Methods
+    // ─────────────────────────────────────────────────────────────────────────────
+    setupEffects() {
+        // Emit initialization event when fields are resolved
+        explicitEffect([this.resolvedFields], ([fields]) => {
+            if (fields.length > 0) {
+                emitComponentInitialized(this.eventBus, 'page', this.field().key, this.injector);
+            }
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PageFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, 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.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()" }, classAttribute: "df-field df-page-field" }, ngImport: i0, template: `
     @for (field of resolvedFields(); track field.key) {
@@ -106,7 +115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                         '[id]': '`${key()}`',
                         '[attr.data-testid]': 'key()',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{display:grid;grid-template-columns:1fr;width:100%;gap:var(--df-grid-row-gap);transition:opacity .2s ease-in-out}:host.df-page-spacing-custom{--df-grid-row-gap: var(--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 .3s ease-in-out,transform .3s ease-in-out}:host.df-page-visible{transform:translate(0)}:host.df-page-hidden{transform:translate(-10px)}}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
-        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], 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"] }] } });
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], 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-DjrahUgb.mjs.map
+//# sourceMappingURL=ng-forge-dynamic-forms-page-field.component-ZVrJUMNb.mjs.map

package/fesm2022/{ng-forge-dynamic-forms-page-field.component-DjrahUgb.mjs.map → ng-forge-dynamic-forms-page-field.component-ZVrJUMNb.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ng-forge-dynamic-forms-page-field.component-DjrahUgb.mjs","sources":["../../../../packages/dynamic-forms/src/lib/fields/page/page-field.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, Injector, input } from '@angular/core';\nimport { NgComponentOutlet } from '@angular/common';\nimport { outputFromObservable } from '@angular/core/rxjs-interop';\nimport { forkJoin, map, of, pipe, scan, switchMap } from 'rxjs';\nimport { derivedFromDeferred } from '../../utils/derived-from-deferred/derived-from-deferred';\nimport { reconcileFields, ResolvedField, resolveField } from '../../utils/resolve-field/resolve-field';\nimport { emitComponentInitialized } from '../../utils/emit-initialization/emit-initialization';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { PageField, validatePageNesting } from '../../definitions/default/page-field';\nimport { injectFieldRegistry } from '../../utils/inject-field-registry/inject-field-registry';\nimport { EventBus } from '../../events/event.bus';\nimport { NextPageEvent, PageChangeEvent, PreviousPageEvent } from '../../events/constants';\nimport { FieldDef } from '../../definitions/base/field-def';\n\n/**\n * Renders a single page in multi-page (wizard) forms.\n *\n * Visibility is controlled by the PageOrchestrator via the isVisible input.\n * Pages cannot be nested within other pages - validation prevents this.\n * Field values are flattened into the parent form (no nesting under page key).\n */\n@Component({\n  selector: 'section[page-field]',\n  imports: [NgComponentOutlet],\n  template: `\n    @for (field of resolvedFields(); track field.key) {\n      <ng-container *ngComponentOutlet=\"field.component; injector: field.injector; inputs: field.inputs()\" />\n    }\n  `,\n  styleUrl: './page-field.component.scss',\n  host: {\n    class: 'df-field df-page-field',\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  private readonly eventBus = inject(EventBus);\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Inputs\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  field = input.required<PageField>();\n  key = input.required<string>();\n  pageIndex = input.required<number>();\n  isVisible = input.required<boolean>();\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Computed Signals\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  readonly disabled = computed(() => this.field().disabled || false);\n\n  readonly isValid = computed(() => {\n    const pageField = this.field();\n    const valid = validatePageNesting(pageField);\n\n    if (!valid) {\n      console.error(\n        `[Dynamic Forms] 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    return valid;\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    pipe(\n      switchMap((fields) => {\n        if (!fields || fields.length === 0) {\n          return of([] as (ResolvedField | undefined)[]);\n        }\n        const pageKey = this.field().key;\n        const context = {\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            console.error(\n              `[Dynamic Forms] Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}) ` +\n                `within page '${pageKey}'. Ensure the field type is registered in your field registry.`,\n              error,\n            );\n          },\n        };\n        return forkJoin(fields.map((f) => resolveField(f as FieldDef<unknown>, context)));\n      }),\n      map((fields) => fields.filter((f): f is ResolvedField => f !== undefined)),\n      scan(reconcileFields, [] as ResolvedField[]),\n    ),\n    { initialValue: [] as ResolvedField[], injector: this.injector },\n  );\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Effects\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  private readonly emitInitializedOnFieldsResolved = explicitEffect([this.resolvedFields], ([fields]) => {\n    if (fields.length > 0) {\n      emitComponentInitialized(this.eventBus, 'page', this.field().key, this.injector);\n    }\n  });\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-forge-dynamic-forms-page-field.component-ZVrJUMNb.mjs","sources":["../../../../packages/dynamic-forms/src/lib/fields/page/page-field.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, Injector, input } from '@angular/core';\nimport { NgComponentOutlet } from '@angular/common';\nimport { outputFromObservable } from '@angular/core/rxjs-interop';\nimport { forkJoin, map, of, pipe, scan, switchMap } from 'rxjs';\nimport { derivedFromDeferred } from '../../utils/derived-from-deferred/derived-from-deferred';\nimport { reconcileFields, ResolvedField, resolveField } from '../../utils/resolve-field/resolve-field';\nimport { emitComponentInitialized } from '../../utils/emit-initialization/emit-initialization';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { PageField, validatePageNesting } from '../../definitions/default/page-field';\nimport { injectFieldRegistry } from '../../utils/inject-field-registry/inject-field-registry';\nimport { EventBus } from '../../events/event.bus';\nimport { NextPageEvent, PageChangeEvent, PreviousPageEvent } from '../../events/constants';\nimport { FieldDef } from '../../definitions/base/field-def';\n\n/**\n * Renders a single page in multi-page (wizard) forms.\n *\n * Visibility is controlled by the PageOrchestrator via the isVisible input.\n * Pages cannot be nested within other pages - validation prevents this.\n * Field values are flattened into the parent form (no nesting under page key).\n */\n@Component({\n  selector: 'section[page-field]',\n  imports: [NgComponentOutlet],\n  template: `\n    @for (field of resolvedFields(); track field.key) {\n      <ng-container *ngComponentOutlet=\"field.component; injector: field.injector; inputs: field.inputs()\" />\n    }\n  `,\n  styleUrl: './page-field.component.scss',\n  host: {\n    class: 'df-field df-page-field',\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  private readonly eventBus = inject(EventBus);\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Inputs\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  field = input.required<PageField>();\n  key = input.required<string>();\n  pageIndex = input.required<number>();\n  isVisible = input.required<boolean>();\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Computed Signals\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  readonly disabled = computed(() => this.field().disabled || false);\n\n  readonly isValid = computed(() => {\n    const pageField = this.field();\n    const valid = validatePageNesting(pageField);\n\n    if (!valid) {\n      console.error(\n        `[Dynamic Forms] 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    return valid;\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    pipe(\n      switchMap((fields) => {\n        if (!fields || fields.length === 0) {\n          return of([] as (ResolvedField | undefined)[]);\n        }\n        const pageKey = this.field().key;\n        const context = {\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            console.error(\n              `[Dynamic Forms] Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}) ` +\n                `within page '${pageKey}'. Ensure the field type is registered in your field registry.`,\n              error,\n            );\n          },\n        };\n        return forkJoin(fields.map((f) => resolveField(f as FieldDef<unknown>, context)));\n      }),\n      map((fields) => fields.filter((f): f is ResolvedField => f !== undefined)),\n      scan(reconcileFields, [] as ResolvedField[]),\n    ),\n    { initialValue: [] as ResolvedField[], injector: this.injector },\n  );\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Constructor\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  constructor() {\n    this.setupEffects();\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Private Methods\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  private setupEffects(): void {\n    // Emit initialization event when fields are resolved\n    explicitEffect([this.resolvedFields], ([fields]) => {\n      if (fields.length > 0) {\n        emitComponentInitialized(this.eventBus, 'page', this.field().key, this.injector);\n      }\n    });\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAcA;;;;;;AAMG;AAsBW,MAAO,kBAAkB,CAAA;;;;AAKpB,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;IAC/B,aAAa,GAAG,mBAAmB,EAAE;AACrC,IAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC3B,IAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;;;;AAM5C,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAa;AACnC,IAAA,GAAG,GAAG,KAAK,CAAC,QAAQ,8CAAU;AAC9B,IAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,oDAAU;AACpC,IAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,oDAAW;;;;AAM5B,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,QAAQ,IAAI,KAAK,oDAAC;AAEzD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AAC/B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,EAAE;AAC9B,QAAA,MAAM,KAAK,GAAG,mBAAmB,CAAC,SAAS,CAAC;QAE5C,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,OAAO,CAAC,KAAK,CACX,gDAAgD,SAAS,CAAC,GAAG,CAAA,+BAAA,CAAiC;gBAC5F,CAAA,qFAAA,CAAuF,EACzF,SAAS,CACV;QACH;AAEA,QAAA,OAAO,KAAK;AACd,IAAA,CAAC,mDAAC;AAEe,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,GAAG,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,kBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;;;;AAMjE,IAAA,QAAQ,GAAG,oBAAoB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAgB,WAAW,CAAC,CAAC;AAC7E,IAAA,YAAY,GAAG,oBAAoB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAoB,eAAe,CAAC,CAAC;AACzF,IAAA,UAAU,GAAG,oBAAoB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAkB,aAAa,CAAC,CAAC;;;;AAM3E,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AAC5C,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE;AACnB,YAAA,OAAO,EAAE;QACX;QACA,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,IAAI,EAAE;AAClC,IAAA,CAAC,wDAAC;AAEiB,IAAA,cAAc,GAAG,mBAAmB,CACrD,IAAI,CAAC,YAAY,EACjB,IAAI,CACF,SAAS,CAAC,CAAC,MAAM,KAAI;QACnB,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;AAClC,YAAA,OAAO,EAAE,CAAC,EAAmC,CAAC;QAChD;QACA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG;AAChC,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,iBAAiB,EAAE,CAAC,IAAY,KAAK,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,IAAI,CAAC;AAC/E,YAAA,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE;YACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;AAC3B,YAAA,OAAO,EAAE,CAAC,QAA2B,EAAE,KAAc,KAAI;AACvD,gBAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,GAAG,IAAI,UAAU;gBAC3C,OAAO,CAAC,KAAK,CACX,CAAA,yDAAA,EAA4D,QAAQ,CAAC,IAAI,CAAA,QAAA,EAAW,QAAQ,CAAA,EAAA,CAAI;AAC9F,oBAAA,CAAA,aAAA,EAAgB,OAAO,CAAA,8DAAA,CAAgE,EACzF,KAAK,CACN;YACH,CAAC;SACF;AACD,QAAA,OAAO,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC,CAAsB,EAAE,OAAO,CAAC,CAAC,CAAC;IACnF,CAAC,CAAC,EACF,GAAG,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAyB,CAAC,KAAK,SAAS,CAAC,CAAC,EAC1E,IAAI,CAAC,eAAe,EAAE,EAAqB,CAAC,CAC7C,EACD,EAAE,YAAY,EAAE,EAAqB,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CACjE;;;;AAMD,IAAA,WAAA,GAAA;QACE,IAAI,CAAC,YAAY,EAAE;IACrB;;;;IAMQ,YAAY,GAAA;;AAElB,QAAA,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAI;AACjD,YAAA,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;AACrB,gBAAA,wBAAwB,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC;YAClF;AACF,QAAA,CAAC,CAAC;IACJ;uGA9GmB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,uBAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,aAAA,EAAA,IAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,EAAA,cAAA,EAAA,wBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAlB3B;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,opLAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EALS,iBAAiB,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,mBAAA,EAAA,yBAAA,EAAA,2BAAA,EAAA,sCAAA,EAAA,0BAAA,EAAA,2BAAA,CAAA,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAmBR,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBArBtC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,EAAA,OAAA,EACtB,CAAC,iBAAiB,CAAC,EAAA,QAAA,EAClB;;;;GAIT,EAAA,IAAA,EAEK;AACJ,wBAAA,KAAK,EAAE,wBAAwB;AAC/B,wBAAA,kBAAkB,EAAE,YAAY;AAChC,wBAAA,yBAAyB,EAAE,aAAa;AACxC,wBAAA,wBAAwB,EAAE,cAAc;AACxC,wBAAA,oBAAoB,EAAE,cAAc;AACpC,wBAAA,wBAAwB,EAAE,aAAa;AACvC,wBAAA,MAAM,EAAE,YAAY;AACpB,wBAAA,oBAAoB,EAAE,OAAO;qBAC9B,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,opLAAA,CAAA,EAAA;;;;;"}

package/fesm2022/{ng-forge-dynamic-forms-text-field.component-7QVNm95W.mjs → ng-forge-dynamic-forms-text-field.component-BKTbxAKn.mjs}

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { AsyncPipe } from '@angular/common';
-import { D as DynamicTextPipe } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-Dcd04rfS.mjs';
+import { D as DynamicTextPipe } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-BWj75LVN.mjs';
 
 class TextFieldComponent {
     key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
@@ -110,4 +110,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
         }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
 
 export { TextFieldComponent as default };
-//# sourceMappingURL=ng-forge-dynamic-forms-text-field.component-7QVNm95W.mjs.map
+//# sourceMappingURL=ng-forge-dynamic-forms-text-field.component-BKTbxAKn.mjs.map

package/fesm2022/{ng-forge-dynamic-forms-text-field.component-7QVNm95W.mjs.map → ng-forge-dynamic-forms-text-field.component-BKTbxAKn.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ng-forge-dynamic-forms-text-field.component-7QVNm95W.mjs","sources":["../../../../packages/dynamic-forms/src/lib/fields/text/text-field.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { AsyncPipe } from '@angular/common';\nimport { DynamicTextPipe } from '../../pipes/dynamic-text/dynamic-text.pipe';\nimport { TextProps } from '../../definitions/default/text-field';\nimport { DynamicText } from '../../models/types/dynamic-text';\n\n@Component({\n  selector: 'df-text',\n  template: `\n    @switch (elementType()) {\n      @case ('p') {\n        <p class=\"df-text df-text-p\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </p>\n      }\n      @case ('h1') {\n        <h1 class=\"df-text df-text-h1\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </h1>\n      }\n      @case ('h2') {\n        <h2 class=\"df-text df-text-h2\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </h2>\n      }\n      @case ('h3') {\n        <h3 class=\"df-text df-text-h3\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </h3>\n      }\n      @case ('h4') {\n        <h4 class=\"df-text df-text-h4\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </h4>\n      }\n      @case ('h5') {\n        <h5 class=\"df-text df-text-h5\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </h5>\n      }\n      @case ('h6') {\n        <h6 class=\"df-text df-text-h6\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </h6>\n      }\n      @case ('span') {\n        <span class=\"df-text df-text-span\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </span>\n      }\n    }\n  `,\n  styleUrl: './text-field.component.scss',\n  imports: [AsyncPipe, DynamicTextPipe],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[id]': '`${key()}`',\n    '[attr.data-testid]': 'key()',\n    '[attr.hidden]': 'hidden() || null',\n  },\n})\nexport default class TextFieldComponent {\n  readonly key = input.required<string>();\n  readonly label = input.required<DynamicText>();\n  readonly className = input<string>();\n  readonly tabIndex = input<number>();\n  readonly hidden = input<boolean>();\n  readonly props = input<TextProps>();\n\n  readonly elementType = computed(() => this.props()?.elementType || 'p');\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-forge-dynamic-forms-text-field.component-BKTbxAKn.mjs","sources":["../../../../packages/dynamic-forms/src/lib/fields/text/text-field.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { AsyncPipe } from '@angular/common';\nimport { DynamicTextPipe } from '../../pipes/dynamic-text/dynamic-text.pipe';\nimport { TextProps } from '../../definitions/default/text-field';\nimport { DynamicText } from '../../models/types/dynamic-text';\n\n@Component({\n  selector: 'df-text',\n  template: `\n    @switch (elementType()) {\n      @case ('p') {\n        <p class=\"df-text df-text-p\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </p>\n      }\n      @case ('h1') {\n        <h1 class=\"df-text df-text-h1\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </h1>\n      }\n      @case ('h2') {\n        <h2 class=\"df-text df-text-h2\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </h2>\n      }\n      @case ('h3') {\n        <h3 class=\"df-text df-text-h3\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </h3>\n      }\n      @case ('h4') {\n        <h4 class=\"df-text df-text-h4\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </h4>\n      }\n      @case ('h5') {\n        <h5 class=\"df-text df-text-h5\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </h5>\n      }\n      @case ('h6') {\n        <h6 class=\"df-text df-text-h6\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </h6>\n      }\n      @case ('span') {\n        <span class=\"df-text df-text-span\" [class]=\"className() || ''\">\n          {{ label() | dynamicText | async }}\n        </span>\n      }\n    }\n  `,\n  styleUrl: './text-field.component.scss',\n  imports: [AsyncPipe, DynamicTextPipe],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[id]': '`${key()}`',\n    '[attr.data-testid]': 'key()',\n    '[attr.hidden]': 'hidden() || null',\n  },\n})\nexport default class TextFieldComponent {\n  readonly key = input.required<string>();\n  readonly label = input.required<DynamicText>();\n  readonly className = input<string>();\n  readonly tabIndex = input<number>();\n  readonly hidden = input<boolean>();\n  readonly props = input<TextProps>();\n\n  readonly elementType = computed(() => this.props()?.elementType || 'p');\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-forge-dynamic-forms.mjs

@@ -1,2 +1,2 @@
-export { O as ARRAY_CONTEXT, A as AddArrayItemEvent, W as ArrayFieldComponent, a0 as BUILT_IN_FIELDS, b as DynamicForm, D as DynamicTextPipe, E as EventBus, L as FIELD_REGISTRY, Q as FIELD_SIGNAL_CONTEXT, F as FormClearEvent, u as FormResetEvent, X as GroupFieldComponent, N as NextPageEvent, P as PageChangeEvent, w as PreviousPageEvent, R as RemoveArrayItemEvent, Y as RowFieldComponent, S as SubmitEvent, Z as applyValidator, _ as applyValidators, x as arrayFieldMapper, y as baseFieldMapper, z as buildBaseInputs, B as checkboxFieldMapper, T as createResolvedErrorsSignal, C as datepickerFieldMapper, V as dynamicTextToObservable, a1 as getChildFieldTree, a2 as getChildrenMap, a3 as getFieldProxy, M as getFieldValueHandling, G as groupFieldMapper, a4 as hasFormStructure, i as injectFieldRegistry, k as isArrayField, h as isCheckedField, l as isContainerField, m as isDisplayOnlyField, c as isFormStateCondition, n as isGroupField, o as isLeafField, q as isPageField, s as isRowField, t as isValueBearingField, j as isValueField, I as optionsFieldMapper, H as pageFieldMapper, p as provideDynamicForm, g as resolveNextButtonDisabled, f as resolveSubmitButtonDisabled, $ as resolveTokens, J as rowFieldMapper, U as shouldShowErrors, K as valueFieldMapper } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-Dcd04rfS.mjs';
+export { O as ARRAY_CONTEXT, A as AddArrayItemEvent, W as ArrayFieldComponent, a0 as BUILT_IN_FIELDS, b as DynamicForm, D as DynamicTextPipe, E as EventBus, L as FIELD_REGISTRY, Q as FIELD_SIGNAL_CONTEXT, F as FormClearEvent, u as FormResetEvent, X as GroupFieldComponent, N as NextPageEvent, P as PageChangeEvent, w as PreviousPageEvent, R as RemoveArrayItemEvent, Y as RowFieldComponent, S as SubmitEvent, Z as applyValidator, _ as applyValidators, x as arrayFieldMapper, y as baseFieldMapper, z as buildBaseInputs, B as checkboxFieldMapper, T as createResolvedErrorsSignal, C as datepickerFieldMapper, V as dynamicTextToObservable, a1 as getChildFieldTree, a2 as getChildrenMap, a3 as getFieldProxy, M as getFieldValueHandling, G as groupFieldMapper, a4 as hasFormStructure, i as injectFieldRegistry, k as isArrayField, h as isCheckedField, l as isContainerField, m as isDisplayOnlyField, c as isFormStateCondition, n as isGroupField, o as isLeafField, q as isPageField, s as isRowField, t as isValueBearingField, j as isValueField, I as optionsFieldMapper, H as pageFieldMapper, p as provideDynamicForm, g as resolveNextButtonDisabled, f as resolveSubmitButtonDisabled, $ as resolveTokens, J as rowFieldMapper, U as shouldShowErrors, K as valueFieldMapper } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-BWj75LVN.mjs';
 //# sourceMappingURL=ng-forge-dynamic-forms.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-forge/dynamic-forms",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Type-safe, signal-powered dynamic forms for Angular. Build complex forms from configuration with full TypeScript inference.",
   "type": "module",
   "license": "MIT",
@@ -24,8 +24,15 @@
     "form-generator",
     "type-safe",
     "typescript",
-    "angular-forms"
+    "angular-forms",
+    "schema-forms",
+    "json-forms",
+    "config-driven"
   ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
   "peerDependencies": {
     "@angular/common": "~21.0.5",
     "@angular/core": "~21.0.5",
@@ -44,7 +51,6 @@
       "default": "./fesm2022/ng-forge-dynamic-forms.mjs"
     }
   },
-  "sideEffects": false,
   "dependencies": {
     "tslib": "^2.3.0"
   }

package/types/ng-forge-dynamic-forms.d.ts

@@ -654,6 +654,57 @@ type RegisteredFieldTypes = ContainerFieldTypes | LeafFieldTypes;
  * Extract field types that are available in the registry
  */
 type AvailableFieldTypes = keyof DynamicFormFieldRegistry['containers'] | keyof DynamicFormFieldRegistry['leaves'];
+/**
+ * Combined registry mapping type names to field definitions.
+ * This flattens containers and leaves into a single mapping.
+ */
+type FieldTypeMap = DynamicFormFieldRegistry['containers'] & DynamicFormFieldRegistry['leaves'];
+/**
+ * Extract a specific field type from RegisteredFieldTypes based on the `type` discriminant.
+ * This enables proper type narrowing when defining fields.
+ *
+ * @example
+ * ```typescript
+ * // Extract a specific field type
+ * type MyInputField = ExtractField<'input'>;
+ *
+ * // Use in field definitions for proper props inference
+ * const field: ExtractField<'input'> = {
+ *   type: 'input',
+ *   key: 'email',
+ *   value: '',
+ *   props: { type: 'email' } // Only input props allowed here
+ * };
+ * ```
+ */
+type ExtractField<T extends AvailableFieldTypes> = T extends keyof FieldTypeMap ? FieldTypeMap[T] : never;
+/**
+ * Narrow a field definition based on its `type` property.
+ * Use this to get proper type inference when working with field unions.
+ *
+ * @example
+ * ```typescript
+ * function processField<T extends RegisteredFieldTypes>(field: T): NarrowField<T> {
+ *   return field as NarrowField<T>;
+ * }
+ * ```
+ */
+type NarrowField<T> = T extends {
+    type: infer TType;
+} ? (TType extends AvailableFieldTypes ? ExtractField<TType> : T) : T;
+/**
+ * Narrow each field in an array based on its `type` property.
+ * Use with `satisfies` to get proper type inference for field arrays.
+ *
+ * @example
+ * ```typescript
+ * const fields = [
+ *   { type: 'input', key: 'name', value: '', props: { type: 'text' } },
+ *   { type: 'select', key: 'country', value: 'us', options: [...] },
+ * ] as const satisfies NarrowFields;
+ * ```
+ */
+type NarrowFields = readonly NarrowField<RegisteredFieldTypes>[];
 
 /**
  * Helper type to convert union to intersection
@@ -664,27 +715,49 @@ type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
  * Depth counter for recursion limiting (prevents infinite type instantiation)
  */
 type Depth = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+/**
+ * Widens literal types to their primitive equivalents.
+ * This prevents `as const` from over-narrowing types like `''` to literal `''` instead of `string`.
+ *
+ * @example
+ * ```typescript
+ * type A = Widen<''>; // string
+ * type B = Widen<false>; // boolean
+ * type C = Widen<42>; // number
+ * type D = Widen<string[]>; // string[]
+ * ```
+ */
+type Widen<T> = T extends string ? string : T extends number ? number : T extends boolean ? boolean : T;
+/**
+ * Infer value type based on field type and props.
+ * - Slider fields: always number
+ * - Input fields with props.type: 'number': number
+ * - Other fields: widen the literal value type
+ */
+type InferValueType<T, V> = T extends {
+    type: 'slider';
+} ? number : T extends {
+    type: 'input';
+    props: {
+        type: 'number';
+    };
+} ? number : Widen<V>;
+/** Make type optional if field is not required */
+type MaybeOptional<T, V> = T extends {
+    required: true;
+} ? V : V | undefined;
 /**
  * Process a single field and determine its contribution to the form value type
- * Handles:
- * - Page fields: flatten children (valueHandling: 'flatten')
- * - Row fields: flatten children (valueHandling: 'flatten')
- * - Group fields: nest children under group key (valueHandling: 'include')
- * - Text fields: exclude from values (valueHandling: 'exclude')
- * - Value fields: include with their key and value type
  */
 type ProcessField<T, D extends number = 5> = [D] extends [never] ? Record<string, unknown> : T extends {
-    type: 'page';
-    fields: infer TFields;
-} ? TFields extends RegisteredFieldTypes[] ? InferFormValueWithDepth<TFields, Depth[D]> : never : T extends {
-    type: 'row';
-    fields: infer TFields;
-} ? TFields extends RegisteredFieldTypes[] ? InferFormValueWithDepth<TFields, Depth[D]> : never : T extends {
+    type: 'page' | 'row';
+    fields: infer F;
+} ? F extends RegisteredFieldTypes[] ? InferFormValueWithDepth<F, Depth[D]> : never : T extends {
     type: 'group';
     key: infer K;
-    fields: infer TFields;
-} ? K extends string ? TFields extends RegisteredFieldTypes[] ? {
-    [P in K]: InferFormValueWithDepth<TFields, Depth[D]>;
+    fields: infer F;
+} ? K extends string ? F extends RegisteredFieldTypes[] ? {
+    [P in K]: InferFormValueWithDepth<F, Depth[D]>;
 } : {
     [P in K]: Record<string, unknown>;
 } : never : T extends {
@@ -692,39 +765,46 @@ type ProcessField<T, D extends number = 5> = [D] extends [never] ? Record<string
 } ? never : T extends {
     key: infer K;
     value: infer V;
-    required: true;
-} ? K extends string ? {
-    [P in K]: V;
-} : never : T extends {
-    key: infer K;
-    value: infer V;
 } ? K extends string ? {
-    [P in K]: V | undefined;
+    [P in K]: MaybeOptional<T, InferValueType<T, V>>;
 } : never : never;
 /**
  * Internal helper with depth tracking
  */
 type InferFormValueWithDepth<T extends RegisteredFieldTypes[], D extends number = 5> = UnionToIntersection<ProcessField<T[number], D>>;
 /**
- * Infer form value type from an array of field definitions
- * Recursively processes nested structures and merges the results
- * Limited to 5 levels of nesting to prevent infinite type instantiation
+ * Helper to extract fields from either fields array or FormConfig
+ */
+type ExtractFields<T> = T extends {
+    fields: infer TFields;
+} ? TFields extends readonly RegisteredFieldTypes[] ? TFields : never : T extends readonly RegisteredFieldTypes[] ? T : never;
+/**
+ * Infer form value type from fields array or FormConfig.
+ * Recursively processes nested structures and merges the results.
+ * Limited to 5 levels of nesting to prevent infinite type instantiation.
  *
  * @example
  * ```typescript
+ * // From fields array
  * const fields = [
  *   { type: 'input', key: 'email', value: '', required: true },
- *   { type: 'group', key: 'address', fields: [
- *     { type: 'input', key: 'street', value: '' },
- *     { type: 'input', key: 'city', value: '' }
- *   ]}
+ *   { type: 'input', key: 'name', value: '' }
  * ] as const;
+ * type FieldsValue = InferFormValue<typeof fields>;
+ *
+ * // From FormConfig
+ * const config = {
+ *   fields: [
+ *     { type: 'input', key: 'email', value: '', required: true },
+ *     { type: 'input', key: 'name', value: '' }
+ *   ]
+ * } as const satisfies FormConfig;
+ * type ConfigValue = InferFormValue<typeof config>;
  *
- * type FormValue = InferFormValue<typeof fields>;
- * // Result: { email: string; address: { street?: string; city?: string } }
+ * // Result: { email: string; name?: string }
  * ```
  */
-type InferFormValue$1<T extends RegisteredFieldTypes[]> = InferFormValueWithDepth<T, 5>;
+type InferFormValue$1<T> = ExtractFields<T> extends readonly RegisteredFieldTypes[] ? InferFormValueWithDepth<ExtractFields<T> extends RegisteredFieldTypes[] ? ExtractFields<T> : [...ExtractFields<T>], 5> : never;
 
 /**
  * Base configuration shared by all validators
@@ -1290,19 +1370,18 @@ interface SubmissionConfig<TValue = unknown> {
  *
  * @example
  * ```typescript
- * const formConfig: FormConfig = {
+ * const formConfig = {
  *   fields: [
- *     { type: 'input', key: 'email', value: '', label: 'Email', required: true, email: true },
+ *     { type: 'input', key: 'email', value: '', label: 'Email', required: true },
  *     { type: 'group', key: 'address', label: 'Address', fields: [
  *       { type: 'input', key: 'street', value: '', label: 'Street' },
  *       { type: 'input', key: 'city', value: '', label: 'City' }
  *     ]},
- *     { type: 'button', key: 'submit', label: 'Submit', buttonType: 'submit' }
  *   ],
- *   schemas: [
- *     { name: 'emailSchema', schema: { email: validators.email } }
- *   ]
- * };
+ * } as const satisfies FormConfig;
+ *
+ * // Infer form value type from config
+ * type FormValue = InferFormValue<typeof formConfig>;
  * ```
  *
  * @typeParam TFields - Array of registered field types available for this form
@@ -1310,7 +1389,7 @@ interface SubmissionConfig<TValue = unknown> {
  *
  * @public
  */
-interface FormConfig<TFields extends RegisteredFieldTypes[] = RegisteredFieldTypes[], TValue = InferFormValue$1<TFields>> {
+interface FormConfig<TFields extends NarrowFields | RegisteredFieldTypes[] = RegisteredFieldTypes[], TValue = InferFormValue$1<TFields extends readonly RegisteredFieldTypes[] ? TFields : RegisteredFieldTypes[]>> {
     /**
      * Array of field definitions that define the form structure.
      *
@@ -2151,11 +2230,6 @@ declare class DynamicForm<TFields extends RegisteredFieldTypes[] = RegisteredFie
     readonly disabled: Signal<boolean>;
     /** Whether the form is currently submitting. */
     readonly submitting: Signal<boolean>;
-    /**
-     * Announcement message for screen readers.
-     * Updates when form submission fails due to validation errors.
-     */
-    readonly errorAnnouncement: _angular_core.WritableSignal<string>;
     readonly initialized$: rxjs.Observable<boolean>;
     /** Emits when form validity changes. */
     readonly validityChange: _angular_core.OutputRef<boolean>;
@@ -2182,18 +2256,7 @@ declare class DynamicForm<TFields extends RegisteredFieldTypes[] = RegisteredFie
     /** Emits when page navigation state changes (canGoNext, canGoPrevious, etc.). */
     readonly onPageNavigationStateChange: _angular_core.OutputRef<PageNavigationStateChangeEvent>;
     protected readonly resolvedFields: Signal<ResolvedField[]>;
-    private readonly syncEntityToValue;
-    private readonly clearErrorsOnConfigChange;
-    private readonly emitPagedFormInitialized;
-    private readonly emitNonPagedFormInitialized;
-    private readonly handleFormReset;
-    private readonly handleFormClear;
-    /**
-     * Announces form validation errors to screen readers when submission is attempted
-     * on an invalid form.
-     */
-    private readonly handleErrorAnnouncement;
-    private readonly handleSubmission;
+    constructor();
     /**
      * Handles native form submission triggered by:
      * - Pressing Enter in an input field
@@ -2206,16 +2269,13 @@ declare class DynamicForm<TFields extends RegisteredFieldTypes[] = RegisteredFie
      * @param event - The native submit event from the form element
      */
     protected onNativeSubmit(event: Event): void;
+    private setupEffects;
+    private setupEventHandlers;
     private registerValidatorsFromConfig;
     private createFormSetupFromConfig;
     private createEmptyFormSetup;
     private onFormReset;
     private onFormClear;
-    /**
-     * Counts the total number of validation errors across all fields.
-     * Used for screen reader announcements.
-     */
-    private countErrors;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DynamicForm<any, any>, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DynamicForm<any, any>, "form[dynamic-form]", never, { "config": { "alias": "dynamic-form"; "required": true; "isSignal": true; }; "formOptions": { "alias": "formOptions"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "validityChange": "validityChange"; "dirtyChange": "dirtyChange"; "submitted": "submitted"; "reset": "reset"; "cleared": "cleared"; "events": "events"; "initialized": "initialized"; "onPageChange": "onPageChange"; "onPageNavigationStateChange": "onPageNavigationStateChange"; }, never, never, true, never>;
@@ -2528,51 +2588,48 @@ interface InputProps<T extends InputType = InputType> {
     type?: T;
     placeholder?: DynamicText;
 }
+/**
+ * Input types that produce string values
+ */
+type StringInputType = Exclude<InputType, 'number'>;
 /**
  * Number input field with strict number value type.
  * When props.type is 'number', value must be number.
+ * Props is REQUIRED and must include type: 'number'.
  */
 interface NumberInputField<TProps extends {
     type?: string;
-} = {
+} = InputProps> extends BaseValueField<TProps & {
     type: 'number';
-    placeholder?: DynamicText;
-}> extends BaseValueField<TProps, number> {
+}, number> {
     type: 'input';
-    props?: TProps;
+    props: TProps & {
+        type: 'number';
+    };
 }
 /**
  * String input field with strict string value type.
- * When props.type is text/email/etc, value must be string.
+ * When props.type is text/email/etc (or undefined), value must be string.
+ * Props type cannot be 'number'.
  */
 interface StringInputField<TProps extends {
     type?: string;
-} = {
-    type: 'text' | 'email' | 'password' | 'tel' | 'url';
-    placeholder?: DynamicText;
-}> extends BaseValueField<TProps, string> {
+} = InputProps> extends BaseValueField<TProps & {
+    type?: StringInputType;
+}, string> {
     type: 'input';
-    props?: TProps;
-}
-/**
- * Helper type to extract the input type from props
- */
-type ExtractInputType<TProps> = TProps extends {
-    type?: infer T;
-} ? T : InputType;
-/**
- * Fallback variant when props is undefined - allows both string and number values
- */
-interface UndefinedPropsInputField extends BaseValueField<undefined, string | number> {
-    type: 'input';
-    props?: never;
+    props?: TProps & {
+        type?: StringInputType;
+    };
 }
 /**
- * Builds discriminated union based on what input types are possible in TProps
+ * Builds discriminated union where props.type determines value type.
+ * - If props.type is 'number', only NumberInputField matches (value: number)
+ * - If props.type is undefined/text/email/etc, only StringInputField matches (value: string)
  */
 type BuildInputFieldUnion<TProps extends {
     type?: string;
-}> = (ExtractInputType<TProps> extends infer T ? T extends string ? ('number' extends T ? NumberInputField<TProps> : never) | (Exclude<T, 'number'> extends never ? never : StringInputField<TProps>) : StringInputField<TProps> : never) | UndefinedPropsInputField;
+}> = NumberInputField<TProps> | StringInputField<TProps>;
 /**
  * Input field with automatic type-safe value inference.
  * TypeScript automatically infers the correct value type based on props.type.
@@ -3180,7 +3237,8 @@ declare class RowFieldComponent {
     private readonly rawFieldRegistry;
     private readonly fieldsSource;
     protected readonly resolvedFields: _angular_core.Signal<ResolvedField[]>;
-    private readonly emitInitializedOnFieldsResolved;
+    constructor();
+    private setupEffects;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RowFieldComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<RowFieldComponent, "div[row-field]", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -3227,7 +3285,8 @@ declare class GroupFieldComponent<TModel = Record<string, unknown>> {
     readonly submitted: _angular_core.OutputRef<SubmitEvent>;
     private readonly fieldsSource;
     protected readonly resolvedFields: _angular_core.Signal<ResolvedField[]>;
-    private readonly emitInitializedOnFieldsResolved;
+    constructor();
+    private setupEffects;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<GroupFieldComponent<any>, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<GroupFieldComponent<any>, "fieldset[group-field]", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; }, { "validityChange": "validityChange"; "dirtyChange": "dirtyChange"; "submitted": "submitted"; }, never, never, true, never>;
 }
@@ -3270,9 +3329,9 @@ declare class ArrayFieldComponent<TModel = Record<string, unknown>> {
     private readonly updateVersion;
     private readonly itemOrderSignal;
     readonly resolvedItems: _angular_core.WritableSignal<ResolvedArrayItem[]>;
-    private readonly syncFieldsOnArrayChange;
-    private readonly handleAddItem;
-    private readonly handleRemoveItem;
+    constructor();
+    private setupEffects;
+    private setupEventHandlers;
     private performDifferentialUpdate;
     private resolveAllItems;
     private appendItems;
@@ -3423,4 +3482,4 @@ declare function injectFieldRegistry(): {
 };
 
 export { ARRAY_CONTEXT, AddArrayItemEvent, ArrayFieldComponent, BUILT_IN_FIELDS, DynamicForm, DynamicTextPipe, EventBus, FIELD_REGISTRY, FIELD_SIGNAL_CONTEXT, FormClearEvent, FormResetEvent, GroupFieldComponent, NextPageEvent, PageChangeEvent, PreviousPageEvent, RemoveArrayItemEvent, RowFieldComponent, SubmitEvent, applyValidator, applyValidators, arrayFieldMapper, baseFieldMapper, buildBaseInputs, checkboxFieldMapper, createResolvedErrorsSignal, datepickerFieldMapper, dynamicTextToObservable, getChildFieldTree, getChildrenMap, getFieldProxy, getFieldValueHandling, groupFieldMapper, hasFormStructure, injectFieldRegistry, isArrayField, isCheckedField, isContainerField, isDisplayOnlyField, isFormStateCondition, isGroupField, isLeafField, isPageField, isRowField, isValueBearingField, isValueField, optionsFieldMapper, pageFieldMapper, provideDynamicForm, resolveNextButtonDisabled, resolveSubmitButtonDisabled, resolveTokens, rowFieldMapper, shouldShowErrors, valueFieldMapper };
-export type { ArrayAllowedChildren, ArrayContext, ArrayField, ArrayItemContext, AsyncCustomValidator, AsyncValidatorConfig, AvailableFieldTypes, BaseCheckedField, BaseValidatorConfig, BaseValueField, BuiltInValidatorConfig, ButtonField, ButtonLogicContext, CheckboxField, CheckedFieldComponent, ConditionalExpression, ContainerFieldTypes, CustomFnConfig, CustomValidator, CustomValidatorConfig, DatepickerField, DatepickerProps, DynamicFormFieldRegistry, DynamicText, EvaluationContext, EventArgs, ExtractFieldDefs, ExtractFormValue, FieldComponent, FieldDef, FieldOption, FieldPathAccess, FieldRegistryContainers, FieldRegistryLeaves, FieldSignalContext, FieldTypeDefinition, FieldWithValidation, FormConfig, FormEvent, FormEventConstructor, FormInternals, FormMode, FormModeDetectionResult, FormOptions, FormStateCondition, GroupAllowedChildren, GroupField, HttpCustomValidator, HttpResourceRequest, HttpValidatorConfig, InferFormValue$1 as InferFormValue, InputField, InputProps, LeafFieldTypes, LogicConfig, MapperFn, MultiCheckboxField, NextButtonOptions, PageAllowedChildren, PageField, Prettify, RadioField, RegisteredFieldTypes, ResolvedError, RowAllowedChildren, RowField, SchemaApplicationConfig, SchemaDefinition, SelectField, SelectProps, SliderField, SubmissionActionResult, SubmissionConfig, SubmitButtonOptions, TextElementType, TextField, TextProps, TextareaField, TextareaProps, ToggleField, TokenContext, ValidationError, ValidationMessages, ValidatorConfig, ValueFieldComponent, ValueHandlingMode, ValueType, WithInputSignals };
+export type { ArrayAllowedChildren, ArrayContext, ArrayField, ArrayItemContext, AsyncCustomValidator, AsyncValidatorConfig, AvailableFieldTypes, BaseCheckedField, BaseValidatorConfig, BaseValueField, BuiltInValidatorConfig, ButtonField, ButtonLogicContext, CheckboxField, CheckedFieldComponent, ConditionalExpression, ContainerFieldTypes, CustomFnConfig, CustomValidator, CustomValidatorConfig, DatepickerField, DatepickerProps, DynamicFormFieldRegistry, DynamicText, EvaluationContext, EventArgs, ExtractField, ExtractFieldDefs, ExtractFormValue, FieldComponent, FieldDef, FieldOption, FieldPathAccess, FieldRegistryContainers, FieldRegistryLeaves, FieldSignalContext, FieldTypeDefinition, FieldWithValidation, FormConfig, FormEvent, FormEventConstructor, FormInternals, FormMode, FormModeDetectionResult, FormOptions, FormStateCondition, GroupAllowedChildren, GroupField, HttpCustomValidator, HttpResourceRequest, HttpValidatorConfig, InferFormValue$1 as InferFormValue, InputField, InputProps, LeafFieldTypes, LogicConfig, MapperFn, MultiCheckboxField, NarrowField, NarrowFields, NextButtonOptions, PageAllowedChildren, PageField, Prettify, RadioField, RegisteredFieldTypes, ResolvedError, RowAllowedChildren, RowField, SchemaApplicationConfig, SchemaDefinition, SelectField, SelectProps, SliderField, SubmissionActionResult, SubmissionConfig, SubmitButtonOptions, TextElementType, TextField, TextProps, TextareaField, TextareaProps, ToggleField, TokenContext, ValidationError, ValidationMessages, ValidatorConfig, ValueFieldComponent, ValueHandlingMode, ValueType, WithInputSignals };