@ng-modular-forms/core 0.7.9 → 0.8.0

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

@@ -1,70 +1,89 @@
 import * as i2 from '@angular/forms';
-import { NgControl, FormControl, Validators, TouchedChangeEvent, ReactiveFormsModule, FormGroup } from '@angular/forms';
+import { NgControl, Validators, TouchedChangeEvent, ReactiveFormsModule, FormGroup } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, input, booleanAttribute, signal, computed, Directive, ChangeDetectionStrategy, Component, Injectable } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { merge, startWith, Subscription } from 'rxjs';
+import { viewChild, input, computed, booleanAttribute, signal, inject, ChangeDetectorRef, DestroyRef, ElementRef, Directive, ChangeDetectionStrategy, Component, effect, Injectable } from '@angular/core';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { merge, startWith, Subject, take, catchError, EMPTY, map, debounceTime, distinctUntilChanged, filter, tap, switchMap, of, Subscription } from 'rxjs';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, AsyncPipe } from '@angular/common';
 
 class FormControlBase {
-    destroyRef = inject(DestroyRef);
     static nextId = 0;
-    id = input(`nmf-form-control-${FormControlBase.nextId++}`, { alias: 'id' });
+    focusableElement = viewChild('focusable');
+    id = input(`nmf-form-control-${FormControlBase.nextId++}`);
     label = input('');
-    classList = input([]);
     loading = input(false);
     name = input('');
     placeholder = input('');
+    autocompleteAttr = input(null);
+    _classList = input('', { alias: 'classList' });
+    classList = computed(() => {
+        const classList = this._classList();
+        if (Array.isArray(classList)) {
+            return classList.filter((className) => !!className.trim());
+        }
+        return classList.split(/\s+/).filter((className) => className.length > 0);
+    });
     _disabledByInput = input(false, {
         transform: booleanAttribute,
         alias: 'disabledOverride',
     });
     _disabledByCva = signal(false);
+    cdr = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
     ngControl = inject(NgControl, {
-        self: true,
         optional: true,
     });
-    standaloneControl = new FormControl(null);
-    get formControl() {
-        return (this.ngControl?.control ??
-            this.standaloneControl);
-    }
+    _focused = signal(false);
+    _value = null;
     disabled = computed(() => this._disabledByInput() || this._disabledByCva());
     isRequired = signal(this.ngControl?.control?.hasValidator(Validators.required) ?? false);
     hasErrors = signal(false);
     onChange = () => { };
     onTouched = () => { };
+    get value() {
+        return this._value;
+    }
+    get control() {
+        return this.ngControl?.control;
+    }
+    get focused() {
+        return this._focused();
+    }
     constructor() {
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
     }
     ngOnInit() {
-        const control = this.ngControl?.control;
+        const control = this.control;
         if (!control)
             return;
         merge(control.statusChanges, control.valueChanges)
             .pipe(startWith(null), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
-            this.hasErrors.set(control.invalid && control.touched);
-            this.isRequired.set(control.hasValidator(Validators.required) ?? false);
+            this.onControlStateChange();
         });
         control.events
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((event) => {
             if (event instanceof TouchedChangeEvent) {
-                this.hasErrors.set(control.invalid && control.touched);
+                this.onControlStateChange();
             }
         });
     }
-    writeValue(value) {
-        const control = this.ngControl?.control;
-        if (!control)
+    onControlStateChange() {
+        const control = this.control;
+        if (!control) {
             return;
-        if (control.value !== value) {
-            control.setValue(value, { emitEvent: false });
         }
+        this.hasErrors.set(control.invalid && control.touched);
+        this.isRequired.set(control.hasValidator(Validators.required) ?? false);
+        this.cdr.markForCheck();
+    }
+    writeValue(value) {
+        this._value = value;
+        this.cdr.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -75,8 +94,43 @@ class FormControlBase {
     setDisabledState(isDisabled) {
         this._disabledByCva.set(isDisabled);
     }
+    focus() {
+        const target = this.focusableElement();
+        if (!target)
+            return;
+        // Type guard check for native ElementRef wrapper
+        if (target instanceof ElementRef) {
+            target.nativeElement.focus();
+        }
+        // Type guard check for a custom component instance with executable methods
+        else if ('focus' in target && typeof target.focus === 'function') {
+            target.focus();
+        }
+    }
+    blur() {
+        const target = this.focusableElement();
+        if (!target)
+            return;
+        if (target instanceof ElementRef) {
+            target.nativeElement.blur();
+        }
+        else if ('blur' in target && typeof target.blur === 'function') {
+            target.blur();
+        }
+    }
+    onFocusIn() {
+        if (this.focused) {
+            return;
+        }
+        this._focused.set(true);
+    }
+    onFocusOut() {
+        //this.control?.markAsTouched();
+        this._focused.set(false);
+        this.onTouched();
+    }
     errorMessage() {
-        const control = this.ngControl?.control;
+        const control = this.control;
         if (control == null || !control.errors || !control.touched)
             return null;
         const firstKey = Object.keys(control.errors)[0];
@@ -105,10 +159,10 @@ class FormControlBase {
                 return 'Invalid value';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormControlBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: FormControlBase, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _disabledByInput: { classPropertyName: "_disabledByInput", publicName: "disabledOverride", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormControlBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.25", type: FormControlBase, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocompleteAttr: { classPropertyName: "autocompleteAttr", publicName: "autocompleteAttr", isSignal: true, isRequired: false, transformFunction: null }, _classList: { classPropertyName: "_classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, _disabledByInput: { classPropertyName: "_disabledByInput", publicName: "disabledOverride", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusable"], descendants: true, isSignal: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormControlBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormControlBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 
@@ -246,6 +300,125 @@ class CurrencyBehavior {
     }
 }
 
+class LookupBehavior {
+    _status = signal('default');
+    _options = signal([]);
+    _selectedOption = signal(null);
+    status = this._status.asReadonly();
+    options = this._options.asReadonly();
+    selectedOption = this._selectedOption.asReadonly();
+    /*
+     * Emits when the options have been updated. Ensures Material autocomplete updates its
+     */
+    optionsUpdated$ = new Subject();
+    filteredOptions;
+    bOptions;
+    constructor(bOptions) {
+        this.bOptions = bOptions;
+    }
+    setSelectedOption(value) {
+        this._selectedOption.set(value);
+    }
+    selectOption(event, option) {
+        event?.stopPropagation();
+        const compare = this.bOptions.resolvers.compare() ?? undefined;
+        const selected = this.options().find((o) => compare ? compare(o.value, option.value) : o.value === option.value);
+        if (!selected) {
+            return;
+        }
+        this.setSelectedOption(selected);
+    }
+    clearSelectedOption() {
+        this.setSelectedOption(null);
+        this.optionsUpdated$.next();
+    }
+    selectedMatchedOption(value) {
+        const { destroyRef, resolvers } = this.bOptions;
+        const compare = resolvers.compare() ?? undefined;
+        const label = resolvers.label() ?? undefined;
+        const labelAsync = resolvers.labelAsync() ?? undefined;
+        const match = this._options().find((o) => compare ? compare(o.value, value) : o.value === value) ?? null;
+        if (match) {
+            this._selectedOption.set(match);
+            return;
+        }
+        if (value === null) {
+            this._selectedOption.set(null);
+            return;
+        }
+        if (labelAsync) {
+            this._status.set('loading');
+            labelAsync(value)
+                .pipe(take(1), catchError(() => {
+                this._status.set('error');
+                return EMPTY;
+            }), takeUntilDestroyed(destroyRef))
+                .subscribe((label) => {
+                this._selectedOption.set({
+                    value,
+                    label,
+                });
+                this._status.set('default');
+            });
+            return;
+        }
+        if (label) {
+            this._selectedOption.set({
+                value: value,
+                label: label(value),
+            });
+            return;
+        }
+    }
+    updateOptions(results, status) {
+        this._status.set(status ?? 'default');
+        this._options.set(results);
+        this.optionsUpdated$.next();
+    }
+    filterOptions(name, results) {
+        const filterValue = name.toLowerCase();
+        return results.filter((option) => option.label.toLowerCase().includes(filterValue) ||
+            String(option.value).includes(filterValue));
+    }
+    setupFilteredOptions(source, searchQuery) {
+        this.filteredOptions = merge(source, this.optionsUpdated$).pipe(startWith(''), map(() => {
+            const options = this.options();
+            let value = searchQuery;
+            if (typeof searchQuery === 'function') {
+                value = searchQuery();
+            }
+            if (typeof value !== 'string') {
+                return this.options().slice();
+            }
+            return value ? this.filterOptions(value, options) : options.slice();
+        }));
+    }
+    setupOptionsProvider(source, debounceDelay, searchThreshold) {
+        const { destroyRef, resolvers } = this.bOptions;
+        const search = resolvers.search() ?? undefined;
+        if (!search) {
+            return;
+        }
+        source.pipe(takeUntilDestroyed(destroyRef)).subscribe((value) => {
+            if (!value || value.length < searchThreshold) {
+                this.updateOptions([]);
+            }
+        });
+        source
+            .pipe(debounceTime(debounceDelay), distinctUntilChanged((a, b) => a === b), filter(() => this.selectedOption() == null), filter((q) => typeof q === 'string' && q.length >= searchThreshold), tap(() => this.updateOptions([], 'loading')), switchMap((query) => search(query).pipe(catchError(() => {
+            this._status.set('error');
+            return of(null);
+        }))), takeUntilDestroyed(destroyRef))
+            .subscribe((response) => {
+            if (!response) {
+                return;
+            }
+            const status = response.length ? 'default' : 'empty';
+            this.updateOptions(response, status);
+        });
+    }
+}
+
 class TextBehavior {
     _showPassword = signal(false);
     showPassword = this._showPassword.asReadonly();
@@ -259,9 +432,11 @@ class FormFieldComponent {
     label = input();
     isRequired = input();
     loading = input();
+    hint = input();
     errorMessage = input();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: FormFieldComponent, isStandalone: true, selector: "nmf-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    hasErrors = computed(() => this.errorMessage() != null);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormFieldComponent, isStandalone: true, selector: "nmf-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="nmf-field" [class.loading]="loading()">
       @if (label()) {
         <label class="nmf-label">
@@ -280,13 +455,19 @@ class FormFieldComponent {
         </div>
       }
 
-      <p class="nmf-error">
+      @if (hint()) {
+        <p class="nmf-hint">
+          {{ hint() }}
+        </p>
+      }
+
+      <p class="nmf-hint" [class.error]="hasErrors()">
         {{ errorMessage() }}
       </p>
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-form-field',
@@ -312,7 +493,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         </div>
       }
 
-      <p class="nmf-error">
+      @if (hint()) {
+        <p class="nmf-hint">
+          {{ hint() }}
+        </p>
+      }
+
+      <p class="nmf-hint" [class.error]="hasErrors()">
         {{ errorMessage() }}
       </p>
     </div>
@@ -347,8 +534,8 @@ class InputCurrencyComponent extends FormControlBase {
         const valid = parsedValue != null && parsedValue >= 0;
         return valid ? 'inherit' : '#dc6262';
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputCurrencyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputCurrencyComponent, isStandalone: true, selector: "nmf-currency", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputCurrencyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: InputCurrencyComponent, isStandalone: true, selector: "nmf-currency", usesInheritance: true, ngImport: i0, template: `
     <nmf-form-field
       [label]="label()"
       [isRequired]="isRequired()"
@@ -368,8 +555,8 @@ class InputCurrencyComponent extends FormControlBase {
         }
 
         <input
+          #focusable
           type="text"
-          autocomplete="off"
           class="nmf-input"
           [ngClass]="classList()"
           [class.error]="hasErrors()"
@@ -382,15 +569,16 @@ class InputCurrencyComponent extends FormControlBase {
           [disabled]="disabled()"
           [required]="isRequired()"
           [placeholder]="placeholder()"
+          [autocomplete]="autocompleteAttr()"
           (blur)="onTouched()"
           (input)="onInput($event)"
           (keydown)="handleKeyDown($event)"
         />
       </div>
     </nmf-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputCurrencyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputCurrencyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-currency',
@@ -417,8 +605,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         }
 
         <input
+          #focusable
           type="text"
-          autocomplete="off"
           class="nmf-input"
           [ngClass]="classList()"
           [class.error]="hasErrors()"
@@ -431,6 +619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
           [disabled]="disabled()"
           [required]="isRequired()"
           [placeholder]="placeholder()"
+          [autocomplete]="autocompleteAttr()"
           (blur)="onTouched()"
           (input)="onInput($event)"
           (keydown)="handleKeyDown($event)"
@@ -472,8 +661,8 @@ class InputDatepickerComponent extends FormControlBase {
         this.displayValue.set(this.formatDate(parsed) ?? '');
         this.onChange(parsed);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputDatepickerComponent, isStandalone: true, selector: "nmf-datepicker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", 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: InputDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.25", type: InputDatepickerComponent, isStandalone: true, selector: "nmf-datepicker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
     <nmf-form-field
       [label]="label()"
       [isRequired]="isRequired()"
@@ -481,6 +670,7 @@ class InputDatepickerComponent extends FormControlBase {
       [errorMessage]="errorMessage()"
     >
       <input
+        #focusable
         type="date"
         class="nmf-input"
         [ngClass]="classList()"
@@ -494,13 +684,14 @@ class InputDatepickerComponent extends FormControlBase {
         [disabled]="disabled()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
+        [autocomplete]="autocompleteAttr()"
         (blur)="onTouched()"
         (input)="onInput($event)"
       />
     </nmf-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputDatepickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-datepicker',
@@ -515,6 +706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
       [errorMessage]="errorMessage()"
     >
       <input
+        #focusable
         type="date"
         class="nmf-input"
         [ngClass]="classList()"
@@ -528,6 +720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         [disabled]="disabled()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
+        [autocomplete]="autocompleteAttr()"
         (blur)="onTouched()"
         (input)="onInput($event)"
       />
@@ -536,6 +729,326 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 
+class InputLookupComponent extends FormControlBase {
+    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();
+    /*
+     * The provided hint will be displayed when asynchronous lookup is empty.
+     */
+    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);
+    _activeIndex = signal(-1);
+    activeIndex = this._activeIndex.asReadonly();
+    _searchQuery = signal('');
+    _isInteractingWithOptions = signal(false);
+    _searchQuery$ = toObservable(this._searchQuery);
+    isOpen = signal(false);
+    openUpwards = signal(false);
+    displayLabel = computed(() => {
+        const selected = this.behavior.selectedOption();
+        if (selected) {
+            return selected.label;
+        }
+        return this._searchQuery();
+    });
+    inputElement = inject((ElementRef));
+    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.updateOptions(currentOptions);
+        });
+        effect(() => {
+            const selectedOption = this.behavior.selectedOption();
+            this.onChange(selectedOption?.value ?? null);
+        });
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.behavior.setupFilteredOptions(this._searchQuery$, this._searchQuery);
+        this.behavior.setupOptionsProvider(this._searchQuery$, 500, 2);
+    }
+    writeValue(value) {
+        super.writeValue(value);
+        this.behavior.selectedMatchedOption(value);
+    }
+    onFocusOut() {
+        super.onFocusOut();
+        if (this._isInteractingWithOptions()) {
+            return;
+        }
+        this.isOpen.set(false);
+    }
+    onFocusIn() {
+        super.onFocusIn();
+        if (!this.behavior.selectedOption()) {
+            this.calculateDropdownPosition();
+            this.isOpen.set(true);
+        }
+    }
+    ngOnDestroy() {
+        this.behavior.optionsUpdated$.complete();
+    }
+    onInput(event) {
+        this._searchQuery.set(event.target.value);
+    }
+    selectOption(event, option) {
+        this.behavior.selectOption(event, option);
+        this._isInteractingWithOptions.set(false);
+        this.isOpen.set(false);
+    }
+    resetActiveIndex() {
+        this._activeIndex.set(-1);
+    }
+    setOptionsInteraction(state) {
+        this._isInteractingWithOptions.set(state);
+    }
+    updateOptions(results, status) {
+        this.behavior.updateOptions(results, status);
+        this.resetActiveIndex();
+    }
+    clearSelectedOption() {
+        this._searchQuery.set('');
+        this.behavior.clearSelectedOption();
+        this.focus();
+    }
+    onKeyDown(event, currentOptions) {
+        if (!this.isOpen() || !currentOptions || currentOptions.length === 0) {
+            if (event.key === 'ArrowDown') {
+                this.calculateDropdownPosition();
+                this.isOpen.set(true);
+                event.preventDefault();
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this._activeIndex.update((prev) => prev + 1 >= currentOptions.length ? 0 : prev + 1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this._activeIndex.update((prev) => prev - 1 < 0 ? currentOptions.length - 1 : prev - 1);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this._activeIndex() >= 0 &&
+                    this._activeIndex() < currentOptions.length) {
+                    this.selectOption(event, currentOptions[this._activeIndex()]);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.isOpen.set(false);
+                this.resetActiveIndex();
+                break;
+            case 'Backspace':
+            case 'Delete':
+                if (this.behavior.selectedOption() !== null) {
+                    event.preventDefault();
+                    this.clearSelectedOption();
+                }
+                break;
+        }
+    }
+    calculateDropdownPosition() {
+        const rect = this.inputElement.nativeElement.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        this.openUpwards.set(spaceBelow < 225 && spaceAbove > spaceBelow);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputLookupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: InputLookupComponent, isStandalone: true, selector: "nmf-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: ["nmfLookup"], usesInheritance: true, ngImport: i0, template: `
+    <nmf-form-field
+      [label]="label()"
+      [hint]="behavior.status() === 'empty' ? emptyOptionsLabel() : null"
+      [isRequired]="isRequired()"
+      [loading]="behavior.status() === 'loading' || loading()"
+      [errorMessage]="errorMessage()"
+    >
+      <div class="nmf-input-wrapper" [style.position]="'relative'">
+        @if ({ options: behavior.filteredOptions | async }; as stream) {
+          <input
+            #focusable
+            type="text"
+            class="nmf-input"
+            [attr.list]="id + '-options'"
+            [ngClass]="classList()"
+            [class.error]="hasErrors()"
+            [class.disabled]="disabled()"
+            [style.cursor]="
+              behavior.selectedOption() != null ? 'not-allowed' : 'text'
+            "
+            [id]="id()"
+            [name]="name()"
+            [value]="displayLabel()"
+            [disabled]="disabled()"
+            [required]="isRequired()"
+            [readonly]="behavior.selectedOption() != null"
+            [placeholder]="placeholder()"
+            [autocomplete]="autocompleteAttr()"
+            (blur)="onFocusOut()"
+            (focus)="onFocusIn()"
+            (input)="onInput($event)"
+            (keydown)="onKeyDown($event, stream.options)"
+          />
+
+          @if (isOpen() && stream.options && stream.options.length > 0) {
+            <ul
+              class="nmf-options-list"
+              [class.upward]="openUpwards()"
+              (pointerdown)="setOptionsInteraction(true)"
+              (pointerup)="setOptionsInteraction(false)"
+            >
+              @for (option of stream.options; track option; let i = $index) {
+                <li
+                  [class.selected]="behavior.selectedOption() == option"
+                  [class.active]="activeIndex() === i"
+                  (click)="selectOption($event, option)"
+                >
+                  {{
+                    displayWith() ? displayWith()!(option.value) : option.label
+                  }}
+                </li>
+              }
+            </ul>
+          }
+
+          @if (behavior.selectedOption() && !disabled()) {
+            <button
+              class="nmf-clear-button"
+              type="button"
+              aria-label="Clear selection"
+              (click)="clearSelectedOption()"
+            >
+              X
+            </button>
+          }
+        }
+      </div>
+    </nmf-form-field>
+  `, 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: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputLookupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nmf-lookup',
+                    exportAs: 'nmfLookup',
+                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent, AsyncPipe],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <nmf-form-field
+      [label]="label()"
+      [hint]="behavior.status() === 'empty' ? emptyOptionsLabel() : null"
+      [isRequired]="isRequired()"
+      [loading]="behavior.status() === 'loading' || loading()"
+      [errorMessage]="errorMessage()"
+    >
+      <div class="nmf-input-wrapper" [style.position]="'relative'">
+        @if ({ options: behavior.filteredOptions | async }; as stream) {
+          <input
+            #focusable
+            type="text"
+            class="nmf-input"
+            [attr.list]="id + '-options'"
+            [ngClass]="classList()"
+            [class.error]="hasErrors()"
+            [class.disabled]="disabled()"
+            [style.cursor]="
+              behavior.selectedOption() != null ? 'not-allowed' : 'text'
+            "
+            [id]="id()"
+            [name]="name()"
+            [value]="displayLabel()"
+            [disabled]="disabled()"
+            [required]="isRequired()"
+            [readonly]="behavior.selectedOption() != null"
+            [placeholder]="placeholder()"
+            [autocomplete]="autocompleteAttr()"
+            (blur)="onFocusOut()"
+            (focus)="onFocusIn()"
+            (input)="onInput($event)"
+            (keydown)="onKeyDown($event, stream.options)"
+          />
+
+          @if (isOpen() && stream.options && stream.options.length > 0) {
+            <ul
+              class="nmf-options-list"
+              [class.upward]="openUpwards()"
+              (pointerdown)="setOptionsInteraction(true)"
+              (pointerup)="setOptionsInteraction(false)"
+            >
+              @for (option of stream.options; track option; let i = $index) {
+                <li
+                  [class.selected]="behavior.selectedOption() == option"
+                  [class.active]="activeIndex() === i"
+                  (click)="selectOption($event, option)"
+                >
+                  {{
+                    displayWith() ? displayWith()!(option.value) : option.label
+                  }}
+                </li>
+              }
+            </ul>
+          }
+
+          @if (behavior.selectedOption() && !disabled()) {
+            <button
+              class="nmf-clear-button"
+              type="button"
+              aria-label="Clear selection"
+              (click)="clearSelectedOption()"
+            >
+              X
+            </button>
+          }
+        }
+      </div>
+    </nmf-form-field>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
 class InputNumberComponent extends FormControlBase {
     formatValue = input(false);
     displayValue = signal('');
@@ -564,8 +1077,8 @@ class InputNumberComponent extends FormControlBase {
             this.displayValue.set(value != null ? String(value) : '');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputNumberComponent, isStandalone: true, selector: "nmf-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: InputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.25", type: InputNumberComponent, isStandalone: true, selector: "nmf-number", inputs: { formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
     <nmf-form-field
       [label]="label()"
       [isRequired]="isRequired()"
@@ -573,7 +1086,7 @@ class InputNumberComponent extends FormControlBase {
       [errorMessage]="errorMessage()"
     >
       <input
-        autocomplete="off"
+        #focusable
         class="nmf-input"
         [ngClass]="classList()"
         [class.error]="hasErrors()"
@@ -585,14 +1098,15 @@ class InputNumberComponent extends FormControlBase {
         [disabled]="disabled()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
+        [autocomplete]="autocompleteAttr()"
         (blur)="onTouched()"
         (input)="onInput($event)"
         (keydown)="handleKeyDown($event)"
       />
     </nmf-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-number',
@@ -607,7 +1121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
       [errorMessage]="errorMessage()"
     >
       <input
-        autocomplete="off"
+        #focusable
         class="nmf-input"
         [ngClass]="classList()"
         [class.error]="hasErrors()"
@@ -619,6 +1133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         [disabled]="disabled()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
+        [autocomplete]="autocompleteAttr()"
         (blur)="onTouched()"
         (input)="onInput($event)"
         (keydown)="handleKeyDown($event)"
@@ -631,9 +1146,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 class InputSelectComponent extends FormControlBase {
     options = input([]);
     emptyOptionLabel = input('Select an option');
-    clearOptionLabel = input('Clear selection');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputSelectComponent, isStandalone: true, selector: "nmf-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 } }, usesInheritance: true, ngImport: i0, template: `
+    allowEmptyOptionSelection = input(false);
+    handleChange(event) {
+        if (this._disabledByCva())
+            return;
+        const input = event.target;
+        this.onChange(input.value || null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: InputSelectComponent, isStandalone: true, selector: "nmf-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 } }, usesInheritance: true, ngImport: i0, template: `
     <nmf-form-field
       [label]="label()"
       [isRequired]="isRequired()"
@@ -642,38 +1163,36 @@ class InputSelectComponent extends FormControlBase {
     >
       <div class="select-wrapper" [class.disabled]="disabled()">
         <select
+          #focusable
           class="nmf-input"
           [ngClass]="classList()"
           [class.error]="hasErrors()"
           [class.disabled]="disabled()"
+          [id]="id()"
+          [value]="value ?? ''"
+          [disabled]="disabled()"
           [required]="isRequired()"
-          [formControl]="formControl"
+          [autocomplete]="autocompleteAttr()"
           (blur)="onTouched()"
+          (change)="handleChange($event)"
         >
           <!-- Empty option -->
-          <option [ngValue]="null" disabled>
+          <option [value]="''" [disabled]="!allowEmptyOptionSelection()">
             {{ emptyOptionLabel() }}
           </option>
 
           <!-- Options -->
-          @for (option of options(); track option.key) {
-            <option [ngValue]="option.key" [disabled]="option.disabled">
+          @for (option of options(); track option.value) {
+            <option [value]="option.value" [disabled]="option.disabled">
               {{ option.label }}
             </option>
           }
-
-          <!-- Clear option -->
-          @if (clearOptionLabel()) {
-            <option [ngValue]="null">
-              {{ clearOptionLabel() }}
-            </option>
-          }
         </select>
       </div>
     </nmf-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-select',
@@ -689,32 +1208,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
     >
       <div class="select-wrapper" [class.disabled]="disabled()">
         <select
+          #focusable
           class="nmf-input"
           [ngClass]="classList()"
           [class.error]="hasErrors()"
           [class.disabled]="disabled()"
+          [id]="id()"
+          [value]="value ?? ''"
+          [disabled]="disabled()"
           [required]="isRequired()"
-          [formControl]="formControl"
+          [autocomplete]="autocompleteAttr()"
           (blur)="onTouched()"
+          (change)="handleChange($event)"
         >
           <!-- Empty option -->
-          <option [ngValue]="null" disabled>
+          <option [value]="''" [disabled]="!allowEmptyOptionSelection()">
             {{ emptyOptionLabel() }}
           </option>
 
           <!-- Options -->
-          @for (option of options(); track option.key) {
-            <option [ngValue]="option.key" [disabled]="option.disabled">
+          @for (option of options(); track option.value) {
+            <option [value]="option.value" [disabled]="option.disabled">
               {{ option.label }}
             </option>
           }
-
-          <!-- Clear option -->
-          @if (clearOptionLabel()) {
-            <option [ngValue]="null">
-              {{ clearOptionLabel() }}
-            </option>
-          }
         </select>
       </div>
     </nmf-form-field>
@@ -728,8 +1245,14 @@ class InputTextComponent extends FormControlBase {
     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: InputTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputTextComponent, isStandalone: true, selector: "nmf-text", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    onInput(event) {
+        if (this._disabledByInput())
+            return;
+        const input = event.target;
+        this.onChange(input.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: InputTextComponent, isStandalone: true, selector: "nmf-text", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
     <nmf-form-field
       [label]="label()"
       [isRequired]="isRequired()"
@@ -738,6 +1261,7 @@ class InputTextComponent extends FormControlBase {
     >
       <div class="nmf-input-wrapper">
         <input
+          #focusable
           class="nmf-input"
           [ngClass]="classList()"
           [class.error]="hasErrors()"
@@ -745,10 +1269,13 @@ class InputTextComponent extends FormControlBase {
           [id]="id()"
           [name]="name()"
           [type]="computedType()"
+          [value]="value"
+          [disabled]="disabled()"
           [required]="isRequired()"
           [placeholder]="placeholder()"
-          [formControl]="formControl"
+          [autocomplete]="autocompleteAttr()"
           (blur)="onTouched()"
+          (input)="onInput($event)"
         />
 
         @if (type() === 'password' && !loading() && !disabled()) {
@@ -802,9 +1329,9 @@ class InputTextComponent extends FormControlBase {
         />
       </svg>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-text',
@@ -820,6 +1347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
     >
       <div class="nmf-input-wrapper">
         <input
+          #focusable
           class="nmf-input"
           [ngClass]="classList()"
           [class.error]="hasErrors()"
@@ -827,10 +1355,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
           [id]="id()"
           [name]="name()"
           [type]="computedType()"
+          [value]="value"
+          [disabled]="disabled()"
           [required]="isRequired()"
           [placeholder]="placeholder()"
-          [formControl]="formControl"
+          [autocomplete]="autocompleteAttr()"
           (blur)="onTouched()"
+          (input)="onInput($event)"
         />
 
         @if (type() === 'password' && !loading() && !disabled()) {
@@ -891,8 +1422,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 class InputTextareaComponent extends FormControlBase {
     rows = input(5);
     cols = input(5);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputTextareaComponent, isStandalone: true, selector: "nmf-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) {
+        if (this._disabledByInput())
+            return;
+        const input = event.target;
+        this.onChange(input.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.25", type: InputTextareaComponent, isStandalone: true, selector: "nmf-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: `
     <nmf-form-field
       [label]="label()"
       [isRequired]="isRequired()"
@@ -900,6 +1437,7 @@ class InputTextareaComponent extends FormControlBase {
       [errorMessage]="errorMessage()"
     >
       <textarea
+        #focusable
         class="nmf-input"
         [ngClass]="classList()"
         [class.error]="hasErrors()"
@@ -907,15 +1445,18 @@ class InputTextareaComponent extends FormControlBase {
         [id]="id()"
         [rows]="rows()"
         [cols]="cols()"
+        [value]="value"
+        [disabled]="disabled()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
-        [formControl]="formControl"
+        [autocomplete]="autocompleteAttr()"
         (blur)="onTouched()"
+        (input)="onInput($event)"
       ></textarea>
     </nmf-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputTextareaComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-textarea',
@@ -930,6 +1471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
       [errorMessage]="errorMessage()"
     >
       <textarea
+        #focusable
         class="nmf-input"
         [ngClass]="classList()"
         [class.error]="hasErrors()"
@@ -937,10 +1479,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         [id]="id()"
         [rows]="rows()"
         [cols]="cols()"
+        [value]="value"
+        [disabled]="disabled()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
-        [formControl]="formControl"
+        [autocomplete]="autocompleteAttr()"
         (blur)="onTouched()"
+        (input)="onInput($event)"
       ></textarea>
     </nmf-form-field>
   `,
@@ -979,8 +1524,8 @@ class InputTimepickerComponent extends FormControlBase {
         this.displayValue.set(this.formatTime(parsed) ?? '');
         this.onChange(parsed);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTimepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputTimepickerComponent, isStandalone: true, selector: "nmf-timepicker", inputs: { step: { classPropertyName: "step", publicName: "step", 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: InputTimepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.25", type: InputTimepickerComponent, isStandalone: true, selector: "nmf-timepicker", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
     <nmf-form-field
       [label]="label()"
       [isRequired]="isRequired()"
@@ -988,8 +1533,8 @@ class InputTimepickerComponent extends FormControlBase {
       [errorMessage]="errorMessage()"
     >
       <input
+        #focusable
         type="time"
-        autocomplete="off"
         class="nmf-input"
         [ngClass]="classList()"
         [class.error]="hasErrors()"
@@ -1001,13 +1546,14 @@ class InputTimepickerComponent extends FormControlBase {
         [disabled]="disabled()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
+        [autocomplete]="autocompleteAttr()"
         (blur)="onTouched()"
         (input)="onInput($event)"
       />
     </nmf-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputTimepickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-timepicker',
@@ -1022,8 +1568,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
       [errorMessage]="errorMessage()"
     >
       <input
+        #focusable
         type="time"
-        autocomplete="off"
         class="nmf-input"
         [ngClass]="classList()"
         [class.error]="hasErrors()"
@@ -1035,6 +1581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         [disabled]="disabled()"
         [required]="isRequired()"
         [placeholder]="placeholder()"
+        [autocomplete]="autocompleteAttr()"
         (blur)="onTouched()"
         (input)="onInput($event)"
       />
@@ -1069,10 +1616,10 @@ class FormHydrator {
             control.patchValue(value, { emitEvent: false });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormHydrator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormHydrator, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormHydrator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormHydrator, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormHydrator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormHydrator, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1092,10 +1639,10 @@ class FormSerializer {
         });
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormSerializer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormSerializer, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormSerializer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormSerializer, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormSerializer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormSerializer, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1172,10 +1719,10 @@ class FormOrchestrator extends FormMapperBase {
     ngOnDestroy() {
         this._logicSubscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormOrchestrator, deps: [{ token: FormHydrator }, { token: FormSerializer }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: FormOrchestrator, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormOrchestrator, deps: [{ token: FormHydrator }, { token: FormSerializer }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: FormOrchestrator, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormOrchestrator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormOrchestrator, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: FormHydrator }, { type: FormSerializer }] });
 
@@ -1187,5 +1734,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CurrencyBehavior, FormControlBase, FormHandlerBase, FormHydrator, FormMapperBase, FormOrchestrator, FormSerializer, InputCurrencyComponent, InputDatepickerComponent, InputNumberComponent, InputSelectComponent, InputTextComponent, InputTextareaComponent, InputTimepickerComponent, TextBehavior, formatNumber, getControl, getControlValue, parseNumber };
+export { CurrencyBehavior, FormControlBase, FormHandlerBase, FormHydrator, FormMapperBase, FormOrchestrator, FormSerializer, InputCurrencyComponent, InputDatepickerComponent, InputLookupComponent, InputNumberComponent, InputSelectComponent, InputTextComponent, InputTextareaComponent, InputTimepickerComponent, LookupBehavior, TextBehavior, formatNumber, getControl, getControlValue, parseNumber };
 //# sourceMappingURL=ng-modular-forms-core.mjs.map