@taiga-ui/kit 3.34.0 → 3.35.0

package/bundles/taiga-ui-kit-components-input-number.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@tinkoff/ng-polymorpheus'), require('@taiga-ui/kit/directives'), require('@angular/common')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-number', ['exports', '@angular/core', '@angular/forms', '@taiga-ui/cdk', '@taiga-ui/core', '@tinkoff/ng-polymorpheus', '@taiga-ui/kit/directives', '@angular/common'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"].kit = global["taiga-ui"].kit || {}, global["taiga-ui"].kit.components = global["taiga-ui"].kit.components || {}, global["taiga-ui"].kit.components["input-number"] = {}), global.ng.core, global.ng.forms, global.i5, global.i1, global.i4, global["taiga-ui"].kit.directives, global.ng.common));
-})(this, (function (exports, i0, i6, i5, i1, i4, i2, i3) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@maskito/kit'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@tinkoff/ng-polymorpheus'), require('@taiga-ui/kit/directives'), require('@maskito/angular'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-number', ['exports', '@angular/core', '@angular/forms', '@maskito/kit', '@taiga-ui/cdk', '@taiga-ui/core', '@tinkoff/ng-polymorpheus', '@taiga-ui/kit/directives', '@maskito/angular', '@angular/common'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"].kit = global["taiga-ui"].kit || {}, global["taiga-ui"].kit.components = global["taiga-ui"].kit.components || {}, global["taiga-ui"].kit.components["input-number"] = {}), global.ng.core, global.ng.forms, global.kit, global.cdk, global.i1, global.i5, global["taiga-ui"].kit.directives, global.i3, global.ng.common));
+})(this, (function (exports, i0, i6, kit, cdk, i1, i5, i2, i3, i4) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -24,11 +24,11 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -389,20 +389,7 @@
             _this.prefix = '';
             /** @deprecated use `tuiTextfieldPostfix` from {@link TuiTextfieldControllerModule} instead */
             _this.postfix = '';
-            _this.polymorpheusValueContent = i5.EMPTY_QUERY;
-            _this.mask = function (allowNegative, decimal, decimalLimit, nativeFocusableElement) { return ({
-                mask: i1.tuiCreateNumberMask({
-                    allowNegative: allowNegative,
-                    decimalLimit: decimalLimit,
-                    allowDecimal: decimal !== 'never',
-                    requireDecimal: decimal === 'always',
-                    decimalSymbol: _this.numberFormat.decimalSeparator,
-                    thousandSymbol: _this.numberFormat.thousandSeparator,
-                    autoCorrectDecimalSymbol: i1.tuiEnableAutoCorrectDecimalSymbol(_this.numberFormat),
-                }),
-                pipe: i1.tuiCreateAutoCorrectedNumberPipe(decimal === 'always' ? decimalLimit : 0, _this.numberFormat.decimalSeparator, _this.numberFormat.thousandSeparator, nativeFocusableElement, allowNegative, _this.isIOS),
-                guide: false,
-            }); };
+            _this.polymorpheusValueContent = cdk.EMPTY_QUERY;
             return _this;
         }
         Object.defineProperty(TuiInputNumberComponent.prototype, "nativeFocusableElement", {
@@ -452,17 +439,14 @@
         });
         Object.defineProperty(TuiInputNumberComponent.prototype, "formattedValue", {
             get: function () {
-                return this.getFormattedValue(this.value || 0);
+                return this.value !== null ? this.getFormattedValue(this.value || 0) : '';
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(TuiInputNumberComponent.prototype, "computedValue", {
             get: function () {
-                if (this.focused) {
-                    return this.nativeValue;
-                }
-                return this.value === null ? '' : this.formattedValue;
+                return this.focused ? this.nativeValue : this.formattedValue;
             },
             enumerable: false,
             configurable: true
@@ -481,58 +465,35 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(TuiInputNumberComponent.prototype, "mask", {
+            get: function () {
+                return this.calculateMask(this.precision, this.decimal, this.numberFormat.decimalSeparator, this.numberFormat.thousandSeparator, this.min, this.max);
+            },
+            enumerable: false,
+            configurable: true
+        });
         TuiInputNumberComponent.prototype.onArrow = function (step) {
             if (!step) {
                 return;
             }
-            this.value = i5.tuiClamp((this.value || 0) + step, this.min, this.max);
+            this.value = cdk.tuiClamp((this.value || 0) + step, this.min, this.max);
             this.nativeValue = this.formattedValue;
         };
-        // TODO: Review if it's still necessary with maskito
-        TuiInputNumberComponent.prototype.onZero = function (event) {
-            var decimal = this.nativeValue.split(this.numberFormat.decimalSeparator)[1] || '';
-            var nativeFocusableElement = this.nativeFocusableElement;
-            if (decimal.length < this.precision ||
-                !nativeFocusableElement ||
-                !nativeFocusableElement.selectionStart ||
-                this.nativeValue[nativeFocusableElement.selectionStart] !== '0') {
-                return;
-            }
-            event.preventDefault();
-            nativeFocusableElement.selectionStart++;
-        };
-        TuiInputNumberComponent.prototype.onValueChange = function (value) {
+        TuiInputNumberComponent.prototype.onValueChange = function (nativeValue) {
+            var parsedValue = kit.maskitoParseNumber(nativeValue, this.numberFormat.decimalSeparator);
             this.unfinishedValue = null;
-            if (i1.tuiMaskedMoneyValueIsEmpty(value)) {
+            if (Number.isNaN(parsedValue)) {
                 this.value = null;
                 return;
             }
             if (this.isNativeValueNotFinished) {
-                this.unfinishedValue = value;
+                this.unfinishedValue = nativeValue;
                 return;
             }
-            var capped = this.absoluteCapInputValue(value);
-            if (capped === null || Number.isNaN(capped)) {
+            if (parsedValue < this.min || parsedValue > this.max) {
                 return;
             }
-            this.value = capped;
-            if (capped !==
-                i1.tuiMaskedNumberStringToNumber(value, this.numberFormat.decimalSeparator, this.numberFormat.thousandSeparator)) {
-                this.nativeValue = this.formattedValue;
-            }
-        };
-        TuiInputNumberComponent.prototype.onKeyDown = function (event) {
-            if (!i1.TUI_DECIMAL_SYMBOLS.includes(event.key)) {
-                return;
-            }
-            if (this.decimal === 'never') {
-                event.preventDefault();
-                return;
-            }
-            if (this.nativeValue.includes(this.numberFormat.decimalSeparator)) {
-                event.preventDefault();
-                this.setCaretAfterComma();
-            }
+            this.value = parsedValue;
         };
         TuiInputNumberComponent.prototype.onFocused = function (focused) {
             this.updateFocused(focused);
@@ -540,14 +501,14 @@
                 return;
             }
             var nativeNumberValue = this.unfinishedValue
-                ? i1.tuiMaskedNumberStringToNumber(this.unfinishedValue, this.numberFormat.decimalSeparator, this.numberFormat.thousandSeparator)
+                ? kit.maskitoParseNumber(this.unfinishedValue, this.numberFormat.decimalSeparator)
                 : this.nativeNumberValue;
             this.unfinishedValue = null;
             if (Number.isNaN(nativeNumberValue)) {
                 this.clear();
                 return;
             }
-            this.value = Math.min(this.max, Math.max(this.min, nativeNumberValue));
+            this.value = nativeNumberValue;
             this.nativeValue = this.formattedValue;
         };
         TuiInputNumberComponent.prototype.getFormattedValue = function (value) {
@@ -562,7 +523,7 @@
             if (this.focused && this.decimal !== 'always') {
                 decimalLimit = fraction.length;
             }
-            return i1.tuiFormatNumber(value, Object.assign(Object.assign({}, this.numberFormat), { decimalLimit: decimalLimit }));
+            return i1.tuiFormatNumber(value, Object.assign(Object.assign({}, this.numberFormat), { decimalLimit: decimalLimit })).replace(cdk.CHAR_HYPHEN, cdk.CHAR_MINUS);
         };
         Object.defineProperty(TuiInputNumberComponent.prototype, "isNativeValueNotFinished", {
             get: function () {
@@ -588,39 +549,41 @@
             enumerable: false,
             configurable: true
         });
+        TuiInputNumberComponent.prototype.writeValue = function (value) {
+            _super.prototype.writeValue.call(this, value);
+            this.nativeValue = this.formattedValue;
+        };
         Object.defineProperty(TuiInputNumberComponent.prototype, "nativeNumberValue", {
             get: function () {
-                return i1.tuiMaskedNumberStringToNumber(this.nativeValue, this.numberFormat.decimalSeparator, this.numberFormat.thousandSeparator);
+                return kit.maskitoParseNumber(this.nativeValue, this.numberFormat.decimalSeparator);
             },
             enumerable: false,
             configurable: true
         });
+        TuiInputNumberComponent.prototype.calculateMask = function (precision, decimalMode, decimalSeparator, thousandSeparator, min, max) {
+            return kit.maskitoNumberOptionsGenerator({
+                decimalSeparator: decimalSeparator,
+                thousandSeparator: thousandSeparator,
+                min: min,
+                max: max,
+                precision: decimalMode === 'never' ? 0 : precision,
+                decimalZeroPadding: decimalMode === 'always',
+            });
+        };
         TuiInputNumberComponent.prototype.clear = function () {
             this.nativeValue = '';
             this.value = null;
         };
-        TuiInputNumberComponent.prototype.absoluteCapInputValue = function (inputValue) {
-            var value = i1.tuiMaskedNumberStringToNumber(inputValue, this.numberFormat.decimalSeparator, this.numberFormat.thousandSeparator);
-            var capped = value < 0
-                ? Math.max(Math.max(this.min, Number.MIN_SAFE_INTEGER), value)
-                : Math.min(value, Math.min(this.max, Number.MAX_SAFE_INTEGER));
-            var ineligibleValue = Number.isNaN(capped) || capped < this.min || capped > this.max;
-            return ineligibleValue ? null : capped;
-        };
-        TuiInputNumberComponent.prototype.setCaretAfterComma = function () {
-            if (!this.nativeFocusableElement) {
-                return;
-            }
-            var afterCommaPosition = this.nativeValue.length - this.precision;
-            this.nativeFocusableElement.setSelectionRange(afterCommaPosition, afterCommaPosition);
-        };
         return TuiInputNumberComponent;
-    }(i5.AbstractTuiNullableControl));
-    TuiInputNumberComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputNumberComponent, deps: [{ token: i6.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: TUI_INPUT_NUMBER_OPTIONS }, { token: i1.TUI_NUMBER_FORMAT }, { token: i5.TUI_IS_IOS }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiInputNumberComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiInputNumberComponent, selector: "tui-input-number", inputs: { min: "min", max: "max", decimal: "decimal", precision: "precision", step: "step", prefix: "prefix", postfix: "postfix" }, host: { listeners: { "keydown.arrowDown": "onArrow(-step)", "keydown.arrowUp": "onArrow(step)", "keydown.0": "onZero($event)" } }, providers: [
-            i5.tuiAsFocusableItemAccessor(TuiInputNumberComponent),
-            i5.tuiAsControl(TuiInputNumberComponent),
-        ], queries: [{ propertyName: "polymorpheusValueContent", predicate: i4.PolymorpheusOutletDirective, descendants: true }], viewQueries: [{ propertyName: "primitiveTextfield", first: true, predicate: i1.TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<tui-primitive-textfield\n    #textfield\n    tuiValueAccessor\n    class=\"t-textfield\"\n    [pseudoHover]=\"pseudoHover\"\n    [pseudoFocus]=\"computedFocused\"\n    [pseudoActive]=\"pseudoActive\"\n    [invalid]=\"computedInvalid\"\n    [readOnly]=\"readOnly\"\n    [disabled]=\"computedDisabled\"\n    [textMask]=\"isNegativeAllowed | tuiMapper : mask : decimal : precision : nativeFocusableElement\"\n    [value]=\"computedValue\"\n    [prefix]=\"prefix\"\n    [postfix]=\"postfix\"\n    [focusable]=\"focusable\"\n    (valueChange)=\"onValueChange($event)\"\n    (focusedChange)=\"onFocused($event)\"\n    (keydown)=\"onKeyDown($event)\"\n>\n    <ng-content></ng-content>\n    <ng-content\n        select=\"input\"\n        ngProjectAs=\"input\"\n    ></ng-content>\n    <div\n        *ngIf=\"polymorpheusValueContent.length\"\n        ngProjectAs=\"tuiContent\"\n        class=\"t-value-content\"\n    >\n        <ng-container *polymorpheusOutlet=\"valueContent as text\">\n            {{ text }}\n        </ng-container>\n    </div>\n</tui-primitive-textfield>\n\n<section\n    *ngIf=\"step\"\n    class=\"t-buttons\"\n>\n    <button\n        tuiIconButton\n        type=\"button\"\n        size=\"s\"\n        class=\"t-button\"\n        [icon]=\"options.icons.up\"\n        [appearance]=\"textfield.appearance\"\n        [disabled]=\"!canIncrement\"\n        [focusable]=\"false\"\n        (mousedown.prevent)=\"nativeFocusableElement?.focus()\"\n        (click.prevent)=\"onArrow(step)\"\n    >\n        +\n    </button>\n    <button\n        tuiIconButton\n        type=\"button\"\n        size=\"s\"\n        class=\"t-button\"\n        [icon]=\"options.icons.down\"\n        [appearance]=\"textfield.appearance\"\n        [disabled]=\"!canDecrement\"\n        [focusable]=\"false\"\n        (mousedown.prevent)=\"nativeFocusableElement?.focus()\"\n        (click.prevent)=\"onArrow(-step)\"\n    >\n        -\n    </button>\n</section>\n\n<ng-container *ngIf=\"polymorpheusValueContent.changes | async\"></ng-container>\n\n<ng-template #valueContent>\n    <ng-content select=\"tuiContent\"></ng-content>\n</ng-template>\n", styles: [":host{display:flex;border-radius:var(--tui-radius-m);text-align:left}.t-textfield{flex:1;max-width:100%;border-radius:inherit;text-align:inherit}.t-textfield:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.t-value-content{width:100%}.t-buttons{display:flex;flex-direction:column;align-items:stretch;margin-left:.125rem}[data-size=s]+.t-buttons{flex-direction:row-reverse}[data-size=s]+.t-buttons .t-button:first-child{margin:0 0 0 .125rem;border-radius:0 var(--tui-radius-m) var(--tui-radius-m) 0}[data-size=s]+.t-buttons .t-button:last-child{border-radius:0}[data-size=m]+.t-buttons .t-button{width:calc(var(--tui-height-m) * .75)}[data-size=l]+.t-buttons .t-button{width:calc(var(--tui-height-l) * .75)}.t-button{display:flex;flex:1;height:auto}.t-button:first-child{margin-bottom:.125rem;border-radius:0 var(--tui-radius-m) 0 0}.t-button:last-child{border-radius:0 0 var(--tui-radius-m)}\n"], components: [{ type: i1__namespace.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i1__namespace.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i1__namespace.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2__namespace.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { type: i2__namespace.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "tuiMapper": i5__namespace.TuiMapperPipe, "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    }(cdk.AbstractTuiNullableControl));
+    TuiInputNumberComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputNumberComponent, deps: [{ token: i6.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: TUI_INPUT_NUMBER_OPTIONS }, { token: i1.TUI_NUMBER_FORMAT }, { token: cdk.TUI_IS_IOS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiInputNumberComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiInputNumberComponent, selector: "tui-input-number", inputs: { min: "min", max: "max", decimal: "decimal", precision: "precision", step: "step", prefix: "prefix", postfix: "postfix" }, host: { listeners: { "keydown.arrowDown": "onArrow(-step)", "keydown.arrowUp": "onArrow(step)" } }, providers: [
+            cdk.tuiAsFocusableItemAccessor(TuiInputNumberComponent),
+            cdk.tuiAsControl(TuiInputNumberComponent),
+        ], queries: [{ propertyName: "polymorpheusValueContent", predicate: i5.PolymorpheusOutletDirective, descendants: true }], viewQueries: [{ propertyName: "primitiveTextfield", first: true, predicate: i1.TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<tui-primitive-textfield\n    #textfield\n    tuiValueAccessor\n    class=\"t-textfield\"\n    [pseudoHover]=\"pseudoHover\"\n    [pseudoFocus]=\"computedFocused\"\n    [pseudoActive]=\"pseudoActive\"\n    [invalid]=\"computedInvalid\"\n    [readOnly]=\"readOnly\"\n    [disabled]=\"computedDisabled\"\n    [maskito]=\"mask\"\n    [value]=\"computedValue\"\n    [prefix]=\"prefix\"\n    [postfix]=\"postfix\"\n    [focusable]=\"focusable\"\n    (valueChange)=\"onValueChange($event)\"\n    (focusedChange)=\"onFocused($event)\"\n>\n    <ng-content></ng-content>\n    <ng-content\n        select=\"input\"\n        ngProjectAs=\"input\"\n    ></ng-content>\n    <div\n        *ngIf=\"polymorpheusValueContent.length\"\n        ngProjectAs=\"tuiContent\"\n        class=\"t-value-content\"\n    >\n        <ng-container *polymorpheusOutlet=\"valueContent as text\">\n            {{ text }}\n        </ng-container>\n    </div>\n</tui-primitive-textfield>\n\n<section\n    *ngIf=\"step\"\n    class=\"t-buttons\"\n>\n    <button\n        tuiIconButton\n        type=\"button\"\n        size=\"s\"\n        class=\"t-button\"\n        [icon]=\"options.icons.up\"\n        [appearance]=\"textfield.appearance\"\n        [disabled]=\"!canIncrement\"\n        [focusable]=\"false\"\n        (mousedown.prevent)=\"nativeFocusableElement?.focus()\"\n        (click.prevent)=\"onArrow(step)\"\n    >\n        +\n    </button>\n    <button\n        tuiIconButton\n        type=\"button\"\n        size=\"s\"\n        class=\"t-button\"\n        [icon]=\"options.icons.down\"\n        [appearance]=\"textfield.appearance\"\n        [disabled]=\"!canDecrement\"\n        [focusable]=\"false\"\n        (mousedown.prevent)=\"nativeFocusableElement?.focus()\"\n        (click.prevent)=\"onArrow(-step)\"\n    >\n        -\n    </button>\n</section>\n\n<ng-container *ngIf=\"polymorpheusValueContent.changes | async\"></ng-container>\n\n<ng-template #valueContent>\n    <ng-content select=\"tuiContent\"></ng-content>\n</ng-template>\n", styles: [":host{display:flex;border-radius:var(--tui-radius-m);text-align:left}.t-textfield{flex:1;max-width:100%;border-radius:inherit;text-align:inherit}.t-textfield:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.t-value-content{width:100%}.t-buttons{display:flex;flex-direction:column;align-items:stretch;margin-left:.125rem}[data-size=s]+.t-buttons{flex-direction:row-reverse}[data-size=s]+.t-buttons .t-button:first-child{margin:0 0 0 .125rem;border-radius:0 var(--tui-radius-m) var(--tui-radius-m) 0}[data-size=s]+.t-buttons .t-button:last-child{border-radius:0}[data-size=m]+.t-buttons .t-button{width:calc(var(--tui-height-m) * .75)}[data-size=l]+.t-buttons .t-button{width:calc(var(--tui-height-l) * .75)}.t-button{display:flex;flex:1;height:auto}.t-button:first-child{margin-bottom:.125rem;border-radius:0 var(--tui-radius-m) 0 0}.t-button:last-child{border-radius:0 0 var(--tui-radius-m)}\n"], components: [{ type: i1__namespace.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i1__namespace.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i1__namespace.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2__namespace.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { type: i3__namespace.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    __decorate([
+        cdk.tuiPure
+    ], TuiInputNumberComponent.prototype, "calculateMask", null);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputNumberComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -629,8 +592,8 @@
                         styleUrls: ['./input-number.style.less'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         providers: [
-                            i5.tuiAsFocusableItemAccessor(TuiInputNumberComponent),
-                            i5.tuiAsControl(TuiInputNumberComponent),
+                            cdk.tuiAsFocusableItemAccessor(TuiInputNumberComponent),
+                            cdk.tuiAsControl(TuiInputNumberComponent),
                         ],
                     }]
             }], ctorParameters: function () {
@@ -652,7 +615,7 @@
                             args: [i1.TUI_NUMBER_FORMAT]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [i5.TUI_IS_IOS]
+                            args: [cdk.TUI_IS_IOS]
                         }] }];
         }, propDecorators: { primitiveTextfield: [{
                     type: i0.ViewChild,
@@ -673,17 +636,14 @@
                     type: i0.Input
                 }], polymorpheusValueContent: [{
                     type: i0.ContentChildren,
-                    args: [i4.PolymorpheusOutletDirective, { descendants: true }]
+                    args: [i5.PolymorpheusOutletDirective, { descendants: true }]
                 }], onArrow: [{
                     type: i0.HostListener,
                     args: ['keydown.arrowDown', ['-step']]
                 }, {
                     type: i0.HostListener,
                     args: ['keydown.arrowUp', ['step']]
-                }], onZero: [{
-                    type: i0.HostListener,
-                    args: ['keydown.0', ['$event']]
-                }] } });
+                }], calculateMask: [] } });
 
     var TuiInputNumberDirective = /** @class */ (function (_super) {
         __extends(TuiInputNumberDirective, _super);
@@ -725,35 +685,32 @@
         return TuiInputNumberModule;
     }());
     TuiInputNumberModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputNumberModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiInputNumberModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputNumberModule, declarations: [TuiInputNumberComponent, TuiInputNumberDirective], imports: [i3.CommonModule,
-            i2.TextMaskModule,
-            i5.TuiMapperPipeModule,
+    TuiInputNumberModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputNumberModule, declarations: [TuiInputNumberComponent, TuiInputNumberDirective], imports: [i4.CommonModule,
+            i3.MaskitoModule,
             i1.TuiPrimitiveTextfieldModule,
             i1.TuiTextfieldControllerModule,
             i2.TuiValueAccessorModule,
-            i4.PolymorpheusModule,
+            i5.PolymorpheusModule,
             i1.TuiButtonModule], exports: [TuiInputNumberComponent, TuiInputNumberDirective, i1.TuiTextfieldComponent] });
     TuiInputNumberModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputNumberModule, imports: [[
-                i3.CommonModule,
-                i2.TextMaskModule,
-                i5.TuiMapperPipeModule,
+                i4.CommonModule,
+                i3.MaskitoModule,
                 i1.TuiPrimitiveTextfieldModule,
                 i1.TuiTextfieldControllerModule,
                 i2.TuiValueAccessorModule,
-                i4.PolymorpheusModule,
+                i5.PolymorpheusModule,
                 i1.TuiButtonModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputNumberModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i3.CommonModule,
-                            i2.TextMaskModule,
-                            i5.TuiMapperPipeModule,
+                            i4.CommonModule,
+                            i3.MaskitoModule,
                             i1.TuiPrimitiveTextfieldModule,
                             i1.TuiTextfieldControllerModule,
                             i2.TuiValueAccessorModule,
-                            i4.PolymorpheusModule,
+                            i5.PolymorpheusModule,
                             i1.TuiButtonModule,
                         ],
                         declarations: [TuiInputNumberComponent, TuiInputNumberDirective],