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

package/calendar/header.component.d.ts

@@ -11,6 +11,7 @@ import { CalendarOrientation } from './models/orientation';
 import { BusViewService } from './services/bus-view.service';
 import { DisabledDatesService } from './services/disabled-dates.service';
 import { SVGIcon } from '@progress/kendo-svg-icons';
+import { DateInputSize } from '../common/models/size';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -49,11 +50,11 @@ export declare class HeaderComponent implements OnChanges, OnInit, OnDestroy {
     showNavigationButtons: boolean;
     orientation: CalendarOrientation;
     id: string;
+    size: DateInputSize;
     todayButtonClick: EventEmitter<Date>;
     prevButtonClick: EventEmitter<any>;
     nextButtonClick: EventEmitter<any>;
     getComponentClass: boolean;
-    get horizontalHostClass(): boolean;
     get verticalHostClass(): boolean;
     private subscriptions;
     constructor(bus: BusViewService, cdr: ChangeDetectorRef, localization: LocalizationService, intl: IntlService, disabledDatesService: DisabledDatesService);
@@ -68,5 +69,5 @@ export declare class HeaderComponent implements OnChanges, OnInit, OnDestroy {
     private getTitle;
     private setTodayAvailability;
     static ɵfac: i0.ɵɵFactoryDeclaration<HeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HeaderComponent, "kendo-calendar-header", never, { "activeView": "activeView"; "currentDate": "currentDate"; "min": "min"; "max": "max"; "rangeLength": "rangeLength"; "titleTemplateRef": "titleTemplateRef"; "headerTemplateRef": "headerTemplateRef"; "isPrevDisabled": "isPrevDisabled"; "isNextDisabled": "isNextDisabled"; "showNavigationButtons": "showNavigationButtons"; "orientation": "orientation"; "id": "id"; }, { "todayButtonClick": "todayButtonClick"; "prevButtonClick": "prevButtonClick"; "nextButtonClick": "nextButtonClick"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HeaderComponent, "kendo-calendar-header", never, { "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"; }, { "todayButtonClick": "todayButtonClick"; "prevButtonClick": "prevButtonClick"; "nextButtonClick": "nextButtonClick"; }, never, never, false, never>;
 }

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

@@ -28,6 +28,7 @@ import { NavigationService } from './services/navigation.service';
 import { HeaderTemplateDirective } from './templates/header-template.directive';
 import { FooterTemplateDirective } from './templates/footer-template.directivе';
 import { WeekDaysFormat } from '../common/models/week-days-format';
+import { DateInputSize } from '../common/models/size';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -71,6 +72,22 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
      * Determines whether to display the calendar header.
      */
     showCalendarHeader: boolean;
+    /**
+     * @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: DateInputSize);
+    get size(): DateInputSize;
+    private _size;
     /**
      * @hidden
      */
@@ -624,5 +641,5 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
     private performRangeSelection;
     private performSelection;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiViewCalendarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MultiViewCalendarComponent, "kendo-multiviewcalendar", ["kendo-multiviewcalendar"], { "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"; "monthCellTemplateRef": "monthCellTemplate"; "yearCellTemplateRef": "yearCellTemplate"; "decadeCellTemplateRef": "decadeCellTemplate"; "centuryCellTemplateRef": "centuryCellTemplate"; "weekNumberTemplateRef": "weekNumberTemplate"; "footerTemplateRef": "footerTemplate"; "headerTitleTemplateRef": "headerTitleTemplate"; "headerTemplateRef": "headerTemplate"; }, { "activeViewChange": "activeViewChange"; "navigate": "navigate"; "cellEnter": "cellEnter"; "cellLeave": "cellLeave"; "valueChange": "valueChange"; "rangeSelectionChange": "rangeSelectionChange"; "blurEvent": "blur"; "focusEvent": "focus"; "focusCalendar": "focusCalendar"; "onClosePopup": "onClosePopup"; "onTabPress": "onTabPress"; "onShiftTabPress": "onShiftTabPress"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiViewCalendarComponent, "kendo-multiviewcalendar", ["kendo-multiviewcalendar"], { "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"; "monthCellTemplateRef": "monthCellTemplate"; "yearCellTemplateRef": "yearCellTemplate"; "decadeCellTemplateRef": "decadeCellTemplate"; "centuryCellTemplateRef": "centuryCellTemplate"; "weekNumberTemplateRef": "weekNumberTemplate"; "footerTemplateRef": "footerTemplate"; "headerTitleTemplateRef": "headerTitleTemplate"; "headerTemplateRef": "headerTemplate"; }, { "activeViewChange": "activeViewChange"; "navigate": "navigate"; "cellEnter": "cellEnter"; "cellLeave": "cellLeave"; "valueChange": "valueChange"; "rangeSelectionChange": "rangeSelectionChange"; "blurEvent": "blur"; "focusEvent": "focus"; "focusCalendar": "focusCalendar"; "onClosePopup": "onClosePopup"; "onTabPress": "onTabPress"; "onShiftTabPress": "onShiftTabPress"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate"], never, false, never>;
 }

package/calendar/view-list.component.d.ts

@@ -15,6 +15,7 @@ import { WeekDaysFormat } from '../common/models/week-days-format';
 import { CalendarView } from './models/view.type';
 import { SelectionRangeEnd } from './models/selection-range-end.type';
 import { SelectionRange } from './models/selection-range.interface';
+import { DateInputSize } from '../common/models/size';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -46,6 +47,7 @@ export declare class ViewListComponent implements OnChanges, OnDestroy, AfterVie
     weekDaysFormat: WeekDaysFormat;
     activeRangeEnd: SelectionRangeEnd;
     selectionRange: SelectionRange;
+    size: DateInputSize;
     get weekNumber(): boolean;
     set weekNumber(showWeekNumbers: boolean);
     cellEnter: EventEmitter<Date>;
@@ -102,5 +104,5 @@ export declare class ViewListComponent implements OnChanges, OnDestroy, AfterVie
     private getWeekNames;
     private intlChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<ViewListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ViewListComponent, "kendo-calendar-viewlist", never, { "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"; }, { "cellEnter": "cellEnter"; "cellClick": "cellClick"; "weekNumberCellClick": "weekNumberCellClick"; "activeDateChange": "activeDateChange"; "todayButtonClick": "todayButtonClick"; "pageChange": "pageChange"; "focusCalendar": "focusCalendar"; "blurCalendar": "blurCalendar"; "focusedCellChange": "focusedCellChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ViewListComponent, "kendo-calendar-viewlist", never, { "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"; }, { "cellEnter": "cellEnter"; "cellClick": "cellClick"; "weekNumberCellClick": "weekNumberCellClick"; "activeDateChange": "activeDateChange"; "todayButtonClick": "todayButtonClick"; "pageChange": "pageChange"; "focusCalendar": "focusCalendar"; "blurCalendar": "blurCalendar"; "focusedCellChange": "focusedCellChange"; }, never, never, false, never>;
 }

package/daterange/date-range-popup.component.d.ts

@@ -14,6 +14,7 @@ import { SVGIcon } from '@progress/kendo-svg-icons';
 import { DateRangeSelectionDirective } from './date-range-selection.directive';
 import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
 import { KeyDown } from '../calendar/models/keydown.interface';
+import { DateInputSize } from '../common/models/size';
 import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI DateRangePopup component for Angular.
@@ -112,6 +113,20 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     set subtitle(subtitle: string);
     get subtitle(): string;
     private _subtitle;
+    /**
+     * @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`
+     *
+     */
+    size: DateInputSize;
     /**
      * Fires each time the popup is about to open
      * ([see example](slug:popup_daterange#toc-events)).
@@ -257,5 +272,5 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     private toggleActionSheet;
     private updateActionSheetAdaptiveAppearance;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePopupComponent, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePopupComponent, "kendo-daterange-popup", ["kendo-daterange-popup"], { "allowReverse": "allowReverse"; "animate": "animate"; "anchor": "anchor"; "anchorAlign": "anchorAlign"; "appendTo": "appendTo"; "collision": "collision"; "popupAlign": "popupAlign"; "margin": "margin"; "adaptiveMode": "adaptiveMode"; "title": "title"; "subtitle": "subtitle"; }, { "open": "open"; "close": "close"; "onBlur": "blur"; "onFocus": "focus"; "cancel": "cancel"; }, ["contentTemplate", "contentCalendar"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePopupComponent, "kendo-daterange-popup", ["kendo-daterange-popup"], { "allowReverse": "allowReverse"; "animate": "animate"; "anchor": "anchor"; "anchorAlign": "anchorAlign"; "appendTo": "appendTo"; "collision": "collision"; "popupAlign": "popupAlign"; "margin": "margin"; "adaptiveMode": "adaptiveMode"; "title": "title"; "subtitle": "subtitle"; "size": "size"; }, { "open": "open"; "close": "close"; "onBlur": "blur"; "onFocus": "focus"; "cancel": "cancel"; }, ["contentTemplate", "contentCalendar"], never, false, never>;
 }

package/daterange/date-range.component.d.ts

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { AfterContentInit, OnDestroy } from '@angular/core';
 import { DateRangeService } from './date-range.service';
+import { DateInputSize } from '../common/models/size';
 import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI DateRange component for Angular.
@@ -26,6 +27,20 @@ import * as i0 from "@angular/core";
  */
 export declare class DateRangeComponent implements AfterContentInit, OnDestroy {
     private dateRangeService;
+    /**
+     * @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`
+     *
+     */
+    size: DateInputSize;
     /**
     * @hidden
     */
@@ -42,5 +57,5 @@ export declare class DateRangeComponent implements AfterContentInit, OnDestroy {
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateRangeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateRangeComponent, "kendo-daterange", never, {}, {}, ["contentPopup"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateRangeComponent, "kendo-daterange", never, { "size": "size"; }, {}, ["contentPopup"], ["*"], false, never>;
 }

package/esm2020/calendar/calendar-common.module.mjs

@@ -23,16 +23,16 @@ import * as i0 from "@angular/core";
  */
 export class CalendarCommonModule {
 }
-CalendarCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CalendarCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: CalendarCommonModule, declarations: [KForOf,
+CalendarCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CalendarCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CalendarCommonModule, declarations: [KForOf,
         HeaderComponent,
         FooterComponent,
         ViewComponent], imports: [CommonModule, EventsModule, ButtonModule], exports: [KForOf,
         HeaderComponent,
         FooterComponent,
         ViewComponent] });
-CalendarCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarCommonModule, imports: [CommonModule, EventsModule, ButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarCommonModule, decorators: [{
+CalendarCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarCommonModule, imports: [CommonModule, EventsModule, ButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2020/calendar/calendar.component.mjs

@@ -242,7 +242,6 @@ export 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;
         }
@@ -387,7 +386,9 @@ export 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() {
@@ -526,13 +527,7 @@ export 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;
@@ -567,6 +562,7 @@ export 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);
@@ -610,6 +606,7 @@ export 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));
         }
     }
@@ -957,9 +954,11 @@ export 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()) {
@@ -1181,8 +1180,8 @@ export class CalendarComponent {
         });
     }
 }
-CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarComponent, deps: [{ token: i1.BusViewService }, { token: i2.CalendarDOMService }, { token: i0.ElementRef }, { token: i3.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i4.ScrollSyncService }, { token: i5.DisabledDatesService }, { token: i6.LocalizationService }, { token: i7.SelectionService }, { token: i8.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CalendarComponent, selector: "kendo-calendar", inputs: { showOtherMonthDays: "showOtherMonthDays", id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", weekDaysFormat: "weekDaysFormat", footer: "footer", selection: "selection", allowReverse: "allowReverse", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], size: "size", activeRangeEnd: "activeRangeEnd" }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", onBlur: "blur", onFocus: "focus", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarComponent, deps: [{ token: i1.BusViewService }, { token: i2.CalendarDOMService }, { token: i0.ElementRef }, { token: i3.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i4.ScrollSyncService }, { token: i5.DisabledDatesService }, { token: i6.LocalizationService }, { token: i7.SelectionService }, { token: i8.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CalendarComponent, selector: "kendo-calendar", inputs: { showOtherMonthDays: "showOtherMonthDays", id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", weekDaysFormat: "weekDaysFormat", footer: "footer", selection: "selection", allowReverse: "allowReverse", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], size: "size", activeRangeEnd: "activeRangeEnd" }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", onBlur: "blur", onFocus: "focus", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
         BusViewService,
         CALENDAR_VALUE_ACCESSOR,
         CALENDAR_RANGE_VALIDATORS,
@@ -1229,6 +1228,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             [showOtherMonthDays]="showOtherMonthDays"
             [activeRangeEnd]="activeRangeEnd"
             [selectionRange]="selectionRange"
+            [size]="size"
             [isActive]="isActive"
             [id]="headerId"
             [weekDaysFormat]="weekDaysFormat"
@@ -1267,6 +1267,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             [views]="1"
             [min]="min"
             [max]="max"
+            [size]="size"
             [id]="id"
             [activeRangeEnd]="activeRangeEnd"
             [selectionRange]="selectionRange"
@@ -1312,8 +1313,8 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }, { kind: "component", type: i11.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: i13.NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { kind: "directive", type: i14.CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { kind: "component", type: i15.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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }, { kind: "component", type: i11.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: i13.NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { kind: "directive", type: i14.CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { kind: "component", type: i15.ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["allowReverse", "cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "headerTemplateRef", "footerTemplateRef", "showOtherMonthDays", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "showFooter", "weekDaysFormat", "activeRangeEnd", "selectionRange", "size", "weekNumber"], outputs: ["cellEnter", "cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1367,6 +1368,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"
@@ -1405,6 +1407,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"

package/esm2020/calendar/calendar.module.mjs

@@ -64,8 +64,8 @@ import * as i0 from "@angular/core";
  */
 export class CalendarModule {
 }
-CalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: CalendarModule, declarations: [CalendarComponent,
+CalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CalendarModule, declarations: [CalendarComponent,
         NavigationComponent,
         CalendarCustomMessagesComponent,
         CalendarLocalizedMessagesDirective,
@@ -83,7 +83,7 @@ CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         ViewListComponent,
         CalendarCommonModule,
         TemplatesModule] });
-CalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarModule, providers: [
+CalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarModule, providers: [
         CalendarDOMService,
         CenturyViewService,
         DecadeViewService,
@@ -99,7 +99,7 @@ CalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         EventsModule,
         ResizeSensorModule, CalendarCommonModule,
         TemplatesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2020/calendar/calendars.module.mjs

@@ -42,14 +42,14 @@ import * as i0 from "@angular/core";
  */
 export class CalendarsModule {
 }
-CalendarsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CalendarsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: CalendarsModule, imports: [CalendarModule,
+CalendarsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CalendarsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CalendarsModule, imports: [CalendarModule,
         MultiViewCalendarModule], exports: [CalendarModule,
         MultiViewCalendarModule] });
-CalendarsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarsModule, imports: [CalendarModule,
+CalendarsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarsModule, imports: [CalendarModule,
         MultiViewCalendarModule, CalendarModule,
         MultiViewCalendarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [

package/esm2020/calendar/footer.component.mjs

@@ -19,8 +19,8 @@ export class FooterComponent {
         this.getToday = getToday;
     }
 }
-FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FooterComponent, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Component });
-FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: FooterComponent, selector: "kendo-calendar-footer", inputs: { footerTemplateRef: "footerTemplateRef", activeViewValue: "activeViewValue", currentDate: "currentDate" }, host: { properties: { "class.k-calendar-footer": "this.showFooter" } }, ngImport: i0, template: `
+FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FooterComponent, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Component });
+FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FooterComponent, selector: "kendo-calendar-footer", inputs: { footerTemplateRef: "footerTemplateRef", activeViewValue: "activeViewValue", currentDate: "currentDate" }, host: { properties: { "class.k-calendar-footer": "this.showFooter" } }, ngImport: i0, template: `
     <ng-template *ngIf="footerTemplateRef; else defaultRendering"
         [ngTemplateOutlet]="footerTemplateRef"
         [ngTemplateOutletContext]="{ activeView: activeViewValue, date: currentDate }">
@@ -36,7 +36,7 @@ FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         </button>
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-calendar-footer',

package/esm2020/calendar/for.directive.mjs

@@ -84,9 +84,9 @@ export class KForOf {
         }
     }
 }
-KForOf.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: KForOf, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive });
-KForOf.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: KForOf, selector: "[kFor][kForOf]", inputs: { kForOf: "kForOf", kForTrackBy: "kForTrackBy", kForTemplate: "kForTemplate" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: KForOf, decorators: [{
+KForOf.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KForOf, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive });
+KForOf.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: KForOf, selector: "[kFor][kForOf]", inputs: { kForOf: "kForOf", kForTrackBy: "kForTrackBy", kForTemplate: "kForTemplate" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KForOf, decorators: [{
             type: Directive,
             args: [{ selector: '[kFor][kForOf]' }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.IterableDiffers }]; }, propDecorators: { kForOf: [{

package/esm2020/calendar/header.component.mjs

@@ -54,9 +54,6 @@ export class HeaderComponent {
         this.getComponentClass = true;
         this.subscriptions = new Subscription();
     }
-    get horizontalHostClass() {
-        return this.orientation === 'horizontal';
-    }
     get verticalHostClass() {
         return this.orientation === 'vertical';
     }
@@ -130,19 +127,24 @@ export class HeaderComponent {
         this.cdr.markForCheck();
     }
 }
-HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.BusViewService }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }, { token: i3.IntlService }, { token: i4.DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", titleTemplateRef: "titleTemplateRef", headerTemplateRef: "headerTemplateRef", isPrevDisabled: "isPrevDisabled", isNextDisabled: "isNextDisabled", showNavigationButtons: "showNavigationButtons", orientation: "orientation", id: "id" }, outputs: { todayButtonClick: "todayButtonClick", prevButtonClick: "prevButtonClick", nextButtonClick: "nextButtonClick" }, host: { properties: { "class.k-calendar-header": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass" } }, usesOnChanges: true, ngImport: i0, template: `
+HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.BusViewService }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }, { token: i3.IntlService }, { token: i4.DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", titleTemplateRef: "titleTemplateRef", headerTemplateRef: "headerTemplateRef", isPrevDisabled: "isPrevDisabled", isNextDisabled: "isNextDisabled", showNavigationButtons: "showNavigationButtons", orientation: "orientation", id: "id", size: "size" }, outputs: { todayButtonClick: "todayButtonClick", prevButtonClick: "prevButtonClick", nextButtonClick: "nextButtonClick" }, host: { properties: { "class.k-calendar-header": "this.getComponentClass", "class.k-vstack": "this.verticalHostClass" } }, usesOnChanges: true, ngImport: i0, template: `
     <ng-template *ngIf="headerTemplateRef; else defaultRendering" 
                 [ngTemplateOutlet]="headerTemplateRef"
                 [ngTemplateOutletContext]="{ title: title, activeView: activeViewValue, date: currentDate }">
     </ng-template>
     <ng-template #defaultRendering>
-        <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title"
+        <button 
+            kendoButton
+            class="k-calendar-title"
             role="button"
             [id]="id"
+            type="button"
+            fillMode="flat"
+            [size]="size"
+            themeColor="primary"
             tabindex="-1"
-            [class.k-disabled]="!navigate"
-            [attr.aria-disabled]="isDisabled()"
+            [disabled]="!navigate"
             [kendoEventsOutsideAngular]="{
                 click: handleNavigation
             }"
@@ -154,13 +156,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"
@@ -173,9 +176,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
                 }"
@@ -201,8 +209,8 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
             </button>
         </span>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, decorators: [{
+`, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-calendar-header',
@@ -212,12 +220,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
             }"
@@ -229,13 +242,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"
@@ -248,9 +262,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
                 }"
@@ -276,7 +295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             </button>
         </span>
     </ng-template>
-  `
+`
                 }]
         }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }, { type: i3.IntlService }, { type: i4.DisabledDatesService }]; }, propDecorators: { activeView: [{
                 type: Input
@@ -302,6 +321,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], id: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], todayButtonClick: [{
                 type: Output
             }], prevButtonClick: [{
@@ -311,9 +332,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"]