@koobiq/components 20.4.2 → 21.0.0

package/fesm2022/koobiq-components-input.mjs

@@ -1,41 +1,100 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { _IdGenerator, A11yModule } from '@angular/cdk/a11y';
 import { getSupportedInputTypes } from '@angular/cdk/platform';
 import * as i0 from '@angular/core';
-import { forwardRef, inject, ElementRef, Renderer2, EventEmitter, input, booleanAttribute, HostAttributeToken, Input, Directive, InjectionToken, NgModule } from '@angular/core';
+import { InjectionToken, forwardRef, inject, ElementRef, Renderer2, NgZone, DestroyRef, input, booleanAttribute, signal, computed, effect, untracked, Directive, linkedSignal, 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, kbqInjectAutofilled } from '@koobiq/components/core';
+import * as i1 from '@koobiq/components/core';
+import { ruRUFormattersData, kbqLocaleConfigurationOverrideProvider, KBQ_DEFAULT_LOCALE_ID, KBQ_DEFAULT_PRECISION_SEPARATOR, normalizeNumber, KBQ_LOCALE_SERVICE, KbqLocaleOverridesDirective, 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, checkAndNormalizeLocalizedNumber, formatNumberWithLocale, ErrorStateMatcher, KbqErrorStateTracker, kbqInjectAutofilled } from '@koobiq/components/core';
 import { KbqFormFieldControl, KbqFormFieldModule } from '@koobiq/components/form-field';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { Subject } from 'rxjs';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { A11yModule } from '@angular/cdk/a11y';
 import { KbqIconModule } from '@koobiq/components/icon';
 
 function getKbqInputUnsupportedTypeError(inputType) {
     return Error(`Input type "${inputType}" isn't supported by kbqInput.`);
 }
+/**
+ * Logged when `kbqNumberInput` sits on a native number field, which the directive resets to `text`.
+ */
+const KBQ_NUMBER_INPUT_UNSUPPORTED_TYPE_MESSAGE = 'Input type "number" isn\'t supported by kbqNumberInput: the native value sanitizer rejects the ' +
+    'formatted value, blanking the field. The type has been reset to "text".';
 
+/**
+ * @deprecated Use {@link KBQ_INPUT_DEFAULT_LOCALE_CONFIGURATION}, which carries the whole `input`
+ * locale section rather than just its `number` slice. Will be removed in 22.0.0.
+ */
 const KBQ_INPUT_NUMBER_DEFAULT_CONFIGURATION = ruRUFormattersData.input.number;
+/**
+ * Default configuration of `KbqNumberInput`: the whole `input` locale section, of which the number input
+ * reads `number`.
+ */
+const KBQ_INPUT_DEFAULT_LOCALE_CONFIGURATION = ruRUFormattersData.input;
+/** Injection token for providing the default configuration of `KbqNumberInput`. */
+const KBQ_INPUT_LOCALE_CONFIGURATION = new InjectionToken('KbqInputLocaleConfiguration', { factory: () => KBQ_INPUT_DEFAULT_LOCALE_CONFIGURATION });
+/**
+ * Utility provider for `KBQ_INPUT_LOCALE_CONFIGURATION`. Only the values you pass are overridden; the rest
+ * keep following the active locale.
+ */
+const kbqInputLocaleConfigurationProvider = (configuration) => kbqLocaleConfigurationOverrideProvider('input', configuration);
+/**
+ * Default of `bigStep`.
+ *
+ * @docs-private
+ */
 const BIG_STEP = 10;
+/**
+ * Default of `step`.
+ *
+ * @docs-private
+ */
 const SMALL_STEP = 1;
-function normalizeSplitter(value) {
-    return value ? value.replace(/,/g, KBQ_DEFAULT_PRECISION_SEPARATOR) : value;
+/**
+ * The locale id handed to `Intl.NumberFormat`, which is not always the active one.
+ *
+ * `es-LA` is not a real BCP-47 tag — `LA` is the region code for Laos — so what `Intl` makes of it is
+ * up to the ICU data of whatever engine is running: today's Node resolves it to plain `es`, another
+ * build may fall back somewhere else entirely. Pinning it to a tag every ICU build carries is a
+ * deliberate workaround, not a leftover: it takes that variance out of the rendered number. Remove it
+ * only when the locale is renamed to a real tag such as `es-419`.
+ */
+function resolveIntlLocale(localeId) {
+    return !localeId || localeId === 'es-LA' ? KBQ_DEFAULT_LOCALE_ID : localeId;
 }
+/**
+ * Transform for the numeric inputs: coerces the static attribute form (`min="3"`) and anything a
+ * binding produces, falling back to `fallback` for a value that is not a number.
+ */
+const numberAttribute = (fallback) => (value) => coerceNumberProperty(value, fallback);
+/** @docs-private */
 function isFloat(value) {
     return /^-?\d+\.\d+$/.test(value);
 }
-function isInt(value) {
-    return /^-?\d+$/.test(value);
-}
-function isDigit(value) {
-    return isFloat(value) || isInt(value);
+/**
+ * Number of digits after the decimal point. Exponent-aware, so `1e-7` reports `7` rather than the
+ * `0` that reading `'1e-7'.split('.')` would give.
+ */
+function getFractionDigits(value) {
+    const [mantissa, negativeExponent] = value.toString().split(/e-/i);
+    const digits = mantissa.split(KBQ_DEFAULT_PRECISION_SEPARATOR)[1]?.length ?? 0;
+    return negativeExponent ? digits + Number(negativeExponent) : digits;
 }
+/**
+ * Decimal scale of `value`: `10 ** <number of fraction digits>`.
+ *
+ * @docs-private
+ */
 function getPrecision(value) {
-    const arr = value.toString().split(KBQ_DEFAULT_PRECISION_SEPARATOR);
-    return arr.length === 1 ? 1 : Math.pow(10, arr[1].length);
+    return Math.pow(10, getFractionDigits(value));
 }
+/**
+ * Adds two decimal numbers without IEEE-754 drift: both operands are rounded into integer space at
+ * the larger of the two scales, added there, and scaled back.
+ *
+ * @docs-private
+ */
 function add(value1, value2) {
     const precision = Math.max(getPrecision(value1), getPrecision(value2));
-    return (value1 * precision + value2 * precision) / precision;
+    return (Math.round(value1 * precision) + Math.round(value2 * precision)) / precision;
 }
 const KBQ_NUMBER_INPUT_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -43,38 +102,13 @@ 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.
+    /** The numeric value of the field, bound with `[value]` or written by a form control. */
     get value() {
-        return this._value;
-    }
-    set value(value) {
-        const oldValue = this.value;
-        this._value = value;
-        if (oldValue !== value) {
-            this.setViewValue(this.formatNumber(value));
-            this.valueChange.emit(value);
-        }
+        return this.valueState() ?? null;
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Whether the field is disabled, bound with `[disabled]` or set by a form control. */
     get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        const newValue = coerceBooleanProperty(value);
-        const element = this.nativeElement;
-        if (this._disabled !== newValue) {
-            this._disabled = newValue;
-            this.disabledChange.emit(newValue);
-        }
-        // We need to null check the `blur` method, because it's undefined during SSR.
-        if (newValue && element.blur) {
-            // Normally, native input elements automatically blur if they turn disabled. This behavior
-            // is problematic, because it would mean that it triggers another change detection cycle,
-            // which then causes a changed after checked error if the input element was focused before.
-            element.blur();
-        }
+        return this.disabledState();
     }
     get nativeElement() {
         return this.elementRef.nativeElement;
@@ -82,8 +116,19 @@ class KbqNumberInput {
     get viewValue() {
         return this.nativeElement.value;
     }
-    get ngControl() {
-        return this.control;
+    /**
+     * Locale-aware numeric read of the field: parsed straight from `nativeElement.value`, so `"1 234,5"`
+     * reads back as `1234.5` where the native `valueAsNumber` of a `type="text"` input reports `NaN`.
+     * Computed on every read rather than cached off the committed model, so it never lags behind a
+     * keystroke the way `value` can while `onInput`'s reformat is still pending in its `setTimeout(0)` —
+     * safe to read from a consumer's own `(input)` handler. An in-progress `"-"` reads as `null`, same as
+     * an empty field, rather than the last committed number.
+     */
+    get valueAsNumber() {
+        if (this.viewValue === '' || this.viewValue === '-')
+            return null;
+        const parsed = Number(normalizeNumber(this.viewValue, this.config));
+        return Number.isNaN(parsed) ? null : parsed;
     }
     get fractionSeparator() {
         return this.config.fractionSeparator;
@@ -91,31 +136,69 @@ class KbqNumberInput {
     get groupSeparator() {
         return this.config.groupSeparator;
     }
+    get config() {
+        return this.localeConfiguration().number;
+    }
     constructor() {
         this.elementRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
+        this.ngZone = inject(NgZone);
+        this.destroyRef = inject(DestroyRef);
         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();
+        this.valueChange = new Subject();
         /** Emits when the disabled state has changed */
-        this.disabledChange = new EventEmitter();
+        this.disabledChange = new Subject();
+        /** Emits whenever the focused or disabled state of the directive changes. */
         this.stateChanges = new Subject();
         /**
-         * Implemented as part of KbqFormFieldControl.
+         * Discriminator read by `kbq-stepper` to find the control it drives.
+         *
          * @docs-private
          */
         this.controlType = 'input-number';
         /**
          * Allows input and pasting of integers only.
          */
-        this.integer = input(false, ...(ngDevMode ? [{ debugName: "integer", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.withThousandSeparator = input(true, ...(ngDevMode ? [{ debugName: "withThousandSeparator", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.integer = input(false, { ...(ngDevMode ? { debugName: "integer" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Step applied when `Shift` is held. */
+        this.bigStep = input(BIG_STEP, { ...(ngDevMode ? { debugName: "bigStep" } : /* istanbul ignore next */ {}), transform: numberAttribute(BIG_STEP) });
+        /** Step applied by the arrow keys and by `kbq-stepper`. */
+        this.step = input(SMALL_STEP, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute(SMALL_STEP) });
+        /** Lower bound the value is clamped to when stepping. */
+        this.min = input(-Infinity, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberAttribute(-Infinity) });
+        /** Upper bound the value is clamped to when stepping. */
+        this.max = input(Infinity, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute(Infinity) });
+        this.withThousandSeparator = input(true, { ...(ngDevMode ? { debugName: "withThousandSeparator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * Include thousand separator from custom index. For example, it will be useful in tables.
+         * Adds the thousand separator only from this power of ten. For example, `4` keeps `1234`
+         * un-grouped and groups `12345`. Defaults to the active locale's own value.
          */
-        this.startFormattingFrom = input(...(ngDevMode ? [undefined, { debugName: "startFormattingFrom" }] : []));
-        this._disabled = false;
+        this.startFormattingFrom = input(...(ngDevMode ? [undefined, { debugName: "startFormattingFrom" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        this.valueState = signal(undefined, ...(ngDevMode ? [{ debugName: "valueState" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        this.disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
         this.focused = false;
+        /**
+         * An unbounded end reports no `aria-value*`: `Infinity` is not a valid ARIA attribute value.
+         * A `computed()` rather than a getter so the value is cached between checks — the host binding
+         * itself lives in the declaring view and repaints either way.
+         */
+        this.ariaValueMin = computed(() => (Number.isFinite(this.min()) ? this.min() : null), ...(ngDevMode ? [{ debugName: "ariaValueMin" }] : /* istanbul ignore next */ []));
+        /** The upper bound, reported the way `ariaValueMin` reports the lower one. */
+        this.ariaValueMax = computed(() => (Number.isFinite(this.max()) ? this.max() : null), ...(ngDevMode ? [{ debugName: "ariaValueMax" }] : /* istanbul ignore next */ []));
+        this.localeConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('input', KBQ_INPUT_LOCALE_CONFIGURATION);
+        /** Pending `onInput` reformats by timer handle: cancelled on destroy, run at once before a step. */
+        this.pendingReformats = new Map();
+        /**
+         * Called when the control is blurred. Needed to properly implement `ControlValueAccessor`.
+         *
+         * @docs-private
+         */
         this.onTouched = () => { };
         this.isCtrlV = (event) => {
             return event.keyCode === V && (event.ctrlKey || event.metaKey);
@@ -131,35 +214,37 @@ class KbqNumberInput {
                 [this.fractionSeparator, KBQ_DEFAULT_PRECISION_SEPARATOR].includes(event.key));
         };
         this.cvaOnChange = () => { };
-        this.updateLocaleParams = () => {
-            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;
-        this.max = isDigit(max) ? parseFloat(max) : Infinity;
-        if ('valueAsNumber' in this.nativeElement) {
-            Object.defineProperty(Object.getPrototypeOf(this.nativeElement), 'valueAsNumber', {
-                get() {
-                    const res = parseFloat(normalizeSplitter(this.value));
-                    return isNaN(res) ? null : res;
-                }
-            });
-        }
-        this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
-        if (!localeService) {
-            this.initDefaultParams();
-        }
+        // The inputs stay `undefined` until a template binds them, so an unbound one does not override what a
+        // form control wrote through `writeValue` / `setDisabledState`. Once bound, `undefined` clears the value.
+        let bound = false;
+        effect(() => {
+            const value = this.valueInput();
+            if (!bound && value === undefined)
+                return;
+            bound = true;
+            untracked(() => this.setValue(value ?? null));
+        });
+        effect(() => {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                untracked(() => this.setDisabled(disabled));
+        });
+        // Re-render the value in the separators of the new locale. `untracked` keeps the configuration the
+        // only dependency: formatting also reads the `withThousandSeparator` input, which must not rewrite
+        // what the user is typing on its own.
+        effect(() => {
+            this.localeConfiguration();
+            untracked(() => this.setViewValue(this.formatNumber(this.value)));
+        });
+        this.destroyRef.onDestroy(() => {
+            this.pendingReformats.forEach((_, handle) => clearTimeout(handle));
+            this.pendingReformats.clear();
+        });
     }
     ngOnDestroy() {
         this.valueChange.complete();
         this.disabledChange.complete();
+        this.stateChanges.complete();
     }
     onContainerClick() {
         this.focus();
@@ -169,7 +254,7 @@ class KbqNumberInput {
     }
     // Implemented as part of ControlValueAccessor.
     writeValue(value) {
-        this.value = value;
+        this.setValue(value);
     }
     // Implemented as part of ControlValueAccessor.
     registerOnChange(fn) {
@@ -181,7 +266,7 @@ class KbqNumberInput {
     }
     // Implemented as part of ControlValueAccessor.
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.setDisabled(isDisabled);
     }
     focusChanged(isFocused) {
         if (isFocused !== this.focused) {
@@ -200,11 +285,11 @@ class KbqNumberInput {
         // should parse normalized fractionSeparator
         const viewValueToBeChecked = normalizeNumber(this.viewValue, this.config);
         const shouldSkipForIntegerMode = this.integer() && this.isPeriod(event);
-        const isMinusAllowed = minuses.includes(keyCode) && (this.viewValue.includes(event.key) || this.min >= 0);
+        const shouldBlockMinus = 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) &&
             viewValueToBeChecked.indexOf(KBQ_DEFAULT_PRECISION_SEPARATOR) !== -1;
-        if (shouldSkipForIntegerMode || isMinusAllowed || isSignAndFractionSepAlreadyExists) {
+        if (shouldSkipForIntegerMode || shouldBlockMinus || isSignAndFractionSepAlreadyExists) {
             event.preventDefault();
             return;
         }
@@ -225,7 +310,7 @@ class KbqNumberInput {
         if (event.shiftKey || isLetter) {
             event.preventDefault();
             // process steps
-            const step = event.shiftKey ? this.bigStep : this.step;
+            const step = event.shiftKey ? this.bigStep() : this.step();
             if (keyCode === UP_ARROW) {
                 this.stepUp(step);
             }
@@ -237,7 +322,11 @@ class KbqNumberInput {
     onInput(event) {
         const currentValueLength = this.formatNumber(this.value)?.length || 0;
         const previousSelectionStart = this.nativeElement.selectionStart || 0;
-        setTimeout(() => {
+        // Deferred so the browser has applied the keystroke to the native value before it is reformatted.
+        // The handle is tracked and cleared on destroy: a directive torn down between the keystroke and the
+        // timeout must not write to a detached node nor push a change into a control the view no longer owns.
+        const reformat = (correctCaret) => {
+            this.pendingReformats.delete(handle);
             const fromPaste = event.inputType === 'insertFromPaste';
             let formattedValue;
             if (fromPaste) {
@@ -246,28 +335,20 @@ class KbqNumberInput {
             else {
                 /*this.viewValue is raw and should be reformatted to localized number */
                 formattedValue = this.formatViewValue();
-                if (this.withThousandSeparator()) {
-                    const offsetWhenSeparatorAdded = 2;
-                    Promise.resolve().then(() => {
-                        if (this.value &&
-                            Math.abs(this.value) >= 1000 &&
-                            Math.abs(this.viewValue.length - currentValueLength) === offsetWhenSeparatorAdded) {
-                            // move selection to the left/right if separator was added/removed
-                            const cursorPosition = Math.max(0, previousSelectionStart + Math.sign(this.viewValue.length - currentValueLength));
-                            this.renderer.setProperty(this.nativeElement, 'selectionStart', cursorPosition);
-                            this.renderer.setProperty(this.nativeElement, 'selectionEnd', cursorPosition);
-                        }
-                    });
+                if (correctCaret && this.withThousandSeparator()) {
+                    this.correctCaretForSeparator(currentValueLength, previousSelectionStart);
                 }
             }
             this.setViewValue(formattedValue, !fromPaste);
             if (this.viewValue !== '-') {
                 this.viewToModelUpdate(formattedValue);
             }
-        });
+        };
+        const handle = setTimeout(() => reformat(true));
+        this.pendingReformats.set(handle, reformat);
     }
     onPaste(event) {
-        this.valueFromPaste = checkAndNormalizeLocalizedNumber(event.clipboardData?.getData('text'), this.localeService?.id);
+        this.valueFromPaste = checkAndNormalizeLocalizedNumber(event.clipboardData?.getData('text'), this.localeService?.localeId());
         if (this.valueFromPaste === null || isNaN(this.valueFromPaste)) {
             event.preventDefault();
         }
@@ -280,22 +361,48 @@ class KbqNumberInput {
     }
     stepUp(step) {
         this.nativeElement.focus();
-        const res = Math.max(Math.min(add(this.value || 0, step), this.max), this.min);
+        this.commitPendingReformats();
+        const res = Math.max(Math.min(add(this.value || 0, step), this.max()), this.min());
         this.setViewValue(this.formatNumber(res));
-        this._value = res;
+        this.valueState.set(res);
         this.cvaOnChange(res);
-        this.valueChange.emit(res);
+        this.valueChange.next(res);
     }
     stepDown(step) {
         this.nativeElement.focus();
-        const res = Math.min(Math.max(add(this.value || 0, -step), this.min), this.max);
+        this.commitPendingReformats();
+        const res = Math.min(Math.max(add(this.value || 0, -step), this.min()), this.max());
         this.setViewValue(this.formatNumber(res));
-        this._value = res;
+        this.valueState.set(res);
         this.cvaOnChange(res);
-        this.valueChange.emit(res);
+        this.valueChange.next(res);
     }
-    initDefaultParams() {
-        this.config = KBQ_INPUT_NUMBER_DEFAULT_CONFIGURATION;
+    /**
+     * Commits a keystroke whose reformat is still pending, so a step pressed right after typing starts from
+     * the typed value rather than the last committed one. The caret correction is skipped: the step rewrites
+     * the value it would apply to.
+     */
+    commitPendingReformats() {
+        this.pendingReformats.forEach((reformat, handle) => {
+            clearTimeout(handle);
+            reformat(false);
+        });
+    }
+    /**
+     * Moves the caret one position when a group separator was inserted or removed by the reformat, so it
+     * stays next to the same digit. Runs outside the zone: it only writes the selection, which no view or
+     * model reads back, and each keystroke would otherwise cost an extra application-wide check.
+     */
+    correctCaretForSeparator(previousValueLength, previousSelectionStart) {
+        const offsetWhenSeparatorAdded = 2;
+        this.ngZone.runOutsideAngular(() => Promise.resolve().then(() => {
+            const lengthDelta = this.viewValue.length - previousValueLength;
+            if (this.value && Math.abs(this.value) >= 1000 && Math.abs(lengthDelta) === offsetWhenSeparatorAdded) {
+                const cursorPosition = Math.max(0, previousSelectionStart + Math.sign(lengthDelta));
+                this.renderer.setProperty(this.nativeElement, 'selectionStart', cursorPosition);
+                this.renderer.setProperty(this.nativeElement, 'selectionEnd', cursorPosition);
+            }
+        }));
     }
     setViewValue(value, savePosition = false) {
         const cursorPosition = this.nativeElement.selectionStart;
@@ -305,14 +412,37 @@ class KbqNumberInput {
             this.renderer.setProperty(this.nativeElement, 'selectionEnd', cursorPosition);
         }
     }
+    /** Writes a value from outside the field: reformats it and reports the change. */
+    setValue(value) {
+        const oldValue = this.valueState();
+        this.valueState.set(value);
+        if (oldValue !== value) {
+            this.setViewValue(this.formatNumber(value));
+            this.valueChange.next(value);
+        }
+    }
+    setDisabled(disabled) {
+        if (this.disabledState() !== disabled) {
+            this.disabledState.set(disabled);
+            this.disabledChange.next(disabled);
+            this.stateChanges.next();
+        }
+        // We need to null check the `blur` method, because it's undefined during SSR.
+        if (disabled && this.nativeElement.blur) {
+            // Normally, native input elements automatically blur if they turn disabled. This behavior
+            // is problematic, because it would mean that it triggers another change detection cycle,
+            // which then causes a changed after checked error if the input element was focused before.
+            this.nativeElement.blur();
+        }
+    }
     viewToModelUpdate(newValue) {
         const normalizedValue = newValue === null ? null : +normalizeNumber(newValue, this.config);
         if (normalizedValue !== this.value) {
-            this._value = normalizedValue;
+            this.valueState.set(normalizedValue);
+            // `cvaOnChange` routes through `FormControl.setValue`, which re-runs the validators itself.
             this.cvaOnChange(normalizedValue);
-            this.valueChange.emit(normalizedValue);
+            this.valueChange.next(normalizedValue);
         }
-        this.ngControl?.updateValueAndValidity({ emitEvent: false });
     }
     formatViewValue() {
         // we just need to skip the minus sign and not do any formatting
@@ -340,11 +470,11 @@ class KbqNumberInput {
             useGrouping: this.withThousandSeparator(),
             maximumFractionDigits: 20
         };
-        if (this.withThousandSeparator() && this.config.startFormattingFrom) {
-            formatOptions.useGrouping = intPart >= Math.pow(10, this.config.startFormattingFrom);
+        const startFormattingFrom = this.startFormattingFrom() ?? this.config.startFormattingFrom;
+        if (this.withThousandSeparator() && startFormattingFrom != null) {
+            formatOptions.useGrouping = intPart >= Math.pow(10, startFormattingFrom);
         }
-        const localeId = !this.localeService || this.localeService.id === 'es-LA' ? 'ru-RU' : this.localeService.id;
-        const formatter = new Intl.NumberFormat(localeId, formatOptions);
+        const formatter = new Intl.NumberFormat(resolveIntlLocale(this.localeService?.localeId()), formatOptions);
         const formattedIntPart = formatNumberWithLocale(intPart, formatter, this.config);
         if (fractionPart === undefined) {
             return formattedIntPart;
@@ -355,39 +485,38 @@ class KbqNumberInput {
         }
         return `${formattedIntPart}${this.fractionSeparator}${formattedFractionPart}`;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNumberInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNumberInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.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: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, 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 }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "spinbutton" }, listeners: { "blur": "focusChanged(false)", "focus": "focusChanged(true)", "paste": "onPaste($event)", "keydown": "onKeyDown($event)", "input": "onInput($any($event))" }, properties: { "attr.inputmode": "integer() ? 'numeric' : 'decimal'", "attr.aria-valuenow": "value", "attr.aria-valuetext": "viewValue || null", "attr.aria-valuemin": "ariaValueMin()", "attr.aria-valuemax": "ariaValueMax()" } }, providers: [KBQ_NUMBER_INPUT_VALUE_ACCESSOR], exportAs: ["kbqNumberInput", "kbqNumericalInput"], hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNumberInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNumberInput, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[kbqNumberInput]`,
                     providers: [KBQ_NUMBER_INPUT_VALUE_ACCESSOR],
                     host: {
+                        role: 'spinbutton',
+                        '[attr.inputmode]': "integer() ? 'numeric' : 'decimal'",
+                        '[attr.aria-valuenow]': 'value',
+                        // The formatted, locale-correct string, so the grouped value is announced rather than the raw number.
+                        '[attr.aria-valuetext]': 'viewValue || null',
+                        '[attr.aria-valuemin]': 'ariaValueMin()',
+                        '[attr.aria-valuemax]': 'ariaValueMax()',
                         '(blur)': 'focusChanged(false)',
                         '(focus)': 'focusChanged(true)',
                         '(paste)': 'onPaste($event)',
                         '(keydown)': 'onKeyDown($event)',
-                        '(input)': 'onInput($event)'
+                        '(input)': 'onInput($any($event))'
                     },
-                    exportAs: 'kbqNumericalInput'
+                    hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ],
+                    exportAs: 'kbqNumberInput, kbqNumericalInput'
                 }]
-        }], ctorParameters: () => [], propDecorators: { integer: [{ type: i0.Input, args: [{ isSignal: true, alias: "integer", required: false }] }], bigStep: [{
-                type: Input
-            }], step: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], 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
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { integer: [{ type: i0.Input, args: [{ isSignal: true, alias: "integer", required: false }] }], bigStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "bigStep", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], withThousandSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "withThousandSeparator", required: false }] }], startFormattingFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "startFormattingFrom", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 const KBQ_INPUT_VALUE_ACCESSOR = new InjectionToken('KBQ_INPUT_VALUE_ACCESSOR');
 
+const isObject$1 = (value) => typeof value === 'object' && value !== null;
 const KBQ_INPUT_INVALID_TYPES = [
     'button',
     'checkbox',
@@ -399,83 +528,10 @@ const KBQ_INPUT_INVALID_TYPES = [
     'reset',
     'submit'
 ];
-let nextUniqueId$1 = 0;
 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;
-        }
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        // Browsers may not fire the blur event if the input is disabled too quickly.
-        // Reset from here to ensure that the element doesn't become stuck.
-        if (this.focused) {
-            this.focused = false;
-            this.stateChanges.next();
-        }
-    }
-    /**
-     * 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;
-    }
-    set id(value) {
-        this._id = value || this.uid;
-    }
-    /**
-     * 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;
-    }
-    set required(value) {
-        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;
-    }
-    set type(value) {
-        this._type = value || 'text';
-        this.validateType();
-        // When using Angular inputs, developers are no longer able to set the properties on the native
-        // input element. To ensure that bindings for `type` work, we need to sync the setter
-        // with the native property. Textarea elements don't support the type property or attribute.
-        if (getSupportedInputTypes().has(this._type)) {
-            this.elementRef.nativeElement.type = this._type;
-        }
-    }
-    /**
-     * 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;
-    }
-    set value(value) {
-        if (value !== this.value) {
-            this.inputValueAccessor.value = value;
-            this.stateChanges.next();
-        }
+        return this.resolvedType();
     }
     constructor() {
         this.elementRef = inject(ElementRef);
@@ -484,29 +540,39 @@ class KbqInput {
         this.parentForm = inject(NgForm, { optional: true });
         this.parentFormGroup = inject(FormGroupDirective, { optional: true });
         this.defaultErrorStateMatcher = inject(ErrorStateMatcher);
+        this.errorStateTracker = new KbqErrorStateTracker(this.defaultErrorStateMatcher, this.ngControl, this.parentFormGroup, this.parentForm);
         /** Whether the component is in an error state. */
-        this.errorState = false;
+        this.errorState = this.errorStateTracker.errorState;
+        /** An object used to control when error messages are shown. */
+        this.errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+        this.focusedValue = signal(false, ...(ngDevMode ? [{ debugName: "focusedValue" }] : /* istanbul ignore next */ []));
         /**
          * Implemented as part of KbqFormFieldControl.
+         *
          * @docs-private
          */
-        this.focused = false;
+        this.focused = this.focusedValue.asReadonly();
         /**
          * Implemented as part of KbqFormFieldControl.
+         *
          * @docs-private
          */
         this.autofilled = kbqInjectAutofilled();
         /**
          * Implemented as part of KbqFormFieldControl.
+         *
          * @docs-private
          */
-        this.stateChanges = new Subject();
+        this.controlType = this.numberInput ? 'input-number' : 'input';
+        /** @docs-private */
+        this.placeholderInput = input(undefined, { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
         /**
-         * Implemented as part of KbqFormFieldControl.
+         * Implemented as part of KbqFormFieldControl. Writable, so that a select search can supply one.
+         *
          * @docs-private
          */
-        this.controlType = this.numberInput ? 'input-number' : 'input';
-        this.uid = `kbq-input-${nextUniqueId$1++}`;
+        this.placeholder = linkedSignal(() => this.placeholderInput(), ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.uid = inject(_IdGenerator).getId('kbq-input-');
         this.neverEmptyInputTypes = [
             'date',
             'datetime',
@@ -515,21 +581,104 @@ class KbqInput {
             'time',
             'week'
         ].filter((t) => getSupportedInputTypes().has(t));
-        this._disabled = false;
-        this._required = false;
-        this._type = 'text';
+        /** @docs-private */
+        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        /** `disabled` of the bound form control, which takes precedence over the input. */
+        this.formDisabled = signal(null, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+        /**
+         * Implemented as part of KbqFormFieldControl.
+         *
+         * @docs-private
+         */
+        this.disabled = computed(() => this.formDisabled() ?? this.disabledInput(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+        /**
+         * Implemented as part of KbqFormFieldControl.
+         *
+         * @docs-private
+         */
+        this.id = computed(() => this.idInput() || this.uid, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Implemented as part of KbqFormFieldControl.
+         *
+         * @docs-private
+         */
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @docs-private */
+        this.typeInput = input(undefined, { ...(ngDevMode ? { debugName: "typeInput" } : /* istanbul ignore next */ {}), alias: 'type' });
+        // A native number field runs the value sanitization algorithm on assignment and drops anything that
+        // is not a valid floating-point number — which is every value `kbqNumberInput` renders once a group
+        // separator or a comma fraction separator is in it. It also reports `selectionStart` as `null`,
+        // disabling caret preservation. Reset rather than throw, so an existing consumer keeps working.
+        this.resolvedType = computed(() => {
+            const type = this.typeInput() || 'text';
+            return this.numberInput && type === 'number' ? 'text' : type;
+        }, ...(ngDevMode ? [{ debugName: "resolvedType" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        this.emptyValue = signal(true, ...(ngDevMode ? [{ debugName: "emptyValue" }] : /* istanbul ignore next */ []));
+        /**
+         * Implemented as part of KbqFormFieldControl.
+         *
+         * @docs-private
+         */
+        this.empty = this.emptyValue.asReadonly();
         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;
-        // Force setter to be called in case id was not specified.
-        this.id = this.id;
-    }
-    ngOnChanges() {
-        this.stateChanges.next();
-    }
-    ngOnDestroy() {
-        this.stateChanges.complete();
+        // A static `type` is on the element before any directive runs, while the effect below runs after a reactive
+        // form has written its value from `ngOnChanges`: a number field would sanitize that value away by then.
+        if (this.numberInput && this.elementRef.nativeElement.type === 'number') {
+            this.elementRef.nativeElement.type = 'text';
+        }
+        // Read once: a custom accessor may build a new value on every read.
+        const initialValue = this.inputValueAccessor.value;
+        this.value = signal(initialValue, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.syncedValue = initialValue;
+        this.syncedText = this.elementRef.nativeElement.value;
+        // A binding of `type` no longer reaches the element on its own: the directive takes the input. Textarea
+        // elements don't support the type property or attribute.
+        effect(() => {
+            const type = this.resolvedType();
+            untracked(() => {
+                this.validateType();
+                if (getSupportedInputTypes().has(type)) {
+                    this.elementRef.nativeElement.type = type;
+                }
+            });
+        });
+        // A bound value replaces the current one whenever the binding changes. The number input takes the same
+        // binding and renders it in the locale format, so it owns the element's value.
+        effect(() => {
+            const value = this.valueInput();
+            if (value !== undefined && !this.numberInput) {
+                untracked(() => this.value.set(value));
+            }
+        });
+        // A value set in code is written to the element on the next change detection. The one the element last agreed
+        // on is not written back: the element may have changed since, as when the number input renders a bound value.
+        effect(() => {
+            const value = this.value();
+            untracked(() => {
+                if (value !== this.syncedValue) {
+                    if (this.inputValueAccessor.value !== value) {
+                        this.inputValueAccessor.value = value;
+                    }
+                    this.syncedValue = value;
+                    this.syncedText = this.elementRef.nativeElement.value;
+                }
+                this.dirtyCheckNativeValue();
+            });
+        });
+        // Browsers may not fire the blur event if the input is disabled too quickly.
+        // Reset from here to ensure that the element doesn't become stuck.
+        effect(() => {
+            if (this.disabled()) {
+                untracked(() => this.focusedValue.set(false));
+            }
+        });
     }
     ngDoCheck() {
         if (this.ngControl) {
@@ -537,6 +686,7 @@ class KbqInput {
             // error triggers that we can't subscribe to (e.g. parent form submissions). This means
             // that whatever logic is in here has to be super lean or we risk destroying the performance.
             this.updateErrorState();
+            this.formDisabled.set(this.ngControl.disabled);
         }
         // We need to dirty-check the native element's value, because there are some cases where
         // we won't be notified when it changes (e.g. the consumer isn't using forms or they're
@@ -544,15 +694,8 @@ class KbqInput {
         this.dirtyCheckNativeValue();
     }
     updateErrorState() {
-        const oldState = this.errorState;
-        const parent = this.parentFormGroup || this.parentForm;
-        const matcher = this.errorStateMatcher || this.defaultErrorStateMatcher;
-        const control = this.ngControl ? this.ngControl.control : null;
-        const newState = matcher.isErrorState(control, parent);
-        if (newState !== oldState) {
-            this.errorState = newState;
-            this.stateChanges.next();
-        }
+        this.errorStateTracker.errorStateMatcher = this.errorStateMatcher();
+        this.errorStateTracker.updateErrorState();
     }
     /** Focuses the input. */
     focus() {
@@ -563,42 +706,48 @@ class KbqInput {
     }
     /** Callback for the cases where the focused state of the input changes. */
     focusChanged(isFocused) {
-        if (this.focused !== isFocused) {
-            this.focused = isFocused;
-            this.stateChanges.next();
-        }
+        this.focusedValue.set(isFocused);
     }
     /**
      * Implemented as part of KbqFormFieldControl.
+     *
      * @docs-private
      */
-    get empty() {
-        return !this.isNeverEmpty() && !this.elementRef.nativeElement.value && !this.isBadInput();
+    onContainerClick() {
+        this.focus();
     }
     /**
-     * Implemented as part of KbqFormFieldControl.
+     * Reads the native value back, since it changes without notice: through the forms API, which writes the
+     * element directly, or by the user typing into an input that no form listens to.
+     *
      * @docs-private
      */
-    onContainerClick() {
-        this.focus();
-    }
-    /** Does some manual dirty checking on the native input `value` property. */
     dirtyCheckNativeValue() {
-        const newValue = this.value;
-        if (this.previousNativeValue !== newValue) {
-            this.previousNativeValue = newValue;
-            this.stateChanges.next();
+        const nativeValue = this.inputValueAccessor.value;
+        const text = this.elementRef.nativeElement.value;
+        // Only a change of the element itself: a value set in code and not yet written must not be overwritten. An
+        // object counts as changed only with the text, as a custom accessor may build a new one on every read.
+        if (nativeValue !== this.syncedValue && (!isObject$1(nativeValue) || text !== this.syncedText)) {
+            this.syncedValue = nativeValue;
+            this.syncedText = text;
+            this.value.set(nativeValue);
         }
+        this.emptyValue.set(this.isEmpty());
     }
     /** Make sure the input is a supported type. */
     validateType() {
-        if (KBQ_INPUT_INVALID_TYPES.indexOf(this._type) > -1) {
-            throw getKbqInputUnsupportedTypeError(this._type);
+        const type = this.typeInput() || 'text';
+        if (KBQ_INPUT_INVALID_TYPES.indexOf(type) > -1) {
+            throw getKbqInputUnsupportedTypeError(type);
+        }
+        if (this.numberInput && type === 'number' && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            // eslint-disable-next-line no-console
+            console.warn(KBQ_NUMBER_INPUT_UNSUPPORTED_TYPE_MESSAGE);
         }
     }
     /** Checks whether the input type is one of the types that are never empty. */
     isNeverEmpty() {
-        return this.neverEmptyInputTypes.indexOf(this._type) > -1;
+        return this.neverEmptyInputTypes.indexOf(this.type) > -1;
     }
     /** Checks whether the input is invalid based on the native validation. */
     isBadInput() {
@@ -606,15 +755,18 @@ class KbqInput {
         const validity = this.elementRef.nativeElement.validity;
         return validity?.badInput;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", 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: [
+    isEmpty() {
+        return !this.isNeverEmpty() && !this.elementRef.nativeElement.value && !this.isBadInput();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqInput, isStandalone: true, selector: "input[kbqInput],input[kbqNumberInput]", inputs: { errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, typeInput: { classPropertyName: "typeInput", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "blur": "onBlur()", "focus": "focusChanged(true)", "input": "dirtyCheckNativeValue()" }, properties: { "attr.id": "id()", "attr.placeholder": "placeholder()", "attr.disabled": "disabled() || null", "attr.aria-invalid": "errorState()", "required": "required()" }, classAttribute: "kbq-input" }, providers: [
             {
                 provide: KbqFormFieldControl,
                 useExisting: KbqInput
             }
-        ], exportAs: ["kbqInput"], usesOnChanges: true, ngImport: i0 }); }
+        ], exportAs: ["kbqInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInput, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[kbqInput],input[kbqNumberInput]`,
@@ -628,55 +780,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         class: 'kbq-input',
                         // Native input properties that are overwritten by Angular inputs need to be synced with
                         // the native input element. Otherwise property bindings for those don't work.
-                        '[attr.id]': 'id',
-                        '[attr.placeholder]': 'placeholder',
-                        '[attr.disabled]': 'disabled || null',
-                        '[required]': 'required',
+                        '[attr.id]': 'id()',
+                        '[attr.placeholder]': 'placeholder()',
+                        '[attr.disabled]': 'disabled() || null',
+                        '[attr.aria-invalid]': 'errorState()',
+                        '[required]': 'required()',
                         '(blur)': 'onBlur()',
-                        '(focus)': 'focusChanged(true)'
+                        '(focus)': 'focusChanged(true)',
+                        '(input)': 'dirtyCheckNativeValue()'
                     },
                     exportAs: 'kbqInput'
                 }]
-        }], ctorParameters: () => [], propDecorators: { errorStateMatcher: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], typeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 class KbqInputMono {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInputMono, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", 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: "21.2.25", ngImport: i0, type: KbqInputMono, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqInputMono, isStandalone: true, selector: "input[kbqInputMonospace]", host: { classAttribute: "kbq-input_monospace" }, exportAs: ["kbqInputMonospace", "KbqInputMonospace"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInputMono, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInputMono, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kbqInputMonospace]',
                     host: { class: 'kbq-input_monospace' },
-                    exportAs: 'KbqInputMonospace'
+                    exportAs: 'kbqInputMonospace, KbqInputMonospace'
                 }]
         }] });
 
-const MIN_VALIDATOR = {
+/**
+ * Transform for the validator bounds. `coerceNumberProperty`, not `parseInt`: the bound value may be a
+ * fractional number or the string form of a static `min="0.5"` attribute, and `parseInt` would truncate
+ * both to `0`. A non-numeric bound becomes `NaN`, which installs no validator and writes no attribute.
+ */
+const bound = (value) => coerceNumberProperty(value, NaN);
+const KBQ_MIN_VALIDATOR = {
     provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => MinValidator),
+    useExisting: forwardRef(() => KbqMinValidator),
     multi: true
 };
 /**
- * A directive which installs the MinValidator for any `formControlName`,
+ * A directive which installs the `KbqMinValidator` for any `formControlName`,
  * `formControl`, or control with `ngModel` that also has a `min` attribute.
  */
-class MinValidator {
+class KbqMinValidator {
     constructor() {
-        this.min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : []));
+        /** Lower bound installed as `Validators.min`. A non-numeric bound reads back as `NaN`. */
+        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: bound });
+        /** `min()` unless it is `NaN`, which has no DOM representation. */
+        this.coercedMin = computed(() => (Number.isNaN(this.min()) ? null : this.min()), ...(ngDevMode ? [{ debugName: "coercedMin" }] : /* istanbul ignore next */ []));
     }
     ngOnChanges(changes) {
         if ('min' in changes) {
@@ -693,33 +842,41 @@ class MinValidator {
         this.onChange = fn;
     }
     createValidator() {
-        this.validator = Validators.min(parseInt(this.min(), 10));
+        const min = this.min();
+        this.validator = Number.isNaN(min) ? Validators.nullValidator : Validators.min(min);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MinValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqMinValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqMinValidator, 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": "coercedMin() ?? null" } }, providers: [KBQ_MIN_VALIDATOR], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MinValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqMinValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[min][formControlName],[min][formControl],[min][ngModel]',
-                    providers: [MIN_VALIDATOR],
+                    providers: [KBQ_MIN_VALIDATOR],
                     host: {
-                        '[attr.min]': 'min() ? min() : null'
+                        // Coerced rather than the raw `min()`, so a non-numeric bound (e.g. `"5px"`) is dropped from the
+                        // DOM exactly like it is from the installed validator, instead of writing a bogus `min` attribute.
+                        // `?? null` rather than a falsy check: a bound `[min]="0"` is the most common lower bound and must
+                        // still reach the DOM.
+                        '[attr.min]': 'coercedMin() ?? null'
                     }
                 }]
         }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }] } });
-const MAX_VALIDATOR = {
+const KBQ_MAX_VALIDATOR = {
     provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => MaxValidator),
+    useExisting: forwardRef(() => KbqMaxValidator),
     multi: true
 };
 /**
- * A directive which installs the MaxValidator for any `formControlName`,
- * `formControl`, or control with `ngModel` that also has a `min` attribute.
+ * A directive which installs the `KbqMaxValidator` for any `formControlName`,
+ * `formControl`, or control with `ngModel` that also has a `max` attribute.
  */
-class MaxValidator {
+class KbqMaxValidator {
     constructor() {
-        this.max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : []));
+        /** Upper bound installed as `Validators.max`. A non-numeric bound reads back as `NaN`. */
+        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: bound });
+        /** `max()` unless it is `NaN`, which has no DOM representation. */
+        this.coercedMax = computed(() => (Number.isNaN(this.max()) ? null : this.max()), ...(ngDevMode ? [{ debugName: "coercedMax" }] : /* istanbul ignore next */ []));
     }
     ngOnChanges(changes) {
         if ('max' in changes) {
@@ -736,139 +893,143 @@ class MaxValidator {
         this.onChange = fn;
     }
     createValidator() {
-        this.validator = Validators.max(parseInt(this.max(), 10));
+        const max = this.max();
+        this.validator = Number.isNaN(max) ? Validators.nullValidator : Validators.max(max);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaxValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqMaxValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqMaxValidator, 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": "coercedMax() ?? null" } }, providers: [KBQ_MAX_VALIDATOR], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MaxValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqMaxValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[max][formControlName],[max][formControl],[max][ngModel]',
-                    providers: [MAX_VALIDATOR],
+                    providers: [KBQ_MAX_VALIDATOR],
                     host: {
-                        '[attr.max]': 'max() ? max() : null'
+                        // See `KbqMinValidator`'s `[attr.min]` for why this is coerced rather than the raw `max()`.
+                        '[attr.max]': 'coercedMax() ?? null'
                     }
                 }]
         }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
 
-let nextUniqueId = 0;
+const isObject = (value) => typeof value === 'object' && value !== null;
 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;
-        }
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        // Browsers may not fire the blur event if the input is disabled too quickly.
-        // Reset from here to ensure that the element doesn't become stuck.
-        if (this.focused) {
-            this.focused = false;
-            this.stateChanges.next(null);
-        }
-    }
-    /**
-     * 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;
-    }
-    set id(value) {
-        this._id = value || this.uid;
-    }
-    /**
-     * 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;
-    }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
-    }
-    // this.elementRef.nativeElement.type = this._type;
-    /**
-     * 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;
-    }
-    set value(value) {
-        if (value === this.value) {
-            return;
-        }
-        this._inputValueAccessor.value = value;
-        this.stateChanges.next(null);
-    }
-    /**
-     * Implemented as part of KbqFormFieldControl.
-     * @docs-private
-     */
-    get empty() {
-        return !this.elementRef.nativeElement.value && !this.isBadInput();
-    }
     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);
+        this.errorStateTracker = new KbqErrorStateTracker(this.defaultErrorStateMatcher, this.ngControl, this.parentFormGroup, this.parentForm);
         /** Whether the component is in an error state. */
-        this.errorState = false;
+        this.errorState = this.errorStateTracker.errorState;
+        /** An object used to control when error messages are shown. */
+        this.errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+        this.focusedValue = signal(false, ...(ngDevMode ? [{ debugName: "focusedValue" }] : /* istanbul ignore next */ []));
         /**
          * Implemented as part of KbqFormFieldControl.
+         *
          * @docs-private
          */
-        this.focused = false;
+        this.focused = this.focusedValue.asReadonly();
         /**
          * Implemented as part of KbqFormFieldControl.
+         *
          * @docs-private
          */
         this.autofilled = kbqInjectAutofilled();
         /**
          * Implemented as part of KbqFormFieldControl.
+         *
          * @docs-private
          */
-        this.stateChanges = new Subject();
-        this.checkRule = new Subject();
+        this.controlType = 'input-password';
+        this.elementTypeValue = signal('password', ...(ngDevMode ? [{ debugName: "elementTypeValue" }] : /* istanbul ignore next */ []));
+        /** Type of the native input: `password` while the password is hidden, `text` while it is shown. */
+        this.elementType = this.elementTypeValue.asReadonly();
+        /** @docs-private */
+        this.placeholderInput = input(undefined, { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
         /**
          * Implemented as part of KbqFormFieldControl.
+         *
          * @docs-private
          */
-        this.controlType = 'input-password';
-        this.elementType = 'password';
-        this.uid = `kbq-input-${nextUniqueId++}`;
-        this._disabled = false;
-        this._required = false;
+        this.placeholder = linkedSignal(() => this.placeholderInput(), ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        // Own namespace: sharing `kbq-input-` with `KbqInput` produced duplicate ids on any page holding both
+        // controls, and the form field's `<label for>` then resolved to the wrong control.
+        this.uid = inject(_IdGenerator).getId('kbq-input-password-');
+        /** @docs-private */
+        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        /** `disabled` of the bound form control, which takes precedence over the input. */
+        this.formDisabled = signal(null, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+        /**
+         * Implemented as part of KbqFormFieldControl.
+         *
+         * @docs-private
+         */
+        this.disabled = computed(() => this.formDisabled() ?? this.disabledInput(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+        /**
+         * Implemented as part of KbqFormFieldControl.
+         *
+         * @docs-private
+         */
+        this.id = computed(() => this.idInput() || this.uid, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Implemented as part of KbqFormFieldControl.
+         *
+         * @docs-private
+         */
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @docs-private */
+        this.valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        this.emptyValue = signal(true, ...(ngDevMode ? [{ debugName: "emptyValue" }] : /* istanbul ignore next */ []));
+        /**
+         * Implemented as part of KbqFormFieldControl.
+         *
+         * @docs-private
+         */
+        this.empty = this.emptyValue.asReadonly();
         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;
-        // Force setter to be called in case id was not specified.
-        this.id = this.id;
-    }
-    ngOnChanges() {
-        this.stateChanges.next(null);
-    }
-    ngOnDestroy() {
-        this.stateChanges.complete();
+        this.inputValueAccessor = inputValueAccessor || this.elementRef.nativeElement;
+        // Read once: a custom accessor may build a new value on every read.
+        const initialValue = this.inputValueAccessor.value;
+        this.value = signal(initialValue, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.syncedValue = initialValue;
+        this.syncedText = this.elementRef.nativeElement.value;
+        // A bound value replaces the current one whenever the binding changes.
+        effect(() => {
+            const value = this.valueInput();
+            if (value !== undefined) {
+                untracked(() => this.value.set(value));
+            }
+        });
+        // A value set in code is written to the element on the next change detection. The one the element last agreed
+        // on is not written back: a custom accessor that builds a new value on every read would be written on every
+        // keystroke.
+        effect(() => {
+            const value = this.value();
+            untracked(() => {
+                if (value !== this.syncedValue) {
+                    if (this.inputValueAccessor.value !== value) {
+                        this.inputValueAccessor.value = value;
+                    }
+                    this.syncedValue = value;
+                    this.syncedText = this.elementRef.nativeElement.value;
+                }
+                this.emptyValue.set(this.isEmpty());
+            });
+        });
+        // Browsers may not fire the blur event if the input is disabled too quickly.
+        // Reset from here to ensure that the element doesn't become stuck.
+        effect(() => {
+            if (this.disabled()) {
+                untracked(() => this.focusedValue.set(false));
+            }
+        });
     }
     ngDoCheck() {
         if (this.ngControl) {
@@ -876,6 +1037,7 @@ class KbqInputPassword {
             // error triggers that we can't subscribe to (e.g. parent form submissions). This means
             // that whatever logic is in here has to be super lean or we risk destroying the performance.
             this.updateErrorState();
+            this.formDisabled.set(this.ngControl.disabled);
         }
         // We need to dirty-check the native element's value, because there are some cases where
         // we won't be notified when it changes (e.g. the consumer isn't using forms or they're
@@ -883,23 +1045,12 @@ class KbqInputPassword {
         this.dirtyCheckNativeValue();
     }
     updateErrorState() {
-        const oldState = this.errorState;
-        const parent = this.parentFormGroup || this.parentForm;
-        const matcher = this.errorStateMatcher || this.defaultErrorStateMatcher;
-        const control = this.ngControl ? this.ngControl.control : null;
-        const newState = matcher.isErrorState(control, parent);
-        if (newState !== oldState) {
-            this.errorState = newState;
-            this.stateChanges.next(null);
-        }
-    }
-    checkRules() {
-        this.checkRule.next();
+        this.errorStateTracker.errorStateMatcher = this.errorStateMatcher();
+        this.errorStateTracker.updateErrorState();
     }
     /** Toggles the native input type between password and text. */
     toggleType() {
-        this.elementType = this.elementType === 'password' ? 'text' : 'password';
-        this.stateChanges.next(null);
+        this.elementTypeValue.update((type) => (type === 'password' ? 'text' : 'password'));
     }
     /** Focuses the input. */
     focus() {
@@ -910,49 +1061,51 @@ class KbqInputPassword {
     }
     /** Callback for the cases where the focused state of the input changes. */
     focusChanged(isFocused) {
-        if (isFocused === this.focused) {
-            return;
-        }
-        this.focused = isFocused;
-        this.stateChanges.next({ focused: this.focused });
-    }
-    onInput() {
-        // This is a noop function and is used to let Angular know whenever the value changes.
-        // Angular will run a new change detection each time the `input` event has been dispatched.
-        // It's necessary that Angular recognizes the value change, because when floatingLabel
-        // is set to false and Angular forms aren't used, the placeholder won't recognize the
-        // value changes and will not disappear.
-        // Listening to the input event wouldn't be necessary when the input is using the
-        // FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.
+        this.focusedValue.set(isFocused);
     }
     /**
      * Implemented as part of KbqFormFieldControl.
+     *
      * @docs-private
      */
     onContainerClick() {
         this.focus();
     }
-    /** Does some manual dirty checking on the native input `value` property. */
+    /**
+     * Reads the native value back, since it changes without notice: through the forms API, which writes the
+     * element directly, or by the user typing into an input that no form listens to.
+     *
+     * @docs-private
+     */
     dirtyCheckNativeValue() {
-        if (this.previousNativeValue !== this.value) {
-            this.previousNativeValue = this.value;
-            this.stateChanges.next(null);
+        const nativeValue = this.inputValueAccessor.value;
+        const text = this.elementRef.nativeElement.value;
+        // Only a change of the element itself: a value set in code and not yet written must not be overwritten. An
+        // object counts as changed only with the text, as a custom accessor may build a new one on every read.
+        if (nativeValue !== this.syncedValue && (!isObject(nativeValue) || text !== this.syncedText)) {
+            this.syncedValue = nativeValue;
+            this.syncedText = text;
+            this.value.set(nativeValue);
         }
+        this.emptyValue.set(this.isEmpty());
     }
     /** Checks whether the input is invalid based on the native validation. */
     isBadInput() {
         // 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: "20.3.30", ngImport: i0, type: KbqInputPassword, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", 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: [
+    isEmpty() {
+        return !this.elementRef.nativeElement.value && !this.isBadInput();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInputPassword, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqInputPassword, isStandalone: true, selector: "input[kbqInputPassword]", inputs: { errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "blur": "onBlur()", "focus": "focusChanged(true)", "input": "dirtyCheckNativeValue()" }, properties: { "attr.id": "id()", "attr.type": "elementType()", "attr.placeholder": "placeholder()", "attr.disabled": "disabled() || null", "attr.aria-invalid": "errorState()", "required": "required()" }, classAttribute: "kbq-input kbq-input-password" }, providers: [
             {
                 provide: KbqFormFieldControl,
                 useExisting: KbqInputPassword
             }
-        ], exportAs: ["kbqInputPassword"], usesOnChanges: true, ngImport: i0 }); }
+        ], exportAs: ["kbqInputPassword"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInputPassword, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInputPassword, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[kbqInputPassword]`,
@@ -966,53 +1119,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         class: 'kbq-input kbq-input-password',
                         // Native input properties that are overwritten by Angular inputs need to be synced with
                         // the native input element. Otherwise property bindings for those don't work.
-                        '[attr.id]': 'id',
-                        '[attr.type]': 'elementType',
-                        '[attr.placeholder]': 'placeholder',
-                        '[attr.disabled]': 'disabled || null',
-                        '[required]': 'required',
+                        '[attr.id]': 'id()',
+                        '[attr.type]': 'elementType()',
+                        '[attr.placeholder]': 'placeholder()',
+                        '[attr.disabled]': 'disabled() || null',
+                        '[attr.aria-invalid]': 'errorState()',
+                        '[required]': 'required()',
                         '(blur)': 'onBlur()',
                         '(focus)': 'focusChanged(true)',
-                        '(input)': 'onInput()'
+                        '(input)': 'dirtyCheckNativeValue()'
                     },
                     exportAs: 'kbqInputPassword'
                 }]
-        }], ctorParameters: () => [], propDecorators: { errorStateMatcher: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 class KbqInputModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqInputModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqInputModule, imports: [A11yModule,
             FormsModule,
             KbqIconModule,
             KbqInput,
             KbqNumberInput,
             KbqInputPassword,
             KbqInputMono,
-            MinValidator,
-            MaxValidator], exports: [KbqInput,
+            KbqMinValidator,
+            KbqMaxValidator], exports: [KbqInput,
             KbqNumberInput,
             KbqInputPassword,
             KbqInputMono,
-            MinValidator,
-            MaxValidator,
+            KbqMinValidator,
+            KbqMaxValidator,
             KbqFormFieldModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInputModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInputModule, imports: [A11yModule,
             FormsModule,
             KbqIconModule, KbqFormFieldModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInputModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1023,16 +1165,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqNumberInput,
                         KbqInputPassword,
                         KbqInputMono,
-                        MinValidator,
-                        MaxValidator
+                        KbqMinValidator,
+                        KbqMaxValidator
                     ],
                     exports: [
                         KbqInput,
                         KbqNumberInput,
                         KbqInputPassword,
                         KbqInputMono,
-                        MinValidator,
-                        MaxValidator,
+                        KbqMinValidator,
+                        KbqMaxValidator,
                         KbqFormFieldModule
                     ]
                 }]
@@ -1042,5 +1184,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BIG_STEP, KBQ_INPUT_NUMBER_DEFAULT_CONFIGURATION, KBQ_INPUT_VALUE_ACCESSOR, KBQ_NUMBER_INPUT_VALUE_ACCESSOR, KbqInput, KbqInputModule, KbqInputMono, KbqInputPassword, KbqNumberInput, MAX_VALIDATOR, MIN_VALIDATOR, MaxValidator, MinValidator, SMALL_STEP, add, getPrecision, isDigit, isFloat, isInt, normalizeSplitter };
+export { BIG_STEP, KBQ_INPUT_DEFAULT_LOCALE_CONFIGURATION, KBQ_INPUT_LOCALE_CONFIGURATION, KBQ_INPUT_NUMBER_DEFAULT_CONFIGURATION, KBQ_INPUT_VALUE_ACCESSOR, KBQ_MAX_VALIDATOR, KBQ_MIN_VALIDATOR, KBQ_NUMBER_INPUT_VALUE_ACCESSOR, KbqInput, KbqInputModule, KbqInputMono, KbqInputPassword, KbqMaxValidator, KbqMinValidator, KbqNumberInput, SMALL_STEP, add, getPrecision, isFloat, kbqInputLocaleConfigurationProvider };
 //# sourceMappingURL=koobiq-components-input.mjs.map