@ng-forge/dynamic-forms 1.2.0-next.3 → 1.2.0-next.4

package/fesm2022/{ng-forge-dynamic-forms-container-field.component-o49q6akV.mjs → ng-forge-dynamic-forms-container-field.component-ug5tp6kt.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, DestroyRef, Injector, EnvironmentInjector, viewChild, TemplateRef, ViewContainerRef, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { i as injectFieldRegistry, c as createFieldResolutionPipe, r as resolveWrappers, a as isSameWrapperChain, b as createWrapperChainController, D as DfFieldOutlet } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-CUihkwGC.mjs';
+import { i as injectFieldRegistry, c as createFieldResolutionPipe, r as resolveWrappers, a as isSameWrapperChain, b as createWrapperChainController, D as DfFieldOutlet } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-BGRxIQ2V.mjs';
 import { EventBus, DynamicFormLogger, WRAPPER_AUTO_ASSOCIATIONS, DEFAULT_WRAPPERS, derivedFromDeferred } from '@ng-forge/dynamic-forms/internal';
 import { c as computeContainerHostClasses, s as setupContainerInitEffect } from './ng-forge-dynamic-forms-container-utils-BZFz6ztF.mjs';
 
@@ -86,4 +86,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }], ctorParameters: () => [], propDecorators: { childrenTpl: [{ type: i0.ViewChild, args: ['childrenTpl', { ...{ read: TemplateRef }, isSignal: true }] }], wrapperContainer: [{ type: i0.ViewChild, args: ['wrapperContainer', { ...{ read: ViewContainerRef }, isSignal: true }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }] } });
 
 export { ContainerFieldComponent, ContainerFieldComponent as default };
-//# sourceMappingURL=ng-forge-dynamic-forms-container-field.component-o49q6akV.mjs.map
+//# sourceMappingURL=ng-forge-dynamic-forms-container-field.component-ug5tp6kt.mjs.map

package/fesm2022/{ng-forge-dynamic-forms-container-field.component-o49q6akV.mjs.map → ng-forge-dynamic-forms-container-field.component-ug5tp6kt.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ng-forge-dynamic-forms-container-field.component-o49q6akV.mjs","mappings":";;;;;;AAoDc;AACK;;AAEA;AACE;AACF;AACA;AACA;;AAGA;AACA;;;;;AAIjB;;;;AAGS;;AACA;;;;AAGQ;;AAEE;AAGf;AACA;;;AAGA;AACE;;;AAKI;;AAIP;AAIc;AAIjB;;AAGE;;;AAGE;AACD;;;AAxDgB;;;;;;;;;AAZlB;;;;AAXS;;;;;;;;;;AAcR;AACA;AACA;AACA;AACA;AACA;;AAcgD","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms/src/lib/fields/container/container-field.component.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  EnvironmentInjector,\n  inject,\n  Injector,\n  input,\n  TemplateRef,\n  viewChild,\n  ViewContainerRef,\n} from '@angular/core';\nimport { DfFieldOutlet } from '../../directives/df-field-outlet/df-field-outlet.directive';\nimport { derivedFromDeferred } from '@ng-forge/dynamic-forms/internal';\nimport { createFieldResolutionPipe, ResolvedField } from '../../utils/resolve-field/resolve-field';\nimport { computeContainerHostClasses, setupContainerInitEffect } from '../../utils/container-utils/container-utils';\nimport { ContainerField } 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 { FieldDef } from '@ng-forge/dynamic-forms/internal';\nimport { DynamicFormLogger } from '@ng-forge/dynamic-forms/internal';\nimport { WRAPPER_AUTO_ASSOCIATIONS } from '@ng-forge/dynamic-forms/internal';\nimport { DEFAULT_WRAPPERS } from '@ng-forge/dynamic-forms/internal';\nimport { isSameWrapperChain, resolveWrappers } from '../../utils/resolve-wrappers/resolve-wrappers';\nimport { createWrapperChainController } from '../../utils/wrapper-chain/wrapper-chain-controller';\n\n/** Layout container that wraps child fields with UI chrome. */\n@Component({\n  selector: 'div[container-field]',\n  imports: [DfFieldOutlet],\n  template: `\n    <ng-template #childrenTpl>\n      @for (field of resolvedFields(); track field.key) {\n        @if (!field.hidden()) {\n          <ng-container *dfFieldOutlet=\"field; environmentInjector: environmentInjector\" />\n        }\n      }\n    </ng-template>\n    <ng-container #wrapperContainer></ng-container>\n  `,\n  styleUrl: './container-field.component.scss',\n  host: {\n    '[class]': 'hostClasses()',\n    '[class.disabled]': 'disabled()',\n    '[class.df-container-hidden]': 'hidden()',\n    '[attr.aria-hidden]': 'hidden() || null',\n    '[id]': '`${key()}`',\n    '[attr.data-testid]': 'key()',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class ContainerFieldComponent {\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 wrapperAutoAssociations = inject(WRAPPER_AUTO_ASSOCIATIONS);\n  private readonly defaultWrappersSignal = inject(DEFAULT_WRAPPERS, { optional: true });\n\n  private readonly childrenTpl = viewChild.required('childrenTpl', { read: TemplateRef });\n  private readonly wrapperContainer = viewChild.required('wrapperContainer', { read: ViewContainerRef });\n\n  field = input.required<ContainerField>();\n  key = input.required<string>();\n  className = input<string>();\n  hidden = input(false);\n\n  readonly hostClasses = computed(() => computeContainerHostClasses('container', this.className()));\n  readonly disabled = computed(() => this.field().disabled || false);\n\n  private readonly rawFieldRegistry = computed(() => this.fieldRegistry.raw);\n  private readonly fieldsSource = computed(() => (this.field().fields || []) as FieldDef<unknown>[]);\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\n        const containerKey = this.field().key || '<no key>';\n        this.logger.error(\n          `Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}) ` +\n            `within container '${containerKey}'. 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 wrappers = computed(() => resolveWrappers(this.field(), this.defaultWrappersSignal?.(), this.wrapperAutoAssociations), {\n    equal: isSameWrapperChain,\n  });\n\n  constructor() {\n    setupContainerInitEffect(this.resolvedFields, this.eventBus, 'container', () => this.field().key, this.injector);\n\n    createWrapperChainController({\n      vcr: this.wrapperContainer,\n      wrappers: this.wrappers,\n      renderInnermost: (slot) => slot.createEmbeddedView(this.childrenTpl()),\n    });\n  }\n}\n\nexport { ContainerFieldComponent };\n"]}
+{"version":3,"file":"ng-forge-dynamic-forms-container-field.component-ug5tp6kt.mjs","mappings":";;;;;;AAoDc;AACK;;AAEA;AACE;AACF;AACA;AACA;;AAGA;AACA;;;;;AAIjB;;;;AAGS;;AACA;;;;AAGQ;;AAEE;AAGf;AACA;;;AAGA;AACE;;;AAKI;;AAIP;AAIc;AAIjB;;AAGE;;;AAGE;AACD;;;AAxDgB;;;;;;;;;AAZlB;;;;AAXS;;;;;;;;;;AAcR;AACA;AACA;AACA;AACA;AACA;;AAcgD","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms/src/lib/fields/container/container-field.component.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  EnvironmentInjector,\n  inject,\n  Injector,\n  input,\n  TemplateRef,\n  viewChild,\n  ViewContainerRef,\n} from '@angular/core';\nimport { DfFieldOutlet } from '../../directives/df-field-outlet/df-field-outlet.directive';\nimport { derivedFromDeferred } from '@ng-forge/dynamic-forms/internal';\nimport { createFieldResolutionPipe, ResolvedField } from '../../utils/resolve-field/resolve-field';\nimport { computeContainerHostClasses, setupContainerInitEffect } from '../../utils/container-utils/container-utils';\nimport { ContainerField } 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 { FieldDef } from '@ng-forge/dynamic-forms/internal';\nimport { DynamicFormLogger } from '@ng-forge/dynamic-forms/internal';\nimport { WRAPPER_AUTO_ASSOCIATIONS } from '@ng-forge/dynamic-forms/internal';\nimport { DEFAULT_WRAPPERS } from '@ng-forge/dynamic-forms/internal';\nimport { isSameWrapperChain, resolveWrappers } from '../../utils/resolve-wrappers/resolve-wrappers';\nimport { createWrapperChainController } from '../../utils/wrapper-chain/wrapper-chain-controller';\n\n/** Layout container that wraps child fields with UI chrome. */\n@Component({\n  selector: 'div[container-field]',\n  imports: [DfFieldOutlet],\n  template: `\n    <ng-template #childrenTpl>\n      @for (field of resolvedFields(); track field.key) {\n        @if (!field.hidden()) {\n          <ng-container *dfFieldOutlet=\"field; environmentInjector: environmentInjector\" />\n        }\n      }\n    </ng-template>\n    <ng-container #wrapperContainer></ng-container>\n  `,\n  styleUrl: './container-field.component.scss',\n  host: {\n    '[class]': 'hostClasses()',\n    '[class.disabled]': 'disabled()',\n    '[class.df-container-hidden]': 'hidden()',\n    '[attr.aria-hidden]': 'hidden() || null',\n    '[id]': '`${key()}`',\n    '[attr.data-testid]': 'key()',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class ContainerFieldComponent {\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 wrapperAutoAssociations = inject(WRAPPER_AUTO_ASSOCIATIONS);\n  private readonly defaultWrappersSignal = inject(DEFAULT_WRAPPERS, { optional: true });\n\n  private readonly childrenTpl = viewChild.required('childrenTpl', { read: TemplateRef });\n  private readonly wrapperContainer = viewChild.required('wrapperContainer', { read: ViewContainerRef });\n\n  field = input.required<ContainerField>();\n  key = input.required<string>();\n  className = input<string>();\n  hidden = input(false);\n\n  readonly hostClasses = computed(() => computeContainerHostClasses('container', this.className()));\n  readonly disabled = computed(() => this.field().disabled || false);\n\n  private readonly rawFieldRegistry = computed(() => this.fieldRegistry.raw);\n  private readonly fieldsSource = computed(() => (this.field().fields || []) as FieldDef<unknown>[]);\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\n        const containerKey = this.field().key || '<no key>';\n        this.logger.error(\n          `Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}) ` +\n            `within container '${containerKey}'. 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 wrappers = computed(() => resolveWrappers(this.field(), this.defaultWrappersSignal?.(), this.wrapperAutoAssociations), {\n    equal: isSameWrapperChain,\n  });\n\n  constructor() {\n    setupContainerInitEffect(this.resolvedFields, this.eventBus, 'container', () => this.field().key, this.injector);\n\n    createWrapperChainController({\n      vcr: this.wrapperContainer,\n      wrappers: this.wrappers,\n      renderInnermost: (slot) => slot.createEmbeddedView(this.childrenTpl()),\n    });\n  }\n}\n\nexport { ContainerFieldComponent };\n"]}

package/fesm2022/{ng-forge-dynamic-forms-group-field.component-DA-FW30T.mjs → ng-forge-dynamic-forms-group-field.component-DyD00a1U.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, DestroyRef, Injector, EnvironmentInjector, input, computed, linkedSignal, runInInjectionContext, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
-import { i as injectFieldRegistry, C as CONTAINER_FIELD_PROCESSORS, d as createSchemaFromFields, c as createFieldResolutionPipe, D as DfFieldOutlet } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-CUihkwGC.mjs';
+import { i as injectFieldRegistry, C as CONTAINER_FIELD_PROCESSORS, d as createSchemaFromFields, c as createFieldResolutionPipe, D as DfFieldOutlet } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-BGRxIQ2V.mjs';
 import { outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
 import { explicitEffect } from 'ngxtension/explicit-effect';
 import { injectFieldSignalContext, GROUP_CONTEXT, EventBus, DynamicFormLogger, isEqual, FIELD_SIGNAL_CONTEXT, derivedFromDeferred } from '@ng-forge/dynamic-forms/internal';
@@ -178,4 +178,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], validityChange: [{ type: i0.Output, args: ["validityChange"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], submitted: [{ type: i0.Output, args: ["submitted"] }] } });
 
 export { GroupFieldComponent, GroupFieldComponent as default };
-//# sourceMappingURL=ng-forge-dynamic-forms-group-field.component-DA-FW30T.mjs.map
+//# sourceMappingURL=ng-forge-dynamic-forms-group-field.component-DyD00a1U.mjs.map

package/fesm2022/{ng-forge-dynamic-forms-group-field.component-DA-FW30T.mjs.map → ng-forge-dynamic-forms-group-field.component-DyD00a1U.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ng-forge-dynamic-forms-group-field.component-DA-FW30T.mjs","mappings":";;;;;;;;;AA0Dc;YAKK;;;;AAIA;AACE;AACF;AACA;YAMA;;;;;AAQjB;;;;YAOS;;;;AAIQ;AACf;AACA;AAEA;AACE;AACA;;AAEA;;AAGE;AACA;;;;;;;AAQF;AACA;AACA;AACA;;;;;;;AAOJ,IAKiB;;;AAIb;;AAEA;AACF;AAEE;AACA;AACD;AAGc;AACf;AACE;;AAGE;AACA;;AAGF;AACF;;;;;AAQO;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEQ;AACf;;AAEA;;;;AAIA;;;AAGE;;AAEA;AACE;;;;AAKN,IAMiB;AACf;;;AAGE;AACF;;AAGe;;AAEf;;;AAGC;AACF;;;AAQQ;;;AAQU;AAGf;AACA;;;AAGA;AACE;;;;AAOH;YAQH;;;;;AAWE;;AAIM;;AAIJ;;;AA/Me;;;;;;AAhBlB;;;;AARS;;;;;;;AAWR;AACA;AACA;AACA;AACA;wEAIA;AACA","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms/src/lib/fields/group/group-field.component.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  EnvironmentInjector,\n  inject,\n  Injector,\n  input,\n  linkedSignal,\n  runInInjectionContext,\n  untracked,\n} from '@angular/core';\nimport { DfFieldOutlet } from '../../directives/df-field-outlet/df-field-outlet.directive';\nimport { outputFromObservable, toObservable } 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 { computeContainerHostClasses, setupContainerInitEffect } from '../../utils/container-utils/container-utils';\nimport { CONTAINER_FIELD_PROCESSORS } from '../../utils/container-utils/container-field-processors';\nimport { isEqual } from '@ng-forge/dynamic-forms/internal';\nimport { DynamicFormLogger } from '@ng-forge/dynamic-forms/internal';\nimport { GroupField } from '@ng-forge/dynamic-forms/internal';\nimport { injectFieldRegistry } from '../../utils/inject-field-registry/inject-field-registry';\nimport { FieldTree, form } from '@angular/forms/signals';\nimport { FieldDef } from '@ng-forge/dynamic-forms/internal';\nimport { FieldSignalContext, GroupContext } from '@ng-forge/dynamic-forms/internal';\nimport { FIELD_SIGNAL_CONTEXT, GROUP_CONTEXT, injectFieldSignalContext } from '@ng-forge/dynamic-forms/internal';\nimport { createSchemaFromFields } from '../../core/schema-builder';\nimport { EventBus } from '@ng-forge/dynamic-forms/internal';\nimport { FormSubmitEvent } from '../../events/constants/submit.event';\n\n/** Container component for rendering nested form groups. */\n@Component({\n  selector: 'fieldset[group-field]',\n  imports: [DfFieldOutlet],\n  template: `\n    @for (field of resolvedFields(); track field.key) {\n      @if (!field.hidden()) {\n        <ng-container *dfFieldOutlet=\"field; environmentInjector: environmentInjector\" />\n      }\n    }\n  `,\n  styleUrl: './group-field.component.scss',\n  host: {\n    '[class]': 'hostClasses()',\n    role: 'group',\n    '[class.disabled]': 'disabled()',\n    '[class.df-container-hidden]': 'hidden()',\n    '[attr.aria-hidden]': 'hidden() || null',\n    // The group element's own id is the plain `key()` — only its DESCENDANTS\n    // compose scoped ids via GROUP_CONTEXT (e.g. children of an `address`\n    // group render as `address_street`). The group selector is `#address`.\n    '[id]': '`${key()}`',\n    '[attr.data-testid]': 'key()',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class GroupFieldComponent<TModel extends Record<string, unknown> = Record<string, unknown>> {\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Dependencies\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly fieldRegistry = injectFieldRegistry();\n  private readonly parentFieldSignalContext = injectFieldSignalContext<TModel>();\n  private readonly parentGroupContext = inject(GROUP_CONTEXT, { optional: true });\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\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Memoized Functions\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  private readonly fieldProcessors = inject(CONTAINER_FIELD_PROCESSORS);\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Inputs\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  field = input.required<GroupField>();\n  key = input.required<string>();\n  className = input<string>();\n  hidden = input(false);\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Computed Signals\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  readonly hostClasses = computed(() => computeContainerHostClasses('group', this.className()));\n\n  private readonly rawFieldRegistry = computed(() => this.fieldRegistry.raw);\n\n  private readonly formSetup = computed(() => {\n    const groupField = this.field();\n    const registry = this.rawFieldRegistry();\n\n    if (groupField.fields && groupField.fields.length > 0) {\n      const flattenedFields = this.fieldProcessors.memoizedFlattenFields(groupField.fields, registry);\n      const flattenedFieldsForRendering = this.fieldProcessors.memoizedFlattenFieldsForRendering(groupField.fields, registry);\n      const fieldsById = this.fieldProcessors.memoizedKeyBy(flattenedFields);\n      const defaultValues = this.fieldProcessors.memoizedDefaultValues(fieldsById, registry);\n\n      return {\n        fields: flattenedFieldsForRendering,\n        schemaFields: flattenedFields,\n        originalFields: groupField.fields,\n        defaultValues,\n        registry,\n      };\n    }\n\n    return {\n      fields: [],\n      schemaFields: [],\n      originalFields: [],\n      defaultValues: {},\n      registry,\n    };\n  });\n\n  readonly defaultValues = linkedSignal(() => this.formSetup().defaultValues);\n\n  /**\n   * Entity computed from parent value, group key, and defaults.\n   * Uses deep equality check to prevent unnecessary updates when\n   * object spread creates new references with identical values.\n   */\n  private readonly entity = linkedSignal(\n    () => {\n      const parentValue = this.parentFieldSignalContext.value();\n      const groupKey = this.field().key;\n      const defaults = this.defaultValues();\n      const groupValue = (parentValue as Record<string, unknown>)?.[groupKey] || {};\n      return { ...defaults, ...groupValue };\n    },\n    {\n      debugName: 'GroupFieldComponent.entity',\n      equal: isEqual,\n    },\n  );\n\n  private readonly form = computed(() => {\n    return runInInjectionContext(this.injector, () => {\n      const setup = this.formSetup();\n\n      if (setup.schemaFields.length > 0) {\n        const schema = createSchemaFromFields(setup.schemaFields, setup.registry);\n        return untracked(() => form(this.entity, schema));\n      }\n\n      return untracked(() => form(this.entity));\n    });\n  });\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Public State Signals\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  readonly formValue = computed(() => this.entity());\n  readonly valid = computed(() => this.form()().valid());\n  readonly invalid = computed(() => this.form()().invalid());\n  readonly dirty = computed(() => this.form()().dirty());\n  readonly touched = computed(() => this.form()().touched());\n  readonly errors = computed(() => this.form()().errors());\n  readonly disabled = computed(() => this.form()().disabled());\n\n  private readonly nestedFieldTree = computed((): FieldTree<Record<string, unknown>> | undefined => {\n    const parentForm = this.parentFieldSignalContext.form as Record<string, FieldTree<Record<string, unknown>>>;\n    const groupKey = this.field().key;\n    return parentForm[groupKey];\n  });\n\n  private readonly groupFieldSignalContext: FieldSignalContext<Record<string, unknown>> = (() => {\n    const nestedFieldTree = this.nestedFieldTree;\n    return {\n      injector: this.injector,\n      value: this.parentFieldSignalContext.value,\n      defaultValues: this.defaultValues,\n      get form() {\n        return nestedFieldTree() ?? ({} as FieldTree<Record<string, unknown>>);\n      },\n    };\n  })();\n\n  /**\n   * Group context propagated to descendants — carries the dot-separated path of\n   * group ancestors so child fields can scope their DOM IDs (issue #401).\n   * Reactive via `computed()`: a nested group composes its path from the parent\n   * context signal + its own key, so the chain stays consistent if either changes.\n   */\n  private readonly groupContext: GroupContext = {\n    groupPath: computed(() => {\n      const ownKey = this.field().key;\n      const parentPath = this.parentGroupContext?.groupPath();\n      return parentPath ? `${parentPath}.${ownKey}` : ownKey;\n    }),\n  };\n\n  private readonly groupInjector = Injector.create({\n    parent: this.injector,\n    providers: [\n      { provide: FIELD_SIGNAL_CONTEXT, useValue: this.groupFieldSignalContext },\n      { provide: GROUP_CONTEXT, useValue: this.groupContext },\n    ],\n  });\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Outputs\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  readonly validityChange = outputFromObservable(toObservable(this.valid));\n  readonly dirtyChange = outputFromObservable(toObservable(this.dirty));\n  readonly submitted = outputFromObservable(this.eventBus.on<FormSubmitEvent>('submit'));\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Field Resolution\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  private readonly fieldsSource = computed(() => this.formSetup().fields);\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.groupInjector,\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 group '${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  // ─────────────────────────────────────────────────────────────────────────────\n  // Constructor\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  constructor() {\n    this.setupEffects();\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Private Methods\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  private setupEffects(): void {\n    setupContainerInitEffect(this.resolvedFields, this.eventBus, 'group', () => this.field().key, this.injector);\n\n    explicitEffect(\n      [this.nestedFieldTree, this.field],\n      ([tree, field]) => {\n        if (!tree) {\n          this.logger.warn(\n            `Group field \"${field.key}\" not found in parent form. ` + `Ensure the parent form schema includes this group field.`,\n          );\n        }\n      },\n      { defer: true },\n    );\n  }\n}\n\nexport { GroupFieldComponent };\n"]}
+{"version":3,"file":"ng-forge-dynamic-forms-group-field.component-DyD00a1U.mjs","mappings":";;;;;;;;;AA0Dc;YAKK;;;;AAIA;AACE;AACF;AACA;YAMA;;;;;AAQjB;;;;YAOS;;;;AAIQ;AACf;AACA;AAEA;AACE;AACA;;AAEA;;AAGE;AACA;;;;;;;AAQF;AACA;AACA;AACA;;;;;;;AAOJ,IAKiB;;;AAIb;;AAEA;AACF;AAEE;AACA;AACD;AAGc;AACf;AACE;;AAGE;AACA;;AAGF;AACF;;;;;AAQO;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEQ;AACf;;AAEA;;;;AAIA;;;AAGE;;AAEA;AACE;;;;AAKN,IAMiB;AACf;;;AAGE;AACF;;AAGe;;AAEf;;;AAGC;AACF;;;AAQQ;;;AAQU;AAGf;AACA;;;AAGA;AACE;;;;AAOH;YAQH;;;;;AAWE;;AAIM;;AAIJ;;;AA/Me;;;;;;AAhBlB;;;;AARS;;;;;;;AAWR;AACA;AACA;AACA;AACA;wEAIA;AACA","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms/src/lib/fields/group/group-field.component.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  EnvironmentInjector,\n  inject,\n  Injector,\n  input,\n  linkedSignal,\n  runInInjectionContext,\n  untracked,\n} from '@angular/core';\nimport { DfFieldOutlet } from '../../directives/df-field-outlet/df-field-outlet.directive';\nimport { outputFromObservable, toObservable } 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 { computeContainerHostClasses, setupContainerInitEffect } from '../../utils/container-utils/container-utils';\nimport { CONTAINER_FIELD_PROCESSORS } from '../../utils/container-utils/container-field-processors';\nimport { isEqual } from '@ng-forge/dynamic-forms/internal';\nimport { DynamicFormLogger } from '@ng-forge/dynamic-forms/internal';\nimport { GroupField } from '@ng-forge/dynamic-forms/internal';\nimport { injectFieldRegistry } from '../../utils/inject-field-registry/inject-field-registry';\nimport { FieldTree, form } from '@angular/forms/signals';\nimport { FieldDef } from '@ng-forge/dynamic-forms/internal';\nimport { FieldSignalContext, GroupContext } from '@ng-forge/dynamic-forms/internal';\nimport { FIELD_SIGNAL_CONTEXT, GROUP_CONTEXT, injectFieldSignalContext } from '@ng-forge/dynamic-forms/internal';\nimport { createSchemaFromFields } from '../../core/schema-builder';\nimport { EventBus } from '@ng-forge/dynamic-forms/internal';\nimport { FormSubmitEvent } from '../../events/constants/submit.event';\n\n/** Container component for rendering nested form groups. */\n@Component({\n  selector: 'fieldset[group-field]',\n  imports: [DfFieldOutlet],\n  template: `\n    @for (field of resolvedFields(); track field.key) {\n      @if (!field.hidden()) {\n        <ng-container *dfFieldOutlet=\"field; environmentInjector: environmentInjector\" />\n      }\n    }\n  `,\n  styleUrl: './group-field.component.scss',\n  host: {\n    '[class]': 'hostClasses()',\n    role: 'group',\n    '[class.disabled]': 'disabled()',\n    '[class.df-container-hidden]': 'hidden()',\n    '[attr.aria-hidden]': 'hidden() || null',\n    // The group element's own id is the plain `key()` — only its DESCENDANTS\n    // compose scoped ids via GROUP_CONTEXT (e.g. children of an `address`\n    // group render as `address_street`). The group selector is `#address`.\n    '[id]': '`${key()}`',\n    '[attr.data-testid]': 'key()',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class GroupFieldComponent<TModel extends Record<string, unknown> = Record<string, unknown>> {\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Dependencies\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly fieldRegistry = injectFieldRegistry();\n  private readonly parentFieldSignalContext = injectFieldSignalContext<TModel>();\n  private readonly parentGroupContext = inject(GROUP_CONTEXT, { optional: true });\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\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Memoized Functions\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  private readonly fieldProcessors = inject(CONTAINER_FIELD_PROCESSORS);\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Inputs\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  field = input.required<GroupField>();\n  key = input.required<string>();\n  className = input<string>();\n  hidden = input(false);\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Computed Signals\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  readonly hostClasses = computed(() => computeContainerHostClasses('group', this.className()));\n\n  private readonly rawFieldRegistry = computed(() => this.fieldRegistry.raw);\n\n  private readonly formSetup = computed(() => {\n    const groupField = this.field();\n    const registry = this.rawFieldRegistry();\n\n    if (groupField.fields && groupField.fields.length > 0) {\n      const flattenedFields = this.fieldProcessors.memoizedFlattenFields(groupField.fields, registry);\n      const flattenedFieldsForRendering = this.fieldProcessors.memoizedFlattenFieldsForRendering(groupField.fields, registry);\n      const fieldsById = this.fieldProcessors.memoizedKeyBy(flattenedFields);\n      const defaultValues = this.fieldProcessors.memoizedDefaultValues(fieldsById, registry);\n\n      return {\n        fields: flattenedFieldsForRendering,\n        schemaFields: flattenedFields,\n        originalFields: groupField.fields,\n        defaultValues,\n        registry,\n      };\n    }\n\n    return {\n      fields: [],\n      schemaFields: [],\n      originalFields: [],\n      defaultValues: {},\n      registry,\n    };\n  });\n\n  readonly defaultValues = linkedSignal(() => this.formSetup().defaultValues);\n\n  /**\n   * Entity computed from parent value, group key, and defaults.\n   * Uses deep equality check to prevent unnecessary updates when\n   * object spread creates new references with identical values.\n   */\n  private readonly entity = linkedSignal(\n    () => {\n      const parentValue = this.parentFieldSignalContext.value();\n      const groupKey = this.field().key;\n      const defaults = this.defaultValues();\n      const groupValue = (parentValue as Record<string, unknown>)?.[groupKey] || {};\n      return { ...defaults, ...groupValue };\n    },\n    {\n      debugName: 'GroupFieldComponent.entity',\n      equal: isEqual,\n    },\n  );\n\n  private readonly form = computed(() => {\n    return runInInjectionContext(this.injector, () => {\n      const setup = this.formSetup();\n\n      if (setup.schemaFields.length > 0) {\n        const schema = createSchemaFromFields(setup.schemaFields, setup.registry);\n        return untracked(() => form(this.entity, schema));\n      }\n\n      return untracked(() => form(this.entity));\n    });\n  });\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Public State Signals\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  readonly formValue = computed(() => this.entity());\n  readonly valid = computed(() => this.form()().valid());\n  readonly invalid = computed(() => this.form()().invalid());\n  readonly dirty = computed(() => this.form()().dirty());\n  readonly touched = computed(() => this.form()().touched());\n  readonly errors = computed(() => this.form()().errors());\n  readonly disabled = computed(() => this.form()().disabled());\n\n  private readonly nestedFieldTree = computed((): FieldTree<Record<string, unknown>> | undefined => {\n    const parentForm = this.parentFieldSignalContext.form as Record<string, FieldTree<Record<string, unknown>>>;\n    const groupKey = this.field().key;\n    return parentForm[groupKey];\n  });\n\n  private readonly groupFieldSignalContext: FieldSignalContext<Record<string, unknown>> = (() => {\n    const nestedFieldTree = this.nestedFieldTree;\n    return {\n      injector: this.injector,\n      value: this.parentFieldSignalContext.value,\n      defaultValues: this.defaultValues,\n      get form() {\n        return nestedFieldTree() ?? ({} as FieldTree<Record<string, unknown>>);\n      },\n    };\n  })();\n\n  /**\n   * Group context propagated to descendants — carries the dot-separated path of\n   * group ancestors so child fields can scope their DOM IDs (issue #401).\n   * Reactive via `computed()`: a nested group composes its path from the parent\n   * context signal + its own key, so the chain stays consistent if either changes.\n   */\n  private readonly groupContext: GroupContext = {\n    groupPath: computed(() => {\n      const ownKey = this.field().key;\n      const parentPath = this.parentGroupContext?.groupPath();\n      return parentPath ? `${parentPath}.${ownKey}` : ownKey;\n    }),\n  };\n\n  private readonly groupInjector = Injector.create({\n    parent: this.injector,\n    providers: [\n      { provide: FIELD_SIGNAL_CONTEXT, useValue: this.groupFieldSignalContext },\n      { provide: GROUP_CONTEXT, useValue: this.groupContext },\n    ],\n  });\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Outputs\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  readonly validityChange = outputFromObservable(toObservable(this.valid));\n  readonly dirtyChange = outputFromObservable(toObservable(this.dirty));\n  readonly submitted = outputFromObservable(this.eventBus.on<FormSubmitEvent>('submit'));\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Field Resolution\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  private readonly fieldsSource = computed(() => this.formSetup().fields);\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.groupInjector,\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 group '${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  // ─────────────────────────────────────────────────────────────────────────────\n  // Constructor\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  constructor() {\n    this.setupEffects();\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Private Methods\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  private setupEffects(): void {\n    setupContainerInitEffect(this.resolvedFields, this.eventBus, 'group', () => this.field().key, this.injector);\n\n    explicitEffect(\n      [this.nestedFieldTree, this.field],\n      ([tree, field]) => {\n        if (!tree) {\n          this.logger.warn(\n            `Group field \"${field.key}\" not found in parent form. ` + `Ensure the parent form schema includes this group field.`,\n          );\n        }\n      },\n      { defer: true },\n    );\n  }\n}\n\nexport { GroupFieldComponent };\n"]}

package/fesm2022/{ng-forge-dynamic-forms-ng-forge-dynamic-forms-CUihkwGC.mjs → ng-forge-dynamic-forms-ng-forge-dynamic-forms-BGRxIQ2V.mjs}

@@ -437,10 +437,6 @@ class FormSubmitEvent {
     type = 'submit';
 }
 
-class NextPageEvent {
-    type = 'next-page';
-}
-
 class PageChangeEvent {
     currentPageIndex;
     totalPages;
@@ -456,105 +452,9 @@ class PageChangeEvent {
     }
 }
 
-class PreviousPageEvent {
-    type = 'previous-page';
-}
-
-class FormResetEvent {
-    type = 'form-reset';
-}
-
-class FormClearEvent {
-    type = 'form-clear';
-}
-
-class AppendArrayItemEvent {
-    arrayKey;
-    template;
-    type = 'append-array-item';
-    constructor(
-        arrayKey, 
-        template) {
-        this.arrayKey = arrayKey;
-        this.template = template;
-    }
-}
-
-class PrependArrayItemEvent {
-    arrayKey;
-    template;
-    type = 'prepend-array-item';
-    constructor(
-        arrayKey, 
-        template) {
-        this.arrayKey = arrayKey;
-        this.template = template;
-    }
-}
-
-class InsertArrayItemEvent {
-    arrayKey;
-    index;
-    template;
-    type = 'insert-array-item';
-    constructor(
-        arrayKey, 
-        index, 
-        template) {
-        this.arrayKey = arrayKey;
-        this.index = index;
-        this.template = template;
-    }
-}
-
-class PopArrayItemEvent {
-    arrayKey;
-    type = 'pop-array-item';
-    constructor(
-        arrayKey) {
-        this.arrayKey = arrayKey;
-    }
-}
-
-class ShiftArrayItemEvent {
-    arrayKey;
-    type = 'shift-array-item';
-    constructor(
-        arrayKey) {
-        this.arrayKey = arrayKey;
-    }
-}
-
-class MoveArrayItemEvent {
-    arrayKey;
-    fromIndex;
-    toIndex;
-    type = 'move-array-item';
-    constructor(
-        arrayKey, 
-        fromIndex, 
-        toIndex) {
-        this.arrayKey = arrayKey;
-        this.fromIndex = fromIndex;
-        this.toIndex = toIndex;
-    }
-}
-
-class RemoveAtIndexEvent {
-    arrayKey;
-    index;
-    type = 'remove-at-index';
-    constructor(
-        arrayKey, 
-        index) {
-        this.arrayKey = arrayKey;
-        this.index = index;
-    }
-}
-
-class PageNavigationStateChangeEvent {
+class PagerStateEvent {
     state;
-    type = 'page-navigation-state-change';
+    type = 'pager-state';
     constructor(state) {
         this.state = state;
     }
@@ -615,20 +515,18 @@ class PageOrchestratorComponent {
             totalPages,
             isFirstPage: isFirstVisiblePage,
             isLastPage: isLastVisiblePage,
-            navigationDisabled: false,
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-        currentPageValid = computed(() => {
-        const currentIndex = this.currentPageIndex();
+        currentPageValid = computed(() => this.isPageValid(this.currentPageIndex()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPageValid" }] : /* istanbul ignore next */ []));
+        isPageValid(pageIndex) {
         const pages = this.pageFields();
         const form = this.form();
-                if (pages.length === 0 || currentIndex >= pages.length) {
+        if (pageIndex < 0 || pageIndex >= pages.length) {
             return true;
         }
-        const currentPage = pages[currentIndex];
-        const pageFields = currentPage.fields || [];
-                const leafKeys = collectLeafFieldKeys(pageFields);
+                const leafKeys = collectLeafFieldKeys(pages[pageIndex].fields || []);
                         for (const fieldKey of leafKeys) {
             const field = form[fieldKey];
             if (field && typeof field === 'function') {
@@ -639,8 +537,7 @@ class PageOrchestratorComponent {
             }
         }
         return true;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentPageValid" }] : /* istanbul ignore next */ []));
+    }
         extendedFieldSignalContext = computed(() => ({
         ...this.fieldSignalContext(),
         currentPageValid: this.currentPageValid,
@@ -661,7 +558,7 @@ class PageOrchestratorComponent {
             if (currentVisiblePosition === -1 && visibleIndices.length > 0) {
                                 const nearest = this.findNearestVisiblePage(state.currentPageIndex, visibleIndices);
                 if (nearest !== -1) {
-                    this.navigateToPage(nearest);
+                    this.executePageChange(nearest);
                 }
             }
         });
@@ -683,13 +580,6 @@ class PageOrchestratorComponent {
                 newPageIndex: currentState.currentPageIndex,
                 error: 'Already on the last visible page',
             };
-        }
-        if (currentState.navigationDisabled) {
-            return {
-                success: false,
-                newPageIndex: currentState.currentPageIndex,
-                error: 'Navigation is currently disabled',
-            };
         }
                 const currentVisiblePosition = visibleIndices.indexOf(currentState.currentPageIndex);
         if (currentVisiblePosition === -1 || currentVisiblePosition >= visibleIndices.length - 1) {
@@ -700,7 +590,7 @@ class PageOrchestratorComponent {
             };
         }
         const nextVisiblePageIndex = visibleIndices[currentVisiblePosition + 1];
-        return this.navigateToPage(nextVisiblePageIndex);
+        return this.executePageChange(nextVisiblePageIndex);
     }
         navigateToPreviousPage() {
         const currentState = this.state();
@@ -711,13 +601,6 @@ class PageOrchestratorComponent {
                 newPageIndex: currentState.currentPageIndex,
                 error: 'Already on the first visible page',
             };
-        }
-        if (currentState.navigationDisabled) {
-            return {
-                success: false,
-                newPageIndex: currentState.currentPageIndex,
-                error: 'Navigation is currently disabled',
-            };
         }
                 const currentVisiblePosition = visibleIndices.indexOf(currentState.currentPageIndex);
         if (currentVisiblePosition <= 0) {
@@ -728,9 +611,31 @@ class PageOrchestratorComponent {
             };
         }
         const prevVisiblePageIndex = visibleIndices[currentVisiblePosition - 1];
-        return this.navigateToPage(prevVisiblePageIndex);
+        return this.executePageChange(prevVisiblePageIndex);
     }
         navigateToPage(pageIndex) {
+        const currentIndex = this.state().currentPageIndex;
+        const visibleIndices = this.visiblePageIndices();
+                        if (pageIndex <= currentIndex || !visibleIndices.includes(pageIndex)) {
+            return this.executePageChange(pageIndex);
+        }
+        const disableWhenPageInvalid = this.formOptions?.()?.nextButton?.disableWhenPageInvalid ?? true;
+        if (!disableWhenPageInvalid) {
+            return this.executePageChange(pageIndex);
+        }
+        const crossedPages = visibleIndices.filter((index) => index >= currentIndex && index < pageIndex);
+        const firstInvalidPage = crossedPages.find((index) => !this.isPageValid(index));
+        if (firstInvalidPage === undefined) {
+            return this.executePageChange(pageIndex);
+        }
+                this.executePageChange(firstInvalidPage);
+        return {
+            success: false,
+            newPageIndex: firstInvalidPage,
+            error: `Cannot navigate to page ${pageIndex}: page ${firstInvalidPage} has invalid fields`,
+        };
+    }
+        executePageChange(pageIndex) {
         const currentState = this.state();
         const totalPages = currentState.totalPages;
                 if (pageIndex < 0 || pageIndex >= totalPages) {
@@ -787,7 +692,13 @@ class PageOrchestratorComponent {
             .subscribe(() => {
             this.navigateToPreviousPage();
         });
-        explicitEffect([this.state], ([state]) => this.eventBus.dispatch(PageNavigationStateChangeEvent, state));
+                this.eventBus
+            .on('go-to-page')
+            .pipe(takeUntilDestroyed())
+            .subscribe((event) => {
+            this.navigateToPage(event.pageIndex);
+        });
+        explicitEffect([this.state], ([state]) => this.eventBus.dispatch(PagerStateEvent, state));
     }
         evaluatePageHidden(page) {
                 if (!page.logic || page.logic.length === 0) {
@@ -863,10 +774,10 @@ class PageOrchestratorComponent {
       }
     }
   `, isInline: true, styles: [":host{display:block;position:relative;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [/* @ts-ignore */
-                import('./ng-forge-dynamic-forms-page-field.component-P9O4eNvS.mjs').then(m => m.default)]] });
+                import('./ng-forge-dynamic-forms-page-field.component-B7A2v1vN.mjs').then(m => m.default)]] });
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.1", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [/* @ts-ignore */
-        import('./ng-forge-dynamic-forms-page-field.component-P9O4eNvS.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
+        import('./ng-forge-dynamic-forms-page-field.component-B7A2v1vN.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'div[page-orchestrator]', imports: [PageFieldComponent], template: `
     @for (pageField of pageFields(); track pageField.key; let i = $index) {
@@ -3880,7 +3791,7 @@ function createDerivationRenderGate() {
         if (!has || engine() !== 'idle')
             return;
         engine.set('loading');
-                pendingTasks.run(() => import('./ng-forge-dynamic-forms-bootstrap-derivation-orchestrator-VJBOH393.mjs')
+                pendingTasks.run(() => import('./ng-forge-dynamic-forms-bootstrap-derivation-orchestrator-jHiY95pr.mjs')
             .then(({ bootstrapDerivationOrchestrator }) => {
             runInInjectionContext(injector, () => bootstrapDerivationOrchestrator());
             engine.set('wired');
@@ -4211,7 +4122,7 @@ class DynamicForm {
         events = outputFromObservable(this.eventBus.events$);
         initialized = outputFromObservable(this.initialized$);
         onPageChange = outputFromObservable(this.eventBus.on('page-change'));
-        onPageNavigationStateChange = outputFromObservable(this.eventBus.on('page-navigation-state-change'));
+        onPageNavigationStateChange = outputFromObservable(this.eventBus.on('pager-state'));
                 constructor() {
         this.dispatcher?.connect(this.eventBus);
         this.destroyRef.onDestroy(() => this.dispatcher?.disconnect());
@@ -4435,28 +4346,28 @@ const DISPLAY_FIELD_TYPES_BASE = {
 const BUILT_IN_FIELDS = [
     {
         name: 'row',
-                                loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-o49q6akV.mjs'),
+                                loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-ug5tp6kt.mjs'),
         mapper: rowFieldMapper,
         valueHandling: 'flatten',
         ...CONTAINER_FIELD_TYPES_BASE,
     },
     {
         name: 'group',
-        loadComponent: () => import('./ng-forge-dynamic-forms-group-field.component-DA-FW30T.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-group-field.component-DyD00a1U.mjs'),
         mapper: groupFieldMapper,
         valueHandling: 'include',
         ...CONTAINER_FIELD_TYPES_BASE,
     },
     {
         name: 'array',
-        loadComponent: () => import('./ng-forge-dynamic-forms-array-field.component-B9OfjKPI.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-array-field.component-BLPWSurR.mjs'),
         mapper: arrayFieldMapper,
         valueHandling: 'include',
         ...CONTAINER_FIELD_TYPES_BASE,
     },
     {
         name: 'page',
-        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-P9O4eNvS.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-B7A2v1vN.mjs'),
         mapper: pageFieldMapper,
         valueHandling: 'flatten',
         ...CONTAINER_FIELD_TYPES_BASE,
@@ -4474,7 +4385,7 @@ const BUILT_IN_FIELDS = [
     },
     {
         name: 'container',
-        loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-o49q6akV.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-container-field.component-ug5tp6kt.mjs'),
         mapper: containerFieldMapper,
         valueHandling: 'flatten',
         ...CONTAINER_FIELD_TYPES_BASE,
@@ -4876,6 +4787,115 @@ function sanitizeFormConfigPure(config, fieldRegistry, typeRegistry, options = {
     return { sanitized: { ...config, fields: fields }, warnings };
 }
 
+class GoToPageEvent {
+    pageIndex;
+    type = 'go-to-page';
+    constructor(
+        pageIndex) {
+        this.pageIndex = pageIndex;
+    }
+}
+
+class NextPageEvent {
+    type = 'next-page';
+}
+
+class PreviousPageEvent {
+    type = 'previous-page';
+}
+
+class FormResetEvent {
+    type = 'form-reset';
+}
+
+class FormClearEvent {
+    type = 'form-clear';
+}
+
+class AppendArrayItemEvent {
+    arrayKey;
+    template;
+    type = 'append-array-item';
+    constructor(
+        arrayKey, 
+        template) {
+        this.arrayKey = arrayKey;
+        this.template = template;
+    }
+}
+
+class PrependArrayItemEvent {
+    arrayKey;
+    template;
+    type = 'prepend-array-item';
+    constructor(
+        arrayKey, 
+        template) {
+        this.arrayKey = arrayKey;
+        this.template = template;
+    }
+}
+
+class InsertArrayItemEvent {
+    arrayKey;
+    index;
+    template;
+    type = 'insert-array-item';
+    constructor(
+        arrayKey, 
+        index, 
+        template) {
+        this.arrayKey = arrayKey;
+        this.index = index;
+        this.template = template;
+    }
+}
+
+class PopArrayItemEvent {
+    arrayKey;
+    type = 'pop-array-item';
+    constructor(
+        arrayKey) {
+        this.arrayKey = arrayKey;
+    }
+}
+
+class ShiftArrayItemEvent {
+    arrayKey;
+    type = 'shift-array-item';
+    constructor(
+        arrayKey) {
+        this.arrayKey = arrayKey;
+    }
+}
+
+class MoveArrayItemEvent {
+    arrayKey;
+    fromIndex;
+    toIndex;
+    type = 'move-array-item';
+    constructor(
+        arrayKey, 
+        fromIndex, 
+        toIndex) {
+        this.arrayKey = arrayKey;
+        this.fromIndex = fromIndex;
+        this.toIndex = toIndex;
+    }
+}
+
+class RemoveAtIndexEvent {
+    arrayKey;
+    index;
+    type = 'remove-at-index';
+    constructor(
+        arrayKey, 
+        index) {
+        this.arrayKey = arrayKey;
+        this.index = index;
+    }
+}
+
 function arrayEvent(arrayKey) {
     return {
                 append: (template) => new AppendArrayItemEvent(arrayKey, template),
@@ -4891,5 +4911,5 @@ function arrayEvent(arrayKey) {
 
 
 
-export { withLegacyStatusClasses as $, ArrayItemRegistryService as A, BUILT_IN_FIELDS as B, CONTAINER_FIELD_PROCESSORS as C, DfFieldOutlet as D, EventDispatcher as E, FIELD_WINDOWING as F, PageChangeEvent as G, PopArrayItemEvent as H, InsertArrayItemEvent as I, PrependArrayItemEvent as J, PreviousPageEvent as K, TextAddonComponent as L, MoveArrayItemEvent as M, NextPageEvent as N, arrayEvent as O, PROPERTY_OVERRIDE_STORE as P, createWrappers as Q, RemoveAtIndexEvent as R, ShiftArrayItemEvent as S, TemplateAddonComponent as T, isWrappersBundle as U, provideDynamicForm as V, sanitizeFormConfig as W, withAddonActions as X, withCustomAddon as Y, withEventFormValue as Z, withFieldWindowing as _, isSameWrapperChain as a, withLoggerConfig as a0, withPagePreload as a1, withValidationExecutionDefaults as a2, withValueExclusionDefaults as a3, wrapperProps as a4, createWrapperChainController as b, createFieldResolutionPipe as c, createSchemaFromFields as d, createHiddenSignal as e, createRenderReadySignal as f, getNormalizedArrayMetadata as g, getFieldDefaultValue as h, injectFieldRegistry as i, resolveFieldWindowing as j, DEV_MODE as k, DEFAULT_DEBOUNCE_MS as l, mapFieldToInputs as m, DERIVATION_WARNING_TRACKER as n, FormStateManager as o, DERIVATION_LOG_CONFIG as p, AppendArrayItemEvent as q, resolveWrappers as r, ComponentAddonComponent as s, traverseFieldsWithContext as t, ConsoleLogger as u, DfTemplate as v, DynamicForm as w, FormClearEvent as x, FormResetEvent as y, FormSubmitEvent as z };
-//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-CUihkwGC.mjs.map
+export { withEventFormValue as $, ArrayItemRegistryService as A, BUILT_IN_FIELDS as B, CONTAINER_FIELD_PROCESSORS as C, DfFieldOutlet as D, EventDispatcher as E, FIELD_WINDOWING as F, GoToPageEvent as G, PageChangeEvent as H, InsertArrayItemEvent as I, PagerStateEvent as J, PopArrayItemEvent as K, PrependArrayItemEvent as L, MoveArrayItemEvent as M, NextPageEvent as N, PreviousPageEvent as O, PROPERTY_OVERRIDE_STORE as P, TextAddonComponent as Q, RemoveAtIndexEvent as R, ShiftArrayItemEvent as S, TemplateAddonComponent as T, arrayEvent as U, createWrappers as V, isWrappersBundle as W, provideDynamicForm as X, sanitizeFormConfig as Y, withAddonActions as Z, withCustomAddon as _, isSameWrapperChain as a, withFieldWindowing as a0, withLegacyStatusClasses as a1, withLoggerConfig as a2, withPagePreload as a3, withValidationExecutionDefaults as a4, withValueExclusionDefaults as a5, wrapperProps as a6, createWrapperChainController as b, createFieldResolutionPipe as c, createSchemaFromFields as d, createHiddenSignal as e, createRenderReadySignal as f, getNormalizedArrayMetadata as g, getFieldDefaultValue as h, injectFieldRegistry as i, resolveFieldWindowing as j, DEV_MODE as k, DEFAULT_DEBOUNCE_MS as l, mapFieldToInputs as m, DERIVATION_WARNING_TRACKER as n, FormStateManager as o, DERIVATION_LOG_CONFIG as p, AppendArrayItemEvent as q, resolveWrappers as r, ComponentAddonComponent as s, traverseFieldsWithContext as t, ConsoleLogger as u, DfTemplate as v, DynamicForm as w, FormClearEvent as x, FormResetEvent as y, FormSubmitEvent as z };
+//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-BGRxIQ2V.mjs.map