@progress/kendo-angular-dateinputs 11.4.0-develop.8 → 11.4.0-develop.9

package/fesm2020/progress-kendo-angular-dateinputs.mjs

@@ -8,7 +8,7 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import { cloneDate, addDays, getDate, isEqual, addDecades, addCenturies, firstDecadeOfCentury, lastDecadeOfCentury, firstYearOfDecade, createDate, lastYearOfDecade, lastMonthOfYear, lastDayOfMonth, durationInCenturies, addYears, durationInDecades, addWeeks, addMonths, firstDayOfMonth, dayOfWeek, durationInMonths, firstMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
-import * as i6 from '@progress/kendo-angular-common';
+import * as i8 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, KendoInput, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-intl';
@@ -16,15 +16,18 @@ import { IntlModule } from '@progress/kendo-angular-intl';
 import { Subject, Subscription, ReplaySubject, Observable, combineLatest, of, interval, animationFrameScheduler, fromEvent, EMPTY, from, BehaviorSubject, merge } from 'rxjs';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { chevronRightIcon, chevronLeftIcon, caretAltUpIcon, caretAltDownIcon, calendarIcon, clockIcon } from '@progress/kendo-svg-icons';
-import * as i5 from '@progress/kendo-angular-buttons';
+import { chevronRightIcon, chevronLeftIcon, caretAltUpIcon, caretAltDownIcon, calendarIcon, xIcon, clockIcon } from '@progress/kendo-svg-icons';
+import * as i10 from '@progress/kendo-angular-buttons';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
 import { map, scan, takeWhile, debounceTime, tap, filter } from 'rxjs/operators';
 import * as i7$1 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
+import * as i9 from '@progress/kendo-angular-navigation';
+import { NavigationModule } from '@progress/kendo-angular-navigation';
 import { touchEnabled } from '@progress/kendo-common';
+import { TextBoxModule } from '@progress/kendo-angular-inputs';
 
 /**
  * @hidden
@@ -33,8 +36,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1678794156,
-    version: '11.4.0-develop.8',
+    publishDate: 1678800266,
+    version: '11.4.0-develop.9',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -535,6 +538,23 @@ const DEFAULT_SIZE = 'medium';
  * @hidden
  */
 const DEFAULT_FILL_MODE = 'solid';
+/**
+ * @hidden
+ */
+const windowSize = () => {
+    if (!isDocumentAvailable()) {
+        return;
+    }
+    if (window.innerWidth > 768) {
+        return 'large';
+    }
+    else if (window.innerWidth > 500) {
+        return 'medium';
+    }
+    else {
+        return 'small';
+    }
+};
 
 const EMPTY_DATA$3 = [[]];
 const CELLS_LENGTH$3 = 4;
@@ -1781,7 +1801,7 @@ ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             </td>
         </ng-container>
     </tr>
-  `, isInline: true, directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+  `, isInline: true, directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -2571,7 +2591,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         >
         </button>
     </span>
-  `, isInline: true, components: [{ type: i5.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"] }], directives: [{ type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+  `, isInline: true, components: [{ 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"] }], directives: [{ type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -3706,7 +3726,8 @@ class MultiViewCalendarComponent {
         if (!this.element) {
             return;
         }
-        this.element.nativeElement.querySelector('.k-calendar-view').focus();
+        // Prevent the content from auto-scrolling when daterange is in adaptive mode
+        this.element.nativeElement.querySelector('.k-calendar-view').focus({ preventScroll: true });
     }
     /**
      * Blurs the Calendar component.
@@ -4771,7 +4792,7 @@ class VirtualizationComponent {
         return indexOffset < this.containerScrollPosition ? ScrollDirection.Backward : ScrollDirection.Forward;
     }
 }
-VirtualizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: VirtualizationComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i6.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
+VirtualizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: VirtualizationComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i8.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
 VirtualizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: { direction: "direction", itemHeight: "itemHeight", itemWidth: "itemWidth", topOffset: "topOffset", bottomOffset: "bottomOffset", maxScrollDifference: "maxScrollDifference", scrollOffsetSize: "scrollOffsetSize", scrollDuration: "scrollDuration", skip: "skip", take: "take", total: "total" }, outputs: { activeIndexChange: "activeIndexChange", pageChange: "pageChange", scrollChange: "scrollChange" }, host: { properties: { "class.k-flex": "this.wrapperClasses", "class.k-content": "this.wrapperClasses", "class.k-scrollable": "this.wrapperClasses", "class.k-scrollable-horizontal": "this.horizontalClass" } }, providers: [{
             provide: SCROLLER_FACTORY_TOKEN,
             useValue: DEFAULT_SCROLLER_FACTORY
@@ -4803,7 +4824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SCROLLER_FACTORY_TOKEN]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i6.ScrollbarWidthService }]; }, propDecorators: { direction: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i8.ScrollbarWidthService }]; }, propDecorators: { direction: [{
                 type: Input
             }], itemHeight: [{
                 type: Input
@@ -4969,7 +4990,7 @@ NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </li>
         </ul>
     </kendo-virtualization>
-  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponent, decorators: [{
             type: Component,
             args: [{
@@ -5756,6 +5777,7 @@ class CalendarComponent {
          * ([more information and example]({% slug overview_calendar %}#toc-events)).
          */
         this.valueChange = new EventEmitter();
+        this._size = DEFAULT_SIZE;
         this.isActive = false;
         this.cellUID = guid();
         this.selectedDates = [];
@@ -5992,6 +6014,31 @@ class CalendarComponent {
     get navigationItemTemplateRef() {
         return this._navigationItemTemplateRef || this.navigationItemTemplate;
     }
+    /**
+     * @hidden
+     *
+     * TODO: Make visible when true sizing of all calendar elements is implemented
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
+     *
+     */
+    set size(size) {
+        const element = this.type === 'infinite' ? this.element : this.multiViewCalendar.element;
+        this.renderer.removeClass(element.nativeElement, getSizeClass('calendar', this.size));
+        const newSize = size ? size : DEFAULT_SIZE;
+        if (newSize !== 'none') {
+            this.renderer.addClass(element.nativeElement, getSizeClass('calendar', newSize));
+        }
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
     get activeViewEnum() {
         const activeView = CalendarViewEnum[this.activeView];
         return activeView < this.bottomViewEnum ? this.bottomViewEnum : activeView;
@@ -6042,6 +6089,10 @@ class CalendarComponent {
     }
     ngAfterViewInit() {
         this.setAriaActivedescendant();
+        if (this.size !== 'none') {
+            const element = this.type === 'infinite' ? this.element : this.multiViewCalendar.element;
+            this.renderer.addClass(element.nativeElement, getSizeClass('calendar', this.size));
+        }
     }
     ngAfterViewChecked() {
         if (!this.syncNavigation) {
@@ -6478,7 +6529,7 @@ class CalendarComponent {
     }
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CalendarComponent, deps: [{ token: BusViewService }, { token: CalendarDOMService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: ScrollSyncService }, { token: DisabledDatesService }, { token: i1$1.LocalizationService }, { token: SelectionService }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CalendarComponent, selector: "kendo-calendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", onBlur: "blur", onFocus: "focus", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CalendarComponent, selector: "kendo-calendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], size: "size" }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", onBlur: "blur", onFocus: "focus", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
         BusViewService,
         CALENDAR_VALUE_ACCESSOR,
         CALENDAR_RANGE_VALIDATORS,
@@ -6591,7 +6642,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
     </ng-container>
-  `, isInline: true, components: [{ type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }, { type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }, { type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -6817,6 +6868,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], navigationItemTemplateRef: [{
                 type: Input,
                 args: ['navigationItemTemplate']
+            }], size: [{
+                type: Input
             }], navigationView: [{
                 type: ViewChild,
                 args: [NavigationComponent, { static: false }]
@@ -8392,7 +8445,7 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 </kendo-icon-wrapper>
         </button>
     </span>
-  `, isInline: true, components: [{ type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -8775,12 +8828,7 @@ class DatePickerComponent {
          * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
          */
         this.readOnlyInput = false;
-        /**
-         * Sets or gets the `navigation` property of the Calendar
-         * and determines whether the navigation side-bar is displayed.
-         * ([see example]({% slug sidebar_datepicker %})).
-         */
-        this.navigation = true;
+        this._navigation = true;
         /**
          * Specifies the smallest valid date
          * ([see example]({% slug dateranges_datepicker %})).
@@ -8840,7 +8888,8 @@ class DatePickerComponent {
          */
         this.tabindex = 0;
         /**
-         * Sets the title of the input element of the DatePicker.
+         * Sets the title of the input element of the DatePicker 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 = "";
         /**
@@ -8858,6 +8907,10 @@ class DatePickerComponent {
          * ([see example]({% slug calendar_type_datepicker %}#toc-week-number-column)).
          */
         this.weekNumber = false;
+        /**
+         * 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
          * ([more information and example]({% slug overview_datepicker %}#toc-events)).
@@ -8923,6 +8976,10 @@ class DatePickerComponent {
          * @hidden
          */
         this.wrapperClasses = true;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         this._popupSettings = { animate: true };
         this._show = false;
         this._value = null;
@@ -9007,6 +9064,21 @@ class DatePickerComponent {
     get popupSettings() {
         return this._popupSettings;
     }
+    /**
+     * Sets or gets the `navigation` property of the Calendar
+     * and determines whether the navigation side-bar is displayed.
+     * ([see example]({% slug sidebar_datepicker %})).
+     */
+    set navigation(state) {
+        this._navigation = state;
+    }
+    ;
+    get navigation() {
+        if (this.isAdaptive) {
+            return;
+        }
+        return this._navigation;
+    }
     /**
      * Specifies the value of the DatePicker component.
      *
@@ -9040,6 +9112,16 @@ class DatePickerComponent {
     get disabledDates() {
         return this._disabledDates;
     }
+    /**
+     * 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;
+    }
     /**
      * Sets the size of the component.
      *
@@ -9143,14 +9225,24 @@ class DatePickerComponent {
         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.toggleCalendar(show);
             });
         }
         else {
-            this.togglePopup(show);
+            this.toggleCalendar(show);
         }
     }
     /**
@@ -9177,6 +9269,7 @@ class DatePickerComponent {
     }
     ngAfterViewInit() {
         this.setComponentClasses();
+        this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
     }
     /**
      * @hidden
@@ -9207,7 +9300,7 @@ class DatePickerComponent {
         this.pickerSubscriptions.unsubscribe();
     }
     /**
-     * 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;
@@ -9255,6 +9348,19 @@ class DatePickerComponent {
     registerOnValidatorChange(fn) {
         this.onValidatorChange = fn;
     }
+    /**
+     * @hidden
+     */
+    handleActionSheetCollapse() {
+        // If not handled, the actionsheet expanded state does not get updated when overlay is clicked
+        this.cdr.markForCheck();
+    }
+    /**
+     * @hidden
+     */
+    handleActionSheetClick(e) {
+        e.preventDefault();
+    }
     /**
      * Focuses the DatePicker component.
      *
@@ -9280,7 +9386,8 @@ class DatePickerComponent {
         (this.calendar || 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.
@@ -9290,7 +9397,7 @@ class DatePickerComponent {
             return;
         }
         this.resolvedPromise.then(() => {
-            this._toggle((show === undefined) ? !this.show : show);
+            this.toggleCalendar((show === undefined) ? !this.show : show);
         });
     }
     /**
@@ -9308,6 +9415,15 @@ class DatePickerComponent {
         this.show = !this.show;
         this.cdr.markForCheck();
     }
+    /**
+     * @hidden
+     */
+    handleDateInputClick() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.show = true;
+        }
+    }
     /**
      * @hidden
      */
@@ -9357,6 +9473,34 @@ class DatePickerComponent {
     get calendar() {
         return this.pickerService.calendar;
     }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
+    /**
+     * @hidden
+     */
+    onResize() {
+        if (!this.isOpen || this.windowSize === windowSize()) {
+            return;
+        }
+        ;
+        if (this.actionSheet.expanded) {
+            this.toggleActionSheet(false);
+        }
+        else {
+            this.togglePopup(false);
+        }
+        this.windowSize = windowSize();
+    }
     /**
      * @hidden
      */
@@ -9384,21 +9528,17 @@ class DatePickerComponent {
             this.show = false;
         }
     }
-    togglePopup(show) {
-        const event = new PreventableEvent();
-        if (!this._show && show) {
-            this.open.emit(event);
-        }
-        else if (this._show && !show) {
-            this.close.emit(event);
+    toggleCalendar(show) {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.toggleActionSheet(show);
         }
-        if (event.isDefaultPrevented()) {
-            return;
+        else {
+            this.togglePopup(show);
         }
-        this._toggle(show);
         this.toggleFocus();
     }
-    _toggle(show) {
+    togglePopup(show) {
         if (show === this._show) {
             return;
         }
@@ -9416,16 +9556,7 @@ class DatePickerComponent {
                 popupClass: this.popupClasses,
                 positionMode: 'absolute'
             });
-            if (this.calendar.type === 'infinite') {
-                this.pickerSubscriptions.add(this.calendar.monthView.focusedCellChange.subscribe((id) => {
-                    this.renderer.setAttribute(inputElement, attributeNames.ariaActiveDescendant, id);
-                }));
-            }
-            else {
-                this.pickerSubscriptions.add(this.calendar.multiViewCalendar.viewList.focusedCellChange.subscribe((id) => {
-                    this.renderer.setAttribute(inputElement, attributeNames.ariaActiveDescendant, id);
-                }));
-            }
+            this.setAriaActiveDescendant();
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
             this.renderer.setAttribute(inputElement, attributeNames.ariaControls, this.popupUID);
             this.subscription = this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
@@ -9434,11 +9565,53 @@ class DatePickerComponent {
             this.popupRef.close();
             this.popupRef = null;
             this.subscription.unsubscribe();
+            this.ariaActiveDescendantSubscription.unsubscribe();
             this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
             this.renderer.removeAttribute(inputElement, attributeNames.ariaActiveDescendant);
             this.cdr.detectChanges();
         }
     }
+    toggleActionSheet(show) {
+        if (show === this._show) {
+            return;
+        }
+        if (show && !this.isOpen) {
+            this.actionSheet.toggle();
+            this.updateActionSheetAdaptiveAppearance();
+            this.setAriaActiveDescendant();
+        }
+        else if (!show && this.isOpen) {
+            this.actionSheet.toggle();
+            this.ariaActiveDescendantSubscription.unsubscribe();
+            this.renderer.removeAttribute(this.input.inputElement, attributeNames.ariaActiveDescendant);
+        }
+        this._show = show;
+    }
+    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');
+        }
+    }
+    setAriaActiveDescendant() {
+        const focusedCellChangeEvent = this.calendar.type === 'infinite' ?
+            this.calendar.monthView.focusedCellChange :
+            this.calendar.multiViewCalendar.viewList.focusedCellChange;
+        this.ariaActiveDescendantSubscription = focusedCellChangeEvent.subscribe((id) => this.renderer.setAttribute(this.input.inputElement, attributeNames.ariaActiveDescendant, id));
+    }
     focusInput() {
         if (this.touchEnabled) {
             return;
@@ -9499,15 +9672,17 @@ class DatePickerComponent {
         }
     }
     handleWindowBlur() {
-        if (!this.isOpen) {
+        if (!this.isOpen || this.actionSheet.expanded) {
             return;
         }
         this.show = false;
     }
     handleBlur(args) {
         const currentTarget = args && currentFocusTarget(args);
+        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.calendar && this.calendar.containsElement(currentTarget)))) {
+            (this.calendar && this.calendar.containsElement(currentTarget)) || isInsideActionSheet)) {
             return;
         }
         if (hasObservers(this.onBlur) || (this.show && hasObservers(this.close)) || requiresZoneOnBlur(this.control)) {
@@ -9553,7 +9728,7 @@ class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
@@ -9564,7 +9739,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             provide: L10N_PREFIX,
             useValue: 'kendo.datepicker'
         }
-    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "navigationItemTemplate", first: true, predicate: NavigationItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }], exportAs: ["kendo-datepicker"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "navigationItemTemplate", first: true, predicate: NavigationItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datepicker"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoDatePickerLocalizedMessages
             i18n-today="kendo.datepicker.today|The label for the today button in the calendar header"
             today="Today"
@@ -9603,6 +9778,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             size="none"
             [value]="value"
             (valueChange)="handleInputChange($event)"
+            (click)="handleDateInputClick()"
         ></kendo-dateinput>
         <button
             #toggleButton
@@ -9624,10 +9800,54 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             >
             </kendo-icon-wrapper>
         </button>
+
         <ng-container #container></ng-container>
+        
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="calendarTemplate"></ng-container>
+        </ng-template>
+
+        <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <kendo-actionsheet 
+            #actionSheet
+            (overlayClick)="show=false"
+            [kendoEventsOutsideAngular]="{
+                click: handleActionSheetClick
+            }"
+            [scope]="this"
+            (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="calendarTemplate"></ng-container>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
+
+        <ng-template #calendarTemplate>
             <kendo-calendar
                 #calendar
+                [size]="isAdaptive ? 'large' : 'medium'"
                 [type]="calendarType"
                 [min]="min"
                 [max]="max"
@@ -9661,8 +9881,8 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 >
                 </kendo-calendar-messages>
             </kendo-calendar>
-        <ng-template>
-    `, isInline: true, components: [{ type: 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$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        </ng-template>
+    `, isInline: true, components: [{ type: 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$1.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: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.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: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -9720,6 +9940,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             size="none"
             [value]="value"
             (valueChange)="handleInputChange($event)"
+            (click)="handleDateInputClick()"
         ></kendo-dateinput>
         <button
             #toggleButton
@@ -9741,10 +9962,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             >
             </kendo-icon-wrapper>
         </button>
+
         <ng-container #container></ng-container>
+        
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="calendarTemplate"></ng-container>
+        </ng-template>
+
+        <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <kendo-actionsheet 
+            #actionSheet
+            (overlayClick)="show=false"
+            [kendoEventsOutsideAngular]="{
+                click: handleActionSheetClick
+            }"
+            [scope]="this"
+            (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="calendarTemplate"></ng-container>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
+
+        <ng-template #calendarTemplate>
             <kendo-calendar
                 #calendar
+                [size]="isAdaptive ? 'large' : 'medium'"
                 [type]="calendarType"
                 [min]="min"
                 [max]="max"
@@ -9778,7 +10043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 >
                 </kendo-calendar-messages>
             </kendo-calendar>
-        <ng-template>
+        </ng-template>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i1$2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: PickerService }, { type: DisabledDatesService }, { type: undefined, decorators: [{
@@ -9795,6 +10060,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
             }], cellTemplate: [{
@@ -9891,6 +10159,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], title: [{
                 type: Input
+            }], subtitle: [{
+                type: Input
             }], rangeValidation: [{
                 type: Input
             }], disabledDatesValidation: [{
@@ -9903,6 +10173,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], fillMode: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], onFocus: [{
@@ -9964,17 +10236,35 @@ const listTitle = () => span('hour', 'k-title k-timeselector-title');
 const listItem = () => li('<span>02</span>', 'k-item');
 const list = () => ul([listItem()], 'k-reset');
 const scrollable = () => (div([list()], 'k-time-container k-flex k-content k-scrollable'));
-const timeListWrapper = () => {
+const actionSheetContent = (isDateTimePicker) => ([
+    isDateTimePicker ? div([div('button', 'k-button k-button-lg')], 'k-datetime-buttongroup') : null,
+    div([
+        div([span('title', 'k-title')], 'k-time-header'),
+        div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper')
+    ], 'k-timeselector k-timeselector-lg')
+]);
+const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker) => {
     if (!isDocumentAvailable()) {
         return null;
     }
-    return div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper', { left: '-10000px', position: 'absolute' });
+    if (!isAdaptiveEnabled) {
+        return div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper', { left: '-10000px', position: 'absolute' });
+    }
+    return div([div([div([div([div([], 'k-i-x k-button-icon k-icon')], 'k-icon-wrapper-host')], 'k-button k-icon-button k-button-lg')], 'k-actionsheet-titlebar'),
+        div([
+            isDateTimePicker ? div([...actionSheetContent(isDateTimePicker)], 'k-datetime-wrap k-time-tab') : actionSheetContent(isDateTimePicker)[1]
+        ], 'k-actionsheet-content'),
+        div([
+            div('button', 'k-button k-button-lg')
+        ], 'k-adaptive-actionsheet k-actionsheet-footer')], `k-actionsheet k-adaptive-actionsheet ${windowSize === 'small' ? 'k-actionsheet-fullscreen' : ''}`, { height: windowSize === 'small' ? '100%' : '60vh', left: '-10000px', position: 'absolute', top: 0 });
 };
-const TIMELIST_WRAPPER = timeListWrapper();
 /**
  * @hidden
  */
 class TimePickerDOMService {
+    get windowSize() {
+        return windowSize();
+    }
     ensureHeights() {
         if (this.timeListHeight !== undefined) {
             return;
@@ -9985,9 +10275,17 @@ class TimePickerDOMService {
         if (!isDocumentAvailable()) {
             return;
         }
-        const listContainer = container && container.querySelector('.k-time-list-container');
-        const hostContainer = listContainer || document.body;
-        const wrapper = hostContainer.appendChild(TIMELIST_WRAPPER);
+        let wrapper;
+        let hostContainer;
+        if (!this.isAdaptiveEnabled || this.windowSize === 'large') { // not adaptive            
+            const listContainer = container && container.querySelector('.k-time-list-container');
+            hostContainer = listContainer || document.body;
+            wrapper = hostContainer.appendChild(timeListWrapper());
+        }
+        else { // adaptive mode
+            hostContainer = document.body;
+            wrapper = hostContainer.appendChild(timeListWrapper(true, this.windowSize, this.isDateTimePicker));
+        }
         this.timeListHeight = wrapper.querySelector('.k-scrollable').getBoundingClientRect().height;
         this.itemHeight = wrapper.querySelector('li').getBoundingClientRect().height;
         hostContainer.removeChild(wrapper);
@@ -10824,7 +11122,7 @@ TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </li>
         </ul>
     </kendo-virtualization>
-  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeListComponent, decorators: [{
             type: Component,
             args: [{
@@ -11178,6 +11476,8 @@ 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();
@@ -11373,7 +11673,7 @@ class TimeSelectorComponent {
     }
 }
 TimeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeSelectorComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.IntlService }, { token: TimePickerDOMService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: 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,
@@ -11482,7 +11782,7 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [disabled]="disabled"
             >{{localization.get('accept')}}</button>
         </div>
-    `, isInline: true, components: [{ type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value"], outputs: ["valueChange"] }], directives: [{ type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value"], outputs: ["valueChange"] }], directives: [{ type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeSelectorComponent, decorators: [{
             type: Component,
             args: [{
@@ -11635,6 +11935,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: [{
@@ -11792,13 +12096,18 @@ 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
@@ -11869,6 +12178,10 @@ class TimePickerComponent {
          * @hidden
          */
         this.wrapperClasses = true;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         this.onControlChange = noop$2;
         this.onControlTouched = noop$2;
         this.onValidatorChange = noop$2;
@@ -11961,6 +12274,16 @@ 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.
      */
@@ -12074,14 +12397,24 @@ 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() {
@@ -12116,6 +12449,7 @@ class TimePickerComponent {
      */
     ngAfterViewInit() {
         this.setComponentClasses();
+        this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
     }
     /**
      * @hidden
@@ -12235,7 +12569,8 @@ 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.
@@ -12245,11 +12580,11 @@ 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;
@@ -12281,6 +12616,19 @@ 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
      */
@@ -12294,6 +12642,15 @@ 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
      */
@@ -12324,6 +12681,18 @@ 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
      */
@@ -12336,21 +12705,48 @@ 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;
         }
@@ -12379,6 +12775,25 @@ 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;
@@ -12429,7 +12844,7 @@ class TimePickerComponent {
         }
     }
     handleWindowBlur() {
-        if (!this.isOpen) {
+        if (!this.isOpen || this.actionSheet.expanded) {
             return;
         }
         this.show = false;
@@ -12446,9 +12861,11 @@ 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)) {
@@ -12488,7 +12905,7 @@ class TimePickerComponent {
     }
 }
 TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimePickerComponent, deps: [{ token: BusViewService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: i1.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) },
@@ -12499,7 +12916,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"
@@ -12562,6 +12979,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [title]="title"
             [value]="value"
             (valueChange)="handleInputChange($event)"
+            (click)="handleDateInputClick()"
         ></kendo-dateinput>
         <button
             #toggleButton
@@ -12584,15 +13002,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
@@ -12617,8 +13096,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: 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$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: 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$1.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: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.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: [{
@@ -12700,6 +13178,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
@@ -12722,15 +13201,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
-            <kendo-timeselector
-                #timeSelector
-                [cancelButton]="cancelButton"
-                [nowButton]="nowButton"
-                [format]="format"
-                [min]="min"
-                [max]="max"
+            <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
+                [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
@@ -12755,7 +13295,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: BusViewService }, { type: i0.NgZone }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i1$2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: PickerService }, { type: i1.IntlService }, { type: undefined, decorators: [{
@@ -12772,6 +13311,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: [{
@@ -12806,8 +13348,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: [{
@@ -12954,7 +13500,8 @@ class DateTimePickerComponent {
          */
         this.twoDigitYearMax = TWO_DIGIT_YEAR_MAX;
         /**
-         * Sets the title of the input element of the DateTimePicker.
+         * Sets the title of the input element of the DateTimePicker 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 = '';
         /**
@@ -13023,6 +13570,10 @@ class DateTimePickerComponent {
          * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
          */
         this.incompleteDateValidation = false;
+        /**
+         * 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.
          * ([more information and example]({% slug overview_datetimepicker %}#toc-methods-and-events)).
@@ -13083,6 +13634,10 @@ class DateTimePickerComponent {
          * @hidden
          */
         this.calendarMax = lastMillisecondOfDate(MAX_DATE);
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         this._popupSettings = { animate: true };
         this._value = null;
         this._format = DEFAULT_DATEINPUT_FORMAT;
@@ -13203,6 +13758,16 @@ class DateTimePickerComponent {
     get popupSettings() {
         return this._popupSettings;
     }
+    /**
+     * 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 smallest valid date.
      * The Calendar will not display dates before this value.
@@ -13238,10 +13803,13 @@ class DateTimePickerComponent {
         return this._max;
     }
     /**
-     * Indicates whether the component is currently open.
+     * Indicates whether the component is currently open. That is when the popup or actionSheet is open.
      */
     get isOpen() {
-        return isPresent(this.popupRef);
+        if (!this.isAdaptive) {
+            return isPresent(this.popupRef);
+        }
+        return this.actionSheet && this.actionSheet.expanded;
     }
     /**
      * Indicates whether the component or its popup content is focused.
@@ -13369,6 +13937,34 @@ class DateTimePickerComponent {
     get disableTimeSelector() {
         return this.activeTab !== 'time' && !this.timeSelector.isActive;
     }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
+    /**
+     * @hidden
+     */
+    onResize() {
+        if (!this.isOpen || this.windowSize === windowSize()) {
+            return;
+        }
+        ;
+        if (this.actionSheet.expanded) {
+            this.toggleActionSheet(false);
+        }
+        else {
+            this._togglePopup(false);
+        }
+        this.windowSize = windowSize();
+    }
     get activeTabComponent() {
         if (!this.isOpen) {
             return;
@@ -13399,11 +13995,16 @@ class DateTimePickerComponent {
         this.subscriptions.add(this.localization.changes.subscribe(() => this.cdr.markForCheck()));
         this.subscriptions.add(this.pickerService.dateCompletenessChange.subscribe(this.handleDateCompletenessChange.bind(this)));
         if (isWindowAvailable()) {
-            this.subscriptions.add(this.ngZone.runOutsideAngular(() => fromEvent(window, 'blur').subscribe(this.handleCancel.bind(this))));
+            this.subscriptions.add(this.ngZone.runOutsideAngular(() => fromEvent(window, 'blur').subscribe(() => {
+                if (!this.isAdaptive) {
+                    this.handleCancel();
+                }
+            })));
         }
     }
     ngAfterViewInit() {
         this.setComponentClasses();
+        this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
     }
     ngOnChanges(changes) {
         if (isPresent(changes['min']) || isPresent(changes['max'])) {
@@ -13450,7 +14051,8 @@ class DateTimePickerComponent {
         }
     }
     /**
-     * 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.
      * ([more information and example]({% slug overview_datetimepicker %}#toc-methods-and-events)).
      *
@@ -13460,17 +14062,12 @@ class DateTimePickerComponent {
         if (this.disabled || this.readonly || show === this.isOpen) {
             return;
         }
-        const shouldOpen = isPresent(show) ? show : !this.isOpen;
-        if (shouldOpen) {
-            this.openPopup();
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.toggleActionSheet(show);
         }
         else {
-            this.closePopup();
-            // Changes the tab and the calendar or clock icon to the designated default.
-            if (this.activeTab !== this.defaultTab) {
-                this.activeTab = this.defaultTab;
-                this.cdr.detectChanges();
-            }
+            this._togglePopup(show);
         }
     }
     /**
@@ -13532,7 +14129,7 @@ class DateTimePickerComponent {
             const shouldOpen = !this.isOpen;
             // handle focus first to maintain correct event order `focus` => `open`
             this.handleFocus();
-            this.togglePopup(shouldOpen);
+            this.toggleDateTime(shouldOpen);
             this.switchFocus();
         });
     }
@@ -13561,7 +14158,7 @@ class DateTimePickerComponent {
         this.run(runInZone, () => {
             this.onBlur.emit();
             this.onControlTouched();
-            this.togglePopup(false);
+            this.toggleDateTime(false);
             this.cdr.markForCheck();
         });
     }
@@ -13605,7 +14202,7 @@ class DateTimePickerComponent {
         const runInZone = valueChangePresent || hasObservers(this.close);
         this.run(runInZone, () => {
             this.handleValueChange(candidate);
-            this.togglePopup(false);
+            this.toggleDateTime(false);
         });
     }
     /**
@@ -13616,7 +14213,7 @@ class DateTimePickerComponent {
             return;
         }
         const runInZone = hasObservers(this.close);
-        this.run(runInZone, () => this.togglePopup(false));
+        this.run(runInZone, () => this.toggleDateTime(false));
     }
     /**
      * @hidden
@@ -13624,7 +14221,16 @@ class DateTimePickerComponent {
     handleInputValueChange(value) {
         this.handleValueChange(value);
         if (this.isOpen) {
-            this.togglePopup(false);
+            this.toggleDateTime(false);
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleDateInputClick() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.toggleDateTime(true);
         }
     }
     /**
@@ -13648,7 +14254,7 @@ class DateTimePickerComponent {
                 this.handleCancel();
                 break;
             case !this.isOpen && altKey && Keys$1.ArrowDown:
-                this.ngZone.run(() => this.togglePopup(true));
+                this.ngZone.run(() => this.toggleDateTime(true));
                 break;
             case altKey && Keys$1.ArrowRight:
                 this.changeActiveTab('time');
@@ -13684,12 +14290,22 @@ class DateTimePickerComponent {
             this.input.focus();
         }
     }
+    /**
+     * @hidden
+     */
+    handleActionSheetCollapse() {
+        // If not handled, the actionsheet expanded state does not get updated when overlay is clicked
+        this.cdr.markForCheck();
+        // Reset tabs after actionsheet is collapsed, otherwise the tab change can be seen during the animation
+        this.resetActiveTab();
+    }
     /**
      * @hidden
      */
     popupButtonsClasses(type) {
         const buttonType = type ? type : 'base';
-        return `${this.size ? getSizeClass('button', this.size) : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''} ${this.fillMode ? 'k-button-' + this.fillMode + ' ' + 'k-button-' + this.fillMode + '-' + buttonType : ''}`;
+        const sizeClass = `${this.isAdaptive ? getSizeClass('button', 'large') : this.size ? getSizeClass('button', this.size) : ''}`;
+        return `${sizeClass} ${this.rounded ? getRoundedClass(this.rounded) : ''} ${this.fillMode ? 'k-button-' + this.fillMode + ' ' + 'k-button-' + this.fillMode + '-' + buttonType : ''}`;
     }
     /**
      * @hidden
@@ -13699,6 +14315,55 @@ class DateTimePickerComponent {
     preventMouseDown(event) {
         event.preventDefault();
     }
+    _togglePopup(show) {
+        const shouldOpen = isPresent(show) ? show : !this.isOpen;
+        if (shouldOpen) {
+            this.openPopup();
+            return;
+        }
+        this.closePopup();
+        this.resetActiveTab();
+    }
+    toggleActionSheet(show) {
+        if (isPresent(show) && show && !this.isOpen) {
+            this.actionSheet.toggle();
+            this.updateActionSheetAdaptiveAppearance();
+            this.setAriaActiveDescendant();
+        }
+        else if (isPresent(show) && !show && this.isOpen) {
+            this.actionSheet.toggle();
+            this.ariaActiveDescendantSubscription.unsubscribe();
+            this.renderer.removeAttribute(this.input.inputElement, attributeNames.ariaActiveDescendant);
+        }
+    }
+    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');
+        }
+    }
+    /**
+     * Changes the tab and the calendar or clock icon to the designated default.
+     */
+    resetActiveTab() {
+        if (this.activeTab !== this.defaultTab) {
+            this.activeTab = this.defaultTab;
+            this.cdr.detectChanges();
+        }
+    }
     verifyValue(value) {
         if (!isDevMode()) {
             return;
@@ -13755,7 +14420,10 @@ class DateTimePickerComponent {
         }
         return timeFormatRegExp.test(part.type);
     }
-    togglePopup(open) {
+    /**
+     * @hidden
+     */
+    toggleDateTime(open) {
         if (open === this.isOpen) {
             return;
         }
@@ -13802,24 +14470,20 @@ class DateTimePickerComponent {
         });
         this.popupRef.popupElement.setAttribute('id', this.popupUID);
         this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
-        if (this.activeTab === 'date') {
-            if (this.calendar.type === 'infinite') {
-                this.subscriptions.add(this.calendar.monthView.focusedCellChange.subscribe((id) => {
-                    this.renderer.setAttribute(this.inputElement, attributeNames.ariaActiveDescendant, id);
-                }));
-            }
-            else {
-                this.subscriptions.add(this.calendar.multiViewCalendar.viewList.focusedCellChange.subscribe((id) => {
-                    this.renderer.setAttribute(this.inputElement, attributeNames.ariaActiveDescendant, id);
-                }));
-            }
-        }
+        this.setAriaActiveDescendant();
         this.popupRef.popupAnchorViewportLeave.subscribe(() => this.handleCancel());
     }
+    setAriaActiveDescendant() {
+        const focusedCellChangeEvent = this.calendar.type === 'infinite' ?
+            this.calendar.monthView.focusedCellChange :
+            this.calendar.multiViewCalendar.viewList.focusedCellChange;
+        this.ariaActiveDescendantSubscription = focusedCellChangeEvent.subscribe((id) => this.renderer.setAttribute(this.input.inputElement, attributeNames.ariaActiveDescendant, id));
+    }
     closePopup() {
         if (!this.isOpen) {
             return;
         }
+        this.ariaActiveDescendantSubscription.unsubscribe();
         this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
         this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
         this.popupRef.close();
@@ -13844,7 +14508,8 @@ class DateTimePickerComponent {
         const relatedTarget = event.relatedTarget || document.activeElement;
         const focusInPopup = isPresent(this.popupRef) && this.popupRef.popupElement.contains(relatedTarget);
         const focusInWrapper = this.wrapper.nativeElement.contains(relatedTarget);
-        return focusInPopup || focusInWrapper;
+        const isInsideActionSheet = this.actionSheet && (this.actionSheet.element.nativeElement.contains(event.target) || this.actionSheet.element.nativeElement.contains(relatedTarget));
+        return focusInPopup || focusInWrapper || isInsideActionSheet;
     }
     setTimeSelectorMinMax(selectedDate) {
         const minDateSelected = isPresent(selectedDate) && isEqual(getDate(selectedDate), getDate(this.min));
@@ -13860,7 +14525,7 @@ class DateTimePickerComponent {
      * If the popup is available, runs a popup change detection.
      */
     detectPopupChanges() {
-        if (!this.isOpen) {
+        if (!this.isOpen || this.isAdaptive) {
             return;
         }
         this.popupRef.popup.changeDetectorRef.detectChanges();
@@ -13897,7 +14562,7 @@ class DateTimePickerComponent {
     }
 }
 DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1$2.PopupService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i1$1.LocalizationService }, { token: DisabledDatesService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", adaptiveMode: "adaptiveMode", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
@@ -13905,7 +14570,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) }
-    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, read: TemplateRef, static: true }], exportAs: ["kendo-datetimepicker"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datetimepicker"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoDateTimePickerLocalizedMessages
 
@@ -13981,6 +14646,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [fillMode]="fillMode"
             [rounded]="rounded"
             [size]="size"
+            (click)="handleDateInputClick()"
         >
         </kendo-dateinput>
         <button
@@ -14015,6 +14681,64 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <ng-container #container></ng-container>
 
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
+        </ng-template>
+
+        <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+
+        <kendo-actionsheet 
+            #actionSheet
+            (overlayClick)="toggleDateTime(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)="toggleDateTime(false)">
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="k-actionsheet-content !k-overflow-hidden">
+                    <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
+                </div>
+                <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton 
+                        (click)="handleCancel()"
+                        size="large"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
+                    <button kendoButton
+                        (click)="handleAccept()"
+                        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 #dateTimeTemplate>
             <div
                 class="k-datetime-wrap k-{{activeTab}}-tab"
                 [kendoEventsOutsideAngular]="{
@@ -14073,6 +14797,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 >
                     <div class="k-datetime-calendar-wrap">
                         <kendo-calendar
+                            [ngClass]="{'k-calendar-lg': isAdaptive}"
                             [focusedDate]="focusedDate"
                             [(value)]="calendarValue"
                             [type]="calendarType"
@@ -14102,6 +14827,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     </div>
                     <div class="k-datetime-time-wrap">
                         <kendo-timeselector
+                            [ngClass]="{'k-timeselector-lg': isAdaptive}"
                             [value]="value"
                             [format]="timeSelectorFormat"
                             [min]="timeSelectorMin"
@@ -14110,6 +14836,8 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                             [cancelButton]="false"
                             [steps]="steps"
                             [disabled]="disableTimeSelector"
+                            [isAdaptiveEnabled]="isAdaptiveModeEnabled"
+                            [isDateTimePicker]="true"
                         >
                             <kendo-timeselector-messages
                                 [now]="localization.get('now')"
@@ -14120,6 +14848,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     </div>
                 </div>
                 <div
+                    *ngIf="!isAdaptive"
                     class="k-datetime-footer k-action-buttons k-actions k-hstack k-justify-content-stretch"
                     [kendoEventsOutsideAngular]="{
                         keydown: handleTabOut,
@@ -14159,7 +14888,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: 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$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: 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$1.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: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -14251,6 +14980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [fillMode]="fillMode"
             [rounded]="rounded"
             [size]="size"
+            (click)="handleDateInputClick()"
         >
         </kendo-dateinput>
         <button
@@ -14285,6 +15015,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-container #container></ng-container>
 
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
+        </ng-template>
+
+        <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+
+        <kendo-actionsheet 
+            #actionSheet
+            (overlayClick)="toggleDateTime(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)="toggleDateTime(false)">
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="k-actionsheet-content !k-overflow-hidden">
+                    <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
+                </div>
+                <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton 
+                        (click)="handleCancel()"
+                        size="large"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
+                    <button kendoButton
+                        (click)="handleAccept()"
+                        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 #dateTimeTemplate>
             <div
                 class="k-datetime-wrap k-{{activeTab}}-tab"
                 [kendoEventsOutsideAngular]="{
@@ -14343,6 +15131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 >
                     <div class="k-datetime-calendar-wrap">
                         <kendo-calendar
+                            [ngClass]="{'k-calendar-lg': isAdaptive}"
                             [focusedDate]="focusedDate"
                             [(value)]="calendarValue"
                             [type]="calendarType"
@@ -14372,6 +15161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     </div>
                     <div class="k-datetime-time-wrap">
                         <kendo-timeselector
+                            [ngClass]="{'k-timeselector-lg': isAdaptive}"
                             [value]="value"
                             [format]="timeSelectorFormat"
                             [min]="timeSelectorMin"
@@ -14380,6 +15170,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [cancelButton]="false"
                             [steps]="steps"
                             [disabled]="disableTimeSelector"
+                            [isAdaptiveEnabled]="isAdaptiveModeEnabled"
+                            [isDateTimePicker]="true"
                         >
                             <kendo-timeselector-messages
                                 [now]="localization.get('now')"
@@ -14390,6 +15182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     </div>
                 </div>
                 <div
+                    *ngIf="!isAdaptive"
                     class="k-datetime-footer k-action-buttons k-actions k-hstack k-justify-content-stretch"
                     [kendoEventsOutsideAngular]="{
                         keydown: handleTabOut,
@@ -14462,6 +15255,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], title: [{
                 type: Input
+            }], subtitle: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{
@@ -14494,6 +15289,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], incompleteDateValidation: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], open: [{
@@ -14541,6 +15338,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], popupTemplate: [{
                 type: ViewChild,
                 args: ['popupTemplate', { read: TemplateRef, static: true }]
+            }], actionSheet: [{
+                type: ViewChild,
+                args: ['actionSheet']
             }] } });
 
 /**
@@ -14795,6 +15595,11 @@ class DateRangeSelectionDirective {
          * To disable this behavior, set the `autoCorrectOn` property to `none`.
          */
         this.autoCorrectOn = 'change';
+        /**
+         * @hidden
+         * When in adaptive mode range should not be set automatically on calendar value change but only on accept
+         */
+        this.shouldSetRange = true;
         /**
          * Fires when the active range end is changed. For more information, refer to
          * the section on [events]({% slug overview_multiviewcalendar %}#toc-events).
@@ -14875,6 +15680,25 @@ class DateRangeSelectionDirective {
     ngOnDestroy() {
         this.calendarSubscriptions.unsubscribe();
     }
+    /**
+     * @hidden
+     */
+    handleChange(value) {
+        const service = this.dateRangeService;
+        const autoCorrect = this.autoCorrectOn === 'change' && this.shouldAutoCorrect(value);
+        const activeEnd = this.calendar.activeRangeEnd !== 'end' ? 'end' : (autoCorrect ? 'end' : 'start');
+        this.range = autoCorrect ? clampRange(value) : this.updateRange(value);
+        if (!isEqualRange(service.selectionRange, this.range)) {
+            this.acceptAndEmit(this.range);
+            service.setActiveRangeEnd(activeEnd);
+            if (this.shouldSetRange) {
+                this.setRange();
+            }
+        }
+    }
+    setRange(range) {
+        this.dateRangeService.setRange(this.range ? this.range : range);
+    }
     addSubscriptions(...subscriptions) {
         subscriptions.map(s => this.calendarSubscriptions.add(s));
     }
@@ -14888,17 +15712,6 @@ class DateRangeSelectionDirective {
             this.dateRangeService.setRange(clampRange(start));
         }
     }
-    handleChange(value) {
-        const service = this.dateRangeService;
-        const autoCorrect = this.autoCorrectOn === 'change' && this.shouldAutoCorrect(value);
-        const activeEnd = this.calendar.activeRangeEnd !== 'end' ? 'end' : (autoCorrect ? 'end' : 'start');
-        const range = autoCorrect ? clampRange(value) : this.updateRange(value);
-        if (!isEqualRange(service.selectionRange, range)) {
-            this.acceptAndEmit(range);
-            service.setActiveRangeEnd(activeEnd);
-            service.setRange(range);
-        }
-    }
     handleHover(value) {
         if (this.hasCompleteRange()) {
             return;
@@ -14943,7 +15756,7 @@ class DateRangeSelectionDirective {
     }
 }
 DateRangeSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangeSelectionDirective, deps: [{ token: MultiViewCalendarComponent }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DateRangeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DateRangeSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: { autoCorrectOn: "autoCorrectOn", selectionRange: "selectionRange", activeRangeEnd: "activeRangeEnd" }, outputs: { activeRangeEndChange: "activeRangeEndChange", selectionRangeChange: "selectionRangeChange" }, ngImport: i0 });
+DateRangeSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: { autoCorrectOn: "autoCorrectOn", selectionRange: "selectionRange", activeRangeEnd: "activeRangeEnd", shouldSetRange: "shouldSetRange" }, outputs: { activeRangeEndChange: "activeRangeEndChange", selectionRangeChange: "selectionRangeChange" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangeSelectionDirective, decorators: [{
             type: Directive,
             args: [{
@@ -14957,12 +15770,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], activeRangeEnd: [{
                 type: Input
+            }], shouldSetRange: [{
+                type: Input
             }], activeRangeEndChange: [{
                 type: Output
             }], selectionRangeChange: [{
                 type: Output
             }] } });
 
+/**
+ * @hidden
+ */
+class DateRangePopupMessages extends ComponentMessages {
+}
+DateRangePopupMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DateRangePopupMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DateRangePopupMessages, selector: "kendo-daterangepopup-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupMessages, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line
+                    selector: 'kendo-daterangepopup-messages-base'
+                }]
+        }], propDecorators: { accept: [{
+                type: Input
+            }], acceptLabel: [{
+                type: Input
+            }], cancel: [{
+                type: Input
+            }], cancelLabel: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class DateRangePopupLocalizedMessagesDirective extends DateRangePopupMessages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+}
+DateRangePopupLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+DateRangePopupLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]", providers: [
+        {
+            provide: DateRangePopupMessages,
+            useExisting: forwardRef(() => DateRangePopupLocalizedMessagesDirective)
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupLocalizedMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: DateRangePopupMessages,
+                            useExisting: forwardRef(() => DateRangePopupLocalizedMessagesDirective)
+                        }
+                    ],
+                    selector: '[kendoDateRangePopupLocalizedMessages]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+
 /**
  * Represents the Kendo UI DateRangePopup component for Angular.
  *
@@ -14983,11 +15850,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class DateRangePopupComponent {
-    constructor(popupService, dateRangeService, ref, zone, rtl) {
+    constructor(popupService, dateRangeService, ref, zone, renderer, localization, cdr, rtl) {
         this.popupService = popupService;
         this.dateRangeService = dateRangeService;
         this.ref = ref;
         this.zone = zone;
+        this.renderer = renderer;
+        this.localization = localization;
+        this.cdr = cdr;
         this.rtl = rtl;
         /**
          * Controls the popup animation.
@@ -15002,6 +15872,15 @@ class DateRangePopupComponent {
          * [viewport boundary detection]({% slug viewportboundarydetection_popup %}).
          */
         this.collision = { horizontal: 'fit', vertical: 'flip' };
+        /**
+         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+         */
+        this.adaptiveMode = 'none';
+        /**
+         * Sets the title of the input element of the DateRangePopup 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 = "";
         /**
          * Fires each time the popup is about to open.
          * This event is preventable. If you cancel the event, the popup will remain closed.
@@ -15032,10 +15911,25 @@ class DateRangePopupComponent {
          * @hidden
          */
         this.popupUID = guid();
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         this.calendarSubscriptions = new Subscription();
         this.popupSubscriptions = new Subscription();
+        this.localizationSubscriptions = new Subscription();
         this.resolvedPromise = Promise.resolve();
     }
+    /**
+     * 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;
+    }
     /**
      * The active calendar that is visible in the popup.
      *
@@ -15053,7 +15947,23 @@ class DateRangePopupComponent {
      * When the opened calendar is active, returns `true`.
      */
     get isActive() {
-        return this.calendar && this.calendar.isActive;
+        // The actionsheet is expanding before the calendar gets activated
+        // and if we only check for calendar.isActive a blur event handler in the date-rage-input.ts will close the actionsheet
+        // TODO: Potentially the entire logic would need refactoring to avoid hacks like this one
+        return (this.calendar && this.calendar.isActive)
+            || (this.actionSheet && this.actionSheet.expanded);
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
     }
     /**
      * Gets or sets the visibility state of the component.
@@ -15072,13 +15982,18 @@ class DateRangePopupComponent {
         if (event.isDefaultPrevented()) {
             return;
         }
-        this._toggle(show);
+        this.toggleDateRange(show);
     }
     get show() {
         return this._show;
     }
     ngOnInit() {
         this.dateRangeService.registerPopup(this);
+        if (this.localization) {
+            this.localizationSubscriptions.add(this.localization
+                .changes
+                .subscribe(() => this.cdr.markForCheck()));
+        }
     }
     ngAfterViewInit() {
         this.calendarSubscriptions.add(this.contentCalendar.changes.subscribe((changes) => this.calendar = changes.first));
@@ -15086,6 +16001,7 @@ class DateRangePopupComponent {
         if (isWindowAvailable()) {
             this.zone.runOutsideAngular(() => this.windowBlurSubscription = fromEvent(window, 'blur').subscribe(this.handleWindowBlur.bind(this)));
         }
+        this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
     }
     ngOnDestroy() {
         this.destroyPopup();
@@ -15144,15 +16060,15 @@ class DateRangePopupComponent {
         return this.popupRef.popupElement.contains(document.activeElement);
     }
     /**
-     * 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.
      */
     toggle(show) {
         this.resolvedPromise.then(() => {
-            this._toggle((show === undefined) ? !this.show : show);
+            this.toggleDateRange((show === undefined) ? !this.show : show);
         });
     }
     /**
@@ -15164,8 +16080,31 @@ class DateRangePopupComponent {
         this.show = false;
         this.cancel.emit();
     }
+    /**
+     * @hidden
+     */
+    handleAccept() {
+        this.dateRangeSelectionDirective.setRange(this.dateRangeService.selectionRange);
+        this.show = false;
+    }
+    /**
+     * @hidden
+     */
+    onResize() {
+        if (!this.show || this.windowSize === windowSize()) {
+            return;
+        }
+        ;
+        if (this.actionSheet.expanded) {
+            this.toggleActionSheet(false);
+        }
+        else {
+            this.togglePopup(false);
+        }
+        this.windowSize = windowSize();
+    }
     handleWindowBlur() {
-        if (!this.show) {
+        if (!this.show || this.actionSheet.expanded) {
             return;
         }
         if (hasObservers(this.close)) {
@@ -15209,7 +16148,7 @@ class DateRangePopupComponent {
         }
         return appendTo === 'component' ? this.container : appendTo;
     }
-    _toggle(show) {
+    togglePopup(show) {
         this._show = show;
         if (this.popupRef) {
             this.destroyPopup();
@@ -15241,27 +16180,237 @@ class DateRangePopupComponent {
             this.popupSubscriptions.unsubscribe();
         }
     }
+    toggleDateRange(show) {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.toggleActionSheet(show);
+        }
+        else {
+            this.togglePopup(show);
+        }
+    }
+    toggleActionSheet(show) {
+        if (show === this._show) {
+            return;
+        }
+        if (show && !this.actionSheet.expanded) {
+            this.actionSheet.toggle();
+            this.updateActionSheetAdaptiveAppearance();
+        }
+        else if (!show && this.actionSheet.expanded) {
+            this.actionSheet.toggle();
+        }
+        this._show = show;
+    }
+    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');
+        }
+    }
 }
-DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1$2.PopupService }, { token: DateRangeService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: DateRangePopupTemplateDirective, descendants: true }, { propertyName: "contentCalendar", predicate: MultiViewCalendarComponent }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "viewCalendar", predicate: MultiViewCalendarComponent, descendants: true }], exportAs: ["kendo-daterange-popup"], ngImport: i0, template: `
+DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1$2.PopupService }, { token: DateRangeService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.daterangepopup'
+        }
+    ], queries: [{ propertyName: "contentTemplate", first: true, predicate: DateRangePopupTemplateDirective, descendants: true }, { propertyName: "contentCalendar", predicate: MultiViewCalendarComponent }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "dateRangeSelectionDirective", first: true, predicate: DateRangeSelectionDirective, descendants: true }, { propertyName: "viewCalendar", predicate: MultiViewCalendarComponent, descendants: true }], exportAs: ["kendo-daterange-popup"], ngImport: i0, template: `
+        <ng-container kendoDateRangePopupLocalizedMessages
+            i18n-accept="kendo.daterangepopup.accept|The Accept button text in the timepicker component"
+            accept="Set"
+
+            i18n-acceptLabel="kendo.daterangepopup.acceptLabel|The label for the Accept button in the timepicker component"
+            acceptLabel="Set time"
+
+            i18n-cancel="kendo.daterangepopup.cancel|The Cancel button text in the timepicker component"
+            cancel="Cancel"
+
+            i18n-cancelLabel="kendo.daterangepopup.cancelLabel|The label for the Cancel button in the timepicker component"
+            cancelLabel="Cancel changes"
+        >
+        </ng-container> 
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
             <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
         </ng-template>
-    `, isInline: true, components: [{ type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }], directives: [{ type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
+
+        <kendo-actionsheet 
+            #actionSheet
+            (overlayClick)="show=false"
+            (collapse)="onBlur.emit()"
+        >
+            <ng-template kendoActionSheetTemplate>
+                <!-- Resize sensor needs to be inside the template because the date-range-popup
+                element itself always has 0x0 size and does not trigger the sensor. 
+                Note: The popup in non-adaptive mode closes on window blur -->
+                <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+                <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">
+                    <div class="k-scrollable-wrap">
+                        <kendo-multiviewcalendar
+                            class="k-calendar-lg"
+                            orientation="vertical"
+                            #test
+                            kendoDateRangeSelection
+                            [shouldSetRange]="false">
+                        </kendo-multiviewcalendar>
+                    </div>
+                </div>
+                <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton 
+                        size="large"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                        (click)="show=false"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
+                    <button kendoButton
+                        size="large"
+                        themeColor="primary"
+                        [attr.title]="localization.get('acceptLabel')"
+                        [attr.aria-label]="localization.get('acceptLabel')"
+                        (click)="handleAccept()"
+                    >
+                        {{localization.get('accept')}}
+                    </button>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
+    `, isInline: true, components: [{ type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { 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"] }], directives: [{ type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd", "shouldSetRange"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendo-daterange-popup',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.daterangepopup'
+                        }
+                    ],
                     selector: 'kendo-daterange-popup',
                     template: `
+        <ng-container kendoDateRangePopupLocalizedMessages
+            i18n-accept="kendo.daterangepopup.accept|The Accept button text in the timepicker component"
+            accept="Set"
+
+            i18n-acceptLabel="kendo.daterangepopup.acceptLabel|The label for the Accept button in the timepicker component"
+            acceptLabel="Set time"
+
+            i18n-cancel="kendo.daterangepopup.cancel|The Cancel button text in the timepicker component"
+            cancel="Cancel"
+
+            i18n-cancelLabel="kendo.daterangepopup.cancelLabel|The label for the Cancel button in the timepicker component"
+            cancelLabel="Cancel changes"
+        >
+        </ng-container> 
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
             <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
         </ng-template>
+
+        <kendo-actionsheet 
+            #actionSheet
+            (overlayClick)="show=false"
+            (collapse)="onBlur.emit()"
+        >
+            <ng-template kendoActionSheetTemplate>
+                <!-- Resize sensor needs to be inside the template because the date-range-popup
+                element itself always has 0x0 size and does not trigger the sensor. 
+                Note: The popup in non-adaptive mode closes on window blur -->
+                <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+                <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">
+                    <div class="k-scrollable-wrap">
+                        <kendo-multiviewcalendar
+                            class="k-calendar-lg"
+                            orientation="vertical"
+                            #test
+                            kendoDateRangeSelection
+                            [shouldSetRange]="false">
+                        </kendo-multiviewcalendar>
+                    </div>
+                </div>
+                <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton 
+                        size="large"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                        (click)="show=false"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
+                    <button kendoButton
+                        size="large"
+                        themeColor="primary"
+                        [attr.title]="localization.get('acceptLabel')"
+                        [attr.aria-label]="localization.get('acceptLabel')"
+                        (click)="handleAccept()"
+                    >
+                        {{localization.get('accept')}}
+                    </button>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.PopupService }, { type: DateRangeService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$2.PopupService }, { type: DateRangeService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -15269,12 +16418,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }] }]; }, propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: false }]
+            }], actionSheet: [{
+                type: ViewChild,
+                args: ['actionSheet']
             }], defaultTemplate: [{
                 type: ViewChild,
                 args: ['defaultTemplate', { static: false }]
             }], contentTemplate: [{
                 type: ContentChild,
                 args: [DateRangePopupTemplateDirective, { static: false }]
+            }], dateRangeSelectionDirective: [{
+                type: ViewChild,
+                args: [DateRangeSelectionDirective, { static: false }]
             }], viewCalendar: [{
                 type: ViewChildren,
                 args: [MultiViewCalendarComponent]
@@ -15295,6 +16450,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], margin: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
             }], open: [{
                 type: Output
             }], close: [{
@@ -15368,7 +16529,7 @@ DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateRangeComponent, selector: "kendo-daterange", host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
         <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
-    `, isInline: true, components: [{ type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{
@@ -16163,6 +17324,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
+const ADAPTIVE_MODULES = [
+    NavigationModule,
+    ResizeSensorModule,
+    ButtonModule,
+    TextBoxModule
+];
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the modules specific to the Adaptive Mode.
+ */
+class AdaptiveModule {
+}
+AdaptiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AdaptiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AdaptiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AdaptiveModule, imports: [NavigationModule,
+        ResizeSensorModule,
+        ButtonModule,
+        TextBoxModule], exports: [NavigationModule,
+        ResizeSensorModule,
+        ButtonModule,
+        TextBoxModule] });
+AdaptiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AdaptiveModule, imports: [[...ADAPTIVE_MODULES], NavigationModule,
+        ResizeSensorModule,
+        ButtonModule,
+        TextBoxModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AdaptiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...ADAPTIVE_MODULES],
+                    exports: [...ADAPTIVE_MODULES]
+                }]
+        }] });
+
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the DatePicker component.
@@ -16179,7 +17372,8 @@ DatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         PopupModule,
         TemplatesModule,
         EventsModule,
-        IconsModule], exports: [DatePickerComponent,
+        IconsModule,
+        AdaptiveModule], exports: [DatePickerComponent,
         DatePickerCustomMessagesComponent,
         DatePickerLocalizedMessagesDirective,
         TemplatesModule] });
@@ -16191,7 +17385,8 @@ DatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
             PopupModule,
             TemplatesModule,
             EventsModule,
-            IconsModule
+            IconsModule,
+            AdaptiveModule
         ], TemplatesModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DatePickerModule, decorators: [{
             type: NgModule,
@@ -16215,25 +17410,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         PopupModule,
                         TemplatesModule,
                         EventsModule,
-                        IconsModule
+                        IconsModule,
+                        AdaptiveModule
                     ],
                     providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }]
                 }]
         }] });
 
+/**
+ * Custom component messages override default component messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ */
+class DateRangePopupCustomMessagesComponent extends DateRangePopupMessages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+DateRangePopupCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DateRangePopupCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateRangePopupCustomMessagesComponent, selector: "kendo-daterange-popup-messages", providers: [
+        {
+            provide: DateRangePopupMessages,
+            useExisting: forwardRef(() => DateRangePopupCustomMessagesComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupCustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: DateRangePopupMessages,
+                            useExisting: forwardRef(() => DateRangePopupCustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-daterange-popup-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+
 const COMPONENT_DIRECTIVES$2 = [
     DateRangeComponent,
     DateRangePopupComponent,
     DateRangePopupTemplateDirective,
     DateRangeSelectionDirective,
     DateRangeStartInputDirective,
-    DateRangeEndInputDirective
+    DateRangeEndInputDirective,
+    DateRangePopupCustomMessagesComponent,
+    DateRangePopupLocalizedMessagesDirective
 ];
 const COMPONENT_MODULES$2 = [
     MultiViewCalendarModule,
     DateInputModule,
     PopupModule,
-    EventsModule
+    EventsModule,
+    AdaptiveModule
 ];
 /**
  * The exported package module.
@@ -16281,15 +17513,20 @@ DateRangeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         DateRangePopupTemplateDirective,
         DateRangeSelectionDirective,
         DateRangeStartInputDirective,
-        DateRangeEndInputDirective], imports: [CommonModule, MultiViewCalendarModule,
+        DateRangeEndInputDirective,
+        DateRangePopupCustomMessagesComponent,
+        DateRangePopupLocalizedMessagesDirective], imports: [CommonModule, MultiViewCalendarModule,
         DateInputModule,
         PopupModule,
-        EventsModule], exports: [DateRangeComponent,
+        EventsModule,
+        AdaptiveModule], exports: [DateRangeComponent,
         DateRangePopupComponent,
         DateRangePopupTemplateDirective,
         DateRangeSelectionDirective,
         DateRangeStartInputDirective,
-        DateRangeEndInputDirective] });
+        DateRangeEndInputDirective,
+        DateRangePopupCustomMessagesComponent,
+        DateRangePopupLocalizedMessagesDirective] });
 DateRangeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangeModule, imports: [[CommonModule, COMPONENT_MODULES$2]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangeModule, decorators: [{
             type: NgModule,
@@ -16348,7 +17585,8 @@ const COMPONENT_MODULES$1 = [
     PopupModule,
     VirtualizationModule,
     EventsModule,
-    IconsModule
+    IconsModule,
+    AdaptiveModule
 ];
 const providers = [
     TimePickerDOMService,
@@ -16380,7 +17618,8 @@ TimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         PopupModule,
         VirtualizationModule,
         EventsModule,
-        IconsModule], exports: [TimePickerLocalizedMessagesDirective,
+        IconsModule,
+        AdaptiveModule], exports: [TimePickerLocalizedMessagesDirective,
         TimeListComponent,
         TimePickerCustomMessagesComponent,
         TimePickerComponent,
@@ -16453,7 +17692,8 @@ DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         PopupModule,
         EventsModule,
         TemplatesModule,
-        IconsModule], exports: [DateTimePickerComponent,
+        IconsModule,
+        AdaptiveModule], exports: [DateTimePickerComponent,
         DateTimePickerCustomMessagesComponent,
         LocalizedMessagesDirective, TemplatesModule] });
 DateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimePickerModule, providers: [
@@ -16467,7 +17707,8 @@ DateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
             PopupModule,
             EventsModule,
             TemplatesModule,
-            IconsModule
+            IconsModule,
+            AdaptiveModule
         ], TemplatesModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimePickerModule, decorators: [{
             type: NgModule,
@@ -16488,7 +17729,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         PopupModule,
                         EventsModule,
                         TemplatesModule,
-                        IconsModule
+                        IconsModule,
+                        AdaptiveModule
                     ],
                     providers: [
                         { provide: TOUCH_ENABLED, useValue: touchEnabled }
@@ -16567,5 +17809,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CalendarCommonModule, CalendarComponent, CalendarCustomMessagesComponent, CalendarLocalizedMessagesDirective, CalendarModule, CalendarsModule, CellTemplateDirective, CenturyCellTemplateDirective, DateInputComponent, DateInputCustomMessagesComponent, DateInputLocalizedMessagesDirective, DateInputModule, DateInputsModule, DatePickerComponent, DatePickerCustomMessagesComponent, DatePickerLocalizedMessagesDirective, DatePickerModule, DateRangeComponent, DateRangeEndInputDirective, DateRangeModule, DateRangePopupComponent, DateRangePopupTemplateDirective, DateRangeSelectionDirective, DateRangeService, DateRangeStartInputDirective, DateTimePickerComponent, DateTimePickerCustomMessagesComponent, DateTimePickerModule, DecadeCellTemplateDirective, HeaderComponent, HeaderTitleTemplateDirective, HorizontalViewListComponent, KForOf, LocalizedMessagesDirective, MonthCellTemplateDirective, MultiViewCalendarComponent, MultiViewCalendarCustomMessagesComponent, MultiViewCalendarLocalizedMessagesDirective, MultiViewCalendarModule, NavigationComponent, NavigationItemTemplateDirective, PreventableEvent, TemplatesModule, TimeListComponent, TimePickerComponent, TimePickerCustomMessagesComponent, TimePickerLocalizedMessagesDirective, TimePickerModule, TimeSelectorComponent, TimeSelectorCustomMessagesComponent, TimeSelectorLocalizedMessagesDirective, ViewComponent, ViewListComponent, WeekNumberCellTemplateDirective, YearCellTemplateDirective };
+export { AdaptiveModule, CalendarCommonModule, CalendarComponent, CalendarCustomMessagesComponent, CalendarLocalizedMessagesDirective, CalendarModule, CalendarsModule, CellTemplateDirective, CenturyCellTemplateDirective, DateInputComponent, DateInputCustomMessagesComponent, DateInputLocalizedMessagesDirective, DateInputModule, DateInputsModule, DatePickerComponent, DatePickerCustomMessagesComponent, DatePickerLocalizedMessagesDirective, DatePickerModule, DateRangeComponent, DateRangeEndInputDirective, DateRangeModule, DateRangePopupComponent, DateRangePopupCustomMessagesComponent, DateRangePopupLocalizedMessagesDirective, DateRangePopupTemplateDirective, DateRangeSelectionDirective, DateRangeService, DateRangeStartInputDirective, DateTimePickerComponent, DateTimePickerCustomMessagesComponent, DateTimePickerModule, DecadeCellTemplateDirective, HeaderComponent, HeaderTitleTemplateDirective, HorizontalViewListComponent, KForOf, LocalizedMessagesDirective, MonthCellTemplateDirective, MultiViewCalendarComponent, MultiViewCalendarCustomMessagesComponent, MultiViewCalendarLocalizedMessagesDirective, MultiViewCalendarModule, NavigationComponent, NavigationItemTemplateDirective, PreventableEvent, TemplatesModule, TimeListComponent, TimePickerComponent, TimePickerCustomMessagesComponent, TimePickerLocalizedMessagesDirective, TimePickerModule, TimeSelectorComponent, TimeSelectorCustomMessagesComponent, TimeSelectorLocalizedMessagesDirective, ViewComponent, ViewListComponent, WeekNumberCellTemplateDirective, YearCellTemplateDirective };