@ng-forge/dynamic-forms-material 0.1.3 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +3 -1
  2. package/fesm2022/ng-forge-dynamic-forms-material.mjs +201 -322
  3. package/fesm2022/ng-forge-dynamic-forms-material.mjs.map +1 -1
  4. package/package.json +6 -6
  5. package/types/ng-forge-dynamic-forms-material.d.ts +53 -30
package/fesm2022/ng-forge-dynamic-forms-material.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, inject, input, ElementRef, computed, ChangeDetectionStrategy, Component, viewChild, Pipe, linkedSignal, isSignal } from '@angular/core';
3
- import { Field } from '@angular/forms/signals';
2
+ import { InjectionToken, inject, ElementRef, input, computed, ChangeDetectionStrategy, Component, viewChild, afterRenderEffect, linkedSignal, isSignal } from '@angular/core';
3
+ import { FormField } from '@angular/forms/signals';
4
4
  import { MatCheckbox } from '@angular/material/checkbox';
5
- import { DynamicTextPipe, EventBus, ARRAY_CONTEXT, resolveTokens, buildBaseInputs, FIELD_SIGNAL_CONTEXT, resolveSubmitButtonDisabled, resolveNextButtonDisabled, NextPageEvent, PreviousPageEvent, DYNAMIC_FORM_LOGGER, AddArrayItemEvent, RemoveArrayItemEvent } from '@ng-forge/dynamic-forms';
6
- import { createResolvedErrorsSignal, shouldShowErrors, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, datepickerFieldMapper } from '@ng-forge/dynamic-forms/integration';
5
+ import { DynamicTextPipe, EventBus, ARRAY_CONTEXT, resolveTokens, buildBaseInputs, FIELD_SIGNAL_CONTEXT, resolveSubmitButtonDisabled, resolveNextButtonDisabled, NextPageEvent, PreviousPageEvent, DynamicFormLogger, AddArrayItemEvent, RemoveArrayItemEvent } from '@ng-forge/dynamic-forms';
6
+ import { createResolvedErrorsSignal, shouldShowErrors, setupMetaTracking, isEqual, ValueInArrayPipe, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, datepickerFieldMapper } from '@ng-forge/dynamic-forms/integration';
7
7
  import { MatError, MatInput, MatHint } from '@angular/material/input';
8
8
  import { AsyncPipe } from '@angular/common';
9
9
  import { explicitEffect } from 'ngxtension/explicit-effect';
@@ -41,25 +41,28 @@ const MATERIAL_CONFIG = new InjectionToken('MATERIAL_CONFIG');
41
41
 
42
42
  class MatCheckboxFieldComponent {
43
43
  materialConfig = inject(MATERIAL_CONFIG, { optional: true });
44
+ elementRef = inject((ElementRef));
44
45
  field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
45
46
  key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
46
- /**
47
- * Host element reference for DOM queries.
48
- * Used to find the internal checkbox input for accessibility workarounds.
49
- */
50
- hostEl = inject((ElementRef));
51
47
  // Properties
52
48
  label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
53
49
  placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
54
50
  className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
55
51
  tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
56
52
  props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
53
+ meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
57
54
  validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
58
55
  defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
59
56
  effectiveDisableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, ...(ngDevMode ? [{ debugName: "effectiveDisableRipple" }] : []));
60
57
  resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
61
58
  showErrors = shouldShowErrors(this.field);
62
59
  errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
60
+ constructor() {
61
+ // Apply meta attributes to the internal checkbox input
62
+ setupMetaTracking(this.elementRef, this.meta, {
63
+ selector: 'input[type="checkbox"]',
64
+ });
65
+ }
63
66
  // ─────────────────────────────────────────────────────────────────────────────
64
67
  // Accessibility
65
68
  // ─────────────────────────────────────────────────────────────────────────────
@@ -97,7 +100,7 @@ class MatCheckboxFieldComponent {
97
100
  * @see https://github.com/angular/components/issues/XXXXX (TODO: file issue)
98
101
  */
99
102
  syncAriaRequiredToDom = explicitEffect([this.ariaRequired], ([isRequired]) => {
100
- const inputEl = this.hostEl.nativeElement.querySelector('input[type="checkbox"]');
103
+ const inputEl = this.elementRef.nativeElement.querySelector('input[type="checkbox"]');
101
104
  if (inputEl) {
102
105
  if (isRequired) {
103
106
  inputEl.setAttribute('aria-required', 'true');
@@ -107,13 +110,13 @@ class MatCheckboxFieldComponent {
107
110
  }
108
111
  }
109
112
  });
110
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
111
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatCheckboxFieldComponent, isStandalone: true, selector: "df-mat-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
113
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
114
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MatCheckboxFieldComponent, isStandalone: true, selector: "df-mat-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
112
115
  @let f = field();
113
116
  @let ariaDescribedBy = this.ariaDescribedBy();
114
117
 
115
118
  <mat-checkbox
116
- [field]="f"
119
+ [formField]="f"
117
120
  [labelPosition]="props()?.labelPosition || 'after'"
118
121
  [indeterminate]="props()?.indeterminate || false"
119
122
  [color]="props()?.color || 'primary'"
@@ -132,16 +135,16 @@ class MatCheckboxFieldComponent {
132
135
  @for (error of errorsToDisplay(); track error.kind; let i = $index) {
133
136
  <mat-error [id]="errorId() + '-' + i" [attr.hidden]="f().hidden() || null">{{ error.message }}</mat-error>
134
137
  }
135
- `, isInline: true, styles: [":host{display:block}:host([hidden]){display:none!important}\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: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
138
+ `, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
136
139
  }
137
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatCheckboxFieldComponent, decorators: [{
140
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatCheckboxFieldComponent, decorators: [{
138
141
  type: Component,
139
- args: [{ selector: 'df-mat-checkbox', imports: [MatCheckbox, Field, MatError, DynamicTextPipe, AsyncPipe], template: `
142
+ args: [{ selector: 'df-mat-checkbox', imports: [MatCheckbox, FormField, MatError, DynamicTextPipe, AsyncPipe], template: `
140
143
  @let f = field();
141
144
  @let ariaDescribedBy = this.ariaDescribedBy();
142
145
 
143
146
  <mat-checkbox
144
- [field]="f"
147
+ [formField]="f"
145
148
  [labelPosition]="props()?.labelPosition || 'after'"
146
149
  [indeterminate]="props()?.indeterminate || false"
147
150
  [color]="props()?.color || 'primary'"
@@ -165,8 +168,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
165
168
  '[id]': '`${key()}`',
166
169
  '[attr.data-testid]': 'key()',
167
170
  '[attr.hidden]': 'field()().hidden() || null',
168
- }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}:host([hidden]){display:none!important}\n"] }]
169
- }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
171
+ }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n"] }]
172
+ }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
170
173
 
171
174
  var matCheckbox_component = /*#__PURE__*/Object.freeze({
172
175
  __proto__: null,
@@ -175,8 +178,12 @@ var matCheckbox_component = /*#__PURE__*/Object.freeze({
175
178
 
176
179
  class MatDatepickerFieldComponent {
177
180
  materialConfig = inject(MATERIAL_CONFIG, { optional: true });
181
+ elementRef = inject((ElementRef));
178
182
  field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
179
183
  key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
184
+ constructor() {
185
+ setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
186
+ }
180
187
  label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
181
188
  placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
182
189
  className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
@@ -185,6 +192,7 @@ class MatDatepickerFieldComponent {
185
192
  maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
186
193
  startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : []));
187
194
  props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
195
+ meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
188
196
  validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
189
197
  defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
190
198
  effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
@@ -220,8 +228,8 @@ class MatDatepickerFieldComponent {
220
228
  });
221
229
  return ids.length > 0 ? ids.join(' ') : null;
222
230
  }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
223
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
224
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatDatepickerFieldComponent, isStandalone: true, selector: "df-mat-datepicker", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, providers: [provideNativeDateAdapter()], ngImport: i0, template: `
231
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
232
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MatDatepickerFieldComponent, isStandalone: true, selector: "df-mat-datepicker", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, providers: [provideNativeDateAdapter()], ngImport: i0, template: `
225
233
  @let f = field();
226
234
  @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
227
235
  @let ariaDescribedBy = this.ariaDescribedBy();
@@ -234,7 +242,7 @@ class MatDatepickerFieldComponent {
234
242
  <input
235
243
  matInput
236
244
  [matDatepicker]="picker"
237
- [field]="f"
245
+ [formField]="f"
238
246
  [placeholder]="(placeholder() | dynamicText | async) ?? ''"
239
247
  [attr.tabindex]="tabIndex()"
240
248
  [min]="minDate()"
@@ -254,9 +262,9 @@ class MatDatepickerFieldComponent {
254
262
  <mat-error [id]="errorId() + '-' + i">{{ error.message }}</mat-error>
255
263
  }
256
264
  </mat-form-field>
257
- `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}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: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
265
+ `, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
258
266
  }
259
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatDatepickerFieldComponent, decorators: [{
267
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatDatepickerFieldComponent, decorators: [{
260
268
  type: Component,
261
269
  args: [{ selector: 'df-mat-datepicker', imports: [
262
270
  MatFormField,
@@ -267,7 +275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
267
275
  MatDatepickerInput,
268
276
  MatDatepickerToggle,
269
277
  MatSuffix,
270
- Field,
278
+ FormField,
271
279
  MatError$1,
272
280
  DynamicTextPipe,
273
281
  AsyncPipe,
@@ -288,7 +296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
288
296
  <input
289
297
  matInput
290
298
  [matDatepicker]="picker"
291
- [field]="f"
299
+ [formField]="f"
292
300
  [placeholder]="(placeholder() | dynamicText | async) ?? ''"
293
301
  [attr.tabindex]="tabIndex()"
294
302
  [min]="minDate()"
@@ -308,8 +316,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
308
316
  <mat-error [id]="errorId() + '-' + i">{{ error.message }}</mat-error>
309
317
  }
310
318
  </mat-form-field>
311
- `, providers: [provideNativeDateAdapter()], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}mat-form-field{width:100%}\n"] }]
312
- }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
319
+ `, providers: [provideNativeDateAdapter()], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "mat-form-field{width:100%}\n"] }]
320
+ }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
313
321
 
314
322
  var matDatepicker_component = /*#__PURE__*/Object.freeze({
315
323
  __proto__: null,
@@ -318,8 +326,20 @@ var matDatepicker_component = /*#__PURE__*/Object.freeze({
318
326
 
319
327
  class MatInputFieldComponent {
320
328
  materialConfig = inject(MATERIAL_CONFIG, { optional: true });
329
+ elementRef = inject((ElementRef));
321
330
  field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
322
331
  key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
332
+ label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
333
+ placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
334
+ className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
335
+ tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
336
+ props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
337
+ meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
338
+ validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
339
+ defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
340
+ constructor() {
341
+ setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
342
+ }
323
343
  /**
324
344
  * Reference to the native input element.
325
345
  * Used to imperatively sync the readonly attribute since Angular Signal Forms'
@@ -340,25 +360,24 @@ class MatInputFieldComponent {
340
360
  * Note: We cannot use [readonly] or [attr.readonly] bindings because Angular throws
341
361
  * NG8022: "Binding to '[readonly]' is not allowed on nodes using the '[field]' directive"
342
362
  *
363
+ * Uses afterRenderEffect to ensure DOM is ready before manipulating attributes.
364
+ *
343
365
  * @see https://github.com/angular/angular/issues/65897
344
366
  */
345
- syncReadonlyToDom = explicitEffect([this.inputRef, this.isReadonly], ([inputRef, isReadonly]) => {
346
- if (inputRef?.nativeElement) {
347
- if (isReadonly) {
348
- inputRef.nativeElement.setAttribute('readonly', '');
349
- }
350
- else {
351
- inputRef.nativeElement.removeAttribute('readonly');
367
+ syncReadonlyToDom = afterRenderEffect({
368
+ write: () => {
369
+ const inputRef = this.inputRef();
370
+ const isReadonly = this.isReadonly();
371
+ if (inputRef?.nativeElement) {
372
+ if (isReadonly) {
373
+ inputRef.nativeElement.setAttribute('readonly', '');
374
+ }
375
+ else {
376
+ inputRef.nativeElement.removeAttribute('readonly');
377
+ }
352
378
  }
353
- }
379
+ },
354
380
  });
355
- label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
356
- placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
357
- className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
358
- tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
359
- props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
360
- validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
361
- defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
362
381
  effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
363
382
  effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : []));
364
383
  resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
@@ -392,8 +411,8 @@ class MatInputFieldComponent {
392
411
  });
393
412
  return ids.length > 0 ? ids.join(' ') : null;
394
413
  }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
395
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
396
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatInputFieldComponent, isStandalone: true, selector: "df-mat-input", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
414
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
415
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MatInputFieldComponent, isStandalone: true, selector: "df-mat-input", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
397
416
  @let f = field();
398
417
  @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
399
418
  @let ariaDescribedBy = this.ariaDescribedBy();
@@ -402,86 +421,17 @@ class MatInputFieldComponent {
402
421
  @if (label()) {
403
422
  <mat-label>{{ label() | dynamicText | async }}</mat-label>
404
423
  }
405
- @switch (props()?.type ?? 'text') {
406
- @case ('email') {
407
- <input
408
- #inputRef
409
- matInput
410
- type="email"
411
- [field]="f"
412
- [placeholder]="(placeholder() | dynamicText | async) ?? ''"
413
- [attr.tabindex]="tabIndex()"
414
- [attr.aria-invalid]="ariaInvalid"
415
- [attr.aria-required]="ariaRequired"
416
- [attr.aria-describedby]="ariaDescribedBy"
417
- />
418
- }
419
- @case ('password') {
420
- <input
421
- #inputRef
422
- matInput
423
- type="password"
424
- [field]="f"
425
- [placeholder]="(placeholder() | dynamicText | async) ?? ''"
426
- [attr.tabindex]="tabIndex()"
427
- [attr.aria-invalid]="ariaInvalid"
428
- [attr.aria-required]="ariaRequired"
429
- [attr.aria-describedby]="ariaDescribedBy"
430
- />
431
- }
432
- @case ('number') {
433
- <input
434
- #inputRef
435
- matInput
436
- type="number"
437
- [field]="f"
438
- [placeholder]="(placeholder() | dynamicText | async) ?? ''"
439
- [attr.tabindex]="tabIndex()"
440
- [attr.aria-invalid]="ariaInvalid"
441
- [attr.aria-required]="ariaRequired"
442
- [attr.aria-describedby]="ariaDescribedBy"
443
- />
444
- }
445
- @case ('tel') {
446
- <input
447
- #inputRef
448
- matInput
449
- type="tel"
450
- [field]="f"
451
- [placeholder]="(placeholder() | dynamicText | async) ?? ''"
452
- [attr.tabindex]="tabIndex()"
453
- [attr.aria-invalid]="ariaInvalid"
454
- [attr.aria-required]="ariaRequired"
455
- [attr.aria-describedby]="ariaDescribedBy"
456
- />
457
- }
458
- @case ('url') {
459
- <input
460
- #inputRef
461
- matInput
462
- type="url"
463
- [field]="f"
464
- [placeholder]="(placeholder() | dynamicText | async) ?? ''"
465
- [attr.tabindex]="tabIndex()"
466
- [attr.aria-invalid]="ariaInvalid"
467
- [attr.aria-required]="ariaRequired"
468
- [attr.aria-describedby]="ariaDescribedBy"
469
- />
470
- }
471
- @default {
472
- <input
473
- #inputRef
474
- matInput
475
- type="text"
476
- [field]="f"
477
- [placeholder]="(placeholder() | dynamicText | async) ?? ''"
478
- [attr.tabindex]="tabIndex()"
479
- [attr.aria-invalid]="ariaInvalid"
480
- [attr.aria-required]="ariaRequired"
481
- [attr.aria-describedby]="ariaDescribedBy"
482
- />
483
- }
484
- }
424
+ <input
425
+ #inputRef
426
+ matInput
427
+ [formField]="f"
428
+ [type]="props()?.type ?? 'text'"
429
+ [placeholder]="(placeholder() | dynamicText | async) ?? ''"
430
+ [attr.tabindex]="tabIndex()"
431
+ [attr.aria-invalid]="ariaInvalid"
432
+ [attr.aria-required]="ariaRequired"
433
+ [attr.aria-describedby]="ariaDescribedBy"
434
+ />
485
435
  @if (props()?.hint; as hint) {
486
436
  <mat-hint [id]="hintId()">{{ hint | dynamicText | async }}</mat-hint>
487
437
  }
@@ -489,11 +439,11 @@ class MatInputFieldComponent {
489
439
  <mat-error [id]="errorId() + '-' + i">{{ error.message }}</mat-error>
490
440
  }
491
441
  </mat-form-field>
492
- `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}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: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
442
+ `, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
493
443
  }
494
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatInputFieldComponent, decorators: [{
444
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatInputFieldComponent, decorators: [{
495
445
  type: Component,
496
- args: [{ selector: 'df-mat-input', imports: [MatFormField, MatLabel, MatInput, MatHint, Field, MatError$1, DynamicTextPipe, AsyncPipe], template: `
446
+ args: [{ selector: 'df-mat-input', imports: [MatFormField, MatLabel, MatInput, MatHint, FormField, MatError$1, DynamicTextPipe, AsyncPipe], template: `
497
447
  @let f = field();
498
448
  @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
499
449
  @let ariaDescribedBy = this.ariaDescribedBy();
@@ -502,86 +452,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
502
452
  @if (label()) {
503
453
  <mat-label>{{ label() | dynamicText | async }}</mat-label>
504
454
  }
505
- @switch (props()?.type ?? 'text') {
506
- @case ('email') {
507
- <input
508
- #inputRef
509
- matInput
510
- type="email"
511
- [field]="f"
512
- [placeholder]="(placeholder() | dynamicText | async) ?? ''"
513
- [attr.tabindex]="tabIndex()"
514
- [attr.aria-invalid]="ariaInvalid"
515
- [attr.aria-required]="ariaRequired"
516
- [attr.aria-describedby]="ariaDescribedBy"
517
- />
518
- }
519
- @case ('password') {
520
- <input
521
- #inputRef
522
- matInput
523
- type="password"
524
- [field]="f"
525
- [placeholder]="(placeholder() | dynamicText | async) ?? ''"
526
- [attr.tabindex]="tabIndex()"
527
- [attr.aria-invalid]="ariaInvalid"
528
- [attr.aria-required]="ariaRequired"
529
- [attr.aria-describedby]="ariaDescribedBy"
530
- />
531
- }
532
- @case ('number') {
533
- <input
534
- #inputRef
535
- matInput
536
- type="number"
537
- [field]="f"
538
- [placeholder]="(placeholder() | dynamicText | async) ?? ''"
539
- [attr.tabindex]="tabIndex()"
540
- [attr.aria-invalid]="ariaInvalid"
541
- [attr.aria-required]="ariaRequired"
542
- [attr.aria-describedby]="ariaDescribedBy"
543
- />
544
- }
545
- @case ('tel') {
546
- <input
547
- #inputRef
548
- matInput
549
- type="tel"
550
- [field]="f"
551
- [placeholder]="(placeholder() | dynamicText | async) ?? ''"
552
- [attr.tabindex]="tabIndex()"
553
- [attr.aria-invalid]="ariaInvalid"
554
- [attr.aria-required]="ariaRequired"
555
- [attr.aria-describedby]="ariaDescribedBy"
556
- />
557
- }
558
- @case ('url') {
559
- <input
560
- #inputRef
561
- matInput
562
- type="url"
563
- [field]="f"
564
- [placeholder]="(placeholder() | dynamicText | async) ?? ''"
565
- [attr.tabindex]="tabIndex()"
566
- [attr.aria-invalid]="ariaInvalid"
567
- [attr.aria-required]="ariaRequired"
568
- [attr.aria-describedby]="ariaDescribedBy"
569
- />
570
- }
571
- @default {
572
- <input
573
- #inputRef
574
- matInput
575
- type="text"
576
- [field]="f"
577
- [placeholder]="(placeholder() | dynamicText | async) ?? ''"
578
- [attr.tabindex]="tabIndex()"
579
- [attr.aria-invalid]="ariaInvalid"
580
- [attr.aria-required]="ariaRequired"
581
- [attr.aria-describedby]="ariaDescribedBy"
582
- />
583
- }
584
- }
455
+ <input
456
+ #inputRef
457
+ matInput
458
+ [formField]="f"
459
+ [type]="props()?.type ?? 'text'"
460
+ [placeholder]="(placeholder() | dynamicText | async) ?? ''"
461
+ [attr.tabindex]="tabIndex()"
462
+ [attr.aria-invalid]="ariaInvalid"
463
+ [attr.aria-required]="ariaRequired"
464
+ [attr.aria-describedby]="ariaDescribedBy"
465
+ />
585
466
  @if (props()?.hint; as hint) {
586
467
  <mat-hint [id]="hintId()">{{ hint | dynamicText | async }}</mat-hint>
587
468
  }
@@ -594,58 +475,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
594
475
  '[attr.data-testid]': 'key()',
595
476
  '[class]': 'className()',
596
477
  '[attr.hidden]': 'field()().hidden() || null',
597
- }, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}mat-form-field{width:100%}\n"] }]
598
- }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
478
+ }, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "mat-form-field{width:100%}\n"] }]
479
+ }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }] } });
599
480
 
600
481
  var matInput_component = /*#__PURE__*/Object.freeze({
601
482
  __proto__: null,
602
483
  default: MatInputFieldComponent
603
484
  });
604
485
 
605
- class ValueInArrayPipe {
606
- transform(element, array) {
607
- return array?.includes(element) ?? false;
608
- }
609
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
610
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, isStandalone: true, name: "inArray" });
611
- }
612
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, decorators: [{
613
- type: Pipe,
614
- args: [{
615
- pure: true,
616
- name: 'inArray',
617
- }]
618
- }] });
619
-
620
- /**
621
- * Performs a deep equality comparison between two values
622
- */
623
- function isEqual(a, b) {
624
- if (a === b)
625
- return true;
626
- if (a == null || b == null)
627
- return false;
628
- if (typeof a !== typeof b)
629
- return false;
630
- if (a instanceof Date && b instanceof Date) {
631
- return a.getTime() === b.getTime();
632
- }
633
- if (Array.isArray(a) && Array.isArray(b)) {
634
- if (a.length !== b.length)
635
- return false;
636
- return a.every((item, index) => isEqual(item, b[index]));
637
- }
638
- if (typeof a === 'object' && typeof b === 'object') {
639
- const keysA = Object.keys(a);
640
- const keysB = Object.keys(b);
641
- if (keysA.length !== keysB.length)
642
- return false;
643
- return keysA.every((key) => keysB.includes(key) && isEqual(a[key], b[key]));
644
- }
645
- return Object.is(a, b);
646
- }
647
-
648
486
  class MatMultiCheckboxFieldComponent {
487
+ elementRef = inject((ElementRef));
649
488
  field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
650
489
  key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
651
490
  label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
@@ -654,11 +493,17 @@ class MatMultiCheckboxFieldComponent {
654
493
  tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
655
494
  options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
656
495
  props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
496
+ meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
657
497
  valueViewModel = linkedSignal(() => {
658
498
  const currentValues = this.field()().value();
659
499
  return this.options().filter((option) => currentValues.includes(option.value));
660
500
  }, { ...(ngDevMode ? { debugName: "valueViewModel" } : {}), equal: isEqual });
661
501
  constructor() {
502
+ // Apply meta attributes to all checkbox inputs, re-apply when options change
503
+ setupMetaTracking(this.elementRef, this.meta, {
504
+ selector: 'input[type="checkbox"]',
505
+ dependents: [this.options],
506
+ });
662
507
  explicitEffect([this.valueViewModel], ([selectedOptions]) => {
663
508
  const selectedValues = selectedOptions.map((option) => option.value);
664
509
  if (!isEqual(selectedValues, this.field()().value())) {
@@ -717,8 +562,8 @@ class MatMultiCheckboxFieldComponent {
717
562
  });
718
563
  return ids.length > 0 ? ids.join(' ') : null;
719
564
  }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
720
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
721
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatMultiCheckboxFieldComponent, isStandalone: true, selector: "df-mat-multi-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className() || \"\"", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, providers: [ValueInArrayPipe], ngImport: i0, template: `
565
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
566
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MatMultiCheckboxFieldComponent, isStandalone: true, selector: "df-mat-multi-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className() || \"\"", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, providers: [ValueInArrayPipe], ngImport: i0, template: `
722
567
  @let f = field();
723
568
  @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
724
569
  @let ariaDescribedBy = this.ariaDescribedBy();
@@ -753,9 +598,9 @@ class MatMultiCheckboxFieldComponent {
753
598
  @for (error of errorsToDisplay(); track error.kind; let i = $index) {
754
599
  <mat-error [id]="errorId() + '-' + i">{{ error.message }}</mat-error>
755
600
  }
756
- `, isInline: true, styles: [":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: ValueInArrayPipe, name: "inArray" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
601
+ `, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: ValueInArrayPipe, name: "inArray" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
757
602
  }
758
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatMultiCheckboxFieldComponent, decorators: [{
603
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatMultiCheckboxFieldComponent, decorators: [{
759
604
  type: Component,
760
605
  args: [{ selector: 'df-mat-multi-checkbox', imports: [MatCheckbox, ValueInArrayPipe, MatError, DynamicTextPipe, AsyncPipe], template: `
761
606
  @let f = field();
@@ -797,8 +642,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
797
642
  '[id]': '`${key()}`',
798
643
  '[attr.data-testid]': 'key()',
799
644
  '[attr.hidden]': 'field()().hidden() || null',
800
- }, providers: [ValueInArrayPipe], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}:host([hidden]){display:none!important}\n"] }]
801
- }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
645
+ }, providers: [ValueInArrayPipe], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n"] }]
646
+ }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
802
647
 
803
648
  var matMultiCheckbox_component = /*#__PURE__*/Object.freeze({
804
649
  __proto__: null,
@@ -806,6 +651,7 @@ var matMultiCheckbox_component = /*#__PURE__*/Object.freeze({
806
651
  });
807
652
 
808
653
  class MatRadioFieldComponent {
654
+ elementRef = inject((ElementRef));
809
655
  field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
810
656
  key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
811
657
  label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
@@ -814,11 +660,19 @@ class MatRadioFieldComponent {
814
660
  tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
815
661
  options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
816
662
  props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
663
+ meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
817
664
  validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
818
665
  defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
819
666
  resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
820
667
  showErrors = shouldShowErrors(this.field);
821
668
  errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
669
+ constructor() {
670
+ // Apply meta attributes to all radio inputs, re-apply when options change
671
+ setupMetaTracking(this.elementRef, this.meta, {
672
+ selector: 'input[type="radio"]',
673
+ dependents: [this.options],
674
+ });
675
+ }
822
676
  // ─────────────────────────────────────────────────────────────────────────────
823
677
  // Accessibility
824
678
  // ─────────────────────────────────────────────────────────────────────────────
@@ -847,8 +701,8 @@ class MatRadioFieldComponent {
847
701
  });
848
702
  return ids.length > 0 ? ids.join(' ') : null;
849
703
  }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
850
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
851
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatRadioFieldComponent, isStandalone: true, selector: "df-mat-radio", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className() || \"\"", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
704
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
705
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MatRadioFieldComponent, isStandalone: true, selector: "df-mat-radio", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className() || \"\"", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
852
706
  @let f = field();
853
707
  @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
854
708
  @let ariaDescribedBy = this.ariaDescribedBy();
@@ -858,7 +712,7 @@ class MatRadioFieldComponent {
858
712
  }
859
713
 
860
714
  <mat-radio-group
861
- [field]="f"
715
+ [formField]="f"
862
716
  [attr.aria-invalid]="ariaInvalid"
863
717
  [attr.aria-required]="ariaRequired"
864
718
  [attr.aria-describedby]="ariaDescribedBy"
@@ -881,11 +735,11 @@ class MatRadioFieldComponent {
881
735
  @for (error of errorsToDisplay(); track error.kind; let i = $index) {
882
736
  <mat-error [id]="errorId() + '-' + i">{{ error.message }}</mat-error>
883
737
  }
884
- `, isInline: true, styles: [":host{display:block}:host([hidden]){display:none!important}\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: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
738
+ `, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n"], dependencies: [{ kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
885
739
  }
886
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatRadioFieldComponent, decorators: [{
740
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatRadioFieldComponent, decorators: [{
887
741
  type: Component,
888
- args: [{ selector: 'df-mat-radio', imports: [MatRadioGroup, MatRadioButton, Field, MatError, DynamicTextPipe, AsyncPipe], template: `
742
+ args: [{ selector: 'df-mat-radio', imports: [MatRadioGroup, MatRadioButton, FormField, MatError, DynamicTextPipe, AsyncPipe], template: `
889
743
  @let f = field();
890
744
  @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
891
745
  @let ariaDescribedBy = this.ariaDescribedBy();
@@ -895,7 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
895
749
  }
896
750
 
897
751
  <mat-radio-group
898
- [field]="f"
752
+ [formField]="f"
899
753
  [attr.aria-invalid]="ariaInvalid"
900
754
  [attr.aria-required]="ariaRequired"
901
755
  [attr.aria-describedby]="ariaDescribedBy"
@@ -923,8 +777,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
923
777
  '[id]': '`${key()}`',
924
778
  '[attr.data-testid]': 'key()',
925
779
  '[attr.hidden]': 'field()().hidden() || null',
926
- }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}:host([hidden]){display:none!important}\n"] }]
927
- }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
780
+ }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n"] }]
781
+ }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
928
782
 
929
783
  var matRadio_component = /*#__PURE__*/Object.freeze({
930
784
  __proto__: null,
@@ -933,6 +787,7 @@ var matRadio_component = /*#__PURE__*/Object.freeze({
933
787
 
934
788
  class MatSelectFieldComponent {
935
789
  materialConfig = inject(MATERIAL_CONFIG, { optional: true });
790
+ elementRef = inject((ElementRef));
936
791
  field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
937
792
  key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
938
793
  label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
@@ -941,6 +796,7 @@ class MatSelectFieldComponent {
941
796
  tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
942
797
  options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
943
798
  props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
799
+ meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
944
800
  validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
945
801
  defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
946
802
  effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
@@ -949,6 +805,12 @@ class MatSelectFieldComponent {
949
805
  showErrors = shouldShowErrors(this.field);
950
806
  errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
951
807
  defaultCompare = Object.is;
808
+ constructor() {
809
+ // mat-select has no native input - apply meta to mat-select element
810
+ setupMetaTracking(this.elementRef, this.meta, {
811
+ selector: 'mat-select',
812
+ });
813
+ }
952
814
  // ─────────────────────────────────────────────────────────────────────────────
953
815
  // Accessibility
954
816
  // ─────────────────────────────────────────────────────────────────────────────
@@ -977,8 +839,8 @@ class MatSelectFieldComponent {
977
839
  });
978
840
  return ids.length > 0 ? ids.join(' ') : null;
979
841
  }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
980
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
981
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatSelectFieldComponent, isStandalone: true, selector: "df-mat-select", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
842
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
843
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MatSelectFieldComponent, isStandalone: true, selector: "df-mat-select", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
982
844
  @let f = field();
983
845
  @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
984
846
  @let ariaDescribedBy = this.ariaDescribedBy();
@@ -989,7 +851,7 @@ class MatSelectFieldComponent {
989
851
  }
990
852
 
991
853
  <mat-select
992
- [field]="f"
854
+ [formField]="f"
993
855
  [placeholder]="(placeholder() | dynamicText | async) ?? ''"
994
856
  [multiple]="props()?.multiple || false"
995
857
  [compareWith]="props()?.compareWith || defaultCompare"
@@ -1011,11 +873,11 @@ class MatSelectFieldComponent {
1011
873
  <mat-error [id]="errorId() + '-' + i">{{ error.message }}</mat-error>
1012
874
  }
1013
875
  </mat-form-field>
1014
- `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}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: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
876
+ `, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1015
877
  }
1016
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatSelectFieldComponent, decorators: [{
878
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatSelectFieldComponent, decorators: [{
1017
879
  type: Component,
1018
- args: [{ selector: 'df-mat-select', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, Field, MatError$1, DynamicTextPipe, AsyncPipe], template: `
880
+ args: [{ selector: 'df-mat-select', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, FormField, MatError$1, DynamicTextPipe, AsyncPipe], template: `
1019
881
  @let f = field();
1020
882
  @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
1021
883
  @let ariaDescribedBy = this.ariaDescribedBy();
@@ -1026,7 +888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
1026
888
  }
1027
889
 
1028
890
  <mat-select
1029
- [field]="f"
891
+ [formField]="f"
1030
892
  [placeholder]="(placeholder() | dynamicText | async) ?? ''"
1031
893
  [multiple]="props()?.multiple || false"
1032
894
  [compareWith]="props()?.compareWith || defaultCompare"
@@ -1053,8 +915,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
1053
915
  '[attr.data-testid]': 'key()',
1054
916
  '[class]': 'className()',
1055
917
  '[attr.hidden]': 'field()().hidden() || null',
1056
- }, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}mat-form-field{width:100%}\n"] }]
1057
- }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
918
+ }, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "mat-form-field{width:100%}\n"] }]
919
+ }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
1058
920
 
1059
921
  var matSelect_component = /*#__PURE__*/Object.freeze({
1060
922
  __proto__: null,
@@ -1062,13 +924,18 @@ var matSelect_component = /*#__PURE__*/Object.freeze({
1062
924
  });
1063
925
 
1064
926
  class MatSliderFieldComponent {
927
+ elementRef = inject((ElementRef));
1065
928
  field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
1066
929
  key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
930
+ constructor() {
931
+ setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
932
+ }
1067
933
  label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
1068
934
  placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
1069
935
  className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
1070
936
  tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
1071
937
  props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
938
+ meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
1072
939
  validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
1073
940
  defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
1074
941
  resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
@@ -1098,8 +965,8 @@ class MatSliderFieldComponent {
1098
965
  });
1099
966
  return ids.length > 0 ? ids.join(' ') : null;
1100
967
  }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
1101
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1102
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatSliderFieldComponent, isStandalone: true, selector: "df-mat-slider", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
968
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
969
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MatSliderFieldComponent, isStandalone: true, selector: "df-mat-slider", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
1103
970
  @let f = field();
1104
971
  @let ariaInvalid = this.ariaInvalid();
1105
972
  @let ariaDescribedBy = this.ariaDescribedBy();
@@ -1119,7 +986,7 @@ class MatSliderFieldComponent {
1119
986
  >
1120
987
  <input
1121
988
  matSliderThumb
1122
- [field]="f"
989
+ [formField]="f"
1123
990
  [attr.tabindex]="tabIndex()"
1124
991
  [attr.aria-invalid]="ariaInvalid"
1125
992
  [attr.aria-describedby]="ariaDescribedBy"
@@ -1132,11 +999,11 @@ class MatSliderFieldComponent {
1132
999
  @for (error of errorsToDisplay(); track error.kind; let i = $index) {
1133
1000
  <mat-error [id]="errorId() + '-' + i">{{ error.message }}</mat-error>
1134
1001
  }
1135
- `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.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: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1002
+ `, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", ".slider-container{width:100%}\n"], dependencies: [{ kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1136
1003
  }
1137
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatSliderFieldComponent, decorators: [{
1004
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatSliderFieldComponent, decorators: [{
1138
1005
  type: Component,
1139
- args: [{ selector: 'df-mat-slider', imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, Field], template: `
1006
+ args: [{ selector: 'df-mat-slider', imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, FormField], template: `
1140
1007
  @let f = field();
1141
1008
  @let ariaInvalid = this.ariaInvalid();
1142
1009
  @let ariaDescribedBy = this.ariaDescribedBy();
@@ -1156,7 +1023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
1156
1023
  >
1157
1024
  <input
1158
1025
  matSliderThumb
1159
- [field]="f"
1026
+ [formField]="f"
1160
1027
  [attr.tabindex]="tabIndex()"
1161
1028
  [attr.aria-invalid]="ariaInvalid"
1162
1029
  [attr.aria-describedby]="ariaDescribedBy"
@@ -1174,8 +1041,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
1174
1041
  '[id]': '`${key()}`',
1175
1042
  '[attr.data-testid]': 'key()',
1176
1043
  '[attr.hidden]': 'field()().hidden() || null',
1177
- }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.slider-container{width:100%}\n"] }]
1178
- }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
1044
+ }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", ".slider-container{width:100%}\n"] }]
1045
+ }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
1179
1046
 
1180
1047
  var matSlider_component = /*#__PURE__*/Object.freeze({
1181
1048
  __proto__: null,
@@ -1238,8 +1105,8 @@ class MatButtonFieldComponent {
1238
1105
  this.eventBus.dispatch(event);
1239
1106
  }
1240
1107
  }
1241
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1242
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.5", type: MatButtonFieldComponent, isStandalone: true, selector: "df-mat-button", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: false, transformFunction: null }, eventArgs: { classPropertyName: "eventArgs", publicName: "eventArgs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, eventContext: { classPropertyName: "eventContext", publicName: "eventContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()" } }, ngImport: i0, template: `
1108
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1109
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: MatButtonFieldComponent, isStandalone: true, selector: "df-mat-button", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: false, transformFunction: null }, eventArgs: { classPropertyName: "eventArgs", publicName: "eventArgs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, eventContext: { classPropertyName: "eventContext", publicName: "eventContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()" } }, ngImport: i0, template: `
1243
1110
  <button
1244
1111
  mat-raised-button
1245
1112
  [type]="buttonType()"
@@ -1250,9 +1117,9 @@ class MatButtonFieldComponent {
1250
1117
  >
1251
1118
  {{ label() | dynamicText | async }}
1252
1119
  </button>
1253
- `, isInline: true, styles: [":host{display:block}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 });
1120
+ `, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "button{min-width:fit-content}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1254
1121
  }
1255
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatButtonFieldComponent, decorators: [{
1122
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatButtonFieldComponent, decorators: [{
1256
1123
  type: Component,
1257
1124
  args: [{ selector: 'df-mat-button', imports: [MatButton, DynamicTextPipe, AsyncPipe], host: {
1258
1125
  '[id]': '`${key()}`',
@@ -1269,7 +1136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
1269
1136
  >
1270
1137
  {{ label() | dynamicText | async }}
1271
1138
  </button>
1272
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}button{min-width:fit-content}\n"] }]
1139
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "button{min-width:fit-content}\n"] }]
1273
1140
  }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], event: [{ type: i0.Input, args: [{ isSignal: true, alias: "event", required: false }] }], eventArgs: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventArgs", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], eventContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventContext", required: false }] }] } });
1274
1141
 
1275
1142
  var matButton_component = /*#__PURE__*/Object.freeze({
@@ -1281,8 +1148,20 @@ var matButton_component = /*#__PURE__*/Object.freeze({
1281
1148
 
1282
1149
  class MatTextareaFieldComponent {
1283
1150
  materialConfig = inject(MATERIAL_CONFIG, { optional: true });
1151
+ elementRef = inject((ElementRef));
1284
1152
  field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
1285
1153
  key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
1154
+ label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
1155
+ placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
1156
+ className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
1157
+ tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
1158
+ props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
1159
+ meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
1160
+ validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
1161
+ defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
1162
+ constructor() {
1163
+ setupMetaTracking(this.elementRef, this.meta, { selector: 'textarea' });
1164
+ }
1286
1165
  /**
1287
1166
  * Reference to the native textarea element.
1288
1167
  * Used to imperatively sync the readonly attribute since Angular Signal Forms'
@@ -1315,13 +1194,6 @@ class MatTextareaFieldComponent {
1315
1194
  }
1316
1195
  }
1317
1196
  });
1318
- label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
1319
- placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
1320
- className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
1321
- tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
1322
- props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
1323
- validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
1324
- defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
1325
1197
  effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
1326
1198
  effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : []));
1327
1199
  resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
@@ -1355,8 +1227,8 @@ class MatTextareaFieldComponent {
1355
1227
  });
1356
1228
  return ids.length > 0 ? ids.join(' ') : null;
1357
1229
  }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
1358
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1359
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatTextareaFieldComponent, isStandalone: true, selector: "df-mat-textarea", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
1230
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1231
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MatTextareaFieldComponent, isStandalone: true, selector: "df-mat-textarea", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
1360
1232
  @let f = field();
1361
1233
  @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
1362
1234
  @let ariaDescribedBy = this.ariaDescribedBy();
@@ -1369,10 +1241,8 @@ class MatTextareaFieldComponent {
1369
1241
  <textarea
1370
1242
  #textareaRef
1371
1243
  matInput
1372
- [field]="f"
1244
+ [formField]="f"
1373
1245
  [placeholder]="(placeholder() | dynamicText | async) ?? ''"
1374
- [rows]="props()?.rows || 4"
1375
- [cols]="props()?.cols"
1376
1246
  [attr.tabindex]="tabIndex()"
1377
1247
  [attr.aria-invalid]="ariaInvalid"
1378
1248
  [attr.aria-required]="ariaRequired"
@@ -1387,11 +1257,11 @@ class MatTextareaFieldComponent {
1387
1257
  <mat-error [id]="errorId() + '-' + i">{{ error.message }}</mat-error>
1388
1258
  }
1389
1259
  </mat-form-field>
1390
- `, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}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: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1260
+ `, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1391
1261
  }
1392
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatTextareaFieldComponent, decorators: [{
1262
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatTextareaFieldComponent, decorators: [{
1393
1263
  type: Component,
1394
- args: [{ selector: 'df-mat-textarea', imports: [MatFormField, MatLabel, MatInput, MatHint, Field, MatError$1, DynamicTextPipe, AsyncPipe], template: `
1264
+ args: [{ selector: 'df-mat-textarea', imports: [MatFormField, MatLabel, MatInput, MatHint, FormField, MatError$1, DynamicTextPipe, AsyncPipe], template: `
1395
1265
  @let f = field();
1396
1266
  @let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
1397
1267
  @let ariaDescribedBy = this.ariaDescribedBy();
@@ -1404,10 +1274,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
1404
1274
  <textarea
1405
1275
  #textareaRef
1406
1276
  matInput
1407
- [field]="f"
1277
+ [formField]="f"
1408
1278
  [placeholder]="(placeholder() | dynamicText | async) ?? ''"
1409
- [rows]="props()?.rows || 4"
1410
- [cols]="props()?.cols"
1411
1279
  [attr.tabindex]="tabIndex()"
1412
1280
  [attr.aria-invalid]="ariaInvalid"
1413
1281
  [attr.aria-required]="ariaRequired"
@@ -1427,8 +1295,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
1427
1295
  '[attr.data-testid]': 'key()',
1428
1296
  '[class]': 'className()',
1429
1297
  '[attr.hidden]': 'field()().hidden() || null',
1430
- }, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}mat-form-field{width:100%}\n"] }]
1431
- }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], textareaRef: [{ type: i0.ViewChild, args: ['textareaRef', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
1298
+ }, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "mat-form-field{width:100%}\n"] }]
1299
+ }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }], textareaRef: [{ type: i0.ViewChild, args: ['textareaRef', { isSignal: true }] }] } });
1432
1300
 
1433
1301
  var matTextarea_component = /*#__PURE__*/Object.freeze({
1434
1302
  __proto__: null,
@@ -1437,6 +1305,7 @@ var matTextarea_component = /*#__PURE__*/Object.freeze({
1437
1305
 
1438
1306
  class MatToggleFieldComponent {
1439
1307
  materialConfig = inject(MATERIAL_CONFIG, { optional: true });
1308
+ elementRef = inject((ElementRef));
1440
1309
  field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
1441
1310
  key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
1442
1311
  label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
@@ -1444,12 +1313,20 @@ class MatToggleFieldComponent {
1444
1313
  className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
1445
1314
  tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
1446
1315
  props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
1316
+ meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
1447
1317
  validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
1448
1318
  defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
1449
1319
  effectiveDisableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, ...(ngDevMode ? [{ debugName: "effectiveDisableRipple" }] : []));
1450
1320
  resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
1451
1321
  showErrors = shouldShowErrors(this.field);
1452
1322
  errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
1323
+ constructor() {
1324
+ // Apply meta attributes to the internal toggle button
1325
+ // Note: mat-slide-toggle uses <button role="switch"> instead of <input type="checkbox">
1326
+ setupMetaTracking(this.elementRef, this.meta, {
1327
+ selector: 'button[role="switch"]',
1328
+ });
1329
+ }
1453
1330
  // ─────────────────────────────────────────────────────────────────────────────
1454
1331
  // Accessibility
1455
1332
  // ─────────────────────────────────────────────────────────────────────────────
@@ -1478,13 +1355,13 @@ class MatToggleFieldComponent {
1478
1355
  });
1479
1356
  return ids.join(' ');
1480
1357
  }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
1481
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1482
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatToggleFieldComponent, isStandalone: true, selector: "df-mat-toggle", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
1358
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1359
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MatToggleFieldComponent, isStandalone: true, selector: "df-mat-toggle", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
1483
1360
  @let f = field();
1484
1361
  @let ariaDescribedBy = this.ariaDescribedBy();
1485
1362
 
1486
1363
  <mat-slide-toggle
1487
- [field]="f"
1364
+ [formField]="f"
1488
1365
  [color]="props()?.color || 'primary'"
1489
1366
  [labelPosition]="props()?.labelPosition || 'after'"
1490
1367
  [hideIcon]="props()?.hideIcon || false"
@@ -1503,16 +1380,16 @@ class MatToggleFieldComponent {
1503
1380
  @for (error of errorsToDisplay(); track error.kind; let i = $index) {
1504
1381
  <mat-error [id]="errorId() + '-' + i">{{ error.message }}</mat-error>
1505
1382
  }
1506
- `, isInline: true, styles: [":host{display:block}:host([hidden]){display:none!important}\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: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1383
+ `, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n"], dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1507
1384
  }
1508
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatToggleFieldComponent, decorators: [{
1385
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MatToggleFieldComponent, decorators: [{
1509
1386
  type: Component,
1510
- args: [{ selector: 'df-mat-toggle', imports: [MatSlideToggle, Field, MatError, DynamicTextPipe, AsyncPipe], template: `
1387
+ args: [{ selector: 'df-mat-toggle', imports: [MatSlideToggle, FormField, MatError, DynamicTextPipe, AsyncPipe], template: `
1511
1388
  @let f = field();
1512
1389
  @let ariaDescribedBy = this.ariaDescribedBy();
1513
1390
 
1514
1391
  <mat-slide-toggle
1515
- [field]="f"
1392
+ [formField]="f"
1516
1393
  [color]="props()?.color || 'primary'"
1517
1394
  [labelPosition]="props()?.labelPosition || 'after'"
1518
1395
  [hideIcon]="props()?.hideIcon || false"
@@ -1536,8 +1413,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
1536
1413
  '[id]': '`${key()}`',
1537
1414
  '[attr.data-testid]': 'key()',
1538
1415
  '[attr.hidden]': 'field()().hidden() || null',
1539
- }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}:host([hidden]){display:none!important}\n"] }]
1540
- }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
1416
+ }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n"] }]
1417
+ }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
1541
1418
 
1542
1419
  var matToggle_component = /*#__PURE__*/Object.freeze({
1543
1420
  __proto__: null,
@@ -1723,7 +1600,7 @@ function addArrayItemButtonFieldMapper(fieldDef) {
1723
1600
  // Try to get array context (available when inside an array)
1724
1601
  // Use optional injection so it doesn't fail when outside an array
1725
1602
  const arrayContext = inject(ARRAY_CONTEXT, { optional: true });
1726
- const logger = inject(DYNAMIC_FORM_LOGGER);
1603
+ const logger = inject(DynamicFormLogger);
1727
1604
  // Determine the target array key
1728
1605
  // Priority: explicit arrayKey from fieldDef > arrayKey from context
1729
1606
  const targetArrayKey = fieldDef.arrayKey ?? arrayContext?.arrayKey;
@@ -1779,7 +1656,7 @@ function removeArrayItemButtonFieldMapper(fieldDef) {
1779
1656
  // Try to get array context (available when inside an array)
1780
1657
  // Use optional injection so it doesn't fail when outside an array
1781
1658
  const arrayContext = inject(ARRAY_CONTEXT, { optional: true });
1782
- const logger = inject(DYNAMIC_FORM_LOGGER);
1659
+ const logger = inject(DynamicFormLogger);
1783
1660
  // Determine the target array key
1784
1661
  // Priority: explicit arrayKey from fieldDef > arrayKey from context
1785
1662
  const targetArrayKey = fieldDef.arrayKey ?? arrayContext?.arrayKey;
@@ -1832,6 +1709,7 @@ const MATERIAL_FIELD_TYPES = [
1832
1709
  name: MatField.Input,
1833
1710
  loadComponent: () => Promise.resolve().then(function () { return matInput_component; }),
1834
1711
  mapper: valueFieldMapper,
1712
+ propsToMeta: ['type'],
1835
1713
  },
1836
1714
  {
1837
1715
  name: MatField.Select,
@@ -1883,6 +1761,7 @@ const MATERIAL_FIELD_TYPES = [
1883
1761
  name: MatField.Textarea,
1884
1762
  loadComponent: () => Promise.resolve().then(function () { return matTextarea_component; }),
1885
1763
  mapper: valueFieldMapper,
1764
+ propsToMeta: ['rows', 'cols'],
1886
1765
  },
1887
1766
  {
1888
1767
  name: MatField.Radio,