@progress/kendo-angular-dateinputs 11.4.0-develop.1 → 11.4.0-develop.11

package/esm2020/timepicker/timepicker.component.mjs

@@ -16,13 +16,14 @@ import { PickerService } from '../common/picker.service';
 import { requiresZoneOnBlur, currentFocusTarget, attributeNames } from '../common/utils';
 import { TIME_PART } from './models/time-part.default';
 import { PreventableEvent } from '../preventable-event';
-import { noop, setTime, isWindowAvailable, getFillModeClass, getSizeClass, getRoundedClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
+import { noop, setTime, isWindowAvailable, getFillModeClass, getSizeClass, getRoundedClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE, windowSize } from '../util';
 import { timeRangeValidator } from '../validators/time-range.validator';
 import { TOUCH_ENABLED } from '../touch-enabled';
 import { fromEvent } from 'rxjs';
 import { incompleteDateValidator } from '../validators/incomplete-date.validator';
 import { BusViewService } from '../calendar/services/bus-view.service';
-import { clockIcon } from '@progress/kendo-svg-icons';
+import { clockIcon, xIcon } from '@progress/kendo-svg-icons';
+import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
 import * as i0 from "@angular/core";
 import * as i1 from "../calendar/services/bus-view.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -31,10 +32,13 @@ import * as i4 from "../common/picker.service";
 import * as i5 from "@progress/kendo-angular-intl";
 import * as i6 from "../dateinput/dateinput.component";
 import * as i7 from "@progress/kendo-angular-icons";
-import * as i8 from "./timeselector.component";
-import * as i9 from "./localization/timeselector-custom-messages.component";
-import * as i10 from "./localization/timepicker-localized-messages.directive";
-import * as i11 from "@progress/kendo-angular-common";
+import * as i8 from "@progress/kendo-angular-common";
+import * as i9 from "@progress/kendo-angular-navigation";
+import * as i10 from "@progress/kendo-angular-buttons";
+import * as i11 from "./timeselector.component";
+import * as i12 from "./localization/timeselector-custom-messages.component";
+import * as i13 from "./localization/timepicker-localized-messages.directive";
+import * as i14 from "@angular/common";
 const VALUE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/#toc-integration-with-json';
 const INTL_DATE_FORMAT = 'https://github.com/telerik/kendo-intl/blob/master/docs/date-formatting/index.md';
 const formatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PART.second}|${TIME_PART.millisecond}|${TIME_PART.dayperiod}|literal`);
@@ -118,13 +122,18 @@ export class TimePickerComponent {
          */
         this.tabindex = 0;
         /**
-         * Sets the title of the input element of the TimePicker.
+         * Sets the title of the input element of the TimePicker and the title text rendered
+         * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
          */
         this.title = "";
         /**
          * Determines whether the built-in min or max validators are enforced when a form is being validated.
          */
         this.rangeValidation = true;
+        /**
+         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+         */
+        this.adaptiveMode = 'none';
         /**
          * Fires each time the user selects a new value.
          * For more information, refer to the section on
@@ -195,6 +204,10 @@ export class TimePickerComponent {
          * @hidden
          */
         this.wrapperClasses = true;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         this.onControlChange = noop;
         this.onControlTouched = noop;
         this.onValidatorChange = noop;
@@ -287,6 +300,16 @@ export class TimePickerComponent {
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * Sets the subtitle text rendered in the header of the popup(action sheet).
+     * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     */
+    set subtitle(subtitle) {
+        this._subtitle = subtitle;
+    }
+    get subtitle() {
+        return this._subtitle || this.placeholder;
+    }
     /**
      * Specifies the value of the TimePicker component.
      */
@@ -400,14 +423,24 @@ export class TimePickerComponent {
         if (show && (this.disabled || this.readonly)) {
             return;
         }
-        const skipZone = !show && (!this._show || !hasObservers(this.close));
+        const skipZone = !show && (!this._show || (!hasObservers(this.close) && !hasObservers(this.open)));
         if (!skipZone) {
             this.zone.run(() => {
-                this.togglePopup(show);
+                const event = new PreventableEvent();
+                if (!this._show && show) {
+                    this.open.emit(event);
+                }
+                else if (this._show && !show) {
+                    this.close.emit(event);
+                }
+                if (event.isDefaultPrevented()) {
+                    return;
+                }
+                this.toggleTimeSelector(show);
             });
         }
         else {
-            this.togglePopup(show);
+            this.toggleTimeSelector(show);
         }
     }
     get input() {
@@ -442,6 +475,7 @@ export class TimePickerComponent {
      */
     ngAfterViewInit() {
         this.setComponentClasses();
+        this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
     }
     /**
      * @hidden
@@ -561,7 +595,8 @@ export class TimePickerComponent {
         (this.timeSelector || this.input)['blur']();
     }
     /**
-     * Toggles the visibility of the popup. If you use the `toggle` method to show or hide the popup,
+     * Toggles the visibility of the popup or actionSheet.
+     * If you use the `toggle` method to show or hide the popup or actionSheet,
      * the `open` and `close` events do not fire.
      *
      * @param show - The state of the popup.
@@ -571,11 +606,11 @@ export class TimePickerComponent {
             return;
         }
         this.resolvedPromise.then(() => {
-            this._toggle((show === undefined) ? !this.show : show);
+            this.toggleTimeSelector((show === undefined) ? !this.show : show);
         });
     }
     /**
-     * Returns the current open state of the popup.
+     * Indicates whether the component is currently open. That is when the popup or actionSheet is open.
      */
     get isOpen() {
         return this.show;
@@ -607,6 +642,19 @@ export class TimePickerComponent {
             this.valueChange.emit(cloneDate(value));
         });
     }
+    /**
+     * @hidden
+     */
+    handleActionSheetAccept() {
+        this.timeSelector.handleAccept();
+    }
+    /**
+     * @hidden
+     */
+    handleActionSheetCollapse() {
+        // If not handled, the actionsheet expanded state does not get updated when overlay is clicked
+        this.cdr.markForCheck();
+    }
     /**
      * @hidden
      */
@@ -620,6 +668,15 @@ export class TimePickerComponent {
         const val = this.input.formatSections['date'] ? value : this.mergeTime(value);
         this.handleChange(val);
     }
+    /**
+     * @hidden
+     */
+    handleDateInputClick() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.show = true;
+        }
+    }
     /**
      * @hidden
      */
@@ -650,6 +707,18 @@ export class TimePickerComponent {
             'k-reset'
         ].concat(this.popupSettings.popupClass || []);
     }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
     /**
      * @hidden
      */
@@ -662,21 +731,48 @@ export class TimePickerComponent {
     mergeTime(value) {
         return this.value && value ? setTime(this.value, value) : value;
     }
-    togglePopup(show) {
-        const event = new PreventableEvent();
-        if (!this._show && show) {
-            this.open.emit(event);
+    /**
+     * @hidden
+     */
+    onResize() {
+        if (!this.isOpen || this.windowSize === windowSize()) {
+            return;
         }
-        else if (this._show && !show) {
-            this.close.emit(event);
+        ;
+        if (this.actionSheet.expanded) {
+            this.toggleActionSheet(false);
         }
-        if (event.isDefaultPrevented()) {
-            return;
+        else {
+            this.togglePopup(false);
+        }
+        this.windowSize = windowSize();
+    }
+    toggleTimeSelector(show) {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.toggleActionSheet(show);
+        }
+        else {
+            this.togglePopup(show);
         }
-        this._toggle(show);
         this.toggleFocus();
     }
-    _toggle(show) {
+    toggleActionSheet(show) {
+        if (show === this._show) {
+            return;
+        }
+        if (show && !this.isOpen) {
+            this.actionSheet.toggle();
+            this.updateActionSheetAdaptiveAppearance();
+        }
+        else if (!show && this.isOpen) {
+            // Need to disable the pointer events to avoid triggering focus on the timelist when acionsheet close down animation starts
+            this.renderer.setStyle(this.timeSelector.element.nativeElement, 'pointer-events', 'none');
+            this.actionSheet.toggle();
+        }
+        this._show = show;
+    }
+    togglePopup(show) {
         if (show === this.isOpen) {
             return;
         }
@@ -705,6 +801,25 @@ export class TimePickerComponent {
             this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
         }
     }
+    updateActionSheetAdaptiveAppearance() {
+        let element;
+        let animationContainer;
+        if (this.actionSheet) {
+            element = this.actionSheet['element'].nativeElement.querySelector('.k-actionsheet');
+            animationContainer = this.actionSheet['element'].nativeElement.querySelector('.k-child-animation-container');
+            if (this.windowSize === 'medium') {
+                this.renderer.removeClass(element, 'k-actionsheet-fullscreen');
+                this.renderer.removeStyle(animationContainer, 'height');
+            }
+            else if (this.windowSize === 'small') {
+                this.renderer.addClass(element, 'k-actionsheet-fullscreen');
+                this.renderer.setStyle(animationContainer, 'height', '100%');
+            }
+            this.renderer.addClass(element, 'k-adaptive-actionsheet');
+            this.renderer.addClass(element, 'k-actionsheet-bottom');
+            this.renderer.setStyle(animationContainer, 'bottom', '0px');
+        }
+    }
     focusInput() {
         if (this.touchEnabled) {
             return;
@@ -755,7 +870,7 @@ export class TimePickerComponent {
         }
     }
     handleWindowBlur() {
-        if (!this.isOpen) {
+        if (!this.isOpen || this.actionSheet.expanded) {
             return;
         }
         this.show = false;
@@ -772,9 +887,11 @@ export class TimePickerComponent {
         }
     }
     handleBlur(args) {
-        const currentTarget = args && currentFocusTarget(args);
+        const currentTarget = args && currentFocusTarget(args); // relatedTarget || activeElement
+        const target = args && args.target;
+        const isInsideActionSheet = this.actionSheet && (this.actionSheet.element.nativeElement.contains(target) || this.actionSheet.element.nativeElement.contains(currentTarget));
         if (currentTarget && (this.input.containsElement(currentTarget) ||
-            (this.timeSelector && this.timeSelector.containsElement(currentTarget)))) {
+            (this.timeSelector && this.timeSelector.containsElement(currentTarget)) || isInsideActionSheet)) {
             return;
         }
         if (hasObservers(this.onBlur) || (this.show && hasObservers(this.close)) || requiresZoneOnBlur(this.control)) {
@@ -814,7 +931,7 @@ export class TimePickerComponent {
     }
 }
 TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimePickerComponent, deps: [{ token: i1.BusViewService }, { token: i0.NgZone }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i4.PickerService }, { token: i5.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", rangeValidation: "rangeValidation", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
@@ -825,7 +942,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             useValue: 'kendo.timepicker'
         },
         PickerService
-    ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }], exportAs: ["kendo-timepicker"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-timepicker"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTimePickerLocalizedMessages
             i18n-accept="kendo.timepicker.accept|The Accept button text in the timepicker component"
             accept="Set"
@@ -888,6 +1005,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [title]="title"
             [value]="value"
             (valueChange)="handleInputChange($event)"
+            (click)="handleDateInputClick()"
         ></kendo-dateinput>
         <button
             #toggleButton
@@ -910,15 +1028,76 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
+        </ng-template>
+        <ng-container #container></ng-container>
+
+        <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <kendo-actionsheet 
+            #actionSheet
+            (overlayClick)="show=false"
+            (collapse)="handleActionSheetCollapse()"
+        >
+            <ng-template kendoActionSheetTemplate>
+                <div class="k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group k-hbox">
+                        <div class="k-actionsheet-title">
+                            <div class="k-text-center">{{ title }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                        </div>
+                        <div class="k-actionsheet-actions">
+                            <button
+                                kendoButton
+                                icon="x"
+                                [attr.title]="localization.get('clearTitle')"
+                                [svgIcon]="xIcon"
+                                fillMode="flat"
+                                size="large"
+                                innerCssClass="k-button-icon"
+                                (click)="show = false">
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="k-actionsheet-content !k-overflow-hidden">
+                    <ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
+                </div>
+                <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton 
+                        (click)="handleReject()"
+                        size="large"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
+                    <button kendoButton
+                        (click)="handleActionSheetAccept()"
+                        size="large"
+                        themeColor="primary"
+                        [attr.title]="localization.get('acceptLabel')"
+                        [attr.aria-label]="localization.get('acceptLabel')"
+                    >
+                        {{localization.get('accept')}}
+                    </button>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
+
+        <ng-template #timeSelectorTemplate>
             <kendo-timeselector
                 #timeSelector
-                [cancelButton]="cancelButton"
+                [class.k-timeselector-lg]="isAdaptive"
+                [cancelButton]="cancelButton && !this.isAdaptive"
+                [setButton]="!isAdaptive"
                 [nowButton]="nowButton"
                 [format]="format"
                 [min]="min"
                 [max]="max"
                 [steps]="steps"
                 [value]="value"
+                [isAdaptiveEnabled]="isAdaptiveModeEnabled"
                 [kendoEventsOutsideAngular]="{
                     keydown: handleKeydown,
                     mousedown: handleMousedown
@@ -943,8 +1122,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-        <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i8.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: i9.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i10.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i11.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i11.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: i12.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i13.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1026,6 +1204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [title]="title"
             [value]="value"
             (valueChange)="handleInputChange($event)"
+            (click)="handleDateInputClick()"
         ></kendo-dateinput>
         <button
             #toggleButton
@@ -1048,15 +1227,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
+        </ng-template>
+        <ng-container #container></ng-container>
+
+        <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <kendo-actionsheet 
+            #actionSheet
+            (overlayClick)="show=false"
+            (collapse)="handleActionSheetCollapse()"
+        >
+            <ng-template kendoActionSheetTemplate>
+                <div class="k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group k-hbox">
+                        <div class="k-actionsheet-title">
+                            <div class="k-text-center">{{ title }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                        </div>
+                        <div class="k-actionsheet-actions">
+                            <button
+                                kendoButton
+                                icon="x"
+                                [attr.title]="localization.get('clearTitle')"
+                                [svgIcon]="xIcon"
+                                fillMode="flat"
+                                size="large"
+                                innerCssClass="k-button-icon"
+                                (click)="show = false">
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="k-actionsheet-content !k-overflow-hidden">
+                    <ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
+                </div>
+                <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton 
+                        (click)="handleReject()"
+                        size="large"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
+                    <button kendoButton
+                        (click)="handleActionSheetAccept()"
+                        size="large"
+                        themeColor="primary"
+                        [attr.title]="localization.get('acceptLabel')"
+                        [attr.aria-label]="localization.get('acceptLabel')"
+                    >
+                        {{localization.get('accept')}}
+                    </button>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
+
+        <ng-template #timeSelectorTemplate>
             <kendo-timeselector
                 #timeSelector
-                [cancelButton]="cancelButton"
+                [class.k-timeselector-lg]="isAdaptive"
+                [cancelButton]="cancelButton && !this.isAdaptive"
+                [setButton]="!isAdaptive"
                 [nowButton]="nowButton"
                 [format]="format"
                 [min]="min"
                 [max]="max"
                 [steps]="steps"
                 [value]="value"
+                [isAdaptiveEnabled]="isAdaptiveModeEnabled"
                 [kendoEventsOutsideAngular]="{
                     keydown: handleKeydown,
                     mousedown: handleMousedown
@@ -1081,7 +1321,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-        <ng-container #container></ng-container>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i0.NgZone }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i4.PickerService }, { type: i5.IntlService }, { type: undefined, decorators: [{
@@ -1098,6 +1337,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true }]
+            }], actionSheet: [{
+                type: ViewChild,
+                args: ['actionSheet']
             }], focusableId: [{
                 type: Input
             }], disabled: [{
@@ -1132,8 +1374,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], title: [{
                 type: Input
+            }], subtitle: [{
+                type: Input
             }], rangeValidation: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
             }], value: [{
                 type: Input
             }], size: [{

package/esm2020/timepicker/timepicker.module.mjs

@@ -25,6 +25,7 @@ import { touchEnabled } from '@progress/kendo-common';
 import { TOUCH_ENABLED } from '../touch-enabled';
 import { EventsModule } from '@progress/kendo-angular-common';
 import { IconsModule } from '@progress/kendo-angular-icons';
+import { AdaptiveModule } from '../common/adaptive.module';
 import * as i0 from "@angular/core";
 const COMPONENT_DIRECTIVES = [
     TimePickerLocalizedMessagesDirective,
@@ -41,7 +42,8 @@ const COMPONENT_MODULES = [
     PopupModule,
     VirtualizationModule,
     EventsModule,
-    IconsModule
+    IconsModule,
+    AdaptiveModule
 ];
 const providers = [
     TimePickerDOMService,
@@ -73,7 +75,8 @@ TimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         PopupModule,
         VirtualizationModule,
         EventsModule,
-        IconsModule], exports: [TimePickerLocalizedMessagesDirective,
+        IconsModule,
+        AdaptiveModule], exports: [TimePickerLocalizedMessagesDirective,
         TimeListComponent,
         TimePickerCustomMessagesComponent,
         TimePickerComponent,

package/esm2020/timepicker/timeselector.component.mjs

@@ -178,6 +178,8 @@ export class TimeSelectorComponent {
                 .subscribe(() => this.cdr.markForCheck()));
         }
         this.renderer.addClass(this.element.nativeElement, 'k-timeselector');
+        this.dom.isAdaptiveEnabled = this.isAdaptiveEnabled;
+        this.dom.isDateTimePicker = this.isDateTimePicker;
         this.dom.calculateHeights(this.element.nativeElement);
         this.init();
         this.bindEvents();
@@ -373,7 +375,7 @@ export class TimeSelectorComponent {
     }
 }
 TimeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeSelectorComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.IntlService }, { token: i3.TimePickerDOMService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i4.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
+TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -635,6 +637,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
+            }], isAdaptiveEnabled: [{
+                type: Input
+            }], isDateTimePicker: [{
+                type: Input
             }], steps: [{
                 type: Input
             }], value: [{

package/esm2020/util.mjs

@@ -6,6 +6,7 @@ import { addDays, cloneDate, getDate, isEqual } from '@progress/kendo-date-math'
 import { MIDNIGHT_DATE } from './defaults';
 import { EMPTY_SELECTIONRANGE } from './calendar/models/selection-range.interface';
 import { isPresent } from './common/utils';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
 const isSet = (value) => value !== null && value !== undefined;
 const setter = (method) => (date, value) => {
     const clone = cloneDate(date);
@@ -394,3 +395,20 @@ export const DEFAULT_SIZE = 'medium';
  * @hidden
  */
 export const DEFAULT_FILL_MODE = 'solid';
+/**
+ * @hidden
+ */
+export const windowSize = () => {
+    if (!isDocumentAvailable()) {
+        return;
+    }
+    if (window.innerWidth > 768) {
+        return 'large';
+    }
+    else if (window.innerWidth > 500) {
+        return 'medium';
+    }
+    else {
+        return 'small';
+    }
+};