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

package/fesm2022/ng-forge-dynamic-forms-container-utils-BZFz6ztF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-container-utils-BZFz6ztF.mjs","mappings":";;;;AAaM;AACJ;AACA;AACF;AAWM;AAOJ;AACE;;;;;;AAME;;;AAGJ;AACF","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms/src/lib/utils/container-utils/container-utils.ts"],"sourcesContent":["import { computed, Injector, Signal } from '@angular/core';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { EventBus } from '@ng-forge/dynamic-forms/internal';\nimport { emitComponentInitialized, InitializationComponentType } from '../emit-initialization/emit-initialization';\nimport { ResolvedField } from '../resolve-field/resolve-field';\n\n/**\n * Computes the host class string for a container component.\n *\n * @param containerType - The CSS class suffix (e.g., 'group', 'row', 'page-field')\n * @param className - Optional custom class name to append\n * @returns The computed host class string\n */\nexport function computeContainerHostClasses(containerType: string, className: string | undefined): string {\n  const base = `df-field df-${containerType}`;\n  return className ? `${base} ${className}` : base;\n}\n\n/**\n * Sets up the initialization effect common to all container components.\n *\n * @param resolvedFields - Signal of resolved fields\n * @param eventBus - EventBus for dispatching initialization events\n * @param componentType - Static type, or a getter evaluated at emission time\n * @param fieldKeyFn - Function returning the field's key\n * @param injector - Injector for afterNextRender scheduling\n */\nexport function setupContainerInitEffect(\n  resolvedFields: Signal<ResolvedField[]>,\n  eventBus: EventBus,\n  componentType: InitializationComponentType | (() => InitializationComponentType),\n  fieldKeyFn: () => string,\n  injector: Injector,\n): void {\n  const allReady = computed(() => {\n    const fields = resolvedFields();\n    return fields.length > 0 && fields.every((field) => field.renderReady());\n  });\n\n  explicitEffect([allReady], ([ready]) => {\n    if (ready) {\n      const type = typeof componentType === 'function' ? componentType() : componentType;\n      emitComponentInitialized(eventBus, type, fieldKeyFn(), injector);\n    }\n  });\n}\n"]}

package/fesm2022/{ng-forge-dynamic-forms-css-wrapper.component-DjhcONFh.mjs → ng-forge-dynamic-forms-css-wrapper.component-AScQAJTQ.mjs}

@@ -6,15 +6,17 @@ import { dynamicTextToObservable } from '@ng-forge/dynamic-forms/internal';
 
 class CssWrapperComponent {
     fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });
-    cssClasses = input(...(ngDevMode ? [undefined, { debugName: "cssClasses" }] : /* istanbul ignore next */ []));
-    fieldInputs = input(...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
+    cssClasses = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "cssClasses" }] : /* istanbul ignore next */ []));
+    fieldInputs = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
     resolvedClasses = derivedFrom([this.cssClasses], pipe(switchMap(([value]) => dynamicTextToObservable(value))), {
         initialValue: '',
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CssWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: CssWrapperComponent, isStandalone: true, selector: "df-css-wrapper", inputs: { cssClasses: { classPropertyName: "cssClasses", publicName: "cssClasses", isSignal: true, isRequired: false, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "resolvedClasses()" } }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `<ng-container #fieldComponent></ng-container>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CssWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: CssWrapperComponent, isStandalone: true, selector: "df-css-wrapper", inputs: { cssClasses: { classPropertyName: "cssClasses", publicName: "cssClasses", isSignal: true, isRequired: false, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "resolvedClasses()" } }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `<ng-container #fieldComponent></ng-container>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CssWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CssWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-css-wrapper',
@@ -27,4 +29,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }], propDecorators: { fieldComponent: [{ type: i0.ViewChild, args: ['fieldComponent', { ...{ read: ViewContainerRef }, isSignal: true }] }], cssClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClasses", required: false }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
 
 export { CssWrapperComponent, CssWrapperComponent as default };
-//# sourceMappingURL=ng-forge-dynamic-forms-css-wrapper.component-DjhcONFh.mjs.map
+//# sourceMappingURL=ng-forge-dynamic-forms-css-wrapper.component-AScQAJTQ.mjs.map

package/fesm2022/ng-forge-dynamic-forms-css-wrapper.component-AScQAJTQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-css-wrapper.component-AScQAJTQ.mjs","mappings":";;;;;;AAiBc;AACH;AAEA;;AACA;;;AAGP;AACD;;;;;;AAhBQ;AACT;AACA;;AAEA;AACE;AACD;AACF;AAE8C","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms/src/lib/wrappers/css/css-wrapper.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, Signal, ViewContainerRef, viewChild } from '@angular/core';\nimport { pipe, switchMap } from 'rxjs';\nimport { derivedFrom } from 'ngxtension/derived-from';\nimport { FieldWrapper } from '@ng-forge/dynamic-forms/internal';\nimport { DynamicText } from '@ng-forge/dynamic-forms/internal';\nimport { dynamicTextToObservable } from '@ng-forge/dynamic-forms/internal';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/internal';\n\n/** Built-in CSS wrapper component. */\n@Component({\n  selector: 'df-css-wrapper',\n  template: `<ng-container #fieldComponent></ng-container>`,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'resolvedClasses()',\n  },\n})\nexport default class CssWrapperComponent implements FieldWrapper {\n  readonly fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });\n\n  readonly cssClasses = input<DynamicText>();\n  readonly fieldInputs = input<WrapperFieldInputs>();\n\n  readonly resolvedClasses: Signal<string> = derivedFrom([this.cssClasses], pipe(switchMap(([value]) => dynamicTextToObservable(value))), {\n    initialValue: '',\n  });\n}\n\nexport { CssWrapperComponent };\n"]}

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

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { inject, DestroyRef, Injector, EnvironmentInjector, input, computed, linkedSignal, runInInjectionContext, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
-import { L as injectFieldRegistry, C as CONTAINER_FIELD_PROCESSORS, v as createSchemaFromFields, s as createFieldResolutionPipe, h as DfFieldOutlet } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-CNc4a_Xv.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-BJi_rtey.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-BvXn8T_i.mjs';
+import { c as computeContainerHostClasses, s as setupContainerInitEffect } from './ng-forge-dynamic-forms-container-utils-BZFz6ztF.mjs';
 import { form } from '@angular/forms/signals';
 
 class GroupFieldComponent {
@@ -17,12 +17,18 @@ class GroupFieldComponent {
     eventBus = inject(EventBus);
     logger = inject(DynamicFormLogger);
                 fieldProcessors = inject(CONTAINER_FIELD_PROCESSORS);
-                field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
-    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
-                hostClasses = computed(() => computeContainerHostClasses('group', this.className()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : /* istanbul ignore next */ []));
+                field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    className = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
+    hidden = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+                hostClasses = computed(() => computeContainerHostClasses('group', this.className()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    rawFieldRegistry = computed(() => this.fieldRegistry.raw, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : /* istanbul ignore next */ []));
     formSetup = computed(() => {
         const groupField = this.field();
         const registry = this.rawFieldRegistry();
@@ -46,8 +52,10 @@ class GroupFieldComponent {
             defaultValues: {},
             registry,
         };
-    }, ...(ngDevMode ? [{ debugName: "formSetup" }] : /* istanbul ignore next */ []));
-    defaultValues = linkedSignal(() => this.formSetup().defaultValues, ...(ngDevMode ? [{ debugName: "defaultValues" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formSetup" }] : /* istanbul ignore next */ []));
+    defaultValues = linkedSignal(() => this.formSetup().defaultValues, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValues" }] : /* istanbul ignore next */ []));
         entity = linkedSignal(() => {
         const parentValue = this.parentFieldSignalContext.value();
         const groupKey = this.field().key;
@@ -67,19 +75,28 @@ class GroupFieldComponent {
             }
             return untracked(() => form(this.entity));
         });
-    }, ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
-                formValue = computed(() => this.entity(), ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
-    valid = computed(() => this.form()().valid(), ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
-    invalid = computed(() => this.form()().invalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    dirty = computed(() => this.form()().dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
-    touched = computed(() => this.form()().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    errors = computed(() => this.form()().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-    disabled = computed(() => this.form()().disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+                formValue = computed(() => this.entity(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
+    valid = computed(() => this.form()().valid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => this.form()().invalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = computed(() => this.form()().dirty(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    touched = computed(() => this.form()().touched(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    errors = computed(() => this.form()().errors(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.form()().disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     nestedFieldTree = computed(() => {
         const parentForm = this.parentFieldSignalContext.form;
         const groupKey = this.field().key;
         return parentForm[groupKey];
-    }, ...(ngDevMode ? [{ debugName: "nestedFieldTree" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nestedFieldTree" }] : /* istanbul ignore next */ []));
     groupFieldSignalContext = (() => {
         const nestedFieldTree = this.nestedFieldTree;
         return {
@@ -108,7 +125,8 @@ class GroupFieldComponent {
                 validityChange = outputFromObservable(toObservable(this.valid));
     dirtyChange = outputFromObservable(toObservable(this.dirty));
     submitted = outputFromObservable(this.eventBus.on('submit'));
-                fieldsSource = computed(() => this.formSetup().fields, ...(ngDevMode ? [{ debugName: "fieldsSource" }] : /* istanbul ignore next */ []));
+                fieldsSource = computed(() => this.formSetup().fields, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldsSource" }] : /* istanbul ignore next */ []));
     resolvedFields = derivedFromDeferred(this.fieldsSource, createFieldResolutionPipe(() => ({
         loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
         registry: this.rawFieldRegistry(),
@@ -131,8 +149,8 @@ class GroupFieldComponent {
             }
         }, { defer: true });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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" />
@@ -140,7 +158,7 @@ class GroupFieldComponent {
     }
   `, 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GroupFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GroupFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fieldset[group-field]', imports: [DfFieldOutlet], template: `
     @for (field of resolvedFields(); track field.key) {
@@ -160,4 +178,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }], 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-D0_nmXf2.mjs.map
+//# sourceMappingURL=ng-forge-dynamic-forms-group-field.component-Ca4AqdZu.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-forge-dynamic-forms-group-field.component-Ca4AqdZu.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"]}