@taiga-ui/kit 3.19.0 → 3.20.0

package/bundles/taiga-ui-kit-components-input-date.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('@tinkoff/ng-polymorpheus'), require('rxjs/operators'), require('@taiga-ui/kit/directives'), require('@angular/common'), require('rxjs')) :
     typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-date', ['exports', '@angular/core', '@angular/forms', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/constants', '@taiga-ui/kit/tokens', '@taiga-ui/kit/utils/mask', '@tinkoff/ng-polymorpheus', 'rxjs/operators', '@taiga-ui/kit/directives', '@angular/common', '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-date"] = {}), global.ng.core, global.ng.forms, global.i2, global.i1, global["taiga-ui"].kit.constants, global["taiga-ui"].kit.tokens, global["taiga-ui"].kit.utils.mask, global.i4, global.rxjs.operators, global["taiga-ui"].kit.directives, global.ng.common, global.rxjs));
-})(this, (function (exports, i0, i6, i2, i1, constants, tokens, mask, i4, operators, i3, i5, i7) { '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"] = {}), global.ng.core, global.ng.forms, global.i3, global.i1, global["taiga-ui"].kit.constants, global["taiga-ui"].kit.tokens, global["taiga-ui"].kit.utils.mask, global.i5, global.rxjs.operators, global["taiga-ui"].kit.directives, global.ng.common, global.rxjs));
+})(this, (function (exports, i0, i7, i3, i1, constants, tokens, mask, i5, operators, i4, i6, i8) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,13 +23,13 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
-    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -349,6 +349,54 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
+    var TuiNativeDateComponent = /** @class */ (function () {
+        function TuiNativeDateComponent(host, dateFormat) {
+            this.host = host;
+            this.dateFormat = dateFormat;
+        }
+        Object.defineProperty(TuiNativeDateComponent.prototype, "value", {
+            get: function () {
+                return this.host.value.length === i3.DATE_FILLER_LENGTH
+                    ? i3.TuiDay.normalizeParse(this.host.value, this.dateFormat).toString('YMD', '-')
+                    : '';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TuiNativeDateComponent.prototype.onChange = function (value) {
+            this.host.onValueChange(value ? i3.TuiDay.normalizeParse(value, 'YMD').toString(this.dateFormat) : '');
+        };
+        return TuiNativeDateComponent;
+    }());
+    TuiNativeDateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNativeDateComponent, deps: [{ token: i1.TUI_TEXTFIELD_HOST }, { token: i3.TUI_DATE_FORMAT }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiNativeDateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiNativeDateComponent, selector: "input[tuiDate]", host: { attributes: { "type": "date" }, listeners: { "change": "onChange($event.target.value)", "click.stop.silent": "0", "input.stop.silent": "0", "mousedown.stop.silent": "0" }, properties: { "tabIndex": "-1", "value": "value" } }, ngImport: i0__namespace, template: '', isInline: true, styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:auto;font-size:2rem}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNativeDateComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'input[tuiDate]',
+                        template: '',
+                        host: {
+                            type: 'date',
+                            '[tabIndex]': '-1',
+                            '[value]': 'value',
+                            '(change)': 'onChange($event.target.value)',
+                            '(click.stop.silent)': '0',
+                            '(input.stop.silent)': '0',
+                            '(mousedown.stop.silent)': '0',
+                        },
+                        styleUrls: ['./native-date.style.less'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.TUI_TEXTFIELD_HOST]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i3.TUI_DATE_FORMAT]
+                        }] }];
+        } });
+
     var TuiInputDateComponent = /** @class */ (function (_super) {
         __extends(TuiInputDateComponent, _super);
         function TuiInputDateComponent(control, changeDetectorRef, injector, isMobile, dialogService, mobileCalendar, textfieldSize, dateFormat, dateSeparator, dateTexts$, valueTransformer, options) {
@@ -371,12 +419,12 @@
             };
             _this.min = _this.options.min;
             _this.max = _this.options.max;
-            _this.disabledItemHandler = i2.ALWAYS_FALSE_HANDLER;
+            _this.disabledItemHandler = i3.ALWAYS_FALSE_HANDLER;
             _this.markerHandler = i1.TUI_DEFAULT_MARKER_HANDLER;
             _this.items = [];
-            _this.defaultActiveYearMonth = i2.TuiMonth.currentLocal();
+            _this.defaultActiveYearMonth = i3.TuiMonth.currentLocal();
             _this.open = false;
-            _this.filler$ = _this.dateTexts$.pipe(operators.map(function (dateTexts) { return i2.changeDateSeparator(dateTexts[_this.dateFormat], _this.dateSeparator); }));
+            _this.filler$ = _this.dateTexts$.pipe(operators.map(function (dateTexts) { return i3.changeDateSeparator(dateTexts[_this.dateFormat], _this.dateSeparator); }));
             return _this;
         }
         Object.defineProperty(TuiInputDateComponent.prototype, "nativeFocusableElement", {
@@ -395,7 +443,14 @@
         });
         Object.defineProperty(TuiInputDateComponent.prototype, "computedMobile", {
             get: function () {
-                return this.isMobile && !!this.mobileCalendar;
+                return this.isMobile && (!!this.mobileCalendar || this.nativePicker);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiInputDateComponent.prototype, "nativePicker", {
+            get: function () {
+                return this.options.nativePicker;
             },
             enumerable: false,
             configurable: true
@@ -425,7 +480,7 @@
                 }
                 return (this.month ||
                     this.value ||
-                    i2.tuiDateClamp(this.defaultActiveYearMonth, this.min, this.max));
+                    i3.tuiDateClamp(this.defaultActiveYearMonth, this.min, this.max));
             },
             enumerable: false,
             configurable: true
@@ -494,7 +549,7 @@
                 return;
             }
             this.dialogService
-                .open(new i4.PolymorpheusComponent(this.mobileCalendar, this.injector), {
+                .open(new i5.PolymorpheusComponent(this.mobileCalendar, this.injector), {
                 size: 'fullscreen',
                 closeable: false,
                 data: {
@@ -516,9 +571,9 @@
             if (!value) {
                 this.onOpenChange(true);
             }
-            this.updateValue(value.length !== i2.DATE_FILLER_LENGTH
+            this.updateValue(value.length !== i3.DATE_FILLER_LENGTH
                 ? null
-                : i2.TuiDay.normalizeParse(value, this.dateFormat));
+                : i3.TuiDay.normalizeParse(value, this.dateFormat));
         };
         TuiInputDateComponent.prototype.onDayClick = function (value) {
             this.updateValue(value);
@@ -542,33 +597,33 @@
             this.nativeValue = value ? this.computedValue : '';
         };
         TuiInputDateComponent.prototype.valueIdenticalComparator = function (oldValue, newValue) {
-            return i2.tuiNullableSame(oldValue, newValue, function (a, b) { return a.daySame(b); });
+            return i3.tuiNullableSame(oldValue, newValue, function (a, b) { return a.daySame(b); });
         };
         return TuiInputDateComponent;
-    }(i2.AbstractTuiNullableControl));
-    TuiInputDateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateComponent, deps: [{ token: i6.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i2.TUI_IS_MOBILE }, { token: i1.TuiDialogService }, { token: tokens.TUI_MOBILE_CALENDAR, optional: true }, { token: i1.TUI_TEXTFIELD_SIZE }, { token: i2.TUI_DATE_FORMAT }, { token: i2.TUI_DATE_SEPARATOR }, { token: tokens.TUI_DATE_TEXTS }, { token: tokens.TUI_DATE_VALUE_TRANSFORMER, optional: true }, { token: tokens.TUI_INPUT_DATE_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    }(i3.AbstractTuiNullableControl));
+    TuiInputDateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateComponent, deps: [{ token: i7.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i3.TUI_IS_MOBILE }, { token: i1.TuiDialogService }, { token: tokens.TUI_MOBILE_CALENDAR, optional: true }, { token: i1.TUI_TEXTFIELD_SIZE }, { token: i3.TUI_DATE_FORMAT }, { token: i3.TUI_DATE_SEPARATOR }, { token: tokens.TUI_DATE_TEXTS }, { token: tokens.TUI_DATE_VALUE_TRANSFORMER, optional: true }, { token: tokens.TUI_INPUT_DATE_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TuiInputDateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiInputDateComponent, selector: "tui-input-date", inputs: { min: "min", max: "max", disabledItemHandler: "disabledItemHandler", markerHandler: "markerHandler", items: "items", defaultActiveYearMonth: "defaultActiveYearMonth" }, host: { listeners: { "click": "onClick()" } }, providers: [
-            i2.tuiAsFocusableItemAccessor(TuiInputDateComponent),
-            i2.tuiAsControl(TuiInputDateComponent),
+            i3.tuiAsFocusableItemAccessor(TuiInputDateComponent),
+            i3.tuiAsControl(TuiInputDateComponent),
             tokens.tuiDateStreamWithTransformer(tokens.TUI_DATE_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]=\"canOpen\"\n    [open]=\"open && canOpen\"\n    [content]=\"dropdown\"\n    (openChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        *tuiLet=\"filler$ | async as filler\"\n        automation-id=\"tui-input-date-range__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n        [tuiTextfieldFiller]=\"getComputedFiller(filler || '')\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [readOnly]=\"readOnly\"\n        [focusable]=\"computedFocusable\"\n        [disabled]=\"computedDisabled\"\n        [textMask]=\"computedMask\"\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            automation-id=\"tui-input-date-range__icon\"\n            [class.t-icon]=\"!computedDisabled\"\n            [src]=\"src\"\n            (click)=\"onIconClick()\"\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__calendar\"\n            [min]=\"min\"\n            [max]=\"max\"\n            [markerHandler]=\"markerHandler\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"value\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($event)\"\n        ></tui-calendar>\n        <div\n            *ngIf=\"items.length === 1\"\n            tuiPreventDefault=\"mousedown\"\n            class=\"t-button\"\n        >\n            <button\n                tuiLink\n                type=\"button\"\n                (click)=\"onDayClick(items[0].day)\"\n            >\n                {{ items[0] }}\n            </button>\n        </div>\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-button button{flex:1;text-align:center}\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"] }, { type: i1__namespace.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }], directives: [{ type: i2__namespace.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i1__namespace.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i3__namespace.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { type: i1__namespace.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { type: i1__namespace.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { type: i3__namespace.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i4__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i1__namespace.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i4__namespace.PolymorpheusTemplate, selector: "ng-template[polymorpheus]", inputs: ["polymorpheus"], exportAs: ["polymorpheus"] }, { type: i2__namespace.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]", inputs: ["tuiPreventDefault"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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]=\"canOpen\"\n    [open]=\"open && canOpen\"\n    [content]=\"dropdown\"\n    (openChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        *tuiLet=\"filler$ | async as filler\"\n        automation-id=\"tui-input-date-range__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n        [tuiTextfieldFiller]=\"getComputedFiller(filler || '')\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [readOnly]=\"readOnly\"\n        [focusable]=\"computedFocusable\"\n        [disabled]=\"computedDisabled\"\n        [textMask]=\"computedMask\"\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            automation-id=\"tui-input-date-range__icon\"\n            [class.t-icon]=\"!computedDisabled\"\n            [src]=\"src\"\n            (click)=\"onIconClick()\"\n        ></tui-svg>\n        <input\n            *ngIf=\"isMobile && nativePicker\"\n            tuiDate\n            type=\"date\"\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__calendar\"\n            [min]=\"min\"\n            [max]=\"max\"\n            [markerHandler]=\"markerHandler\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"value\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($event)\"\n        ></tui-calendar>\n        <div\n            *ngIf=\"items.length === 1\"\n            tuiPreventDefault=\"mousedown\"\n            class=\"t-button\"\n        >\n            <button\n                tuiLink\n                type=\"button\"\n                (click)=\"onDayClick(items[0].day)\"\n            >\n                {{ items[0] }}\n            </button>\n        </div>\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-button button{flex:1;text-align:center}\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: TuiNativeDateComponent, selector: "input[tuiDate]" }, { type: i1__namespace.TuiCalendarComponent, selector: "tui-calendar", inputs: ["month", "disabledItemHandler", "min", "max", "minViewedMonth", "maxViewedMonth", "hoveredItem", "showAdjacent", "markerHandler", "value"], outputs: ["dayClick", "monthChange", "hoveredItemChange"] }, { type: i1__namespace.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }], directives: [{ type: i3__namespace.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i1__namespace.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i4__namespace.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { type: i1__namespace.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { type: i1__namespace.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { type: i4__namespace.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i5__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i1__namespace.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.PolymorpheusTemplate, selector: "ng-template[polymorpheus]", inputs: ["polymorpheus"], exportAs: ["polymorpheus"] }, { type: i3__namespace.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]", inputs: ["tuiPreventDefault"] }], pipes: { "async": i6__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
-        i2.tuiDefaultProp()
+        i3.tuiDefaultProp()
     ], TuiInputDateComponent.prototype, "min", void 0);
     __decorate([
-        i2.tuiDefaultProp()
+        i3.tuiDefaultProp()
     ], TuiInputDateComponent.prototype, "max", void 0);
     __decorate([
-        i2.tuiDefaultProp()
+        i3.tuiDefaultProp()
     ], TuiInputDateComponent.prototype, "disabledItemHandler", void 0);
     __decorate([
-        i2.tuiDefaultProp()
+        i3.tuiDefaultProp()
     ], TuiInputDateComponent.prototype, "markerHandler", void 0);
     __decorate([
-        i2.tuiDefaultProp()
+        i3.tuiDefaultProp()
     ], TuiInputDateComponent.prototype, "items", void 0);
     __decorate([
-        i2.tuiDefaultProp()
+        i3.tuiDefaultProp()
     ], TuiInputDateComponent.prototype, "defaultActiveYearMonth", void 0);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateComponent, decorators: [{
                 type: i0.Component,
@@ -578,19 +633,19 @@
                         styleUrls: ['./input-date.style.less'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         providers: [
-                            i2.tuiAsFocusableItemAccessor(TuiInputDateComponent),
-                            i2.tuiAsControl(TuiInputDateComponent),
+                            i3.tuiAsFocusableItemAccessor(TuiInputDateComponent),
+                            i3.tuiAsControl(TuiInputDateComponent),
                             tokens.tuiDateStreamWithTransformer(tokens.TUI_DATE_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]
@@ -599,7 +654,7 @@
                             args: [i0.Injector]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [i2.TUI_IS_MOBILE]
+                            args: [i3.TUI_IS_MOBILE]
                         }] }, { type: i1__namespace.TuiDialogService, decorators: [{
                             type: i0.Inject,
                             args: [i1.TuiDialogService]
@@ -613,11 +668,11 @@
                             args: [i1.TUI_TEXTFIELD_SIZE]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [i2.TUI_DATE_FORMAT]
+                            args: [i3.TUI_DATE_FORMAT]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [i2.TUI_DATE_SEPARATOR]
-                        }] }, { type: i7__namespace.Observable, decorators: [{
+                            args: [i3.TUI_DATE_SEPARATOR]
+                        }] }, { type: i8__namespace.Observable, decorators: [{
                             type: i0.Inject,
                             args: [tokens.TUI_DATE_TEXTS]
                         }] }, { type: undefined, decorators: [{
@@ -662,6 +717,9 @@
             configurable: true
         });
         TuiInputDateDirective.prototype.onValueChange = function (value) {
+            if (!value) {
+                this.host.nativeValue = '';
+            }
             this.host.onValueChange(value);
         };
         TuiInputDateDirective.prototype.process = function (input) {
@@ -685,53 +743,53 @@
         return TuiInputDateModule;
     }());
     TuiInputDateModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiInputDateModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateModule, declarations: [TuiInputDateComponent, TuiInputDateDirective], imports: [i5.CommonModule,
-            i3.TextMaskModule,
-            i4.PolymorpheusModule,
+    TuiInputDateModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateModule, declarations: [TuiInputDateComponent, TuiInputDateDirective, TuiNativeDateComponent], imports: [i6.CommonModule,
+            i4.TextMaskModule,
+            i5.PolymorpheusModule,
             i1.TuiWrapperModule,
-            i2.TuiPreventDefaultModule,
+            i3.TuiPreventDefaultModule,
             i1.TuiCalendarModule,
             i1.TuiSvgModule,
             i1.TuiLinkModule,
             i1.TuiHostedDropdownModule,
             i1.TuiPrimitiveTextfieldModule,
-            i3.TuiValueAccessorModule,
-            i2.TuiLetModule,
+            i4.TuiValueAccessorModule,
+            i3.TuiLetModule,
             i1.TuiTextfieldControllerModule], exports: [TuiInputDateComponent, TuiInputDateDirective, i1.TuiTextfieldComponent] });
     TuiInputDateModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateModule, imports: [[
-                i5.CommonModule,
-                i3.TextMaskModule,
-                i4.PolymorpheusModule,
+                i6.CommonModule,
+                i4.TextMaskModule,
+                i5.PolymorpheusModule,
                 i1.TuiWrapperModule,
-                i2.TuiPreventDefaultModule,
+                i3.TuiPreventDefaultModule,
                 i1.TuiCalendarModule,
                 i1.TuiSvgModule,
                 i1.TuiLinkModule,
                 i1.TuiHostedDropdownModule,
                 i1.TuiPrimitiveTextfieldModule,
-                i3.TuiValueAccessorModule,
-                i2.TuiLetModule,
+                i4.TuiValueAccessorModule,
+                i3.TuiLetModule,
                 i1.TuiTextfieldControllerModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputDateModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i5.CommonModule,
-                            i3.TextMaskModule,
-                            i4.PolymorpheusModule,
+                            i6.CommonModule,
+                            i4.TextMaskModule,
+                            i5.PolymorpheusModule,
                             i1.TuiWrapperModule,
-                            i2.TuiPreventDefaultModule,
+                            i3.TuiPreventDefaultModule,
                             i1.TuiCalendarModule,
                             i1.TuiSvgModule,
                             i1.TuiLinkModule,
                             i1.TuiHostedDropdownModule,
                             i1.TuiPrimitiveTextfieldModule,
-                            i3.TuiValueAccessorModule,
-                            i2.TuiLetModule,
+                            i4.TuiValueAccessorModule,
+                            i3.TuiLetModule,
                             i1.TuiTextfieldControllerModule,
                         ],
-                        declarations: [TuiInputDateComponent, TuiInputDateDirective],
+                        declarations: [TuiInputDateComponent, TuiInputDateDirective, TuiNativeDateComponent],
                         exports: [TuiInputDateComponent, TuiInputDateDirective, i1.TuiTextfieldComponent],
                     }]
             }] });