@taiga-ui/kit 4.65.0 → 5.0.0-rc.0

package/fesm2022/taiga-ui-kit-components-input-number.mjs

@@ -1,32 +1,37 @@
+import { TuiLabel } from '@taiga-ui/core/components/label';
+import { TUI_TEXTFIELD_OPTIONS, TuiTextfieldContent, TuiTextfieldComponent, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
+import { TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
 import * as i0 from '@angular/core';
-import { inject, signal, computed, effect, untracked, Directive, Input, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
-import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i2 from '@maskito/angular';
+import { inject, input, computed, effect, Directive, untracked, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { maskitoNumberOptionsGenerator, maskitoStringifyNumber, maskitoCaretGuard, maskitoParseNumber } from '@maskito/kit';
+import { WA_IS_IOS } from '@ng-web-apis/platform';
+import { TuiValueTransformer, TUI_IDENTITY_VALUE_TRANSFORMER, TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
+import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
+import * as i1$1 from '@taiga-ui/core/components/input';
+import { TuiInputDirective, TuiWithInput } from '@taiga-ui/core/components/input';
+import * as i1 from '@maskito/angular';
 import { MaskitoDirective } from '@maskito/angular';
 import { maskitoTransform } from '@maskito/core';
-import { maskitoParseNumber, maskitoNumberOptionsGenerator, maskitoCaretGuard } from '@maskito/kit';
-import { TuiControl, tuiAsControl, tuiValueTransformerFrom, TuiValueTransformer } from '@taiga-ui/cdk/classes';
-import { TUI_ALLOW_SIGNAL_WRITES, CHAR_MINUS, CHAR_HYPHEN } from '@taiga-ui/cdk/constants';
-import { TUI_IS_IOS } from '@taiga-ui/cdk/tokens';
-import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
-import { tuiIsSafeToRound, tuiRound, tuiClamp } from '@taiga-ui/cdk/utils/math';
-import * as i1 from '@taiga-ui/core/components/textfield';
-import { TuiTextfieldDirective, TuiWithTextfield, TUI_TEXTFIELD_OPTIONS, TuiTextfieldContent } from '@taiga-ui/core/components/textfield';
-import { TUI_NUMBER_FORMAT, TUI_DEFAULT_NUMBER_FORMAT } from '@taiga-ui/core/tokens';
-import { tuiFormatNumber, tuiGetFractionPartPadded } from '@taiga-ui/core/utils/format';
+import { TUI_NUMBER_FORMAT } from '@taiga-ui/core/tokens';
 import { tuiMaskito } from '@taiga-ui/kit/utils';
-import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
-import { tuiProvide } from '@taiga-ui/cdk/utils/miscellaneous';
+import { CHAR_MINUS } from '@taiga-ui/cdk/constants';
+import { tuiCreateOptions, tuiProvide } from '@taiga-ui/cdk/utils/di';
+import { tuiRound, tuiIsSafeToRound, tuiClamp } from '@taiga-ui/cdk/utils/math';
+import { tuiGetFractionPartPadded } from '@taiga-ui/core/utils/format';
 import { TUI_FLOATING_PRECISION } from '@taiga-ui/kit/components/slider';
-import { DOCUMENT, NgIf } from '@angular/common';
+import { identity, merge, fromEvent, Subject, switchMap, timer, expand, map, takeUntil } from 'rxjs';
+import { DOCUMENT } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TuiButton } from '@taiga-ui/core/components/button';
-import { Subject, merge, fromEvent, switchMap, timer, expand, map, takeUntil } from 'rxjs';
+import * as i1$2 from '@taiga-ui/kit/directives/appearance-proxy';
+import { TuiAppearanceProxy } from '@taiga-ui/kit/directives/appearance-proxy';
 
 const TUI_INPUT_NUMBER_DEFAULT_OPTIONS = {
     min: Number.MIN_SAFE_INTEGER,
     max: Number.MAX_SAFE_INTEGER,
     prefix: '',
     postfix: '',
+    minusSign: CHAR_MINUS,
     step: 0,
     icons: {
         increase: '@tui.plus',
@@ -36,131 +41,53 @@ const TUI_INPUT_NUMBER_DEFAULT_OPTIONS = {
 };
 const [TUI_INPUT_NUMBER_OPTIONS, tuiInputNumberOptionsProvider] = tuiCreateOptions(TUI_INPUT_NUMBER_DEFAULT_OPTIONS);
 
-const DEFAULT_MAX_LENGTH = 18;
-class TuiInputNumberDirective extends TuiControl {
+class TuiNumberMask {
     constructor() {
-        super(...arguments);
         this.options = inject(TUI_INPUT_NUMBER_OPTIONS);
-        this.textfield = inject(TuiTextfieldDirective);
-        this.isIOS = inject(TUI_IS_IOS);
-        this.minRaw = signal(this.options.min);
-        this.maxRaw = signal(this.options.max);
-        this.numberFormat = toSignal(inject(TUI_NUMBER_FORMAT), {
-            initialValue: TUI_DEFAULT_NUMBER_FORMAT,
+        this.numberFormat = inject(TUI_NUMBER_FORMAT);
+        this.input = inject(TuiInputDirective);
+        this.prefix = input(this.options.prefix);
+        this.postfix = input(this.options.postfix);
+        this.maximumFractionDigits = computed((precision = this.numberFormat().precision) => Number.isNaN(precision) ? 2 : precision);
+        this.min = input(this.options.min, {
+            transform: (x) => x ?? this.options.min,
         });
-        this.formatted = computed(() => maskitoParseNumber(this.textfield.value(), this.numberFormat()));
-        this.precision = computed((precision = this.numberFormat().precision) => Number.isNaN(precision) ? 2 : precision);
-        this.unfinished = computed((value = this.formatted()) => value < 0 ? value > this.max() : value < this.min());
-        this.element = tuiInjectElement();
-        this.mask = tuiMaskito(computed(() => this.computeMask(this.maskParams)));
-        this.inputMode = computed(() => {
-            if (this.isIOS) {
-                return this.min() < 0
-                    ? 'text' // iPhone does not have minus sign if inputMode equals to 'numeric' / 'decimal'
-                    : 'decimal';
-            }
-            /**
-             * Samsung Keyboard does not minus sign for `inputmode=decimal`
-             * @see https://github.com/taiga-family/taiga-ui/issues/11061#issuecomment-2939103792
-             */
-            return 'numeric';
+        this.max = input(this.options.max, {
+            transform: (x) => x ?? this.options.max,
         });
-        this.defaultMaxLength = computed(() => {
-            const { decimalSeparator, thousandSeparator } = this.numberFormat();
-            const decimalPart = !!this.precision() && this.textfield.value().includes(decimalSeparator);
-            const precision = decimalPart ? Math.min(this.precision() + 1, 20) : 0;
-            const takeThousand = thousandSeparator.repeat(5).length;
-            const affixes = this.prefix().length + this.postfix().length;
-            return DEFAULT_MAX_LENGTH + precision + takeThousand + affixes;
+        this.params = computed(() => {
+            const { decimalMode, ...numberFormat } = this.numberFormat();
+            const maximumFractionDigits = this.maximumFractionDigits();
+            return {
+                ...numberFormat,
+                ...this.options,
+                maximumFractionDigits,
+                min: this.min(),
+                max: this.max(),
+                prefix: this.prefix(),
+                postfix: this.postfix(),
+                minimumFractionDigits: decimalMode === 'always' ? maximumFractionDigits : 0,
+            };
         });
-        this.onChangeEffect = effect(() => {
-            const value = this.formatted();
-            if (Number.isNaN(value)) {
-                this.onChange(null);
-                return;
-            }
-            if (this.unfinished() ||
-                value < this.min() ||
-                value > this.max() ||
-                this.value() === value) {
-                return;
-            }
-            this.onChange(value);
-        }, TUI_ALLOW_SIGNAL_WRITES);
-        this.maskInitialCalibrationEffect = effect(() => {
+        this.mask = tuiMaskito(computed(() => this.computeMask(this.params())));
+        this.maskInitialCalibration = effect(() => {
             const options = maskitoNumberOptionsGenerator({
-                ...this.maskParams,
-                min: Number.MIN_SAFE_INTEGER,
-                max: Number.MAX_SAFE_INTEGER,
+                ...this.params(),
+                min: -Infinity,
+                max: Infinity,
             });
-            this.textfield.value.update((x) => maskitoTransform(x, options));
-        }, TUI_ALLOW_SIGNAL_WRITES);
-        this.min = computed(() => Math.min(this.minRaw(), this.maxRaw()));
-        this.max = computed(() => Math.max(this.minRaw(), this.maxRaw()));
-        this.prefix = signal(this.options.prefix);
-        this.postfix = signal(this.options.postfix);
-    }
-    set minSetter(x) {
-        this.minRaw.set(this.transformer.fromControlValue(x ?? this.options.min));
-    }
-    set maxSetter(x) {
-        this.maxRaw.set(this.transformer.fromControlValue(x ?? this.options.max));
-    }
-    // TODO(v5): replace with signal input
-    set prefixSetter(x) {
-        this.prefix.set(x);
-    }
-    // TODO(v5): replace with signal input
-    set postfixSetter(x) {
-        this.postfix.set(x);
-    }
-    writeValue(value) {
-        const reset = this.control.pristine && this.control.untouched && !value;
-        const changed = untracked(() => value !== this.value());
-        if (changed || reset) {
-            super.writeValue(value);
-            untracked(() => this.setValue(this.value()));
-        }
-    }
-    setValue(value) {
-        this.textfield.value.set(this.formatNumber(value));
-    }
-    onFocus() {
-        if (Number.isNaN(this.formatted()) && !this.readOnly()) {
-            this.textfield.value.set(this.prefix() + this.postfix());
-        }
-    }
-    get maskParams() {
-        const { decimalMode, ...numberFormat } = this.numberFormat();
-        const maximumFractionDigits = this.precision();
-        return {
-            ...numberFormat,
-            maximumFractionDigits,
-            min: this.min(),
-            max: this.max(),
-            prefix: this.prefix(),
-            postfix: this.postfix(),
-            minimumFractionDigits: decimalMode === 'always' ? maximumFractionDigits : 0,
-        };
+            this.input.value.update((x) => maskitoTransform(x, options));
+        });
     }
-    formatNumber(value) {
-        if (value === null || Number.isNaN(value)) {
-            return '';
-        }
-        return ((this.prefix() !== CHAR_MINUS ? this.prefix() : '') +
-            tuiFormatNumber(value, {
-                ...this.numberFormat(),
-                /**
-                 * Number can satisfy interval [Number.MIN_SAFE_INTEGER; Number.MAX_SAFE_INTEGER]
-                 * but its rounding can violate it.
-                 * Before BigInt support there is no perfect solution – only trade off.
-                 * No rounding is better than lose precision and incorrect mutation of already valid value.
-                 */
-                precision: tuiIsSafeToRound(value, this.precision())
-                    ? this.precision()
-                    : Infinity,
-            }).replace(CHAR_HYPHEN, CHAR_MINUS) +
-            this.postfix());
+    stringify(value) {
+        const params = this.params();
+        return maskitoStringifyNumber(value ?? null, {
+            ...params,
+            minimumFractionDigits: String(value).includes(params.decimalSeparator) &&
+                this.numberFormat().decimalMode !== 'not-zero'
+                ? params.maximumFractionDigits
+                : 0,
+        });
     }
     computeMask(params) {
         const { prefix = '', postfix = '' } = params;
@@ -176,99 +103,192 @@ class TuiInputNumberDirective extends TuiControl {
             ],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputNumberDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputNumberDirective, isStandalone: true, selector: "input[tuiInputNumber]", inputs: { minSetter: ["min", "minSetter"], maxSetter: ["max", "maxSetter"], prefixSetter: ["prefix", "prefixSetter"], postfixSetter: ["postfix", "postfixSetter"] }, host: { listeners: { "focusout": "setValue(transformer.fromControlValue(control.value))", "focus": "onFocus()" }, properties: { "disabled": "disabled()", "attr.inputMode": "inputMode()", "attr.maxLength": "element.maxLength > 0 ? element.maxLength : defaultMaxLength()" } }, providers: [
-            tuiAsControl(TuiInputNumberDirective),
-            tuiValueTransformerFrom(TUI_INPUT_NUMBER_OPTIONS),
-        ], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithTextfield }, { directive: i2.MaskitoDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiNumberMask, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiNumberMask, isStandalone: true, inputs: { prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, postfix: { classPropertyName: "postfix", publicName: "postfix", 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 } }, hostDirectives: [{ directive: i1.MaskitoDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputNumberDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiNumberMask, decorators: [{
+            type: Directive,
+            args: [{ hostDirectives: [MaskitoDirective] }]
+        }] });
+class TuiWithNumberMask {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiWithNumberMask, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiWithNumberMask, isStandalone: true, hostDirectives: [{ directive: TuiNumberMask, inputs: ["min", "min", "max", "max", "prefix", "prefix", "postfix", "postfix"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiWithNumberMask, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
-                    selector: 'input[tuiInputNumber]',
-                    providers: [
-                        tuiAsControl(TuiInputNumberDirective),
-                        tuiValueTransformerFrom(TUI_INPUT_NUMBER_OPTIONS),
+                    hostDirectives: [
+                        {
+                            directive: TuiNumberMask,
+                            inputs: ['min', 'max', 'prefix', 'postfix'],
+                        },
                     ],
-                    hostDirectives: [TuiWithTextfield, MaskitoDirective],
-                    host: {
-                        '[disabled]': 'disabled()',
-                        '[attr.inputMode]': 'inputMode()',
-                        '[attr.maxLength]': 'element.maxLength > 0 ? element.maxLength : defaultMaxLength()',
-                        '(focusout)': 'setValue(transformer.fromControlValue(control.value))',
-                        '(focus)': 'onFocus()',
-                    },
                 }]
-        }], propDecorators: { minSetter: [{
-                type: Input,
-                args: ['min']
-            }], maxSetter: [{
-                type: Input,
-                args: ['max']
-            }], prefixSetter: [{
-                type: Input,
-                args: ['prefix']
-            }], postfixSetter: [{
-                type: Input,
-                args: ['postfix']
-            }] } });
+        }] });
 
 class TuiQuantumValueTransformerBase extends TuiValueTransformer {
-    // eslint-disable-next-line @typescript-eslint/parameter-properties
+    // eslint-disable-next-line @typescript-eslint/parameter-properties,@angular-eslint/prefer-inject
     constructor(quantum = 0) {
         super();
         this.quantum = quantum;
-        this.parent = null;
+        this.fromControlValue = identity;
     }
-    fromControlValue(controlValue) {
-        return this.parent?.fromControlValue(controlValue) ?? controlValue;
-    }
-    toControlValue(internalValue) {
-        const value = this.parent?.toControlValue(internalValue) ?? internalValue;
+    toControlValue(value) {
         return value != null &&
             this.quantum > 0 &&
             tuiIsSafeToRound(value, tuiGetFractionPartPadded(this.quantum).length)
             ? tuiRound(Math.round(value / this.quantum) * this.quantum, TUI_FLOATING_PRECISION)
             : value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiQuantumValueTransformerBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiQuantumValueTransformerBase, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiQuantumValueTransformerBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiQuantumValueTransformerBase, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiQuantumValueTransformerBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiQuantumValueTransformerBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: undefined }]; } });
+        }], ctorParameters: () => [{ type: undefined }] });
 class TuiQuantumValueTransformer extends TuiQuantumValueTransformerBase {
     constructor() {
         super(0);
-        this.parent = inject(TUI_INPUT_NUMBER_OPTIONS).valueTransformer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiQuantumValueTransformer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiQuantumValueTransformer, isStandalone: true, selector: "[tuiInputNumber][quantum]", inputs: { quantum: "quantum" }, providers: [tuiProvide(TuiValueTransformer, TuiQuantumValueTransformer)], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiQuantumValueTransformer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiQuantumValueTransformer, isStandalone: true, selector: "[tuiInputNumber][quantum]:not([bigint])", inputs: { quantum: "quantum" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiQuantumValueTransformer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiQuantumValueTransformer, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
-                    selector: '[tuiInputNumber][quantum]',
+                    selector: '[tuiInputNumber][quantum]:not([bigint])',
                     inputs: ['quantum'],
-                    providers: [tuiProvide(TuiValueTransformer, TuiQuantumValueTransformer)],
                 }]
-        }], ctorParameters: function () { return []; } });
-class TuiWithQuantumValueTransformer {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiWithQuantumValueTransformer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiWithQuantumValueTransformer, isStandalone: true, hostDirectives: [{ directive: TuiQuantumValueTransformer, inputs: ["quantum", "quantum"] }], ngImport: i0 }); }
+        }], ctorParameters: () => [] });
+class TuiBigIntQuantumValueTransformer extends TuiValueTransformer {
+    constructor() {
+        super(...arguments);
+        this.quantum = input(BigInt(0));
+        this.fromControlValue = identity;
+    }
+    toControlValue(value) {
+        if (!this.quantum() || !value) {
+            return value;
+        }
+        const floor = (value / this.quantum()) * this.quantum();
+        const remainder = value % this.quantum();
+        return (floor + (BigInt(2) * remainder >= this.quantum() ? this.quantum() : BigInt(0)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiBigIntQuantumValueTransformer, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiBigIntQuantumValueTransformer, isStandalone: true, selector: "[tuiInputNumber][bigint][quantum]", inputs: { quantum: { classPropertyName: "quantum", publicName: "quantum", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiBigIntQuantumValueTransformer, decorators: [{
+            type: Directive,
+            args: [{ selector: '[tuiInputNumber][bigint][quantum]' }]
+        }] });
+
+class TuiNumberValueTransformer extends TuiValueTransformer {
+    constructor() {
+        super(...arguments);
+        this.mask = inject(TuiNumberMask);
+        this.quantumTransformer = inject(TuiQuantumValueTransformer, { optional: true }) ??
+            TUI_IDENTITY_VALUE_TRANSFORMER;
+        this.optionsTransformer = inject(TUI_INPUT_NUMBER_OPTIONS).valueTransformer ??
+            TUI_IDENTITY_VALUE_TRANSFORMER;
+    }
+    toControlValue(textfieldValue) {
+        const parsed = maskitoParseNumber(textfieldValue ?? '', this.mask.params());
+        return this.optionsTransformer.toControlValue(this.quantumTransformer.toControlValue(Number.isNaN(parsed) ? null : parsed));
+    }
+    fromControlValue(controlValue) {
+        return this.mask.stringify(this.optionsTransformer.fromControlValue(controlValue));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiNumberValueTransformer, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiNumberValueTransformer, isStandalone: true, providers: [tuiProvide(TuiValueTransformer, TuiNumberValueTransformer)], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiNumberValueTransformer, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [tuiProvide(TuiValueTransformer, TuiNumberValueTransformer)],
+                }]
+        }] });
+
+const DEFAULT_MAX_LENGTH = 18;
+class TuiInputNumberDirective extends TuiControl {
+    constructor() {
+        super(...arguments);
+        this.mask = inject(TuiNumberMask);
+        this.input = inject(TuiInputDirective);
+        this.isIOS = inject(WA_IS_IOS);
+        this.element = tuiInjectElement();
+        this.inputMode = computed(() => {
+            if (this.isIOS) {
+                return this.mask.min() < 0
+                    ? 'text' // iPhone does not have minus sign if inputMode is equal to 'numeric' / 'decimal'
+                    : 'decimal';
+            }
+            /**
+             * Samsung Keyboard does not have minus sign for `inputmode=decimal`
+             * @see https://github.com/taiga-family/taiga-ui/issues/11061#issuecomment-2939103792
+             */
+            return 'numeric';
+        });
+        this.defaultMaxLength = computed(() => {
+            const { decimalSeparator, thousandSeparator, maximumFractionDigits, prefix, postfix, min, max, } = this.mask.params();
+            if (!Number.isFinite(min) || !Number.isFinite(max)) {
+                return -1;
+            }
+            const decimalPart = !!maximumFractionDigits && this.input.value().includes(decimalSeparator);
+            const precision = decimalPart ? Math.min(maximumFractionDigits + 1, 20) : 0;
+            const takeThousand = thousandSeparator.repeat(5).length;
+            const affixes = prefix.length + postfix.length;
+            return DEFAULT_MAX_LENGTH + precision + takeThousand + affixes;
+        });
+        this.parsed = computed(() => this.parse(this.input.value()));
+        this.onChangeEffect = effect(() => {
+            const changed = !Object.is(this.input.value().replaceAll(/\D/g, ''), untracked(() => this.value()?.replaceAll(/\D/g, '')) ?? '');
+            const value = this.parsed();
+            const valid = Number.isNaN(value) || (value >= this.mask.min() && value <= this.mask.max());
+            if (changed && valid) {
+                this.onChange(this.input.value());
+            }
+        });
+    }
+    writeValue(value) {
+        const reset = this.control.pristine && this.control.untouched && !value;
+        const changed = untracked(() => value !== this.transformer.toControlValue(this.value()));
+        if (changed || reset) {
+            super.writeValue(value);
+            untracked(() => this.input.value.set(this.value()));
+        }
+    }
+    setValue(value) {
+        this.input.value.set(typeof value === 'string' ? value : this.mask.stringify(value));
+    }
+    onFocus() {
+        if (!this.input.value() && !this.readOnly()) {
+            this.input.value.set(this.mask.prefix() + this.mask.postfix());
+        }
+    }
+    parse(value) {
+        const params = this.mask.params();
+        const possibleTooBig = !Number.isFinite(this.mask.min()) || !Number.isFinite(this.mask.max());
+        return (maskitoParseNumber(value, {
+            ...params,
+            bigint: !value.includes(params.decimalSeparator) && possibleTooBig,
+        }) ?? NaN);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputNumberDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiInputNumberDirective, isStandalone: true, selector: "input[tuiInputNumber]", host: { listeners: { "focusout": "setValue(transformer.fromControlValue(control.value))", "focus": "onFocus()" }, properties: { "disabled": "disabled()", "attr.inputMode": "inputMode()", "attr.maxLength": "element.maxLength > 0 ? element.maxLength : defaultMaxLength()" } }, providers: [tuiAsControl(TuiInputNumberDirective)], usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiWithInput }, { directive: TuiWithNumberMask }, { directive: TuiNumberValueTransformer }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiWithQuantumValueTransformer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputNumberDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
-                    hostDirectives: [
-                        {
-                            directive: TuiQuantumValueTransformer,
-                            inputs: ['quantum'],
-                        },
-                    ],
+                    selector: 'input[tuiInputNumber]',
+                    providers: [tuiAsControl(TuiInputNumberDirective)],
+                    hostDirectives: [TuiWithInput, TuiWithNumberMask, TuiNumberValueTransformer],
+                    host: {
+                        '[disabled]': 'disabled()',
+                        '[attr.inputMode]': 'inputMode()',
+                        '[attr.maxLength]': 'element.maxLength > 0 ? element.maxLength : defaultMaxLength()',
+                        '(focusout)': 'setValue(transformer.fromControlValue(control.value))',
+                        '(focus)': 'onFocus()',
+                    },
                 }]
         }] });
 
@@ -277,56 +297,90 @@ const DELAY_DECREMENT = 15;
 const MIN_DELAY = 100;
 class TuiInputNumberStep {
     constructor() {
+        this.doc = inject(DOCUMENT);
         this.el = tuiInjectElement();
+        this.stop$ = merge(fromEvent(this.doc, 'pointerup'), fromEvent(this.doc, 'pointerleave'), fromEvent(this.doc, 'pointercancel'));
         this.appearance = inject(TUI_TEXTFIELD_OPTIONS).appearance;
         this.options = inject(TUI_INPUT_NUMBER_OPTIONS);
+        this.mask = inject(TuiNumberMask, { self: true });
         this.input = inject(TuiInputNumberDirective, { self: true });
-        this.step = signal(this.options.step);
-        this.value = computed(() => this.input.value() ?? NaN);
         this.step$ = new Subject();
-        this.doc = inject(DOCUMENT);
-        this.stop$ = merge(fromEvent(this.doc, 'pointerup'), fromEvent(this.doc, 'pointerleave'), fromEvent(this.doc, 'pointercancel'));
         this.stepping = this.step$
             .pipe(switchMap((value) => timer(INITIAL_DELAY).pipe(expand((_, index) => timer(getDelay(index))), map(() => value), takeUntil(this.stop$))), takeUntilDestroyed())
             .subscribe((value) => this.onStep(value));
-    }
-    // TODO(v5): replace with signal input
-    set stepSetter(x) {
-        this.step.set(x);
+        this.step = input(this.options.step);
     }
     onStep(step) {
-        const current = this.input.value() ?? 0;
-        this.input.setValue(tuiClamp(current + step, this.input.min(), this.input.max()));
+        const value = this.input.parsed() || 0;
+        this.input.setValue(tuiClamp(
+        /**
+         * Without explicit conversion it throws
+         * TS2365: Operator + cannot be applied to types `number | bigint` and `number | bigint`
+         */
+        typeof value === 'bigint' ? value + BigInt(step) : value + Number(step), this.mask.min(), this.mask.max()));
         this.el.setSelectionRange(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputNumberStep, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputNumberStep, isStandalone: true, selector: "input[tuiInputNumber][step]", inputs: { stepSetter: ["step", "stepSetter"] }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "keydown.arrowDown.prevent": "onStep(-step())", "keydown.arrowUp.prevent": "onStep(step())" }, properties: { "class._with-buttons": "step()" } }, ngImport: i0, template: "<ng-container *tuiTextfieldContent>\n    <section\n        *ngIf=\"step()\"\n        class=\"t-input-number-buttons\"\n    >\n        <button\n            size=\"s\"\n            tabindex=\"-1\"\n            tuiIconButton\n            type=\"button\"\n            class=\"t-button\"\n            [appearance]=\"appearance()\"\n            [disabled]=\"!input.interactive() || value() >= input.max()\"\n            [iconStart]=\"options.icons.increase\"\n            (click.prevent)=\"onStep(step())\"\n            (pointerdown.prevent)=\"step$.next(step())\"\n        >\n            +\n        </button>\n\n        <button\n            size=\"s\"\n            tabindex=\"-1\"\n            tuiIconButton\n            type=\"button\"\n            class=\"t-button\"\n            [appearance]=\"appearance()\"\n            [disabled]=\"!input.interactive() || value() <= input.min()\"\n            [iconStart]=\"options.icons.decrease\"\n            (click.prevent)=\"onStep(-step())\"\n            (pointerdown.prevent)=\"step$.next(-step())\"\n        >\n            -\n        </button>\n    </section>\n</ng-container>\n", styles: [".t-input-number-buttons.t-input-number-buttons{position:absolute;right:0;display:flex;block-size:var(--t-height);flex-direction:column;gap:.125rem;border-radius:inherit}@supports (inset-inline-end: 0){.t-input-number-buttons.t-input-number-buttons{right:unset;inset-inline-end:0}}tui-textfield[data-size=s] .t-input-number-buttons.t-input-number-buttons{flex-direction:row-reverse}.t-input-number-buttons.t-input-number-buttons>*{flex:1 1 0;border-radius:0}.t-input-number-buttons.t-input-number-buttons>*:first-child{border-top-right-radius:inherit}.t-input-number-buttons.t-input-number-buttons>*:last-child{border-bottom-right-radius:inherit}[dir=rtl] .t-input-number-buttons.t-input-number-buttons>*:first-child{border-radius:0;border-top-left-radius:inherit}[dir=rtl] .t-input-number-buttons.t-input-number-buttons>*:last-child{border-radius:0;border-bottom-left-radius:inherit}tui-textfield[data-size=l] .t-input-number-buttons.t-input-number-buttons>*{inline-size:var(--tui-height-m)}tui-textfield[data-size=s] .t-input-number-buttons.t-input-number-buttons>*:first-child{border-top-right-radius:inherit;border-bottom-right-radius:inherit}tui-textfield[data-size=s] .t-input-number-buttons.t-input-number-buttons>*:last-child{border-radius:0}[tuiInputNumber]._with-buttons{border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] [tuiInputNumber]._with-buttons{border-radius:inherit;border-top-left-radius:0;border-bottom-left-radius:0}tui-textfield[data-size=l]{--t-input-number-offset-end: calc(var(--tui-height-m) + .125rem)}tui-textfield[data-size=m]{--t-input-number-offset-end: calc(var(--tui-height-s) + .125rem)}tui-textfield[data-size=s]{--t-input-number-offset-end: calc(2 * var(--tui-height-s) + .25rem)}[tuiInputNumber]._with-buttons,[tuiInputNumber]._with-buttons~.t-template{inline-size:calc(100% - var(--t-input-number-offset-end));margin-inline-end:var(--t-input-number-offset-end)}[tuiInputNumber]._with-buttons~.t-content{margin-inline-end:var(--t-input-number-offset-end)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputNumberStep, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiInputNumberStep, isStandalone: true, selector: "input[tuiInputNumber][step]", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "keydown.arrowDown.prevent": "onStep(-step())", "keydown.arrowUp.prevent": "onStep(step())" }, properties: { "class._with-buttons": "step()" } }, hostDirectives: [{ directive: i1$2.TuiAppearanceProxy }], ngImport: i0, template: "<ng-container *tuiTextfieldContent>\n    @if (step()) {\n        <section class=\"t-input-number-buttons\">\n            <button\n                size=\"s\"\n                tabindex=\"-1\"\n                tuiIconButton\n                type=\"button\"\n                class=\"t-button\"\n                [appearance]=\"appearance()\"\n                [disabled]=\"!input.interactive() || input.parsed() >= mask.max()\"\n                [iconStart]=\"options.icons.increase\"\n                (click.prevent)=\"onStep(step())\"\n                (pointerdown.prevent)=\"step$.next(step())\"\n            >\n                +\n            </button>\n            <button\n                size=\"s\"\n                tabindex=\"-1\"\n                tuiIconButton\n                type=\"button\"\n                class=\"t-button\"\n                [appearance]=\"appearance()\"\n                [disabled]=\"!input.interactive() || input.parsed() <= mask.min()\"\n                [iconStart]=\"options.icons.decrease\"\n                (click.prevent)=\"onStep(-step())\"\n                (pointerdown.prevent)=\"step$.next(-step())\"\n            >\n                -\n            </button>\n        </section>\n    }\n</ng-container>\n", styles: [".t-input-number-buttons.t-input-number-buttons{position:absolute;display:flex;inset-inline-end:0;block-size:var(--t-height);flex-direction:column;gap:.125rem;border-radius:inherit}tui-textfield[data-size=s] .t-input-number-buttons.t-input-number-buttons{flex-direction:row-reverse}.t-input-number-buttons.t-input-number-buttons>*{flex:1 1 0;border-radius:0}.t-input-number-buttons.t-input-number-buttons>*:first-child{border-top-right-radius:inherit}.t-input-number-buttons.t-input-number-buttons>*:last-child{border-bottom-right-radius:inherit}[dir=rtl] .t-input-number-buttons.t-input-number-buttons>*:first-child{border-radius:0;border-top-left-radius:inherit}[dir=rtl] .t-input-number-buttons.t-input-number-buttons>*:last-child{border-radius:0;border-bottom-left-radius:inherit}tui-textfield[data-size=l] .t-input-number-buttons.t-input-number-buttons>*{inline-size:var(--tui-height-m)}tui-textfield[data-size=s] .t-input-number-buttons.t-input-number-buttons>*:first-child{border-top-right-radius:inherit;border-bottom-right-radius:inherit}tui-textfield[data-size=s] .t-input-number-buttons.t-input-number-buttons>*:last-child{border-radius:0}[tuiInputNumber]._with-buttons{border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] [tuiInputNumber]._with-buttons{border-radius:inherit;border-top-left-radius:0;border-bottom-left-radius:0}tui-textfield[data-size=l]{--t-input-number-offset-end: calc(var(--tui-height-m) + .125rem)}tui-textfield[data-size=m]{--t-input-number-offset-end: calc(var(--tui-height-s) + .125rem)}tui-textfield[data-size=s]{--t-input-number-offset-end: calc(2 * var(--tui-height-s) + .25rem)}[tuiInputNumber]._with-buttons,[tuiInputNumber]._with-buttons~.t-template{inline-size:calc(100% - var(--t-input-number-offset-end));margin-inline-end:var(--t-input-number-offset-end)}[tuiInputNumber]._with-buttons~.t-content{margin-inline-end:var(--t-input-number-offset-end)}\n"], dependencies: [{ kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputNumberStep, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputNumberStep, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'input[tuiInputNumber][step]', imports: [NgIf, TuiButton, TuiTextfieldContent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'input[tuiInputNumber][step]', imports: [TuiButton, TuiTextfieldContent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [TuiAppearanceProxy], host: {
                         ngSkipHydration: 'true',
                         '(keydown.arrowDown.prevent)': 'onStep(-step())',
                         '(keydown.arrowUp.prevent)': 'onStep(step())',
                         '[class._with-buttons]': 'step()',
-                    }, template: "<ng-container *tuiTextfieldContent>\n    <section\n        *ngIf=\"step()\"\n        class=\"t-input-number-buttons\"\n    >\n        <button\n            size=\"s\"\n            tabindex=\"-1\"\n            tuiIconButton\n            type=\"button\"\n            class=\"t-button\"\n            [appearance]=\"appearance()\"\n            [disabled]=\"!input.interactive() || value() >= input.max()\"\n            [iconStart]=\"options.icons.increase\"\n            (click.prevent)=\"onStep(step())\"\n            (pointerdown.prevent)=\"step$.next(step())\"\n        >\n            +\n        </button>\n\n        <button\n            size=\"s\"\n            tabindex=\"-1\"\n            tuiIconButton\n            type=\"button\"\n            class=\"t-button\"\n            [appearance]=\"appearance()\"\n            [disabled]=\"!input.interactive() || value() <= input.min()\"\n            [iconStart]=\"options.icons.decrease\"\n            (click.prevent)=\"onStep(-step())\"\n            (pointerdown.prevent)=\"step$.next(-step())\"\n        >\n            -\n        </button>\n    </section>\n</ng-container>\n", styles: [".t-input-number-buttons.t-input-number-buttons{position:absolute;right:0;display:flex;block-size:var(--t-height);flex-direction:column;gap:.125rem;border-radius:inherit}@supports (inset-inline-end: 0){.t-input-number-buttons.t-input-number-buttons{right:unset;inset-inline-end:0}}tui-textfield[data-size=s] .t-input-number-buttons.t-input-number-buttons{flex-direction:row-reverse}.t-input-number-buttons.t-input-number-buttons>*{flex:1 1 0;border-radius:0}.t-input-number-buttons.t-input-number-buttons>*:first-child{border-top-right-radius:inherit}.t-input-number-buttons.t-input-number-buttons>*:last-child{border-bottom-right-radius:inherit}[dir=rtl] .t-input-number-buttons.t-input-number-buttons>*:first-child{border-radius:0;border-top-left-radius:inherit}[dir=rtl] .t-input-number-buttons.t-input-number-buttons>*:last-child{border-radius:0;border-bottom-left-radius:inherit}tui-textfield[data-size=l] .t-input-number-buttons.t-input-number-buttons>*{inline-size:var(--tui-height-m)}tui-textfield[data-size=s] .t-input-number-buttons.t-input-number-buttons>*:first-child{border-top-right-radius:inherit;border-bottom-right-radius:inherit}tui-textfield[data-size=s] .t-input-number-buttons.t-input-number-buttons>*:last-child{border-radius:0}[tuiInputNumber]._with-buttons{border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] [tuiInputNumber]._with-buttons{border-radius:inherit;border-top-left-radius:0;border-bottom-left-radius:0}tui-textfield[data-size=l]{--t-input-number-offset-end: calc(var(--tui-height-m) + .125rem)}tui-textfield[data-size=m]{--t-input-number-offset-end: calc(var(--tui-height-s) + .125rem)}tui-textfield[data-size=s]{--t-input-number-offset-end: calc(2 * var(--tui-height-s) + .25rem)}[tuiInputNumber]._with-buttons,[tuiInputNumber]._with-buttons~.t-template{inline-size:calc(100% - var(--t-input-number-offset-end));margin-inline-end:var(--t-input-number-offset-end)}[tuiInputNumber]._with-buttons~.t-content{margin-inline-end:var(--t-input-number-offset-end)}\n"] }]
-        }], propDecorators: { stepSetter: [{
-                type: Input,
-                args: ['step']
-            }] } });
+                    }, template: "<ng-container *tuiTextfieldContent>\n    @if (step()) {\n        <section class=\"t-input-number-buttons\">\n            <button\n                size=\"s\"\n                tabindex=\"-1\"\n                tuiIconButton\n                type=\"button\"\n                class=\"t-button\"\n                [appearance]=\"appearance()\"\n                [disabled]=\"!input.interactive() || input.parsed() >= mask.max()\"\n                [iconStart]=\"options.icons.increase\"\n                (click.prevent)=\"onStep(step())\"\n                (pointerdown.prevent)=\"step$.next(step())\"\n            >\n                +\n            </button>\n            <button\n                size=\"s\"\n                tabindex=\"-1\"\n                tuiIconButton\n                type=\"button\"\n                class=\"t-button\"\n                [appearance]=\"appearance()\"\n                [disabled]=\"!input.interactive() || input.parsed() <= mask.min()\"\n                [iconStart]=\"options.icons.decrease\"\n                (click.prevent)=\"onStep(-step())\"\n                (pointerdown.prevent)=\"step$.next(-step())\"\n            >\n                -\n            </button>\n        </section>\n    }\n</ng-container>\n", styles: [".t-input-number-buttons.t-input-number-buttons{position:absolute;display:flex;inset-inline-end:0;block-size:var(--t-height);flex-direction:column;gap:.125rem;border-radius:inherit}tui-textfield[data-size=s] .t-input-number-buttons.t-input-number-buttons{flex-direction:row-reverse}.t-input-number-buttons.t-input-number-buttons>*{flex:1 1 0;border-radius:0}.t-input-number-buttons.t-input-number-buttons>*:first-child{border-top-right-radius:inherit}.t-input-number-buttons.t-input-number-buttons>*:last-child{border-bottom-right-radius:inherit}[dir=rtl] .t-input-number-buttons.t-input-number-buttons>*:first-child{border-radius:0;border-top-left-radius:inherit}[dir=rtl] .t-input-number-buttons.t-input-number-buttons>*:last-child{border-radius:0;border-bottom-left-radius:inherit}tui-textfield[data-size=l] .t-input-number-buttons.t-input-number-buttons>*{inline-size:var(--tui-height-m)}tui-textfield[data-size=s] .t-input-number-buttons.t-input-number-buttons>*:first-child{border-top-right-radius:inherit;border-bottom-right-radius:inherit}tui-textfield[data-size=s] .t-input-number-buttons.t-input-number-buttons>*:last-child{border-radius:0}[tuiInputNumber]._with-buttons{border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] [tuiInputNumber]._with-buttons{border-radius:inherit;border-top-left-radius:0;border-bottom-left-radius:0}tui-textfield[data-size=l]{--t-input-number-offset-end: calc(var(--tui-height-m) + .125rem)}tui-textfield[data-size=m]{--t-input-number-offset-end: calc(var(--tui-height-s) + .125rem)}tui-textfield[data-size=s]{--t-input-number-offset-end: calc(2 * var(--tui-height-s) + .25rem)}[tuiInputNumber]._with-buttons,[tuiInputNumber]._with-buttons~.t-template{inline-size:calc(100% - var(--t-input-number-offset-end));margin-inline-end:var(--t-input-number-offset-end)}[tuiInputNumber]._with-buttons~.t-content{margin-inline-end:var(--t-input-number-offset-end)}\n"] }]
+        }] });
 function getDelay(index) {
     return Math.max(INITIAL_DELAY - index * DELAY_DECREMENT, MIN_DELAY);
 }
 
+class TuiBigIntValueTransformer extends TuiValueTransformer {
+    constructor() {
+        super(...arguments);
+        this.quantumTransformer = inject(TuiBigIntQuantumValueTransformer, { optional: true }) ??
+            TUI_IDENTITY_VALUE_TRANSFORMER;
+        this.optionsTransformer = inject(TUI_INPUT_NUMBER_OPTIONS).valueTransformer ??
+            TUI_IDENTITY_VALUE_TRANSFORMER;
+        this.mask = inject(TuiNumberMask);
+    }
+    toControlValue(textfieldValue) {
+        return this.optionsTransformer.toControlValue(this.quantumTransformer.toControlValue(maskitoParseNumber(textfieldValue ?? '', {
+            ...this.mask.params(),
+            bigint: true,
+        })));
+    }
+    fromControlValue(controlValue) {
+        return this.mask.stringify(this.optionsTransformer.fromControlValue(controlValue));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiBigIntValueTransformer, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiBigIntValueTransformer, isStandalone: true, selector: "[tuiInputNumber][bigint]", providers: [tuiProvide(TuiValueTransformer, TuiBigIntValueTransformer)], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiBigIntValueTransformer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiInputNumber][bigint]',
+                    providers: [tuiProvide(TuiValueTransformer, TuiBigIntValueTransformer)],
+                }]
+        }] });
+
 const TuiInputNumber = [
     TuiInputNumberDirective,
+    TuiNumberMask,
     TuiInputNumberStep,
+    TuiBigIntValueTransformer,
     TuiQuantumValueTransformer,
+    TuiBigIntQuantumValueTransformer,
+    TuiLabel,
+    TuiTextfieldComponent,
+    TuiTextfieldOptionsDirective,
+    TuiDropdownContent,
 ];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_INPUT_NUMBER_DEFAULT_OPTIONS, TUI_INPUT_NUMBER_OPTIONS, TuiInputNumber, TuiInputNumberDirective, TuiInputNumberStep, TuiQuantumValueTransformer, TuiQuantumValueTransformerBase, TuiWithQuantumValueTransformer, tuiInputNumberOptionsProvider };
+export { TUI_INPUT_NUMBER_DEFAULT_OPTIONS, TUI_INPUT_NUMBER_OPTIONS, TuiBigIntQuantumValueTransformer, TuiBigIntValueTransformer, TuiInputNumber, TuiInputNumberDirective, TuiInputNumberStep, TuiNumberMask, TuiNumberValueTransformer, TuiQuantumValueTransformer, TuiQuantumValueTransformerBase, TuiWithNumberMask, tuiInputNumberOptionsProvider };
 //# sourceMappingURL=taiga-ui-kit-components-input-number.mjs.map