@ng-forge/dynamic-forms 0.10.0-next.4 → 1.0.0-rc.1

package/fesm2022/ng-forge-dynamic-forms-group-field.component-D0_nmXf2.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ng-forge-dynamic-forms-group-field.component-D0_nmXf2.mjs","mappings":";;;;;;;;;AA0Dc;YAKK;;;;AAIA;AACE;AACF;AACA;YAMA;YAMjB;AACA;;AAEA;YAMS;AAEQ;AAEA;AACf;AACA;AAEA;AACE;AACA;;AAEA;;AAGE;AACA;;;;;;;AAQF;AACA;AACA;AACA;;;AAGJ;AAES;AAET,IAKiB;;;AAIb;;AAEA;AACF;AAEE;AACA;AACD;AAGc;AACf;AACE;;AAGE;AACA;;AAGF;AACF;AACF;;AAOS;AACA;AACA;AACA;AACA;AACA;AAEQ;AACf;;AAEA;AACF;;AAGE;;;AAGE;;AAEA;AACE;;;;AAKN,IAMiB;AACf;;;AAGE;AACF;;AAGe;;AAEf;;;AAGC;AACF;;;AAQQ;YAMQ;AAEE;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 { SubmitEvent } 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<SubmitEvent>('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"]}