@progress/kendo-angular-dateinputs 16.0.0-develop.12 → 16.0.0-develop.14

package/esm2020/calendar/services/year-view.service.mjs

@@ -50,7 +50,7 @@ export class YearViewService {
         return range(0, count).map(i => addYears(start, i));
     }
     data(options) {
-        const { cellUID, focusedDate, isActiveView, max, min, selectedDates, selectionRange = EMPTY_SELECTIONRANGE, viewDate } = options;
+        const { cellUID, focusedDate, isActiveView, max, min, selectedDates, selectionRange = EMPTY_SELECTIONRANGE, viewDate, allowReverse } = options;
         if (!viewDate) {
             return EMPTY_DATA;
         }
@@ -68,10 +68,30 @@ export class YearViewService {
                 if (!this.isInRange(cellDate, min, max) || changedYear) {
                     return null;
                 }
-                const isRangeStart = this.isEqual(cellDate, selectionRange.start);
-                const isRangeEnd = this.isEqual(cellDate, selectionRange.end);
+                let isRangeStart = false;
+                let isRangeEnd = false;
+                if (allowReverse) {
+                    if ((this.isEqual(cellDate, selectionRange.start) && selectionRange.start <= selectionRange.end) ||
+                        (this.isEqual(cellDate, selectionRange.end) && selectionRange.end <= selectionRange.start)) {
+                        isRangeStart = true;
+                    }
+                    if ((this.isEqual(cellDate, selectionRange.start) && selectionRange.start >= selectionRange.end) ||
+                        (this.isEqual(cellDate, selectionRange.end) && selectionRange.end >= selectionRange.start)) {
+                        isRangeEnd = true;
+                    }
+                }
+                else {
+                    isRangeStart = this.isEqual(cellDate, selectionRange.start);
+                    isRangeEnd = this.isEqual(cellDate, selectionRange.end);
+                }
                 const isInMiddle = !isRangeStart && !isRangeEnd;
-                const isRangeMid = isInMiddle && isInSelectionRange(cellDate, selectionRange);
+                let isRangeMid;
+                if (allowReverse) {
+                    isRangeMid = isInMiddle && (isInSelectionRange(cellDate, selectionRange) || isInSelectionRange(cellDate, { start: selectionRange.end, end: selectionRange.start }));
+                }
+                else {
+                    isRangeMid = isInMiddle && isInSelectionRange(cellDate, selectionRange);
+                }
                 return {
                     formattedValue: months[cellDate.getMonth()],
                     id: `${cellUID}${cellDate.getTime()}`,
@@ -85,7 +105,8 @@ export class YearViewService {
                     isRangeSplitStart: isRangeMid && this.isEqual(cellDate, firstDate),
                     isToday: this.isEqual(cellDate, today),
                     title: this.cellTitle(cellDate),
-                    value: cellDate
+                    value: cellDate,
+                    allowReverse: allowReverse
                 };
             });
         });

package/esm2020/calendar/view-list.component.mjs

@@ -44,6 +44,7 @@ export class ViewListComponent {
         this.disabled = false;
         this.showFooter = false;
         this.weekDaysFormat = 'short';
+        this.cellEnter = new EventEmitter();
         this.cellClick = new EventEmitter();
         this.weekNumberCellClick = new EventEmitter();
         this.activeDateChange = new EventEmitter();
@@ -193,7 +194,7 @@ export class ViewListComponent {
     }
 }
 ViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ViewListComponent, deps: [{ token: i1.BusViewService }, { token: i0.ChangeDetectorRef }, { token: i2.IntlService }, { token: i3.CalendarDOMService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", headerTemplateRef: "headerTemplateRef", footerTemplateRef: "footerTemplateRef", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", showFooter: "showFooter", weekDaysFormat: "weekDaysFormat", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { allowReverse: "allowReverse", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", headerTemplateRef: "headerTemplateRef", footerTemplateRef: "footerTemplateRef", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", showFooter: "showFooter", weekDaysFormat: "weekDaysFormat", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", weekNumber: "weekNumber" }, outputs: { cellEnter: "cellEnter", cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-calendar-header
         [currentDate]="activeDate"
         [min]="min"
@@ -240,6 +241,9 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             <tbody class="k-calendar-tbody"
                    *kFor="let date of dates"
                    kendoCalendarView
+                   [allowReverse]="allowReverse"
+                   [activeRangeEnd]="activeRangeEnd"
+                   [selectionRange]="selectionRange"
                    [showOtherMonthDays]="showOtherMonthDays"
                    [headerTitle]="headerTitle"
                    role="rowgroup"
@@ -256,6 +260,7 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                    (cellClick)="cellClick.emit($event)"
                    (weekNumberCellClick)="weekNumberCellClick.emit($event)"
                    (focusedCellId)="focusedCellChange.emit($event)"
+                   (cellEnter)="cellEnter.emit($event)"
             ></tbody>
         </table>
     </kendo-virtualization>
@@ -265,7 +270,7 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         [activeViewValue]="activeViewValue"
         [currentDate]="activeDate">
     </kendo-calendar-footer>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: i6.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: i7.FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: i8.ViewComponent, selector: "[kendoCalendarView]", inputs: ["showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }, { kind: "component", type: i9.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: i6.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: i7.FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: i8.ViewComponent, selector: "[kendoCalendarView]", inputs: ["allowReverse", "showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }, { kind: "component", type: i9.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ViewListComponent, decorators: [{
             type: Component,
             args: [{
@@ -318,6 +323,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             <tbody class="k-calendar-tbody"
                    *kFor="let date of dates"
                    kendoCalendarView
+                   [allowReverse]="allowReverse"
+                   [activeRangeEnd]="activeRangeEnd"
+                   [selectionRange]="selectionRange"
                    [showOtherMonthDays]="showOtherMonthDays"
                    [headerTitle]="headerTitle"
                    role="rowgroup"
@@ -334,6 +342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                    (cellClick)="cellClick.emit($event)"
                    (weekNumberCellClick)="weekNumberCellClick.emit($event)"
                    (focusedCellId)="focusedCellChange.emit($event)"
+                   (cellEnter)="cellEnter.emit($event)"
             ></tbody>
         </table>
     </kendo-virtualization>
@@ -345,7 +354,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     </kendo-calendar-footer>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i0.ChangeDetectorRef }, { type: i2.IntlService }, { type: i3.CalendarDOMService }, { type: i0.Renderer2 }]; }, propDecorators: { cellTemplateRef: [{
+        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i0.ChangeDetectorRef }, { type: i2.IntlService }, { type: i3.CalendarDOMService }, { type: i0.Renderer2 }]; }, propDecorators: { allowReverse: [{
+                type: Input
+            }], cellTemplateRef: [{
                 type: Input
             }], weekNumberTemplateRef: [{
                 type: Input
@@ -381,8 +392,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], weekDaysFormat: [{
                 type: Input
+            }], activeRangeEnd: [{
+                type: Input
+            }], selectionRange: [{
+                type: Input
             }], weekNumber: [{
                 type: Input
+            }], cellEnter: [{
+                type: Output
             }], cellClick: [{
                 type: Output
             }], weekNumberCellClick: [{

package/esm2020/calendar/view.component.mjs

@@ -168,7 +168,8 @@ export class ViewComponent {
             selectionRange: this.selectionRange,
             viewDate: viewDate,
             isDateDisabled: this.disabledDatesService.isDateDisabled,
-            direction: this.direction
+            direction: this.direction,
+            allowReverse: this.allowReverse
         });
     }
     intlChange() {
@@ -234,7 +235,7 @@ export class ViewComponent {
     }
 }
 ViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ViewComponent, deps: [{ token: i1.BusViewService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
-ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ViewComponent, selector: "[kendoCalendarView]", inputs: { showOtherMonthDays: "showOtherMonthDays", direction: "direction", isActive: "isActive", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", viewDate: "viewDate", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", min: "min", max: "max", selectedDates: "selectedDates", weekNumber: "weekNumber", viewIndex: "viewIndex", templateRef: "templateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitle: "headerTitle" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", focusedCellId: "focusedCellId" }, usesOnChanges: true, ngImport: i0, template: `
+ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ViewComponent, selector: "[kendoCalendarView]", inputs: { allowReverse: "allowReverse", showOtherMonthDays: "showOtherMonthDays", direction: "direction", isActive: "isActive", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", viewDate: "viewDate", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", min: "min", max: "max", selectedDates: "selectedDates", weekNumber: "weekNumber", viewIndex: "viewIndex", templateRef: "templateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitle: "headerTitle" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", focusedCellId: "focusedCellId" }, usesOnChanges: true, ngImport: i0, template: `
     <ng-template #emptyCell><td class="k-empty k-calendar-td" role="gridcell">&nbsp;</td></ng-template>
     <tr *ngIf="!isHorizontal()" class="k-calendar-tr" role="row" [attr.aria-hidden]="ariaHidden"><th class="k-calendar-caption" scope="col" [colSpan]="colSpan">{{title}}</th></tr>
     <tr *kFor="let row of data; let rowIndex = index" class="k-calendar-tr" role="row">
@@ -336,7 +337,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     </tr>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i2.IntlService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i3.DisabledDatesService }]; }, propDecorators: { showOtherMonthDays: [{
+        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i2.IntlService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i3.DisabledDatesService }]; }, propDecorators: { allowReverse: [{
+                type: Input
+            }], showOtherMonthDays: [{
                 type: Input
             }], direction: [{
                 type: Input

package/esm2020/common/utils.mjs

@@ -19,6 +19,10 @@ export const currentFocusTarget = (blurArgs) => blurArgs.relatedTarget || docume
  * @hidden
  */
 export const isPresent = (value) => value !== undefined && value !== null;
+/**
+ * @hidden
+ */
+export const isNullOrDate = (value) => value === null || value instanceof Date;
 /**
  * @hidden
  */

package/esm2020/datepicker/datepicker.component.mjs

@@ -1249,7 +1249,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: i7.CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: i8.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "directive", type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i10.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i12.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i13.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: i7.CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: i8.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "directive", type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i10.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i12.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i13.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/daterange/date-range-popup.component.mjs

@@ -26,8 +26,7 @@ import * as i5 from "../calendar/multiview-calendar.component";
 import * as i6 from "@progress/kendo-angular-navigation";
 import * as i7 from "@progress/kendo-angular-common";
 import * as i8 from "@progress/kendo-angular-buttons";
-import * as i9 from "./date-range-selection.directive";
-import * as i10 from "./localization/daterange-popup-localized-messages.directive";
+import * as i9 from "./localization/daterange-popup-localized-messages.directive";
 /**
  * Represents the Kendo UI DateRangePopup component for Angular.
  *
@@ -56,6 +55,13 @@ export class DateRangePopupComponent {
         this.localization = localization;
         this.cdr = cdr;
         this.rtl = rtl;
+        /**
+         * Allows reverse selection when using `range` selection.
+         * If `allowReverse` is set to `true`, the component skips the validation of whether the start date is after the end date.
+         *
+         * @default false
+         */
+        this.allowReverse = false;
         /**
          * Controls the popup animation.
          * By default, the opening and closing animations are enabled.
@@ -204,6 +210,14 @@ export class DateRangePopupComponent {
             this.actionSheet.titleId = changes.first?.headerId;
             this.cdr.detectChanges();
         }));
+        this.calendarSubscriptions.add(this.dateRangeService.startInput$?.value?.valueChange.subscribe((res) => {
+            if (!res && this.dateRangeService.selectionRange.end) {
+                this.calendar.shouldHoverWhenNoStart = true;
+            }
+            else {
+                this.calendar.shouldHoverWhenNoStart = false;
+            }
+        }));
         if (isWindowAvailable()) {
             this.zone.runOutsideAngular(() => this.windowBlurSubscription = fromEvent(window, 'blur').subscribe(this.handleWindowBlur.bind(this)));
         }
@@ -227,6 +241,19 @@ export class DateRangePopupComponent {
             this.windowBlurSubscription.unsubscribe();
         }
     }
+    /**
+     * @hidden
+     *
+     */
+    onRangeSelectionChange(rangeSelection) {
+        this.dateRangeService.setActiveRangeEnd(rangeSelection.activeRangeEnd);
+        if (!this.isAdaptive) {
+            this.dateRangeService.setRange(rangeSelection.selectionRange);
+        }
+        else {
+            this._rangeSelection = rangeSelection.selectionRange;
+        }
+    }
     /**
      *  Opens the popup component and focuses the calendar.
      */
@@ -294,7 +321,7 @@ export class DateRangePopupComponent {
      * @hidden
      */
     handleAccept() {
-        this.dateRangeSelectionDirective.setRange(this.dateRangeService.selectionRange);
+        this.dateRangeService.setRange(this._rangeSelection);
         this.show = false;
     }
     /**
@@ -474,7 +501,7 @@ export class DateRangePopupComponent {
     }
 }
 DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1.PopupService }, { token: i2.DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
+DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { allowReverse: "allowReverse", animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -497,7 +524,15 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         </ng-container> 
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
-            <kendo-multiviewcalendar kendoDateRangeSelection (onClosePopup)="closePopup($event)" (onTabPress)="handleTab($event)" (onShiftTabPress)="handleShiftTab($event)"></kendo-multiviewcalendar>
+            <kendo-multiviewcalendar
+                [allowReverse]="allowReverse"
+                selection="range"
+                [value]="dateRangeService.selectionRange"
+                (onClosePopup)="closePopup($event)"
+                (onTabPress)="handleTab($event)"
+                (onShiftTabPress)="handleShiftTab($event)"
+                (rangeSelectionChange)="onRangeSelectionChange($event)"
+            ></kendo-multiviewcalendar>
         </ng-template>
 
         <kendo-actionsheet
@@ -538,8 +573,12 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                         <kendo-multiviewcalendar
                             class="k-calendar-lg"
                             orientation="vertical"
-                            kendoDateRangeSelection
-                            [shouldSetRange]="false">
+                            [allowReverse]="allowReverse"
+                            [focusedDate]="dateRangeService.focusedDate"
+                            [value]="dateRangeService.selectionRange"
+                            selection="range"
+                            (rangeSelectionChange)="onRangeSelectionChange($event)"
+                            >
                         </kendo-multiviewcalendar>
                     </div>
                 </div>
@@ -567,7 +606,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 </div>
             </ng-template>
         </kendo-actionsheet>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: i6.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i6.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i8.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i9.DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd", "shouldSetRange"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }, { kind: "directive", type: i10.DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: i6.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i6.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i8.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i9.DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
@@ -597,7 +636,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         </ng-container> 
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
-            <kendo-multiviewcalendar kendoDateRangeSelection (onClosePopup)="closePopup($event)" (onTabPress)="handleTab($event)" (onShiftTabPress)="handleShiftTab($event)"></kendo-multiviewcalendar>
+            <kendo-multiviewcalendar
+                [allowReverse]="allowReverse"
+                selection="range"
+                [value]="dateRangeService.selectionRange"
+                (onClosePopup)="closePopup($event)"
+                (onTabPress)="handleTab($event)"
+                (onShiftTabPress)="handleShiftTab($event)"
+                (rangeSelectionChange)="onRangeSelectionChange($event)"
+            ></kendo-multiviewcalendar>
         </ng-template>
 
         <kendo-actionsheet
@@ -638,8 +685,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         <kendo-multiviewcalendar
                             class="k-calendar-lg"
                             orientation="vertical"
-                            kendoDateRangeSelection
-                            [shouldSetRange]="false">
+                            [allowReverse]="allowReverse"
+                            [focusedDate]="dateRangeService.focusedDate"
+                            [value]="dateRangeService.selectionRange"
+                            selection="range"
+                            (rangeSelectionChange)="onRangeSelectionChange($event)"
+                            >
                         </kendo-multiviewcalendar>
                     </div>
                 </div>
@@ -695,6 +746,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }], contentCalendar: [{
                 type: ContentChildren,
                 args: [MultiViewCalendarComponent]
+            }], allowReverse: [{
+                type: Input
             }], animate: [{
                 type: Input
             }], anchor: [{

package/esm2020/daterange/date-range.component.mjs

@@ -71,7 +71,7 @@ DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateRangeComponent, selector: "kendo-daterange", host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
         <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["allowReverse", "animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/datetimepicker/datetimepicker.component.mjs

@@ -63,6 +63,7 @@ const TWO_DIGIT_YEAR_MAX = 68;
 const ACCEPT_BUTTON_SELECTOR = '.k-button.k-time-accept';
 const CANCEL_BUTTON_SELECOTR = '.k-button.k-time-cancel';
 const DATE_TAB_BUTTON_SELECTOR = '.k-button.k-date-tab';
+const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-time-tab';
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
@@ -659,6 +660,9 @@ export class DateTimePickerComponent {
     get dateTabButton() {
         return this.popupRef?.popup.instance.container.nativeElement.querySelector(DATE_TAB_BUTTON_SELECTOR);
     }
+    get timeTabButton() {
+        return this.popupRef?.popup.instance.container.nativeElement.querySelector(TIME_TAB_BUTTON_SELECTOR);
+    }
     /**
      * @hidden
      */
@@ -905,6 +909,12 @@ export class DateTimePickerComponent {
             this.dateTabButton.focus();
         }
     }
+    /**
+     * @hidden
+     */
+    onTabOutNow() {
+        this.timeTabButton.focus();
+    }
     /**
      * @hidden
      */
@@ -1028,7 +1038,7 @@ export class DateTimePickerComponent {
                         this.calendar.monthView.list.nativeElement.focus();
                     }
                     else {
-                        this.timeSelector.focus();
+                        this.timeSelector.timeLists.last.focus();
                     }
                 }
                 break;
@@ -1644,6 +1654,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                             [isAdaptiveEnabled]="isAdaptiveModeEnabled"
                             [isDateTimePicker]="true"
                             (tabOutLastPart)="onTabOutLastPart()"
+                            (tabOutNow)="onTabOutNow()"
                         >
                             <kendo-timeselector-messages
                                 [acceptLabel]="localization.get('acceptLabel')"
@@ -1704,7 +1715,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: i8.CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: i9.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: i10.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: i11.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i13.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i14.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i14.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i15.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i16.LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: i8.CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: i9.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: i10.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: i11.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i13.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i14.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i14.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i15.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i16.LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -2032,6 +2043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                             [isAdaptiveEnabled]="isAdaptiveModeEnabled"
                             [isDateTimePicker]="true"
                             (tabOutLastPart)="onTabOutLastPart()"
+                            (tabOutNow)="onTabOutNow()"
                         >
                             <kendo-timeselector-messages
                                 [acceptLabel]="localization.get('acceptLabel')"

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: 1714462722,
-    version: '16.0.0-develop.12',
+    publishDate: 1715100988,
+    version: '16.0.0-develop.14',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/timepicker/timepicker.component.mjs

@@ -1168,7 +1168,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i10.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i10.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i11.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i12.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: i13.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: i14.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i10.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i10.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i11.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i12.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: i13.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: i14.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/timepicker/timeselector.component.mjs

@@ -97,6 +97,7 @@ export class TimeSelectorComponent {
          */
         this.valueReject = new EventEmitter();
         this.tabOutLastPart = new EventEmitter();
+        this.tabOutNow = new EventEmitter();
         this.isActive = false;
         this.showNowButton = true;
         this._activeListIndex = -1;
@@ -192,7 +193,7 @@ export class TimeSelectorComponent {
             if (keyCode === Keys.Tab && shiftKey) {
                 event.preventDefault();
                 this.renderer.removeClass(this.timeListWrappers.first.nativeElement, 'k-focus');
-                this.cancel ? this.cancel.nativeElement.focus() : this.accept?.nativeElement.focus();
+                this.now ? this.now.nativeElement.focus() : this.cancel.nativeElement.focus();
             }
         }));
         this.subscriptions.add(fromEvent(this.timeListWrappers.last.nativeElement, 'keydown').subscribe((event) => {
@@ -311,13 +312,23 @@ export class TimeSelectorComponent {
      */
     handleTabOut(event) {
         const { keyCode, shiftKey } = event;
-        if (keyCode === Keys.Tab && !shiftKey) {
+        if (event.target === this.now?.nativeElement && keyCode === Keys.Tab && shiftKey) {
+            event.preventDefault();
+            if (this.isDateTimePicker) {
+                this.tabOutNow.emit();
+            }
+            else {
+                this.cancel ? this.cancel.nativeElement.focus() : this.accept.nativeElement.focus();
+            }
+            return;
+        }
+        if (keyCode === Keys.Tab && !shiftKey && event.target !== this.now?.nativeElement) {
             event.preventDefault();
             if (document.activeElement === this.accept.nativeElement) {
-                this.cancel ? this.cancel.nativeElement.focus() : this.timeLists.first.focus();
+                this.cancel ? this.cancel.nativeElement.focus() : this.now?.nativeElement.focus();
             }
             else {
-                this.timeLists.first.focus();
+                this.now ? this.now.nativeElement.focus() : this.timeLists.first.focus();
             }
         }
     }
@@ -408,7 +419,7 @@ export class TimeSelectorComponent {
     }
 }
 TimeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeSelectorComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.IntlService }, { token: i3.TimePickerDOMService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i4.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject", tabOutLastPart: "tabOutLastPart" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
+TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject", tabOutLastPart: "tabOutLastPart", tabOutNow: "tabOutNow" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -449,7 +460,8 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 [kendoEventsOutsideAngular]="{
                     click: handleNow,
                     focus: handleFocus,
-                    blur: handleBlur
+                    blur: handleBlur,
+                    keydown: handleTabOut
                 }"
                 [scope]="this"
                 [disabled]="disabled"
@@ -570,7 +582,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 [kendoEventsOutsideAngular]="{
                     click: handleNow,
                     focus: handleFocus,
-                    blur: handleBlur
+                    blur: handleBlur,
+                    keydown: handleTabOut
                 }"
                 [scope]="this"
                 [disabled]="disabled"
@@ -692,4 +705,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }], tabOutLastPart: [{
                 type: Output
+            }], tabOutNow: [{
+                type: Output
             }] } });