@ng-forge/dynamic-forms 0.1.0 → 0.1.1
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-ng-forge-dynamic-forms--Qgd-rJE.mjs → ng-forge-dynamic-forms-ng-forge-dynamic-forms-Dcd04rfS.mjs} +140 -141
- package/fesm2022/{ng-forge-dynamic-forms-ng-forge-dynamic-forms--Qgd-rJE.mjs.map → ng-forge-dynamic-forms-ng-forge-dynamic-forms-Dcd04rfS.mjs.map} +1 -1
- package/fesm2022/{ng-forge-dynamic-forms-page-field.component-DcZh9mv6.mjs → ng-forge-dynamic-forms-page-field.component-DjrahUgb.mjs} +13 -13
- package/fesm2022/{ng-forge-dynamic-forms-page-field.component-DcZh9mv6.mjs.map → ng-forge-dynamic-forms-page-field.component-DjrahUgb.mjs.map} +1 -1
- package/fesm2022/{ng-forge-dynamic-forms-text-field.component-CnLc464X.mjs → ng-forge-dynamic-forms-text-field.component-7QVNm95W.mjs} +12 -12
- package/fesm2022/{ng-forge-dynamic-forms-text-field.component-CnLc464X.mjs.map → ng-forge-dynamic-forms-text-field.component-7QVNm95W.mjs.map} +1 -1
- package/fesm2022/ng-forge-dynamic-forms.mjs +1 -1
- package/package.json +4 -4
- package/types/ng-forge-dynamic-forms.d.ts +13 -49
|
@@ -710,9 +710,9 @@ function injectFieldRegistry() {
|
|
|
710
710
|
*/
|
|
711
711
|
class RootFormRegistryService {
|
|
712
712
|
// Use a signal containing a Map to make registration reactive
|
|
713
|
-
_rootForms = signal(new Map(),
|
|
713
|
+
_rootForms = signal(new Map(), ...(ngDevMode ? [{ debugName: "_rootForms" }] : []));
|
|
714
714
|
// Store form value signals separately - these can be registered before form creation
|
|
715
|
-
_formValueSignals = signal(new Map(),
|
|
715
|
+
_formValueSignals = signal(new Map(), ...(ngDevMode ? [{ debugName: "_formValueSignals" }] : []));
|
|
716
716
|
formContexts = new Map();
|
|
717
717
|
/**
|
|
718
718
|
* Registers the form value signal BEFORE form creation.
|
|
@@ -848,10 +848,10 @@ class RootFormRegistryService {
|
|
|
848
848
|
this._formValueSignals.set(new Map());
|
|
849
849
|
this.formContexts.clear();
|
|
850
850
|
}
|
|
851
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
852
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.
|
|
851
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RootFormRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
852
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RootFormRegistryService });
|
|
853
853
|
}
|
|
854
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
854
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RootFormRegistryService, decorators: [{
|
|
855
855
|
type: Injectable
|
|
856
856
|
}] });
|
|
857
857
|
|
|
@@ -972,10 +972,10 @@ class FieldContextRegistryService {
|
|
|
972
972
|
customFunctions: customFunctions || {},
|
|
973
973
|
};
|
|
974
974
|
}
|
|
975
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
976
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.
|
|
975
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FieldContextRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
976
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FieldContextRegistryService });
|
|
977
977
|
}
|
|
978
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
978
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FieldContextRegistryService, decorators: [{
|
|
979
979
|
type: Injectable
|
|
980
980
|
}] });
|
|
981
981
|
|
|
@@ -1315,10 +1315,10 @@ class FunctionRegistryService {
|
|
|
1315
1315
|
this.clearAsyncValidators();
|
|
1316
1316
|
this.clearHttpValidators();
|
|
1317
1317
|
}
|
|
1318
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1319
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.
|
|
1318
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FunctionRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1319
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FunctionRegistryService });
|
|
1320
1320
|
}
|
|
1321
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FunctionRegistryService, decorators: [{
|
|
1322
1322
|
type: Injectable
|
|
1323
1323
|
}] });
|
|
1324
1324
|
|
|
@@ -3041,10 +3041,10 @@ class SchemaRegistryService {
|
|
|
3041
3041
|
}
|
|
3042
3042
|
return schema;
|
|
3043
3043
|
}
|
|
3044
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
3045
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.
|
|
3044
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SchemaRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3045
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SchemaRegistryService });
|
|
3046
3046
|
}
|
|
3047
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
3047
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SchemaRegistryService, decorators: [{
|
|
3048
3048
|
type: Injectable
|
|
3049
3049
|
}] });
|
|
3050
3050
|
|
|
@@ -4005,10 +4005,10 @@ class EventBus {
|
|
|
4005
4005
|
}
|
|
4006
4006
|
return this.pipeline$.pipe(filter((event) => event.type === eventType));
|
|
4007
4007
|
}
|
|
4008
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
4009
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.
|
|
4008
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EventBus, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4009
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EventBus });
|
|
4010
4010
|
}
|
|
4011
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
4011
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EventBus, decorators: [{
|
|
4012
4012
|
type: Injectable
|
|
4013
4013
|
}] });
|
|
4014
4014
|
|
|
@@ -4817,15 +4817,15 @@ class PageOrchestratorComponent {
|
|
|
4817
4817
|
/**
|
|
4818
4818
|
* Array of page field definitions to render
|
|
4819
4819
|
*/
|
|
4820
|
-
pageFields = input.required(
|
|
4820
|
+
pageFields = input.required(...(ngDevMode ? [{ debugName: "pageFields" }] : []));
|
|
4821
4821
|
/**
|
|
4822
4822
|
* Root form instance from parent DynamicForm
|
|
4823
4823
|
*/
|
|
4824
|
-
form = input.required(
|
|
4824
|
+
form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
|
|
4825
4825
|
/**
|
|
4826
4826
|
* Field signal context for child fields
|
|
4827
4827
|
*/
|
|
4828
|
-
fieldSignalContext = input.required(
|
|
4828
|
+
fieldSignalContext = input.required(...(ngDevMode ? [{ debugName: "fieldSignalContext" }] : []));
|
|
4829
4829
|
/**
|
|
4830
4830
|
* Computed signal that tracks which pages are hidden.
|
|
4831
4831
|
* Returns an array of booleans where true means the page is hidden.
|
|
@@ -4835,7 +4835,7 @@ class PageOrchestratorComponent {
|
|
|
4835
4835
|
const pages = this.pageFields();
|
|
4836
4836
|
const formValue = this.rootFormRegistry.getFormValue();
|
|
4837
4837
|
return pages.map((page) => this.evaluatePageHidden(page, formValue));
|
|
4838
|
-
},
|
|
4838
|
+
}, ...(ngDevMode ? [{ debugName: "pageHiddenStates" }] : []));
|
|
4839
4839
|
/**
|
|
4840
4840
|
* Computed signal that returns indices of visible (non-hidden) pages.
|
|
4841
4841
|
* This is used for navigation to skip hidden pages.
|
|
@@ -4846,7 +4846,7 @@ class PageOrchestratorComponent {
|
|
|
4846
4846
|
.map((hidden, index) => ({ index, hidden }))
|
|
4847
4847
|
.filter((item) => !item.hidden)
|
|
4848
4848
|
.map((item) => item.index);
|
|
4849
|
-
},
|
|
4849
|
+
}, ...(ngDevMode ? [{ debugName: "visiblePageIndices" }] : []));
|
|
4850
4850
|
/**
|
|
4851
4851
|
* Internal signal for current page index that tracks with page fields.
|
|
4852
4852
|
* This tracks the actual page index, not the visible page index.
|
|
@@ -4861,7 +4861,7 @@ class PageOrchestratorComponent {
|
|
|
4861
4861
|
return 0;
|
|
4862
4862
|
// Start on page 0 (will be adjusted if page 0 is hidden by initial navigation)
|
|
4863
4863
|
return 0;
|
|
4864
|
-
},
|
|
4864
|
+
}, ...(ngDevMode ? [{ debugName: "currentPageIndex" }] : []));
|
|
4865
4865
|
/**
|
|
4866
4866
|
* Computed state for the orchestrator
|
|
4867
4867
|
*/
|
|
@@ -4880,7 +4880,7 @@ class PageOrchestratorComponent {
|
|
|
4880
4880
|
isLastPage: isLastVisiblePage,
|
|
4881
4881
|
navigationDisabled: false,
|
|
4882
4882
|
};
|
|
4883
|
-
},
|
|
4883
|
+
}, ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
4884
4884
|
/**
|
|
4885
4885
|
* Signal indicating whether all fields on the current page are valid.
|
|
4886
4886
|
*
|
|
@@ -4916,7 +4916,7 @@ class PageOrchestratorComponent {
|
|
|
4916
4916
|
}
|
|
4917
4917
|
}
|
|
4918
4918
|
return true;
|
|
4919
|
-
},
|
|
4919
|
+
}, ...(ngDevMode ? [{ debugName: "currentPageValid" }] : []));
|
|
4920
4920
|
/**
|
|
4921
4921
|
* Extended field signal context that includes currentPageValid.
|
|
4922
4922
|
*
|
|
@@ -4927,7 +4927,7 @@ class PageOrchestratorComponent {
|
|
|
4927
4927
|
extendedFieldSignalContext = computed(() => ({
|
|
4928
4928
|
...this.fieldSignalContext(),
|
|
4929
4929
|
currentPageValid: this.currentPageValid,
|
|
4930
|
-
}),
|
|
4930
|
+
}), ...(ngDevMode ? [{ debugName: "extendedFieldSignalContext" }] : []));
|
|
4931
4931
|
constructor() {
|
|
4932
4932
|
// Setup event listeners for navigation
|
|
4933
4933
|
this.setupEventListeners();
|
|
@@ -5093,8 +5093,8 @@ class PageOrchestratorComponent {
|
|
|
5093
5093
|
}
|
|
5094
5094
|
return false;
|
|
5095
5095
|
}
|
|
5096
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
5097
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
5096
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5097
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: PageOrchestratorComponent, isStandalone: true, selector: "div[page-orchestrator]", inputs: { pageFields: { classPropertyName: "pageFields", publicName: "pageFields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, fieldSignalContext: { classPropertyName: "fieldSignalContext", publicName: "fieldSignalContext", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-current-page": "state().currentPageIndex", "attr.data-total-pages": "state().totalPages" }, classAttribute: "df-page-orchestrator" }, providers: [
|
|
5098
5098
|
{
|
|
5099
5099
|
provide: FIELD_SIGNAL_CONTEXT,
|
|
5100
5100
|
useFactory: (orchestrator) => orchestrator.extendedFieldSignalContext(),
|
|
@@ -5124,9 +5124,9 @@ class PageOrchestratorComponent {
|
|
|
5124
5124
|
}
|
|
5125
5125
|
}
|
|
5126
5126
|
}
|
|
5127
|
-
`, isInline: true, styles: [":host{display:block;position:relative;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./ng-forge-dynamic-forms-page-field.component-
|
|
5127
|
+
`, isInline: true, styles: [":host{display:block;position:relative;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./ng-forge-dynamic-forms-page-field.component-DjrahUgb.mjs').then(m => m.default)], () => [import('./ng-forge-dynamic-forms-page-field.component-DjrahUgb.mjs').then(m => m.default)]] });
|
|
5128
5128
|
}
|
|
5129
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.
|
|
5129
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.5", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [import('./ng-forge-dynamic-forms-page-field.component-DjrahUgb.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
|
|
5130
5130
|
type: Component,
|
|
5131
5131
|
args: [{ selector: 'div[page-orchestrator]', imports: [PageFieldComponent], template: `
|
|
5132
5132
|
@for (pageField of pageFields(); track pageField.key; let i = $index) {
|
|
@@ -5201,9 +5201,9 @@ class DynamicForm {
|
|
|
5201
5201
|
/** Form configuration defining the structure, validation, and behavior. */
|
|
5202
5202
|
config = input.required({ ...(ngDevMode ? { debugName: "config" } : {}), alias: 'dynamic-form' });
|
|
5203
5203
|
/** Runtime form options that override config options when provided. */
|
|
5204
|
-
formOptions = input(undefined,
|
|
5204
|
+
formOptions = input(undefined, ...(ngDevMode ? [{ debugName: "formOptions" }] : []));
|
|
5205
5205
|
/** Form values for two-way data binding. */
|
|
5206
|
-
value = model(undefined,
|
|
5206
|
+
value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
5207
5207
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
5208
5208
|
// Memoized Functions
|
|
5209
5209
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
@@ -5235,7 +5235,7 @@ class DynamicForm {
|
|
|
5235
5235
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
5236
5236
|
// Computed Signals
|
|
5237
5237
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
5238
|
-
rawFieldRegistry = computed(() => this.fieldRegistry.raw,
|
|
5238
|
+
rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : []));
|
|
5239
5239
|
formModeDetection = computed(() => {
|
|
5240
5240
|
const config = this.config();
|
|
5241
5241
|
const fields = config.fields || [];
|
|
@@ -5248,7 +5248,7 @@ class DynamicForm {
|
|
|
5248
5248
|
console.warn('[Dynamic Forms] Form configuration warnings:', validation.warnings);
|
|
5249
5249
|
}
|
|
5250
5250
|
return detection;
|
|
5251
|
-
},
|
|
5251
|
+
}, ...(ngDevMode ? [{ debugName: "formModeDetection" }] : []));
|
|
5252
5252
|
formSetup = computed(() => {
|
|
5253
5253
|
const config = this.config();
|
|
5254
5254
|
const modeDetection = this.formModeDetection();
|
|
@@ -5258,7 +5258,7 @@ class DynamicForm {
|
|
|
5258
5258
|
return this.createFormSetupFromConfig(config.fields, modeDetection.mode, registry);
|
|
5259
5259
|
}
|
|
5260
5260
|
return this.createEmptyFormSetup(registry);
|
|
5261
|
-
},
|
|
5261
|
+
}, ...(ngDevMode ? [{ debugName: "formSetup" }] : []));
|
|
5262
5262
|
pageFieldDefinitions = computed(() => {
|
|
5263
5263
|
const config = this.config();
|
|
5264
5264
|
const mode = this.formModeDetection().mode;
|
|
@@ -5266,13 +5266,13 @@ class DynamicForm {
|
|
|
5266
5266
|
return config.fields.filter(isPageField);
|
|
5267
5267
|
}
|
|
5268
5268
|
return [];
|
|
5269
|
-
},
|
|
5269
|
+
}, ...(ngDevMode ? [{ debugName: "pageFieldDefinitions" }] : []));
|
|
5270
5270
|
effectiveFormOptions = computed(() => {
|
|
5271
5271
|
const config = this.config();
|
|
5272
5272
|
const configOptions = config.options || {};
|
|
5273
5273
|
const inputOptions = this.formOptions();
|
|
5274
5274
|
return { ...configOptions, ...inputOptions };
|
|
5275
|
-
},
|
|
5275
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveFormOptions" }] : []));
|
|
5276
5276
|
fieldSignalContext = computed(() => ({
|
|
5277
5277
|
injector: this.injector,
|
|
5278
5278
|
value: this.value,
|
|
@@ -5280,7 +5280,7 @@ class DynamicForm {
|
|
|
5280
5280
|
form: this.form(),
|
|
5281
5281
|
defaultValidationMessages: this.config().defaultValidationMessages,
|
|
5282
5282
|
formOptions: this.effectiveFormOptions(),
|
|
5283
|
-
}),
|
|
5283
|
+
}), ...(ngDevMode ? [{ debugName: "fieldSignalContext" }] : []));
|
|
5284
5284
|
fieldInjector = computed(() => Injector.create({
|
|
5285
5285
|
parent: this.injector,
|
|
5286
5286
|
providers: [
|
|
@@ -5289,8 +5289,8 @@ class DynamicForm {
|
|
|
5289
5289
|
useValue: this.fieldSignalContext(),
|
|
5290
5290
|
},
|
|
5291
5291
|
],
|
|
5292
|
-
}),
|
|
5293
|
-
defaultValues = linkedSignal(() => this.formSetup().defaultValues,
|
|
5292
|
+
}), ...(ngDevMode ? [{ debugName: "fieldInjector" }] : []));
|
|
5293
|
+
defaultValues = linkedSignal(() => this.formSetup().defaultValues, ...(ngDevMode ? [{ debugName: "defaultValues" }] : []));
|
|
5294
5294
|
entity = linkedSignal(() => {
|
|
5295
5295
|
const inputValue = this.value();
|
|
5296
5296
|
const defaults = this.defaultValues();
|
|
@@ -5307,7 +5307,7 @@ class DynamicForm {
|
|
|
5307
5307
|
return filtered;
|
|
5308
5308
|
}
|
|
5309
5309
|
return combined;
|
|
5310
|
-
},
|
|
5310
|
+
}, ...(ngDevMode ? [{ debugName: "entity" }] : []));
|
|
5311
5311
|
form = computed(() => {
|
|
5312
5312
|
return runInInjectionContext(this.injector, () => {
|
|
5313
5313
|
const setup = this.formSetup();
|
|
@@ -5324,7 +5324,7 @@ class DynamicForm {
|
|
|
5324
5324
|
untracked(() => this.rootFormRegistry.registerRootForm(formInstance));
|
|
5325
5325
|
return formInstance;
|
|
5326
5326
|
});
|
|
5327
|
-
},
|
|
5327
|
+
}, ...(ngDevMode ? [{ debugName: "form" }] : []));
|
|
5328
5328
|
componentId = 'dynamic-form';
|
|
5329
5329
|
totalComponentsCount = computed(() => {
|
|
5330
5330
|
const fields = this.formSetup().fields;
|
|
@@ -5335,38 +5335,38 @@ class DynamicForm {
|
|
|
5335
5335
|
const flatFields = flattenFields(fields, registry);
|
|
5336
5336
|
const componentCount = flatFields.filter(isContainerField).length;
|
|
5337
5337
|
return componentCount + 1;
|
|
5338
|
-
},
|
|
5339
|
-
fieldsSource = computed(() => this.formSetup().fields,
|
|
5338
|
+
}, ...(ngDevMode ? [{ debugName: "totalComponentsCount" }] : []));
|
|
5339
|
+
fieldsSource = computed(() => this.formSetup().fields, ...(ngDevMode ? [{ debugName: "fieldsSource" }] : []));
|
|
5340
5340
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
5341
5341
|
// Public State Signals
|
|
5342
5342
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
5343
5343
|
/** Collects errors from async field component loading for error boundary patterns. */
|
|
5344
|
-
fieldLoadingErrors = signal([],
|
|
5344
|
+
fieldLoadingErrors = signal([], ...(ngDevMode ? [{ debugName: "fieldLoadingErrors" }] : []));
|
|
5345
5345
|
/** Current form values (reactive). */
|
|
5346
|
-
formValue = computed(() => this.form()().value(),
|
|
5346
|
+
formValue = computed(() => this.form()().value(), ...(ngDevMode ? [{ debugName: "formValue" }] : []));
|
|
5347
5347
|
/** Whether the form is currently valid. */
|
|
5348
|
-
valid = computed(() => this.form()().valid(),
|
|
5348
|
+
valid = computed(() => this.form()().valid(), ...(ngDevMode ? [{ debugName: "valid" }] : []));
|
|
5349
5349
|
/** Whether the form is currently invalid. */
|
|
5350
|
-
invalid = computed(() => this.form()().invalid(),
|
|
5350
|
+
invalid = computed(() => this.form()().invalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : []));
|
|
5351
5351
|
/** Whether any form field has been modified. */
|
|
5352
|
-
dirty = computed(() => this.form()().dirty(),
|
|
5352
|
+
dirty = computed(() => this.form()().dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : []));
|
|
5353
5353
|
/** Whether any form field has been touched (blurred). */
|
|
5354
|
-
touched = computed(() => this.form()().touched(),
|
|
5354
|
+
touched = computed(() => this.form()().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
5355
5355
|
/** Current validation errors from all fields. */
|
|
5356
|
-
errors = computed(() => this.form()().errors(),
|
|
5356
|
+
errors = computed(() => this.form()().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : []));
|
|
5357
5357
|
/** Whether the form is disabled (from options or form state). */
|
|
5358
5358
|
disabled = computed(() => {
|
|
5359
5359
|
const optionsDisabled = this.effectiveFormOptions().disabled;
|
|
5360
5360
|
const formDisabled = this.form()().disabled();
|
|
5361
5361
|
return optionsDisabled ?? formDisabled;
|
|
5362
|
-
},
|
|
5362
|
+
}, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
5363
5363
|
/** Whether the form is currently submitting. */
|
|
5364
|
-
submitting = computed(() => this.form()().submitting(),
|
|
5364
|
+
submitting = computed(() => this.form()().submitting(), ...(ngDevMode ? [{ debugName: "submitting" }] : []));
|
|
5365
5365
|
/**
|
|
5366
5366
|
* Announcement message for screen readers.
|
|
5367
5367
|
* Updates when form submission fails due to validation errors.
|
|
5368
5368
|
*/
|
|
5369
|
-
errorAnnouncement = signal('',
|
|
5369
|
+
errorAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "errorAnnouncement" }] : []));
|
|
5370
5370
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
5371
5371
|
// Initialization
|
|
5372
5372
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
@@ -5591,8 +5591,8 @@ class DynamicForm {
|
|
|
5591
5591
|
ngOnDestroy() {
|
|
5592
5592
|
this.rootFormRegistry.unregisterForm();
|
|
5593
5593
|
}
|
|
5594
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
5595
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
5594
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5595
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: DynamicForm, isStandalone: true, selector: "form[dynamic-form]", inputs: { config: { classPropertyName: "config", publicName: "dynamic-form", isSignal: true, isRequired: true, transformFunction: null }, formOptions: { classPropertyName: "formOptions", publicName: "formOptions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted", reset: "reset", cleared: "cleared", events: "events", initialized: "initialized", onPageChange: "onPageChange", onPageNavigationStateChange: "onPageNavigationStateChange" }, host: { listeners: { "submit": "onNativeSubmit($event)" }, properties: { "class.disabled": "disabled()", "class.df-form-paged": "formModeDetection().mode === \"paged\"", "class.df-form-non-paged": "formModeDetection().mode === \"non-paged\"", "attr.data-form-mode": "formModeDetection().mode" }, classAttribute: "df-dynamic-form df-form" }, providers: [EventBus, SchemaRegistryService, FunctionRegistryService, RootFormRegistryService, FieldContextRegistryService], ngImport: i0, template: `
|
|
5596
5596
|
@if (formModeDetection().mode === 'paged') {
|
|
5597
5597
|
<div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="$any(form())" [fieldSignalContext]="fieldSignalContext()"></div>
|
|
5598
5598
|
} @else {
|
|
@@ -5604,7 +5604,7 @@ class DynamicForm {
|
|
|
5604
5604
|
<div class="df-live-region" role="status" aria-live="polite" aria-atomic="true">{{ errorAnnouncement() }}</div>
|
|
5605
5605
|
`, 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-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{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}:host>*{grid-column:1/-1}:host.df-form-spacing-custom{--df-grid-row-gap: var(--form-custom-spacing, 1.5rem)}:host.df-form-gap-none{--df-grid-row-gap: 0}:host.df-form-gap-xs{--df-grid-row-gap: .25rem}:host.df-form-gap-sm{--df-grid-row-gap: .5rem}:host.df-form-gap-md{--df-grid-row-gap: 1rem}:host.df-form-gap-lg{--df-grid-row-gap: 1.5rem}:host.df-form-gap-xl{--df-grid-row-gap: 2rem}:host.df-form-paged{--df-grid-row-gap: 0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: PageOrchestratorComponent, selector: "div[page-orchestrator]", inputs: ["pageFields", "form", "fieldSignalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5606
5606
|
}
|
|
5607
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
5607
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DynamicForm, decorators: [{
|
|
5608
5608
|
type: Component,
|
|
5609
5609
|
args: [{ selector: 'form[dynamic-form]', imports: [NgComponentOutlet, PageOrchestratorComponent], template: `
|
|
5610
5610
|
@if (formModeDetection().mode === 'paged') {
|
|
@@ -5792,13 +5792,13 @@ const BUILT_IN_FIELDS = [
|
|
|
5792
5792
|
},
|
|
5793
5793
|
{
|
|
5794
5794
|
name: 'page',
|
|
5795
|
-
loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-
|
|
5795
|
+
loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-DjrahUgb.mjs'),
|
|
5796
5796
|
mapper: pageFieldMapper,
|
|
5797
5797
|
valueHandling: 'flatten',
|
|
5798
5798
|
},
|
|
5799
5799
|
{
|
|
5800
5800
|
name: 'text',
|
|
5801
|
-
loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-
|
|
5801
|
+
loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-7QVNm95W.mjs'),
|
|
5802
5802
|
mapper: textFieldMapper,
|
|
5803
5803
|
valueHandling: 'exclude',
|
|
5804
5804
|
},
|
|
@@ -6121,46 +6121,47 @@ function resolveTokens(args, context) {
|
|
|
6121
6121
|
}
|
|
6122
6122
|
|
|
6123
6123
|
/**
|
|
6124
|
-
* Type guard
|
|
6125
|
-
|
|
6126
|
-
|
|
6127
|
-
|
|
6124
|
+
* Type guard to check if a value has the FormInternals structure.
|
|
6125
|
+
*/
|
|
6126
|
+
function isFormInternals(value) {
|
|
6127
|
+
return (typeof value === 'object' &&
|
|
6128
|
+
value !== null &&
|
|
6129
|
+
'structure' in value &&
|
|
6130
|
+
typeof value.structure?.childrenMap === 'function');
|
|
6131
|
+
}
|
|
6132
|
+
/**
|
|
6133
|
+
* Type guard that unwraps signals and checks for FormInternals structure.
|
|
6134
|
+
* Use this when the input might be a signal wrapping FormInternals.
|
|
6128
6135
|
*/
|
|
6129
6136
|
function hasFormStructure(form) {
|
|
6130
|
-
|
|
6137
|
+
const unwrapped = isSignal(form) ? form() : form;
|
|
6138
|
+
return isFormInternals(unwrapped);
|
|
6131
6139
|
}
|
|
6132
6140
|
/**
|
|
6133
|
-
*
|
|
6134
|
-
*
|
|
6135
|
-
* @param form - The form object (from `form()` function or FieldTree)
|
|
6136
|
-
* @returns The childrenMap or null if not available
|
|
6141
|
+
* Unwraps a signal if needed and returns the FormInternals or null.
|
|
6137
6142
|
*/
|
|
6143
|
+
function unwrapFormInput(form) {
|
|
6144
|
+
const unwrapped = isSignal(form) ? form() : form;
|
|
6145
|
+
return isFormInternals(unwrapped) ? unwrapped : null;
|
|
6146
|
+
}
|
|
6138
6147
|
function getChildrenMap(form) {
|
|
6139
|
-
|
|
6148
|
+
const target = unwrapFormInput(form);
|
|
6149
|
+
if (!target) {
|
|
6140
6150
|
return null;
|
|
6141
6151
|
}
|
|
6142
|
-
|
|
6152
|
+
const result = target.structure.childrenMap();
|
|
6153
|
+
const normalizedMap = new Map();
|
|
6154
|
+
for (const [key, childData] of result.byPropertyKey) {
|
|
6155
|
+
normalizedMap.set(key, childData.reader);
|
|
6156
|
+
}
|
|
6157
|
+
return normalizedMap;
|
|
6143
6158
|
}
|
|
6144
|
-
/**
|
|
6145
|
-
* Safely retrieves the fieldProxy from a form node.
|
|
6146
|
-
*
|
|
6147
|
-
* @param node - The form node (FieldNode or similar)
|
|
6148
|
-
* @returns The fieldProxy FieldTree or null if not available
|
|
6149
|
-
*/
|
|
6150
6159
|
function getFieldProxy(node) {
|
|
6151
|
-
if (
|
|
6160
|
+
if (!isFormInternals(node)) {
|
|
6152
6161
|
return null;
|
|
6153
6162
|
}
|
|
6154
|
-
|
|
6155
|
-
return proxy ?? null;
|
|
6163
|
+
return node.fieldProxy ?? null;
|
|
6156
6164
|
}
|
|
6157
|
-
/**
|
|
6158
|
-
* Retrieves a child FieldTree from a form by key.
|
|
6159
|
-
*
|
|
6160
|
-
* @param form - The parent form
|
|
6161
|
-
* @param key - The child field key
|
|
6162
|
-
* @returns The child FieldTree or null if not found
|
|
6163
|
-
*/
|
|
6164
6165
|
function getChildFieldTree(form, key) {
|
|
6165
6166
|
const childrenMap = getChildrenMap(form);
|
|
6166
6167
|
return childrenMap?.get(key) ?? null;
|
|
@@ -6207,9 +6208,8 @@ function resolveValueFieldContext(fieldKey) {
|
|
|
6207
6208
|
else {
|
|
6208
6209
|
// Standard field access for non-array keys via childrenMap lookup
|
|
6209
6210
|
const formField = childrenMap.get(fieldKey);
|
|
6210
|
-
|
|
6211
|
-
|
|
6212
|
-
fieldProxy = resolvedProxy;
|
|
6211
|
+
if (formField) {
|
|
6212
|
+
fieldProxy = formField;
|
|
6213
6213
|
}
|
|
6214
6214
|
}
|
|
6215
6215
|
return { fieldProxy, defaultValidationMessages };
|
|
@@ -6285,9 +6285,8 @@ function checkboxFieldMapper(fieldDef) {
|
|
|
6285
6285
|
let fieldProxy = undefined;
|
|
6286
6286
|
if (childrenMap) {
|
|
6287
6287
|
const formField = childrenMap.get(fieldDef.key);
|
|
6288
|
-
|
|
6289
|
-
|
|
6290
|
-
fieldProxy = resolvedProxy;
|
|
6288
|
+
if (formField) {
|
|
6289
|
+
fieldProxy = formField;
|
|
6291
6290
|
}
|
|
6292
6291
|
}
|
|
6293
6292
|
// Return computed signal for reactive updates
|
|
@@ -6505,14 +6504,14 @@ function extractErrorParams(error) {
|
|
|
6505
6504
|
*/
|
|
6506
6505
|
function createResolvedErrorsSignal(field, validationMessages, defaultValidationMessages = signal(undefined), injector = inject(Injector)) {
|
|
6507
6506
|
// Ensure validationMessages is never undefined (mappers pass {} if not defined)
|
|
6508
|
-
const messages = computed(() => validationMessages() ?? {},
|
|
6509
|
-
const defaultMessages = computed(() => defaultValidationMessages() ?? {},
|
|
6507
|
+
const messages = computed(() => validationMessages() ?? {}, ...(ngDevMode ? [{ debugName: "messages" }] : []));
|
|
6508
|
+
const defaultMessages = computed(() => defaultValidationMessages() ?? {}, ...(ngDevMode ? [{ debugName: "defaultMessages" }] : []));
|
|
6510
6509
|
// Create a computed signal that reads the actual errors from the field
|
|
6511
6510
|
// This ensures the signal tracks changes to field().errors(), not just the field reference
|
|
6512
6511
|
const errors = computed(() => {
|
|
6513
6512
|
const control = field()();
|
|
6514
6513
|
return control.errors();
|
|
6515
|
-
},
|
|
6514
|
+
}, ...(ngDevMode ? [{ debugName: "errors" }] : []));
|
|
6516
6515
|
// Convert signals to observables using toObservable with injector
|
|
6517
6516
|
const errors$ = toObservable(errors, { injector });
|
|
6518
6517
|
const messages$ = toObservable(messages, { injector });
|
|
@@ -6601,10 +6600,10 @@ class DynamicTextPipe {
|
|
|
6601
6600
|
}
|
|
6602
6601
|
return of(value || '');
|
|
6603
6602
|
}
|
|
6604
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
6605
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
6603
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DynamicTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
6604
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: DynamicTextPipe, isStandalone: true, name: "dynamicText" });
|
|
6606
6605
|
}
|
|
6607
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
6606
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DynamicTextPipe, decorators: [{
|
|
6608
6607
|
type: Pipe,
|
|
6609
6608
|
args: [{
|
|
6610
6609
|
name: 'dynamicText',
|
|
@@ -6653,8 +6652,8 @@ class RowFieldComponent {
|
|
|
6653
6652
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
6654
6653
|
// Inputs
|
|
6655
6654
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
6656
|
-
field = input.required(
|
|
6657
|
-
key = input.required(
|
|
6655
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
6656
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
6658
6657
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
6659
6658
|
// Computed Signals
|
|
6660
6659
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
@@ -6665,12 +6664,12 @@ class RowFieldComponent {
|
|
|
6665
6664
|
catch {
|
|
6666
6665
|
return false;
|
|
6667
6666
|
}
|
|
6668
|
-
},
|
|
6669
|
-
rawFieldRegistry = computed(() => this.fieldRegistry.raw,
|
|
6667
|
+
}, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
6668
|
+
rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : []));
|
|
6670
6669
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
6671
6670
|
// Field Resolution
|
|
6672
6671
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
6673
|
-
fieldsSource = computed(() => this.field().fields || [],
|
|
6672
|
+
fieldsSource = computed(() => this.field().fields || [], ...(ngDevMode ? [{ debugName: "fieldsSource" }] : []));
|
|
6674
6673
|
resolvedFields = derivedFromDeferred(this.fieldsSource, pipe(switchMap((fields) => {
|
|
6675
6674
|
if (!fields || fields.length === 0) {
|
|
6676
6675
|
return of([]);
|
|
@@ -6697,14 +6696,14 @@ class RowFieldComponent {
|
|
|
6697
6696
|
emitComponentInitialized(this.eventBus, 'row', this.field().key, this.injector);
|
|
6698
6697
|
}
|
|
6699
6698
|
});
|
|
6700
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
6701
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
6699
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RowFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6700
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: RowFieldComponent, isStandalone: true, selector: "div[row-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.disabled": "disabled()", "id": "`${key()}`", "attr.data-testid": "key()" }, classAttribute: "df-field df-row" }, ngImport: i0, template: `
|
|
6702
6701
|
@for (field of resolvedFields(); track field.key) {
|
|
6703
6702
|
<ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
|
|
6704
6703
|
}
|
|
6705
6704
|
`, 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-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{display:flex;flex-wrap:wrap;gap:var(--df-grid-gap);align-items:flex-start;width:100%}:host ::ng-deep>*:not([class*=df-col-]){flex:0 0 auto}:host ::ng-deep>.df-col-1{flex:0 0 calc(8.3333333333% - var(--df-grid-gap) * .9166666667);max-width:calc(8.3333333333% - var(--df-grid-gap) * .9166666667)}:host ::ng-deep>.df-col-2{flex:0 0 calc(16.6666666667% - var(--df-grid-gap) * .8333333333);max-width:calc(16.6666666667% - var(--df-grid-gap) * .8333333333)}:host ::ng-deep>.df-col-3{flex:0 0 calc(25% - var(--df-grid-gap) * .75);max-width:calc(25% - var(--df-grid-gap) * .75)}:host ::ng-deep>.df-col-4{flex:0 0 calc(33.3333333333% - var(--df-grid-gap) * .6666666667);max-width:calc(33.3333333333% - var(--df-grid-gap) * .6666666667)}:host ::ng-deep>.df-col-5{flex:0 0 calc(41.6666666667% - var(--df-grid-gap) * .5833333333);max-width:calc(41.6666666667% - var(--df-grid-gap) * .5833333333)}:host ::ng-deep>.df-col-6{flex:0 0 calc(50% - var(--df-grid-gap) * .5);max-width:calc(50% - var(--df-grid-gap) * .5)}:host ::ng-deep>.df-col-7{flex:0 0 calc(58.3333333333% - var(--df-grid-gap) * .4166666667);max-width:calc(58.3333333333% - var(--df-grid-gap) * .4166666667)}:host ::ng-deep>.df-col-8{flex:0 0 calc(66.6666666667% - var(--df-grid-gap) * .3333333333);max-width:calc(66.6666666667% - var(--df-grid-gap) * .3333333333)}:host ::ng-deep>.df-col-9{flex:0 0 calc(75% - var(--df-grid-gap) * .25);max-width:calc(75% - var(--df-grid-gap) * .25)}:host ::ng-deep>.df-col-10{flex:0 0 calc(83.3333333333% - var(--df-grid-gap) * .1666666667);max-width:calc(83.3333333333% - var(--df-grid-gap) * .1666666667)}:host ::ng-deep>.df-col-11{flex:0 0 calc(91.6666666667% - var(--df-grid-gap) * .0833333333);max-width:calc(91.6666666667% - var(--df-grid-gap) * .0833333333)}:host ::ng-deep>.df-col-12{flex:0 0 calc(100% - var(--df-grid-gap) * 0);max-width:calc(100% - var(--df-grid-gap) * 0)}:host.df-gap-custom{--df-grid-gap: var(--row-custom-gap, 1rem)}@media(max-width:576px){:host.df-row-mobile-stack{flex-direction:column}:host.df-row-mobile-stack ::ng-deep>*{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:577px)and (max-width:768px){:host.df-row-tablet-2col ::ng-deep>*{flex:0 0 calc(50% - var(--df-grid-gap) / 2);max-width:calc(50% - var(--df-grid-gap) / 2)}}@media(max-width:576px){:host{flex-direction:column}:host ::ng-deep>*{flex:0 0 100%!important;max-width:100%!important}:host.df-row-mobile-keep-cols{flex-direction:row}:host.df-row-mobile-keep-cols ::ng-deep>*:not([class*=df-col-]){flex:0 0 auto!important;max-width:none!important}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6706
6705
|
}
|
|
6707
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
6706
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RowFieldComponent, decorators: [{
|
|
6708
6707
|
type: Component,
|
|
6709
6708
|
args: [{ selector: 'div[row-field]', imports: [NgComponentOutlet], template: `
|
|
6710
6709
|
@for (field of resolvedFields(); track field.key) {
|
|
@@ -6749,12 +6748,12 @@ class GroupFieldComponent {
|
|
|
6749
6748
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
6750
6749
|
// Inputs
|
|
6751
6750
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
6752
|
-
field = input.required(
|
|
6753
|
-
key = input.required(
|
|
6751
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
6752
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
6754
6753
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
6755
6754
|
// Computed Signals
|
|
6756
6755
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
6757
|
-
rawFieldRegistry = computed(() => this.fieldRegistry.raw,
|
|
6756
|
+
rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : []));
|
|
6758
6757
|
formSetup = computed(() => {
|
|
6759
6758
|
try {
|
|
6760
6759
|
const groupField = this.field();
|
|
@@ -6785,15 +6784,15 @@ class GroupFieldComponent {
|
|
|
6785
6784
|
registry: this.rawFieldRegistry(),
|
|
6786
6785
|
};
|
|
6787
6786
|
}
|
|
6788
|
-
},
|
|
6789
|
-
defaultValues = linkedSignal(() => this.formSetup().defaultValues,
|
|
6787
|
+
}, ...(ngDevMode ? [{ debugName: "formSetup" }] : []));
|
|
6788
|
+
defaultValues = linkedSignal(() => this.formSetup().defaultValues, ...(ngDevMode ? [{ debugName: "defaultValues" }] : []));
|
|
6790
6789
|
entity = linkedSignal(() => {
|
|
6791
6790
|
const parentValue = this.parentFieldSignalContext.value();
|
|
6792
6791
|
const groupKey = this.field().key;
|
|
6793
6792
|
const defaults = this.defaultValues();
|
|
6794
6793
|
const groupValue = parentValue?.[groupKey] || {};
|
|
6795
6794
|
return { ...defaults, ...groupValue };
|
|
6796
|
-
},
|
|
6795
|
+
}, ...(ngDevMode ? [{ debugName: "entity" }] : []));
|
|
6797
6796
|
form = computed(() => {
|
|
6798
6797
|
return runInInjectionContext(this.injector, () => {
|
|
6799
6798
|
const setup = this.formSetup();
|
|
@@ -6803,17 +6802,17 @@ class GroupFieldComponent {
|
|
|
6803
6802
|
}
|
|
6804
6803
|
return untracked(() => form(this.entity));
|
|
6805
6804
|
});
|
|
6806
|
-
},
|
|
6805
|
+
}, ...(ngDevMode ? [{ debugName: "form" }] : []));
|
|
6807
6806
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
6808
6807
|
// Public State Signals
|
|
6809
6808
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
6810
|
-
formValue = computed(() => this.entity(),
|
|
6811
|
-
valid = computed(() => this.form()().valid(),
|
|
6812
|
-
invalid = computed(() => this.form()().invalid(),
|
|
6813
|
-
dirty = computed(() => this.form()().dirty(),
|
|
6814
|
-
touched = computed(() => this.form()().touched(),
|
|
6815
|
-
errors = computed(() => this.form()().errors(),
|
|
6816
|
-
disabled = computed(() => this.form()().disabled(),
|
|
6809
|
+
formValue = computed(() => this.entity(), ...(ngDevMode ? [{ debugName: "formValue" }] : []));
|
|
6810
|
+
valid = computed(() => this.form()().valid(), ...(ngDevMode ? [{ debugName: "valid" }] : []));
|
|
6811
|
+
invalid = computed(() => this.form()().invalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : []));
|
|
6812
|
+
dirty = computed(() => this.form()().dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : []));
|
|
6813
|
+
touched = computed(() => this.form()().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
6814
|
+
errors = computed(() => this.form()().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : []));
|
|
6815
|
+
disabled = computed(() => this.form()().disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
6817
6816
|
/**
|
|
6818
6817
|
* Get the nested FieldTree from the parent form for this group.
|
|
6819
6818
|
* This allows child fields to update the parent form directly,
|
|
@@ -6823,7 +6822,7 @@ class GroupFieldComponent {
|
|
|
6823
6822
|
const parentForm = this.parentFieldSignalContext.form();
|
|
6824
6823
|
const groupKey = this.field().key;
|
|
6825
6824
|
return getChildFieldTree(parentForm, groupKey);
|
|
6826
|
-
},
|
|
6825
|
+
}, ...(ngDevMode ? [{ debugName: "nestedFieldTree" }] : []));
|
|
6827
6826
|
groupInjector = computed(() => {
|
|
6828
6827
|
const nestedTree = this.nestedFieldTree();
|
|
6829
6828
|
// Use the nested FieldTree from parent if available, otherwise fall back to our own form
|
|
@@ -6845,7 +6844,7 @@ class GroupFieldComponent {
|
|
|
6845
6844
|
},
|
|
6846
6845
|
],
|
|
6847
6846
|
});
|
|
6848
|
-
},
|
|
6847
|
+
}, ...(ngDevMode ? [{ debugName: "groupInjector" }] : []));
|
|
6849
6848
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
6850
6849
|
// Outputs
|
|
6851
6850
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
@@ -6855,7 +6854,7 @@ class GroupFieldComponent {
|
|
|
6855
6854
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
6856
6855
|
// Field Resolution
|
|
6857
6856
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
6858
|
-
fieldsSource = computed(() => this.formSetup().fields,
|
|
6857
|
+
fieldsSource = computed(() => this.formSetup().fields, ...(ngDevMode ? [{ debugName: "fieldsSource" }] : []));
|
|
6859
6858
|
resolvedFields = derivedFromDeferred(this.fieldsSource, pipe(switchMap((fields) => {
|
|
6860
6859
|
if (!fields || fields.length === 0) {
|
|
6861
6860
|
return of([]);
|
|
@@ -6882,14 +6881,14 @@ class GroupFieldComponent {
|
|
|
6882
6881
|
emitComponentInitialized(this.eventBus, 'group', this.field().key, this.injector);
|
|
6883
6882
|
}
|
|
6884
6883
|
});
|
|
6885
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
6886
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
6884
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6885
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", 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 } }, outputs: { validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted" }, host: { attributes: { "role": "group" }, properties: { "class.disabled": "disabled()", "id": "`${key()}`", "attr.data-testid": "key()" }, classAttribute: "df-field df-group" }, ngImport: i0, template: `
|
|
6887
6886
|
@for (field of resolvedFields(); track field.key) {
|
|
6888
6887
|
<ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
|
|
6889
6888
|
}
|
|
6890
6889
|
`, 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-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}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6891
6890
|
}
|
|
6892
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
6891
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: GroupFieldComponent, decorators: [{
|
|
6893
6892
|
type: Component,
|
|
6894
6893
|
args: [{ selector: 'fieldset[group-field]', imports: [NgComponentOutlet], template: `
|
|
6895
6894
|
@for (field of resolvedFields(); track field.key) {
|
|
@@ -7035,7 +7034,7 @@ function createObjectItemForm(options) {
|
|
|
7035
7034
|
const parentValue = parentFieldSignalContext.value();
|
|
7036
7035
|
const arrayValue = getArrayValue(parentValue, arrayKey);
|
|
7037
7036
|
return arrayValue[indexSignal()] ?? {};
|
|
7038
|
-
},
|
|
7037
|
+
}, ...(ngDevMode ? [{ debugName: "itemEntity" }] : []));
|
|
7039
7038
|
const nestedFields = 'fields' in template && Array.isArray(template.fields) ? template.fields : [];
|
|
7040
7039
|
return runInInjectionContext(parentInjector, () => {
|
|
7041
7040
|
// Determine which fields to include in the schema
|
|
@@ -7095,7 +7094,7 @@ function resolveArrayItem(options) {
|
|
|
7095
7094
|
const order = itemOrderSignal();
|
|
7096
7095
|
const idx = order.indexOf(itemId);
|
|
7097
7096
|
return idx >= 0 ? idx : index;
|
|
7098
|
-
},
|
|
7097
|
+
}, ...(ngDevMode ? [{ debugName: "indexSignal" }] : []));
|
|
7099
7098
|
const { injector, inputs } = createArrayItemInjectorAndInputs({
|
|
7100
7099
|
fieldTree,
|
|
7101
7100
|
template,
|
|
@@ -7140,16 +7139,16 @@ class ArrayFieldComponent {
|
|
|
7140
7139
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
7141
7140
|
// Inputs
|
|
7142
7141
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
7143
|
-
field = input.required(
|
|
7144
|
-
key = input.required(
|
|
7142
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
7143
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
7145
7144
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
7146
7145
|
// Computed Signals
|
|
7147
7146
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
7148
|
-
rawFieldRegistry = computed(() => this.fieldRegistry.raw,
|
|
7147
|
+
rawFieldRegistry = computed(() => this.fieldRegistry.raw, ...(ngDevMode ? [{ debugName: "rawFieldRegistry" }] : []));
|
|
7149
7148
|
fieldTemplate = computed(() => {
|
|
7150
7149
|
const arrayField = this.field();
|
|
7151
7150
|
return arrayField.fields && arrayField.fields.length > 0 ? arrayField.fields[0] : null;
|
|
7152
|
-
},
|
|
7151
|
+
}, ...(ngDevMode ? [{ debugName: "fieldTemplate" }] : []));
|
|
7153
7152
|
arrayFieldTrees = computed(() => {
|
|
7154
7153
|
const arrayKey = this.field().key;
|
|
7155
7154
|
const parentForm = this.parentFieldSignalContext.form();
|
|
@@ -7170,14 +7169,14 @@ class ArrayFieldComponent {
|
|
|
7170
7169
|
items.push(itemFieldTree ?? null);
|
|
7171
7170
|
}
|
|
7172
7171
|
return items;
|
|
7173
|
-
},
|
|
7172
|
+
}, ...(ngDevMode ? [{ debugName: "arrayFieldTrees" }] : []));
|
|
7174
7173
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
7175
7174
|
// State Signals
|
|
7176
7175
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
7177
|
-
resolvedItemsSignal = signal([],
|
|
7178
|
-
updateVersion = signal(0,
|
|
7179
|
-
itemOrderSignal = linkedSignal(() => this.resolvedItemsSignal().map((item) => item.id),
|
|
7180
|
-
resolvedItems = linkedSignal(() => this.resolvedItemsSignal(),
|
|
7176
|
+
resolvedItemsSignal = signal([], ...(ngDevMode ? [{ debugName: "resolvedItemsSignal" }] : []));
|
|
7177
|
+
updateVersion = signal(0, ...(ngDevMode ? [{ debugName: "updateVersion" }] : []));
|
|
7178
|
+
itemOrderSignal = linkedSignal(() => this.resolvedItemsSignal().map((item) => item.id), ...(ngDevMode ? [{ debugName: "itemOrderSignal" }] : []));
|
|
7179
|
+
resolvedItems = linkedSignal(() => this.resolvedItemsSignal(), ...(ngDevMode ? [{ debugName: "resolvedItems" }] : []));
|
|
7181
7180
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
7182
7181
|
// Effects
|
|
7183
7182
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
@@ -7303,14 +7302,14 @@ class ArrayFieldComponent {
|
|
|
7303
7302
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
7304
7303
|
formObject.value.set({ ...currentValue, [arrayKey]: newArray });
|
|
7305
7304
|
}
|
|
7306
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
7307
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
7305
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7306
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ArrayFieldComponent, isStandalone: true, selector: "array-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()" }, classAttribute: "df-field df-array" }, ngImport: i0, template: `
|
|
7308
7307
|
@for (item of resolvedItems(); track item.id) {
|
|
7309
7308
|
<ng-container *ngComponentOutlet="item.component; injector: item.injector; inputs: item.inputs()" />
|
|
7310
7309
|
}
|
|
7311
7310
|
`, 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-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{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}:host>*{grid-column:1/-1}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7312
7311
|
}
|
|
7313
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
7312
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ArrayFieldComponent, decorators: [{
|
|
7314
7313
|
type: Component,
|
|
7315
7314
|
args: [{ selector: 'array-field', imports: [NgComponentOutlet], template: `
|
|
7316
7315
|
@for (item of resolvedItems(); track item.id) {
|
|
@@ -7356,4 +7355,4 @@ var arrayField_component = /*#__PURE__*/Object.freeze({
|
|
|
7356
7355
|
*/
|
|
7357
7356
|
|
|
7358
7357
|
export { resolveTokens as $, AddArrayItemEvent as A, checkboxFieldMapper as B, datepickerFieldMapper as C, DynamicTextPipe as D, EventBus as E, FormClearEvent as F, groupFieldMapper as G, pageFieldMapper as H, optionsFieldMapper as I, rowFieldMapper as J, valueFieldMapper as K, FIELD_REGISTRY as L, getFieldValueHandling as M, NextPageEvent as N, ARRAY_CONTEXT as O, PageChangeEvent as P, FIELD_SIGNAL_CONTEXT as Q, RemoveArrayItemEvent as R, SubmitEvent as S, createResolvedErrorsSignal as T, shouldShowErrors as U, dynamicTextToObservable as V, ArrayFieldComponent as W, GroupFieldComponent as X, RowFieldComponent as Y, applyValidator as Z, applyValidators as _, reconcileFields as a, BUILT_IN_FIELDS as a0, getChildFieldTree as a1, getChildrenMap as a2, getFieldProxy as a3, hasFormStructure as a4, DynamicForm as b, isFormStateCondition as c, derivedFromDeferred as d, emitComponentInitialized as e, resolveSubmitButtonDisabled as f, resolveNextButtonDisabled as g, isCheckedField as h, injectFieldRegistry as i, isValueField as j, isArrayField as k, isContainerField as l, isDisplayOnlyField as m, isGroupField as n, isLeafField as o, provideDynamicForm as p, isPageField as q, resolveField as r, isRowField as s, isValueBearingField as t, FormResetEvent as u, validatePageNesting as v, PreviousPageEvent as w, arrayFieldMapper as x, baseFieldMapper as y, buildBaseInputs as z };
|
|
7359
|
-
//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms
|
|
7358
|
+
//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-Dcd04rfS.mjs.map
|