@progress/kendo-angular-dateinputs 16.0.0-develop.8 → 16.0.0

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

@@ -8,8 +8,8 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import { cloneDate, MS_PER_HOUR, MS_PER_MINUTE, addDays, getDate, isEqual, addDecades, addCenturies, firstDecadeOfCentury, lastDecadeOfCentury, firstYearOfDecade, createDate, lastYearOfDecade, lastMonthOfYear, lastDayOfMonth, durationInCenturies, addYears, durationInDecades, addWeeks, addMonths, firstDayOfMonth, dayOfWeek, durationInMonths, firstMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
-import * as i12 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, EventsModule, ResizeSensorModule, ToggleButtonTabStopModule } from '@progress/kendo-angular-common';
+import * as i1$2 from '@progress/kendo-angular-common';
+import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, isObject, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, EventsModule, ResizeSensorModule, ToggleButtonTabStopModule } from '@progress/kendo-angular-common';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-intl';
@@ -17,16 +17,16 @@ import { localeData, IntlModule } from '@progress/kendo-angular-intl';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Subject, Subscription, ReplaySubject, Observable, combineLatest, of, interval, animationFrameScheduler, fromEvent, EMPTY, from, BehaviorSubject, merge } from 'rxjs';
-import { chevronRightIcon, chevronLeftIcon, caretAltUpIcon, caretAltDownIcon, calendarIcon, xIcon, clockIcon } from '@progress/kendo-svg-icons';
+import { chevronRightIcon, chevronLeftIcon, caretAltUpIcon, xIcon, caretAltDownIcon, calendarIcon, clockIcon } from '@progress/kendo-svg-icons';
 import * as i7 from '@progress/kendo-angular-buttons';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
 import { map, scan, takeWhile, debounceTime, tap, filter } from 'rxjs/operators';
 import { DateInput } from '@progress/kendo-dateinputs-common';
 import * as i6 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
-import * as i1$2 from '@progress/kendo-angular-popup';
+import * as i1$3 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
-import * as i11 from '@progress/kendo-angular-navigation';
+import * as i12 from '@progress/kendo-angular-navigation';
 import { NavigationModule } from '@progress/kendo-angular-navigation';
 import { touchEnabled } from '@progress/kendo-common';
 import { TextBoxModule } from '@progress/kendo-angular-inputs';
@@ -38,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1714212050,
-    version: '16.0.0-develop.8',
+    publishDate: 1715701887,
+    version: '16.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -116,6 +116,10 @@ const currentFocusTarget = (blurArgs) => blurArgs.relatedTarget || document.acti
  * @hidden
  */
 const isPresent = (value) => value !== undefined && value !== null;
+/**
+ * @hidden
+ */
+const isNullOrDate = (value) => value === null || value instanceof Date;
 /**
  * @hidden
  */
@@ -154,7 +158,7 @@ var Keys;
  */
 const selectors = {
     infiniteCalendarTable: '.k-content .k-calendar-table',
-    multiViewCalendarTable: '.k-content.k-calendar-table'
+    multiViewCalendarTable: '.k-calendar-table'
 };
 /**
  * @hidden
@@ -643,7 +647,7 @@ class CenturyViewService {
         return range(0, count).map(i => addCenturies(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$3;
         }
@@ -659,10 +663,30 @@ class CenturyViewService {
                 if (!this.isInRange(cellDate, min, max) || nextCentury) {
                     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: this.value(cellDate),
                     id: `${cellUID}${cellDate.getTime()}`,
@@ -676,7 +700,8 @@ class CenturyViewService {
                     isRangeSplitStart: isRangeMid && this.isEqual(cellDate, firstDate),
                     isToday: this.isEqual(cellDate, today),
                     title: this.cellTitle(cellDate),
-                    value: cellDate
+                    value: cellDate,
+                    allowReverse: allowReverse
                 };
             });
         });
@@ -765,9 +790,9 @@ class CenturyViewService {
         return cellDate;
     }
 }
-CenturyViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CenturyViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CenturyViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CenturyViewService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CenturyViewService, decorators: [{
+CenturyViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CenturyViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CenturyViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CenturyViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CenturyViewService, decorators: [{
             type: Injectable
         }] });
 
@@ -829,7 +854,7 @@ class DecadeViewService {
         return range(0, count).map(i => addDecades(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$2;
         }
@@ -845,10 +870,30 @@ class DecadeViewService {
                 if (!this.isInRange(cellDate, min, max) || nextDecade) {
                     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: this.value(cellDate),
                     id: `${cellUID}${cellDate.getTime()}`,
@@ -862,7 +907,8 @@ class DecadeViewService {
                     isRangeSplitStart: isRangeMid && this.isEqual(cellDate, firstDate),
                     isToday: this.isEqual(cellDate, today),
                     title: this.cellTitle(cellDate),
-                    value: cellDate
+                    value: cellDate,
+                    allowReverse: allowReverse
                 };
             });
         });
@@ -950,9 +996,9 @@ class DecadeViewService {
         return cellDate;
     }
 }
-DecadeViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DecadeViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DecadeViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DecadeViewService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DecadeViewService, decorators: [{
+DecadeViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DecadeViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DecadeViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DecadeViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DecadeViewService, decorators: [{
             type: Injectable
         }] });
 
@@ -995,7 +1041,7 @@ class MonthViewService {
         return range(0, count).map(i => addMonths(start, i));
     }
     data(options) {
-        const { cellUID, focusedDate, isActiveView, max, min, selectedDates, selectionRange = EMPTY_SELECTIONRANGE, viewDate, isDateDisabled = () => false } = options;
+        const { cellUID, focusedDate, isActiveView, max, min, selectedDates, selectionRange = EMPTY_SELECTIONRANGE, viewDate, isDateDisabled = () => false, allowReverse } = options;
         if (!viewDate) {
             return EMPTY_DATA$1;
         }
@@ -1017,10 +1063,30 @@ class MonthViewService {
                 if (outOfRange) {
                     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: this.value(cellDate),
                     id: `${cellUID}${otherMonth ? cellDate.getTime() + '1' : cellDate.getTime()}`,
@@ -1036,7 +1102,8 @@ class MonthViewService {
                     title: this.cellTitle(cellDate),
                     value: cellDate,
                     isDisabled: isDateDisabled(cellDate),
-                    isOtherMonth: otherMonth
+                    isOtherMonth: otherMonth,
+                    allowReverse: allowReverse
                 };
             });
         });
@@ -1136,9 +1203,9 @@ class MonthViewService {
         return this._intlService.dateFormatNames({ nameType: 'wide', type: 'months' });
     }
 }
-MonthViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MonthViewService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-MonthViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MonthViewService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MonthViewService, decorators: [{
+MonthViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthViewService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+MonthViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthViewService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
@@ -1181,7 +1248,7 @@ 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;
         }
@@ -1199,10 +1266,30 @@ 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()}`,
@@ -1216,7 +1303,8 @@ class YearViewService {
                     isRangeSplitStart: isRangeMid && this.isEqual(cellDate, firstDate),
                     isToday: this.isEqual(cellDate, today),
                     title: this.cellTitle(cellDate),
-                    value: cellDate
+                    value: cellDate,
+                    allowReverse: allowReverse
                 };
             });
         });
@@ -1303,9 +1391,9 @@ class YearViewService {
         return cellDate;
     }
 }
-YearViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: YearViewService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-YearViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: YearViewService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: YearViewService, decorators: [{
+YearViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: YearViewService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+YearViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: YearViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: YearViewService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
@@ -1374,9 +1462,9 @@ class BusViewService {
         this.viewChanged.emit({ view: candidate });
     }
 }
-BusViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BusViewService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-BusViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BusViewService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BusViewService, decorators: [{
+BusViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BusViewService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+BusViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BusViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BusViewService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
@@ -1392,9 +1480,9 @@ class WeekNamesService {
         return includeWeekNumber ? [''].concat(weekNames) : weekNames;
     }
 }
-WeekNamesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WeekNamesService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-WeekNamesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WeekNamesService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WeekNamesService, decorators: [{
+WeekNamesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WeekNamesService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+WeekNamesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WeekNamesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WeekNamesService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
@@ -1477,9 +1565,9 @@ class KForOf {
         }
     }
 }
-KForOf.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: KForOf, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive });
-KForOf.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: KForOf, selector: "[kFor][kForOf]", inputs: { kForOf: "kForOf", kForTrackBy: "kForTrackBy", kForTemplate: "kForTemplate" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: KForOf, decorators: [{
+KForOf.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KForOf, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive });
+KForOf.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: KForOf, selector: "[kFor][kForOf]", inputs: { kForOf: "kForOf", kForTrackBy: "kForTrackBy", kForTemplate: "kForTemplate" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KForOf, decorators: [{
             type: Directive,
             args: [{ selector: '[kFor][kForOf]' }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.IterableDiffers }]; }, propDecorators: { kForOf: [{
@@ -1571,9 +1659,9 @@ class DisabledDatesService {
         this.changes.next();
     }
 }
-DisabledDatesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DisabledDatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DisabledDatesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DisabledDatesService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DisabledDatesService, decorators: [{
+DisabledDatesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DisabledDatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DisabledDatesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DisabledDatesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DisabledDatesService, decorators: [{
             type: Injectable
         }] });
 
@@ -1727,7 +1815,8 @@ class ViewComponent {
             selectionRange: this.selectionRange,
             viewDate: viewDate,
             isDateDisabled: this.disabledDatesService.isDateDisabled,
-            direction: this.direction
+            direction: this.direction,
+            allowReverse: this.allowReverse
         });
     }
     intlChange() {
@@ -1792,8 +1881,8 @@ class ViewComponent {
         return this.data[rowIndex][cellIndex];
     }
 }
-ViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ViewComponent, deps: [{ token: BusViewService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewComponent, deps: [{ token: BusViewService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
+ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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">
@@ -1841,7 +1930,7 @@ ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
         </ng-container>
     </tr>
   `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line
@@ -1895,7 +1984,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     </tr>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i1.IntlService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: DisabledDatesService }]; }, propDecorators: { showOtherMonthDays: [{
+        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i1.IntlService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: DisabledDatesService }]; }, propDecorators: { allowReverse: [{
+                type: Input
+            }], showOtherMonthDays: [{
                 type: Input
             }], direction: [{
                 type: Input
@@ -2201,12 +2292,12 @@ class HorizontalViewListComponent {
         }
     }
 }
-HorizontalViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HorizontalViewListComponent, deps: [{ token: BusViewService }, { token: i1.IntlService }, { token: WeekNamesService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { showOtherMonthDays: "showOtherMonthDays", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", activeRangeEnd: "activeRangeEnd", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectionRange: "selectionRange", selectedDates: "selectedDates", views: "views", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", orientation: "orientation", activeDescendant: "activeDescendant", tabIndex: "tabIndex", disabled: "disabled", id: "id", weekDaysFormat: "weekDaysFormat", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { listeners: { "focus": "handleMultiViewCalendarFocus()", "blur": "handleMultiViewCalendarBlur($event)" }, properties: { "class.k-calendar-view": "this.getComponentClass", "class.k-align-items-start": "this.getComponentClass", "class.k-justify-content-center": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass", "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, usesOnChanges: true, ngImport: i0, template: `
+HorizontalViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HorizontalViewListComponent, deps: [{ token: BusViewService }, { token: i1.IntlService }, { token: WeekNamesService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { showOtherMonthDays: "showOtherMonthDays", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", allowReverse: "allowReverse", activeRangeEnd: "activeRangeEnd", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectionRange: "selectionRange", selectedDates: "selectedDates", views: "views", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", orientation: "orientation", activeDescendant: "activeDescendant", tabIndex: "tabIndex", disabled: "disabled", id: "id", weekDaysFormat: "weekDaysFormat", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { listeners: { "focus": "handleMultiViewCalendarFocus()", "blur": "handleMultiViewCalendarBlur($event)" }, properties: { "class.k-calendar-view": "this.getComponentClass", "class.k-align-items-start": "this.getComponentClass", "class.k-justify-content-center": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass", "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #tableTemplate let-date="date" let-class="className">
             <table
                 [attr.role]="views >= 2 ? 'none' : 'grid'"
-                class="k-content k-calendar-table"
+                class="k-calendar-table"
                 [ngClass]="class"
                 [attr.aria-labelledby]="id"
                 [attr.aria-activedescendant]="getActiveDescendant"
@@ -2228,6 +2319,7 @@ HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
                 <tbody
                     class="k-calendar-tbody"
                     kendoCalendarView
+                    [allowReverse]="allowReverse"
                     [showOtherMonthDays]="showOtherMonthDays"
                     role="rowgroup"
                     direction="horizontal"
@@ -2284,8 +2376,8 @@ HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             }"
         >
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HorizontalViewListComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HorizontalViewListComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2294,7 +2386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         <ng-template #tableTemplate let-date="date" let-class="className">
             <table
                 [attr.role]="views >= 2 ? 'none' : 'grid'"
-                class="k-content k-calendar-table"
+                class="k-calendar-table"
                 [ngClass]="class"
                 [attr.aria-labelledby]="id"
                 [attr.aria-activedescendant]="getActiveDescendant"
@@ -2316,6 +2408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 <tbody
                     class="k-calendar-tbody"
                     kendoCalendarView
+                    [allowReverse]="allowReverse"
                     [showOtherMonthDays]="showOtherMonthDays"
                     role="rowgroup"
                     direction="horizontal"
@@ -2374,18 +2467,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i1.IntlService }, { type: WeekNamesService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { showOtherMonthDays: [{
-                type: Input
-            }], handleMultiViewCalendarFocus: [{
+        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i1.IntlService }, { type: WeekNamesService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { handleMultiViewCalendarFocus: [{
                 type: HostListener,
                 args: ["focus"]
             }], handleMultiViewCalendarBlur: [{
                 type: HostListener,
                 args: ["blur", ['$event']]
+            }], showOtherMonthDays: [{
+                type: Input
             }], cellTemplateRef: [{
                 type: Input
             }], weekNumberTemplateRef: [{
                 type: Input
+            }], allowReverse: [{
+                type: Input
             }], activeRangeEnd: [{
                 type: Input
             }], activeView: [{
@@ -2508,9 +2603,6 @@ class HeaderComponent {
         this.getComponentClass = true;
         this.subscriptions = new Subscription();
     }
-    get horizontalHostClass() {
-        return this.orientation === 'horizontal';
-    }
     get verticalHostClass() {
         return this.orientation === 'vertical';
     }
@@ -2584,19 +2676,24 @@ class HeaderComponent {
         this.cdr.markForCheck();
     }
 }
-HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, deps: [{ token: BusViewService }, { token: i0.ChangeDetectorRef }, { token: i1$1.LocalizationService }, { token: i1.IntlService }, { token: DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", titleTemplateRef: "titleTemplateRef", headerTemplateRef: "headerTemplateRef", isPrevDisabled: "isPrevDisabled", isNextDisabled: "isNextDisabled", showNavigationButtons: "showNavigationButtons", orientation: "orientation", id: "id" }, outputs: { todayButtonClick: "todayButtonClick", prevButtonClick: "prevButtonClick", nextButtonClick: "nextButtonClick" }, host: { properties: { "class.k-calendar-header": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass" } }, usesOnChanges: true, ngImport: i0, template: `
+HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderComponent, deps: [{ token: BusViewService }, { token: i0.ChangeDetectorRef }, { token: i1$1.LocalizationService }, { token: i1.IntlService }, { token: DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", titleTemplateRef: "titleTemplateRef", headerTemplateRef: "headerTemplateRef", isPrevDisabled: "isPrevDisabled", isNextDisabled: "isNextDisabled", showNavigationButtons: "showNavigationButtons", orientation: "orientation", id: "id", size: "size" }, outputs: { todayButtonClick: "todayButtonClick", prevButtonClick: "prevButtonClick", nextButtonClick: "nextButtonClick" }, host: { properties: { "class.k-calendar-header": "this.getComponentClass", "class.k-vstack": "this.verticalHostClass" } }, usesOnChanges: true, ngImport: i0, template: `
     <ng-template *ngIf="headerTemplateRef; else defaultRendering" 
                 [ngTemplateOutlet]="headerTemplateRef"
                 [ngTemplateOutletContext]="{ title: title, activeView: activeViewValue, date: currentDate }">
     </ng-template>
     <ng-template #defaultRendering>
-        <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title"
+        <button 
+            kendoButton
+            class="k-calendar-title"
             role="button"
             [id]="id"
+            type="button"
+            fillMode="flat"
+            [size]="size"
+            themeColor="primary"
             tabindex="-1"
-            [class.k-disabled]="!navigate"
-            [attr.aria-disabled]="isDisabled()"
+            [disabled]="!navigate"
             [kendoEventsOutsideAngular]="{
                 click: handleNavigation
             }"
@@ -2608,13 +2705,14 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                 [ngTemplateOutlet]="titleTemplateRef"
                 [ngTemplateOutletContext]="{ $implicit: title, activeView: activeViewValue, date: currentDate }"
             ></ng-template>
-        </span>
+        </button>
         <span class="k-spacer"></span>
         <span class="k-calendar-nav k-hstack">
             <button
                 *ngIf="showNavigationButtons"
                 kendoButton
                 fillMode="flat"
+                [size]="size"
                 [svgIcon]="chevronLeftIcon"
                 icon="chevron-left"
                 tabindex="-1"
@@ -2627,9 +2725,14 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
             >
             </button>
             <button
-                class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md"
+                kendoButton
+                class="k-calendar-nav-today"
                 tabindex="-1"
-                [class.k-disabled]="!todayAvailable"
+                themeColor="primary"
+                fillMode="flat"
+                role="link"
+                [size]="size"
+                [disabled]="!todayAvailable"
                 [kendoEventsOutsideAngular]="{
                     click: handleTodayClick
                 }"
@@ -2655,8 +2758,8 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
             </button>
         </span>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i7.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, decorators: [{
+`, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i7.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-calendar-header',
@@ -2666,12 +2769,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 [ngTemplateOutletContext]="{ title: title, activeView: activeViewValue, date: currentDate }">
     </ng-template>
     <ng-template #defaultRendering>
-        <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title"
+        <button 
+            kendoButton
+            class="k-calendar-title"
             role="button"
             [id]="id"
+            type="button"
+            fillMode="flat"
+            [size]="size"
+            themeColor="primary"
             tabindex="-1"
-            [class.k-disabled]="!navigate"
-            [attr.aria-disabled]="isDisabled()"
+            [disabled]="!navigate"
             [kendoEventsOutsideAngular]="{
                 click: handleNavigation
             }"
@@ -2683,13 +2791,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 [ngTemplateOutlet]="titleTemplateRef"
                 [ngTemplateOutletContext]="{ $implicit: title, activeView: activeViewValue, date: currentDate }"
             ></ng-template>
-        </span>
+        </button>
         <span class="k-spacer"></span>
         <span class="k-calendar-nav k-hstack">
             <button
                 *ngIf="showNavigationButtons"
                 kendoButton
                 fillMode="flat"
+                [size]="size"
                 [svgIcon]="chevronLeftIcon"
                 icon="chevron-left"
                 tabindex="-1"
@@ -2702,9 +2811,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             >
             </button>
             <button
-                class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md"
+                kendoButton
+                class="k-calendar-nav-today"
                 tabindex="-1"
-                [class.k-disabled]="!todayAvailable"
+                themeColor="primary"
+                fillMode="flat"
+                role="link"
+                [size]="size"
+                [disabled]="!todayAvailable"
                 [kendoEventsOutsideAngular]="{
                     click: handleTodayClick
                 }"
@@ -2730,7 +2844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             </button>
         </span>
     </ng-template>
-  `
+`
                 }]
         }], ctorParameters: function () { return [{ type: BusViewService }, { type: i0.ChangeDetectorRef }, { type: i1$1.LocalizationService }, { type: i1.IntlService }, { type: DisabledDatesService }]; }, propDecorators: { activeView: [{
                 type: Input
@@ -2756,6 +2870,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], id: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], todayButtonClick: [{
                 type: Output
             }], prevButtonClick: [{
@@ -2765,9 +2881,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }], getComponentClass: [{
                 type: HostBinding,
                 args: ["class.k-calendar-header"]
-            }], horizontalHostClass: [{
-                type: HostBinding,
-                args: ["class.k-hstack"]
             }], verticalHostClass: [{
                 type: HostBinding,
                 args: ["class.k-vstack"]
@@ -2818,9 +2931,9 @@ class SelectionService {
         return selectedDates.some(item => isEqual(item, date));
     }
 }
-SelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectionService, deps: [{ token: BusViewService }], target: i0.ɵɵFactoryTarget.Injectable });
-SelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectionService, decorators: [{
+SelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectionService, deps: [{ token: BusViewService }], target: i0.ɵɵFactoryTarget.Injectable });
+SelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectionService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectionService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: BusViewService }]; } });
 
@@ -2856,9 +2969,9 @@ class CellTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-CellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: CellTemplateDirective, selector: "[kendoCalendarCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CellTemplateDirective, decorators: [{
+CellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CellTemplateDirective, selector: "[kendoCalendarCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarCellTemplate]'
@@ -2894,9 +3007,9 @@ class MonthCellTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-MonthCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MonthCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-MonthCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: MonthCellTemplateDirective, selector: "[kendoCalendarMonthCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MonthCellTemplateDirective, decorators: [{
+MonthCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+MonthCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MonthCellTemplateDirective, selector: "[kendoCalendarMonthCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarMonthCellTemplate]'
@@ -2935,9 +3048,9 @@ class YearCellTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-YearCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: YearCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-YearCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: YearCellTemplateDirective, selector: "[kendoCalendarYearCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: YearCellTemplateDirective, decorators: [{
+YearCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: YearCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+YearCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: YearCellTemplateDirective, selector: "[kendoCalendarYearCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: YearCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarYearCellTemplate]'
@@ -2975,9 +3088,9 @@ class DecadeCellTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-DecadeCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DecadeCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-DecadeCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DecadeCellTemplateDirective, selector: "[kendoCalendarDecadeCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DecadeCellTemplateDirective, decorators: [{
+DecadeCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DecadeCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+DecadeCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DecadeCellTemplateDirective, selector: "[kendoCalendarDecadeCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DecadeCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarDecadeCellTemplate]'
@@ -3015,9 +3128,9 @@ class CenturyCellTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-CenturyCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CenturyCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-CenturyCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: CenturyCellTemplateDirective, selector: "[kendoCalendarCenturyCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CenturyCellTemplateDirective, decorators: [{
+CenturyCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CenturyCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+CenturyCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CenturyCellTemplateDirective, selector: "[kendoCalendarCenturyCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CenturyCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarCenturyCellTemplate]'
@@ -3053,9 +3166,9 @@ class WeekNumberCellTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-WeekNumberCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WeekNumberCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-WeekNumberCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: WeekNumberCellTemplateDirective, selector: "[kendoCalendarWeekNumberCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WeekNumberCellTemplateDirective, decorators: [{
+WeekNumberCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WeekNumberCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+WeekNumberCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: WeekNumberCellTemplateDirective, selector: "[kendoCalendarWeekNumberCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WeekNumberCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarWeekNumberCellTemplate]'
@@ -3092,15 +3205,52 @@ class HeaderTitleTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-HeaderTitleTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderTitleTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-HeaderTitleTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: HeaderTitleTemplateDirective, selector: "[kendoCalendarHeaderTitleTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderTitleTemplateDirective, decorators: [{
+HeaderTitleTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderTitleTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+HeaderTitleTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: HeaderTitleTemplateDirective, selector: "[kendoCalendarHeaderTitleTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderTitleTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarHeaderTitleTemplate]'
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
+/**
+ * @hidden
+ */
+function handleRangeSelection(date, selectionRange, activeRangeEnd, allowReverse = false) {
+    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 };
+    }
+    if (allowReverse) {
+        if (activeRangeEnd === 'start') {
+            selectionRange.start = date;
+            activeRangeEnd = 'end';
+        }
+        else if (activeRangeEnd === 'end') {
+            selectionRange.end = date;
+            activeRangeEnd = 'start';
+        }
+    }
+    if (!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 && date.getTime() !== ((_c = selectionRange.end) === null || _c === void 0 ? void 0 : _c.getTime())) {
+            selectionRange.end = date;
+            activeRangeEnd = 'start';
+        }
+    }
+    return { activeRangeEnd: activeRangeEnd, selectionRange: selectionRange };
+}
+
 /**
  * @hidden
  */
@@ -3197,9 +3347,9 @@ class NavigationService {
         return service.move(value, action);
     }
 }
-NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationService, deps: [{ token: BusViewService }], target: i0.ɵɵFactoryTarget.Injectable });
-NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationService, decorators: [{
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, deps: [{ token: BusViewService }], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: BusViewService }]; } });
 
@@ -3233,9 +3383,9 @@ class HeaderTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-HeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: HeaderTemplateDirective, selector: "[kendoCalendarHeaderTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
+HeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: HeaderTemplateDirective, selector: "[kendoCalendarHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarHeaderTemplate]'
@@ -3271,9 +3421,9 @@ class FooterTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-FooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: FooterTemplateDirective, selector: "[kendoCalendarFooterTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FooterTemplateDirective, decorators: [{
+FooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FooterTemplateDirective, selector: "[kendoCalendarFooterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarFooterTemplate]'
@@ -3290,8 +3440,8 @@ class FooterComponent {
         this.getToday = getToday;
     }
 }
-FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FooterComponent, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Component });
-FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: FooterComponent, selector: "kendo-calendar-footer", inputs: { footerTemplateRef: "footerTemplateRef", activeViewValue: "activeViewValue", currentDate: "currentDate" }, host: { properties: { "class.k-calendar-footer": "this.showFooter" } }, ngImport: i0, template: `
+FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FooterComponent, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Component });
+FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FooterComponent, selector: "kendo-calendar-footer", inputs: { footerTemplateRef: "footerTemplateRef", activeViewValue: "activeViewValue", currentDate: "currentDate" }, host: { properties: { "class.k-calendar-footer": "this.showFooter" } }, ngImport: i0, template: `
     <ng-template *ngIf="footerTemplateRef; else defaultRendering"
         [ngTemplateOutlet]="footerTemplateRef"
         [ngTemplateOutletContext]="{ activeView: activeViewValue, date: currentDate }">
@@ -3307,7 +3457,7 @@ FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         </button>
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-calendar-footer',
@@ -3344,9 +3494,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  */
 class Messages extends ComponentMessages {
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: Messages, selector: "kendo-multiview-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: Messages, decorators: [{
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: Messages, selector: "kendo-multiview-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -3371,14 +3521,14 @@ class MultiViewCalendarLocalizedMessagesDirective extends Messages {
         this.service = service;
     }
 }
-MultiViewCalendarLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-MultiViewCalendarLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]", providers: [
+MultiViewCalendarLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+MultiViewCalendarLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => MultiViewCalendarLocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarLocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarLocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -3447,6 +3597,7 @@ class MultiViewCalendarComponent {
          * Determines whether to display the calendar header.
          */
         this.showCalendarHeader = true;
+        this._size = DEFAULT_SIZE;
         /**
          * Toggles the visibility of the footer.
          * @default false
@@ -3462,15 +3613,14 @@ class MultiViewCalendarComponent {
          * ([see example]({% slug disabled_dates_multiviewcalendar %}#toc-validation)).
          */
         this.disabledDatesRangeValidation = false;
+        this._selection = 'single';
         /**
-         * Sets the Calendar selection mode
-         * ([see example]({% slug multiple_selection_multiviewcalendar %})).
+         * 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.
          *
-         * The available values are:
-         * * `single` (default)
-         * * `multiple`
+         * @default false
          */
-        this.selection = 'single';
+        this.allowReverse = false;
         /**
          * Sets or gets the `disabled` property of the Calendar and
          * determines whether the component is active
@@ -3565,6 +3715,11 @@ class MultiViewCalendarComponent {
          * ([see example](slug:events_multiviewcalendar)).
          */
         this.valueChange = new EventEmitter();
+        /**
+         * @hidden
+         * Fires when the range selection changes.
+         */
+        this.rangeSelectionChange = new EventEmitter();
         /**
          * Fires each time the MultiViewCalendar gets blurred
          * ([see example](slug:events_multiviewcalendar)).
@@ -3598,9 +3753,15 @@ class MultiViewCalendarComponent {
         this.prevView = Action.PrevView;
         this.nextView = Action.NextView;
         this.selectedDates = [];
+        this.shouldHoverWhenNoStart = false;
+        this.canHover = false;
+        this.changes = {};
+        this.valueSetter = false;
+        this.selectionSetter = false;
         this._min = new Date(MIN_DATE);
         this._max = new Date(MAX_DATE);
         this._focusedDate = getToday();
+        this._selectionRange = { start: null, end: null };
         this.resolvedPromise = Promise.resolve();
         this.onControlChange = noop$2;
         this.onControlTouched = noop$2;
@@ -3609,9 +3770,32 @@ class MultiViewCalendarComponent {
         this.maxValidateFn = noop$2;
         this.disabledDatesRangeValidateFn = noop$2;
         this.subscriptions = new Subscription();
-        this.setClasses(element.nativeElement);
         this.id = `kendo-multiviewcalendarid-${this.bus.calendarId}-`;
     }
+    /**
+     * @hidden
+     *
+     * TODO: Make visible when the Infinite Calendar is fixed to set properly the size option.
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
+     *
+     */
+    set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.renderer.removeClass(this.element.nativeElement, getSizeClass('calendar', this.size));
+        if (newSize !== 'none') {
+            this.renderer.addClass(this.element.nativeElement, getSizeClass('calendar', newSize));
+        }
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
     /**
      * Sets or gets the `focusedDate` property of the Calendar and
      * defines the focused date of the component
@@ -3665,29 +3849,37 @@ class MultiViewCalendarComponent {
     get max() {
         return this._max;
     }
+    /**
+     * Sets the Calendar selection mode
+     * ([see example]({% slug multiple_selection_multiviewcalendar %})).
+     *
+     * The available values are:
+     * * `single` (default)
+     * * `multiple`
+     * * `range`
+     */
+    set selection(_selection) {
+        this.selectionSetter = true;
+        this._selection = _selection;
+    }
+    get selection() {
+        return this._selection;
+    }
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
      * > The `value` has to be a valid
      * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
-     * instance when in `single` selection mode or an array of valid JavaScript Date instances when in `multiple` selection mode.
+     * instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
+     * an object of type `SelectionRange` when in `range` selection mode.
      */
+    set value(candidate) {
+        this.valueSetter = true;
+        this._value = candidate;
+    }
     get value() {
         return this._value;
     }
-    set value(candidate) {
-        this.verifyValue(candidate);
-        this._value = Array.isArray(candidate) ?
-            candidate.filter(date => isPresent(date)).map(element => cloneDate(element)) :
-            cloneDate(candidate);
-        const selection = [].concat(candidate).filter(date => isPresent(date)).map(date => cloneDate(date));
-        if (!areDatesEqual(selection, this.selectedDates)) {
-            const lastSelected = last(selection);
-            this.rangePivot = cloneDate(lastSelected);
-            this.focusedDate = cloneDate(lastSelected) || this.focusedDate;
-            this.selectedDates = selection;
-        }
-    }
     /**
      * @hidden
      */
@@ -3704,10 +3896,23 @@ class MultiViewCalendarComponent {
     set disabledDates(value) {
         this.disabledDatesService.initialize(value);
     }
+    /**
+     * Specify, which end of the defined selection range should be marked as active.
+     *
+     * > Value will be ignored if the selection range is undefined.
+     * > If range selection is used then the default value is 'start'.
+     */
+    set activeRangeEnd(_activeRangeEnd) {
+        this._activeRangeEnd = _activeRangeEnd;
+    }
+    get activeRangeEnd() {
+        return (this.selection === 'range' && !this._activeRangeEnd) ? 'start' : this._activeRangeEnd;
+    }
     /**
      * Sets or gets the `selectionRange` property of the Calendar and
      * defines the selection range of the component
      * ([see example]({% slug dates_multiviewcalendar %}#toc-selection-range)).
+     * > We recommend using the `value` property as it now supports `range` selection.
      */
     set selectionRange(range) {
         this._selectionRange = range;
@@ -3881,6 +4086,7 @@ class MultiViewCalendarComponent {
      */
     handleMouseLeave() {
         this.isHovered = false;
+        this.setRangeSelectionToValue();
     }
     /**
      * @hidden
@@ -3931,8 +4137,13 @@ class MultiViewCalendarComponent {
             return;
         }
         else if (onEnterKeyPress) {
-            this.selectionService.lastClicked = this.focusedDate;
-            this.performSelection(this.focusedDate, event);
+            if (this.selection !== 'range') {
+                this.selectionService.lastClicked = this.focusedDate;
+                this.performSelection(this.focusedDate, event);
+            }
+            else {
+                this.performRangeSelection(this.focusedDate);
+            }
         }
         if (this.views >= 2) {
             if ((escKey || (altKey && onArrowUpPress))) {
@@ -3955,12 +4166,13 @@ class MultiViewCalendarComponent {
         if (!isSameView) {
             this.emitNavigate(this.focusedDate);
         }
-        if (isArrowWithShiftPressed(event)) {
+        if (isArrowWithShiftPressed(event) && this.selection !== 'range') {
             event['anyArrow'] = true;
             this.performSelection(this.focusedDate, event);
         }
     }
     ngOnInit() {
+        this.setClasses(this.element.nativeElement);
         this.subscriptions.add(this.bus.viewChanged.subscribe(({ view }) => {
             this.activeView = CalendarViewEnum[view];
             this.activeViewChange.emit(this.activeView);
@@ -3969,21 +4181,37 @@ class MultiViewCalendarComponent {
         }));
     }
     ngOnChanges(changes) {
+        this.changes = changes;
         this.verifyChanges();
         this.bus.configure(this.bottomViewEnum, this.topViewEnum);
-        if (hasExistingValue(changes, 'focusedDate')) {
-            const focusedDate = changes.focusedDate.currentValue;
+    }
+    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;
+        }
+        if (hasExistingValue(this.changes, 'focusedDate')) {
+            const focusedDate = this.changes.focusedDate.currentValue;
             this.focusedDate = dateInRange(focusedDate, this.min, this.max);
         }
-        if (changes.min || changes.max || changes.rangeValidation || changes.disabledDates || changes.disabledDatesRangeValidation) {
+        if (this.changes.min || this.changes.max || this.changes.rangeValidation || this.changes.disabledDates || this.changes.disabledDatesRangeValidation) {
             this.minValidateFn = this.rangeValidation ? minValidator(this.min) : noop$2;
             this.maxValidateFn = this.rangeValidation ? maxValidator(this.max) : noop$2;
             this.disabledDatesRangeValidateFn = this.disabledDatesRangeValidation ? disabledDatesRangeValidator(this.disabledDatesService.isDateDisabled) : noop$2;
             this.onValidatorChange();
         }
-        if (changes.min || changes.max || changes.focusedDate || changes.activeView) {
+        if (this.changes.min || this.changes.max || this.changes.focusedDate || this.changes.activeView) {
             this.updateButtonState();
         }
+        this.changes = {};
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -4021,7 +4249,7 @@ class MultiViewCalendarComponent {
             return;
         }
         const activeElement = this.views >= 2 ? this.element.nativeElement.querySelector('.k-calendar-view') :
-            this.element.nativeElement.querySelector('.k-content.k-calendar-table');
+            this.element.nativeElement.querySelector('.k-calendar-table');
         activeElement.blur();
     }
     /**
@@ -4042,11 +4270,48 @@ class MultiViewCalendarComponent {
         if (this.disabledDatesService.isDateDisabled(this.focusedDate)) {
             return;
         }
+        if (this.selection === 'range') {
+            return;
+        }
         this.selectedDates = availableDates.map(date => cloneDate(date));
         this.value = this.parseSelectionToValue(availableDates);
         this.onControlChange(this.parseSelectionToValue(availableDates));
         this.valueChange.emit(this.parseSelectionToValue(availableDates));
     }
+    /**
+     * @hidden
+     */
+    onCellEnter(cellEnter, date) {
+        this.emitCellEvent(cellEnter, date);
+        if (this.selection === 'range' && (this.canHover || this.shouldHoverWhenNoStart)) {
+            this.zone.run(() => {
+                if (this.canHover && !this.shouldHoverWhenNoStart) {
+                    if (this.allowReverse) {
+                        if (this.activeRangeEnd === 'end' && this.selectionRange.start) {
+                            this.selectionRange = { start: this.selectionRange.start, end: date };
+                        }
+                        if (this.activeRangeEnd === 'start' && this.selectionRange.end) {
+                            this.selectionRange = { start: date, end: this.selectionRange.end };
+                        }
+                    }
+                    else {
+                        if (this.activeRangeEnd === 'end' && this.selectionRange.start && date >= this.selectionRange.start) {
+                            this.selectionRange = { start: this.selectionRange.start, end: date };
+                        }
+                        if (this.selectionRange.start && date < this.selectionRange.start) {
+                            this.selectionRange = { start: this.selectionRange.start, end: null };
+                        }
+                    }
+                }
+                else if (this.shouldHoverWhenNoStart && date <= this.selectionRange.end) {
+                    this.selectionRange = { start: date, end: this.selectionRange.end };
+                }
+                else {
+                    this.selectionRange = { start: null, end: this.selectionRange.end };
+                }
+            });
+        }
+    }
     /**
      * @hidden
      */
@@ -4151,8 +4416,13 @@ class MultiViewCalendarComponent {
      * @hidden
      */
     handleCellClick({ date, modifiers }) {
-        this.selectionService.lastClicked = date;
-        this.performSelection(date, modifiers);
+        if (this.selection === 'range') {
+            this.performRangeSelection(date);
+        }
+        else {
+            this.selectionService.lastClicked = date;
+            this.performSelection(date, modifiers);
+        }
         const isSameView = this.bus.service(this.activeViewEnum).isInArray(this.focusedDate, this.viewList.dates);
         if (!isSameView) {
             this.emitNavigate(this.focusedDate);
@@ -4166,16 +4436,32 @@ class MultiViewCalendarComponent {
             return;
         }
         this.zone.run(() => {
-            this.handleDateChange({
-                selectedDates: dates,
-                focusedDate: last(dates)
-            });
+            var _a, _b;
+            if (this.selection === 'multiple') {
+                this.handleDateChange({
+                    selectedDates: dates,
+                    focusedDate: last(dates),
+                });
+            }
+            if (this.selection === 'range') {
+                this.activeRangeEnd = 'start';
+                const shouldEmitValueChange = ((_a = this.selectionRange.start) === null || _a === void 0 ? void 0 : _a.getTime()) !== dates[0].getTime() ||
+                    ((_b = this.selectionRange.end) === null || _b === void 0 ? void 0 : _b.getTime()) !== last(dates).getTime();
+                this.selectionRange.start = dates[0];
+                this.selectionRange.end = last(dates);
+                this.value = this.selectionRange;
+                if (shouldEmitValueChange) {
+                    this.valueChange.emit(this.value);
+                }
+            }
         });
     }
     setClasses(element) {
-        this.renderer.addClass(element, 'k-widget');
         this.renderer.addClass(element, 'k-calendar');
-        this.renderer.addClass(element, 'k-calendar-range');
+        this.renderer.addClass(element, getSizeClass('calendar', this.size));
+        if (this.views >= 2) {
+            this.renderer.addClass(element, 'k-calendar-range');
+        }
     }
     verifyChanges() {
         if (!isDevMode()) {
@@ -4192,14 +4478,22 @@ class MultiViewCalendarComponent {
         if (!isDevMode()) {
             return;
         }
-        if (this.selection === 'single' && candidate && !(candidate instanceof Date)) {
-            throw new Error(`The 'value' should be a valid JavaScript Date instance. Check ${VALUE_DOC_LINK$5} for possible resolution.`);
+        if (this.selection === 'single' && candidate && !(isNullOrDate(candidate))) {
+            throw new Error(`When using 'single' selection the 'value' should be a valid JavaScript Date instance. Check ${VALUE_DOC_LINK$5} for possible resolution.`);
         }
-        else if (this.selection === 'multiple' && candidate && Array.isArray(candidate)) {
-            const onlyDates = candidate.every(value => value instanceof Date);
-            if (!onlyDates) {
-                throw new Error(`The 'value' should be an array of valid JavaScript Date instances. Check ${VALUE_DOC_LINK$5} for possible resolution.`);
+        else if (this.selection === 'multiple' && candidate) {
+            if (Array.isArray(candidate)) {
+                const onlyDates = candidate.every(value => value instanceof Date);
+                if (!onlyDates) {
+                    throw new Error(`When using 'multiple' selection the 'value' should be an array of valid JavaScript Date instances. Check ${VALUE_DOC_LINK$5} for possible resolution.`);
+                }
             }
+            if (Object.keys(candidate).find(k => k === 'start') && Object.keys(candidate).find(k => k === 'end')) {
+                throw new Error(`When using 'multiple' selection the 'value' should be an array of valid JavaScript Date instances. Check ${VALUE_DOC_LINK$5} for possible resolution.`);
+            }
+        }
+        else if (this.selection === 'range' && candidate && !(isNullOrDate(candidate['start']) && isNullOrDate(candidate['end']))) {
+            throw new Error(`The 'value' should be an object with start and end dates. Check ${VALUE_DOC_LINK$5} for possible resolution.`);
         }
     }
     updateButtonState() {
@@ -4213,6 +4507,80 @@ class MultiViewCalendarComponent {
         selection = selection || [];
         return this.selection === 'single' ? cloneDate(last(selection)) : selection.map(date => cloneDate(date));
     }
+    setValue(candidate) {
+        var _a, _b, _c, _d, _e, _f;
+        this.verifyValue(candidate);
+        if (candidate === null) {
+            this._value = null;
+            this.selectedDates = [];
+        }
+        else if (Array.isArray(candidate)) {
+            this.selectionRange = { start: null, end: null };
+            this._value = candidate.filter(date => isPresent(date)).map(element => cloneDate(element));
+        }
+        else if (isObject(candidate) && Object.keys(candidate).find(k => k === 'start') && Object.keys(candidate).find(k => k === 'end')) {
+            this.selectedDates = [];
+            this.selectionRange = { start: null, end: null };
+            this._value = { start: null, end: null };
+            this._value.start = candidate.start instanceof Date ? cloneDate(candidate.start) : null;
+            this._value.end = candidate.end instanceof Date ? cloneDate(candidate.end) : null;
+            this.selectionRange = Object.assign({}, this._value);
+            if (((_a = this._value) === null || _a === void 0 ? void 0 : _a.start) && !((_b = this._value) === null || _b === void 0 ? void 0 : _b.end)) {
+                this.activeRangeEnd = 'end';
+                this.canHover = true;
+            }
+            if (((_c = this._value) === null || _c === void 0 ? void 0 : _c.end) && !((_d = this._value) === null || _d === void 0 ? void 0 : _d.start)) {
+                this.activeRangeEnd = 'start';
+                this.canHover = true;
+            }
+            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 {
+            this.selectionRange = { start: null, end: null };
+            this._value = cloneDate(candidate);
+        }
+        if (this.selection !== 'range') {
+            const selection = [].concat(candidate).filter(date => isPresent(date)).map(date => cloneDate(date));
+            if (!areDatesEqual(selection, this.selectedDates)) {
+                const lastSelected = last(selection);
+                this.rangePivot = cloneDate(lastSelected);
+                this.focusedDate = cloneDate(lastSelected) || this.focusedDate;
+                this.selectedDates = selection;
+            }
+        }
+    }
+    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()));
+        this.zone.run(() => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            const rangeSelection = handleRangeSelection(date, clonedRangeSelection, this.activeRangeEnd, this.allowReverse);
+            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()) ||
+                ((_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;
+                this.valueChange.emit(this.value);
+                this.rangeSelectionChange.emit(rangeSelection);
+            }
+            this.cdr.markForCheck();
+        });
+    }
     performSelection(date, selectionModifiers) {
         const selection = this.selectionService.performSelection({
             date: date,
@@ -4229,8 +4597,8 @@ class MultiViewCalendarComponent {
         });
     }
 }
-MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarComponent, deps: [{ token: BusViewService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DisabledDatesService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Component });
-MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { showOtherMonthDays: "showOtherMonthDays", showCalendarHeader: "showCalendarHeader", id: "id", focusedDate: "focusedDate", footer: "footer", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", weekDaysFormat: "weekDaysFormat", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", blurEvent: "blur", focusEvent: "focus", focusCalendar: "focusCalendar", onClosePopup: "onClosePopup", onTabPress: "onTabPress", onShiftTabPress: "onShiftTabPress" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarComponent, deps: [{ token: BusViewService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DisabledDatesService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Component });
+MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { showOtherMonthDays: "showOtherMonthDays", showCalendarHeader: "showCalendarHeader", size: "size", id: "id", focusedDate: "focusedDate", footer: "footer", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", allowReverse: "allowReverse", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", weekDaysFormat: "weekDaysFormat", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", rangeSelectionChange: "rangeSelectionChange", blurEvent: "blur", focusEvent: "focus", focusCalendar: "focusCalendar", onClosePopup: "onClosePopup", onTabPress: "onTabPress", onShiftTabPress: "onShiftTabPress" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
         BusViewService,
         RANGE_CALENDAR_VALUE_ACCESSOR,
         RANGE_CALENDAR_RANGE_VALIDATORS,
@@ -4261,6 +4629,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
         *ngIf="showCalendarHeader"
         [activeView]="activeViewEnum"
         [currentDate]="activeDate"
+        [size]="size"
         [min]="min"
         [max]="max"
         [id]="headerId"
@@ -4278,6 +4647,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
     </kendo-calendar-header>
     <kendo-calendar-horizontal
         [showOtherMonthDays]="showOtherMonthDays"
+        [allowReverse]="allowReverse"
         [id]="calendarHeaderIdLabel"
         [attr.aria-labelledby]="multiViewCalendarHeaderIdLabel"
         [activeView]="activeViewEnum"
@@ -4302,7 +4672,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
         [disabled]="disabled"
         (cellClick)="handleCellClick($event)"
         (weekNumberCellClick)="handleWeekNumberClick($event)"
-        (cellEnter)="emitCellEvent(cellEnter, $event)"
+        (cellEnter)="onCellEnter(cellEnter, $event)"
         (cellLeave)="emitCellEvent(cellLeave, $event)"
         (activeDateChange)="setActiveDate($event)"
         (focusCalendar)="handleFocus()"
@@ -4315,8 +4685,8 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
         [activeViewValue]="activeView"
         [currentDate]="activeDate">
     </kendo-calendar-footer>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["showOtherMonthDays", "cellTemplateRef", "weekNumberTemplateRef", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "activeDescendant", "tabIndex", "disabled", "id", "weekDaysFormat", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { kind: "directive", type: MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id", "size"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["showOtherMonthDays", "cellTemplateRef", "weekNumberTemplateRef", "allowReverse", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "activeDescendant", "tabIndex", "disabled", "id", "weekDaysFormat", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { kind: "directive", type: MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -4354,6 +4724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         *ngIf="showCalendarHeader"
         [activeView]="activeViewEnum"
         [currentDate]="activeDate"
+        [size]="size"
         [min]="min"
         [max]="max"
         [id]="headerId"
@@ -4371,6 +4742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     </kendo-calendar-header>
     <kendo-calendar-horizontal
         [showOtherMonthDays]="showOtherMonthDays"
+        [allowReverse]="allowReverse"
         [id]="calendarHeaderIdLabel"
         [attr.aria-labelledby]="multiViewCalendarHeaderIdLabel"
         [activeView]="activeViewEnum"
@@ -4395,7 +4767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         [disabled]="disabled"
         (cellClick)="handleCellClick($event)"
         (weekNumberCellClick)="handleWeekNumberClick($event)"
-        (cellEnter)="emitCellEvent(cellEnter, $event)"
+        (cellEnter)="onCellEnter(cellEnter, $event)"
         (cellLeave)="emitCellEvent(cellLeave, $event)"
         (activeDateChange)="setActiveDate($event)"
         (focusCalendar)="handleFocus()"
@@ -4414,6 +4786,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], showCalendarHeader: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], id: [{
                 type: Input
             }], focusedDate: [{
@@ -4430,6 +4804,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], selection: [{
                 type: Input
+            }], allowReverse: [{
+                type: Input
             }], value: [{
                 type: Input
             }], disabled: [{
@@ -4474,6 +4850,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }], valueChange: [{
                 type: Output
+            }], rangeSelectionChange: [{
+                type: Output
             }], blurEvent: [{
                 type: Output,
                 args: ['blur']
@@ -4957,8 +5335,8 @@ class VirtualizationComponent {
         return indexOffset < this.containerScrollPosition ? ScrollDirection.Backward : ScrollDirection.Forward;
     }
 }
-VirtualizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VirtualizationComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i12.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
-VirtualizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: { direction: "direction", itemHeight: "itemHeight", itemWidth: "itemWidth", topOffset: "topOffset", bottomOffset: "bottomOffset", maxScrollDifference: "maxScrollDifference", scrollOffsetSize: "scrollOffsetSize", scrollDuration: "scrollDuration", skip: "skip", take: "take", total: "total" }, outputs: { activeIndexChange: "activeIndexChange", pageChange: "pageChange", scrollChange: "scrollChange" }, host: { properties: { "class.k-flex": "this.wrapperClasses", "class.k-content": "this.wrapperClasses", "class.k-scrollable": "this.wrapperClasses", "class.k-scrollable-horizontal": "this.horizontalClass" } }, providers: [{
+VirtualizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VirtualizationComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1$2.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
+VirtualizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: { direction: "direction", itemHeight: "itemHeight", itemWidth: "itemWidth", topOffset: "topOffset", bottomOffset: "bottomOffset", maxScrollDifference: "maxScrollDifference", scrollOffsetSize: "scrollOffsetSize", scrollDuration: "scrollDuration", skip: "skip", take: "take", total: "total" }, outputs: { activeIndexChange: "activeIndexChange", pageChange: "pageChange", scrollChange: "scrollChange" }, host: { properties: { "class.k-flex": "this.wrapperClasses", "class.k-content": "this.wrapperClasses", "class.k-scrollable": "this.wrapperClasses", "class.k-scrollable-horizontal": "this.horizontalClass" } }, providers: [{
             provide: SCROLLER_FACTORY_TOKEN,
             useValue: DEFAULT_SCROLLER_FACTORY
         }], usesOnChanges: true, ngImport: i0, template: `
@@ -4969,7 +5347,7 @@ VirtualizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         [ngStyle]="totalVertexLength"
     ></div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VirtualizationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VirtualizationComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{
@@ -4990,7 +5368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [SCROLLER_FACTORY_TOKEN]
-                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i12.ScrollbarWidthService }];
+                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1$2.ScrollbarWidthService }];
     }, propDecorators: { direction: [{
                 type: Input
             }], itemHeight: [{
@@ -5043,12 +5421,12 @@ const tbody = domContainerFactory('tbody');
 const thead = domContainerFactory('thead');
 const table = domContainerFactory('table');
 const monthHeader = () => (div$1(`
-            <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title">March 2017</span>
+            <span class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title">March 2017</span>
             <span class="k-spacer"></span>
             <span class="k-calendar-nav k-hstack">
                 <button class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md">TODAY</button>
             </span>
-        `, 'k-calendar-header k-hstack'));
+        `, 'k-calendar-header'));
 const monthWeekHeader = () => (table([
     thead([
         tr([th('MO', 'k-calendar-th')], 'k-calendar-tr')
@@ -5192,9 +5570,9 @@ class CalendarDOMService {
         }
     }
 }
-CalendarDOMService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarDOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CalendarDOMService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarDOMService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarDOMService, decorators: [{
+CalendarDOMService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarDOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CalendarDOMService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarDOMService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarDOMService, decorators: [{
             type: Injectable
         }] });
 
@@ -5295,8 +5673,8 @@ class NavigationComponent {
         }
     }
 }
-NavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationComponent, deps: [{ token: BusViewService }, { token: CalendarDOMService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: { activeView: "activeView", min: "min", max: "max", focusedDate: "focusedDate", templateRef: "templateRef" }, outputs: { valueChange: "valueChange", pageChange: "pageChange" }, host: { properties: { "class.k-calendar-navigation": "this.getComponentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+NavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationComponent, deps: [{ token: BusViewService }, { token: CalendarDOMService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: { activeView: "activeView", min: "min", max: "max", focusedDate: "focusedDate", templateRef: "templateRef" }, outputs: { valueChange: "valueChange", pageChange: "pageChange" }, host: { properties: { "class.k-calendar-navigation": "this.getComponentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <span class="k-calendar-navigation-highlight"></span>
     <kendo-virtualization
         [skip]="skip"
@@ -5322,8 +5700,8 @@ NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             </li>
         </ul>
     </kendo-virtualization>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { kind: "directive", type: i1$2.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5403,6 +5781,7 @@ 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();
@@ -5552,10 +5931,11 @@ class ViewListComponent {
         }
     }
 }
-ViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ViewListComponent, deps: [{ token: BusViewService }, { token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewListComponent, deps: [{ token: BusViewService }, { token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: CalendarDOMService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", size: "size", 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"
+        [size]="size"
         [min]="min"
         [max]="max"
         [id]="id"
@@ -5600,6 +5980,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"
@@ -5616,6 +5999,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>
@@ -5625,8 +6009,8 @@ 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: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: 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: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: 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: 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: [{
+  `, 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: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id", "size"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: 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: 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.2.10", ngImport: i0, type: ViewListComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5634,6 +6018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                     template: `
     <kendo-calendar-header
         [currentDate]="activeDate"
+        [size]="size"
         [min]="min"
         [max]="max"
         [id]="id"
@@ -5678,6 +6063,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"
@@ -5694,6 +6082,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>
@@ -5705,7 +6094,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     </kendo-calendar-footer>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i0.ChangeDetectorRef }, { type: i1.IntlService }, { type: CalendarDOMService }, { type: i0.Renderer2 }]; }, propDecorators: { cellTemplateRef: [{
+        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i0.ChangeDetectorRef }, { type: i1.IntlService }, { type: CalendarDOMService }, { type: i0.Renderer2 }]; }, propDecorators: { allowReverse: [{
+                type: Input
+            }], cellTemplateRef: [{
                 type: Input
             }], weekNumberTemplateRef: [{
                 type: Input
@@ -5741,8 +6132,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], weekDaysFormat: [{
                 type: Input
+            }], activeRangeEnd: [{
+                type: Input
+            }], selectionRange: [{
+                type: Input
+            }], size: [{
+                type: Input
             }], weekNumber: [{
                 type: Input
+            }], cellEnter: [{
+                type: Output
             }], cellClick: [{
                 type: Output
             }], weekNumberCellClick: [{
@@ -5856,9 +6255,9 @@ class ScrollSyncService {
         }
     }
 }
-ScrollSyncService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ScrollSyncService, deps: [{ token: CalendarDOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-ScrollSyncService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ScrollSyncService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ScrollSyncService, decorators: [{
+ScrollSyncService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollSyncService, deps: [{ token: CalendarDOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+ScrollSyncService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollSyncService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollSyncService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: CalendarDOMService }, { type: i0.NgZone }]; } });
 
@@ -5892,9 +6291,9 @@ class NavigationItemTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-NavigationItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NavigationItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: NavigationItemTemplateDirective, selector: "[kendoCalendarNavigationItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationItemTemplateDirective, decorators: [{
+NavigationItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NavigationItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: NavigationItemTemplateDirective, selector: "[kendoCalendarNavigationItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarNavigationItemTemplate]'
@@ -5925,14 +6324,14 @@ class MultiViewCalendarCustomMessagesComponent extends Messages {
         return true;
     }
 }
-MultiViewCalendarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-MultiViewCalendarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages", providers: [
+MultiViewCalendarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+MultiViewCalendarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => MultiViewCalendarCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -5951,9 +6350,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  */
 class CalendarMessages extends ComponentMessages {
 }
-CalendarMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-CalendarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: CalendarMessages, selector: "kendo-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarMessages, decorators: [{
+CalendarMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+CalendarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CalendarMessages, selector: "kendo-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -5978,14 +6377,14 @@ class CalendarLocalizedMessagesDirective extends CalendarMessages {
         this.service = service;
     }
 }
-CalendarLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-CalendarLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]", providers: [
+CalendarLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+CalendarLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]", providers: [
         {
             provide: CalendarMessages,
             useExisting: forwardRef(() => CalendarLocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarLocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarLocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -6070,15 +6469,14 @@ class CalendarComponent {
          * @default false
          */
         this.footer = false;
+        this._selection = 'single';
         /**
-         * Sets the Calendar selection mode
-         * ([see example]({% slug multiple_selection_calendar %})).
+         * 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.
          *
-         * The available values are:
-         * * `single` (default)
-         * * `multiple`
+         * @default false
          */
-        this.selection = 'single';
+        this.allowReverse = false;
         /**
          * Sets or gets the `disabled` property of the Calendar and
          * determines whether the component is active
@@ -6163,8 +6561,10 @@ class CalendarComponent {
          */
         this.valueChange = new EventEmitter();
         this._size = DEFAULT_SIZE;
+        this._activeRangeEnd = 'start';
         this.isActive = false;
         this.cellUID = guid();
+        this.selectionRange = { start: null, end: null };
         this.selectedDates = [];
         this._min = new Date(MIN_DATE);
         this._max = new Date(MAX_DATE);
@@ -6174,14 +6574,17 @@ class CalendarComponent {
         this.onValidatorChange = noop$2;
         this.minValidateFn = noop$2;
         this.maxValidateFn = noop$2;
+        this.changes = {};
+        this.valueSetter = false;
+        this.selectionSetter = false;
         this.syncNavigation = true;
         this._type = 'infinite';
         this.domEvents = [];
         this.resolvedPromise = Promise.resolve(null);
         this.destroyed = false;
+        this.canHover = false;
         validatePackage(packageMetadata);
         this.id = `kendo-calendarid-${this.bus.calendarId}`;
-        this.setClasses(element.nativeElement);
         if (this.pickerService) {
             this.pickerService.calendar = this;
         }
@@ -6265,29 +6668,37 @@ class CalendarComponent {
     get max() {
         return this._max;
     }
+    /**
+     * Sets the Calendar selection mode
+     * ([see example]({% slug multiple_selection_calendar %})).
+     *
+     * The available values are:
+     * * `single` (default)
+     * * `multiple`
+     * * `range`
+     */
+    set selection(_selection) {
+        this._selection = _selection;
+        this.selectionSetter = true;
+    }
+    get selection() {
+        return this._selection;
+    }
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
      * > The `value` has to be a valid
      * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
-     * instance when in `single` selection mode or an array of valid JavaScript Date instances when in `multiple` selection mode.
+     * instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
+     * an object of type `SelectionRange` when in `range` selection mode.
      */
+    set value(candidate) {
+        this.valueSetter = true;
+        this._value = candidate;
+    }
     get value() {
         return this._value;
     }
-    set value(candidate) {
-        this.verifyValue(candidate);
-        this._value = Array.isArray(candidate) ?
-            candidate.filter(date => isPresent(date)).map(element => cloneDate(element)) :
-            cloneDate(candidate);
-        const selection = [].concat(candidate).filter(date => isPresent(date)).map(date => cloneDate(date));
-        if (!areDatesEqual(selection, this.selectedDates)) {
-            const lastSelected = last(selection);
-            this.rangePivot = cloneDate(lastSelected);
-            this.focusedDate = cloneDate(lastSelected) || this.focusedDate;
-            this.selectedDates = selection;
-        }
-    }
     /**
      * @hidden
      */
@@ -6318,7 +6729,9 @@ class CalendarComponent {
      */
     set type(type) {
         this.renderer.removeClass(this.element.nativeElement, `k-calendar-${this.type}`);
-        this.renderer.addClass(this.element.nativeElement, `k-calendar-${type}`);
+        if (type === 'infinite') {
+            this.renderer.addClass(this.element.nativeElement, `k-calendar-${type}`);
+        }
         this._type = type;
     }
     get type() {
@@ -6457,17 +6870,23 @@ class CalendarComponent {
      *
      */
     set size(size) {
-        const element = this.type === 'infinite' ? this.element : this.multiViewCalendar.element;
-        this.renderer.removeClass(element.nativeElement, getSizeClass('calendar', this.size));
-        const newSize = size ? size : DEFAULT_SIZE;
-        if (newSize !== 'none') {
-            this.renderer.addClass(element.nativeElement, getSizeClass('calendar', newSize));
-        }
-        this._size = newSize;
+        this._size = size;
     }
     get size() {
         return this._size;
     }
+    /**
+     * Specify, which end of the defined selection range should be marked as active.
+     *
+     * > Value will be ignored if the selection range is undefined.
+     * > If range selection is used then the default value is 'start'.
+     */
+    set activeRangeEnd(_activeRangeEnd) {
+        this._activeRangeEnd = _activeRangeEnd;
+    }
+    get activeRangeEnd() {
+        return this._activeRangeEnd;
+    }
     get activeViewEnum() {
         const activeView = CalendarViewEnum[this.activeView];
         return activeView < this.bottomViewEnum ? this.bottomViewEnum : activeView;
@@ -6486,6 +6905,7 @@ class CalendarComponent {
         return this.type === 'classic' ? undefined : this.disabled;
     }
     ngOnInit() {
+        this.setClasses(this.element.nativeElement);
         if (this.type === 'infinite') {
             this.dom.calculateHeights(this.element.nativeElement);
             this.scrollSyncService.configure(this.activeViewEnum);
@@ -6500,26 +6920,43 @@ class CalendarComponent {
         }
     }
     ngOnChanges(changes) {
+        this.changes = changes;
         this.verifyChanges();
         this.bus.configure(this.bottomViewEnum, this.topViewEnum);
         this.scrollSyncService.configure(this.activeViewEnum);
-        if (hasExistingValue(changes, 'focusedDate')) {
-            const focusedDate = changes.focusedDate.currentValue;
+    }
+    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;
+        }
+        if (hasExistingValue(this.changes, 'focusedDate')) {
+            const focusedDate = this.changes.focusedDate.currentValue;
             this.focusedDate = dateInRange(focusedDate, this.min, this.max);
         }
-        if (changes.navigation) {
+        if (this.changes.navigation) {
             this.syncNavigation = true;
         }
-        if (changes.min || changes.max || changes.rangeValidation) {
+        if (this.changes.min || this.changes.max || this.changes.rangeValidation) {
             this.minValidateFn = this.rangeValidation ? minValidator(this.min) : noop$2;
             this.maxValidateFn = this.rangeValidation ? maxValidator(this.max) : noop$2;
             this.onValidatorChange();
         }
+        this.changes = {};
     }
     ngAfterViewInit() {
         this.setAriaActivedescendant();
         if (this.size !== 'none') {
             const element = this.type === 'infinite' ? this.element : this.multiViewCalendar.element;
+            this.renderer.removeClass(element.nativeElement, getSizeClass('calendar', this.size));
             this.renderer.addClass(element.nativeElement, getSizeClass('calendar', this.size));
         }
     }
@@ -6547,6 +6984,31 @@ class CalendarComponent {
         }
         this.destroyed = true;
     }
+    /**
+     * @hidden
+     */
+    onCellEnter(date) {
+        if (this.selection === 'range' && this.canHover) {
+            this.ngZone.run(() => {
+                if (this.allowReverse) {
+                    if (this.activeRangeEnd === 'end' && this.selectionRange.start) {
+                        this.selectionRange = { start: this.selectionRange.start, end: date };
+                    }
+                    if (this.activeRangeEnd === 'start' && this.selectionRange.end) {
+                        this.selectionRange = { start: date, end: this.selectionRange.end };
+                    }
+                }
+                else {
+                    if (this.activeRangeEnd === 'end' && this.selectionRange.start && date >= this.selectionRange.start) {
+                        this.selectionRange = { start: this.selectionRange.start, end: date };
+                    }
+                    if (this.selectionRange.start && date < this.selectionRange.start) {
+                        this.selectionRange = { start: this.selectionRange.start, end: null };
+                    }
+                }
+            });
+        }
+    }
     /**
      * @hidden
      */
@@ -6621,9 +7083,14 @@ class CalendarComponent {
     /**
      * @hidden
      */
-    handleMultiViewCalendarValueChange(date, focusedDate) {
-        const selectedDates = Array.isArray(date) ? date : [date];
-        this.handleDateChange({ selectedDates, focusedDate });
+    handleMultiViewCalendarValueChange(value, focusedDate) {
+        if (this.selection === 'range') {
+            this.valueChange.emit(value);
+        }
+        else {
+            const selectedDates = (Array.isArray(value) ? value : [value]);
+            this.handleDateChange({ selectedDates, focusedDate });
+        }
     }
     /**
      * @hidden
@@ -6647,6 +7114,9 @@ class CalendarComponent {
         if (this.disabledDatesService.isDateDisabled(this.focusedDate)) {
             return;
         }
+        if (this.selection === 'range') {
+            return;
+        }
         this.ngZone.run(() => {
             this.selectedDates = availableDates.map(date => cloneDate(date));
             this.value = this.parseSelectionToValue(availableDates);
@@ -6759,8 +7229,13 @@ class CalendarComponent {
      */
     handleCellClick({ date, modifiers }) {
         this.focus();
-        this.selectionService.lastClicked = date;
-        this.performSelection(date, modifiers);
+        if (this.selection === 'range') {
+            this.performRangeSelection(date);
+        }
+        else {
+            this.selectionService.lastClicked = date;
+            this.performSelection(date, modifiers);
+        }
     }
     /**
      * @hidden
@@ -6770,10 +7245,23 @@ class CalendarComponent {
             return;
         }
         this.ngZone.run(() => {
-            this.handleDateChange({
-                selectedDates: dates,
-                focusedDate: last(dates)
-            });
+            var _a, _b;
+            if (this.selection === 'multiple') {
+                this.handleDateChange({
+                    selectedDates: dates,
+                    focusedDate: last(dates),
+                });
+            }
+            if (this.selection === 'range') {
+                this.canHover = false;
+                this.activeRangeEnd = 'start';
+                const shouldEmitValueChange = ((_a = this.selectionRange.start) === null || _a === void 0 ? void 0 : _a.getTime()) !== dates[0].getTime() ||
+                    ((_b = this.selectionRange.end) === null || _b === void 0 ? void 0 : _b.getTime()) !== last(dates).getTime();
+                this.value = { start: dates[0], end: last(dates) };
+                if (shouldEmitValueChange) {
+                    this.valueChange.emit(this.value);
+                }
+            }
         });
     }
     /**
@@ -6818,9 +7306,11 @@ class CalendarComponent {
         }
     }
     setClasses(element) {
-        this.renderer.addClass(element, 'k-widget');
-        this.renderer.addClass(element, 'k-calendar');
-        this.renderer.addClass(element, `k-calendar-${this.type}`);
+        this.renderer.removeClass(element, `k-calendar-${this.type}`);
+        if (this.type === 'infinite') {
+            this.renderer.addClass(element, 'k-calendar');
+            this.renderer.addClass(element, `k-calendar-${this.type}`);
+        }
     }
     verifyChanges() {
         if (!isDevMode()) {
@@ -6837,19 +7327,35 @@ class CalendarComponent {
         if (!isDevMode()) {
             return;
         }
-        if (this.selection === 'single' && candidate && !(candidate instanceof Date)) {
-            throw new Error(`The 'value' should be a valid JavaScript Date instance. Check ${VALUE_DOC_LINK$4} for possible resolution.`);
+        if (this.selection === 'single' && candidate && !(isNullOrDate(candidate))) {
+            throw new Error(`When using 'single' selection the 'value' should be a valid JavaScript Date instance. Check ${VALUE_DOC_LINK$4} for possible resolution.`);
         }
-        else if (this.selection === 'multiple' && candidate && Array.isArray(candidate)) {
-            const onlyDates = candidate.every(value => value instanceof Date);
-            if (!onlyDates) {
-                throw new Error(`The 'value' should be an array of valid JavaScript Date instances. Check ${VALUE_DOC_LINK$4} for possible resolution.`);
+        else if (this.selection === 'multiple' && candidate) {
+            if (Array.isArray(candidate)) {
+                const onlyDates = candidate.every(value => value instanceof Date);
+                if (!onlyDates) {
+                    throw new Error(`When using 'multiple' selection the 'value' should be an array of valid JavaScript Date instances. Check ${VALUE_DOC_LINK$4} for possible resolution.`);
+                }
+            }
+            if (Object.keys(candidate).find(k => k === 'start') && Object.keys(candidate).find(k => k === 'end')) {
+                throw new Error(`When using 'multiple' selection the 'value' should be an array of valid JavaScript Date instances. Check ${VALUE_DOC_LINK$4} for possible resolution.`);
             }
         }
+        else if (this.selection === 'range' && candidate && !(isNullOrDate(candidate['start']) && isNullOrDate(candidate['end']))) {
+            throw new Error(`The 'value' should be an object with start and end dates. Check ${VALUE_DOC_LINK$4} for possible resolution.`);
+        }
     }
     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) {
@@ -6897,12 +7403,17 @@ class CalendarComponent {
             }
             if (args.keyCode === Keys$1.Enter) {
                 this.selectionService.lastClicked = this.focusedDate;
-                this.performSelection(this.focusedDate, args);
+                if (this.selection !== 'range') {
+                    this.performSelection(this.focusedDate, args);
+                }
+                else {
+                    this.performRangeSelection(this.focusedDate);
+                }
             }
             if (args.keyCode === Keys$1.KeyT) {
                 this.focusToday();
             }
-            if (isArrowWithShiftPressed(args)) {
+            if (isArrowWithShiftPressed(args) && this.selection !== 'range') {
                 args.anyArrow = true;
                 this.performSelection(this.focusedDate, args);
             }
@@ -6942,6 +7453,74 @@ class CalendarComponent {
         selection = selection || [];
         return this.selection === 'single' ? cloneDate(last(selection)) : selection.map(date => cloneDate(date));
     }
+    setValue(candidate) {
+        var _a, _b, _c, _d, _e, _f;
+        this.verifyValue(candidate);
+        if (candidate === null) {
+            this._value = null;
+            this.selectedDates = [];
+            this.selectionRange = { start: null, end: null };
+        }
+        else if (Array.isArray(candidate)) {
+            this.selectionRange = { start: null, end: null };
+            this._value = candidate.filter(date => isPresent(date)).map(element => cloneDate(element));
+        }
+        else if (isObject(candidate) && Object.keys(candidate).find(k => k === 'start') && Object.keys(candidate).find(k => k === 'end')) {
+            this.selectedDates = [];
+            this.selectionRange = { start: null, end: null };
+            this._value = { start: null, end: null };
+            this._value.start = candidate.start instanceof Date ? cloneDate(candidate.start) : null;
+            this._value.end = candidate.end instanceof Date ? cloneDate(candidate.end) : null;
+            this.selectionRange = Object.assign({}, this._value);
+            if (((_a = this._value) === null || _a === void 0 ? void 0 : _a.start) && !((_b = this._value) === null || _b === void 0 ? void 0 : _b.end)) {
+                this.activeRangeEnd = 'end';
+                this.canHover = true;
+            }
+            if (((_c = this._value) === null || _c === void 0 ? void 0 : _c.end) && !((_d = this._value) === null || _d === void 0 ? void 0 : _d.start)) {
+                this.activeRangeEnd = 'start';
+                this.canHover = true;
+            }
+            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 {
+            this.selectionRange = { start: null, end: null };
+            this._value = cloneDate(candidate);
+        }
+        if (this.selection !== 'range') {
+            const selection = [].concat(candidate).filter(date => isPresent(date)).map(date => cloneDate(date));
+            if (!areDatesEqual(selection, this.selectedDates)) {
+                const lastSelected = last(selection);
+                this.rangePivot = cloneDate(lastSelected);
+                this.focusedDate = cloneDate(lastSelected) || this.focusedDate;
+                this.selectedDates = selection;
+            }
+        }
+    }
+    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()));
+        this.ngZone.run(() => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            const rangeSelection = handleRangeSelection(date, clonedRangeSelection, this.activeRangeEnd, this.allowReverse);
+            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()) ||
+                ((_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;
+                this.valueChange.emit(this.value);
+            }
+            this.cdr.markForCheck();
+        });
+    }
     performSelection(date, selectionModifiers) {
         const selection = this.selectionService.performSelection({
             date: date,
@@ -6958,8 +7537,8 @@ class CalendarComponent {
         });
     }
 }
-CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarComponent, deps: [{ token: BusViewService }, { token: CalendarDOMService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: ScrollSyncService }, { token: DisabledDatesService }, { token: i1$1.LocalizationService }, { token: SelectionService }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CalendarComponent, selector: "kendo-calendar", inputs: { showOtherMonthDays: "showOtherMonthDays", id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", weekDaysFormat: "weekDaysFormat", footer: "footer", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], size: "size" }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", onBlur: "blur", onFocus: "focus", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarComponent, deps: [{ token: BusViewService }, { token: CalendarDOMService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: ScrollSyncService }, { token: DisabledDatesService }, { token: i1$1.LocalizationService }, { token: SelectionService }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CalendarComponent, selector: "kendo-calendar", inputs: { showOtherMonthDays: "showOtherMonthDays", id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", weekDaysFormat: "weekDaysFormat", footer: "footer", selection: "selection", allowReverse: "allowReverse", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], size: "size", activeRangeEnd: "activeRangeEnd" }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", onBlur: "blur", onFocus: "focus", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
         BusViewService,
         CALENDAR_VALUE_ACCESSOR,
         CALENDAR_RANGE_VALIDATORS,
@@ -7002,7 +7581,11 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         </kendo-calendar-navigation>
         <kendo-calendar-viewlist
             [activeView]="activeViewEnum"
+            [allowReverse]="allowReverse"
             [showOtherMonthDays]="showOtherMonthDays"
+            [activeRangeEnd]="activeRangeEnd"
+            [selectionRange]="selectionRange"
+            [size]="size"
             [isActive]="isActive"
             [id]="headerId"
             [weekDaysFormat]="weekDaysFormat"
@@ -7030,6 +7613,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             (pageChange)="onPageChange()"
             (focusCalendar)="handleFocus()"
             (blurCalendar)="handleBlur($event)"
+            (cellEnter)="onCellEnter($event)"
         >
         </kendo-calendar-viewlist>
         <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
@@ -7040,7 +7624,11 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             [views]="1"
             [min]="min"
             [max]="max"
+            [size]="size"
             [id]="id"
+            [activeRangeEnd]="activeRangeEnd"
+            [selectionRange]="selectionRange"
+            [allowReverse]="allowReverse"
             [disabled]="disabled"
             [isActive]="isActive"
             [showOtherMonthDays]="showOtherMonthDays"
@@ -7082,8 +7670,8 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }, { kind: "component", type: 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: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { kind: "directive", type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { kind: "component", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "headerTemplateRef", "footerTemplateRef", "showOtherMonthDays", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "showFooter", "weekDaysFormat", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "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: i1$2.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { kind: "directive", type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { kind: "component", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["allowReverse", "cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "headerTemplateRef", "footerTemplateRef", "showOtherMonthDays", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "showFooter", "weekDaysFormat", "activeRangeEnd", "selectionRange", "size", "weekNumber"], outputs: ["cellEnter", "cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -7133,7 +7721,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         </kendo-calendar-navigation>
         <kendo-calendar-viewlist
             [activeView]="activeViewEnum"
+            [allowReverse]="allowReverse"
             [showOtherMonthDays]="showOtherMonthDays"
+            [activeRangeEnd]="activeRangeEnd"
+            [selectionRange]="selectionRange"
+            [size]="size"
             [isActive]="isActive"
             [id]="headerId"
             [weekDaysFormat]="weekDaysFormat"
@@ -7161,6 +7753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             (pageChange)="onPageChange()"
             (focusCalendar)="handleFocus()"
             (blurCalendar)="handleBlur($event)"
+            (cellEnter)="onCellEnter($event)"
         >
         </kendo-calendar-viewlist>
         <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
@@ -7171,7 +7764,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             [views]="1"
             [min]="min"
             [max]="max"
+            [size]="size"
             [id]="id"
+            [activeRangeEnd]="activeRangeEnd"
+            [selectionRange]="selectionRange"
+            [allowReverse]="allowReverse"
             [disabled]="disabled"
             [isActive]="isActive"
             [showOtherMonthDays]="showOtherMonthDays"
@@ -7237,6 +7834,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], selection: [{
                 type: Input
+            }], allowReverse: [{
+                type: Input
             }], value: [{
                 type: Input
             }], disabled: [{
@@ -7340,6 +7939,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['navigationItemTemplate']
             }], size: [{
                 type: Input
+            }], activeRangeEnd: [{
+                type: Input
             }], navigationView: [{
                 type: ViewChild,
                 args: [NavigationComponent, { static: false }]
@@ -7389,9 +7990,9 @@ var Arrow;
  */
 class DateInputMessages extends ComponentMessages {
 }
-DateInputMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DateInputMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DateInputMessages, selector: "kendo-dateinput-messages-base", inputs: { decrement: "decrement", increment: "increment" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputMessages, decorators: [{
+DateInputMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DateInputMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateInputMessages, selector: "kendo-dateinput-messages-base", inputs: { decrement: "decrement", increment: "increment", clearTitle: "clearTitle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -7401,6 +8002,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], increment: [{
                 type: Input
+            }], clearTitle: [{
+                type: Input
             }] } });
 
 /**
@@ -7412,14 +8015,14 @@ class DateInputLocalizedMessagesDirective extends DateInputMessages {
         this.service = service;
     }
 }
-DateInputLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-DateInputLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]", providers: [
+DateInputLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+DateInputLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]", providers: [
         {
             provide: DateInputMessages,
             useExisting: forwardRef(() => DateInputLocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputLocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputLocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -7486,10 +8089,20 @@ class DateInputComponent {
          * @hidden
          */
         this.caretAltUpIcon = caretAltUpIcon;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         /**
          * @hidden
          */
         this.caretAltDownIcon = caretAltDownIcon;
+        /**
+         * If set to `true`, renders a clear button after the input text or DateInput value has been changed.
+         * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
+         * @default false
+         */
+        this.clearButton = false;
         /**
          * Sets or gets the `disabled` property of the DateInput and
          * determines whether the component is active
@@ -7662,6 +8275,7 @@ class DateInputComponent {
         this.formatSections = { date: false, time: false };
         this.hasMousedown = false;
         this.focusedPriorToMousedown = false;
+        this.showClearButton = false;
         /**
          * @hidden
          */
@@ -8102,6 +8716,13 @@ class DateInputComponent {
         (_b = this.kendoDateObject) === null || _b === void 0 ? void 0 : _b.setValue(this.value);
         (_c = this.kendoDate) === null || _c === void 0 ? void 0 : _c.refreshElementValue();
     }
+    resetInput() {
+        var _a, _b, _c;
+        (_a = this.kendoDateObject) === null || _a === void 0 ? void 0 : _a.setValue(null);
+        (_b = this.kendoDate) === null || _b === void 0 ? void 0 : _b.refreshElementValue();
+        (_c = this.control) === null || _c === void 0 ? void 0 : _c.setValue(null);
+        this.showClearButton = false;
+    }
     /**
      * @hidden
      */
@@ -8117,6 +8738,7 @@ class DateInputComponent {
      */
     notify() {
         this.ngZone.run(() => {
+            this.showClearButton = true;
             this.onControlChange(cloneDate(this.value));
             this.valueChange.emit(cloneDate(this.value));
         });
@@ -8164,6 +8786,7 @@ class DateInputComponent {
      * @hidden
      */
     handleButtonClick(offset) {
+        this.showClearButton = true;
         this.arrowDirection = Arrow.None;
         this.kendoDate.focus();
         this.kendoDate.modifyDateSegmentValue(offset);
@@ -8186,6 +8809,10 @@ class DateInputComponent {
     }
     onWidgetInputEnd() {
         this.updateIncompleteValidationStatus();
+        if (this.clearButton) {
+            this.showClearButton = true;
+            this.cdr.markForCheck();
+        }
     }
     onWidgetFocus({ event: FocuseEvent }) {
         this.isActive = true;
@@ -8271,8 +8898,8 @@ class DateInputComponent {
         setHTMLAttributes(attributesToRender, this.renderer, this.dateInput.nativeElement);
     }
 }
-DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i1$1.LocalizationService }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", isRequired: "isRequired", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", allowCaretMode: "allowCaretMode", autoFill: "autoFill", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", enableMouseWheel: "enableMouseWheel", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
+DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i1$1.LocalizationService }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", clearButton: "clearButton", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", isRequired: "isRequired", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", allowCaretMode: "allowCaretMode", autoFill: "autoFill", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", enableMouseWheel: "enableMouseWheel", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: L10N_PREFIX, useValue: 'kendo.dateinput' },
@@ -8285,6 +8912,9 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
 
         i18n-decrement="kendo.dateinput.decrement|The label for the **Decrement** button in the DateInput"
         decrement="Decrease value"
+
+        i18n-clearTitle="kendo.dateinput.clearTitle|The title of the clear button"
+        clearTitle="clear"
     >
     </ng-container>
     <input #dateInput
@@ -8310,6 +8940,21 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
         }"
         [scope]="this"
         />
+    <span
+        *ngIf="clearButton && showClearButton"
+        class="k-clear-value"
+        [attr.title]="localization.get('clearTitle')"
+        role="button"
+        tabindex="-1"
+        (click)="resetInput()"
+        (mousedown)="$event.preventDefault()"
+    >
+        <kendo-icon-wrapper
+            name="x"
+            [svgIcon]="xIcon"
+        >
+        </kendo-icon-wrapper>
+    </span>
     <span *ngIf="spinners" class="k-input-spinner k-spin-button" (mousedown)="$event.preventDefault()">
         <button
             #spinup
@@ -8348,8 +8993,8 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
                 </kendo-icon-wrapper>
         </button>
     </span>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -8369,6 +9014,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
         i18n-decrement="kendo.dateinput.decrement|The label for the **Decrement** button in the DateInput"
         decrement="Decrease value"
+
+        i18n-clearTitle="kendo.dateinput.clearTitle|The title of the clear button"
+        clearTitle="clear"
     >
     </ng-container>
     <input #dateInput
@@ -8394,6 +9042,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }"
         [scope]="this"
         />
+    <span
+        *ngIf="clearButton && showClearButton"
+        class="k-clear-value"
+        [attr.title]="localization.get('clearTitle')"
+        role="button"
+        tabindex="-1"
+        (click)="resetInput()"
+        (mousedown)="$event.preventDefault()"
+    >
+        <kendo-icon-wrapper
+            name="x"
+            [svgIcon]="xIcon"
+        >
+        </kendo-icon-wrapper>
+    </span>
     <span *ngIf="spinners" class="k-input-spinner k-spin-button" (mousedown)="$event.preventDefault()">
         <button
             #spinup
@@ -8442,6 +9105,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], pickerType: [{
                 type: Input
+            }], clearButton: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{
@@ -8582,6 +9247,39 @@ const disabledDatesValidator = (isDateDisabled) => {
     };
 };
 
+/**
+ * Custom component messages override default component messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ */
+class DateInputCustomMessagesComponent extends DateInputMessages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+DateInputCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DateInputCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages", providers: [
+        {
+            provide: DateInputMessages,
+            useExisting: forwardRef(() => DateInputCustomMessagesComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputCustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: DateInputMessages,
+                            useExisting: forwardRef(() => DateInputCustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-dateinput-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+
 /**
  * Custom component messages override default component messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
  */
@@ -8594,14 +9292,14 @@ class CalendarCustomMessagesComponent extends CalendarMessages {
         return true;
     }
 }
-CalendarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CalendarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages", providers: [
+CalendarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CalendarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages", providers: [
         {
             provide: CalendarMessages,
             useExisting: forwardRef(() => CalendarCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -8620,9 +9318,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  */
 class DatePickerMessages extends ComponentMessages {
 }
-DatePickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DatePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DatePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DatePickerMessages, selector: "kendo-datepicker-messages-base", inputs: { today: "today", toggle: "toggle", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DatePickerMessages, decorators: [{
+DatePickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DatePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerMessages, selector: "kendo-datepicker-messages-base", inputs: { today: "today", toggle: "toggle", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", clearTitle: "clearTitle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -8638,6 +9336,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], parentViewButtonTitle: [{
                 type: Input
+            }], clearTitle: [{
+                type: Input
             }] } });
 
 /**
@@ -8649,14 +9349,14 @@ class DatePickerLocalizedMessagesDirective extends DatePickerMessages {
         this.service = service;
     }
 }
-DatePickerLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DatePickerLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-DatePickerLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]", providers: [
+DatePickerLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+DatePickerLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]", providers: [
         {
             provide: DatePickerMessages,
             useExisting: forwardRef(() => DatePickerLocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DatePickerLocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerLocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -8693,6 +9393,12 @@ class DatePickerComponent {
          * @hidden
          */
         this.calendarIcon = calendarIcon;
+        /**
+         * If set to `true`, renders a clear button after the input text or DatePicker value has been changed.
+         * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
+         * @default false
+         */
+        this.clearButton = false;
         /**
          * Toggles the visibility of the Calendar footer.
          * @default false
@@ -9191,9 +9897,6 @@ class DatePickerComponent {
             this.toggleCalendar(show);
         }
     }
-    get inputElement() {
-        return this.wrapper.nativeElement.querySelector('input');
-    }
     /**
      * @hidden
      */
@@ -9400,6 +10103,7 @@ class DatePickerComponent {
      */
     handleChange(value) {
         this.cdr.markForCheck();
+        this.dateInput.showClearButton = true;
         this.value = value;
         if (this.show) {
             this.focusInput();
@@ -9698,8 +10402,8 @@ class DatePickerComponent {
         }
     }
 }
-DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], inputAttributes: "inputAttributes", monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer", navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], clearButton: "clearButton", inputAttributes: "inputAttributes", monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer", navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
@@ -9726,6 +10430,9 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
 
             i18n-parentViewButtonTitle="kendo.datepicker.parentViewButtonTitle|The title of the parent view button in the calendar header"
             parentViewButtonTitle="Navigate to parent view"
+
+            i18n-clearTitle="kendo.datepicker.clearTitle|The title of the clear button"
+            clearTitle="clear"
         >
         </ng-container>
         <kendo-dateinput
@@ -9734,6 +10441,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             pickerType="datepicker"
             hasPopup="grid"
             [isPopupOpen]="show"
+            [clearButton]="clearButton"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
             [ariaReadOnly]="readonly"
@@ -9761,7 +10469,12 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             [value]="value"
             (valueChange)="handleInputChange($event)"
             (click)="handleDateInputClick()"
-        ></kendo-dateinput>
+        >
+            <kendo-dateinput-messages
+                [clearTitle]="localization.get('clearTitle')"
+            >
+            </kendo-dateinput-messages>
+        </kendo-dateinput>
         <button
             #toggleButton
             type="button"
@@ -9833,8 +10546,8 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         <ng-template #calendarTemplate>
             <kendo-calendar
                 #calendar
-                [size]="isAdaptive ? 'large' : 'medium'"
                 [type]="calendarType"
+                [size]="isAdaptive ? 'large' : size"
                 [min]="min"
                 [max]="max"
                 [weekDaysFormat]="weekDaysFormat"
@@ -9874,8 +10587,8 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: 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: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.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: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.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: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DatePickerComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "directive", type: i1$2.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i12.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i1$2.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.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: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -9909,6 +10622,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
             i18n-parentViewButtonTitle="kendo.datepicker.parentViewButtonTitle|The title of the parent view button in the calendar header"
             parentViewButtonTitle="Navigate to parent view"
+
+            i18n-clearTitle="kendo.datepicker.clearTitle|The title of the clear button"
+            clearTitle="clear"
         >
         </ng-container>
         <kendo-dateinput
@@ -9917,6 +10633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             pickerType="datepicker"
             hasPopup="grid"
             [isPopupOpen]="show"
+            [clearButton]="clearButton"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
             [ariaReadOnly]="readonly"
@@ -9944,7 +10661,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             [value]="value"
             (valueChange)="handleInputChange($event)"
             (click)="handleDateInputClick()"
-        ></kendo-dateinput>
+        >
+            <kendo-dateinput-messages
+                [clearTitle]="localization.get('clearTitle')"
+            >
+            </kendo-dateinput-messages>
+        </kendo-dateinput>
         <button
             #toggleButton
             type="button"
@@ -10016,8 +10738,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         <ng-template #calendarTemplate>
             <kendo-calendar
                 #calendar
-                [size]="isAdaptive ? 'large' : 'medium'"
                 [type]="calendarType"
+                [size]="isAdaptive ? 'large' : size"
                 [min]="min"
                 [max]="max"
                 [weekDaysFormat]="weekDaysFormat"
@@ -10060,7 +10782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     `
                 }]
         }], ctorParameters: function () {
-        return [{ type: i0.NgZone }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i1$2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: PickerService }, { type: DisabledDatesService }, { type: undefined, decorators: [{
+        return [{ type: i0.NgZone }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i1$3.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: PickerService }, { type: DisabledDatesService }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -10086,6 +10808,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }], cellTemplateRef: [{
                 type: Input,
                 args: ['cellTemplate']
+            }], clearButton: [{
+                type: Input
             }], inputAttributes: [{
                 type: Input
             }], monthCellTemplate: [{
@@ -10283,9 +11007,9 @@ const timeRangeValidator = (min, max) => {
  */
 class TimePickerMessages extends ComponentMessages {
 }
-TimePickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TimePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: TimePickerMessages, selector: "kendo-timepicker-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", now: "now", nowLabel: "nowLabel", toggle: "toggle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerMessages, decorators: [{
+TimePickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TimePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerMessages, selector: "kendo-timepicker-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", now: "now", nowLabel: "nowLabel", toggle: "toggle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -10315,6 +11039,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], dayperiod: [{
                 type: Input
+            }], clearTitle: [{
+                type: Input
             }] } });
 
 /**
@@ -10326,14 +11052,14 @@ class TimePickerLocalizedMessagesDirective extends TimePickerMessages {
         this.service = service;
     }
 }
-TimePickerLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-TimePickerLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]", providers: [
+TimePickerLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+TimePickerLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]", providers: [
         {
             provide: TimePickerMessages,
             useExisting: forwardRef(() => TimePickerLocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerLocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerLocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -10360,14 +11086,14 @@ class TimeSelectorCustomMessagesComponent extends TimePickerMessages {
         return true;
     }
 }
-TimeSelectorCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeSelectorCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TimeSelectorCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages", providers: [
+TimeSelectorCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimeSelectorCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TimeSelectorCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages", providers: [
         {
             provide: TimePickerMessages,
             useExisting: forwardRef(() => TimeSelectorCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeSelectorCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimeSelectorCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -10487,9 +11213,9 @@ class HoursService {
         return [min.getHours(), max.getHours()];
     }
 }
-HoursService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HoursService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-HoursService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HoursService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HoursService, decorators: [{
+HoursService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HoursService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+HoursService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HoursService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HoursService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
@@ -10597,9 +11323,9 @@ class MinutesService {
         return [min.getMinutes(), max.getMinutes()];
     }
 }
-MinutesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MinutesService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-MinutesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MinutesService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MinutesService, decorators: [{
+MinutesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MinutesService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+MinutesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MinutesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MinutesService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
@@ -10707,9 +11433,9 @@ class SecondsService {
         return [min.getSeconds(), max.getSeconds()];
     }
 }
-SecondsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SecondsService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-SecondsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SecondsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SecondsService, decorators: [{
+SecondsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SecondsService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+SecondsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SecondsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SecondsService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
@@ -10820,9 +11546,9 @@ class MillisecondsService {
         return [min.getMilliseconds(), max.getMilliseconds()];
     }
 }
-MillisecondsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MillisecondsService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-MillisecondsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MillisecondsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MillisecondsService, decorators: [{
+MillisecondsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MillisecondsService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+MillisecondsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MillisecondsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MillisecondsService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
@@ -10936,9 +11662,9 @@ class DayPeriodService {
         ];
     }
 }
-DayPeriodService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DayPeriodService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-DayPeriodService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DayPeriodService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DayPeriodService, decorators: [{
+DayPeriodService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DayPeriodService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+DayPeriodService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DayPeriodService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DayPeriodService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
@@ -11011,9 +11737,9 @@ class TimePickerDOMService {
         return (element.nativeElement || element) === document.activeElement;
     }
 }
-TimePickerDOMService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerDOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TimePickerDOMService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerDOMService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerDOMService, decorators: [{
+TimePickerDOMService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerDOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TimePickerDOMService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerDOMService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerDOMService, decorators: [{
             type: Injectable
         }] });
 
@@ -11253,8 +11979,8 @@ class TimeListComponent {
         this.domEvents.push(this.renderer.listen(element, 'mouseover', () => !this.isActive && this.focus()), this.renderer.listen(element, 'click', () => this.focus()), this.renderer.listen(element, 'blur', () => this.isActive = false), this.renderer.listen(element, 'focus', () => this.isActive = true), this.renderer.listen(element, 'keydown', this.handleKeyDown.bind(this)));
     }
 }
-TimeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: TimePickerDOMService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimeListComponent, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value", isLast: "isLast" }, outputs: { valueChange: "valueChange", tabOutLastPart: "tabOutLastPart" }, host: { properties: { "attr.role": "this.roleAttribute", "attr.aria-label": "this.ariaLabel", "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+TimeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimeListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: TimePickerDOMService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimeListComponent, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value", isLast: "isLast" }, outputs: { valueChange: "valueChange", tabOutLastPart: "tabOutLastPart" }, host: { properties: { "attr.role": "this.roleAttribute", "attr.aria-label": "this.ariaLabel", "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-virtualization
         [skip]="skip"
         [take]="total"
@@ -11282,8 +12008,8 @@ TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             </li>
         </ul>
     </kendo-virtualization>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeListComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { kind: "directive", type: i1$2.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimeListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-timelist',
@@ -11426,14 +12152,14 @@ class TimeSelectorLocalizedMessagesDirective extends TimePickerMessages {
         this.service = service;
     }
 }
-TimeSelectorLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeSelectorLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-TimeSelectorLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]", providers: [
+TimeSelectorLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimeSelectorLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+TimeSelectorLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]", providers: [
         {
             provide: TimePickerMessages,
             useExisting: forwardRef(() => TimeSelectorLocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeSelectorLocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimeSelectorLocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -11518,6 +12244,7 @@ class TimeSelectorComponent {
          */
         this.valueReject = new EventEmitter();
         this.tabOutLastPart = new EventEmitter();
+        this.tabOutNow = new EventEmitter();
         this.isActive = false;
         this.showNowButton = true;
         this._activeListIndex = -1;
@@ -11609,12 +12336,11 @@ class TimeSelectorComponent {
     }
     ngAfterViewInit() {
         this.subscriptions.add(fromEvent(this.timeListWrappers.first.nativeElement, 'keydown').subscribe((event) => {
-            var _a;
             const { keyCode, shiftKey } = event;
             if (keyCode === Keys$1.Tab && shiftKey) {
                 event.preventDefault();
                 this.renderer.removeClass(this.timeListWrappers.first.nativeElement, 'k-focus');
-                this.cancel ? this.cancel.nativeElement.focus() : (_a = this.accept) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+                this.now ? this.now.nativeElement.focus() : this.cancel.nativeElement.focus();
             }
         }));
         this.subscriptions.add(fromEvent(this.timeListWrappers.last.nativeElement, 'keydown').subscribe((event) => {
@@ -11732,14 +12458,25 @@ class TimeSelectorComponent {
      * @hidden
      */
     handleTabOut(event) {
+        var _a, _b, _c;
         const { keyCode, shiftKey } = event;
-        if (keyCode === Keys$1.Tab && !shiftKey) {
+        if (event.target === ((_a = this.now) === null || _a === void 0 ? void 0 : _a.nativeElement) && keyCode === Keys$1.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$1.Tab && !shiftKey && event.target !== ((_b = this.now) === null || _b === void 0 ? void 0 : _b.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() : (_c = this.now) === null || _c === void 0 ? void 0 : _c.nativeElement.focus();
             }
             else {
-                this.timeLists.first.focus();
+                this.now ? this.now.nativeElement.focus() : this.timeLists.first.focus();
             }
         }
     }
@@ -11829,8 +12566,8 @@ class TimeSelectorComponent {
         return listIdx;
     }
 }
-TimeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeSelectorComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.IntlService }, { token: TimePickerDOMService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimeSelectorComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.IntlService }, { token: TimePickerDOMService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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,
@@ -11871,7 +12608,8 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 [kendoEventsOutsideAngular]="{
                     click: handleNow,
                     focus: handleFocus,
-                    blur: handleBlur
+                    blur: handleBlur,
+                    keydown: handleTabOut
                 }"
                 [scope]="this"
                 [disabled]="disabled"
@@ -11943,8 +12681,8 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 [disabled]="disabled"
             >{{localization.get('cancel')}}</button>
         </div>
-    `, 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: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value", "isLast"], outputs: ["valueChange", "tabOutLastPart"] }, { kind: "directive", type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeSelectorComponent, decorators: [{
+    `, 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: i1$2.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value", "isLast"], outputs: ["valueChange", "tabOutLastPart"] }, { kind: "directive", type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimeSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -11992,7 +12730,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"
@@ -12116,6 +12855,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }], tabOutLastPart: [{
                 type: Output
+            }], tabOutNow: [{
+                type: Output
             }] } });
 
 const VALUE_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/#toc-integration-with-json';
@@ -12164,6 +12905,12 @@ class TimePickerComponent {
          * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
          */
         this.readOnlyInput = false;
+        /**
+         * If set to `true`, renders a clear button after the input text or TimePicker value has been changed.
+         * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
+         * @default false
+         */
+        this.clearButton = false;
         /**
          * Specifies the time format that is used to display the input value
          * ([see example]({% slug formats_timepicker %})).
@@ -12738,6 +13485,7 @@ class TimePickerComponent {
                 this.focusInput();
                 this.show = false;
             }
+            this.dateInput.showClearButton = true;
             this.onControlChange(cloneDate(value));
             this.valueChange.emit(cloneDate(value));
         });
@@ -13042,8 +13790,8 @@ class TimePickerComponent {
         }
     }
 }
-TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerComponent, deps: [{ token: BusViewService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: i1.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerComponent, deps: [{ token: BusViewService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: i1.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", clearButton: "clearButton", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
@@ -13091,6 +13839,9 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
 
             i18n-dayperiod="kendo.timepicker.dayperiod|The label for the dayperiod part in the timepicker component"
             dayperiod="Dayperiod"
+
+            i18n-clearTitle="kendo.timepicker.clearTitle|The title of the clear button"
+            clearTitle="clear"
         >
         </ng-container>
         <kendo-dateinput
@@ -13099,6 +13850,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             hasPopup="dialog"
             [isPopupOpen]="show"
             [disabled]="disabled"
+            [clearButton]="clearButton"
             [readonly]="readonly || readOnlyInput"
             [role]="'combobox'"
             [ariaReadOnly]="readonly"
@@ -13125,7 +13877,12 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             [value]="value"
             (valueChange)="handleInputChange($event)"
             (click)="handleDateInputClick()"
-        ></kendo-dateinput>
+        >
+            <kendo-dateinput-messages
+                [clearTitle]="localization.get('clearTitle')"
+            >
+            </kendo-dateinput-messages>
+        </kendo-dateinput>
         <button
             #toggleButton
             type="button"
@@ -13250,8 +14007,8 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.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: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.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: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: i1$2.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i12.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i1$2.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.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: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: 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.2.10", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -13306,6 +14063,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
             i18n-dayperiod="kendo.timepicker.dayperiod|The label for the dayperiod part in the timepicker component"
             dayperiod="Dayperiod"
+
+            i18n-clearTitle="kendo.timepicker.clearTitle|The title of the clear button"
+            clearTitle="clear"
         >
         </ng-container>
         <kendo-dateinput
@@ -13314,6 +14074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             hasPopup="dialog"
             [isPopupOpen]="show"
             [disabled]="disabled"
+            [clearButton]="clearButton"
             [readonly]="readonly || readOnlyInput"
             [role]="'combobox'"
             [ariaReadOnly]="readonly"
@@ -13340,7 +14101,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             [value]="value"
             (valueChange)="handleInputChange($event)"
             (click)="handleDateInputClick()"
-        ></kendo-dateinput>
+        >
+            <kendo-dateinput-messages
+                [clearTitle]="localization.get('clearTitle')"
+            >
+            </kendo-dateinput-messages>
+        </kendo-dateinput>
         <button
             #toggleButton
             type="button"
@@ -13468,7 +14234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     `
                 }]
         }], ctorParameters: function () {
-        return [{ type: BusViewService }, { type: i0.NgZone }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i1$2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: PickerService }, { type: i1.IntlService }, { type: undefined, decorators: [{
+        return [{ type: BusViewService }, { type: i0.NgZone }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i1$3.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: PickerService }, { type: i1.IntlService }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -13497,6 +14263,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['class.k-readonly']
             }], readOnlyInput: [{
                 type: Input
+            }], clearButton: [{
+                type: Input
             }], format: [{
                 type: Input
             }], formatPlaceholder: [{
@@ -13577,9 +14345,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  */
 class DateTimePickerMessages extends ComponentMessages {
 }
-DateTimePickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DateTimePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DateTimePickerMessages, selector: "kendo-datetimepicker-messages-base", inputs: { toggle: "toggle", dateTab: "dateTab", dateTabLabel: "dateTabLabel", timeTab: "timeTab", timeTabLabel: "timeTabLabel", accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", today: "today", now: "now", nowLabel: "nowLabel", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimePickerMessages, decorators: [{
+DateTimePickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DateTimePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateTimePickerMessages, selector: "kendo-datetimepicker-messages-base", inputs: { toggle: "toggle", dateTab: "dateTab", dateTabLabel: "dateTabLabel", timeTab: "timeTab", timeTabLabel: "timeTabLabel", accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", today: "today", now: "now", nowLabel: "nowLabel", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -13625,6 +14393,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], dayperiod: [{
                 type: Input
+            }], clearTitle: [{
+                type: Input
             }] } });
 
 /**
@@ -13636,14 +14406,14 @@ class LocalizedMessagesDirective extends DateTimePickerMessages {
         this.service = service;
     }
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]", providers: [
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]", providers: [
         {
             provide: DateTimePickerMessages,
             useExisting: forwardRef(() => LocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -13666,6 +14436,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 %}).
  */
@@ -13819,6 +14590,12 @@ class DateTimePickerComponent {
          * @default false
          */
         this.allowCaretMode = false;
+        /**
+         * If set to `true`, renders a clear button after the input text or DateTimePicker value has been changed.
+         * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
+         * @default false
+         */
+        this.clearButton = false;
         /**
          * When enabled, the DateTimePicker will autofill the rest of the date to the current date when the component loses focus.
          *
@@ -14267,6 +15044,10 @@ class DateTimePickerComponent {
         var _a;
         return (_a = this.popupRef) === null || _a === void 0 ? void 0 : _a.popup.instance.container.nativeElement.querySelector(DATE_TAB_BUTTON_SELECTOR);
     }
+    get timeTabButton() {
+        var _a;
+        return (_a = this.popupRef) === null || _a === void 0 ? void 0 : _a.popup.instance.container.nativeElement.querySelector(TIME_TAB_BUTTON_SELECTOR);
+    }
     /**
      * @hidden
      */
@@ -14516,6 +15297,12 @@ class DateTimePickerComponent {
             this.dateTabButton.focus();
         }
     }
+    /**
+     * @hidden
+     */
+    onTabOutNow() {
+        this.timeTabButton.focus();
+    }
     /**
      * @hidden
      */
@@ -14639,7 +15426,7 @@ class DateTimePickerComponent {
                         this.calendar.monthView.list.nativeElement.focus();
                     }
                     else {
-                        this.timeSelector.focus();
+                        this.timeSelector.timeLists.last.focus();
                     }
                 }
                 break;
@@ -14869,6 +15656,7 @@ class DateTimePickerComponent {
         if (isEqual(this.value, value)) {
             return;
         }
+        this.dateInput.showClearButton = true;
         this.value = cloneDate(value);
         this.onControlChange(cloneDate(value));
         this.valueChange.emit(cloneDate(value));
@@ -14937,8 +15725,8 @@ class DateTimePickerComponent {
         }
     }
 }
-DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1$2.PopupService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i1$1.LocalizationService }, { token: DisabledDatesService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", adaptiveMode: "adaptiveMode", inputAttributes: "inputAttributes", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
+DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1$3.PopupService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i1$1.LocalizationService }, { token: DisabledDatesService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", clearButton: "clearButton", autoFill: "autoFill", adaptiveMode: "adaptiveMode", inputAttributes: "inputAttributes", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
@@ -15009,12 +15797,16 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
 
             i18n-dayperiod="kendo.datetimepicker.dayperiod|The label for the dayperiod part in the timepicker component"
             dayperiod="Dayperiod"
+
+            i18n-clearTitle="kendo.datetimepicker.clearTitle|The title of the clear button"
+            clearTitle="clear"
         >
         </ng-container>
 
         <kendo-dateinput
             [value]="value"
             [format]="format"
+            [clearButton]="clearButton"
             [twoDigitYearMax]="twoDigitYearMax"
             [min]="min"
             [max]="max"
@@ -15050,6 +15842,10 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             [size]="size"
             (click)="handleDateInputClick()"
         >
+            <kendo-dateinput-messages
+                [clearTitle]="localization.get('clearTitle')"
+            >
+            </kendo-dateinput-messages>
         </kendo-dateinput>
         <button
             #toggleButton
@@ -15210,8 +16006,8 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                     <div class="k-datetime-calendar-wrap">
                         <kendo-calendar
                             #calendar
-                            [ngClass]="{'k-calendar-lg': isAdaptive}"
                             [focusedDate]="focusedDate"
+                            [size]="isAdaptive ? 'large' : size"
                             [(value)]="calendarValue"
                             [type]="calendarType"
                             [min]="calendarMin"
@@ -15258,6 +16054,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                             [isAdaptiveEnabled]="isAdaptiveModeEnabled"
                             [isDateTimePicker]="true"
                             (tabOutLastPart)="onTabOutLastPart()"
+                            (tabOutNow)="onTabOutNow()"
                         >
                             <kendo-timeselector-messages
                                 [acceptLabel]="localization.get('acceptLabel')"
@@ -15318,8 +16115,8 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: 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: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: 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: i6.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: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.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: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimePickerComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: 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: i1$2.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i12.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i1$2.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.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: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-datetimepicker',
@@ -15397,12 +16194,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
             i18n-dayperiod="kendo.datetimepicker.dayperiod|The label for the dayperiod part in the timepicker component"
             dayperiod="Dayperiod"
+
+            i18n-clearTitle="kendo.datetimepicker.clearTitle|The title of the clear button"
+            clearTitle="clear"
         >
         </ng-container>
 
         <kendo-dateinput
             [value]="value"
             [format]="format"
+            [clearButton]="clearButton"
             [twoDigitYearMax]="twoDigitYearMax"
             [min]="min"
             [max]="max"
@@ -15438,6 +16239,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             [size]="size"
             (click)="handleDateInputClick()"
         >
+            <kendo-dateinput-messages
+                [clearTitle]="localization.get('clearTitle')"
+            >
+            </kendo-dateinput-messages>
         </kendo-dateinput>
         <button
             #toggleButton
@@ -15598,8 +16403,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                     <div class="k-datetime-calendar-wrap">
                         <kendo-calendar
                             #calendar
-                            [ngClass]="{'k-calendar-lg': isAdaptive}"
                             [focusedDate]="focusedDate"
+                            [size]="isAdaptive ? 'large' : size"
                             [(value)]="calendarValue"
                             [type]="calendarType"
                             [min]="calendarMin"
@@ -15646,6 +16451,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')"
@@ -15709,7 +16515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     `
                 }]
         }], ctorParameters: function () {
-        return [{ type: i1$2.PopupService }, { type: i1.IntlService }, { type: i0.ChangeDetectorRef }, { type: PickerService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+        return [{ type: i1$3.PopupService }, { type: i1.IntlService }, { type: i0.ChangeDetectorRef }, { type: PickerService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [TOUCH_ENABLED]
                     }] }, { type: i1$1.LocalizationService }, { type: DisabledDatesService }, { type: i0.Renderer2 }, { type: i0.Injector }];
@@ -15792,6 +16598,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], allowCaretMode: [{
                 type: Input
+            }], clearButton: [{
+                type: Input
             }], autoFill: [{
                 type: Input
             }], adaptiveMode: [{
@@ -15873,9 +16681,9 @@ class DateRangePopupTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-DateRangePopupTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-DateRangePopupTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DateRangePopupTemplateDirective, selector: "[kendoDateRangePopupTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupTemplateDirective, decorators: [{
+DateRangePopupTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+DateRangePopupTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangePopupTemplateDirective, selector: "[kendoDateRangePopupTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDateRangePopupTemplate]'
@@ -16089,9 +16897,9 @@ class DateRangeService {
         this.range$.next(range);
     }
 }
-DateRangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeService, deps: [{ token: i0.Renderer2, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-DateRangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeService, decorators: [{
+DateRangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeService, deps: [{ token: i0.Renderer2, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+DateRangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeService, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
         return [{ type: i0.Renderer2, decorators: [{
@@ -16277,9 +17085,9 @@ class DateRangeSelectionDirective {
         this.selectionRangeChange.emit(range);
     }
 }
-DateRangeSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeSelectionDirective, deps: [{ token: MultiViewCalendarComponent }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DateRangeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DateRangeSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: { autoCorrectOn: "autoCorrectOn", selectionRange: "selectionRange", activeRangeEnd: "activeRangeEnd", shouldSetRange: "shouldSetRange" }, outputs: { activeRangeEndChange: "activeRangeEndChange", selectionRangeChange: "selectionRangeChange" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeSelectionDirective, decorators: [{
+DateRangeSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeSelectionDirective, deps: [{ token: MultiViewCalendarComponent }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DateRangeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+DateRangeSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: { autoCorrectOn: "autoCorrectOn", selectionRange: "selectionRange", activeRangeEnd: "activeRangeEnd", shouldSetRange: "shouldSetRange" }, outputs: { activeRangeEndChange: "activeRangeEndChange", selectionRangeChange: "selectionRangeChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeSelectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDateRangeSelection]'
@@ -16307,9 +17115,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  */
 class DateRangePopupMessages extends ComponentMessages {
 }
-DateRangePopupMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DateRangePopupMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DateRangePopupMessages, selector: "kendo-daterangepopup-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupMessages, decorators: [{
+DateRangePopupMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DateRangePopupMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangePopupMessages, selector: "kendo-daterangepopup-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -16334,14 +17142,14 @@ class DateRangePopupLocalizedMessagesDirective extends DateRangePopupMessages {
         this.service = service;
     }
 }
-DateRangePopupLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-DateRangePopupLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]", providers: [
+DateRangePopupLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+DateRangePopupLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]", providers: [
         {
             provide: DateRangePopupMessages,
             useExisting: forwardRef(() => DateRangePopupLocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupLocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupLocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -16382,6 +17190,13 @@ 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.
@@ -16520,6 +17335,7 @@ class DateRangePopupComponent {
         }
     }
     ngAfterViewInit() {
+        var _a, _b;
         this.calendarSubscriptions.add(this.contentCalendar.changes.subscribe((changes) => {
             var _a;
             this.calendar = changes.first;
@@ -16532,6 +17348,14 @@ class DateRangePopupComponent {
             this.actionSheet.titleId = (_a = changes.first) === null || _a === void 0 ? void 0 : _a.headerId;
             this.cdr.detectChanges();
         }));
+        this.calendarSubscriptions.add((_b = (_a = this.dateRangeService.startInput$) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.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)));
         }
@@ -16555,6 +17379,19 @@ 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.
      */
@@ -16622,7 +17459,7 @@ class DateRangePopupComponent {
      * @hidden
      */
     handleAccept() {
-        this.dateRangeSelectionDirective.setRange(this.dateRangeService.selectionRange);
+        this.dateRangeService.setRange(this._rangeSelection);
         this.show = false;
     }
     /**
@@ -16801,8 +17638,8 @@ class DateRangePopupComponent {
         }
     }
 }
-DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1$2.PopupService }, { token: DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1$3.PopupService }, { token: DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", size: "size" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -16825,7 +17662,16 @@ 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"
+                [size]="size"
+                [value]="dateRangeService.selectionRange"
+                (onClosePopup)="closePopup($event)"
+                (onTabPress)="handleTab($event)"
+                (onShiftTabPress)="handleShiftTab($event)"
+                (rangeSelectionChange)="onRangeSelectionChange($event)"
+            ></kendo-multiviewcalendar>
         </ng-template>
 
         <kendo-actionsheet
@@ -16866,8 +17712,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>
@@ -16895,8 +17745,8 @@ 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: 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: 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: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.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: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd", "shouldSetRange"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }, { kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "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: i12.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i12.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i1$2.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.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: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendo-daterange-popup',
@@ -16925,7 +17775,16 @@ 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"
+                [size]="size"
+                [value]="dateRangeService.selectionRange"
+                (onClosePopup)="closePopup($event)"
+                (onTabPress)="handleTab($event)"
+                (onShiftTabPress)="handleShiftTab($event)"
+                (rangeSelectionChange)="onRangeSelectionChange($event)"
+            ></kendo-multiviewcalendar>
         </ng-template>
 
         <kendo-actionsheet
@@ -16966,8 +17825,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>
@@ -16998,7 +17861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     `
                 }]
         }], ctorParameters: function () {
-        return [{ type: i1$2.PopupService }, { type: DateRangeService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+        return [{ type: i1$3.PopupService }, { type: DateRangeService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -17025,6 +17888,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }], contentCalendar: [{
                 type: ContentChildren,
                 args: [MultiViewCalendarComponent]
+            }], allowReverse: [{
+                type: Input
             }], animate: [{
                 type: Input
             }], anchor: [{
@@ -17045,6 +17910,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], subtitle: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], open: [{
                 type: Output
             }], close: [{
@@ -17115,22 +17982,24 @@ class DateRangeComponent {
         (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
 }
-DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeComponent, deps: [{ token: DateRangeService }], target: i0.ɵɵFactoryTarget.Component });
-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: `
+DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, deps: [{ token: DateRangeService }], target: i0.ɵɵFactoryTarget.Component });
+DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeComponent, selector: "kendo-daterange", inputs: { size: "size" }, 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeComponent, decorators: [{
+        <kendo-daterange-popup *ngIf="showDefault" [size]="size"></kendo-daterange-popup>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["allowReverse", "animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle", "size"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [DateRangeService],
                     selector: 'kendo-daterange',
                     template: `
         <ng-content></ng-content>
-        <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
+        <kendo-daterange-popup *ngIf="showDefault" [size]="size"></kendo-daterange-popup>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: DateRangeService }]; }, propDecorators: { keydown: [{
+        }], ctorParameters: function () { return [{ type: DateRangeService }]; }, propDecorators: { size: [{
+                type: Input
+            }], keydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }], wrapperClass: [{
@@ -17250,9 +18119,9 @@ class DateRangeInput {
         }
     }
 }
-DateRangeInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeInput, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-DateRangeInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DateRangeInput, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeInput, decorators: [{
+DateRangeInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeInput, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+DateRangeInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeInput, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeInput, decorators: [{
             type: Directive,
             args: [{}]
         }], ctorParameters: function () { return [{ type: undefined }, { type: DateRangeService }, { type: DateInputComponent }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; } });
@@ -17323,9 +18192,9 @@ class DateRangeEndInputDirective extends DateRangeInput {
         this.dateInput.notify();
     }
 }
-DateRangeEndInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeEndInputDirective, deps: [{ token: DateRangeService }, { token: DateInputComponent }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-DateRangeEndInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeEndInputDirective, decorators: [{
+DateRangeEndInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeEndInputDirective, deps: [{ token: DateRangeService }, { token: DateInputComponent }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+DateRangeEndInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeEndInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDateRangeEndInput]'
@@ -17404,9 +18273,9 @@ class DateRangeStartInputDirective extends DateRangeInput {
         this.dateInput.notify();
     }
 }
-DateRangeStartInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeStartInputDirective, deps: [{ token: DateRangeService }, { token: DateInputComponent }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-DateRangeStartInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeStartInputDirective, decorators: [{
+DateRangeStartInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeStartInputDirective, deps: [{ token: DateRangeService }, { token: DateInputComponent }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+DateRangeStartInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeStartInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDateRangeStartInput]'
@@ -17429,16 +18298,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  */
 class CalendarCommonModule {
 }
-CalendarCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CalendarCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: CalendarCommonModule, declarations: [KForOf,
+CalendarCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CalendarCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CalendarCommonModule, declarations: [KForOf,
         HeaderComponent,
         FooterComponent,
         ViewComponent], imports: [CommonModule, EventsModule, ButtonModule], exports: [KForOf,
         HeaderComponent,
         FooterComponent,
         ViewComponent] });
-CalendarCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarCommonModule, imports: [CommonModule, EventsModule, ButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarCommonModule, decorators: [{
+CalendarCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarCommonModule, imports: [CommonModule, EventsModule, ButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -17474,8 +18343,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  */
 class TemplatesModule {
 }
-TemplatesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TemplatesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TemplatesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: TemplatesModule, declarations: [CellTemplateDirective,
+TemplatesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TemplatesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TemplatesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TemplatesModule, declarations: [CellTemplateDirective,
         MonthCellTemplateDirective,
         YearCellTemplateDirective,
         DecadeCellTemplateDirective,
@@ -17494,8 +18363,8 @@ TemplatesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         NavigationItemTemplateDirective,
         HeaderTemplateDirective,
         FooterTemplateDirective] });
-TemplatesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TemplatesModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TemplatesModule, decorators: [{
+TemplatesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TemplatesModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TemplatesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -17562,8 +18431,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  */
 class MultiViewCalendarModule {
 }
-MultiViewCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MultiViewCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarModule, declarations: [HorizontalViewListComponent,
+MultiViewCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MultiViewCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarModule, declarations: [HorizontalViewListComponent,
         MultiViewCalendarLocalizedMessagesDirective,
         MultiViewCalendarCustomMessagesComponent,
         MultiViewCalendarComponent], imports: [CommonModule,
@@ -17577,7 +18446,7 @@ MultiViewCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         MultiViewCalendarComponent,
         CalendarCommonModule,
         TemplatesModule] });
-MultiViewCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarModule, providers: [
+MultiViewCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarModule, providers: [
         NavigationService,
         CenturyViewService,
         DecadeViewService,
@@ -17591,7 +18460,7 @@ MultiViewCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         PopupModule,
         EventsModule, CalendarCommonModule,
         TemplatesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -17638,10 +18507,10 @@ const COMPONENT_DIRECTIVES$3 = [
  */
 class VirtualizationModule {
 }
-VirtualizationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VirtualizationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-VirtualizationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: VirtualizationModule, declarations: [VirtualizationComponent], imports: [CommonModule], exports: [VirtualizationComponent] });
-VirtualizationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VirtualizationModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VirtualizationModule, decorators: [{
+VirtualizationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VirtualizationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+VirtualizationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: VirtualizationModule, declarations: [VirtualizationComponent], imports: [CommonModule], exports: [VirtualizationComponent] });
+VirtualizationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VirtualizationModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VirtualizationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENT_DIRECTIVES$3],
@@ -17692,8 +18561,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  */
 class CalendarModule {
 }
-CalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: CalendarModule, declarations: [CalendarComponent,
+CalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CalendarModule, declarations: [CalendarComponent,
         NavigationComponent,
         CalendarCustomMessagesComponent,
         CalendarLocalizedMessagesDirective,
@@ -17711,7 +18580,7 @@ CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         ViewListComponent,
         CalendarCommonModule,
         TemplatesModule] });
-CalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarModule, providers: [
+CalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarModule, providers: [
         CalendarDOMService,
         CenturyViewService,
         DecadeViewService,
@@ -17727,7 +18596,7 @@ CalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         EventsModule,
         ResizeSensorModule, CalendarCommonModule,
         TemplatesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -17803,14 +18672,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  */
 class CalendarsModule {
 }
-CalendarsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CalendarsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: CalendarsModule, imports: [CalendarModule,
+CalendarsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CalendarsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CalendarsModule, imports: [CalendarModule,
         MultiViewCalendarModule], exports: [CalendarModule,
         MultiViewCalendarModule] });
-CalendarsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarsModule, imports: [CalendarModule,
+CalendarsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarsModule, imports: [CalendarModule,
         MultiViewCalendarModule, CalendarModule,
         MultiViewCalendarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -17824,53 +18693,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 }]
         }] });
 
-/**
- * Custom component messages override default component messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
- */
-class DateInputCustomMessagesComponent extends DateInputMessages {
-    constructor(service) {
-        super();
-        this.service = service;
-    }
-    get override() {
-        return true;
-    }
-}
-DateInputCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DateInputCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages", providers: [
-        {
-            provide: DateInputMessages,
-            useExisting: forwardRef(() => DateInputCustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputCustomMessagesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [
-                        {
-                            provide: DateInputMessages,
-                            useExisting: forwardRef(() => DateInputCustomMessagesComponent)
-                        }
-                    ],
-                    selector: 'kendo-dateinput-messages',
-                    template: ``
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
-
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the DateInput component.
  */
 class DateInputModule {
 }
-DateInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: DateInputModule, declarations: [DateInputComponent,
+DateInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DateInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DateInputModule, declarations: [DateInputComponent,
         DateInputCustomMessagesComponent,
         DateInputLocalizedMessagesDirective], imports: [CommonModule, IntlModule, EventsModule, IconsModule], exports: [DateInputComponent,
         DateInputCustomMessagesComponent,
         DateInputLocalizedMessagesDirective] });
-DateInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputModule, imports: [CommonModule, IntlModule, EventsModule, IconsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputModule, decorators: [{
+DateInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputModule, imports: [CommonModule, IntlModule, EventsModule, IconsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -17899,14 +18735,14 @@ class DatePickerCustomMessagesComponent extends DatePickerMessages {
         return true;
     }
 }
-DatePickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DatePickerCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages", providers: [
+DatePickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DatePickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages", providers: [
         {
             provide: DatePickerMessages,
             useExisting: forwardRef(() => DatePickerCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DatePickerCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -17932,19 +18768,19 @@ const ADAPTIVE_MODULES = [
  */
 class AdaptiveModule {
 }
-AdaptiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AdaptiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AdaptiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: AdaptiveModule, imports: [NavigationModule,
+AdaptiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AdaptiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AdaptiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AdaptiveModule, imports: [NavigationModule,
         ResizeSensorModule,
         ButtonModule,
         TextBoxModule], exports: [NavigationModule,
         ResizeSensorModule,
         ButtonModule,
         TextBoxModule] });
-AdaptiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AdaptiveModule, imports: [ADAPTIVE_MODULES, NavigationModule,
+AdaptiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AdaptiveModule, imports: [ADAPTIVE_MODULES, NavigationModule,
         ResizeSensorModule,
         ButtonModule,
         TextBoxModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AdaptiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AdaptiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...ADAPTIVE_MODULES],
@@ -17958,8 +18794,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  */
 class DatePickerModule {
 }
-DatePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: DatePickerModule, declarations: [DatePickerComponent,
+DatePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DatePickerModule, declarations: [DatePickerComponent,
         DatePickerCustomMessagesComponent,
         DatePickerLocalizedMessagesDirective], imports: [CommonModule,
         DateInputModule,
@@ -17974,7 +18810,7 @@ DatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         DatePickerLocalizedMessagesDirective,
         TemplatesModule,
         ToggleButtonTabStopModule] });
-DatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DatePickerModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [CommonModule,
+DatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [CommonModule,
         DateInputModule,
         CalendarModule,
         IntlModule,
@@ -17984,7 +18820,7 @@ DatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
         IconsModule,
         AdaptiveModule, TemplatesModule,
         ToggleButtonTabStopModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DatePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -18026,14 +18862,14 @@ class DateRangePopupCustomMessagesComponent extends DateRangePopupMessages {
         return true;
     }
 }
-DateRangePopupCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DateRangePopupCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateRangePopupCustomMessagesComponent, selector: "kendo-daterange-popup-messages", providers: [
+DateRangePopupCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DateRangePopupCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangePopupCustomMessagesComponent, selector: "kendo-daterange-popup-messages", providers: [
         {
             provide: DateRangePopupMessages,
             useExisting: forwardRef(() => DateRangePopupCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -18104,8 +18940,8 @@ const COMPONENT_MODULES$2 = [
  */
 class DateRangeModule {
 }
-DateRangeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateRangeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: DateRangeModule, declarations: [DateRangeComponent,
+DateRangeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DateRangeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DateRangeModule, declarations: [DateRangeComponent,
         DateRangePopupComponent,
         DateRangePopupTemplateDirective,
         DateRangeSelectionDirective,
@@ -18124,8 +18960,8 @@ DateRangeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         DateRangeEndInputDirective,
         DateRangePopupCustomMessagesComponent,
         DateRangePopupLocalizedMessagesDirective] });
-DateRangeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeModule, imports: [CommonModule, COMPONENT_MODULES$2] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeModule, decorators: [{
+DateRangeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeModule, imports: [CommonModule, COMPONENT_MODULES$2] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENT_DIRECTIVES$2],
@@ -18146,14 +18982,14 @@ class TimePickerCustomMessagesComponent extends TimePickerMessages {
         return true;
     }
 }
-TimePickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimePickerCustomMessagesComponent, selector: "kendo-timepicker-messages", providers: [
+TimePickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TimePickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerCustomMessagesComponent, selector: "kendo-timepicker-messages", providers: [
         {
             provide: TimePickerMessages,
             useExisting: forwardRef(() => TimePickerCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -18204,8 +19040,8 @@ const providers = [
  */
 class TimePickerModule {
 }
-TimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: TimePickerModule, declarations: [TimePickerLocalizedMessagesDirective,
+TimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TimePickerModule, declarations: [TimePickerLocalizedMessagesDirective,
         TimeListComponent,
         TimePickerCustomMessagesComponent,
         TimePickerComponent,
@@ -18225,8 +19061,8 @@ TimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         TimeSelectorLocalizedMessagesDirective,
         TimeSelectorCustomMessagesComponent,
         TimeSelectorComponent] });
-TimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerModule, providers: providers, imports: [CommonModule, COMPONENT_MODULES$1] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerModule, decorators: [{
+TimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerModule, providers: providers, imports: [CommonModule, COMPONENT_MODULES$1] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENT_DIRECTIVES$1],
@@ -18248,14 +19084,14 @@ class DateTimePickerCustomMessagesComponent extends DateTimePickerMessages {
         return true;
     }
 }
-DateTimePickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimePickerCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateTimePickerCustomMessagesComponent, selector: "kendo-datetimepicker-messages", providers: [
+DateTimePickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateTimePickerCustomMessagesComponent, selector: "kendo-datetimepicker-messages", providers: [
         {
             provide: DateTimePickerMessages,
             useExisting: forwardRef(() => DateTimePickerCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimePickerCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -18280,8 +19116,8 @@ const COMPONENT_DIRECTIVES = [
  */
 class DateTimePickerModule {
 }
-DateTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: DateTimePickerModule, declarations: [DateTimePickerComponent,
+DateTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerModule, declarations: [DateTimePickerComponent,
         DateTimePickerCustomMessagesComponent,
         LocalizedMessagesDirective], imports: [CommonModule,
         IntlModule,
@@ -18296,7 +19132,7 @@ DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         DateTimePickerCustomMessagesComponent,
         LocalizedMessagesDirective, TemplatesModule,
         ToggleButtonTabStopModule] });
-DateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimePickerModule, providers: [
+DateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerModule, providers: [
         { provide: TOUCH_ENABLED, useValue: touchEnabled }
     ], imports: [CommonModule,
         IntlModule,
@@ -18309,7 +19145,7 @@ DateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
         IconsModule,
         AdaptiveModule, TemplatesModule,
         ToggleButtonTabStopModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -18379,8 +19215,8 @@ const COMPONENT_MODULES = [
  */
 class DateInputsModule {
 }
-DateInputsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateInputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: DateInputsModule, imports: [CalendarsModule,
+DateInputsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DateInputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DateInputsModule, imports: [CalendarsModule,
         DateInputModule,
         DatePickerModule,
         TimePickerModule,
@@ -18391,13 +19227,13 @@ DateInputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         TimePickerModule,
         DateRangeModule,
         DateTimePickerModule] });
-DateInputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputsModule, imports: [COMPONENT_MODULES, CalendarsModule,
+DateInputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputsModule, imports: [COMPONENT_MODULES, CalendarsModule,
         DateInputModule,
         DatePickerModule,
         TimePickerModule,
         DateRangeModule,
         DateTimePickerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: COMPONENT_MODULES,