@rt-tools/ui-kit-v2 0.33.0 → 0.34.0

package/fesm2022/rt-tools-ui-kit-v2-input.mjs

@@ -1,20 +1,29 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, computed, forwardRef, inject, input, signal, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, computed, forwardRef, inject, input, output, signal, viewChild } from "@angular/core";
 import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
 import { RT_KIT_LABELS } from "@rt-tools/ui-kit-v2/core";
-import { RtFormControlBase } from "@rt-tools/ui-kit-v2/form-control";
+import { RtFormControlBase, rtMaxlength, rtNotchWidth } from "@rt-tools/ui-kit-v2/form-control";
 import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
 import { RtIconButtonComponent } from "@rt-tools/ui-kit-v2/icon-button";
 import * as i1 from "@rt-tools/ui-kit-v2/radius";
 import { RtRadiusDirective } from "@rt-tools/ui-kit-v2/radius";
 const BEM_BLOCK = "rt-input";
+let floatingLabelSeed = 0;
+function nextFloatingLabelId() {
+	floatingLabelSeed += 1;
+	return `rt-input-label-${floatingLabelSeed}`;
+}
 var RtInputComponent = class RtInputComponent extends RtFormControlBase {
 	constructor() {
 		super(...arguments);
 		this.t = inject(RT_KIT_LABELS);
 		this.fieldEl = viewChild("fieldEl", ...ngDevMode ? [{ debugName: "fieldEl" }] : /* istanbul ignore next */ []);
+		this.floatingLabelEl = viewChild("floatingLabelEl", ...ngDevMode ? [{ debugName: "floatingLabelEl" }] : /* istanbul ignore next */ []);
+		this.notchWidth = rtNotchWidth(this.floatingLabelEl);
 		this.isPasswordVisible = signal(false, ...ngDevMode ? [{ debugName: "isPasswordVisible" }] : /* istanbul ignore next */ []);
 		this.hasValue = computed(() => this.value() !== "", ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
+		this.floatingLabelId = nextFloatingLabelId();
+		this.labelledBy = computed(() => this.floatingLabel() && !this.ariaLabel() ? this.floatingLabelId : null, ...ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []);
 		this.effectiveType = computed(() => {
 			const t = this.type();
 			if (t === "password" && this.passwordToggle() && this.isPasswordVisible()) return "text";
@@ -22,7 +31,10 @@ var RtInputComponent = class RtInputComponent extends RtFormControlBase {
 		}, ...ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []);
 		this.showPasswordToggle = computed(() => this.passwordToggle() && this.type() === "password", ...ngDevMode ? [{ debugName: "showPasswordToggle" }] : /* istanbul ignore next */ []);
 		this.hasIconRight = computed(() => !!this.iconRight() || this.showPasswordToggle(), ...ngDevMode ? [{ debugName: "hasIconRight" }] : /* istanbul ignore next */ []);
+		this.isIconLeftDisabled = computed(() => this.isDisabled() || this.iconLeftDisabled(), ...ngDevMode ? [{ debugName: "isIconLeftDisabled" }] : /* istanbul ignore next */ []);
+		this.isIconRightDisabled = computed(() => this.isDisabled() || this.iconRightDisabled(), ...ngDevMode ? [{ debugName: "isIconRightDisabled" }] : /* istanbul ignore next */ []);
 		this.passwordToggleIcon = computed(() => this.isPasswordVisible() ? "ico-eyeClose" : "ico-eye", ...ngDevMode ? [{ debugName: "passwordToggleIcon" }] : /* istanbul ignore next */ []);
+		this.fieldLabelInside = true;
 		this.appearance = input("outline", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
 		this.displayText = computed(() => this.value(), ...ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []);
 		this.type = input("text", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
@@ -34,6 +46,36 @@ var RtInputComponent = class RtInputComponent extends RtFormControlBase {
 			transform: booleanAttribute
 		});
 		this.autocomplete = input(null, ...ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []);
+		this.maxlength = input(null, {
+			...ngDevMode ? { debugName: "maxlength" } : /* istanbul ignore next */ {},
+			transform: rtMaxlength
+		});
+		this.floatingLabel = input(null, ...ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []);
+		this.iconLeftAction = input(false, {
+			...ngDevMode ? { debugName: "iconLeftAction" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.iconRightAction = input(false, {
+			...ngDevMode ? { debugName: "iconRightAction" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.iconLeftDisabled = input(false, {
+			...ngDevMode ? { debugName: "iconLeftDisabled" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.iconRightDisabled = input(false, {
+			...ngDevMode ? { debugName: "iconRightDisabled" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.iconLeftTooltip = input(null, ...ngDevMode ? [{ debugName: "iconLeftTooltip" }] : /* istanbul ignore next */ []);
+		this.iconRightTooltip = input(null, ...ngDevMode ? [{ debugName: "iconRightTooltip" }] : /* istanbul ignore next */ []);
+		this.iconLeftClick = output();
+		this.iconRightClick = output();
+	}
+	writeValue(value) {
+		super.writeValue(value);
+		const field = this.fieldEl()?.nativeElement;
+		if (field && field.value !== this.value()) field.value = this.value();
 	}
 	getEmptyValue() {
 		return "";
@@ -126,8 +168,68 @@ var RtInputComponent = class RtInputComponent extends RtFormControlBase {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				maxlength: {
+					classPropertyName: "maxlength",
+					publicName: "maxlength",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				floatingLabel: {
+					classPropertyName: "floatingLabel",
+					publicName: "floatingLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconLeftAction: {
+					classPropertyName: "iconLeftAction",
+					publicName: "iconLeftAction",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconRightAction: {
+					classPropertyName: "iconRightAction",
+					publicName: "iconRightAction",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconLeftDisabled: {
+					classPropertyName: "iconLeftDisabled",
+					publicName: "iconLeftDisabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconRightDisabled: {
+					classPropertyName: "iconRightDisabled",
+					publicName: "iconRightDisabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconLeftTooltip: {
+					classPropertyName: "iconLeftTooltip",
+					publicName: "iconLeftTooltip",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconRightTooltip: {
+					classPropertyName: "iconRightTooltip",
+					publicName: "iconRightTooltip",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
+			outputs: {
+				iconLeftClick: "iconLeftClick",
+				iconRightClick: "iconRightClick"
+			},
 			host: {
 				listeners: { "mousedown": "onHostMousedown($event)" },
 				properties: {
@@ -140,7 +242,11 @@ var RtInputComponent = class RtInputComponent extends RtFormControlBase {
 					"class.rt-input--size--sm": "size() === 'sm'",
 					"class.rt-input--size--lg": "size() === 'lg'",
 					"class.rt-input--with-icon-left": "!!iconLeft()",
-					"class.rt-input--with-icon-right": "hasIconRight()"
+					"class.rt-input--with-icon-right": "hasIconRight()",
+					"class.rt-input--floating": "!!floatingLabel()",
+					"class.rt-input--clearable": "clearable()",
+					"style.--rt-input-notch-width": "notchWidth() + 'px'",
+					"class.rt-input--filled": "hasValue()"
 				},
 				classAttribute: "rt-input"
 			},
@@ -154,6 +260,12 @@ var RtInputComponent = class RtInputComponent extends RtFormControlBase {
 				predicate: ["fieldEl"],
 				descendants: true,
 				isSignal: true
+			}, {
+				propertyName: "floatingLabelEl",
+				first: true,
+				predicate: ["floatingLabelEl"],
+				descendants: true,
+				isSignal: true
 			}],
 			usesInheritance: true,
 			hostDirectives: [{
@@ -161,8 +273,12 @@ var RtInputComponent = class RtInputComponent extends RtFormControlBase {
 				inputs: ["radius", "radius"]
 			}],
 			ngImport: i0,
-			template: "<ng-container rtBlock=\"rt-input\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"input-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '—' }}</span>\n    } @else {\n        @if (iconLeft(); as left) {\n            <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n        }\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"input-control\"\n            [type]=\"effectiveType()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"value()\"\n            [disabled]=\"isDisabled()\"\n            [attr.autocomplete]=\"autocomplete()\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\" />\n        @if (showClearButton() && !showPasswordToggle()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"input-clear\"\n                icon=\"ico-close\"\n                size=\"sm\"\n                variant=\"ghost\"\n                iconColor=\"muted\"\n                [ariaLabel]=\"t().uiClear\"\n                [tabIndex]=\"-1\"\n                (clicked)=\"clear($event)\" />\n        }\n        @if (showPasswordToggle()) {\n            <button\n                rtElem=\"toggle\"\n                qa-dataid=\"input-password-toggle\"\n                type=\"button\"\n                [attr.aria-label]=\"isPasswordVisible() ? t().uiHidePassword : t().uiShowPassword\"\n                [tabIndex]=\"-1\"\n                (click)=\"togglePassword()\">\n                <rt-icon size=\"sm\" color=\"muted\" [name]=\"passwordToggleIcon()\" />\n            </button>\n        } @else if (iconRight(); as right) {\n            <rt-icon rtElem=\"icon-right\" size=\"sm\" color=\"muted\" [name]=\"right\" />\n        }\n    }\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-input{--rt-input-box-radius: var(--rt-input-radius);--rt-input-fill-radius: var(--rt-radius-sm);--rt-input-toggle-radius: var(--rt-radius-sm);position:relative;display:inline-flex;width:100%;min-height:var(--rt-input-height);box-sizing:border-box;align-items:center;padding:var(--rt-input-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-box-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);cursor:text;font-size:var(--rt-input-font-size);gap:var(--rt-input-gap);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-input:focus-within{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-input--borderless{border-color:transparent}.rt-input--appearance--fill{border-color:transparent;border-radius:var(--rt-input-fill-radius) var(--rt-input-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input--appearance--fill:where([data-rt-radius]){border-radius:var(--rt-input-box-radius);border-bottom-color:transparent}.rt-input--appearance--pill{--rt-input-box-radius: var(--rt-radius-full);border-color:transparent;background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input--invalid{border-color:var(--rt-input-color-border-error)}.rt-input--invalid:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-input--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-input--size--sm{min-height:var(--rt-input-height-sm)}.rt-input--size--lg{min-height:var(--rt-input-height-lg)}.rt-input--readonly{padding-right:0;padding-left:0;border-color:transparent;background-color:transparent;cursor:default}.rt-input__readonly{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-input__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-input__field{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;color:inherit;font:inherit;outline:none}.rt-input__field::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-input__field:disabled{cursor:not-allowed}.rt-input__icon-left,.rt-input__icon-right,.rt-input__clear{flex-shrink:0}.rt-input__icon-left,.rt-input__icon-right{--rt-icon-color-muted: var(--rt-input-icon-color);min-width:var(--rt-input-icon-size);min-height:var(--rt-input-icon-size)}.rt-input__toggle{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--rt-space-1);border:none;border-radius:var(--rt-input-toggle-radius);margin:0;background:transparent;color:inherit;cursor:pointer}.rt-input__toggle:hover{background-color:var(--rt-input-color-bg-hover)}.rt-input__toggle:focus-visible{outline:var(--rt-input-border-width) solid var(--rt-input-color-border-focus);outline-offset:var(--rt-input-focus-outline-offset)}.rt-input[data-rt-radius=none]{--rt-input-box-radius: var(--rt-radius-none)}.rt-input[data-rt-radius=xs]{--rt-input-box-radius: var(--rt-radius-xs)}.rt-input[data-rt-radius=sm]{--rt-input-box-radius: var(--rt-radius-sm)}.rt-input[data-rt-radius=ms]{--rt-input-box-radius: var(--rt-radius-ms)}.rt-input[data-rt-radius=md]{--rt-input-box-radius: var(--rt-radius-md)}.rt-input[data-rt-radius=lg]{--rt-input-box-radius: var(--rt-radius-lg)}.rt-input[data-rt-radius=xl]{--rt-input-box-radius: var(--rt-radius-xl)}.rt-input[data-rt-radius=\"2xl\"]{--rt-input-box-radius: var(--rt-radius-2xl)}.rt-input[data-rt-radius=full]{--rt-input-box-radius: var(--rt-radius-full)}}\n"],
+			template: "<ng-container rtBlock=\"rt-input\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"input-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '—' }}</span>\n    } @else {\n        @if (iconLeft(); as left) {\n            @if (iconLeftAction()) {\n                <rt-icon-button\n                    rtElem=\"icon-left\"\n                    qa-dataid=\"input-icon-left-action\"\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    iconColor=\"muted\"\n                    [icon]=\"left\"\n                    [ariaLabel]=\"iconLeftTooltip() || left\"\n                    [tooltip]=\"iconLeftTooltip() ?? ''\"\n                    [disabled]=\"isIconLeftDisabled()\"\n                    (clicked)=\"iconLeftClick.emit($event)\" />\n            } @else {\n                <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n            }\n        }\n        @if (floatingLabel(); as label) {\n            <!-- Подпись — картинка поверх поля: клик проходит сквозь неё в поле, имя полю она даёт по aria-labelledby. -->\n            <span #floatingLabelEl rtElem=\"floating-label\" qa-dataid=\"input-floating-label\" aria-hidden=\"true\" [id]=\"floatingLabelId\">\n                {{ label }}\n            </span>\n        }\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"input-control\"\n            [type]=\"effectiveType()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"value()\"\n            [disabled]=\"isDisabled()\"\n            [attr.autocomplete]=\"autocomplete()\"\n            [attr.maxlength]=\"maxlength()\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-labelledby]=\"labelledBy()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\" />\n        @if (showClearButton() && !showPasswordToggle()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"input-clear\"\n                icon=\"ico-close\"\n                size=\"sm\"\n                variant=\"ghost\"\n                iconColor=\"muted\"\n                [ariaLabel]=\"t().uiClear\"\n                [tabIndex]=\"clearTabIndex()\"\n                (clicked)=\"clear($event)\" />\n        }\n        @if (showPasswordToggle()) {\n            <button\n                rtElem=\"toggle\"\n                qa-dataid=\"input-password-toggle\"\n                type=\"button\"\n                [attr.aria-label]=\"isPasswordVisible() ? t().uiHidePassword : t().uiShowPassword\"\n                [tabIndex]=\"-1\"\n                (click)=\"togglePassword()\">\n                <rt-icon size=\"sm\" color=\"muted\" [name]=\"passwordToggleIcon()\" />\n            </button>\n        } @else if (iconRight(); as right) {\n            @if (iconRightAction()) {\n                <rt-icon-button\n                    rtElem=\"icon-right\"\n                    qa-dataid=\"input-icon-right-action\"\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    iconColor=\"muted\"\n                    [icon]=\"right\"\n                    [ariaLabel]=\"iconRightTooltip() || right\"\n                    [tooltip]=\"iconRightTooltip() ?? ''\"\n                    [disabled]=\"isIconRightDisabled()\"\n                    (clicked)=\"iconRightClick.emit($event)\" />\n            } @else {\n                <rt-icon rtElem=\"icon-right\" size=\"sm\" color=\"muted\" [name]=\"right\" />\n            }\n        }\n    }\n</ng-container>\n",
+			styles: [
+				"@charset \"UTF-8\";@layer rt-kit.components{.rt-input{--rt-input-box-radius: var(--rt-input-radius);--rt-input-fill-radius: var(--rt-radius-sm);--rt-input-toggle-radius: var(--rt-radius-sm);--rt-input-floating-label-color: var(--rt-input-color-text-placeholder);--rt-input-floating-label-color-focus: var(--rt-input-color-border-focus);--rt-input-floating-label-color-error: var(--rt-input-color-border-error);--rt-input-floating-label-bg: var(--rt-input-color-bg);--rt-input-floating-label-font-size: var(--rt-text-xs);--rt-input-floating-label-start: var(--rt-input-padding-x);--rt-input-floating-label-rest-start: var(--rt-input-floating-label-start);--rt-input-floating-label-raised-start: var(--rt-input-floating-label-start);--rt-input-notch-start: calc(var(--rt-input-floating-label-raised-start) - var(--rt-space-1) + var(--rt-input-border-width));--rt-input-notch-depth: calc(2 * var(--rt-input-border-width));--rt-input-notch-width: 0px;--rt-input-fill-floating-height: var(--rt-input-height-md);--rt-input-color-border-hover: var(--rt-color-text-primary);--rt-input-floating-label-duration: var(--rt-duration-fast);--rt-input-edge: var(--rt-input-border-width);position:relative;display:inline-flex;width:100%;min-width:var(--rt-input-min-width);min-height:var(--rt-input-height);box-sizing:border-box;align-items:center;padding:var(--rt-input-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-box-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);cursor:text;font-size:var(--rt-input-font-size);gap:var(--rt-input-gap);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-input:focus-within{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):where(:hover:not(:has(:disabled))){border-color:var(--rt-input-color-border-hover)}.rt-input--borderless{border-color:transparent}.rt-input--appearance--fill{--rt-input-edge: var(--rt-input-fill-edge);border-width:var(--rt-input-fill-edge) var(--rt-input-fill-edge) var(--rt-input-border-width);border-color:transparent;border-radius:var(--rt-input-fill-radius) var(--rt-input-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input--appearance--fill:where([data-rt-radius]){border-radius:var(--rt-input-box-radius);border-bottom-color:transparent}.rt-input--appearance--pill{--rt-input-box-radius: var(--rt-radius-full);border-color:transparent;background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input--invalid{border-color:var(--rt-input-color-border-error)}.rt-input--invalid:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-input--appearance--fill:focus-within{box-shadow:var(--rt-input-fill-focus-shadow)}.rt-input--appearance--fill.rt-input--invalid:focus-within{box-shadow:var(--rt-input-fill-focus-shadow-error)}.rt-input--disabled{color:var(--rt-input-color-text-disabled);cursor:not-allowed;opacity:var(--rt-input-disabled-field-opacity)}.rt-input--disabled:not(.rt-input--invalid,.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--borderless,.rt-input--readonly){border-color:var(--rt-input-color-border-disabled)}.rt-input--appearance--fill.rt-input--disabled{background-color:var(--rt-input-fill-color-bg-disabled)}.rt-input--disabled .rt-input__field::placeholder{color:var(--rt-input-color-placeholder-disabled)}.rt-input--size--sm{--rt-input-height: var(--rt-input-height-sm);min-height:var(--rt-input-height-sm)}.rt-input--size--lg{--rt-input-height: var(--rt-input-height-lg);min-height:var(--rt-input-height-lg)}.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]){--rt-input-floating-label-start: calc(var(--rt-input-padding-x) - var(--rt-input-edge));padding-inline:calc(var(--rt-input-padding-x) - var(--rt-input-edge))}.rt-input--readonly{padding-right:0;padding-left:0;border-color:transparent;background-color:transparent;cursor:default}.rt-input__readonly{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-input__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-input__field{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;caret-color:var(--rt-input-caret-color);color:inherit;font:inherit;letter-spacing:var(--rt-input-letter-spacing, normal);outline:none}.rt-input__field::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-input__field:disabled{cursor:not-allowed}.rt-input__icon-left,.rt-input__icon-right,.rt-input__clear{flex-shrink:0}.rt-input__toggle{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--rt-space-1);border:none;border-radius:var(--rt-input-toggle-radius);margin:0;background:transparent;color:inherit;cursor:pointer}.rt-input__toggle:hover{background-color:var(--rt-input-color-bg-hover)}.rt-input__toggle:focus-visible{outline:var(--rt-input-border-width) solid var(--rt-input-color-border-focus);outline-offset:var(--rt-input-focus-outline-offset)}.rt-input[data-rt-radius=none]{--rt-input-box-radius: var(--rt-radius-none)}.rt-input[data-rt-radius=xs]{--rt-input-box-radius: var(--rt-radius-xs)}.rt-input[data-rt-radius=sm]{--rt-input-box-radius: var(--rt-radius-sm)}.rt-input[data-rt-radius=ms]{--rt-input-box-radius: var(--rt-radius-ms)}.rt-input[data-rt-radius=md]{--rt-input-box-radius: var(--rt-radius-md)}.rt-input[data-rt-radius=lg]{--rt-input-box-radius: var(--rt-radius-lg)}.rt-input[data-rt-radius=xl]{--rt-input-box-radius: var(--rt-radius-xl)}.rt-input[data-rt-radius=\"2xl\"]{--rt-input-box-radius: var(--rt-radius-2xl)}.rt-input[data-rt-radius=full]{--rt-input-box-radius: var(--rt-radius-full)}}\n",
+				"@charset \"UTF-8\";@layer rt-kit.components{.rt-input--with-icon-left{--rt-input-floating-label-rest-start: calc( var(--rt-input-floating-label-start) + var(--rt-input-icon-size) + var(--rt-input-gap) )}.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]){--rt-input-floating-label-bg: transparent;--rt-input-floating-label-raised-start: max( var(--rt-input-floating-label-start), calc(min(var(--rt-input-box-radius), var(--rt-input-height) / 2) + var(--rt-space-2)) )}.rt-input--with-icon-left:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(>.rt-input__icon-left){--rt-input-floating-label-rest-start: calc( var(--rt-space-2) + var(--rt-space-1) - var(--rt-input-edge) + var(--rt-input-icon-size) + var(--rt-space-1) )}.rt-input--appearance--fill,.rt-input--appearance--pill{--rt-input-floating-label-bg: var(--rt-color-bg-surface-subtle-2)}.rt-input--appearance--fill{--rt-input-floating-label-raised-start: var(--rt-input-floating-label-start)}.rt-input__floating-label{position:absolute;top:50%;left:var(--rt-input-floating-label-rest-start);display:none;overflow:hidden;max-width:calc(100% - var(--rt-input-floating-label-rest-start) - var(--rt-input-padding-x));color:var(--rt-input-floating-label-color);pointer-events:none;text-overflow:ellipsis;transform:translateY(-50%);transform-origin:left center;transition:top var(--rt-input-floating-label-duration) ease,left var(--rt-input-floating-label-duration) ease,font-size var(--rt-input-floating-label-duration) ease,color var(--rt-input-floating-label-duration) ease;white-space:nowrap}.rt-input:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-input__floating-label{display:block}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--filled,:focus-within) .rt-input__field::placeholder{color:transparent}.rt-input--filled .rt-input__floating-label,.rt-input:focus-within .rt-input__floating-label{top:0;left:var(--rt-input-floating-label-raised-start);max-width:calc(100% - var(--rt-input-floating-label-raised-start) - var(--rt-input-floating-label-start));padding:0 var(--rt-space-1);margin-left:calc(-1 * var(--rt-space-1));background-color:var(--rt-input-floating-label-bg);font-size:var(--rt-input-floating-label-font-size);line-height:1}.rt-input:focus-within .rt-input__floating-label{color:var(--rt-input-floating-label-color-focus)}.rt-input--invalid .rt-input__floating-label{color:var(--rt-input-floating-label-color-error)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--fill,.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--pill{--rt-input-height: var(--rt-input-fill-floating-height)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--fill .rt-input__floating-label,.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--pill .rt-input__floating-label{line-height:var(--rt-leading-tight)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--fill .rt-input__field,.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--pill .rt-input__field{align-self:stretch;padding:calc(var(--rt-input-height) / 2 - var(--rt-space-1) - var(--rt-input-edge)) 0 calc(var(--rt-input-height) / 2 - var(--rt-space-5) - var(--rt-input-border-width));line-height:var(--rt-leading-normal)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--fill.rt-input--filled .rt-input__floating-label,.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--fill:focus-within .rt-input__floating-label,.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--pill.rt-input--filled .rt-input__floating-label,.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--pill:focus-within .rt-input__floating-label{top:calc(var(--rt-input-height) / 2 - var(--rt-space-5) - var(--rt-input-edge));left:var(--rt-input-floating-label-rest-start);padding:0;margin-left:0;background-color:transparent;transform:none}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly){border-color:transparent;box-shadow:none}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly):before{position:absolute;border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:inherit;content:\"\";inset:calc(-1 * var(--rt-input-border-width));pointer-events:none}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly):where(:hover:not(:has(:disabled))):before{border-color:var(--rt-input-color-border-hover)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly):focus-within:before{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly).rt-input--invalid:before{border-color:var(--rt-input-color-border-error)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly).rt-input--invalid:focus-within:before{box-shadow:var(--rt-input-focus-shadow-error)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly).rt-input--borderless:not(:focus-within,.rt-input--invalid):before{border-color:transparent}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly).rt-input--filled:before,.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly):focus-within:before{clip-path:polygon(0 0,var(--rt-input-notch-start) 0,var(--rt-input-notch-start) var(--rt-input-notch-depth),calc(var(--rt-input-notch-start) + var(--rt-input-notch-width)) var(--rt-input-notch-depth),calc(var(--rt-input-notch-start) + var(--rt-input-notch-width)) 0,100% 0,100% 100%,0 100%)}}\n",
+				"@charset \"UTF-8\";@layer rt-kit.components{.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-input__icon-left .rt-icon-button,.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-input__icon-right .rt-icon-button{width:min(var(--rt-icon-button-size, var(--rt-icon-button-size-step)),var(--rt-input-height) - 2 * var(--rt-input-border-width));height:min(var(--rt-icon-button-size, var(--rt-icon-button-size-step)),var(--rt-input-height) - 2 * var(--rt-input-border-width))}.rt-input__icon-left,.rt-input__icon-right{--rt-icon-color-muted: var(--rt-input-icon-color);--rt-icon-step-sm: var(--rt-input-icon-size);min-width:var(--rt-input-icon-size);min-height:var(--rt-input-icon-size)}.rt-input__clear{--rt-icon-color-muted: var(--rt-input-clear-color);--rt-icon-step-sm: var(--rt-input-clear-icon-size);margin-inline-start:var(--rt-input-clear-offset-start)}.rt-input--clearable:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--with-icon-right,.rt-input--readonly){padding-right:calc(var(--rt-space-1) - var(--rt-input-edge))}.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-input__clear .rt-icon-button{width:min(var(--rt-input-clear-size),var(--rt-input-height) - 2 * var(--rt-input-border-width));height:min(var(--rt-input-clear-size),var(--rt-input-height) - 2 * var(--rt-input-border-width))}.rt-input .rt-input__clear .rt-icon-button{--rt-icon-button-radius: var(--rt-input-clear-radius);--rt-icon-button-bg-variant: var(--rt-input-clear-bg);--rt-icon-button-color-bg-hover: var(--rt-input-clear-bg-hover)}.rt-input__clear:last-child{margin-inline-end:var(--rt-input-clear-offset-end)}.rt-input--with-icon-left:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(>.rt-input__icon-left){padding-left:calc(var(--rt-space-2) + var(--rt-space-1) - var(--rt-input-edge))}.rt-input--with-icon-left:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(>.rt-input__icon-left)>.rt-input__icon-left{margin-right:calc(var(--rt-space-1) - var(--rt-input-gap))}.rt-input--with-icon-right:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(>.rt-input__icon-right){padding-right:calc(var(--rt-space-2) + var(--rt-space-1) - var(--rt-input-edge))}.rt-input--with-icon-right:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(>.rt-input__icon-right)>.rt-input__icon-right{margin-left:calc(var(--rt-space-1) - var(--rt-input-gap))}.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material])>.rt-input__icon-left .rt-icon-button,.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material])>.rt-input__icon-right .rt-icon-button{--rt-input-icon-button-width: min( var(--rt-icon-button-size, var(--rt-icon-button-size-step)), calc(var(--rt-input-height) - 2 * var(--rt-input-border-width)) );--rt-input-icon-overhang: calc((var(--rt-input-icon-button-width) - var(--rt-input-icon-size)) / 2);margin-inline:calc(-1 * var(--rt-input-icon-overhang))}}\n"
+			],
 			dependencies: [
 				{
 					kind: "component",
@@ -265,10 +381,18 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class.rt-input--size--lg]": "size() === 'lg'",
 				"[class.rt-input--with-icon-left]": "!!iconLeft()",
 				"[class.rt-input--with-icon-right]": "hasIconRight()",
+				"[class.rt-input--floating]": "!!floatingLabel()",
+				"[class.rt-input--clearable]": "clearable()",
+				"[style.--rt-input-notch-width]": "notchWidth() + 'px'",
+				"[class.rt-input--filled]": "hasValue()",
 				"(mousedown)": "onHostMousedown($event)"
 			},
-			template: "<ng-container rtBlock=\"rt-input\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"input-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '—' }}</span>\n    } @else {\n        @if (iconLeft(); as left) {\n            <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n        }\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"input-control\"\n            [type]=\"effectiveType()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"value()\"\n            [disabled]=\"isDisabled()\"\n            [attr.autocomplete]=\"autocomplete()\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\" />\n        @if (showClearButton() && !showPasswordToggle()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"input-clear\"\n                icon=\"ico-close\"\n                size=\"sm\"\n                variant=\"ghost\"\n                iconColor=\"muted\"\n                [ariaLabel]=\"t().uiClear\"\n                [tabIndex]=\"-1\"\n                (clicked)=\"clear($event)\" />\n        }\n        @if (showPasswordToggle()) {\n            <button\n                rtElem=\"toggle\"\n                qa-dataid=\"input-password-toggle\"\n                type=\"button\"\n                [attr.aria-label]=\"isPasswordVisible() ? t().uiHidePassword : t().uiShowPassword\"\n                [tabIndex]=\"-1\"\n                (click)=\"togglePassword()\">\n                <rt-icon size=\"sm\" color=\"muted\" [name]=\"passwordToggleIcon()\" />\n            </button>\n        } @else if (iconRight(); as right) {\n            <rt-icon rtElem=\"icon-right\" size=\"sm\" color=\"muted\" [name]=\"right\" />\n        }\n    }\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-input{--rt-input-box-radius: var(--rt-input-radius);--rt-input-fill-radius: var(--rt-radius-sm);--rt-input-toggle-radius: var(--rt-radius-sm);position:relative;display:inline-flex;width:100%;min-height:var(--rt-input-height);box-sizing:border-box;align-items:center;padding:var(--rt-input-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-box-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);cursor:text;font-size:var(--rt-input-font-size);gap:var(--rt-input-gap);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-input:focus-within{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-input--borderless{border-color:transparent}.rt-input--appearance--fill{border-color:transparent;border-radius:var(--rt-input-fill-radius) var(--rt-input-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input--appearance--fill:where([data-rt-radius]){border-radius:var(--rt-input-box-radius);border-bottom-color:transparent}.rt-input--appearance--pill{--rt-input-box-radius: var(--rt-radius-full);border-color:transparent;background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input--invalid{border-color:var(--rt-input-color-border-error)}.rt-input--invalid:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-input--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-input--size--sm{min-height:var(--rt-input-height-sm)}.rt-input--size--lg{min-height:var(--rt-input-height-lg)}.rt-input--readonly{padding-right:0;padding-left:0;border-color:transparent;background-color:transparent;cursor:default}.rt-input__readonly{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-input__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-input__field{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;color:inherit;font:inherit;outline:none}.rt-input__field::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-input__field:disabled{cursor:not-allowed}.rt-input__icon-left,.rt-input__icon-right,.rt-input__clear{flex-shrink:0}.rt-input__icon-left,.rt-input__icon-right{--rt-icon-color-muted: var(--rt-input-icon-color);min-width:var(--rt-input-icon-size);min-height:var(--rt-input-icon-size)}.rt-input__toggle{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--rt-space-1);border:none;border-radius:var(--rt-input-toggle-radius);margin:0;background:transparent;color:inherit;cursor:pointer}.rt-input__toggle:hover{background-color:var(--rt-input-color-bg-hover)}.rt-input__toggle:focus-visible{outline:var(--rt-input-border-width) solid var(--rt-input-color-border-focus);outline-offset:var(--rt-input-focus-outline-offset)}.rt-input[data-rt-radius=none]{--rt-input-box-radius: var(--rt-radius-none)}.rt-input[data-rt-radius=xs]{--rt-input-box-radius: var(--rt-radius-xs)}.rt-input[data-rt-radius=sm]{--rt-input-box-radius: var(--rt-radius-sm)}.rt-input[data-rt-radius=ms]{--rt-input-box-radius: var(--rt-radius-ms)}.rt-input[data-rt-radius=md]{--rt-input-box-radius: var(--rt-radius-md)}.rt-input[data-rt-radius=lg]{--rt-input-box-radius: var(--rt-radius-lg)}.rt-input[data-rt-radius=xl]{--rt-input-box-radius: var(--rt-radius-xl)}.rt-input[data-rt-radius=\"2xl\"]{--rt-input-box-radius: var(--rt-radius-2xl)}.rt-input[data-rt-radius=full]{--rt-input-box-radius: var(--rt-radius-full)}}\n"]
+			template: "<ng-container rtBlock=\"rt-input\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"input-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '—' }}</span>\n    } @else {\n        @if (iconLeft(); as left) {\n            @if (iconLeftAction()) {\n                <rt-icon-button\n                    rtElem=\"icon-left\"\n                    qa-dataid=\"input-icon-left-action\"\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    iconColor=\"muted\"\n                    [icon]=\"left\"\n                    [ariaLabel]=\"iconLeftTooltip() || left\"\n                    [tooltip]=\"iconLeftTooltip() ?? ''\"\n                    [disabled]=\"isIconLeftDisabled()\"\n                    (clicked)=\"iconLeftClick.emit($event)\" />\n            } @else {\n                <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n            }\n        }\n        @if (floatingLabel(); as label) {\n            <!-- Подпись — картинка поверх поля: клик проходит сквозь неё в поле, имя полю она даёт по aria-labelledby. -->\n            <span #floatingLabelEl rtElem=\"floating-label\" qa-dataid=\"input-floating-label\" aria-hidden=\"true\" [id]=\"floatingLabelId\">\n                {{ label }}\n            </span>\n        }\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"input-control\"\n            [type]=\"effectiveType()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"value()\"\n            [disabled]=\"isDisabled()\"\n            [attr.autocomplete]=\"autocomplete()\"\n            [attr.maxlength]=\"maxlength()\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-labelledby]=\"labelledBy()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\" />\n        @if (showClearButton() && !showPasswordToggle()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"input-clear\"\n                icon=\"ico-close\"\n                size=\"sm\"\n                variant=\"ghost\"\n                iconColor=\"muted\"\n                [ariaLabel]=\"t().uiClear\"\n                [tabIndex]=\"clearTabIndex()\"\n                (clicked)=\"clear($event)\" />\n        }\n        @if (showPasswordToggle()) {\n            <button\n                rtElem=\"toggle\"\n                qa-dataid=\"input-password-toggle\"\n                type=\"button\"\n                [attr.aria-label]=\"isPasswordVisible() ? t().uiHidePassword : t().uiShowPassword\"\n                [tabIndex]=\"-1\"\n                (click)=\"togglePassword()\">\n                <rt-icon size=\"sm\" color=\"muted\" [name]=\"passwordToggleIcon()\" />\n            </button>\n        } @else if (iconRight(); as right) {\n            @if (iconRightAction()) {\n                <rt-icon-button\n                    rtElem=\"icon-right\"\n                    qa-dataid=\"input-icon-right-action\"\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    iconColor=\"muted\"\n                    [icon]=\"right\"\n                    [ariaLabel]=\"iconRightTooltip() || right\"\n                    [tooltip]=\"iconRightTooltip() ?? ''\"\n                    [disabled]=\"isIconRightDisabled()\"\n                    (clicked)=\"iconRightClick.emit($event)\" />\n            } @else {\n                <rt-icon rtElem=\"icon-right\" size=\"sm\" color=\"muted\" [name]=\"right\" />\n            }\n        }\n    }\n</ng-container>\n",
+			styles: [
+				"@charset \"UTF-8\";@layer rt-kit.components{.rt-input{--rt-input-box-radius: var(--rt-input-radius);--rt-input-fill-radius: var(--rt-radius-sm);--rt-input-toggle-radius: var(--rt-radius-sm);--rt-input-floating-label-color: var(--rt-input-color-text-placeholder);--rt-input-floating-label-color-focus: var(--rt-input-color-border-focus);--rt-input-floating-label-color-error: var(--rt-input-color-border-error);--rt-input-floating-label-bg: var(--rt-input-color-bg);--rt-input-floating-label-font-size: var(--rt-text-xs);--rt-input-floating-label-start: var(--rt-input-padding-x);--rt-input-floating-label-rest-start: var(--rt-input-floating-label-start);--rt-input-floating-label-raised-start: var(--rt-input-floating-label-start);--rt-input-notch-start: calc(var(--rt-input-floating-label-raised-start) - var(--rt-space-1) + var(--rt-input-border-width));--rt-input-notch-depth: calc(2 * var(--rt-input-border-width));--rt-input-notch-width: 0px;--rt-input-fill-floating-height: var(--rt-input-height-md);--rt-input-color-border-hover: var(--rt-color-text-primary);--rt-input-floating-label-duration: var(--rt-duration-fast);--rt-input-edge: var(--rt-input-border-width);position:relative;display:inline-flex;width:100%;min-width:var(--rt-input-min-width);min-height:var(--rt-input-height);box-sizing:border-box;align-items:center;padding:var(--rt-input-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-box-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);cursor:text;font-size:var(--rt-input-font-size);gap:var(--rt-input-gap);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-input:focus-within{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):where(:hover:not(:has(:disabled))){border-color:var(--rt-input-color-border-hover)}.rt-input--borderless{border-color:transparent}.rt-input--appearance--fill{--rt-input-edge: var(--rt-input-fill-edge);border-width:var(--rt-input-fill-edge) var(--rt-input-fill-edge) var(--rt-input-border-width);border-color:transparent;border-radius:var(--rt-input-fill-radius) var(--rt-input-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input--appearance--fill:where([data-rt-radius]){border-radius:var(--rt-input-box-radius);border-bottom-color:transparent}.rt-input--appearance--pill{--rt-input-box-radius: var(--rt-radius-full);border-color:transparent;background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input--invalid{border-color:var(--rt-input-color-border-error)}.rt-input--invalid:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-input--appearance--fill:focus-within{box-shadow:var(--rt-input-fill-focus-shadow)}.rt-input--appearance--fill.rt-input--invalid:focus-within{box-shadow:var(--rt-input-fill-focus-shadow-error)}.rt-input--disabled{color:var(--rt-input-color-text-disabled);cursor:not-allowed;opacity:var(--rt-input-disabled-field-opacity)}.rt-input--disabled:not(.rt-input--invalid,.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--borderless,.rt-input--readonly){border-color:var(--rt-input-color-border-disabled)}.rt-input--appearance--fill.rt-input--disabled{background-color:var(--rt-input-fill-color-bg-disabled)}.rt-input--disabled .rt-input__field::placeholder{color:var(--rt-input-color-placeholder-disabled)}.rt-input--size--sm{--rt-input-height: var(--rt-input-height-sm);min-height:var(--rt-input-height-sm)}.rt-input--size--lg{--rt-input-height: var(--rt-input-height-lg);min-height:var(--rt-input-height-lg)}.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]){--rt-input-floating-label-start: calc(var(--rt-input-padding-x) - var(--rt-input-edge));padding-inline:calc(var(--rt-input-padding-x) - var(--rt-input-edge))}.rt-input--readonly{padding-right:0;padding-left:0;border-color:transparent;background-color:transparent;cursor:default}.rt-input__readonly{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-input__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-input__field{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;caret-color:var(--rt-input-caret-color);color:inherit;font:inherit;letter-spacing:var(--rt-input-letter-spacing, normal);outline:none}.rt-input__field::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-input__field:disabled{cursor:not-allowed}.rt-input__icon-left,.rt-input__icon-right,.rt-input__clear{flex-shrink:0}.rt-input__toggle{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--rt-space-1);border:none;border-radius:var(--rt-input-toggle-radius);margin:0;background:transparent;color:inherit;cursor:pointer}.rt-input__toggle:hover{background-color:var(--rt-input-color-bg-hover)}.rt-input__toggle:focus-visible{outline:var(--rt-input-border-width) solid var(--rt-input-color-border-focus);outline-offset:var(--rt-input-focus-outline-offset)}.rt-input[data-rt-radius=none]{--rt-input-box-radius: var(--rt-radius-none)}.rt-input[data-rt-radius=xs]{--rt-input-box-radius: var(--rt-radius-xs)}.rt-input[data-rt-radius=sm]{--rt-input-box-radius: var(--rt-radius-sm)}.rt-input[data-rt-radius=ms]{--rt-input-box-radius: var(--rt-radius-ms)}.rt-input[data-rt-radius=md]{--rt-input-box-radius: var(--rt-radius-md)}.rt-input[data-rt-radius=lg]{--rt-input-box-radius: var(--rt-radius-lg)}.rt-input[data-rt-radius=xl]{--rt-input-box-radius: var(--rt-radius-xl)}.rt-input[data-rt-radius=\"2xl\"]{--rt-input-box-radius: var(--rt-radius-2xl)}.rt-input[data-rt-radius=full]{--rt-input-box-radius: var(--rt-radius-full)}}\n",
+				"@charset \"UTF-8\";@layer rt-kit.components{.rt-input--with-icon-left{--rt-input-floating-label-rest-start: calc( var(--rt-input-floating-label-start) + var(--rt-input-icon-size) + var(--rt-input-gap) )}.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]){--rt-input-floating-label-bg: transparent;--rt-input-floating-label-raised-start: max( var(--rt-input-floating-label-start), calc(min(var(--rt-input-box-radius), var(--rt-input-height) / 2) + var(--rt-space-2)) )}.rt-input--with-icon-left:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(>.rt-input__icon-left){--rt-input-floating-label-rest-start: calc( var(--rt-space-2) + var(--rt-space-1) - var(--rt-input-edge) + var(--rt-input-icon-size) + var(--rt-space-1) )}.rt-input--appearance--fill,.rt-input--appearance--pill{--rt-input-floating-label-bg: var(--rt-color-bg-surface-subtle-2)}.rt-input--appearance--fill{--rt-input-floating-label-raised-start: var(--rt-input-floating-label-start)}.rt-input__floating-label{position:absolute;top:50%;left:var(--rt-input-floating-label-rest-start);display:none;overflow:hidden;max-width:calc(100% - var(--rt-input-floating-label-rest-start) - var(--rt-input-padding-x));color:var(--rt-input-floating-label-color);pointer-events:none;text-overflow:ellipsis;transform:translateY(-50%);transform-origin:left center;transition:top var(--rt-input-floating-label-duration) ease,left var(--rt-input-floating-label-duration) ease,font-size var(--rt-input-floating-label-duration) ease,color var(--rt-input-floating-label-duration) ease;white-space:nowrap}.rt-input:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-input__floating-label{display:block}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--filled,:focus-within) .rt-input__field::placeholder{color:transparent}.rt-input--filled .rt-input__floating-label,.rt-input:focus-within .rt-input__floating-label{top:0;left:var(--rt-input-floating-label-raised-start);max-width:calc(100% - var(--rt-input-floating-label-raised-start) - var(--rt-input-floating-label-start));padding:0 var(--rt-space-1);margin-left:calc(-1 * var(--rt-space-1));background-color:var(--rt-input-floating-label-bg);font-size:var(--rt-input-floating-label-font-size);line-height:1}.rt-input:focus-within .rt-input__floating-label{color:var(--rt-input-floating-label-color-focus)}.rt-input--invalid .rt-input__floating-label{color:var(--rt-input-floating-label-color-error)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--fill,.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--pill{--rt-input-height: var(--rt-input-fill-floating-height)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--fill .rt-input__floating-label,.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--pill .rt-input__floating-label{line-height:var(--rt-leading-tight)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--fill .rt-input__field,.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--pill .rt-input__field{align-self:stretch;padding:calc(var(--rt-input-height) / 2 - var(--rt-space-1) - var(--rt-input-edge)) 0 calc(var(--rt-input-height) / 2 - var(--rt-space-5) - var(--rt-input-border-width));line-height:var(--rt-leading-normal)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--fill.rt-input--filled .rt-input__floating-label,.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--fill:focus-within .rt-input__floating-label,.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--pill.rt-input--filled .rt-input__floating-label,.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]).rt-input--appearance--pill:focus-within .rt-input__floating-label{top:calc(var(--rt-input-height) / 2 - var(--rt-space-5) - var(--rt-input-edge));left:var(--rt-input-floating-label-rest-start);padding:0;margin-left:0;background-color:transparent;transform:none}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly){border-color:transparent;box-shadow:none}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly):before{position:absolute;border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:inherit;content:\"\";inset:calc(-1 * var(--rt-input-border-width));pointer-events:none}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly):where(:hover:not(:has(:disabled))):before{border-color:var(--rt-input-color-border-hover)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly):focus-within:before{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly).rt-input--invalid:before{border-color:var(--rt-input-color-border-error)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly).rt-input--invalid:focus-within:before{box-shadow:var(--rt-input-focus-shadow-error)}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly).rt-input--borderless:not(:focus-within,.rt-input--invalid):before{border-color:transparent}.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly).rt-input--filled:before,.rt-input--floating:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--appearance--fill,.rt-input--appearance--pill,.rt-input--readonly):focus-within:before{clip-path:polygon(0 0,var(--rt-input-notch-start) 0,var(--rt-input-notch-start) var(--rt-input-notch-depth),calc(var(--rt-input-notch-start) + var(--rt-input-notch-width)) var(--rt-input-notch-depth),calc(var(--rt-input-notch-start) + var(--rt-input-notch-width)) 0,100% 0,100% 100%,0 100%)}}\n",
+				"@charset \"UTF-8\";@layer rt-kit.components{.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-input__icon-left .rt-icon-button,.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-input__icon-right .rt-icon-button{width:min(var(--rt-icon-button-size, var(--rt-icon-button-size-step)),var(--rt-input-height) - 2 * var(--rt-input-border-width));height:min(var(--rt-icon-button-size, var(--rt-icon-button-size-step)),var(--rt-input-height) - 2 * var(--rt-input-border-width))}.rt-input__icon-left,.rt-input__icon-right{--rt-icon-color-muted: var(--rt-input-icon-color);--rt-icon-step-sm: var(--rt-input-icon-size);min-width:var(--rt-input-icon-size);min-height:var(--rt-input-icon-size)}.rt-input__clear{--rt-icon-color-muted: var(--rt-input-clear-color);--rt-icon-step-sm: var(--rt-input-clear-icon-size);margin-inline-start:var(--rt-input-clear-offset-start)}.rt-input--clearable:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-input--with-icon-right,.rt-input--readonly){padding-right:calc(var(--rt-space-1) - var(--rt-input-edge))}.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-input__clear .rt-icon-button{width:min(var(--rt-input-clear-size),var(--rt-input-height) - 2 * var(--rt-input-border-width));height:min(var(--rt-input-clear-size),var(--rt-input-height) - 2 * var(--rt-input-border-width))}.rt-input .rt-input__clear .rt-icon-button{--rt-icon-button-radius: var(--rt-input-clear-radius);--rt-icon-button-bg-variant: var(--rt-input-clear-bg);--rt-icon-button-color-bg-hover: var(--rt-input-clear-bg-hover)}.rt-input__clear:last-child{margin-inline-end:var(--rt-input-clear-offset-end)}.rt-input--with-icon-left:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(>.rt-input__icon-left){padding-left:calc(var(--rt-space-2) + var(--rt-space-1) - var(--rt-input-edge))}.rt-input--with-icon-left:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(>.rt-input__icon-left)>.rt-input__icon-left{margin-right:calc(var(--rt-space-1) - var(--rt-input-gap))}.rt-input--with-icon-right:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(>.rt-input__icon-right){padding-right:calc(var(--rt-space-2) + var(--rt-space-1) - var(--rt-input-edge))}.rt-input--with-icon-right:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):has(>.rt-input__icon-right)>.rt-input__icon-right{margin-left:calc(var(--rt-space-1) - var(--rt-input-gap))}.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material])>.rt-input__icon-left .rt-icon-button,.rt-input:where(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material])>.rt-input__icon-right .rt-icon-button{--rt-input-icon-button-width: min( var(--rt-icon-button-size, var(--rt-icon-button-size-step)), calc(var(--rt-input-height) - 2 * var(--rt-input-border-width)) );--rt-input-icon-overhang: calc((var(--rt-input-icon-button-width) - var(--rt-input-icon-size)) / 2);margin-inline:calc(-1 * var(--rt-input-icon-overhang))}}\n"
+			]
 		}]
 	}],
 	propDecorators: {
@@ -276,6 +400,10 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.ViewChild,
 			args: ["fieldEl", { isSignal: true }]
 		}],
+		floatingLabelEl: [{
+			type: i0.ViewChild,
+			args: ["floatingLabelEl", { isSignal: true }]
+		}],
 		appearance: [{
 			type: i0.Input,
 			args: [{
@@ -331,6 +459,78 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "autocomplete",
 				required: false
 			}]
+		}],
+		maxlength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxlength",
+				required: false
+			}]
+		}],
+		floatingLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "floatingLabel",
+				required: false
+			}]
+		}],
+		iconLeftAction: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconLeftAction",
+				required: false
+			}]
+		}],
+		iconRightAction: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconRightAction",
+				required: false
+			}]
+		}],
+		iconLeftDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconLeftDisabled",
+				required: false
+			}]
+		}],
+		iconRightDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconRightDisabled",
+				required: false
+			}]
+		}],
+		iconLeftTooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconLeftTooltip",
+				required: false
+			}]
+		}],
+		iconRightTooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconRightTooltip",
+				required: false
+			}]
+		}],
+		iconLeftClick: [{
+			type: i0.Output,
+			args: ["iconLeftClick"]
+		}],
+		iconRightClick: [{
+			type: i0.Output,
+			args: ["iconRightClick"]
 		}]
 	}
 });

package/fesm2022/rt-tools-ui-kit-v2-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-input.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/input/rt-input.component.ts","../../../projects/ui-kit-v2/src/lib/components/input/rt-input.component.html"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    forwardRef,\n    inject,\n    input,\n    signal,\n    viewChild,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    InputSignal,\n    InputSignalWithTransform,\n    Signal,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\nimport { RtFormControlBase } from '@rt-tools/ui-kit-v2/form-control';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { IRtInput } from '@rt-tools/ui-kit-v2/core';\n\nconst BEM_BLOCK: string = 'rt-input';\n\n/**\n * Шеренный input common/ui. Поддерживает:\n * - интеграцию с Reactive Forms через общий `RtFormControlBase` (CVA-ядро,\n *   авто-подсветка invalid, `clearable`);\n * - левую и правую иконочные «слоты» (`iconLeft`, `iconRight`);\n * - встроенный password-toggle (`passwordToggle=true` + `type=\"password\"`);\n * - кнопку очистки (крестик) при наличии значения; на password-полях крестик\n *   не показывается (postfix занят toggle'ом).\n *\n * Все размеры/цвета — через `--rt-input-*` semantic-токены.\n */\n@Component({\n    selector: 'rt-input',\n    templateUrl: './rt-input.component.html',\n    styleUrls: ['./rt-input.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconButtonComponent,\n        RtIconComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    providers: [\n        // Алиас базового токена — чтобы rt-field мог найти контрол через\n        // contentChild(RtFormControlBase) (query по абстрактному классу).\n        { provide: RtFormControlBase, useExisting: forwardRef(() => RtInputComponent) },\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-input--disabled]': 'isDisabled()',\n        '[class.rt-input--invalid]': 'isInvalid()',\n        '[class.rt-input--readonly]': 'isReadonly()',\n        '[class.rt-input--borderless]': '!bordered()',\n        '[class.rt-input--appearance--fill]': \"appearance() === 'fill'\",\n        '[class.rt-input--appearance--pill]': \"appearance() === 'pill'\",\n        '[class.rt-input--size--sm]': \"size() === 'sm'\",\n        '[class.rt-input--size--lg]': \"size() === 'lg'\",\n        '[class.rt-input--with-icon-left]': '!!iconLeft()',\n        '[class.rt-input--with-icon-right]': 'hasIconRight()',\n        '(mousedown)': 'onHostMousedown($event)',\n    },\n})\nexport class RtInputComponent extends RtFormControlBase<string> {\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    protected readonly fieldEl: Signal<ElementRef<HTMLInputElement> | undefined> = viewChild<ElementRef<HTMLInputElement>>('fieldEl');\n\n    protected readonly isPasswordVisible: WritableSignal<boolean> = signal<boolean>(false);\n\n    protected readonly hasValue: Signal<boolean> = computed((): boolean => this.value() !== '');\n\n    protected readonly effectiveType: Signal<string> = computed((): string => {\n        const t: IRtInput.Type = this.type();\n        if (t === 'password' && this.passwordToggle() && this.isPasswordVisible()) {\n            return 'text';\n        }\n        return t;\n    });\n\n    protected readonly showPasswordToggle: Signal<boolean> = computed((): boolean => this.passwordToggle() && this.type() === 'password');\n\n    protected readonly hasIconRight: Signal<boolean> = computed((): boolean => !!this.iconRight() || this.showPasswordToggle());\n\n    protected readonly passwordToggleIcon: Signal<IRtIcon.Name> = computed((): IRtIcon.Name =>\n        this.isPasswordVisible() ? 'ico-eyeClose' : 'ico-eye'\n    );\n\n    /** Вид рамки: `outline` — рамка со всех сторон, `fill` — залитое поле с чертой снизу. */\n    public readonly appearance: InputSignal<IRtInput.Appearance> = input<IRtInput.Appearance>('outline');\n\n    public readonly displayText: Signal<string> = computed((): string => this.value());\n\n    public readonly type: InputSignal<IRtInput.Type> = input<IRtInput.Type>('text');\n    public readonly placeholder: InputSignal<string> = input<string>('');\n    public readonly iconLeft: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n    public readonly iconRight: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n    public readonly passwordToggle: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n    public readonly autocomplete: InputSignal<string | null> = input<string | null>(null);\n\n    protected getEmptyValue(): string {\n        return '';\n    }\n\n    protected focusAfterClear(): void {\n        this.fieldEl()?.nativeElement.focus();\n    }\n\n    /**\n     * Падинг/гэп рамки принадлежат host-контейнеру, а не `<input>`, поэтому клик\n     * по этой зоне сам по себе не фокусирует поле. Перехватываем mousedown и\n     * переводим фокус в input — но только если клик не пришёлся на само поле\n     * (там нужно нативное позиционирование курсора) и не на интерактивный\n     * постфикс (крестик/таггл со своими обработчиками).\n     */\n    protected onHostMousedown(event: MouseEvent): void {\n        if (this.isDisabled()) {\n            return;\n        }\n        const field: HTMLInputElement | undefined = this.fieldEl()?.nativeElement;\n        const target: HTMLElement = event.target as HTMLElement;\n        if (!field || target === field || target.closest('button, rt-icon-button')) {\n            return;\n        }\n        event.preventDefault();\n        field.focus();\n    }\n\n    protected onInput(event: Event): void {\n        const target: HTMLInputElement = event.target as HTMLInputElement;\n        const next: string = target.value;\n        this.value.set(next);\n        this.emitChange(next);\n    }\n\n    protected onBlur(): void {\n        this.markTouched();\n    }\n\n    protected togglePassword(): void {\n        this.isPasswordVisible.update((v: boolean): boolean => !v);\n    }\n}\n","<ng-container rtBlock=\"rt-input\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"input-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '—' }}</span>\n    } @else {\n        @if (iconLeft(); as left) {\n            <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n        }\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"input-control\"\n            [type]=\"effectiveType()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"value()\"\n            [disabled]=\"isDisabled()\"\n            [attr.autocomplete]=\"autocomplete()\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\" />\n        @if (showClearButton() && !showPasswordToggle()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"input-clear\"\n                icon=\"ico-close\"\n                size=\"sm\"\n                variant=\"ghost\"\n                iconColor=\"muted\"\n                [ariaLabel]=\"t().uiClear\"\n                [tabIndex]=\"-1\"\n                (clicked)=\"clear($event)\" />\n        }\n        @if (showPasswordToggle()) {\n            <button\n                rtElem=\"toggle\"\n                qa-dataid=\"input-password-toggle\"\n                type=\"button\"\n                [attr.aria-label]=\"isPasswordVisible() ? t().uiHidePassword : t().uiShowPassword\"\n                [tabIndex]=\"-1\"\n                (click)=\"togglePassword()\">\n                <rt-icon size=\"sm\" color=\"muted\" [name]=\"passwordToggleIcon()\" />\n            </button>\n        } @else if (iconRight(); as right) {\n            <rt-icon rtElem=\"icon-right\" size=\"sm\" color=\"muted\" [name]=\"right\" />\n        }\n    }\n</ng-container>\n"],"mappings":"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"}
+{"version":3,"file":"rt-tools-ui-kit-v2-input.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/input/rt-input.component.ts","../../../projects/ui-kit-v2/src/lib/components/input/rt-input.component.html"],"sourcesContent":["import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    forwardRef,\n    inject,\n    input,\n    output,\n    signal,\n    viewChild,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    InputSignal,\n    InputSignalWithTransform,\n    OutputEmitterRef,\n    Signal,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\nimport { rtMaxlength, rtNotchWidth, RtFormControlBase } from '@rt-tools/ui-kit-v2/form-control';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { IRtInput } from '@rt-tools/ui-kit-v2/core';\n\nconst BEM_BLOCK: string = 'rt-input';\n\nlet floatingLabelSeed: number = 0;\n\nfunction nextFloatingLabelId(): string {\n    floatingLabelSeed += 1;\n    return `rt-input-label-${floatingLabelSeed}`;\n}\n\n/**\n * Шеренный input common/ui. Поддерживает:\n * - интеграцию с Reactive Forms через общий `RtFormControlBase` (CVA-ядро,\n *   авто-подсветка invalid, `clearable`);\n * - левую и правую иконочные «слоты» (`iconLeft`, `iconRight`); по `iconLeftAction` /\n *   `iconRightAction` иконка становится кнопкой с подсказкой и своим выходом;\n * - подпись на рамке (`floatingLabel`): у пустого поля в покое лежит на месте подсказки, при\n *   значении или фокусе поднимается на верхнюю рамку, высоту поля не меняет;\n * - встроенный password-toggle (`passwordToggle=true` + `type=\"password\"`);\n * - кнопку очистки (крестик) при наличии значения; на password-полях крестик\n *   не показывается (postfix занят toggle'ом).\n *\n * Все размеры/цвета — через `--rt-input-*` semantic-токены.\n */\n@Component({\n    selector: 'rt-input',\n    templateUrl: './rt-input.component.html',\n    styleUrls: ['./rt-input.component.scss', './rt-input-floating-label.scss', './rt-input-icons.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconButtonComponent,\n        RtIconComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    providers: [\n        // Алиас базового токена — чтобы rt-field мог найти контрол через\n        // contentChild(RtFormControlBase) (query по абстрактному классу).\n        { provide: RtFormControlBase, useExisting: forwardRef(() => RtInputComponent) },\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-input--disabled]': 'isDisabled()',\n        '[class.rt-input--invalid]': 'isInvalid()',\n        '[class.rt-input--readonly]': 'isReadonly()',\n        '[class.rt-input--borderless]': '!bordered()',\n        '[class.rt-input--appearance--fill]': \"appearance() === 'fill'\",\n        '[class.rt-input--appearance--pill]': \"appearance() === 'pill'\",\n        '[class.rt-input--size--sm]': \"size() === 'sm'\",\n        '[class.rt-input--size--lg]': \"size() === 'lg'\",\n        '[class.rt-input--with-icon-left]': '!!iconLeft()',\n        '[class.rt-input--with-icon-right]': 'hasIconRight()',\n        '[class.rt-input--floating]': '!!floatingLabel()',\n        '[class.rt-input--clearable]': 'clearable()',\n        '[style.--rt-input-notch-width]': \"notchWidth() + 'px'\",\n        '[class.rt-input--filled]': 'hasValue()',\n        '(mousedown)': 'onHostMousedown($event)',\n    },\n})\nexport class RtInputComponent extends RtFormControlBase<string> {\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    protected readonly fieldEl: Signal<ElementRef<HTMLInputElement> | undefined> = viewChild<ElementRef<HTMLInputElement>>('fieldEl');\n\n    /** Подпись на рамке: по её ширине материальный набор вырезает разрыв в рамке. `#`-поле `viewChild` не принимает. */\n    protected readonly floatingLabelEl: Signal<ElementRef<HTMLElement> | undefined> = viewChild<ElementRef<HTMLElement>>('floatingLabelEl');\n\n    /** Ширина подписи на рамке, px. */\n    protected readonly notchWidth: Signal<number> = rtNotchWidth(this.floatingLabelEl);\n\n    protected readonly isPasswordVisible: WritableSignal<boolean> = signal<boolean>(false);\n\n    protected readonly hasValue: Signal<boolean> = computed((): boolean => this.value() !== '');\n\n    /** Id подписи на рамке: на него ссылается `aria-labelledby` поля. */\n    protected readonly floatingLabelId: string = nextFloatingLabelId();\n\n    /** Подпись на рамке называет поле, только когда явного `ariaLabel` нет. */\n    protected readonly labelledBy: Signal<string | null> = computed((): string | null =>\n        this.floatingLabel() && !this.ariaLabel() ? this.floatingLabelId : null\n    );\n\n    protected readonly effectiveType: Signal<string> = computed((): string => {\n        const t: IRtInput.Type = this.type();\n        if (t === 'password' && this.passwordToggle() && this.isPasswordVisible()) {\n            return 'text';\n        }\n        return t;\n    });\n\n    protected readonly showPasswordToggle: Signal<boolean> = computed((): boolean => this.passwordToggle() && this.type() === 'password');\n\n    protected readonly hasIconRight: Signal<boolean> = computed((): boolean => !!this.iconRight() || this.showPasswordToggle());\n\n    /** Иконка-кнопка отключена вместе с полем или своим входом. */\n    protected readonly isIconLeftDisabled: Signal<boolean> = computed((): boolean => this.isDisabled() || this.iconLeftDisabled());\n    protected readonly isIconRightDisabled: Signal<boolean> = computed((): boolean => this.isDisabled() || this.iconRightDisabled());\n\n    protected readonly passwordToggleIcon: Signal<IRtIcon.Name> = computed((): IRtIcon.Name =>\n        this.isPasswordVisible() ? 'ico-eyeClose' : 'ico-eye'\n    );\n\n    /** Вид рамки: `outline` — рамка со всех сторон, `fill` — залитое поле с чертой снизу. */\n    public override readonly fieldLabelInside: boolean = true;\n    public readonly appearance: InputSignal<IRtInput.Appearance> = input<IRtInput.Appearance>('outline');\n\n    public readonly displayText: Signal<string> = computed((): string => this.value());\n\n    public readonly type: InputSignal<IRtInput.Type> = input<IRtInput.Type>('text');\n    public readonly placeholder: InputSignal<string> = input<string>('');\n    public readonly iconLeft: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n    public readonly iconRight: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n    public readonly passwordToggle: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n    public readonly autocomplete: InputSignal<string | null> = input<string | null>(null);\n\n    /**\n     * Предел длины значения: уходит атрибутом `maxlength` на поле, и браузер не даёт набрать лишний\n     * знак. `null` — предела нет. Проверку формы вход не заменяет: значение, записанное кодом,\n     * браузер не режет.\n     */\n    public readonly maxlength: InputSignalWithTransform<number | null, NumberInput> = input<number | null, NumberInput>(null, {\n        transform: rtMaxlength,\n    });\n\n    /** Видимая подпись на рамке поля. `null` — подписи нет, поле как прежде. */\n    public readonly floatingLabel: InputSignal<string | null> = input<string | null>(null);\n\n    /** Левая иконка — кнопка: Tab, Enter, Space, нажатие уходит в `iconLeftClick`. */\n    public readonly iconLeftAction: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /**\n     * Правая иконка — кнопка, нажатие уходит в `iconRightClick`. На поле пароля с переключателем\n     * показа не действует: место занято переключателем.\n     */\n    public readonly iconRightAction: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /**\n     * Левая иконка-кнопка отключена, хотя поле доступно: например, поиск, который не ищет, пока\n     * введено меньше трёх знаков. Подсказка у отключённой кнопки остаётся и объясняет почему.\n     */\n    public readonly iconLeftDisabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Правая иконка-кнопка отключена, хотя поле доступно. */\n    public readonly iconRightDisabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Подсказка левой иконки-кнопки; она же её доступное имя. Без неё имя — имя иконки. */\n    public readonly iconLeftTooltip: InputSignal<string | null> = input<string | null>(null);\n\n    /** Подсказка правой иконки-кнопки; она же её доступное имя. */\n    public readonly iconRightTooltip: InputSignal<string | null> = input<string | null>(null);\n\n    /** Нажатие левой иконки-кнопки — мышью или клавишей (браузер шлёт click и на Enter/Space). */\n    public readonly iconLeftClick: OutputEmitterRef<MouseEvent> = output<MouseEvent>();\n\n    /** Нажатие правой иконки-кнопки. */\n    public readonly iconRightClick: OutputEmitterRef<MouseEvent> = output<MouseEvent>();\n\n    /**\n     * Форма может вернуть полю прежнее значение в том же стеке, что и ввод: сигнал тогда равен\n     * последнему отрисованному, привязка `[value]` не срабатывает, и поле остаётся с набранным.\n     * Поэтому расхождение с полем пишется в него сразу.\n     */\n    public override writeValue(value: string | null): void {\n        super.writeValue(value);\n        const field: HTMLInputElement | undefined = this.fieldEl()?.nativeElement;\n        if (field && field.value !== this.value()) {\n            field.value = this.value();\n        }\n    }\n\n    protected getEmptyValue(): string {\n        return '';\n    }\n\n    protected focusAfterClear(): void {\n        this.fieldEl()?.nativeElement.focus();\n    }\n\n    /**\n     * Падинг/гэп рамки принадлежат host-контейнеру, а не `<input>`, поэтому клик\n     * по этой зоне сам по себе не фокусирует поле. Перехватываем mousedown и\n     * переводим фокус в input — но только если клик не пришёлся на само поле\n     * (там нужно нативное позиционирование курсора) и не на интерактивный\n     * постфикс (крестик/таггл со своими обработчиками).\n     */\n    protected onHostMousedown(event: MouseEvent): void {\n        if (this.isDisabled()) {\n            return;\n        }\n        const field: HTMLInputElement | undefined = this.fieldEl()?.nativeElement;\n        const target: HTMLElement = event.target as HTMLElement;\n        if (!field || target === field || target.closest('button, rt-icon-button')) {\n            return;\n        }\n        event.preventDefault();\n        field.focus();\n    }\n\n    protected onInput(event: Event): void {\n        const target: HTMLInputElement = event.target as HTMLInputElement;\n        const next: string = target.value;\n        this.value.set(next);\n        this.emitChange(next);\n    }\n\n    protected onBlur(): void {\n        this.markTouched();\n    }\n\n    protected togglePassword(): void {\n        this.isPasswordVisible.update((v: boolean): boolean => !v);\n    }\n}\n","<ng-container rtBlock=\"rt-input\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"input-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '—' }}</span>\n    } @else {\n        @if (iconLeft(); as left) {\n            @if (iconLeftAction()) {\n                <rt-icon-button\n                    rtElem=\"icon-left\"\n                    qa-dataid=\"input-icon-left-action\"\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    iconColor=\"muted\"\n                    [icon]=\"left\"\n                    [ariaLabel]=\"iconLeftTooltip() || left\"\n                    [tooltip]=\"iconLeftTooltip() ?? ''\"\n                    [disabled]=\"isIconLeftDisabled()\"\n                    (clicked)=\"iconLeftClick.emit($event)\" />\n            } @else {\n                <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n            }\n        }\n        @if (floatingLabel(); as label) {\n            <!-- Подпись — картинка поверх поля: клик проходит сквозь неё в поле, имя полю она даёт по aria-labelledby. -->\n            <span #floatingLabelEl rtElem=\"floating-label\" qa-dataid=\"input-floating-label\" aria-hidden=\"true\" [id]=\"floatingLabelId\">\n                {{ label }}\n            </span>\n        }\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"input-control\"\n            [type]=\"effectiveType()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"value()\"\n            [disabled]=\"isDisabled()\"\n            [attr.autocomplete]=\"autocomplete()\"\n            [attr.maxlength]=\"maxlength()\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-labelledby]=\"labelledBy()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\" />\n        @if (showClearButton() && !showPasswordToggle()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"input-clear\"\n                icon=\"ico-close\"\n                size=\"sm\"\n                variant=\"ghost\"\n                iconColor=\"muted\"\n                [ariaLabel]=\"t().uiClear\"\n                [tabIndex]=\"clearTabIndex()\"\n                (clicked)=\"clear($event)\" />\n        }\n        @if (showPasswordToggle()) {\n            <button\n                rtElem=\"toggle\"\n                qa-dataid=\"input-password-toggle\"\n                type=\"button\"\n                [attr.aria-label]=\"isPasswordVisible() ? t().uiHidePassword : t().uiShowPassword\"\n                [tabIndex]=\"-1\"\n                (click)=\"togglePassword()\">\n                <rt-icon size=\"sm\" color=\"muted\" [name]=\"passwordToggleIcon()\" />\n            </button>\n        } @else if (iconRight(); as right) {\n            @if (iconRightAction()) {\n                <rt-icon-button\n                    rtElem=\"icon-right\"\n                    qa-dataid=\"input-icon-right-action\"\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    iconColor=\"muted\"\n                    [icon]=\"right\"\n                    [ariaLabel]=\"iconRightTooltip() || right\"\n                    [tooltip]=\"iconRightTooltip() ?? ''\"\n                    [disabled]=\"isIconRightDisabled()\"\n                    (clicked)=\"iconRightClick.emit($event)\" />\n            } @else {\n                <rt-icon rtElem=\"icon-right\" size=\"sm\" color=\"muted\" [name]=\"right\" />\n            }\n        }\n    }\n</ng-container>\n"],"mappings":"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"}

package/fesm2022/rt-tools-ui-kit-v2-menu.mjs

@@ -751,6 +751,7 @@ var RtMenuComponent = class RtMenuComponent {
 	}
 	onKeydown(event) {
 		if (event.key === "Escape") {
+			event.stopPropagation();
 			this.close();
 			this.#focusTrigger();
 			return;