npm - @ng-modular-forms/material - Versions diffs - 0.7.9 → 0.8.0 - Mend

@ng-modular-forms/material 0.7.9 → 0.8.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 (14) hide show

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

@@ -1,23 +1,27 @@
 import * as i0 from '@angular/core';
-import { input, Directive, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormControlBase, CurrencyBehavior, formatNumber, parseNumber, TextBehavior } from '@ng-modular-forms/core';
+import { input, Directive, computed, ChangeDetectionStrategy, Component, effect } from '@angular/core';
 import * as i3 from '@angular/forms';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { FormControlBase, CurrencyBehavior, formatNumber, parseNumber, TextBehavior, LookupBehavior } from '@ng-modular-forms/core';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, AsyncPipe } from '@angular/common';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { MatNativeDateModule } from '@angular/material/core';
 import * as i4$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i4$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i6 from '@angular/material/button';
+import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@angular/material/select';
+import * as i3$1 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { startWith } from 'rxjs';
+import * as i5$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i4$3 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
@@ -28,19 +32,55 @@ class MatFormControlBase extends FormControlBase {
     shouldLabelFloat = input('auto');
     hint = input();
     hintClassList = input('');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatFormControlBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", 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 });
+    // Purely a state carrier for mat-form-field, never drives value or internal state
+    displayControl = new FormControl({
+        value: null,
+        disabled: false,
+    });
+    writeValue(value) {
+        super.writeValue(value);
+        this.displayControl.setValue(value, {
+            emitEvent: false,
+        });
+    }
+    setDisabledState(isDisabled) {
+        super.setDisabledState(isDisabled);
+        if (isDisabled) {
+            this.displayControl.disable({ emitEvent: false });
+        }
+        else {
+            this.displayControl.enable({ emitEvent: false });
+        }
+    }
+    onControlStateChange() {
+        super.onControlStateChange();
+        const control = this.control;
+        if (!control) {
+            return;
+        }
+        if (control.touched) {
+            this.displayControl.markAsTouched();
+        }
+        if (control.dirty) {
+            this.displayControl.markAsDirty();
+        }
+        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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatFormControlBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatFormControlBase, decorators: [{
             type: Directive
         }] });
 class MatInputCurrencyComponent extends MatFormControlBase {
     behavior = new CurrencyBehavior();
-    displayValue = signal(null);
+    displayValue = toSignal(this.displayControl.valueChanges, {
+        initialValue: this.displayControl.value,
+    });
     writeValue(value) {
         super.writeValue(value);
-        this.displayValue.set(value != null ? formatNumber(value) : null);
+        this.displayControl.setValue(value != null ? formatNumber(value) : null);
     }
     handleKeyDown(event) {
         this.behavior.blockNonDigitKey(event);
@@ -48,7 +88,7 @@ class MatInputCurrencyComponent extends MatFormControlBase {
     onInput(event) {
         const rawValue = event.target.value;
         const value = parseNumber(rawValue);
-        this.displayValue.set(value != null ? formatNumber(value) : null);
+        this.displayControl.setValue(value != null ? formatNumber(value) : null);
         this.onChange(value);
     }
     textColor = computed(() => {
@@ -60,8 +100,8 @@ class MatInputCurrencyComponent extends MatFormControlBase {
         const valid = parsedValue != null && parsedValue >= 0;
         return valid ? '' : 'red';
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputCurrencyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputCurrencyComponent, isStandalone: true, selector: "nmf-mat-currency", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputCurrencyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MatInputCurrencyComponent, isStandalone: true, selector: "nmf-mat-currency", usesInheritance: true, ngImport: i0, template: `
     @if (label() && detachLabel()) {
       <label class="font-medium text-base">{{ label() }}</label>
     }
@@ -75,7 +115,7 @@ class MatInputCurrencyComponent extends MatFormControlBase {
         <mat-label>{{ label() }}</mat-label>
       }
-      @if (displayValue()) {
+      @if (displayControl.value) {
         <span
           matTextPrefix
           [class.nmf-disabled]="disabled()"
@@ -86,16 +126,18 @@ class MatInputCurrencyComponent extends MatFormControlBase {
       }
       <input
+        #focusable
         matInput
         type="text"
         [ngClass]="classList()"
         [style.color]="textColor()"
         [style.opacity]="disabled() ? 0.6 : 1"
+        [id]="id()"
         [name]="name()"
-        [value]="displayValue()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
-        [formControl]="formControl"
+        [autocomplete]="autocompleteAttr()"
+        [formControl]="displayControl"
         (blur)="onTouched()"
         (input)="onInput($event)"
         (keydown)="handleKeyDown($event)"
@@ -124,7 +166,7 @@ class MatInputCurrencyComponent extends MatFormControlBase {
     </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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputCurrencyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputCurrencyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-mat-currency',
@@ -150,7 +192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         <mat-label>{{ label() }}</mat-label>
       }
-      @if (displayValue()) {
+      @if (displayControl.value) {
         <span
           matTextPrefix
           [class.nmf-disabled]="disabled()"
@@ -161,16 +203,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
       }
       <input
+        #focusable
         matInput
         type="text"
         [ngClass]="classList()"
         [style.color]="textColor()"
         [style.opacity]="disabled() ? 0.6 : 1"
+        [id]="id()"
         [name]="name()"
-        [value]="displayValue()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
-        [formControl]="formControl"
+        [autocomplete]="autocompleteAttr()"
+        [formControl]="displayControl"
         (blur)="onTouched()"
         (input)="onInput($event)"
         (keydown)="handleKeyDown($event)"
@@ -211,8 +255,13 @@ class MatInputDatepickerComponent extends MatFormControlBase {
     panelClass = input('');
     touchUi = input(false);
     placeholder = input('Select a date');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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: `
+    onInput(event) {
+        const rawValue = event.targetElement.value;
+        const value = rawValue ? new Date(rawValue) : null;
+        this.onChange(value);
+    }
+    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>
     }
@@ -227,8 +276,9 @@ class MatInputDatepickerComponent extends MatFormControlBase {
       }
       <input
+        #focusable
         matInput
-        autocomplete="off"
+        [id]="id()"
         [name]="name()"
         [min]="minDate()"
         [max]="maxDate()"
@@ -236,8 +286,11 @@ class MatInputDatepickerComponent extends MatFormControlBase {
         [matDatepickerFilter]="dateFilter()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
-        [formControl]="formControl"
+        [autocomplete]="autocompleteAttr()"
+        [formControl]="displayControl"
         (blur)="onTouched()"
+        (dateInput)="onInput($event)"
+        (dateChange)="onInput($event)"
       />
       <mat-datepicker-toggle
@@ -274,7 +327,7 @@ class MatInputDatepickerComponent extends MatFormControlBase {
     </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$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.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: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputDatepickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-mat-datepicker',
@@ -303,8 +356,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
       }
       <input
+        #focusable
         matInput
-        autocomplete="off"
+        [id]="id()"
         [name]="name()"
         [min]="minDate()"
         [max]="maxDate()"
@@ -312,8 +366,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         [matDatepickerFilter]="dateFilter()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
-        [formControl]="formControl"
+        [autocomplete]="autocompleteAttr()"
+        [formControl]="displayControl"
         (blur)="onTouched()"
+        (dateInput)="onInput($event)"
+        (dateChange)="onInput($event)"
       />
       <mat-datepicker-toggle
@@ -354,7 +411,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 class MatInputNumberComponent extends MatFormControlBase {
     formatValue = input(false);
-    displayValue = signal('');
     behavior = new TextBehavior();
     currencyBehavior = new CurrencyBehavior();
     writeValue(value) {
@@ -371,15 +427,18 @@ class MatInputNumberComponent extends MatFormControlBase {
         this.onChange(parsed);
     }
     updateDisplayValue(value) {
-        if (this.formatValue() && value != null) {
-            this.displayValue.set(formatNumber(value) ?? '');
-        }
-        else {
-            this.displayValue.set(value != null ? String(value) : '');
-        }
+        const shouldFormat = this.formatValue() && value != null;
+        const displayValue = shouldFormat
+            ? (formatNumber(value) ?? '')
+            : value != null
+                ? String(value)
+                : '';
+        this.displayControl.setValue(displayValue, {
+            emitEvent: false,
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputNumberComponent, isStandalone: true, selector: "nmf-mat-number", inputs: { formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    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 } }, usesInheritance: true, ngImport: i0, template: `
     @if (label() && detachLabel()) {
       <label class="font-medium text-base">{{ label() }}</label>
     }
@@ -394,14 +453,16 @@ class MatInputNumberComponent extends MatFormControlBase {
       }
       <input
+        #focusable
         matInput
         [ngClass]="classList"
+        [id]="id()"
         [name]="name()"
         [type]="formatValue() ? 'text' : 'number'"
-        [value]="displayValue()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
-        [formControl]="formControl"
+        [autocomplete]="autocompleteAttr()"
+        [formControl]="displayControl"
         (blur)="onTouched()"
         (input)="onInput($event)"
         (keydown)="handleKeyDown($event)"
@@ -426,7 +487,7 @@ class MatInputNumberComponent extends MatFormControlBase {
     </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: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputNumberComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-mat-number',
@@ -455,14 +516,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
       }
       <input
+        #focusable
         matInput
         [ngClass]="classList"
+        [id]="id()"
         [name]="name()"
         [type]="formatValue() ? 'text' : 'number'"
-        [value]="displayValue()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
-        [formControl]="formControl"
+        [autocomplete]="autocompleteAttr()"
+        [formControl]="displayControl"
         (blur)="onTouched()"
         (input)="onInput($event)"
         (keydown)="handleKeyDown($event)"
@@ -489,13 +552,268 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
+class MatInputLookupComponent extends MatFormControlBase {
+    autocompleteAttr = input('off');
+    /*
+     * Static options to display in the dropdown. This is for synchronous sources.
+     */
+    optionsSource = input([]);
+    /*
+     * Must return a cancellable observable. This is for asynchronous sources (API calls, etc).
+     */
+    optionsProvider = input();
+    /*
+     * When using a synchronous options source, or an asynchronous provider that returns an object where the shape is known,
+     * this function is used to determine the display value.
+     */
+    displayWith = input();
+    /*
+     * Used to determine the display value asynchronously when using primitive types for form values
+     * eg: countryCode instead of Country itself.
+     *
+     * If not provided, the raw value will be used. Only needed for patching/hydrating the form.
+     */
+    displayProvider = input();
+    /*
+     * Used to compare options during selection if object equality is not sufficient.
+     */
+    compareWith = input();
+    emptyOptionsLabel = input('No results found');
+    /*
+     * Search will be debounced by this many milliseconds.
+     */
+    debounceTime = input(500);
+    /*
+     * Search will not be triggered until the user has typed at least this many characters.
+     */
+    searchThreshold = input(2);
+    searchQuery = toSignal(this.displayControl.valueChanges.pipe(startWith(this.displayControl.value)));
+    behavior;
+    constructor() {
+        super();
+        this.behavior = new LookupBehavior({
+            destroyRef: this.destroyRef,
+            resolvers: {
+                compare: this.compareWith,
+                label: this.displayWith,
+                labelAsync: this.displayProvider,
+                search: this.optionsProvider,
+            },
+        });
+        effect(() => {
+            const currentOptions = this.optionsSource() ?? [];
+            this.behavior.updateOptions(currentOptions);
+        });
+        effect(() => {
+            const selectedOption = this.behavior.selectedOption();
+            this.onChange(selectedOption?.value ?? null);
+        });
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.behavior.setupFilteredOptions(this.displayControl.valueChanges, this.searchQuery);
+        this.behavior.setupOptionsProvider(this.displayControl.valueChanges, 500, 2);
+    }
+    writeValue(value) {
+        super.writeValue(value);
+        this.behavior.selectedMatchedOption(value);
+    }
+    selectOption(result) {
+        const lookupOption = {
+            value: result.option.value,
+            label: result.option.viewValue,
+        };
+        this.behavior.selectOption(undefined, lookupOption);
+    }
+    clearSelectedOption() {
+        this.displayControl.setValue(null);
+        this.behavior.clearSelectedOption();
+    }
+    ngOnDestroy() {
+        this.behavior.optionsUpdated$.complete();
+    }
+    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>
+    }
+    <div class="relative">
+      <mat-form-field
+        class="w-full"
+        [appearance]="appearance()"
+        [floatLabel]="shouldLabelFloat()"
+      >
+        @if (label() && !detachLabel()) {
+          <mat-label>{{ label() }}</mat-label>
+        }
+        <input
+          #focusable
+          matInput
+          type="text"
+          [class.cursor-not-allowed]="behavior.selectedOption() != null"
+          [attr.aria-label]="detachLabel() ? label() : null"
+          [ngClass]="classList"
+          [id]="id()"
+          [name]="name()"
+          [required]="isRequired()"
+          [readonly]="behavior.selectedOption() != null"
+          [placeholder]="placeholder()"
+          [formControl]="displayControl"
+          [matAutocomplete]="auto"
+          (blur)="onTouched()"
+        />
+        <mat-autocomplete
+          #auto="matAutocomplete"
+          [displayWith]="displayWith() ?? null"
+          (optionSelected)="selectOption($event)"
+        >
+          @for (option of behavior.filteredOptions | async; track option) {
+            <mat-option [value]="option.value">{{ option.label }}</mat-option>
+          }
+        </mat-autocomplete>
+        @if (behavior.status() === 'empty') {
+          <mat-hint>{{ emptyOptionsLabel() }}</mat-hint>
+        } @else if (hint()) {
+          <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+        }
+        <mat-error>{{ errorMessage() }}</mat-error>
+        <!-- Loading status is for lookups and async options, and loading() is for the form control itself -->
+        @if (behavior.status() === 'loading' || loading()) {
+          <mat-spinner
+            matSuffix
+            class="nmf-mat-loader"
+            diameter="24"
+            strokeWidth="3"
+          />
+        }
+        @if (behavior.selectedOption()) {
+          <button
+            matSuffix
+            mat-icon-button
+            aria-label="Clear selection"
+            (click)="clearSelectedOption()"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        }
+      </mat-form-field>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: MatAutocompleteModule }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputLookupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nmf-mat-lookup',
+                    exportAs: 'nmfMatLookup',
+                    imports: [
+                        CommonModule,
+                        MatInputModule,
+                        MatAutocompleteModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        ReactiveFormsModule,
+                        MatProgressSpinnerModule,
+                        AsyncPipe,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (label() && detachLabel()) {
+      <label class="font-medium text-base">{{ label() }}</label>
+    }
+    <div class="relative">
+      <mat-form-field
+        class="w-full"
+        [appearance]="appearance()"
+        [floatLabel]="shouldLabelFloat()"
+      >
+        @if (label() && !detachLabel()) {
+          <mat-label>{{ label() }}</mat-label>
+        }
+        <input
+          #focusable
+          matInput
+          type="text"
+          [class.cursor-not-allowed]="behavior.selectedOption() != null"
+          [attr.aria-label]="detachLabel() ? label() : null"
+          [ngClass]="classList"
+          [id]="id()"
+          [name]="name()"
+          [required]="isRequired()"
+          [readonly]="behavior.selectedOption() != null"
+          [placeholder]="placeholder()"
+          [formControl]="displayControl"
+          [matAutocomplete]="auto"
+          (blur)="onTouched()"
+        />
+        <mat-autocomplete
+          #auto="matAutocomplete"
+          [displayWith]="displayWith() ?? null"
+          (optionSelected)="selectOption($event)"
+        >
+          @for (option of behavior.filteredOptions | async; track option) {
+            <mat-option [value]="option.value">{{ option.label }}</mat-option>
+          }
+        </mat-autocomplete>
+        @if (behavior.status() === 'empty') {
+          <mat-hint>{{ emptyOptionsLabel() }}</mat-hint>
+        } @else if (hint()) {
+          <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+        }
+        <mat-error>{{ errorMessage() }}</mat-error>
+        <!-- Loading status is for lookups and async options, and loading() is for the form control itself -->
+        @if (behavior.status() === 'loading' || loading()) {
+          <mat-spinner
+            matSuffix
+            class="nmf-mat-loader"
+            diameter="24"
+            strokeWidth="3"
+          />
+        }
+        @if (behavior.selectedOption()) {
+          <button
+            matSuffix
+            mat-icon-button
+            aria-label="Clear selection"
+            (click)="clearSelectedOption()"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        }
+      </mat-form-field>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [] });
 class MatInputSelectComponent extends MatFormControlBase {
     options = input([]);
     emptyOptionLabel = input('Select an option');
-    clearOptionLabel = input('Clear selection');
+    allowEmptyOptionSelection = input(false);
     panelWidth = input('auto');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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 }, clearOptionLabel: { classPropertyName: "clearOptionLabel", publicName: "clearOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    onSelectionChange(event) {
+        if (this.disabled()) {
+            return;
+        }
+        const value = event.value;
+        this.onChange(value);
+    }
+    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>
     }
@@ -510,28 +828,26 @@ class MatInputSelectComponent extends MatFormControlBase {
       }
       <mat-select
+        #focusable
         [class.hide-select-arrow]="loading()"
+        [id]="id()"
         [panelWidth]="panelWidth()"
         [required]="isRequired()"
         [placeholder]="emptyOptionLabel()"
-        [formControl]="formControl"
+        [formControl]="displayControl"
         (blur)="onTouched()"
+        (selectionChange)="onSelectionChange($event)"
       >
-        <mat-option [value]="null" disabled>
+        <mat-option [value]="''" [disabled]="!allowEmptyOptionSelection()">
           {{ emptyOptionLabel() }}
         </mat-option>
         <!-- All Options -->
-        @for (option of options(); track option.label) {
-          <mat-option [value]="option.key" [disabled]="option.disabled">
+        @for (option of options(); track option.value) {
+          <mat-option [value]="option.value" [disabled]="option.disabled">
             {{ option.label }}
           </mat-option>
         }
-        <!-- Clear Selection Option -->
-        @if (clearOptionLabel()) {
-          <mat-option [value]="null">{{ clearOptionLabel() }}</mat-option>
-        }
       </mat-select>
       @if (loading()) {
@@ -549,9 +865,9 @@ class MatInputSelectComponent extends MatFormControlBase {
       <mat-error>{{ errorMessage() }}</mat-error>
     </mat-form-field>
-  `, isInline: true, styles: [".mat-mdc-select-placeholder{transition:none!important}.hide-select-arrow .mat-mdc-select-arrow-wrapper{display:none!important}.nmf-mat-loader{margin-right:.7rem!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;cursor:pointer;&: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: i4.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.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: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".mat-mdc-select-placeholder{transition:none!important}.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;cursor:pointer;&: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: i4.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$1.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nmf-mat-select', imports: [
                         CommonModule,
@@ -574,28 +890,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
       }
       <mat-select
+        #focusable
         [class.hide-select-arrow]="loading()"
+        [id]="id()"
         [panelWidth]="panelWidth()"
         [required]="isRequired()"
         [placeholder]="emptyOptionLabel()"
-        [formControl]="formControl"
+        [formControl]="displayControl"
         (blur)="onTouched()"
+        (selectionChange)="onSelectionChange($event)"
       >
-        <mat-option [value]="null" disabled>
+        <mat-option [value]="''" [disabled]="!allowEmptyOptionSelection()">
           {{ emptyOptionLabel() }}
         </mat-option>
         <!-- All Options -->
-        @for (option of options(); track option.label) {
-          <mat-option [value]="option.key" [disabled]="option.disabled">
+        @for (option of options(); track option.value) {
+          <mat-option [value]="option.value" [disabled]="option.disabled">
             {{ option.label }}
           </mat-option>
         }
-        <!-- Clear Selection Option -->
-        @if (clearOptionLabel()) {
-          <mat-option [value]="null">{{ clearOptionLabel() }}</mat-option>
-        }
       </mat-select>
       @if (loading()) {
@@ -613,7 +927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
       <mat-error>{{ errorMessage() }}</mat-error>
     </mat-form-field>
-  `, styles: [".mat-mdc-select-placeholder{transition:none!important}.hide-select-arrow .mat-mdc-select-arrow-wrapper{display:none!important}.nmf-mat-loader{margin-right:.7rem!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;cursor:pointer;&: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"] }]
+  `, styles: [".mat-mdc-select-placeholder{transition:none!important}.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;cursor:pointer;&: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"] }]
         }] });
 class MatInputTextComponent extends MatFormControlBase {
@@ -622,8 +936,13 @@ class MatInputTextComponent extends MatFormControlBase {
     computedType = computed(() => this.behavior.showPassword() && this.type() === 'password'
         ? 'text'
         : this.type());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputTextComponent, isStandalone: true, selector: "nmf-mat-text", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    onInput(event) {
+        const rawValue = event.target.value;
+        const value = rawValue ? rawValue : null;
+        this.onChange(value);
+    }
+    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 } }, usesInheritance: true, ngImport: i0, template: `
     @if (label() && detachLabel()) {
       <label class="font-medium text-base">{{ label() }}</label>
     }
@@ -638,15 +957,18 @@ class MatInputTextComponent extends MatFormControlBase {
       }
       <input
+        #focusable
         matInput
-        autocomplete="off"
         [ngClass]="classList"
+        [id]="id()"
         [name]="name()"
         [type]="computedType()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
-        [formControl]="formControl"
+        [autocomplete]="autocompleteAttr()"
+        [formControl]="displayControl"
         (blur)="onTouched()"
+        (input)="onInput($event)"
       />
       @if (loading()) {
@@ -681,9 +1003,9 @@ class MatInputTextComponent extends MatFormControlBase {
       <mat-error>{{ errorMessage() }}</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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputTextComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-mat-text',
@@ -712,15 +1034,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
       }
       <input
+        #focusable
         matInput
-        autocomplete="off"
         [ngClass]="classList"
+        [id]="id()"
         [name]="name()"
         [type]="computedType()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
-        [formControl]="formControl"
+        [autocomplete]="autocompleteAttr()"
+        [formControl]="displayControl"
         (blur)="onTouched()"
+        (input)="onInput($event)"
       />
       @if (loading()) {
@@ -762,8 +1087,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 class MatInputTextareaComponent extends MatFormControlBase {
     rows = input(5);
     cols = input(5);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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: `
+    onInput(event) {
+        const rawValue = event.target.value;
+        const value = rawValue ? rawValue : null;
+        this.onChange(value);
+    }
+    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>
     }
@@ -778,13 +1108,17 @@ class MatInputTextareaComponent extends MatFormControlBase {
       }
       <textarea
+        #focusable
         matInput
+        [id]="id()"
         [rows]="rows()"
         [cols]="cols()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
-        [formControl]="formControl"
+        [autocomplete]="autocompleteAttr()"
+        [formControl]="displayControl"
         (blur)="onTouched()"
+        (input)="onInput($event)"
       ></textarea>
       @if (loading()) {
@@ -806,7 +1140,7 @@ class MatInputTextareaComponent extends MatFormControlBase {
     </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: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputTextareaComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-mat-textarea',
@@ -833,13 +1167,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
       }
       <textarea
+        #focusable
         matInput
+        [id]="id()"
         [rows]="rows()"
         [cols]="cols()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
-        [formControl]="formControl"
+        [autocomplete]="autocompleteAttr()"
+        [formControl]="displayControl"
         (blur)="onTouched()"
+        (input)="onInput($event)"
       ></textarea>
       @if (loading()) {
@@ -869,8 +1207,16 @@ class MatInputTimepickerComponent extends MatFormControlBase {
     interval = input(null);
     options = input(null);
     placeholder = input('Select a time');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTimepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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: `
+    onInput(event) {
+        const rawValue = event.target.value;
+        const value = rawValue ? new Date(rawValue) : null;
+        this.onChange(value);
+    }
+    onSelected(event) {
+        this.onChange(event.value);
+    }
+    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>
     }
@@ -885,16 +1231,19 @@ class MatInputTimepickerComponent extends MatFormControlBase {
       }
       <input
+        #focusable
         matInput
-        autocomplete="off"
+        [id]="id()"
         [name]="name()"
         [matTimepicker]="picker"
         [matTimepickerMin]="minDate()"
         [matTimepickerMax]="maxDate()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
-        [formControl]="formControl"
+        [autocomplete]="autocompleteAttr()"
+        [formControl]="displayControl"
         (blur)="onTouched()"
+        (input)="onInput($event)"
       />
       <mat-timepicker-toggle
@@ -908,6 +1257,7 @@ class MatInputTimepickerComponent extends MatFormControlBase {
         [hidden]="loading()"
         [interval]="interval()"
         [options]="options()"
+        (selected)="onSelected($event)"
         #picker
       />
@@ -926,9 +1276,9 @@ class MatInputTimepickerComponent extends MatFormControlBase {
       <mat-error>{{ errorMessage() }}</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$3.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i4$3.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i4$3.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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$3.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i4$3.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i4$3.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: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputTimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MatInputTimepickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-mat-timepicker',
@@ -938,6 +1288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         MatFormFieldModule,
                         ReactiveFormsModule,
                         MatTimepickerModule,
+                        MatNativeDateModule,
                         MatProgressSpinnerModule,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -956,16 +1307,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
       }
       <input
+        #focusable
         matInput
-        autocomplete="off"
+        [id]="id()"
         [name]="name()"
         [matTimepicker]="picker"
         [matTimepickerMin]="minDate()"
         [matTimepickerMax]="maxDate()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
-        [formControl]="formControl"
+        [autocomplete]="autocompleteAttr()"
+        [formControl]="displayControl"
         (blur)="onTouched()"
+        (input)="onInput($event)"
       />
       <mat-timepicker-toggle
@@ -979,6 +1333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         [hidden]="loading()"
         [interval]="interval()"
         [options]="options()"
+        (selected)="onSelected($event)"
         #picker
       />
@@ -1009,5 +1364,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { MatFormControlBase, MatInputCurrencyComponent, MatInputDatepickerComponent, MatInputNumberComponent, MatInputSelectComponent, MatInputTextComponent, MatInputTextareaComponent, MatInputTimepickerComponent };
+export { MatFormControlBase, MatInputCurrencyComponent, MatInputDatepickerComponent, MatInputLookupComponent, MatInputNumberComponent, MatInputSelectComponent, MatInputTextComponent, MatInputTextareaComponent, MatInputTimepickerComponent };
 //# sourceMappingURL=ng-modular-forms-material.mjs.map