@progress/kendo-angular-dateinputs 19.0.0-develop.3 → 19.0.0-develop.30

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/dateinput/dateinput.component.mjs

@@ -24,6 +24,7 @@ import { DateInput } from '@progress/kendo-dateinputs-common';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { NgIf } from '@angular/common';
 import { DateInputLocalizedMessagesDirective } from './localization/dateinput-localized-messages.directive';
+import { MAX_DATE, MIN_DATE } from '../defaults';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -271,13 +272,15 @@ export class DateInputComponent {
     /**
      * Specifies the biggest date that is valid
      * ([see example]({% slug dateranges_dateinput %})).
+     * By default, the `max` value is `2099-12-31`.
      */
-    max;
+    max = cloneDate(MAX_DATE);
     /**
      * Specifies the smallest date that is valid
      * ([see example]({% slug dateranges_dateinput %})).
+     * By default, the `min` value is `1900-1-1`.
      */
-    min;
+    min = cloneDate(MIN_DATE);
     /**
      * Determines whether the built-in min or max validators are to be enforced when a form is being validated.
      *

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();