@progress/kendo-angular-dateinputs 5.2.4-dev.202110261444 → 5.3.1-dev.202112071202

package/dist/es/calendar/view-list.component.js

@@ -287,7 +287,7 @@ var ViewListComponent = /** @class */ (function () {
         Component({
             changeDetection: ChangeDetectionStrategy.OnPush,
             selector: 'kendo-calendar-viewlist',
-            template: "\n    <kendo-calendar-header\n        [currentDate]=\"activeDate\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [activeView]=\"activeView\"\n        [templateRef]=\"headerTitleTemplateRef\"\n        (todayButtonClick)=\"todayButtonClick.emit($event)\"\n    >\n    </kendo-calendar-header>\n    <table class=\"k-calendar-weekdays k-calendar-table\" style=\"table-layout: auto;\" *ngIf=\"isMonthView()\">\n        <thead class=\"k-calendar-thead\">\n            <tr class=\"k-calendar-tr\">\n                <th class=\"k-calendar-th\" *ngFor=\"let name of weekNames\" [style.width.%]=\"colWidth\">{{name}}</th>\n            </tr>\n        </thead>\n    </table>\n    <kendo-virtualization\n        [tabindex]=\"-1\"\n        [skip]=\"skip\"\n        [take]=\"take\"\n        [total]=\"total\"\n        [itemHeight]=\"viewHeight\"\n        [topOffset]=\"viewOffset\"\n        [bottomOffset]=\"bottomOffset\"\n        [scrollOffsetSize]=\"viewOffset\"\n        [maxScrollDifference]=\"viewHeight\"\n        (pageChange)=\"onPageChange($event)\"\n        (scrollChange)=\"scrollChange($event)\"\n        (activeIndexChange)=\"setActiveDate($event)\"\n        >\n        <table class=\"k-calendar-table\" #list>\n            <colgroup><col *ngFor=\"let _ of cols\" /></colgroup>\n\n            <tbody class=\"k-calendar-tbody\"\n                   *kFor=\"let date of dates\"\n                   kendoCalendarView\n                   role=\"rowgroup\"\n                   [activeView]=\"activeView\"\n                   [isActive]=\"isActive\"\n                   [min]=\"min\" [max]=\"max\"\n                   [cellUID]=\"cellUID\"\n                   [focusedDate]=\"focusedDate\"\n                   [selectedDates]=\"selectedDates\"\n                   [weekNumber]=\"weekNumber\"\n                   [templateRef]=\"cellTemplateRef\"\n                   [weekNumberTemplateRef]=\"weekNumberTemplateRef\"\n                   [viewDate]=\"date\"\n                   (cellClick)=\"cellClick.emit($event)\"\n                   (weekNumberCellClick)=\"weekNumberCellClick.emit($event)\"\n            ></tbody>\n        </table>\n    </kendo-virtualization>\n  "
+            template: "\n    <kendo-calendar-header\n        [currentDate]=\"activeDate\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [activeView]=\"activeView\"\n        [templateRef]=\"headerTitleTemplateRef\"\n        (todayButtonClick)=\"todayButtonClick.emit($event)\"\n    >\n    </kendo-calendar-header>\n    <table class=\"k-calendar-weekdays k-calendar-table\" style=\"table-layout: auto;\" *ngIf=\"isMonthView()\">\n        <thead class=\"k-calendar-thead\">\n            <tr class=\"k-calendar-tr\">\n                <th class=\"k-calendar-th\" *ngFor=\"let name of weekNames\" [style.width.%]=\"colWidth\">{{name}}</th>\n            </tr>\n        </thead>\n    </table>\n    <kendo-virtualization\n        [tabindex]=\"-1\"\n        [skip]=\"skip\"\n        [take]=\"take\"\n        [total]=\"total\"\n        [itemHeight]=\"viewHeight\"\n        [topOffset]=\"viewOffset\"\n        [bottomOffset]=\"bottomOffset\"\n        [scrollOffsetSize]=\"viewOffset\"\n        [maxScrollDifference]=\"viewHeight\"\n        (pageChange)=\"onPageChange($event)\"\n        (scrollChange)=\"scrollChange($event)\"\n        (activeIndexChange)=\"setActiveDate($event)\"\n        >\n        <table\n            #list\n            role=\"grid\"\n            class=\"k-calendar-table\"\n        >\n            <colgroup><col *ngFor=\"let _ of cols\" /></colgroup>\n\n            <tbody class=\"k-calendar-tbody\"\n                   *kFor=\"let date of dates\"\n                   kendoCalendarView\n                   role=\"rowgroup\"\n                   [activeView]=\"activeView\"\n                   [isActive]=\"isActive\"\n                   [min]=\"min\" [max]=\"max\"\n                   [cellUID]=\"cellUID\"\n                   [focusedDate]=\"focusedDate\"\n                   [selectedDates]=\"selectedDates\"\n                   [weekNumber]=\"weekNumber\"\n                   [templateRef]=\"cellTemplateRef\"\n                   [weekNumberTemplateRef]=\"weekNumberTemplateRef\"\n                   [viewDate]=\"date\"\n                   (cellClick)=\"cellClick.emit($event)\"\n                   (weekNumberCellClick)=\"weekNumberCellClick.emit($event)\"\n            ></tbody>\n        </table>\n    </kendo-virtualization>\n  "
         }),
         tslib_1.__metadata("design:paramtypes", [BusViewService,
             ChangeDetectorRef,

package/dist/es/datepicker/datepicker.component.js

@@ -27,7 +27,7 @@ import { HeaderTitleTemplateDirective } from '../calendar/templates/header-title
 import { NavigationItemTemplateDirective } from '../calendar/templates/navigation-item-template.directive';
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
-import { noop, isValidRange, setTime, isWindowAvailable } from '../util';
+import { noop, isValidRange, setTime, isWindowAvailable, isTabExitingCalendar } from '../util';
 import { TOUCH_ENABLED } from '../touch-enabled';
 import { requiresZoneOnBlur, currentFocusTarget } from '../common/utils';
 import { fromEvent } from 'rxjs';
@@ -120,11 +120,13 @@ var DatePickerComponent = /** @class */ (function () {
         /**
          * Specifies the smallest valid date
          * ([see example]({% slug dateranges_datepicker %})).
+         * By default, the `min` value is `1900-1-1`.
          */
         this.min = cloneDate(MIN_DATE);
         /**
          * Specifies the biggest valid date
          * ([see example]({% slug dateranges_datepicker %})).
+         * By default, the `max` value is `2099-12-31`.
          */
         this.max = cloneDate(MAX_DATE);
         /**
@@ -716,7 +718,7 @@ var DatePickerComponent = /** @class */ (function () {
      * @hidden
      */
     DatePickerComponent.prototype.handleKeydown = function (e) {
-        var altKey = e.altKey, keyCode = e.keyCode;
+        var altKey = e.altKey, shiftKey = e.shiftKey, keyCode = e.keyCode, target = e.target;
         if (keyCode === Keys.Escape) {
             this.show = false;
         }
@@ -728,7 +730,7 @@ var DatePickerComponent = /** @class */ (function () {
                 this.show = false;
             }
         }
-        if (keyCode === Keys.Tab && this.show && this.calendar.isActive) {
+        if (keyCode === Keys.Tab && this.show && this.calendar.isActive && isTabExitingCalendar(this.calendarType, target, shiftKey)) {
             this.input.focus();
             this.show = false;
         }

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635259300,
+    publishDate: 1638878303,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/es/util.js

@@ -340,4 +340,19 @@ export var millisecondDigitsInFormat = function (format) {
 export var millisecondStepFor = function (digits) {
     return Math.pow(10, 3 - digits);
 };
+/**
+ * @hidden
+ *
+ * Checks if a tab keydown would would move the focus outside of the calendar.
+ */
+export var isTabExitingCalendar = function (calendarType, focusedElement, shiftKey) {
+    if (!isPresent(focusedElement)) {
+        return false;
+    }
+    return calendarType === 'infinite' || ( // infinte calendar is always exited on first tab keydown
+    calendarType === 'classic' &&
+        (shiftKey && focusedElement.classList.contains('k-calendar')) || // exited on main calendar element focused and back-tab
+        (!shiftKey && focusedElement.classList.contains('k-next-view')) // exited on next button focused and regular tab
+    );
+};
 export { ɵ0, ɵ1, ɵ2 };

package/dist/es2015/calendar/calendar.component.d.ts

@@ -6,6 +6,7 @@ import { ChangeDetectorRef, EventEmitter, ElementRef, Renderer2, AfterViewChecke
 import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Day } from '@progress/kendo-date-math';
+import { MultiViewCalendarComponent } from './multiview-calendar.component';
 import { NavigationComponent } from './navigation.component';
 import { ViewListComponent } from './view-list.component';
 import { CalendarDOMService } from './services/dom.service';
@@ -188,6 +189,14 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
      * ([more information and example]({% slug overview_calendar %}#toc-events)).
      */
     activeViewChange: EventEmitter<CalendarView>;
+    /**
+     * Fires when navigating in the currently active view
+     * ([more information and example]({% slug events_calendar %})).
+     */
+    navigate: EventEmitter<{
+        activeView: CalendarView;
+        focusedDate: Date;
+    }>;
     /**
      * Fires when the active view date is changed
      * ([more information and example]({% slug overview_calendar %}#toc-events)).
@@ -265,6 +274,7 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
     navigationItemTemplateRef: NavigationItemTemplateDirective;
     navigationView: NavigationComponent;
     monthView: ViewListComponent;
+    multiViewCalendar: MultiViewCalendarComponent;
     isActive: boolean;
     cellUID: string;
     selectedDates: Date[];
@@ -286,7 +296,6 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
     readonly bottomViewEnum: CalendarViewEnum;
     readonly topViewEnum: CalendarViewEnum;
     readonly widgetId: string;
-    readonly widgetRole: string;
     readonly calendarTabIndex: number;
     readonly ariaDisabled: boolean;
     private domEvents;
@@ -295,6 +304,7 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
     private resolvedPromise;
     private destroyed;
     private localizationChangeSubscription;
+    private activeViewDate;
     constructor(bus: BusViewService, dom: CalendarDOMService, element: ElementRef, navigator: NavigationService, renderer: Renderer2, cdr: ChangeDetectorRef, ngZone: NgZone, injector: Injector, scrollSyncService: ScrollSyncService, disabledDatesService: DisabledDatesService, localization: LocalizationService, selectionService: SelectionService, pickerService?: PickerService);
     ngOnInit(): void;
     ngOnChanges(changes: any): void;
@@ -378,10 +388,25 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
      * @hidden
      */
     activeCellTemplate(): any;
+    /**
+     * @hidden
+     */
+    handleNavigate(event: {
+        focusedDate: Date;
+        activeView: CalendarView;
+    }): void;
+    /**
+     * @hidden
+     */
+    emitNavigate(focusedDate: Date): void;
     /**
      * @hidden
      */
     emitEvent(emitter: any, args: any): void;
+    /**
+     * @hidden
+     */
+    handleActiveDateChange(date: Date): void;
     /**
      * @hidden
      */
@@ -391,14 +416,20 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
      * @hidden
      */
     handleWeekNumberClick(dates: Date[]): void;
+    /**
+     * @hidden
+     */
+    handleBlur(args: any): void;
+    /**
+     * @hidden
+     */
+    handleFocus(): void;
     private setClasses;
     private verifyChanges;
     private verifyValue;
     private bindEvents;
     private emitBlur;
     private emitFocus;
-    private handleBlur;
-    private handleFocus;
     private handleComponentClick;
     private handleKeydown;
     private detectChanges;

package/dist/es2015/calendar/calendar.component.js

@@ -11,6 +11,7 @@ import { cloneDate, isEqual } from '@progress/kendo-date-math';
 import { hasObservers, KendoInput, guid, Keys } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
+import { MultiViewCalendarComponent } from './multiview-calendar.component';
 import { NavigationComponent } from './navigation.component';
 import { ViewListComponent } from './view-list.component';
 import { CalendarDOMService } from './services/dom.service';
@@ -168,6 +169,11 @@ let CalendarComponent = class CalendarComponent {
          * ([more information and example]({% slug overview_calendar %}#toc-events)).
          */
         this.activeViewChange = new EventEmitter();
+        /**
+         * Fires when navigating in the currently active view
+         * ([more information and example]({% slug events_calendar %})).
+         */
+        this.navigate = new EventEmitter();
         /**
          * Fires when the active view date is changed
          * ([more information and example]({% slug overview_calendar %}#toc-events)).
@@ -209,6 +215,14 @@ let CalendarComponent = class CalendarComponent {
      * > If the Calendar is out of the min or max range, it normalizes the defined `focusedDate`.
      */
     set focusedDate(focusedDate) {
+        if (this.activeViewDate && !isEqual(this._focusedDate, focusedDate)) {
+            const service = this.bus.service(this.activeViewEnum);
+            const lastDayInPeriod = service.lastDayOfPeriod(this.activeViewDate);
+            const isFocusedDateInRange = service.isInRange(focusedDate, this.activeViewDate, lastDayInPeriod);
+            if (!isFocusedDateInRange) {
+                this.emitNavigate(focusedDate);
+            }
+        }
         this._focusedDate = focusedDate || getToday();
         this.setAriaActivedescendant();
     }
@@ -359,14 +373,13 @@ let CalendarComponent = class CalendarComponent {
     get widgetId() {
         return this.id;
     }
-    get widgetRole() {
-        return 'grid';
-    }
     get calendarTabIndex() {
-        return this.disabled ? undefined : this.tabIndex;
+        // in Classic mode, the inner MultiViewCalendar is the focusable element
+        return this.disabled || this.type === 'classic' ? undefined : this.tabIndex;
     }
     get ariaDisabled() {
-        return this.disabled;
+        // in Classic mode, the inner MultiViewCalendar should handle the disabled class and aria attr
+        return this.type === 'classic' ? undefined : this.disabled;
     }
     ngOnInit() {
         this.dom.calculateHeights(this.element.nativeElement);
@@ -445,19 +458,23 @@ let CalendarComponent = class CalendarComponent {
      * ```
      */
     focus() {
-        if (!this.element) {
-            return;
+        const focusTarget = this.type === 'infinite' ?
+            this.element && this.element.nativeElement :
+            this.multiViewCalendar;
+        if (isPresent(focusTarget)) {
+            focusTarget.focus();
         }
-        this.element.nativeElement.focus();
     }
     /**
      * Blurs the Calendar component.
      */
     blur() {
-        if (!this.element) {
-            return;
+        const blurTarget = this.type === 'infinite' ?
+            this.element && this.element.nativeElement :
+            this.multiViewCalendar;
+        if (isPresent(blurTarget)) {
+            blurTarget.blur();
         }
-        this.element.nativeElement.blur();
     }
     /**
      * @hidden
@@ -583,6 +600,21 @@ let CalendarComponent = class CalendarComponent {
                 return null;
         }
     }
+    /**
+     * @hidden
+     */
+    handleNavigate(event) {
+        this.focusedDate = event.focusedDate;
+        this.activeView = event.activeView;
+        this.emitNavigate(this.focusedDate);
+    }
+    /**
+     * @hidden
+     */
+    emitNavigate(focusedDate) {
+        const activeView = CalendarViewEnum[this.activeViewEnum];
+        this.navigate.emit({ activeView, focusedDate });
+    }
     /**
      * @hidden
      */
@@ -593,6 +625,13 @@ let CalendarComponent = class CalendarComponent {
             });
         }
     }
+    /**
+     * @hidden
+     */
+    handleActiveDateChange(date) {
+        this.activeViewDate = date;
+        this.emitEvent(this.activeViewDateChange, date);
+    }
     /**
      * @hidden
      */
@@ -621,6 +660,38 @@ let CalendarComponent = class CalendarComponent {
             });
         });
     }
+    /**
+     * @hidden
+     */
+    handleBlur(args) {
+        if (this.element.nativeElement.contains(args.relatedTarget)) {
+            return;
+        }
+        this.isActive = false;
+        // the injector can get the NgControl instance of the parent component (for example, the DateTimePicker)
+        // and enters the zone for no reason because the parent component is still untouched
+        if (!this.pickerService && requiresZoneOnBlur(this.control)) {
+            this.ngZone.run(() => {
+                this.onControlTouched();
+                this.emitBlur(args);
+                this.cdr.markForCheck();
+            });
+        }
+        else {
+            this.emitBlur(args);
+            this.detectChanges();
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleFocus() {
+        this.isActive = true;
+        if (!NgZone.isInAngularZone()) {
+            this.detectChanges();
+        }
+        this.emitFocus();
+    }
     setClasses(element) {
         this.renderer.addClass(element, 'k-widget');
         this.renderer.addClass(element, 'k-calendar');
@@ -665,29 +736,6 @@ let CalendarComponent = class CalendarComponent {
             this.pickerService.onFocus.emit();
         }
     }
-    handleBlur(args) {
-        this.isActive = false;
-        // the injector can get the NgControl instance of the parent component (for example, the DateTimePicker)
-        // and enters the zone for no reason because the parent component is still untouched
-        if (!this.pickerService && requiresZoneOnBlur(this.control)) {
-            this.ngZone.run(() => {
-                this.onControlTouched();
-                this.emitBlur(args);
-                this.cdr.markForCheck();
-            });
-        }
-        else {
-            this.emitBlur(args);
-            this.detectChanges();
-        }
-    }
-    handleFocus() {
-        this.isActive = true;
-        if (!NgZone.isInAngularZone()) {
-            this.detectChanges();
-        }
-        this.emitFocus();
-    }
     handleComponentClick() {
         if (!this.isActive) {
             if (this.type === 'infinite' && this.monthView.isScrolled()) {
@@ -698,6 +746,10 @@ let CalendarComponent = class CalendarComponent {
         }
     }
     handleKeydown(args) {
+        const headerActive = this.type === 'classic' && this.multiViewCalendar.isHeaderActive;
+        if (headerActive) {
+            return;
+        }
         // reserve the alt + arrow key commands for the picker
         const arrowKeyPressed = [Keys.ArrowUp, Keys.ArrowRight, Keys.ArrowDown, Keys.ArrowLeft].indexOf(args.keyCode) !== -1;
         if (isPresent(this.pickerService) && arrowKeyPressed && args.altKey) {
@@ -724,7 +776,12 @@ let CalendarComponent = class CalendarComponent {
         }
     }
     setAriaActivedescendant() {
-        if (!isPresent(this.element)) {
+        // in Classic mode, the inner MultiViewCalendar handles the activedescendant
+        if (!isPresent(this.element) || (this.type === 'classic' && !this.element.nativeElement.hasAttribute('aria-activedescendant'))) {
+            return;
+        }
+        if (this.type === 'classic') {
+            this.renderer.removeAttribute(this.element.nativeElement, 'aria-activedescendant');
             return;
         }
         const focusedCellId = this.cellUID + this.focusedDate.getTime();
@@ -834,6 +891,10 @@ tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
 ], CalendarComponent.prototype, "activeViewChange", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], CalendarComponent.prototype, "navigate", void 0);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -922,16 +983,15 @@ tslib_1.__decorate([
     ViewChild(ViewListComponent, { static: false }),
     tslib_1.__metadata("design:type", ViewListComponent)
 ], CalendarComponent.prototype, "monthView", void 0);
+tslib_1.__decorate([
+    ViewChild(MultiViewCalendarComponent, { static: false }),
+    tslib_1.__metadata("design:type", MultiViewCalendarComponent)
+], CalendarComponent.prototype, "multiViewCalendar", void 0);
 tslib_1.__decorate([
     HostBinding('attr.id'),
     tslib_1.__metadata("design:type", String),
     tslib_1.__metadata("design:paramtypes", [])
 ], CalendarComponent.prototype, "widgetId", null);
-tslib_1.__decorate([
-    HostBinding('attr.role'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], CalendarComponent.prototype, "widgetRole", null);
 tslib_1.__decorate([
     HostBinding('attr.tabindex'),
     tslib_1.__metadata("design:type", Number),
@@ -1005,7 +1065,7 @@ CalendarComponent = tslib_1.__decorate([
             })"
             (cellClick)="handleCellClick($event)"
             (weekNumberCellClick)="handleWeekNumberClick($event)"
-            (activeDateChange)="emitEvent(activeViewDateChange, $event)"
+            (activeDateChange)="handleActiveDateChange($event)"
             (pageChange)="onPageChange()"
         >
         </kendo-calendar-viewlist>
@@ -1035,7 +1095,10 @@ CalendarComponent = tslib_1.__decorate([
             [value]="value"
             [disabledDates]="disabledDates"
             (activeViewChange)="handleActiveViewChange($event)"
+            (navigate)="handleNavigate($event)"
             (valueChange)="handleMultiViewCalendarValueChange($event, multiviewcalendar.focusedDate)"
+            (focus)="handleFocus()"
+            (blur)="handleBlur($event)"
         >
             <kendo-multiviewcalendar-messages
                 [today]="localization.get('today')"

package/dist/es2015/calendar/horizontal-view-list.component.js

@@ -332,6 +332,7 @@ HorizontalViewListComponent = tslib_1.__decorate([
         template: `
         <ng-template #tableTemplate let-date="date" let-class="className">
             <table
+                role="grid"
                 class="k-content k-calendar-content k-calendar-table"
                 [ngClass]="class"
             >

package/dist/es2015/calendar/models/view-service.interface.d.ts

@@ -27,4 +27,5 @@ export interface ViewService {
     viewDate(date: Date, max: Date, viewsCount: number): Date;
     dateRange(start: Date, end: Date): Date[];
     beginningOfPeriod(date: Date): Date;
+    lastDayOfPeriod(date: Date): Date;
 }

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

@@ -126,6 +126,10 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
      * @hidden
      */
     isActive: boolean;
+    /**
+     * @hidden
+     */
+    isHeaderActive: boolean;
     /**
      * Sets the dates of the MultiViewCalendar that will be disabled
      * ([see example]({% slug disabled_dates_multiviewcalendar %})).
@@ -187,6 +191,14 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
      * ([more information and example]({% slug overview_multiviewcalendar %}#toc-events)).
      */
     activeViewChange: EventEmitter<CalendarView>;
+    /**
+     * Fires when navigating in the currently active view
+     * ([more information and example]({% slug events_multiviewcalendar %})).
+     */
+    navigate: EventEmitter<{
+        activeView: CalendarView;
+        focusedDate: Date;
+    }>;
     /**
      * Fires when a view cell is entered
      * ([more information and example]({% slug overview_multiviewcalendar %}#toc-events)).
@@ -202,6 +214,10 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
      * ([more information and example]({% slug overview_multiviewcalendar %}#toc-events)).
      */
     valueChange: EventEmitter<any>;
+    /**
+     * @hidden
+     */
+    blurEvent: EventEmitter<any>;
     /**
      * @hidden
      */
@@ -258,6 +274,7 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
      * @hidden
      */
     headerTitleTemplateRef: HeaderTitleTemplateDirective;
+    headerElement: ElementRef<HTMLElement>;
     viewList: HorizontalViewListComponent;
     cellUID: string;
     isHovered: boolean;
@@ -285,14 +302,13 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
     readonly bottomViewEnum: CalendarViewEnum;
     readonly topViewEnum: CalendarViewEnum;
     readonly widgetId: string;
-    readonly widgetRole: string;
     readonly calendarTabIndex: number;
     readonly ariaDisabled: boolean;
     readonly ariaActivedescendant: string;
     /**
      * @hidden
      */
-    handleBlur(): void;
+    handleFocusout(event: FocusEvent): void;
     /**
      * @hidden
      */
@@ -342,6 +358,10 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
      * Blurs the Calendar component.
      */
     blur(): void;
+    /**
+     * @hidden
+     */
+    handleHeaderFocus(): void;
     /**
      * @hidden
      */
@@ -349,6 +369,13 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
         selectedDates: Date[];
         focusedDate: Date;
     }): void;
+    /**
+     * @hidden
+     */
+    handleTodayButtonClick(args: {
+        selectedDates: Date[];
+        focusedDate: Date;
+    }): void;
     /**
      * @hidden
      */
@@ -386,7 +413,11 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
     /**
      * @hidden
      */
-    navigate(action: Action): void;
+    navigateView(action: Action): void;
+    /**
+     * @hidden
+     */
+    emitNavigate(focusedDate: Date): void;
     /**
      * @hidden
      */