@progress/kendo-angular-dateinputs 16.0.1-develop.1 → 16.1.0-develop.2

package/calendar/calendar.component.d.ts

@@ -137,7 +137,7 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
     footer: boolean;
     /**
      * Sets the Calendar selection mode
-     * ([see example]({% slug multiple_selection_calendar %})).
+     * ([see example]({% slug selection_calendar %})).
      *
      * The available values are:
      * * `single` (default)
@@ -157,10 +157,7 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
-     * > The `value` has to be a valid
-     * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
-     * instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
-     * an object of type `SelectionRange` when in `range` selection mode.
+     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or an object of type `SelectionRange` when in `range` selection mode.
      */
     set value(candidate: Date | Date[] | SelectionRange | null);
     get value(): Date | Date[] | SelectionRange | null;

package/calendar/multiview-calendar.component.d.ts

@@ -144,7 +144,7 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
     disabledDatesRangeValidation: boolean;
     /**
      * Sets the Calendar selection mode
-     * ([see example]({% slug multiple_selection_multiviewcalendar %})).
+     * ([see example]({% slug selection_multiviewcalendar %})).
      *
      * The available values are:
      * * `single` (default)
@@ -164,10 +164,9 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
-     * > The `value` has to be a valid
-     * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
-     * instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
-     * an object of type `SelectionRange` when in `range` selection mode.
+     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
+        instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
+        an object of type `SelectionRange` when in `range` selection mode.
      */
     set value(candidate: Date | Date[] | SelectionRange | null);
     get value(): Date | Date[] | SelectionRange | null;

package/datepicker/datepicker.component.d.ts

@@ -7,6 +7,7 @@ import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService, PopupRef } from '@progress/kendo-angular-popup';
 import { Day } from '@progress/kendo-date-math';
+import { MultiTabStop } from '@progress/kendo-angular-common';
 import { FormatSettings } from '../dateinput/models/format-settings.model';
 import { PopupSettings } from '../popup-settings.model';
 import { PreventableEvent } from '../preventable-event';
@@ -37,7 +38,7 @@ import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI DatePicker component for Angular]({% slug overview_datepicker %}#toc-basic-usage).
  */
-export declare class DatePickerComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnChanges, OnDestroy, Validator {
+export declare class DatePickerComponent extends MultiTabStop implements ControlValueAccessor, OnInit, AfterViewInit, OnChanges, OnDestroy, Validator {
     zone: NgZone;
     localization: LocalizationService;
     private cdr;
@@ -496,6 +497,10 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
      * This event is preventable. If you cancel the event, the popup will remain open.
      */
     close: EventEmitter<PreventableEvent>;
+    /**
+     * @hidden
+     */
+    escape: EventEmitter<any>;
     /**
      * @hidden
      */
@@ -695,5 +700,5 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
     private handleDateCompletenessChange;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerComponent, [null, null, null, null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent, "kendo-datepicker", ["kendo-datepicker"], { "focusableId": "focusableId"; "cellTemplateRef": "cellTemplate"; "clearButton": "clearButton"; "inputAttributes": "inputAttributes"; "monthCellTemplateRef": "monthCellTemplate"; "yearCellTemplateRef": "yearCellTemplate"; "decadeCellTemplateRef": "decadeCellTemplate"; "centuryCellTemplateRef": "centuryCellTemplate"; "weekNumberTemplateRef": "weekNumberTemplate"; "headerTitleTemplateRef": "headerTitleTemplate"; "headerTemplateRef": "headerTemplate"; "footerTemplateRef": "footerTemplate"; "footer": "footer"; "navigationItemTemplateRef": "navigationItemTemplate"; "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"; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent, "kendo-datepicker", ["kendo-datepicker"], { "focusableId": "focusableId"; "cellTemplateRef": "cellTemplate"; "clearButton": "clearButton"; "inputAttributes": "inputAttributes"; "monthCellTemplateRef": "monthCellTemplate"; "yearCellTemplateRef": "yearCellTemplate"; "decadeCellTemplateRef": "decadeCellTemplate"; "centuryCellTemplateRef": "centuryCellTemplate"; "weekNumberTemplateRef": "weekNumberTemplate"; "headerTitleTemplateRef": "headerTitleTemplate"; "headerTemplateRef": "headerTemplate"; "footerTemplateRef": "footerTemplate"; "footer": "footer"; "navigationItemTemplateRef": "navigationItemTemplate"; "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"; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; "escape": "escape"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate"], never, false, never>;
 }

package/daterange/date-range-selection.directive.d.ts

@@ -11,6 +11,8 @@ import { AutoCorrectOn } from './auto-correct-on.type';
 import * as i0 from "@angular/core";
 /**
  * A directive which manages the MultiViewCalendar range selection.
+ * This directive will be `deprecated` in a future version.
+ * We recommend using the MultiViewCalendar [range selection]({% slug selection_multiviewcalendar %}#toc-range-selection).
  */
 export declare class DateRangeSelectionDirective implements OnInit {
     private calendar;

package/datetimepicker/datetimepicker.component.d.ts

@@ -7,6 +7,7 @@ import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors, For
 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 { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
@@ -40,7 +41,7 @@ import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
-export declare class DateTimePickerComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy, ControlValueAccessor, Validator {
+export declare class DateTimePickerComponent extends MultiTabStop implements OnInit, OnChanges, AfterViewInit, OnDestroy, ControlValueAccessor, Validator {
     private popupService;
     private intl;
     private cdr;
@@ -343,6 +344,10 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * ([see example](slug:events_datetimepicker)).
      */
     onBlur: EventEmitter<any>;
+    /**
+     * @hidden
+     */
+    escape: EventEmitter<any>;
     /**
      * Indicates whether the component is currently open. That is when the popup or actionSheet is open.
      */
@@ -730,5 +735,5 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
     private handleDateCompletenessChange;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "kendo-datetimepicker", ["kendo-datetimepicker"], { "focusableId": "focusableId"; "weekDaysFormat": "weekDaysFormat"; "showOtherMonthDays": "showOtherMonthDays"; "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "tabindex": "tabindex"; "disabledDates": "disabledDates"; "popupSettings": "popupSettings"; "title": "title"; "subtitle": "subtitle"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "cancelButton": "cancelButton"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "focusedDate": "focusedDate"; "calendarType": "calendarType"; "animateCalendarNavigation": "animateCalendarNavigation"; "weekNumber": "weekNumber"; "min": "min"; "max": "max"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "incompleteDateValidation": "incompleteDateValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "enableMouseWheel": "enableMouseWheel"; "allowCaretMode": "allowCaretMode"; "clearButton": "clearButton"; "autoFill": "autoFill"; "adaptiveMode": "adaptiveMode"; "inputAttributes": "inputAttributes"; "defaultTab": "defaultTab"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "headerTemplateRef": "headerTemplate"; "footerTemplateRef": "footerTemplate"; "footer": "footer"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "kendo-datetimepicker", ["kendo-datetimepicker"], { "focusableId": "focusableId"; "weekDaysFormat": "weekDaysFormat"; "showOtherMonthDays": "showOtherMonthDays"; "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "tabindex": "tabindex"; "disabledDates": "disabledDates"; "popupSettings": "popupSettings"; "title": "title"; "subtitle": "subtitle"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "cancelButton": "cancelButton"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "focusedDate": "focusedDate"; "calendarType": "calendarType"; "animateCalendarNavigation": "animateCalendarNavigation"; "weekNumber": "weekNumber"; "min": "min"; "max": "max"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "incompleteDateValidation": "incompleteDateValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "enableMouseWheel": "enableMouseWheel"; "allowCaretMode": "allowCaretMode"; "clearButton": "clearButton"; "autoFill": "autoFill"; "adaptiveMode": "adaptiveMode"; "inputAttributes": "inputAttributes"; "defaultTab": "defaultTab"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "headerTemplateRef": "headerTemplate"; "footerTemplateRef": "footerTemplate"; "footer": "footer"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "escape": "escape"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate"], never, false, never>;
 }

package/esm2020/calendar/calendar.component.mjs

@@ -327,7 +327,7 @@ export class CalendarComponent {
     }
     /**
      * Sets the Calendar selection mode
-     * ([see example]({% slug multiple_selection_calendar %})).
+     * ([see example]({% slug selection_calendar %})).
      *
      * The available values are:
      * * `single` (default)
@@ -344,10 +344,7 @@ export class CalendarComponent {
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
-     * > The `value` has to be a valid
-     * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
-     * instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
-     * an object of type `SelectionRange` when in `range` selection mode.
+     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or an object of type `SelectionRange` when in `range` selection mode.
      */
     set value(candidate) {
         this.valueSetter = true;

package/esm2020/calendar/multiview-calendar.component.mjs

@@ -352,7 +352,7 @@ export class MultiViewCalendarComponent {
     }
     /**
      * Sets the Calendar selection mode
-     * ([see example]({% slug multiple_selection_multiviewcalendar %})).
+     * ([see example]({% slug selection_multiviewcalendar %})).
      *
      * The available values are:
      * * `single` (default)
@@ -369,10 +369,9 @@ export class MultiViewCalendarComponent {
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
-     * > The `value` has to be a valid
-     * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
-     * instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
-     * an object of type `SelectionRange` when in `range` selection mode.
+     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
+        instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
+        an object of type `SelectionRange` when in `range` selection mode.
      */
     set value(candidate) {
         this.valueSetter = true;

package/esm2020/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 } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, isDocumentAvailable, KendoInput, Keys, MultiTabStop } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { MIN_DATE, MAX_DATE } from '../defaults';
@@ -58,8 +58,9 @@ const TWO_DIGIT_YEAR_MAX = 68;
 /**
  * Represents the [Kendo UI DatePicker component for Angular]({% slug overview_datepicker %}#toc-basic-usage).
  */
-export class DatePickerComponent {
+export class DatePickerComponent extends MultiTabStop {
     constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService, touchEnabled) {
+        super();
         this.zone = zone;
         this.localization = localization;
         this.cdr = cdr;
@@ -294,6 +295,10 @@ export class DatePickerComponent {
          * This event is preventable. If you cancel the event, the popup will remain open.
          */
         this.close = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.escape = new EventEmitter();
         /**
          * @hidden
          */
@@ -861,6 +866,7 @@ export class DatePickerComponent {
         const { altKey, shiftKey, keyCode, target } = e;
         if (keyCode === Keys.Escape) {
             this.show = false;
+            hasObservers(this.escape) && this.escape.emit();
         }
         if (altKey) {
             if (keyCode === Keys.ArrowDown && !this.show) {
@@ -1079,10 +1085,11 @@ export class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.PickerService }, { token: i4.DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerComponent, 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" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerComponent, 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: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
+        { provide: MultiTabStop, useExisting: forwardRef(() => DatePickerComponent) },
         LocalizationService,
         PickerService,
         DisabledDatesService,
@@ -1090,7 +1097,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             provide: L10N_PREFIX,
             useValue: 'kendo.datepicker'
         }
-    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "navigationItemTemplate", first: true, predicate: NavigationItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datepicker"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "navigationItemTemplate", first: true, predicate: NavigationItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoDatePickerLocalizedMessages
             i18n-today="kendo.datepicker.today|The label for the today button in the calendar header"
             today="Today"
@@ -1273,6 +1280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
                         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
+                        { provide: MultiTabStop, useExisting: forwardRef(() => DatePickerComponent) },
                         LocalizationService,
                         PickerService,
                         DisabledDatesService,
@@ -1635,6 +1643,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], close: [{
                 type: Output
+            }], escape: [{
+                type: Output
             }], wrapperClasses: [{
                 type: HostBinding,
                 args: ['class.k-datepicker']

package/esm2020/daterange/date-range-selection.directive.mjs

@@ -14,6 +14,8 @@ import * as i1 from "../calendar/multiview-calendar.component";
 import * as i2 from "./date-range.service";
 /**
  * A directive which manages the MultiViewCalendar range selection.
+ * This directive will be `deprecated` in a future version.
+ * We recommend using the MultiViewCalendar [range selection]({% slug selection_multiviewcalendar %}#toc-range-selection).
  */
 export class DateRangeSelectionDirective {
     constructor(calendar, cdr, element, renderer, dateRangeService) {

package/esm2020/datetimepicker/datetimepicker.component.mjs

@@ -9,7 +9,7 @@ import { tap } from 'rxjs/operators';
 import { cloneDate, isEqual, getDate } from '@progress/kendo-date-math';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { IntlService } from '@progress/kendo-angular-intl';
-import { hasObservers, isControlRequired, isDocumentAvailable, KendoInput, Keys } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, isDocumentAvailable, KendoInput, Keys, MultiTabStop } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -68,8 +68,9 @@ const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-time-tab';
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
-export class DateTimePickerComponent {
+export class DateTimePickerComponent extends MultiTabStop {
     constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, touchEnabled, localization, disabledDatesService, renderer, injector) {
+        super();
         this.popupService = popupService;
         this.intl = intl;
         this.cdr = cdr;
@@ -261,6 +262,10 @@ export class DateTimePickerComponent {
          * ([see example](slug:events_datetimepicker)).
          */
         this.onBlur = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.escape = new EventEmitter();
         /**
          * @hidden
          *
@@ -946,6 +951,7 @@ export class DateTimePickerComponent {
         }
         const runInZone = hasObservers(this.close);
         this.run(runInZone, () => this.toggleDateTime(false));
+        hasObservers(this.escape) && this.escape.emit();
     }
     /**
      * @hidden
@@ -1342,15 +1348,16 @@ export class DateTimePickerComponent {
     }
 }
 DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1.PopupService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i3.PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i4.LocalizationService }, { token: i5.DisabledDatesService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", clearButton: "clearButton", autoFill: "autoFill", adaptiveMode: "adaptiveMode", inputAttributes: "inputAttributes", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", clearButton: "clearButton", autoFill: "autoFill", adaptiveMode: "adaptiveMode", inputAttributes: "inputAttributes", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", escape: "escape" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
         { provide: L10N_PREFIX, useValue: 'kendo.datetimepicker' },
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
-        { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) }
-    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datetimepicker"], usesOnChanges: true, ngImport: i0, template: `
+        { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) },
+        { provide: MultiTabStop, useExisting: forwardRef(() => DateTimePickerComponent) }
+    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datetimepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoDateTimePickerLocalizedMessages
 
@@ -1745,7 +1752,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         { provide: L10N_PREFIX, useValue: 'kendo.datetimepicker' },
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
-                        { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) }
+                        { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) },
+                        { provide: MultiTabStop, useExisting: forwardRef(() => DateTimePickerComponent) }
                     ],
                     template: `
         <ng-container
@@ -2232,6 +2240,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], onBlur: [{
                 type: Output,
                 args: ['blur']
+            }], escape: [{
+                type: Output
             }], defaultTab: [{
                 type: Input
             }], size: [{

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1715939640,
-    version: '16.0.1-develop.1',
+    publishDate: 1716388418,
+    version: '16.1.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/timepicker/timepicker.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, isEqual } from '@progress/kendo-date-math';
-import { hasObservers, isControlRequired, isDocumentAvailable, KendoInput, Keys } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, isDocumentAvailable, KendoInput, Keys, MultiTabStop } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { MIDNIGHT_DATE, MIN_TIME, MAX_TIME } from '../defaults';
@@ -47,8 +47,9 @@ const ACCEPT_BUTTON_SELECTOR = '.k-button.k-time-accept';
 /**
  * Represents the [Kendo UI TimePicker component for Angular]({% slug overview_timepicker %}#toc-basic-usage).
  */
-export class TimePickerComponent {
+export class TimePickerComponent extends MultiTabStop {
     constructor(bus, zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, touchEnabled) {
+        super();
         this.bus = bus;
         this.zone = zone;
         this.localization = localization;
@@ -203,6 +204,10 @@ export class TimePickerComponent {
          * This event is preventable. If you cancel the event, the popup will remain open.
          */
         this.close = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.escape = new EventEmitter();
         /**
          * @hidden
          */
@@ -535,6 +540,7 @@ export class TimePickerComponent {
         const { altKey, keyCode } = event;
         if (keyCode === Keys.Escape) {
             this.show = false;
+            hasObservers(this.escape) && this.escape.emit();
             this.cdr.detectChanges();
             return;
         }
@@ -969,10 +975,11 @@ export class TimePickerComponent {
     }
 }
 TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerComponent, deps: [{ token: i1.BusViewService }, { token: i0.NgZone }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i4.PickerService }, { token: i5.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", clearButton: "clearButton", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", clearButton: "clearButton", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
+        { provide: MultiTabStop, useExisting: forwardRef(() => TimePickerComponent) },
         LocalizationService,
         BusViewService,
         {
@@ -980,7 +987,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             useValue: 'kendo.timepicker'
         },
         PickerService
-    ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-timepicker"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-timepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTimePickerLocalizedMessages
             i18n-accept="kendo.timepicker.accept|The Accept button text in the timepicker component"
             accept="Set"
@@ -1195,6 +1202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
                         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
+                        { provide: MultiTabStop, useExisting: forwardRef(() => TimePickerComponent) },
                         LocalizationService,
                         BusViewService,
                         {
@@ -1505,6 +1513,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], close: [{
                 type: Output
+            }], escape: [{
+                type: Output
             }], wrapperClasses: [{
                 type: HostBinding,
                 args: ['class.k-timepicker']

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

@@ -9,7 +9,7 @@ import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import { cloneDate, MS_PER_HOUR, MS_PER_MINUTE, addDays, getDate, isEqual, addDecades, addCenturies, firstDecadeOfCentury, lastDecadeOfCentury, firstYearOfDecade, createDate, lastYearOfDecade, lastMonthOfYear, lastDayOfMonth, durationInCenturies, addYears, durationInDecades, addWeeks, addMonths, firstDayOfMonth, dayOfWeek, durationInMonths, firstMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
 import * as i1$2 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, isObject, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, EventsModule, ResizeSensorModule, ToggleButtonTabStopModule } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, isObject, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, MultiTabStop, EventsModule, ResizeSensorModule, ToggleButtonTabStopModule } from '@progress/kendo-angular-common';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-intl';
@@ -38,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1715939640,
-    version: '16.0.1-develop.1',
+    publishDate: 1716388418,
+    version: '16.1.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -3851,7 +3851,7 @@ class MultiViewCalendarComponent {
     }
     /**
      * Sets the Calendar selection mode
-     * ([see example]({% slug multiple_selection_multiviewcalendar %})).
+     * ([see example]({% slug selection_multiviewcalendar %})).
      *
      * The available values are:
      * * `single` (default)
@@ -3868,10 +3868,9 @@ class MultiViewCalendarComponent {
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
-     * > The `value` has to be a valid
-     * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
-     * instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
-     * an object of type `SelectionRange` when in `range` selection mode.
+     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
+        instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
+        an object of type `SelectionRange` when in `range` selection mode.
      */
     set value(candidate) {
         this.valueSetter = true;
@@ -6670,7 +6669,7 @@ class CalendarComponent {
     }
     /**
      * Sets the Calendar selection mode
-     * ([see example]({% slug multiple_selection_calendar %})).
+     * ([see example]({% slug selection_calendar %})).
      *
      * The available values are:
      * * `single` (default)
@@ -6687,10 +6686,7 @@ class CalendarComponent {
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
-     * > The `value` has to be a valid
-     * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
-     * instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
-     * an object of type `SelectionRange` when in `range` selection mode.
+     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or an object of type `SelectionRange` when in `range` selection mode.
      */
     set value(candidate) {
         this.valueSetter = true;
@@ -9377,8 +9373,9 @@ const TWO_DIGIT_YEAR_MAX$1 = 68;
 /**
  * Represents the [Kendo UI DatePicker component for Angular]({% slug overview_datepicker %}#toc-basic-usage).
  */
-class DatePickerComponent {
+class DatePickerComponent extends MultiTabStop {
     constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService, touchEnabled) {
+        super();
         this.zone = zone;
         this.localization = localization;
         this.cdr = cdr;
@@ -9613,6 +9610,10 @@ class DatePickerComponent {
          * This event is preventable. If you cancel the event, the popup will remain open.
          */
         this.close = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.escape = new EventEmitter();
         /**
          * @hidden
          */
@@ -10183,6 +10184,7 @@ class DatePickerComponent {
         const { altKey, shiftKey, keyCode, target } = e;
         if (keyCode === Keys$1.Escape) {
             this.show = false;
+            hasObservers(this.escape) && this.escape.emit();
         }
         if (altKey) {
             if (keyCode === Keys$1.ArrowDown && !this.show) {
@@ -10403,10 +10405,11 @@ class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerComponent, 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" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerComponent, 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: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
+        { provide: MultiTabStop, useExisting: forwardRef(() => DatePickerComponent) },
         LocalizationService,
         PickerService,
         DisabledDatesService,
@@ -10414,7 +10417,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             provide: L10N_PREFIX,
             useValue: 'kendo.datepicker'
         }
-    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "navigationItemTemplate", first: true, predicate: NavigationItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datepicker"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "navigationItemTemplate", first: true, predicate: NavigationItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoDatePickerLocalizedMessages
             i18n-today="kendo.datepicker.today|The label for the today button in the calendar header"
             today="Today"
@@ -10597,6 +10600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
                         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
+                        { provide: MultiTabStop, useExisting: forwardRef(() => DatePickerComponent) },
                         LocalizationService,
                         PickerService,
                         DisabledDatesService,
@@ -10961,6 +10965,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], close: [{
                 type: Output
+            }], escape: [{
+                type: Output
             }], wrapperClasses: [{
                 type: HostBinding,
                 args: ['class.k-datepicker']
@@ -12866,8 +12872,9 @@ const ACCEPT_BUTTON_SELECTOR$1 = '.k-button.k-time-accept';
 /**
  * Represents the [Kendo UI TimePicker component for Angular]({% slug overview_timepicker %}#toc-basic-usage).
  */
-class TimePickerComponent {
+class TimePickerComponent extends MultiTabStop {
     constructor(bus, zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, touchEnabled) {
+        super();
         this.bus = bus;
         this.zone = zone;
         this.localization = localization;
@@ -13022,6 +13029,10 @@ class TimePickerComponent {
          * This event is preventable. If you cancel the event, the popup will remain open.
          */
         this.close = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.escape = new EventEmitter();
         /**
          * @hidden
          */
@@ -13355,6 +13366,7 @@ class TimePickerComponent {
         const { altKey, keyCode } = event;
         if (keyCode === Keys$1.Escape) {
             this.show = false;
+            hasObservers(this.escape) && this.escape.emit();
             this.cdr.detectChanges();
             return;
         }
@@ -13791,10 +13803,11 @@ class TimePickerComponent {
     }
 }
 TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerComponent, deps: [{ token: BusViewService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: i1.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", clearButton: "clearButton", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", clearButton: "clearButton", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
+        { provide: MultiTabStop, useExisting: forwardRef(() => TimePickerComponent) },
         LocalizationService,
         BusViewService,
         {
@@ -13802,7 +13815,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             useValue: 'kendo.timepicker'
         },
         PickerService
-    ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-timepicker"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-timepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTimePickerLocalizedMessages
             i18n-accept="kendo.timepicker.accept|The Accept button text in the timepicker component"
             accept="Set"
@@ -14017,6 +14030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
                         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
+                        { provide: MultiTabStop, useExisting: forwardRef(() => TimePickerComponent) },
                         LocalizationService,
                         BusViewService,
                         {
@@ -14329,6 +14343,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], close: [{
                 type: Output
+            }], escape: [{
+                type: Output
             }], wrapperClasses: [{
                 type: HostBinding,
                 args: ['class.k-timepicker']
@@ -14440,8 +14456,9 @@ const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-time-tab';
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
-class DateTimePickerComponent {
+class DateTimePickerComponent extends MultiTabStop {
     constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, touchEnabled, localization, disabledDatesService, renderer, injector) {
+        super();
         this.popupService = popupService;
         this.intl = intl;
         this.cdr = cdr;
@@ -14633,6 +14650,10 @@ class DateTimePickerComponent {
          * ([see example](slug:events_datetimepicker)).
          */
         this.onBlur = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.escape = new EventEmitter();
         /**
          * @hidden
          *
@@ -15327,6 +15348,7 @@ class DateTimePickerComponent {
         }
         const runInZone = hasObservers(this.close);
         this.run(runInZone, () => this.toggleDateTime(false));
+        hasObservers(this.escape) && this.escape.emit();
     }
     /**
      * @hidden
@@ -15726,15 +15748,16 @@ class DateTimePickerComponent {
     }
 }
 DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1$3.PopupService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i1$1.LocalizationService }, { token: DisabledDatesService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", clearButton: "clearButton", autoFill: "autoFill", adaptiveMode: "adaptiveMode", inputAttributes: "inputAttributes", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", clearButton: "clearButton", autoFill: "autoFill", adaptiveMode: "adaptiveMode", inputAttributes: "inputAttributes", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", escape: "escape" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
         { provide: L10N_PREFIX, useValue: 'kendo.datetimepicker' },
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
-        { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) }
-    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datetimepicker"], usesOnChanges: true, ngImport: i0, template: `
+        { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) },
+        { provide: MultiTabStop, useExisting: forwardRef(() => DateTimePickerComponent) }
+    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datetimepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoDateTimePickerLocalizedMessages
 
@@ -16129,7 +16152,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         { provide: L10N_PREFIX, useValue: 'kendo.datetimepicker' },
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
-                        { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) }
+                        { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) },
+                        { provide: MultiTabStop, useExisting: forwardRef(() => DateTimePickerComponent) }
                     ],
                     template: `
         <ng-container
@@ -16618,6 +16642,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], onBlur: [{
                 type: Output,
                 args: ['blur']
+            }], escape: [{
+                type: Output
             }], defaultTab: [{
                 type: Input
             }], size: [{
@@ -16909,6 +16935,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
 /**
  * A directive which manages the MultiViewCalendar range selection.
+ * This directive will be `deprecated` in a future version.
+ * We recommend using the MultiViewCalendar [range selection]({% slug selection_multiviewcalendar %}#toc-range-selection).
  */
 class DateRangeSelectionDirective {
     constructor(calendar, cdr, element, renderer, dateRangeService) {

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

@@ -9,7 +9,7 @@ import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import { cloneDate, MS_PER_HOUR, MS_PER_MINUTE, addDays, getDate, isEqual, addDecades, addCenturies, firstDecadeOfCentury, lastDecadeOfCentury, firstYearOfDecade, createDate, lastYearOfDecade, lastMonthOfYear, lastDayOfMonth, durationInCenturies, addYears, durationInDecades, addWeeks, addMonths, firstDayOfMonth, dayOfWeek, durationInMonths, firstMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
 import * as i1$2 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, isObject, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, EventsModule, ResizeSensorModule, ToggleButtonTabStopModule } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, isObject, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, MultiTabStop, EventsModule, ResizeSensorModule, ToggleButtonTabStopModule } from '@progress/kendo-angular-common';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-intl';
@@ -38,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1715939640,
-    version: '16.0.1-develop.1',
+    publishDate: 1716388418,
+    version: '16.1.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -3850,7 +3850,7 @@ class MultiViewCalendarComponent {
     }
     /**
      * Sets the Calendar selection mode
-     * ([see example]({% slug multiple_selection_multiviewcalendar %})).
+     * ([see example]({% slug selection_multiviewcalendar %})).
      *
      * The available values are:
      * * `single` (default)
@@ -3867,10 +3867,9 @@ class MultiViewCalendarComponent {
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
-     * > The `value` has to be a valid
-     * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
-     * instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
-     * an object of type `SelectionRange` when in `range` selection mode.
+     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
+        instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
+        an object of type `SelectionRange` when in `range` selection mode.
      */
     set value(candidate) {
         this.valueSetter = true;
@@ -6661,7 +6660,7 @@ class CalendarComponent {
     }
     /**
      * Sets the Calendar selection mode
-     * ([see example]({% slug multiple_selection_calendar %})).
+     * ([see example]({% slug selection_calendar %})).
      *
      * The available values are:
      * * `single` (default)
@@ -6678,10 +6677,7 @@ class CalendarComponent {
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
-     * > The `value` has to be a valid
-     * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
-     * instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
-     * an object of type `SelectionRange` when in `range` selection mode.
+     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or an object of type `SelectionRange` when in `range` selection mode.
      */
     set value(candidate) {
         this.valueSetter = true;
@@ -9356,8 +9352,9 @@ const TWO_DIGIT_YEAR_MAX$1 = 68;
 /**
  * Represents the [Kendo UI DatePicker component for Angular]({% slug overview_datepicker %}#toc-basic-usage).
  */
-class DatePickerComponent {
+class DatePickerComponent extends MultiTabStop {
     constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService, touchEnabled) {
+        super();
         this.zone = zone;
         this.localization = localization;
         this.cdr = cdr;
@@ -9592,6 +9589,10 @@ class DatePickerComponent {
          * This event is preventable. If you cancel the event, the popup will remain open.
          */
         this.close = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.escape = new EventEmitter();
         /**
          * @hidden
          */
@@ -10159,6 +10160,7 @@ class DatePickerComponent {
         const { altKey, shiftKey, keyCode, target } = e;
         if (keyCode === Keys$1.Escape) {
             this.show = false;
+            hasObservers(this.escape) && this.escape.emit();
         }
         if (altKey) {
             if (keyCode === Keys$1.ArrowDown && !this.show) {
@@ -10377,10 +10379,11 @@ class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerComponent, 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" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerComponent, 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: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
+        { provide: MultiTabStop, useExisting: forwardRef(() => DatePickerComponent) },
         LocalizationService,
         PickerService,
         DisabledDatesService,
@@ -10388,7 +10391,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             provide: L10N_PREFIX,
             useValue: 'kendo.datepicker'
         }
-    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "navigationItemTemplate", first: true, predicate: NavigationItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datepicker"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "navigationItemTemplate", first: true, predicate: NavigationItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoDatePickerLocalizedMessages
             i18n-today="kendo.datepicker.today|The label for the today button in the calendar header"
             today="Today"
@@ -10571,6 +10574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
                         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
+                        { provide: MultiTabStop, useExisting: forwardRef(() => DatePickerComponent) },
                         LocalizationService,
                         PickerService,
                         DisabledDatesService,
@@ -10933,6 +10937,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], close: [{
                 type: Output
+            }], escape: [{
+                type: Output
             }], wrapperClasses: [{
                 type: HostBinding,
                 args: ['class.k-datepicker']
@@ -12833,8 +12839,9 @@ const ACCEPT_BUTTON_SELECTOR$1 = '.k-button.k-time-accept';
 /**
  * Represents the [Kendo UI TimePicker component for Angular]({% slug overview_timepicker %}#toc-basic-usage).
  */
-class TimePickerComponent {
+class TimePickerComponent extends MultiTabStop {
     constructor(bus, zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, touchEnabled) {
+        super();
         this.bus = bus;
         this.zone = zone;
         this.localization = localization;
@@ -12989,6 +12996,10 @@ class TimePickerComponent {
          * This event is preventable. If you cancel the event, the popup will remain open.
          */
         this.close = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.escape = new EventEmitter();
         /**
          * @hidden
          */
@@ -13321,6 +13332,7 @@ class TimePickerComponent {
         const { altKey, keyCode } = event;
         if (keyCode === Keys$1.Escape) {
             this.show = false;
+            hasObservers(this.escape) && this.escape.emit();
             this.cdr.detectChanges();
             return;
         }
@@ -13755,10 +13767,11 @@ class TimePickerComponent {
     }
 }
 TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerComponent, deps: [{ token: BusViewService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: i1.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", clearButton: "clearButton", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", clearButton: "clearButton", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
+        { provide: MultiTabStop, useExisting: forwardRef(() => TimePickerComponent) },
         LocalizationService,
         BusViewService,
         {
@@ -13766,7 +13779,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             useValue: 'kendo.timepicker'
         },
         PickerService
-    ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-timepicker"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-timepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTimePickerLocalizedMessages
             i18n-accept="kendo.timepicker.accept|The Accept button text in the timepicker component"
             accept="Set"
@@ -13981,6 +13994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
                         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
+                        { provide: MultiTabStop, useExisting: forwardRef(() => TimePickerComponent) },
                         LocalizationService,
                         BusViewService,
                         {
@@ -14291,6 +14305,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], close: [{
                 type: Output
+            }], escape: [{
+                type: Output
             }], wrapperClasses: [{
                 type: HostBinding,
                 args: ['class.k-timepicker']
@@ -14402,8 +14418,9 @@ const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-time-tab';
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
-class DateTimePickerComponent {
+class DateTimePickerComponent extends MultiTabStop {
     constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, touchEnabled, localization, disabledDatesService, renderer, injector) {
+        super();
         this.popupService = popupService;
         this.intl = intl;
         this.cdr = cdr;
@@ -14595,6 +14612,10 @@ class DateTimePickerComponent {
          * ([see example](slug:events_datetimepicker)).
          */
         this.onBlur = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.escape = new EventEmitter();
         /**
          * @hidden
          *
@@ -15280,6 +15301,7 @@ class DateTimePickerComponent {
         }
         const runInZone = hasObservers(this.close);
         this.run(runInZone, () => this.toggleDateTime(false));
+        hasObservers(this.escape) && this.escape.emit();
     }
     /**
      * @hidden
@@ -15676,15 +15698,16 @@ class DateTimePickerComponent {
     }
 }
 DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1$3.PopupService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i1$1.LocalizationService }, { token: DisabledDatesService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", clearButton: "clearButton", autoFill: "autoFill", adaptiveMode: "adaptiveMode", inputAttributes: "inputAttributes", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", clearButton: "clearButton", autoFill: "autoFill", adaptiveMode: "adaptiveMode", inputAttributes: "inputAttributes", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", escape: "escape" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
         { provide: L10N_PREFIX, useValue: 'kendo.datetimepicker' },
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
-        { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) }
-    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datetimepicker"], usesOnChanges: true, ngImport: i0, template: `
+        { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) },
+        { provide: MultiTabStop, useExisting: forwardRef(() => DateTimePickerComponent) }
+    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datetimepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoDateTimePickerLocalizedMessages
 
@@ -16079,7 +16102,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         { provide: L10N_PREFIX, useValue: 'kendo.datetimepicker' },
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
-                        { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) }
+                        { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) },
+                        { provide: MultiTabStop, useExisting: forwardRef(() => DateTimePickerComponent) }
                     ],
                     template: `
         <ng-container
@@ -16566,6 +16590,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], onBlur: [{
                 type: Output,
                 args: ['blur']
+            }], escape: [{
+                type: Output
             }], defaultTab: [{
                 type: Input
             }], size: [{
@@ -16855,6 +16881,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
 /**
  * A directive which manages the MultiViewCalendar range selection.
+ * This directive will be `deprecated` in a future version.
+ * We recommend using the MultiViewCalendar [range selection]({% slug selection_multiviewcalendar %}#toc-range-selection).
  */
 class DateRangeSelectionDirective {
     constructor(calendar, cdr, element, renderer, dateRangeService) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dateinputs",
-  "version": "16.0.1-develop.1",
+  "version": "16.1.0-develop.2",
   "description": "Kendo UI for Angular Date Inputs Package - Everything you need to add date selection functionality to apps (DatePicker, TimePicker, DateInput, DateRangePicker, DateTimePicker, Calendar, and MultiViewCalendar).",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -34,17 +34,17 @@
     "@angular/forms": "15 - 17",
     "@angular/platform-browser": "15 - 17",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "16.0.1-develop.1",
-    "@progress/kendo-angular-intl": "16.0.1-develop.1",
-    "@progress/kendo-angular-l10n": "16.0.1-develop.1",
-    "@progress/kendo-angular-icons": "16.0.1-develop.1",
-    "@progress/kendo-angular-popup": "16.0.1-develop.1",
-    "@progress/kendo-angular-navigation": "16.0.1-develop.1",
+    "@progress/kendo-angular-common": "16.1.0-develop.2",
+    "@progress/kendo-angular-intl": "16.1.0-develop.2",
+    "@progress/kendo-angular-l10n": "16.1.0-develop.2",
+    "@progress/kendo-angular-icons": "16.1.0-develop.2",
+    "@progress/kendo-angular-popup": "16.1.0-develop.2",
+    "@progress/kendo-angular-navigation": "16.1.0-develop.2",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "16.0.1-develop.1",
+    "@progress/kendo-angular-schematics": "16.1.0-develop.2",
     "@progress/kendo-common": "^0.2.0",
     "@progress/kendo-date-math": "^1.1.0",
     "@progress/kendo-dateinputs-common": "^0.3.3"

package/timepicker/timepicker.component.d.ts

@@ -6,6 +6,7 @@ import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, TemplateRef, ViewC
 import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService, PopupRef } from '@progress/kendo-angular-popup';
+import { MultiTabStop } from '@progress/kendo-angular-common';
 import { DateInputFormatPlaceholder } from '../dateinput/models/format-placeholder.model';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { PickerService } from '../common/picker.service';
@@ -25,7 +26,7 @@ import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI TimePicker component for Angular]({% slug overview_timepicker %}#toc-basic-usage).
  */
-export declare class TimePickerComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnChanges, OnDestroy, Validator {
+export declare class TimePickerComponent extends MultiTabStop implements ControlValueAccessor, OnInit, AfterViewInit, OnChanges, OnDestroy, Validator {
     private bus;
     zone: NgZone;
     localization: LocalizationService;
@@ -339,6 +340,10 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
      * This event is preventable. If you cancel the event, the popup will remain open.
      */
     close: EventEmitter<PreventableEvent>;
+    /**
+     * @hidden
+     */
+    escape: EventEmitter<any>;
     /**
      * @hidden
      */
@@ -551,5 +556,5 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
     private handleDateCompletenessChange;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TimePickerComponent, "kendo-timepicker", ["kendo-timepicker"], { "focusableId": "focusableId"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "clearButton": "clearButton"; "format": "format"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "min": "min"; "max": "max"; "incompleteDateValidation": "incompleteDateValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "enableMouseWheel": "enableMouseWheel"; "allowCaretMode": "allowCaretMode"; "cancelButton": "cancelButton"; "nowButton": "nowButton"; "steps": "steps"; "popupSettings": "popupSettings"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "title": "title"; "subtitle": "subtitle"; "rangeValidation": "rangeValidation"; "adaptiveMode": "adaptiveMode"; "value": "value"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "inputAttributes": "inputAttributes"; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimePickerComponent, "kendo-timepicker", ["kendo-timepicker"], { "focusableId": "focusableId"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "clearButton": "clearButton"; "format": "format"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "min": "min"; "max": "max"; "incompleteDateValidation": "incompleteDateValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "enableMouseWheel": "enableMouseWheel"; "allowCaretMode": "allowCaretMode"; "cancelButton": "cancelButton"; "nowButton": "nowButton"; "steps": "steps"; "popupSettings": "popupSettings"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "title": "title"; "subtitle": "subtitle"; "rangeValidation": "rangeValidation"; "adaptiveMode": "adaptiveMode"; "value": "value"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "inputAttributes": "inputAttributes"; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; "escape": "escape"; }, never, never, false, never>;
 }