@ng-forge/dynamic-forms 0.10.0-next.2 → 0.10.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/{ng-forge-dynamic-forms-array-field.component-PPh_uVVh.mjs → ng-forge-dynamic-forms-array-field.component-D6GEsH72.mjs} +3 -3
- package/fesm2022/ng-forge-dynamic-forms-array-field.component-D6GEsH72.mjs.map +1 -0
- package/fesm2022/{ng-forge-dynamic-forms-container-field.component-3dZDF3kh.mjs → ng-forge-dynamic-forms-container-field.component-BluTT44A.mjs} +3 -3
- package/fesm2022/ng-forge-dynamic-forms-container-field.component-BluTT44A.mjs.map +1 -0
- package/fesm2022/{ng-forge-dynamic-forms-container-utils-B7kCznbc.mjs → ng-forge-dynamic-forms-container-utils-diYAWMa_.mjs} +2 -2
- package/fesm2022/ng-forge-dynamic-forms-container-utils-diYAWMa_.mjs.map +1 -0
- package/fesm2022/{ng-forge-dynamic-forms-css-wrapper.component-DtWBauY3.mjs → ng-forge-dynamic-forms-css-wrapper.component-CgMQOaG7.mjs} +2 -2
- package/fesm2022/ng-forge-dynamic-forms-css-wrapper.component-CgMQOaG7.mjs.map +1 -0
- package/fesm2022/{ng-forge-dynamic-forms-emit-initialization-CbY8WZZB.mjs → ng-forge-dynamic-forms-emit-initialization-CB86IMsQ.mjs} +2 -2
- package/fesm2022/ng-forge-dynamic-forms-emit-initialization-CB86IMsQ.mjs.map +1 -0
- package/fesm2022/{ng-forge-dynamic-forms-group-field.component-Dr8Z628-.mjs → ng-forge-dynamic-forms-group-field.component-2bWHql4u.mjs} +3 -3
- package/fesm2022/ng-forge-dynamic-forms-group-field.component-2bWHql4u.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms-integration.mjs.map +1 -1
- package/fesm2022/{ng-forge-dynamic-forms-ng-forge-dynamic-forms-ww_BnAt_.mjs → ng-forge-dynamic-forms-ng-forge-dynamic-forms-CPkVjU_N.mjs} +127 -16
- package/fesm2022/ng-forge-dynamic-forms-ng-forge-dynamic-forms-CPkVjU_N.mjs.map +1 -0
- package/fesm2022/{ng-forge-dynamic-forms-page-field.component-DoGKs3LN.mjs → ng-forge-dynamic-forms-page-field.component-zF-vEv5V.mjs} +3 -3
- package/fesm2022/ng-forge-dynamic-forms-page-field.component-zF-vEv5V.mjs.map +1 -0
- package/fesm2022/{ng-forge-dynamic-forms-row-wrapper.component-CFtnatYj.mjs → ng-forge-dynamic-forms-row-wrapper.component-CwkYn5yl.mjs} +1 -1
- package/fesm2022/ng-forge-dynamic-forms-row-wrapper.component-CwkYn5yl.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms-schema.mjs.map +1 -1
- package/fesm2022/{ng-forge-dynamic-forms-text-field.component-C3TPVvj_.mjs → ng-forge-dynamic-forms-text-field.component-_8_vVeH0.mjs} +2 -2
- package/fesm2022/{ng-forge-dynamic-forms-text-field.component-C3TPVvj_.mjs.map → ng-forge-dynamic-forms-text-field.component-_8_vVeH0.mjs.map} +1 -1
- package/fesm2022/ng-forge-dynamic-forms.mjs +1 -1
- package/package.json +1 -1
- package/types/ng-forge-dynamic-forms-integration.d.ts +27 -462
- package/types/ng-forge-dynamic-forms-schema.d.ts +2 -117
- package/types/ng-forge-dynamic-forms.d.ts +286 -4650
- package/fesm2022/ng-forge-dynamic-forms-array-field.component-PPh_uVVh.mjs.map +0 -1
- package/fesm2022/ng-forge-dynamic-forms-container-field.component-3dZDF3kh.mjs.map +0 -1
- package/fesm2022/ng-forge-dynamic-forms-container-utils-B7kCznbc.mjs.map +0 -1
- package/fesm2022/ng-forge-dynamic-forms-css-wrapper.component-DtWBauY3.mjs.map +0 -1
- package/fesm2022/ng-forge-dynamic-forms-emit-initialization-CbY8WZZB.mjs.map +0 -1
- package/fesm2022/ng-forge-dynamic-forms-group-field.component-Dr8Z628-.mjs.map +0 -1
- package/fesm2022/ng-forge-dynamic-forms-ng-forge-dynamic-forms-ww_BnAt_.mjs.map +0 -1
- package/fesm2022/ng-forge-dynamic-forms-page-field.component-DoGKs3LN.mjs.map +0 -1
- package/fesm2022/ng-forge-dynamic-forms-row-wrapper.component-CFtnatYj.mjs.map +0 -1
|
@@ -8,17 +8,9 @@ import { ComponentFixture } from '@angular/core/testing';
|
|
|
8
8
|
/**
|
|
9
9
|
* Event arguments that can contain static values or tokens to be resolved at runtime.
|
|
10
10
|
* Tokens supported: $key, $index, $arrayKey, $template, formValue
|
|
11
|
-
*
|
|
12
|
-
* Used by the generic button type when manually configuring events.
|
|
13
11
|
*/
|
|
14
12
|
type EventArgs = readonly (string | number | boolean | null | undefined)[];
|
|
15
|
-
/**
|
|
16
|
-
* Base interface for button fields.
|
|
17
|
-
*
|
|
18
|
-
* This is used by the generic 'button' type which requires explicit event configuration.
|
|
19
|
-
* For specific button types (submit, next, previous, array buttons), use the
|
|
20
|
-
* pre-configured types from the UI library instead.
|
|
21
|
-
*/
|
|
13
|
+
/** Base interface for button fields. */
|
|
22
14
|
interface ButtonField<TProps, TEvent extends FormEvent> extends FieldDef<TProps> {
|
|
23
15
|
type: 'button';
|
|
24
16
|
event: FormEventConstructor<TEvent>;
|
|
@@ -30,10 +22,6 @@ interface ButtonField<TProps, TEvent extends FormEvent> extends FieldDef<TProps>
|
|
|
30
22
|
* - $arrayKey: The parent array field key (if inside an array field)
|
|
31
23
|
* - $template: The template for array item creation (for array add buttons)
|
|
32
24
|
* - formValue: Access to the current form value for indexing
|
|
33
|
-
*
|
|
34
|
-
* @example
|
|
35
|
-
* eventArgs: ['$arrayKey', '$index']
|
|
36
|
-
* eventArgs: ['contacts', 0]
|
|
37
25
|
*/
|
|
38
26
|
eventArgs?: EventArgs;
|
|
39
27
|
/** Logic rules for dynamic disabled state (overrides form-level defaults) */
|
|
@@ -81,71 +69,31 @@ type EnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | '
|
|
|
81
69
|
* @see https://html.spec.whatwg.org/multipage/interaction.html#attr-autocapitalize
|
|
82
70
|
*/
|
|
83
71
|
type Autocapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
|
|
84
|
-
/**
|
|
85
|
-
* Meta attributes specific to HTML input elements.
|
|
86
|
-
*
|
|
87
|
-
* Extends FieldMeta with input-specific native attributes that can be passed through
|
|
88
|
-
* to the underlying input element.
|
|
89
|
-
*
|
|
90
|
-
* @example
|
|
91
|
-
* ```typescript
|
|
92
|
-
* // Input field with meta attributes
|
|
93
|
-
* {
|
|
94
|
-
* type: 'input',
|
|
95
|
-
* key: 'email',
|
|
96
|
-
* meta: {
|
|
97
|
-
* autocomplete: 'email',
|
|
98
|
-
* inputmode: 'email',
|
|
99
|
-
* enterkeyhint: 'next',
|
|
100
|
-
* spellcheck: false,
|
|
101
|
-
* 'data-testid': 'email-input'
|
|
102
|
-
* }
|
|
103
|
-
* }
|
|
104
|
-
* ```
|
|
105
|
-
*
|
|
106
|
-
* @public
|
|
107
|
-
*/
|
|
72
|
+
/** Meta attributes specific to HTML input elements. */
|
|
108
73
|
interface InputMeta extends FieldMeta {
|
|
109
|
-
/**
|
|
110
|
-
* Hint for form autofill behavior.
|
|
111
|
-
*/
|
|
74
|
+
/** Hint for form autofill behavior. */
|
|
112
75
|
autocomplete?: AutocompleteValue;
|
|
113
|
-
/**
|
|
114
|
-
* Hint for virtual keyboard type on mobile devices.
|
|
115
|
-
*/
|
|
76
|
+
/** Hint for virtual keyboard type on mobile devices. */
|
|
116
77
|
inputmode?: InputMode;
|
|
117
|
-
/**
|
|
118
|
-
* Hint for the enter key label on virtual keyboards.
|
|
119
|
-
*/
|
|
78
|
+
/** Hint for the enter key label on virtual keyboards. */
|
|
120
79
|
enterkeyhint?: EnterKeyHint;
|
|
121
|
-
/**
|
|
122
|
-
* Whether to enable spellchecking for the input.
|
|
123
|
-
*/
|
|
80
|
+
/** Whether to enable spellchecking for the input. */
|
|
124
81
|
spellcheck?: boolean;
|
|
125
|
-
/**
|
|
126
|
-
* Hint for autocapitalization behavior on virtual keyboards.
|
|
127
|
-
*/
|
|
82
|
+
/** Hint for autocapitalization behavior on virtual keyboards. */
|
|
128
83
|
autocapitalize?: Autocapitalize;
|
|
129
|
-
/**
|
|
130
|
-
* Pattern for client-side validation (regex).
|
|
131
|
-
*/
|
|
84
|
+
/** Pattern for client-side validation (regex). */
|
|
132
85
|
pattern?: string;
|
|
133
|
-
/**
|
|
134
|
-
* Size hint for the input element (character count).
|
|
135
|
-
*/
|
|
86
|
+
/** Size hint for the input element (character count). */
|
|
136
87
|
size?: number;
|
|
137
|
-
/**
|
|
138
|
-
* Maximum number of characters allowed.
|
|
139
|
-
*/
|
|
88
|
+
/** Maximum number of characters allowed. */
|
|
140
89
|
maxlength?: number;
|
|
141
|
-
/**
|
|
142
|
-
* Minimum number of characters required.
|
|
143
|
-
*/
|
|
90
|
+
/** Minimum number of characters required. */
|
|
144
91
|
minlength?: number;
|
|
145
92
|
}
|
|
146
93
|
|
|
147
94
|
/**
|
|
148
95
|
* All valid HTML input types per MDN specification.
|
|
96
|
+
*
|
|
149
97
|
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
|
|
150
98
|
*/
|
|
151
99
|
type HtmlInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color' | 'range' | 'checkbox' | 'radio' | 'file' | 'hidden' | 'button' | 'submit' | 'reset' | 'image';
|
|
@@ -159,14 +107,7 @@ type HtmlInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' |
|
|
|
159
107
|
* - file, hidden, button, etc. → dedicated fields
|
|
160
108
|
*/
|
|
161
109
|
type InputType = Extract<HtmlInputType, 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'>;
|
|
162
|
-
/**
|
|
163
|
-
* Infers the TypeScript value type for a given input type.
|
|
164
|
-
*
|
|
165
|
-
* @example
|
|
166
|
-
* type NumberValue = InferInputValue<'number'>; // number
|
|
167
|
-
* type TextValue = InferInputValue<'text'>; // string
|
|
168
|
-
* type DateValue = InferInputValue<'date'>; // string (extended types)
|
|
169
|
-
*/
|
|
110
|
+
/** Infers the TypeScript value type for a given input type. */
|
|
170
111
|
type InferInputValue<T extends HtmlInputType> = T extends 'number' ? number : string;
|
|
171
112
|
/**
|
|
172
113
|
* @deprecated Use `InferInputValue` instead. Will be removed in v1.0.0.
|
|
@@ -175,14 +116,6 @@ type InputTypeToValueType<T extends InputType> = InferInputValue<T>;
|
|
|
175
116
|
/**
|
|
176
117
|
* Props for input fields with optional type specification.
|
|
177
118
|
* Generic parameter allows extending InputType with additional HtmlInputType values.
|
|
178
|
-
*
|
|
179
|
-
* @example
|
|
180
|
-
* // Default usage
|
|
181
|
-
* interface MyProps extends InputProps { ... }
|
|
182
|
-
*
|
|
183
|
-
* // Extended input types (e.g., supporting date inputs)
|
|
184
|
-
* type ExtendedType = InputType | 'date' | 'time';
|
|
185
|
-
* interface ExtendedProps extends InputProps<ExtendedType> { ... }
|
|
186
119
|
*/
|
|
187
120
|
interface InputProps<T extends HtmlInputType = InputType> {
|
|
188
121
|
/**
|
|
@@ -195,17 +128,9 @@ interface InputProps<T extends HtmlInputType = InputType> {
|
|
|
195
128
|
/**
|
|
196
129
|
* Input types that produce numeric values.
|
|
197
130
|
* Currently only 'number' produces a numeric value in HTML inputs.
|
|
198
|
-
*
|
|
199
|
-
* @example
|
|
200
|
-
* type Numeric = NumericInputType; // 'number'
|
|
201
131
|
*/
|
|
202
132
|
type NumericInputType<T extends HtmlInputType = InputType> = Extract<T, 'number'>;
|
|
203
|
-
/**
|
|
204
|
-
* Input types that produce string values.
|
|
205
|
-
*
|
|
206
|
-
* @example
|
|
207
|
-
* type Strings = StringInputType; // Exclude<InputType, 'number'>
|
|
208
|
-
*/
|
|
133
|
+
/** Input types that produce string values. */
|
|
209
134
|
type StringInputType<T extends HtmlInputType = InputType> = Exclude<T, 'number'>;
|
|
210
135
|
/**
|
|
211
136
|
* Number input field with strict number value type.
|
|
@@ -248,30 +173,6 @@ type BuildInputFieldUnion<TProps extends {
|
|
|
248
173
|
/**
|
|
249
174
|
* Input field with automatic type-safe value inference.
|
|
250
175
|
* TypeScript automatically infers the correct value type based on props.type.
|
|
251
|
-
*
|
|
252
|
-
* @example
|
|
253
|
-
* // Direct usage - automatic strict type safety
|
|
254
|
-
* const numberField: InputField = {
|
|
255
|
-
* type: 'input',
|
|
256
|
-
* key: 'age',
|
|
257
|
-
* props: { type: 'number' },
|
|
258
|
-
* value: 25 // ✓ number only (string is type error!)
|
|
259
|
-
* };
|
|
260
|
-
*
|
|
261
|
-
* const textField: InputField = {
|
|
262
|
-
* type: 'input',
|
|
263
|
-
* key: 'name',
|
|
264
|
-
* props: { type: 'text' },
|
|
265
|
-
* value: 'hello' // ✓ string only (number is type error!)
|
|
266
|
-
* };
|
|
267
|
-
*
|
|
268
|
-
* @example
|
|
269
|
-
* // Framework usage - extend with custom props
|
|
270
|
-
* interface MatInputProps extends InputProps {
|
|
271
|
-
* appearance?: 'fill' | 'outline';
|
|
272
|
-
* hint?: string;
|
|
273
|
-
* }
|
|
274
|
-
* type MatInputField = InputField<MatInputProps>; // Automatically gets discriminated union
|
|
275
176
|
*/
|
|
276
177
|
type InputField<TProps extends {
|
|
277
178
|
type?: string;
|
|
@@ -280,18 +181,6 @@ type InputField<TProps extends {
|
|
|
280
181
|
/**
|
|
281
182
|
* Multi-checkbox field for selecting multiple values from a list of options.
|
|
282
183
|
* The value is an array of selected option values.
|
|
283
|
-
*
|
|
284
|
-
* @example
|
|
285
|
-
* const tagsField: MultiCheckboxField<string> = {
|
|
286
|
-
* type: 'multi-checkbox',
|
|
287
|
-
* key: 'tags',
|
|
288
|
-
* value: ['tag1', 'tag2'], // Array of selected values
|
|
289
|
-
* options: [
|
|
290
|
-
* { label: 'Tag 1', value: 'tag1' },
|
|
291
|
-
* { label: 'Tag 2', value: 'tag2' },
|
|
292
|
-
* { label: 'Tag 3', value: 'tag3' }
|
|
293
|
-
* ]
|
|
294
|
-
* };
|
|
295
184
|
*/
|
|
296
185
|
interface MultiCheckboxField<TValue, TProps = object, TNullable extends boolean = boolean> extends BaseValueField<TProps, TValue[], FieldMeta, TNullable> {
|
|
297
186
|
type: 'multi-checkbox';
|
|
@@ -326,29 +215,7 @@ interface SliderField<TProps, TNullable extends boolean = boolean> extends BaseV
|
|
|
326
215
|
* @see https://html.spec.whatwg.org/multipage/form-elements.html#attr-textarea-wrap
|
|
327
216
|
*/
|
|
328
217
|
type TextareaWrap = 'hard' | 'soft' | 'off';
|
|
329
|
-
/**
|
|
330
|
-
* Meta attributes specific to HTML textarea elements.
|
|
331
|
-
*
|
|
332
|
-
* Extends FieldMeta with textarea-specific native attributes that can be passed through
|
|
333
|
-
* to the underlying textarea element.
|
|
334
|
-
*
|
|
335
|
-
* @example
|
|
336
|
-
* ```typescript
|
|
337
|
-
* // Textarea field with meta attributes
|
|
338
|
-
* {
|
|
339
|
-
* type: 'textarea',
|
|
340
|
-
* key: 'description',
|
|
341
|
-
* meta: {
|
|
342
|
-
* wrap: 'soft',
|
|
343
|
-
* spellcheck: true,
|
|
344
|
-
* autocomplete: 'off',
|
|
345
|
-
* 'data-testid': 'description-textarea'
|
|
346
|
-
* }
|
|
347
|
-
* }
|
|
348
|
-
* ```
|
|
349
|
-
*
|
|
350
|
-
* @public
|
|
351
|
-
*/
|
|
218
|
+
/** Meta attributes specific to HTML textarea elements. */
|
|
352
219
|
interface TextareaMeta extends FieldMeta {
|
|
353
220
|
/**
|
|
354
221
|
* How text should wrap when submitted.
|
|
@@ -357,29 +224,17 @@ interface TextareaMeta extends FieldMeta {
|
|
|
357
224
|
* - 'off': No wrapping, horizontal scrolling if needed
|
|
358
225
|
*/
|
|
359
226
|
wrap?: TextareaWrap;
|
|
360
|
-
/**
|
|
361
|
-
* Whether to enable spellchecking for the textarea.
|
|
362
|
-
*/
|
|
227
|
+
/** Whether to enable spellchecking for the textarea. */
|
|
363
228
|
spellcheck?: boolean;
|
|
364
|
-
/**
|
|
365
|
-
* Hint for form autofill behavior.
|
|
366
|
-
*/
|
|
229
|
+
/** Hint for form autofill behavior. */
|
|
367
230
|
autocomplete?: AutocompleteValue;
|
|
368
|
-
/**
|
|
369
|
-
* Hint for autocapitalization behavior on virtual keyboards.
|
|
370
|
-
*/
|
|
231
|
+
/** Hint for autocapitalization behavior on virtual keyboards. */
|
|
371
232
|
autocapitalize?: Autocapitalize;
|
|
372
|
-
/**
|
|
373
|
-
* Hint for the enter key label on virtual keyboards.
|
|
374
|
-
*/
|
|
233
|
+
/** Hint for the enter key label on virtual keyboards. */
|
|
375
234
|
enterkeyhint?: EnterKeyHint;
|
|
376
|
-
/**
|
|
377
|
-
* Maximum number of characters allowed.
|
|
378
|
-
*/
|
|
235
|
+
/** Maximum number of characters allowed. */
|
|
379
236
|
maxlength?: number;
|
|
380
|
-
/**
|
|
381
|
-
* Minimum number of characters required.
|
|
382
|
-
*/
|
|
237
|
+
/** Minimum number of characters required. */
|
|
383
238
|
minlength?: number;
|
|
384
239
|
}
|
|
385
240
|
|
|
@@ -399,10 +254,6 @@ interface ToggleField<TProps, TNullable extends boolean = boolean> extends BaseC
|
|
|
399
254
|
/**
|
|
400
255
|
* Context for value field mapping, containing the injected context reference.
|
|
401
256
|
* Used by specialized mappers to avoid duplicate injection.
|
|
402
|
-
*
|
|
403
|
-
* Note: The field tree is resolved lazily via getFieldTree() to support
|
|
404
|
-
* reactive form access (e.g., for array items where the form structure
|
|
405
|
-
* may not exist at injection time but becomes available later).
|
|
406
257
|
*/
|
|
407
258
|
interface ValueFieldContext {
|
|
408
259
|
/**
|
|
@@ -416,14 +267,6 @@ interface ValueFieldContext {
|
|
|
416
267
|
* Creates a value field context from the injected FIELD_SIGNAL_CONTEXT.
|
|
417
268
|
* Must be called within an injection context.
|
|
418
269
|
*
|
|
419
|
-
* With direct root form binding for array items, the FIELD_SIGNAL_CONTEXT.form
|
|
420
|
-
* uses a getter that evaluates reactively. This means:
|
|
421
|
-
* - For regular fields: direct access to the form's FieldTree
|
|
422
|
-
* - For array items: the getter resolves rootForm['arrayKey'][index] dynamically
|
|
423
|
-
*
|
|
424
|
-
* The returned context provides a getFieldTree function that should be called
|
|
425
|
-
* inside a computed to establish proper reactive dependencies.
|
|
426
|
-
*
|
|
427
270
|
* @returns The value field context with reactive field tree accessor
|
|
428
271
|
*/
|
|
429
272
|
declare function resolveValueFieldContext(): ValueFieldContext;
|
|
@@ -431,9 +274,6 @@ declare function resolveValueFieldContext(): ValueFieldContext;
|
|
|
431
274
|
* Builds the base inputs for a value field.
|
|
432
275
|
* This is a helper function used by valueFieldMapper and specialized mappers.
|
|
433
276
|
*
|
|
434
|
-
* Note: This function should be called inside a computed signal to ensure
|
|
435
|
-
* proper reactive dependency tracking for the field tree resolution.
|
|
436
|
-
*
|
|
437
277
|
* @param fieldDef The value field definition
|
|
438
278
|
* @param ctx The resolved value field context
|
|
439
279
|
* @param defaultProps Default props from the form configuration (may be undefined if not configured)
|
|
@@ -443,20 +283,6 @@ declare function buildValueFieldInputs<TProps, TValue = unknown>(fieldDef: BaseV
|
|
|
443
283
|
/**
|
|
444
284
|
* Maps a value field definition to component inputs.
|
|
445
285
|
*
|
|
446
|
-
* Value fields are input fields that contribute to the form's value (text, number, etc.).
|
|
447
|
-
* This mapper injects FIELD_SIGNAL_CONTEXT to access the form structure and retrieve the field proxy.
|
|
448
|
-
*
|
|
449
|
-
* For array items, the FIELD_SIGNAL_CONTEXT.form uses a reactive getter that resolves
|
|
450
|
-
* rootForm['arrayKey'][index] dynamically. This means:
|
|
451
|
-
* - Zod/StandardSchema validation errors are automatically available
|
|
452
|
-
* - The field tree updates reactively when the root form structure changes
|
|
453
|
-
* - Newly added array items will get their field tree once the form value updates
|
|
454
|
-
*
|
|
455
|
-
* For fields with specific properties, use the specialized mappers:
|
|
456
|
-
* - optionsFieldMapper: for fields with options (select, radio, multi-checkbox)
|
|
457
|
-
* - datepickerFieldMapper: for fields with minDate, maxDate, startAt
|
|
458
|
-
* - checkboxFieldMapper: for boolean fields (checkbox, toggle)
|
|
459
|
-
*
|
|
460
286
|
* @param fieldDef The value field definition
|
|
461
287
|
* @returns Signal containing Record of input names to values for ngComponentOutlet
|
|
462
288
|
*/
|
|
@@ -465,9 +291,6 @@ declare function valueFieldMapper<TProps = unknown, TValue = unknown>(fieldDef:
|
|
|
465
291
|
/**
|
|
466
292
|
* Maps a checkbox/toggle field definition to component inputs.
|
|
467
293
|
*
|
|
468
|
-
* Checkbox fields are checked fields that contribute to the form's value as boolean.
|
|
469
|
-
* This mapper injects FIELD_SIGNAL_CONTEXT to access the form structure and retrieve the field tree.
|
|
470
|
-
*
|
|
471
294
|
* @param fieldDef The checkbox field definition
|
|
472
295
|
* @returns Signal containing Record of input names to values for ngComponentOutlet
|
|
473
296
|
*/
|
|
@@ -476,28 +299,16 @@ declare function checkboxFieldMapper(fieldDef: BaseCheckedField<unknown, FieldMe
|
|
|
476
299
|
/**
|
|
477
300
|
* Maps a datepicker field to component inputs.
|
|
478
301
|
*
|
|
479
|
-
* Extends the base value field mapper by adding datepicker-specific properties:
|
|
480
|
-
* - minDate: Minimum selectable date
|
|
481
|
-
* - maxDate: Maximum selectable date
|
|
482
|
-
* - startAt: Initial date to display when opening the picker
|
|
483
|
-
*
|
|
484
|
-
* Date values are automatically converted from strings to Date objects
|
|
485
|
-
* since UI libraries (Material, PrimeNG, etc.) expect Date objects.
|
|
486
|
-
*
|
|
487
302
|
* @param fieldDef The datepicker field definition
|
|
488
303
|
* @returns Signal containing Record of input names to values for ngComponentOutlet
|
|
489
304
|
*/
|
|
490
305
|
declare function datepickerFieldMapper<TProps>(fieldDef: DatepickerField<TProps>): Signal<Record<string, unknown>>;
|
|
491
306
|
|
|
492
|
-
/**
|
|
493
|
-
* Field types that have an options property.
|
|
494
|
-
*/
|
|
307
|
+
/** Field types that have an options property. */
|
|
495
308
|
type FieldWithOptions<T = unknown, TProps = unknown> = SelectField<T, TProps> | RadioField<T, TProps> | MultiCheckboxField<T, TProps>;
|
|
496
309
|
/**
|
|
497
310
|
* Maps a field with options (select, radio, multi-checkbox) to component inputs.
|
|
498
311
|
*
|
|
499
|
-
* Extends the base value field mapper by adding the options property.
|
|
500
|
-
*
|
|
501
312
|
* @param fieldDef The field definition with options
|
|
502
313
|
* @returns Signal containing Record of input names to values for ngComponentOutlet
|
|
503
314
|
*/
|
|
@@ -506,17 +317,6 @@ declare function optionsFieldMapper<T, TProps>(fieldDef: FieldWithOptions<T, TPr
|
|
|
506
317
|
/**
|
|
507
318
|
* Maps a button field to component inputs.
|
|
508
319
|
*
|
|
509
|
-
* Unlike value field mappers, button fields do not participate in form values
|
|
510
|
-
* and do not need field tree resolution or validation messages.
|
|
511
|
-
*
|
|
512
|
-
* Button-specific properties:
|
|
513
|
-
* - event: The FormEvent constructor to emit when clicked
|
|
514
|
-
* - eventArgs: Optional arguments to pass to the event constructor
|
|
515
|
-
*
|
|
516
|
-
* Hidden and disabled states are resolved using non-field logic resolvers which consider:
|
|
517
|
-
* 1. Explicit `hidden: true` / `disabled: true` on the field definition
|
|
518
|
-
* 2. Field-level `logic` array with `type: 'hidden'` or `type: 'disabled'` conditions
|
|
519
|
-
*
|
|
520
320
|
* @param fieldDef The button field definition
|
|
521
321
|
* @returns Signal containing Record of input names to values for ngComponentOutlet
|
|
522
322
|
*/
|
|
@@ -536,9 +336,7 @@ interface ArrayButtonContext {
|
|
|
536
336
|
/** Whether this button is inside an array context */
|
|
537
337
|
isInsideArray: boolean;
|
|
538
338
|
}
|
|
539
|
-
/**
|
|
540
|
-
* Event context passed to button components for array operations.
|
|
541
|
-
*/
|
|
339
|
+
/** Event context passed to button components for array operations. */
|
|
542
340
|
interface ArrayButtonEventContext {
|
|
543
341
|
/** The button field key */
|
|
544
342
|
key: string;
|
|
@@ -557,11 +355,6 @@ interface ArrayButtonEventContext {
|
|
|
557
355
|
/**
|
|
558
356
|
* Resolves array button context for button mappers.
|
|
559
357
|
*
|
|
560
|
-
* Handles both inside-array (context from ARRAY_CONTEXT) and
|
|
561
|
-
* outside-array (explicit arrayKey) placements.
|
|
562
|
-
*
|
|
563
|
-
* Must be called in injection context.
|
|
564
|
-
*
|
|
565
358
|
* @param fieldKey The button field key (for logging)
|
|
566
359
|
* @param buttonType The button type name (for logging)
|
|
567
360
|
* @param explicitArrayKey Optional explicit arrayKey from field definition
|
|
@@ -571,8 +364,6 @@ declare function resolveArrayButtonContext(fieldKey: string, buttonType: string,
|
|
|
571
364
|
/**
|
|
572
365
|
* Builds the event context passed to the button component.
|
|
573
366
|
*
|
|
574
|
-
* Should be called inside a computed to track index signal changes.
|
|
575
|
-
*
|
|
576
367
|
* @param fieldKey The button field key
|
|
577
368
|
* @param ctx The resolved array button context
|
|
578
369
|
* @param template Optional template for add operations (single field or array of fields)
|
|
@@ -670,9 +461,7 @@ declare function popArrayItemButtonMapper<TProps>(fieldDef: BaseArrayRemoveButto
|
|
|
670
461
|
/** Mapper for shift array item button — removes the first item from array. */
|
|
671
462
|
declare function shiftArrayItemButtonMapper<TProps>(fieldDef: BaseArrayRemoveButtonField<TProps>): Signal<Record<string, unknown>>;
|
|
672
463
|
|
|
673
|
-
/**
|
|
674
|
-
* Base interface for navigation button fields (submit, next, previous).
|
|
675
|
-
*/
|
|
464
|
+
/** Base interface for navigation button fields (submit, next, previous). */
|
|
676
465
|
type BaseNavigationButtonField<TProps = unknown> = ButtonField<TProps, SubmitEvent | NextPageEvent | PreviousPageEvent> & {
|
|
677
466
|
type: string;
|
|
678
467
|
/** Logic rules for dynamic disabled state */
|
|
@@ -688,9 +477,7 @@ declare function nextButtonFieldMapper<TProps>(fieldDef: BaseNavigationButtonFie
|
|
|
688
477
|
/** Mapper for previous page button — preconfigures PreviousPageEvent. */
|
|
689
478
|
declare function previousButtonFieldMapper<TProps>(fieldDef: BaseNavigationButtonField<TProps>): Signal<Record<string, unknown>>;
|
|
690
479
|
|
|
691
|
-
/**
|
|
692
|
-
* Resolved validation error with interpolated message
|
|
693
|
-
*/
|
|
480
|
+
/** Resolved validation error with interpolated message */
|
|
694
481
|
interface ResolvedError {
|
|
695
482
|
kind: string;
|
|
696
483
|
message: string;
|
|
@@ -704,15 +491,6 @@ interface ResolvedError {
|
|
|
704
491
|
* @param defaultValidationMessages - Signal containing default validation messages (fallback)
|
|
705
492
|
* @param injector - Optional injector for DynamicText resolution
|
|
706
493
|
* @returns Signal<ResolvedError[]> - Reactively resolved error messages
|
|
707
|
-
*
|
|
708
|
-
* @example
|
|
709
|
-
* ```typescript
|
|
710
|
-
* readonly resolvedErrors = createResolvedErrorsSignal(
|
|
711
|
-
* this.field,
|
|
712
|
-
* this.validationMessages,
|
|
713
|
-
* this.defaultValidationMessages
|
|
714
|
-
* );
|
|
715
|
-
* ```
|
|
716
494
|
*/
|
|
717
495
|
declare function createResolvedErrorsSignal<T>(field: Signal<FieldTree<T>>, validationMessages: Signal<ValidationMessages | undefined>, defaultValidationMessages?: Signal<ValidationMessages | undefined>, injector?: Injector): Signal<ResolvedError[]>;
|
|
718
496
|
|
|
@@ -725,68 +503,25 @@ declare function createResolvedErrorsSignal<T>(field: Signal<FieldTree<T>>, vali
|
|
|
725
503
|
*/
|
|
726
504
|
declare function shouldShowErrors<T>(field: Signal<FieldTree<T>>): Signal<boolean>;
|
|
727
505
|
|
|
728
|
-
/**
|
|
729
|
-
* Configuration options for setupMetaTracking.
|
|
730
|
-
*/
|
|
506
|
+
/** Configuration options for setupMetaTracking. */
|
|
731
507
|
interface MetaTrackingOptions {
|
|
732
508
|
/**
|
|
733
509
|
* CSS selector for target elements within the host.
|
|
734
510
|
* If not provided, meta attributes are applied directly to the host element.
|
|
735
|
-
*
|
|
736
|
-
* @example
|
|
737
|
-
* // Apply to internal radio inputs
|
|
738
|
-
* selector: 'input[type="radio"]'
|
|
739
|
-
*
|
|
740
|
-
* // Apply to host element (for Shadow DOM components)
|
|
741
|
-
* selector: undefined
|
|
742
511
|
*/
|
|
743
512
|
selector?: string;
|
|
744
513
|
/**
|
|
745
514
|
* Additional signals to track that should trigger re-application of meta.
|
|
746
515
|
* Useful for components where DOM elements are dynamically created (e.g., radio options).
|
|
747
|
-
*
|
|
748
|
-
* @example
|
|
749
|
-
* // Re-apply when options change
|
|
750
|
-
* dependents: [this.options]
|
|
751
516
|
*/
|
|
752
517
|
dependents?: Signal<unknown>[];
|
|
753
518
|
}
|
|
754
519
|
/**
|
|
755
520
|
* Sets up automatic meta attribute tracking and application for wrapped components.
|
|
756
521
|
*
|
|
757
|
-
* This utility creates an `afterRenderEffect` that applies meta attributes to DOM elements
|
|
758
|
-
* after Angular's render cycle. It efficiently tracks signal dependencies and only re-applies
|
|
759
|
-
* when the meta signal or any dependent signals change.
|
|
760
|
-
*
|
|
761
|
-
* Use this instead of MutationObserver for better performance and integration with Angular's
|
|
762
|
-
* change detection.
|
|
763
|
-
*
|
|
764
522
|
* @param elementRef - Reference to the host element
|
|
765
523
|
* @param meta - Signal containing meta attributes to apply
|
|
766
524
|
* @param options - Configuration options
|
|
767
|
-
*
|
|
768
|
-
* @example
|
|
769
|
-
* ```typescript
|
|
770
|
-
* // For a radio group with dynamic options
|
|
771
|
-
* constructor() {
|
|
772
|
-
* setupMetaTracking(inject(ElementRef), this.meta, {
|
|
773
|
-
* selector: 'input[type="radio"]',
|
|
774
|
-
* dependents: [this.options]
|
|
775
|
-
* });
|
|
776
|
-
* }
|
|
777
|
-
*
|
|
778
|
-
* // For a simple checkbox
|
|
779
|
-
* constructor() {
|
|
780
|
-
* setupMetaTracking(inject(ElementRef), this.meta, {
|
|
781
|
-
* selector: 'input[type="checkbox"]'
|
|
782
|
-
* });
|
|
783
|
-
* }
|
|
784
|
-
*
|
|
785
|
-
* // For Shadow DOM components (apply to host)
|
|
786
|
-
* constructor() {
|
|
787
|
-
* setupMetaTracking(inject(ElementRef), this.meta);
|
|
788
|
-
* }
|
|
789
|
-
* ```
|
|
790
525
|
*/
|
|
791
526
|
declare function setupMetaTracking(elementRef: ElementRef<HTMLElement>, meta: Signal<FieldMeta | undefined>, options?: MetaTrackingOptions): void;
|
|
792
527
|
|
|
@@ -808,16 +543,6 @@ declare function createAriaDescribedBySignal(errorsToDisplay: Signal<ResolvedErr
|
|
|
808
543
|
* Owns the universal identity inputs (`key`, `className`) and the host
|
|
809
544
|
* bindings that every field shape — value-bearing, action, future container —
|
|
810
545
|
* shares: `[id]`, `[attr.data-testid]`, `[class]`.
|
|
811
|
-
*
|
|
812
|
-
* Shape-specific add-ons (`NgForgeField` for value fields, `NgForgeAction`
|
|
813
|
-
* for actions) inject this directive and read `key()` / `className()` from
|
|
814
|
-
* it. Source-of-truth concerns like `hidden` / `disabled` live on the add-on
|
|
815
|
-
* because they vary by shape (value fields derive from `field()()`; actions
|
|
816
|
-
* receive direct inputs).
|
|
817
|
-
*
|
|
818
|
-
* Selectorless — usage is exclusively via `hostDirectives`. Prefer the
|
|
819
|
-
* `NG_FORGE_FIELD` / `NG_FORGE_ACTION` presets rather than composing Shell
|
|
820
|
-
* directly.
|
|
821
546
|
*/
|
|
822
547
|
declare class NgForgeFieldShell {
|
|
823
548
|
readonly key: i0.InputSignal<string>;
|
|
@@ -833,21 +558,6 @@ declare const NG_FORGE_FIELD_SHELL_INPUTS: readonly ["key", "className"];
|
|
|
833
558
|
* the `NG_FORGE_FIELD` preset. Owns the value/validation/aria plumbing every
|
|
834
559
|
* value-bearing field needs.
|
|
835
560
|
*
|
|
836
|
-
* The Shell owns universal identity (`key`, `className`, `[id]`,
|
|
837
|
-
* `[attr.data-testid]`, `[class]`); this directive injects Shell and adds
|
|
838
|
-
* field-driven bindings (`[attr.hidden]`, `[attr.aria-disabled]`), the
|
|
839
|
-
* standard value-field inputs (`field`, `label`, `placeholder`, `tabIndex`,
|
|
840
|
-
* `props`, `meta`, `validationMessages`), the derived error/aria signals,
|
|
841
|
-
* and the meta-tracking claim contract.
|
|
842
|
-
*
|
|
843
|
-
* @example
|
|
844
|
-
* ```ts
|
|
845
|
-
* \@Component({
|
|
846
|
-
* hostDirectives: NG_FORGE_FIELD,
|
|
847
|
-
* imports: [NgForgeControl, FormField],
|
|
848
|
-
* template: `
|
|
849
|
-
* <label [for]="ngf.key() + '-input'">{{ ngf.label() | dynamicText | async }}</label>
|
|
850
|
-
* <input ngForgeControl [id]="ngf.key() + '-input'" [formField]="ngf.field()" />
|
|
851
561
|
* @if (ngf.errorsToDisplay()[0]; as e) {
|
|
852
562
|
* <span [id]="ngf.errorId()">{{ e.message }}</span>
|
|
853
563
|
* }
|
|
@@ -912,12 +622,6 @@ type TypedNgForgeField<T> = Omit<NgForgeField, 'field'> & {
|
|
|
912
622
|
* `field` signal to `Signal<FieldTree<T>>` for the calling component's value
|
|
913
623
|
* type. The cast is unchecked — the runtime contract is that mappers only
|
|
914
624
|
* forward a `field` whose value type matches the field-type definition.
|
|
915
|
-
*
|
|
916
|
-
* @example
|
|
917
|
-
* ```ts
|
|
918
|
-
* protected readonly ngf = injectNgForgeField<string>();
|
|
919
|
-
* // ngf.field() is Signal<FieldTree<string>>; ngf.errors() etc. unchanged
|
|
920
|
-
* ```
|
|
921
625
|
*/
|
|
922
626
|
declare function injectNgForgeField<T = unknown>(): TypedNgForgeField<T>;
|
|
923
627
|
|
|
@@ -927,24 +631,6 @@ declare function injectNgForgeField<T = unknown>(): TypedNgForgeField<T>;
|
|
|
927
631
|
* action component needs (label, disabled, event, eventArgs, …) plus the
|
|
928
632
|
* `[attr.hidden]` / `[attr.aria-disabled]` host bindings driven by its own
|
|
929
633
|
* inputs (no field tree).
|
|
930
|
-
*
|
|
931
|
-
* Components call `action.dispatch()` from their click handler; this
|
|
932
|
-
* directive resolves any `eventArgs` tokens via the optional `ARRAY_CONTEXT`
|
|
933
|
-
* and dispatches the configured `event` through the `EventBus`.
|
|
934
|
-
*
|
|
935
|
-
* @example
|
|
936
|
-
* ```ts
|
|
937
|
-
* \@Component({
|
|
938
|
-
* hostDirectives: NG_FORGE_ACTION,
|
|
939
|
-
* template: `<button (click)="action.dispatch()" [disabled]="action.disabled()">{{ action.label() }}</button>`,
|
|
940
|
-
* })
|
|
941
|
-
* export class MyButton {
|
|
942
|
-
* protected readonly action = inject(NgForgeAction);
|
|
943
|
-
* }
|
|
944
|
-
* ```
|
|
945
|
-
*
|
|
946
|
-
* Selectorless — usage is exclusively via `hostDirectives`. Prefer the
|
|
947
|
-
* `NG_FORGE_ACTION` preset over composing this directive manually.
|
|
948
634
|
*/
|
|
949
635
|
declare class NgForgeAction<TEvent extends FormEvent = FormEvent> {
|
|
950
636
|
private readonly shell;
|
|
@@ -981,11 +667,6 @@ declare const NG_FORGE_ACTION_INPUTS: readonly ["label", "disabled", "hidden", "
|
|
|
981
667
|
/**
|
|
982
668
|
* Typed wrapper around `inject(NgForgeAction)`. The generic narrows the
|
|
983
669
|
* `event` input to a specific FormEvent subclass.
|
|
984
|
-
*
|
|
985
|
-
* @example
|
|
986
|
-
* ```ts
|
|
987
|
-
* protected readonly action = injectNgForgeAction<SubmitEvent>();
|
|
988
|
-
* ```
|
|
989
670
|
*/
|
|
990
671
|
declare function injectNgForgeAction<TEvent extends FormEvent = FormEvent>(): NgForgeAction<TEvent>;
|
|
991
672
|
|
|
@@ -1030,10 +711,6 @@ declare const NG_FORGE_ADDONS_INPUTS: readonly ["addons"];
|
|
|
1030
711
|
/**
|
|
1031
712
|
* Host wrapper for `NgForgeAddonsBase`. Consumers compose this directly:
|
|
1032
713
|
*
|
|
1033
|
-
* ```ts
|
|
1034
|
-
* \@Component({
|
|
1035
|
-
* hostDirectives: [NgForgeFieldHost, NgForgeAddons],
|
|
1036
|
-
* template: `
|
|
1037
714
|
* @if (ngfa.hasAddons()) {
|
|
1038
715
|
* <p-inputgroup>
|
|
1039
716
|
* @for (a of ngfa.prefixAddons(); track $index) {
|
|
@@ -1087,11 +764,6 @@ interface ActionAddonShape extends BaseAddon {
|
|
|
1087
764
|
* labelled buttons, etc.): `disabled` / `loading` resolution from
|
|
1088
765
|
* `DynamicValue<boolean>`, action context construction, and the
|
|
1089
766
|
* `preset / actionRef / action` precedence dispatcher.
|
|
1090
|
-
*
|
|
1091
|
-
* Adapter button kinds (e.g., `prime-button`) compose `NgForgeAddonAction`
|
|
1092
|
-
* and read state via `injectNgForgeAddonAction<TAddon>()`. Preset semantics
|
|
1093
|
-
* are adapter-specific — register an `ADDON_PRESET_HANDLER` at the host
|
|
1094
|
-
* field scope to receive preset dispatches.
|
|
1095
767
|
*/
|
|
1096
768
|
declare class NgForgeAddonActionBase {
|
|
1097
769
|
private readonly actionRegistry;
|
|
@@ -1128,22 +800,6 @@ declare class NgForgeAddonActionBase {
|
|
|
1128
800
|
* Build an `AddonActionContext` for handlers from the wrapper-style
|
|
1129
801
|
* `fieldInputs` bag. Returns the field-bound variant when a host field
|
|
1130
802
|
* is reachable, or the orphan variant otherwise.
|
|
1131
|
-
*
|
|
1132
|
-
* Resolution order for `setValue`:
|
|
1133
|
-
* 1. `inputs.setValue` from the forwarded bag (preferred — populated by
|
|
1134
|
-
* `buildFieldInputs` in `DfFieldOutlet`).
|
|
1135
|
-
* 2. Fallback reconstructed from `inputs.field` itself: although
|
|
1136
|
-
* `ReadonlyFieldTree.value` is type-narrowed to `Signal<T>`, the
|
|
1137
|
-
* underlying runtime object is the same `WritableSignal<T>` created
|
|
1138
|
-
* by Signal Forms (the read-only wrapping is type-level only, see
|
|
1139
|
-
* `toReadonlyFieldTree`). Casting back at the writer boundary
|
|
1140
|
-
* produces a working setValue for ANY field depth — top-level OR
|
|
1141
|
-
* nested under groups. This avoids the previous FSC-key navigation
|
|
1142
|
-
* that broke for grouped fields, where `inputs.key` is DOM-mangled
|
|
1143
|
-
* (`'user_address_street'`) and `fsc.form[key]` returns undefined.
|
|
1144
|
-
*
|
|
1145
|
-
* The orphan variant fires only when the bag carries no field tree at
|
|
1146
|
-
* all — genuine "rendered outside a field" scenario.
|
|
1147
803
|
*/
|
|
1148
804
|
buildActionContext(): AddonActionContext;
|
|
1149
805
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgForgeAddonActionBase, never>;
|
|
@@ -1151,22 +807,7 @@ declare class NgForgeAddonActionBase {
|
|
|
1151
807
|
}
|
|
1152
808
|
/** Forwarded onto `NgForgeAddonActionBase` via the `NgForgeAddonAction` wrapper. */
|
|
1153
809
|
declare const NG_FORGE_ADDON_ACTION_INPUTS: readonly ["addon", "fieldInputs"];
|
|
1154
|
-
/**
|
|
1155
|
-
* Host wrapper for `NgForgeAddonActionBase`. Consumers compose this directly:
|
|
1156
|
-
*
|
|
1157
|
-
* ```ts
|
|
1158
|
-
* \@Component({
|
|
1159
|
-
* hostDirectives: [NgForgeAddonAction],
|
|
1160
|
-
* template: `
|
|
1161
|
-
* <p-button [loading]="action.loading()" [disabled]="action.disabled()"
|
|
1162
|
-
* (onClick)="action.dispatch()" />
|
|
1163
|
-
* `,
|
|
1164
|
-
* })
|
|
1165
|
-
* export class MyButtonAddon {
|
|
1166
|
-
* protected readonly action = injectNgForgeAddonAction<MyButtonAddon>();
|
|
1167
|
-
* }
|
|
1168
|
-
* ```
|
|
1169
|
-
*/
|
|
810
|
+
/** Host wrapper for `NgForgeAddonActionBase`. Consumers compose this directly: */
|
|
1170
811
|
declare class NgForgeAddonAction {
|
|
1171
812
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgForgeAddonAction, never>;
|
|
1172
813
|
static ɵdir: i0.ɵɵDirectiveDeclaration<NgForgeAddonAction, never, never, {}, {}, never, never, true, [{ directive: typeof NgForgeAddonActionBase; inputs: { "addon": "addon"; "fieldInputs": "fieldInputs"; }; outputs: {}; }]>;
|
|
@@ -1183,10 +824,6 @@ declare function injectNgForgeAddonAction<TAddon extends ActionAddonShape = Acti
|
|
|
1183
824
|
* (`NgForgeAddonAction`) delegates to this when an addon configures a
|
|
1184
825
|
* `preset`; the adapter wires concrete preset semantics in its own
|
|
1185
826
|
* provider scope.
|
|
1186
|
-
*
|
|
1187
|
-
* `NgForgeAddonAction` injects this with `{ optional: true }`. Addons that
|
|
1188
|
-
* configure a preset on an adapter that hasn't registered a handler get a
|
|
1189
|
-
* lenient warning at click time.
|
|
1190
827
|
*/
|
|
1191
828
|
interface AddonPresetHandler {
|
|
1192
829
|
run(preset: string, ctx: AddonActionContext): void | Promise<void>;
|
|
@@ -1199,26 +836,6 @@ declare const ADDON_PRESET_HANDLER: InjectionToken<AddonPresetHandler>;
|
|
|
1199
836
|
* parent-derived aria signals (`aria-invalid`, `aria-required`,
|
|
1200
837
|
* `aria-describedby`) onto a target element.
|
|
1201
838
|
*
|
|
1202
|
-
* By default attributes land on the directive's own host. For wrapped
|
|
1203
|
-
* controls (e.g. `<mat-checkbox>`, `<p-toggleSwitch>`) where the canonical
|
|
1204
|
-
* native input is rendered as a descendant inside the wrapper, pass a CSS
|
|
1205
|
-
* selector through the input alias — the directive caches the resolved
|
|
1206
|
-
* descendant set and re-resolves only when the selector changes.
|
|
1207
|
-
*
|
|
1208
|
-
* @example Bare native control
|
|
1209
|
-
* ```html
|
|
1210
|
-
* <input ngForgeControl [formField]="ngf.field()" />
|
|
1211
|
-
* ```
|
|
1212
|
-
*
|
|
1213
|
-
* @example Wrapped control with inner native input
|
|
1214
|
-
* ```html
|
|
1215
|
-
* <mat-checkbox ngForgeControl="input[type='checkbox']" [formField]="ngf.field()">
|
|
1216
|
-
* {{ ngf.label() }}
|
|
1217
|
-
* </mat-checkbox>
|
|
1218
|
-
* ```
|
|
1219
|
-
*
|
|
1220
|
-
* @example Dynamic option list (radios rendered in @for)
|
|
1221
|
-
* ```html
|
|
1222
839
|
* @for (option of options(); track option.value) {
|
|
1223
840
|
* <input type="radio" ngForgeControl [value]="option.value" />
|
|
1224
841
|
* }
|
|
@@ -1238,24 +855,6 @@ declare class NgForgeControl {
|
|
|
1238
855
|
* (PrimeNG `p-select`, Ionic web components, etc.) where no light-DOM child
|
|
1239
856
|
* is the canonical control. Added to the component's `hostDirectives` so the
|
|
1240
857
|
* field's `meta` + parent aria land on the component's own host element.
|
|
1241
|
-
*
|
|
1242
|
-
* For split parent/control components (e.g. `df-prime-select` rendering
|
|
1243
|
-
* `df-prime-select-control` internally), place `NgForgeHostControl` on the
|
|
1244
|
-
* INNER control component's `hostDirectives` — the inner element is the
|
|
1245
|
-
* canonical control, and the marker's `inject(NgForgeField)` walks up the
|
|
1246
|
-
* element-injector tree to find the parent's directive instance.
|
|
1247
|
-
*
|
|
1248
|
-
* @example
|
|
1249
|
-
* ```ts
|
|
1250
|
-
* \@Component({
|
|
1251
|
-
* hostDirectives: [
|
|
1252
|
-
* { directive: NgForgeField, inputs: [...NG_FORGE_FIELD_INPUTS] },
|
|
1253
|
-
* NgForgeHostControl,
|
|
1254
|
-
* ],
|
|
1255
|
-
* template: `...`,
|
|
1256
|
-
* })
|
|
1257
|
-
* export class IonicInputField { ... }
|
|
1258
|
-
* ```
|
|
1259
858
|
*/
|
|
1260
859
|
declare class NgForgeHostControl {
|
|
1261
860
|
constructor();
|
|
@@ -1268,26 +867,6 @@ declare class NgForgeHostControl {
|
|
|
1268
867
|
* identity) with `NgForgeField` (value + validation + aria + meta-tracking)
|
|
1269
868
|
* in a single host-directive entry, so consumer components compose just one
|
|
1270
869
|
* directive instead of two.
|
|
1271
|
-
*
|
|
1272
|
-
* Why a directive instead of a `const` preset: cross-package partial
|
|
1273
|
-
* compilation can't resolve a const reference inside `hostDirectives:`, so
|
|
1274
|
-
* an exported const array doesn't work for library consumers. A wrapper
|
|
1275
|
-
* directive's own `hostDirectives` IS a literal at compile time (in this
|
|
1276
|
-
* file), so it works everywhere.
|
|
1277
|
-
*
|
|
1278
|
-
* Authoring shape for adapter components:
|
|
1279
|
-
* ```ts
|
|
1280
|
-
* \@Component({
|
|
1281
|
-
* hostDirectives: [NgForgeFieldHost],
|
|
1282
|
-
* ...
|
|
1283
|
-
* })
|
|
1284
|
-
* export class MyInputField {
|
|
1285
|
-
* protected readonly ngf = injectNgForgeField<string>();
|
|
1286
|
-
* }
|
|
1287
|
-
* ```
|
|
1288
|
-
*
|
|
1289
|
-
* Pattern reference: Taiga UI uses the same wrapper-directive technique
|
|
1290
|
-
* for the same reason. See https://www.angularspace.com/host-directives-decomposition-unleashed/
|
|
1291
870
|
*/
|
|
1292
871
|
declare class NgForgeFieldHost {
|
|
1293
872
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgForgeFieldHost, never>;
|
|
@@ -1297,17 +876,6 @@ declare class NgForgeFieldHost {
|
|
|
1297
876
|
* Action / button host wrapper. Composes `NgForgeFieldShell` with
|
|
1298
877
|
* `NgForgeAction` (event dispatch + aria-disabled) for button-shaped
|
|
1299
878
|
* components.
|
|
1300
|
-
*
|
|
1301
|
-
* Authoring shape:
|
|
1302
|
-
* ```ts
|
|
1303
|
-
* \@Component({
|
|
1304
|
-
* hostDirectives: [NgForgeActionHost],
|
|
1305
|
-
* ...
|
|
1306
|
-
* })
|
|
1307
|
-
* export class MyButton {
|
|
1308
|
-
* protected readonly action = injectNgForgeAction();
|
|
1309
|
-
* }
|
|
1310
|
-
* ```
|
|
1311
879
|
*/
|
|
1312
880
|
declare class NgForgeActionHost {
|
|
1313
881
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgForgeActionHost, never>;
|
|
@@ -1337,9 +905,6 @@ interface NgForgeFieldFixture<C, TValue = unknown> {
|
|
|
1337
905
|
* Builds a `ComponentFixture` for an `NgForgeField`-composing component with
|
|
1338
906
|
* `field` + `key` bound BEFORE `detectChanges()` — sidesteps the NG0950 that
|
|
1339
907
|
* Shell's required `key` and Field's required `field` would otherwise throw.
|
|
1340
|
-
*
|
|
1341
|
-
* The caller drives `detectChanges()` themselves (so they can `setInput`
|
|
1342
|
-
* additional component-specific props in between).
|
|
1343
908
|
*/
|
|
1344
909
|
declare function createNgForgeFieldFixture<C, TValue = unknown>(component: Type<C>, options: CreateNgForgeFieldFixtureOptions<TValue>): NgForgeFieldFixture<C, TValue>;
|
|
1345
910
|
interface CreateNgForgeActionFixtureOptions<TEvent extends FormEvent = FormEvent> {
|