@taiga-ui/kit 3.24.0 → 3.25.0

package/bundles/taiga-ui-kit-components-input-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/components/select-option'), require('@taiga-ui/kit/providers'), require('@taiga-ui/kit/tokens'), require('@taiga-ui/kit/utils/mask'), require('rxjs/operators'), require('@taiga-ui/kit/constants'), require('@taiga-ui/kit/directives'), require('@angular/common'), require('rxjs')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-time', ['exports', '@angular/core', '@angular/forms', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/components/select-option', '@taiga-ui/kit/providers', '@taiga-ui/kit/tokens', '@taiga-ui/kit/utils/mask', 'rxjs/operators', '@taiga-ui/kit/constants', '@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-time"] = {}), global.ng.core, global.ng.forms, global.cdk, global.i1, global["taiga-ui"].kit.components["select-option"], global["taiga-ui"].kit.providers, global["taiga-ui"].kit.tokens, global["taiga-ui"].kit.utils.mask, global.rxjs.operators, global["taiga-ui"].kit.constants, global["taiga-ui"].kit.directives, global.ng.common, global.rxjs));
-})(this, (function (exports, i0, i4, cdk, i1, selectOption, providers, tokens, mask, operators, constants, i2, i3, i5) { 'use strict';
+    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/components/select-option'), require('@taiga-ui/kit/providers'), require('@taiga-ui/kit/tokens'), require('@taiga-ui/kit/utils/mask'), require('rxjs/operators'), require('@taiga-ui/kit/constants'), require('@angular/common'), require('@taiga-ui/kit/directives'), require('@tinkoff/ng-polymorpheus'), require('rxjs')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-time', ['exports', '@angular/core', '@angular/forms', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/components/select-option', '@taiga-ui/kit/providers', '@taiga-ui/kit/tokens', '@taiga-ui/kit/utils/mask', 'rxjs/operators', '@taiga-ui/kit/constants', '@angular/common', '@taiga-ui/kit/directives', '@tinkoff/ng-polymorpheus', '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-time"] = {}), global.ng.core, global.ng.forms, global.i2, global.i1, global["taiga-ui"].kit.components["select-option"], global["taiga-ui"].kit.providers, global["taiga-ui"].kit.tokens, global["taiga-ui"].kit.utils.mask, global.rxjs.operators, global["taiga-ui"].kit.constants, global.ng.common, global["taiga-ui"].kit.directives, global.i5, global.rxjs));
+})(this, (function (exports, i0, i6, i2, i1, selectOption, providers, tokens, mask, operators, constants, i4, i3, i5, i7) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,11 +23,13 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    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 i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -356,6 +358,7 @@
         postfix: "",
         maxValues: constants.MAX_TIME_VALUES,
         itemSize: "m",
+        nativePicker: false,
     };
     /**
      * Default parameters for InputTime component
@@ -368,13 +371,85 @@
         useValue: Object.assign(Object.assign({}, TUI_INPUT_TIME_DEFAULT_OPTIONS), options),
     }); };
 
+    var TuiNativeTimeComponent = /** @class */ (function () {
+        function TuiNativeTimeComponent(host, idService) {
+            this.host = host;
+            this.autoIdString = idService.generate();
+        }
+        Object.defineProperty(TuiNativeTimeComponent.prototype, "items", {
+            get: function () {
+                var _this = this;
+                return this.host.items.map(function (item) { return item.toString(_this.host.mode); });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiNativeTimeComponent.prototype, "value", {
+            get: function () {
+                return this.host.value.length === this.host.mode.length ? this.host.value : '';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiNativeTimeComponent.prototype, "step", {
+            get: function () {
+                switch (this.host.mode) {
+                    case 'HH:MM:SS':
+                        return 1;
+                    case 'HH:MM:SS.MSS':
+                        return 0.001;
+                    default:
+                        return 60;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TuiNativeTimeComponent.prototype.onChange = function (value) {
+            this.host.onValueChange(value);
+        };
+        return TuiNativeTimeComponent;
+    }());
+    TuiNativeTimeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNativeTimeComponent, deps: [{ token: i1.TUI_TEXTFIELD_HOST }, { token: i2.TuiIdService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiNativeTimeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiNativeTimeComponent, selector: "input[tuiTime]", host: { attributes: { "type": "time" }, listeners: { "change.stop": "onChange($event.target.value)", "click.stop.silent": "0", "mousedown.stop.silent": "0" }, properties: { "attr.list": "autoIdString", "tabIndex": "-1", "value": "value", "step": "step" } }, ngImport: i0__namespace, template: "\n        <datalist\n            *ngIf=\"items.length\"\n            [id]=\"autoIdString\"\n        >\n            <option\n                *ngFor=\"let item of items\"\n                value=\"{{ item }}\"\n            ></option>\n        </datalist>\n    ", isInline: true, styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:auto;font-size:2rem}\n"], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNativeTimeComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'input[tuiTime]',
+                        template: "\n        <datalist\n            *ngIf=\"items.length\"\n            [id]=\"autoIdString\"\n        >\n            <option\n                *ngFor=\"let item of items\"\n                value=\"{{ item }}\"\n            ></option>\n        </datalist>\n    ",
+                        host: {
+                            type: 'time',
+                            '[attr.list]': 'autoIdString',
+                            '[tabIndex]': '-1',
+                            '[value]': 'value',
+                            '[step]': 'step',
+                            '(change.stop)': 'onChange($event.target.value)',
+                            '(click.stop.silent)': '0',
+                            '(mousedown.stop.silent)': '0',
+                        },
+                        styleUrls: ['./native-time.style.less'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.TUI_TEXTFIELD_HOST]
+                        }] }, { type: i2__namespace.TuiIdService, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.TuiIdService]
+                        }] }];
+        } });
+
     var TuiInputTimeComponent = /** @class */ (function (_super) {
         __extends(TuiInputTimeComponent, _super);
-        function TuiInputTimeComponent(control, cdr, timeTexts$, options) {
+        function TuiInputTimeComponent(control, cdr, timeTexts$, options, isMobile, textfieldSize, isIos) {
             var _this = _super.call(this, control, cdr) || this;
             _this.timeTexts$ = timeTexts$;
             _this.options = options;
-            _this.disabledItemHandler = cdk.ALWAYS_FALSE_HANDLER;
+            _this.isMobile = isMobile;
+            _this.textfieldSize = textfieldSize;
+            _this.isIos = isIos;
+            _this.disabledItemHandler = i2.ALWAYS_FALSE_HANDLER;
             _this.items = [];
             _this.itemSize = _this.options.itemSize;
             _this.strict = false;
@@ -393,7 +468,7 @@
         });
         Object.defineProperty(TuiInputTimeComponent.prototype, "focused", {
             get: function () {
-                return cdk.tuiIsNativeFocused(this.nativeFocusableElement);
+                return i2.tuiIsNativeFocused(this.nativeFocusableElement);
             },
             enumerable: false,
             configurable: true
@@ -412,6 +487,28 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(TuiInputTimeComponent.prototype, "showNativePicker", {
+            get: function () {
+                return (this.nativePicker &&
+                    (!this.isIos || (this.mode === 'HH:MM' && !this.items.length)));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiInputTimeComponent.prototype, "nativeDatalist", {
+            get: function () {
+                return this.nativePicker && !this.isIos;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiInputTimeComponent.prototype, "size", {
+            get: function () {
+                return this.textfieldSize.size;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(TuiInputTimeComponent.prototype, "textMaskOptions", {
             get: function () {
                 return this.calculateMask(this.mode);
@@ -486,7 +583,7 @@
                 this.value = null;
                 return;
             }
-            var time = cdk.TuiTime.fromString(value);
+            var time = i2.TuiTime.fromString(value);
             this.value = this.strict ? this.findNearestTimeFromItems(time) : time;
         };
         TuiInputTimeComponent.prototype.onFocused = function (focused) {
@@ -498,7 +595,7 @@
                 this.mode === 'HH:MM') {
                 return;
             }
-            this.value = cdk.TuiTime.fromString(this.nativeValue);
+            this.value = i2.TuiTime.fromString(this.nativeValue);
             setTimeout(function () {
                 if (_this.nativeValue.endsWith('.') || _this.nativeValue.endsWith(':')) {
                     _this.nativeValue = _this.nativeValue.slice(0, -1);
@@ -528,6 +625,13 @@
             _super.prototype.writeValue.call(this, value);
             this.nativeValue = value ? this.computedValue : '';
         };
+        Object.defineProperty(TuiInputTimeComponent.prototype, "nativePicker", {
+            get: function () {
+                return !!this.options.nativePicker && this.isMobile;
+            },
+            enumerable: false,
+            configurable: true
+        });
         TuiInputTimeComponent.prototype.calculateMask = function (mode) {
             return {
                 mask: mask.tuiCreateTimeMask(mode, this.options.maxValues),
@@ -545,14 +649,14 @@
                 : previous; });
         };
         TuiInputTimeComponent.prototype.getMatch = function (value) {
-            return this.items.find(function (item) { return cdk.TUI_STRICT_MATCHER(item, value); });
+            return this.items.find(function (item) { return i2.TUI_STRICT_MATCHER(item, value); });
         };
         TuiInputTimeComponent.prototype.close = function () {
             this.open = false;
         };
         TuiInputTimeComponent.prototype.processArrow = function (event, shift) {
             var target = event.target;
-            if (this.readOnly || !cdk.tuiIsElement(target) || !cdk.tuiIsInput(target)) {
+            if (this.readOnly || !i2.tuiIsElement(target) || !i2.tuiIsInput(target)) {
                 return;
             }
             var selectionStart = target.selectionStart || 0;
@@ -589,40 +693,40 @@
             }
         };
         return TuiInputTimeComponent;
-    }(cdk.AbstractTuiNullableControl));
-    TuiInputTimeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputTimeComponent, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: tokens.TUI_TIME_TEXTS }, { token: TUI_INPUT_TIME_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    }(i2.AbstractTuiNullableControl));
+    TuiInputTimeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputTimeComponent, deps: [{ token: i6.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: tokens.TUI_TIME_TEXTS }, { token: TUI_INPUT_TIME_OPTIONS }, { token: i2.TUI_IS_MOBILE }, { token: i1.TUI_TEXTFIELD_SIZE }, { token: i2.TUI_IS_IOS }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TuiInputTimeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiInputTimeComponent, selector: "tui-input-time", inputs: { disabledItemHandler: "disabledItemHandler", items: "items", itemSize: "itemSize", strict: "strict", mode: "mode", postfix: "postfix" }, host: { listeners: { "click": "onClick()" } }, providers: [
-            cdk.tuiAsFocusableItemAccessor(TuiInputTimeComponent),
-            cdk.tuiAsControl(TuiInputTimeComponent),
+            i2.tuiAsFocusableItemAccessor(TuiInputTimeComponent),
+            i2.tuiAsControl(TuiInputTimeComponent),
             i1.tuiAsDataListHost(TuiInputTimeComponent),
             i1.tuiAsOptionContent(selectOption.TUI_SELECT_OPTION),
-        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: i1.TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<tui-hosted-dropdown\n    class=\"t-wrapper\"\n    [canOpen]=\"canOpen\"\n    [content]=\"dropdownContent\"\n    [open]=\"canOpen && open\"\n    (openChange)=\"onOpen($event)\"\n    (focusedChange)=\"onFocused($event)\"\n>\n    <tui-primitive-textfield\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [tuiTextfieldFiller]=\"(getFiller$(mode) | async) || ''\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"innerPseudoFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [pseudoActive]=\"pseudoActive\"\n        [invalid]=\"computedInvalid\"\n        [focusable]=\"focusable\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readOnly\"\n        [textMask]=\"textMaskOptions\"\n        [tuiTextfieldIcon]=\"icon\"\n        [value]=\"computedValue\"\n        [postfix]=\"postfix\"\n        (valueChange)=\"onValueChange($event)\"\n        (keydown.arrowUp)=\"onArrowUp($event)\"\n        (keydown.arrowDown)=\"onArrowDown($event)\"\n    >\n        <ng-content></ng-content>\n        <input\n            tuiTextfield\n            inputmode=\"numeric\"\n        />\n    </tui-primitive-textfield>\n</tui-hosted-dropdown>\n<ng-template #dropdownContent>\n    <tui-data-list\n        automation-id=\"tui-input-time__dropdown\"\n        [size]=\"itemSize\"\n    >\n        <button\n            *ngFor=\"let item of filtered\"\n            tuiOption\n            automation-id=\"tui-input-time__item\"\n            [disabled]=\"disabledItemHandler(item)\"\n            [value]=\"item\"\n        >\n            {{ item }}\n        </button>\n    </tui-data-list>\n</ng-template>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:left}:host._disabled{pointer-events:none}.t-wrapper{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}\n"], components: [{ type: i1__namespace.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "sided", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i1__namespace.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i1__namespace.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { type: i1__namespace.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }, { type: i1__namespace.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }], directives: [{ type: i1__namespace.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2__namespace.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { type: i1__namespace.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { type: i2__namespace.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i1__namespace.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3__namespace.AsyncPipe }, viewProviders: [providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER], 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-wrapper\"\n    [canOpen]=\"canOpen && !nativeDatalist\"\n    [content]=\"dropdownContent\"\n    [open]=\"canOpen && open\"\n    (openChange)=\"onOpen($event)\"\n    (focusedChange)=\"onFocused($event)\"\n>\n    <tui-primitive-textfield\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [tuiTextfieldFiller]=\"(getFiller$(mode) | async) || ''\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"innerPseudoFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [pseudoActive]=\"pseudoActive\"\n        [invalid]=\"computedInvalid\"\n        [focusable]=\"focusable\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readOnly\"\n        [textMask]=\"textMaskOptions\"\n        [tuiTextfieldIcon]=\"iconContent\"\n        [value]=\"computedValue\"\n        [postfix]=\"postfix\"\n        (valueChange)=\"onValueChange($event)\"\n        (keydown.arrowUp)=\"onArrowUp($event)\"\n        (keydown.arrowDown)=\"onArrowDown($event)\"\n    >\n        <ng-content></ng-content>\n        <input\n            tuiTextfield\n            inputmode=\"numeric\"\n        />\n    </tui-primitive-textfield>\n</tui-hosted-dropdown>\n<ng-template #dropdownContent>\n    <tui-data-list\n        automation-id=\"tui-input-time__dropdown\"\n        [size]=\"itemSize\"\n    >\n        <button\n            *ngFor=\"let item of filtered\"\n            tuiOption\n            automation-id=\"tui-input-time__item\"\n            [disabled]=\"disabledItemHandler(item)\"\n            [value]=\"item\"\n        >\n            {{ item }}\n        </button>\n    </tui-data-list>\n</ng-template>\n\n<ng-template #iconContent>\n    <tui-svg\n        *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n        tuiWrapper\n        appearance=\"icon\"\n        [src]=\"src\"\n    ></tui-svg>\n    <input\n        *ngIf=\"showNativePicker\"\n        tuiTime\n    />\n</ng-template>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:left}:host._disabled{pointer-events:none}.t-wrapper{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}\n"], components: [{ type: i1__namespace.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "sided", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i1__namespace.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i1__namespace.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { type: i1__namespace.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }, { type: i1__namespace.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }, { type: i1__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: TuiNativeTimeComponent, selector: "input[tuiTime]" }], directives: [{ type: i1__namespace.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i3__namespace.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { type: i1__namespace.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { type: i3__namespace.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i1__namespace.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__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"] }], pipes: { "async": i4__namespace.AsyncPipe }, viewProviders: [providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
-        cdk.tuiDefaultProp()
+        i2.tuiDefaultProp()
     ], TuiInputTimeComponent.prototype, "disabledItemHandler", void 0);
     __decorate([
-        cdk.tuiDefaultProp()
+        i2.tuiDefaultProp()
     ], TuiInputTimeComponent.prototype, "items", void 0);
     __decorate([
-        cdk.tuiDefaultProp()
+        i2.tuiDefaultProp()
     ], TuiInputTimeComponent.prototype, "itemSize", void 0);
     __decorate([
-        cdk.tuiDefaultProp()
+        i2.tuiDefaultProp()
     ], TuiInputTimeComponent.prototype, "strict", void 0);
     __decorate([
-        cdk.tuiDefaultProp()
+        i2.tuiDefaultProp()
     ], TuiInputTimeComponent.prototype, "mode", void 0);
     __decorate([
-        cdk.tuiDefaultProp()
+        i2.tuiDefaultProp()
     ], TuiInputTimeComponent.prototype, "postfix", void 0);
     __decorate([
-        cdk.tuiPure
+        i2.tuiPure
     ], TuiInputTimeComponent.prototype, "getFiller$", null);
     __decorate([
-        cdk.tuiPure
+        i2.tuiPure
     ], TuiInputTimeComponent.prototype, "calculateMask", null);
     __decorate([
-        cdk.tuiPure
+        i2.tuiPure
     ], TuiInputTimeComponent.prototype, "filter", null);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputTimeComponent, decorators: [{
                 type: i0.Component,
@@ -632,30 +736,39 @@
                         styleUrls: ['./input-time.style.less'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         providers: [
-                            cdk.tuiAsFocusableItemAccessor(TuiInputTimeComponent),
-                            cdk.tuiAsControl(TuiInputTimeComponent),
+                            i2.tuiAsFocusableItemAccessor(TuiInputTimeComponent),
+                            i2.tuiAsControl(TuiInputTimeComponent),
                             i1.tuiAsDataListHost(TuiInputTimeComponent),
                             i1.tuiAsOptionContent(selectOption.TUI_SELECT_OPTION),
                         ],
                         viewProviders: [providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER],
                     }]
             }], ctorParameters: function () {
-            return [{ type: i4__namespace.NgControl, decorators: [{
+            return [{ type: i6__namespace.NgControl, decorators: [{
                             type: i0.Optional
                         }, {
                             type: i0.Self
                         }, {
                             type: i0.Inject,
-                            args: [i4.NgControl]
+                            args: [i6.NgControl]
                         }] }, { type: i0__namespace.ChangeDetectorRef, decorators: [{
                             type: i0.Inject,
                             args: [i0.ChangeDetectorRef]
-                        }] }, { type: i5__namespace.Observable, decorators: [{
+                        }] }, { type: i7__namespace.Observable, decorators: [{
                             type: i0.Inject,
                             args: [tokens.TUI_TIME_TEXTS]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [TUI_INPUT_TIME_OPTIONS]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.TUI_IS_MOBILE]
+                        }] }, { type: i1__namespace.TuiTextfieldSizeDirective, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.TUI_TEXTFIELD_SIZE]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.TUI_IS_IOS]
                         }] }];
         }, propDecorators: { textfield: [{
                     type: i0.ViewChild,
@@ -677,45 +790,101 @@
                     args: ['click']
                 }], calculateMask: [], filter: [] } });
 
+    var TuiInputTimeDirective = /** @class */ (function (_super) {
+        __extends(TuiInputTimeDirective, _super);
+        function TuiInputTimeDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(TuiInputTimeDirective.prototype, "value", {
+            get: function () {
+                return this.host.computedValue;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiInputTimeDirective.prototype, "mode", {
+            get: function () {
+                return this.host.mode;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiInputTimeDirective.prototype, "items", {
+            get: function () {
+                return this.host.items;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TuiInputTimeDirective.prototype.onValueChange = function (value) {
+            if (!value) {
+                this.host.nativeValue = '';
+            }
+            this.host.onValueChange(value);
+        };
+        TuiInputTimeDirective.prototype.process = function (input) {
+            input.inputMode = 'numeric';
+        };
+        return TuiInputTimeDirective;
+    }(i1.AbstractTuiTextfieldHost));
+    TuiInputTimeDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputTimeDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiInputTimeDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiInputTimeDirective, selector: "tui-input-time", providers: [i1.tuiAsTextfieldHost(TuiInputTimeDirective)], usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputTimeDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: 'tui-input-time',
+                        providers: [i1.tuiAsTextfieldHost(TuiInputTimeDirective)],
+                    }]
+            }] });
+
     var TuiInputTimeModule = /** @class */ (function () {
         function TuiInputTimeModule() {
         }
         return TuiInputTimeModule;
     }());
     TuiInputTimeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputTimeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiInputTimeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputTimeModule, declarations: [TuiInputTimeComponent], imports: [i3.CommonModule,
-            i2.TextMaskModule,
+    TuiInputTimeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputTimeModule, declarations: [TuiInputTimeComponent, TuiNativeTimeComponent, TuiInputTimeDirective], imports: [i4.CommonModule,
+            i3.TextMaskModule,
             selectOption.TuiSelectOptionModule,
             i1.TuiDataListModule,
+            i1.TuiWrapperModule,
             i1.TuiHostedDropdownModule,
             i1.TuiPrimitiveTextfieldModule,
-            i2.TuiValueAccessorModule,
-            i1.TuiTextfieldControllerModule], exports: [TuiInputTimeComponent] });
+            i3.TuiValueAccessorModule,
+            i1.TuiTextfieldControllerModule,
+            i1.TuiSvgModule,
+            i5.PolymorpheusModule], exports: [TuiInputTimeComponent, TuiInputTimeDirective] });
     TuiInputTimeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputTimeModule, imports: [[
-                i3.CommonModule,
-                i2.TextMaskModule,
+                i4.CommonModule,
+                i3.TextMaskModule,
                 selectOption.TuiSelectOptionModule,
                 i1.TuiDataListModule,
+                i1.TuiWrapperModule,
                 i1.TuiHostedDropdownModule,
                 i1.TuiPrimitiveTextfieldModule,
-                i2.TuiValueAccessorModule,
+                i3.TuiValueAccessorModule,
                 i1.TuiTextfieldControllerModule,
+                i1.TuiSvgModule,
+                i5.PolymorpheusModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputTimeModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i3.CommonModule,
-                            i2.TextMaskModule,
+                            i4.CommonModule,
+                            i3.TextMaskModule,
                             selectOption.TuiSelectOptionModule,
                             i1.TuiDataListModule,
+                            i1.TuiWrapperModule,
                             i1.TuiHostedDropdownModule,
                             i1.TuiPrimitiveTextfieldModule,
-                            i2.TuiValueAccessorModule,
+                            i3.TuiValueAccessorModule,
                             i1.TuiTextfieldControllerModule,
+                            i1.TuiSvgModule,
+                            i5.PolymorpheusModule,
                         ],
-                        declarations: [TuiInputTimeComponent],
-                        exports: [TuiInputTimeComponent],
+                        declarations: [TuiInputTimeComponent, TuiNativeTimeComponent, TuiInputTimeDirective],
+                        exports: [TuiInputTimeComponent, TuiInputTimeDirective],
                     }]
             }] });
 
@@ -726,6 +895,7 @@
     exports.TUI_INPUT_TIME_DEFAULT_OPTIONS = TUI_INPUT_TIME_DEFAULT_OPTIONS;
     exports.TUI_INPUT_TIME_OPTIONS = TUI_INPUT_TIME_OPTIONS;
     exports.TuiInputTimeComponent = TuiInputTimeComponent;
+    exports.TuiInputTimeDirective = TuiInputTimeDirective;
     exports.TuiInputTimeModule = TuiInputTimeModule;
     exports.tuiInputTimeOptionsProvider = tuiInputTimeOptionsProvider;