@taiga-ui/kit 3.29.2 → 3.30.0

package/bundles/taiga-ui-kit-components-input-phone.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('@taiga-ui/kit/providers'), require('rxjs/operators'), require('@taiga-ui/kit/directives'), require('rxjs')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-phone', ['exports', '@angular/core', '@angular/forms', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/providers', 'rxjs/operators', '@taiga-ui/kit/directives', 'rxjs'], 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-phone"] = {}), global.ng.core, global.ng.forms, global.i2, global.i1, global["taiga-ui"].kit.providers, global.rxjs.operators, global["taiga-ui"].kit.directives, global.rxjs));
-})(this, (function (exports, i0, i4, i2, i1, providers, operators, i3, i5) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@maskito/core'), require('@maskito/kit'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@taiga-ui/kit/providers'), require('rxjs/operators'), require('@taiga-ui/kit/directives'), require('@maskito/angular'), require('rxjs')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-phone', ['exports', '@angular/core', '@angular/forms', '@maskito/core', '@maskito/kit', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/providers', 'rxjs/operators', '@taiga-ui/kit/directives', '@maskito/angular', 'rxjs'], 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-phone"] = {}), global.ng.core, global.ng.forms, global.core, global.kit, global.i2, global.i1, global["taiga-ui"].kit.providers, global.rxjs.operators, global["taiga-ui"].kit.directives, global.i4, global.rxjs));
+})(this, (function (exports, i0, i5, core, kit, i2, i1, providers, operators, i3, i4, i6) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,11 +23,12 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -363,6 +364,65 @@
         useValue: Object.assign(Object.assign({}, TUI_INPUT_PHONE_DEFAULT_OPTIONS), options),
     }); };
 
+    var countDigits = function (value) { return value.replace(/\D/g, "").length; };
+    /**
+     * `InputPhone` component sets country code as non-removable prefix.
+     * This prefix appears on focus and cannot be erased.
+     * But users sometimes can copy complete phone number (from any different source)
+     * and try to insert the whole string inside our `InputPhone` textfield.
+     * This preprocessor helps to avoid country prefix duplication on paste/drop/autofill events.
+     */
+    function tuiCreateCompletePhoneInsertionPreprocessor(countryCode, phoneMaskAfterCountryCode) {
+        var completePhoneLength = (countryCode + phoneMaskAfterCountryCode).replace(/[^#\d]+/g, "").length;
+        var trimCountryPrefix = function (value) {
+            return countryCode === "+7"
+                ? value.replace(/^(\+?7?\s?8?)\s?/, "")
+                : value.replace(new RegExp("^(\\+?" + countryCode.replace("+", "") + "?)\\s?"), "");
+        };
+        return function (_a) {
+            var elementState = _a.elementState, data = _a.data;
+            var value = elementState.value, selection = elementState.selection;
+            return {
+                elementState: {
+                    selection: selection,
+                    value: 
+                    /**
+                     * The only possible case when `value` includes digits more
+                     * than mask expression allows – browser autofill.
+                     * It means that we are inside `input`-event
+                     * and mask are ready to reject "extra" characters.
+                     * We should cut leading country prefix to save trailing characters!
+                     */
+                    countDigits(value) > completePhoneLength
+                        ? trimCountryPrefix(value)
+                        : value,
+                },
+                data: countDigits(data) >= completePhoneLength
+                    ? /**
+                       * User tries to insert/drop the complete phone number (with country prefix).
+                       * We should drop already existing non-removable prefix.
+                       */
+                        trimCountryPrefix(data)
+                    : data,
+            };
+        };
+    }
+
+    /**
+     * Create {@link https://tinkoff.github.io/maskito/core-concepts/mask-expression pattern mask expression} for phone number
+     *
+     * @example
+     * tuiCreatePhoneMaskExpression('+1', '(###) ###-####');
+     */
+    function tuiCreatePhoneMaskExpression(countryCode, phoneMaskAfterCountryCode) {
+        return __spreadArray(__spreadArray(__spreadArray([], __read(countryCode.split(""))), [
+            " "
+        ]), __read(phoneMaskAfterCountryCode
+            .replace(/[^#\- ()]+/g, "")
+            .split("")
+            .map(function (item) { return (item === "#" ? /\d/ : item); })));
+    }
+
     var TuiInputPhoneComponent = /** @class */ (function (_super) {
         __extends(TuiInputPhoneComponent, _super);
         function TuiInputPhoneComponent(control, destroy$, cdr, selection$, textfieldCleaner, options) {
@@ -373,25 +433,6 @@
             _this.allowText = _this.options.allowText;
             _this.search = '';
             _this.searchChange = new i0.EventEmitter();
-            _this.textMaskOptions = {
-                mask: function (value) { return _this.allowText && !_this.value && isText(value) && value !== '+'
-                    ? false
-                    : __spreadArray(__spreadArray(__spreadArray([], __read(_this.countryCode.split(''))), [
-                        ' '
-                    ]), __read(_this.phoneMaskAfterCountryCode
-                        .replace(/[^#\- ()]+/g, '')
-                        .split('')
-                        .map(function (item) { return (item === '#' ? /\d/ : item); }))); },
-                pipe: function (value) {
-                    if (_this.allowText) {
-                        return value;
-                    }
-                    return value === '' && _this.focused && !_this.readOnly
-                        ? _this.countryCode + " "
-                        : value.replace(/-$/, '');
-                },
-                guide: false,
-            };
             _this.countryCode = _this.options.countryCode;
             _this.open = false;
             selection$.pipe(operators.takeUntil(destroy$)).subscribe(function () {
@@ -400,9 +441,10 @@
             return _this;
         }
         Object.defineProperty(TuiInputPhoneComponent.prototype, "countryCodeSetter", {
-            set: function (countryCode) {
-                this.updateValueWithNewCountryCode(countryCode);
-                this.countryCode = countryCode;
+            set: function (newCountryCode) {
+                var prevCountryCode = this.countryCode;
+                this.countryCode = newCountryCode;
+                this.updateValueWithNewCountryCode(prevCountryCode, newCountryCode);
             },
             enumerable: false,
             configurable: true
@@ -424,11 +466,16 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(TuiInputPhoneComponent.prototype, "computedValue", {
+        Object.defineProperty(TuiInputPhoneComponent.prototype, "nativeValue", {
             get: function () {
-                return this.value
-                    ? i1.tuiFormatPhone(this.value, this.countryCode, this.phoneMaskAfterCountryCode)
-                    : this.search || '';
+                return this.nativeFocusableElement
+                    ? this.nativeFocusableElement.value
+                    : core.maskitoTransform(this.value, this.maskOptions);
+            },
+            set: function (value) {
+                if (this.nativeFocusableElement) {
+                    this.nativeFocusableElement.value = value;
+                }
             },
             enumerable: false,
             configurable: true
@@ -449,42 +496,34 @@
         });
         Object.defineProperty(TuiInputPhoneComponent.prototype, "canClean", {
             get: function () {
-                return this.computedValue !== this.countryCode && this.textfieldCleaner.cleaner;
+                return (this.nativeValue !== this.nonRemovablePrefix && this.textfieldCleaner.cleaner);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiInputPhoneComponent.prototype, "maskOptions", {
+            get: function () {
+                return this.calculateMask(this.countryCode, this.phoneMaskAfterCountryCode, this.nonRemovablePrefix, this.allowText);
             },
             enumerable: false,
             configurable: true
         });
-        TuiInputPhoneComponent.prototype.onDrop = function (event) {
-            if (!event.dataTransfer) {
-                return;
-            }
-            this.setValueWithoutPrefix(event.dataTransfer.getData('text'));
-            event.preventDefault();
-        };
-        TuiInputPhoneComponent.prototype.onPaste = function (event) {
-            this.setValueWithoutPrefix(i2.tuiGetClipboardDataText(event));
-        };
         TuiInputPhoneComponent.prototype.onActiveZone = function (active) {
             this.updateFocused(active);
-            if (active && !this.computedValue && !this.readOnly && !this.allowText) {
-                this.updateSearch(this.countryCode);
+            if (active && !this.nativeValue && !this.readOnly && !this.allowText) {
+                this.updateSearch(this.nonRemovablePrefix);
+                this.nativeValue = this.nonRemovablePrefix;
                 return;
             }
-            if (this.computedValue === this.countryCode ||
-                (this.search !== null &&
-                    Number.isNaN(parseInt(this.search.replace(i1.TUI_MASK_SYMBOLS_REGEXP, ''), 10)))) {
+            if (this.nativeValue === this.nonRemovablePrefix || this.isTextValue) {
                 this.updateSearch('');
+                this.nativeValue = '';
             }
-        };
-        TuiInputPhoneComponent.prototype.onBackspace = function (event) {
-            var target = event.target;
-            if ((target.selectionStart || 0) <= this.nonRemovableLength &&
-                target.selectionStart === target.selectionEnd) {
-                event.preventDefault();
+            if (!active && !this.allowText && this.nativeFocusableElement) {
+                this.nativeValue = this.nativeValue.replace(/\D$/, '');
             }
         };
         TuiInputPhoneComponent.prototype.onValueChange = function (value) {
-            value = value === '' ? this.countryCode : value;
             var parsed = isText(value)
                 ? value
                 : value.replace(i1.TUI_MASK_SYMBOLS_REGEXP, '').slice(0, this.maxPhoneLength);
@@ -495,6 +534,7 @@
         TuiInputPhoneComponent.prototype.handleOption = function (item) {
             this.focusInput();
             this.value = item;
+            this.nativeValue = core.maskitoTransform(this.value, this.maskOptions);
             this.updateSearch('');
             this.open = false;
         };
@@ -504,6 +544,7 @@
         };
         TuiInputPhoneComponent.prototype.writeValue = function (value) {
             _super.prototype.writeValue.call(this, value);
+            this.nativeValue = core.maskitoTransform(value || '', this.maskOptions);
             this.updateSearch('');
         };
         TuiInputPhoneComponent.prototype.getFallbackValue = function () {
@@ -524,9 +565,16 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(TuiInputPhoneComponent.prototype, "nonRemovablePrefix", {
+            get: function () {
+                return this.countryCode + " ";
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(TuiInputPhoneComponent.prototype, "nonRemovableLength", {
             get: function () {
-                return this.isTextValue ? 0 : this.countryCode.length + 1;
+                return this.isTextValue ? 0 : this.nonRemovablePrefix.length;
             },
             enumerable: false,
             configurable: true
@@ -546,36 +594,30 @@
             enumerable: false,
             configurable: true
         });
+        TuiInputPhoneComponent.prototype.calculateMask = function (countryCode, phoneMaskAfterCountryCode, nonRemovablePrefix, allowText) {
+            var mask = tuiCreatePhoneMaskExpression(countryCode, phoneMaskAfterCountryCode);
+            var preprocessor = tuiCreateCompletePhoneInsertionPreprocessor(countryCode, phoneMaskAfterCountryCode);
+            return allowText
+                ? {
+                    mask: function (_a) {
+                        var value = _a.value;
+                        return isText(value) && value !== '+'
+                            ? core.MASKITO_DEFAULT_OPTIONS.mask
+                            : mask;
+                    },
+                    preprocessor: preprocessor,
+                }
+                : {
+                    mask: mask,
+                    preprocessor: preprocessor,
+                    postprocessor: kit.maskitoPrefixPostprocessorGenerator(nonRemovablePrefix),
+                };
+        };
         TuiInputPhoneComponent.prototype.setCaretPosition = function () {
             if (this.caretIsInForbiddenArea && !!this.nativeFocusableElement) {
                 this.nativeFocusableElement.setSelectionRange(this.nonRemovableLength, this.nonRemovableLength);
             }
         };
-        TuiInputPhoneComponent.prototype.setValueWithoutPrefix = function (value) {
-            if (this.readOnly) {
-                return;
-            }
-            this.open = true;
-            this.value = this.cleanValue(value);
-            this.updateSearch(this.allowText && isText(value)
-                ? value
-                : value.replace(i1.TUI_MASK_SYMBOLS_REGEXP, ''));
-        };
-        TuiInputPhoneComponent.prototype.cleanValue = function (value) {
-            var reg = this.countryCode === '+7' ? /^7|^8/ : new RegExp(this.countryCode.slice(1));
-            var oldValueExist = this.value.length > this.countryCode.length &&
-                this.value.length < this.maxPhoneLength;
-            var newValueLength = value.replace(i1.TUI_MASK_SYMBOLS_REGEXP, '').length;
-            var cleanNewValue = value.replace(/[^0-9]+/g, '');
-            var selectionLength = String(getSelection()).length;
-            if (oldValueExist && selectionLength === 0) {
-                return ("" + this.value + cleanNewValue).slice(0, this.maxPhoneLength);
-            }
-            if (newValueLength < this.maxPhoneLength - 1) {
-                return ("" + this.countryCode + cleanNewValue).slice(0, this.maxPhoneLength);
-            }
-            return ("" + this.countryCode + cleanNewValue.replace(reg, '')).slice(0, this.maxPhoneLength);
-        };
         TuiInputPhoneComponent.prototype.focusInput = function () {
             if (this.nativeFocusableElement) {
                 this.nativeFocusableElement.focus({ preventScroll: true });
@@ -588,20 +630,21 @@
             this.search = search;
             this.searchChange.emit(search);
         };
-        TuiInputPhoneComponent.prototype.updateValueWithNewCountryCode = function (newCountryCode) {
+        TuiInputPhoneComponent.prototype.updateValueWithNewCountryCode = function (prevCountryCode, newCountryCode) {
             if (!this.isTextValue) {
-                this.value = this.value.replace(this.countryCode, newCountryCode);
+                this.value = this.value.replace(prevCountryCode, newCountryCode);
+                this.nativeValue = core.maskitoTransform(this.value, this.maskOptions);
             }
         };
         return TuiInputPhoneComponent;
     }(i2.AbstractTuiControl));
-    TuiInputPhoneComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputPhoneComponent, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: i2.TuiDestroyService, self: true }, { token: i0.ChangeDetectorRef }, { token: i1.TUI_SELECTION_STREAM }, { token: i1.TUI_TEXTFIELD_CLEANER }, { token: TUI_INPUT_PHONE_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiInputPhoneComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputPhoneComponent, deps: [{ token: i5.NgControl, optional: true, self: true }, { token: i2.TuiDestroyService, self: true }, { token: i0.ChangeDetectorRef }, { token: i1.TUI_SELECTION_STREAM }, { token: i1.TUI_TEXTFIELD_CLEANER }, { token: TUI_INPUT_PHONE_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TuiInputPhoneComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiInputPhoneComponent, selector: "tui-input-phone", inputs: { countryCodeSetter: ["countryCode", "countryCodeSetter"], phoneMaskAfterCountryCode: "phoneMaskAfterCountryCode", allowText: "allowText", search: "search" }, outputs: { searchChange: "searchChange" }, providers: [
             i2.TuiDestroyService,
             i2.tuiAsFocusableItemAccessor(TuiInputPhoneComponent),
             i2.tuiAsControl(TuiInputPhoneComponent),
             i1.tuiAsDataListHost(TuiInputPhoneComponent),
-        ], queries: [{ propertyName: "datalist", first: true, predicate: i1.TuiDataListDirective, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: i1.TuiHostedDropdownComponent, descendants: true }, { propertyName: "textfield", first: true, predicate: i1.TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<tui-hosted-dropdown\n    class=\"t-hosted\"\n    [canOpen]=\"canOpen\"\n    [content]=\"datalist || ''\"\n    [(open)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-primitive-textfield\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [pseudoHover]=\"pseudoHover\"\n        [pseudoFocus]=\"computedFocused\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"focusable\"\n        [textMask]=\"textMaskOptions\"\n        [value]=\"computedValue\"\n        [tuiTextfieldCleaner]=\"canClean\"\n        (valueChange)=\"onValueChange($event)\"\n        (drop)=\"onDrop($event)\"\n        (keydown.backspace)=\"onBackspace($event)\"\n        (paste.prevent)=\"onPaste($event)\"\n    >\n        <ng-content></ng-content>\n        <ng-content\n            select=\"input\"\n            ngProjectAs=\"input\"\n        ></ng-content>\n    </tui-primitive-textfield>\n</tui-hosted-dropdown>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:left}:host._disabled{pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}\n"], components: [{ type: i1__namespace.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "sided", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i1__namespace.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }], directives: [{ type: i2__namespace.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i1__namespace.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i3__namespace.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { type: i3__namespace.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i1__namespace.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }], viewProviders: [providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "datalist", first: true, predicate: i1.TuiDataListDirective, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: i1.TuiHostedDropdownComponent, descendants: true }, { propertyName: "textfield", first: true, predicate: i1.TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<tui-hosted-dropdown\n    class=\"t-hosted\"\n    [canOpen]=\"canOpen\"\n    [content]=\"datalist || ''\"\n    [(open)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-primitive-textfield\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [pseudoHover]=\"pseudoHover\"\n        [pseudoFocus]=\"computedFocused\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"focusable\"\n        [maskito]=\"maskOptions\"\n        [tuiTextfieldCleaner]=\"canClean\"\n        [(value)]=\"nativeValue\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content></ng-content>\n        <ng-content\n            select=\"input\"\n            ngProjectAs=\"input\"\n        ></ng-content>\n    </tui-primitive-textfield>\n</tui-hosted-dropdown>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:left}:host._disabled{pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}\n"], components: [{ type: i1__namespace.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "sided", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i1__namespace.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }], directives: [{ type: i2__namespace.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i1__namespace.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i3__namespace.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { type: i4__namespace.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { type: i1__namespace.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }], viewProviders: [providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
         i2.tuiRequiredSetter()
     ], TuiInputPhoneComponent.prototype, "countryCodeSetter", null);
@@ -614,6 +657,9 @@
     __decorate([
         i2.tuiDefaultProp()
     ], TuiInputPhoneComponent.prototype, "search", void 0);
+    __decorate([
+        i2.tuiPure
+    ], TuiInputPhoneComponent.prototype, "calculateMask", null);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputPhoneComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -630,14 +676,14 @@
                         viewProviders: [providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER],
                     }]
             }], ctorParameters: function () {
-            return [{ type: i4__namespace.NgControl, decorators: [{
+            return [{ type: i5__namespace.NgControl, decorators: [{
                             type: i0.Optional
                         }, {
                             type: i0.Self
                         }, {
                             type: i0.Inject,
-                            args: [i4.NgControl]
-                        }] }, { type: i5__namespace.Observable, decorators: [{
+                            args: [i5.NgControl]
+                        }] }, { type: i6__namespace.Observable, decorators: [{
                             type: i0.Self
                         }, {
                             type: i0.Inject,
@@ -645,7 +691,7 @@
                         }] }, { type: i0__namespace.ChangeDetectorRef, decorators: [{
                             type: i0.Inject,
                             args: [i0.ChangeDetectorRef]
-                        }] }, { type: i5__namespace.Observable, decorators: [{
+                        }] }, { type: i6__namespace.Observable, decorators: [{
                             type: i0.Inject,
                             args: [i1.TUI_SELECTION_STREAM]
                         }] }, { type: i1__namespace.TuiTextfieldCleanerDirective, decorators: [{
@@ -675,7 +721,7 @@
                 }], datalist: [{
                     type: i0.ContentChild,
                     args: [i1.TuiDataListDirective, { read: i0.TemplateRef }]
-                }] } });
+                }], calculateMask: [] } });
     function isText(value) {
         return Number.isNaN(parseInt(value.replace(i1.TUI_MASK_SYMBOLS_REGEXP, ''), 10));
     }
@@ -687,7 +733,7 @@
         }
         Object.defineProperty(TuiInputPhoneDirective.prototype, "value", {
             get: function () {
-                return this.host.computedValue;
+                return this.host.nativeValue;
             },
             enumerable: false,
             configurable: true
@@ -723,14 +769,14 @@
         return TuiInputPhoneModule;
     }());
     TuiInputPhoneModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputPhoneModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiInputPhoneModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputPhoneModule, declarations: [TuiInputPhoneComponent, TuiInputPhoneDirective], imports: [i3.TextMaskModule,
+    TuiInputPhoneModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputPhoneModule, declarations: [TuiInputPhoneComponent, TuiInputPhoneDirective], imports: [i4.MaskitoModule,
             i1.TuiPrimitiveTextfieldModule,
             i1.TuiHostedDropdownModule,
             i1.TuiTextfieldControllerModule,
             i2.TuiActiveZoneModule,
             i3.TuiValueAccessorModule], exports: [TuiInputPhoneComponent, TuiInputPhoneDirective, i1.TuiTextfieldComponent] });
     TuiInputPhoneModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputPhoneModule, imports: [[
-                i3.TextMaskModule,
+                i4.MaskitoModule,
                 i1.TuiPrimitiveTextfieldModule,
                 i1.TuiHostedDropdownModule,
                 i1.TuiTextfieldControllerModule,
@@ -741,7 +787,7 @@
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i3.TextMaskModule,
+                            i4.MaskitoModule,
                             i1.TuiPrimitiveTextfieldModule,
                             i1.TuiHostedDropdownModule,
                             i1.TuiTextfieldControllerModule,