@koobiq/components 21.0.1 → 21.1.0

package/fesm2022/koobiq-components-input.mjs

@@ -1,7 +1,7 @@
 import { _IdGenerator, A11yModule } from '@angular/cdk/a11y';
 import { getSupportedInputTypes } from '@angular/cdk/platform';
 import * as i0 from '@angular/core';
-import { InjectionToken, forwardRef, inject, ElementRef, Renderer2, NgZone, DestroyRef, input, booleanAttribute, signal, computed, effect, untracked, Directive, linkedSignal, NgModule } from '@angular/core';
+import { InjectionToken, forwardRef, inject, ElementRef, Renderer2, NgZone, DestroyRef, input, booleanAttribute, signal, computed, effect, untracked, Directive, linkedSignal, isDevMode, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NgControl, NgForm, FormGroupDirective, NG_VALIDATORS, Validators, FormsModule } from '@angular/forms';
 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';
@@ -69,6 +69,9 @@ const numberAttribute = (fallback) => (value) => coerceNumberProperty(value, fal
 function isFloat(value) {
     return /^-?\d+\.\d+$/.test(value);
 }
+function isPastSafeInteger(value) {
+    return Math.abs(value) > Number.MAX_SAFE_INTEGER;
+}
 /**
  * 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.
@@ -139,6 +142,12 @@ class KbqNumberInput {
     get config() {
         return this.localeConfiguration().number;
     }
+    get stepMin() {
+        return Math.max(this.min(), -Number.MAX_SAFE_INTEGER);
+    }
+    get stepMax() {
+        return Math.min(this.max(), Number.MAX_SAFE_INTEGER);
+    }
     constructor() {
         this.elementRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
@@ -182,6 +191,11 @@ class KbqNumberInput {
         this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
             transform: booleanAttribute });
         this.disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the field is read-only: the arrow keys, `kbq-stepper` and a paste leave the value as it is.
+         * `KbqInput` on the same element binds the native attribute. Defaults to `false`.
+         */
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.focused = false;
         /**
          * An unbounded end reports no `aria-value*`: `Infinity` is not a valid ARIA attribute value.
@@ -273,8 +287,10 @@ class KbqNumberInput {
             this.focused = isFocused;
             this.stateChanges.next();
         }
-        if (!isFocused)
+        if (!isFocused) {
+            this.clampToSafeRange();
             this.onTouched();
+        }
     }
     onKeyDown(event) {
         const keyCode = event.keyCode;
@@ -309,6 +325,8 @@ class KbqNumberInput {
         // Ensure that it is not a number and stop the keypress
         if (event.shiftKey || isLetter) {
             event.preventDefault();
+            if (this.readonly())
+                return;
             // process steps
             const step = event.shiftKey ? this.bigStep() : this.step();
             if (keyCode === UP_ARROW) {
@@ -327,6 +345,9 @@ class KbqNumberInput {
         // 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);
+            // Past the limit the text stays as typed: the field clamps it when it loses focus.
+            if (this.isBeyondSafeRange(this.viewValue))
+                return;
             const fromPaste = event.inputType === 'insertFromPaste';
             let formattedValue;
             if (fromPaste) {
@@ -348,6 +369,9 @@ class KbqNumberInput {
         this.pendingReformats.set(handle, reformat);
     }
     onPaste(event) {
+        // The browser fires `paste` on a read-only input too, and the integer branch below writes the value itself.
+        if (this.readonly())
+            return;
         this.valueFromPaste = checkAndNormalizeLocalizedNumber(event.clipboardData?.getData('text'), this.localeService?.localeId());
         if (this.valueFromPaste === null || isNaN(this.valueFromPaste)) {
             event.preventDefault();
@@ -362,7 +386,11 @@ class KbqNumberInput {
     stepUp(step) {
         this.nativeElement.focus();
         this.commitPendingReformats();
-        const res = Math.max(Math.min(add(this.value || 0, step), this.max()), this.min());
+        // A value set past the limit from outside is not moved down by a step up.
+        if (this.value !== null && this.value > Number.MAX_SAFE_INTEGER)
+            return;
+        this.clampToSafeRange();
+        const res = Math.max(Math.min(add(this.value || 0, step), this.stepMax), this.stepMin);
         this.setViewValue(this.formatNumber(res));
         this.valueState.set(res);
         this.cvaOnChange(res);
@@ -371,7 +399,11 @@ class KbqNumberInput {
     stepDown(step) {
         this.nativeElement.focus();
         this.commitPendingReformats();
-        const res = Math.min(Math.max(add(this.value || 0, -step), this.min()), this.max());
+        // A value set below the limit from outside is not moved up by a step down.
+        if (this.value !== null && this.value < -Number.MAX_SAFE_INTEGER)
+            return;
+        this.clampToSafeRange();
+        const res = Math.min(Math.max(add(this.value || 0, -step), this.stepMin), this.stepMax);
         this.setViewValue(this.formatNumber(res));
         this.valueState.set(res);
         this.cvaOnChange(res);
@@ -412,6 +444,17 @@ class KbqNumberInput {
             this.renderer.setProperty(this.nativeElement, 'selectionEnd', cursorPosition);
         }
     }
+    isBeyondSafeRange(text) {
+        return isPastSafeInteger(Number(normalizeNumber(text, this.config)));
+    }
+    clampToSafeRange() {
+        const typed = Number(normalizeNumber(this.viewValue, this.config));
+        if (!isPastSafeInteger(typed))
+            return;
+        const formatted = this.formatNumber(Math.sign(typed) * Number.MAX_SAFE_INTEGER);
+        this.setViewValue(formatted);
+        this.viewToModelUpdate(formatted);
+    }
     /** Writes a value from outside the field: reformats it and reports the change. */
     setValue(value) {
         const oldValue = this.valueState();
@@ -457,13 +500,17 @@ class KbqNumberInput {
         const [intPart, fractionPart] = this.viewValue
             .split(separator)
             .map((valuePart) => normalizeNumber(valuePart, this.config));
-        return this.createLocalizedNumberFromParts(+intPart, fractionPart);
+        const integer = +intPart;
+        // A lone sign before the decimal separator (`-,5`) is no number yet: clear the field, do not print NaN.
+        if (!Number.isFinite(integer))
+            return null;
+        return this.createLocalizedNumberFromParts(integer, fractionPart);
     }
     formatNumber(value) {
-        if (value === null || value === undefined)
+        if (value === null || value === undefined || !Number.isFinite(value))
             return null;
-        const [intPart, fractionPart] = value.toString().split(KBQ_DEFAULT_PRECISION_SEPARATOR);
-        return this.createLocalizedNumberFromParts(+intPart, fractionPart);
+        // The whole value is formatted: `toString()` writes `1.5e-7` with an exponent that `split` would tear apart.
+        return this.createLocalizedNumberFromParts(value === 0 ? 0 : value);
     }
     createLocalizedNumberFromParts(intPart, fractionPart) {
         const formatOptions = {
@@ -486,7 +533,7 @@ class KbqNumberInput {
         return `${formattedIntPart}${this.fractionSeparator}${formattedFractionPart}`;
     }
     /** @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 }); }
+    /** @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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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: "21.2.25", ngImport: i0, type: KbqNumberInput, decorators: [{
             type: Directive,
@@ -512,7 +559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                     ],
                     exportAs: 'kbqNumberInput, kbqNumericalInput'
                 }]
-        }], 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 }] }] } });
+        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
 
 const KBQ_INPUT_VALUE_ACCESSOR = new InjectionToken('KBQ_INPUT_VALUE_ACCESSOR');
 
@@ -592,6 +639,11 @@ class KbqInput {
          * @docs-private
          */
         this.disabled = computed(() => this.formDisabled() ?? this.disabledInput(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the input is read-only: its value can be selected and copied, but not changed. A read-only
+         * input shows no placeholder. Defaults to `false`.
+         */
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** @docs-private */
         this.idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
         /**
@@ -740,7 +792,7 @@ class KbqInput {
         if (KBQ_INPUT_INVALID_TYPES.indexOf(type) > -1) {
             throw getKbqInputUnsupportedTypeError(type);
         }
-        if (this.numberInput && type === 'number' && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+        if (this.numberInput && type === 'number' && isDevMode()) {
             // eslint-disable-next-line no-console
             console.warn(KBQ_NUMBER_INPUT_UNSUPPORTED_TYPE_MESSAGE);
         }
@@ -759,7 +811,7 @@ class KbqInput {
         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: [
+    /** @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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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": "readonly() ? null : placeholder()", "attr.disabled": "disabled() || null", "readonly": "readonly()", "attr.aria-invalid": "errorState()", "required": "required()" }, classAttribute: "kbq-input" }, providers: [
             {
                 provide: KbqFormFieldControl,
                 useExisting: KbqInput
@@ -781,8 +833,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                         // 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.placeholder]': 'readonly() ? null : placeholder()',
                         '[attr.disabled]': 'disabled() || null',
+                        '[readonly]': 'readonly()',
                         '[attr.aria-invalid]': 'errorState()',
                         '[required]': 'required()',
                         '(blur)': 'onBlur()',
@@ -791,7 +844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                     },
                     exportAs: 'kbqInput'
                 }]
-        }], 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 }] }] } });
+        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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: "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 }); }
@@ -968,6 +1021,11 @@ class KbqInputPassword {
          * @docs-private
          */
         this.disabled = computed(() => this.formDisabled() ?? this.disabledInput(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the input is read-only: its value can be selected and copied, but not changed. A read-only
+         * input shows no placeholder. Defaults to `false`.
+         */
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** @docs-private */
         this.idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
         /**
@@ -1098,7 +1156,7 @@ class KbqInputPassword {
         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: [
+    /** @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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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": "readonly() ? null : placeholder()", "attr.disabled": "disabled() || null", "readonly": "readonly()", "attr.aria-invalid": "errorState()", "required": "required()" }, classAttribute: "kbq-input kbq-input-password" }, providers: [
             {
                 provide: KbqFormFieldControl,
                 useExisting: KbqInputPassword
@@ -1121,8 +1179,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                         // the native input element. Otherwise property bindings for those don't work.
                         '[attr.id]': 'id()',
                         '[attr.type]': 'elementType()',
-                        '[attr.placeholder]': 'placeholder()',
+                        '[attr.placeholder]': 'readonly() ? null : placeholder()',
                         '[attr.disabled]': 'disabled() || null',
+                        '[readonly]': 'readonly()',
                         '[attr.aria-invalid]': 'errorState()',
                         '[required]': 'required()',
                         '(blur)': 'onBlur()',
@@ -1131,7 +1190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                     },
                     exportAs: 'kbqInputPassword'
                 }]
-        }], 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 }] }] } });
+        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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: "21.2.25", ngImport: i0, type: KbqInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }