@ng-forge/dynamic-forms-material 0.7.0 → 0.8.0-next.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/README.md
CHANGED
|
@@ -6,10 +6,12 @@
|
|
|
6
6
|
|
|
7
7
|
Material Design field components for [@ng-forge/dynamic-forms](https://www.npmjs.com/package/@ng-forge/dynamic-forms).
|
|
8
8
|
|
|
9
|
+
[](https://github.com/ng-forge/ng-forge/actions/workflows/ci.yml)
|
|
9
10
|
[](https://www.npmjs.com/package/@ng-forge/dynamic-forms-material)
|
|
10
11
|
[](https://www.npmjs.com/package/@ng-forge/dynamic-forms-material)
|
|
11
12
|
[](https://angular.dev)
|
|
12
13
|
[](https://opensource.org/licenses/MIT)
|
|
14
|
+
[](https://discord.gg/qpzzvFagj3)
|
|
13
15
|
|
|
14
16
|
> **Experimental API Notice:** This library uses Angular's experimental Signal Forms API.
|
|
15
17
|
> Angular may introduce breaking changes in patch releases. Check the [compatibility matrix](#compatibility) below.
|
|
@@ -144,8 +144,8 @@ class MatCheckboxFieldComponent {
|
|
|
144
144
|
}
|
|
145
145
|
}
|
|
146
146
|
});
|
|
147
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
148
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
147
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
148
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: MatCheckboxFieldComponent, isStandalone: true, selector: "df-mat-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
149
149
|
@let f = field();
|
|
150
150
|
@let checkboxId = key() + '-checkbox';
|
|
151
151
|
|
|
@@ -171,7 +171,7 @@ class MatCheckboxFieldComponent {
|
|
|
171
171
|
}
|
|
172
172
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
173
173
|
}
|
|
174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatCheckboxFieldComponent, decorators: [{
|
|
175
175
|
type: Component,
|
|
176
176
|
args: [{ selector: 'df-mat-checkbox', imports: [MatCheckbox, FormField, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
177
177
|
@let f = field();
|
|
@@ -231,6 +231,8 @@ class MatDatepickerFieldComponent {
|
|
|
231
231
|
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
232
232
|
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : /* istanbul ignore next */ []));
|
|
233
233
|
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : /* istanbul ignore next */ []));
|
|
234
|
+
effectiveFloatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', ...(ngDevMode ? [{ debugName: "effectiveFloatLabel" }] : /* istanbul ignore next */ []));
|
|
235
|
+
effectiveHideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, ...(ngDevMode ? [{ debugName: "effectiveHideRequiredMarker" }] : /* istanbul ignore next */ []));
|
|
234
236
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
235
237
|
showErrors = shouldShowErrors(this.field);
|
|
236
238
|
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
@@ -252,12 +254,17 @@ class MatDatepickerFieldComponent {
|
|
|
252
254
|
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
253
255
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
254
256
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
255
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
257
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
258
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: MatDatepickerFieldComponent, isStandalone: true, selector: "df-mat-datepicker", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "class": "className()", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, providers: [provideNativeDateAdapter()], ngImport: i0, template: `
|
|
257
259
|
@let f = field();
|
|
258
260
|
@let inputId = key() + '-input';
|
|
259
261
|
|
|
260
|
-
<mat-form-field
|
|
262
|
+
<mat-form-field
|
|
263
|
+
[appearance]="effectiveAppearance()"
|
|
264
|
+
[subscriptSizing]="effectiveSubscriptSizing()"
|
|
265
|
+
[floatLabel]="effectiveFloatLabel()"
|
|
266
|
+
[hideRequiredMarker]="effectiveHideRequiredMarker()"
|
|
267
|
+
>
|
|
261
268
|
@if (label(); as label) {
|
|
262
269
|
<mat-label>{{ label | dynamicText | async }}</mat-label>
|
|
263
270
|
}
|
|
@@ -287,7 +294,7 @@ class MatDatepickerFieldComponent {
|
|
|
287
294
|
</mat-form-field>
|
|
288
295
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
289
296
|
}
|
|
290
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
297
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatDatepickerFieldComponent, decorators: [{
|
|
291
298
|
type: Component,
|
|
292
299
|
args: [{ selector: 'df-mat-datepicker', imports: [
|
|
293
300
|
MatFormField,
|
|
@@ -311,7 +318,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
311
318
|
@let f = field();
|
|
312
319
|
@let inputId = key() + '-input';
|
|
313
320
|
|
|
314
|
-
<mat-form-field
|
|
321
|
+
<mat-form-field
|
|
322
|
+
[appearance]="effectiveAppearance()"
|
|
323
|
+
[subscriptSizing]="effectiveSubscriptSizing()"
|
|
324
|
+
[floatLabel]="effectiveFloatLabel()"
|
|
325
|
+
[hideRequiredMarker]="effectiveHideRequiredMarker()"
|
|
326
|
+
>
|
|
315
327
|
@if (label(); as label) {
|
|
316
328
|
<mat-label>{{ label | dynamicText | async }}</mat-label>
|
|
317
329
|
}
|
|
@@ -403,6 +415,8 @@ class MatInputFieldComponent {
|
|
|
403
415
|
});
|
|
404
416
|
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : /* istanbul ignore next */ []));
|
|
405
417
|
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : /* istanbul ignore next */ []));
|
|
418
|
+
effectiveFloatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', ...(ngDevMode ? [{ debugName: "effectiveFloatLabel" }] : /* istanbul ignore next */ []));
|
|
419
|
+
effectiveHideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, ...(ngDevMode ? [{ debugName: "effectiveHideRequiredMarker" }] : /* istanbul ignore next */ []));
|
|
406
420
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
407
421
|
showErrors = shouldShowErrors(this.field);
|
|
408
422
|
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
@@ -424,12 +438,17 @@ class MatInputFieldComponent {
|
|
|
424
438
|
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
425
439
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
426
440
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
427
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
428
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
441
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
442
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: MatInputFieldComponent, isStandalone: true, selector: "df-mat-input", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
429
443
|
@let f = field();
|
|
430
444
|
@let inputId = key() + '-input';
|
|
431
445
|
|
|
432
|
-
<mat-form-field
|
|
446
|
+
<mat-form-field
|
|
447
|
+
[appearance]="effectiveAppearance()"
|
|
448
|
+
[subscriptSizing]="effectiveSubscriptSizing()"
|
|
449
|
+
[floatLabel]="effectiveFloatLabel()"
|
|
450
|
+
[hideRequiredMarker]="effectiveHideRequiredMarker()"
|
|
451
|
+
>
|
|
433
452
|
@if (label()) {
|
|
434
453
|
<mat-label>{{ label() | dynamicText | async }}</mat-label>
|
|
435
454
|
}
|
|
@@ -453,13 +472,18 @@ class MatInputFieldComponent {
|
|
|
453
472
|
</mat-form-field>
|
|
454
473
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
455
474
|
}
|
|
456
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
475
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatInputFieldComponent, decorators: [{
|
|
457
476
|
type: Component,
|
|
458
477
|
args: [{ selector: 'df-mat-input', imports: [MatFormField, MatLabel, MatInput, MatHint, FormField, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
459
478
|
@let f = field();
|
|
460
479
|
@let inputId = key() + '-input';
|
|
461
480
|
|
|
462
|
-
<mat-form-field
|
|
481
|
+
<mat-form-field
|
|
482
|
+
[appearance]="effectiveAppearance()"
|
|
483
|
+
[subscriptSizing]="effectiveSubscriptSizing()"
|
|
484
|
+
[floatLabel]="effectiveFloatLabel()"
|
|
485
|
+
[hideRequiredMarker]="effectiveHideRequiredMarker()"
|
|
486
|
+
>
|
|
463
487
|
@if (label()) {
|
|
464
488
|
<mat-label>{{ label() | dynamicText | async }}</mat-label>
|
|
465
489
|
}
|
|
@@ -571,8 +595,8 @@ class MatMultiCheckboxFieldComponent {
|
|
|
571
595
|
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
572
596
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
573
597
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
574
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
575
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
598
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
599
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: MatMultiCheckboxFieldComponent, isStandalone: true, selector: "df-mat-multi-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className() || \"\"", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
576
600
|
@let f = field();
|
|
577
601
|
@let checkboxGroupId = key() + '-checkbox-group';
|
|
578
602
|
@let checked = checkedValuesMap();
|
|
@@ -609,7 +633,7 @@ class MatMultiCheckboxFieldComponent {
|
|
|
609
633
|
}
|
|
610
634
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
611
635
|
}
|
|
612
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
636
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatMultiCheckboxFieldComponent, decorators: [{
|
|
613
637
|
type: Component,
|
|
614
638
|
args: [{ selector: 'df-mat-multi-checkbox', imports: [MatCheckbox, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
615
639
|
@let f = field();
|
|
@@ -700,8 +724,8 @@ class MatRadioFieldComponent {
|
|
|
700
724
|
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
701
725
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
702
726
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
703
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
704
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
727
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
728
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: MatRadioFieldComponent, isStandalone: true, selector: "df-mat-radio", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className() || \"\"", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
705
729
|
@let f = field();
|
|
706
730
|
@let radioGroupId = key() + '-radio-group';
|
|
707
731
|
|
|
@@ -735,7 +759,7 @@ class MatRadioFieldComponent {
|
|
|
735
759
|
}
|
|
736
760
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n"], dependencies: [{ kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
737
761
|
}
|
|
738
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
762
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatRadioFieldComponent, decorators: [{
|
|
739
763
|
type: Component,
|
|
740
764
|
args: [{ selector: 'df-mat-radio', imports: [MatRadioGroup, MatRadioButton, FormField, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
741
765
|
@let f = field();
|
|
@@ -798,6 +822,8 @@ class MatSelectFieldComponent {
|
|
|
798
822
|
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
799
823
|
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : /* istanbul ignore next */ []));
|
|
800
824
|
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : /* istanbul ignore next */ []));
|
|
825
|
+
effectiveFloatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', ...(ngDevMode ? [{ debugName: "effectiveFloatLabel" }] : /* istanbul ignore next */ []));
|
|
826
|
+
effectiveHideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, ...(ngDevMode ? [{ debugName: "effectiveHideRequiredMarker" }] : /* istanbul ignore next */ []));
|
|
801
827
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
802
828
|
showErrors = shouldShowErrors(this.field);
|
|
803
829
|
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
@@ -826,12 +852,17 @@ class MatSelectFieldComponent {
|
|
|
826
852
|
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
827
853
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
828
854
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
829
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
830
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
855
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
856
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: MatSelectFieldComponent, isStandalone: true, selector: "df-mat-select", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
831
857
|
@let f = field();
|
|
832
858
|
@let selectId = key() + '-select';
|
|
833
859
|
|
|
834
|
-
<mat-form-field
|
|
860
|
+
<mat-form-field
|
|
861
|
+
[appearance]="effectiveAppearance()"
|
|
862
|
+
[subscriptSizing]="effectiveSubscriptSizing()"
|
|
863
|
+
[floatLabel]="effectiveFloatLabel()"
|
|
864
|
+
[hideRequiredMarker]="effectiveHideRequiredMarker()"
|
|
865
|
+
>
|
|
835
866
|
@if (label(); as label) {
|
|
836
867
|
<mat-label>{{ label | dynamicText | async }}</mat-label>
|
|
837
868
|
}
|
|
@@ -861,13 +892,18 @@ class MatSelectFieldComponent {
|
|
|
861
892
|
</mat-form-field>
|
|
862
893
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
863
894
|
}
|
|
864
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
895
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatSelectFieldComponent, decorators: [{
|
|
865
896
|
type: Component,
|
|
866
897
|
args: [{ selector: 'df-mat-select', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, FormField, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
867
898
|
@let f = field();
|
|
868
899
|
@let selectId = key() + '-select';
|
|
869
900
|
|
|
870
|
-
<mat-form-field
|
|
901
|
+
<mat-form-field
|
|
902
|
+
[appearance]="effectiveAppearance()"
|
|
903
|
+
[subscriptSizing]="effectiveSubscriptSizing()"
|
|
904
|
+
[floatLabel]="effectiveFloatLabel()"
|
|
905
|
+
[hideRequiredMarker]="effectiveHideRequiredMarker()"
|
|
906
|
+
>
|
|
871
907
|
@if (label(); as label) {
|
|
872
908
|
<mat-label>{{ label | dynamicText | async }}</mat-label>
|
|
873
909
|
}
|
|
@@ -944,8 +980,8 @@ class MatSliderFieldComponent {
|
|
|
944
980
|
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
945
981
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
946
982
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
947
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
948
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
983
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
984
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: MatSliderFieldComponent, isStandalone: true, selector: "df-mat-slider", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
949
985
|
@let f = field();
|
|
950
986
|
@let inputId = key() + '-input';
|
|
951
987
|
|
|
@@ -980,7 +1016,7 @@ class MatSliderFieldComponent {
|
|
|
980
1016
|
}
|
|
981
1017
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", ".slider-container{width:100%}\n"], dependencies: [{ kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
982
1018
|
}
|
|
983
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1019
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatSliderFieldComponent, decorators: [{
|
|
984
1020
|
type: Component,
|
|
985
1021
|
args: [{ selector: 'df-mat-slider', imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, FormField], template: `
|
|
986
1022
|
@let f = field();
|
|
@@ -1084,8 +1120,8 @@ class MatButtonFieldComponent {
|
|
|
1084
1120
|
this.eventBus.dispatch(event);
|
|
1085
1121
|
}
|
|
1086
1122
|
}
|
|
1087
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1088
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
1123
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1124
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: MatButtonFieldComponent, isStandalone: true, selector: "df-mat-button", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: false, transformFunction: null }, eventArgs: { classPropertyName: "eventArgs", publicName: "eventArgs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, eventContext: { classPropertyName: "eventContext", publicName: "eventContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "hidden() || null" } }, ngImport: i0, template: `
|
|
1089
1125
|
@let buttonId = key() + '-button';
|
|
1090
1126
|
<button
|
|
1091
1127
|
mat-raised-button
|
|
@@ -1100,7 +1136,7 @@ class MatButtonFieldComponent {
|
|
|
1100
1136
|
</button>
|
|
1101
1137
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "button{min-width:fit-content}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1102
1138
|
}
|
|
1103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatButtonFieldComponent, decorators: [{
|
|
1104
1140
|
type: Component,
|
|
1105
1141
|
args: [{ selector: 'df-mat-button', imports: [MatButton, DynamicTextPipe, AsyncPipe], host: {
|
|
1106
1142
|
'[id]': '`${key()}`',
|
|
@@ -1186,6 +1222,8 @@ class MatTextareaFieldComponent {
|
|
|
1186
1222
|
});
|
|
1187
1223
|
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : /* istanbul ignore next */ []));
|
|
1188
1224
|
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : /* istanbul ignore next */ []));
|
|
1225
|
+
effectiveFloatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', ...(ngDevMode ? [{ debugName: "effectiveFloatLabel" }] : /* istanbul ignore next */ []));
|
|
1226
|
+
effectiveHideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, ...(ngDevMode ? [{ debugName: "effectiveHideRequiredMarker" }] : /* istanbul ignore next */ []));
|
|
1189
1227
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1190
1228
|
showErrors = shouldShowErrors(this.field);
|
|
1191
1229
|
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
@@ -1207,12 +1245,17 @@ class MatTextareaFieldComponent {
|
|
|
1207
1245
|
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
1208
1246
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
1209
1247
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1210
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1211
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1248
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1249
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: MatTextareaFieldComponent, isStandalone: true, selector: "df-mat-textarea", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
1212
1250
|
@let f = field();
|
|
1213
1251
|
@let textareaId = key() + '-textarea';
|
|
1214
1252
|
|
|
1215
|
-
<mat-form-field
|
|
1253
|
+
<mat-form-field
|
|
1254
|
+
[appearance]="effectiveAppearance()"
|
|
1255
|
+
[subscriptSizing]="effectiveSubscriptSizing()"
|
|
1256
|
+
[floatLabel]="effectiveFloatLabel()"
|
|
1257
|
+
[hideRequiredMarker]="effectiveHideRequiredMarker()"
|
|
1258
|
+
>
|
|
1216
1259
|
@if (label()) {
|
|
1217
1260
|
<mat-label>{{ label() | dynamicText | async }}</mat-label>
|
|
1218
1261
|
}
|
|
@@ -1238,13 +1281,18 @@ class MatTextareaFieldComponent {
|
|
|
1238
1281
|
</mat-form-field>
|
|
1239
1282
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1240
1283
|
}
|
|
1241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1284
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatTextareaFieldComponent, decorators: [{
|
|
1242
1285
|
type: Component,
|
|
1243
1286
|
args: [{ selector: 'df-mat-textarea', imports: [MatFormField, MatLabel, MatInput, MatHint, FormField, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
1244
1287
|
@let f = field();
|
|
1245
1288
|
@let textareaId = key() + '-textarea';
|
|
1246
1289
|
|
|
1247
|
-
<mat-form-field
|
|
1290
|
+
<mat-form-field
|
|
1291
|
+
[appearance]="effectiveAppearance()"
|
|
1292
|
+
[subscriptSizing]="effectiveSubscriptSizing()"
|
|
1293
|
+
[floatLabel]="effectiveFloatLabel()"
|
|
1294
|
+
[hideRequiredMarker]="effectiveHideRequiredMarker()"
|
|
1295
|
+
>
|
|
1248
1296
|
@if (label()) {
|
|
1249
1297
|
<mat-label>{{ label() | dynamicText | async }}</mat-label>
|
|
1250
1298
|
}
|
|
@@ -1359,8 +1407,8 @@ class MatToggleFieldComponent {
|
|
|
1359
1407
|
}
|
|
1360
1408
|
}
|
|
1361
1409
|
});
|
|
1362
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1363
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1410
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1411
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: MatToggleFieldComponent, isStandalone: true, selector: "df-mat-toggle", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1364
1412
|
@let f = field();
|
|
1365
1413
|
@let toggleId = key() + '-toggle';
|
|
1366
1414
|
|
|
@@ -1386,7 +1434,7 @@ class MatToggleFieldComponent {
|
|
|
1386
1434
|
}
|
|
1387
1435
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n"], dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1388
1436
|
}
|
|
1389
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MatToggleFieldComponent, decorators: [{
|
|
1390
1438
|
type: Component,
|
|
1391
1439
|
args: [{ selector: 'df-mat-toggle', imports: [MatSlideToggle, FormField, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
1392
1440
|
@let f = field();
|
|
@@ -1514,6 +1562,13 @@ function buttonFieldMapper(fieldDef) {
|
|
|
1514
1562
|
* disabled state resolution based on form validity and options.
|
|
1515
1563
|
*/
|
|
1516
1564
|
|
|
1565
|
+
/**
|
|
1566
|
+
* Base definition for button field types that don't use the `field` input.
|
|
1567
|
+
* Button fields render immediately without waiting for form value integration.
|
|
1568
|
+
*/
|
|
1569
|
+
const BUTTON_FIELD_TYPES_BASE = {
|
|
1570
|
+
renderReadyWhen: [],
|
|
1571
|
+
};
|
|
1517
1572
|
/**
|
|
1518
1573
|
* Material Design field type definitions
|
|
1519
1574
|
* Follows the FieldTypeDefinition interface for proper registry integration
|
|
@@ -1543,60 +1598,70 @@ const MATERIAL_FIELD_TYPES = [
|
|
|
1543
1598
|
loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
|
|
1544
1599
|
mapper: buttonFieldMapper,
|
|
1545
1600
|
valueHandling: 'exclude',
|
|
1601
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1546
1602
|
},
|
|
1547
1603
|
{
|
|
1548
1604
|
name: MatField.Submit,
|
|
1549
1605
|
loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
|
|
1550
1606
|
mapper: submitButtonFieldMapper,
|
|
1551
1607
|
valueHandling: 'exclude',
|
|
1608
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1552
1609
|
},
|
|
1553
1610
|
{
|
|
1554
1611
|
name: MatField.Next,
|
|
1555
1612
|
loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
|
|
1556
1613
|
mapper: nextButtonFieldMapper,
|
|
1557
1614
|
valueHandling: 'exclude',
|
|
1615
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1558
1616
|
},
|
|
1559
1617
|
{
|
|
1560
1618
|
name: MatField.Previous,
|
|
1561
1619
|
loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
|
|
1562
1620
|
mapper: previousButtonFieldMapper,
|
|
1563
1621
|
valueHandling: 'exclude',
|
|
1622
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1564
1623
|
},
|
|
1565
1624
|
{
|
|
1566
1625
|
name: MatField.AddArrayItem,
|
|
1567
1626
|
loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
|
|
1568
1627
|
mapper: addArrayItemButtonMapper,
|
|
1569
1628
|
valueHandling: 'exclude',
|
|
1629
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1570
1630
|
},
|
|
1571
1631
|
{
|
|
1572
1632
|
name: MatField.PrependArrayItem,
|
|
1573
1633
|
loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
|
|
1574
1634
|
mapper: prependArrayItemButtonMapper,
|
|
1575
1635
|
valueHandling: 'exclude',
|
|
1636
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1576
1637
|
},
|
|
1577
1638
|
{
|
|
1578
1639
|
name: MatField.InsertArrayItem,
|
|
1579
1640
|
loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
|
|
1580
1641
|
mapper: insertArrayItemButtonMapper,
|
|
1581
1642
|
valueHandling: 'exclude',
|
|
1643
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1582
1644
|
},
|
|
1583
1645
|
{
|
|
1584
1646
|
name: MatField.RemoveArrayItem,
|
|
1585
1647
|
loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
|
|
1586
1648
|
mapper: removeArrayItemButtonMapper,
|
|
1587
1649
|
valueHandling: 'exclude',
|
|
1650
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1588
1651
|
},
|
|
1589
1652
|
{
|
|
1590
1653
|
name: MatField.PopArrayItem,
|
|
1591
1654
|
loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
|
|
1592
1655
|
mapper: popArrayItemButtonMapper,
|
|
1593
1656
|
valueHandling: 'exclude',
|
|
1657
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1594
1658
|
},
|
|
1595
1659
|
{
|
|
1596
1660
|
name: MatField.ShiftArrayItem,
|
|
1597
1661
|
loadComponent: () => Promise.resolve().then(function () { return matButton_component; }),
|
|
1598
1662
|
mapper: shiftArrayItemButtonMapper,
|
|
1599
1663
|
valueHandling: 'exclude',
|
|
1664
|
+
...BUTTON_FIELD_TYPES_BASE,
|
|
1600
1665
|
},
|
|
1601
1666
|
{
|
|
1602
1667
|
name: MatField.Textarea,
|
|
@@ -1643,54 +1708,19 @@ const MATERIAL_FIELD_TYPES = [
|
|
|
1643
1708
|
* all Material Design field types provided by this library.
|
|
1644
1709
|
*/
|
|
1645
1710
|
|
|
1646
|
-
/**
|
|
1647
|
-
* Configure dynamic forms with Material Design field types.
|
|
1648
|
-
* Provides all Material Design field types for use with provideDynamicForm.
|
|
1649
|
-
*
|
|
1650
|
-
* @param config - Optional global configuration for Material form fields
|
|
1651
|
-
*
|
|
1652
|
-
* @example
|
|
1653
|
-
* ```typescript
|
|
1654
|
-
* // Application-level setup
|
|
1655
|
-
* import { ApplicationConfig } from '@angular/core';
|
|
1656
|
-
* import { provideDynamicForm } from '@ng-forge/dynamic-form';
|
|
1657
|
-
* import { withMaterialFields } from '@ng-forge/dynamic-form-material';
|
|
1658
|
-
*
|
|
1659
|
-
* export const appConfig: ApplicationConfig = {
|
|
1660
|
-
* providers: [
|
|
1661
|
-
* provideDynamicForm(...withMaterialFields())
|
|
1662
|
-
* ]
|
|
1663
|
-
* };
|
|
1664
|
-
* ```
|
|
1665
|
-
*
|
|
1666
|
-
* @example
|
|
1667
|
-
* ```typescript
|
|
1668
|
-
* // With global configuration
|
|
1669
|
-
* export const appConfig: ApplicationConfig = {
|
|
1670
|
-
* providers: [
|
|
1671
|
-
* provideDynamicForm(
|
|
1672
|
-
* ...withMaterialFields({
|
|
1673
|
-
* appearance: 'fill',
|
|
1674
|
-
* subscriptSizing: 'fixed'
|
|
1675
|
-
* })
|
|
1676
|
-
* )
|
|
1677
|
-
* ]
|
|
1678
|
-
* };
|
|
1679
|
-
* ```
|
|
1680
|
-
*
|
|
1681
|
-
* @returns Array of field type definitions for Material Design components
|
|
1682
|
-
*/
|
|
1683
1711
|
function withMaterialFields(config) {
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
fields.__configProviders = [
|
|
1687
|
-
{
|
|
1688
|
-
provide: MATERIAL_CONFIG,
|
|
1689
|
-
useValue: config,
|
|
1690
|
-
},
|
|
1691
|
-
];
|
|
1712
|
+
if (!config) {
|
|
1713
|
+
return MATERIAL_FIELD_TYPES;
|
|
1692
1714
|
}
|
|
1693
|
-
|
|
1715
|
+
const fieldsWithConfig = [
|
|
1716
|
+
...MATERIAL_FIELD_TYPES,
|
|
1717
|
+
{
|
|
1718
|
+
ɵkind: 'material-config',
|
|
1719
|
+
ɵproviders: [{ provide: MATERIAL_CONFIG, useValue: config }],
|
|
1720
|
+
},
|
|
1721
|
+
];
|
|
1722
|
+
// Safe: this preserves all material field definitions and appends exactly one config feature.
|
|
1723
|
+
return fieldsWithConfig;
|
|
1694
1724
|
}
|
|
1695
1725
|
|
|
1696
1726
|
// Field components
|