@dynamic-field-kit/angular 1.5.0 → 1.6.0
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/CHANGELOG.md +190 -0
- package/README.md +67 -9
- package/dist/fesm2022/dynamic-field-kit-angular.mjs +489 -113
- package/dist/types/dynamic-field-kit-angular.d.ts +339 -0
- package/package.json +44 -30
- package/dist/components/BaseInput.d.ts +0 -34
- package/dist/components/DynamicFormDevTools.d.ts +0 -16
- package/dist/components/DynamicInput.d.ts +0 -36
- package/dist/components/FieldInput.d.ts +0 -28
- package/dist/components/MultiFieldInput.d.ts +0 -60
- package/dist/fieldRegistryToken.d.ts +0 -3
- package/dist/index.d.ts +0 -5
- package/dist/layout/defaultLayouts.d.ts +0 -31
- package/dist/layout/index.d.ts +0 -2
- package/dist/layout/layoutRegistry.d.ts +0 -12
- package/dist/lib/dynamic-field-kit.module.d.ts +0 -11
- package/dist/lib/dynamic-form.store.d.ts +0 -23
- package/dist/public-api.d.ts +0 -14
- package/dist/types/layout.d.ts +0 -4
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { OnChanges, ChangeDetectorRef, EventEmitter, SimpleChanges, AfterViewInit, OnDestroy, ViewContainerRef, OnInit, TemplateRef, Type, InjectionToken } from '@angular/core';
|
|
3
|
+
import { FieldTypeKey, Properties, FieldDescription, ResolvedFieldRendererProps, BaseLayout, ResponsiveLayout, ValidationResult, LayoutConfig, FieldRegistry } from '@dynamic-field-kit/core';
|
|
4
|
+
export { ColumnLayoutConfig, FieldDescription, FieldRegistry, FieldRendererProps, FieldTypeKey, GridLayoutConfig, LayoutConfig, RowLayoutConfig, ValidationContext, ValidationResult, collectFieldPaths, fieldRegistry, indexGroupPathMap, resolveDisabled, resolveOptions, resolveReadOnly, validateField, validateFieldAsync, validateFields, validateFieldsAsync, validators } from '@dynamic-field-kit/core';
|
|
5
|
+
import * as i1 from '@angular/common';
|
|
6
|
+
|
|
7
|
+
interface FieldInputProps {
|
|
8
|
+
value?: unknown;
|
|
9
|
+
label?: string;
|
|
10
|
+
placeholder?: string;
|
|
11
|
+
required?: boolean;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
readOnly?: boolean;
|
|
14
|
+
touched?: boolean;
|
|
15
|
+
dirty?: boolean;
|
|
16
|
+
error?: string | string[];
|
|
17
|
+
options?: unknown[];
|
|
18
|
+
className?: string;
|
|
19
|
+
description?: string;
|
|
20
|
+
id?: string;
|
|
21
|
+
ariaInvalid?: boolean;
|
|
22
|
+
ariaDescribedBy?: string;
|
|
23
|
+
ariaRequired?: boolean;
|
|
24
|
+
min?: number | string;
|
|
25
|
+
max?: number | string;
|
|
26
|
+
step?: number | string;
|
|
27
|
+
accept?: string;
|
|
28
|
+
multiple?: boolean;
|
|
29
|
+
}
|
|
30
|
+
declare abstract class BaseInputComponent implements OnChanges {
|
|
31
|
+
protected cdr: ChangeDetectorRef;
|
|
32
|
+
value?: unknown;
|
|
33
|
+
label?: string;
|
|
34
|
+
placeholder?: string;
|
|
35
|
+
required?: boolean;
|
|
36
|
+
disabled?: boolean;
|
|
37
|
+
readOnly?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Whether the field has been blurred (or marked touched by the form store).
|
|
40
|
+
* Renderers gate error display on this to avoid shouting at a user who has
|
|
41
|
+
* not reached the field yet.
|
|
42
|
+
*/
|
|
43
|
+
touched?: boolean;
|
|
44
|
+
/** Whether the value differs from the one the form opened with. */
|
|
45
|
+
dirty?: boolean;
|
|
46
|
+
error?: string | string[];
|
|
47
|
+
options?: unknown[];
|
|
48
|
+
className?: string;
|
|
49
|
+
description?: string;
|
|
50
|
+
id?: string;
|
|
51
|
+
ariaInvalid?: boolean;
|
|
52
|
+
ariaDescribedBy?: string;
|
|
53
|
+
ariaRequired?: boolean;
|
|
54
|
+
min?: number | string;
|
|
55
|
+
max?: number | string;
|
|
56
|
+
step?: number | string;
|
|
57
|
+
accept?: string;
|
|
58
|
+
multiple?: boolean;
|
|
59
|
+
valueChange: EventEmitter<unknown>;
|
|
60
|
+
constructor(cdr: ChangeDetectorRef);
|
|
61
|
+
ngOnChanges(_changes: SimpleChanges): void;
|
|
62
|
+
protected detectChanges(): void;
|
|
63
|
+
protected hasChanges(changes: SimpleChanges, prop: string): boolean;
|
|
64
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BaseInputComponent, never>;
|
|
65
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<BaseInputComponent, "ng-component", never, { "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "dirty": { "alias": "dirty"; "required": false; }; "error": { "alias": "error"; "required": false; }; "options": { "alias": "options"; "required": false; }; "className": { "alias": "className"; "required": false; }; "description": { "alias": "description"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaInvalid": { "alias": "ariaInvalid"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
declare class DynamicInput extends BaseInputComponent implements OnChanges, AfterViewInit, OnDestroy {
|
|
69
|
+
type: FieldTypeKey;
|
|
70
|
+
extraProps?: Properties;
|
|
71
|
+
valueChange: EventEmitter<unknown>;
|
|
72
|
+
onChange: EventEmitter<unknown>;
|
|
73
|
+
private registry;
|
|
74
|
+
host: ViewContainerRef;
|
|
75
|
+
private compRef?;
|
|
76
|
+
private inputInstance?;
|
|
77
|
+
private subscriptions;
|
|
78
|
+
private supplied;
|
|
79
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
80
|
+
ngAfterViewInit(): void;
|
|
81
|
+
ngOnDestroy(): void;
|
|
82
|
+
private syncPropsToInstance;
|
|
83
|
+
private cleanup;
|
|
84
|
+
private cleanupSubscriptions;
|
|
85
|
+
private cleanupRenderedComponent;
|
|
86
|
+
private render;
|
|
87
|
+
private isComponentType;
|
|
88
|
+
private renderComponent;
|
|
89
|
+
private renderFallback;
|
|
90
|
+
private getFallbackProps;
|
|
91
|
+
private applyProps;
|
|
92
|
+
private applyExtraProps;
|
|
93
|
+
private bindOutputs;
|
|
94
|
+
private emitValue;
|
|
95
|
+
private renderDefaultFallbackHTML5;
|
|
96
|
+
private renderError;
|
|
97
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DynamicInput, never>;
|
|
98
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DynamicInput, "dfk-dynamic-input", never, { "type": { "alias": "type"; "required": false; }; "extraProps": { "alias": "extraProps"; "required": false; }; }, { "valueChange": "valueChange"; "onChange": "onChange"; }, never, never, true, never>;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
declare class FieldInput implements OnChanges {
|
|
102
|
+
private cdr;
|
|
103
|
+
fieldDescription?: FieldDescription;
|
|
104
|
+
/**
|
|
105
|
+
* Data at this field's own level. Preferred over `value`: the shared
|
|
106
|
+
* `buildFieldRendererProps` needs the surrounding data to resolve
|
|
107
|
+
* `appearCondition`, dynamic options and cross-field validation. When only
|
|
108
|
+
* `value` is bound (mounting this component directly), a one-key object is
|
|
109
|
+
* synthesised from it.
|
|
110
|
+
*/
|
|
111
|
+
data?: Properties;
|
|
112
|
+
/** Top-level form data, for fields nested inside a repeatable group. */
|
|
113
|
+
rootData?: Properties;
|
|
114
|
+
value?: unknown;
|
|
115
|
+
options?: Record<string, unknown>[];
|
|
116
|
+
disabled?: boolean;
|
|
117
|
+
readOnly?: boolean;
|
|
118
|
+
error?: string | string[];
|
|
119
|
+
/** Distinguishes a controlled empty error from an omitted error input. */
|
|
120
|
+
validationControlled: boolean;
|
|
121
|
+
/** Whether the field has been blurred, or marked touched by a form store. */
|
|
122
|
+
touched?: boolean;
|
|
123
|
+
/** Whether the value differs from the one the form opened with. */
|
|
124
|
+
dirty?: boolean;
|
|
125
|
+
/** Per-form-instance id namespace; see core's `makeFieldId`. */
|
|
126
|
+
idPrefix: string;
|
|
127
|
+
onValueChangeField: EventEmitter<{
|
|
128
|
+
value: unknown;
|
|
129
|
+
key: string;
|
|
130
|
+
}>;
|
|
131
|
+
/**
|
|
132
|
+
* Emits this field's name when focus leaves it. Driven by `focusout`, which
|
|
133
|
+
* bubbles, so it works for any renderer without the renderer having to
|
|
134
|
+
* declare a blur output of its own.
|
|
135
|
+
*/
|
|
136
|
+
onBlurField: EventEmitter<string>;
|
|
137
|
+
/**
|
|
138
|
+
* The full renderer prop bag, built once per change-detection pass rather
|
|
139
|
+
* than from one getter per binding - `buildFieldRendererProps` validates the
|
|
140
|
+
* field, and running that ~20 times per pass would be wasteful.
|
|
141
|
+
*/
|
|
142
|
+
rendererProps: ResolvedFieldRendererProps | null;
|
|
143
|
+
constructor(cdr: ChangeDetectorRef);
|
|
144
|
+
ngOnChanges(_changes: SimpleChanges): void;
|
|
145
|
+
private buildProps;
|
|
146
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<FieldInput, never>;
|
|
147
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<FieldInput, "dfk-field-input", never, { "fieldDescription": { "alias": "fieldDescription"; "required": false; }; "data": { "alias": "data"; "required": false; }; "rootData": { "alias": "rootData"; "required": false; }; "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "error": { "alias": "error"; "required": false; }; "validationControlled": { "alias": "validationControlled"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "dirty": { "alias": "dirty"; "required": false; }; "idPrefix": { "alias": "idPrefix"; "required": false; }; }, { "onValueChangeField": "onValueChangeField"; "onBlurField": "onBlurField"; }, never, never, true, never>;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
type BaseLayoutConfig = BaseLayout;
|
|
151
|
+
type ResponsiveLayoutConfig = ResponsiveLayout;
|
|
152
|
+
|
|
153
|
+
declare class MultiFieldInput implements OnInit, OnChanges {
|
|
154
|
+
private cdr;
|
|
155
|
+
fieldDescriptions: FieldDescription[];
|
|
156
|
+
properties?: Properties;
|
|
157
|
+
onChange: EventEmitter<Properties>;
|
|
158
|
+
validityChange: EventEmitter<ValidationResult>;
|
|
159
|
+
/**
|
|
160
|
+
* Emits a field's name when it loses focus. Touched state is tracked
|
|
161
|
+
* internally either way; this is the hook for driving an external form store
|
|
162
|
+
* - pass `createDynamicFormStore`'s `handleBlur` to get its `touched` map and
|
|
163
|
+
* `validateOnBlur` behaviour.
|
|
164
|
+
*/
|
|
165
|
+
onBlurField: EventEmitter<string>;
|
|
166
|
+
/**
|
|
167
|
+
* Controlled touched map. When bound it is the single source of truth and
|
|
168
|
+
* the internal tracker is bypassed, so `createDynamicFormStore`'s `touched`
|
|
169
|
+
* signal (updated by setFieldTouched/touchAll/handleSubmit, cleared by
|
|
170
|
+
* reset) is what renderers actually see. Leave it unbound to keep the
|
|
171
|
+
* internal, blur-only tracker.
|
|
172
|
+
*/
|
|
173
|
+
touched?: Record<string, boolean>;
|
|
174
|
+
/** Controlled error map; bind the form store's `errors()` signal here. */
|
|
175
|
+
errors?: Record<string, string[]>;
|
|
176
|
+
/** Emits the next touched map whenever a field is blurred. */
|
|
177
|
+
touchedChange: EventEmitter<Record<string, boolean>>;
|
|
178
|
+
/**
|
|
179
|
+
* Namespace for generated field ids: a field renders with
|
|
180
|
+
* `${idPrefix}-${name}`. Defaults to a value unique to this component
|
|
181
|
+
* instance, so two forms containing the same field name do not emit
|
|
182
|
+
* duplicate DOM ids. Bind a fixed string to pin ids (`idPrefix="dfk-field"`
|
|
183
|
+
* restores the pre-1.6 ids), or set `FieldDescription.id` per field.
|
|
184
|
+
*/
|
|
185
|
+
idPrefix?: string;
|
|
186
|
+
private touchedFields;
|
|
187
|
+
private readonly instanceId;
|
|
188
|
+
private initialProperties;
|
|
189
|
+
private indexedErrorsSource?;
|
|
190
|
+
private indexedErrors;
|
|
191
|
+
private indexedTouchedSource?;
|
|
192
|
+
private indexedTouched;
|
|
193
|
+
get effectiveIdPrefix(): string;
|
|
194
|
+
/** The touched map in effect: the controlled input, else the internal one. */
|
|
195
|
+
private get effectiveTouched();
|
|
196
|
+
handleBlurField(fieldName: string): void;
|
|
197
|
+
/** Whether this field has been blurred at least once. */
|
|
198
|
+
isTouched(fieldName: string): boolean;
|
|
199
|
+
/** Whether this field's value differs from the one the form opened with. */
|
|
200
|
+
isFieldDirty(fieldName: string): boolean;
|
|
201
|
+
fieldErrors(fieldName: string): string[] | undefined;
|
|
202
|
+
errorsForItem(fieldName: string, index: number): Record<string, string[]> | undefined;
|
|
203
|
+
touchedForItem(fieldName: string, index: number): Record<string, boolean>;
|
|
204
|
+
handleGroupBlur(fieldName: string, index: number, key: string): void;
|
|
205
|
+
/**
|
|
206
|
+
* Clears the internally tracked touched state. Only meaningful in
|
|
207
|
+
* uncontrolled mode - when `touched` is bound, resetting the form store
|
|
208
|
+
* (e.g. `createDynamicFormStore().reset()`) already clears it.
|
|
209
|
+
*/
|
|
210
|
+
resetTouched(): void;
|
|
211
|
+
setFieldTouched(fieldName: string, isTouched?: boolean): void;
|
|
212
|
+
layout: LayoutConfig;
|
|
213
|
+
rootData?: Properties;
|
|
214
|
+
data: Properties;
|
|
215
|
+
visibleFields: FieldDescription[];
|
|
216
|
+
private initialised;
|
|
217
|
+
private isMobile;
|
|
218
|
+
constructor(cdr: ChangeDetectorRef);
|
|
219
|
+
onWindowResize(): void;
|
|
220
|
+
get resolvedLayout(): BaseLayoutConfig;
|
|
221
|
+
get resolvedLayoutType(): string;
|
|
222
|
+
get gap(): number;
|
|
223
|
+
get columns(): number;
|
|
224
|
+
trackByFn(index: number, field: FieldDescription): string | number;
|
|
225
|
+
trackByIndex(index: number): number;
|
|
226
|
+
private groupTrackByCache;
|
|
227
|
+
groupTrackBy(field: FieldDescription): (index: number, item: Properties) => unknown;
|
|
228
|
+
ngOnInit(): void;
|
|
229
|
+
ngOnChanges(_changes: SimpleChanges): void;
|
|
230
|
+
private updateIsMobile;
|
|
231
|
+
private init;
|
|
232
|
+
private updateVisibleFields;
|
|
233
|
+
onFieldChange(event: {
|
|
234
|
+
value: unknown;
|
|
235
|
+
key: string;
|
|
236
|
+
}): void;
|
|
237
|
+
getItems(field: FieldDescription): Properties[];
|
|
238
|
+
canAddItem(field: FieldDescription): boolean;
|
|
239
|
+
canRemoveItem(field: FieldDescription): boolean;
|
|
240
|
+
onGroupItemAdd(field: FieldDescription): void;
|
|
241
|
+
onGroupItemRemove(field: FieldDescription, index: number): void;
|
|
242
|
+
onGroupItemChange(field: FieldDescription, index: number, next: Properties): void;
|
|
243
|
+
private commitData;
|
|
244
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MultiFieldInput, never>;
|
|
245
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MultiFieldInput, "dfk-multi-field-input", never, { "fieldDescriptions": { "alias": "fieldDescriptions"; "required": false; }; "properties": { "alias": "properties"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "idPrefix": { "alias": "idPrefix"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "rootData": { "alias": "rootData"; "required": false; }; }, { "onChange": "onChange"; "validityChange": "validityChange"; "onBlurField": "onBlurField"; "touchedChange": "touchedChange"; }, never, never, true, never>;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
declare class DynamicFormDevToolsComponent {
|
|
249
|
+
data: Properties;
|
|
250
|
+
errors: Record<string, string[]>;
|
|
251
|
+
touched: Record<string, boolean>;
|
|
252
|
+
isDirty: boolean;
|
|
253
|
+
fields: FieldDescription[];
|
|
254
|
+
/** Number of fields carrying errors, mirroring the react and vue overlays. */
|
|
255
|
+
errorCount(): number;
|
|
256
|
+
isOpen: i0.WritableSignal<boolean>;
|
|
257
|
+
activeTab: i0.WritableSignal<"data" | "meta" | "errors" | "fields">;
|
|
258
|
+
tabs: Array<'data' | 'errors' | 'meta' | 'fields'>;
|
|
259
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormDevToolsComponent, never>;
|
|
260
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DynamicFormDevToolsComponent, "dfk-dev-tools", never, { "data": { "alias": "data"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "isDirty": { "alias": "isDirty"; "required": false; }; "fields": { "alias": "fields"; "required": false; }; }, {}, never, never, true, never>;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
interface DynamicFormOptions {
|
|
264
|
+
fields: FieldDescription[];
|
|
265
|
+
initialValues?: Properties;
|
|
266
|
+
validateOnBlur?: boolean;
|
|
267
|
+
validateOnChange?: boolean;
|
|
268
|
+
}
|
|
269
|
+
declare function createDynamicFormStore(options: DynamicFormOptions): {
|
|
270
|
+
data: i0.WritableSignal<Properties>;
|
|
271
|
+
errors: i0.WritableSignal<Record<string, string[]>>;
|
|
272
|
+
isValid: i0.Signal<boolean>;
|
|
273
|
+
isValidating: i0.WritableSignal<boolean>;
|
|
274
|
+
isValidationComplete: i0.Signal<boolean>;
|
|
275
|
+
validationStatus: i0.Signal<"invalid" | "valid" | "pending">;
|
|
276
|
+
isDirty: i0.WritableSignal<boolean>;
|
|
277
|
+
touched: i0.WritableSignal<Record<string, boolean>>;
|
|
278
|
+
isSubmitting: i0.WritableSignal<boolean>;
|
|
279
|
+
isSubmitted: i0.WritableSignal<boolean>;
|
|
280
|
+
setFieldValue: (name: string, value: unknown) => void;
|
|
281
|
+
setFieldTouched: (name: string, isTouched?: boolean) => void;
|
|
282
|
+
touchAll: () => void;
|
|
283
|
+
resetTouched: () => void;
|
|
284
|
+
handleChange: (newData: Properties) => void;
|
|
285
|
+
handleBlur: (fieldName: string) => void;
|
|
286
|
+
reset: (newValues?: Properties) => void;
|
|
287
|
+
validate: () => boolean;
|
|
288
|
+
validateAsync: () => Promise<boolean>;
|
|
289
|
+
handleSubmit: (onValid: (data: Properties) => void | Promise<void>, onInvalid?: (errors: Record<string, string[]>) => void) => (e?: Event) => Promise<void>;
|
|
290
|
+
};
|
|
291
|
+
|
|
292
|
+
declare class ColumnLayout {
|
|
293
|
+
config?: {
|
|
294
|
+
gap?: number;
|
|
295
|
+
};
|
|
296
|
+
template: TemplateRef<unknown>;
|
|
297
|
+
get gap(): number;
|
|
298
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ColumnLayout, never>;
|
|
299
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ColumnLayout, "dfk-column-layout", never, { "config": { "alias": "config"; "required": false; }; "template": { "alias": "template"; "required": false; }; }, {}, never, never, true, never>;
|
|
300
|
+
}
|
|
301
|
+
declare class RowLayout {
|
|
302
|
+
config?: {
|
|
303
|
+
gap?: number;
|
|
304
|
+
};
|
|
305
|
+
template: TemplateRef<unknown>;
|
|
306
|
+
get gap(): number;
|
|
307
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RowLayout, never>;
|
|
308
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RowLayout, "dfk-row-layout", never, { "config": { "alias": "config"; "required": false; }; "template": { "alias": "template"; "required": false; }; }, {}, never, never, true, never>;
|
|
309
|
+
}
|
|
310
|
+
declare class GridLayout {
|
|
311
|
+
config?: {
|
|
312
|
+
columns?: number;
|
|
313
|
+
gap?: number;
|
|
314
|
+
};
|
|
315
|
+
template: TemplateRef<unknown>;
|
|
316
|
+
get columns(): number;
|
|
317
|
+
get gap(): number;
|
|
318
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<GridLayout, never>;
|
|
319
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<GridLayout, "dfk-grid-layout", never, { "config": { "alias": "config"; "required": false; }; "template": { "alias": "template"; "required": false; }; }, {}, never, never, true, never>;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
type AngularLayoutComponent = Type<unknown>;
|
|
323
|
+
declare class LayoutRegistry {
|
|
324
|
+
private layouts;
|
|
325
|
+
register(type: string, component: AngularLayoutComponent): void;
|
|
326
|
+
get(type: string): AngularLayoutComponent | undefined;
|
|
327
|
+
}
|
|
328
|
+
declare const layoutRegistry: LayoutRegistry;
|
|
329
|
+
|
|
330
|
+
declare class DynamicFieldKitModule {
|
|
331
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFieldKitModule, never>;
|
|
332
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<DynamicFieldKitModule, never, [typeof i1.CommonModule, typeof DynamicInput, typeof FieldInput, typeof MultiFieldInput, typeof ColumnLayout, typeof RowLayout, typeof GridLayout], [typeof DynamicInput, typeof FieldInput, typeof MultiFieldInput, typeof ColumnLayout, typeof RowLayout, typeof GridLayout]>;
|
|
333
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<DynamicFieldKitModule>;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
declare const FIELD_REGISTRY: InjectionToken<FieldRegistry>;
|
|
337
|
+
|
|
338
|
+
export { BaseInputComponent, ColumnLayout, DynamicFieldKitModule, DynamicFormDevToolsComponent, DynamicInput, FIELD_REGISTRY, FieldInput, GridLayout, LayoutRegistry, MultiFieldInput, RowLayout, createDynamicFormStore, layoutRegistry };
|
|
339
|
+
export type { BaseLayoutConfig, DynamicFormOptions, FieldInputProps, ResponsiveLayoutConfig };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dynamic-field-kit/angular",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"description": "Angular renderer for dynamic-field-kit",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"private": false,
|
|
@@ -10,7 +10,16 @@
|
|
|
10
10
|
],
|
|
11
11
|
"main": "dist/fesm2022/dynamic-field-kit-angular.mjs",
|
|
12
12
|
"module": "dist/fesm2022/dynamic-field-kit-angular.mjs",
|
|
13
|
-
"types": "dist/
|
|
13
|
+
"types": "dist/types/dynamic-field-kit-angular.d.ts",
|
|
14
|
+
"exports": {
|
|
15
|
+
".": {
|
|
16
|
+
"types": "./dist/types/dynamic-field-kit-angular.d.ts",
|
|
17
|
+
"default": "./dist/fesm2022/dynamic-field-kit-angular.mjs"
|
|
18
|
+
},
|
|
19
|
+
"./package.json": {
|
|
20
|
+
"default": "./package.json"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
14
23
|
"files": [
|
|
15
24
|
"dist",
|
|
16
25
|
"!dist/README.md",
|
|
@@ -18,8 +27,8 @@
|
|
|
18
27
|
"CHANGELOG.md"
|
|
19
28
|
],
|
|
20
29
|
"peerDependencies": {
|
|
21
|
-
"@angular/common": ">=
|
|
22
|
-
"@angular/core": ">=
|
|
30
|
+
"@angular/common": ">=16 <22",
|
|
31
|
+
"@angular/core": ">=16 <22",
|
|
23
32
|
"@dynamic-field-kit/core": "^1.3.0"
|
|
24
33
|
},
|
|
25
34
|
"publishConfig": {
|
|
@@ -37,24 +46,23 @@
|
|
|
37
46
|
"devDependencies": {
|
|
38
47
|
"@analogjs/vite-plugin-angular": "^2.7.1",
|
|
39
48
|
"@analogjs/vitest-angular": "^2.7.1",
|
|
40
|
-
"@angular-devkit/build-angular": "^
|
|
41
|
-
"@angular/cdk": "^
|
|
42
|
-
"@angular/common": "^
|
|
43
|
-
"@angular/compiler": "^
|
|
44
|
-
"@angular/compiler-cli": "^
|
|
45
|
-
"@angular/core": "^
|
|
46
|
-
"@angular/forms": "^
|
|
47
|
-
"@angular/platform-browser": "^
|
|
48
|
-
"@
|
|
49
|
-
"@dynamic-field-kit/core": "^1.5.0",
|
|
49
|
+
"@angular-devkit/build-angular": "^21.2.0",
|
|
50
|
+
"@angular/cdk": "^21.2.14",
|
|
51
|
+
"@angular/common": "^21.2.0",
|
|
52
|
+
"@angular/compiler": "^21.2.0",
|
|
53
|
+
"@angular/compiler-cli": "^21.2.0",
|
|
54
|
+
"@angular/core": "^21.2.0",
|
|
55
|
+
"@angular/forms": "^21.2.0",
|
|
56
|
+
"@angular/platform-browser": "^21.2.0",
|
|
57
|
+
"@dynamic-field-kit/core": "^1.6.0",
|
|
50
58
|
"@vitest/coverage-istanbul": "^4.1.11",
|
|
51
59
|
"jsdom": "^29.1.1",
|
|
52
|
-
"ng-packagr": "^
|
|
60
|
+
"ng-packagr": "^21.2.0",
|
|
53
61
|
"rimraf": "^6.1.3",
|
|
54
62
|
"rxjs": "^7.8.0",
|
|
55
|
-
"typescript": "~5.
|
|
63
|
+
"typescript": "~5.9.3",
|
|
56
64
|
"vitest": "^4.1.11",
|
|
57
|
-
"zone.js": "
|
|
65
|
+
"zone.js": "~0.16.0"
|
|
58
66
|
},
|
|
59
67
|
"repository": {
|
|
60
68
|
"type": "git",
|
|
@@ -62,21 +70,27 @@
|
|
|
62
70
|
"directory": "packages/angular"
|
|
63
71
|
},
|
|
64
72
|
"keywords": [
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
73
|
+
"angular",
|
|
74
|
+
"angular-forms",
|
|
75
|
+
"angular-form",
|
|
76
|
+
"signals",
|
|
77
|
+
"dynamic-forms",
|
|
78
|
+
"dynamic-form",
|
|
79
|
+
"form-builder",
|
|
80
|
+
"form-engine",
|
|
81
|
+
"form-validation",
|
|
82
|
+
"schema-driven",
|
|
83
|
+
"headless",
|
|
84
|
+
"forms",
|
|
85
|
+
"typescript",
|
|
86
|
+
"zod",
|
|
87
|
+
"yup",
|
|
88
|
+
"valibot",
|
|
89
|
+
"standard-schema",
|
|
90
|
+
"dynamic-field-kit"
|
|
68
91
|
],
|
|
69
|
-
"homepage": "https://
|
|
92
|
+
"homepage": "https://vannt-dev.github.io/dynamic-field-kit/",
|
|
70
93
|
"bugs": {
|
|
71
94
|
"url": "https://github.com/vannt-dev/dynamic-field-kit/issues"
|
|
72
|
-
},
|
|
73
|
-
"exports": {
|
|
74
|
-
".": {
|
|
75
|
-
"types": "./dist/index.d.ts",
|
|
76
|
-
"default": "./dist/fesm2022/dynamic-field-kit-angular.mjs"
|
|
77
|
-
},
|
|
78
|
-
"./package.json": {
|
|
79
|
-
"default": "./package.json"
|
|
80
|
-
}
|
|
81
95
|
}
|
|
82
96
|
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectorRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
export interface FieldInputProps {
|
|
4
|
-
value?: unknown;
|
|
5
|
-
label?: string;
|
|
6
|
-
placeholder?: string;
|
|
7
|
-
required?: boolean;
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
readOnly?: boolean;
|
|
10
|
-
error?: string | string[];
|
|
11
|
-
options?: unknown[];
|
|
12
|
-
className?: string;
|
|
13
|
-
description?: string;
|
|
14
|
-
}
|
|
15
|
-
export declare abstract class BaseInputComponent implements OnChanges {
|
|
16
|
-
protected cdr: ChangeDetectorRef;
|
|
17
|
-
value?: unknown;
|
|
18
|
-
label?: string;
|
|
19
|
-
placeholder?: string;
|
|
20
|
-
required?: boolean;
|
|
21
|
-
disabled?: boolean;
|
|
22
|
-
readOnly?: boolean;
|
|
23
|
-
error?: string | string[];
|
|
24
|
-
options?: unknown[];
|
|
25
|
-
className?: string;
|
|
26
|
-
description?: string;
|
|
27
|
-
valueChange: EventEmitter<unknown>;
|
|
28
|
-
constructor(cdr: ChangeDetectorRef);
|
|
29
|
-
ngOnChanges(_changes: SimpleChanges): void;
|
|
30
|
-
protected detectChanges(): void;
|
|
31
|
-
protected hasChanges(changes: SimpleChanges, prop: string): boolean;
|
|
32
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<BaseInputComponent, never>;
|
|
33
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<BaseInputComponent, "ng-component", never, { "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "error": { "alias": "error"; "required": false; }; "options": { "alias": "options"; "required": false; }; "className": { "alias": "className"; "required": false; }; "description": { "alias": "description"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
34
|
-
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { FieldDescription, Properties } from '@dynamic-field-kit/core';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
export declare class DynamicFormDevToolsComponent {
|
|
4
|
-
data: Properties;
|
|
5
|
-
errors: Record<string, string[]>;
|
|
6
|
-
touched: Record<string, boolean>;
|
|
7
|
-
isDirty: boolean;
|
|
8
|
-
fields: FieldDescription[];
|
|
9
|
-
/** Number of fields carrying errors, mirroring the react and vue overlays. */
|
|
10
|
-
errorCount(): number;
|
|
11
|
-
isOpen: import("@angular/core").WritableSignal<boolean>;
|
|
12
|
-
activeTab: import("@angular/core").WritableSignal<"data" | "meta" | "errors" | "fields">;
|
|
13
|
-
tabs: Array<'data' | 'errors' | 'meta' | 'fields'>;
|
|
14
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormDevToolsComponent, never>;
|
|
15
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DynamicFormDevToolsComponent, "dfk-dev-tools", never, { "data": { "alias": "data"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "isDirty": { "alias": "isDirty"; "required": false; }; "fields": { "alias": "fields"; "required": false; }; }, {}, never, never, true, never>;
|
|
16
|
-
}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { AfterViewInit, EventEmitter, OnChanges, OnDestroy, SimpleChanges, ViewContainerRef } from '@angular/core';
|
|
2
|
-
import { FieldTypeKey, Properties } from '@dynamic-field-kit/core';
|
|
3
|
-
import { BaseInputComponent } from './BaseInput.js';
|
|
4
|
-
import * as i0 from "@angular/core";
|
|
5
|
-
export declare class DynamicInput extends BaseInputComponent implements OnChanges, AfterViewInit, OnDestroy {
|
|
6
|
-
type: FieldTypeKey;
|
|
7
|
-
extraProps?: Properties;
|
|
8
|
-
valueChange: EventEmitter<unknown>;
|
|
9
|
-
onChange: EventEmitter<unknown>;
|
|
10
|
-
private registry;
|
|
11
|
-
host: ViewContainerRef;
|
|
12
|
-
private compRef?;
|
|
13
|
-
private inputInstance?;
|
|
14
|
-
private subscriptions;
|
|
15
|
-
private supplied;
|
|
16
|
-
ngOnChanges(changes: SimpleChanges): void;
|
|
17
|
-
ngAfterViewInit(): void;
|
|
18
|
-
ngOnDestroy(): void;
|
|
19
|
-
private syncPropsToInstance;
|
|
20
|
-
private cleanup;
|
|
21
|
-
private cleanupSubscriptions;
|
|
22
|
-
private cleanupRenderedComponent;
|
|
23
|
-
private render;
|
|
24
|
-
private isComponentType;
|
|
25
|
-
private renderComponent;
|
|
26
|
-
private renderFallback;
|
|
27
|
-
private getFallbackProps;
|
|
28
|
-
private applyProps;
|
|
29
|
-
private applyExtraProps;
|
|
30
|
-
private bindOutputs;
|
|
31
|
-
private emitValue;
|
|
32
|
-
private renderDefaultFallbackHTML5;
|
|
33
|
-
private renderError;
|
|
34
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<DynamicInput, never>;
|
|
35
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DynamicInput, "dfk-dynamic-input", never, { "type": { "alias": "type"; "required": false; }; "extraProps": { "alias": "extraProps"; "required": false; }; }, { "valueChange": "valueChange"; "onChange": "onChange"; }, never, never, true, never>;
|
|
36
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectorRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
|
|
2
|
-
import { FieldDescription } from '@dynamic-field-kit/core';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
export declare class FieldInput implements OnChanges {
|
|
5
|
-
private cdr;
|
|
6
|
-
fieldDescription?: FieldDescription;
|
|
7
|
-
value?: unknown;
|
|
8
|
-
options?: Record<string, unknown>[];
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
readOnly?: boolean;
|
|
11
|
-
error?: string | string[];
|
|
12
|
-
onValueChangeField: EventEmitter<{
|
|
13
|
-
value: unknown;
|
|
14
|
-
key: string;
|
|
15
|
-
}>;
|
|
16
|
-
/**
|
|
17
|
-
* Emits this field's name when focus leaves it. Driven by `focusout`, which
|
|
18
|
-
* bubbles, so it works for any renderer without the renderer having to
|
|
19
|
-
* declare a blur output of its own.
|
|
20
|
-
*/
|
|
21
|
-
onBlurField: EventEmitter<string>;
|
|
22
|
-
shouldRender: boolean;
|
|
23
|
-
get resolvedOptions(): Record<string, unknown>[] | undefined;
|
|
24
|
-
constructor(cdr: ChangeDetectorRef);
|
|
25
|
-
ngOnChanges(_changes: SimpleChanges): void;
|
|
26
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<FieldInput, never>;
|
|
27
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<FieldInput, "dfk-field-input", never, { "fieldDescription": { "alias": "fieldDescription"; "required": false; }; "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, { "onValueChangeField": "onValueChangeField"; "onBlurField": "onBlurField"; }, never, never, true, never>;
|
|
28
|
-
}
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectorRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
|
2
|
-
import { FieldDescription, Properties } from '@dynamic-field-kit/core';
|
|
3
|
-
import type { ValidationResult } from '@dynamic-field-kit/core';
|
|
4
|
-
import { BaseLayoutConfig, LayoutConfig } from '../types/layout.js';
|
|
5
|
-
import * as i0 from "@angular/core";
|
|
6
|
-
export declare class MultiFieldInput implements OnInit, OnChanges {
|
|
7
|
-
private cdr;
|
|
8
|
-
fieldDescriptions: FieldDescription[];
|
|
9
|
-
properties?: Properties;
|
|
10
|
-
onChange: EventEmitter<Properties>;
|
|
11
|
-
validityChange: EventEmitter<ValidationResult>;
|
|
12
|
-
/**
|
|
13
|
-
* Emits a field's name when it loses focus. Touched state is tracked
|
|
14
|
-
* internally either way; this is the hook for driving an external form store
|
|
15
|
-
* - pass `createDynamicFormStore`'s `handleBlur` to get its `touched` map and
|
|
16
|
-
* `validateOnBlur` behaviour.
|
|
17
|
-
*/
|
|
18
|
-
onBlurField: EventEmitter<string>;
|
|
19
|
-
private touchedFields;
|
|
20
|
-
handleBlurField(fieldName: string): void;
|
|
21
|
-
/** Whether this field has been blurred at least once. */
|
|
22
|
-
isTouched(fieldName: string): boolean;
|
|
23
|
-
layout: LayoutConfig;
|
|
24
|
-
rootData?: Properties;
|
|
25
|
-
data: Properties;
|
|
26
|
-
visibleFields: FieldDescription[];
|
|
27
|
-
private isMobile;
|
|
28
|
-
constructor(cdr: ChangeDetectorRef);
|
|
29
|
-
onWindowResize(): void;
|
|
30
|
-
get resolvedLayout(): BaseLayoutConfig;
|
|
31
|
-
get resolvedLayoutType(): string;
|
|
32
|
-
get gap(): number;
|
|
33
|
-
get columns(): number;
|
|
34
|
-
trackByFn(index: number, field: FieldDescription): string | number;
|
|
35
|
-
trackByIndex(index: number): number;
|
|
36
|
-
private groupTrackByCache;
|
|
37
|
-
groupTrackBy(field: FieldDescription): (index: number, item: Properties) => unknown;
|
|
38
|
-
ngOnInit(): void;
|
|
39
|
-
ngOnChanges(_changes: SimpleChanges): void;
|
|
40
|
-
private updateIsMobile;
|
|
41
|
-
private init;
|
|
42
|
-
private updateVisibleFields;
|
|
43
|
-
onFieldChange(event: {
|
|
44
|
-
value: unknown;
|
|
45
|
-
key: string;
|
|
46
|
-
}): void;
|
|
47
|
-
getItems(field: FieldDescription): Properties[];
|
|
48
|
-
getResolvedOptions(field: FieldDescription): Properties[] | undefined;
|
|
49
|
-
getDisabled(field: FieldDescription): boolean;
|
|
50
|
-
getReadOnly(field: FieldDescription): boolean;
|
|
51
|
-
getError(field: FieldDescription): string[] | undefined;
|
|
52
|
-
canAddItem(field: FieldDescription): boolean;
|
|
53
|
-
canRemoveItem(field: FieldDescription): boolean;
|
|
54
|
-
onGroupItemAdd(field: FieldDescription): void;
|
|
55
|
-
onGroupItemRemove(field: FieldDescription, index: number): void;
|
|
56
|
-
onGroupItemChange(field: FieldDescription, index: number, next: Properties): void;
|
|
57
|
-
private commitData;
|
|
58
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<MultiFieldInput, never>;
|
|
59
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<MultiFieldInput, "dfk-multi-field-input", never, { "fieldDescriptions": { "alias": "fieldDescriptions"; "required": false; }; "properties": { "alias": "properties"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "rootData": { "alias": "rootData"; "required": false; }; }, { "onChange": "onChange"; "validityChange": "validityChange"; "onBlurField": "onBlurField"; }, never, never, true, never>;
|
|
60
|
-
}
|