@ng-forge/dynamic-forms 0.8.0-next.3 → 0.8.0-next.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ng-forge-dynamic-forms-array-field.component-DWhbvZUO.mjs +1005 -0
- package/fesm2022/ng-forge-dynamic-forms-array-field.component-DWhbvZUO.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms-container-field.component-ByKgY4-b.mjs +87 -0
- package/fesm2022/ng-forge-dynamic-forms-container-field.component-ByKgY4-b.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms-container-utils-DXRcEEkE.mjs +48 -0
- package/fesm2022/ng-forge-dynamic-forms-container-utils-DXRcEEkE.mjs.map +1 -0
- package/fesm2022/{ng-forge-dynamic-forms-css-wrapper.component-CGNGJoqv.mjs → ng-forge-dynamic-forms-css-wrapper.component-ClFdxZV4.mjs} +2 -2
- package/fesm2022/{ng-forge-dynamic-forms-css-wrapper.component-CGNGJoqv.mjs.map → ng-forge-dynamic-forms-css-wrapper.component-ClFdxZV4.mjs.map} +1 -1
- package/fesm2022/ng-forge-dynamic-forms-emit-initialization-CTpgJ-02.mjs +29 -0
- package/fesm2022/ng-forge-dynamic-forms-emit-initialization-CTpgJ-02.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms-group-field.component-clrQsUyY.mjs +186 -0
- package/fesm2022/ng-forge-dynamic-forms-group-field.component-clrQsUyY.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms-integration.mjs +3 -4
- package/fesm2022/ng-forge-dynamic-forms-integration.mjs.map +1 -1
- package/fesm2022/{ng-forge-dynamic-forms-ng-forge-dynamic-forms-BwoONrnj.mjs → ng-forge-dynamic-forms-ng-forge-dynamic-forms-Bw9Bt0Ev.mjs} +12762 -14001
- package/fesm2022/ng-forge-dynamic-forms-ng-forge-dynamic-forms-Bw9Bt0Ev.mjs.map +1 -0
- package/fesm2022/{ng-forge-dynamic-forms-page-field.component-DV-EX9U0.mjs → ng-forge-dynamic-forms-page-field.component-XtyjFlJi.mjs} +3 -2
- package/fesm2022/{ng-forge-dynamic-forms-page-field.component-DV-EX9U0.mjs.map → ng-forge-dynamic-forms-page-field.component-XtyjFlJi.mjs.map} +1 -1
- package/fesm2022/{ng-forge-dynamic-forms-text-field.component-CHC8v87r.mjs → ng-forge-dynamic-forms-text-field.component-CJsRWH2r.mjs} +2 -2
- package/fesm2022/{ng-forge-dynamic-forms-text-field.component-CHC8v87r.mjs.map → ng-forge-dynamic-forms-text-field.component-CJsRWH2r.mjs.map} +1 -1
- package/fesm2022/ng-forge-dynamic-forms.mjs +1 -1
- package/package.json +1 -1
- package/types/ng-forge-dynamic-forms-integration.d.ts +3 -4
- package/types/ng-forge-dynamic-forms.d.ts +75 -35
- package/fesm2022/ng-forge-dynamic-forms-ng-forge-dynamic-forms-BwoONrnj.mjs.map +0 -1
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, DestroyRef, Injector, EnvironmentInjector, input, computed, linkedSignal, runInInjectionContext, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { i as injectFieldRegistry, F as FIELD_SIGNAL_CONTEXT, E as EventBus, D as DynamicFormLogger, C as CONTAINER_FIELD_PROCESSORS, g as isEqual, h as createSchemaFromFields, d as derivedFromDeferred, c as createFieldResolutionPipe, f as DfFieldOutlet } from './ng-forge-dynamic-forms-ng-forge-dynamic-forms-Bw9Bt0Ev.mjs';
|
|
4
|
+
import { outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
|
|
5
|
+
import { explicitEffect } from 'ngxtension/explicit-effect';
|
|
6
|
+
import { c as computeContainerHostClasses, s as setupContainerInitEffect } from './ng-forge-dynamic-forms-container-utils-DXRcEEkE.mjs';
|
|
7
|
+
import { form } from '@angular/forms/signals';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Container component for rendering nested form groups.
|
|
11
|
+
*
|
|
12
|
+
* Creates a scoped form context with its own validation state.
|
|
13
|
+
* Child fields receive a FIELD_SIGNAL_CONTEXT scoped to this group's form instance.
|
|
14
|
+
* Group values are nested under the group's key in the parent form.
|
|
15
|
+
*/
|
|
16
|
+
class GroupFieldComponent {
|
|
17
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
18
|
+
// Dependencies
|
|
19
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
20
|
+
destroyRef = inject(DestroyRef);
|
|
21
|
+
fieldRegistry = injectFieldRegistry();
|
|
22
|
+
parentFieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
|
|
23
|
+
injector = inject(Injector);
|
|
24
|
+
environmentInjector = inject(EnvironmentInjector);
|
|
25
|
+
eventBus = inject(EventBus);
|
|
26
|
+
logger = inject(DynamicFormLogger);
|
|
27
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
28
|
+
// Memoized Functions
|
|
29
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
30
|
+
fieldProcessors = inject(CONTAINER_FIELD_PROCESSORS);
|
|
31
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
32
|
+
// Inputs
|
|
33
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
34
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
35
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
36
|
+
className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
|
|
37
|
+
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
38
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
39
|
+
// Computed Signals
|
|
40
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
41
|
+
hostClasses = computed(() => computeContainerHostClasses('group', this.className()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
42
|
+
rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : /* istanbul ignore next */ []));
|
|
43
|
+
formSetup = computed(() => {
|
|
44
|
+
const groupField = this.field();
|
|
45
|
+
const registry = this.rawFieldRegistry();
|
|
46
|
+
if (groupField.fields && groupField.fields.length > 0) {
|
|
47
|
+
const flattenedFields = this.fieldProcessors.memoizedFlattenFields(groupField.fields, registry);
|
|
48
|
+
const flattenedFieldsForRendering = this.fieldProcessors.memoizedFlattenFieldsForRendering(groupField.fields, registry);
|
|
49
|
+
const fieldsById = this.fieldProcessors.memoizedKeyBy(flattenedFields);
|
|
50
|
+
const defaultValues = this.fieldProcessors.memoizedDefaultValues(fieldsById, registry);
|
|
51
|
+
return {
|
|
52
|
+
fields: flattenedFieldsForRendering,
|
|
53
|
+
schemaFields: flattenedFields,
|
|
54
|
+
originalFields: groupField.fields,
|
|
55
|
+
defaultValues,
|
|
56
|
+
registry,
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
return {
|
|
60
|
+
fields: [],
|
|
61
|
+
schemaFields: [],
|
|
62
|
+
originalFields: [],
|
|
63
|
+
defaultValues: {},
|
|
64
|
+
registry,
|
|
65
|
+
};
|
|
66
|
+
}, ...(ngDevMode ? [{ debugName: "formSetup" }] : /* istanbul ignore next */ []));
|
|
67
|
+
defaultValues = linkedSignal(() => this.formSetup().defaultValues, ...(ngDevMode ? [{ debugName: "defaultValues" }] : /* istanbul ignore next */ []));
|
|
68
|
+
/**
|
|
69
|
+
* Entity computed from parent value, group key, and defaults.
|
|
70
|
+
* Uses deep equality check to prevent unnecessary updates when
|
|
71
|
+
* object spread creates new references with identical values.
|
|
72
|
+
*/
|
|
73
|
+
entity = linkedSignal(() => {
|
|
74
|
+
const parentValue = this.parentFieldSignalContext.value();
|
|
75
|
+
const groupKey = this.field().key;
|
|
76
|
+
const defaults = this.defaultValues();
|
|
77
|
+
const groupValue = parentValue?.[groupKey] || {};
|
|
78
|
+
return { ...defaults, ...groupValue };
|
|
79
|
+
}, {
|
|
80
|
+
debugName: 'GroupFieldComponent.entity',
|
|
81
|
+
equal: isEqual,
|
|
82
|
+
});
|
|
83
|
+
form = computed(() => {
|
|
84
|
+
return runInInjectionContext(this.injector, () => {
|
|
85
|
+
const setup = this.formSetup();
|
|
86
|
+
if (setup.schemaFields.length > 0) {
|
|
87
|
+
const schema = createSchemaFromFields(setup.schemaFields, setup.registry);
|
|
88
|
+
return untracked(() => form(this.entity, schema));
|
|
89
|
+
}
|
|
90
|
+
return untracked(() => form(this.entity));
|
|
91
|
+
});
|
|
92
|
+
}, ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
|
|
93
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
94
|
+
// Public State Signals
|
|
95
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
96
|
+
formValue = computed(() => this.entity(), ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
|
|
97
|
+
valid = computed(() => this.form()().valid(), ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
|
|
98
|
+
invalid = computed(() => this.form()().invalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
99
|
+
dirty = computed(() => this.form()().dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
100
|
+
touched = computed(() => this.form()().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
101
|
+
errors = computed(() => this.form()().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
102
|
+
disabled = computed(() => this.form()().disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
103
|
+
nestedFieldTree = computed(() => {
|
|
104
|
+
const parentForm = this.parentFieldSignalContext.form;
|
|
105
|
+
const groupKey = this.field().key;
|
|
106
|
+
return parentForm[groupKey];
|
|
107
|
+
}, ...(ngDevMode ? [{ debugName: "nestedFieldTree" }] : /* istanbul ignore next */ []));
|
|
108
|
+
groupFieldSignalContext = (() => {
|
|
109
|
+
const nestedFieldTree = this.nestedFieldTree;
|
|
110
|
+
return {
|
|
111
|
+
injector: this.injector,
|
|
112
|
+
value: this.parentFieldSignalContext.value,
|
|
113
|
+
defaultValues: this.defaultValues,
|
|
114
|
+
get form() {
|
|
115
|
+
return nestedFieldTree() ?? {};
|
|
116
|
+
},
|
|
117
|
+
};
|
|
118
|
+
})();
|
|
119
|
+
groupInjector = Injector.create({
|
|
120
|
+
parent: this.injector,
|
|
121
|
+
providers: [{ provide: FIELD_SIGNAL_CONTEXT, useValue: this.groupFieldSignalContext }],
|
|
122
|
+
});
|
|
123
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
124
|
+
// Outputs
|
|
125
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
126
|
+
validityChange = outputFromObservable(toObservable(this.valid));
|
|
127
|
+
dirtyChange = outputFromObservable(toObservable(this.dirty));
|
|
128
|
+
submitted = outputFromObservable(this.eventBus.on('submit'));
|
|
129
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
130
|
+
// Field Resolution
|
|
131
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
132
|
+
fieldsSource = computed(() => this.formSetup().fields, ...(ngDevMode ? [{ debugName: "fieldsSource" }] : /* istanbul ignore next */ []));
|
|
133
|
+
resolvedFields = derivedFromDeferred(this.fieldsSource, createFieldResolutionPipe(() => ({
|
|
134
|
+
loadTypeComponent: (type) => this.fieldRegistry.loadTypeComponent(type),
|
|
135
|
+
registry: this.rawFieldRegistry(),
|
|
136
|
+
injector: this.groupInjector,
|
|
137
|
+
destroyRef: this.destroyRef,
|
|
138
|
+
onError: (fieldDef, error) => {
|
|
139
|
+
const fieldKey = fieldDef.key || '<no key>';
|
|
140
|
+
this.logger.error(`Failed to load component for field type '${fieldDef.type}' (key: ${fieldKey}) ` +
|
|
141
|
+
`within group '${this.field().key}'. Ensure the field type is registered in your field registry.`, error);
|
|
142
|
+
},
|
|
143
|
+
})), { initialValue: [], injector: this.injector });
|
|
144
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
145
|
+
// Constructor
|
|
146
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
147
|
+
constructor() {
|
|
148
|
+
this.setupEffects();
|
|
149
|
+
}
|
|
150
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
151
|
+
// Private Methods
|
|
152
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
153
|
+
setupEffects() {
|
|
154
|
+
setupContainerInitEffect(this.resolvedFields, this.eventBus, 'group', () => this.field().key, this.injector);
|
|
155
|
+
explicitEffect([this.nestedFieldTree, this.field], ([tree, field]) => {
|
|
156
|
+
if (!tree) {
|
|
157
|
+
this.logger.warn(`Group field "${field.key}" not found in parent form. ` + `Ensure the parent form schema includes this group field.`);
|
|
158
|
+
}
|
|
159
|
+
}, { defer: true });
|
|
160
|
+
}
|
|
161
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
162
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: `
|
|
163
|
+
@for (field of resolvedFields(); track field.key) {
|
|
164
|
+
<ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
|
|
165
|
+
}
|
|
166
|
+
`, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{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 });
|
|
167
|
+
}
|
|
168
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: GroupFieldComponent, decorators: [{
|
|
169
|
+
type: Component,
|
|
170
|
+
args: [{ selector: 'fieldset[group-field]', imports: [DfFieldOutlet], template: `
|
|
171
|
+
@for (field of resolvedFields(); track field.key) {
|
|
172
|
+
<ng-container *dfFieldOutlet="field; environmentInjector: environmentInjector" />
|
|
173
|
+
}
|
|
174
|
+
`, host: {
|
|
175
|
+
'[class]': 'hostClasses()',
|
|
176
|
+
role: 'group',
|
|
177
|
+
'[class.disabled]': 'disabled()',
|
|
178
|
+
'[class.df-container-hidden]': 'hidden()',
|
|
179
|
+
'[attr.aria-hidden]': 'hidden() || null',
|
|
180
|
+
'[id]': '`${key()}`',
|
|
181
|
+
'[attr.data-testid]': 'key()',
|
|
182
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-array-item-gap: var(--df-grid-row-gap);--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{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"] }]
|
|
183
|
+
}], 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"] }] } });
|
|
184
|
+
|
|
185
|
+
export { GroupFieldComponent, GroupFieldComponent as default };
|
|
186
|
+
//# sourceMappingURL=ng-forge-dynamic-forms-group-field.component-clrQsUyY.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ng-forge-dynamic-forms-group-field.component-clrQsUyY.mjs","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.directive';\nimport { outputFromObservable, toObservable } from '@angular/core/rxjs-interop';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { derivedFromDeferred } from '../../utils/derived-from-deferred/derived-from-deferred';\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 '../../utils/object-utils';\nimport { DynamicFormLogger } from '../../providers/features/logger/logger.token';\nimport { GroupField } from '../../definitions/default/group-field';\nimport { injectFieldRegistry } from '../../utils/inject-field-registry/inject-field-registry';\nimport { FieldTree, form } from '@angular/forms/signals';\nimport { FieldDef } from '../../definitions/base/field-def';\nimport { FieldSignalContext } from '../../mappers/types';\nimport { FIELD_SIGNAL_CONTEXT } from '../../models/field-signal-context.token';\nimport { createSchemaFromFields } from '../../core/schema-builder';\nimport { EventBus } from '../../events/event.bus';\nimport { SubmitEvent } from '../../events/constants/submit.event';\n\n/**\n * Container component for rendering nested form groups.\n *\n * Creates a scoped form context with its own validation state.\n * Child fields receive a FIELD_SIGNAL_CONTEXT scoped to this group's form instance.\n * Group values are nested under the group's key in the parent form.\n */\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 '[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 = inject(FIELD_SIGNAL_CONTEXT) as FieldSignalContext<TModel>;\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 private readonly groupInjector = Injector.create({\n parent: this.injector,\n providers: [{ provide: FIELD_SIGNAL_CONTEXT, useValue: this.groupFieldSignalContext }],\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"],"names":[],"mappings":"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"}
|
|
@@ -80,11 +80,10 @@ function buildValueFieldInputs(fieldDef, ctx, defaultProps, defaultValidationMes
|
|
|
80
80
|
* - The field tree updates reactively when the root form structure changes
|
|
81
81
|
* - Newly added array items will get their field tree once the form value updates
|
|
82
82
|
*
|
|
83
|
-
* For fields with specific properties
|
|
84
|
-
* -
|
|
83
|
+
* For fields with specific properties, use the specialized mappers:
|
|
84
|
+
* - optionsFieldMapper: for fields with options (select, radio, multi-checkbox)
|
|
85
85
|
* - datepickerFieldMapper: for fields with minDate, maxDate, startAt
|
|
86
|
-
* -
|
|
87
|
-
* - sliderFieldMapper: for fields with minValue, maxValue, step
|
|
86
|
+
* - checkboxFieldMapper: for boolean fields (checkbox, toggle)
|
|
88
87
|
*
|
|
89
88
|
* @param fieldDef The value field definition
|
|
90
89
|
* @returns Signal containing Record of input names to values for ngComponentOutlet
|