@ng-forge/dynamic-forms 1.2.0-next.5 → 1.2.0-next.7

package/fesm2022/ng-forge-dynamic-forms-field-errors-wrapper.component-ZdaC4Bit.mjs

@@ -0,0 +1,25 @@
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FieldErrorsWrapperBase, provideFieldErrorDisplay } from '@ng-forge/dynamic-forms/internal';
+
+class FieldErrorsWrapperComponent extends FieldErrorsWrapperBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldErrorsWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldErrorsWrapperComponent, isStandalone: true, selector: "df-field-errors-wrapper", providers: [provideFieldErrorDisplay(() => FieldErrorsWrapperComponent)], usesInheritance: true, ngImport: i0, template: `
+    <ng-container #fieldComponent></ng-container>
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <div class="df-field-error" role="alert" [id]="ngf.errorId()">{{ error.message }}</div>
+    }
+  `, isInline: true, styles: [".df-field-error{color:var(--df-error-color, #dc3545);font-size:var(--df-error-font-size, .875rem);margin-top:var(--df-field-gap, .5rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldErrorsWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-field-errors-wrapper', template: `
+    <ng-container #fieldComponent></ng-container>
+    @if (ngf.errorsToDisplay()[0]; as error) {
+      <div class="df-field-error" role="alert" [id]="ngf.errorId()">{{ error.message }}</div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideFieldErrorDisplay(() => FieldErrorsWrapperComponent)], styles: [".df-field-error{color:var(--df-error-color, #dc3545);font-size:var(--df-error-font-size, .875rem);margin-top:var(--df-field-gap, .5rem)}\n"] }]
+        }] });
+
+export { FieldErrorsWrapperComponent, FieldErrorsWrapperComponent as default };
+//# sourceMappingURL=ng-forge-dynamic-forms-field-errors-wrapper.component-ZdaC4Bit.mjs.map

package/fesm2022/ng-forge-dynamic-forms-field-errors-wrapper.component-ZdaC4Bit.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-field-errors-wrapper.component-ZdaC4Bit.mjs","mappings":";;;;AAmBc;;;;;;;AALX;;;;AANS","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms/src/lib/wrappers/field-errors/field-errors-wrapper.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { FieldErrorsWrapperBase, provideFieldErrorDisplay } from '@ng-forge/dynamic-forms/internal';\n\n/**\n * Neutral default rendering of a validation message for the wrapped field.\n * Follows the `--df-error-*` conventions; adapters register their own under the same name.\n */\n@Component({\n  selector: 'df-field-errors-wrapper',\n  template: `\n    <ng-container #fieldComponent></ng-container>\n    @if (ngf.errorsToDisplay()[0]; as error) {\n      <div class=\"df-field-error\" role=\"alert\" [id]=\"ngf.errorId()\">{{ error.message }}</div>\n    }\n  `,\n  styleUrl: './field-errors-wrapper.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [provideFieldErrorDisplay(() => FieldErrorsWrapperComponent)],\n})\nexport default class FieldErrorsWrapperComponent extends FieldErrorsWrapperBase {}\n\nexport { FieldErrorsWrapperComponent };\n"]}

package/fesm2022/ng-forge-dynamic-forms-form-schema.service-C3cVSmft.mjs

@@ -0,0 +1,24 @@
+import * as i0 from '@angular/core';
+import { Service } from '@angular/core';
+import { DynamicFormError } from '@ng-forge/dynamic-forms/internal';
+import { c as createSchemaFromFields, a as createFormLevelSchema } from './ng-forge-dynamic-forms-schema-builder-DO-su9sF.mjs';
+
+class FormSchemaService {
+    create({ fields, registry, formLevelSchema, validateWhenHidden }) {
+        if (fields.length > 0) {
+            return createSchemaFromFields(fields, registry, { formLevelSchema, validateWhenHidden });
+        }
+        if (formLevelSchema) {
+            return createFormLevelSchema(formLevelSchema);
+        }
+        throw new DynamicFormError('The form schema service was requested without fields or a form-level schema.');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormSchemaService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.1", ngImport: i0, type: FormSchemaService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormSchemaService, decorators: [{
+            type: Service
+        }] });
+
+export { FormSchemaService as default };
+//# sourceMappingURL=ng-forge-dynamic-forms-form-schema.service-C3cVSmft.mjs.map

package/fesm2022/ng-forge-dynamic-forms-form-schema.service-C3cVSmft.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-form-schema.service-C3cVSmft.mjs","mappings":";;;;;AAsBc;;AAEV;AACE;;;AAIA;;AAGF","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms/src/lib/core/form-schema.service.ts"],"sourcesContent":["import { Service } from '@angular/core';\nimport type { Schema } from '@angular/forms/signals';\nimport { DynamicFormError } from '@ng-forge/dynamic-forms/internal';\nimport type { FieldDef, FieldTypeDefinition } from '@ng-forge/dynamic-forms/internal';\nimport type { FormSchema } from '@ng-forge/dynamic-forms/schema';\nimport { createFormLevelSchema } from './form-schema-merger';\nimport { createSchemaFromFields } from './schema-builder';\n\nexport interface FormSchemaRequest {\n  readonly fields: FieldDef<unknown>[];\n  readonly registry: Map<string, FieldTypeDefinition>;\n  readonly formLevelSchema: FormSchema<unknown> | undefined;\n  readonly validateWhenHidden: boolean | undefined;\n}\n\n/**\n * Lazy schema compiler requested by a form when its first value-bearing field is encountered.\n *\n * The service is stateless and auto-provided so Angular's `injectAsync()` can keep this module,\n * including form mapping, validators, schemas, and expression logic, out of the eager graph.\n */\n@Service()\nexport default class FormSchemaService {\n  create({ fields, registry, formLevelSchema, validateWhenHidden }: FormSchemaRequest): Schema<unknown> {\n    if (fields.length > 0) {\n      return createSchemaFromFields(fields, registry, { formLevelSchema, validateWhenHidden });\n    }\n\n    if (formLevelSchema) {\n      return createFormLevelSchema(formLevelSchema);\n    }\n\n    throw new DynamicFormError('The form schema service was requested without fields or a form-level schema.');\n  }\n}\n"]}

package/fesm2022/{ng-forge-dynamic-forms-group-field.component-BNjYMTqT.mjs → ng-forge-dynamic-forms-group-field.component-DN6X506r.mjs}

@@ -1,11 +1,11 @@
 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-DSXZJHcu.mjs';
+import { i as injectFieldRegistry, C as CONTAINER_FIELD_PROCESSORS, c as computeContainerHostClasses, a as createFieldResolutionPipe, s as setupContainerInitEffect, d as initializationComponentPath, D as DfFieldOutlet } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-DCX7tvaB.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';
-import { c as computeContainerHostClasses, s as setupContainerInitEffect } from './ng-forge-dynamic-forms-container-utils-BZFz6ztF.mjs';
 import { form } from '@angular/forms/signals';
+import { c as createSchemaFromFields } from './ng-forge-dynamic-forms-schema-builder-DO-su9sF.mjs';
 
 class GroupFieldComponent {
                 destroyRef = inject(DestroyRef);
@@ -142,7 +142,7 @@ class GroupFieldComponent {
         this.setupEffects();
     }
                 setupEffects() {
-        setupContainerInitEffect(this.resolvedFields, this.eventBus, 'group', () => this.field().key, this.injector);
+        setupContainerInitEffect(this.resolvedFields, this.eventBus, 'group', () => initializationComponentPath(this.field().key, this.parentGroupContext?.groupPath()), this.injector);
         explicitEffect([this.nestedFieldTree, this.field], ([tree, field]) => {
             if (!tree) {
                 this.logger.warn(`Group field "${field.key}" not found in parent form. ` + `Ensure the parent form schema includes this group field.`);
@@ -152,9 +152,7 @@ class GroupFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: GroupFieldComponent, isStandalone: true, selector: "fieldset[group-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted" }, host: { attributes: { "role": "group" }, properties: { "class": "hostClasses()", "class.disabled": "disabled()", "class.df-container-hidden": "hidden()", "attr.aria-hidden": "hidden() || null", "id": "`${key()}`", "attr.data-testid": "key()" } }, ngImport: i0, template: `
     @for (field of resolvedFields(); track field.key) {
-      @if (!field.hidden()) {
-        <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
-      }
+      <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
     }
   `, isInline: true, styles: [".df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap, .5rem);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-sm, .5rem)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns, 12),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-md, .5rem)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-lg, .5rem)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl, .5rem);--df-grid-row-gap: var(--df-grid-row-gap-xl, .5rem)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{border:none;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}:host>*{grid-column:1/-1}:host.df-container-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: DfFieldOutlet, selector: "[dfFieldOutlet]", inputs: ["dfFieldOutlet", "dfFieldOutletEnvironmentInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -162,9 +160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
             type: Component,
             args: [{ selector: 'fieldset[group-field]', imports: [DfFieldOutlet], template: `
     @for (field of resolvedFields(); track field.key) {
-      @if (!field.hidden()) {
-        <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
-      }
+      <ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
     }
   `, host: {
                         '[class]': 'hostClasses()',
@@ -178,4 +174,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-BNjYMTqT.mjs.map
+//# sourceMappingURL=ng-forge-dynamic-forms-group-field.component-DN6X506r.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-group-field.component-DN6X506r.mjs","mappings":";;;;;;;;;AA4Dc;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;;;;AASE;AAQA;;AAIM;;AAIJ;;;AArNe;;;;AAhBlB;;;;AANS;;;;;AASR;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 {\n  computeContainerHostClasses,\n  initializationComponentPath,\n  setupContainerInitEffect,\n} 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      <ng-container *dfFieldOutlet=\"field; environmentInjector: environmentInjector\" />\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(\n      this.resolvedFields,\n      this.eventBus,\n      'group',\n      () => initializationComponentPath(this.field().key, this.parentGroupContext?.groupPath()),\n      this.injector,\n    );\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-integration.mjs

@@ -1,12 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, computed, signal, Injector, isSignal, isDevMode, afterRenderEffect, input, Directive, untracked, InjectionToken, ElementRef } from '@angular/core';
-import { injectFieldSignalContext, omit, buildBaseInputs, DEFAULT_PROPS, resolveNonFieldHidden, resolveNonFieldDisabled, RootFormRegistryService, injectNonFieldEvaluationContext, ARRAY_CONTEXT, FORM_OPTIONS, resolveSubmitButtonDisabled, resolveNextButtonDisabled, dynamicTextToObservable, interpolateParams, isEqual, applyMetaToElement, DEFAULT_VALIDATION_MESSAGES, EventBus, resolveTokens, resolveDynamicValue, ADDON_ACTION_REGISTRY, writeToFieldValue } from '@ng-forge/dynamic-forms/internal';
-export { ADDON_ACTION_REGISTRY, ADDON_TYPE_COMPONENT_CACHE, ADDON_TYPE_DEFINITIONS, ADDON_TYPE_REGISTRY, ARRAY_CONTEXT, DEFAULT_PROPS, DEFAULT_VALIDATION_MESSAGES, DEFAULT_WRAPPERS, DfAddonSlot, DynamicTextPipe, EventBus, FIELD_REGISTRY, FIELD_SIGNAL_CONTEXT, FORM_OPTIONS, GROUP_CONTEXT, INITIALIZATION_TIMEOUT_MS, RootFormRegistryService, applyMetaToElement, applyValidator, applyValidators, arrayFieldMapper, baseFieldMapper, buildBaseInputs, containerFieldMapper, dynamicTextToObservable, getArrayLength, groupFieldMapper, injectAddonTypeRegistry, injectFieldSignalContext, injectFieldsSupportingAddons, interpolateParams, isCheckedField, isEqual, isValueField, pageFieldMapper, resolveDynamicValue, resolveNonFieldDisabled, resolveNonFieldHidden, resolveTokens, rowFieldMapper, runPresetAction, textFieldMapper, toReadonlyFieldTree, withPreviousValue, writeToFieldValue } from '@ng-forge/dynamic-forms/internal';
+import { inject, computed, isDevMode, afterRenderEffect, input, Directive, signal, untracked, Injector, InjectionToken, ElementRef } from '@angular/core';
+import { injectFieldSignalContext, omit, buildBaseInputs, DEFAULT_PROPS, resolveNonFieldHidden, resolveNonFieldDisabled, RootFormRegistryService, injectNonFieldEvaluationContext, ARRAY_CONTEXT, FORM_OPTIONS, resolveSubmitButtonDisabled, resolveNextButtonDisabled, isEqual, applyMetaToElement, DEFAULT_VALIDATION_MESSAGES, createResolvedErrorsSignal, shouldShowErrors, FIELD_ERROR_DISPLAY, EventBus, resolveTokens, resolveDynamicValue, ADDON_ACTION_REGISTRY, writeToFieldValue } from '@ng-forge/dynamic-forms/internal';
+export { ADDON_ACTION_REGISTRY, ADDON_TYPE_COMPONENT_CACHE, ADDON_TYPE_DEFINITIONS, ADDON_TYPE_REGISTRY, ARRAY_CONTEXT, DEFAULT_PROPS, DEFAULT_VALIDATION_MESSAGES, DEFAULT_WRAPPERS, DfAddonSlot, DynamicTextPipe, EventBus, FIELD_ERROR_DISPLAY, FIELD_REGISTRY, FIELD_SIGNAL_CONTEXT, FORM_OPTIONS, FieldErrorsWrapperBase, GROUP_CONTEXT, INITIALIZATION_TIMEOUT_MS, RootFormRegistryService, applyMetaToElement, applyValidator, applyValidators, arrayFieldMapper, baseFieldMapper, buildBaseInputs, containerFieldMapper, createResolvedErrorsSignal, dynamicTextToObservable, getArrayLength, groupFieldMapper, injectAddonTypeRegistry, injectFieldErrors, injectFieldSignalContext, injectFieldsSupportingAddons, interpolateParams, isCheckedField, isEqual, isValueField, pageFieldMapper, provideFieldErrorDisplay, resolveDynamicValue, resolveNonFieldDisabled, resolveNonFieldHidden, resolveTokens, rowFieldMapper, runPresetAction, shouldShowErrors, textFieldMapper, toReadonlyFieldTree, withPreviousValue, writeToFieldValue } from '@ng-forge/dynamic-forms/internal';
 import { DynamicFormLogger, AppendArrayItemEvent, PrependArrayItemEvent, InsertArrayItemEvent, RemoveAtIndexEvent, PopArrayItemEvent, ShiftArrayItemEvent, NextPageEvent, PreviousPageEvent } from '@ng-forge/dynamic-forms';
 export { BUILT_IN_FIELDS, createWrappers, isWrappersBundle, wrapperProps } from '@ng-forge/dynamic-forms';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
-import { combineLatest, of } from 'rxjs';
-import { switchMap, map } from 'rxjs/operators';
 import { explicitEffect } from 'ngxtension/explicit-effect';
 export { createNgForgeActionFixture, createNgForgeFieldFixture, provideTestValidationMessages } from '@ng-forge/dynamic-forms/testing';
 
@@ -416,70 +413,6 @@ function previousButtonFieldMapper(fieldDef) {
 
 
 
-function createResolvedErrorsSignal(field, validationMessages, defaultValidationMessages = signal(undefined), injector = inject(Injector)) {
-        const logger = injector.get(DynamicFormLogger);
-        const messages = computed(() => validationMessages() ?? {}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
-    const defaultMessages = computed(() => defaultValidationMessages() ?? {}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "defaultMessages" }] : /* istanbul ignore next */ []));
-            const errors = computed(() => {
-        const control = field()();
-        return control.errors();
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-        const errors$ = toObservable(errors, { injector });
-    const messages$ = toObservable(messages, { injector });
-    const defaultMessages$ = toObservable(defaultMessages, { injector });
-        const resolvedErrors$ = combineLatest([errors$, messages$, defaultMessages$]).pipe(switchMap(([currentErrors, msgs, defaultMsgs]) => {
-                if (!currentErrors || currentErrors.length === 0) {
-            return of([]);
-        }
-                const errorResolvers = currentErrors.map((error) => resolveErrorMessage(error, msgs, defaultMsgs, injector, logger));
-                return errorResolvers.length > 0
-            ? combineLatest(errorResolvers).pipe(map((errors) => errors.filter((e) => e !== null)))
-            : of([]);
-    }));
-            return toSignal(resolvedErrors$, { initialValue: [], injector });
-}
-function isMessageResolver(message) {
-    return typeof message === 'function' && !isSignal(message);
-}
-function resolveMessageFunction(resolver, error, logger) {
-    try {
-        return resolver(error) ?? error.message ?? '';
-    }
-    catch (err) {
-        logger.error(`Validation message resolver for error kind "${error.kind}" threw; falling back to error.message.`, err);
-        return error.message ?? '';
-    }
-}
-function resolveErrorMessage(error, fieldMessages, defaultMessages, injector, logger) {
-        const fieldMessage = fieldMessages[error.kind];
-        const defaultMessage = defaultMessages[error.kind];
-        const messageToUse = fieldMessage ?? defaultMessage ?? error.message;
-        if (!messageToUse) {
-        logger.warn(`No validation message found for error kind "${error.kind}". ` +
-            `Please provide a message via field-level validationMessages or form-level defaultValidationMessages.`);
-        return of(null);
-    }
-            const isSchemaMessage = fieldMessage === undefined && defaultMessage === undefined;
-        const messageText = isMessageResolver(messageToUse) ? resolveMessageFunction(messageToUse, error, logger) : messageToUse;
-    const messageObservable = isSchemaMessage
-        ? of(messageToUse)         : dynamicTextToObservable(messageText, injector);
-        return messageObservable.pipe(map((msg) => ({
-        kind: error.kind,
-        message: interpolateParams(msg, error),
-    })));
-}
-
-function shouldShowErrors(field) {
-    return computed(() => {
-        const fieldTree = field();
-        const control = fieldTree();
-        return control.invalid() && control.touched() && control.errors().length > 0;
-    });
-}
-
 function applyTrackedAttrsToTargets(elementRef, computeAttrs, options = {}) {
     const appliedByElement = new WeakMap();
     let cachedSelector;
@@ -589,7 +522,12 @@ class NgForgeField {
                 defaultValidationMessages = inject(DEFAULT_VALIDATION_MESSAGES, { optional: true }) ?? signal(undefined);
                 errors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
     showErrors = shouldShowErrors(this.field);
-    errorsToDisplay = computed(() => (this.showErrors() ? this.errors() : []), /* @ts-ignore */
+        errorDisplayClaim = inject(FIELD_ERROR_DISPLAY, { optional: true });
+    errorsToDisplay = computed(() => {
+                        if (this.errorDisplayClaim?.claimedKey() === this.key())
+            return [];
+        return this.showErrors() ? this.errors() : [];
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
                 errorId = computed(() => `${this.key()}-error`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
@@ -963,5 +901,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 
 
 
-export { ADDON_PRESET_HANDLER, NG_FORGE_ACTION_INPUTS, NG_FORGE_ADDONS_INPUTS, NG_FORGE_ADDON_ACTION_INPUTS, NG_FORGE_FIELD_SHELL_INPUTS, NG_FORGE_VALUE_FIELD_INPUTS, NgForgeAction, NgForgeActionHost, NgForgeAddonAction, NgForgeAddonActionBase, NgForgeAddons, NgForgeAddonsBase, NgForgeControl, NgForgeField, NgForgeFieldHost, NgForgeFieldShell, NgForgeHostControl, addArrayItemButtonMapper, buildArrayButtonEventContext, buildValueFieldInputs, buttonFieldMapper, checkboxFieldMapper, createAriaDescribedBySignal, createResolvedErrorsSignal, datepickerFieldMapper, injectNgForgeAction, injectNgForgeAddonAction, injectNgForgeAddons, injectNgForgeField, injectNonFieldLogicResolver, insertArrayItemButtonMapper, nextButtonFieldMapper, optionsFieldMapper, popArrayItemButtonMapper, prependArrayItemButtonMapper, previousButtonFieldMapper, removeArrayItemButtonMapper, resolveArrayButtonContext, resolveArrayButtonEventArgs, resolveValueFieldContext, setupMetaTracking, shiftArrayItemButtonMapper, shouldShowErrors, submitButtonFieldMapper, valueFieldMapper };
+export { ADDON_PRESET_HANDLER, NG_FORGE_ACTION_INPUTS, NG_FORGE_ADDONS_INPUTS, NG_FORGE_ADDON_ACTION_INPUTS, NG_FORGE_FIELD_SHELL_INPUTS, NG_FORGE_VALUE_FIELD_INPUTS, NgForgeAction, NgForgeActionHost, NgForgeAddonAction, NgForgeAddonActionBase, NgForgeAddons, NgForgeAddonsBase, NgForgeControl, NgForgeField, NgForgeFieldHost, NgForgeFieldShell, NgForgeHostControl, addArrayItemButtonMapper, buildArrayButtonEventContext, buildValueFieldInputs, buttonFieldMapper, checkboxFieldMapper, createAriaDescribedBySignal, datepickerFieldMapper, injectNgForgeAction, injectNgForgeAddonAction, injectNgForgeAddons, injectNgForgeField, injectNonFieldLogicResolver, insertArrayItemButtonMapper, nextButtonFieldMapper, optionsFieldMapper, popArrayItemButtonMapper, prependArrayItemButtonMapper, previousButtonFieldMapper, removeArrayItemButtonMapper, resolveArrayButtonContext, resolveArrayButtonEventArgs, resolveValueFieldContext, setupMetaTracking, shiftArrayItemButtonMapper, submitButtonFieldMapper, valueFieldMapper };
 //# sourceMappingURL=ng-forge-dynamic-forms-integration.mjs.map