@progress/kendo-angular-dateinputs 7.1.3-dev.202210121001 → 7.1.3-dev.202210260703

package/datetimepicker/datetimepicker.component.d.ts

@@ -61,6 +61,10 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * @hidden
      */
     get input(): DateInputComponent;
+    /**
+     * @hidden
+     */
+    get inputElement(): HTMLElement;
     /**
      * @hidden
      */
@@ -118,10 +122,6 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      */
     set popupSettings(settings: PopupSettings);
     get popupSettings(): PopupSettings;
-    /**
-     * @hidden
-     */
-    focusableId: string;
     /**
      * Sets the title of the input element of the DateTimePicker.
      */
@@ -315,10 +315,6 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * The inactive tab component gets disabled and becomes inaccessible on tab click.
      */
     get disableCalendar(): boolean;
-    /**
-     * @hidden
-     */
-    get inputRole(): string;
     /**
      * @hidden
      *
@@ -391,6 +387,7 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
     private get appendTo();
     private container;
     private popupTemplate;
+    private get popupUID();
     private popupRef;
     private _popupSettings;
     private _value;
@@ -566,5 +563,5 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
     private handleDateCompletenessChange;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "kendo-datetimepicker", ["kendo-datetimepicker"], { "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "tabindex": "tabindex"; "disabledDates": "disabledDates"; "popupSettings": "popupSettings"; "focusableId": "focusableId"; "title": "title"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "cancelButton": "cancelButton"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "focusedDate": "focusedDate"; "calendarType": "calendarType"; "animateCalendarNavigation": "animateCalendarNavigation"; "weekNumber": "weekNumber"; "min": "min"; "max": "max"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "incompleteDateValidation": "incompleteDateValidation"; "defaultTab": "defaultTab"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "kendo-datetimepicker", ["kendo-datetimepicker"], { "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "tabindex": "tabindex"; "disabledDates": "disabledDates"; "popupSettings": "popupSettings"; "title": "title"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "cancelButton": "cancelButton"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "focusedDate": "focusedDate"; "calendarType": "calendarType"; "animateCalendarNavigation": "animateCalendarNavigation"; "weekNumber": "weekNumber"; "min": "min"; "max": "max"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "incompleteDateValidation": "incompleteDateValidation"; "defaultTab": "defaultTab"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], never>;
 }

package/esm2015/calendar/calendar.component.js

@@ -31,7 +31,7 @@ import { maxValidator } from '../validators/max.validator';
 import { MIN_DATE, MAX_DATE } from '../defaults';
 import { areDatesEqual, dateInRange, getToday, hasExistingValue, last, noop } from '../util';
 import { closest } from '../common/dom-queries';
-import { requiresZoneOnBlur, preventDefault, isPresent } from '../common/utils';
+import { requiresZoneOnBlur, preventDefault, isPresent, isArrowWithShiftPressed, selectors, attributeNames } from '../common/utils';
 import { from as fromPromise } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/bus-view.service";
@@ -107,10 +107,6 @@ export class CalendarComponent {
         this.localization = localization;
         this.selectionService = selectionService;
         this.pickerService = pickerService;
-        /**
-         * @hidden
-         */
-        this.id = guid();
         /**
          * Determines whether the built-in min or max validators are enforced when validating a form.
          */
@@ -213,6 +209,7 @@ export class CalendarComponent {
         this.resolvedPromise = Promise.resolve(null);
         this.destroyed = false;
         validatePackage(packageMetadata);
+        this.id = `kendo-calendarid-${this.bus.calendarId}`;
         this.setClasses(element.nativeElement);
         if (this.pickerService) {
             this.pickerService.calendar = this;
@@ -237,6 +234,12 @@ export class CalendarComponent {
         this._focusedDate = focusedDate || getToday();
         this.setAriaActivedescendant();
     }
+    /**
+     * @hidden
+     */
+    get headerId() {
+        return this.id + '-header';
+    }
     get focusedDate() {
         return this._focusedDate;
     }
@@ -432,10 +435,6 @@ export class CalendarComponent {
     get widgetId() {
         return this.id;
     }
-    get calendarTabIndex() {
-        // in Classic mode, the inner MultiViewCalendar is the focusable element
-        return this.disabled || this.type === 'classic' ? undefined : this.tabIndex;
-    }
     get ariaDisabled() {
         // in Classic mode, the inner MultiViewCalendar should handle the disabled class and aria attr
         return this.type === 'classic' ? undefined : this.disabled;
@@ -506,7 +505,7 @@ export class CalendarComponent {
         this.cdr.detectChanges();
     }
     /**
-     * Focuses the host element of the Calendar.
+     * Focuses the Calendar by making the table.k-calendar-table element active.
      *
      * @example
      * ```ts
@@ -521,19 +520,18 @@ export class CalendarComponent {
      * ```
      */
     focus() {
-        const focusTarget = this.type === 'infinite' ?
-            this.element && this.element.nativeElement :
-            this.multiViewCalendar;
-        if (isPresent(focusTarget)) {
-            focusTarget.focus();
-        }
+        var _a, _b, _c;
+        this.currentlyFocusedElement = this.type === 'infinite' ?
+            (_a = this.element) === null || _a === void 0 ? void 0 : _a.nativeElement.querySelector(selectors.infiniteCalendarTable) :
+            this.currentlyFocusedElement = (_b = this.element) === null || _b === void 0 ? void 0 : _b.nativeElement.querySelector(selectors.multiViewCalendarTable);
+        (_c = this.currentlyFocusedElement) === null || _c === void 0 ? void 0 : _c.focus();
     }
     /**
      * Blurs the Calendar component.
      */
     blur() {
         const blurTarget = this.type === 'infinite' ?
-            this.element && this.element.nativeElement :
+            this.currentlyFocusedElement :
             this.multiViewCalendar;
         if (isPresent(blurTarget)) {
             blurTarget.blur();
@@ -710,6 +708,8 @@ export class CalendarComponent {
      * @hidden
      */
     handleCellClick({ date, modifiers }) {
+        this.focus();
+        this.selectionService.lastClicked = date;
         this.performSelection(date, modifiers);
     }
     /**
@@ -733,6 +733,7 @@ export class CalendarComponent {
         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
@@ -821,29 +822,46 @@ export 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) {
-            return;
-        }
-        // Prevent form from submitting on enter if used in datepicker (infinite view)
-        if (isPresent(this.pickerService) && args.keyCode === Keys.Enter) {
-            args.preventDefault();
-        }
-        const candidate = dateInRange(this.navigator.move(this.focusedDate, this.navigator.action(args), this.activeViewEnum), this.min, this.max);
-        if (!isEqual(this.focusedDate, candidate)) {
-            this.focusedDate = candidate;
-            this.detectChanges();
-            args.preventDefault();
-        }
-        if (args.keyCode === Keys.Enter) {
-            this.performSelection(this.focusedDate, args);
+        if (this.type === 'infinite') {
+            // reserve the alt + arrow key commands for the picker
+            const ctrlKey = args.ctrlKey || args.metaKey;
+            const arrowKeyPressed = [Keys.ArrowUp, Keys.ArrowRight, Keys.ArrowDown, Keys.ArrowLeft].indexOf(args.keyCode) !== -1;
+            const reserveKeyCommandsForPicker = isPresent(this.pickerService) && arrowKeyPressed && args.altKey;
+            if (reserveKeyCommandsForPicker) {
+                return;
+            }
+            if (ctrlKey && arrowKeyPressed) {
+                args.preventDefault();
+            }
+            // Prevent form from submitting on enter if used in datepicker (infinite view)
+            const preventSubmitInDatePicker = isPresent(this.pickerService) && args.keyCode === Keys.Enter;
+            if (preventSubmitInDatePicker) {
+                args.preventDefault();
+            }
+            const candidate = dateInRange(this.navigator.move(this.focusedDate, this.navigator.action(args), this.activeViewEnum), this.min, this.max);
+            if (!isEqual(this.focusedDate, candidate)) {
+                this.focusedDate = candidate;
+                this.detectChanges();
+                args.preventDefault();
+            }
+            if (args.keyCode === Keys.Enter) {
+                this.selectionService.lastClicked = this.focusedDate;
+                this.performSelection(this.focusedDate, args);
+            }
+            if (args.keyCode === Keys.KeyT) {
+                this.focusToday();
+            }
+            if (isArrowWithShiftPressed(args)) {
+                args.anyArrow = true;
+                this.performSelection(this.focusedDate, args);
+            }
         }
     }
+    focusToday() {
+        this.focusedDate = getToday();
+        this.bus.moveToBottom(this.activeViewEnum);
+        this.cdr.detectChanges();
+    }
     detectChanges() {
         if (!this.destroyed) {
             this.cdr.detectChanges();
@@ -855,16 +873,19 @@ export class CalendarComponent {
         }
     }
     setAriaActivedescendant() {
+        var _a;
         // in Classic mode, the inner MultiViewCalendar handles the activedescendant
-        if (!isPresent(this.element) || (this.type === 'classic' && !this.element.nativeElement.hasAttribute('aria-activedescendant'))) {
+        const infiniteCalendarTable = (_a = this.element.nativeElement) === null || _a === void 0 ? void 0 : _a.querySelector(selectors.infiniteCalendarTable);
+        const activedescendantHandledByInnerMultiViewCalendar = !isPresent(infiniteCalendarTable) || (this.type === 'classic' && !infiniteCalendarTable.hasAttribute(attributeNames.ariaActiveDescendant));
+        if (activedescendantHandledByInnerMultiViewCalendar) {
             return;
         }
         if (this.type === 'classic') {
-            this.renderer.removeAttribute(this.element.nativeElement, 'aria-activedescendant');
+            this.renderer.removeAttribute(infiniteCalendarTable, attributeNames.ariaActiveDescendant);
             return;
         }
         const focusedCellId = this.cellUID + this.focusedDate.getTime();
-        this.renderer.setAttribute(this.element.nativeElement, 'aria-activedescendant', focusedCellId);
+        this.renderer.setAttribute(infiniteCalendarTable, attributeNames.ariaActiveDescendant, focusedCellId);
     }
     parseSelectionToValue(selection) {
         selection = selection || [];
@@ -887,7 +908,7 @@ export class CalendarComponent {
     }
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: CalendarComponent, selector: "kendo-calendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.tabindex": "this.calendarTabIndex", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CalendarComponent, selector: "kendo-calendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", 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,
@@ -911,6 +932,9 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 
         i18n-nextButtonTitle="kendo.calendar.nextButtonTitle|The title of the next button in the Classic calendar"
         nextButtonTitle="Navigate to next view"
+
+        i18n-parentViewButtonTitle="kendo.calendar.parentViewButtonTitle|The title of the parent view button in the calendar header"
+        parentViewButtonTitle="Navigate to parent view"
     >
     </ng-container>
     <ng-container *ngIf="type === 'infinite'">
@@ -928,6 +952,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         <kendo-calendar-viewlist
             [activeView]="activeViewEnum"
             [isActive]="isActive"
+            [id]="headerId"
             [cellTemplateRef]="activeCellTemplate()?.templateRef"
             [headerTitleTemplateRef]="headerTitleTemplateRef?.templateRef"
             [weekNumberTemplateRef]="weekNumberTemplateRef?.templateRef"
@@ -937,6 +962,8 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [focusedDate]="focusedDate"
             [weekNumber]="weekNumber"
             [selectedDates]="selectedDates"
+            [tabIndex]="tabIndex"
+            [disabled]="disabled"
             (todayButtonClick)="handleDateChange({
                 selectedDates: [$event],
                 focusedDate: $event
@@ -945,6 +972,8 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             (weekNumberCellClick)="handleWeekNumberClick($event)"
             (activeDateChange)="handleActiveDateChange($event)"
             (pageChange)="onPageChange()"
+            (focusCalendar)="handleFocus()"
+            (blurCalendar)="handleBlur($event)"
         >
         </kendo-calendar-viewlist>
         <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
@@ -955,7 +984,9 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [views]="1"
             [min]="min"
             [max]="max"
+            [id]="id"
             [isActive]="isActive"
+            [tabIndex]="tabIndex"
             [activeView]="activeView"
             [bottomView]="bottomView"
             [topView]="topView"
@@ -975,7 +1006,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             (activeViewChange)="handleActiveViewChange($event)"
             (navigate)="handleNavigate($event)"
             (valueChange)="handleMultiViewCalendarValueChange($event, multiviewcalendar.focusedDate)"
-            (focus)="handleFocus()"
+            (focusCalendar)="handleFocus()"
             (blur)="handleBlur($event)"
             (keydown)="handleMultiViewCalendarKeydown($event)"
         >
@@ -983,11 +1014,12 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 [today]="localization.get('today')"
                 [prevButtonTitle]="localization.get('prevButtonTitle')"
                 [nextButtonTitle]="localization.get('nextButtonTitle')"
+                [parentViewButtonTitle]="localization.get('parentViewButtonTitle')"
             >
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
     </ng-container>
-  `, isInline: true, components: [{ type: i9.NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: i10.ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange"] }, { type: i11.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i12.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur"], exportAs: ["kendo-multiviewcalendar"] }, { type: i13.MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: i14.CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i9.NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: i10.ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { type: i11.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i12.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }, { type: i13.MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: i14.CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1019,6 +1051,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
         i18n-nextButtonTitle="kendo.calendar.nextButtonTitle|The title of the next button in the Classic calendar"
         nextButtonTitle="Navigate to next view"
+
+        i18n-parentViewButtonTitle="kendo.calendar.parentViewButtonTitle|The title of the parent view button in the calendar header"
+        parentViewButtonTitle="Navigate to parent view"
     >
     </ng-container>
     <ng-container *ngIf="type === 'infinite'">
@@ -1036,6 +1071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <kendo-calendar-viewlist
             [activeView]="activeViewEnum"
             [isActive]="isActive"
+            [id]="headerId"
             [cellTemplateRef]="activeCellTemplate()?.templateRef"
             [headerTitleTemplateRef]="headerTitleTemplateRef?.templateRef"
             [weekNumberTemplateRef]="weekNumberTemplateRef?.templateRef"
@@ -1045,6 +1081,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [focusedDate]="focusedDate"
             [weekNumber]="weekNumber"
             [selectedDates]="selectedDates"
+            [tabIndex]="tabIndex"
+            [disabled]="disabled"
             (todayButtonClick)="handleDateChange({
                 selectedDates: [$event],
                 focusedDate: $event
@@ -1053,6 +1091,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             (weekNumberCellClick)="handleWeekNumberClick($event)"
             (activeDateChange)="handleActiveDateChange($event)"
             (pageChange)="onPageChange()"
+            (focusCalendar)="handleFocus()"
+            (blurCalendar)="handleBlur($event)"
         >
         </kendo-calendar-viewlist>
         <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
@@ -1063,7 +1103,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [views]="1"
             [min]="min"
             [max]="max"
+            [id]="id"
             [isActive]="isActive"
+            [tabIndex]="tabIndex"
             [activeView]="activeView"
             [bottomView]="bottomView"
             [topView]="topView"
@@ -1083,7 +1125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             (activeViewChange)="handleActiveViewChange($event)"
             (navigate)="handleNavigate($event)"
             (valueChange)="handleMultiViewCalendarValueChange($event, multiviewcalendar.focusedDate)"
-            (focus)="handleFocus()"
+            (focusCalendar)="handleFocus()"
             (blur)="handleBlur($event)"
             (keydown)="handleMultiViewCalendarKeydown($event)"
         >
@@ -1091,6 +1133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [today]="localization.get('today')"
                 [prevButtonTitle]="localization.get('prevButtonTitle')"
                 [nextButtonTitle]="localization.get('nextButtonTitle')"
+                [parentViewButtonTitle]="localization.get('parentViewButtonTitle')"
             >
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
@@ -1206,9 +1249,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], widgetId: [{
                 type: HostBinding,
                 args: ['attr.id']
-            }], calendarTabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
             }], ariaDisabled: [{
                 type: HostBinding,
                 args: ['attr.aria-disabled']

package/esm2015/calendar/header.component.js

@@ -58,6 +58,7 @@ export class HeaderComponent {
         }
         this.activeViewValue = CalendarViewEnum[this.activeView];
         this.todayMessage = this.localization.get('today');
+        this.parentViewButtonTitle = this.localization.get('parentViewButtonTitle');
         this.setTodayAvailability();
         this.navigate = this.bus.canMoveUp(this.activeView);
         this.title = this.getTitle();
@@ -78,6 +79,9 @@ export class HeaderComponent {
         }
         this.bus.moveUp(this.activeView);
     }
+    isDisabled() {
+        return this.navigate ? null : '';
+    }
     intlChange() {
         if (this.currentDate && this.bus.service(this.activeView)) {
             this.title = this.getTitle();
@@ -87,6 +91,7 @@ export class HeaderComponent {
     l10nChange() {
         this.prevButtonTitle = this.localization.get('prevButtonTitle');
         this.nextButtonTitle = this.localization.get('nextButtonTitle');
+        this.parentViewButtonTitle = this.localization.get('parentViewButtonTitle');
         this.todayMessage = this.localization.get('today');
         this.cdr.markForCheck();
     }
@@ -112,11 +117,17 @@ export class HeaderComponent {
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", templateRef: "templateRef", isPrevDisabled: "isPrevDisabled", isNextDisabled: "isNextDisabled", showNavigationButtons: "showNavigationButtons", orientation: "orientation" }, outputs: { todayButtonClick: "todayButtonClick", prevButtonClick: "prevButtonClick", nextButtonClick: "nextButtonClick" }, host: { properties: { "class.k-calendar-header": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass" } }, usesOnChanges: true, ngImport: i0, template: `
-    <span class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title" [class.k-disabled]="!navigate"
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", templateRef: "templateRef", isPrevDisabled: "isPrevDisabled", isNextDisabled: "isNextDisabled", showNavigationButtons: "showNavigationButtons", orientation: "orientation", id: "id" }, outputs: { todayButtonClick: "todayButtonClick", prevButtonClick: "prevButtonClick", nextButtonClick: "nextButtonClick" }, host: { properties: { "class.k-calendar-header": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass" } }, usesOnChanges: true, ngImport: i0, template: `
+    <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title"
+        role="button"
+        [id]="id"
+        tabindex="-1"
+        [class.k-disabled]="!navigate"
+        [attr.aria-disabled]="isDisabled()"
         [kendoEventsOutsideAngular]="{
             click: handleNavigation
         }"
+        [title]="parentViewButtonTitle"
         [scope]="this">
         <ng-template [ngIf]="!templateRef">{{title}}</ng-template>
         <ng-template
@@ -130,6 +141,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         <button
             *ngIf="showNavigationButtons"
             class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-prev"
+            tabindex="-1"
             type="button"
             [attr.aria-disabled]="isPrevDisabled"
             [disabled]="isPrevDisabled"
@@ -140,17 +152,20 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         </button>
         <span
             class="k-today k-calendar-nav-today"
+            tabindex="-1"
             [class.k-disabled]="!todayAvailable"
             [kendoEventsOutsideAngular]="{
                 click: handleTodayClick
             }"
             [scope]="this"
+            role="link"
         >
             {{ todayMessage }}
         </span>
         <button
             *ngIf="showNavigationButtons"
             class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-next"
+            tabindex="-1"
             type="button"
             [attr.aria-disabled]="isNextDisabled"
             [disabled]="isNextDisabled"
@@ -166,10 +181,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             args: [{
                     selector: 'kendo-calendar-header',
                     template: `
-    <span class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title" [class.k-disabled]="!navigate"
+    <span class="k-button k-nav-fast k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title"
+        role="button"
+        [id]="id"
+        tabindex="-1"
+        [class.k-disabled]="!navigate"
+        [attr.aria-disabled]="isDisabled()"
         [kendoEventsOutsideAngular]="{
             click: handleNavigation
         }"
+        [title]="parentViewButtonTitle"
         [scope]="this">
         <ng-template [ngIf]="!templateRef">{{title}}</ng-template>
         <ng-template
@@ -183,6 +204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <button
             *ngIf="showNavigationButtons"
             class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-prev"
+            tabindex="-1"
             type="button"
             [attr.aria-disabled]="isPrevDisabled"
             [disabled]="isPrevDisabled"
@@ -193,17 +215,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </button>
         <span
             class="k-today k-calendar-nav-today"
+            tabindex="-1"
             [class.k-disabled]="!todayAvailable"
             [kendoEventsOutsideAngular]="{
                 click: handleTodayClick
             }"
             [scope]="this"
+            role="link"
         >
             {{ todayMessage }}
         </span>
         <button
             *ngIf="showNavigationButtons"
             class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-next"
+            tabindex="-1"
             type="button"
             [attr.aria-disabled]="isNextDisabled"
             [disabled]="isNextDisabled"
@@ -235,6 +260,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], orientation: [{
                 type: Input
+            }], id: [{
+                type: Input
             }], todayButtonClick: [{
                 type: Output
             }], prevButtonClick: [{