@ng-forge/dynamic-forms-material 1.2.0-next.9 → 1.3.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.
Files changed (18) hide show
  1. package/fesm2022/ng-forge-dynamic-forms-material-lazy-addon-button.mjs +3 -3
  2. package/fesm2022/ng-forge-dynamic-forms-material-lazy-addon-icon.mjs +3 -3
  3. package/fesm2022/ng-forge-dynamic-forms-material-lazy-button.mjs +3 -3
  4. package/fesm2022/ng-forge-dynamic-forms-material-lazy-checkbox.mjs +3 -3
  5. package/fesm2022/ng-forge-dynamic-forms-material-lazy-datepicker.mjs +3 -3
  6. package/fesm2022/ng-forge-dynamic-forms-material-lazy-input.mjs +3 -3
  7. package/fesm2022/ng-forge-dynamic-forms-material-lazy-multi-checkbox.mjs +3 -3
  8. package/fesm2022/ng-forge-dynamic-forms-material-lazy-radio.mjs +3 -3
  9. package/fesm2022/ng-forge-dynamic-forms-material-lazy-select.mjs +3 -3
  10. package/fesm2022/ng-forge-dynamic-forms-material-lazy-slider.mjs +3 -3
  11. package/fesm2022/ng-forge-dynamic-forms-material-lazy-textarea.mjs +3 -3
  12. package/fesm2022/ng-forge-dynamic-forms-material-lazy-toggle.mjs +4 -4
  13. package/fesm2022/{ng-forge-dynamic-forms-material-mat-field-errors-wrapper.component-QsDJRuUx.mjs → ng-forge-dynamic-forms-material-mat-field-errors-wrapper.component-Dz2-IbBh.mjs} +4 -4
  14. package/fesm2022/{ng-forge-dynamic-forms-material-mat-field-errors-wrapper.component-QsDJRuUx.mjs.map → ng-forge-dynamic-forms-material-mat-field-errors-wrapper.component-Dz2-IbBh.mjs.map} +1 -1
  15. package/fesm2022/ng-forge-dynamic-forms-material.mjs +7 -1198
  16. package/fesm2022/ng-forge-dynamic-forms-material.mjs.map +1 -1
  17. package/package.json +3 -3
  18. package/types/ng-forge-dynamic-forms-material.d.ts +41 -173
package/fesm2022/ng-forge-dynamic-forms-material.mjs CHANGED
@@ -1,1082 +1,8 @@
1
- import * as i0 from '@angular/core';
2
- import { inject, input, computed, ChangeDetectionStrategy, Component, signal, forwardRef, linkedSignal, isSignal } from '@angular/core';
3
- import { FormField } from '@angular/forms/signals';
4
- import { MatCheckbox } from '@angular/material/checkbox';
5
- import * as i1 from '@ng-forge/dynamic-forms/integration';
6
- import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost, injectNgForgeAddons, DfAddonSlot, NgForgeAddons, ADDON_PRESET_HANDLER, FIELD_SIGNAL_CONTEXT, isEqual, injectNgForgeAction, NgForgeActionHost, DEFAULT_PROPS, ARRAY_CONTEXT, injectNonFieldLogicResolver, buildBaseInputs, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, submitButtonFieldMapper, nextButtonFieldMapper, previousButtonFieldMapper, addArrayItemButtonMapper, prependArrayItemButtonMapper, insertArrayItemButtonMapper, removeArrayItemButtonMapper, popArrayItemButtonMapper, shiftArrayItemButtonMapper, datepickerFieldMapper, ADDON_TYPE_DEFINITIONS, injectNgForgeAddonAction, NgForgeAddonAction } from '@ng-forge/dynamic-forms/integration';
7
- import { MatError, MatInput, MatHint } from '@angular/material/input';
8
- import { AsyncPipe } from '@angular/common';
9
- import { MATERIAL_CONFIG, MAT_INPUT_TYPE_OVERRIDE, runMatPresetAction } from '@ng-forge/dynamic-forms-material/shared';
1
+ import { DEFAULT_PROPS, ARRAY_CONTEXT, injectNonFieldLogicResolver, buildBaseInputs, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, submitButtonFieldMapper, nextButtonFieldMapper, previousButtonFieldMapper, addArrayItemButtonMapper, prependArrayItemButtonMapper, insertArrayItemButtonMapper, removeArrayItemButtonMapper, popArrayItemButtonMapper, shiftArrayItemButtonMapper, datepickerFieldMapper, ADDON_TYPE_DEFINITIONS } from '@ng-forge/dynamic-forms/integration';
2
+ import { inject, computed, isSignal } from '@angular/core';
3
+ import { MATERIAL_CONFIG } from '@ng-forge/dynamic-forms-material/shared';
10
4
  export { MATERIAL_CONFIG, MAT_INPUT_TYPE_OVERRIDE } from '@ng-forge/dynamic-forms-material/shared';
11
- import { MatFormField, MatLabel, MatSuffix, MatPrefix, MatError as MatError$1 } from '@angular/material/form-field';
12
- import { MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material/datepicker';
13
- import { provideNativeDateAdapter } from '@angular/material/core';
14
- import { DynamicFormLogger, DynamicFormError } from '@ng-forge/dynamic-forms';
15
- import { explicitEffect } from 'ngxtension/explicit-effect';
16
- import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
17
- import { MatSelect, MatOption } from '@angular/material/select';
18
- import { MatSlider, MatSliderThumb } from '@angular/material/slider';
19
- import { MatButton, MatIconButton } from '@angular/material/button';
20
- import { MatSlideToggle } from '@angular/material/slide-toggle';
21
- import { MatIcon } from '@angular/material/icon';
22
- import { MatProgressSpinner } from '@angular/material/progress-spinner';
23
-
24
- class MatCheckboxFieldComponent {
25
- materialConfig = inject(MATERIAL_CONFIG, { optional: true });
26
- ngf = injectNgForgeField();
27
- props = input(/* @ts-ignore */
28
- ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
29
- disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, /* @ts-ignore */
30
- ...(ngDevMode ? [{ debugName: "disableRipple" }] : /* istanbul ignore next */ []));
31
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
32
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatCheckboxFieldComponent, isStandalone: true, selector: "df-mat-checkbox", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
33
- @let f = ngf.field();
34
- @let checkboxId = ngf.key() + '-checkbox';
35
-
36
- <mat-checkbox
37
- ngForgeControl="input[type='checkbox']"
38
- [id]="checkboxId"
39
- [formField]="f"
40
- [labelPosition]="props()?.labelPosition || 'after'"
41
- [indeterminate]="props()?.indeterminate || false"
42
- [color]="props()?.color || 'primary'"
43
- [disableRipple]="disableRipple()"
44
- [required]="!!f().required()"
45
- [tabIndex]="ngf.tabIndex() ?? 0"
46
- [attr.hidden]="f().hidden() || null"
47
- >
48
- {{ ngf.label() | dynamicText | async }}
49
- </mat-checkbox>
50
-
51
- @if (ngf.errorsToDisplay()[0]; as error) {
52
- <mat-error [id]="ngf.errorId()" [attr.hidden]="f().hidden() || null">{{ error.message }}</mat-error>
53
- } @else if (props()?.hint; as hint) {
54
- <div class="mat-hint" [id]="ngf.hintId()" [attr.hidden]="f().hidden() || null">{{ hint | dynamicText | async }}</div>
55
- }
56
- `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\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: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
57
- }
58
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatCheckboxFieldComponent, decorators: [{
59
- type: Component,
60
- args: [{ selector: 'df-mat-checkbox', imports: [MatCheckbox, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
61
- @let f = ngf.field();
62
- @let checkboxId = ngf.key() + '-checkbox';
63
-
64
- <mat-checkbox
65
- ngForgeControl="input[type='checkbox']"
66
- [id]="checkboxId"
67
- [formField]="f"
68
- [labelPosition]="props()?.labelPosition || 'after'"
69
- [indeterminate]="props()?.indeterminate || false"
70
- [color]="props()?.color || 'primary'"
71
- [disableRipple]="disableRipple()"
72
- [required]="!!f().required()"
73
- [tabIndex]="ngf.tabIndex() ?? 0"
74
- [attr.hidden]="f().hidden() || null"
75
- >
76
- {{ ngf.label() | dynamicText | async }}
77
- </mat-checkbox>
78
-
79
- @if (ngf.errorsToDisplay()[0]; as error) {
80
- <mat-error [id]="ngf.errorId()" [attr.hidden]="f().hidden() || null">{{ error.message }}</mat-error>
81
- } @else if (props()?.hint; as hint) {
82
- <div class="mat-hint" [id]="ngf.hintId()" [attr.hidden]="f().hidden() || null">{{ hint | dynamicText | async }}</div>
83
- }
84
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n"] }]
85
- }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
86
-
87
- class MatDatepickerFieldComponent {
88
- materialConfig = inject(MATERIAL_CONFIG, { optional: true });
89
- ngf = injectNgForgeField();
90
- ngfa = injectNgForgeAddons();
91
- minDate = input(null, /* @ts-ignore */
92
- ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
93
- maxDate = input(null, /* @ts-ignore */
94
- ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
95
- startAt = input(null, /* @ts-ignore */
96
- ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
97
- props = input(/* @ts-ignore */
98
- ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
99
- fieldInputs = input(/* @ts-ignore */
100
- ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
101
- appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
102
- ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
103
- subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', /* @ts-ignore */
104
- ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
105
- floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', /* @ts-ignore */
106
- ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
107
- hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, /* @ts-ignore */
108
- ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
109
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
110
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatDatepickerFieldComponent, isStandalone: true, selector: "df-mat-datepicker", inputs: { 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 }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideNativeDateAdapter()], hostDirectives: [{ directive: i1.NgForgeFieldHost }, { directive: i1.NgForgeAddons }], ngImport: i0, template: `
111
- @let inputId = ngf.key() + '-input';
112
-
113
- <mat-form-field
114
- [appearance]="appearance()"
115
- [subscriptSizing]="subscriptSizing()"
116
- [floatLabel]="floatLabel()"
117
- [hideRequiredMarker]="hideRequiredMarker()"
118
- >
119
- @if (ngf.label(); as label) {
120
- <mat-label>{{ label | dynamicText | async }}</mat-label>
121
- }
122
-
123
- @for (a of ngfa.prefixAddons(); track $index) {
124
- <df-addon-slot
125
- matPrefix
126
- [class.df-mat-addon-text]="a.type === 'text'"
127
- [addon]="a"
128
- [fieldInputs]="fieldInputs()"
129
- [hidden]="ngfa.hiddenSignalCache().get(a)"
130
- />
131
- }
132
- <input
133
- matInput
134
- ngForgeControl
135
- [id]="inputId"
136
- [matDatepicker]="picker"
137
- [formField]="ngf.field()"
138
- [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
139
- [attr.tabindex]="ngf.tabIndex()"
140
- [min]="minDate()"
141
- [max]="maxDate()"
142
- />
143
- @for (a of ngfa.suffixAddons(); track $index) {
144
- <df-addon-slot
145
- matSuffix
146
- [class.df-mat-addon-text]="a.type === 'text'"
147
- [addon]="a"
148
- [fieldInputs]="fieldInputs()"
149
- [hidden]="ngfa.hiddenSignalCache().get(a)"
150
- />
151
- }
152
-
153
- <mat-datepicker-toggle matIconSuffix [for]="picker" />
154
- <mat-datepicker #picker [startAt]="startAt()" [startView]="props()?.startView || 'month'" [touchUi]="props()?.touchUi ?? false" />
155
-
156
- @if (ngf.errorsToDisplay()[0]; as error) {
157
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
158
- } @else if (props()?.hint; as hint) {
159
- <mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
160
- }
161
- </mat-form-field>
162
- `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\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: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "component", type: DfAddonSlot, selector: "df-addon-slot", inputs: ["addon", "fieldInputs", "hidden"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
163
- }
164
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatDatepickerFieldComponent, decorators: [{
165
- type: Component,
166
- args: [{ selector: 'df-mat-datepicker', imports: [
167
- MatFormField,
168
- MatLabel,
169
- MatInput,
170
- MatHint,
171
- MatDatepicker,
172
- MatDatepickerInput,
173
- MatDatepickerToggle,
174
- MatSuffix,
175
- MatPrefix,
176
- FormField,
177
- MatError$1,
178
- DynamicTextPipe,
179
- AsyncPipe,
180
- NgForgeControl,
181
- DfAddonSlot,
182
- ], hostDirectives: [NgForgeFieldHost, NgForgeAddons], template: `
183
- @let inputId = ngf.key() + '-input';
184
-
185
- <mat-form-field
186
- [appearance]="appearance()"
187
- [subscriptSizing]="subscriptSizing()"
188
- [floatLabel]="floatLabel()"
189
- [hideRequiredMarker]="hideRequiredMarker()"
190
- >
191
- @if (ngf.label(); as label) {
192
- <mat-label>{{ label | dynamicText | async }}</mat-label>
193
- }
194
-
195
- @for (a of ngfa.prefixAddons(); track $index) {
196
- <df-addon-slot
197
- matPrefix
198
- [class.df-mat-addon-text]="a.type === 'text'"
199
- [addon]="a"
200
- [fieldInputs]="fieldInputs()"
201
- [hidden]="ngfa.hiddenSignalCache().get(a)"
202
- />
203
- }
204
- <input
205
- matInput
206
- ngForgeControl
207
- [id]="inputId"
208
- [matDatepicker]="picker"
209
- [formField]="ngf.field()"
210
- [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
211
- [attr.tabindex]="ngf.tabIndex()"
212
- [min]="minDate()"
213
- [max]="maxDate()"
214
- />
215
- @for (a of ngfa.suffixAddons(); track $index) {
216
- <df-addon-slot
217
- matSuffix
218
- [class.df-mat-addon-text]="a.type === 'text'"
219
- [addon]="a"
220
- [fieldInputs]="fieldInputs()"
221
- [hidden]="ngfa.hiddenSignalCache().get(a)"
222
- />
223
- }
224
-
225
- <mat-datepicker-toggle matIconSuffix [for]="picker" />
226
- <mat-datepicker #picker [startAt]="startAt()" [startView]="props()?.startView || 'month'" [touchUi]="props()?.touchUi ?? false" />
227
-
228
- @if (ngf.errorsToDisplay()[0]; as error) {
229
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
230
- } @else if (props()?.hint; as hint) {
231
- <mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
232
- }
233
- </mat-form-field>
234
- `, providers: [provideNativeDateAdapter()], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n", "mat-form-field{width:100%}\n"] }]
235
- }], propDecorators: { minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
236
-
237
- class MatInputFieldComponent {
238
- materialConfig = inject(MATERIAL_CONFIG, { optional: true });
239
- ngf = injectNgForgeField();
240
- ngfa = injectNgForgeAddons();
241
- props = input(/* @ts-ignore */
242
- ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
243
- fieldInputs = input(/* @ts-ignore */
244
- ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
245
- typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);
246
- appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
247
- ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
248
- subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', /* @ts-ignore */
249
- ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
250
- floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', /* @ts-ignore */
251
- ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
252
- hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, /* @ts-ignore */
253
- ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
254
- type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text', /* @ts-ignore */
255
- ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
256
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
257
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatInputFieldComponent, isStandalone: true, selector: "df-mat-input", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
258
- {
259
- provide: MAT_INPUT_TYPE_OVERRIDE,
260
- useFactory: () => signal(undefined),
261
- },
262
- {
263
- provide: ADDON_PRESET_HANDLER,
264
- useFactory: () => {
265
- const typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);
266
- const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });
267
- const logger = inject(DynamicFormLogger);
268
- const host = inject(forwardRef(() => MatInputFieldComponent));
269
- return {
270
- run: (preset, ctx) => {
271
- const fieldKey = ctx.field.key;
272
- return runMatPresetAction(preset, ctx, {
273
- typeOverride,
274
- fieldValueSetter: ctx.setValue,
275
- fieldDefaultValueGetter: fsc && fieldKey ? () => fsc.defaultValues()?.[fieldKey] : undefined,
276
- baselineType: () => host.props()?.type,
277
- logger,
278
- });
279
- },
280
- };
281
- },
282
- },
283
- ], hostDirectives: [{ directive: i1.NgForgeFieldHost }, { directive: i1.NgForgeAddons }], ngImport: i0, template: `
284
- @let inputId = ngf.key() + '-input';
285
-
286
- <mat-form-field
287
- [appearance]="appearance()"
288
- [subscriptSizing]="subscriptSizing()"
289
- [floatLabel]="floatLabel()"
290
- [hideRequiredMarker]="hideRequiredMarker()"
291
- >
292
- @if (ngf.label()) {
293
- <mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>
294
- }
295
- @for (a of ngfa.prefixAddons(); track $index) {
296
- <df-addon-slot
297
- matPrefix
298
- [class.df-mat-addon-text]="a.type === 'text'"
299
- [addon]="a"
300
- [fieldInputs]="fieldInputs()"
301
- [hidden]="ngfa.hiddenSignalCache().get(a)"
302
- />
303
- }
304
- <input
305
- matInput
306
- ngForgeControl
307
- [id]="inputId"
308
- [formField]="ngf.field()"
309
- [type]="type()"
310
- [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
311
- [attr.tabindex]="ngf.tabIndex()"
312
- />
313
- @for (a of ngfa.suffixAddons(); track $index) {
314
- <df-addon-slot
315
- matSuffix
316
- [class.df-mat-addon-text]="a.type === 'text'"
317
- [addon]="a"
318
- [fieldInputs]="fieldInputs()"
319
- [hidden]="ngfa.hiddenSignalCache().get(a)"
320
- />
321
- }
322
- @if (ngf.errorsToDisplay()[0]; as error) {
323
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
324
- } @else if (props()?.hint; as hint) {
325
- <mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
326
- }
327
- </mat-form-field>
328
- `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n", "mat-form-field{width:100%}:host([hidden]){display:none!important}\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: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "component", type: DfAddonSlot, selector: "df-addon-slot", inputs: ["addon", "fieldInputs", "hidden"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
329
- }
330
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatInputFieldComponent, decorators: [{
331
- type: Component,
332
- args: [{ selector: 'df-mat-input', imports: [
333
- MatFormField,
334
- MatLabel,
335
- MatInput,
336
- MatHint,
337
- MatError$1,
338
- MatPrefix,
339
- MatSuffix,
340
- FormField,
341
- DynamicTextPipe,
342
- AsyncPipe,
343
- NgForgeControl,
344
- DfAddonSlot,
345
- ], hostDirectives: [NgForgeFieldHost, NgForgeAddons], template: `
346
- @let inputId = ngf.key() + '-input';
347
-
348
- <mat-form-field
349
- [appearance]="appearance()"
350
- [subscriptSizing]="subscriptSizing()"
351
- [floatLabel]="floatLabel()"
352
- [hideRequiredMarker]="hideRequiredMarker()"
353
- >
354
- @if (ngf.label()) {
355
- <mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>
356
- }
357
- @for (a of ngfa.prefixAddons(); track $index) {
358
- <df-addon-slot
359
- matPrefix
360
- [class.df-mat-addon-text]="a.type === 'text'"
361
- [addon]="a"
362
- [fieldInputs]="fieldInputs()"
363
- [hidden]="ngfa.hiddenSignalCache().get(a)"
364
- />
365
- }
366
- <input
367
- matInput
368
- ngForgeControl
369
- [id]="inputId"
370
- [formField]="ngf.field()"
371
- [type]="type()"
372
- [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
373
- [attr.tabindex]="ngf.tabIndex()"
374
- />
375
- @for (a of ngfa.suffixAddons(); track $index) {
376
- <df-addon-slot
377
- matSuffix
378
- [class.df-mat-addon-text]="a.type === 'text'"
379
- [addon]="a"
380
- [fieldInputs]="fieldInputs()"
381
- [hidden]="ngfa.hiddenSignalCache().get(a)"
382
- />
383
- }
384
- @if (ngf.errorsToDisplay()[0]; as error) {
385
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
386
- } @else if (props()?.hint; as hint) {
387
- <mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
388
- }
389
- </mat-form-field>
390
- `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
391
- {
392
- provide: MAT_INPUT_TYPE_OVERRIDE,
393
- useFactory: () => signal(undefined),
394
- },
395
- {
396
- provide: ADDON_PRESET_HANDLER,
397
- useFactory: () => {
398
- const typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);
399
- const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });
400
- const logger = inject(DynamicFormLogger);
401
- const host = inject(forwardRef(() => MatInputFieldComponent));
402
- return {
403
- run: (preset, ctx) => {
404
- const fieldKey = ctx.field.key;
405
- return runMatPresetAction(preset, ctx, {
406
- typeOverride,
407
- fieldValueSetter: ctx.setValue,
408
- fieldDefaultValueGetter: fsc && fieldKey ? () => fsc.defaultValues()?.[fieldKey] : undefined,
409
- baselineType: () => host.props()?.type,
410
- logger,
411
- });
412
- },
413
- };
414
- },
415
- },
416
- ], styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n", "mat-form-field{width:100%}:host([hidden]){display:none!important}\n"] }]
417
- }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
418
-
419
- class MatMultiCheckboxFieldComponent {
420
- ngf = injectNgForgeField();
421
- options = input([], /* @ts-ignore */
422
- ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
423
- props = input(/* @ts-ignore */
424
- ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
425
- valueViewModel = linkedSignal(() => {
426
- const currentValues = this.ngf.field()().value();
427
- return this.options().filter((option) => currentValues.includes(option.value));
428
- }, { ...(ngDevMode ? { debugName: "valueViewModel" } : /* istanbul ignore next */ {}), equal: isEqual });
429
- checkedValuesMap = computed(() => {
430
- const map = {};
431
- for (const opt of this.valueViewModel()) {
432
- map[String(opt.value)] = true;
433
- }
434
- return map;
435
- }, /* @ts-ignore */
436
- ...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : /* istanbul ignore next */ []));
437
- constructor() {
438
- explicitEffect([this.valueViewModel], ([selectedOptions]) => {
439
- const selectedValues = selectedOptions.map((option) => option.value);
440
- if (!isEqual(selectedValues, this.ngf.field()().value())) {
441
- this.ngf.field()().value.set(selectedValues);
442
- }
443
- });
444
- explicitEffect([this.options], ([options]) => {
445
- const values = options.map((option) => option.value);
446
- const uniqueValues = new Set(values);
447
- if (values.length !== uniqueValues.size) {
448
- const duplicates = values.filter((value, index) => values.indexOf(value) !== index);
449
- throw new Error(`Duplicate option values detected in mat-multi-checkbox: ${duplicates.join(', ')}`);
450
- }
451
- });
452
- }
453
- onCheckboxChange(option, checked) {
454
- this.valueViewModel.update((currentOptions) => {
455
- if (checked) {
456
- return currentOptions.some((opt) => opt.value === option.value) ? currentOptions : [...currentOptions, option];
457
- }
458
- else {
459
- return currentOptions.filter((opt) => opt.value !== option.value);
460
- }
461
- });
462
- }
463
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
464
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatMultiCheckboxFieldComponent, isStandalone: true, selector: "df-mat-multi-checkbox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
465
- @let f = ngf.field();
466
- @let checkboxGroupId = ngf.key() + '-checkbox-group';
467
- @let checked = checkedValuesMap();
468
-
469
- @if (ngf.label(); as label) {
470
- <div class="checkbox-group-label">{{ label | dynamicText | async }}</div>
471
- }
472
-
473
- <div
474
- [id]="checkboxGroupId"
475
- class="checkbox-group"
476
- role="group"
477
- [attr.aria-invalid]="ngf.ariaInvalid()"
478
- [attr.aria-required]="ngf.ariaRequired()"
479
- [attr.aria-describedby]="ngf.ariaDescribedBy()"
480
- >
481
- @for (option of options(); track option.value) {
482
- <mat-checkbox
483
- ngForgeControl="input[type='checkbox']"
484
- [checked]="checked['' + option.value]"
485
- [disabled]="f().disabled() || option.disabled"
486
- [color]="props()?.color || 'primary'"
487
- [labelPosition]="props()?.labelPosition || 'after'"
488
- (change)="onCheckboxChange(option, $event.checked)"
489
- >
490
- {{ option.label | dynamicText | async }}
491
- </mat-checkbox>
492
- }
493
- </div>
494
-
495
- @if (ngf.errorsToDisplay()[0]; as error) {
496
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
497
- } @else if (props()?.hint; as hint) {
498
- <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
499
- }
500
- `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\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: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
501
- }
502
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatMultiCheckboxFieldComponent, decorators: [{
503
- type: Component,
504
- args: [{ selector: 'df-mat-multi-checkbox', imports: [MatCheckbox, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
505
- @let f = ngf.field();
506
- @let checkboxGroupId = ngf.key() + '-checkbox-group';
507
- @let checked = checkedValuesMap();
508
-
509
- @if (ngf.label(); as label) {
510
- <div class="checkbox-group-label">{{ label | dynamicText | async }}</div>
511
- }
512
-
513
- <div
514
- [id]="checkboxGroupId"
515
- class="checkbox-group"
516
- role="group"
517
- [attr.aria-invalid]="ngf.ariaInvalid()"
518
- [attr.aria-required]="ngf.ariaRequired()"
519
- [attr.aria-describedby]="ngf.ariaDescribedBy()"
520
- >
521
- @for (option of options(); track option.value) {
522
- <mat-checkbox
523
- ngForgeControl="input[type='checkbox']"
524
- [checked]="checked['' + option.value]"
525
- [disabled]="f().disabled() || option.disabled"
526
- [color]="props()?.color || 'primary'"
527
- [labelPosition]="props()?.labelPosition || 'after'"
528
- (change)="onCheckboxChange(option, $event.checked)"
529
- >
530
- {{ option.label | dynamicText | async }}
531
- </mat-checkbox>
532
- }
533
- </div>
534
-
535
- @if (ngf.errorsToDisplay()[0]; as error) {
536
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
537
- } @else if (props()?.hint; as hint) {
538
- <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
539
- }
540
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n"] }]
541
- }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
542
-
543
- class MatRadioFieldComponent {
544
- ngf = injectNgForgeField();
545
- options = input([], /* @ts-ignore */
546
- ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
547
- props = input(/* @ts-ignore */
548
- ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
549
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
550
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatRadioFieldComponent, isStandalone: true, selector: "df-mat-radio", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
551
- @let f = ngf.field();
552
- @let radioGroupId = ngf.key() + '-radio-group';
553
-
554
- @if (ngf.label()) {
555
- <div class="radio-label">{{ ngf.label() | dynamicText | async }}</div>
556
- }
557
-
558
- <mat-radio-group
559
- [id]="radioGroupId"
560
- [formField]="f"
561
- [attr.aria-invalid]="ngf.ariaInvalid()"
562
- [attr.aria-required]="ngf.ariaRequired()"
563
- [attr.aria-describedby]="ngf.ariaDescribedBy()"
564
- >
565
- @for (option of options(); track option.value) {
566
- <mat-radio-button
567
- ngForgeControl="input[type='radio']"
568
- [value]="option.value"
569
- [disabled]="option.disabled || false"
570
- [color]="props()?.color || 'primary'"
571
- [labelPosition]="props()?.labelPosition || 'after'"
572
- >
573
- {{ option.label | dynamicText | async }}
574
- </mat-radio-button>
575
- }
576
- </mat-radio-group>
577
-
578
- @if (ngf.errorsToDisplay()[0]; as error) {
579
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
580
- } @else if (props()?.hint; as hint) {
581
- <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
582
- }
583
- `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\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: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
584
- }
585
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatRadioFieldComponent, decorators: [{
586
- type: Component,
587
- args: [{ selector: 'df-mat-radio', imports: [MatRadioGroup, MatRadioButton, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
588
- @let f = ngf.field();
589
- @let radioGroupId = ngf.key() + '-radio-group';
590
-
591
- @if (ngf.label()) {
592
- <div class="radio-label">{{ ngf.label() | dynamicText | async }}</div>
593
- }
594
-
595
- <mat-radio-group
596
- [id]="radioGroupId"
597
- [formField]="f"
598
- [attr.aria-invalid]="ngf.ariaInvalid()"
599
- [attr.aria-required]="ngf.ariaRequired()"
600
- [attr.aria-describedby]="ngf.ariaDescribedBy()"
601
- >
602
- @for (option of options(); track option.value) {
603
- <mat-radio-button
604
- ngForgeControl="input[type='radio']"
605
- [value]="option.value"
606
- [disabled]="option.disabled || false"
607
- [color]="props()?.color || 'primary'"
608
- [labelPosition]="props()?.labelPosition || 'after'"
609
- >
610
- {{ option.label | dynamicText | async }}
611
- </mat-radio-button>
612
- }
613
- </mat-radio-group>
614
-
615
- @if (ngf.errorsToDisplay()[0]; as error) {
616
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
617
- } @else if (props()?.hint; as hint) {
618
- <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
619
- }
620
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n"] }]
621
- }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
622
-
623
- class MatSelectFieldComponent {
624
- materialConfig = inject(MATERIAL_CONFIG, { optional: true });
625
- ngf = injectNgForgeField();
626
- ngfa = injectNgForgeAddons();
627
- options = input([], /* @ts-ignore */
628
- ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
629
- fieldInputs = input(/* @ts-ignore */
630
- ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
631
- props = input(/* @ts-ignore */
632
- ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
633
- appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
634
- ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
635
- subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', /* @ts-ignore */
636
- ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
637
- floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', /* @ts-ignore */
638
- ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
639
- hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, /* @ts-ignore */
640
- ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
641
- defaultCompare = Object.is;
642
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
643
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatSelectFieldComponent, isStandalone: true, selector: "df-mat-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }, { directive: i1.NgForgeAddons }], ngImport: i0, template: `
644
- @let selectId = ngf.key() + '-select';
645
-
646
- <mat-form-field
647
- [appearance]="appearance()"
648
- [subscriptSizing]="subscriptSizing()"
649
- [floatLabel]="floatLabel()"
650
- [hideRequiredMarker]="hideRequiredMarker()"
651
- >
652
- @if (ngf.label(); as label) {
653
- <mat-label>{{ label | dynamicText | async }}</mat-label>
654
- }
655
-
656
- @for (a of ngfa.prefixAddons(); track $index) {
657
- <df-addon-slot
658
- matPrefix
659
- [class.df-mat-addon-text]="a.type === 'text'"
660
- [addon]="a"
661
- [fieldInputs]="fieldInputs()"
662
- [hidden]="ngfa.hiddenSignalCache().get(a)"
663
- (click)="$event.stopPropagation()"
664
- />
665
- }
666
- <mat-select
667
- ngForgeControl
668
- [id]="selectId"
669
- [formField]="ngf.field()"
670
- [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
671
- [multiple]="props()?.multiple || false"
672
- [compareWith]="props()?.compareWith || defaultCompare"
673
- >
674
- @for (option of options(); track option.value) {
675
- <mat-option [value]="option.value" [disabled]="option.disabled || false">
676
- {{ option.label | dynamicText | async }}
677
- </mat-option>
678
- }
679
- </mat-select>
680
- @for (a of ngfa.suffixAddons(); track $index) {
681
- <df-addon-slot
682
- matSuffix
683
- [class.df-mat-addon-text]="a.type === 'text'"
684
- [addon]="a"
685
- [fieldInputs]="fieldInputs()"
686
- [hidden]="ngfa.hiddenSignalCache().get(a)"
687
- (click)="$event.stopPropagation()"
688
- />
689
- }
690
-
691
- @if (ngf.errorsToDisplay()[0]; as error) {
692
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
693
- } @else if (props()?.hint; as hint) {
694
- <mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
695
- }
696
- </mat-form-field>
697
- `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\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: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "component", type: DfAddonSlot, selector: "df-addon-slot", inputs: ["addon", "fieldInputs", "hidden"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
698
- }
699
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatSelectFieldComponent, decorators: [{
700
- type: Component,
701
- args: [{ selector: 'df-mat-select', imports: [
702
- MatFormField,
703
- MatLabel,
704
- MatSelect,
705
- MatOption,
706
- MatHint,
707
- FormField,
708
- MatError$1,
709
- MatPrefix,
710
- MatSuffix,
711
- DynamicTextPipe,
712
- AsyncPipe,
713
- NgForgeControl,
714
- DfAddonSlot,
715
- ], hostDirectives: [NgForgeFieldHost, NgForgeAddons], template: `
716
- @let selectId = ngf.key() + '-select';
717
-
718
- <mat-form-field
719
- [appearance]="appearance()"
720
- [subscriptSizing]="subscriptSizing()"
721
- [floatLabel]="floatLabel()"
722
- [hideRequiredMarker]="hideRequiredMarker()"
723
- >
724
- @if (ngf.label(); as label) {
725
- <mat-label>{{ label | dynamicText | async }}</mat-label>
726
- }
727
-
728
- @for (a of ngfa.prefixAddons(); track $index) {
729
- <df-addon-slot
730
- matPrefix
731
- [class.df-mat-addon-text]="a.type === 'text'"
732
- [addon]="a"
733
- [fieldInputs]="fieldInputs()"
734
- [hidden]="ngfa.hiddenSignalCache().get(a)"
735
- (click)="$event.stopPropagation()"
736
- />
737
- }
738
- <mat-select
739
- ngForgeControl
740
- [id]="selectId"
741
- [formField]="ngf.field()"
742
- [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
743
- [multiple]="props()?.multiple || false"
744
- [compareWith]="props()?.compareWith || defaultCompare"
745
- >
746
- @for (option of options(); track option.value) {
747
- <mat-option [value]="option.value" [disabled]="option.disabled || false">
748
- {{ option.label | dynamicText | async }}
749
- </mat-option>
750
- }
751
- </mat-select>
752
- @for (a of ngfa.suffixAddons(); track $index) {
753
- <df-addon-slot
754
- matSuffix
755
- [class.df-mat-addon-text]="a.type === 'text'"
756
- [addon]="a"
757
- [fieldInputs]="fieldInputs()"
758
- [hidden]="ngfa.hiddenSignalCache().get(a)"
759
- (click)="$event.stopPropagation()"
760
- />
761
- }
762
-
763
- @if (ngf.errorsToDisplay()[0]; as error) {
764
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
765
- } @else if (props()?.hint; as hint) {
766
- <mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
767
- }
768
- </mat-form-field>
769
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n", "mat-form-field{width:100%}\n"] }]
770
- }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
771
-
772
- class MatSliderFieldComponent {
773
- ngf = injectNgForgeField();
774
- step = input(/* @ts-ignore */
775
- ...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
776
- props = input(/* @ts-ignore */
777
- ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
778
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
779
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatSliderFieldComponent, isStandalone: true, selector: "df-mat-slider", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
780
- @let f = ngf.field();
781
- @let inputId = ngf.key() + '-input';
782
-
783
- @if (ngf.label(); as label) {
784
- <label class="slider-label" [for]="inputId">{{ label | dynamicText | async }}</label>
785
- }
786
-
787
- <mat-slider
788
- [min]="f().min?.() ?? 0"
789
- [max]="f().max?.() ?? 100"
790
- [step]="step() ?? props()?.step ?? 1"
791
- [discrete]="props()?.thumbLabel || props()?.showThumbLabel"
792
- [showTickMarks]="props()?.tickInterval !== undefined"
793
- [color]="props()?.color || 'primary'"
794
- class="slider-container"
795
- >
796
- <input matSliderThumb ngForgeControl [id]="inputId" [formField]="f" [attr.tabindex]="ngf.tabIndex()" />
797
- </mat-slider>
798
-
799
- @if (ngf.errorsToDisplay()[0]; as error) {
800
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
801
- } @else if (props()?.hint; as hint) {
802
- <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
803
- }
804
- `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\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: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
805
- }
806
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatSliderFieldComponent, decorators: [{
807
- type: Component,
808
- args: [{ selector: 'df-mat-slider', imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, FormField, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
809
- @let f = ngf.field();
810
- @let inputId = ngf.key() + '-input';
811
-
812
- @if (ngf.label(); as label) {
813
- <label class="slider-label" [for]="inputId">{{ label | dynamicText | async }}</label>
814
- }
815
-
816
- <mat-slider
817
- [min]="f().min?.() ?? 0"
818
- [max]="f().max?.() ?? 100"
819
- [step]="step() ?? props()?.step ?? 1"
820
- [discrete]="props()?.thumbLabel || props()?.showThumbLabel"
821
- [showTickMarks]="props()?.tickInterval !== undefined"
822
- [color]="props()?.color || 'primary'"
823
- class="slider-container"
824
- >
825
- <input matSliderThumb ngForgeControl [id]="inputId" [formField]="f" [attr.tabindex]="ngf.tabIndex()" />
826
- </mat-slider>
827
-
828
- @if (ngf.errorsToDisplay()[0]; as error) {
829
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
830
- } @else if (props()?.hint; as hint) {
831
- <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
832
- }
833
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n", ".slider-container{width:100%}\n"] }]
834
- }], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
835
-
836
- class MatButtonFieldComponent {
837
- action = injectNgForgeAction();
838
- props = input(/* @ts-ignore */
839
- ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
840
- buttonType = computed(() => this.props()?.type ?? 'button', /* @ts-ignore */
841
- ...(ngDevMode ? [{ debugName: "buttonType" }] : /* istanbul ignore next */ []));
842
- buttonTestId = computed(() => `${this.buttonType()}-${this.action.key()}`, /* @ts-ignore */
843
- ...(ngDevMode ? [{ debugName: "buttonTestId" }] : /* istanbul ignore next */ []));
844
- onClick() {
845
- if (this.buttonType() === 'submit')
846
- return;
847
- this.action.dispatch();
848
- }
849
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
850
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: MatButtonFieldComponent, isStandalone: true, selector: "df-mat-button", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeActionHost }], ngImport: i0, template: `
851
- @let buttonId = action.key() + '-button';
852
- <button
853
- mat-raised-button
854
- [id]="buttonId"
855
- [type]="buttonType()"
856
- [color]="props()?.color || 'primary'"
857
- [disabled]="action.disabled()"
858
- [attr.tabindex]="action.tabIndex()"
859
- [attr.data-testid]="buttonTestId()"
860
- (click)="onClick()"
861
- >
862
- {{ action.label() | dynamicText | async }}
863
- </button>
864
- `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\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 });
865
- }
866
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatButtonFieldComponent, decorators: [{
867
- type: Component,
868
- args: [{ selector: 'df-mat-button', imports: [MatButton, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeActionHost], template: `
869
- @let buttonId = action.key() + '-button';
870
- <button
871
- mat-raised-button
872
- [id]="buttonId"
873
- [type]="buttonType()"
874
- [color]="props()?.color || 'primary'"
875
- [disabled]="action.disabled()"
876
- [attr.tabindex]="action.tabIndex()"
877
- [attr.data-testid]="buttonTestId()"
878
- (click)="onClick()"
879
- >
880
- {{ action.label() | dynamicText | async }}
881
- </button>
882
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n", "button{min-width:fit-content}\n"] }]
883
- }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
884
-
885
-
886
- class MatTextareaFieldComponent {
887
- materialConfig = inject(MATERIAL_CONFIG, { optional: true });
888
- ngf = injectNgForgeField();
889
- ngfa = injectNgForgeAddons();
890
- props = input(/* @ts-ignore */
891
- ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
892
- fieldInputs = input(/* @ts-ignore */
893
- ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
894
- appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
895
- ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
896
- subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', /* @ts-ignore */
897
- ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
898
- floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', /* @ts-ignore */
899
- ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
900
- hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, /* @ts-ignore */
901
- ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
902
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
903
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatTextareaFieldComponent, isStandalone: true, selector: "df-mat-textarea", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }, { directive: i1.NgForgeAddons }], ngImport: i0, template: `
904
- @let textareaId = ngf.key() + '-textarea';
905
-
906
- <mat-form-field
907
- [appearance]="appearance()"
908
- [subscriptSizing]="subscriptSizing()"
909
- [floatLabel]="floatLabel()"
910
- [hideRequiredMarker]="hideRequiredMarker()"
911
- >
912
- @if (ngf.label()) {
913
- <mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>
914
- }
915
-
916
- @for (a of ngfa.prefixAddons(); track $index) {
917
- <df-addon-slot
918
- matPrefix
919
- [class.df-mat-addon-text]="a.type === 'text'"
920
- [addon]="a"
921
- [fieldInputs]="fieldInputs()"
922
- [hidden]="ngfa.hiddenSignalCache().get(a)"
923
- />
924
- }
925
- <textarea
926
- ngForgeControl
927
- matInput
928
- [id]="textareaId"
929
- [formField]="ngf.field()"
930
- [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
931
- [attr.tabindex]="ngf.tabIndex()"
932
- [style.resize]="props()?.resize || 'vertical'"
933
- ></textarea>
934
- @for (a of ngfa.suffixAddons(); track $index) {
935
- <df-addon-slot
936
- matSuffix
937
- [class.df-mat-addon-text]="a.type === 'text'"
938
- [addon]="a"
939
- [fieldInputs]="fieldInputs()"
940
- [hidden]="ngfa.hiddenSignalCache().get(a)"
941
- />
942
- }
943
-
944
- @if (ngf.errorsToDisplay()[0]; as error) {
945
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
946
- } @else if (props()?.hint; as hint) {
947
- <mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
948
- }
949
- </mat-form-field>
950
- `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\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: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "component", type: DfAddonSlot, selector: "df-addon-slot", inputs: ["addon", "fieldInputs", "hidden"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
951
- }
952
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatTextareaFieldComponent, decorators: [{
953
- type: Component,
954
- args: [{ selector: 'df-mat-textarea', imports: [
955
- MatFormField,
956
- MatLabel,
957
- MatInput,
958
- MatHint,
959
- FormField,
960
- MatError$1,
961
- MatPrefix,
962
- MatSuffix,
963
- DynamicTextPipe,
964
- AsyncPipe,
965
- NgForgeControl,
966
- DfAddonSlot,
967
- ], hostDirectives: [NgForgeFieldHost, NgForgeAddons], template: `
968
- @let textareaId = ngf.key() + '-textarea';
969
-
970
- <mat-form-field
971
- [appearance]="appearance()"
972
- [subscriptSizing]="subscriptSizing()"
973
- [floatLabel]="floatLabel()"
974
- [hideRequiredMarker]="hideRequiredMarker()"
975
- >
976
- @if (ngf.label()) {
977
- <mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>
978
- }
979
-
980
- @for (a of ngfa.prefixAddons(); track $index) {
981
- <df-addon-slot
982
- matPrefix
983
- [class.df-mat-addon-text]="a.type === 'text'"
984
- [addon]="a"
985
- [fieldInputs]="fieldInputs()"
986
- [hidden]="ngfa.hiddenSignalCache().get(a)"
987
- />
988
- }
989
- <textarea
990
- ngForgeControl
991
- matInput
992
- [id]="textareaId"
993
- [formField]="ngf.field()"
994
- [placeholder]="(ngf.placeholder() | dynamicText | async) ?? ''"
995
- [attr.tabindex]="ngf.tabIndex()"
996
- [style.resize]="props()?.resize || 'vertical'"
997
- ></textarea>
998
- @for (a of ngfa.suffixAddons(); track $index) {
999
- <df-addon-slot
1000
- matSuffix
1001
- [class.df-mat-addon-text]="a.type === 'text'"
1002
- [addon]="a"
1003
- [fieldInputs]="fieldInputs()"
1004
- [hidden]="ngfa.hiddenSignalCache().get(a)"
1005
- />
1006
- }
1007
-
1008
- @if (ngf.errorsToDisplay()[0]; as error) {
1009
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
1010
- } @else if (props()?.hint; as hint) {
1011
- <mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
1012
- }
1013
- </mat-form-field>
1014
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n", "mat-form-field{width:100%}\n"] }]
1015
- }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
1016
-
1017
- class MatToggleFieldComponent {
1018
- materialConfig = inject(MATERIAL_CONFIG, { optional: true });
1019
- ngf = injectNgForgeField();
1020
- props = input(/* @ts-ignore */
1021
- ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
1022
- disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, /* @ts-ignore */
1023
- ...(ngDevMode ? [{ debugName: "disableRipple" }] : /* istanbul ignore next */ []));
1024
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1025
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatToggleFieldComponent, isStandalone: true, selector: "df-mat-toggle", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
1026
- @let f = ngf.field();
1027
- @let toggleId = ngf.key() + '-toggle';
1028
-
1029
- <mat-slide-toggle
1030
- ngForgeControl="button[role='switch']"
1031
- [id]="toggleId"
1032
- [formField]="f"
1033
- [color]="props()?.color || 'primary'"
1034
- [labelPosition]="props()?.labelPosition || 'after'"
1035
- [hideIcon]="props()?.hideIcon || false"
1036
- [disableRipple]="disableRipple()"
1037
- [required]="!!f().required()"
1038
- [tabIndex]="ngf.tabIndex() ?? 0"
1039
- class="toggle-container"
1040
- >
1041
- {{ ngf.label() | dynamicText | async }}
1042
- </mat-slide-toggle>
1043
-
1044
- @if (ngf.errorsToDisplay()[0]; as error) {
1045
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
1046
- } @else if (props()?.hint; as hint) {
1047
- <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
1048
- }
1049
- `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\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: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1050
- }
1051
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatToggleFieldComponent, decorators: [{
1052
- type: Component,
1053
- args: [{ selector: 'df-mat-toggle', imports: [MatSlideToggle, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
1054
- @let f = ngf.field();
1055
- @let toggleId = ngf.key() + '-toggle';
1056
-
1057
- <mat-slide-toggle
1058
- ngForgeControl="button[role='switch']"
1059
- [id]="toggleId"
1060
- [formField]="f"
1061
- [color]="props()?.color || 'primary'"
1062
- [labelPosition]="props()?.labelPosition || 'after'"
1063
- [hideIcon]="props()?.hideIcon || false"
1064
- [disableRipple]="disableRipple()"
1065
- [required]="!!f().required()"
1066
- [tabIndex]="ngf.tabIndex() ?? 0"
1067
- class="toggle-container"
1068
- >
1069
- {{ ngf.label() | dynamicText | async }}
1070
- </mat-slide-toggle>
1071
-
1072
- @if (ngf.errorsToDisplay()[0]; as error) {
1073
- <mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
1074
- } @else if (props()?.hint; as hint) {
1075
- <div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
1076
- }
1077
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\n"] }]
1078
- }], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
1079
-
5
+ import { DynamicFormError } from '@ng-forge/dynamic-forms';
1080
6
 
1081
7
  const MatField = {
1082
8
  Input: 'input',
@@ -1298,7 +224,7 @@ const MATERIAL_FIELD_TYPES = [
1298
224
 
1299
225
  const MATERIAL_FIELD_ERRORS_WRAPPER = {
1300
226
  wrapperName: 'field-errors',
1301
- loadComponent: () => import('./ng-forge-dynamic-forms-material-mat-field-errors-wrapper.component-QsDJRuUx.mjs'),
227
+ loadComponent: () => import('./ng-forge-dynamic-forms-material-mat-field-errors-wrapper.component-Dz2-IbBh.mjs'),
1302
228
  rendersFieldErrors: true,
1303
229
  };
1304
230
  function withMaterialFields(config) {
@@ -1345,126 +271,9 @@ function withMaterialAddons() {
1345
271
  };
1346
272
  }
1347
273
 
1348
- class MatIconAddonComponent {
1349
- addon = input.required(/* @ts-ignore */
1350
- ...(ngDevMode ? [{ debugName: "addon" }] : /* istanbul ignore next */ []));
1351
- fieldInputs = input(/* @ts-ignore */
1352
- ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
1353
- ariaLabel = computed(() => this.addon().ariaLabel, /* @ts-ignore */
1354
- ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
1355
- hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined, /* @ts-ignore */
1356
- ...(ngDevMode ? [{ debugName: "hasAriaLabel" }] : /* istanbul ignore next */ []));
1357
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatIconAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1358
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: MatIconAddonComponent, isStandalone: true, selector: "df-mat-icon-addon", inputs: { addon: { classPropertyName: "addon", publicName: "addon", isSignal: true, isRequired: true, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "hasAriaLabel() ? null : \"true\"" } }, ngImport: i0, template: `<mat-icon [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null">{{ addon().icon }}</mat-icon>`, isInline: true, dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1359
- }
1360
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatIconAddonComponent, decorators: [{
1361
- type: Component,
1362
- args: [{
1363
- selector: 'df-mat-icon-addon',
1364
- imports: [MatIcon, AsyncPipe, DynamicTextPipe],
1365
- template: `<mat-icon [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null">{{ addon().icon }}</mat-icon>`,
1366
- host: {
1367
- '[attr.aria-hidden]': 'hasAriaLabel() ? null : "true"',
1368
- },
1369
- changeDetection: ChangeDetectionStrategy.OnPush,
1370
- }]
1371
- }], propDecorators: { addon: [{ type: i0.Input, args: [{ isSignal: true, alias: "addon", required: true }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
1372
-
1373
- class MatButtonAddonComponent {
1374
- action = injectNgForgeAddonAction();
1375
- addon = this.action.addon;
1376
- label = computed(() => this.addon().label, /* @ts-ignore */
1377
- ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
1378
- ariaLabel = computed(() => this.addon().ariaLabel, /* @ts-ignore */
1379
- ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
1380
- isIconOnly = computed(() => {
1381
- const a = this.addon();
1382
- return !!a.icon && !a.label;
1383
- }, /* @ts-ignore */
1384
- ...(ngDevMode ? [{ debugName: "isIconOnly" }] : /* istanbul ignore next */ []));
1385
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatButtonAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1386
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatButtonAddonComponent, isStandalone: true, selector: "df-mat-button-addon", hostDirectives: [{ directive: i1.NgForgeAddonAction }], ngImport: i0, template: `
1387
- @if (isIconOnly()) {
1388
- <button
1389
- mat-icon-button
1390
- type="button"
1391
- [color]="addon().color ?? null"
1392
- [disabled]="action.disabled() || action.loading()"
1393
- [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"
1394
- [attr.aria-busy]="action.loading() || null"
1395
- (click)="action.dispatch()"
1396
- >
1397
- @if (action.loading()) {
1398
- <mat-progress-spinner mode="indeterminate" diameter="18" aria-hidden="true" />
1399
- <span class="df-mat-sr-only" role="status">Loading…</span>
1400
- } @else {
1401
- <mat-icon aria-hidden="true">{{ addon().icon }}</mat-icon>
1402
- }
1403
- </button>
1404
- } @else {
1405
- <button
1406
- mat-button
1407
- type="button"
1408
- [color]="addon().color ?? null"
1409
- [disabled]="action.disabled() || action.loading()"
1410
- [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"
1411
- [attr.aria-busy]="action.loading() || null"
1412
- (click)="action.dispatch()"
1413
- >
1414
- @if (action.loading()) {
1415
- <mat-progress-spinner mode="indeterminate" diameter="18" aria-hidden="true" />
1416
- <span class="df-mat-sr-only" role="status">Loading…</span>
1417
- } @else if (addon().icon; as icon) {
1418
- <mat-icon aria-hidden="true">{{ icon }}</mat-icon>
1419
- }
1420
- {{ label() | dynamicText | async }}
1421
- </button>
1422
- }
1423
- `, isInline: true, styles: [".df-mat-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\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: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1424
- }
1425
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatButtonAddonComponent, decorators: [{
1426
- type: Component,
1427
- args: [{ selector: 'df-mat-button-addon', imports: [MatButton, MatIconButton, MatIcon, MatProgressSpinner, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeAddonAction], template: `
1428
- @if (isIconOnly()) {
1429
- <button
1430
- mat-icon-button
1431
- type="button"
1432
- [color]="addon().color ?? null"
1433
- [disabled]="action.disabled() || action.loading()"
1434
- [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"
1435
- [attr.aria-busy]="action.loading() || null"
1436
- (click)="action.dispatch()"
1437
- >
1438
- @if (action.loading()) {
1439
- <mat-progress-spinner mode="indeterminate" diameter="18" aria-hidden="true" />
1440
- <span class="df-mat-sr-only" role="status">Loading…</span>
1441
- } @else {
1442
- <mat-icon aria-hidden="true">{{ addon().icon }}</mat-icon>
1443
- }
1444
- </button>
1445
- } @else {
1446
- <button
1447
- mat-button
1448
- type="button"
1449
- [color]="addon().color ?? null"
1450
- [disabled]="action.disabled() || action.loading()"
1451
- [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null"
1452
- [attr.aria-busy]="action.loading() || null"
1453
- (click)="action.dispatch()"
1454
- >
1455
- @if (action.loading()) {
1456
- <mat-progress-spinner mode="indeterminate" diameter="18" aria-hidden="true" />
1457
- <span class="df-mat-sr-only" role="status">Loading…</span>
1458
- } @else if (addon().icon; as icon) {
1459
- <mat-icon aria-hidden="true">{{ icon }}</mat-icon>
1460
- }
1461
- {{ label() | dynamicText | async }}
1462
- </button>
1463
- }
1464
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-mat-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
1465
- }] });
1466
274
 
275
+ /* eslint-disable @nx/enforce-module-boundaries -- Package self-imports preserve ng-packagr secondary entry points. */
1467
276
 
1468
277
 
1469
- export { MATERIAL_FIELD_TYPES, MatButtonAddonComponent, MatButtonFieldComponent, MatCheckboxFieldComponent, MatDatepickerFieldComponent, MatField, MatIconAddonComponent, MatInputFieldComponent, MatMultiCheckboxFieldComponent, MatRadioFieldComponent, MatSelectFieldComponent, MatSliderFieldComponent, MatTextareaFieldComponent, MatToggleFieldComponent, withMaterialAddons, withMaterialFields };
278
+ export { MATERIAL_FIELD_TYPES, MatField, withMaterialAddons, withMaterialFields };
1470
279
  //# sourceMappingURL=ng-forge-dynamic-forms-material.mjs.map