@taiga-ui/kit 3.28.0 → 3.29.0

package/abstract/abstract-native-select.d.ts

@@ -3,16 +3,16 @@ import { AbstractTuiControl, TuiBooleanHandler, TuiIdService } from '@taiga-ui/c
 import { TuiTextfieldHost } from '@taiga-ui/core';
 import { TuiItemsHandlers } from '@taiga-ui/kit/tokens';
 import * as i0 from "@angular/core";
-export declare abstract class AbstractTuiNativeSelect<T = TuiTextfieldHost> {
-    readonly host: T;
+export declare abstract class AbstractTuiNativeSelect<H = TuiTextfieldHost, T = string> {
+    readonly host: H;
     readonly control: AbstractTuiControl<unknown>;
     protected readonly el: ElementRef<HTMLSelectElement>;
     private readonly idService;
-    readonly itemsHandlers: TuiItemsHandlers<string>;
-    disabledItemHandler: TuiBooleanHandler<string> | null;
+    readonly itemsHandlers: TuiItemsHandlers<T>;
+    disabledItemHandler: TuiBooleanHandler<T> | null;
     readonly datalist: TemplateRef<any> | null;
-    constructor(host: T, control: AbstractTuiControl<unknown>, el: ElementRef<HTMLSelectElement>, idService: TuiIdService, itemsHandlers: TuiItemsHandlers<string>);
+    constructor(host: H, control: AbstractTuiControl<unknown>, el: ElementRef<HTMLSelectElement>, idService: TuiIdService, itemsHandlers: TuiItemsHandlers<T>);
     get id(): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractTuiNativeSelect<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractTuiNativeSelect<any>, never, never, { "disabledItemHandler": "disabledItemHandler"; }, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractTuiNativeSelect<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractTuiNativeSelect<any, any>, never, never, { "disabledItemHandler": "disabledItemHandler"; }, {}, never>;
 }

package/bundles/taiga-ui-kit-abstract.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-kit-abstract.umd.js","sources":["../../../projects/kit/abstract/abstract-native-select.ts","../../../projects/kit/abstract/taiga-ui-kit-abstract.ts"],"sourcesContent":["import {\n    Directive,\n    ElementRef,\n    HostBinding,\n    Inject,\n    Input,\n    TemplateRef,\n    ViewChild,\n} from '@angular/core';\nimport {AbstractTuiControl, TuiBooleanHandler, TuiIdService} from '@taiga-ui/cdk';\nimport {TUI_TEXTFIELD_HOST, TuiDataListDirective, TuiTextfieldHost} from '@taiga-ui/core';\nimport {TUI_ITEMS_HANDLERS, TuiItemsHandlers} from '@taiga-ui/kit/tokens';\n\n@Directive()\nexport abstract class AbstractTuiNativeSelect<T = TuiTextfieldHost> {\n    @Input()\n    disabledItemHandler: TuiBooleanHandler<string> | null = null;\n\n    @ViewChild(TuiDataListDirective, {read: TemplateRef, static: true})\n    readonly datalist: TemplateRef<any> | null = null;\n\n    constructor(\n        @Inject(TUI_TEXTFIELD_HOST) readonly host: T,\n        @Inject(AbstractTuiControl) readonly control: AbstractTuiControl<unknown>,\n        @Inject(ElementRef) protected readonly el: ElementRef<HTMLSelectElement>,\n        @Inject(TuiIdService)\n        private readonly idService: TuiIdService,\n        @Inject(TUI_ITEMS_HANDLERS)\n        readonly itemsHandlers: TuiItemsHandlers<string>,\n    ) {}\n\n    @HostBinding(`id`)\n    get id(): string {\n        return this.el.nativeElement.id || this.idService.generate();\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["TUI_TEXTFIELD_HOST","AbstractTuiControl","ElementRef","TuiIdService","TUI_ITEMS_HANDLERS","i0","TuiDataListDirective","TemplateRef","Directive","Inject","Input","ViewChild","HostBinding"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,QAAA,uBAAA,kBAAA,YAAA;QAOI,SACyC,uBAAA,CAAA,IAAO,EACP,OAAoC,EAClC,EAAiC,EAEvD,SAAuB,EAE/B,aAAuC,EAAA;IANX,QAAA,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAG;IACP,QAAA,IAAO,CAAA,OAAA,GAAP,OAAO,CAA6B;IAClC,QAAA,IAAE,CAAA,EAAA,GAAF,EAAE,CAA+B;IAEvD,QAAA,IAAS,CAAA,SAAA,GAAT,SAAS,CAAc;IAE/B,QAAA,IAAa,CAAA,aAAA,GAAb,aAAa,CAA0B;IAZpD,QAAA,IAAmB,CAAA,mBAAA,GAAqC,IAAI,CAAC;IAGpD,QAAA,IAAQ,CAAA,QAAA,GAA4B,IAAI,CAAC;SAU9C;IAEJ,IAAA,MAAA,CAAA,cAAA,CACI,uBAAE,CAAA,SAAA,EAAA,IAAA,EAAA;IADN,QAAA,GAAA,EAAA,YAAA;IAEI,YAAA,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;aAChE;;;IAAA,KAAA,CAAA,CAAA;;;+IApBiB,uBAAuB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAQ7BA,uBAAkB,EAClB,EAAA,EAAA,KAAA,EAAAC,qBAAkB,aAClBC,aAAU,EAAA,EAAA,EAAA,KAAA,EACVC,eAAY,EAAA,EAAA,EAAA,KAAA,EAEZC,yBAAkB,EAAA,CAAA,EAAA,MAAA,EAAAC,aAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;wHAbZ,uBAAuB,EAAA,MAAA,EAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,IAAA,EAAA,SAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAI9BC,yBAAoB,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAASC,cAAW,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAAF,aAAA,EAAA,CAAA,CAAA;sHAJjC,uBAAuB,EAAA,UAAA,EAAA,CAAA;sBAD5CG,YAAS;;;kCASDC,SAAM;mCAACT,uBAAkB,CAAA;;kCACzBS,SAAM;mCAACR,qBAAkB,CAAA;;kCACzBQ,SAAM;mCAACP,aAAU,CAAA;;kCACjBO,SAAM;mCAACN,eAAY,CAAA;;kCAEnBM,SAAM;mCAACL,yBAAkB,CAAA;;6BAX9B,mBAAmB,EAAA,CAAA;0BADlBM,QAAK;oBAIG,QAAQ,EAAA,CAAA;0BADhBC,YAAS;2BAACL,yBAAoB,EAAE,EAAC,IAAI,EAAEC,cAAW,EAAE,MAAM,EAAE,IAAI,EAAC,CAAA;oBAc9D,EAAE,EAAA,CAAA;0BADLK,cAAW;2BAAC,IAAI,CAAA;;;IC/BrB;;IAEG;;;;;;;;;;"}
+{"version":3,"file":"taiga-ui-kit-abstract.umd.js","sources":["../../../projects/kit/abstract/abstract-native-select.ts","../../../projects/kit/abstract/taiga-ui-kit-abstract.ts"],"sourcesContent":["import {\n    Directive,\n    ElementRef,\n    HostBinding,\n    Inject,\n    Input,\n    TemplateRef,\n    ViewChild,\n} from '@angular/core';\nimport {AbstractTuiControl, TuiBooleanHandler, TuiIdService} from '@taiga-ui/cdk';\nimport {TUI_TEXTFIELD_HOST, TuiDataListDirective, TuiTextfieldHost} from '@taiga-ui/core';\nimport {TUI_ITEMS_HANDLERS, TuiItemsHandlers} from '@taiga-ui/kit/tokens';\n\n@Directive()\nexport abstract class AbstractTuiNativeSelect<H = TuiTextfieldHost, T = string> {\n    @Input()\n    disabledItemHandler: TuiBooleanHandler<T> | null = null;\n\n    @ViewChild(TuiDataListDirective, {read: TemplateRef, static: true})\n    readonly datalist: TemplateRef<any> | null = null;\n\n    constructor(\n        @Inject(TUI_TEXTFIELD_HOST) readonly host: H,\n        @Inject(AbstractTuiControl) readonly control: AbstractTuiControl<unknown>,\n        @Inject(ElementRef) protected readonly el: ElementRef<HTMLSelectElement>,\n        @Inject(TuiIdService)\n        private readonly idService: TuiIdService,\n        @Inject(TUI_ITEMS_HANDLERS)\n        readonly itemsHandlers: TuiItemsHandlers<T>,\n    ) {}\n\n    @HostBinding(`id`)\n    get id(): string {\n        return this.el.nativeElement.id || this.idService.generate();\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["TUI_TEXTFIELD_HOST","AbstractTuiControl","ElementRef","TuiIdService","TUI_ITEMS_HANDLERS","i0","TuiDataListDirective","TemplateRef","Directive","Inject","Input","ViewChild","HostBinding"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,QAAA,uBAAA,kBAAA,YAAA;QAOI,SACyC,uBAAA,CAAA,IAAO,EACP,OAAoC,EAClC,EAAiC,EAEvD,SAAuB,EAE/B,aAAkC,EAAA;IANN,QAAA,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAG;IACP,QAAA,IAAO,CAAA,OAAA,GAAP,OAAO,CAA6B;IAClC,QAAA,IAAE,CAAA,EAAA,GAAF,EAAE,CAA+B;IAEvD,QAAA,IAAS,CAAA,SAAA,GAAT,SAAS,CAAc;IAE/B,QAAA,IAAa,CAAA,aAAA,GAAb,aAAa,CAAqB;IAZ/C,QAAA,IAAmB,CAAA,mBAAA,GAAgC,IAAI,CAAC;IAG/C,QAAA,IAAQ,CAAA,QAAA,GAA4B,IAAI,CAAC;SAU9C;IAEJ,IAAA,MAAA,CAAA,cAAA,CACI,uBAAE,CAAA,SAAA,EAAA,IAAA,EAAA;IADN,QAAA,GAAA,EAAA,YAAA;IAEI,YAAA,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;aAChE;;;IAAA,KAAA,CAAA,CAAA;;;+IApBiB,uBAAuB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAQ7BA,uBAAkB,EAClB,EAAA,EAAA,KAAA,EAAAC,qBAAkB,aAClBC,aAAU,EAAA,EAAA,EAAA,KAAA,EACVC,eAAY,EAAA,EAAA,EAAA,KAAA,EAEZC,yBAAkB,EAAA,CAAA,EAAA,MAAA,EAAAC,aAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;wHAbZ,uBAAuB,EAAA,MAAA,EAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,IAAA,EAAA,SAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAI9BC,yBAAoB,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAASC,cAAW,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAAF,aAAA,EAAA,CAAA,CAAA;sHAJjC,uBAAuB,EAAA,UAAA,EAAA,CAAA;sBAD5CG,YAAS;;;kCASDC,SAAM;mCAACT,uBAAkB,CAAA;;kCACzBS,SAAM;mCAACR,qBAAkB,CAAA;;kCACzBQ,SAAM;mCAACP,aAAU,CAAA;;kCACjBO,SAAM;mCAACN,eAAY,CAAA;;kCAEnBM,SAAM;mCAACL,yBAAkB,CAAA;;6BAX9B,mBAAmB,EAAA,CAAA;0BADlBM,QAAK;oBAIG,QAAQ,EAAA,CAAA;0BADhBC,YAAS;2BAACL,yBAAoB,EAAE,EAAC,IAAI,EAAEC,cAAW,EAAE,MAAM,EAAE,IAAI,EAAC,CAAA;oBAc9D,EAAE,EAAA,CAAA;0BADLK,cAAW;2BAAC,IAAI,CAAA;;;IC/BrB;;IAEG;;;;;;;;;;"}

package/bundles/taiga-ui-kit-components-input-date-time.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/constants'), require('@taiga-ui/kit/tokens'), require('@taiga-ui/kit/utils/mask'), require('rxjs'), require('rxjs/operators'), require('@taiga-ui/kit/directives'), require('@tinkoff/ng-polymorpheus'), require('@angular/common')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-date-time', ['exports', '@angular/core', '@angular/forms', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/constants', '@taiga-ui/kit/tokens', '@taiga-ui/kit/utils/mask', 'rxjs', 'rxjs/operators', '@taiga-ui/kit/directives', '@tinkoff/ng-polymorpheus', '@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-date-time"] = {}), global.ng.core, global.ng.forms, global.i6, global.i1, global["taiga-ui"].kit.constants, global["taiga-ui"].kit.tokens, global["taiga-ui"].kit.utils.mask, global.rxjs, global.rxjs.operators, global["taiga-ui"].kit.directives, global.i3, global.ng.common));
-})(this, (function (exports, i0, i7, i6, i1, constants, tokens, mask, i8, operators, i2, i3, i4) { '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('@taiga-ui/kit/constants'), require('@taiga-ui/kit/tokens'), require('rxjs'), require('rxjs/operators'), require('@taiga-ui/kit/directives'), require('@maskito/angular'), require('@tinkoff/ng-polymorpheus'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-date-time', ['exports', '@angular/core', '@angular/forms', '@maskito/kit', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/constants', '@taiga-ui/kit/tokens', 'rxjs', 'rxjs/operators', '@taiga-ui/kit/directives', '@maskito/angular', '@tinkoff/ng-polymorpheus', '@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-date-time"] = {}), global.ng.core, global.ng.forms, global.kit, global.i7, global.i1, global["taiga-ui"].kit.constants, global["taiga-ui"].kit.tokens, global.rxjs, global.rxjs.operators, global["taiga-ui"].kit.directives, global.i3, global.i4, global.ng.common));
+})(this, (function (exports, i0, i8, kit, i7, i1, constants, tokens, i9, operators, i2, i3, i4, i5) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,13 +23,14 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
     var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
+    var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -370,8 +371,8 @@
                 return;
             }
             var date = new Date(value);
-            var day = i6.TuiDay.fromLocalNativeDate(date);
-            var time = i6.TuiTime.fromLocalNativeDate(date);
+            var day = i7.TuiDay.fromLocalNativeDate(date);
+            var time = i7.TuiTime.fromLocalNativeDate(date);
             this.host.writeValue([day, time]);
         };
         return TuiNativeDateTimeDirective;
@@ -415,26 +416,26 @@
             _this.month = null;
             _this.min = _this.options.min;
             _this.max = _this.options.max;
-            _this.disabledItemHandler = i6.ALWAYS_FALSE_HANDLER;
-            _this.defaultActiveYearMonth = i6.TuiMonth.currentLocal();
+            _this.disabledItemHandler = i7.ALWAYS_FALSE_HANDLER;
+            _this.defaultActiveYearMonth = i7.TuiMonth.currentLocal();
             _this.timeMode = 'HH:MM';
             _this.open = false;
-            _this.filler$ = i8.combineLatest([
-                _this.dateTexts$.pipe(operators.map(function (dateTexts) { return i6.changeDateSeparator(dateTexts[_this.dateFormat], _this.dateSeparator); })),
+            _this.filler$ = i9.combineLatest([
+                _this.dateTexts$.pipe(operators.map(function (dateTexts) { return i7.changeDateSeparator(dateTexts[_this.dateFormat], _this.dateSeparator); })),
                 _this.timeTexts$.pipe(operators.map(function (texts) { return texts[_this.timeMode]; })),
             ]).pipe(operators.map(function (fillers) { return _this.getDateTimeString.apply(_this, __spreadArray([], __read(fillers))); }));
             return _this;
         }
         Object.defineProperty(TuiInputDateTimeComponent.prototype, "fillerLength", {
             get: function () {
-                return i6.DATE_FILLER_LENGTH + constants.DATE_TIME_SEPARATOR.length + this.timeMode.length;
+                return i7.DATE_FILLER_LENGTH + constants.DATE_TIME_SEPARATOR.length + this.timeMode.length;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(TuiInputDateTimeComponent.prototype, "textMaskOptions", {
+        Object.defineProperty(TuiInputDateTimeComponent.prototype, "maskOptions", {
             get: function () {
-                return this.calculateMask(this.value[0], this.calendarMinDay, this.calendarMaxDay, this.timeMode, this.dateFormat, this.dateSeparator);
+                return this.calculateMask(this.min, this.max, this.timeMode, this.dateFormat, this.dateSeparator);
             },
             enumerable: false,
             configurable: true
@@ -478,7 +479,7 @@
             get: function () {
                 var _a = this, value = _a.value, nativeValue = _a.nativeValue, timeMode = _a.timeMode;
                 var _b = __read(value, 2), date = _b[0], time = _b[1];
-                var hasTimeInputChars = nativeValue.length > i6.DATE_FILLER_LENGTH;
+                var hasTimeInputChars = nativeValue.length > i7.DATE_FILLER_LENGTH;
                 if (!date || (!time && hasTimeInputChars)) {
                     return nativeValue;
                 }
@@ -512,7 +513,7 @@
             get: function () {
                 return (this.month ||
                     this.value[0] ||
-                    i6.tuiDateClamp(this.defaultActiveYearMonth, Array.isArray(this.min) ? this.min[0] : this.min, Array.isArray(this.max) ? this.max[0] : this.max));
+                    i7.tuiDateClamp(this.defaultActiveYearMonth, Array.isArray(this.min) ? this.min[0] : this.min, Array.isArray(this.max) ? this.max[0] : this.max));
             },
             enumerable: false,
             configurable: true
@@ -544,14 +545,14 @@
             if (!value) {
                 this.onOpenChange(true);
             }
-            if (value.length < i6.DATE_FILLER_LENGTH) {
+            if (value.length < i7.DATE_FILLER_LENGTH) {
                 this.value = [null, null];
                 return;
             }
             var _a = __read(value.split(constants.DATE_TIME_SEPARATOR), 2), date = _a[0], time = _a[1];
-            var parsedDate = i6.TuiDay.normalizeParse(date, this.dateFormat);
+            var parsedDate = i7.TuiDay.normalizeParse(date, this.dateFormat);
             var parsedTime = time && time.length === this.timeMode.length
-                ? this.clampTime(i6.TuiTime.fromString(time), parsedDate)
+                ? i7.TuiTime.fromString(time)
                 : null;
             this.open = false;
             this.value = [parsedDate, parsedTime];
@@ -571,8 +572,13 @@
         TuiInputDateTimeComponent.prototype.onFocused = function (focused) {
             var _this = this;
             this.updateFocused(focused);
-            if (focused ||
-                this.value[0] === null ||
+            if (focused) {
+                return;
+            }
+            setTimeout(function () {
+                _this.nativeValue = _this.trimTrailingSeparator(_this.nativeValue);
+            });
+            if (this.value[0] === null ||
                 this.value[1] !== null ||
                 this.nativeValue.length <= this.fillerLength + constants.DATE_TIME_SEPARATOR.length ||
                 this.timeMode === 'HH:MM') {
@@ -582,13 +588,8 @@
             if (!time) {
                 return;
             }
-            var parsedTime = i6.TuiTime.fromString(time);
+            var parsedTime = i7.TuiTime.fromString(time);
             this.value = [this.value[0], parsedTime];
-            setTimeout(function () {
-                if (_this.nativeValue.endsWith('.') || _this.nativeValue.endsWith(':')) {
-                    _this.nativeValue = _this.nativeValue.slice(0, -1);
-                }
-            });
         };
         TuiInputDateTimeComponent.prototype.setDisabledState = function () {
             _super.prototype.setDisabledState.call(this);
@@ -603,33 +604,27 @@
             return [null, null];
         };
         TuiInputDateTimeComponent.prototype.valueIdenticalComparator = function (oldValue, newValue) {
-            return (i6.tuiNullableSame(oldValue[0], newValue[0], function (a, b) { return a.daySame(b); }) &&
-                i6.tuiNullableSame(oldValue[1], newValue[1], function (a, b) { return String(a) === String(b); }));
+            return (i7.tuiNullableSame(oldValue[0], newValue[0], function (a, b) { return a.daySame(b); }) &&
+                i7.tuiNullableSame(oldValue[1], newValue[1], function (a, b) { return String(a) === String(b); }));
         };
-        TuiInputDateTimeComponent.prototype.calculateMask = function (day, min, max, timeMode, dateFormat, dateSeparator) {
-            return {
-                mask: __spreadArray(__spreadArray(__spreadArray([], __read(mask.tuiCreateDateMask(dateFormat, dateSeparator))), [
-                    ',',
-                    ' '
-                ]), __read(mask.tuiCreateTimeMask(timeMode))),
-                pipe: mask.tuiCreateAutoCorrectedDateTimePipe({
-                    value: day,
-                    min: min,
-                    max: max,
-                    dateFormat: dateFormat,
-                    dateSeparator: dateSeparator,
-                    timeMode: timeMode,
-                }),
-                guide: false,
-            };
+        TuiInputDateTimeComponent.prototype.calculateMask = function (min, max, timeMode, dateFormat, dateSeparator) {
+            return kit.maskitoDateTimeOptionsGenerator({
+                timeMode: timeMode,
+                dateSeparator: dateSeparator,
+                dateMode: constants.TUI_DATE_MODE_MASKITO_ADAPTER[dateFormat],
+                min: this.toNativeDate(min),
+                max: this.toNativeDate(max),
+            });
         };
         TuiInputDateTimeComponent.prototype.getDateTimeString = function (date, time, timeMode) {
             if (timeMode === void 0) { timeMode = 'HH:MM'; }
-            var dateString = date instanceof i6.TuiDay
+            var dateString = date instanceof i7.TuiDay
                 ? date.toString(this.dateFormat, this.dateSeparator)
                 : date;
-            var timeString = time instanceof i6.TuiTime ? time.toString(timeMode) : time || '';
-            return "" + dateString + constants.DATE_TIME_SEPARATOR + timeString;
+            var timeString = time instanceof i7.TuiTime ? time.toString(timeMode) : time || '';
+            return timeString
+                ? "" + dateString + constants.DATE_TIME_SEPARATOR + timeString
+                : dateString;
         };
         TuiInputDateTimeComponent.prototype.updateNativeValue = function (day) {
             var time = this.nativeValue.split(constants.DATE_TIME_SEPARATOR)[1] || '';
@@ -643,36 +638,46 @@
             var max = Array.isArray(this.max) && day.daySame(this.calendarMaxDay)
                 ? this.max[1].toAbsoluteMilliseconds()
                 : Infinity;
-            return i6.TuiTime.fromAbsoluteMilliseconds(i6.tuiClamp(ms, min, max));
+            return i7.TuiTime.fromAbsoluteMilliseconds(i7.tuiClamp(ms, min, max));
+        };
+        TuiInputDateTimeComponent.prototype.trimTrailingSeparator = function (value) {
+            return value.replace(new RegExp("(\\" + this.dateSeparator + "|" + constants.DATE_TIME_SEPARATOR + "|\\.)$"), '');
+        };
+        TuiInputDateTimeComponent.prototype.toNativeDate = function (value) {
+            if (!Array.isArray(value)) {
+                return value.toLocalNativeDate();
+            }
+            var _a = __read(value, 2), _b = _a[0], year = _b.year, month = _b.month, day = _b.day, _c = _a[1], hours = _c.hours, minutes = _c.minutes, seconds = _c.seconds, ms = _c.ms;
+            return new Date(year, month, day, hours, minutes, seconds, ms);
         };
         return TuiInputDateTimeComponent;
-    }(i6.AbstractTuiControl));
-    TuiInputDateTimeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateTimeComponent, deps: [{ token: i7.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: i1.TUI_TEXTFIELD_SIZE }, { token: i6.TUI_DATE_FORMAT }, { token: i6.TUI_DATE_SEPARATOR }, { token: tokens.TUI_TIME_TEXTS }, { token: tokens.TUI_DATE_TEXTS }, { token: tokens.TUI_DATE_TIME_VALUE_TRANSFORMER, optional: true }, { token: tokens.TUI_INPUT_DATE_OPTIONS }, { token: i6.TUI_IS_MOBILE }, { token: i6.TUI_IS_IOS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    }(i7.AbstractTuiControl));
+    TuiInputDateTimeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateTimeComponent, deps: [{ token: i8.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: i1.TUI_TEXTFIELD_SIZE }, { token: i7.TUI_DATE_FORMAT }, { token: i7.TUI_DATE_SEPARATOR }, { token: tokens.TUI_TIME_TEXTS }, { token: tokens.TUI_DATE_TEXTS }, { token: tokens.TUI_DATE_TIME_VALUE_TRANSFORMER, optional: true }, { token: tokens.TUI_INPUT_DATE_OPTIONS }, { token: i7.TUI_IS_MOBILE }, { token: i7.TUI_IS_IOS }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TuiInputDateTimeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiInputDateTimeComponent, selector: "tui-input-date-time", inputs: { min: "min", max: "max", disabledItemHandler: "disabledItemHandler", defaultActiveYearMonth: "defaultActiveYearMonth", timeMode: "timeMode" }, host: { listeners: { "click": "onClick()" } }, providers: [
-            i6.tuiAsFocusableItemAccessor(TuiInputDateTimeComponent),
-            i6.tuiAsControl(TuiInputDateTimeComponent),
+            i7.tuiAsFocusableItemAccessor(TuiInputDateTimeComponent),
+            i7.tuiAsControl(TuiInputDateTimeComponent),
             tokens.tuiDateStreamWithTransformer(tokens.TUI_DATE_TIME_VALUE_TRANSFORMER),
-        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: i1.TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<tui-hosted-dropdown\n    class=\"t-hosted\"\n    [canOpen]=\"interactive && !showNativePicker\"\n    [content]=\"dropdown\"\n    [open]=\"open && interactive\"\n    (openChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        automation-id=\"tui-input-date-time__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n        [tuiTextfieldFiller]=\"(filler$ | async) || ''\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"computedDisabled\"\n        [textMask]=\"textMaskOptions\"\n        [value]=\"computedValue\"\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    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-svg\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            tuiWrapper\n            appearance=\"icon\"\n            [class.t-icon]=\"!computedDisabled\"\n            [src]=\"src\"\n        ></tui-svg>\n        <input\n            *ngIf=\"showNativePicker\"\n            tuiDateTime\n            class=\"t-native-input\"\n        />\n    </ng-template>\n\n    <ng-template\n        #dropdown=\"polymorpheus\"\n        [polymorpheus]=\"type\"\n    >\n        <tui-calendar\n            tuiPreventDefault=\"mousedown\"\n            automation-id=\"tui-input-date-time__calendar\"\n            [min]=\"calendarMinDay\"\n            [max]=\"calendarMaxDay\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"calendarValue\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($event)\"\n        ></tui-calendar>\n    </ng-template>\n</tui-hosted-dropdown>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:left}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-icon{pointer-events:auto}.t-button{display:flex;height:2.75rem;justify-content:center;box-shadow:inset 0 1px var(--tui-base-03)}.t-native-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:auto;font-size:2rem}\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"] }, { type: i1__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i1__namespace.TuiCalendarComponent, selector: "tui-calendar", inputs: ["month", "disabledItemHandler", "min", "max", "minViewedMonth", "maxViewedMonth", "hoveredItem", "showAdjacent", "markerHandler", "value"], outputs: ["dayClick", "monthChange", "hoveredItemChange"] }], directives: [{ type: i1__namespace.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2__namespace.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { type: i1__namespace.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { type: i1__namespace.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { type: i2__namespace.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i3__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i1__namespace.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TuiNativeDateTimeDirective, selector: "input[tuiDateTime]" }, { type: i3__namespace.PolymorpheusTemplate, selector: "ng-template[polymorpheus]", inputs: ["polymorpheus"], exportAs: ["polymorpheus"] }, { type: i6__namespace.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]", inputs: ["tuiPreventDefault"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: i1.TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<tui-hosted-dropdown\n    class=\"t-hosted\"\n    [canOpen]=\"interactive && !showNativePicker\"\n    [content]=\"dropdown\"\n    [open]=\"open && interactive\"\n    (openChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        automation-id=\"tui-input-date-time__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n        [tuiTextfieldFiller]=\"(filler$ | async) || ''\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"computedDisabled\"\n        [maskito]=\"maskOptions\"\n        [value]=\"computedValue\"\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    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-svg\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            tuiWrapper\n            appearance=\"icon\"\n            [class.t-icon]=\"!computedDisabled\"\n            [src]=\"src\"\n        ></tui-svg>\n        <input\n            *ngIf=\"showNativePicker\"\n            tuiDateTime\n            class=\"t-native-input\"\n        />\n    </ng-template>\n\n    <ng-template\n        #dropdown=\"polymorpheus\"\n        [polymorpheus]=\"type\"\n    >\n        <tui-calendar\n            tuiPreventDefault=\"mousedown\"\n            automation-id=\"tui-input-date-time__calendar\"\n            [min]=\"calendarMinDay\"\n            [max]=\"calendarMaxDay\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"calendarValue\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($event)\"\n        ></tui-calendar>\n    </ng-template>\n</tui-hosted-dropdown>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:left}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-icon{pointer-events:auto}.t-button{display:flex;height:2.75rem;justify-content:center;box-shadow:inset 0 1px var(--tui-base-03)}.t-native-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:auto;font-size:2rem}\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"] }, { type: i1__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i1__namespace.TuiCalendarComponent, selector: "tui-calendar", inputs: ["month", "disabledItemHandler", "min", "max", "minViewedMonth", "maxViewedMonth", "hoveredItem", "showAdjacent", "markerHandler", "value"], outputs: ["dayClick", "monthChange", "hoveredItemChange"] }], directives: [{ type: i1__namespace.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2__namespace.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { type: i1__namespace.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { type: i1__namespace.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { type: i3__namespace.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { type: i4__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i1__namespace.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TuiNativeDateTimeDirective, selector: "input[tuiDateTime]" }, { type: i4__namespace.PolymorpheusTemplate, selector: "ng-template[polymorpheus]", inputs: ["polymorpheus"], exportAs: ["polymorpheus"] }, { type: i7__namespace.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]", inputs: ["tuiPreventDefault"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
-        i6.tuiDefaultProp()
+        i7.tuiDefaultProp()
     ], TuiInputDateTimeComponent.prototype, "min", void 0);
     __decorate([
-        i6.tuiDefaultProp()
+        i7.tuiDefaultProp()
     ], TuiInputDateTimeComponent.prototype, "max", void 0);
     __decorate([
-        i6.tuiDefaultProp()
+        i7.tuiDefaultProp()
     ], TuiInputDateTimeComponent.prototype, "disabledItemHandler", void 0);
     __decorate([
-        i6.tuiDefaultProp()
+        i7.tuiDefaultProp()
     ], TuiInputDateTimeComponent.prototype, "defaultActiveYearMonth", void 0);
     __decorate([
-        i6.tuiDefaultProp()
+        i7.tuiDefaultProp()
     ], TuiInputDateTimeComponent.prototype, "timeMode", void 0);
     __decorate([
-        i6.tuiPure
+        i7.tuiPure
     ], TuiInputDateTimeComponent.prototype, "calculateMask", null);
     __decorate([
-        i6.tuiPure
+        i7.tuiPure
     ], TuiInputDateTimeComponent.prototype, "getDateTimeString", null);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateTimeComponent, decorators: [{
                 type: i0.Component,
@@ -682,19 +687,19 @@
                         styleUrls: ['./input-date-time.style.less'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         providers: [
-                            i6.tuiAsFocusableItemAccessor(TuiInputDateTimeComponent),
-                            i6.tuiAsControl(TuiInputDateTimeComponent),
+                            i7.tuiAsFocusableItemAccessor(TuiInputDateTimeComponent),
+                            i7.tuiAsControl(TuiInputDateTimeComponent),
                             tokens.tuiDateStreamWithTransformer(tokens.TUI_DATE_TIME_VALUE_TRANSFORMER),
                         ],
                     }]
             }], ctorParameters: function () {
-            return [{ type: i7__namespace.NgControl, decorators: [{
+            return [{ type: i8__namespace.NgControl, decorators: [{
                             type: i0.Optional
                         }, {
                             type: i0.Self
                         }, {
                             type: i0.Inject,
-                            args: [i7.NgControl]
+                            args: [i8.NgControl]
                         }] }, { type: i0__namespace.ChangeDetectorRef, decorators: [{
                             type: i0.Inject,
                             args: [i0.ChangeDetectorRef]
@@ -703,17 +708,17 @@
                             args: [i1.TUI_TEXTFIELD_SIZE]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [i6.TUI_DATE_FORMAT]
+                            args: [i7.TUI_DATE_FORMAT]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [i6.TUI_DATE_SEPARATOR]
-                        }] }, { type: i8__namespace.Observable, decorators: [{
+                            args: [i7.TUI_DATE_SEPARATOR]
+                        }] }, { type: i9__namespace.Observable, decorators: [{
                             type: i0.Inject,
                             args: [tokens.TUI_TIME_TEXTS]
-                        }] }, { type: i8__namespace.Observable, decorators: [{
+                        }] }, { type: i9__namespace.Observable, decorators: [{
                             type: i0.Inject,
                             args: [tokens.TUI_DATE_TEXTS]
-                        }] }, { type: i6__namespace.AbstractTuiValueTransformer, decorators: [{
+                        }] }, { type: i7__namespace.AbstractTuiValueTransformer, decorators: [{
                             type: i0.Optional
                         }, {
                             type: i0.Inject,
@@ -723,10 +728,10 @@
                             args: [tokens.TUI_INPUT_DATE_OPTIONS]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [i6.TUI_IS_MOBILE]
+                            args: [i7.TUI_IS_MOBILE]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [i6.TUI_IS_IOS]
+                            args: [i7.TUI_IS_IOS]
                         }] }];
         }, propDecorators: { textfield: [{
                     type: i0.ViewChild,
@@ -794,11 +799,11 @@
     TuiInputDateTimeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateTimeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     TuiInputDateTimeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateTimeModule, declarations: [TuiInputDateTimeComponent,
             TuiInputDateTimeDirective,
-            TuiNativeDateTimeDirective], imports: [i4.CommonModule,
-            i2.TextMaskModule,
-            i3.PolymorpheusModule,
+            TuiNativeDateTimeDirective], imports: [i5.CommonModule,
+            i3.MaskitoModule,
+            i4.PolymorpheusModule,
             i1.TuiWrapperModule,
-            i6.TuiPreventDefaultModule,
+            i7.TuiPreventDefaultModule,
             i1.TuiCalendarModule,
             i1.TuiSvgModule,
             i1.TuiLinkModule,
@@ -809,11 +814,11 @@
             TuiInputDateTimeDirective,
             i1.TuiTextfieldComponent] });
     TuiInputDateTimeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateTimeModule, imports: [[
-                i4.CommonModule,
-                i2.TextMaskModule,
-                i3.PolymorpheusModule,
+                i5.CommonModule,
+                i3.MaskitoModule,
+                i4.PolymorpheusModule,
                 i1.TuiWrapperModule,
-                i6.TuiPreventDefaultModule,
+                i7.TuiPreventDefaultModule,
                 i1.TuiCalendarModule,
                 i1.TuiSvgModule,
                 i1.TuiLinkModule,
@@ -826,11 +831,11 @@
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i4.CommonModule,
-                            i2.TextMaskModule,
-                            i3.PolymorpheusModule,
+                            i5.CommonModule,
+                            i3.MaskitoModule,
+                            i4.PolymorpheusModule,
                             i1.TuiWrapperModule,
-                            i6.TuiPreventDefaultModule,
+                            i7.TuiPreventDefaultModule,
                             i1.TuiCalendarModule,
                             i1.TuiSvgModule,
                             i1.TuiLinkModule,