@ng-forge/dynamic-forms-material 0.10.0-next.4 → 1.0.0-rc.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 (4) hide show
  1. package/fesm2022/ng-forge-dynamic-forms-material.mjs +130 -83
  2. package/fesm2022/ng-forge-dynamic-forms-material.mjs.map +1 -1
  3. package/package.json +8 -8
  4. package/types/ng-forge-dynamic-forms-material.d.ts +3 -21
package/fesm2022/ng-forge-dynamic-forms-material.mjs CHANGED
@@ -24,10 +24,12 @@ const MATERIAL_CONFIG = new InjectionToken('MATERIAL_CONFIG');
24
24
  class MatCheckboxFieldComponent {
25
25
  materialConfig = inject(MATERIAL_CONFIG, { optional: true });
26
26
  ngf = injectNgForgeField();
27
- props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
28
- disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, ...(ngDevMode ? [{ debugName: "disableRipple" }] : /* istanbul ignore next */ []));
29
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
30
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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: `
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.0", ngImport: i0, type: MatCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
32
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: `
31
33
  @let f = ngf.field();
32
34
  @let checkboxId = ngf.key() + '-checkbox';
33
35
 
@@ -53,7 +55,7 @@ class MatCheckboxFieldComponent {
53
55
  }
54
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)}\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 });
55
57
  }
56
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatCheckboxFieldComponent, decorators: [{
58
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatCheckboxFieldComponent, decorators: [{
57
59
  type: Component,
58
60
  args: [{ selector: 'df-mat-checkbox', imports: [MatCheckbox, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
59
61
  @let f = ngf.field();
@@ -90,16 +92,24 @@ var matCheckbox_component = /*#__PURE__*/Object.freeze({
90
92
  class MatDatepickerFieldComponent {
91
93
  materialConfig = inject(MATERIAL_CONFIG, { optional: true });
92
94
  ngf = injectNgForgeField();
93
- minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
94
- maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
95
- startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
96
- props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
97
- appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
98
- subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
99
- floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
100
- hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
101
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
102
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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 } }, providers: [provideNativeDateAdapter()], hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
95
+ minDate = input(null, /* @ts-ignore */
96
+ ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
97
+ maxDate = input(null, /* @ts-ignore */
98
+ ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
99
+ startAt = input(null, /* @ts-ignore */
100
+ ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
101
+ props = input(/* @ts-ignore */
102
+ ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
103
+ appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
104
+ ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
105
+ subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', /* @ts-ignore */
106
+ ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
107
+ floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', /* @ts-ignore */
108
+ ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
109
+ hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, /* @ts-ignore */
110
+ ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
111
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
112
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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 } }, providers: [provideNativeDateAdapter()], hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
103
113
  @let inputId = ngf.key() + '-input';
104
114
 
105
115
  <mat-form-field
@@ -135,7 +145,7 @@ class MatDatepickerFieldComponent {
135
145
  </mat-form-field>
136
146
  `, 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)}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
137
147
  }
138
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatDatepickerFieldComponent, decorators: [{
148
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatDatepickerFieldComponent, decorators: [{
139
149
  type: Component,
140
150
  args: [{ selector: 'df-mat-datepicker', imports: [
141
151
  MatFormField,
@@ -203,16 +213,23 @@ class MatInputFieldComponent {
203
213
  materialConfig = inject(MATERIAL_CONFIG, { optional: true });
204
214
  ngf = injectNgForgeField();
205
215
  ngfa = injectNgForgeAddons();
206
- props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
207
- fieldInputs = input(...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
216
+ props = input(/* @ts-ignore */
217
+ ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
218
+ fieldInputs = input(/* @ts-ignore */
219
+ ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
208
220
  typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);
209
- appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
210
- subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
211
- floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
212
- hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
213
- type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
214
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
215
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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: [
221
+ appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
222
+ ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
223
+ subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', /* @ts-ignore */
224
+ ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
225
+ floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', /* @ts-ignore */
226
+ ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
227
+ hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, /* @ts-ignore */
228
+ ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
229
+ type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text', /* @ts-ignore */
230
+ ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
231
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
232
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: [
216
233
  {
217
234
  provide: MAT_INPUT_TYPE_OVERRIDE,
218
235
  useFactory: () => signal(undefined),
@@ -285,7 +302,7 @@ class MatInputFieldComponent {
285
302
  </mat-form-field>
286
303
  `, 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)}\n", "mat-form-field{width:100%}:host([hidden]){display:none!important}: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: 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 });
287
304
  }
288
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatInputFieldComponent, decorators: [{
305
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatInputFieldComponent, decorators: [{
289
306
  type: Component,
290
307
  args: [{ selector: 'df-mat-input', imports: [
291
308
  MatFormField,
@@ -381,8 +398,10 @@ var matInput_component = /*#__PURE__*/Object.freeze({
381
398
 
382
399
  class MatMultiCheckboxFieldComponent {
383
400
  ngf = injectNgForgeField();
384
- options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
385
- props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
401
+ options = input([], /* @ts-ignore */
402
+ ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
403
+ props = input(/* @ts-ignore */
404
+ ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
386
405
  valueViewModel = linkedSignal(() => {
387
406
  const currentValues = this.ngf.field()().value();
388
407
  return this.options().filter((option) => currentValues.includes(option.value));
@@ -393,7 +412,8 @@ class MatMultiCheckboxFieldComponent {
393
412
  map[String(opt.value)] = true;
394
413
  }
395
414
  return map;
396
- }, ...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : /* istanbul ignore next */ []));
415
+ }, /* @ts-ignore */
416
+ ...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : /* istanbul ignore next */ []));
397
417
  constructor() {
398
418
  explicitEffect([this.valueViewModel], ([selectedOptions]) => {
399
419
  const selectedValues = selectedOptions.map((option) => option.value);
@@ -420,8 +440,8 @@ class MatMultiCheckboxFieldComponent {
420
440
  }
421
441
  });
422
442
  }
423
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
424
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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: `
443
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
444
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: `
425
445
  @let f = ngf.field();
426
446
  @let checkboxGroupId = ngf.key() + '-checkbox-group';
427
447
  @let checked = checkedValuesMap();
@@ -459,7 +479,7 @@ class MatMultiCheckboxFieldComponent {
459
479
  }
460
480
  `, 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)}\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 });
461
481
  }
462
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatMultiCheckboxFieldComponent, decorators: [{
482
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatMultiCheckboxFieldComponent, decorators: [{
463
483
  type: Component,
464
484
  args: [{ selector: 'df-mat-multi-checkbox', imports: [MatCheckbox, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
465
485
  @let f = ngf.field();
@@ -507,10 +527,12 @@ var matMultiCheckbox_component = /*#__PURE__*/Object.freeze({
507
527
 
508
528
  class MatRadioFieldComponent {
509
529
  ngf = injectNgForgeField();
510
- options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
511
- props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
512
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
513
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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: `
530
+ options = input([], /* @ts-ignore */
531
+ ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
532
+ props = input(/* @ts-ignore */
533
+ ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
534
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
535
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: `
514
536
  @let f = ngf.field();
515
537
  @let radioGroupId = ngf.key() + '-radio-group';
516
538
 
@@ -545,7 +567,7 @@ class MatRadioFieldComponent {
545
567
  }
546
568
  `, 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)}\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 });
547
569
  }
548
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatRadioFieldComponent, decorators: [{
570
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatRadioFieldComponent, decorators: [{
549
571
  type: Component,
550
572
  args: [{ selector: 'df-mat-radio', imports: [MatRadioGroup, MatRadioButton, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
551
573
  @let f = ngf.field();
@@ -591,15 +613,21 @@ var matRadio_component = /*#__PURE__*/Object.freeze({
591
613
  class MatSelectFieldComponent {
592
614
  materialConfig = inject(MATERIAL_CONFIG, { optional: true });
593
615
  ngf = injectNgForgeField();
594
- options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
595
- props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
596
- appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
597
- subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
598
- floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
599
- hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
616
+ options = input([], /* @ts-ignore */
617
+ ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
618
+ props = input(/* @ts-ignore */
619
+ ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
620
+ appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
621
+ ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
622
+ subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', /* @ts-ignore */
623
+ ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
624
+ floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', /* @ts-ignore */
625
+ ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
626
+ hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, /* @ts-ignore */
627
+ ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
600
628
  defaultCompare = Object.is;
601
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
602
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: MatSelectFieldComponent, isStandalone: true, selector: "df-mat-select", 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: `
629
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
630
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: MatSelectFieldComponent, isStandalone: true, selector: "df-mat-select", 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: `
603
631
  @let selectId = ngf.key() + '-select';
604
632
 
605
633
  <mat-form-field
@@ -635,7 +663,7 @@ class MatSelectFieldComponent {
635
663
  </mat-form-field>
636
664
  `, 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)}\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: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
637
665
  }
638
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatSelectFieldComponent, decorators: [{
666
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatSelectFieldComponent, decorators: [{
639
667
  type: Component,
640
668
  args: [{ selector: 'df-mat-select', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, FormField, MatError$1, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
641
669
  @let selectId = ngf.key() + '-select';
@@ -681,10 +709,12 @@ var matSelect_component = /*#__PURE__*/Object.freeze({
681
709
 
682
710
  class MatSliderFieldComponent {
683
711
  ngf = injectNgForgeField();
684
- step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
685
- props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
686
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
687
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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: `
712
+ step = input(/* @ts-ignore */
713
+ ...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
714
+ props = input(/* @ts-ignore */
715
+ ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
716
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
717
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: `
688
718
  @let f = ngf.field();
689
719
  @let inputId = ngf.key() + '-input';
690
720
 
@@ -711,7 +741,7 @@ class MatSliderFieldComponent {
711
741
  }
712
742
  `, 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)}\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 });
713
743
  }
714
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatSliderFieldComponent, decorators: [{
744
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatSliderFieldComponent, decorators: [{
715
745
  type: Component,
716
746
  args: [{ selector: 'df-mat-slider', imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, FormField, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
717
747
  @let f = ngf.field();
@@ -748,16 +778,19 @@ var matSlider_component = /*#__PURE__*/Object.freeze({
748
778
 
749
779
  class MatButtonFieldComponent {
750
780
  action = injectNgForgeAction();
751
- props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
752
- buttonType = computed(() => this.props()?.type ?? 'button', ...(ngDevMode ? [{ debugName: "buttonType" }] : /* istanbul ignore next */ []));
753
- buttonTestId = computed(() => `${this.buttonType()}-${this.action.key()}`, ...(ngDevMode ? [{ debugName: "buttonTestId" }] : /* istanbul ignore next */ []));
781
+ props = input(/* @ts-ignore */
782
+ ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
783
+ buttonType = computed(() => this.props()?.type ?? 'button', /* @ts-ignore */
784
+ ...(ngDevMode ? [{ debugName: "buttonType" }] : /* istanbul ignore next */ []));
785
+ buttonTestId = computed(() => `${this.buttonType()}-${this.action.key()}`, /* @ts-ignore */
786
+ ...(ngDevMode ? [{ debugName: "buttonTestId" }] : /* istanbul ignore next */ []));
754
787
  onClick() {
755
788
  if (this.buttonType() === 'submit')
756
789
  return;
757
790
  this.action.dispatch();
758
791
  }
759
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
760
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", 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: `
792
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
793
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", 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: `
761
794
  @let buttonId = action.key() + '-button';
762
795
  <button
763
796
  mat-raised-button
@@ -773,7 +806,7 @@ class MatButtonFieldComponent {
773
806
  </button>
774
807
  `, 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)}\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 });
775
808
  }
776
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatButtonFieldComponent, decorators: [{
809
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatButtonFieldComponent, decorators: [{
777
810
  type: Component,
778
811
  args: [{ selector: 'df-mat-button', imports: [MatButton, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeActionHost], template: `
779
812
  @let buttonId = action.key() + '-button';
@@ -801,13 +834,18 @@ var matButton_component = /*#__PURE__*/Object.freeze({
801
834
  class MatTextareaFieldComponent {
802
835
  materialConfig = inject(MATERIAL_CONFIG, { optional: true });
803
836
  ngf = injectNgForgeField();
804
- props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
805
- appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
806
- subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
807
- floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
808
- hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
809
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
810
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: MatTextareaFieldComponent, isStandalone: true, selector: "df-mat-textarea", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
837
+ props = input(/* @ts-ignore */
838
+ ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
839
+ appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
840
+ ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
841
+ subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', /* @ts-ignore */
842
+ ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
843
+ floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto', /* @ts-ignore */
844
+ ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
845
+ hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, /* @ts-ignore */
846
+ ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
847
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
848
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: MatTextareaFieldComponent, isStandalone: true, selector: "df-mat-textarea", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
811
849
  @let textareaId = ngf.key() + '-textarea';
812
850
 
813
851
  <mat-form-field
@@ -838,7 +876,7 @@ class MatTextareaFieldComponent {
838
876
  </mat-form-field>
839
877
  `, 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)}\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: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
840
878
  }
841
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatTextareaFieldComponent, decorators: [{
879
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatTextareaFieldComponent, decorators: [{
842
880
  type: Component,
843
881
  args: [{ selector: 'df-mat-textarea', imports: [MatFormField, MatLabel, MatInput, MatHint, FormField, MatError$1, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
844
882
  @let textareaId = ngf.key() + '-textarea';
@@ -880,10 +918,12 @@ var matTextarea_component = /*#__PURE__*/Object.freeze({
880
918
  class MatToggleFieldComponent {
881
919
  materialConfig = inject(MATERIAL_CONFIG, { optional: true });
882
920
  ngf = injectNgForgeField();
883
- props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
884
- disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, ...(ngDevMode ? [{ debugName: "disableRipple" }] : /* istanbul ignore next */ []));
885
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
886
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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: `
921
+ props = input(/* @ts-ignore */
922
+ ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
923
+ disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, /* @ts-ignore */
924
+ ...(ngDevMode ? [{ debugName: "disableRipple" }] : /* istanbul ignore next */ []));
925
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
926
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: `
887
927
  @let f = ngf.field();
888
928
  @let toggleId = ngf.key() + '-toggle';
889
929
 
@@ -909,7 +949,7 @@ class MatToggleFieldComponent {
909
949
  }
910
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)}\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 });
911
951
  }
912
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatToggleFieldComponent, decorators: [{
952
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatToggleFieldComponent, decorators: [{
913
953
  type: Component,
914
954
  args: [{ selector: 'df-mat-toggle', imports: [MatSlideToggle, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
915
955
  @let f = ngf.field();
@@ -1190,14 +1230,18 @@ function withMaterialAddons() {
1190
1230
  }
1191
1231
 
1192
1232
  class MatIconAddonComponent {
1193
- addon = input.required(...(ngDevMode ? [{ debugName: "addon" }] : /* istanbul ignore next */ []));
1194
- fieldInputs = input(...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
1195
- ariaLabel = computed(() => this.addon().ariaLabel, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
1196
- hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined, ...(ngDevMode ? [{ debugName: "hasAriaLabel" }] : /* istanbul ignore next */ []));
1197
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatIconAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1198
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", 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 });
1233
+ addon = input.required(/* @ts-ignore */
1234
+ ...(ngDevMode ? [{ debugName: "addon" }] : /* istanbul ignore next */ []));
1235
+ fieldInputs = input(/* @ts-ignore */
1236
+ ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
1237
+ ariaLabel = computed(() => this.addon().ariaLabel, /* @ts-ignore */
1238
+ ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
1239
+ hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined, /* @ts-ignore */
1240
+ ...(ngDevMode ? [{ debugName: "hasAriaLabel" }] : /* istanbul ignore next */ []));
1241
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatIconAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1242
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", 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 });
1199
1243
  }
1200
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatIconAddonComponent, decorators: [{
1244
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatIconAddonComponent, decorators: [{
1201
1245
  type: Component,
1202
1246
  args: [{
1203
1247
  selector: 'df-mat-icon-addon',
@@ -1218,14 +1262,17 @@ var matIconAddon_component = /*#__PURE__*/Object.freeze({
1218
1262
  class MatButtonAddonComponent {
1219
1263
  action = injectNgForgeAddonAction();
1220
1264
  addon = this.action.addon;
1221
- label = computed(() => this.addon().label, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
1222
- ariaLabel = computed(() => this.addon().ariaLabel, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
1265
+ label = computed(() => this.addon().label, /* @ts-ignore */
1266
+ ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
1267
+ ariaLabel = computed(() => this.addon().ariaLabel, /* @ts-ignore */
1268
+ ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
1223
1269
  isIconOnly = computed(() => {
1224
1270
  const a = this.addon();
1225
1271
  return !!a.icon && !a.label;
1226
- }, ...(ngDevMode ? [{ debugName: "isIconOnly" }] : /* istanbul ignore next */ []));
1227
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatButtonAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1228
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: MatButtonAddonComponent, isStandalone: true, selector: "df-mat-button-addon", hostDirectives: [{ directive: i1.NgForgeAddonAction }], ngImport: i0, template: `
1272
+ }, /* @ts-ignore */
1273
+ ...(ngDevMode ? [{ debugName: "isIconOnly" }] : /* istanbul ignore next */ []));
1274
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatButtonAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1275
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: MatButtonAddonComponent, isStandalone: true, selector: "df-mat-button-addon", hostDirectives: [{ directive: i1.NgForgeAddonAction }], ngImport: i0, template: `
1229
1276
  @if (isIconOnly()) {
1230
1277
  <button
1231
1278
  mat-icon-button
@@ -1264,7 +1311,7 @@ class MatButtonAddonComponent {
1264
1311
  }
1265
1312
  `, 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 });
1266
1313
  }
1267
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MatButtonAddonComponent, decorators: [{
1314
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatButtonAddonComponent, decorators: [{
1268
1315
  type: Component,
1269
1316
  args: [{ selector: 'df-mat-button-addon', imports: [MatButton, MatIconButton, MatIcon, MatProgressSpinner, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeAddonAction], template: `
1270
1317
  @if (isIconOnly()) {
package/fesm2022/ng-forge-dynamic-forms-material.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ng-forge-dynamic-forms-material.mjs","mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0Cc;;;;;;AAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/BT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiEE;;;AAKH;AACA;AACA;;;;;;;AAPU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/DT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDT;;;;;;;;;ACxDD;AACF;;;;ACgKc;;;;;AAQZ;IAQiB;;;;;;;AAhBE;AAlCjB;AACE;AACA;AACD;AACD;gFAME;;AAEE;AACA;AACA;oBAEA;;AAEE;AACE;AACA;;;;;;AAOC;;;;AAIR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/IO;;;;;;;;;;;;;AAcT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGC;AACE;AACA;AACD;AACD;4IAME;;AAEE;AACA;AACA;;;AAIE;AACE;AACA;;;;;;AAOC;;;;AAIR;AACF;;;;;;;;ACjHW;;AAGH;;AAGT;AAEI;;AAEF;IAKO;;;;;AAKP;AACF;AAEA;AACE;AACE;AAEA;AACE;;AAEJ;AAEA;AACE;AACA;;;AAIE;;AAEJ;;;;;AAMI;;;AAEA;;AAEJ;;;AAlDiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA3CT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACwCE;;AAGH;;;AAHU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAJlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACcW;;;AAKH;;;;;;AAWT;;AAhBmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACDW;;;;;AAAO;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACDW;;;AAKH;;;AAKP;;AACA;;;AAXiB;;;;;;;;;;;;;;AAXlB;;;;AAjBS;;;;;;;;;;;;;;;;;;;;;;;AC6CE;;;;;;;;;AAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAW;;;;;;AAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/BT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACRL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;ACXI;AACJ;AACA;;;AAKE;AACE;;AAGF;AACE;;AAGF;AACE;;;AAKA;;;AAKA;;QAIF;AACA;;AAGI;;AACA;AACF;;;;AAKE;AACA;;;;AAKJ;AACF;AACF;;;ACvCA;;;AAQA;AACE;AACA;;AAOK;AACL;;AAEE;AACA;;AAEA;AACA;AACE;AACD;AACD;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;;;;ACnIG;;;;AAOA;;AAE+B;AACjC;;AAGF;AACF;AAEA;AAEA;AACE;AACA;AACA;AACE;AACE;;;;AAKN;AACE;AACA;AACA;;AAIE;AACE;;QAKF;AACE;;;;;;AAkBF;AACA;;;AAGC;;AAEL;;;ACpFW;;AAIU;AACA;;AANR;;;;AATF;AACT;AACA;AACA;AACA;AACE;AACD;;AAEF;;;;;;;;;;ICyDoB;AAEA;AACA;AACA;AACjB;;AAEF;;AAXW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1DD","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/checkbox/mat-checkbox.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/datepicker/mat-datepicker.component.ts","../../../../packages/dynamic-forms-material/src/lib/addons/preset-actions.ts","../../../../packages/dynamic-forms-material/src/lib/fields/input/mat-input.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/multi-checkbox/mat-multi-checkbox.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/radio/mat-radio.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/select/mat-select.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/slider/mat-slider.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/button/mat-button.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/textarea/mat-textarea.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/toggle/mat-toggle.component.ts","../../../../packages/dynamic-forms-material/src/lib/types/types.ts","../../../../packages/dynamic-forms-material/src/lib/fields/button/mat-button.mapper.ts","../../../../packages/dynamic-forms-material/src/lib/config/material-field-config.ts","../../../../packages/dynamic-forms-material/src/lib/providers/material-providers.ts","../../../../packages/dynamic-forms-material/src/lib/addons/mat-icon-addon.component.ts","../../../../packages/dynamic-forms-material/src/lib/addons/mat-button-addon.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatCheckbox } from '@angular/material/checkbox';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatCheckboxProps } from './mat-checkbox.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-checkbox',\n imports: [MatCheckbox, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let checkboxId = ngf.key() + '-checkbox';\n\n <mat-checkbox\n ngForgeControl=\"input[type='checkbox']\"\n [id]=\"checkboxId\"\n [formField]=\"f\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n [indeterminate]=\"props()?.indeterminate || false\"\n [color]=\"props()?.color || 'primary'\"\n [disableRipple]=\"disableRipple()\"\n [required]=\"!!f().required()\"\n [tabIndex]=\"ngf.tabIndex() ?? 0\"\n [attr.hidden]=\"f().hidden() || null\"\n >\n {{ ngf.label() | dynamicText | async }}\n </mat-checkbox>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\" [attr.hidden]=\"f().hidden() || null\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\" [attr.hidden]=\"f().hidden() || null\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatCheckboxFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<boolean>();\n\n readonly props = input<MatCheckboxProps>();\n\n readonly disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false);\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';\nimport { MatHint, MatInput } from '@angular/material/input';\nimport { MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material/datepicker';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatDatepickerProps } from './mat-datepicker.type';\nimport { provideNativeDateAdapter } from '@angular/material/core';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-datepicker',\n imports: [\n MatFormField,\n MatLabel,\n MatInput,\n MatHint,\n MatDatepicker,\n MatDatepickerInput,\n MatDatepickerToggle,\n MatSuffix,\n FormField,\n MatError,\n DynamicTextPipe,\n AsyncPipe,\n NgForgeControl,\n ],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let inputId = ngf.key() + '-input';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label(); as label) {\n <mat-label>{{ label | dynamicText | async }}</mat-label>\n }\n\n <input\n matInput\n ngForgeControl\n [id]=\"inputId\"\n [matDatepicker]=\"picker\"\n [formField]=\"ngf.field()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n />\n\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\" />\n <mat-datepicker #picker [startAt]=\"startAt()\" [startView]=\"props()?.startView || 'month'\" [touchUi]=\"props()?.touchUi ?? false\" />\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n `,\n ],\n providers: [provideNativeDateAdapter()],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatDatepickerFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<string>();\n\n readonly minDate = input<Date | null>(null);\n readonly maxDate = input<Date | null>(null);\n readonly startAt = input<Date | null>(null);\n readonly props = input<MatDatepickerProps>();\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n}\n","import type { AddonActionContext, AddonActionPreset } from '@ng-forge/dynamic-forms';\nimport type { PresetCollaborators } from '@ng-forge/dynamic-forms/integration';\nimport { runPresetAction } from '@ng-forge/dynamic-forms/integration';\n\nexport type { PresetCollaborators };\n\n/** Material adapter binding for the shared preset runner. */\nexport function runMatPresetAction(preset: AddonActionPreset, ctx: AddonActionContext, collaborators: PresetCollaborators): Promise<void> {\n return runPresetAction(preset, ctx, collaborators, 'Material', 'mat-input');\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, signal } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel, MatPrefix, MatSuffix } from '@angular/material/form-field';\nimport { MatHint, MatInput } from '@angular/material/input';\nimport { AddonActionContext, AddonActionPreset, DfAddonSlot, DynamicFormLogger } from '@ng-forge/dynamic-forms';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe, FIELD_SIGNAL_CONTEXT } from '@ng-forge/dynamic-forms/integration';\nimport {\n ADDON_PRESET_HANDLER,\n AddonPresetHandler,\n injectNgForgeAddons,\n injectNgForgeField,\n NgForgeAddons,\n NgForgeControl,\n NgForgeFieldHost,\n} from '@ng-forge/dynamic-forms/integration';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\nimport { runMatPresetAction } from '../../addons/preset-actions';\nimport { MAT_INPUT_TYPE_OVERRIDE } from '../../tokens/input-type-override.token';\nimport { MatInputAddon, MatInputProps } from './mat-input.type';\n\n@Component({\n selector: 'df-mat-input',\n imports: [\n MatFormField,\n MatLabel,\n MatInput,\n MatHint,\n MatError,\n MatPrefix,\n MatSuffix,\n FormField,\n DynamicTextPipe,\n AsyncPipe,\n NgForgeControl,\n DfAddonSlot,\n ],\n hostDirectives: [NgForgeFieldHost, NgForgeAddons],\n template: `\n @let inputId = ngf.key() + '-input';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label()) {\n <mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>\n }\n @for (a of ngfa.prefixAddons(); track $index) {\n <df-addon-slot\n matPrefix\n [class.df-mat-addon-text]=\"a.kind === 'text'\"\n [addon]=\"a\"\n [fieldInputs]=\"fieldInputs()\"\n [hidden]=\"ngfa.hiddenSignalCache().get(a)\"\n />\n }\n <input\n matInput\n ngForgeControl\n [id]=\"inputId\"\n [formField]=\"ngf.field()\"\n [type]=\"type()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n />\n @for (a of ngfa.suffixAddons(); track $index) {\n <df-addon-slot\n matSuffix\n [class.df-mat-addon-text]=\"a.kind === 'text'\"\n [addon]=\"a\"\n [fieldInputs]=\"fieldInputs()\"\n [hidden]=\"ngfa.hiddenSignalCache().get(a)\"\n />\n }\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n :host([hidden]) {\n display: none !important;\n }\n /* matPrefix/matSuffix elements have no default Material spacing.\n All four sides + the text-kind variants are independent CSS custom\n properties so consumers can tune each individually:\n prefix-outer = prefix slot's left (border-facing) padding\n prefix-inner = prefix slot's right (text-facing) padding\n suffix-inner = suffix slot's left (text-facing) padding\n suffix-outer = suffix slot's right (border-facing) padding\n Text variants override only the INNER side because <mat-icon> has\n ~4-6px optical padding inside its glyph box (so it looks \"padded\"\n even with a small CSS value) while text glyphs sit flush against\n their bounding box and need the extra room to match. */\n :host {\n --df-mat-addon-prefix-outer-padding: 0.75em;\n --df-mat-addon-prefix-inner-padding: 0.5em;\n --df-mat-addon-suffix-inner-padding: 0.5em;\n --df-mat-addon-suffix-outer-padding: 0.75em;\n --df-mat-addon-prefix-text-outer-padding: 1em;\n --df-mat-addon-prefix-text-inner-padding: 1em;\n --df-mat-addon-suffix-text-inner-padding: 1em;\n --df-mat-addon-suffix-text-outer-padding: 1em;\n }\n df-addon-slot[matprefix] {\n padding-left: var(--df-mat-addon-prefix-outer-padding);\n padding-right: var(--df-mat-addon-prefix-inner-padding);\n }\n df-addon-slot[matsuffix] {\n padding-left: var(--df-mat-addon-suffix-inner-padding);\n padding-right: var(--df-mat-addon-suffix-outer-padding);\n }\n df-addon-slot[matprefix].df-mat-addon-text {\n padding-left: var(--df-mat-addon-prefix-text-outer-padding);\n padding-right: var(--df-mat-addon-prefix-text-inner-padding);\n }\n df-addon-slot[matsuffix].df-mat-addon-text {\n padding-left: var(--df-mat-addon-suffix-text-inner-padding);\n padding-right: var(--df-mat-addon-suffix-text-outer-padding);\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: MAT_INPUT_TYPE_OVERRIDE,\n useFactory: () => signal<string | undefined>(undefined),\n },\n {\n // Adapter-specific preset semantics for `mat-button` addons (clear /\n // reset / paste / copy / toggle-password-visibility). The directive\n // (`NgForgeAddonAction`) delegates here when an addon configures a\n // `preset`. Per-mat-input-instance so the `typeOverride` signal is\n // scoped to one field.\n provide: ADDON_PRESET_HANDLER,\n useFactory: (): AddonPresetHandler => {\n const typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);\n const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });\n const logger = inject(DynamicFormLogger);\n // forwardRef for baselineType only — host.props()?.type gates toggle-password-visibility.\n const host = inject(forwardRef(() => MatInputFieldComponent));\n return {\n run: (preset: string, ctx: AddonActionContext) => {\n const fieldKey = ctx.field.key;\n return runMatPresetAction(preset as AddonActionPreset, ctx, {\n typeOverride,\n fieldValueSetter: ctx.setValue,\n fieldDefaultValueGetter:\n fsc && fieldKey ? () => (fsc.defaultValues() as Record<string, unknown> | undefined)?.[fieldKey] : undefined,\n baselineType: () => host.props()?.type,\n logger,\n });\n },\n };\n },\n },\n ],\n})\nexport default class MatInputFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<string>();\n protected readonly ngfa = injectNgForgeAddons<MatInputAddon>();\n\n readonly props = input<MatInputProps>();\n\n /**\n * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the\n * component level so `setInputIfDeclared` (which uses\n * `reflectComponentType`) can write it.\n */\n readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n /** Per-instance type override populated by `toggle-password-visibility` preset. */\n private readonly typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n\n /** Override (set by `toggle-password-visibility` preset) wins over `props().type`. */\n protected readonly type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text');\n}\n","import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from '@angular/core';\nimport { MatCheckbox } from '@angular/material/checkbox';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeField, NgForgeFieldHost, isEqual, NgForgeControl } from '@ng-forge/dynamic-forms/integration';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { MatMultiCheckboxProps } from './mat-multi-checkbox.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-mat-multi-checkbox',\n imports: [MatCheckbox, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let checkboxGroupId = ngf.key() + '-checkbox-group';\n @let checked = checkedValuesMap();\n\n @if (ngf.label(); as label) {\n <div class=\"checkbox-group-label\">{{ label | dynamicText | async }}</div>\n }\n\n <div\n [id]=\"checkboxGroupId\"\n class=\"checkbox-group\"\n role=\"group\"\n [attr.aria-invalid]=\"ngf.ariaInvalid()\"\n [attr.aria-required]=\"ngf.ariaRequired()\"\n [attr.aria-describedby]=\"ngf.ariaDescribedBy()\"\n >\n @for (option of options(); track option.value) {\n <mat-checkbox\n ngForgeControl=\"input[type='checkbox']\"\n [checked]=\"checked['' + option.value]\"\n [disabled]=\"f().disabled() || option.disabled\"\n [color]=\"props()?.color || 'primary'\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n (change)=\"onCheckboxChange(option, $event.checked)\"\n >\n {{ option.label | dynamicText | async }}\n </mat-checkbox>\n }\n </div>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatMultiCheckboxFieldComponent {\n protected readonly ngf = injectNgForgeField<ValueType[]>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<MatMultiCheckboxProps>();\n\n valueViewModel = linkedSignal<FieldOption<ValueType>[]>(\n () => {\n const currentValues = this.ngf.field()().value();\n return this.options().filter((option) => currentValues.includes(option.value));\n },\n { equal: isEqual },\n );\n\n /** Computed map of checked option values for O(1) lookup in template */\n readonly checkedValuesMap = computed(() => {\n const map: Record<string, boolean> = {};\n for (const opt of this.valueViewModel()) {\n map[String(opt.value)] = true;\n }\n return map;\n });\n\n constructor() {\n explicitEffect([this.valueViewModel], ([selectedOptions]) => {\n const selectedValues = selectedOptions.map((option) => option.value);\n\n if (!isEqual(selectedValues, this.ngf.field()().value())) {\n this.ngf.field()().value.set(selectedValues);\n }\n });\n\n explicitEffect([this.options], ([options]) => {\n const values = options.map((option) => option.value);\n const uniqueValues = new Set(values);\n\n if (values.length !== uniqueValues.size) {\n const duplicates = values.filter((value, index) => values.indexOf(value) !== index);\n throw new Error(`Duplicate option values detected in mat-multi-checkbox: ${duplicates.join(', ')}`);\n }\n });\n }\n\n onCheckboxChange(option: FieldOption<ValueType>, checked: boolean): void {\n this.valueViewModel.update((currentOptions) => {\n if (checked) {\n return currentOptions.some((opt) => opt.value === option.value) ? currentOptions : [...currentOptions, option];\n } else {\n return currentOptions.filter((opt) => opt.value !== option.value);\n }\n });\n }\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatRadioButton, MatRadioGroup } from '@angular/material/radio';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatRadioProps } from './mat-radio.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-mat-radio',\n imports: [MatRadioGroup, MatRadioButton, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let radioGroupId = ngf.key() + '-radio-group';\n\n @if (ngf.label()) {\n <div class=\"radio-label\">{{ ngf.label() | dynamicText | async }}</div>\n }\n\n <mat-radio-group\n [id]=\"radioGroupId\"\n [formField]=\"f\"\n [attr.aria-invalid]=\"ngf.ariaInvalid()\"\n [attr.aria-required]=\"ngf.ariaRequired()\"\n [attr.aria-describedby]=\"ngf.ariaDescribedBy()\"\n >\n @for (option of options(); track option.value) {\n <mat-radio-button\n ngForgeControl=\"input[type='radio']\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled || false\"\n [color]=\"props()?.color || 'primary'\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n >\n {{ option.label | dynamicText | async }}\n </mat-radio-button>\n }\n </mat-radio-group>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatRadioFieldComponent {\n protected readonly ngf = injectNgForgeField<ValueType>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<MatRadioProps>();\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatOption, MatSelect } from '@angular/material/select';\nimport { MatHint } from '@angular/material/input';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatSelectProps } from './mat-select.type';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-select',\n imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let selectId = ngf.key() + '-select';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label(); as label) {\n <mat-label>{{ label | dynamicText | async }}</mat-label>\n }\n\n <mat-select\n ngForgeControl\n [id]=\"selectId\"\n [formField]=\"ngf.field()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [multiple]=\"props()?.multiple || false\"\n [compareWith]=\"props()?.compareWith || defaultCompare\"\n >\n @for (option of options(); track option.value) {\n <mat-option [value]=\"option.value\" [disabled]=\"option.disabled || false\">\n {{ option.label | dynamicText | async }}\n </mat-option>\n }\n </mat-select>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatSelectFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<ValueType>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<MatSelectProps>();\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n\n defaultCompare = Object.is;\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatSlider, MatSliderThumb } from '@angular/material/slider';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatSliderProps } from './mat-slider.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-mat-slider',\n imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, FormField, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let inputId = ngf.key() + '-input';\n\n @if (ngf.label(); as label) {\n <label class=\"slider-label\" [for]=\"inputId\">{{ label | dynamicText | async }}</label>\n }\n\n <mat-slider\n [min]=\"f().min?.() ?? 0\"\n [max]=\"f().max?.() ?? 100\"\n [step]=\"step() ?? props()?.step ?? 1\"\n [discrete]=\"props()?.thumbLabel || props()?.showThumbLabel\"\n [showTickMarks]=\"props()?.tickInterval !== undefined\"\n [color]=\"props()?.color || 'primary'\"\n class=\"slider-container\"\n >\n <input matSliderThumb ngForgeControl [id]=\"inputId\" [formField]=\"f\" [attr.tabindex]=\"ngf.tabIndex()\" />\n </mat-slider>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n .slider-container {\n width: 100%;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatSliderFieldComponent {\n protected readonly ngf = injectNgForgeField<number>();\n\n readonly step = input<number>();\n\n readonly props = input<MatSliderProps>();\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatButton } from '@angular/material/button';\nimport { AsyncPipe } from '@angular/common';\nimport { FormEvent } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAction, NgForgeActionHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatButtonProps } from './mat-button.type';\n\n@Component({\n selector: 'df-mat-button',\n imports: [MatButton, DynamicTextPipe, AsyncPipe],\n hostDirectives: [NgForgeActionHost],\n template: `\n @let buttonId = action.key() + '-button';\n <button\n mat-raised-button\n [id]=\"buttonId\"\n [type]=\"buttonType()\"\n [color]=\"props()?.color || 'primary'\"\n [disabled]=\"action.disabled()\"\n [attr.tabindex]=\"action.tabIndex()\"\n [attr.data-testid]=\"buttonTestId()\"\n (click)=\"onClick()\"\n >\n {{ action.label() | dynamicText | async }}\n </button>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n button {\n min-width: fit-content;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatButtonFieldComponent<TEvent extends FormEvent> {\n protected readonly action = injectNgForgeAction<TEvent>();\n\n readonly props = input<MatButtonProps>();\n\n readonly buttonType = computed(() => this.props()?.type ?? 'button');\n\n readonly buttonTestId = computed(() => `${this.buttonType()}-${this.action.key()}`);\n\n onClick(): void {\n if (this.buttonType() === 'submit') return;\n this.action.dispatch();\n }\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatHint, MatInput } from '@angular/material/input';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatTextareaProps } from './mat-textarea.type';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-textarea',\n imports: [MatFormField, MatLabel, MatInput, MatHint, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let textareaId = ngf.key() + '-textarea';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label()) {\n <mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>\n }\n\n <textarea\n ngForgeControl\n matInput\n [id]=\"textareaId\"\n [formField]=\"ngf.field()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n [style.resize]=\"props()?.resize || 'vertical'\"\n ></textarea>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatTextareaFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<string>();\n\n readonly props = input<MatTextareaProps>();\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatSlideToggle } from '@angular/material/slide-toggle';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\n\nimport { MatToggleProps } from './mat-toggle.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-toggle',\n imports: [MatSlideToggle, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let toggleId = ngf.key() + '-toggle';\n\n <mat-slide-toggle\n ngForgeControl=\"button[role='switch']\"\n [id]=\"toggleId\"\n [formField]=\"f\"\n [color]=\"props()?.color || 'primary'\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n [hideIcon]=\"props()?.hideIcon || false\"\n [disableRipple]=\"disableRipple()\"\n [required]=\"!!f().required()\"\n [tabIndex]=\"ngf.tabIndex() ?? 0\"\n class=\"toggle-container\"\n >\n {{ ngf.label() | dynamicText | async }}\n </mat-slide-toggle>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatToggleFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<boolean>();\n\n readonly props = input<MatToggleProps>();\n\n readonly disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false);\n}\n","/**\n * Material Design field type constants\n * Based on available field components in the /fields folder\n */\nexport const MatField = {\n Input: 'input',\n Select: 'select',\n Checkbox: 'checkbox',\n Button: 'button',\n Submit: 'submit',\n Next: 'next',\n Previous: 'previous',\n AddArrayItem: 'addArrayItem',\n PrependArrayItem: 'prependArrayItem',\n InsertArrayItem: 'insertArrayItem',\n RemoveArrayItem: 'removeArrayItem',\n PopArrayItem: 'popArrayItem',\n ShiftArrayItem: 'shiftArrayItem',\n Textarea: 'textarea',\n Radio: 'radio',\n MultiCheckbox: 'multi-checkbox',\n Datepicker: 'datepicker',\n Slider: 'slider',\n Toggle: 'toggle',\n} as const;\n\nexport type MatFieldType = (typeof MatField)[keyof typeof MatField];\n","import { computed, inject, isSignal, Signal } from '@angular/core';\nimport { FieldDef } from '@ng-forge/dynamic-forms';\nimport { ARRAY_CONTEXT, buildBaseInputs, DEFAULT_PROPS } from '@ng-forge/dynamic-forms/integration';\n\n/**\n * Generic button mapper for custom events or basic buttons.\n * For specific button types (submit, next, prev, add/remove array items),\n * use the dedicated field types and their specific mappers.\n *\n * @param fieldDef The button field definition\n * @returns Signal containing Record of input names to values for ngComponentOutlet\n */\nexport function buttonFieldMapper(fieldDef: FieldDef<Record<string, unknown>>): Signal<Record<string, unknown>> {\n const defaultProps = inject(DEFAULT_PROPS);\n const arrayContext = inject(ARRAY_CONTEXT, { optional: true });\n\n return computed(() => {\n const baseInputs = buildBaseInputs(fieldDef, defaultProps());\n\n const inputs: Record<string, unknown> = {\n ...baseInputs,\n };\n\n if (fieldDef.disabled !== undefined) {\n inputs['disabled'] = fieldDef.disabled;\n }\n\n if (fieldDef.hidden !== undefined) {\n inputs['hidden'] = fieldDef.hidden;\n }\n\n // Add event binding for button events\n if ('event' in fieldDef && fieldDef.event !== undefined) {\n inputs['event'] = fieldDef.event;\n }\n\n // Add eventArgs binding if provided\n if ('eventArgs' in fieldDef && fieldDef.eventArgs !== undefined) {\n inputs['eventArgs'] = fieldDef.eventArgs;\n }\n\n // Add eventContext for token resolution (supports $template, $arrayKey, $index, etc.)\n const template = 'template' in fieldDef ? fieldDef.template : undefined;\n if (template || arrayContext) {\n // Read signal value if index is a signal (supports differential updates)\n const getIndex = () => {\n if (!arrayContext) return -1;\n return isSignal(arrayContext.index) ? arrayContext.index() : arrayContext.index;\n };\n\n inputs['eventContext'] = {\n key: fieldDef.key,\n index: getIndex(),\n arrayKey: arrayContext?.arrayKey ?? '',\n formValue: arrayContext?.formValue ?? {},\n template,\n };\n }\n\n return inputs;\n });\n}\n","import { FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';\nimport {\n addArrayItemButtonMapper,\n checkboxFieldMapper,\n datepickerFieldMapper,\n insertArrayItemButtonMapper,\n optionsFieldMapper,\n popArrayItemButtonMapper,\n prependArrayItemButtonMapper,\n removeArrayItemButtonMapper,\n shiftArrayItemButtonMapper,\n valueFieldMapper,\n} from '@ng-forge/dynamic-forms/integration';\nimport { MatField } from '../types/types';\nimport { buttonFieldMapper } from '../fields/button/mat-button.mapper';\nimport { nextButtonFieldMapper, previousButtonFieldMapper, submitButtonFieldMapper } from '../fields/button/mat-specific-button.mapper';\n\n/**\n * Base for value-bearing field types — waits for the mapper to emit the `field`\n * input before instantiating the component (matches NgForgeField's\n * `input.required<FieldTree<T>>()` contract).\n */\nconst VALUE_FIELD_TYPES_BASE = {\n renderReadyWhen: ['field'],\n} as const;\n\n/**\n * Base for action/button field types that don't bind to a form value.\n * Renders immediately, opted out of form-value collection.\n */\nconst BUTTON_FIELD_TYPES_BASE = {\n renderReadyWhen: [],\n valueHandling: 'exclude',\n} as const;\n\n/**\n * Material Design field type definitions\n * Follows the FieldTypeDefinition interface for proper registry integration\n */\nexport const MATERIAL_FIELD_TYPES: FieldTypeDefinition[] = [\n {\n name: MatField.Input,\n loadComponent: () => import('../fields/input/mat-input.component'),\n mapper: valueFieldMapper,\n propsToMeta: ['type'],\n scope: ['text-input', 'numeric'],\n addons: {\n slots: ['prefix', 'suffix'],\n },\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Select,\n loadComponent: () => import('../fields/select/mat-select.component'),\n mapper: optionsFieldMapper,\n scope: 'single-select',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Checkbox,\n loadComponent: () => import('../fields/checkbox/mat-checkbox.component'),\n mapper: checkboxFieldMapper,\n scope: 'boolean',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Button,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: buttonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Submit,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: submitButtonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Next,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: nextButtonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Previous,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: previousButtonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.AddArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: addArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.PrependArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: prependArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.InsertArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: insertArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.RemoveArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: removeArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.PopArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: popArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.ShiftArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: shiftArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Textarea,\n loadComponent: () => import('../fields/textarea/mat-textarea.component'),\n mapper: valueFieldMapper,\n propsToMeta: ['rows', 'cols'],\n scope: 'text-input',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Radio,\n loadComponent: () => import('../fields/radio/mat-radio.component'),\n mapper: optionsFieldMapper,\n scope: 'single-select',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.MultiCheckbox,\n loadComponent: () => import('../fields/multi-checkbox/mat-multi-checkbox.component'),\n mapper: optionsFieldMapper,\n scope: 'multi-select',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Datepicker,\n loadComponent: () => import('../fields/datepicker/mat-datepicker.component'),\n mapper: datepickerFieldMapper,\n scope: 'date',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Slider,\n loadComponent: () => import('../fields/slider/mat-slider.component'),\n mapper: valueFieldMapper,\n scope: 'numeric',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Toggle,\n loadComponent: () => import('../fields/toggle/mat-toggle.component'),\n mapper: checkboxFieldMapper,\n scope: 'boolean',\n ...VALUE_FIELD_TYPES_BASE,\n },\n];\n","import type { Provider } from '@angular/core';\nimport { DynamicFormError, type AddonKindDefinition } from '@ng-forge/dynamic-forms';\nimport { ADDON_KIND_DEFINITIONS, type FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';\nimport { MATERIAL_FIELD_TYPES } from '../config/material-field-config';\nimport { MaterialConfig } from '../models/material-config';\nimport { MATERIAL_CONFIG } from '../models/material-config.token';\nimport type { MatButtonAddon, MatIconAddon } from '../types/addons';\n\n/** Field type definitions for Material Design components. */\nexport type MaterialFieldTypes = FieldTypeDefinition[];\n\ntype MaterialConfigFeature = {\n ɵkind: 'material-config';\n ɵproviders: Provider[];\n};\n\n/**\n * Default `withMaterialFields()` shape — field defs + the auto-included\n * addons feature so `mat-icon` / `mat-button` work out of the box.\n */\ntype MaterialFieldsWithAddons = [...MaterialFieldTypes, MaterialAddonsFeature];\n\ntype MaterialFieldsWithConfig = [...MaterialFieldTypes, MaterialAddonsFeature, MaterialConfigFeature];\n\n/**\n * Configure dynamic forms with Material Design field types, with\n * Material-shipped addon kinds (`mat-icon`, `mat-button`) auto-included so\n * addons work out of the box.\n *\n * @param config - Optional global configuration for Material form fields\n * @returns Tuple of field type definitions, the addons feature, and\n * optionally a config feature.\n */\nexport function withMaterialFields(): MaterialFieldsWithAddons;\nexport function withMaterialFields(config: MaterialConfig): MaterialFieldsWithConfig;\nexport function withMaterialFields(config: MaterialConfig | undefined): MaterialFieldsWithAddons | MaterialFieldsWithConfig;\nexport function withMaterialFields(config?: MaterialConfig): MaterialFieldsWithAddons | MaterialFieldsWithConfig {\n // Always include the addons feature — mat-icon / mat-button are part of\n // the canonical Material surface.\n const base: unknown[] = [...MATERIAL_FIELD_TYPES, withMaterialAddons()];\n\n if (config) {\n base.push({\n ɵkind: 'material-config',\n ɵproviders: [{ provide: MATERIAL_CONFIG, useValue: config }],\n } satisfies MaterialConfigFeature);\n return base as MaterialFieldsWithConfig;\n }\n\n return base as MaterialFieldsWithAddons;\n}\n\n/* -- Material addon kinds ----------------------------------------------- */\n\nconst MAT_ICON_KIND: AddonKindDefinition<MatIconAddon> = {\n kind: 'mat-icon',\n loadComponent: () => import('../addons/mat-icon-addon.component').then((m) => m.MatIconAddonComponent),\n validate: (addon, fieldKey) => {\n if (typeof addon.icon !== 'string' || addon.icon.length === 0) {\n throw new DynamicFormError(`Addon kind 'mat-icon' requires a non-empty 'icon' string (field: '${fieldKey}').`);\n }\n },\n};\n\nconst MAT_BUTTON_KIND: AddonKindDefinition<MatButtonAddon> = {\n kind: 'mat-button',\n loadComponent: () => import('../addons/mat-button-addon.component').then((m) => m.MatButtonAddonComponent),\n validate: (addon, fieldKey) => {\n // Exactly one of preset / actionRef / action — validator drops the addon\n // (with warning) if the rule is violated.\n const set = [addon.preset, addon.actionRef, addon.action].filter((v) => v !== undefined);\n if (set.length > 1) {\n throw new DynamicFormError(\n `Addon kind 'mat-button' on field '${fieldKey}' has more than one of preset/actionRef/action — exactly one allowed.`,\n );\n }\n // Icon-only buttons require ariaLabel for screen readers.\n if (addon.icon && !addon.label && !addon.ariaLabel) {\n throw new DynamicFormError(`Addon kind 'mat-button' on field '${fieldKey}' is icon-only — provide 'ariaLabel' for accessibility.`);\n }\n },\n};\n\n/**\n * Feature kind discriminant for the Material addons feature. Matches core's\n * `'addons'` kind so providers flow through the standard addon-kind pipeline\n * in `provideDynamicForm`.\n */\ntype MaterialAddonsFeature = {\n ɵkind: 'addons';\n ɵproviders: Provider[];\n};\n\n/** Register Material-shipped addon kinds (`mat-icon`, `mat-button`) standalone. */\nexport function withMaterialAddons(): MaterialAddonsFeature {\n return {\n ɵkind: 'addons',\n ɵproviders: [\n { provide: ADDON_KIND_DEFINITIONS, useValue: MAT_ICON_KIND, multi: true },\n { provide: ADDON_KIND_DEFINITIONS, useValue: MAT_BUTTON_KIND, multi: true },\n ],\n };\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatIcon } from '@angular/material/icon';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport type { MatIconAddon } from '../types/addons';\n\n/** Renderer for the `mat-icon` addon kind. */\n@Component({\n selector: 'df-mat-icon-addon',\n imports: [MatIcon, AsyncPipe, DynamicTextPipe],\n template: `<mat-icon [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\">{{ addon().icon }}</mat-icon>`,\n host: {\n '[attr.aria-hidden]': 'hasAriaLabel() ? null : \"true\"',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatIconAddonComponent {\n readonly addon = input.required<MatIconAddon>();\n /** Accepted for contract uniformity — `NgComponentOutlet` setInput is strict; every kind must declare it. */\n readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n protected readonly hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined);\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\nimport { MatButton, MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAddonAction, NgForgeAddonAction } from '@ng-forge/dynamic-forms/integration';\nimport type { MatButtonAddon } from '../types/addons';\n\n/** Renderer for the `mat-button` addon kind. */\n@Component({\n selector: 'df-mat-button-addon',\n imports: [MatButton, MatIconButton, MatIcon, MatProgressSpinner, DynamicTextPipe, AsyncPipe],\n hostDirectives: [NgForgeAddonAction],\n template: `\n @if (isIconOnly()) {\n <button\n mat-icon-button\n type=\"button\"\n [color]=\"addon().color ?? null\"\n [disabled]=\"action.disabled() || action.loading()\"\n [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"\n [attr.aria-busy]=\"action.loading() || null\"\n (click)=\"action.dispatch()\"\n >\n @if (action.loading()) {\n <mat-progress-spinner mode=\"indeterminate\" diameter=\"18\" aria-hidden=\"true\" />\n <span class=\"df-mat-sr-only\" role=\"status\">Loading…</span>\n } @else {\n <mat-icon aria-hidden=\"true\">{{ addon().icon }}</mat-icon>\n }\n </button>\n } @else {\n <button\n mat-button\n type=\"button\"\n [color]=\"addon().color ?? null\"\n [disabled]=\"action.disabled() || action.loading()\"\n [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"\n [attr.aria-busy]=\"action.loading() || null\"\n (click)=\"action.dispatch()\"\n >\n @if (action.loading()) {\n <mat-progress-spinner mode=\"indeterminate\" diameter=\"18\" aria-hidden=\"true\" />\n <span class=\"df-mat-sr-only\" role=\"status\">Loading…</span>\n } @else if (addon().icon; as icon) {\n <mat-icon aria-hidden=\"true\">{{ icon }}</mat-icon>\n }\n {{ label() | dynamicText | async }}\n </button>\n }\n `,\n styles: [\n `\n .df-mat-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatButtonAddonComponent {\n protected readonly action = injectNgForgeAddonAction<MatButtonAddon>();\n\n /** Re-exposed for template binding — same signal stored on the directive. */\n protected readonly addon = this.action.addon;\n\n protected readonly label = computed(() => this.addon().label);\n protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n protected readonly isIconOnly = computed(() => {\n const a = this.addon();\n return !!a.icon && !a.label;\n });\n}\n"]}
1
+ {"version":3,"file":"ng-forge-dynamic-forms-material.mjs","mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0Cc;;;AAKH;;AAEA;;;AAPU;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/BT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiEE;;;;;;;;;AAQH;;AAEA;;AAEA;;AAEA;;AAEA;;;AAhBU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/DT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDT;;;;;;;;;ACxDD;AACF;;;;ACgKc;;;;AAMH;;AAET,IAKS;;IAGQ;AAER;;AAEA;;AAEA;;AAEA;;IAGU;;;AA3BA;AAlCjB;AACE;AACA;AACD;AACD;gFAME;;AAEE;AACA;AACA;oBAEA;;AAEE;AACE;AACA;;;;;;AAOC;;;;AAIR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/IO;;;;;;;;;;;;;AAcT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGC;AACE;AACA;AACD;AACD;4IAME;;AAEE;AACA;AACA;;;AAIE;AACE;AACA;;;;;;AAOC;;;;AAIR;AACF;;;;;;;;ACjHW;;;;AAIH;;AAET;AAEI;;AAEF;IAKO;;;;;AAKP;;;AAGF;AACE;AACE;AAEA;AACE;;AAEJ;AAEA;AACE;AACA;;;AAIE;;AAEJ;;;;;AAMI;;;AAEA;;AAEJ;;;AAlDiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA3CT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACwCE;;;;AAIH;;;AAJU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAJlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACcW;;;;;AAMH;;AAEA;;AAEA;;AAEA;;AAEA;;AAET;;AAhBmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACDW;;AAGH;;AAEA;;;AALU;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACDW;;AAGH;;AAEA;;AAEA;;;AAGP;;AACA;;;AAXiB;;;;;;;;;;;;;;AAXlB;;;;AAjBS;;;;;;;;;;;;;;;;;;;;;;;AC6CE;;;AAKH;;AAEA;;AACA;;AAEA;;AACA;;;AAXU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAW;;;AAKH;;AAEA;;;AAPU;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/BT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACRL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;ACXI;AACJ;AACA;;;AAKE;AACE;;AAGF;AACE;;AAGF;AACE;;;AAKA;;;AAKA;;QAIF;AACA;;AAGI;;AACA;AACF;;;;AAKE;AACA;;;;AAKJ;AACF;AACF;;;ACvCA;;;AAQA;AACE;AACA;;AAOK;AACL;;AAEE;AACA;;AAEA;AACA;AACE;AACD;AACD;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;;;;ACnIG;;;;AAOA;;AAE+B;AACjC;;AAGF;AACF;AAEA;AAEA;AACE;AACA;AACA;AACE;AACE;;;;AAKN;AACE;AACA;AACA;;AAIE;AACE;;QAKF;AACE;;;;;;AAkBF;AACA;;;AAGC;;AAEL;;;;;IClFW;;;;AAGU;;;AANR;;;;AATF;AACT;AACA;AACA;AACA;AACE;AACD;;AAEF;;;;;;;;;;ICyDoB;;;;;AAIA;AACjB;;;;;AATS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1DD","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/checkbox/mat-checkbox.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/datepicker/mat-datepicker.component.ts","../../../../packages/dynamic-forms-material/src/lib/addons/preset-actions.ts","../../../../packages/dynamic-forms-material/src/lib/fields/input/mat-input.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/multi-checkbox/mat-multi-checkbox.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/radio/mat-radio.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/select/mat-select.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/slider/mat-slider.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/button/mat-button.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/textarea/mat-textarea.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/toggle/mat-toggle.component.ts","../../../../packages/dynamic-forms-material/src/lib/types/types.ts","../../../../packages/dynamic-forms-material/src/lib/fields/button/mat-button.mapper.ts","../../../../packages/dynamic-forms-material/src/lib/config/material-field-config.ts","../../../../packages/dynamic-forms-material/src/lib/providers/material-providers.ts","../../../../packages/dynamic-forms-material/src/lib/addons/mat-icon-addon.component.ts","../../../../packages/dynamic-forms-material/src/lib/addons/mat-button-addon.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatCheckbox } from '@angular/material/checkbox';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatCheckboxProps } from './mat-checkbox.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-checkbox',\n imports: [MatCheckbox, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let checkboxId = ngf.key() + '-checkbox';\n\n <mat-checkbox\n ngForgeControl=\"input[type='checkbox']\"\n [id]=\"checkboxId\"\n [formField]=\"f\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n [indeterminate]=\"props()?.indeterminate || false\"\n [color]=\"props()?.color || 'primary'\"\n [disableRipple]=\"disableRipple()\"\n [required]=\"!!f().required()\"\n [tabIndex]=\"ngf.tabIndex() ?? 0\"\n [attr.hidden]=\"f().hidden() || null\"\n >\n {{ ngf.label() | dynamicText | async }}\n </mat-checkbox>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\" [attr.hidden]=\"f().hidden() || null\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\" [attr.hidden]=\"f().hidden() || null\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatCheckboxFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<boolean>();\n\n readonly props = input<MatCheckboxProps>();\n\n readonly disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false);\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';\nimport { MatHint, MatInput } from '@angular/material/input';\nimport { MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material/datepicker';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatDatepickerProps } from './mat-datepicker.type';\nimport { provideNativeDateAdapter } from '@angular/material/core';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-datepicker',\n imports: [\n MatFormField,\n MatLabel,\n MatInput,\n MatHint,\n MatDatepicker,\n MatDatepickerInput,\n MatDatepickerToggle,\n MatSuffix,\n FormField,\n MatError,\n DynamicTextPipe,\n AsyncPipe,\n NgForgeControl,\n ],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let inputId = ngf.key() + '-input';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label(); as label) {\n <mat-label>{{ label | dynamicText | async }}</mat-label>\n }\n\n <input\n matInput\n ngForgeControl\n [id]=\"inputId\"\n [matDatepicker]=\"picker\"\n [formField]=\"ngf.field()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n />\n\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\" />\n <mat-datepicker #picker [startAt]=\"startAt()\" [startView]=\"props()?.startView || 'month'\" [touchUi]=\"props()?.touchUi ?? false\" />\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n `,\n ],\n providers: [provideNativeDateAdapter()],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatDatepickerFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<string>();\n\n readonly minDate = input<Date | null>(null);\n readonly maxDate = input<Date | null>(null);\n readonly startAt = input<Date | null>(null);\n readonly props = input<MatDatepickerProps>();\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n}\n","import type { AddonActionContext, AddonActionPreset } from '@ng-forge/dynamic-forms';\nimport type { PresetCollaborators } from '@ng-forge/dynamic-forms/integration';\nimport { runPresetAction } from '@ng-forge/dynamic-forms/integration';\n\nexport type { PresetCollaborators };\n\n/** Material adapter binding for the shared preset runner. */\nexport function runMatPresetAction(preset: AddonActionPreset, ctx: AddonActionContext, collaborators: PresetCollaborators): Promise<void> {\n return runPresetAction(preset, ctx, collaborators, 'Material', 'mat-input');\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, signal } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel, MatPrefix, MatSuffix } from '@angular/material/form-field';\nimport { MatHint, MatInput } from '@angular/material/input';\nimport { AddonActionContext, AddonActionPreset, DfAddonSlot, DynamicFormLogger } from '@ng-forge/dynamic-forms';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe, FIELD_SIGNAL_CONTEXT } from '@ng-forge/dynamic-forms/integration';\nimport {\n ADDON_PRESET_HANDLER,\n AddonPresetHandler,\n injectNgForgeAddons,\n injectNgForgeField,\n NgForgeAddons,\n NgForgeControl,\n NgForgeFieldHost,\n} from '@ng-forge/dynamic-forms/integration';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\nimport { runMatPresetAction } from '../../addons/preset-actions';\nimport { MAT_INPUT_TYPE_OVERRIDE } from '../../tokens/input-type-override.token';\nimport { MatInputAddon, MatInputProps } from './mat-input.type';\n\n@Component({\n selector: 'df-mat-input',\n imports: [\n MatFormField,\n MatLabel,\n MatInput,\n MatHint,\n MatError,\n MatPrefix,\n MatSuffix,\n FormField,\n DynamicTextPipe,\n AsyncPipe,\n NgForgeControl,\n DfAddonSlot,\n ],\n hostDirectives: [NgForgeFieldHost, NgForgeAddons],\n template: `\n @let inputId = ngf.key() + '-input';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label()) {\n <mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>\n }\n @for (a of ngfa.prefixAddons(); track $index) {\n <df-addon-slot\n matPrefix\n [class.df-mat-addon-text]=\"a.kind === 'text'\"\n [addon]=\"a\"\n [fieldInputs]=\"fieldInputs()\"\n [hidden]=\"ngfa.hiddenSignalCache().get(a)\"\n />\n }\n <input\n matInput\n ngForgeControl\n [id]=\"inputId\"\n [formField]=\"ngf.field()\"\n [type]=\"type()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n />\n @for (a of ngfa.suffixAddons(); track $index) {\n <df-addon-slot\n matSuffix\n [class.df-mat-addon-text]=\"a.kind === 'text'\"\n [addon]=\"a\"\n [fieldInputs]=\"fieldInputs()\"\n [hidden]=\"ngfa.hiddenSignalCache().get(a)\"\n />\n }\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n :host([hidden]) {\n display: none !important;\n }\n /* matPrefix/matSuffix elements have no default Material spacing.\n All four sides + the text-kind variants are independent CSS custom\n properties so consumers can tune each individually:\n prefix-outer = prefix slot's left (border-facing) padding\n prefix-inner = prefix slot's right (text-facing) padding\n suffix-inner = suffix slot's left (text-facing) padding\n suffix-outer = suffix slot's right (border-facing) padding\n Text variants override only the INNER side because <mat-icon> has\n ~4-6px optical padding inside its glyph box (so it looks \"padded\"\n even with a small CSS value) while text glyphs sit flush against\n their bounding box and need the extra room to match. */\n :host {\n --df-mat-addon-prefix-outer-padding: 0.75em;\n --df-mat-addon-prefix-inner-padding: 0.5em;\n --df-mat-addon-suffix-inner-padding: 0.5em;\n --df-mat-addon-suffix-outer-padding: 0.75em;\n --df-mat-addon-prefix-text-outer-padding: 1em;\n --df-mat-addon-prefix-text-inner-padding: 1em;\n --df-mat-addon-suffix-text-inner-padding: 1em;\n --df-mat-addon-suffix-text-outer-padding: 1em;\n }\n df-addon-slot[matprefix] {\n padding-left: var(--df-mat-addon-prefix-outer-padding);\n padding-right: var(--df-mat-addon-prefix-inner-padding);\n }\n df-addon-slot[matsuffix] {\n padding-left: var(--df-mat-addon-suffix-inner-padding);\n padding-right: var(--df-mat-addon-suffix-outer-padding);\n }\n df-addon-slot[matprefix].df-mat-addon-text {\n padding-left: var(--df-mat-addon-prefix-text-outer-padding);\n padding-right: var(--df-mat-addon-prefix-text-inner-padding);\n }\n df-addon-slot[matsuffix].df-mat-addon-text {\n padding-left: var(--df-mat-addon-suffix-text-inner-padding);\n padding-right: var(--df-mat-addon-suffix-text-outer-padding);\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: MAT_INPUT_TYPE_OVERRIDE,\n useFactory: () => signal<string | undefined>(undefined),\n },\n {\n // Adapter-specific preset semantics for `mat-button` addons (clear /\n // reset / paste / copy / toggle-password-visibility). The directive\n // (`NgForgeAddonAction`) delegates here when an addon configures a\n // `preset`. Per-mat-input-instance so the `typeOverride` signal is\n // scoped to one field.\n provide: ADDON_PRESET_HANDLER,\n useFactory: (): AddonPresetHandler => {\n const typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);\n const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });\n const logger = inject(DynamicFormLogger);\n // forwardRef for baselineType only — host.props()?.type gates toggle-password-visibility.\n const host = inject(forwardRef(() => MatInputFieldComponent));\n return {\n run: (preset: string, ctx: AddonActionContext) => {\n const fieldKey = ctx.field.key;\n return runMatPresetAction(preset as AddonActionPreset, ctx, {\n typeOverride,\n fieldValueSetter: ctx.setValue,\n fieldDefaultValueGetter:\n fsc && fieldKey ? () => (fsc.defaultValues() as Record<string, unknown> | undefined)?.[fieldKey] : undefined,\n baselineType: () => host.props()?.type,\n logger,\n });\n },\n };\n },\n },\n ],\n})\nexport default class MatInputFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<string>();\n protected readonly ngfa = injectNgForgeAddons<MatInputAddon>();\n\n readonly props = input<MatInputProps>();\n\n /**\n * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the\n * component level so `setInputIfDeclared` (which uses\n * `reflectComponentType`) can write it.\n */\n readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n /** Per-instance type override populated by `toggle-password-visibility` preset. */\n private readonly typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n\n /** Override (set by `toggle-password-visibility` preset) wins over `props().type`. */\n protected readonly type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text');\n}\n","import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from '@angular/core';\nimport { MatCheckbox } from '@angular/material/checkbox';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeField, NgForgeFieldHost, isEqual, NgForgeControl } from '@ng-forge/dynamic-forms/integration';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { MatMultiCheckboxProps } from './mat-multi-checkbox.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-mat-multi-checkbox',\n imports: [MatCheckbox, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let checkboxGroupId = ngf.key() + '-checkbox-group';\n @let checked = checkedValuesMap();\n\n @if (ngf.label(); as label) {\n <div class=\"checkbox-group-label\">{{ label | dynamicText | async }}</div>\n }\n\n <div\n [id]=\"checkboxGroupId\"\n class=\"checkbox-group\"\n role=\"group\"\n [attr.aria-invalid]=\"ngf.ariaInvalid()\"\n [attr.aria-required]=\"ngf.ariaRequired()\"\n [attr.aria-describedby]=\"ngf.ariaDescribedBy()\"\n >\n @for (option of options(); track option.value) {\n <mat-checkbox\n ngForgeControl=\"input[type='checkbox']\"\n [checked]=\"checked['' + option.value]\"\n [disabled]=\"f().disabled() || option.disabled\"\n [color]=\"props()?.color || 'primary'\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n (change)=\"onCheckboxChange(option, $event.checked)\"\n >\n {{ option.label | dynamicText | async }}\n </mat-checkbox>\n }\n </div>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatMultiCheckboxFieldComponent {\n protected readonly ngf = injectNgForgeField<ValueType[]>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<MatMultiCheckboxProps>();\n\n valueViewModel = linkedSignal<FieldOption<ValueType>[]>(\n () => {\n const currentValues = this.ngf.field()().value();\n return this.options().filter((option) => currentValues.includes(option.value));\n },\n { equal: isEqual },\n );\n\n /** Computed map of checked option values for O(1) lookup in template */\n readonly checkedValuesMap = computed(() => {\n const map: Record<string, boolean> = {};\n for (const opt of this.valueViewModel()) {\n map[String(opt.value)] = true;\n }\n return map;\n });\n\n constructor() {\n explicitEffect([this.valueViewModel], ([selectedOptions]) => {\n const selectedValues = selectedOptions.map((option) => option.value);\n\n if (!isEqual(selectedValues, this.ngf.field()().value())) {\n this.ngf.field()().value.set(selectedValues);\n }\n });\n\n explicitEffect([this.options], ([options]) => {\n const values = options.map((option) => option.value);\n const uniqueValues = new Set(values);\n\n if (values.length !== uniqueValues.size) {\n const duplicates = values.filter((value, index) => values.indexOf(value) !== index);\n throw new Error(`Duplicate option values detected in mat-multi-checkbox: ${duplicates.join(', ')}`);\n }\n });\n }\n\n onCheckboxChange(option: FieldOption<ValueType>, checked: boolean): void {\n this.valueViewModel.update((currentOptions) => {\n if (checked) {\n return currentOptions.some((opt) => opt.value === option.value) ? currentOptions : [...currentOptions, option];\n } else {\n return currentOptions.filter((opt) => opt.value !== option.value);\n }\n });\n }\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatRadioButton, MatRadioGroup } from '@angular/material/radio';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatRadioProps } from './mat-radio.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-mat-radio',\n imports: [MatRadioGroup, MatRadioButton, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let radioGroupId = ngf.key() + '-radio-group';\n\n @if (ngf.label()) {\n <div class=\"radio-label\">{{ ngf.label() | dynamicText | async }}</div>\n }\n\n <mat-radio-group\n [id]=\"radioGroupId\"\n [formField]=\"f\"\n [attr.aria-invalid]=\"ngf.ariaInvalid()\"\n [attr.aria-required]=\"ngf.ariaRequired()\"\n [attr.aria-describedby]=\"ngf.ariaDescribedBy()\"\n >\n @for (option of options(); track option.value) {\n <mat-radio-button\n ngForgeControl=\"input[type='radio']\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled || false\"\n [color]=\"props()?.color || 'primary'\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n >\n {{ option.label | dynamicText | async }}\n </mat-radio-button>\n }\n </mat-radio-group>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatRadioFieldComponent {\n protected readonly ngf = injectNgForgeField<ValueType>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<MatRadioProps>();\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatOption, MatSelect } from '@angular/material/select';\nimport { MatHint } from '@angular/material/input';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatSelectProps } from './mat-select.type';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-select',\n imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let selectId = ngf.key() + '-select';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label(); as label) {\n <mat-label>{{ label | dynamicText | async }}</mat-label>\n }\n\n <mat-select\n ngForgeControl\n [id]=\"selectId\"\n [formField]=\"ngf.field()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [multiple]=\"props()?.multiple || false\"\n [compareWith]=\"props()?.compareWith || defaultCompare\"\n >\n @for (option of options(); track option.value) {\n <mat-option [value]=\"option.value\" [disabled]=\"option.disabled || false\">\n {{ option.label | dynamicText | async }}\n </mat-option>\n }\n </mat-select>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatSelectFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<ValueType>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<MatSelectProps>();\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n\n defaultCompare = Object.is;\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatSlider, MatSliderThumb } from '@angular/material/slider';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatSliderProps } from './mat-slider.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-mat-slider',\n imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, FormField, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let inputId = ngf.key() + '-input';\n\n @if (ngf.label(); as label) {\n <label class=\"slider-label\" [for]=\"inputId\">{{ label | dynamicText | async }}</label>\n }\n\n <mat-slider\n [min]=\"f().min?.() ?? 0\"\n [max]=\"f().max?.() ?? 100\"\n [step]=\"step() ?? props()?.step ?? 1\"\n [discrete]=\"props()?.thumbLabel || props()?.showThumbLabel\"\n [showTickMarks]=\"props()?.tickInterval !== undefined\"\n [color]=\"props()?.color || 'primary'\"\n class=\"slider-container\"\n >\n <input matSliderThumb ngForgeControl [id]=\"inputId\" [formField]=\"f\" [attr.tabindex]=\"ngf.tabIndex()\" />\n </mat-slider>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n .slider-container {\n width: 100%;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatSliderFieldComponent {\n protected readonly ngf = injectNgForgeField<number>();\n\n readonly step = input<number>();\n\n readonly props = input<MatSliderProps>();\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatButton } from '@angular/material/button';\nimport { AsyncPipe } from '@angular/common';\nimport { FormEvent } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAction, NgForgeActionHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatButtonProps } from './mat-button.type';\n\n@Component({\n selector: 'df-mat-button',\n imports: [MatButton, DynamicTextPipe, AsyncPipe],\n hostDirectives: [NgForgeActionHost],\n template: `\n @let buttonId = action.key() + '-button';\n <button\n mat-raised-button\n [id]=\"buttonId\"\n [type]=\"buttonType()\"\n [color]=\"props()?.color || 'primary'\"\n [disabled]=\"action.disabled()\"\n [attr.tabindex]=\"action.tabIndex()\"\n [attr.data-testid]=\"buttonTestId()\"\n (click)=\"onClick()\"\n >\n {{ action.label() | dynamicText | async }}\n </button>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n button {\n min-width: fit-content;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatButtonFieldComponent<TEvent extends FormEvent> {\n protected readonly action = injectNgForgeAction<TEvent>();\n\n readonly props = input<MatButtonProps>();\n\n readonly buttonType = computed(() => this.props()?.type ?? 'button');\n\n readonly buttonTestId = computed(() => `${this.buttonType()}-${this.action.key()}`);\n\n onClick(): void {\n if (this.buttonType() === 'submit') return;\n this.action.dispatch();\n }\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatHint, MatInput } from '@angular/material/input';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatTextareaProps } from './mat-textarea.type';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-textarea',\n imports: [MatFormField, MatLabel, MatInput, MatHint, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let textareaId = ngf.key() + '-textarea';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label()) {\n <mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>\n }\n\n <textarea\n ngForgeControl\n matInput\n [id]=\"textareaId\"\n [formField]=\"ngf.field()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n [style.resize]=\"props()?.resize || 'vertical'\"\n ></textarea>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatTextareaFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<string>();\n\n readonly props = input<MatTextareaProps>();\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatSlideToggle } from '@angular/material/slide-toggle';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\n\nimport { MatToggleProps } from './mat-toggle.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-toggle',\n imports: [MatSlideToggle, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let toggleId = ngf.key() + '-toggle';\n\n <mat-slide-toggle\n ngForgeControl=\"button[role='switch']\"\n [id]=\"toggleId\"\n [formField]=\"f\"\n [color]=\"props()?.color || 'primary'\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n [hideIcon]=\"props()?.hideIcon || false\"\n [disableRipple]=\"disableRipple()\"\n [required]=\"!!f().required()\"\n [tabIndex]=\"ngf.tabIndex() ?? 0\"\n class=\"toggle-container\"\n >\n {{ ngf.label() | dynamicText | async }}\n </mat-slide-toggle>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatToggleFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<boolean>();\n\n readonly props = input<MatToggleProps>();\n\n readonly disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false);\n}\n","/**\n * Material Design field type constants\n * Based on available field components in the /fields folder\n */\nexport const MatField = {\n Input: 'input',\n Select: 'select',\n Checkbox: 'checkbox',\n Button: 'button',\n Submit: 'submit',\n Next: 'next',\n Previous: 'previous',\n AddArrayItem: 'addArrayItem',\n PrependArrayItem: 'prependArrayItem',\n InsertArrayItem: 'insertArrayItem',\n RemoveArrayItem: 'removeArrayItem',\n PopArrayItem: 'popArrayItem',\n ShiftArrayItem: 'shiftArrayItem',\n Textarea: 'textarea',\n Radio: 'radio',\n MultiCheckbox: 'multi-checkbox',\n Datepicker: 'datepicker',\n Slider: 'slider',\n Toggle: 'toggle',\n} as const;\n\nexport type MatFieldType = (typeof MatField)[keyof typeof MatField];\n","import { computed, inject, isSignal, Signal } from '@angular/core';\nimport { FieldDef } from '@ng-forge/dynamic-forms';\nimport { ARRAY_CONTEXT, buildBaseInputs, DEFAULT_PROPS } from '@ng-forge/dynamic-forms/integration';\n\n/**\n * Generic button mapper for custom events or basic buttons.\n * For specific button types (submit, next, prev, add/remove array items),\n * use the dedicated field types and their specific mappers.\n *\n * @param fieldDef The button field definition\n * @returns Signal containing Record of input names to values for ngComponentOutlet\n */\nexport function buttonFieldMapper(fieldDef: FieldDef<Record<string, unknown>>): Signal<Record<string, unknown>> {\n const defaultProps = inject(DEFAULT_PROPS);\n const arrayContext = inject(ARRAY_CONTEXT, { optional: true });\n\n return computed(() => {\n const baseInputs = buildBaseInputs(fieldDef, defaultProps());\n\n const inputs: Record<string, unknown> = {\n ...baseInputs,\n };\n\n if (fieldDef.disabled !== undefined) {\n inputs['disabled'] = fieldDef.disabled;\n }\n\n if (fieldDef.hidden !== undefined) {\n inputs['hidden'] = fieldDef.hidden;\n }\n\n // Add event binding for button events\n if ('event' in fieldDef && fieldDef.event !== undefined) {\n inputs['event'] = fieldDef.event;\n }\n\n // Add eventArgs binding if provided\n if ('eventArgs' in fieldDef && fieldDef.eventArgs !== undefined) {\n inputs['eventArgs'] = fieldDef.eventArgs;\n }\n\n // Add eventContext for token resolution (supports $template, $arrayKey, $index, etc.)\n const template = 'template' in fieldDef ? fieldDef.template : undefined;\n if (template || arrayContext) {\n // Read signal value if index is a signal (supports differential updates)\n const getIndex = () => {\n if (!arrayContext) return -1;\n return isSignal(arrayContext.index) ? arrayContext.index() : arrayContext.index;\n };\n\n inputs['eventContext'] = {\n key: fieldDef.key,\n index: getIndex(),\n arrayKey: arrayContext?.arrayKey ?? '',\n formValue: arrayContext?.formValue ?? {},\n template,\n };\n }\n\n return inputs;\n });\n}\n","import { FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';\nimport {\n addArrayItemButtonMapper,\n checkboxFieldMapper,\n datepickerFieldMapper,\n insertArrayItemButtonMapper,\n optionsFieldMapper,\n popArrayItemButtonMapper,\n prependArrayItemButtonMapper,\n removeArrayItemButtonMapper,\n shiftArrayItemButtonMapper,\n valueFieldMapper,\n} from '@ng-forge/dynamic-forms/integration';\nimport { MatField } from '../types/types';\nimport { buttonFieldMapper } from '../fields/button/mat-button.mapper';\nimport { nextButtonFieldMapper, previousButtonFieldMapper, submitButtonFieldMapper } from '../fields/button/mat-specific-button.mapper';\n\n/**\n * Base for value-bearing field types — waits for the mapper to emit the `field`\n * input before instantiating the component (matches NgForgeField's\n * `input.required<FieldTree<T>>()` contract).\n */\nconst VALUE_FIELD_TYPES_BASE = {\n renderReadyWhen: ['field'],\n} as const;\n\n/**\n * Base for action/button field types that don't bind to a form value.\n * Renders immediately, opted out of form-value collection.\n */\nconst BUTTON_FIELD_TYPES_BASE = {\n renderReadyWhen: [],\n valueHandling: 'exclude',\n} as const;\n\n/**\n * Material Design field type definitions\n * Follows the FieldTypeDefinition interface for proper registry integration\n */\nexport const MATERIAL_FIELD_TYPES: FieldTypeDefinition[] = [\n {\n name: MatField.Input,\n loadComponent: () => import('../fields/input/mat-input.component'),\n mapper: valueFieldMapper,\n propsToMeta: ['type'],\n scope: ['text-input', 'numeric'],\n addons: {\n slots: ['prefix', 'suffix'],\n },\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Select,\n loadComponent: () => import('../fields/select/mat-select.component'),\n mapper: optionsFieldMapper,\n scope: 'single-select',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Checkbox,\n loadComponent: () => import('../fields/checkbox/mat-checkbox.component'),\n mapper: checkboxFieldMapper,\n scope: 'boolean',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Button,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: buttonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Submit,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: submitButtonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Next,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: nextButtonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Previous,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: previousButtonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.AddArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: addArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.PrependArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: prependArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.InsertArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: insertArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.RemoveArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: removeArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.PopArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: popArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.ShiftArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: shiftArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Textarea,\n loadComponent: () => import('../fields/textarea/mat-textarea.component'),\n mapper: valueFieldMapper,\n propsToMeta: ['rows', 'cols'],\n scope: 'text-input',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Radio,\n loadComponent: () => import('../fields/radio/mat-radio.component'),\n mapper: optionsFieldMapper,\n scope: 'single-select',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.MultiCheckbox,\n loadComponent: () => import('../fields/multi-checkbox/mat-multi-checkbox.component'),\n mapper: optionsFieldMapper,\n scope: 'multi-select',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Datepicker,\n loadComponent: () => import('../fields/datepicker/mat-datepicker.component'),\n mapper: datepickerFieldMapper,\n scope: 'date',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Slider,\n loadComponent: () => import('../fields/slider/mat-slider.component'),\n mapper: valueFieldMapper,\n scope: 'numeric',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Toggle,\n loadComponent: () => import('../fields/toggle/mat-toggle.component'),\n mapper: checkboxFieldMapper,\n scope: 'boolean',\n ...VALUE_FIELD_TYPES_BASE,\n },\n];\n","import type { Provider } from '@angular/core';\nimport { DynamicFormError, type AddonKindDefinition } from '@ng-forge/dynamic-forms';\nimport { ADDON_KIND_DEFINITIONS, type FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';\nimport { MATERIAL_FIELD_TYPES } from '../config/material-field-config';\nimport { MaterialConfig } from '../models/material-config';\nimport { MATERIAL_CONFIG } from '../models/material-config.token';\nimport type { MatButtonAddon, MatIconAddon } from '../types/addons';\n\n/** Field type definitions for Material Design components. */\nexport type MaterialFieldTypes = FieldTypeDefinition[];\n\ntype MaterialConfigFeature = {\n ɵkind: 'material-config';\n ɵproviders: Provider[];\n};\n\n/**\n * Default `withMaterialFields()` shape — field defs + the auto-included\n * addons feature so `mat-icon` / `mat-button` work out of the box.\n */\ntype MaterialFieldsWithAddons = [...MaterialFieldTypes, MaterialAddonsFeature];\n\ntype MaterialFieldsWithConfig = [...MaterialFieldTypes, MaterialAddonsFeature, MaterialConfigFeature];\n\n/**\n * Configure dynamic forms with Material Design field types, with\n * Material-shipped addon kinds (`mat-icon`, `mat-button`) auto-included so\n * addons work out of the box.\n *\n * @param config - Optional global configuration for Material form fields\n * @returns Tuple of field type definitions, the addons feature, and\n * optionally a config feature.\n */\nexport function withMaterialFields(): MaterialFieldsWithAddons;\nexport function withMaterialFields(config: MaterialConfig): MaterialFieldsWithConfig;\nexport function withMaterialFields(config: MaterialConfig | undefined): MaterialFieldsWithAddons | MaterialFieldsWithConfig;\nexport function withMaterialFields(config?: MaterialConfig): MaterialFieldsWithAddons | MaterialFieldsWithConfig {\n // Always include the addons feature — mat-icon / mat-button are part of\n // the canonical Material surface.\n const base: unknown[] = [...MATERIAL_FIELD_TYPES, withMaterialAddons()];\n\n if (config) {\n base.push({\n ɵkind: 'material-config',\n ɵproviders: [{ provide: MATERIAL_CONFIG, useValue: config }],\n } satisfies MaterialConfigFeature);\n return base as MaterialFieldsWithConfig;\n }\n\n return base as MaterialFieldsWithAddons;\n}\n\n/* -- Material addon kinds ----------------------------------------------- */\n\nconst MAT_ICON_KIND: AddonKindDefinition<MatIconAddon> = {\n kind: 'mat-icon',\n loadComponent: () => import('../addons/mat-icon-addon.component').then((m) => m.MatIconAddonComponent),\n validate: (addon, fieldKey) => {\n if (typeof addon.icon !== 'string' || addon.icon.length === 0) {\n throw new DynamicFormError(`Addon kind 'mat-icon' requires a non-empty 'icon' string (field: '${fieldKey}').`);\n }\n },\n};\n\nconst MAT_BUTTON_KIND: AddonKindDefinition<MatButtonAddon> = {\n kind: 'mat-button',\n loadComponent: () => import('../addons/mat-button-addon.component').then((m) => m.MatButtonAddonComponent),\n validate: (addon, fieldKey) => {\n // Exactly one of preset / actionRef / action — validator drops the addon\n // (with warning) if the rule is violated.\n const set = [addon.preset, addon.actionRef, addon.action].filter((v) => v !== undefined);\n if (set.length > 1) {\n throw new DynamicFormError(\n `Addon kind 'mat-button' on field '${fieldKey}' has more than one of preset/actionRef/action — exactly one allowed.`,\n );\n }\n // Icon-only buttons require ariaLabel for screen readers.\n if (addon.icon && !addon.label && !addon.ariaLabel) {\n throw new DynamicFormError(`Addon kind 'mat-button' on field '${fieldKey}' is icon-only — provide 'ariaLabel' for accessibility.`);\n }\n },\n};\n\n/**\n * Feature kind discriminant for the Material addons feature. Matches core's\n * `'addons'` kind so providers flow through the standard addon-kind pipeline\n * in `provideDynamicForm`.\n */\ntype MaterialAddonsFeature = {\n ɵkind: 'addons';\n ɵproviders: Provider[];\n};\n\n/** Register Material-shipped addon kinds (`mat-icon`, `mat-button`) standalone. */\nexport function withMaterialAddons(): MaterialAddonsFeature {\n return {\n ɵkind: 'addons',\n ɵproviders: [\n { provide: ADDON_KIND_DEFINITIONS, useValue: MAT_ICON_KIND, multi: true },\n { provide: ADDON_KIND_DEFINITIONS, useValue: MAT_BUTTON_KIND, multi: true },\n ],\n };\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatIcon } from '@angular/material/icon';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport type { MatIconAddon } from '../types/addons';\n\n/** Renderer for the `mat-icon` addon kind. */\n@Component({\n selector: 'df-mat-icon-addon',\n imports: [MatIcon, AsyncPipe, DynamicTextPipe],\n template: `<mat-icon [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\">{{ addon().icon }}</mat-icon>`,\n host: {\n '[attr.aria-hidden]': 'hasAriaLabel() ? null : \"true\"',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatIconAddonComponent {\n readonly addon = input.required<MatIconAddon>();\n /** Accepted for contract uniformity — `NgComponentOutlet` setInput is strict; every kind must declare it. */\n readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n protected readonly hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined);\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\nimport { MatButton, MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAddonAction, NgForgeAddonAction } from '@ng-forge/dynamic-forms/integration';\nimport type { MatButtonAddon } from '../types/addons';\n\n/** Renderer for the `mat-button` addon kind. */\n@Component({\n selector: 'df-mat-button-addon',\n imports: [MatButton, MatIconButton, MatIcon, MatProgressSpinner, DynamicTextPipe, AsyncPipe],\n hostDirectives: [NgForgeAddonAction],\n template: `\n @if (isIconOnly()) {\n <button\n mat-icon-button\n type=\"button\"\n [color]=\"addon().color ?? null\"\n [disabled]=\"action.disabled() || action.loading()\"\n [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"\n [attr.aria-busy]=\"action.loading() || null\"\n (click)=\"action.dispatch()\"\n >\n @if (action.loading()) {\n <mat-progress-spinner mode=\"indeterminate\" diameter=\"18\" aria-hidden=\"true\" />\n <span class=\"df-mat-sr-only\" role=\"status\">Loading…</span>\n } @else {\n <mat-icon aria-hidden=\"true\">{{ addon().icon }}</mat-icon>\n }\n </button>\n } @else {\n <button\n mat-button\n type=\"button\"\n [color]=\"addon().color ?? null\"\n [disabled]=\"action.disabled() || action.loading()\"\n [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"\n [attr.aria-busy]=\"action.loading() || null\"\n (click)=\"action.dispatch()\"\n >\n @if (action.loading()) {\n <mat-progress-spinner mode=\"indeterminate\" diameter=\"18\" aria-hidden=\"true\" />\n <span class=\"df-mat-sr-only\" role=\"status\">Loading…</span>\n } @else if (addon().icon; as icon) {\n <mat-icon aria-hidden=\"true\">{{ icon }}</mat-icon>\n }\n {{ label() | dynamicText | async }}\n </button>\n }\n `,\n styles: [\n `\n .df-mat-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatButtonAddonComponent {\n protected readonly action = injectNgForgeAddonAction<MatButtonAddon>();\n\n /** Re-exposed for template binding — same signal stored on the directive. */\n protected readonly addon = this.action.addon;\n\n protected readonly label = computed(() => this.addon().label);\n protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n protected readonly isIconOnly = computed(() => {\n const a = this.addon();\n return !!a.icon && !a.label;\n });\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ng-forge/dynamic-forms-material",
3
- "version": "0.10.0-next.4",
3
+ "version": "1.0.0-rc.1",
4
4
  "description": "Angular Material integration for @ng-forge/dynamic-forms. Pre-built Material Design form components.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -26,8 +26,8 @@
26
26
  "sideEffects": true,
27
27
  "exports": {
28
28
  ".": {
29
- "default": "./fesm2022/ng-forge-dynamic-forms-material.mjs",
30
- "types": "./types/ng-forge-dynamic-forms-material.d.ts"
29
+ "types": "./types/ng-forge-dynamic-forms-material.d.ts",
30
+ "default": "./fesm2022/ng-forge-dynamic-forms-material.mjs"
31
31
  },
32
32
  "./styles/defaults": "./styles/_defaults.scss",
33
33
  "./package.json": {
@@ -38,11 +38,11 @@
38
38
  "node": ">=20"
39
39
  },
40
40
  "peerDependencies": {
41
- "@angular/common": "~21.2.0",
42
- "@angular/core": "~21.2.0",
43
- "@angular/forms": "~21.2.0",
44
- "@angular/material": "~21.2.0",
45
- "@ng-forge/dynamic-forms": "~0.10.0-next.4",
41
+ "@angular/common": "~22.0.0",
42
+ "@angular/core": "~22.0.0",
43
+ "@angular/forms": "~22.0.0",
44
+ "@angular/material": "~22.0.0",
45
+ "@ng-forge/dynamic-forms": "~1.0.0-rc.1",
46
46
  "rxjs": ">=7.0.0"
47
47
  },
48
48
  "module": "fesm2022/ng-forge-dynamic-forms-material.mjs",
package/types/ng-forge-dynamic-forms-material.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as _angular_core from '@angular/core';
2
2
  import { InjectionToken, Provider, WritableSignal } from '@angular/core';
3
3
  import * as _ng_forge_dynamic_forms_integration from '@ng-forge/dynamic-forms/integration';
4
- import { CheckboxField, CheckedFieldComponent, DatepickerField, DatepickerProps, ValueFieldComponent, AddonActionHandler, InputField, InputProps, WrapperFieldInputs, MultiCheckboxField, RadioField, SelectField, SelectProps, SliderField, ButtonField, TextareaField, TextareaProps, ToggleField, FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';
4
+ import { CheckboxField, DatepickerField, DatepickerProps, AddonActionHandler, InputField, InputProps, WrapperFieldInputs, MultiCheckboxField, RadioField, SelectField, SelectProps, SliderField, ButtonField, TextareaField, TextareaProps, ToggleField, FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';
5
5
  import * as _ng_forge_dynamic_forms from '@ng-forge/dynamic-forms';
6
6
  import { DynamicText, BaseAddon, DynamicValue, AddonActionPreset, RegisteredActionRef, TextAddon, TemplateAddon, ValueType, FieldOption, FormEvent, NextPageEvent, PreviousPageEvent, AppendArrayItemEvent, ArrayAllowedChildren, PrependArrayItemEvent, InsertArrayItemEvent, RemoveAtIndexEvent, PopArrayItemEvent, ShiftArrayItemEvent, NarrowFields, RegisteredFieldTypes, InferFormValue, FormConfig } from '@ng-forge/dynamic-forms';
7
7
  import { ThemePalette } from '@angular/material/core';
@@ -16,8 +16,6 @@ interface MatCheckboxProps {
16
16
  indeterminate?: boolean;
17
17
  }
18
18
  type MatCheckboxField = CheckboxField<MatCheckboxProps>;
19
- /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
20
- type MatCheckboxComponent = CheckedFieldComponent<MatCheckboxField>;
21
19
 
22
20
  declare class MatCheckboxFieldComponent {
23
21
  private materialConfig;
@@ -40,8 +38,6 @@ interface MatDatepickerProps extends DatepickerProps {
40
38
  hint?: DynamicText;
41
39
  }
42
40
  type MatDatepickerField = DatepickerField<MatDatepickerProps>;
43
- /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
44
- type MatDatepickerComponent = ValueFieldComponent<MatDatepickerField>;
45
41
 
46
42
  declare class MatDatepickerFieldComponent {
47
43
  private materialConfig;
@@ -169,8 +165,6 @@ type MatInputAddon = MatIconAddon | MatButtonAddon | TextAddon | TemplateAddon |
169
165
  type MatInputField = InputField<MatInputProps> & {
170
166
  addons?: ReadonlyArray<MatInputAddon>;
171
167
  };
172
- /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
173
- type MatInputComponent = ValueFieldComponent<MatInputField>;
174
168
 
175
169
  declare class MatInputFieldComponent {
176
170
  private materialConfig;
@@ -202,8 +196,6 @@ interface MatMultiCheckboxProps {
202
196
  color?: ThemePalette;
203
197
  }
204
198
  type MatMultiCheckboxField<T> = MultiCheckboxField<T, MatMultiCheckboxProps>;
205
- /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
206
- type MatMultiCheckboxComponent = ValueFieldComponent<MatMultiCheckboxField<ValueType>>;
207
199
 
208
200
  declare class MatMultiCheckboxFieldComponent {
209
201
  protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<ValueType[]>;
@@ -225,8 +217,6 @@ interface MatRadioProps {
225
217
  hint?: DynamicText;
226
218
  }
227
219
  type MatRadioField<T> = RadioField<T, MatRadioProps>;
228
- /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
229
- type MatRadioComponent = ValueFieldComponent<MatRadioField<ValueType>>;
230
220
 
231
221
  declare class MatRadioFieldComponent {
232
222
  protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<ValueType>;
@@ -247,8 +237,6 @@ interface MatSelectProps extends SelectProps {
247
237
  hint?: DynamicText;
248
238
  }
249
239
  type MatSelectField<T> = SelectField<T, MatSelectProps>;
250
- /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
251
- type MatSelectComponent = ValueFieldComponent<MatSelectField<ValueType>>;
252
240
 
253
241
  declare class MatSelectFieldComponent {
254
242
  private materialConfig;
@@ -274,8 +262,6 @@ interface MatSliderProps {
274
262
  step?: number;
275
263
  }
276
264
  type MatSliderField = SliderField<MatSliderProps>;
277
- /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
278
- type MatSliderComponent = ValueFieldComponent<MatSliderField>;
279
265
 
280
266
  declare class MatSliderFieldComponent {
281
267
  protected readonly ngf: _ng_forge_dynamic_forms_integration.TypedNgForgeField<number>;
@@ -385,7 +371,7 @@ type ShiftArrayItemButtonField = Omit<MatButtonField<ShiftArrayItemEvent>, 'even
385
371
  declare class MatButtonFieldComponent<TEvent extends FormEvent> {
386
372
  protected readonly action: _ng_forge_dynamic_forms_integration.NgForgeAction<TEvent>;
387
373
  readonly props: _angular_core.InputSignal<MatButtonProps | undefined>;
388
- readonly buttonType: _angular_core.Signal<"button" | "submit" | "reset">;
374
+ readonly buttonType: _angular_core.Signal<"reset" | "button" | "submit">;
389
375
  readonly buttonTestId: _angular_core.Signal<string>;
390
376
  onClick(): void;
391
377
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatButtonFieldComponent<any>, never>;
@@ -401,8 +387,6 @@ interface MatTextareaProps extends TextareaProps {
401
387
  resize?: 'none' | 'both' | 'horizontal' | 'vertical';
402
388
  }
403
389
  type MatTextareaField = TextareaField<MatTextareaProps>;
404
- /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
405
- type MatTextareaComponent = ValueFieldComponent<MatTextareaField>;
406
390
 
407
391
  declare class MatTextareaFieldComponent {
408
392
  private materialConfig;
@@ -425,8 +409,6 @@ interface MatToggleProps {
425
409
  hideIcon?: boolean;
426
410
  }
427
411
  type MatToggleField = ToggleField<MatToggleProps>;
428
- /** @deprecated Scheduled for removal in v1. Use `injectNgForgeField<T>()` for typed access to a field component's directive instance. */
429
- type MatToggleComponent = CheckedFieldComponent<MatToggleField>;
430
412
 
431
413
  declare class MatToggleFieldComponent {
432
414
  private materialConfig;
@@ -628,4 +610,4 @@ declare class MatButtonAddonComponent {
628
610
  declare const MAT_INPUT_TYPE_OVERRIDE: InjectionToken<WritableSignal<string | undefined>>;
629
611
 
630
612
  export { MATERIAL_CONFIG, MATERIAL_FIELD_TYPES, MAT_INPUT_TYPE_OVERRIDE, MatButtonAddonComponent, MatButtonFieldComponent, MatCheckboxFieldComponent, MatDatepickerFieldComponent, MatField, MatIconAddonComponent, MatInputFieldComponent, MatMultiCheckboxFieldComponent, MatRadioFieldComponent, MatSelectFieldComponent, MatSliderFieldComponent, MatTextareaFieldComponent, MatToggleFieldComponent, withMaterialAddons, withMaterialFields };
631
- export type { AddArrayItemButtonField, InsertArrayItemButtonField, MatAddon, MatAddonExtensions, MatButtonAddon, MatButtonField, MatButtonProps, MatCheckboxComponent, MatCheckboxField, MatCheckboxProps, MatDatepickerComponent, MatDatepickerField, MatDatepickerProps, MatFieldType, MatFormConfig, MatFormProps, MatIconAddon, MatInputAddon, MatInputComponent, MatInputField, MatInputProps, MatMultiCheckboxComponent, MatMultiCheckboxField, MatMultiCheckboxProps, MatNextButtonField, MatPreviousButtonField, MatRadioComponent, MatRadioField, MatRadioProps, MatSelectComponent, MatSelectField, MatSelectProps, MatSliderComponent, MatSliderField, MatSliderProps, MatSubmitButtonField, MatTextareaComponent, MatTextareaField, MatTextareaProps, MatToggleComponent, MatToggleField, MatToggleProps, MaterialConfig, PopArrayItemButtonField, PrependArrayItemButtonField, RemoveArrayItemButtonField, ShiftArrayItemButtonField };
613
+ export type { AddArrayItemButtonField, InsertArrayItemButtonField, MatAddon, MatAddonExtensions, MatButtonAddon, MatButtonField, MatButtonProps, MatCheckboxField, MatCheckboxProps, MatDatepickerField, MatDatepickerProps, MatFieldType, MatFormConfig, MatFormProps, MatIconAddon, MatInputAddon, MatInputField, MatInputProps, MatMultiCheckboxField, MatMultiCheckboxProps, MatNextButtonField, MatPreviousButtonField, MatRadioField, MatRadioProps, MatSelectField, MatSelectProps, MatSliderField, MatSliderProps, MatSubmitButtonField, MatTextareaField, MatTextareaProps, MatToggleField, MatToggleProps, MaterialConfig, PopArrayItemButtonField, PrependArrayItemButtonField, RemoveArrayItemButtonField, ShiftArrayItemButtonField };