@progress/kendo-angular-dateinputs 7.1.6 → 11.0.0-develop.100

package/{fesm2015/kendo-angular-dateinputs.js → fesm2020/progress-kendo-angular-dateinputs.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
@@ -8,7 +8,7 @@ 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, 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 i5 from '@progress/kendo-angular-common';
+import * as i6 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, KendoInput, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-intl';
@@ -16,7 +16,12 @@ import { IntlModule } from '@progress/kendo-angular-intl';
 import { Subject, Subscription, ReplaySubject, Observable, combineLatest, of, interval, animationFrameScheduler, fromEvent, EMPTY, from, BehaviorSubject, merge } from 'rxjs';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { chevronRightIcon, chevronLeftIcon, caretAltUpIcon, caretAltDownIcon, calendarIcon, clockIcon } from '@progress/kendo-svg-icons';
+import * as i5 from '@progress/kendo-angular-buttons';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
 import { map, scan, takeWhile, debounceTime, tap, filter } from 'rxjs/operators';
+import * as i7$1 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import { touchEnabled } from '@progress/kendo-common';
@@ -28,9 +33,9 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1668698426,
+    publishDate: 1673469308,
     version: '',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
 /**
@@ -52,16 +57,8 @@ var Action;
 
 /**
  * @hidden
- *
- * The Enum which defines all possible Calendar view types.
  */
-var CalendarViewEnum;
-(function (CalendarViewEnum) {
-    CalendarViewEnum[CalendarViewEnum["month"] = 0] = "month";
-    CalendarViewEnum[CalendarViewEnum["year"] = 1] = "year";
-    CalendarViewEnum[CalendarViewEnum["decade"] = 2] = "decade";
-    CalendarViewEnum[CalendarViewEnum["century"] = 3] = "century";
-})(CalendarViewEnum || (CalendarViewEnum = {}));
+const EMPTY_SELECTIONRANGE = { start: null, end: null };
 
 /**
  * @hidden
@@ -84,11 +81,6 @@ const MIN_TIME = new Date(1980, 0, 1);
  */
 const MAX_TIME = new Date(1980, 0, 1, 23, 59, 59);
 
-/**
- * @hidden
- */
-const EMPTY_SELECTIONRANGE = { start: null, end: null };
-
 /**
  * @hidden
  */
@@ -464,13 +456,13 @@ const cropTwoDigitYear = (date) => {
  * Used when resetting millisecond segment value in the DateInput
  */
 const msPaddingFromFormat = (format) => {
-    return Array(format.match(/S+(\1)/)[0].length).join("0");
+    return Array(format.match(/S+(\1)/)[0].length).join("0"); // eslint-disable-line no-useless-backreference
 };
 /**
  * @hidden
  */
 const millisecondDigitsInFormat = (format) => {
-    const result = format && format.match(/S+(\1)/);
+    const result = format && format.match(/S+(\1)/); // eslint-disable-line no-useless-backreference
     return result ? result[0].length : 0;
 };
 /**
@@ -704,9 +696,9 @@ class CenturyViewService {
         return cellDate;
     }
 }
-CenturyViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CenturyViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CenturyViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CenturyViewService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CenturyViewService, decorators: [{
+CenturyViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CenturyViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CenturyViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CenturyViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CenturyViewService, decorators: [{
             type: Injectable
         }] });
 
@@ -869,9 +861,9 @@ class DecadeViewService {
         return cellDate;
     }
 }
-DecadeViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DecadeViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DecadeViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DecadeViewService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DecadeViewService, decorators: [{
+DecadeViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DecadeViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DecadeViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DecadeViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DecadeViewService, decorators: [{
             type: Injectable
         }] });
 
@@ -1055,9 +1047,9 @@ class MonthViewService {
         return this._intlService.dateFormatNames({ nameType: 'wide', type: 'months' });
     }
 }
-MonthViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-MonthViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewService, decorators: [{
+MonthViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthViewService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+MonthViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthViewService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
@@ -1240,12 +1232,25 @@ class YearViewService {
         return cellDate;
     }
 }
-YearViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: YearViewService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-YearViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: YearViewService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: YearViewService, decorators: [{
+YearViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: YearViewService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+YearViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: YearViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: YearViewService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
+/**
+ * @hidden
+ *
+ * The Enum which defines all possible Calendar view types.
+ */
+var CalendarViewEnum;
+(function (CalendarViewEnum) {
+    CalendarViewEnum[CalendarViewEnum["month"] = 0] = "month";
+    CalendarViewEnum[CalendarViewEnum["year"] = 1] = "year";
+    CalendarViewEnum[CalendarViewEnum["decade"] = 2] = "decade";
+    CalendarViewEnum[CalendarViewEnum["century"] = 3] = "century";
+})(CalendarViewEnum || (CalendarViewEnum = {}));
+
 const services$1 = {
     [CalendarViewEnum.month]: MonthViewService,
     [CalendarViewEnum.year]: YearViewService,
@@ -1311,9 +1316,9 @@ class BusViewService {
         this.viewChanged.emit({ view: candidate });
     }
 }
-BusViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BusViewService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-BusViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BusViewService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BusViewService, decorators: [{
+BusViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BusViewService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+BusViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BusViewService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BusViewService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
@@ -1329,33 +1334,12 @@ class WeekNamesService {
         return includeWeekNumber ? [''].concat(weekNames) : weekNames;
     }
 }
-WeekNamesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WeekNamesService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-WeekNamesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WeekNamesService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WeekNamesService, decorators: [{
+WeekNamesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WeekNamesService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+WeekNamesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WeekNamesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WeekNamesService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
-/**
- * @hidden
- */
-const closestInScope = (node, predicate, scope) => {
-    while (node && node !== scope && !predicate(node)) {
-        node = node.parentNode;
-    }
-    if (node !== scope) {
-        return node;
-    }
-};
-/**
- * @hidden
- */
-const closest = (node, predicate) => {
-    while (node && !predicate(node)) {
-        node = node.parentNode;
-    }
-    return node;
-};
-
 const noop$1 = () => false;
 const DISABLED_DATES_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/disabled-dates/';
 /**
@@ -1410,12 +1394,33 @@ class DisabledDatesService {
         this.changes.next();
     }
 }
-DisabledDatesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DisabledDatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DisabledDatesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DisabledDatesService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DisabledDatesService, decorators: [{
+DisabledDatesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DisabledDatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DisabledDatesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DisabledDatesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DisabledDatesService, decorators: [{
             type: Injectable
         }] });
 
+/**
+ * @hidden
+ */
+const closestInScope = (node, predicate, scope) => {
+    while (node && node !== scope && !predicate(node)) {
+        node = node.parentNode;
+    }
+    if (node !== scope) {
+        return node;
+    }
+};
+/**
+ * @hidden
+ */
+const closest = (node, predicate) => {
+    while (node && !predicate(node)) {
+        node = node.parentNode;
+    }
+    return node;
+};
+
 /**
  * @hidden
  */
@@ -1449,7 +1454,7 @@ class KForOf {
     }
     ngOnChanges(changes) {
         if ('kForOf' in changes) {
-            const value = changes.kForOf.currentValue;
+            const value = changes['kForOf'].currentValue;
             if (this._differ || !value) {
                 return;
             }
@@ -1495,9 +1500,9 @@ class KForOf {
         }
     }
 }
-KForOf.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KForOf, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive });
-KForOf.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: KForOf, selector: "[kFor][kForOf]", inputs: { kForOf: "kForOf", kForTrackBy: "kForTrackBy", kForTemplate: "kForTemplate" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KForOf, decorators: [{
+KForOf.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: KForOf, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive });
+KForOf.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: KForOf, selector: "[kFor][kForOf]", inputs: { kForOf: "kForOf", kForTrackBy: "kForTrackBy", kForTemplate: "kForTemplate" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: [{
@@ -1726,8 +1731,8 @@ class ViewComponent {
         return this.data[rowIndex][cellIndex];
     }
 }
-ViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: ViewComponent, selector: "[kendoCalendarView]", inputs: { 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" }, 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: "13.3.11", 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: "12.0.0", version: "13.3.11", type: ViewComponent, selector: "[kendoCalendarView]", inputs: { 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" }, 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"><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">
@@ -1776,8 +1781,8 @@ ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             </td>
         </ng-container>
     </tr>
-  `, isInline: true, directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewComponent, decorators: [{
+  `, isInline: true, directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line
@@ -2127,8 +2132,8 @@ class HorizontalViewListComponent {
         }
     }
 }
-HorizontalViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { 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", 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" } }, usesOnChanges: true, ngImport: i0, template: `
+HorizontalViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { 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", 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" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #tableTemplate let-date="date" let-class="className">
             <table
                 [attr.role]="views === 2 ? 'none' : 'grid'"
@@ -2210,7 +2215,7 @@ HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         >
         </ng-template>
     `, isInline: true, components: [{ type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HorizontalViewListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HorizontalViewListComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2402,6 +2407,14 @@ class HeaderComponent {
         this.localization = localization;
         this.intl = intl;
         this.disabledDatesService = disabledDatesService;
+        /**
+         * @hidden
+         */
+        this.chevronRightIcon = chevronRightIcon;
+        /**
+         * @hidden
+         */
+        this.chevronLeftIcon = chevronLeftIcon;
         this.navigate = true;
         this.todayAvailable = true;
         this.min = new Date(MIN_DATE);
@@ -2493,8 +2506,8 @@ class HeaderComponent {
         this.cdr.markForCheck();
     }
 }
-HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", templateRef: "templateRef", 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: "13.3.11", 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: "12.0.0", version: "13.3.11", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", templateRef: "templateRef", 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: `
     <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title"
         role="button"
         [id]="id"
@@ -2517,31 +2530,38 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
     <span class="k-calendar-nav k-hstack">
         <button
             *ngIf="showNavigationButtons"
-            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-prev"
+            kendoButton
+            fillMode="flat"
+            [svgIcon]="chevronLeftIcon"
+            icon="chevron-left"
             tabindex="-1"
             type="button"
+            class="k-calendar-nav-prev"
             [attr.aria-disabled]="isPrevDisabled"
             [disabled]="isPrevDisabled"
             [title]="prevButtonTitle"
             (click)="prevButtonClick.emit()"
         >
-            <span class="k-icon k-i-chevron-left"></span>
         </button>
-        <span
-            class="k-today k-calendar-nav-today"
+        <button
+            class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md"
             tabindex="-1"
             [class.k-disabled]="!todayAvailable"
             [kendoEventsOutsideAngular]="{
                 click: handleTodayClick
             }"
             [scope]="this"
-            role="link"
+            type="button"
         >
             {{ todayMessage }}
-        </span>
+        </button>
         <button
             *ngIf="showNavigationButtons"
-            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-next"
+            kendoButton
+            fillMode="flat"
+            [svgIcon]="chevronRightIcon"
+            icon="chevron-right"
+            class="k-calendar-nav-next"
             tabindex="-1"
             type="button"
             [attr.aria-disabled]="isNextDisabled"
@@ -2549,11 +2569,10 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             [title]="nextButtonTitle"
             (click)="nextButtonClick.emit()"
         >
-            <span class="k-icon k-i-chevron-right"></span>
         </button>
     </span>
-  `, isInline: true, directives: [{ type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HeaderComponent, decorators: [{
+  `, isInline: true, components: [{ type: i5.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-calendar-header',
@@ -2580,31 +2599,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
     <span class="k-calendar-nav k-hstack">
         <button
             *ngIf="showNavigationButtons"
-            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-prev"
+            kendoButton
+            fillMode="flat"
+            [svgIcon]="chevronLeftIcon"
+            icon="chevron-left"
             tabindex="-1"
             type="button"
+            class="k-calendar-nav-prev"
             [attr.aria-disabled]="isPrevDisabled"
             [disabled]="isPrevDisabled"
             [title]="prevButtonTitle"
             (click)="prevButtonClick.emit()"
         >
-            <span class="k-icon k-i-chevron-left"></span>
         </button>
-        <span
-            class="k-today k-calendar-nav-today"
+        <button
+            class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md"
             tabindex="-1"
             [class.k-disabled]="!todayAvailable"
             [kendoEventsOutsideAngular]="{
                 click: handleTodayClick
             }"
             [scope]="this"
-            role="link"
+            type="button"
         >
             {{ todayMessage }}
-        </span>
+        </button>
         <button
             *ngIf="showNavigationButtons"
-            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-next"
+            kendoButton
+            fillMode="flat"
+            [svgIcon]="chevronRightIcon"
+            icon="chevron-right"
+            class="k-calendar-nav-next"
             tabindex="-1"
             type="button"
             [attr.aria-disabled]="isNextDisabled"
@@ -2612,7 +2638,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [title]="nextButtonTitle"
             (click)="nextButtonClick.emit()"
         >
-            <span class="k-icon k-i-chevron-right"></span>
         </button>
     </span>
   `
@@ -2664,6 +2689,7 @@ class SelectionService {
         this.bus = bus;
     }
     performSelection(args) {
+        /* eslint prefer-const: ["error", {"destructuring": "all"}] */
         let { date, modifiers, selectionMode, activeViewEnum, rangePivot } = args;
         let selectedDates = args.selectedDates.slice();
         if (selectionMode === 'multiple') {
@@ -2700,9 +2726,9 @@ class SelectionService {
         return selectedDates.some(item => isEqual(item, date));
     }
 }
-SelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionService, deps: [{ token: BusViewService }], target: i0.ɵɵFactoryTarget.Injectable });
-SelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionService, decorators: [{
+SelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectionService, deps: [{ token: BusViewService }], target: i0.ɵɵFactoryTarget.Injectable });
+SelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectionService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectionService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: BusViewService }]; } });
 
@@ -2738,9 +2764,9 @@ class CellTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-CellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CellTemplateDirective, selector: "[kendoCalendarCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CellTemplateDirective, decorators: [{
+CellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: CellTemplateDirective, selector: "[kendoCalendarCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarCellTemplate]'
@@ -2776,9 +2802,9 @@ class MonthCellTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-MonthCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-MonthCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MonthCellTemplateDirective, selector: "[kendoCalendarMonthCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthCellTemplateDirective, decorators: [{
+MonthCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+MonthCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: MonthCellTemplateDirective, selector: "[kendoCalendarMonthCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarMonthCellTemplate]'
@@ -2817,9 +2843,9 @@ class YearCellTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-YearCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: YearCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-YearCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: YearCellTemplateDirective, selector: "[kendoCalendarYearCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: YearCellTemplateDirective, decorators: [{
+YearCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: YearCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+YearCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: YearCellTemplateDirective, selector: "[kendoCalendarYearCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: YearCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarYearCellTemplate]'
@@ -2857,9 +2883,9 @@ class DecadeCellTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-DecadeCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DecadeCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-DecadeCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DecadeCellTemplateDirective, selector: "[kendoCalendarDecadeCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DecadeCellTemplateDirective, decorators: [{
+DecadeCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DecadeCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+DecadeCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DecadeCellTemplateDirective, selector: "[kendoCalendarDecadeCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DecadeCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarDecadeCellTemplate]'
@@ -2897,9 +2923,9 @@ class CenturyCellTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-CenturyCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CenturyCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-CenturyCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CenturyCellTemplateDirective, selector: "[kendoCalendarCenturyCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CenturyCellTemplateDirective, decorators: [{
+CenturyCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CenturyCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+CenturyCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: CenturyCellTemplateDirective, selector: "[kendoCalendarCenturyCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CenturyCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarCenturyCellTemplate]'
@@ -2935,9 +2961,9 @@ class WeekNumberCellTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-WeekNumberCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WeekNumberCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-WeekNumberCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: WeekNumberCellTemplateDirective, selector: "[kendoCalendarWeekNumberCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WeekNumberCellTemplateDirective, decorators: [{
+WeekNumberCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WeekNumberCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+WeekNumberCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: WeekNumberCellTemplateDirective, selector: "[kendoCalendarWeekNumberCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WeekNumberCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarWeekNumberCellTemplate]'
@@ -2974,9 +3000,9 @@ class HeaderTitleTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-HeaderTitleTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HeaderTitleTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-HeaderTitleTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HeaderTitleTemplateDirective, selector: "[kendoCalendarHeaderTitleTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HeaderTitleTemplateDirective, decorators: [{
+HeaderTitleTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeaderTitleTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+HeaderTitleTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: HeaderTitleTemplateDirective, selector: "[kendoCalendarHeaderTitleTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeaderTitleTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarHeaderTitleTemplate]'
@@ -3079,9 +3105,9 @@ class NavigationService {
         return service.move(value, action);
     }
 }
-NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, deps: [{ token: BusViewService }], target: i0.ɵɵFactoryTarget.Injectable });
-NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, decorators: [{
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService, deps: [{ token: BusViewService }], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: BusViewService }]; } });
 
@@ -3090,9 +3116,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class Messages$1 extends ComponentMessages {
 }
-Messages$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages$1, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages$1.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages$1, 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: "12.2.16", ngImport: i0, type: Messages$1, decorators: [{
+Messages$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages$1, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages$1.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: Messages$1, 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: "13.3.11", ngImport: i0, type: Messages$1, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -3117,14 +3143,14 @@ class MultiViewCalendarLocalizedMessagesDirective extends Messages$1 {
         this.service = service;
     }
 }
-MultiViewCalendarLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-MultiViewCalendarLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]", providers: [
+MultiViewCalendarLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiViewCalendarLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+MultiViewCalendarLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]", providers: [
         {
             provide: Messages$1,
             useExisting: forwardRef(() => MultiViewCalendarLocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarLocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiViewCalendarLocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -3898,8 +3924,8 @@ class MultiViewCalendarComponent {
         });
     }
 }
-MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", 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"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", blurEvent: "blur", focusEvent: "focus", focusCalendar: "focusCalendar" }, 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: "13.3.11", 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: "12.0.0", version: "13.3.11", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", 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"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", blurEvent: "blur", focusEvent: "focus", focusCalendar: "focusCalendar" }, 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,
@@ -3975,7 +4001,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
     >
     </kendo-calendar-horizontal>
   `, isInline: true, components: [{ type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "activeDescendant", "tabIndex", "disabled", "id", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }], directives: [{ type: MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiViewCalendarComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -4197,6 +4223,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ["keydown", ["$event"]]
             }] } });
 
+const div$1 = domContainerFactory('div');
+const ul$1 = domContainerFactory('ul');
+const li$1 = domContainerFactory('li');
+const td = domContainerFactory('td');
+const th = domContainerFactory('th');
+const tr = domContainerFactory('tr');
+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-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'));
+const monthWeekHeader = () => (table([
+    thead([
+        tr([th('MO', 'k-calendar-th')], 'k-calendar-tr')
+    ], 'k-calendar-thead')
+], 'k-calendar-weekdays k-calendar-table'));
+const repeat = (count, mapper) => new Array(count).fill('1').map(mapper);
+const content = (rows, cells = 1) => (table([
+    tbody([tr([th('1', 'k-calendar-th')], 'k-calendar-tr')].concat(repeat(rows, () => tr(repeat(cells, c => td(`<span class="k-link">${c}</span>`, 'k-calendar-td')), 'k-calendar-tr'))), 'k-calendar-tbody')
+], 'k-calendar-table'));
+const scrollable$1 = (children) => div$1(children, 'k-flex k-content k-scrollable');
+const view = (contentElement, className, renderWeekHeader) => (div$1([
+    monthHeader(),
+    renderWeekHeader ? monthWeekHeader() : null,
+    scrollable$1([contentElement, contentElement])
+], className, { left: '-10000px', position: 'absolute' }));
+const navigationList = (() => {
+    let navElement;
+    return () => {
+        if (!isDocumentAvailable) {
+            return null;
+        }
+        if (!navElement) {
+            navElement = div$1([scrollable$1([ul$1([li$1('<span>FEB</span>')])])], 'k-calendar-navigation', { left: '0px', position: 'absolute' });
+        }
+        return navElement;
+    };
+})();
+const viewFactory = ({ cells, rows }, className, renderWeekHeader) => {
+    let viewElement;
+    return () => {
+        if (!isDocumentAvailable) {
+            return null;
+        }
+        if (!viewElement) {
+            viewElement = view(content(rows, cells), className, renderWeekHeader);
+        }
+        return viewElement;
+    };
+};
+const getScrollable = (element) => element.querySelector('.k-scrollable');
+const horizontal = element => {
+    const scrollableElement = getScrollable(element);
+    scrollableElement.classList.add('k-scrollable-horizontal');
+    return element;
+};
+const monthView = viewFactory({ cells: 7, rows: 6 }, 'k-vstack k-calendar-view k-calendar-monthview', true);
+const yearView = viewFactory({ cells: 4, rows: 3 }, 'k-vstack k-calendar-view k-calendar-yearview', false);
+const decadeView = viewFactory({ cells: 4, rows: 3 }, 'k-vstack k-calendar-view k-calendar-decadeview', false);
+const horzMonthView = () => horizontal(monthView());
+const horzYearView = () => horizontal(yearView());
+const horzDecadeView = () => horizontal(decadeView());
+const height = (element) => (parseFloat(window.getComputedStyle(element).height) || element.offsetHeight);
+const width = (element) => {
+    const styles = window.getComputedStyle(element);
+    const computed = parseFloat(styles.width)
+        + parseFloat(styles.paddingLeft)
+        + parseFloat(styles.paddingRight);
+    return computed || element.offsetWidth;
+};
+const getBody = (element) => element.querySelector('tbody');
+/**
+ * @hidden
+ */
+class CalendarDOMService {
+    ensureHeights() {
+        if (this.calendarHeight !== undefined) {
+            return;
+        }
+        this.calculateHeights();
+    }
+    calculateHeights(container) {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.hostContainer = container;
+        this.batch(monthView(), (contentElement) => {
+            const viewElement = getBody(contentElement);
+            this.calendarHeight = height(contentElement);
+            this.monthViewHeight = height(viewElement);
+            this.headerHeight = height(viewElement.children[0]);
+            this.scrollableContentHeight = height(getScrollable(contentElement));
+        });
+        this.batch(horzMonthView(), (contentElement) => {
+            const viewElement = getBody(contentElement);
+            this.calendarWidth = width(contentElement);
+            this.monthViewWidth = width(viewElement);
+            this.scrollableContentWidth = width(getScrollable(contentElement));
+        });
+        this.batch(yearView(), (contentElement) => {
+            this.yearViewHeight = height(getBody(contentElement));
+            this.scrollableYearContentHeight = height(getScrollable(contentElement));
+        });
+        this.batch(horzYearView(), (contentElement) => {
+            this.yearViewWidth = width(getBody(contentElement));
+        });
+        this.batch(decadeView(), (contentElement) => {
+            this.decadeViewHeight = height(getBody(contentElement));
+            this.centuryViewHeight = this.decadeViewHeight;
+        });
+        this.batch(horzDecadeView(), (contentElement) => {
+            this.decadeViewWidth = width(getBody(contentElement));
+            this.centuryViewWidth = this.decadeViewWidth;
+        });
+        this.batch(navigationList(), (contentElement) => {
+            this.navigationItemHeight = height(contentElement.querySelector('li'));
+        });
+    }
+    viewHeight(viewType) {
+        return this.viewDimension(viewType, 'height');
+    }
+    viewWidth(viewType) {
+        return this.viewDimension(viewType, 'width');
+    }
+    viewDimension(viewType, dimension) {
+        const viewProp = dimension === 'height' ? 'ViewHeight' : 'ViewWidth';
+        switch (viewType) {
+            case CalendarViewEnum.month:
+                return this[`month${viewProp}`];
+            case CalendarViewEnum.year:
+                return this[`year${viewProp}`];
+            case CalendarViewEnum.decade:
+                return this[`decade${viewProp}`];
+            case CalendarViewEnum.century:
+                return this[`century${viewProp}`];
+            default:
+                return 1;
+        }
+    }
+    batch(contentElement, action) {
+        if (!isPresent(this.hostContainer)) {
+            return;
+        }
+        const hostClone = this.hostContainer.cloneNode();
+        document.body.appendChild(hostClone);
+        try {
+            const appendedContent = hostClone.appendChild(contentElement);
+            action(appendedContent);
+        }
+        finally {
+            document.body.removeChild(hostClone);
+        }
+    }
+}
+CalendarDOMService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarDOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CalendarDOMService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarDOMService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarDOMService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * @hidden
  */
@@ -4545,282 +4736,114 @@ class VirtualizationComponent {
     }
     scroll$() {
         return isDocumentAvailable() ? fromEvent(this.container.nativeElement, 'scroll') : EMPTY;
-    }
-    initServices() {
-        this.rowHeightService = this.createRowHeightService();
-        if (this.scrollSubscription) {
-            this.scrollSubscription.unsubscribe();
-        }
-        this.scrollSubscription = this.scroller
-            .create(this.rowHeightService, this.skip, this.take, this.total, this.topOffset, this.scrollOffsetSize, this.direction)
-            .subscribe((x) => {
-            if (x instanceof PageAction) {
-                this.pageChange.emit(x);
-            }
-            else {
-                this.scrollChange.emit(x);
-            }
-        });
-    }
-    createRowHeightService() {
-        const dimension = this.direction === 'vertical' ? this.itemHeight : this.itemWidth;
-        return new RowHeightService(this.total, dimension, 0);
-    }
-    emitActiveIndex() {
-        const index = this.rowHeightService.index(this.containerScrollPosition - this.topOffset);
-        if (this.lastActiveIndex !== index) {
-            this.lastActiveIndex = index;
-            this.activeIndexChange.emit(index);
-        }
-    }
-    containerMaxScroll() {
-        return this.containerScrollSize - this.containerOffsetSize;
-    }
-    getContainerScrollDirection(indexOffset) {
-        return indexOffset < this.containerScrollPosition ? ScrollDirection.Backward : ScrollDirection.Forward;
-    }
-}
-VirtualizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VirtualizationComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i5.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
-VirtualizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: `
-    <ng-content></ng-content>
-    <div
-        class="k-scrollable-placeholder"
-        [class.k-scrollable-horizontal-placeholder]="direction === 'horizontal'"
-        [ngStyle]="totalVertexLength"
-    ></div>
-  `, isInline: true, directives: [{ type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VirtualizationComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [{
-                            provide: SCROLLER_FACTORY_TOKEN,
-                            useValue: DEFAULT_SCROLLER_FACTORY
-                        }],
-                    selector: 'kendo-virtualization',
-                    template: `
-    <ng-content></ng-content>
-    <div
-        class="k-scrollable-placeholder"
-        [class.k-scrollable-horizontal-placeholder]="direction === 'horizontal'"
-        [ngStyle]="totalVertexLength"
-    ></div>
-  `
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SCROLLER_FACTORY_TOKEN]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i5.ScrollbarWidthService }]; }, propDecorators: { direction: [{
-                type: Input
-            }], itemHeight: [{
-                type: Input
-            }], itemWidth: [{
-                type: Input
-            }], topOffset: [{
-                type: Input
-            }], bottomOffset: [{
-                type: Input
-            }], maxScrollDifference: [{
-                type: Input
-            }], scrollOffsetSize: [{
-                type: Input
-            }], scrollDuration: [{
-                type: Input
-            }], skip: [{
-                type: Input
-            }], take: [{
-                type: Input
-            }], total: [{
-                type: Input
-            }], activeIndexChange: [{
-                type: Output
-            }], pageChange: [{
-                type: Output
-            }], scrollChange: [{
-                type: Output
-            }], wrapperClasses: [{
-                type: HostBinding,
-                args: ['class.k-flex']
-            }, {
-                type: HostBinding,
-                args: ['class.k-content']
-            }, {
-                type: HostBinding,
-                args: ['class.k-scrollable']
-            }], horizontalClass: [{
-                type: HostBinding,
-                args: ['class.k-scrollable-horizontal']
-            }] } });
-
-const div$1 = domContainerFactory('div');
-const ul$1 = domContainerFactory('ul');
-const li$1 = domContainerFactory('li');
-const td = domContainerFactory('td');
-const th = domContainerFactory('th');
-const tr = domContainerFactory('tr');
-const tbody = domContainerFactory('tbody');
-const thead = domContainerFactory('thead');
-const table = domContainerFactory('table');
-const monthHeader = () => (div$1(`
-            <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">
-                <span class="k-today k-calendar-nav-today">TODAY</span>
-            </span>
-        `, 'k-calendar-header k-hstack'));
-const monthWeekHeader = () => (table([
-    thead([
-        tr([th('MO', 'k-calendar-th')], 'k-calendar-tr')
-    ], 'k-calendar-thead')
-], 'k-calendar-weekdays k-calendar-table'));
-const repeat = (count, mapper) => new Array(count).fill('1').map(mapper);
-const content = (rows, cells = 1) => (table([
-    tbody([tr([th('1', 'k-calendar-th')], 'k-calendar-tr')].concat(repeat(rows, () => tr(repeat(cells, c => td(`<span class="k-link">${c}</span>`, 'k-calendar-td')), 'k-calendar-tr'))), 'k-calendar-tbody')
-], 'k-calendar-table'));
-const scrollable$1 = (children) => div$1(children, 'k-flex k-content k-scrollable');
-const view = (contentElement, className, renderWeekHeader) => (div$1([
-    monthHeader(),
-    renderWeekHeader ? monthWeekHeader() : null,
-    scrollable$1([contentElement, contentElement])
-], className, { left: '-10000px', position: 'absolute' }));
-const navigationList = (() => {
-    let navElement;
-    return () => {
-        if (!isDocumentAvailable) {
-            return null;
-        }
-        if (!navElement) {
-            navElement = div$1([scrollable$1([ul$1([li$1('<span>FEB</span>')])])], 'k-calendar-navigation', { left: '0px', position: 'absolute' });
-        }
-        return navElement;
-    };
-})();
-const viewFactory = ({ cells, rows }, className, renderWeekHeader) => {
-    let viewElement;
-    return () => {
-        if (!isDocumentAvailable) {
-            return null;
-        }
-        if (!viewElement) {
-            viewElement = view(content(rows, cells), className, renderWeekHeader);
-        }
-        return viewElement;
-    };
-};
-const getScrollable = (element) => element.querySelector('.k-scrollable');
-const horizontal = element => {
-    const scrollableElement = getScrollable(element);
-    scrollableElement.classList.add('k-scrollable-horizontal');
-    return element;
-};
-const monthView = viewFactory({ cells: 7, rows: 6 }, 'k-vstack k-calendar-view k-calendar-monthview', true);
-const yearView = viewFactory({ cells: 4, rows: 3 }, 'k-vstack k-calendar-view k-calendar-yearview', false);
-const decadeView = viewFactory({ cells: 4, rows: 3 }, 'k-vstack k-calendar-view k-calendar-decadeview', false);
-const horzMonthView = () => horizontal(monthView());
-const horzYearView = () => horizontal(yearView());
-const horzDecadeView = () => horizontal(decadeView());
-const height = (element) => (parseFloat(window.getComputedStyle(element).height) || element.offsetHeight);
-const width = (element) => {
-    const styles = window.getComputedStyle(element);
-    const computed = parseFloat(styles.width)
-        + parseFloat(styles.paddingLeft)
-        + parseFloat(styles.paddingRight);
-    return computed || element.offsetWidth;
-};
-const getBody = (element) => element.querySelector('tbody');
-/**
- * @hidden
- */
-class CalendarDOMService {
-    ensureHeights() {
-        if (this.calendarHeight !== undefined) {
-            return;
-        }
-        this.calculateHeights();
-    }
-    calculateHeights(container) {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.hostContainer = container;
-        this.batch(monthView(), (contentElement) => {
-            const viewElement = getBody(contentElement);
-            this.calendarHeight = height(contentElement);
-            this.monthViewHeight = height(viewElement);
-            this.headerHeight = height(viewElement.children[0]);
-            this.scrollableContentHeight = height(getScrollable(contentElement));
-        });
-        this.batch(horzMonthView(), (contentElement) => {
-            const viewElement = getBody(contentElement);
-            this.calendarWidth = width(contentElement);
-            this.monthViewWidth = width(viewElement);
-            this.scrollableContentWidth = width(getScrollable(contentElement));
-        });
-        this.batch(yearView(), (contentElement) => {
-            this.yearViewHeight = height(getBody(contentElement));
-            this.scrollableYearContentHeight = height(getScrollable(contentElement));
-        });
-        this.batch(horzYearView(), (contentElement) => {
-            this.yearViewWidth = width(getBody(contentElement));
-        });
-        this.batch(decadeView(), (contentElement) => {
-            this.decadeViewHeight = height(getBody(contentElement));
-            this.centuryViewHeight = this.decadeViewHeight;
-        });
-        this.batch(horzDecadeView(), (contentElement) => {
-            this.decadeViewWidth = width(getBody(contentElement));
-            this.centuryViewWidth = this.decadeViewWidth;
-        });
-        this.batch(navigationList(), (contentElement) => {
-            this.navigationItemHeight = height(contentElement.querySelector('li'));
-        });
-    }
-    viewHeight(viewType) {
-        return this.viewDimension(viewType, 'height');
-    }
-    viewWidth(viewType) {
-        return this.viewDimension(viewType, 'width');
-    }
-    viewDimension(viewType, dimension) {
-        const viewProp = dimension === 'height' ? 'ViewHeight' : 'ViewWidth';
-        switch (viewType) {
-            case CalendarViewEnum.month:
-                return this[`month${viewProp}`];
-            case CalendarViewEnum.year:
-                return this[`year${viewProp}`];
-            case CalendarViewEnum.decade:
-                return this[`decade${viewProp}`];
-            case CalendarViewEnum.century:
-                return this[`century${viewProp}`];
-            default:
-                return 1;
-        }
-    }
-    batch(contentElement, action) {
-        if (!isPresent(this.hostContainer)) {
-            return;
-        }
-        const hostClone = this.hostContainer.cloneNode();
-        document.body.appendChild(hostClone);
-        try {
-            const appendedContent = hostClone.appendChild(contentElement);
-            action(appendedContent);
-        }
-        catch (error) {
-            throw error;
+    }
+    initServices() {
+        this.rowHeightService = this.createRowHeightService();
+        if (this.scrollSubscription) {
+            this.scrollSubscription.unsubscribe();
         }
-        finally {
-            document.body.removeChild(hostClone);
+        this.scrollSubscription = this.scroller
+            .create(this.rowHeightService, this.skip, this.take, this.total, this.topOffset, this.scrollOffsetSize, this.direction)
+            .subscribe((x) => {
+            if (x instanceof PageAction) {
+                this.pageChange.emit(x);
+            }
+            else {
+                this.scrollChange.emit(x);
+            }
+        });
+    }
+    createRowHeightService() {
+        const dimension = this.direction === 'vertical' ? this.itemHeight : this.itemWidth;
+        return new RowHeightService(this.total, dimension, 0);
+    }
+    emitActiveIndex() {
+        const index = this.rowHeightService.index(this.containerScrollPosition - this.topOffset);
+        if (this.lastActiveIndex !== index) {
+            this.lastActiveIndex = index;
+            this.activeIndexChange.emit(index);
         }
     }
+    containerMaxScroll() {
+        return this.containerScrollSize - this.containerOffsetSize;
+    }
+    getContainerScrollDirection(indexOffset) {
+        return indexOffset < this.containerScrollPosition ? ScrollDirection.Backward : ScrollDirection.Forward;
+    }
 }
-CalendarDOMService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarDOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CalendarDOMService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarDOMService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarDOMService, decorators: [{
-            type: Injectable
-        }] });
+VirtualizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: VirtualizationComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i6.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
+VirtualizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: `
+    <ng-content></ng-content>
+    <div
+        class="k-scrollable-placeholder"
+        [class.k-scrollable-horizontal-placeholder]="direction === 'horizontal'"
+        [ngStyle]="totalVertexLength"
+    ></div>
+  `, isInline: true, directives: [{ type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: VirtualizationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [{
+                            provide: SCROLLER_FACTORY_TOKEN,
+                            useValue: DEFAULT_SCROLLER_FACTORY
+                        }],
+                    selector: 'kendo-virtualization',
+                    template: `
+    <ng-content></ng-content>
+    <div
+        class="k-scrollable-placeholder"
+        [class.k-scrollable-horizontal-placeholder]="direction === 'horizontal'"
+        [ngStyle]="totalVertexLength"
+    ></div>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SCROLLER_FACTORY_TOKEN]
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i6.ScrollbarWidthService }]; }, propDecorators: { direction: [{
+                type: Input
+            }], itemHeight: [{
+                type: Input
+            }], itemWidth: [{
+                type: Input
+            }], topOffset: [{
+                type: Input
+            }], bottomOffset: [{
+                type: Input
+            }], maxScrollDifference: [{
+                type: Input
+            }], scrollOffsetSize: [{
+                type: Input
+            }], scrollDuration: [{
+                type: Input
+            }], skip: [{
+                type: Input
+            }], take: [{
+                type: Input
+            }], total: [{
+                type: Input
+            }], activeIndexChange: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], scrollChange: [{
+                type: Output
+            }], wrapperClasses: [{
+                type: HostBinding,
+                args: ['class.k-flex']
+            }, {
+                type: HostBinding,
+                args: ['class.k-content']
+            }, {
+                type: HostBinding,
+                args: ['class.k-scrollable']
+            }], horizontalClass: [{
+                type: HostBinding,
+                args: ['class.k-scrollable-horizontal']
+            }] } });
 
 /* eslint-disable @angular-eslint/component-selector */
 const ITEMS_COUNT = 30;
@@ -4919,8 +4942,8 @@ class NavigationComponent {
         }
     }
 }
-NavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", 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: "13.3.11", 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: "12.0.0", version: "13.3.11", 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"
@@ -4946,8 +4969,8 @@ NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </li>
         </ul>
     </kendo-virtualization>
-  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationComponent, decorators: [{
+  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5167,8 +5190,8 @@ class ViewListComponent {
         }
     }
 }
-ViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", 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: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+ViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", 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: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-calendar-header
         [currentDate]="activeDate"
         [min]="min"
@@ -5179,7 +5202,7 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         (todayButtonClick)="todayButtonClick.emit($event)"
     >
     </kendo-calendar-header>
-    <table class="k-calendar-weekdays k-calendar-table" style="table-layout: auto;" *ngIf="isMonthView()">
+    <table class="k-calendar-weekdays k-calendar-table" [style.table-layout]="'auto'" *ngIf="isMonthView()">
         <thead class="k-calendar-thead">
             <tr class="k-calendar-tr">
                 <th class="k-calendar-th" *ngFor="let name of weekNames; let i = index;" scope="col" [attr.aria-label]="wideWeekNames[i]" role="columnheader">{{name}}</th>
@@ -5232,7 +5255,7 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         </table>
     </kendo-virtualization>
   `, isInline: true, components: [{ type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewListComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5248,7 +5271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         (todayButtonClick)="todayButtonClick.emit($event)"
     >
     </kendo-calendar-header>
-    <table class="k-calendar-weekdays k-calendar-table" style="table-layout: auto;" *ngIf="isMonthView()">
+    <table class="k-calendar-weekdays k-calendar-table" [style.table-layout]="'auto'" *ngIf="isMonthView()">
         <thead class="k-calendar-thead">
             <tr class="k-calendar-tr">
                 <th class="k-calendar-th" *ngFor="let name of weekNames; let i = index;" scope="col" [attr.aria-label]="wideWeekNames[i]" role="columnheader">{{name}}</th>
@@ -5440,9 +5463,9 @@ class ScrollSyncService {
         }
     }
 }
-ScrollSyncService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollSyncService, deps: [{ token: CalendarDOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-ScrollSyncService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollSyncService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollSyncService, decorators: [{
+ScrollSyncService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ScrollSyncService, deps: [{ token: CalendarDOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+ScrollSyncService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ScrollSyncService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ScrollSyncService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: CalendarDOMService }, { type: i0.NgZone }]; } });
 
@@ -5476,9 +5499,9 @@ class NavigationItemTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-NavigationItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NavigationItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: NavigationItemTemplateDirective, selector: "[kendoCalendarNavigationItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationItemTemplateDirective, decorators: [{
+NavigationItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NavigationItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: NavigationItemTemplateDirective, selector: "[kendoCalendarNavigationItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCalendarNavigationItemTemplate]'
@@ -5509,14 +5532,14 @@ class MultiViewCalendarCustomMessagesComponent extends Messages$1 {
         return true;
     }
 }
-MultiViewCalendarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-MultiViewCalendarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages", providers: [
+MultiViewCalendarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiViewCalendarCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+MultiViewCalendarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages", providers: [
         {
             provide: Messages$1,
             useExisting: forwardRef(() => MultiViewCalendarCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiViewCalendarCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -5535,9 +5558,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class CalendarMessages extends ComponentMessages {
 }
-CalendarMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-CalendarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: CalendarMessages, decorators: [{
+CalendarMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+CalendarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: CalendarMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -5562,14 +5585,14 @@ class CalendarLocalizedMessagesDirective extends CalendarMessages {
         this.service = service;
     }
 }
-CalendarLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-CalendarLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]", providers: [
+CalendarLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+CalendarLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]", providers: [
         {
             provide: CalendarMessages,
             useExisting: forwardRef(() => CalendarLocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarLocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarLocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -5781,15 +5804,15 @@ class CalendarComponent {
         this._focusedDate = focusedDate || getToday();
         this.setAriaActivedescendant();
     }
+    get focusedDate() {
+        return this._focusedDate;
+    }
     /**
      * @hidden
      */
     get headerId() {
         return this.id + '-header';
     }
-    get focusedDate() {
-        return this._focusedDate;
-    }
     /**
      * Sets or gets the `min` property of the Calendar and
      * defines the minimum allowed date value
@@ -6067,11 +6090,10 @@ class CalendarComponent {
      * ```
      */
     focus() {
-        var _a, _b, _c;
         this.currentlyFocusedElement = this.type === 'infinite' ?
-            (_a = this.element) === null || _a === void 0 ? void 0 : _a.nativeElement.querySelector(selectors.infiniteCalendarTable) :
-            this.currentlyFocusedElement = (_b = this.element) === null || _b === void 0 ? void 0 : _b.nativeElement.querySelector(selectors.multiViewCalendarTable);
-        (_c = this.currentlyFocusedElement) === null || _c === void 0 ? void 0 : _c.focus();
+            this.element?.nativeElement.querySelector(selectors.infiniteCalendarTable) :
+            this.currentlyFocusedElement = this.element?.nativeElement.querySelector(selectors.multiViewCalendarTable);
+        this.currentlyFocusedElement?.focus();
     }
     /**
      * Blurs the Calendar component.
@@ -6422,9 +6444,8 @@ class CalendarComponent {
         }
     }
     setAriaActivedescendant() {
-        var _a;
         // in Classic mode, the inner MultiViewCalendar handles the activedescendant
-        const infiniteCalendarTable = (_a = this.element.nativeElement) === null || _a === void 0 ? void 0 : _a.querySelector(selectors.infiniteCalendarTable);
+        const infiniteCalendarTable = this.element.nativeElement?.querySelector(selectors.infiniteCalendarTable);
         const activedescendantHandledByInnerMultiViewCalendar = !isPresent(infiniteCalendarTable) || (this.type === 'classic' && !infiniteCalendarTable.hasAttribute(attributeNames.ariaActiveDescendant));
         if (activedescendantHandledByInnerMultiViewCalendar) {
             return;
@@ -6456,8 +6477,8 @@ class CalendarComponent {
         });
     }
 }
-CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: CalendarComponent, selector: "kendo-calendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", 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"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"] }, 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: "13.3.11", 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: "12.0.0", version: "13.3.11", type: CalendarComponent, selector: "kendo-calendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", 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"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"] }, 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,
@@ -6570,8 +6591,8 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
     </ng-container>
-  `, isInline: true, components: [{ type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { type: i5.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }, { type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarComponent, decorators: [{
+  `, isInline: true, components: [{ type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }, { type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -6845,9 +6866,9 @@ var Arrow;
  */
 class DateInputMessages extends ComponentMessages {
 }
-DateInputMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DateInputMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DateInputMessages, selector: "kendo-dateinput-messages-base", inputs: { decrement: "decrement", increment: "increment" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputMessages, decorators: [{
+DateInputMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DateInputMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DateInputMessages, selector: "kendo-dateinput-messages-base", inputs: { decrement: "decrement", increment: "increment" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -6868,14 +6889,14 @@ class DateInputLocalizedMessagesDirective extends DateInputMessages {
         this.service = service;
     }
 }
-DateInputLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-DateInputLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]", providers: [
+DateInputLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+DateInputLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]", providers: [
         {
             provide: DateInputMessages,
             useExisting: forwardRef(() => DateInputLocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputLocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputLocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -7061,9 +7082,9 @@ class KendoDate {
             this.setExisting(symbol, false);
             return { value: null, switchToNext: false };
         }
-        let baseDate = this.intl.formatDate(this.value, this.format);
-        let dateParts = this.dateFormatString(this.value, this.format);
-        let baseFormat = dateParts.symbols;
+        const baseDate = this.intl.formatDate(this.value, this.format);
+        const dateParts = this.dateFormatString(this.value, this.format);
+        const baseFormat = dateParts.symbols;
         let replaced = false;
         let prefix = "";
         let current = "";
@@ -7080,14 +7101,14 @@ class KendoDate {
                 suffix += baseDate[i];
             }
         }
-        let currentMaxLength = current.length - 3;
+        const currentMaxLength = current.length - 3;
         let parsedDate = null;
         const month = this.matchMonth(currentChar);
         const dayPeriod = this.matchDayPeriod(currentChar, symbol);
         const isZeroCurrentChar = currentChar === '0';
         const leadingZero = (this.leadingZero || {})[symbol] || 0;
         if (isZeroCurrentChar) {
-            let valueNumber = parseInt(resetSegmentValue ? currentChar : current + currentChar, 10);
+            const valueNumber = parseInt(resetSegmentValue ? currentChar : current + currentChar, 10);
             if (valueNumber === 0 && !this.isAbbrMonth(dateParts.partMap, symbol)) {
                 this.incrementLeadingZero(symbol);
             }
@@ -7102,7 +7123,7 @@ class KendoDate {
                 const padding = msPaddingFromFormat(baseFormat);
                 middle = padding + middle;
             }
-            let middleNumber = parseInt(middle, 10);
+            const middleNumber = parseInt(middle, 10);
             parsedDate = this.intl.parseDate(prefix + middle + suffix, this.format);
             if (!parsedDate && !isNaN(middleNumber) && !isNaN(parseInt(currentChar, 10))) {
                 if (symbol === 'M' && !month) {
@@ -7271,7 +7292,7 @@ class KendoDate {
         // Important: right to left.
         let resultText = "";
         let resultFormat = "";
-        let format = mask.symbols;
+        const format = mask.symbols;
         for (let r = format.length - 1; r >= 0; r--) {
             if (this.knownParts.indexOf(format[r]) === -1 || this.getExisting(format[r])) {
                 resultText = text[r] + resultText;
@@ -7325,6 +7346,14 @@ class DateInputComponent {
         this.injector = injector;
         this.localization = localization;
         this.pickerService = pickerService;
+        /**
+         * @hidden
+         */
+        this.caretAltUpIcon = caretAltUpIcon;
+        /**
+         * @hidden
+         */
+        this.caretAltDownIcon = caretAltDownIcon;
         /**
          * Sets or gets the `disabled` property of the DateInput and
          * determines whether the component is active
@@ -7528,7 +7557,9 @@ class DateInputComponent {
      * @hidden
      */
     set focusableId(_focusableId) {
-        this._focusableId = _focusableId;
+        if (_focusableId) {
+            this._focusableId = _focusableId;
+        }
     }
     get focusableId() {
         return this._focusableId;
@@ -7670,7 +7701,7 @@ class DateInputComponent {
      */
     get formControl() {
         const ngControl = this.injector.get(NgControl, null);
-        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+        return ngControl?.control || null;
     }
     get inputFormat() {
         if (!this.format) {
@@ -7727,28 +7758,27 @@ class DateInputComponent {
      */
     ngOnChanges(changes) {
         this.verifyRange();
-        if (changes.min || changes.max || changes.rangeValidation || changes.incompleteDateValidation) {
+        if (changes['min'] || changes['max'] || changes['rangeValidation'] || changes['incompleteDateValidation']) {
             this.minValidator = this.rangeValidation ? minValidator(this.min) : noop$2;
             this.maxValidator = this.rangeValidation ? maxValidator(this.max) : noop$2;
             this.incompleteValidator = this.incompleteDateValidation ? incompleteDateValidator() : noop$2;
             this.onValidatorChange();
         }
-        if (changes.format) {
+        if (changes['format']) {
             this.symbolsMap = this.dateSymbolMap();
             this.updateFormatSections();
         }
         const isEqualToKendoDate = this.kendoDate && isEqual(this.value, this.kendoDate.getDateObject());
-        if (changes.format || !isEqualToKendoDate || changes.placeholder) {
+        if (changes['format'] || !isEqualToKendoDate || changes['placeholder']) {
             this.kendoDate = this.getKendoDate(this.value);
             this.updateElementValue(this.isActive);
         }
     }
     ngAfterViewInit() {
-        var _a, _b;
         this.setComponentClasses();
-        const formControl = (_a = this.injector.get(NgControl, null)) === null || _a === void 0 ? void 0 : _a.control;
+        const formControl = this.injector.get(NgControl, null)?.control;
         this.control = formControl;
-        this.subs.add((_b = this.formControl) === null || _b === void 0 ? void 0 : _b.statusChanges.subscribe(() => this.setAriaInvalid()));
+        this.subs.add(this.formControl?.statusChanges.subscribe(() => this.setAriaInvalid()));
         this.setAriaInvalid();
     }
     ngOnDestroy() {
@@ -8210,7 +8240,7 @@ class DateInputComponent {
                 switchPart = parsedPart.switchToNext;
             }
             const candidate = this.kendoDate.getDateObject();
-            if (this.value && candidate && !this.formatSections.date) {
+            if (this.value && candidate && !this.formatSections['date']) {
                 this.kendoDate = this.getKendoDate(setTime(this.value, candidate));
             }
         }
@@ -8280,8 +8310,8 @@ class DateInputComponent {
         }
     }
 }
-DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrect: "autoCorrect", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "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: "13.3.11", 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: "12.0.0", version: "13.3.11", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrect: "autoCorrect", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "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' },
@@ -8334,8 +8364,14 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             (mouseleave)="arrowDirection = arrow.None"
             (click)="handleButtonClick(1)"
             [title]="localization.get('increment')"
-            [attr.aria-label]="localization.get('increment')">
-            <span class="k-button-icon k-icon k-i-caret-alt-up"></span>
+            [attr.aria-label]="localization.get('increment')"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-up"
+                    class="k-button-icon"
+                    [svgIcon]="caretAltUpIcon"
+                >
+                </kendo-icon-wrapper>
         </button>
         <button
             #spindown
@@ -8346,12 +8382,18 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             (mousedown)="arrowDirection = arrow.Down"
             (mouseleave)="arrowDirection = arrow.None"
             [title]="localization.get('decrement')"
-            [attr.aria-label]="localization.get('decrement')">
-            <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
+            [attr.aria-label]="localization.get('decrement')"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-down"
+                    class="k-button-icon"
+                    [svgIcon]="caretAltDownIcon"
+                >
+                </kendo-icon-wrapper>
         </button>
     </span>
-  `, isInline: true, directives: [{ type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputComponent, decorators: [{
+  `, isInline: true, components: [{ type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -8411,8 +8453,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             (mouseleave)="arrowDirection = arrow.None"
             (click)="handleButtonClick(1)"
             [title]="localization.get('increment')"
-            [attr.aria-label]="localization.get('increment')">
-            <span class="k-button-icon k-icon k-i-caret-alt-up"></span>
+            [attr.aria-label]="localization.get('increment')"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-up"
+                    class="k-button-icon"
+                    [svgIcon]="caretAltUpIcon"
+                >
+                </kendo-icon-wrapper>
         </button>
         <button
             #spindown
@@ -8423,8 +8471,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             (mousedown)="arrowDirection = arrow.Down"
             (mouseleave)="arrowDirection = arrow.None"
             [title]="localization.get('decrement')"
-            [attr.aria-label]="localization.get('decrement')">
-            <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
+            [attr.aria-label]="localization.get('decrement')"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-down"
+                    class="k-button-icon"
+                    [svgIcon]="caretAltDownIcon"
+                >
+                </kendo-icon-wrapper>
         </button>
     </span>
   `
@@ -8570,14 +8624,14 @@ class CalendarCustomMessagesComponent extends CalendarMessages {
         return true;
     }
 }
-CalendarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CalendarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages", providers: [
+CalendarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CalendarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "12.2.16", ngImport: i0, type: CalendarCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -8596,9 +8650,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class DatePickerMessages extends ComponentMessages {
 }
-DatePickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DatePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DatePickerMessages, selector: "kendo-datepicker-messages-base", inputs: { today: "today", toggle: "toggle", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerMessages, decorators: [{
+DatePickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DatePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DatePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DatePickerMessages, selector: "kendo-datepicker-messages-base", inputs: { today: "today", toggle: "toggle", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DatePickerMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -8623,14 +8677,14 @@ class DatePickerLocalizedMessagesDirective extends DatePickerMessages {
         this.service = service;
     }
 }
-DatePickerLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-DatePickerLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]", providers: [
+DatePickerLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DatePickerLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+DatePickerLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]", providers: [
         {
             provide: DatePickerMessages,
             useExisting: forwardRef(() => DatePickerLocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerLocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DatePickerLocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -8663,6 +8717,10 @@ class DatePickerComponent {
         this.pickerService = pickerService;
         this.disabledDatesService = disabledDatesService;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.calendarIcon = calendarIcon;
         /**
          * Defines the active view that the Calendar initially renders
          * ([see example]({% slug calendar_type_datepicker %}#toc-active-view)).
@@ -8994,11 +9052,11 @@ class DatePickerComponent {
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
-        this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('input', this.size));
+        this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
         const newSize = size ? size : DEFAULT_SIZE;
         if (newSize !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
-            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', newSize));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', newSize));
         }
         this._size = newSize;
     }
@@ -9059,8 +9117,7 @@ class DatePickerComponent {
         return this.disabled;
     }
     get popupUID() {
-        var _a;
-        return (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.popupId;
+        return this.calendar?.popupId;
     }
     ;
     get isActive() {
@@ -9272,7 +9329,7 @@ class DatePickerComponent {
      * @hidden
      */
     handleInputChange(value) {
-        this.handleChange(this.input.formatSections.time ? value : this.mergeTime(value));
+        this.handleChange(this.input.formatSections['time'] ? value : this.mergeTime(value));
     }
     /**
      * @hidden
@@ -9495,8 +9552,8 @@ class DatePickerComponent {
         }
     }
 }
-DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], 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", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "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: "13.3.11", 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: "12.0.0", version: "13.3.11", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], 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", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "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) },
@@ -9533,6 +9590,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [ariaReadOnly]="readonly"
             [tabindex]="tabindex"
             [title]="title"
+            [focusableId]="focusableId"
             [format]="format"
             [twoDigitYearMax]="twoDigitYearMax"
             [formatPlaceholder]="formatPlaceholder"
@@ -9559,7 +9617,12 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             }"
             [scope]="this"
         >
-            <span class="k-button-icon k-icon k-i-calendar"></span>
+            <kendo-icon-wrapper
+                name="calendar"
+                class="k-button-icon"
+                [svgIcon]="calendarIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
         <ng-container #container></ng-container>
         <ng-template #popupTemplate>
@@ -9599,8 +9662,8 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         <ng-template>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerComponent, decorators: [{
+    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -9644,6 +9707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [ariaReadOnly]="readonly"
             [tabindex]="tabindex"
             [title]="title"
+            [focusableId]="focusableId"
             [format]="format"
             [twoDigitYearMax]="twoDigitYearMax"
             [formatPlaceholder]="formatPlaceholder"
@@ -9670,7 +9734,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }"
             [scope]="this"
         >
-            <span class="k-button-icon k-icon k-i-calendar"></span>
+            <kendo-icon-wrapper
+                name="calendar"
+                class="k-button-icon"
+                [svgIcon]="calendarIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
         <ng-container #container></ng-container>
         <ng-template #popupTemplate>
@@ -9726,6 +9795,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true }]
+            }], focusableId: [{
+                type: Input
             }], cellTemplate: [{
                 type: ContentChild,
                 args: [CellTemplateDirective, { static: false }]
@@ -9885,6 +9956,55 @@ const timeRangeValidator = (min, max) => {
     };
 };
 
+const div = domContainerFactory('div');
+const ul = domContainerFactory('ul');
+const li = domContainerFactory('li');
+const span = domContainerFactory('span');
+const listTitle = () => span('hour', 'k-title k-timeselector-title');
+const listItem = () => li('<span>02</span>', 'k-item');
+const list = () => ul([listItem()], 'k-reset');
+const scrollable = () => (div([list()], 'k-time-container k-flex k-content k-scrollable'));
+const timeListWrapper = () => {
+    if (!isDocumentAvailable()) {
+        return null;
+    }
+    return div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper', { left: '-10000px', position: 'absolute' });
+};
+const TIMELIST_WRAPPER = timeListWrapper();
+/**
+ * @hidden
+ */
+class TimePickerDOMService {
+    ensureHeights() {
+        if (this.timeListHeight !== undefined) {
+            return;
+        }
+        this.calculateHeights();
+    }
+    calculateHeights(container) {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        const listContainer = container && container.querySelector('.k-time-list-container');
+        const hostContainer = listContainer || document.body;
+        const wrapper = hostContainer.appendChild(TIMELIST_WRAPPER);
+        this.timeListHeight = wrapper.querySelector('.k-scrollable').getBoundingClientRect().height;
+        this.itemHeight = wrapper.querySelector('li').getBoundingClientRect().height;
+        hostContainer.removeChild(wrapper);
+    }
+    isActive(element) {
+        if (!isDocumentAvailable() || !element) {
+            return false;
+        }
+        return (element.nativeElement || element) === document.activeElement;
+    }
+}
+TimePickerDOMService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerDOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TimePickerDOMService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerDOMService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerDOMService, decorators: [{
+            type: Injectable
+        }] });
+
 const HOURS_IN_DAY = 24;
 const clampToRange$3 = (rangeValue) => (value) => value % rangeValue;
 const clamp$3 = clampToRange$3(HOURS_IN_DAY);
@@ -9991,9 +10111,9 @@ class HoursService {
         return [min.getHours(), max.getHours()];
     }
 }
-HoursService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HoursService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-HoursService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HoursService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HoursService, decorators: [{
+HoursService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HoursService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+HoursService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HoursService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HoursService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
@@ -10101,9 +10221,9 @@ class MinutesService {
         return [min.getMinutes(), max.getMinutes()];
     }
 }
-MinutesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MinutesService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-MinutesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MinutesService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MinutesService, decorators: [{
+MinutesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MinutesService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+MinutesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MinutesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MinutesService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
@@ -10211,9 +10331,9 @@ class SecondsService {
         return [min.getSeconds(), max.getSeconds()];
     }
 }
-SecondsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SecondsService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-SecondsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SecondsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SecondsService, decorators: [{
+SecondsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SecondsService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+SecondsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SecondsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SecondsService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
@@ -10324,9 +10444,9 @@ class MillisecondsService {
         return [min.getMilliseconds(), max.getMilliseconds()];
     }
 }
-MillisecondsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MillisecondsService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-MillisecondsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MillisecondsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MillisecondsService, decorators: [{
+MillisecondsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MillisecondsService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+MillisecondsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MillisecondsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MillisecondsService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
@@ -10440,61 +10560,12 @@ class DayPeriodService {
         ];
     }
 }
-DayPeriodService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayPeriodService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-DayPeriodService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayPeriodService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayPeriodService, decorators: [{
+DayPeriodService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DayPeriodService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+DayPeriodService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DayPeriodService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DayPeriodService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
-const div = domContainerFactory('div');
-const ul = domContainerFactory('ul');
-const li = domContainerFactory('li');
-const span = domContainerFactory('span');
-const listTitle = () => span('hour', 'k-title k-timeselector-title');
-const listItem = () => li('<span>02</span>', 'k-item');
-const list = () => ul([listItem()], 'k-reset');
-const scrollable = () => (div([list()], 'k-time-container k-flex k-content k-scrollable'));
-const timeListWrapper = () => {
-    if (!isDocumentAvailable()) {
-        return null;
-    }
-    return div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper', { left: '-10000px', position: 'absolute' });
-};
-const TIMELIST_WRAPPER = timeListWrapper();
-/**
- * @hidden
- */
-class TimePickerDOMService {
-    ensureHeights() {
-        if (this.timeListHeight !== undefined) {
-            return;
-        }
-        this.calculateHeights();
-    }
-    calculateHeights(container) {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        const listContainer = container && container.querySelector('.k-time-list-container');
-        const hostContainer = listContainer || document.body;
-        const wrapper = hostContainer.appendChild(TIMELIST_WRAPPER);
-        this.timeListHeight = wrapper.querySelector('.k-scrollable').getBoundingClientRect().height;
-        this.itemHeight = wrapper.querySelector('li').getBoundingClientRect().height;
-        hostContainer.removeChild(wrapper);
-    }
-    isActive(element) {
-        if (!isDocumentAvailable() || !element) {
-            return false;
-        }
-        return (element.nativeElement || element) === document.activeElement;
-    }
-}
-TimePickerDOMService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerDOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TimePickerDOMService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerDOMService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerDOMService, decorators: [{
-            type: Injectable
-        }] });
-
 /* eslint-disable @angular-eslint/component-selector */
 const SNAP_THRESHOLD = 0.05; //% of the item height
 const SCROLL_THRESHOLD = 2; //< 2px threshold
@@ -10541,15 +10612,13 @@ class TimeListComponent {
         return 'listbox';
     }
     get ariaLabel() {
-        var _a;
-        return this.localization.get((_a = this.part) === null || _a === void 0 ? void 0 : _a.type);
+        return this.localization.get(this.part?.type);
     }
     get tabIndex() {
         return this.disabled ? undefined : 0;
     }
     get isDayPeriod() {
-        var _a;
-        return ((_a = this.part) === null || _a === void 0 ? void 0 : _a.type) === 'dayperiod';
+        return this.part?.type === 'dayperiod';
     }
     get currentSelectedIndex() {
         return this.selectedIndex(this.value);
@@ -10725,8 +10794,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: "12.2.16", 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: "12.0.0", version: "12.2.16", type: TimeListComponent, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, 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: "13.3.11", 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: "12.0.0", version: "13.3.11", type: TimeListComponent, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, 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"
@@ -10755,8 +10824,8 @@ TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </li>
         </ul>
     </kendo-virtualization>
-  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeListComponent, decorators: [{
+  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimeListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-timelist',
@@ -10892,9 +10961,9 @@ const snapTime = snappers => (candidate, min) => {
  */
 class TimePickerMessages extends ComponentMessages {
 }
-TimePickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TimePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: TimePickerMessages, decorators: [{
+TimePickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TimePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: TimePickerMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -10935,14 +11004,14 @@ class TimeSelectorLocalizedMessagesDirective extends TimePickerMessages {
         this.service = service;
     }
 }
-TimeSelectorLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeSelectorLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-TimeSelectorLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]", providers: [
+TimeSelectorLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimeSelectorLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+TimeSelectorLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]", providers: [
         {
             provide: TimePickerMessages,
             useExisting: forwardRef(() => TimeSelectorLocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeSelectorLocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimeSelectorLocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -11303,8 +11372,8 @@ class TimeSelectorComponent {
         return listIdx;
     }
 }
-TimeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
+TimeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -11413,8 +11482,8 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [disabled]="disabled"
             >{{localization.get('accept')}}</button>
         </div>
-    `, isInline: true, components: [{ type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value"], outputs: ["valueChange"] }], directives: [{ type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeSelectorComponent, decorators: [{
+    `, isInline: true, components: [{ type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value"], outputs: ["valueChange"] }], directives: [{ type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimeSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -11590,14 +11659,14 @@ class TimeSelectorCustomMessagesComponent extends TimePickerMessages {
         return true;
     }
 }
-TimeSelectorCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeSelectorCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TimeSelectorCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages", providers: [
+TimeSelectorCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimeSelectorCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TimeSelectorCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "12.2.16", ngImport: i0, type: TimeSelectorCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimeSelectorCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -11620,14 +11689,14 @@ class TimePickerLocalizedMessagesDirective extends TimePickerMessages {
         this.service = service;
     }
 }
-TimePickerLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-TimePickerLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]", providers: [
+TimePickerLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+TimePickerLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]", providers: [
         {
             provide: TimePickerMessages,
             useExisting: forwardRef(() => TimePickerLocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerLocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerLocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -11659,6 +11728,10 @@ class TimePickerComponent {
         this.pickerService = pickerService;
         this.intl = intl;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.clockIcon = clockIcon;
         /**
          * Sets or gets the `disabled` property of the TimePicker and
          * determines whether the component is active
@@ -11910,11 +11983,11 @@ class TimePickerComponent {
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
-        this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('input', this.size));
+        this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
         const newSize = size ? size : DEFAULT_SIZE;
         if (newSize !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
-            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', newSize));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', newSize));
         }
         this._size = newSize;
     }
@@ -12218,7 +12291,7 @@ class TimePickerComponent {
      * @hidden
      */
     handleInputChange(value) {
-        const val = this.input.formatSections.date ? value : this.mergeTime(value);
+        const val = this.input.formatSections['date'] ? value : this.mergeTime(value);
         this.handleChange(val);
     }
     /**
@@ -12414,8 +12487,8 @@ class TimePickerComponent {
         }
     }
 }
-TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", rangeValidation: "rangeValidation", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "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: "13.3.11", 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: "12.0.0", version: "13.3.11", 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", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", rangeValidation: "rangeValidation", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "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) },
@@ -12477,6 +12550,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [format]="format"
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
+            [focusableId]="focusableId"
             [min]="normalizeTime(min)"
             [max]="normalizeTime(max)"
             [incompleteDateValidation]="incompleteDateValidation"
@@ -12502,7 +12576,12 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             }"
             [scope]="this"
         >
-            <span class="k-button-icon k-icon k-i-clock"></span>
+            <kendo-icon-wrapper
+                name="clock"
+                class="k-button-icon"
+                [svgIcon]="clockIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
             <kendo-timeselector
@@ -12539,8 +12618,8 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </kendo-timeselector>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerComponent, decorators: [{
+    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -12609,6 +12688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [format]="format"
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
+            [focusableId]="focusableId"
             [min]="normalizeTime(min)"
             [max]="normalizeTime(max)"
             [incompleteDateValidation]="incompleteDateValidation"
@@ -12634,7 +12714,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }"
             [scope]="this"
         >
-            <span class="k-button-icon k-icon k-i-clock"></span>
+            <kendo-icon-wrapper
+                name="clock"
+                class="k-button-icon"
+                [svgIcon]="clockIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
             <kendo-timeselector
@@ -12687,6 +12772,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true }]
+            }], focusableId: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{
@@ -12757,9 +12844,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class Messages extends ComponentMessages {
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages, 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" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, decorators: [{
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: Messages, 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" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -12804,14 +12891,14 @@ class LocalizedMessagesDirective extends Messages {
         this.service = service;
     }
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]", providers: [
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => LocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -12846,6 +12933,14 @@ class DateTimePickerComponent {
         this.localization = localization;
         this.disabledDatesService = disabledDatesService;
         this.renderer = renderer;
+        /**
+         * @hidden
+         */
+        this.calendarIcon = calendarIcon;
+        /**
+         * @hidden
+         */
+        this.clockIcon = clockIcon;
         /**
          * @hidden
          */
@@ -13186,11 +13281,11 @@ class DateTimePickerComponent {
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
-        this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('input', this.size));
+        this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
         const newSize = size ? size : DEFAULT_SIZE;
         if (newSize !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
-            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', newSize));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', newSize));
         }
         this._size = newSize;
     }
@@ -13291,8 +13386,7 @@ class DateTimePickerComponent {
         return appendTo === 'component' ? this.container : appendTo;
     }
     get popupUID() {
-        var _a;
-        return (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.popupId;
+        return this.calendar?.popupId;
     }
     ;
     ngOnInit() {
@@ -13312,10 +13406,10 @@ class DateTimePickerComponent {
         this.setComponentClasses();
     }
     ngOnChanges(changes) {
-        if (isPresent(changes.min) || isPresent(changes.max)) {
+        if (isPresent(changes['min']) || isPresent(changes['max'])) {
             this.verifyMinMaxRange();
         }
-        if (changes.min || changes.max || changes.rangeValidation || changes.disabledDatesValidation || changes.disabledDates || changes.incompleteDateValidation) {
+        if (changes['min'] || changes['max'] || changes['rangeValidation'] || changes['disabledDatesValidation'] || changes['disabledDates'] || changes['incompleteDateValidation']) {
             this.minValidateFn = this.rangeValidation ? minValidator(this.min) : noop$2;
             this.maxValidateFn = this.rangeValidation ? maxValidator(this.max) : noop$2;
             this.disabledDatesValidateFn = this.disabledDatesValidation ? disabledDatesValidator(this.disabledDatesService.isDateDisabled) : noop$2;
@@ -13802,8 +13896,8 @@ class DateTimePickerComponent {
         }
     }
 }
-DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", 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", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, 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" } }, providers: [
+DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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 }], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", 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", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, 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" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
@@ -13869,6 +13963,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
             [disabled]="disabled"
+            [focusableId]="focusableId"
             [readonly]="readonly || readOnlyInput"
             [role]="'combobox'"
             [ariaReadOnly]="readonly"
@@ -13901,12 +13996,20 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             }"
             [scope]="this"
         >
-            <span class="k-button-icon k-icon"
-                [ngClass]="{
-                    'k-i-calendar': activeTab === 'date',
-                    'k-i-clock': activeTab === 'time'
-                }"
-            ></span>
+            <kendo-icon-wrapper
+                *ngIf="activeTab === 'date'"
+                name="calendar"
+                class="k-button-icon"
+                [svgIcon]="calendarIcon"
+            >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="activeTab === 'time'"
+                name="clock"
+                class="k-button-icon"
+                [svgIcon]="clockIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
 
         <ng-container #container></ng-container>
@@ -14056,8 +14159,8 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerComponent, decorators: [{
+    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-datetimepicker',
@@ -14130,6 +14233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
             [disabled]="disabled"
+            [focusableId]="focusableId"
             [readonly]="readonly || readOnlyInput"
             [role]="'combobox'"
             [ariaReadOnly]="readonly"
@@ -14162,12 +14266,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }"
             [scope]="this"
         >
-            <span class="k-button-icon k-icon"
-                [ngClass]="{
-                    'k-i-calendar': activeTab === 'date',
-                    'k-i-clock': activeTab === 'time'
-                }"
-            ></span>
+            <kendo-icon-wrapper
+                *ngIf="activeTab === 'date'"
+                name="calendar"
+                class="k-button-icon"
+                [svgIcon]="calendarIcon"
+            >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="activeTab === 'time'"
+                name="clock"
+                class="k-button-icon"
+                [svgIcon]="clockIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
 
         <ng-container #container></ng-container>
@@ -14334,6 +14446,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true }]
+            }], focusableId: [{
+                type: Input
             }], value: [{
                 type: Input
             }], format: [{
@@ -14438,9 +14552,9 @@ class DateRangePopupTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-DateRangePopupTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-DateRangePopupTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DateRangePopupTemplateDirective, selector: "[kendoDateRangePopupTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupTemplateDirective, decorators: [{
+DateRangePopupTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangePopupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+DateRangePopupTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DateRangePopupTemplateDirective, selector: "[kendoDateRangePopupTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangePopupTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDateRangePopupTemplate]'
@@ -14655,9 +14769,9 @@ class DateRangeService {
         this.range$.next(range);
     }
 }
-DateRangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeService, deps: [{ token: i0.Renderer2, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-DateRangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeService, decorators: [{
+DateRangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeService, deps: [{ token: i0.Renderer2, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+DateRangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Renderer2, decorators: [{
                     type: Optional
@@ -14828,9 +14942,9 @@ class DateRangeSelectionDirective {
         this.selectionRangeChange.emit(range);
     }
 }
-DateRangeSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: { autoCorrectOn: "autoCorrectOn", selectionRange: "selectionRange", activeRangeEnd: "activeRangeEnd" }, outputs: { activeRangeEndChange: "activeRangeEndChange", selectionRangeChange: "selectionRangeChange" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeSelectionDirective, decorators: [{
+DateRangeSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: { autoCorrectOn: "autoCorrectOn", selectionRange: "selectionRange", activeRangeEnd: "activeRangeEnd" }, outputs: { activeRangeEndChange: "activeRangeEndChange", selectionRangeChange: "selectionRangeChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeSelectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDateRangeSelection]'
@@ -15128,14 +15242,14 @@ class DateRangePopupComponent {
         }
     }
 }
-DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1$2.PopupService }, { token: DateRangeService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: DateRangePopupTemplateDirective, descendants: true }, { propertyName: "contentCalendar", predicate: MultiViewCalendarComponent }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "viewCalendar", predicate: MultiViewCalendarComponent, descendants: true }], exportAs: ["kendo-daterange-popup"], ngImport: i0, template: `
+DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1$2.PopupService }, { token: DateRangeService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: DateRangePopupTemplateDirective, descendants: true }, { propertyName: "contentCalendar", predicate: MultiViewCalendarComponent }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "viewCalendar", predicate: MultiViewCalendarComponent, descendants: true }], exportAs: ["kendo-daterange-popup"], ngImport: i0, template: `
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
             <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
         </ng-template>
     `, isInline: true, components: [{ type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }], directives: [{ type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendo-daterange-popup',
@@ -15247,16 +15361,15 @@ class DateRangeComponent {
         });
     }
     ngOnDestroy() {
-        var _a;
-        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.subscription?.unsubscribe();
     }
 }
-DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, deps: [{ token: DateRangeService }], target: i0.ɵɵFactoryTarget.Component });
-DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "13.3.11", ngImport: i0, type: DateRangeComponent, deps: [{ token: DateRangeService }], target: i0.ɵɵFactoryTarget.Component });
+DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateRangeComponent, selector: "kendo-daterange", host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
         <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
     `, isInline: true, components: [{ type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [DateRangeService],
@@ -15387,9 +15500,9 @@ class DateRangeInput {
         }
     }
 }
-DateRangeInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeInput, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-DateRangeInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeInput, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeInput, decorators: [{
+DateRangeInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeInput, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+DateRangeInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DateRangeInput, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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 }]; } });
@@ -15460,9 +15573,9 @@ class DateRangeEndInputDirective extends DateRangeInput {
         this.dateInput.notify();
     }
 }
-DateRangeEndInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeEndInputDirective, decorators: [{
+DateRangeEndInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", type: DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeEndInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDateRangeEndInput]'
@@ -15541,9 +15654,9 @@ class DateRangeStartInputDirective extends DateRangeInput {
         this.dateInput.notify();
     }
 }
-DateRangeStartInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeStartInputDirective, decorators: [{
+DateRangeStartInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", type: DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeStartInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDateRangeStartInput]'
@@ -15565,14 +15678,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class CalendarCommonModule {
 }
-CalendarCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CalendarCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarCommonModule, declarations: [KForOf,
+CalendarCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CalendarCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarCommonModule, declarations: [KForOf,
         HeaderComponent,
-        ViewComponent], imports: [CommonModule, EventsModule], exports: [KForOf,
+        ViewComponent], imports: [CommonModule, EventsModule, ButtonModule], exports: [KForOf,
         HeaderComponent,
         ViewComponent] });
-CalendarCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarCommonModule, imports: [[CommonModule, EventsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarCommonModule, decorators: [{
+CalendarCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarCommonModule, imports: [[CommonModule, EventsModule, ButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -15585,7 +15698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         HeaderComponent,
                         ViewComponent
                     ],
-                    imports: [CommonModule, EventsModule]
+                    imports: [CommonModule, EventsModule, ButtonModule]
                 }]
         }] });
 
@@ -15606,8 +15719,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class TemplatesModule {
 }
-TemplatesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplatesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TemplatesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplatesModule, declarations: [CellTemplateDirective,
+TemplatesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TemplatesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TemplatesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TemplatesModule, declarations: [CellTemplateDirective,
         MonthCellTemplateDirective,
         YearCellTemplateDirective,
         DecadeCellTemplateDirective,
@@ -15622,8 +15735,8 @@ TemplatesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         WeekNumberCellTemplateDirective,
         HeaderTitleTemplateDirective,
         NavigationItemTemplateDirective] });
-TemplatesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplatesModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplatesModule, decorators: [{
+TemplatesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TemplatesModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TemplatesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -15686,8 +15799,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class MultiViewCalendarModule {
 }
-MultiViewCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MultiViewCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarModule, declarations: [HorizontalViewListComponent,
+MultiViewCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiViewCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MultiViewCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiViewCalendarModule, declarations: [HorizontalViewListComponent,
         MultiViewCalendarLocalizedMessagesDirective,
         MultiViewCalendarCustomMessagesComponent,
         MultiViewCalendarComponent], imports: [CommonModule,
@@ -15701,7 +15814,7 @@ MultiViewCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         MultiViewCalendarComponent,
         CalendarCommonModule,
         TemplatesModule] });
-MultiViewCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarModule, providers: [
+MultiViewCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiViewCalendarModule, providers: [
         NavigationService,
         CenturyViewService,
         DecadeViewService,
@@ -15717,7 +15830,7 @@ MultiViewCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             EventsModule
         ], CalendarCommonModule,
         TemplatesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiViewCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -15764,10 +15877,10 @@ const COMPONENT_DIRECTIVES$3 = [
  */
 class VirtualizationModule {
 }
-VirtualizationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VirtualizationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-VirtualizationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VirtualizationModule, declarations: [VirtualizationComponent], imports: [CommonModule], exports: [VirtualizationComponent] });
-VirtualizationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VirtualizationModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VirtualizationModule, decorators: [{
+VirtualizationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: VirtualizationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+VirtualizationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: VirtualizationModule, declarations: [VirtualizationComponent], imports: [CommonModule], exports: [VirtualizationComponent] });
+VirtualizationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: VirtualizationModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: VirtualizationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENT_DIRECTIVES$3],
@@ -15818,8 +15931,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class CalendarModule {
 }
-CalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarModule, declarations: [CalendarComponent,
+CalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarModule, declarations: [CalendarComponent,
         NavigationComponent,
         CalendarCustomMessagesComponent,
         CalendarLocalizedMessagesDirective,
@@ -15837,7 +15950,7 @@ CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         ViewListComponent,
         CalendarCommonModule,
         TemplatesModule] });
-CalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarModule, providers: [
+CalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarModule, providers: [
         CalendarDOMService,
         CenturyViewService,
         DecadeViewService,
@@ -15855,7 +15968,7 @@ CalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             ResizeSensorModule
         ], CalendarCommonModule,
         TemplatesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -15931,16 +16044,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class CalendarsModule {
 }
-CalendarsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CalendarsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarsModule, imports: [CalendarModule,
+CalendarsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CalendarsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarsModule, imports: [CalendarModule,
         MultiViewCalendarModule], exports: [CalendarModule,
         MultiViewCalendarModule] });
-CalendarsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarsModule, imports: [[
+CalendarsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarsModule, imports: [[
             CalendarModule,
             MultiViewCalendarModule
         ], CalendarModule,
         MultiViewCalendarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -15966,14 +16079,14 @@ class DateInputCustomMessagesComponent extends DateInputMessages {
         return true;
     }
 }
-DateInputCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DateInputCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages", providers: [
+DateInputCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DateInputCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "12.2.16", ngImport: i0, type: DateInputCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -15993,14 +16106,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class DateInputModule {
 }
-DateInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputModule, declarations: [DateInputComponent,
+DateInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DateInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputModule, declarations: [DateInputComponent,
         DateInputCustomMessagesComponent,
-        DateInputLocalizedMessagesDirective], imports: [CommonModule, IntlModule, EventsModule], exports: [DateInputComponent,
+        DateInputLocalizedMessagesDirective], imports: [CommonModule, IntlModule, EventsModule, IconsModule], exports: [DateInputComponent,
         DateInputCustomMessagesComponent,
         DateInputLocalizedMessagesDirective] });
-DateInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputModule, imports: [[CommonModule, IntlModule, EventsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputModule, decorators: [{
+DateInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputModule, imports: [[CommonModule, IntlModule, EventsModule, IconsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -16013,7 +16126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         DateInputCustomMessagesComponent,
                         DateInputLocalizedMessagesDirective
                     ],
-                    imports: [CommonModule, IntlModule, EventsModule]
+                    imports: [CommonModule, IntlModule, EventsModule, IconsModule]
                 }]
         }] });
 
@@ -16029,14 +16142,14 @@ class DatePickerCustomMessagesComponent extends DatePickerMessages {
         return true;
     }
 }
-DatePickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages", providers: [
+DatePickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DatePickerCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DatePickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "12.2.16", ngImport: i0, type: DatePickerCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DatePickerCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -16056,8 +16169,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class DatePickerModule {
 }
-DatePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerModule, declarations: [DatePickerComponent,
+DatePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DatePickerModule, declarations: [DatePickerComponent,
         DatePickerCustomMessagesComponent,
         DatePickerLocalizedMessagesDirective], imports: [CommonModule,
         DateInputModule,
@@ -16065,20 +16178,22 @@ DatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         IntlModule,
         PopupModule,
         TemplatesModule,
-        EventsModule], exports: [DatePickerComponent,
+        EventsModule,
+        IconsModule], exports: [DatePickerComponent,
         DatePickerCustomMessagesComponent,
         DatePickerLocalizedMessagesDirective,
         TemplatesModule] });
-DatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [[
+DatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DatePickerModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [[
             CommonModule,
             DateInputModule,
             CalendarModule,
             IntlModule,
             PopupModule,
             TemplatesModule,
-            EventsModule
+            EventsModule,
+            IconsModule
         ], TemplatesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DatePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -16099,7 +16214,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         IntlModule,
                         PopupModule,
                         TemplatesModule,
-                        EventsModule
+                        EventsModule,
+                        IconsModule
                     ],
                     providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }]
                 }]
@@ -16159,8 +16275,8 @@ const COMPONENT_MODULES$2 = [
  */
 class DateRangeModule {
 }
-DateRangeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateRangeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeModule, declarations: [DateRangeComponent,
+DateRangeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DateRangeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeModule, declarations: [DateRangeComponent,
         DateRangePopupComponent,
         DateRangePopupTemplateDirective,
         DateRangeSelectionDirective,
@@ -16174,8 +16290,8 @@ DateRangeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         DateRangeSelectionDirective,
         DateRangeStartInputDirective,
         DateRangeEndInputDirective] });
-DateRangeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeModule, imports: [[CommonModule, COMPONENT_MODULES$2]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeModule, decorators: [{
+DateRangeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeModule, imports: [[CommonModule, COMPONENT_MODULES$2]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENT_DIRECTIVES$2],
@@ -16196,14 +16312,14 @@ class TimePickerCustomMessagesComponent extends TimePickerMessages {
         return true;
     }
 }
-TimePickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimePickerCustomMessagesComponent, selector: "kendo-timepicker-messages", providers: [
+TimePickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TimePickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "12.2.16", ngImport: i0, type: TimePickerCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -16231,7 +16347,8 @@ const COMPONENT_MODULES$1 = [
     IntlModule,
     PopupModule,
     VirtualizationModule,
-    EventsModule
+    EventsModule,
+    IconsModule
 ];
 const providers = [
     TimePickerDOMService,
@@ -16251,8 +16368,8 @@ const providers = [
  */
 class TimePickerModule {
 }
-TimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerModule, declarations: [TimePickerLocalizedMessagesDirective,
+TimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerModule, declarations: [TimePickerLocalizedMessagesDirective,
         TimeListComponent,
         TimePickerCustomMessagesComponent,
         TimePickerComponent,
@@ -16262,15 +16379,16 @@ TimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         IntlModule,
         PopupModule,
         VirtualizationModule,
-        EventsModule], exports: [TimePickerLocalizedMessagesDirective,
+        EventsModule,
+        IconsModule], exports: [TimePickerLocalizedMessagesDirective,
         TimeListComponent,
         TimePickerCustomMessagesComponent,
         TimePickerComponent,
         TimeSelectorLocalizedMessagesDirective,
         TimeSelectorCustomMessagesComponent,
         TimeSelectorComponent] });
-TimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerModule, providers: providers, imports: [[CommonModule, ...COMPONENT_MODULES$1]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerModule, decorators: [{
+TimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerModule, providers: providers, imports: [[CommonModule, ...COMPONENT_MODULES$1]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENT_DIRECTIVES$1],
@@ -16292,14 +16410,14 @@ class DateTimePickerCustomMessagesComponent extends Messages {
         return true;
     }
 }
-DateTimePickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateTimePickerCustomMessagesComponent, selector: "kendo-datetimepicker-messages", providers: [
+DateTimePickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimePickerCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateTimePickerCustomMessagesComponent, selector: "kendo-datetimepicker-messages", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => DateTimePickerCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimePickerCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -16324,8 +16442,8 @@ const COMPONENT_DIRECTIVES = [
  */
 class DateTimePickerModule {
 }
-DateTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerModule, declarations: [DateTimePickerComponent,
+DateTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimePickerModule, declarations: [DateTimePickerComponent,
         DateTimePickerCustomMessagesComponent,
         LocalizedMessagesDirective], imports: [CommonModule,
         IntlModule,
@@ -16334,10 +16452,11 @@ DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         TimePickerModule,
         PopupModule,
         EventsModule,
-        TemplatesModule], exports: [DateTimePickerComponent,
+        TemplatesModule,
+        IconsModule], exports: [DateTimePickerComponent,
         DateTimePickerCustomMessagesComponent,
         LocalizedMessagesDirective, TemplatesModule] });
-DateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerModule, providers: [
+DateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimePickerModule, providers: [
         { provide: TOUCH_ENABLED, useValue: touchEnabled }
     ], imports: [[
             CommonModule,
@@ -16347,9 +16466,10 @@ DateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
             TimePickerModule,
             PopupModule,
             EventsModule,
-            TemplatesModule
+            TemplatesModule,
+            IconsModule
         ], TemplatesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -16367,7 +16487,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         TimePickerModule,
                         PopupModule,
                         EventsModule,
-                        TemplatesModule
+                        TemplatesModule,
+                        IconsModule
                     ],
                     providers: [
                         { provide: TOUCH_ENABLED, useValue: touchEnabled }
@@ -16416,8 +16537,8 @@ const COMPONENT_MODULES = [
  */
 class DateInputsModule {
 }
-DateInputsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateInputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputsModule, imports: [CalendarsModule,
+DateInputsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DateInputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputsModule, imports: [CalendarsModule,
         DateInputModule,
         DatePickerModule,
         TimePickerModule,
@@ -16428,13 +16549,13 @@ DateInputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         TimePickerModule,
         DateRangeModule,
         DateTimePickerModule] });
-DateInputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputsModule, imports: [COMPONENT_MODULES, CalendarsModule,
+DateInputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputsModule, imports: [COMPONENT_MODULES, CalendarsModule,
         DateInputModule,
         DatePickerModule,
         TimePickerModule,
         DateRangeModule,
         DateTimePickerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: COMPONENT_MODULES,