@progress/kendo-angular-dateinputs 16.0.0-develop.13 → 16.0.0-develop.15

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

@@ -38,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1715097775,
-    version: '16.0.0-develop.13',
+    publishDate: 1715175739,
+    version: '16.0.0-develop.15',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -158,7 +158,7 @@ var Keys;
  */
 const selectors = {
     infiniteCalendarTable: '.k-content .k-calendar-table',
-    multiViewCalendarTable: '.k-content.k-calendar-table'
+    multiViewCalendarTable: '.k-calendar-table'
 };
 /**
  * @hidden
@@ -2297,7 +2297,7 @@ HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
         <ng-template #tableTemplate let-date="date" let-class="className">
             <table
                 [attr.role]="views >= 2 ? 'none' : 'grid'"
-                class="k-content k-calendar-table"
+                class="k-calendar-table"
                 [ngClass]="class"
                 [attr.aria-labelledby]="id"
                 [attr.aria-activedescendant]="getActiveDescendant"
@@ -2386,7 +2386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         <ng-template #tableTemplate let-date="date" let-class="className">
             <table
                 [attr.role]="views >= 2 ? 'none' : 'grid'"
-                class="k-content k-calendar-table"
+                class="k-calendar-table"
                 [ngClass]="class"
                 [attr.aria-labelledby]="id"
                 [attr.aria-activedescendant]="getActiveDescendant"
@@ -2603,9 +2603,6 @@ class HeaderComponent {
         this.getComponentClass = true;
         this.subscriptions = new Subscription();
     }
-    get horizontalHostClass() {
-        return this.orientation === 'horizontal';
-    }
     get verticalHostClass() {
         return this.orientation === 'vertical';
     }
@@ -2680,18 +2677,23 @@ class HeaderComponent {
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, deps: [{ token: BusViewService }, { token: i0.ChangeDetectorRef }, { token: i1$1.LocalizationService }, { token: i1.IntlService }, { token: DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", titleTemplateRef: "titleTemplateRef", headerTemplateRef: "headerTemplateRef", isPrevDisabled: "isPrevDisabled", isNextDisabled: "isNextDisabled", showNavigationButtons: "showNavigationButtons", orientation: "orientation", id: "id" }, outputs: { todayButtonClick: "todayButtonClick", prevButtonClick: "prevButtonClick", nextButtonClick: "nextButtonClick" }, host: { properties: { "class.k-calendar-header": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass" } }, usesOnChanges: true, ngImport: i0, template: `
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", titleTemplateRef: "titleTemplateRef", headerTemplateRef: "headerTemplateRef", isPrevDisabled: "isPrevDisabled", isNextDisabled: "isNextDisabled", showNavigationButtons: "showNavigationButtons", orientation: "orientation", id: "id", size: "size" }, outputs: { todayButtonClick: "todayButtonClick", prevButtonClick: "prevButtonClick", nextButtonClick: "nextButtonClick" }, host: { properties: { "class.k-calendar-header": "this.getComponentClass", "class.k-vstack": "this.verticalHostClass" } }, usesOnChanges: true, ngImport: i0, template: `
     <ng-template *ngIf="headerTemplateRef; else defaultRendering" 
                 [ngTemplateOutlet]="headerTemplateRef"
                 [ngTemplateOutletContext]="{ title: title, activeView: activeViewValue, date: currentDate }">
     </ng-template>
     <ng-template #defaultRendering>
-        <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title"
+        <button 
+            kendoButton
+            class="k-calendar-title"
             role="button"
             [id]="id"
+            type="button"
+            fillMode="flat"
+            [size]="size"
+            themeColor="primary"
             tabindex="-1"
-            [class.k-disabled]="!navigate"
-            [attr.aria-disabled]="isDisabled()"
+            [disabled]="!navigate"
             [kendoEventsOutsideAngular]="{
                 click: handleNavigation
             }"
@@ -2703,13 +2705,14 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                 [ngTemplateOutlet]="titleTemplateRef"
                 [ngTemplateOutletContext]="{ $implicit: title, activeView: activeViewValue, date: currentDate }"
             ></ng-template>
-        </span>
+        </button>
         <span class="k-spacer"></span>
         <span class="k-calendar-nav k-hstack">
             <button
                 *ngIf="showNavigationButtons"
                 kendoButton
                 fillMode="flat"
+                [size]="size"
                 [svgIcon]="chevronLeftIcon"
                 icon="chevron-left"
                 tabindex="-1"
@@ -2722,9 +2725,14 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
             >
             </button>
             <button
-                class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md"
+                kendoButton
+                class="k-calendar-nav-today"
                 tabindex="-1"
-                [class.k-disabled]="!todayAvailable"
+                themeColor="primary"
+                fillMode="flat"
+                role="link"
+                [size]="size"
+                [disabled]="!todayAvailable"
                 [kendoEventsOutsideAngular]="{
                     click: handleTodayClick
                 }"
@@ -2750,7 +2758,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
             </button>
         </span>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+`, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -2761,12 +2769,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 [ngTemplateOutletContext]="{ title: title, activeView: activeViewValue, date: currentDate }">
     </ng-template>
     <ng-template #defaultRendering>
-        <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title"
+        <button 
+            kendoButton
+            class="k-calendar-title"
             role="button"
             [id]="id"
+            type="button"
+            fillMode="flat"
+            [size]="size"
+            themeColor="primary"
             tabindex="-1"
-            [class.k-disabled]="!navigate"
-            [attr.aria-disabled]="isDisabled()"
+            [disabled]="!navigate"
             [kendoEventsOutsideAngular]="{
                 click: handleNavigation
             }"
@@ -2778,13 +2791,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 [ngTemplateOutlet]="titleTemplateRef"
                 [ngTemplateOutletContext]="{ $implicit: title, activeView: activeViewValue, date: currentDate }"
             ></ng-template>
-        </span>
+        </button>
         <span class="k-spacer"></span>
         <span class="k-calendar-nav k-hstack">
             <button
                 *ngIf="showNavigationButtons"
                 kendoButton
                 fillMode="flat"
+                [size]="size"
                 [svgIcon]="chevronLeftIcon"
                 icon="chevron-left"
                 tabindex="-1"
@@ -2797,9 +2811,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             >
             </button>
             <button
-                class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md"
+                kendoButton
+                class="k-calendar-nav-today"
                 tabindex="-1"
-                [class.k-disabled]="!todayAvailable"
+                themeColor="primary"
+                fillMode="flat"
+                role="link"
+                [size]="size"
+                [disabled]="!todayAvailable"
                 [kendoEventsOutsideAngular]="{
                     click: handleTodayClick
                 }"
@@ -2825,7 +2844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             </button>
         </span>
     </ng-template>
-  `
+`
                 }]
         }], ctorParameters: function () { return [{ type: BusViewService }, { type: i0.ChangeDetectorRef }, { type: i1$1.LocalizationService }, { type: i1.IntlService }, { type: DisabledDatesService }]; }, propDecorators: { activeView: [{
                 type: Input
@@ -2851,6 +2870,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], id: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], todayButtonClick: [{
                 type: Output
             }], prevButtonClick: [{
@@ -2860,9 +2881,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }], getComponentClass: [{
                 type: HostBinding,
                 args: ["class.k-calendar-header"]
-            }], horizontalHostClass: [{
-                type: HostBinding,
-                args: ["class.k-hstack"]
             }], verticalHostClass: [{
                 type: HostBinding,
                 args: ["class.k-vstack"]
@@ -3578,6 +3596,7 @@ class MultiViewCalendarComponent {
          * Determines whether to display the calendar header.
          */
         this.showCalendarHeader = true;
+        this._size = DEFAULT_SIZE;
         /**
          * Toggles the visibility of the footer.
          * @default false
@@ -3750,9 +3769,32 @@ class MultiViewCalendarComponent {
         this.maxValidateFn = noop$2;
         this.disabledDatesRangeValidateFn = noop$2;
         this.subscriptions = new Subscription();
-        this.setClasses(element.nativeElement);
         this.id = `kendo-multiviewcalendarid-${this.bus.calendarId}-`;
     }
+    /**
+     * @hidden
+     *
+     * TODO: Make visible when the Infinite Calendar is fixed to set properly the size option.
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
+     *
+     */
+    set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.renderer.removeClass(this.element.nativeElement, getSizeClass('calendar', this.size));
+        if (newSize !== 'none') {
+            this.renderer.addClass(this.element.nativeElement, getSizeClass('calendar', newSize));
+        }
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
     /**
      * Sets or gets the `focusedDate` property of the Calendar and
      * defines the focused date of the component
@@ -4128,6 +4170,7 @@ class MultiViewCalendarComponent {
         }
     }
     ngOnInit() {
+        this.setClasses(this.element.nativeElement);
         this.subscriptions.add(this.bus.viewChanged.subscribe(({ view }) => {
             this.activeView = CalendarViewEnum[view];
             this.activeViewChange.emit(this.activeView);
@@ -4197,7 +4240,7 @@ class MultiViewCalendarComponent {
             return;
         }
         const activeElement = this.views >= 2 ? this.element.nativeElement.querySelector('.k-calendar-view') :
-            this.element.nativeElement.querySelector('.k-content.k-calendar-table');
+            this.element.nativeElement.querySelector('.k-calendar-table');
         activeElement.blur();
     }
     /**
@@ -4405,9 +4448,11 @@ class MultiViewCalendarComponent {
         });
     }
     setClasses(element) {
-        this.renderer.addClass(element, 'k-widget');
         this.renderer.addClass(element, 'k-calendar');
-        this.renderer.addClass(element, 'k-calendar-range');
+        this.renderer.addClass(element, getSizeClass('calendar', this.size));
+        if (this.views >= 2) {
+            this.renderer.addClass(element, 'k-calendar-range');
+        }
     }
     verifyChanges() {
         if (!isDevMode()) {
@@ -4539,7 +4584,7 @@ class MultiViewCalendarComponent {
     }
 }
 MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarComponent, deps: [{ token: BusViewService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DisabledDatesService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Component });
-MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { showOtherMonthDays: "showOtherMonthDays", showCalendarHeader: "showCalendarHeader", id: "id", focusedDate: "focusedDate", footer: "footer", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", allowReverse: "allowReverse", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", weekDaysFormat: "weekDaysFormat", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", rangeSelectionChange: "rangeSelectionChange", blurEvent: "blur", focusEvent: "focus", focusCalendar: "focusCalendar", onClosePopup: "onClosePopup", onTabPress: "onTabPress", onShiftTabPress: "onShiftTabPress" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { showOtherMonthDays: "showOtherMonthDays", showCalendarHeader: "showCalendarHeader", size: "size", id: "id", focusedDate: "focusedDate", footer: "footer", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", allowReverse: "allowReverse", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", weekDaysFormat: "weekDaysFormat", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", rangeSelectionChange: "rangeSelectionChange", blurEvent: "blur", focusEvent: "focus", focusCalendar: "focusCalendar", onClosePopup: "onClosePopup", onTabPress: "onTabPress", onShiftTabPress: "onShiftTabPress" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
         BusViewService,
         RANGE_CALENDAR_VALUE_ACCESSOR,
         RANGE_CALENDAR_RANGE_VALIDATORS,
@@ -4570,6 +4615,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
         *ngIf="showCalendarHeader"
         [activeView]="activeViewEnum"
         [currentDate]="activeDate"
+        [size]="size"
         [min]="min"
         [max]="max"
         [id]="headerId"
@@ -4625,7 +4671,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
         [activeViewValue]="activeView"
         [currentDate]="activeDate">
     </kendo-calendar-footer>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["showOtherMonthDays", "cellTemplateRef", "weekNumberTemplateRef", "allowReverse", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "activeDescendant", "tabIndex", "disabled", "id", "weekDaysFormat", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { kind: "directive", type: MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id", "size"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["showOtherMonthDays", "cellTemplateRef", "weekNumberTemplateRef", "allowReverse", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "activeDescendant", "tabIndex", "disabled", "id", "weekDaysFormat", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { kind: "directive", type: MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -4664,6 +4710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         *ngIf="showCalendarHeader"
         [activeView]="activeViewEnum"
         [currentDate]="activeDate"
+        [size]="size"
         [min]="min"
         [max]="max"
         [id]="headerId"
@@ -4725,6 +4772,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], showCalendarHeader: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], id: [{
                 type: Input
             }], focusedDate: [{
@@ -5358,12 +5407,12 @@ const tbody = domContainerFactory('tbody');
 const thead = domContainerFactory('thead');
 const table = domContainerFactory('table');
 const monthHeader = () => (div$1(`
-            <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title">March 2017</span>
+            <span class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title">March 2017</span>
             <span class="k-spacer"></span>
             <span class="k-calendar-nav k-hstack">
                 <button class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md">TODAY</button>
             </span>
-        `, 'k-calendar-header k-hstack'));
+        `, 'k-calendar-header'));
 const monthWeekHeader = () => (table([
     thead([
         tr([th('MO', 'k-calendar-th')], 'k-calendar-tr')
@@ -5869,9 +5918,10 @@ class ViewListComponent {
     }
 }
 ViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ViewListComponent, deps: [{ token: BusViewService }, { token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: CalendarDOMService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { allowReverse: "allowReverse", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", headerTemplateRef: "headerTemplateRef", footerTemplateRef: "footerTemplateRef", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", showFooter: "showFooter", weekDaysFormat: "weekDaysFormat", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", weekNumber: "weekNumber" }, outputs: { cellEnter: "cellEnter", cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { allowReverse: "allowReverse", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", headerTemplateRef: "headerTemplateRef", footerTemplateRef: "footerTemplateRef", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", showFooter: "showFooter", weekDaysFormat: "weekDaysFormat", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", size: "size", weekNumber: "weekNumber" }, outputs: { cellEnter: "cellEnter", cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-calendar-header
         [currentDate]="activeDate"
+        [size]="size"
         [min]="min"
         [max]="max"
         [id]="id"
@@ -5945,7 +5995,7 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         [activeViewValue]="activeViewValue"
         [currentDate]="activeDate">
     </kendo-calendar-footer>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["allowReverse", "showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }, { kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id", "size"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["allowReverse", "showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }, { kind: "component", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ViewListComponent, decorators: [{
             type: Component,
             args: [{
@@ -5954,6 +6004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                     template: `
     <kendo-calendar-header
         [currentDate]="activeDate"
+        [size]="size"
         [min]="min"
         [max]="max"
         [id]="id"
@@ -6071,6 +6122,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], selectionRange: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], weekNumber: [{
                 type: Input
             }], cellEnter: [{
@@ -6518,7 +6571,6 @@ class CalendarComponent {
         this.canHover = false;
         validatePackage(packageMetadata);
         this.id = `kendo-calendarid-${this.bus.calendarId}`;
-        this.setClasses(element.nativeElement);
         if (this.pickerService) {
             this.pickerService.calendar = this;
         }
@@ -6663,7 +6715,9 @@ class CalendarComponent {
      */
     set type(type) {
         this.renderer.removeClass(this.element.nativeElement, `k-calendar-${this.type}`);
-        this.renderer.addClass(this.element.nativeElement, `k-calendar-${type}`);
+        if (type === 'infinite') {
+            this.renderer.addClass(this.element.nativeElement, `k-calendar-${type}`);
+        }
         this._type = type;
     }
     get type() {
@@ -6802,13 +6856,7 @@ class CalendarComponent {
      *
      */
     set size(size) {
-        const element = this.type === 'infinite' ? this.element : this.multiViewCalendar.element;
-        this.renderer.removeClass(element.nativeElement, getSizeClass('calendar', this.size));
-        const newSize = size ? size : DEFAULT_SIZE;
-        if (newSize !== 'none') {
-            this.renderer.addClass(element.nativeElement, getSizeClass('calendar', newSize));
-        }
-        this._size = newSize;
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -6843,6 +6891,7 @@ class CalendarComponent {
         return this.type === 'classic' ? undefined : this.disabled;
     }
     ngOnInit() {
+        this.setClasses(this.element.nativeElement);
         if (this.type === 'infinite') {
             this.dom.calculateHeights(this.element.nativeElement);
             this.scrollSyncService.configure(this.activeViewEnum);
@@ -6886,6 +6935,7 @@ class CalendarComponent {
         this.setAriaActivedescendant();
         if (this.size !== 'none') {
             const element = this.type === 'infinite' ? this.element : this.multiViewCalendar.element;
+            this.renderer.removeClass(element.nativeElement, getSizeClass('calendar', this.size));
             this.renderer.addClass(element.nativeElement, getSizeClass('calendar', this.size));
         }
     }
@@ -7235,9 +7285,11 @@ class CalendarComponent {
         }
     }
     setClasses(element) {
-        this.renderer.addClass(element, 'k-widget');
-        this.renderer.addClass(element, 'k-calendar');
-        this.renderer.addClass(element, `k-calendar-${this.type}`);
+        this.renderer.removeClass(element, `k-calendar-${this.type}`);
+        if (this.type === 'infinite') {
+            this.renderer.addClass(element, 'k-calendar');
+            this.renderer.addClass(element, `k-calendar-${this.type}`);
+        }
     }
     verifyChanges() {
         if (!isDevMode()) {
@@ -7511,6 +7563,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             [showOtherMonthDays]="showOtherMonthDays"
             [activeRangeEnd]="activeRangeEnd"
             [selectionRange]="selectionRange"
+            [size]="size"
             [isActive]="isActive"
             [id]="headerId"
             [weekDaysFormat]="weekDaysFormat"
@@ -7549,6 +7602,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             [views]="1"
             [min]="min"
             [max]="max"
+            [size]="size"
             [id]="id"
             [activeRangeEnd]="activeRangeEnd"
             [selectionRange]="selectionRange"
@@ -7594,7 +7648,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { kind: "directive", type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { kind: "component", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["allowReverse", "cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "headerTemplateRef", "footerTemplateRef", "showOtherMonthDays", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "showFooter", "weekDaysFormat", "activeRangeEnd", "selectionRange", "weekNumber"], outputs: ["cellEnter", "cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { kind: "directive", type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { kind: "component", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["allowReverse", "cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "headerTemplateRef", "footerTemplateRef", "showOtherMonthDays", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "showFooter", "weekDaysFormat", "activeRangeEnd", "selectionRange", "size", "weekNumber"], outputs: ["cellEnter", "cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -7649,6 +7703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             [showOtherMonthDays]="showOtherMonthDays"
             [activeRangeEnd]="activeRangeEnd"
             [selectionRange]="selectionRange"
+            [size]="size"
             [isActive]="isActive"
             [id]="headerId"
             [weekDaysFormat]="weekDaysFormat"
@@ -7687,6 +7742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             [views]="1"
             [min]="min"
             [max]="max"
+            [size]="size"
             [id]="id"
             [activeRangeEnd]="activeRangeEnd"
             [selectionRange]="selectionRange"
@@ -10356,8 +10412,8 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         <ng-template #calendarTemplate>
             <kendo-calendar
                 #calendar
-                [size]="isAdaptive ? 'large' : 'medium'"
                 [type]="calendarType"
+                [size]="isAdaptive ? 'large' : size"
                 [min]="min"
                 [max]="max"
                 [weekDaysFormat]="weekDaysFormat"
@@ -10539,8 +10595,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         <ng-template #calendarTemplate>
             <kendo-calendar
                 #calendar
-                [size]="isAdaptive ? 'large' : 'medium'"
                 [type]="calendarType"
+                [size]="isAdaptive ? 'large' : size"
                 [min]="min"
                 [max]="max"
                 [weekDaysFormat]="weekDaysFormat"
@@ -12041,6 +12097,7 @@ class TimeSelectorComponent {
          */
         this.valueReject = new EventEmitter();
         this.tabOutLastPart = new EventEmitter();
+        this.tabOutNow = new EventEmitter();
         this.isActive = false;
         this.showNowButton = true;
         this._activeListIndex = -1;
@@ -12132,12 +12189,11 @@ class TimeSelectorComponent {
     }
     ngAfterViewInit() {
         this.subscriptions.add(fromEvent(this.timeListWrappers.first.nativeElement, 'keydown').subscribe((event) => {
-            var _a;
             const { keyCode, shiftKey } = event;
             if (keyCode === Keys$1.Tab && shiftKey) {
                 event.preventDefault();
                 this.renderer.removeClass(this.timeListWrappers.first.nativeElement, 'k-focus');
-                this.cancel ? this.cancel.nativeElement.focus() : (_a = this.accept) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+                this.now ? this.now.nativeElement.focus() : this.cancel.nativeElement.focus();
             }
         }));
         this.subscriptions.add(fromEvent(this.timeListWrappers.last.nativeElement, 'keydown').subscribe((event) => {
@@ -12255,14 +12311,25 @@ class TimeSelectorComponent {
      * @hidden
      */
     handleTabOut(event) {
+        var _a, _b, _c;
         const { keyCode, shiftKey } = event;
-        if (keyCode === Keys$1.Tab && !shiftKey) {
+        if (event.target === ((_a = this.now) === null || _a === void 0 ? void 0 : _a.nativeElement) && keyCode === Keys$1.Tab && shiftKey) {
+            event.preventDefault();
+            if (this.isDateTimePicker) {
+                this.tabOutNow.emit();
+            }
+            else {
+                this.cancel ? this.cancel.nativeElement.focus() : this.accept.nativeElement.focus();
+            }
+            return;
+        }
+        if (keyCode === Keys$1.Tab && !shiftKey && event.target !== ((_b = this.now) === null || _b === void 0 ? void 0 : _b.nativeElement)) {
             event.preventDefault();
             if (document.activeElement === this.accept.nativeElement) {
-                this.cancel ? this.cancel.nativeElement.focus() : this.timeLists.first.focus();
+                this.cancel ? this.cancel.nativeElement.focus() : (_c = this.now) === null || _c === void 0 ? void 0 : _c.nativeElement.focus();
             }
             else {
-                this.timeLists.first.focus();
+                this.now ? this.now.nativeElement.focus() : this.timeLists.first.focus();
             }
         }
     }
@@ -12353,7 +12420,7 @@ class TimeSelectorComponent {
     }
 }
 TimeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeSelectorComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.IntlService }, { token: TimePickerDOMService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject", tabOutLastPart: "tabOutLastPart" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
+TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject", tabOutLastPart: "tabOutLastPart", tabOutNow: "tabOutNow" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -12394,7 +12461,8 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 [kendoEventsOutsideAngular]="{
                     click: handleNow,
                     focus: handleFocus,
-                    blur: handleBlur
+                    blur: handleBlur,
+                    keydown: handleTabOut
                 }"
                 [scope]="this"
                 [disabled]="disabled"
@@ -12515,7 +12583,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 [kendoEventsOutsideAngular]="{
                     click: handleNow,
                     focus: handleFocus,
-                    blur: handleBlur
+                    blur: handleBlur,
+                    keydown: handleTabOut
                 }"
                 [scope]="this"
                 [disabled]="disabled"
@@ -12639,6 +12708,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }], tabOutLastPart: [{
                 type: Output
+            }], tabOutNow: [{
+                type: Output
             }] } });
 
 const VALUE_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/#toc-integration-with-json';
@@ -13773,7 +13844,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -14189,6 +14260,7 @@ const TWO_DIGIT_YEAR_MAX = 68;
 const ACCEPT_BUTTON_SELECTOR = '.k-button.k-time-accept';
 const CANCEL_BUTTON_SELECOTR = '.k-button.k-time-cancel';
 const DATE_TAB_BUTTON_SELECTOR = '.k-button.k-date-tab';
+const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-time-tab';
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
@@ -14790,6 +14862,10 @@ class DateTimePickerComponent {
         var _a;
         return (_a = this.popupRef) === null || _a === void 0 ? void 0 : _a.popup.instance.container.nativeElement.querySelector(DATE_TAB_BUTTON_SELECTOR);
     }
+    get timeTabButton() {
+        var _a;
+        return (_a = this.popupRef) === null || _a === void 0 ? void 0 : _a.popup.instance.container.nativeElement.querySelector(TIME_TAB_BUTTON_SELECTOR);
+    }
     /**
      * @hidden
      */
@@ -15039,6 +15115,12 @@ class DateTimePickerComponent {
             this.dateTabButton.focus();
         }
     }
+    /**
+     * @hidden
+     */
+    onTabOutNow() {
+        this.timeTabButton.focus();
+    }
     /**
      * @hidden
      */
@@ -15162,7 +15244,7 @@ class DateTimePickerComponent {
                         this.calendar.monthView.list.nativeElement.focus();
                     }
                     else {
-                        this.timeSelector.focus();
+                        this.timeSelector.timeLists.last.focus();
                     }
                 }
                 break;
@@ -15733,8 +15815,8 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                     <div class="k-datetime-calendar-wrap">
                         <kendo-calendar
                             #calendar
-                            [ngClass]="{'k-calendar-lg': isAdaptive}"
                             [focusedDate]="focusedDate"
+                            [size]="isAdaptive ? 'large' : size"
                             [(value)]="calendarValue"
                             [type]="calendarType"
                             [min]="calendarMin"
@@ -15781,6 +15863,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                             [isAdaptiveEnabled]="isAdaptiveModeEnabled"
                             [isDateTimePicker]="true"
                             (tabOutLastPart)="onTabOutLastPart()"
+                            (tabOutNow)="onTabOutNow()"
                         >
                             <kendo-timeselector-messages
                                 [acceptLabel]="localization.get('acceptLabel')"
@@ -15841,7 +15924,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -16121,8 +16204,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                     <div class="k-datetime-calendar-wrap">
                         <kendo-calendar
                             #calendar
-                            [ngClass]="{'k-calendar-lg': isAdaptive}"
                             [focusedDate]="focusedDate"
+                            [size]="isAdaptive ? 'large' : size"
                             [(value)]="calendarValue"
                             [type]="calendarType"
                             [min]="calendarMin"
@@ -16169,6 +16252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                             [isAdaptiveEnabled]="isAdaptiveModeEnabled"
                             [isDateTimePicker]="true"
                             (tabOutLastPart)="onTabOutLastPart()"
+                            (tabOutNow)="onTabOutNow()"
                         >
                             <kendo-timeselector-messages
                                 [acceptLabel]="localization.get('acceptLabel')"
@@ -17354,7 +17438,7 @@ class DateRangePopupComponent {
     }
 }
 DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1$2.PopupService }, { token: DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { allowReverse: "allowReverse", animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
+DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { allowReverse: "allowReverse", animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", size: "size" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -17380,6 +17464,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             <kendo-multiviewcalendar
                 [allowReverse]="allowReverse"
                 selection="range"
+                [size]="size"
                 [value]="dateRangeService.selectionRange"
                 (onClosePopup)="closePopup($event)"
                 (onTabPress)="handleTab($event)"
@@ -17459,7 +17544,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 </div>
             </ng-template>
         </kendo-actionsheet>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
@@ -17492,6 +17577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             <kendo-multiviewcalendar
                 [allowReverse]="allowReverse"
                 selection="range"
+                [size]="size"
                 [value]="dateRangeService.selectionRange"
                 (onClosePopup)="closePopup($event)"
                 (onTabPress)="handleTab($event)"
@@ -17623,6 +17709,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], subtitle: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], open: [{
                 type: Output
             }], close: [{
@@ -17694,10 +17782,10 @@ class DateRangeComponent {
     }
 }
 DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeComponent, deps: [{ token: DateRangeService }], target: i0.ɵɵFactoryTarget.Component });
-DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateRangeComponent, selector: "kendo-daterange", host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
+DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateRangeComponent, selector: "kendo-daterange", inputs: { size: "size" }, host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
-        <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["allowReverse", "animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }] });
+        <kendo-daterange-popup *ngIf="showDefault" [size]="size"></kendo-daterange-popup>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["allowReverse", "animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle", "size"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{
@@ -17705,10 +17793,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                     selector: 'kendo-daterange',
                     template: `
         <ng-content></ng-content>
-        <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
+        <kendo-daterange-popup *ngIf="showDefault" [size]="size"></kendo-daterange-popup>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: DateRangeService }]; }, propDecorators: { keydown: [{
+        }], ctorParameters: function () { return [{ type: DateRangeService }]; }, propDecorators: { size: [{
+                type: Input
+            }], keydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }], wrapperClass: [{