@ng-modular-forms/material 0.9.0 → 0.9.2

package/fesm2022/ng-modular-forms-material.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, Directive, ChangeDetectionStrategy, Component, computed, effect } from '@angular/core';
+import { InjectionToken, inject, input, computed, Directive, ChangeDetectionStrategy, Component, effect } from '@angular/core';
 import * as i3 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { FormControlBase, NumberBehavior, parseNumber, formatNumber, LookupBehavior, PasswordBehavior } from '@ng-modular-forms/core';
@@ -26,12 +26,48 @@ import { MatSelectModule } from '@angular/material/select';
 import * as i4$2 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
 
+// @ng-modular-forms/material
+const MATERIAL_DEFAULTS = {
+    appearance: 'outline',
+    floatLabel: 'auto',
+    detatchLabels: false,
+    hideRequiredMarker: false,
+};
+const NMF_MATERIAL_CONFIG = new InjectionToken('NMF_MATERIAL_CONFIG', {
+    factory: () => {
+        return {
+            ...MATERIAL_DEFAULTS,
+        };
+    },
+});
+function provideNmfMaterialConfig(config) {
+    return [
+        {
+            provide: NMF_MATERIAL_CONFIG,
+            useFactory: () => {
+                return {
+                    ...MATERIAL_DEFAULTS,
+                    ...config,
+                };
+            },
+        },
+    ];
+}
+
 class MatFormControlBase extends FormControlBase {
-    detachLabel = input(false);
-    appearance = input('outline');
-    shouldLabelFloat = input('auto');
-    hint = input();
-    hintClassList = input('');
+    materialConfig = inject(NMF_MATERIAL_CONFIG);
+    _detachLabel = input(this.materialConfig.detatchLabels ?? false, {
+        alias: 'detatchLabel',
+    });
+    _appearance = input(this.materialConfig.appearance ?? 'outline', {
+        alias: 'appearance',
+    });
+    _shouldLabelFloat = input(this.materialConfig.floatLabel ?? 'auto', {
+        alias: 'shouldLabelFloat',
+    });
+    detachLabel = computed(() => this.materialConfig.detatchLabels ?? this._detachLabel());
+    appearance = computed(() => this.materialConfig.appearance ?? this._appearance());
+    shouldLabelFloat = computed(() => this.materialConfig.floatLabel ?? this._shouldLabelFloat());
     // Purely a state carrier for mat-form-field, never drives value or internal state
     displayControl = new FormControl({
         value: null,
@@ -67,7 +103,7 @@ class MatFormControlBase extends FormControlBase {
         this.displayControl.setErrors(control.errors);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatFormControlBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: MatFormControlBase, isStandalone: true, inputs: { detachLabel: { classPropertyName: "detachLabel", publicName: "detachLabel", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, shouldLabelFloat: { classPropertyName: "shouldLabelFloat", publicName: "shouldLabelFloat", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintClassList: { classPropertyName: "hintClassList", publicName: "hintClassList", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: MatFormControlBase, isStandalone: true, inputs: { _detachLabel: { classPropertyName: "_detachLabel", publicName: "detatchLabel", isSignal: true, isRequired: false, transformFunction: null }, _appearance: { classPropertyName: "_appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, _shouldLabelFloat: { classPropertyName: "_shouldLabelFloat", publicName: "shouldLabelFloat", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatFormControlBase, decorators: [{
             type: Directive
@@ -90,8 +126,8 @@ class MatInputDatepickerComponent extends MatFormControlBase {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MatInputDatepickerComponent, isStandalone: true, selector: "nmf-mat-datepicker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, touchUi: { classPropertyName: "touchUi", publicName: "touchUi", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
+    @if (translatedLabel() && detachLabel()) {
+      <label class="font-medium text-base">{{ translatedLabel() }}</label>
     }
 
     <mat-form-field
@@ -99,8 +135,8 @@ class MatInputDatepickerComponent extends MatFormControlBase {
       [appearance]="appearance()"
       [floatLabel]="shouldLabelFloat()"
     >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
+      @if (translatedLabel() && !detachLabel()) {
+        <mat-label>{{ translatedLabel() }}</mat-label>
       }
 
       <input
@@ -147,11 +183,11 @@ class MatInputDatepickerComponent extends MatFormControlBase {
         ></mat-spinner>
       }
 
-      @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+      @if (translatedHint()) {
+        <mat-hint [ngClass]="hintClassList()">{{ translatedHint() }}</mat-hint>
       }
 
-      <mat-error>{{ errorMessage() }}</mat-error>
+      <mat-error>{{ translatedErrorMessage() }}</mat-error>
     </mat-form-field>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -170,8 +206,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
+    @if (translatedLabel() && detachLabel()) {
+      <label class="font-medium text-base">{{ translatedLabel() }}</label>
     }
 
     <mat-form-field
@@ -179,8 +215,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       [appearance]="appearance()"
       [floatLabel]="shouldLabelFloat()"
     >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
+      @if (translatedLabel() && !detachLabel()) {
+        <mat-label>{{ translatedLabel() }}</mat-label>
       }
 
       <input
@@ -227,11 +263,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         ></mat-spinner>
       }
 
-      @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+      @if (translatedHint()) {
+        <mat-hint [ngClass]="hintClassList()">{{ translatedHint() }}</mat-hint>
       }
 
-      <mat-error>{{ errorMessage() }}</mat-error>
+      <mat-error>{{ translatedErrorMessage() }}</mat-error>
     </mat-form-field>
   `,
                 }]
@@ -283,8 +319,8 @@ class MatInputNumberComponent extends MatFormControlBase {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MatInputNumberComponent, isStandalone: true, selector: "nmf-mat-number", inputs: { formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, allowNegative: { classPropertyName: "allowNegative", publicName: "allowNegative", isSignal: true, isRequired: false, transformFunction: null }, negativeColor: { classPropertyName: "negativeColor", publicName: "negativeColor", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
+    @if (translatedLabel() && detachLabel()) {
+      <label class="font-medium text-base">{{ translatedLabel() }}</label>
     }
 
     <mat-form-field
@@ -292,8 +328,8 @@ class MatInputNumberComponent extends MatFormControlBase {
       [appearance]="appearance()"
       [floatLabel]="shouldLabelFloat()"
     >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
+      @if (translatedLabel() && !detachLabel()) {
+        <mat-label>{{ translatedLabel() }}</mat-label>
       }
 
       <div class="nmf-mat-prefix-slot">
@@ -313,7 +349,7 @@ class MatInputNumberComponent extends MatFormControlBase {
         [id]="id()"
         [name]="name()"
         [required]="isRequired()"
-        [placeholder]="placeholder()"
+        [placeholder]="translatedPlaceholder()"
         [autocomplete]="autocompleteAttr()"
         [formControl]="displayControl"
         (blur)="onTouched()"
@@ -337,10 +373,10 @@ class MatInputNumberComponent extends MatFormControlBase {
       }
 
       @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+        <mat-hint [ngClass]="hintClassList()">{{ translatedHint() }}</mat-hint>
       }
 
-      <mat-error>{{ errorMessage() }}</mat-error>
+      <mat-error>{{ translatedErrorMessage() }}</mat-error>
     </mat-form-field>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -359,8 +395,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
+    @if (translatedLabel() && detachLabel()) {
+      <label class="font-medium text-base">{{ translatedLabel() }}</label>
     }
 
     <mat-form-field
@@ -368,8 +404,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       [appearance]="appearance()"
       [floatLabel]="shouldLabelFloat()"
     >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
+      @if (translatedLabel() && !detachLabel()) {
+        <mat-label>{{ translatedLabel() }}</mat-label>
       }
 
       <div class="nmf-mat-prefix-slot">
@@ -389,7 +425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         [id]="id()"
         [name]="name()"
         [required]="isRequired()"
-        [placeholder]="placeholder()"
+        [placeholder]="translatedPlaceholder()"
         [autocomplete]="autocompleteAttr()"
         [formControl]="displayControl"
         (blur)="onTouched()"
@@ -413,10 +449,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       }
 
       @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+        <mat-hint [ngClass]="hintClassList()">{{ translatedHint() }}</mat-hint>
       }
 
-      <mat-error>{{ errorMessage() }}</mat-error>
+      <mat-error>{{ translatedErrorMessage() }}</mat-error>
     </mat-form-field>
   `,
                 }]
@@ -458,6 +494,7 @@ class MatInputLookupComponent extends MatFormControlBase {
      */
     searchThreshold = input(2);
     searchQuery = toSignal(this.displayControl.valueChanges.pipe(startWith(this.displayControl.value)));
+    translatedEmptyOptionsLabel = computed(() => this.translate(this.emptyOptionsLabel()));
     behavior;
     constructor() {
         super();
@@ -504,8 +541,8 @@ class MatInputLookupComponent extends MatFormControlBase {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputLookupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MatInputLookupComponent, isStandalone: true, selector: "nmf-mat-lookup", inputs: { autocompleteAttr: { classPropertyName: "autocompleteAttr", publicName: "autocompleteAttr", isSignal: true, isRequired: false, transformFunction: null }, optionsSource: { classPropertyName: "optionsSource", publicName: "optionsSource", isSignal: true, isRequired: false, transformFunction: null }, optionsProvider: { classPropertyName: "optionsProvider", publicName: "optionsProvider", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, displayProvider: { classPropertyName: "displayProvider", publicName: "displayProvider", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, emptyOptionsLabel: { classPropertyName: "emptyOptionsLabel", publicName: "emptyOptionsLabel", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, searchThreshold: { classPropertyName: "searchThreshold", publicName: "searchThreshold", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["nmfMatLookup"], usesInheritance: true, ngImport: i0, template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
+    @if (translatedLabel() && detachLabel()) {
+      <label class="font-medium text-base">{{ translatedLabel() }}</label>
     }
 
     <div class="relative">
@@ -514,8 +551,8 @@ class MatInputLookupComponent extends MatFormControlBase {
         [appearance]="appearance()"
         [floatLabel]="shouldLabelFloat()"
       >
-        @if (label() && !detachLabel()) {
-          <mat-label>{{ label() }}</mat-label>
+        @if (translatedLabel() && !detachLabel()) {
+          <mat-label>{{ translatedLabel() }}</mat-label>
         }
 
         <input
@@ -523,13 +560,13 @@ class MatInputLookupComponent extends MatFormControlBase {
           matInput
           type="text"
           [class.cursor-not-allowed]="behavior.selectedOption() != null"
-          [attr.aria-label]="detachLabel() ? label() : null"
+          [attr.aria-label]="detachLabel() ? translatedLabel() : null"
           [ngClass]="classList"
           [id]="id()"
           [name]="name()"
           [required]="isRequired()"
           [readonly]="behavior.selectedOption() != null"
-          [placeholder]="placeholder()"
+          [placeholder]="translatedPlaceholder()"
           [formControl]="displayControl"
           [matAutocomplete]="auto"
           (blur)="onTouched()"
@@ -546,12 +583,14 @@ class MatInputLookupComponent extends MatFormControlBase {
         </mat-autocomplete>
 
         @if (behavior.status() === 'empty') {
-          <mat-hint>{{ emptyOptionsLabel() }}</mat-hint>
+          <mat-hint>{{ translatedEmptyOptionsLabel() }}</mat-hint>
         } @else if (hint()) {
-          <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+          <mat-hint [ngClass]="hintClassList()">{{
+            translatedHint()
+          }}</mat-hint>
         }
 
-        <mat-error>{{ errorMessage() }}</mat-error>
+        <mat-error>{{ translatedErrorMessage() }}</mat-error>
 
         <!-- Loading status is for lookups and async options, and loading() is for the form control itself -->
         @if (behavior.status() === 'loading' || loading()) {
@@ -595,8 +634,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
+    @if (translatedLabel() && detachLabel()) {
+      <label class="font-medium text-base">{{ translatedLabel() }}</label>
     }
 
     <div class="relative">
@@ -605,8 +644,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         [appearance]="appearance()"
         [floatLabel]="shouldLabelFloat()"
       >
-        @if (label() && !detachLabel()) {
-          <mat-label>{{ label() }}</mat-label>
+        @if (translatedLabel() && !detachLabel()) {
+          <mat-label>{{ translatedLabel() }}</mat-label>
         }
 
         <input
@@ -614,13 +653,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
           matInput
           type="text"
           [class.cursor-not-allowed]="behavior.selectedOption() != null"
-          [attr.aria-label]="detachLabel() ? label() : null"
+          [attr.aria-label]="detachLabel() ? translatedLabel() : null"
           [ngClass]="classList"
           [id]="id()"
           [name]="name()"
           [required]="isRequired()"
           [readonly]="behavior.selectedOption() != null"
-          [placeholder]="placeholder()"
+          [placeholder]="translatedPlaceholder()"
           [formControl]="displayControl"
           [matAutocomplete]="auto"
           (blur)="onTouched()"
@@ -637,12 +676,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         </mat-autocomplete>
 
         @if (behavior.status() === 'empty') {
-          <mat-hint>{{ emptyOptionsLabel() }}</mat-hint>
+          <mat-hint>{{ translatedEmptyOptionsLabel() }}</mat-hint>
         } @else if (hint()) {
-          <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+          <mat-hint [ngClass]="hintClassList()">{{
+            translatedHint()
+          }}</mat-hint>
         }
 
-        <mat-error>{{ errorMessage() }}</mat-error>
+        <mat-error>{{ translatedErrorMessage() }}</mat-error>
 
         <!-- Loading status is for lookups and async options, and loading() is for the form control itself -->
         @if (behavior.status() === 'loading' || loading()) {
@@ -675,6 +716,7 @@ class MatInputSelectComponent extends MatFormControlBase {
     emptyOptionLabel = input('Select an option');
     allowEmptyOptionSelection = input(false);
     panelWidth = input('auto');
+    translatedEmptyOptionLabel = computed(() => this.translate(this.emptyOptionLabel()));
     onSelectionChange(event) {
         if (this.disabled()) {
             return;
@@ -684,8 +726,8 @@ class MatInputSelectComponent extends MatFormControlBase {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MatInputSelectComponent, isStandalone: true, selector: "nmf-mat-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, emptyOptionLabel: { classPropertyName: "emptyOptionLabel", publicName: "emptyOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, allowEmptyOptionSelection: { classPropertyName: "allowEmptyOptionSelection", publicName: "allowEmptyOptionSelection", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
+    @if (translatedLabel() && detachLabel()) {
+      <label class="font-medium text-base">{{ translatedLabel() }}</label>
     }
 
     <mat-form-field
@@ -693,8 +735,8 @@ class MatInputSelectComponent extends MatFormControlBase {
       [appearance]="appearance()"
       [floatLabel]="shouldLabelFloat()"
     >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
+      @if (translatedLabel() && !detachLabel()) {
+        <mat-label>{{ translatedLabel() }}</mat-label>
       }
 
       <mat-select
@@ -703,13 +745,13 @@ class MatInputSelectComponent extends MatFormControlBase {
         [id]="id()"
         [panelWidth]="panelWidth()"
         [required]="isRequired()"
-        [placeholder]="emptyOptionLabel()"
+        [placeholder]="translatedEmptyOptionLabel()"
         [formControl]="displayControl"
         (blur)="onTouched()"
         (selectionChange)="onSelectionChange($event)"
       >
         <mat-option [value]="''" [disabled]="!allowEmptyOptionSelection()">
-          {{ emptyOptionLabel() }}
+          {{ translatedEmptyOptionLabel() }}
         </mat-option>
 
         <!-- All Options -->
@@ -730,10 +772,10 @@ class MatInputSelectComponent extends MatFormControlBase {
       }
 
       @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+        <mat-hint [ngClass]="hintClassList()">{{ translatedHint() }}</mat-hint>
       }
 
-      <mat-error>{{ errorMessage() }}</mat-error>
+      <mat-error>{{ translatedErrorMessage() }}</mat-error>
     </mat-form-field>
   `, isInline: true, styles: [".nmf-mat-field{position:relative;width:100%}.mat-mdc-select-placeholder{transition:none!important}.mat-mdc-form-field-infix{display:flex;align-items:center;gap:.5rem}.nmf-mat-prefix-slot,.nmf-mat-suffix-slot{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap;white-space:nowrap;background:transparent}.nmf-mat-prefix-slot{order:-1}.nmf-mat-suffix-slot{order:2}.nmf-mat-field:has(.nmf-mat-prefix-slot>:not(:empty)) .mdc-floating-label:not(.mdc-floating-label--float-above){padding-left:1rem;transform:translateY(-.65rem)}.hide-select-arrow .mat-mdc-select-arrow-wrapper{display:none!important}.nmf-mat-loader{margin-right:.5rem!important}.nmf-disabled{color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent)}.nmf-password-toggle{color:var(--mat-sys-on-surface-variant);padding-right:.5rem;background-color:transparent;border:none;white-space:nowrap;&:disabled{color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent);cursor:default}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$2.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: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -746,8 +788,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         ReactiveFormsModule,
                         MatSelectModule,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
+    @if (translatedLabel() && detachLabel()) {
+      <label class="font-medium text-base">{{ translatedLabel() }}</label>
     }
 
     <mat-form-field
@@ -755,8 +797,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       [appearance]="appearance()"
       [floatLabel]="shouldLabelFloat()"
     >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
+      @if (translatedLabel() && !detachLabel()) {
+        <mat-label>{{ translatedLabel() }}</mat-label>
       }
 
       <mat-select
@@ -765,13 +807,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         [id]="id()"
         [panelWidth]="panelWidth()"
         [required]="isRequired()"
-        [placeholder]="emptyOptionLabel()"
+        [placeholder]="translatedEmptyOptionLabel()"
         [formControl]="displayControl"
         (blur)="onTouched()"
         (selectionChange)="onSelectionChange($event)"
       >
         <mat-option [value]="''" [disabled]="!allowEmptyOptionSelection()">
-          {{ emptyOptionLabel() }}
+          {{ translatedEmptyOptionLabel() }}
         </mat-option>
 
         <!-- All Options -->
@@ -792,10 +834,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       }
 
       @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+        <mat-hint [ngClass]="hintClassList()">{{ translatedHint() }}</mat-hint>
       }
 
-      <mat-error>{{ errorMessage() }}</mat-error>
+      <mat-error>{{ translatedErrorMessage() }}</mat-error>
     </mat-form-field>
   `, styles: [".nmf-mat-field{position:relative;width:100%}.mat-mdc-select-placeholder{transition:none!important}.mat-mdc-form-field-infix{display:flex;align-items:center;gap:.5rem}.nmf-mat-prefix-slot,.nmf-mat-suffix-slot{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap;white-space:nowrap;background:transparent}.nmf-mat-prefix-slot{order:-1}.nmf-mat-suffix-slot{order:2}.nmf-mat-field:has(.nmf-mat-prefix-slot>:not(:empty)) .mdc-floating-label:not(.mdc-floating-label--float-above){padding-left:1rem;transform:translateY(-.65rem)}.hide-select-arrow .mat-mdc-select-arrow-wrapper{display:none!important}.nmf-mat-loader{margin-right:.5rem!important}.nmf-disabled{color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent)}.nmf-password-toggle{color:var(--mat-sys-on-surface-variant);padding-right:.5rem;background-color:transparent;border:none;white-space:nowrap;&:disabled{color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent);cursor:default}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}\n"] }]
         }] });
@@ -815,8 +857,8 @@ class MatInputTextComponent extends MatFormControlBase {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MatInputTextComponent, isStandalone: true, selector: "nmf-mat-text", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
+    @if (translatedLabel() && detachLabel()) {
+      <label class="font-medium text-base">{{ translatedLabel() }}</label>
     }
 
     <mat-form-field
@@ -824,8 +866,8 @@ class MatInputTextComponent extends MatFormControlBase {
       [appearance]="appearance()"
       [floatLabel]="shouldLabelFloat()"
     >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
+      @if (translatedLabel() && !detachLabel()) {
+        <mat-label>{{ translatedLabel() }}</mat-label>
       }
 
       <div class="nmf-mat-prefix-slot">
@@ -843,7 +885,7 @@ class MatInputTextComponent extends MatFormControlBase {
         [name]="name()"
         [type]="computedType()"
         [required]="isRequired()"
-        [placeholder]="placeholder()"
+        [placeholder]="translatedPlaceholder()"
         [autocomplete]="autocompleteAttr()"
         [formControl]="displayControl"
         (blur)="onTouched()"
@@ -867,7 +909,7 @@ class MatInputTextComponent extends MatFormControlBase {
       }
 
       @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+        <mat-hint [ngClass]="hintClassList()">{{ translatedHint() }}</mat-hint>
       }
 
       @if (type() === 'password' && !loading()) {
@@ -885,7 +927,7 @@ class MatInputTextComponent extends MatFormControlBase {
         </button>
       }
 
-      <mat-error>{{ errorMessage() }}</mat-error>
+      <mat-error>{{ translatedErrorMessage() }}</mat-error>
     </mat-form-field>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -904,8 +946,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
+    @if (translatedLabel() && detachLabel()) {
+      <label class="font-medium text-base">{{ translatedLabel() }}</label>
     }
 
     <mat-form-field
@@ -913,8 +955,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       [appearance]="appearance()"
       [floatLabel]="shouldLabelFloat()"
     >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
+      @if (translatedLabel() && !detachLabel()) {
+        <mat-label>{{ translatedLabel() }}</mat-label>
       }
 
       <div class="nmf-mat-prefix-slot">
@@ -932,7 +974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         [name]="name()"
         [type]="computedType()"
         [required]="isRequired()"
-        [placeholder]="placeholder()"
+        [placeholder]="translatedPlaceholder()"
         [autocomplete]="autocompleteAttr()"
         [formControl]="displayControl"
         (blur)="onTouched()"
@@ -956,7 +998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       }
 
       @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+        <mat-hint [ngClass]="hintClassList()">{{ translatedHint() }}</mat-hint>
       }
 
       @if (type() === 'password' && !loading()) {
@@ -974,7 +1016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         </button>
       }
 
-      <mat-error>{{ errorMessage() }}</mat-error>
+      <mat-error>{{ translatedErrorMessage() }}</mat-error>
     </mat-form-field>
   `,
                 }]
@@ -990,8 +1032,8 @@ class MatInputTextareaComponent extends MatFormControlBase {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MatInputTextareaComponent, isStandalone: true, selector: "nmf-mat-textarea", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
+    @if (translatedLabel() && detachLabel()) {
+      <label class="font-medium text-base">{{ translatedLabel() }}</label>
     }
 
     <mat-form-field
@@ -999,8 +1041,8 @@ class MatInputTextareaComponent extends MatFormControlBase {
       [appearance]="appearance()"
       [floatLabel]="shouldLabelFloat()"
     >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
+      @if (translatedLabel() && !detachLabel()) {
+        <mat-label>{{ translatedLabel() }}</mat-label>
       }
 
       <textarea
@@ -1010,7 +1052,7 @@ class MatInputTextareaComponent extends MatFormControlBase {
         [rows]="rows()"
         [cols]="cols()"
         [required]="isRequired()"
-        [placeholder]="placeholder()"
+        [placeholder]="translatedPlaceholder()"
         [autocomplete]="autocompleteAttr()"
         [formControl]="displayControl"
         (blur)="onTouched()"
@@ -1027,11 +1069,11 @@ class MatInputTextareaComponent extends MatFormControlBase {
       }
 
       @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+        <mat-hint [ngClass]="hintClassList()">{{ translatedHint() }}</mat-hint>
       }
 
       <mat-error>
-        {{ errorMessage() }}
+        {{ translatedErrorMessage() }}
       </mat-error>
     </mat-form-field>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1049,8 +1091,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
+    @if (translatedLabel() && detachLabel()) {
+      <label class="font-medium text-base">{{ translatedLabel() }}</label>
     }
 
     <mat-form-field
@@ -1058,8 +1100,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       [appearance]="appearance()"
       [floatLabel]="shouldLabelFloat()"
     >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
+      @if (translatedLabel() && !detachLabel()) {
+        <mat-label>{{ translatedLabel() }}</mat-label>
       }
 
       <textarea
@@ -1069,7 +1111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         [rows]="rows()"
         [cols]="cols()"
         [required]="isRequired()"
-        [placeholder]="placeholder()"
+        [placeholder]="translatedPlaceholder()"
         [autocomplete]="autocompleteAttr()"
         [formControl]="displayControl"
         (blur)="onTouched()"
@@ -1086,11 +1128,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       }
 
       @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+        <mat-hint [ngClass]="hintClassList()">{{ translatedHint() }}</mat-hint>
       }
 
       <mat-error>
-        {{ errorMessage() }}
+        {{ translatedErrorMessage() }}
       </mat-error>
     </mat-form-field>
   `,
@@ -1113,8 +1155,8 @@ class MatInputTimepickerComponent extends MatFormControlBase {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputTimepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MatInputTimepickerComponent, isStandalone: true, selector: "nmf-mat-timepicker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
+    @if (translatedLabel() && detachLabel()) {
+      <label class="font-medium text-base">{{ translatedLabel() }}</label>
     }
 
     <mat-form-field
@@ -1122,8 +1164,8 @@ class MatInputTimepickerComponent extends MatFormControlBase {
       [appearance]="appearance()"
       [floatLabel]="shouldLabelFloat()"
     >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
+      @if (translatedLabel() && !detachLabel()) {
+        <mat-label>{{ translatedLabel() }}</mat-label>
       }
 
       <input
@@ -1135,7 +1177,7 @@ class MatInputTimepickerComponent extends MatFormControlBase {
         [matTimepickerMin]="minDate()"
         [matTimepickerMax]="maxDate()"
         [required]="isRequired()"
-        [placeholder]="placeholder()"
+        [placeholder]="translatedPlaceholder()"
         [autocomplete]="autocompleteAttr()"
         [formControl]="displayControl"
         (blur)="onTouched()"
@@ -1166,11 +1208,11 @@ class MatInputTimepickerComponent extends MatFormControlBase {
         ></mat-spinner>
       }
 
-      @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+      @if (translatedHint()) {
+        <mat-hint [ngClass]="hintClassList()">{{ translatedHint() }}</mat-hint>
       }
 
-      <mat-error>{{ errorMessage() }}</mat-error>
+      <mat-error>{{ translatedErrorMessage() }}</mat-error>
     </mat-form-field>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i4$2.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i4$2.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i4$2.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1189,8 +1231,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
+    @if (translatedLabel() && detachLabel()) {
+      <label class="font-medium text-base">{{ translatedLabel() }}</label>
     }
 
     <mat-form-field
@@ -1198,8 +1240,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       [appearance]="appearance()"
       [floatLabel]="shouldLabelFloat()"
     >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
+      @if (translatedLabel() && !detachLabel()) {
+        <mat-label>{{ translatedLabel() }}</mat-label>
       }
 
       <input
@@ -1211,7 +1253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         [matTimepickerMin]="minDate()"
         [matTimepickerMax]="maxDate()"
         [required]="isRequired()"
-        [placeholder]="placeholder()"
+        [placeholder]="translatedPlaceholder()"
         [autocomplete]="autocompleteAttr()"
         [formControl]="displayControl"
         (blur)="onTouched()"
@@ -1242,11 +1284,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         ></mat-spinner>
       }
 
-      @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+      @if (translatedHint()) {
+        <mat-hint [ngClass]="hintClassList()">{{ translatedHint() }}</mat-hint>
       }
 
-      <mat-error>{{ errorMessage() }}</mat-error>
+      <mat-error>{{ translatedErrorMessage() }}</mat-error>
     </mat-form-field>
   `,
                 }]
@@ -1260,5 +1302,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MatFormControlBase, MatInputDatepickerComponent, MatInputLookupComponent, MatInputNumberComponent, MatInputSelectComponent, MatInputTextComponent, MatInputTextareaComponent, MatInputTimepickerComponent };
+export { MatFormControlBase, MatInputDatepickerComponent, MatInputLookupComponent, MatInputNumberComponent, MatInputSelectComponent, MatInputTextComponent, MatInputTextareaComponent, MatInputTimepickerComponent, NMF_MATERIAL_CONFIG, provideNmfMaterialConfig };
 //# sourceMappingURL=ng-modular-forms-material.mjs.map