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

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

@@ -1,362 +1,468 @@
-import * as i0 from '@angular/core';
-import { inject, LOCALE_ID, 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-number';
-/**
- * Парсит строку в `number | null` по разделителям локали: `groupSep` и любые
- * пробелы удаляются, оставшийся разделитель дробной части приводится к точке.
- *
- * Разбор обязан знать локаль, иначе он расходится с показом: в `en-US` разряды
- * группируются запятой, и набранное `1000` показывалось как `1,000`, а в форму
- * уходила `1` — безусловная замена первой запятой на точку читала разделитель
- * разрядов как десятичный.
- *
- * Пустая строка / NaN → null.
- */
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, LOCALE_ID, 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-number";
 function parseNumber(text, groupSep) {
-    const withoutSpaces = text.replace(/\s/g, '');
-    // Пробельный разделитель разрядов (ru) уже снят предыдущей строкой.
-    const withoutGroups = groupSep.trim() === '' ? withoutSpaces : withoutSpaces.split(groupSep).join('');
-    const cleaned = withoutGroups.replace(/,/g, '.');
-    if (cleaned === '') {
-        return null;
-    }
-    const parsed = parseFloat(cleaned);
-    return Number.isNaN(parsed) ? null : parsed;
+	const withoutSpaces = text.replace(/\s/g, "");
+	const cleaned = (groupSep.trim() === "" ? withoutSpaces : withoutSpaces.split(groupSep).join("")).replace(/,/g, ".");
+	if (cleaned === "") return null;
+	const parsed = parseFloat(cleaned);
+	return Number.isNaN(parsed) ? null : parsed;
 }
-/**
- * Клампит `value` в диапазон `[min, max]`. `null` границы игнорируются —
- * соответствующая сторона остаётся неограниченной.
- */
 function clamp(value, min, max) {
-    let result = value;
-    if (min !== null && result < min) {
-        result = min;
-    }
-    if (max !== null && result > max) {
-        result = max;
-    }
-    return result;
+	let result = value;
+	if (min !== null && result < min) result = min;
+	if (max !== null && result > max) result = max;
+	return result;
 }
-/**
- * Форматирует `number | null` в строку с группировкой разрядов (неразрывный
- * пробел) и заданным fractionDigits diapason. `value === null` → "".
- * `maxFractionDigits` ограничивается сверху 20 (лимит Intl). Итоговый
- * precision = `max(min, min(max, 20))` и фиксирует одинаковую нижнюю/верхнюю
- * границу дробной части (как прежний `toFixed`), меняется только группировка
- * и десятичный разделитель — их даёт `locale`.
- *
- * `grouped === false` снимает разделители разрядов: у года, номера дома и кода
- * разряды значения не несут, и `2026` показывалось как `2 026`.
- */
 function formatNumber(value, minFractionDigits, maxFractionDigits, locale, grouped) {
-    if (value === null) {
-        return '';
-    }
-    const cappedMax = Math.min(maxFractionDigits, 20);
-    const precision = Math.min(20, Math.max(minFractionDigits, cappedMax));
-    return value.toLocaleString(locale, {
-        minimumFractionDigits: precision,
-        maximumFractionDigits: precision,
-        useGrouping: grouped,
-    });
-}
-/**
- * Numeric input с parse/format/clamp logic. Использует native
- * `<input type="text" inputmode="decimal">` (НЕ `type="number"` — избегаем
- * browser spinner quirks: scroll-wheel value changes, locale-specific decimal
- * separators, inconsistent step rounding).
- *
- * CVA через общий `RtFormControlBase` — авто-подсветка invalid, `clearable`
- * (крестик при непустом display). Parser принимает `,`/`.`, невалидный ввод
- * (NaN) не эмитится во время набора; на blur невалидное → null, валидное —
- * clamp + format.
- *
- * Визуально и по токенам идентичен rt-input (`--rt-input-*`): host — box,
- * `<input>` — прозрачный `__field`.
- */
-class RtInputNumberComponent extends RtFormControlBase {
-    constructor() {
-        super(...arguments);
-        this.#locale = inject(LOCALE_ID);
-        // Символ группировки разрядов из локали (для ru — неразрывный пробел). Берём
-        // тот же, что отдаёт toLocaleString на blur — тогда live и blur выглядят
-        // одинаково, а parseNumber (стрипает \s) парсит обратно обе формы.
-        this.#groupSep = (1000).toLocaleString(this.#locale).replace(/\d/g, '') || ' ';
-        /**
-         * Что в этой локали можно набрать как разделитель дробной части: всё из
-         * «.,», кроме того, чем локаль разделяет разряды. В `ru` разряды разделяет
-         * неразрывный пробел, поэтому годятся оба знака; в `en-US` запятая — это
-         * разряды, и десятичной остаётся только точка. Иначе набранное `1,5`
-         * значило бы в показе одно, а в разборе другое.
-         */
-        this.#decimalSepPattern = new RegExp(`[${['.', ','].filter((char) => char !== this.#groupSep).join('')}]`);
-        this.t = inject(RT_KIT_LABELS);
-        this.fieldEl = viewChild('fieldEl', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "fieldEl" }] : /* istanbul ignore next */ []));
-        this.displayValue = signal('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
-        // Крестик показываем только при непустом и ненулевом значении: 0 — это и
-        // есть результат очистки, поэтому при нём кнопка сброса не нужна.
-        this.hasValue = computed(() => this.displayValue() !== '' && this.value() !== null && this.value() !== 0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
-        /** Вид рамки: `outline` — рамка со всех сторон, `fill` — залитое поле с чертой снизу. */
-        this.appearance = input('outline', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-        this.displayText = computed(() => this.displayValue(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
-        this.iconLeft = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "iconLeft" }] : /* istanbul ignore next */ []));
-        /** Текстовый префикс слева от значения (напр. «₽» для рублёвых сумм). */
-        this.prefix = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
-        this.placeholder = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-        this.min = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
-        this.max = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
-        this.minFractionDigits = input(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "minFractionDigits" }] : /* istanbul ignore next */ []));
-        this.maxFractionDigits = input(2, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "maxFractionDigits" }] : /* istanbul ignore next */ []));
-        /**
-         * Группировать ли разряды. Снимается у чисел, которые разрядами не читаются:
-         * год, номер дома, код. У года разделитель превращает `2026` в `2 026`.
-         */
-        this.grouped = input(true, { ...(ngDevMode ? { debugName: "grouped" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    }
-    #locale;
-    // Символ группировки разрядов из локали (для ru — неразрывный пробел). Берём
-    // тот же, что отдаёт toLocaleString на blur — тогда live и blur выглядят
-    // одинаково, а parseNumber (стрипает \s) парсит обратно обе формы.
-    #groupSep;
-    /**
-     * Что в этой локали можно набрать как разделитель дробной части: всё из
-     * «.,», кроме того, чем локаль разделяет разряды. В `ru` разряды разделяет
-     * неразрывный пробел, поэтому годятся оба знака; в `en-US` запятая — это
-     * разряды, и десятичной остаётся только точка. Иначе набранное `1,5`
-     * значило бы в показе одно, а в разборе другое.
-     */
-    #decimalSepPattern;
-    writeValue(value) {
-        super.writeValue(value);
-        this.displayValue.set(formatNumber(this.value(), this.minFractionDigits(), this.maxFractionDigits(), this.#locale, this.grouped()));
-    }
-    getEmptyValue() {
-        return null;
-    }
-    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();
-    }
-    /**
-     * Крестик сбрасывает поле не в пустое/null, а в 0 — отформатированный по
-     * текущему fractionDigits (например `0,00`). Числовые поля всегда имеют
-     * осмысленный ноль, поэтому «очистка» = обнуление, а не пустое значение.
-     */
-    clearValue() {
-        this.value.set(0);
-        this.displayValue.set(formatNumber(0, this.minFractionDigits(), this.maxFractionDigits(), this.#locale, this.grouped()));
-    }
-    onInput(event) {
-        const target = event.target;
-        const raw = target.value;
-        const caret = target.selectionStart ?? raw.length;
-        // Live-группировка разрядов прямо во время набора (1000000 → 1 000 000).
-        const formatted = this.#groupDisplay(raw);
-        const nextCaret = this.#restoreCaret(raw, caret, formatted);
-        // Пишем value императивно ДО Angular CD: тогда повторная запись биндинга
-        // `[value]` будет той же строкой и не сбросит каретку в конец. Затем
-        // восстанавливаем позицию по числу значимых символов слева от курсора.
-        target.value = formatted;
-        target.setSelectionRange(nextCaret, nextCaret);
-        this.displayValue.set(formatted);
-        const parsed = parseNumber(formatted, this.#groupSep);
-        if (parsed === null) {
-            // Только реально пустой ввод → emit null (пользователь очистил поле).
-            // Нечисловой ввод стрипается из отображения, но prev value держится до
-            // blur — поэтому проверяем исходный `raw`, а не очищенный `formatted`.
-            if (raw.trim() === '') {
-                this.value.set(null);
-                this.emitChange(null);
-            }
-            return;
-        }
-        this.value.set(parsed);
-        this.emitChange(parsed);
-    }
-    onBlur() {
-        const parsed = parseNumber(this.displayValue(), this.#groupSep);
-        if (parsed === null) {
-            this.value.set(null);
-            this.displayValue.set('');
-            this.emitChange(null);
-            this.markTouched();
-            return;
-        }
-        const clamped = clamp(parsed, this.min(), this.max());
-        const formatted = formatNumber(clamped, this.minFractionDigits(), this.maxFractionDigits(), this.#locale, this.grouped());
-        // `formatted` содержит разделители локали — обратный парс через
-        // parseNumber (а не parseFloat) даёт округлённое числовое значение.
-        const rounded = parseNumber(formatted, this.#groupSep) ?? clamped;
-        this.value.set(rounded);
-        this.displayValue.set(formatted);
-        this.emitChange(rounded);
-        this.markTouched();
-    }
-    /**
-     * Live-форматирование строки во время набора: целая часть группируется по
-     * разрядам (`#groupSep`), дробная остаётся как набрана (хвостовая запятая и
-     * нули сохраняются, чтобы их можно было дописать). Разделителем дробной
-     * части считается только то, что им может быть в этой локали
-     * (`#decimalSepPattern`), — иначе запятая-разряды в `en-US` читалась бы как
-     * десятичная. Разделитель допускается всегда — округление по
-     * `maxFractionDigits` происходит на blur
-     * (поэтому в целочисленном поле «1000,5» парсится и округлится, а не склеится
-     * в «10005»). Группировка — линейным проходом, а не `Number()`, чтобы не
-     * терять точность на суммах длиннее 2^53.
-     */
-    #groupDisplay(raw) {
-        const negative = raw.trimStart().startsWith('-');
-        let sep = '';
-        let fracDigits = '';
-        let intDigits;
-        const sepIndex = raw.search(this.#decimalSepPattern);
-        if (sepIndex >= 0) {
-            sep = raw.charAt(sepIndex);
-            intDigits = raw.slice(0, sepIndex).replace(/\D/g, '');
-            fracDigits = raw.slice(sepIndex + 1).replace(/\D/g, '');
-        }
-        else {
-            intDigits = raw.replace(/\D/g, '');
-        }
-        // Ведущие нули убираем, но сохраняем один «0» перед десятичным разделителем.
-        intDigits = intDigits.replace(/^0+(?=\d)/, '');
-        let intPart;
-        if (intDigits === '') {
-            intPart = sep === '' ? '' : '0';
-        }
-        else {
-            // Набор идёт тем же видом, что и показ на blur: иначе разделители
-            // появлялись бы при наборе и пропадали после ухода из поля.
-            intPart = this.grouped() ? this.#groupInteger(intDigits) : intDigits;
-        }
-        let out = negative ? `-${intPart}` : intPart;
-        if (sep !== '') {
-            out += sep + fracDigits;
-        }
-        return out;
-    }
-    /**
-     * Группирует строку цифр по три справа налево, вставляя `#groupSep`. Без
-     * регэкспа намеренно — `(\d{3})+`-lookahead флагуется как ReDoS-уязвимый, а
-     * линейный проход и быстрее, и безопасен.
-     */
-    #groupInteger(digits) {
-        const length = digits.length;
-        let out = '';
-        for (let i = 0; i < length; i++) {
-            if (i > 0 && (length - i) % 3 === 0) {
-                out += this.#groupSep;
-            }
-            out += digits.charAt(i);
-        }
-        return out;
-    }
-    /**
-     * Пересчитывает позицию каретки после вставки разделителей разрядов: считает
-     * значимые символы (цифры и десятичный разделитель — не group-separator)
-     * слева от старой каретки и находит ту же точку в новой строке. Иначе курсор
-     * прыгал бы в конец при каждом вставленном пробеле.
-     */
-    #restoreCaret(raw, caret, formatted) {
-        const isAnchor = (ch) => /[\d.,]/.test(ch);
-        let need = 0;
-        for (let i = 0; i < caret && i < raw.length; i++) {
-            if (isAnchor(raw.charAt(i))) {
-                need++;
-            }
-        }
-        if (need === 0) {
-            return formatted.startsWith('-') ? 1 : 0;
-        }
-        let seen = 0;
-        let pos = 0;
-        while (pos < formatted.length) {
-            if (isAnchor(formatted.charAt(pos))) {
-                seen++;
-                if (seen === need) {
-                    pos++;
-                    break;
-                }
-            }
-            pos++;
-        }
-        return pos;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtInputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtInputNumberComponent, isStandalone: true, selector: "rt-input-number", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minFractionDigits: { classPropertyName: "minFractionDigits", publicName: "minFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, maxFractionDigits: { classPropertyName: "maxFractionDigits", publicName: "maxFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "onHostMousedown($event)" }, properties: { "class.rt-input-number--disabled": "isDisabled()", "class.rt-input-number--invalid": "isInvalid()", "class.rt-input-number--readonly": "isReadonly()", "class.rt-input-number--borderless": "!bordered()", "class.rt-input-number--appearance--fill": "appearance() === 'fill'", "class.rt-input-number--appearance--pill": "appearance() === 'pill'", "class.rt-input-number--size--sm": "size() === 'sm'", "class.rt-input-number--size--lg": "size() === 'lg'" }, classAttribute: "rt-input-number" }, providers: [
-            // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
-            { provide: RtFormControlBase, useExisting: forwardRef(() => RtInputNumberComponent) },
-        ], 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-number\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"input-number-readonly\" [rtMod]=\"{ empty: !displayText() }\">\n            @if (prefix() && displayText()) {\n                <span rtElem=\"prefix\" qa-dataid=\"input-number-prefix\">{{ prefix() }}</span>\n            }\n            {{ displayText() || '\u2014' }}\n        </span>\n    } @else {\n        @if (iconLeft(); as left) {\n            <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n        }\n        @if (prefix(); as pfx) {\n            <span rtElem=\"prefix\" qa-dataid=\"input-number-prefix\" aria-hidden=\"true\">{{ pfx }}</span>\n        }\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"input-number-control\"\n            type=\"text\"\n            inputmode=\"decimal\"\n            autocomplete=\"off\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            [attr.placeholder]=\"placeholder()\"\n            [disabled]=\"isDisabled()\"\n            [value]=\"displayValue()\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\" />\n        @if (showClearButton()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"input-number-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    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-input-number{--rt-input-number-radius: var(--rt-input-radius);--rt-input-number-fill-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-number-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-space-sm);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-input-number: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-number--borderless{border-color:transparent}.rt-input-number--appearance--fill{border-color:transparent;border-radius:var(--rt-input-number-fill-radius) var(--rt-input-number-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input-number--appearance--fill:where([data-rt-radius]){border-radius:var(--rt-input-number-radius);border-bottom-color:transparent}.rt-input-number--appearance--pill{--rt-input-number-radius: var(--rt-radius-full);border-color:transparent;background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input-number--invalid{border-color:var(--rt-input-color-border-error)}.rt-input-number--invalid:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-input-number--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-input-number--size--sm{min-height:var(--rt-input-height-sm)}.rt-input-number--size--lg{min-height:var(--rt-input-height-lg)}.rt-input-number--readonly{padding-right:0;padding-left:0;border-color:transparent;background-color:transparent;cursor:default}.rt-input-number__readonly{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-input-number__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-input-number__field{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;color:inherit;font:inherit;outline:none}.rt-input-number__field::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-input-number__field:disabled{cursor:not-allowed}.rt-input-number__icon-left,.rt-input-number__prefix,.rt-input-number__clear{flex-shrink:0}.rt-input-number__prefix{color:var(--rt-color-text-muted);-webkit-user-select:none;user-select:none}.rt-input-number[data-rt-radius=none]{--rt-input-number-radius: var(--rt-radius-none)}.rt-input-number[data-rt-radius=xs]{--rt-input-number-radius: var(--rt-radius-xs)}.rt-input-number[data-rt-radius=sm]{--rt-input-number-radius: var(--rt-radius-sm)}.rt-input-number[data-rt-radius=ms]{--rt-input-number-radius: var(--rt-radius-ms)}.rt-input-number[data-rt-radius=md]{--rt-input-number-radius: var(--rt-radius-md)}.rt-input-number[data-rt-radius=lg]{--rt-input-number-radius: var(--rt-radius-lg)}.rt-input-number[data-rt-radius=xl]{--rt-input-number-radius: var(--rt-radius-xl)}.rt-input-number[data-rt-radius=\"2xl\"]{--rt-input-number-radius: var(--rt-radius-2xl)}.rt-input-number[data-rt-radius=full]{--rt-input-number-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 }); }
+	if (value === null) return "";
+	const precision = Math.min(20, Math.max(minFractionDigits, Math.min(maxFractionDigits, 20)));
+	return value.toLocaleString(locale, {
+		minimumFractionDigits: precision,
+		maximumFractionDigits: precision,
+		useGrouping: grouped
+	});
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtInputNumberComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-input-number', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // standalone components / directives
-                        RtIconButtonComponent,
-                        RtIconComponent,
-                        BlockDirective,
-                        ElemDirective,
-                        ModDirective,
-                    ], providers: [
-                        // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
-                        { provide: RtFormControlBase, useExisting: forwardRef(() => RtInputNumberComponent) },
-                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
-                        class: BEM_BLOCK,
-                        '[class.rt-input-number--disabled]': 'isDisabled()',
-                        '[class.rt-input-number--invalid]': 'isInvalid()',
-                        '[class.rt-input-number--readonly]': 'isReadonly()',
-                        '[class.rt-input-number--borderless]': '!bordered()',
-                        '[class.rt-input-number--appearance--fill]': "appearance() === 'fill'",
-                        '[class.rt-input-number--appearance--pill]': "appearance() === 'pill'",
-                        '[class.rt-input-number--size--sm]': "size() === 'sm'",
-                        '[class.rt-input-number--size--lg]': "size() === 'lg'",
-                        '(mousedown)': 'onHostMousedown($event)',
-                    }, template: "<ng-container rtBlock=\"rt-input-number\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"input-number-readonly\" [rtMod]=\"{ empty: !displayText() }\">\n            @if (prefix() && displayText()) {\n                <span rtElem=\"prefix\" qa-dataid=\"input-number-prefix\">{{ prefix() }}</span>\n            }\n            {{ displayText() || '\u2014' }}\n        </span>\n    } @else {\n        @if (iconLeft(); as left) {\n            <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n        }\n        @if (prefix(); as pfx) {\n            <span rtElem=\"prefix\" qa-dataid=\"input-number-prefix\" aria-hidden=\"true\">{{ pfx }}</span>\n        }\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"input-number-control\"\n            type=\"text\"\n            inputmode=\"decimal\"\n            autocomplete=\"off\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            [attr.placeholder]=\"placeholder()\"\n            [disabled]=\"isDisabled()\"\n            [value]=\"displayValue()\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\" />\n        @if (showClearButton()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"input-number-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    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-input-number{--rt-input-number-radius: var(--rt-input-radius);--rt-input-number-fill-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-number-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-space-sm);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-input-number: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-number--borderless{border-color:transparent}.rt-input-number--appearance--fill{border-color:transparent;border-radius:var(--rt-input-number-fill-radius) var(--rt-input-number-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input-number--appearance--fill:where([data-rt-radius]){border-radius:var(--rt-input-number-radius);border-bottom-color:transparent}.rt-input-number--appearance--pill{--rt-input-number-radius: var(--rt-radius-full);border-color:transparent;background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input-number--invalid{border-color:var(--rt-input-color-border-error)}.rt-input-number--invalid:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-input-number--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-input-number--size--sm{min-height:var(--rt-input-height-sm)}.rt-input-number--size--lg{min-height:var(--rt-input-height-lg)}.rt-input-number--readonly{padding-right:0;padding-left:0;border-color:transparent;background-color:transparent;cursor:default}.rt-input-number__readonly{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-input-number__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-input-number__field{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;color:inherit;font:inherit;outline:none}.rt-input-number__field::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-input-number__field:disabled{cursor:not-allowed}.rt-input-number__icon-left,.rt-input-number__prefix,.rt-input-number__clear{flex-shrink:0}.rt-input-number__prefix{color:var(--rt-color-text-muted);-webkit-user-select:none;user-select:none}.rt-input-number[data-rt-radius=none]{--rt-input-number-radius: var(--rt-radius-none)}.rt-input-number[data-rt-radius=xs]{--rt-input-number-radius: var(--rt-radius-xs)}.rt-input-number[data-rt-radius=sm]{--rt-input-number-radius: var(--rt-radius-sm)}.rt-input-number[data-rt-radius=ms]{--rt-input-number-radius: var(--rt-radius-ms)}.rt-input-number[data-rt-radius=md]{--rt-input-number-radius: var(--rt-radius-md)}.rt-input-number[data-rt-radius=lg]{--rt-input-number-radius: var(--rt-radius-lg)}.rt-input-number[data-rt-radius=xl]{--rt-input-number-radius: var(--rt-radius-xl)}.rt-input-number[data-rt-radius=\"2xl\"]{--rt-input-number-radius: var(--rt-radius-2xl)}.rt-input-number[data-rt-radius=full]{--rt-input-number-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 }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], grouped: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouped", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var RtInputNumberComponent = class RtInputNumberComponent extends RtFormControlBase {
+	constructor() {
+		super(...arguments);
+		this.#locale = inject(LOCALE_ID);
+		this.#groupSep = 1e3.toLocaleString(this.#locale).replace(/\d/g, "") || "\xA0";
+		this.#decimalSepPattern = new RegExp(`[${[".", ","].filter((char) => char !== this.#groupSep).join("")}]`);
+		this.t = inject(RT_KIT_LABELS);
+		this.fieldEl = viewChild("fieldEl", ...ngDevMode ? [{ debugName: "fieldEl" }] : /* istanbul ignore next */ []);
+		this.displayValue = signal("", ...ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []);
+		this.hasValue = computed(() => this.displayValue() !== "" && this.value() !== null && this.value() !== 0, ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
+		this.appearance = input("outline", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+		this.displayText = computed(() => this.displayValue(), ...ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []);
+		this.iconLeft = input(null, ...ngDevMode ? [{ debugName: "iconLeft" }] : /* istanbul ignore next */ []);
+		this.prefix = input(null, ...ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []);
+		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+		this.min = input(null, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
+		this.max = input(null, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+		this.minFractionDigits = input(0, ...ngDevMode ? [{ debugName: "minFractionDigits" }] : /* istanbul ignore next */ []);
+		this.maxFractionDigits = input(2, ...ngDevMode ? [{ debugName: "maxFractionDigits" }] : /* istanbul ignore next */ []);
+		this.grouped = input(true, {
+			...ngDevMode ? { debugName: "grouped" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+	}
+	#locale;
+	#groupSep;
+	#decimalSepPattern;
+	writeValue(value) {
+		super.writeValue(value);
+		this.displayValue.set(formatNumber(this.value(), this.minFractionDigits(), this.maxFractionDigits(), this.#locale, this.grouped()));
+	}
+	getEmptyValue() {
+		return null;
+	}
+	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();
+	}
+	clearValue() {
+		this.value.set(0);
+		this.displayValue.set(formatNumber(0, this.minFractionDigits(), this.maxFractionDigits(), this.#locale, this.grouped()));
+	}
+	onInput(event) {
+		const target = event.target;
+		const raw = target.value;
+		const caret = target.selectionStart ?? raw.length;
+		const formatted = this.#groupDisplay(raw);
+		const nextCaret = this.#restoreCaret(raw, caret, formatted);
+		target.value = formatted;
+		target.setSelectionRange(nextCaret, nextCaret);
+		this.displayValue.set(formatted);
+		const parsed = parseNumber(formatted, this.#groupSep);
+		if (parsed === null) {
+			if (raw.trim() === "") {
+				this.value.set(null);
+				this.emitChange(null);
+			}
+			return;
+		}
+		this.value.set(parsed);
+		this.emitChange(parsed);
+	}
+	onBlur() {
+		const parsed = parseNumber(this.displayValue(), this.#groupSep);
+		if (parsed === null) {
+			this.value.set(null);
+			this.displayValue.set("");
+			this.emitChange(null);
+			this.markTouched();
+			return;
+		}
+		const clamped = clamp(parsed, this.min(), this.max());
+		const formatted = formatNumber(clamped, this.minFractionDigits(), this.maxFractionDigits(), this.#locale, this.grouped());
+		const rounded = parseNumber(formatted, this.#groupSep) ?? clamped;
+		this.value.set(rounded);
+		this.displayValue.set(formatted);
+		this.emitChange(rounded);
+		this.markTouched();
+	}
+	#groupDisplay(raw) {
+		const negative = raw.trimStart().startsWith("-");
+		let sep = "";
+		let fracDigits = "";
+		let intDigits;
+		const sepIndex = raw.search(this.#decimalSepPattern);
+		if (sepIndex >= 0) {
+			sep = raw.charAt(sepIndex);
+			intDigits = raw.slice(0, sepIndex).replace(/\D/g, "");
+			fracDigits = raw.slice(sepIndex + 1).replace(/\D/g, "");
+		} else intDigits = raw.replace(/\D/g, "");
+		intDigits = intDigits.replace(/^0+(?=\d)/, "");
+		let intPart;
+		if (intDigits === "") intPart = sep === "" ? "" : "0";
+		else intPart = this.grouped() ? this.#groupInteger(intDigits) : intDigits;
+		let out = negative ? `-${intPart}` : intPart;
+		if (sep !== "") out += sep + fracDigits;
+		return out;
+	}
+	#groupInteger(digits) {
+		const length = digits.length;
+		let out = "";
+		for (let i = 0; i < length; i++) {
+			if (i > 0 && (length - i) % 3 === 0) out += this.#groupSep;
+			out += digits.charAt(i);
+		}
+		return out;
+	}
+	#restoreCaret(raw, caret, formatted) {
+		const isAnchor = (ch) => /[\d.,]/.test(ch);
+		let need = 0;
+		for (let i = 0; i < caret && i < raw.length; i++) if (isAnchor(raw.charAt(i))) need++;
+		if (need === 0) return formatted.startsWith("-") ? 1 : 0;
+		let seen = 0;
+		let pos = 0;
+		while (pos < formatted.length) {
+			if (isAnchor(formatted.charAt(pos))) {
+				seen++;
+				if (seen === need) {
+					pos++;
+					break;
+				}
+			}
+			pos++;
+		}
+		return pos;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtInputNumberComponent,
+			deps: null,
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtInputNumberComponent,
+			isStandalone: true,
+			selector: "rt-input-number",
+			inputs: {
+				appearance: {
+					classPropertyName: "appearance",
+					publicName: "appearance",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconLeft: {
+					classPropertyName: "iconLeft",
+					publicName: "iconLeft",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				prefix: {
+					classPropertyName: "prefix",
+					publicName: "prefix",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				placeholder: {
+					classPropertyName: "placeholder",
+					publicName: "placeholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				min: {
+					classPropertyName: "min",
+					publicName: "min",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				max: {
+					classPropertyName: "max",
+					publicName: "max",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				minFractionDigits: {
+					classPropertyName: "minFractionDigits",
+					publicName: "minFractionDigits",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxFractionDigits: {
+					classPropertyName: "maxFractionDigits",
+					publicName: "maxFractionDigits",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				grouped: {
+					classPropertyName: "grouped",
+					publicName: "grouped",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: {
+				listeners: { "mousedown": "onHostMousedown($event)" },
+				properties: {
+					"class.rt-input-number--disabled": "isDisabled()",
+					"class.rt-input-number--invalid": "isInvalid()",
+					"class.rt-input-number--readonly": "isReadonly()",
+					"class.rt-input-number--borderless": "!bordered()",
+					"class.rt-input-number--appearance--fill": "appearance() === 'fill'",
+					"class.rt-input-number--appearance--pill": "appearance() === 'pill'",
+					"class.rt-input-number--size--sm": "size() === 'sm'",
+					"class.rt-input-number--size--lg": "size() === 'lg'"
+				},
+				classAttribute: "rt-input-number"
+			},
+			providers: [{
+				provide: RtFormControlBase,
+				useExisting: forwardRef(() => RtInputNumberComponent)
+			}],
+			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-number\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"input-number-readonly\" [rtMod]=\"{ empty: !displayText() }\">\n            @if (prefix() && displayText()) {\n                <span rtElem=\"prefix\" qa-dataid=\"input-number-prefix\">{{ prefix() }}</span>\n            }\n            {{ displayText() || '—' }}\n        </span>\n    } @else {\n        @if (iconLeft(); as left) {\n            <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n        }\n        @if (prefix(); as pfx) {\n            <span rtElem=\"prefix\" qa-dataid=\"input-number-prefix\" aria-hidden=\"true\">{{ pfx }}</span>\n        }\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"input-number-control\"\n            type=\"text\"\n            inputmode=\"decimal\"\n            autocomplete=\"off\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            [attr.placeholder]=\"placeholder()\"\n            [disabled]=\"isDisabled()\"\n            [value]=\"displayValue()\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\" />\n        @if (showClearButton()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"input-number-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    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-input-number{--rt-input-number-radius: var(--rt-input-radius);--rt-input-number-fill-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-number-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-space-sm);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-input-number: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-number--borderless{border-color:transparent}.rt-input-number--appearance--fill{border-color:transparent;border-radius:var(--rt-input-number-fill-radius) var(--rt-input-number-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input-number--appearance--fill:where([data-rt-radius]){border-radius:var(--rt-input-number-radius);border-bottom-color:transparent}.rt-input-number--appearance--pill{--rt-input-number-radius: var(--rt-radius-full);border-color:transparent;background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input-number--invalid{border-color:var(--rt-input-color-border-error)}.rt-input-number--invalid:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-input-number--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-input-number--size--sm{min-height:var(--rt-input-height-sm)}.rt-input-number--size--lg{min-height:var(--rt-input-height-lg)}.rt-input-number--readonly{padding-right:0;padding-left:0;border-color:transparent;background-color:transparent;cursor:default}.rt-input-number__readonly{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-input-number__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-input-number__field{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;color:inherit;font:inherit;outline:none}.rt-input-number__field::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-input-number__field:disabled{cursor:not-allowed}.rt-input-number__icon-left,.rt-input-number__prefix,.rt-input-number__clear{flex-shrink:0}.rt-input-number__prefix{color:var(--rt-color-text-muted);-webkit-user-select:none;user-select:none}.rt-input-number[data-rt-radius=none]{--rt-input-number-radius: var(--rt-radius-none)}.rt-input-number[data-rt-radius=xs]{--rt-input-number-radius: var(--rt-radius-xs)}.rt-input-number[data-rt-radius=sm]{--rt-input-number-radius: var(--rt-radius-sm)}.rt-input-number[data-rt-radius=ms]{--rt-input-number-radius: var(--rt-radius-ms)}.rt-input-number[data-rt-radius=md]{--rt-input-number-radius: var(--rt-radius-md)}.rt-input-number[data-rt-radius=lg]{--rt-input-number-radius: var(--rt-radius-lg)}.rt-input-number[data-rt-radius=xl]{--rt-input-number-radius: var(--rt-radius-xl)}.rt-input-number[data-rt-radius=\"2xl\"]{--rt-input-number-radius: var(--rt-radius-2xl)}.rt-input-number[data-rt-radius=full]{--rt-input-number-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: RtInputNumberComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-input-number",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtIconButtonComponent,
+				RtIconComponent,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			providers: [{
+				provide: RtFormControlBase,
+				useExisting: forwardRef(() => RtInputNumberComponent)
+			}],
+			hostDirectives: [{
+				directive: RtRadiusDirective,
+				inputs: ["radius"]
+			}],
+			host: {
+				class: BEM_BLOCK,
+				"[class.rt-input-number--disabled]": "isDisabled()",
+				"[class.rt-input-number--invalid]": "isInvalid()",
+				"[class.rt-input-number--readonly]": "isReadonly()",
+				"[class.rt-input-number--borderless]": "!bordered()",
+				"[class.rt-input-number--appearance--fill]": "appearance() === 'fill'",
+				"[class.rt-input-number--appearance--pill]": "appearance() === 'pill'",
+				"[class.rt-input-number--size--sm]": "size() === 'sm'",
+				"[class.rt-input-number--size--lg]": "size() === 'lg'",
+				"(mousedown)": "onHostMousedown($event)"
+			},
+			template: "<ng-container rtBlock=\"rt-input-number\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"input-number-readonly\" [rtMod]=\"{ empty: !displayText() }\">\n            @if (prefix() && displayText()) {\n                <span rtElem=\"prefix\" qa-dataid=\"input-number-prefix\">{{ prefix() }}</span>\n            }\n            {{ displayText() || '—' }}\n        </span>\n    } @else {\n        @if (iconLeft(); as left) {\n            <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n        }\n        @if (prefix(); as pfx) {\n            <span rtElem=\"prefix\" qa-dataid=\"input-number-prefix\" aria-hidden=\"true\">{{ pfx }}</span>\n        }\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"input-number-control\"\n            type=\"text\"\n            inputmode=\"decimal\"\n            autocomplete=\"off\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            [attr.placeholder]=\"placeholder()\"\n            [disabled]=\"isDisabled()\"\n            [value]=\"displayValue()\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\" />\n        @if (showClearButton()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"input-number-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    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-input-number{--rt-input-number-radius: var(--rt-input-radius);--rt-input-number-fill-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-number-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-space-sm);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-input-number: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-number--borderless{border-color:transparent}.rt-input-number--appearance--fill{border-color:transparent;border-radius:var(--rt-input-number-fill-radius) var(--rt-input-number-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input-number--appearance--fill:where([data-rt-radius]){border-radius:var(--rt-input-number-radius);border-bottom-color:transparent}.rt-input-number--appearance--pill{--rt-input-number-radius: var(--rt-radius-full);border-color:transparent;background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input-number--invalid{border-color:var(--rt-input-color-border-error)}.rt-input-number--invalid:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-input-number--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-input-number--size--sm{min-height:var(--rt-input-height-sm)}.rt-input-number--size--lg{min-height:var(--rt-input-height-lg)}.rt-input-number--readonly{padding-right:0;padding-left:0;border-color:transparent;background-color:transparent;cursor:default}.rt-input-number__readonly{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-input-number__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-input-number__field{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;color:inherit;font:inherit;outline:none}.rt-input-number__field::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-input-number__field:disabled{cursor:not-allowed}.rt-input-number__icon-left,.rt-input-number__prefix,.rt-input-number__clear{flex-shrink:0}.rt-input-number__prefix{color:var(--rt-color-text-muted);-webkit-user-select:none;user-select:none}.rt-input-number[data-rt-radius=none]{--rt-input-number-radius: var(--rt-radius-none)}.rt-input-number[data-rt-radius=xs]{--rt-input-number-radius: var(--rt-radius-xs)}.rt-input-number[data-rt-radius=sm]{--rt-input-number-radius: var(--rt-radius-sm)}.rt-input-number[data-rt-radius=ms]{--rt-input-number-radius: var(--rt-radius-ms)}.rt-input-number[data-rt-radius=md]{--rt-input-number-radius: var(--rt-radius-md)}.rt-input-number[data-rt-radius=lg]{--rt-input-number-radius: var(--rt-radius-lg)}.rt-input-number[data-rt-radius=xl]{--rt-input-number-radius: var(--rt-radius-xl)}.rt-input-number[data-rt-radius=\"2xl\"]{--rt-input-number-radius: var(--rt-radius-2xl)}.rt-input-number[data-rt-radius=full]{--rt-input-number-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
+			}]
+		}],
+		iconLeft: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconLeft",
+				required: false
+			}]
+		}],
+		prefix: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "prefix",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		minFractionDigits: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minFractionDigits",
+				required: false
+			}]
+		}],
+		maxFractionDigits: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxFractionDigits",
+				required: false
+			}]
+		}],
+		grouped: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "grouped",
+				required: false
+			}]
+		}]
+	}
+});
 export { RtInputNumberComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-input-number.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-input-number.mjs.map