@rt-tools/ui-kit-v2 0.23.3 → 0.24.0

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

@@ -1,144 +1,339 @@
-import * as i0 from '@angular/core';
-import { inject, viewChild, signal, computed, input, booleanAttribute, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } 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 { 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';
-/**
- * Шеренный input common/ui. Поддерживает:
- * - интеграцию с Reactive Forms через общий `RtFormControlBase` (CVA-ядро,
- *   авто-подсветка invalid, `clearable`);
- * - левую и правую иконочные «слоты» (`iconLeft`, `iconRight`);
- * - встроенный password-toggle (`passwordToggle=true` + `type="password"`);
- * - кнопку очистки (крестик) при наличии значения; на password-полях крестик
- *   не показывается (postfix занят toggle'ом).
- *
- * Все размеры/цвета — через `--rt-input-*` semantic-токены.
- */
-class RtInputComponent extends RtFormControlBase {
-    constructor() {
-        super(...arguments);
-        this.t = inject(RT_KIT_LABELS);
-        this.fieldEl = viewChild('fieldEl', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "fieldEl" }] : /* istanbul ignore next */ []));
-        this.isPasswordVisible = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isPasswordVisible" }] : /* istanbul ignore next */ []));
-        this.hasValue = computed(() => this.value() !== '', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
-        this.effectiveType = computed(() => {
-            const t = this.type();
-            if (t === 'password' && this.passwordToggle() && this.isPasswordVisible()) {
-                return 'text';
-            }
-            return t;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
-        this.showPasswordToggle = computed(() => this.passwordToggle() && this.type() === 'password', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showPasswordToggle" }] : /* istanbul ignore next */ []));
-        this.hasIconRight = computed(() => !!this.iconRight() || this.showPasswordToggle(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hasIconRight" }] : /* istanbul ignore next */ []));
-        this.passwordToggleIcon = computed(() => this.isPasswordVisible() ? 'ico-eyeClose' : 'ico-eye', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "passwordToggleIcon" }] : /* istanbul ignore next */ []));
-        /** Вид рамки: `outline` — рамка со всех сторон, `fill` — залитое поле с чертой снизу. */
-        this.appearance = input('outline', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-        this.displayText = computed(() => this.value(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
-        this.type = input('text', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-        this.placeholder = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-        this.iconLeft = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "iconLeft" }] : /* istanbul ignore next */ []));
-        this.iconRight = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "iconRight" }] : /* istanbul ignore next */ []));
-        this.passwordToggle = input(false, { ...(ngDevMode ? { debugName: "passwordToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.autocomplete = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
-    }
-    getEmptyValue() {
-        return '';
-    }
-    focusAfterClear() {
-        this.fieldEl()?.nativeElement.focus();
-    }
-    /**
-     * Падинг/гэп рамки принадлежат host-контейнеру, а не `<input>`, поэтому клик
-     * по этой зоне сам по себе не фокусирует поле. Перехватываем mousedown и
-     * переводим фокус в input — но только если клик не пришёлся на само поле
-     * (там нужно нативное позиционирование курсора) и не на интерактивный
-     * постфикс (крестик/таггл со своими обработчиками).
-     */
-    onHostMousedown(event) {
-        if (this.isDisabled()) {
-            return;
-        }
-        const field = this.fieldEl()?.nativeElement;
-        const target = event.target;
-        if (!field || target === field || target.closest('button, rt-icon-button')) {
-            return;
-        }
-        event.preventDefault();
-        field.focus();
-    }
-    onInput(event) {
-        const target = event.target;
-        const next = target.value;
-        this.value.set(next);
-        this.emitChange(next);
-    }
-    onBlur() {
-        this.markTouched();
-    }
-    togglePassword() {
-        this.isPasswordVisible.update((v) => !v);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtInputComponent, isStandalone: true, selector: "rt-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, passwordToggle: { classPropertyName: "passwordToggle", publicName: "passwordToggle", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "onHostMousedown($event)" }, properties: { "class.rt-input--disabled": "isDisabled()", "class.rt-input--invalid": "isInvalid()", "class.rt-input--readonly": "isReadonly()", "class.rt-input--borderless": "!bordered()", "class.rt-input--appearance--fill": "appearance() === 'fill'", "class.rt-input--appearance--pill": "appearance() === 'pill'", "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()" }, classAttribute: "rt-input" }, providers: [
-            // Алиас базового токена — чтобы rt-field мог найти контрол через
-            // contentChild(RtFormControlBase) (query по абстрактному классу).
-            { provide: RtFormControlBase, useExisting: forwardRef(() => RtInputComponent) },
-        ], viewQueries: [{ propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.RtRadiusDirective, 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() || '\u2014' }}</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"], dependencies: [{ kind: "component", type: 
-                // standalone components / directives
-                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // standalone components / directives
-                        RtIconButtonComponent,
-                        RtIconComponent,
-                        BlockDirective,
-                        ElemDirective,
-                        ModDirective,
-                    ], providers: [
-                        // Алиас базового токена — чтобы rt-field мог найти контрол через
-                        // contentChild(RtFormControlBase) (query по абстрактному классу).
-                        { provide: RtFormControlBase, useExisting: forwardRef(() => RtInputComponent) },
-                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
-                        class: BEM_BLOCK,
-                        '[class.rt-input--disabled]': 'isDisabled()',
-                        '[class.rt-input--invalid]': 'isInvalid()',
-                        '[class.rt-input--readonly]': 'isReadonly()',
-                        '[class.rt-input--borderless]': '!bordered()',
-                        '[class.rt-input--appearance--fill]': "appearance() === 'fill'",
-                        '[class.rt-input--appearance--pill]': "appearance() === 'pill'",
-                        '[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()',
-                        '(mousedown)': 'onHostMousedown($event)',
-                    }, template: "<ng-container rtBlock=\"rt-input\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"input-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</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"] }]
-        }], propDecorators: { fieldEl: [{ type: i0.ViewChild, args: ['fieldEl', { isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], iconRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconRight", required: false }] }], passwordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordToggle", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, computed, forwardRef, inject, input, 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 { 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";
+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.isPasswordVisible = signal(false, ...ngDevMode ? [{ debugName: "isPasswordVisible" }] : /* istanbul ignore next */ []);
+		this.hasValue = computed(() => this.value() !== "", ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
+		this.effectiveType = computed(() => {
+			const t = this.type();
+			if (t === "password" && this.passwordToggle() && this.isPasswordVisible()) return "text";
+			return t;
+		}, ...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.passwordToggleIcon = computed(() => this.isPasswordVisible() ? "ico-eyeClose" : "ico-eye", ...ngDevMode ? [{ debugName: "passwordToggleIcon" }] : /* istanbul ignore next */ []);
+		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 */ []);
+		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+		this.iconLeft = input(null, ...ngDevMode ? [{ debugName: "iconLeft" }] : /* istanbul ignore next */ []);
+		this.iconRight = input(null, ...ngDevMode ? [{ debugName: "iconRight" }] : /* istanbul ignore next */ []);
+		this.passwordToggle = input(false, {
+			...ngDevMode ? { debugName: "passwordToggle" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.autocomplete = input(null, ...ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []);
+	}
+	getEmptyValue() {
+		return "";
+	}
+	focusAfterClear() {
+		this.fieldEl()?.nativeElement.focus();
+	}
+	onHostMousedown(event) {
+		if (this.isDisabled()) return;
+		const field = this.fieldEl()?.nativeElement;
+		const target = event.target;
+		if (!field || target === field || target.closest("button, rt-icon-button")) return;
+		event.preventDefault();
+		field.focus();
+	}
+	onInput(event) {
+		const next = event.target.value;
+		this.value.set(next);
+		this.emitChange(next);
+	}
+	onBlur() {
+		this.markTouched();
+	}
+	togglePassword() {
+		this.isPasswordVisible.update((v) => !v);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtInputComponent,
+			deps: null,
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtInputComponent,
+			isStandalone: true,
+			selector: "rt-input",
+			inputs: {
+				appearance: {
+					classPropertyName: "appearance",
+					publicName: "appearance",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				type: {
+					classPropertyName: "type",
+					publicName: "type",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				placeholder: {
+					classPropertyName: "placeholder",
+					publicName: "placeholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconLeft: {
+					classPropertyName: "iconLeft",
+					publicName: "iconLeft",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconRight: {
+					classPropertyName: "iconRight",
+					publicName: "iconRight",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				passwordToggle: {
+					classPropertyName: "passwordToggle",
+					publicName: "passwordToggle",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				autocomplete: {
+					classPropertyName: "autocomplete",
+					publicName: "autocomplete",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: {
+				listeners: { "mousedown": "onHostMousedown($event)" },
+				properties: {
+					"class.rt-input--disabled": "isDisabled()",
+					"class.rt-input--invalid": "isInvalid()",
+					"class.rt-input--readonly": "isReadonly()",
+					"class.rt-input--borderless": "!bordered()",
+					"class.rt-input--appearance--fill": "appearance() === 'fill'",
+					"class.rt-input--appearance--pill": "appearance() === 'pill'",
+					"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()"
+				},
+				classAttribute: "rt-input"
+			},
+			providers: [{
+				provide: RtFormControlBase,
+				useExisting: forwardRef(() => RtInputComponent)
+			}],
+			viewQueries: [{
+				propertyName: "fieldEl",
+				first: true,
+				predicate: ["fieldEl"],
+				descendants: true,
+				isSignal: true
+			}],
+			usesInheritance: true,
+			hostDirectives: [{
+				directive: i1.RtRadiusDirective,
+				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"],
+			dependencies: [
+				{
+					kind: "component",
+					type: RtIconButtonComponent,
+					selector: "rt-icon-button",
+					inputs: [
+						"icon",
+						"glyph",
+						"ariaLabel",
+						"variant",
+						"iconColor",
+						"iconFill",
+						"size",
+						"iconSize",
+						"type",
+						"tooltip",
+						"tooltipHideOnClick",
+						"tabIndex",
+						"loading",
+						"disabled",
+						"active",
+						"expanded",
+						"indicator"
+					],
+					outputs: ["clicked"]
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-input",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtIconButtonComponent,
+				RtIconComponent,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			providers: [{
+				provide: RtFormControlBase,
+				useExisting: forwardRef(() => RtInputComponent)
+			}],
+			hostDirectives: [{
+				directive: RtRadiusDirective,
+				inputs: ["radius"]
+			}],
+			host: {
+				class: BEM_BLOCK,
+				"[class.rt-input--disabled]": "isDisabled()",
+				"[class.rt-input--invalid]": "isInvalid()",
+				"[class.rt-input--readonly]": "isReadonly()",
+				"[class.rt-input--borderless]": "!bordered()",
+				"[class.rt-input--appearance--fill]": "appearance() === 'fill'",
+				"[class.rt-input--appearance--pill]": "appearance() === 'pill'",
+				"[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()",
+				"(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"]
+		}]
+	}],
+	propDecorators: {
+		fieldEl: [{
+			type: i0.ViewChild,
+			args: ["fieldEl", { isSignal: true }]
+		}],
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		iconLeft: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconLeft",
+				required: false
+			}]
+		}],
+		iconRight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconRight",
+				required: false
+			}]
+		}],
+		passwordToggle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "passwordToggle",
+				required: false
+			}]
+		}],
+		autocomplete: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autocomplete",
+				required: false
+			}]
+		}]
+	}
+});
 export { RtInputComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-input.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-input.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-input.mjs","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","../../../projects/ui-kit-v2/src/lib/components/input/rt-tools-ui-kit-v2-input.ts"],"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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"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 } 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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"}