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

package/esm2020/datepicker/datepicker.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, TemplateRef, EventEmitter, HostBinding, Renderer2, Input, Output, ContentChild, ViewChild, ViewContainerRef, NgZone, Inject, Optional, forwardRef, isDevMode, Injector } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, TemplateRef, EventEmitter, HostBinding, Renderer2, Input, Output, ContentChild, ViewChild, ViewContainerRef, NgZone, Inject, Optional, forwardRef, isDevMode, Injector, } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService } from '@progress/kendo-angular-popup';
@@ -25,13 +25,14 @@ import { HeaderTitleTemplateDirective } from '../calendar/templates/header-title
 import { NavigationItemTemplateDirective } from '../calendar/templates/navigation-item-template.directive';
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
-import { noop, isValidRange, setTime, isWindowAvailable, isTabExitingCalendar, getSizeClass, getRoundedClass, getFillModeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
+import { noop, isValidRange, setTime, isWindowAvailable, isTabExitingCalendar, getSizeClass, getRoundedClass, getFillModeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE, windowSize } from '../util';
 import { TOUCH_ENABLED } from '../touch-enabled';
 import { requiresZoneOnBlur, currentFocusTarget, attributeNames } from '../common/utils';
 import { fromEvent } from 'rxjs';
 import { incompleteDateValidator } from '../validators/incomplete-date.validator';
 import { disabledDatesValidator } from '../validators/disabled-date.validator';
-import { calendarIcon } from '@progress/kendo-svg-icons';
+import { calendarIcon, xIcon } from '@progress/kendo-svg-icons';
+import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-popup";
@@ -39,10 +40,13 @@ import * as i3 from "../common/picker.service";
 import * as i4 from "../calendar/services/disabled-dates.service";
 import * as i5 from "../dateinput/dateinput.component";
 import * as i6 from "@progress/kendo-angular-icons";
-import * as i7 from "../calendar/calendar.component";
-import * as i8 from "../calendar/localization/calendar-custom-messages.component";
-import * as i9 from "./localization/datepicker-localized-messages.directive";
-import * as i10 from "@progress/kendo-angular-common";
+import * as i7 from "@progress/kendo-angular-common";
+import * as i8 from "@progress/kendo-angular-navigation";
+import * as i9 from "@progress/kendo-angular-buttons";
+import * as i10 from "../calendar/calendar.component";
+import * as i11 from "../calendar/localization/calendar-custom-messages.component";
+import * as i12 from "./localization/datepicker-localized-messages.directive";
+import * as i13 from "@angular/common";
 const MIN_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-min';
 const MAX_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-max';
 const VALUE_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/#toc-using-with-json';
@@ -121,12 +125,7 @@ export 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 %})).
@@ -186,7 +185,8 @@ export 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 = "";
         /**
@@ -204,6 +204,10 @@ export 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)).
@@ -269,6 +273,10 @@ export class DatePickerComponent {
          * @hidden
          */
         this.wrapperClasses = true;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         this._popupSettings = { animate: true };
         this._show = false;
         this._value = null;
@@ -353,6 +361,21 @@ export 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.
      *
@@ -386,6 +409,16 @@ export 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.
      *
@@ -489,14 +522,24 @@ export 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);
         }
     }
     /**
@@ -523,6 +566,7 @@ export class DatePickerComponent {
     }
     ngAfterViewInit() {
         this.setComponentClasses();
+        this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
     }
     /**
      * @hidden
@@ -553,7 +597,7 @@ export 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;
@@ -601,6 +645,19 @@ export 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.
      *
@@ -626,7 +683,8 @@ export 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.
@@ -636,7 +694,7 @@ export class DatePickerComponent {
             return;
         }
         this.resolvedPromise.then(() => {
-            this._toggle((show === undefined) ? !this.show : show);
+            this.toggleCalendar((show === undefined) ? !this.show : show);
         });
     }
     /**
@@ -654,6 +712,15 @@ export class DatePickerComponent {
         this.show = !this.show;
         this.cdr.markForCheck();
     }
+    /**
+     * @hidden
+     */
+    handleDateInputClick() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.show = true;
+        }
+    }
     /**
      * @hidden
      */
@@ -703,6 +770,34 @@ export 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
      */
@@ -730,21 +825,17 @@ export 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;
         }
@@ -762,16 +853,7 @@ export 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);
@@ -780,11 +862,53 @@ export 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;
@@ -845,15 +969,17 @@ export 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)) {
@@ -899,7 +1025,7 @@ export class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.PickerService }, { token: i4.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) },
@@ -910,7 +1036,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"
@@ -949,6 +1075,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             size="none"
             [value]="value"
             (valueChange)="handleInputChange($event)"
+            (click)="handleDateInputClick()"
         ></kendo-dateinput>
         <button
             #toggleButton
@@ -970,10 +1097,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"
@@ -1007,8 +1178,8 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 >
                 </kendo-calendar-messages>
             </kendo-calendar>
-        <ng-template>
-    `, isInline: true, components: [{ type: i5.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: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i7.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: i8.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i9.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        </ng-template>
+    `, isInline: true, components: [{ type: i5.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: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i8.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i9.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: i10.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: i11.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i12.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.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: [{
@@ -1066,6 +1237,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
@@ -1087,10 +1259,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"
@@ -1124,7 +1340,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.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i3.PickerService }, { type: i4.DisabledDatesService }, { type: undefined, decorators: [{
@@ -1141,6 +1357,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: [{
@@ -1237,6 +1456,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], title: [{
                 type: Input
+            }], subtitle: [{
+                type: Input
             }], rangeValidation: [{
                 type: Input
             }], disabledDatesValidation: [{
@@ -1249,6 +1470,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], fillMode: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], onFocus: [{

package/esm2020/datepicker/datepicker.module.mjs

@@ -16,6 +16,7 @@ import { DatePickerCustomMessagesComponent } from './localization/datepicker-cus
 import { touchEnabled } from '@progress/kendo-common';
 import { TOUCH_ENABLED } from '../touch-enabled';
 import { IconsModule } from '@progress/kendo-angular-icons';
+import { AdaptiveModule } from '../common/adaptive.module';
 import * as i0 from "@angular/core";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -33,7 +34,8 @@ DatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         PopupModule,
         TemplatesModule,
         EventsModule,
-        IconsModule], exports: [DatePickerComponent,
+        IconsModule,
+        AdaptiveModule], exports: [DatePickerComponent,
         DatePickerCustomMessagesComponent,
         DatePickerLocalizedMessagesDirective,
         TemplatesModule] });
@@ -45,7 +47,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,
@@ -69,7 +72,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         PopupModule,
                         TemplatesModule,
                         EventsModule,
-                        IconsModule
+                        IconsModule,
+                        AdaptiveModule
                     ],
                     providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }]
                 }]