@taiga-ui/kit 3.25.0-dev.main-e209b11 → 3.25.0-dev.main-7547cea

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.i4, 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, i6, i4, i1, constants, tokens, mask, i7, operators, i2, i3, i5) { 'use strict';
+    (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';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,13 +23,13 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
+    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -349,9 +349,59 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
+    var TuiNativeDateTimeDirective = /** @class */ (function () {
+        function TuiNativeDateTimeDirective(host) {
+            this.host = host;
+        }
+        Object.defineProperty(TuiNativeDateTimeDirective.prototype, "value", {
+            get: function () {
+                var _a, _b;
+                if (!this.host.rawValue[0] || !this.host.rawValue[1]) {
+                    return '';
+                }
+                return ((_a = this.host.rawValue[0]) === null || _a === void 0 ? void 0 : _a.toString('YMD', '-')) + "T" + ((_b = this.host.rawValue[1]) === null || _b === void 0 ? void 0 : _b.toString('HH:MM'));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TuiNativeDateTimeDirective.prototype.onChange = function (value) {
+            if (!value) {
+                this.host.writeValue([null, null]);
+                return;
+            }
+            var date = new Date(value);
+            var day = i6.TuiDay.fromLocalNativeDate(date);
+            var time = i6.TuiTime.fromLocalNativeDate(date);
+            this.host.writeValue([day, time]);
+        };
+        return TuiNativeDateTimeDirective;
+    }());
+    TuiNativeDateTimeDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNativeDateTimeDirective, deps: [{ token: i1.TUI_TEXTFIELD_HOST }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiNativeDateTimeDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiNativeDateTimeDirective, selector: "input[tuiDateTime]", host: { attributes: { "type": "datetime-local" }, listeners: { "change.stop": "onChange($event.target.value)", "input.stop": "onChange($event.target.value)", "click.stop.silent": "0", "mousedown.stop.silent": "0" }, properties: { "tabIndex": "-1", "value": "value" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNativeDateTimeDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: 'input[tuiDateTime]',
+                        host: {
+                            type: 'datetime-local',
+                            '[tabIndex]': '-1',
+                            '[value]': 'value',
+                            '(change.stop)': 'onChange($event.target.value)',
+                            '(input.stop)': 'onChange($event.target.value)',
+                            '(click.stop.silent)': '0',
+                            '(mousedown.stop.silent)': '0',
+                        },
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.TUI_TEXTFIELD_HOST]
+                        }] }];
+        } });
+
     var TuiInputDateTimeComponent = /** @class */ (function (_super) {
         __extends(TuiInputDateTimeComponent, _super);
-        function TuiInputDateTimeComponent(control, cdr, textfieldSize, dateFormat, dateSeparator, timeTexts$, dateTexts$, valueTransformer, options) {
+        function TuiInputDateTimeComponent(control, cdr, textfieldSize, dateFormat, dateSeparator, timeTexts$, dateTexts$, valueTransformer, options, isMobile, isIos) {
             var _this = _super.call(this, control, cdr, valueTransformer) || this;
             _this.textfieldSize = textfieldSize;
             _this.dateFormat = dateFormat;
@@ -360,22 +410,24 @@
             _this.dateTexts$ = dateTexts$;
             _this.valueTransformer = valueTransformer;
             _this.options = options;
+            _this.isMobile = isMobile;
+            _this.isIos = isIos;
             _this.month = null;
             _this.min = _this.options.min;
             _this.max = _this.options.max;
-            _this.disabledItemHandler = i4.ALWAYS_FALSE_HANDLER;
-            _this.defaultActiveYearMonth = i4.TuiMonth.currentLocal();
+            _this.disabledItemHandler = i6.ALWAYS_FALSE_HANDLER;
+            _this.defaultActiveYearMonth = i6.TuiMonth.currentLocal();
             _this.timeMode = 'HH:MM';
             _this.open = false;
-            _this.filler$ = i7.combineLatest([
-                _this.dateTexts$.pipe(operators.map(function (dateTexts) { return i4.changeDateSeparator(dateTexts[_this.dateFormat], _this.dateSeparator); })),
+            _this.filler$ = i8.combineLatest([
+                _this.dateTexts$.pipe(operators.map(function (dateTexts) { return i6.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 i4.DATE_FILLER_LENGTH + constants.DATE_TIME_SEPARATOR.length + this.timeMode.length;
+                return i6.DATE_FILLER_LENGTH + constants.DATE_TIME_SEPARATOR.length + this.timeMode.length;
             },
             enumerable: false,
             configurable: true
@@ -408,11 +460,25 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(TuiInputDateTimeComponent.prototype, "nativePicker", {
+            get: function () {
+                return !!this.options.nativePicker && this.isMobile;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiInputDateTimeComponent.prototype, "showNativePicker", {
+            get: function () {
+                return this.nativePicker && this.timeMode === 'HH:MM';
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(TuiInputDateTimeComponent.prototype, "computedValue", {
             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 > i4.DATE_FILLER_LENGTH;
+                var hasTimeInputChars = nativeValue.length > i6.DATE_FILLER_LENGTH;
                 if (!date || (!time && hasTimeInputChars)) {
                     return nativeValue;
                 }
@@ -446,7 +512,7 @@
             get: function () {
                 return (this.month ||
                     this.value[0] ||
-                    i4.tuiDateClamp(this.defaultActiveYearMonth, Array.isArray(this.min) ? this.min[0] : this.min, Array.isArray(this.max) ? this.max[0] : this.max));
+                    i6.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
@@ -478,14 +544,14 @@
             if (!value) {
                 this.onOpenChange(true);
             }
-            if (value.length < i4.DATE_FILLER_LENGTH) {
+            if (value.length < i6.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 = i4.TuiDay.normalizeParse(date, this.dateFormat);
+            var parsedDate = i6.TuiDay.normalizeParse(date, this.dateFormat);
             var parsedTime = time && time.length === this.timeMode.length
-                ? this.clampTime(i4.TuiTime.fromString(time), parsedDate)
+                ? this.clampTime(i6.TuiTime.fromString(time), parsedDate)
                 : null;
             this.open = false;
             this.value = [parsedDate, parsedTime];
@@ -516,7 +582,7 @@
             if (!time) {
                 return;
             }
-            var parsedTime = i4.TuiTime.fromString(time);
+            var parsedTime = i6.TuiTime.fromString(time);
             this.value = [this.value[0], parsedTime];
             setTimeout(function () {
                 if (_this.nativeValue.endsWith('.') || _this.nativeValue.endsWith(':')) {
@@ -530,14 +596,15 @@
         };
         TuiInputDateTimeComponent.prototype.writeValue = function (value) {
             _super.prototype.writeValue.call(this, value);
-            this.nativeValue = value && (value[0] || value[1]) ? this.computedValue : '';
+            this.nativeValue =
+                this.value && (this.value[0] || this.value[1]) ? this.computedValue : '';
         };
         TuiInputDateTimeComponent.prototype.getFallbackValue = function () {
             return [null, null];
         };
         TuiInputDateTimeComponent.prototype.valueIdenticalComparator = function (oldValue, newValue) {
-            return (i4.tuiNullableSame(oldValue[0], newValue[0], function (a, b) { return a.daySame(b); }) &&
-                i4.tuiNullableSame(oldValue[1], newValue[1], function (a, b) { return String(a) === String(b); }));
+            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); }));
         };
         TuiInputDateTimeComponent.prototype.calculateMask = function (day, min, max, timeMode, dateFormat, dateSeparator) {
             return {
@@ -558,10 +625,10 @@
         };
         TuiInputDateTimeComponent.prototype.getDateTimeString = function (date, time, timeMode) {
             if (timeMode === void 0) { timeMode = 'HH:MM'; }
-            var dateString = date instanceof i4.TuiDay
+            var dateString = date instanceof i6.TuiDay
                 ? date.toString(this.dateFormat, this.dateSeparator)
                 : date;
-            var timeString = time instanceof i4.TuiTime ? time.toString(timeMode) : time || '';
+            var timeString = time instanceof i6.TuiTime ? time.toString(timeMode) : time || '';
             return "" + dateString + constants.DATE_TIME_SEPARATOR + timeString;
         };
         TuiInputDateTimeComponent.prototype.updateNativeValue = function (day) {
@@ -576,36 +643,36 @@
             var max = Array.isArray(this.max) && day.daySame(this.calendarMaxDay)
                 ? this.max[1].toAbsoluteMilliseconds()
                 : Infinity;
-            return i4.TuiTime.fromAbsoluteMilliseconds(i4.tuiClamp(ms, min, max));
+            return i6.TuiTime.fromAbsoluteMilliseconds(i6.tuiClamp(ms, min, max));
         };
         return TuiInputDateTimeComponent;
-    }(i4.AbstractTuiControl));
-    TuiInputDateTimeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateTimeComponent, deps: [{ token: i6.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: i1.TUI_TEXTFIELD_SIZE }, { token: i4.TUI_DATE_FORMAT }, { token: i4.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 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    }(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 });
     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: [
-            i4.tuiAsFocusableItemAccessor(TuiInputDateTimeComponent),
-            i4.tuiAsControl(TuiInputDateTimeComponent),
+            i6.tuiAsFocusableItemAccessor(TuiInputDateTimeComponent),
+            i6.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\"\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    </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)}\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: i3__namespace.PolymorpheusTemplate, selector: "ng-template[polymorpheus]", inputs: ["polymorpheus"], exportAs: ["polymorpheus"] }, { type: i4__namespace.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]", inputs: ["tuiPreventDefault"] }], pipes: { "async": i5__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        [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 });
     __decorate([
-        i4.tuiDefaultProp()
+        i6.tuiDefaultProp()
     ], TuiInputDateTimeComponent.prototype, "min", void 0);
     __decorate([
-        i4.tuiDefaultProp()
+        i6.tuiDefaultProp()
     ], TuiInputDateTimeComponent.prototype, "max", void 0);
     __decorate([
-        i4.tuiDefaultProp()
+        i6.tuiDefaultProp()
     ], TuiInputDateTimeComponent.prototype, "disabledItemHandler", void 0);
     __decorate([
-        i4.tuiDefaultProp()
+        i6.tuiDefaultProp()
     ], TuiInputDateTimeComponent.prototype, "defaultActiveYearMonth", void 0);
     __decorate([
-        i4.tuiDefaultProp()
+        i6.tuiDefaultProp()
     ], TuiInputDateTimeComponent.prototype, "timeMode", void 0);
     __decorate([
-        i4.tuiPure
+        i6.tuiPure
     ], TuiInputDateTimeComponent.prototype, "calculateMask", null);
     __decorate([
-        i4.tuiPure
+        i6.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,
@@ -615,19 +682,19 @@
                         styleUrls: ['./input-date-time.style.less'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         providers: [
-                            i4.tuiAsFocusableItemAccessor(TuiInputDateTimeComponent),
-                            i4.tuiAsControl(TuiInputDateTimeComponent),
+                            i6.tuiAsFocusableItemAccessor(TuiInputDateTimeComponent),
+                            i6.tuiAsControl(TuiInputDateTimeComponent),
                             tokens.tuiDateStreamWithTransformer(tokens.TUI_DATE_TIME_VALUE_TRANSFORMER),
                         ],
                     }]
             }], ctorParameters: function () {
-            return [{ type: i6__namespace.NgControl, decorators: [{
+            return [{ type: i7__namespace.NgControl, decorators: [{
                             type: i0.Optional
                         }, {
                             type: i0.Self
                         }, {
                             type: i0.Inject,
-                            args: [i6.NgControl]
+                            args: [i7.NgControl]
                         }] }, { type: i0__namespace.ChangeDetectorRef, decorators: [{
                             type: i0.Inject,
                             args: [i0.ChangeDetectorRef]
@@ -636,17 +703,17 @@
                             args: [i1.TUI_TEXTFIELD_SIZE]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [i4.TUI_DATE_FORMAT]
+                            args: [i6.TUI_DATE_FORMAT]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [i4.TUI_DATE_SEPARATOR]
-                        }] }, { type: i7__namespace.Observable, decorators: [{
+                            args: [i6.TUI_DATE_SEPARATOR]
+                        }] }, { type: i8__namespace.Observable, decorators: [{
                             type: i0.Inject,
                             args: [tokens.TUI_TIME_TEXTS]
-                        }] }, { type: i7__namespace.Observable, decorators: [{
+                        }] }, { type: i8__namespace.Observable, decorators: [{
                             type: i0.Inject,
                             args: [tokens.TUI_DATE_TEXTS]
-                        }] }, { type: i4__namespace.AbstractTuiValueTransformer, decorators: [{
+                        }] }, { type: i6__namespace.AbstractTuiValueTransformer, decorators: [{
                             type: i0.Optional
                         }, {
                             type: i0.Inject,
@@ -654,6 +721,12 @@
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [tokens.TUI_INPUT_DATE_OPTIONS]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i6.TUI_IS_MOBILE]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i6.TUI_IS_IOS]
                         }] }];
         }, propDecorators: { textfield: [{
                     type: i0.ViewChild,
@@ -685,9 +758,19 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(TuiInputDateTimeDirective.prototype, "rawValue", {
+            get: function () {
+                return this.host.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         TuiInputDateTimeDirective.prototype.onValueChange = function (value) {
             this.host.onValueChange(value);
         };
+        TuiInputDateTimeDirective.prototype.writeValue = function (value) {
+            this.host.writeValue(value);
+        };
         TuiInputDateTimeDirective.prototype.process = function (input) {
             input.inputMode = 'numeric';
         };
@@ -709,11 +792,13 @@
         return TuiInputDateTimeModule;
     }());
     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], imports: [i5.CommonModule,
+    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,
             i1.TuiWrapperModule,
-            i4.TuiPreventDefaultModule,
+            i6.TuiPreventDefaultModule,
             i1.TuiCalendarModule,
             i1.TuiSvgModule,
             i1.TuiLinkModule,
@@ -724,11 +809,11 @@
             TuiInputDateTimeDirective,
             i1.TuiTextfieldComponent] });
     TuiInputDateTimeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateTimeModule, imports: [[
-                i5.CommonModule,
+                i4.CommonModule,
                 i2.TextMaskModule,
                 i3.PolymorpheusModule,
                 i1.TuiWrapperModule,
-                i4.TuiPreventDefaultModule,
+                i6.TuiPreventDefaultModule,
                 i1.TuiCalendarModule,
                 i1.TuiSvgModule,
                 i1.TuiLinkModule,
@@ -741,11 +826,11 @@
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i5.CommonModule,
+                            i4.CommonModule,
                             i2.TextMaskModule,
                             i3.PolymorpheusModule,
                             i1.TuiWrapperModule,
-                            i4.TuiPreventDefaultModule,
+                            i6.TuiPreventDefaultModule,
                             i1.TuiCalendarModule,
                             i1.TuiSvgModule,
                             i1.TuiLinkModule,
@@ -754,7 +839,11 @@
                             i2.TuiValueAccessorModule,
                             i1.TuiTextfieldControllerModule,
                         ],
-                        declarations: [TuiInputDateTimeComponent, TuiInputDateTimeDirective],
+                        declarations: [
+                            TuiInputDateTimeComponent,
+                            TuiInputDateTimeDirective,
+                            TuiNativeDateTimeDirective,
+                        ],
                         exports: [
                             TuiInputDateTimeComponent,
                             TuiInputDateTimeDirective,