@progress/kendo-angular-dateinputs 19.0.0-develop.7 → 19.0.0-develop.8

package/datepicker/datepicker.component.d.ts

@@ -34,7 +34,7 @@ import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
 import { HeaderTemplateDirective } from '../calendar/templates/header-template.directive';
 import { FooterTemplateDirective } from '../calendar/templates/footer-template.directive';
 import { WeekDaysFormat } from '../common/models/week-days-format';
-import { AdaptiveService } from '@progress/kendo-angular-utils';
+import { AdaptiveSize, AdaptiveService } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI DatePicker component for Angular](slug:overview_datepicker).
@@ -404,14 +404,12 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
      * 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).
      */
-    title: string;
+    adaptiveTitle: string;
     /**
      * 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: string);
-    get subtitle(): string;
-    private _subtitle;
+    adaptiveSubtitle: string;
     /**
      * Determines whether the built-in min or max validators are enforced when validating a form.
      *
@@ -519,6 +517,10 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
      * @hidden
      */
     checkIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    windowSize: AdaptiveSize;
     /**
      * @hidden
      */
@@ -546,7 +548,6 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
     private _size;
     private _rounded;
     private _fillMode;
-    private windowSize;
     constructor(zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, popupService: PopupService, wrapper: ElementRef, renderer: Renderer2, injector: Injector, pickerService: PickerService, disabledDatesService: DisabledDatesService, adaptiveService: AdaptiveService);
     /**
      * @hidden
@@ -685,7 +686,6 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
     private toggleCalendar;
     private togglePopup;
     private toggleActionSheet;
-    private updateActionSheetAdaptiveAppearance;
     private setAriaActiveDescendant;
     private focusInput;
     private toggleFocus;
@@ -700,5 +700,5 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
     private handleDateCompletenessChange;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent, "kendo-datepicker", ["kendo-datepicker"], { "focusableId": { "alias": "focusableId"; "required": false; }; "cellTemplateRef": { "alias": "cellTemplate"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; "monthCellTemplateRef": { "alias": "monthCellTemplate"; "required": false; }; "yearCellTemplateRef": { "alias": "yearCellTemplate"; "required": false; }; "decadeCellTemplateRef": { "alias": "decadeCellTemplate"; "required": false; }; "centuryCellTemplateRef": { "alias": "centuryCellTemplate"; "required": false; }; "weekNumberTemplateRef": { "alias": "weekNumberTemplate"; "required": false; }; "headerTitleTemplateRef": { "alias": "headerTitleTemplate"; "required": false; }; "headerTemplateRef": { "alias": "headerTemplate"; "required": false; }; "footerTemplateRef": { "alias": "footerTemplate"; "required": false; }; "footer": { "alias": "footer"; "required": false; }; "navigationItemTemplateRef": { "alias": "navigationItemTemplate"; "required": false; }; "weekDaysFormat": { "alias": "weekDaysFormat"; "required": false; }; "showOtherMonthDays": { "alias": "showOtherMonthDays"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "bottomView": { "alias": "bottomView"; "required": false; }; "topView": { "alias": "topView"; "required": false; }; "calendarType": { "alias": "calendarType"; "required": false; }; "animateCalendarNavigation": { "alias": "animateCalendarNavigation"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "readOnlyInput": { "alias": "readOnlyInput"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "navigation": { "alias": "navigation"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "incompleteDateValidation": { "alias": "incompleteDateValidation"; "required": false; }; "autoCorrectParts": { "alias": "autoCorrectParts"; "required": false; }; "autoSwitchParts": { "alias": "autoSwitchParts"; "required": false; }; "autoSwitchKeys": { "alias": "autoSwitchKeys"; "required": false; }; "enableMouseWheel": { "alias": "enableMouseWheel"; "required": false; }; "allowCaretMode": { "alias": "allowCaretMode"; "required": false; }; "autoFill": { "alias": "autoFill"; "required": false; }; "focusedDate": { "alias": "focusedDate"; "required": false; }; "value": { "alias": "value"; "required": false; }; "format": { "alias": "format"; "required": false; }; "twoDigitYearMax": { "alias": "twoDigitYearMax"; "required": false; }; "formatPlaceholder": { "alias": "formatPlaceholder"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "rangeValidation": { "alias": "rangeValidation"; "required": false; }; "disabledDatesValidation": { "alias": "disabledDatesValidation"; "required": false; }; "weekNumber": { "alias": "weekNumber"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; "escape": "escape"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent, "kendo-datepicker", ["kendo-datepicker"], { "focusableId": { "alias": "focusableId"; "required": false; }; "cellTemplateRef": { "alias": "cellTemplate"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; "monthCellTemplateRef": { "alias": "monthCellTemplate"; "required": false; }; "yearCellTemplateRef": { "alias": "yearCellTemplate"; "required": false; }; "decadeCellTemplateRef": { "alias": "decadeCellTemplate"; "required": false; }; "centuryCellTemplateRef": { "alias": "centuryCellTemplate"; "required": false; }; "weekNumberTemplateRef": { "alias": "weekNumberTemplate"; "required": false; }; "headerTitleTemplateRef": { "alias": "headerTitleTemplate"; "required": false; }; "headerTemplateRef": { "alias": "headerTemplate"; "required": false; }; "footerTemplateRef": { "alias": "footerTemplate"; "required": false; }; "footer": { "alias": "footer"; "required": false; }; "navigationItemTemplateRef": { "alias": "navigationItemTemplate"; "required": false; }; "weekDaysFormat": { "alias": "weekDaysFormat"; "required": false; }; "showOtherMonthDays": { "alias": "showOtherMonthDays"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "bottomView": { "alias": "bottomView"; "required": false; }; "topView": { "alias": "topView"; "required": false; }; "calendarType": { "alias": "calendarType"; "required": false; }; "animateCalendarNavigation": { "alias": "animateCalendarNavigation"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "readOnlyInput": { "alias": "readOnlyInput"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "navigation": { "alias": "navigation"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "incompleteDateValidation": { "alias": "incompleteDateValidation"; "required": false; }; "autoCorrectParts": { "alias": "autoCorrectParts"; "required": false; }; "autoSwitchParts": { "alias": "autoSwitchParts"; "required": false; }; "autoSwitchKeys": { "alias": "autoSwitchKeys"; "required": false; }; "enableMouseWheel": { "alias": "enableMouseWheel"; "required": false; }; "allowCaretMode": { "alias": "allowCaretMode"; "required": false; }; "autoFill": { "alias": "autoFill"; "required": false; }; "focusedDate": { "alias": "focusedDate"; "required": false; }; "value": { "alias": "value"; "required": false; }; "format": { "alias": "format"; "required": false; }; "twoDigitYearMax": { "alias": "twoDigitYearMax"; "required": false; }; "formatPlaceholder": { "alias": "formatPlaceholder"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; "adaptiveSubtitle": { "alias": "adaptiveSubtitle"; "required": false; }; "rangeValidation": { "alias": "rangeValidation"; "required": false; }; "disabledDatesValidation": { "alias": "disabledDatesValidation"; "required": false; }; "weekNumber": { "alias": "weekNumber"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; "escape": "escape"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate"], never, true, never>;
 }

package/datepicker/localization/messages.d.ts

@@ -32,6 +32,10 @@ export declare class DatePickerMessages extends ComponentMessages {
      * The title of the **Clear** button of the DatePicker.
      */
     clearTitle: string;
+    /**
+     * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
+     */
+    adaptiveCloseButtonTitle: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerMessages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DatePickerMessages, "kendo-datepicker-messages-base", never, { "today": { "alias": "today"; "required": false; }; "toggle": { "alias": "toggle"; "required": false; }; "prevButtonTitle": { "alias": "prevButtonTitle"; "required": false; }; "nextButtonTitle": { "alias": "nextButtonTitle"; "required": false; }; "parentViewButtonTitle": { "alias": "parentViewButtonTitle"; "required": false; }; "clearTitle": { "alias": "clearTitle"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DatePickerMessages, "kendo-datepicker-messages-base", never, { "today": { "alias": "today"; "required": false; }; "toggle": { "alias": "toggle"; "required": false; }; "prevButtonTitle": { "alias": "prevButtonTitle"; "required": false; }; "nextButtonTitle": { "alias": "nextButtonTitle"; "required": false; }; "parentViewButtonTitle": { "alias": "parentViewButtonTitle"; "required": false; }; "clearTitle": { "alias": "clearTitle"; "required": false; }; "adaptiveCloseButtonTitle": { "alias": "adaptiveCloseButtonTitle"; "required": false; }; }, {}, never, never, false, never>;
 }

package/daterange/date-range-popup.component.d.ts

@@ -9,7 +9,7 @@ import { DateRangePopupTemplateDirective } from './date-range-popup-template.dir
 import { DateRangeService } from './date-range.service';
 import { MultiViewCalendarComponent } from '../calendar/multiview-calendar.component';
 import { PreventableEvent } from '../preventable-event';
-import { AdaptiveService } from '@progress/kendo-angular-utils';
+import { AdaptiveSize, AdaptiveService } from '@progress/kendo-angular-utils';
 import { AdaptiveMode } from '../util';
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import { DateRangeSelectionDirective } from './date-range-selection.directive';
@@ -191,14 +191,12 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
      * 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).
      */
-    title: string;
+    adaptiveTitle: string;
     /**
      * 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: string);
-    get subtitle(): string;
-    private _subtitle;
+    adaptiveSubtitle: string;
     /**
      * @hidden
      *
@@ -272,11 +270,19 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
      * @hidden
      */
     checkIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    windowSize: AdaptiveSize;
     /**
      * Gets or sets the visibility state of the component.
      */
     set show(show: boolean);
     get show(): boolean;
+    /**
+     * @hidden
+     */
+    handleAccept(): void;
     private activateSubscription;
     private blurSubscription;
     private focusSubscription;
@@ -288,7 +294,6 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     private _calendar;
     private _show;
     private _rangeSelection;
-    private windowSize;
     constructor(popupService: PopupService, dateRangeService: DateRangeService, zone: NgZone, renderer: Renderer2, localization: LocalizationService, cdr: ChangeDetectorRef, rtl: boolean, adaptiveService: AdaptiveService);
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -326,10 +331,6 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
      * Closes the popup and triggers the `cancel` event.
      */
     cancelPopup(): void;
-    /**
-     * @hidden
-     */
-    handleAccept(): void;
     /**
      * @hidden
      */
@@ -356,8 +357,7 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     private destroyPopup;
     private toggleDateRange;
     private toggleActionSheet;
-    private updateActionSheetAdaptiveAppearance;
     private addCalendarSubscription;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePopupComponent, [null, null, null, null, null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePopupComponent, "kendo-daterange-popup", ["kendo-daterange-popup"], { "showCalendarHeader": { "alias": "showCalendarHeader"; "required": false; }; "focusedDate": { "alias": "focusedDate"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "bottomView": { "alias": "bottomView"; "required": false; }; "topView": { "alias": "topView"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "allowReverse": { "alias": "allowReverse"; "required": false; }; "animateNavigation": { "alias": "animateNavigation"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "views": { "alias": "views"; "required": false; }; "weekNumber": { "alias": "weekNumber"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "anchor": { "alias": "anchor"; "required": false; }; "anchorAlign": { "alias": "anchorAlign"; "required": false; }; "showViewHeader": { "alias": "showViewHeader"; "required": false; }; "showOtherMonthDays": { "alias": "showOtherMonthDays"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "collision": { "alias": "collision"; "required": false; }; "popupAlign": { "alias": "popupAlign"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "open": "open"; "close": "close"; "onBlur": "blur"; "onFocus": "focus"; "cancel": "cancel"; }, ["contentTemplate", "contentCalendar"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePopupComponent, "kendo-daterange-popup", ["kendo-daterange-popup"], { "showCalendarHeader": { "alias": "showCalendarHeader"; "required": false; }; "focusedDate": { "alias": "focusedDate"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "bottomView": { "alias": "bottomView"; "required": false; }; "topView": { "alias": "topView"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "allowReverse": { "alias": "allowReverse"; "required": false; }; "animateNavigation": { "alias": "animateNavigation"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "views": { "alias": "views"; "required": false; }; "weekNumber": { "alias": "weekNumber"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "anchor": { "alias": "anchor"; "required": false; }; "anchorAlign": { "alias": "anchorAlign"; "required": false; }; "showViewHeader": { "alias": "showViewHeader"; "required": false; }; "showOtherMonthDays": { "alias": "showOtherMonthDays"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "collision": { "alias": "collision"; "required": false; }; "popupAlign": { "alias": "popupAlign"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; "adaptiveSubtitle": { "alias": "adaptiveSubtitle"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "open": "open"; "close": "close"; "onBlur": "blur"; "onFocus": "focus"; "cancel": "cancel"; }, ["contentTemplate", "contentCalendar"], never, true, never>;
 }

package/daterange/localization/messages.d.ts

@@ -24,6 +24,10 @@ export declare class DateRangePopupMessages extends ComponentMessages {
      * The label of the **Cancel** button in the popup footer of the DateRange Popup.
      */
     cancelLabel: string;
+    /**
+     * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
+     */
+    adaptiveCloseButtonTitle: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePopupMessages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DateRangePopupMessages, "kendo-daterangepopup-messages-base", never, { "accept": { "alias": "accept"; "required": false; }; "acceptLabel": { "alias": "acceptLabel"; "required": false; }; "cancel": { "alias": "cancel"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DateRangePopupMessages, "kendo-daterangepopup-messages-base", never, { "accept": { "alias": "accept"; "required": false; }; "acceptLabel": { "alias": "acceptLabel"; "required": false; }; "cancel": { "alias": "cancel"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "adaptiveCloseButtonTitle": { "alias": "adaptiveCloseButtonTitle"; "required": false; }; }, {}, never, never, false, never>;
 }

package/datetimepicker/datetimepicker.component.d.ts

@@ -8,7 +8,7 @@ import { Day } from '@progress/kendo-date-math';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { MultiTabStop } from '@progress/kendo-angular-common';
-import { AdaptiveService } from '@progress/kendo-angular-utils';
+import { AdaptiveSize, AdaptiveService } from '@progress/kendo-angular-utils';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
@@ -155,14 +155,12 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
      * 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).
      */
-    title: string;
+    adaptiveTitle: string;
     /**
      * 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: string);
-    get subtitle(): string;
-    private _subtitle;
+    adaptiveSubtitle: string;
     /**
      * Sets or gets the `disabled` property of the DateTimePicker and determines whether the component is active
      * ([see example]({% slug disabled_datetimepicker %})).
@@ -467,6 +465,10 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
      * @hidden
      */
     checkIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    windowSize: AdaptiveSize;
     /**
      * @hidden
      */
@@ -557,7 +559,6 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
     private _size;
     private _rounded;
     private _fillMode;
-    private windowSize;
     constructor(popupService: PopupService, intl: IntlService, cdr: ChangeDetectorRef, pickerService: PickerService, ngZone: NgZone, wrapper: ElementRef<HTMLElement>, localization: LocalizationService, disabledDatesService: DisabledDatesService, renderer: Renderer2, injector: Injector, adaptiveService: AdaptiveService);
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -674,19 +675,17 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
      * @hidden
      */
     handleActionSheetCollapse(): void;
-    /**
-     * @hidden
-     */
-    popupButtonsClasses(type?: string): any;
     /**
      * @hidden
      *
      * Prevents the diversion of the focus from the currently active element in the component.
      */
     preventMouseDown(event: MouseEvent): void;
+    /**
+     * @hidden
+     */
+    toggleActionSheet(show: boolean): void;
     private _togglePopup;
-    private toggleActionSheet;
-    private updateActionSheetAdaptiveAppearance;
     /**
      * Changes the tab and the calendar or clock icon to the designated default.
      */
@@ -739,5 +738,5 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
     private handleDateCompletenessChange;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "kendo-datetimepicker", ["kendo-datetimepicker"], { "focusableId": { "alias": "focusableId"; "required": false; }; "weekDaysFormat": { "alias": "weekDaysFormat"; "required": false; }; "showOtherMonthDays": { "alias": "showOtherMonthDays"; "required": false; }; "value": { "alias": "value"; "required": false; }; "format": { "alias": "format"; "required": false; }; "twoDigitYearMax": { "alias": "twoDigitYearMax"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "readOnlyInput": { "alias": "readOnlyInput"; "required": false; }; "cancelButton": { "alias": "cancelButton"; "required": false; }; "formatPlaceholder": { "alias": "formatPlaceholder"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "steps": { "alias": "steps"; "required": false; }; "focusedDate": { "alias": "focusedDate"; "required": false; }; "calendarType": { "alias": "calendarType"; "required": false; }; "animateCalendarNavigation": { "alias": "animateCalendarNavigation"; "required": false; }; "weekNumber": { "alias": "weekNumber"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "rangeValidation": { "alias": "rangeValidation"; "required": false; }; "disabledDatesValidation": { "alias": "disabledDatesValidation"; "required": false; }; "incompleteDateValidation": { "alias": "incompleteDateValidation"; "required": false; }; "autoCorrectParts": { "alias": "autoCorrectParts"; "required": false; }; "autoSwitchParts": { "alias": "autoSwitchParts"; "required": false; }; "autoSwitchKeys": { "alias": "autoSwitchKeys"; "required": false; }; "enableMouseWheel": { "alias": "enableMouseWheel"; "required": false; }; "allowCaretMode": { "alias": "allowCaretMode"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "autoFill": { "alias": "autoFill"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; "defaultTab": { "alias": "defaultTab"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "headerTemplateRef": { "alias": "headerTemplate"; "required": false; }; "footerTemplateRef": { "alias": "footerTemplate"; "required": false; }; "footer": { "alias": "footer"; "required": false; }; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "escape": "escape"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "kendo-datetimepicker", ["kendo-datetimepicker"], { "focusableId": { "alias": "focusableId"; "required": false; }; "weekDaysFormat": { "alias": "weekDaysFormat"; "required": false; }; "showOtherMonthDays": { "alias": "showOtherMonthDays"; "required": false; }; "value": { "alias": "value"; "required": false; }; "format": { "alias": "format"; "required": false; }; "twoDigitYearMax": { "alias": "twoDigitYearMax"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; "adaptiveSubtitle": { "alias": "adaptiveSubtitle"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "readOnlyInput": { "alias": "readOnlyInput"; "required": false; }; "cancelButton": { "alias": "cancelButton"; "required": false; }; "formatPlaceholder": { "alias": "formatPlaceholder"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "steps": { "alias": "steps"; "required": false; }; "focusedDate": { "alias": "focusedDate"; "required": false; }; "calendarType": { "alias": "calendarType"; "required": false; }; "animateCalendarNavigation": { "alias": "animateCalendarNavigation"; "required": false; }; "weekNumber": { "alias": "weekNumber"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "rangeValidation": { "alias": "rangeValidation"; "required": false; }; "disabledDatesValidation": { "alias": "disabledDatesValidation"; "required": false; }; "incompleteDateValidation": { "alias": "incompleteDateValidation"; "required": false; }; "autoCorrectParts": { "alias": "autoCorrectParts"; "required": false; }; "autoSwitchParts": { "alias": "autoSwitchParts"; "required": false; }; "autoSwitchKeys": { "alias": "autoSwitchKeys"; "required": false; }; "enableMouseWheel": { "alias": "enableMouseWheel"; "required": false; }; "allowCaretMode": { "alias": "allowCaretMode"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "autoFill": { "alias": "autoFill"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; "defaultTab": { "alias": "defaultTab"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "headerTemplateRef": { "alias": "headerTemplate"; "required": false; }; "footerTemplateRef": { "alias": "footerTemplate"; "required": false; }; "footer": { "alias": "footer"; "required": false; }; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "escape": "escape"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate"], never, true, never>;
 }

package/datetimepicker/localization/messages.d.ts

@@ -92,6 +92,10 @@ export declare class DateTimePickerMessages extends ComponentMessages {
      * The title of the **Clear** button of the DateTimePicker.
      */
     clearTitle: string;
+    /**
+     * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
+     */
+    adaptiveCloseButtonTitle: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerMessages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DateTimePickerMessages, "kendo-datetimepicker-messages-base", never, { "toggle": { "alias": "toggle"; "required": false; }; "dateTab": { "alias": "dateTab"; "required": false; }; "dateTabLabel": { "alias": "dateTabLabel"; "required": false; }; "timeTab": { "alias": "timeTab"; "required": false; }; "timeTabLabel": { "alias": "timeTabLabel"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "acceptLabel": { "alias": "acceptLabel"; "required": false; }; "cancel": { "alias": "cancel"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "today": { "alias": "today"; "required": false; }; "now": { "alias": "now"; "required": false; }; "nowLabel": { "alias": "nowLabel"; "required": false; }; "prevButtonTitle": { "alias": "prevButtonTitle"; "required": false; }; "nextButtonTitle": { "alias": "nextButtonTitle"; "required": false; }; "parentViewButtonTitle": { "alias": "parentViewButtonTitle"; "required": false; }; "hour": { "alias": "hour"; "required": false; }; "minute": { "alias": "minute"; "required": false; }; "second": { "alias": "second"; "required": false; }; "millisecond": { "alias": "millisecond"; "required": false; }; "dayperiod": { "alias": "dayperiod"; "required": false; }; "clearTitle": { "alias": "clearTitle"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DateTimePickerMessages, "kendo-datetimepicker-messages-base", never, { "toggle": { "alias": "toggle"; "required": false; }; "dateTab": { "alias": "dateTab"; "required": false; }; "dateTabLabel": { "alias": "dateTabLabel"; "required": false; }; "timeTab": { "alias": "timeTab"; "required": false; }; "timeTabLabel": { "alias": "timeTabLabel"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "acceptLabel": { "alias": "acceptLabel"; "required": false; }; "cancel": { "alias": "cancel"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "today": { "alias": "today"; "required": false; }; "now": { "alias": "now"; "required": false; }; "nowLabel": { "alias": "nowLabel"; "required": false; }; "prevButtonTitle": { "alias": "prevButtonTitle"; "required": false; }; "nextButtonTitle": { "alias": "nextButtonTitle"; "required": false; }; "parentViewButtonTitle": { "alias": "parentViewButtonTitle"; "required": false; }; "hour": { "alias": "hour"; "required": false; }; "minute": { "alias": "minute"; "required": false; }; "second": { "alias": "second"; "required": false; }; "millisecond": { "alias": "millisecond"; "required": false; }; "dayperiod": { "alias": "dayperiod"; "required": false; }; "clearTitle": { "alias": "clearTitle"; "required": false; }; "adaptiveCloseButtonTitle": { "alias": "adaptiveCloseButtonTitle"; "required": false; }; }, {}, never, never, false, never>;
 }

package/esm2022/datepicker/datepicker.component.mjs

@@ -7,7 +7,7 @@ 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';
 import { cloneDate } from '@progress/kendo-date-math';
-import { hasObservers, isControlRequired, isDocumentAvailable, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { MIN_DATE, MAX_DATE } from '../defaults';
@@ -466,18 +466,12 @@ export class DatePickerComponent extends MultiTabStop {
      * 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).
      */
-    title = "";
+    adaptiveTitle = "";
     /**
      * 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;
-    }
-    _subtitle;
+    adaptiveSubtitle = "";
     /**
      * Determines whether the built-in min or max validators are enforced when validating a form.
      *
@@ -661,6 +655,10 @@ export class DatePickerComponent extends MultiTabStop {
      * @hidden
      */
     checkIcon = checkIcon;
+    /**
+     * @hidden
+     */
+    windowSize;
     /**
      * @hidden
      */
@@ -690,7 +688,6 @@ export class DatePickerComponent extends MultiTabStop {
     _size = DEFAULT_SIZE;
     _rounded = DEFAULT_ROUNDED;
     _fillMode = DEFAULT_FILL_MODE;
-    windowSize;
     constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService, adaptiveService) {
         super();
         this.zone = zone;
@@ -737,11 +734,6 @@ export class DatePickerComponent extends MultiTabStop {
     ngAfterViewInit() {
         this.setComponentClasses();
         this.windowSize = this.adaptiveService.size;
-        if (this.actionSheet && isDocumentAvailable()) {
-            // The following syntax is used as it does not violate CSP compliance
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
     }
     /**
      * @hidden
@@ -1073,7 +1065,6 @@ export class DatePickerComponent extends MultiTabStop {
         }
         if (show && !this.isOpen) {
             this.actionSheet.toggle();
-            this.updateActionSheetAdaptiveAppearance();
             this.setAriaActiveDescendant();
             this.actionSheet.element.nativeElement.setAttribute('id', this.popupUID);
             this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaControls, this.popupUID);
@@ -1084,29 +1075,11 @@ export class DatePickerComponent extends MultiTabStop {
             if (this.dateInput) {
                 this.renderer.removeAttribute(this.dateInput.inputElement, attributeNames.ariaActiveDescendant);
                 this.renderer.removeAttribute(this.dateInput.inputElement, attributeNames.ariaControls);
+                this.dateInput.focus();
             }
         }
         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 :
@@ -1228,7 +1201,7 @@ export class DatePickerComponent extends MultiTabStop {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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: i5.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DatePickerComponent, isStandalone: true, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], clearButton: "clearButton", inputAttributes: "inputAttributes", monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer", navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", 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", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", 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", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DatePickerComponent, isStandalone: true, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], clearButton: "clearButton", inputAttributes: "inputAttributes", monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer", navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", 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", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", 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", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "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) },
@@ -1259,6 +1232,9 @@ export class DatePickerComponent extends MultiTabStop {
 
             i18n-clearTitle="kendo.datepicker.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-adaptiveCloseButtonTitle="kendo.datepicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container>
         <kendo-dateinput
@@ -1273,7 +1249,7 @@ export class DatePickerComponent extends MultiTabStop {
             [ariaReadOnly]="readonly"
             [tabindex]="tabindex"
             [isRequired]="isControlRequired"
-            [title]="title"
+            [title]="adaptiveTitle"
             [focusableId]="focusableId"
             [format]="format"
             [twoDigitYearMax]="twoDigitYearMax"
@@ -1339,26 +1315,35 @@ export class DatePickerComponent extends MultiTabStop {
             [scope]="this"
             (collapse)="handleActionSheetCollapse()"
             [titleId]="calendar?.headerId"
+            [cssClass]="{
+                'k-adaptive-actionsheet': true,
+                'k-actionsheet-fullscreen': windowSize === 'small',
+                'k-actionsheet-bottom': windowSize === 'medium'
+            }"
+            [cssStyle]="{
+                height: windowSize === 'small' ? '100vh' : '60vh'
+            }"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">
                     <div class="k-actionsheet-titlebar-group">
                         <div class="k-actionsheet-title">
-                            <div *ngIf="title" class="k-text-center">{{ title }}</div>
-                            <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                            <div class="k-text-center" *ngIf="adaptiveTitle">{{ adaptiveTitle }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center" *ngIf="adaptiveSubtitle">{{ adaptiveSubtitle }}</div>
                         </div>
                         <div class="k-actionsheet-actions">
                             <button
                                 kendoButton
                                 type="button"
                                 icon="check"
-                                [attr.title]="localization.get('clearTitle')"
+                                themeColor="primary"
+                                [attr.title]="localization.get('adaptiveCloseButtonTitle')"
                                 [svgIcon]="checkIcon"
                                 fillMode="flat"
                                 [tabIndex]="-1"
                                 aria-hidden="true"
                                 size="large"
-                                themeColor="primary"
+                                innerCssClass="k-button-icon"
                                 (click)="show = false">
                             </button>
                         </div>
@@ -1414,7 +1399,7 @@ export class DatePickerComponent extends MultiTabStop {
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -1454,6 +1439,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-clearTitle="kendo.datepicker.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-adaptiveCloseButtonTitle="kendo.datepicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container>
         <kendo-dateinput
@@ -1468,7 +1456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [ariaReadOnly]="readonly"
             [tabindex]="tabindex"
             [isRequired]="isControlRequired"
-            [title]="title"
+            [title]="adaptiveTitle"
             [focusableId]="focusableId"
             [format]="format"
             [twoDigitYearMax]="twoDigitYearMax"
@@ -1534,26 +1522,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [scope]="this"
             (collapse)="handleActionSheetCollapse()"
             [titleId]="calendar?.headerId"
+            [cssClass]="{
+                'k-adaptive-actionsheet': true,
+                'k-actionsheet-fullscreen': windowSize === 'small',
+                'k-actionsheet-bottom': windowSize === 'medium'
+            }"
+            [cssStyle]="{
+                height: windowSize === 'small' ? '100vh' : '60vh'
+            }"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">
                     <div class="k-actionsheet-titlebar-group">
                         <div class="k-actionsheet-title">
-                            <div *ngIf="title" class="k-text-center">{{ title }}</div>
-                            <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                            <div class="k-text-center" *ngIf="adaptiveTitle">{{ adaptiveTitle }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center" *ngIf="adaptiveSubtitle">{{ adaptiveSubtitle }}</div>
                         </div>
                         <div class="k-actionsheet-actions">
                             <button
                                 kendoButton
                                 type="button"
                                 icon="check"
-                                [attr.title]="localization.get('clearTitle')"
+                                themeColor="primary"
+                                [attr.title]="localization.get('adaptiveCloseButtonTitle')"
                                 [svgIcon]="checkIcon"
                                 fillMode="flat"
                                 [tabIndex]="-1"
                                 aria-hidden="true"
                                 size="large"
-                                themeColor="primary"
+                                innerCssClass="k-button-icon"
                                 (click)="show = false">
                             </button>
                         </div>
@@ -1756,9 +1753,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], disabledDates: [{
                 type: Input
-            }], title: [{
+            }], adaptiveTitle: [{
                 type: Input
-            }], subtitle: [{
+            }], adaptiveSubtitle: [{
                 type: Input
             }], rangeValidation: [{
                 type: Input

package/esm2022/datepicker/localization/messages.mjs

@@ -33,8 +33,12 @@ export class DatePickerMessages extends ComponentMessages {
      * The title of the **Clear** button of the DatePicker.
      */
     clearTitle;
+    /**
+     * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
+     */
+    adaptiveCloseButtonTitle;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DatePickerMessages, selector: "kendo-datepicker-messages-base", inputs: { today: "today", toggle: "toggle", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", clearTitle: "clearTitle" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DatePickerMessages, selector: "kendo-datepicker-messages-base", inputs: { today: "today", toggle: "toggle", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", clearTitle: "clearTitle", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerMessages, decorators: [{
             type: Directive,
@@ -54,4 +58,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], clearTitle: [{
                 type: Input
+            }], adaptiveCloseButtonTitle: [{
+                type: Input
             }] } });

package/esm2022/daterange/date-range-input.mjs

@@ -76,8 +76,9 @@ export class DateRangeInput {
         [
             popup.cancel.subscribe(() => this.isActiveEnd && this.input.focus()),
             popup.onFocus.subscribe(() => this.toggleActiveClass(this.isActiveEnd)),
-            popup.onBlur.subscribe(() => this.deactivate())
-        ].map(s => this.popupSubscriptions.add(s));
+            popup.onBlur.subscribe(() => this.deactivate()),
+            popup.close?.subscribe(() => this.isActiveEnd && this.input.focus())
+        ].forEach(s => this.popupSubscriptions.add(s));
     }
     unsubscribePopup() {
         this.popupSubscriptions.unsubscribe();