@koobiq/components 19.8.3 → 20.1.0

package/fesm2022/koobiq-components-input.mjs

@@ -1,15 +1,12 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { getSupportedInputTypes } from '@angular/cdk/platform';
 import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, booleanAttribute, Input, Attribute, Optional, Inject, Directive, InjectionToken, inject, Self, NgModule } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, FormsModule } from '@angular/forms';
-import * as i3 from '@koobiq/components/core';
-import { ruRUFormattersData, KBQ_DEFAULT_PRECISION_SEPARATOR, normalizeNumber, checkAndNormalizeLocalizedNumber, formatNumberWithLocale, KBQ_LOCALE_SERVICE, KBQ_VALIDATION } from '@koobiq/components/core';
+import { forwardRef, inject, ElementRef, Renderer2, EventEmitter, input, booleanAttribute, HostAttributeToken, Input, Directive, InjectionToken, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NgControl, NgForm, FormGroupDirective, NG_VALIDATORS, Validators, FormsModule } from '@angular/forms';
+import { ruRUFormattersData, KBQ_DEFAULT_PRECISION_SEPARATOR, KBQ_LOCALE_SERVICE, V, X, Z, NUMPAD_MINUS, DASH, FF_MINUS, DELETE, BACKSPACE, TAB, ESCAPE, ENTER, LEFT_ARROW, RIGHT_ARROW, HOME, END, normalizeNumber, isSelectAll, isCopy, isFunctionKey, isNumberKey, isNumpadKey, UP_ARROW, DOWN_ARROW, checkAndNormalizeLocalizedNumber, formatNumberWithLocale, ErrorStateMatcher } from '@koobiq/components/core';
 import { KbqFormFieldControl, KbqFormFieldModule } from '@koobiq/components/form-field';
 import { Subject } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { V, X, Z, NUMPAD_MINUS, DASH, FF_MINUS, DELETE, BACKSPACE, TAB, ESCAPE, ENTER, LEFT_ARROW, RIGHT_ARROW, HOME, END, isSelectAll, isCopy, isFunctionKey, isNumberKey, isNumpadKey, UP_ARROW, DOWN_ARROW } from '@koobiq/cdk/keycodes';
 import { A11yModule } from '@angular/cdk/a11y';
 import { KbqIconModule } from '@koobiq/components/icon';
 
@@ -46,6 +43,8 @@ const KBQ_NUMBER_INPUT_VALUE_ACCESSOR = {
     multi: true
 };
 class KbqNumberInput {
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get value() {
         return this._value;
     }
@@ -57,6 +56,8 @@ class KbqNumberInput {
             this.valueChange.emit(value);
         }
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         return this._disabled;
     }
@@ -90,10 +91,10 @@ class KbqNumberInput {
     get groupSeparator() {
         return this.config.groupSeparator;
     }
-    constructor(elementRef, renderer, step, bigStep, min, max, localeService) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.localeService = localeService;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
         /** Emits when the value changes (either due to user input or programmatic change). */
         this.valueChange = new EventEmitter();
         /** Emits when the disabled state has changed */
@@ -102,8 +103,12 @@ class KbqNumberInput {
         /**
          * Allows input and pasting of integers only.
          */
-        this.integer = false;
-        this.withThousandSeparator = true;
+        this.integer = input(false, ...(ngDevMode ? [{ debugName: "integer", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.withThousandSeparator = input(true, ...(ngDevMode ? [{ debugName: "withThousandSeparator", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Include thousand separator from custom index. For example, it will be useful in tables.
+         */
+        this.startFormattingFrom = input(...(ngDevMode ? [undefined, { debugName: "startFormattingFrom" }] : []));
         this._disabled = false;
         this.focused = false;
         this.onTouched = () => { };
@@ -125,6 +130,11 @@ class KbqNumberInput {
             this.config = this.localeService.getParams('input').number;
             this.setViewValue(this.formatNumber(this.value));
         };
+        const step = inject(new HostAttributeToken('step'), { optional: true });
+        const bigStep = inject(new HostAttributeToken('big-step'), { optional: true });
+        const min = inject(new HostAttributeToken('min'), { optional: true });
+        const max = inject(new HostAttributeToken('max'), { optional: true });
+        const localeService = this.localeService;
         this.step = isDigit(step) ? parseFloat(step) : SMALL_STEP;
         this.bigStep = isDigit(bigStep) ? parseFloat(bigStep) : BIG_STEP;
         this.min = isDigit(min) ? parseFloat(min) : -Infinity;
@@ -184,7 +194,7 @@ class KbqNumberInput {
         const allowedKeys = [HOME, END].concat(arrows).concat(serviceKeys).concat(minuses);
         // should parse normalized fractionSeparator
         const viewValueToBeChecked = normalizeNumber(this.viewValue, this.config);
-        const shouldSkipForIntegerMode = this.integer && this.isPeriod(event);
+        const shouldSkipForIntegerMode = this.integer() && this.isPeriod(event);
         const isMinusAllowed = minuses.includes(keyCode) && (this.viewValue.includes(event.key) || this.min >= 0);
         const isSignAndFractionSepAlreadyExists = this.isPeriod(event) &&
             [this.fractionSeparator, KBQ_DEFAULT_PRECISION_SEPARATOR].includes(event.key) &&
@@ -231,7 +241,7 @@ class KbqNumberInput {
             else {
                 /*this.viewValue is raw and should be reformatted to localized number */
                 formattedValue = this.formatViewValue();
-                if (this.withThousandSeparator) {
+                if (this.withThousandSeparator()) {
                     const offsetWhenSeparatorAdded = 2;
                     Promise.resolve().then(() => {
                         if (this.value &&
@@ -256,7 +266,7 @@ class KbqNumberInput {
         if (this.valueFromPaste === null || isNaN(this.valueFromPaste)) {
             event.preventDefault();
         }
-        else if (this.integer && isFloat(this.valueFromPaste.toString())) {
+        else if (this.integer() && isFloat(this.valueFromPaste.toString())) {
             event.preventDefault();
             const parsedValue = Number.parseInt(this.valueFromPaste.toString());
             this.setViewValue(this.formatNumber(parsedValue));
@@ -322,10 +332,10 @@ class KbqNumberInput {
     }
     createLocalizedNumberFromParts(intPart, fractionPart) {
         const formatOptions = {
-            useGrouping: this.withThousandSeparator,
+            useGrouping: this.withThousandSeparator(),
             maximumFractionDigits: 20
         };
-        if (this.withThousandSeparator && this.config.startFormattingFrom) {
+        if (this.withThousandSeparator() && this.config.startFormattingFrom) {
             formatOptions.useGrouping = intPart >= Math.pow(10, this.config.startFormattingFrom);
         }
         const localeId = !this.localeService || this.localeService.id === 'es-LA' ? 'ru-RU' : this.localeService.id;
@@ -340,14 +350,13 @@ class KbqNumberInput {
         }
         return `${formattedIntPart}${this.fractionSeparator}${formattedFractionPart}`;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNumberInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: 'step', attribute: true }, { token: 'big-step', attribute: true }, { token: 'min', attribute: true }, { token: 'max', attribute: true }, { token: KBQ_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: KbqNumberInput, isStandalone: true, selector: "input[kbqNumberInput]", inputs: { integer: ["integer", "integer", booleanAttribute], bigStep: "bigStep", step: "step", min: "min", max: "max", withThousandSeparator: ["withThousandSeparator", "withThousandSeparator", booleanAttribute], startFormattingFrom: "startFormattingFrom", value: "value", disabled: "disabled" }, host: { listeners: { "blur": "focusChanged(false)", "focus": "focusChanged(true)", "paste": "onPaste($event)", "keydown": "onKeyDown($event)", "input": "onInput($event)" } }, providers: [KBQ_NUMBER_INPUT_VALUE_ACCESSOR], exportAs: ["kbqNumericalInput"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNumberInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqNumberInput, isStandalone: true, selector: "input[kbqNumberInput]", inputs: { integer: { classPropertyName: "integer", publicName: "integer", isSignal: true, isRequired: false, transformFunction: null }, bigStep: { classPropertyName: "bigStep", publicName: "bigStep", isSignal: false, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, withThousandSeparator: { classPropertyName: "withThousandSeparator", publicName: "withThousandSeparator", isSignal: true, isRequired: false, transformFunction: null }, startFormattingFrom: { classPropertyName: "startFormattingFrom", publicName: "startFormattingFrom", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "blur": "focusChanged(false)", "focus": "focusChanged(true)", "paste": "onPaste($event)", "keydown": "onKeyDown($event)", "input": "onInput($event)" } }, providers: [KBQ_NUMBER_INPUT_VALUE_ACCESSOR], exportAs: ["kbqNumericalInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNumberInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNumberInput, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[kbqNumberInput]`,
-                    exportAs: 'kbqNumericalInput',
                     providers: [KBQ_NUMBER_INPUT_VALUE_ACCESSOR],
                     host: {
                         '(blur)': 'focusChanged(false)',
@@ -355,29 +364,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '(paste)': 'onPaste($event)',
                         '(keydown)': 'onKeyDown($event)',
                         '(input)': 'onInput($event)'
-                    }
+                    },
+                    exportAs: 'kbqNumericalInput'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['step']
-                }] }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['big-step']
-                }] }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['min']
-                }] }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['max']
-                }] }, { type: i3.KbqLocaleService, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_LOCALE_SERVICE]
-                }] }], propDecorators: { integer: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], bigStep: [{
+        }], ctorParameters: () => [], propDecorators: { integer: [{ type: i0.Input, args: [{ isSignal: true, alias: "integer", required: false }] }], bigStep: [{
                 type: Input
             }], step: [{
                 type: Input
@@ -385,12 +375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Input
             }], max: [{
                 type: Input
-            }], withThousandSeparator: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], startFormattingFrom: [{
-                type: Input
-            }], value: [{
+            }], withThousandSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "withThousandSeparator", required: false }] }], startFormattingFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "startFormattingFrom", required: false }] }], value: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -415,6 +400,8 @@ class KbqInput {
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         if (this.ngControl && this.ngControl.disabled !== null) {
             return this.ngControl.disabled;
@@ -434,6 +421,8 @@ class KbqInput {
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get id() {
         return this._id;
     }
@@ -444,6 +433,8 @@ class KbqInput {
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get required() {
         return this._required;
     }
@@ -451,6 +442,8 @@ class KbqInput {
         this._required = coerceBooleanProperty(value);
     }
     /** Input type of the element. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get type() {
         return this._type;
     }
@@ -468,6 +461,8 @@ class KbqInput {
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get value() {
         return this.inputValueAccessor.value;
     }
@@ -477,14 +472,13 @@ class KbqInput {
             this.stateChanges.next();
         }
     }
-    constructor(elementRef, ngControl, numberInput, parentForm, parentFormGroup, defaultErrorStateMatcher, inputValueAccessor) {
-        this.elementRef = elementRef;
-        this.ngControl = ngControl;
-        this.numberInput = numberInput;
-        this.parentForm = parentForm;
-        this.parentFormGroup = parentFormGroup;
-        this.defaultErrorStateMatcher = defaultErrorStateMatcher;
-        this.useLegacyValidation = inject(KBQ_VALIDATION, { optional: true })?.useValidation ?? false;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.ngControl = inject(NgControl, { optional: true, self: true });
+        this.numberInput = inject(KbqNumberInput, { optional: true, self: true });
+        this.parentForm = inject(NgForm, { optional: true });
+        this.parentFormGroup = inject(FormGroupDirective, { optional: true });
+        this.defaultErrorStateMatcher = inject(ErrorStateMatcher);
         /** Whether the component is in an error state. */
         this.errorState = false;
         /**
@@ -514,6 +508,7 @@ class KbqInput {
         this._disabled = false;
         this._required = false;
         this._type = 'text';
+        const inputValueAccessor = inject(KBQ_INPUT_VALUE_ACCESSOR, { optional: true, self: true });
         // If no input value accessor was explicitly specified, use the element as the input value accessor.
         this.inputValueAccessor = inputValueAccessor || this.elementRef.nativeElement;
         this.previousNativeValue = this.value;
@@ -555,11 +550,6 @@ class KbqInput {
     }
     onBlur() {
         this.focusChanged(false);
-        if (this.useLegacyValidation && this.ngControl?.control) {
-            const control = this.ngControl.control;
-            control.updateValueAndValidity({ emitEvent: false });
-            control.statusChanges.emit(control.status);
-        }
     }
     /** Callback for the cases where the focused state of the input changes. */
     focusChanged(isFocused) {
@@ -606,19 +596,24 @@ class KbqInput {
         const validity = this.elementRef.nativeElement.validity;
         return validity?.badInput;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqInput, deps: [{ token: i0.ElementRef }, { token: i1.NgControl, optional: true, self: true }, { token: KbqNumberInput, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i3.ErrorStateMatcher }, { token: KBQ_INPUT_VALUE_ACCESSOR, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqInput, isStandalone: true, selector: "input[kbqInput],input[kbqNumberInput]", inputs: { errorStateMatcher: "errorStateMatcher", placeholder: "placeholder", disabled: "disabled", id: "id", required: "required", type: "type", value: "value" }, host: { listeners: { "blur": "onBlur()", "focus": "focusChanged(true)" }, properties: { "attr.id": "id", "attr.placeholder": "placeholder", "attr.disabled": "disabled || null", "required": "required" }, classAttribute: "kbq-input" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqInput, isStandalone: true, selector: "input[kbqInput],input[kbqNumberInput]", inputs: { errorStateMatcher: "errorStateMatcher", placeholder: "placeholder", disabled: "disabled", id: "id", required: "required", type: "type", value: "value" }, host: { listeners: { "blur": "onBlur()", "focus": "focusChanged(true)" }, properties: { "attr.id": "id", "attr.placeholder": "placeholder", "attr.disabled": "disabled || null", "required": "required" }, classAttribute: "kbq-input" }, providers: [
             {
                 provide: KbqFormFieldControl,
                 useExisting: KbqInput
             }
         ], exportAs: ["kbqInput"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqInput, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[kbqInput],input[kbqNumberInput]`,
-                    exportAs: 'kbqInput',
+                    providers: [
+                        {
+                            provide: KbqFormFieldControl,
+                            useExisting: KbqInput
+                        }
+                    ],
                     host: {
                         class: 'kbq-input',
                         // Native input properties that are overwritten by Angular inputs need to be synced with
@@ -630,33 +625,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '(blur)': 'onBlur()',
                         '(focus)': 'focusChanged(true)'
                     },
-                    providers: [
-                        {
-                            provide: KbqFormFieldControl,
-                            useExisting: KbqInput
-                        }
-                    ]
+                    exportAs: 'kbqInput'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: KbqNumberInput, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i1.NgForm, decorators: [{
-                    type: Optional
-                }] }, { type: i1.FormGroupDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i3.ErrorStateMatcher }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }, {
-                    type: Inject,
-                    args: [KBQ_INPUT_VALUE_ACCESSOR]
-                }] }], propDecorators: { errorStateMatcher: [{
+        }], ctorParameters: () => [], propDecorators: { errorStateMatcher: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -672,15 +643,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Input
             }] } });
 class KbqInputMono {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqInputMono, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqInputMono, isStandalone: true, selector: "input[kbqInputMonospace]", host: { classAttribute: "kbq-input_monospace" }, exportAs: ["KbqInputMonospace"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqInputMono, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqInputMono, isStandalone: true, selector: "input[kbqInputMonospace]", host: { classAttribute: "kbq-input_monospace" }, exportAs: ["KbqInputMonospace"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqInputMono, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqInputMono, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kbqInputMonospace]',
-                    exportAs: 'KbqInputMonospace',
-                    host: { class: 'kbq-input_monospace' }
+                    host: { class: 'kbq-input_monospace' },
+                    exportAs: 'KbqInputMonospace'
                 }]
         }] });
 
@@ -694,6 +665,9 @@ const MIN_VALIDATOR = {
  * `formControl`, or control with `ngModel` that also has a `min` attribute.
  */
 class MinValidator {
+    constructor() {
+        this.min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    }
     ngOnChanges(changes) {
         if ('min' in changes) {
             this.createValidator();
@@ -709,23 +683,21 @@ class MinValidator {
         this.onChange = fn;
     }
     createValidator() {
-        this.validator = Validators.min(parseInt(this.min, 10));
+        this.validator = Validators.min(parseInt(this.min(), 10));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MinValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: MinValidator, isStandalone: true, selector: "[min][formControlName],[min][formControl],[min][ngModel]", inputs: { min: "min" }, host: { properties: { "attr.min": "min ? min : null" } }, providers: [MIN_VALIDATOR], usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MinValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: MinValidator, isStandalone: true, selector: "[min][formControlName],[min][formControl],[min][ngModel]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.min": "min() ? min() : null" } }, providers: [MIN_VALIDATOR], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MinValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MinValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[min][formControlName],[min][formControl],[min][ngModel]',
                     providers: [MIN_VALIDATOR],
                     host: {
-                        '[attr.min]': 'min ? min : null'
+                        '[attr.min]': 'min() ? min() : null'
                     }
                 }]
-        }], propDecorators: { min: [{
-                type: Input
-            }] } });
+        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }] } });
 const MAX_VALIDATOR = {
     provide: NG_VALIDATORS,
     useExisting: forwardRef(() => MaxValidator),
@@ -736,6 +708,9 @@ const MAX_VALIDATOR = {
  * `formControl`, or control with `ngModel` that also has a `min` attribute.
  */
 class MaxValidator {
+    constructor() {
+        this.max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    }
     ngOnChanges(changes) {
         if ('max' in changes) {
             this.createValidator();
@@ -751,23 +726,21 @@ class MaxValidator {
         this.onChange = fn;
     }
     createValidator() {
-        this.validator = Validators.max(parseInt(this.max, 10));
+        this.validator = Validators.max(parseInt(this.max(), 10));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MaxValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: MaxValidator, isStandalone: true, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: { max: "max" }, host: { properties: { "attr.max": "max ? max : null" } }, providers: [MAX_VALIDATOR], usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MaxValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: MaxValidator, isStandalone: true, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.max": "max() ? max() : null" } }, providers: [MAX_VALIDATOR], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MaxValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MaxValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[max][formControlName],[max][formControl],[max][ngModel]',
                     providers: [MAX_VALIDATOR],
                     host: {
-                        '[attr.max]': 'max ? max : null'
+                        '[attr.max]': 'max() ? max() : null'
                     }
                 }]
-        }], propDecorators: { max: [{
-                type: Input
-            }] } });
+        }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
 
 let nextUniqueId = 0;
 class KbqInputPassword {
@@ -775,6 +748,8 @@ class KbqInputPassword {
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         if (this.ngControl && this.ngControl.disabled !== null) {
             return this.ngControl.disabled;
@@ -794,6 +769,8 @@ class KbqInputPassword {
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get id() {
         return this._id;
     }
@@ -804,6 +781,8 @@ class KbqInputPassword {
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get required() {
         return this._required;
     }
@@ -815,6 +794,8 @@ class KbqInputPassword {
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get value() {
         return this._inputValueAccessor.value;
     }
@@ -832,13 +813,12 @@ class KbqInputPassword {
     get empty() {
         return !this.elementRef.nativeElement.value && !this.isBadInput();
     }
-    constructor(elementRef, ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, inputValueAccessor) {
-        this.elementRef = elementRef;
-        this.ngControl = ngControl;
-        this.parentForm = parentForm;
-        this.parentFormGroup = parentFormGroup;
-        this.defaultErrorStateMatcher = defaultErrorStateMatcher;
-        this.useLegacyValidation = inject(KBQ_VALIDATION, { optional: true })?.useValidation ?? false;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.ngControl = inject(NgControl, { optional: true, self: true });
+        this.parentForm = inject(NgForm, { optional: true });
+        this.parentFormGroup = inject(FormGroupDirective, { optional: true });
+        this.defaultErrorStateMatcher = inject(ErrorStateMatcher);
         /** Whether the component is in an error state. */
         this.errorState = false;
         /**
@@ -861,6 +841,7 @@ class KbqInputPassword {
         this.uid = `kbq-input-${nextUniqueId++}`;
         this._disabled = false;
         this._required = false;
+        const inputValueAccessor = inject(KBQ_INPUT_VALUE_ACCESSOR, { optional: true, self: true });
         // If no input value accessor was explicitly specified, use the element as the input value
         // accessor.
         this._inputValueAccessor = inputValueAccessor || this.elementRef.nativeElement;
@@ -909,11 +890,6 @@ class KbqInputPassword {
     }
     onBlur() {
         this.focusChanged(false);
-        if (this.useLegacyValidation && this.ngControl?.control) {
-            const control = this.ngControl.control;
-            control.updateValueAndValidity({ emitEvent: false });
-            control.statusChanges.emit(control.status);
-        }
     }
     /** Callback for the cases where the focused state of the input changes. */
     focusChanged(isFocused) {
@@ -951,19 +927,24 @@ class KbqInputPassword {
         // The `validity` property won't be present on platform-server.
         return this.elementRef.nativeElement.validity?.badInput;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqInputPassword, deps: [{ token: i0.ElementRef }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i3.ErrorStateMatcher }, { token: KBQ_INPUT_VALUE_ACCESSOR, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqInputPassword, isStandalone: true, selector: "input[kbqInputPassword]", inputs: { errorStateMatcher: "errorStateMatcher", placeholder: "placeholder", disabled: "disabled", id: "id", required: "required", value: "value" }, host: { listeners: { "blur": "onBlur()", "focus": "focusChanged(true)", "input": "onInput()" }, properties: { "attr.id": "id", "attr.type": "elementType", "attr.placeholder": "placeholder", "attr.disabled": "disabled || null", "required": "required" }, classAttribute: "kbq-input kbq-input-password" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqInputPassword, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqInputPassword, isStandalone: true, selector: "input[kbqInputPassword]", inputs: { errorStateMatcher: "errorStateMatcher", placeholder: "placeholder", disabled: "disabled", id: "id", required: "required", value: "value" }, host: { listeners: { "blur": "onBlur()", "focus": "focusChanged(true)", "input": "onInput()" }, properties: { "attr.id": "id", "attr.type": "elementType", "attr.placeholder": "placeholder", "attr.disabled": "disabled || null", "required": "required" }, classAttribute: "kbq-input kbq-input-password" }, providers: [
             {
                 provide: KbqFormFieldControl,
                 useExisting: KbqInputPassword
             }
         ], exportAs: ["kbqInputPassword"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqInputPassword, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqInputPassword, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[kbqInputPassword]`,
-                    exportAs: 'kbqInputPassword',
+                    providers: [
+                        {
+                            provide: KbqFormFieldControl,
+                            useExisting: KbqInputPassword
+                        }
+                    ],
                     host: {
                         class: 'kbq-input kbq-input-password',
                         // Native input properties that are overwritten by Angular inputs need to be synced with
@@ -977,29 +958,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '(focus)': 'focusChanged(true)',
                         '(input)': 'onInput()'
                     },
-                    providers: [
-                        {
-                            provide: KbqFormFieldControl,
-                            useExisting: KbqInputPassword
-                        }
-                    ]
+                    exportAs: 'kbqInputPassword'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i1.NgForm, decorators: [{
-                    type: Optional
-                }] }, { type: i1.FormGroupDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i3.ErrorStateMatcher }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }, {
-                    type: Inject,
-                    args: [KBQ_INPUT_VALUE_ACCESSOR]
-                }] }], propDecorators: { errorStateMatcher: [{
+        }], ctorParameters: () => [], propDecorators: { errorStateMatcher: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -1014,8 +975,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             }] } });
 
 class KbqInputModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqInputModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqInputModule, imports: [A11yModule,
             FormsModule,
             KbqIconModule,
             KbqInput,
@@ -1030,11 +991,11 @@ class KbqInputModule {
             MinValidator,
             MaxValidator,
             KbqFormFieldModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqInputModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqInputModule, imports: [A11yModule,
             FormsModule,
             KbqIconModule, KbqFormFieldModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqInputModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [