@progress/kendo-angular-dateinputs 16.0.0-develop.21 → 16.0.0-develop.23

package/calendar/calendar.component.d.ts

@@ -628,6 +628,7 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
     private verifyChanges;
     private verifyValue;
     private bindEvents;
+    private setRangeSelectionToValue;
     private emitBlur;
     private emitFocus;
     private handleComponentClick;

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

@@ -638,6 +638,7 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
     private updateButtonState;
     private parseSelectionToValue;
     private setValue;
+    private setRangeSelectionToValue;
     private performRangeSelection;
     private performSelection;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiViewCalendarComponent, never>;

package/esm2020/calendar/calendar.component.mjs

@@ -584,6 +584,12 @@ export class CalendarComponent {
     }
     ngDoCheck() {
         if (this.valueSetter || this.selectionSetter) {
+            if (this.selection === 'range' &&
+                (this.value?.start || this.value?.end) &&
+                this.focusedDate.getTime() !== this.value.start?.getTime() &&
+                this.focusedDate.getTime() !== this.value.end?.getTime()) {
+                this.focusedDate = this.value.start || this.value.end || getToday();
+            }
             this.setValue(this.value);
             this.valueSetter = false;
             this.selectionSetter = false;
@@ -995,7 +1001,15 @@ export class CalendarComponent {
     }
     bindEvents() {
         const element = this.element.nativeElement;
-        this.domEvents.push(this.renderer.listen(element, 'focus', this.handleFocus.bind(this)), this.renderer.listen(element, 'mousedown', preventDefault), this.renderer.listen(element, 'click', this.handleComponentClick.bind(this)), this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)));
+        this.domEvents.push(this.renderer.listen(element, 'focus', this.handleFocus.bind(this)), this.renderer.listen(element, 'mousedown', preventDefault), this.renderer.listen(element, 'click', this.handleComponentClick.bind(this)), this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)), this.renderer.listen(element, 'mouseleave', this.setRangeSelectionToValue.bind(this)));
+    }
+    setRangeSelectionToValue() {
+        if (this.selection === 'range' && this.value) {
+            this.ngZone.run(() => {
+                this.selectionRange = this.value;
+                this.cdr.markForCheck();
+            });
+        }
     }
     emitBlur(args) {
         if (this.pickerService) {
@@ -1118,11 +1132,8 @@ export class CalendarComponent {
                 this.activeRangeEnd = 'start';
                 this.canHover = true;
             }
-            if (this.activeRangeEnd === 'end') {
-                this.focusedDate = this.selectionRange.start || this.selectionRange.end || getToday();
-            }
-            else {
-                this.focusedDate = this.selectionRange.end || this.selectionRange.start || getToday();
+            if (this._value?.end && this._value?.start) {
+                this.canHover = false;
             }
         }
         else {
@@ -1140,6 +1151,7 @@ export class CalendarComponent {
         }
     }
     performRangeSelection(date) {
+        this.focusedDate = date;
         const clonedRangeSelection = Object.assign({}, this.selectionRange);
         const emitValueChange = (this.activeRangeEnd === 'start' && this.value?.start?.getTime() !== date?.getTime()) ||
             (this.activeRangeEnd === 'end' && this.value?.end?.getTime() !== date?.getTime());
@@ -1148,14 +1160,9 @@ export class CalendarComponent {
             this.activeRangeEnd = rangeSelection.activeRangeEnd;
             if (this.canHover && rangeSelection.activeRangeEnd === 'end' && rangeSelection.selectionRange.end?.getTime() === date.getTime()) {
                 this.activeRangeEnd = 'start';
+                rangeSelection.activeRangeEnd = 'start';
             }
-            if ((this.activeRangeEnd === 'end' && rangeSelection.selectionRange.start) ||
-                (this.activeRangeEnd === 'start' && rangeSelection.selectionRange.end)) {
-                this.canHover = true;
-            }
-            else {
-                this.canHover = false;
-            }
+            this.canHover = this.activeRangeEnd === 'end' && rangeSelection.selectionRange.start && !rangeSelection.selectionRange.end;
             if (emitValueChange && (this.value?.start?.getTime() !== rangeSelection.selectionRange?.start?.getTime() ||
                 this.value?.end?.getTime() !== rangeSelection.selectionRange?.end?.getTime())) {
                 this.value = rangeSelection.selectionRange;

package/esm2020/calendar/models/selection.mjs

@@ -24,12 +24,13 @@ export function handleRangeSelection(date, selectionRange, activeRangeEnd, allow
         if (activeRangeEnd === 'start' && date > selectionRange.end ||
             activeRangeEnd === 'end' && date < selectionRange.start) {
             selectionRange = { start: date, end: null };
+            activeRangeEnd = 'end';
         }
         else if (activeRangeEnd === 'start' && date <= selectionRange.end) {
             selectionRange.start = date;
             activeRangeEnd = 'end';
         }
-        else if (activeRangeEnd === 'end' && date >= selectionRange.start) {
+        else if (activeRangeEnd === 'end' && date >= selectionRange.start && date.getTime() !== selectionRange.end?.getTime()) {
             selectionRange.end = date;
             activeRangeEnd = 'start';
         }

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

@@ -587,6 +587,7 @@ export class MultiViewCalendarComponent {
      */
     handleMouseLeave() {
         this.isHovered = false;
+        this.setRangeSelectionToValue();
     }
     /**
      * @hidden
@@ -687,6 +688,12 @@ export class MultiViewCalendarComponent {
     }
     ngDoCheck() {
         if (this.valueSetter || this.selectionSetter) {
+            if (this.selection === 'range' &&
+                (this.value?.start || this.value?.end) &&
+                this.focusedDate.getTime() !== this.value.start?.getTime() &&
+                this.focusedDate.getTime() !== this.value.end?.getTime()) {
+                this.focusedDate = this.value.start || this.value.end || getToday();
+            }
             this.setValue(this.value);
             this.valueSetter = false;
             this.selectionSetter = false;
@@ -1024,11 +1031,8 @@ export class MultiViewCalendarComponent {
                 this.activeRangeEnd = 'start';
                 this.canHover = true;
             }
-            if (this.activeRangeEnd === 'end') {
-                this.focusedDate = this.selectionRange.start || this.selectionRange.end || getToday();
-            }
-            else {
-                this.focusedDate = this.selectionRange.end || this.selectionRange.start || getToday();
+            if (this._value?.end && this._value?.start) {
+                this.canHover = false;
             }
         }
         else {
@@ -1045,7 +1049,14 @@ export class MultiViewCalendarComponent {
             }
         }
     }
+    setRangeSelectionToValue() {
+        if (this.selection === 'range' && this.value) {
+            this.selectionRange = this.value;
+            this.cdr.markForCheck();
+        }
+    }
     performRangeSelection(date) {
+        this.focusedDate = date;
         const clonedRangeSelection = Object.assign({}, this.selectionRange);
         const emitValueChange = (this.activeRangeEnd === 'start' && this.value?.start?.getTime() !== date?.getTime()) ||
             (this.activeRangeEnd === 'end' && this.value?.end?.getTime() !== date?.getTime());
@@ -1054,6 +1065,7 @@ export class MultiViewCalendarComponent {
             this.activeRangeEnd = rangeSelection.activeRangeEnd;
             if (this.canHover && rangeSelection.activeRangeEnd === 'end' && rangeSelection.selectionRange.end?.getTime() === date.getTime()) {
                 this.activeRangeEnd = 'start';
+                rangeSelection.activeRangeEnd = 'start';
             }
             this.canHover = this.activeRangeEnd === 'end' && rangeSelection.selectionRange.start && !rangeSelection.selectionRange.end;
             if (emitValueChange && (this.value?.start?.getTime() !== rangeSelection.selectionRange?.start?.getTime() ||

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: 1715351340,
-    version: '16.0.0-develop.21',
+    publishDate: 1715621291,
+    version: '16.0.0-develop.23',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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

@@ -38,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1715351340,
-    version: '16.0.0-develop.21',
+    publishDate: 1715621291,
+    version: '16.0.0-develop.23',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -3218,7 +3218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 function handleRangeSelection(date, selectionRange, activeRangeEnd, allowReverse = false) {
-    var _a, _b;
+    var _a, _b, _c;
     if ((activeRangeEnd === 'start' && ((_a = selectionRange.start) === null || _a === void 0 ? void 0 : _a.getTime()) === (date === null || date === void 0 ? void 0 : date.getTime()) && ((allowReverse && !selectionRange.end) || !allowReverse)) ||
         (activeRangeEnd === 'end' && ((_b = selectionRange.end) === null || _b === void 0 ? void 0 : _b.getTime()) === (date === null || date === void 0 ? void 0 : date.getTime()))) {
         return { activeRangeEnd: activeRangeEnd, selectionRange: selectionRange };
@@ -3237,12 +3237,13 @@ function handleRangeSelection(date, selectionRange, activeRangeEnd, allowReverse
         if (activeRangeEnd === 'start' && date > selectionRange.end ||
             activeRangeEnd === 'end' && date < selectionRange.start) {
             selectionRange = { start: date, end: null };
+            activeRangeEnd = 'end';
         }
         else if (activeRangeEnd === 'start' && date <= selectionRange.end) {
             selectionRange.start = date;
             activeRangeEnd = 'end';
         }
-        else if (activeRangeEnd === 'end' && date >= selectionRange.start) {
+        else if (activeRangeEnd === 'end' && date >= selectionRange.start && date.getTime() !== ((_c = selectionRange.end) === null || _c === void 0 ? void 0 : _c.getTime())) {
             selectionRange.end = date;
             activeRangeEnd = 'start';
         }
@@ -4085,6 +4086,7 @@ class MultiViewCalendarComponent {
      */
     handleMouseLeave() {
         this.isHovered = false;
+        this.setRangeSelectionToValue();
     }
     /**
      * @hidden
@@ -4184,7 +4186,14 @@ class MultiViewCalendarComponent {
         this.bus.configure(this.bottomViewEnum, this.topViewEnum);
     }
     ngDoCheck() {
+        var _a, _b, _c, _d;
         if (this.valueSetter || this.selectionSetter) {
+            if (this.selection === 'range' &&
+                (((_a = this.value) === null || _a === void 0 ? void 0 : _a.start) || ((_b = this.value) === null || _b === void 0 ? void 0 : _b.end)) &&
+                this.focusedDate.getTime() !== ((_c = this.value.start) === null || _c === void 0 ? void 0 : _c.getTime()) &&
+                this.focusedDate.getTime() !== ((_d = this.value.end) === null || _d === void 0 ? void 0 : _d.getTime())) {
+                this.focusedDate = this.value.start || this.value.end || getToday();
+            }
             this.setValue(this.value);
             this.valueSetter = false;
             this.selectionSetter = false;
@@ -4499,7 +4508,7 @@ class MultiViewCalendarComponent {
         return this.selection === 'single' ? cloneDate(last(selection)) : selection.map(date => cloneDate(date));
     }
     setValue(candidate) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         this.verifyValue(candidate);
         if (candidate === null) {
             this._value = null;
@@ -4524,11 +4533,8 @@ class MultiViewCalendarComponent {
                 this.activeRangeEnd = 'start';
                 this.canHover = true;
             }
-            if (this.activeRangeEnd === 'end') {
-                this.focusedDate = this.selectionRange.start || this.selectionRange.end || getToday();
-            }
-            else {
-                this.focusedDate = this.selectionRange.end || this.selectionRange.start || getToday();
+            if (((_e = this._value) === null || _e === void 0 ? void 0 : _e.end) && ((_f = this._value) === null || _f === void 0 ? void 0 : _f.start)) {
+                this.canHover = false;
             }
         }
         else {
@@ -4545,8 +4551,15 @@ class MultiViewCalendarComponent {
             }
         }
     }
+    setRangeSelectionToValue() {
+        if (this.selection === 'range' && this.value) {
+            this.selectionRange = this.value;
+            this.cdr.markForCheck();
+        }
+    }
     performRangeSelection(date) {
         var _a, _b, _c, _d;
+        this.focusedDate = date;
         const clonedRangeSelection = Object.assign({}, this.selectionRange);
         const emitValueChange = (this.activeRangeEnd === 'start' && ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getTime()) !== (date === null || date === void 0 ? void 0 : date.getTime())) ||
             (this.activeRangeEnd === 'end' && ((_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.end) === null || _d === void 0 ? void 0 : _d.getTime()) !== (date === null || date === void 0 ? void 0 : date.getTime()));
@@ -4556,6 +4569,7 @@ class MultiViewCalendarComponent {
             this.activeRangeEnd = rangeSelection.activeRangeEnd;
             if (this.canHover && rangeSelection.activeRangeEnd === 'end' && ((_a = rangeSelection.selectionRange.end) === null || _a === void 0 ? void 0 : _a.getTime()) === date.getTime()) {
                 this.activeRangeEnd = 'start';
+                rangeSelection.activeRangeEnd = 'start';
             }
             this.canHover = this.activeRangeEnd === 'end' && rangeSelection.selectionRange.start && !rangeSelection.selectionRange.end;
             if (emitValueChange && (((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.getTime()) !== ((_e = (_d = rangeSelection.selectionRange) === null || _d === void 0 ? void 0 : _d.start) === null || _e === void 0 ? void 0 : _e.getTime()) ||
@@ -6912,7 +6926,14 @@ class CalendarComponent {
         this.scrollSyncService.configure(this.activeViewEnum);
     }
     ngDoCheck() {
+        var _a, _b, _c, _d;
         if (this.valueSetter || this.selectionSetter) {
+            if (this.selection === 'range' &&
+                (((_a = this.value) === null || _a === void 0 ? void 0 : _a.start) || ((_b = this.value) === null || _b === void 0 ? void 0 : _b.end)) &&
+                this.focusedDate.getTime() !== ((_c = this.value.start) === null || _c === void 0 ? void 0 : _c.getTime()) &&
+                this.focusedDate.getTime() !== ((_d = this.value.end) === null || _d === void 0 ? void 0 : _d.getTime())) {
+                this.focusedDate = this.value.start || this.value.end || getToday();
+            }
             this.setValue(this.value);
             this.valueSetter = false;
             this.selectionSetter = false;
@@ -7326,7 +7347,15 @@ class CalendarComponent {
     }
     bindEvents() {
         const element = this.element.nativeElement;
-        this.domEvents.push(this.renderer.listen(element, 'focus', this.handleFocus.bind(this)), this.renderer.listen(element, 'mousedown', preventDefault), this.renderer.listen(element, 'click', this.handleComponentClick.bind(this)), this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)));
+        this.domEvents.push(this.renderer.listen(element, 'focus', this.handleFocus.bind(this)), this.renderer.listen(element, 'mousedown', preventDefault), this.renderer.listen(element, 'click', this.handleComponentClick.bind(this)), this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)), this.renderer.listen(element, 'mouseleave', this.setRangeSelectionToValue.bind(this)));
+    }
+    setRangeSelectionToValue() {
+        if (this.selection === 'range' && this.value) {
+            this.ngZone.run(() => {
+                this.selectionRange = this.value;
+                this.cdr.markForCheck();
+            });
+        }
     }
     emitBlur(args) {
         if (this.pickerService) {
@@ -7425,7 +7454,7 @@ class CalendarComponent {
         return this.selection === 'single' ? cloneDate(last(selection)) : selection.map(date => cloneDate(date));
     }
     setValue(candidate) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         this.verifyValue(candidate);
         if (candidate === null) {
             this._value = null;
@@ -7451,11 +7480,8 @@ class CalendarComponent {
                 this.activeRangeEnd = 'start';
                 this.canHover = true;
             }
-            if (this.activeRangeEnd === 'end') {
-                this.focusedDate = this.selectionRange.start || this.selectionRange.end || getToday();
-            }
-            else {
-                this.focusedDate = this.selectionRange.end || this.selectionRange.start || getToday();
+            if (((_e = this._value) === null || _e === void 0 ? void 0 : _e.end) && ((_f = this._value) === null || _f === void 0 ? void 0 : _f.start)) {
+                this.canHover = false;
             }
         }
         else {
@@ -7474,6 +7500,7 @@ class CalendarComponent {
     }
     performRangeSelection(date) {
         var _a, _b, _c, _d;
+        this.focusedDate = date;
         const clonedRangeSelection = Object.assign({}, this.selectionRange);
         const emitValueChange = (this.activeRangeEnd === 'start' && ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getTime()) !== (date === null || date === void 0 ? void 0 : date.getTime())) ||
             (this.activeRangeEnd === 'end' && ((_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.end) === null || _d === void 0 ? void 0 : _d.getTime()) !== (date === null || date === void 0 ? void 0 : date.getTime()));
@@ -7483,14 +7510,9 @@ class CalendarComponent {
             this.activeRangeEnd = rangeSelection.activeRangeEnd;
             if (this.canHover && rangeSelection.activeRangeEnd === 'end' && ((_a = rangeSelection.selectionRange.end) === null || _a === void 0 ? void 0 : _a.getTime()) === date.getTime()) {
                 this.activeRangeEnd = 'start';
+                rangeSelection.activeRangeEnd = 'start';
             }
-            if ((this.activeRangeEnd === 'end' && rangeSelection.selectionRange.start) ||
-                (this.activeRangeEnd === 'start' && rangeSelection.selectionRange.end)) {
-                this.canHover = true;
-            }
-            else {
-                this.canHover = false;
-            }
+            this.canHover = this.activeRangeEnd === 'end' && rangeSelection.selectionRange.start && !rangeSelection.selectionRange.end;
             if (emitValueChange && (((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.getTime()) !== ((_e = (_d = rangeSelection.selectionRange) === null || _d === void 0 ? void 0 : _d.start) === null || _e === void 0 ? void 0 : _e.getTime()) ||
                 ((_g = (_f = this.value) === null || _f === void 0 ? void 0 : _f.end) === null || _g === void 0 ? void 0 : _g.getTime()) !== ((_j = (_h = rangeSelection.selectionRange) === null || _h === void 0 ? void 0 : _h.end) === null || _j === void 0 ? void 0 : _j.getTime()))) {
                 this.value = rangeSelection.selectionRange;

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

@@ -38,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1715351340,
-    version: '16.0.0-develop.21',
+    publishDate: 1715621291,
+    version: '16.0.0-develop.23',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -3236,12 +3236,13 @@ function handleRangeSelection(date, selectionRange, activeRangeEnd, allowReverse
         if (activeRangeEnd === 'start' && date > selectionRange.end ||
             activeRangeEnd === 'end' && date < selectionRange.start) {
             selectionRange = { start: date, end: null };
+            activeRangeEnd = 'end';
         }
         else if (activeRangeEnd === 'start' && date <= selectionRange.end) {
             selectionRange.start = date;
             activeRangeEnd = 'end';
         }
-        else if (activeRangeEnd === 'end' && date >= selectionRange.start) {
+        else if (activeRangeEnd === 'end' && date >= selectionRange.start && date.getTime() !== selectionRange.end?.getTime()) {
             selectionRange.end = date;
             activeRangeEnd = 'start';
         }
@@ -4084,6 +4085,7 @@ class MultiViewCalendarComponent {
      */
     handleMouseLeave() {
         this.isHovered = false;
+        this.setRangeSelectionToValue();
     }
     /**
      * @hidden
@@ -4184,6 +4186,12 @@ class MultiViewCalendarComponent {
     }
     ngDoCheck() {
         if (this.valueSetter || this.selectionSetter) {
+            if (this.selection === 'range' &&
+                (this.value?.start || this.value?.end) &&
+                this.focusedDate.getTime() !== this.value.start?.getTime() &&
+                this.focusedDate.getTime() !== this.value.end?.getTime()) {
+                this.focusedDate = this.value.start || this.value.end || getToday();
+            }
             this.setValue(this.value);
             this.valueSetter = false;
             this.selectionSetter = false;
@@ -4521,11 +4529,8 @@ class MultiViewCalendarComponent {
                 this.activeRangeEnd = 'start';
                 this.canHover = true;
             }
-            if (this.activeRangeEnd === 'end') {
-                this.focusedDate = this.selectionRange.start || this.selectionRange.end || getToday();
-            }
-            else {
-                this.focusedDate = this.selectionRange.end || this.selectionRange.start || getToday();
+            if (this._value?.end && this._value?.start) {
+                this.canHover = false;
             }
         }
         else {
@@ -4542,7 +4547,14 @@ class MultiViewCalendarComponent {
             }
         }
     }
+    setRangeSelectionToValue() {
+        if (this.selection === 'range' && this.value) {
+            this.selectionRange = this.value;
+            this.cdr.markForCheck();
+        }
+    }
     performRangeSelection(date) {
+        this.focusedDate = date;
         const clonedRangeSelection = Object.assign({}, this.selectionRange);
         const emitValueChange = (this.activeRangeEnd === 'start' && this.value?.start?.getTime() !== date?.getTime()) ||
             (this.activeRangeEnd === 'end' && this.value?.end?.getTime() !== date?.getTime());
@@ -4551,6 +4563,7 @@ class MultiViewCalendarComponent {
             this.activeRangeEnd = rangeSelection.activeRangeEnd;
             if (this.canHover && rangeSelection.activeRangeEnd === 'end' && rangeSelection.selectionRange.end?.getTime() === date.getTime()) {
                 this.activeRangeEnd = 'start';
+                rangeSelection.activeRangeEnd = 'start';
             }
             this.canHover = this.activeRangeEnd === 'end' && rangeSelection.selectionRange.start && !rangeSelection.selectionRange.end;
             if (emitValueChange && (this.value?.start?.getTime() !== rangeSelection.selectionRange?.start?.getTime() ||
@@ -6905,6 +6918,12 @@ class CalendarComponent {
     }
     ngDoCheck() {
         if (this.valueSetter || this.selectionSetter) {
+            if (this.selection === 'range' &&
+                (this.value?.start || this.value?.end) &&
+                this.focusedDate.getTime() !== this.value.start?.getTime() &&
+                this.focusedDate.getTime() !== this.value.end?.getTime()) {
+                this.focusedDate = this.value.start || this.value.end || getToday();
+            }
             this.setValue(this.value);
             this.valueSetter = false;
             this.selectionSetter = false;
@@ -7316,7 +7335,15 @@ class CalendarComponent {
     }
     bindEvents() {
         const element = this.element.nativeElement;
-        this.domEvents.push(this.renderer.listen(element, 'focus', this.handleFocus.bind(this)), this.renderer.listen(element, 'mousedown', preventDefault), this.renderer.listen(element, 'click', this.handleComponentClick.bind(this)), this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)));
+        this.domEvents.push(this.renderer.listen(element, 'focus', this.handleFocus.bind(this)), this.renderer.listen(element, 'mousedown', preventDefault), this.renderer.listen(element, 'click', this.handleComponentClick.bind(this)), this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)), this.renderer.listen(element, 'mouseleave', this.setRangeSelectionToValue.bind(this)));
+    }
+    setRangeSelectionToValue() {
+        if (this.selection === 'range' && this.value) {
+            this.ngZone.run(() => {
+                this.selectionRange = this.value;
+                this.cdr.markForCheck();
+            });
+        }
     }
     emitBlur(args) {
         if (this.pickerService) {
@@ -7439,11 +7466,8 @@ class CalendarComponent {
                 this.activeRangeEnd = 'start';
                 this.canHover = true;
             }
-            if (this.activeRangeEnd === 'end') {
-                this.focusedDate = this.selectionRange.start || this.selectionRange.end || getToday();
-            }
-            else {
-                this.focusedDate = this.selectionRange.end || this.selectionRange.start || getToday();
+            if (this._value?.end && this._value?.start) {
+                this.canHover = false;
             }
         }
         else {
@@ -7461,6 +7485,7 @@ class CalendarComponent {
         }
     }
     performRangeSelection(date) {
+        this.focusedDate = date;
         const clonedRangeSelection = Object.assign({}, this.selectionRange);
         const emitValueChange = (this.activeRangeEnd === 'start' && this.value?.start?.getTime() !== date?.getTime()) ||
             (this.activeRangeEnd === 'end' && this.value?.end?.getTime() !== date?.getTime());
@@ -7469,14 +7494,9 @@ class CalendarComponent {
             this.activeRangeEnd = rangeSelection.activeRangeEnd;
             if (this.canHover && rangeSelection.activeRangeEnd === 'end' && rangeSelection.selectionRange.end?.getTime() === date.getTime()) {
                 this.activeRangeEnd = 'start';
+                rangeSelection.activeRangeEnd = 'start';
             }
-            if ((this.activeRangeEnd === 'end' && rangeSelection.selectionRange.start) ||
-                (this.activeRangeEnd === 'start' && rangeSelection.selectionRange.end)) {
-                this.canHover = true;
-            }
-            else {
-                this.canHover = false;
-            }
+            this.canHover = this.activeRangeEnd === 'end' && rangeSelection.selectionRange.start && !rangeSelection.selectionRange.end;
             if (emitValueChange && (this.value?.start?.getTime() !== rangeSelection.selectionRange?.start?.getTime() ||
                 this.value?.end?.getTime() !== rangeSelection.selectionRange?.end?.getTime())) {
                 this.value = rangeSelection.selectionRange;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dateinputs",
-  "version": "16.0.0-develop.21",
+  "version": "16.0.0-develop.23",
   "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.0-develop.21",
-    "@progress/kendo-angular-intl": "16.0.0-develop.21",
-    "@progress/kendo-angular-l10n": "16.0.0-develop.21",
-    "@progress/kendo-angular-icons": "16.0.0-develop.21",
-    "@progress/kendo-angular-popup": "16.0.0-develop.21",
-    "@progress/kendo-angular-navigation": "16.0.0-develop.21",
+    "@progress/kendo-angular-common": "16.0.0-develop.23",
+    "@progress/kendo-angular-intl": "16.0.0-develop.23",
+    "@progress/kendo-angular-l10n": "16.0.0-develop.23",
+    "@progress/kendo-angular-icons": "16.0.0-develop.23",
+    "@progress/kendo-angular-popup": "16.0.0-develop.23",
+    "@progress/kendo-angular-navigation": "16.0.0-develop.23",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "16.0.0-develop.21",
+    "@progress/kendo-angular-schematics": "16.0.0-develop.23",
     "@progress/kendo-common": "^0.2.0",
     "@progress/kendo-date-math": "^1.1.0",
     "@progress/kendo-dateinputs-common": "^0.3.3"

package/schematics/ngAdd/index.js

@@ -4,7 +4,7 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'DateInputsModule', package: 'dateinputs', peerDependencies: {
             // Peer dependency of icons
-            '@progress/kendo-svg-icons': '^2.0.0'
+            '@progress/kendo-svg-icons': '^3.0.0'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }