@progress/kendo-angular-dateinputs 7.1.4 → 7.1.5-dev.202211011455

package/calendar/calendar.component.d.ts

@@ -73,6 +73,10 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
      * @hidden
      */
     id: string;
+    /**
+     * @hidden
+     */
+    get popupId(): string;
     /**
      * Sets or gets the `focusedDate` property of the Calendar and
      * defines the focused date of the component
@@ -215,6 +219,14 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
      * Applies to the [`infinite`]({% slug api_dateinputs_calendarcomponent %}#toc-type) Calendar only.
      */
     activeViewDateChange: EventEmitter<Date>;
+    /**
+     * Fires each time the Calendar gets blurred.
+     */
+    onBlur: EventEmitter<any>;
+    /**
+     * Fires each time the Calendar gets focused.
+     */
+    onFocus: EventEmitter<any>;
     /**
      * Fires when the value is changed
      * ([more information and example]({% slug overview_calendar %}#toc-events)).
@@ -522,5 +534,5 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
     private parseSelectionToValue;
     private performSelection;
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarComponent, [null, null, null, null, null, null, null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent, "kendo-calendar", ["kendo-calendar"], { "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"; "monthCellTemplateRef": "monthCellTemplate"; "yearCellTemplateRef": "yearCellTemplate"; "decadeCellTemplateRef": "decadeCellTemplate"; "centuryCellTemplateRef": "centuryCellTemplate"; "weekNumberTemplateRef": "weekNumberTemplate"; "headerTitleTemplateRef": "headerTitleTemplate"; "navigationItemTemplateRef": "navigationItemTemplate"; }, { "activeViewChange": "activeViewChange"; "navigate": "navigate"; "activeViewDateChange": "activeViewDateChange"; "valueChange": "valueChange"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent, "kendo-calendar", ["kendo-calendar"], { "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"; "monthCellTemplateRef": "monthCellTemplate"; "yearCellTemplateRef": "yearCellTemplate"; "decadeCellTemplateRef": "decadeCellTemplate"; "centuryCellTemplateRef": "centuryCellTemplate"; "weekNumberTemplateRef": "weekNumberTemplate"; "headerTitleTemplateRef": "headerTitleTemplate"; "navigationItemTemplateRef": "navigationItemTemplate"; }, { "activeViewChange": "activeViewChange"; "navigate": "navigate"; "activeViewDateChange": "activeViewDateChange"; "onBlur": "blur"; "onFocus": "focus"; "valueChange": "valueChange"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], never>;
 }

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

@@ -23,10 +23,8 @@ export declare class HorizontalViewListComponent implements OnChanges, AfterView
     private cdr;
     private element;
     private renderer;
-    /**
-     * @hidden
-     */
-    handleFocus(): void;
+    handleMultiViewCalendarFocus(): void;
+    handleMultiViewCalendarBlur(event: any): void;
     cellTemplateRef: TemplateRef<any>;
     weekNumberTemplateRef: TemplateRef<any>;
     activeRangeEnd: SelectionRangeEnd;
@@ -63,6 +61,7 @@ export declare class HorizontalViewListComponent implements OnChanges, AfterView
     get getComponentYearClass(): boolean;
     get getComponentDecadeClass(): boolean;
     get getComponentCenturyClass(): boolean;
+    get role(): string;
     get getActiveDescendant(): string;
     get getTabIndex(): number;
     service: ViewService;
@@ -85,6 +84,8 @@ export declare class HorizontalViewListComponent implements OnChanges, AfterView
     isMonthView(): boolean;
     getCaptionTitle(date: Date): string;
     getCaptionClass(): string;
+    handleClassicCalendarFocus(): void;
+    handleClassicCalendarBlur(event: any): void;
     animateView(action: Action): void;
     navigate(action: Action): Date;
     canNavigate(action: Action): boolean;

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

@@ -239,9 +239,13 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
      */
     valueChange: EventEmitter<any>;
     /**
-     * @hidden
+     * Fires each time the MultiViewCalendar gets blurred.
      */
     blurEvent: EventEmitter<any>;
+    /**
+     * Fires each time the MultiViewCalendar gets focused.
+     */
+    focusEvent: EventEmitter<any>;
     /**
      * @hidden
      */
@@ -519,5 +523,5 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
     private parseSelectionToValue;
     private performSelection;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiViewCalendarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MultiViewCalendarComponent, "kendo-multiviewcalendar", ["kendo-multiviewcalendar"], { "id": "id"; "focusedDate": "focusedDate"; "min": "min"; "max": "max"; "rangeValidation": "rangeValidation"; "disabledDatesRangeValidation": "disabledDatesRangeValidation"; "selection": "selection"; "value": "value"; "disabled": "disabled"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "isActive": "isActive"; "disabledDates": "disabledDates"; "activeView": "activeView"; "bottomView": "bottomView"; "topView": "topView"; "showViewHeader": "showViewHeader"; "animateNavigation": "animateNavigation"; "weekNumber": "weekNumber"; "activeRangeEnd": "activeRangeEnd"; "selectionRange": "selectionRange"; "views": "views"; "orientation": "orientation"; "cellTemplateRef": "cellTemplate"; "monthCellTemplateRef": "monthCellTemplate"; "yearCellTemplateRef": "yearCellTemplate"; "decadeCellTemplateRef": "decadeCellTemplate"; "centuryCellTemplateRef": "centuryCellTemplate"; "weekNumberTemplateRef": "weekNumberTemplate"; "headerTitleTemplateRef": "headerTitleTemplate"; }, { "activeViewChange": "activeViewChange"; "navigate": "navigate"; "cellEnter": "cellEnter"; "cellLeave": "cellLeave"; "valueChange": "valueChange"; "blurEvent": "blur"; "focusCalendar": "focusCalendar"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiViewCalendarComponent, "kendo-multiviewcalendar", ["kendo-multiviewcalendar"], { "id": "id"; "focusedDate": "focusedDate"; "min": "min"; "max": "max"; "rangeValidation": "rangeValidation"; "disabledDatesRangeValidation": "disabledDatesRangeValidation"; "selection": "selection"; "value": "value"; "disabled": "disabled"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "isActive": "isActive"; "disabledDates": "disabledDates"; "activeView": "activeView"; "bottomView": "bottomView"; "topView": "topView"; "showViewHeader": "showViewHeader"; "animateNavigation": "animateNavigation"; "weekNumber": "weekNumber"; "activeRangeEnd": "activeRangeEnd"; "selectionRange": "selectionRange"; "views": "views"; "orientation": "orientation"; "cellTemplateRef": "cellTemplate"; "monthCellTemplateRef": "monthCellTemplate"; "yearCellTemplateRef": "yearCellTemplate"; "decadeCellTemplateRef": "decadeCellTemplate"; "centuryCellTemplateRef": "centuryCellTemplate"; "weekNumberTemplateRef": "weekNumberTemplate"; "headerTitleTemplateRef": "headerTitleTemplate"; }, { "activeViewChange": "activeViewChange"; "navigate": "navigate"; "cellEnter": "cellEnter"; "cellLeave": "cellLeave"; "valueChange": "valueChange"; "blurEvent": "blur"; "focusEvent": "focus"; "focusCalendar": "focusCalendar"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], never>;
 }

package/dateinput/dateinput.component.d.ts

@@ -15,6 +15,7 @@ import { DateInputSize } from '../common/models/size';
 import { DateInputRounded } from '../common/models/rounded';
 import { DateInputFillMode } from '../common/models/fillmode';
 import * as i0 from "@angular/core";
+declare type DatePickerType = 'daterangestart' | 'daterangeend' | 'datepicker' | 'datetimepicker' | 'timepicker';
 /**
  * Represents the [Kendo UI DateInput component for Angular]({% slug overview_dateinput %}#toc-basic-usage).
  */
@@ -30,11 +31,12 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
     /**
      * @hidden
      */
+    set focusableId(_focusableId: string);
     get focusableId(): string;
     /**
      * @hidden
      */
-    pickerType: string;
+    set pickerType(_pickerType: DatePickerType);
     /**
      * Sets or gets the `disabled` property of the DateInput and
      * determines whether the component is active
@@ -213,7 +215,7 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
     /**
      * @hidden
      */
-    hasPopup: boolean;
+    hasPopup: string;
     /**
      * Sets the size of the component.
      *
@@ -351,6 +353,7 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
     private incompleteValidator;
     private _value;
     private _active;
+    private _focusableId;
     private kendoDate;
     private paste;
     private domEvents;
@@ -499,5 +502,6 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
     private setSpinnerFill;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateInputComponent, [null, null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateInputComponent, "kendo-dateinput", ["kendo-dateinput"], { "pickerType": "pickerType"; "disabled": "disabled"; "readonly": "readonly"; "title": "title"; "tabindex": "tabindex"; "role": "role"; "ariaReadOnly": "ariaReadOnly"; "tabIndex": "tabIndex"; "format": "format"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "max": "max"; "min": "min"; "rangeValidation": "rangeValidation"; "autoCorrect": "autoCorrect"; "incompleteDateValidation": "incompleteDateValidation"; "twoDigitYearMax": "twoDigitYearMax"; "value": "value"; "spinners": "spinners"; "isPopupOpen": "isPopupOpen"; "hasPopup": "hasPopup"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "valueUpdate": "valueUpdate"; "onFocus": "focus"; "onBlur": "blur"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateInputComponent, "kendo-dateinput", ["kendo-dateinput"], { "focusableId": "focusableId"; "pickerType": "pickerType"; "disabled": "disabled"; "readonly": "readonly"; "title": "title"; "tabindex": "tabindex"; "role": "role"; "ariaReadOnly": "ariaReadOnly"; "tabIndex": "tabIndex"; "format": "format"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "max": "max"; "min": "min"; "rangeValidation": "rangeValidation"; "autoCorrect": "autoCorrect"; "incompleteDateValidation": "incompleteDateValidation"; "twoDigitYearMax": "twoDigitYearMax"; "value": "value"; "spinners": "spinners"; "isPopupOpen": "isPopupOpen"; "hasPopup": "hasPopup"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "valueUpdate": "valueUpdate"; "onFocus": "focus"; "onBlur": "blur"; }, never, never>;
 }
+export {};

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

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Renderer2 } from '@angular/core';
+import { Renderer2, ElementRef } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { DateInputComponent } from '../dateinput/dateinput.component';
 import type { DateRangePopupComponent } from './date-range-popup.component';
@@ -15,8 +15,6 @@ import * as i0 from "@angular/core";
  */
 export declare class DateRangeService {
     private renderer?;
-    /** @hidden */
-    private focusedCellChange?;
     /**
      * An Observable instance that notifies when the `activeRangeEnd` state is changed.
      */
@@ -65,6 +63,16 @@ export declare class DateRangeService {
      * Gets the current `selectionRange` value.
      */
     get selectionRange(): SelectionRange;
+    /**
+     * @hidden
+     * Gets the start input element.
+     */
+    get inputStartElement(): ElementRef;
+    /**
+     * @hidden
+     * Gets the end input element.
+     */
+    get inputEndElement(): ElementRef;
     /** @hidden */
     constructor(renderer?: Renderer2);
     /**
@@ -77,6 +85,10 @@ export declare class DateRangeService {
      * The method closes the popup.
      */
     deactivatePopup(): void;
+    /**
+     * @hidden
+     */
+    setActiveDescendent(id: string): void;
     /**
      * @hidden
      *

package/esm2015/calendar/calendar.component.js

@@ -187,6 +187,14 @@ export class CalendarComponent {
          * Applies to the [`infinite`]({% slug api_dateinputs_calendarcomponent %}#toc-type) Calendar only.
          */
         this.activeViewDateChange = new EventEmitter();
+        /**
+         * Fires each time the Calendar gets blurred.
+         */
+        this.onBlur = new EventEmitter();
+        /**
+         * Fires each time the Calendar gets focused.
+         */
+        this.onFocus = new EventEmitter();
         /**
          * Fires when the value is changed
          * ([more information and example]({% slug overview_calendar %}#toc-events)).
@@ -215,6 +223,12 @@ export class CalendarComponent {
             this.pickerService.calendar = this;
         }
     }
+    /**
+     * @hidden
+     */
+    get popupId() {
+        return `kendo-popup-${this.bus.calendarId}`;
+    }
     /**
      * Sets or gets the `focusedDate` property of the Calendar and
      * defines the focused date of the component
@@ -800,17 +814,19 @@ export class CalendarComponent {
     }
     bindEvents() {
         const element = this.element.nativeElement;
-        this.domEvents.push(this.renderer.listen(element, 'blur', this.handleBlur.bind(this)), this.renderer.listen(element, 'focus', this.handleFocus.bind(this)), this.renderer.listen(element, 'mousedown', preventDefault), this.renderer.listen(element, 'click', this.handleComponentClick.bind(this)), this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)));
+        this.domEvents.push(this.renderer.listen(element, 'focus', this.handleFocus.bind(this)), this.renderer.listen(element, 'mousedown', preventDefault), this.renderer.listen(element, 'click', this.handleComponentClick.bind(this)), this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)));
     }
     emitBlur(args) {
         if (this.pickerService) {
             this.pickerService.onBlur.emit(args);
         }
+        this.onBlur.emit();
     }
     emitFocus() {
         if (this.pickerService) {
             this.pickerService.onFocus.emit();
         }
+        this.onFocus.emit();
     }
     handleComponentClick() {
         if (!this.isActive) {
@@ -908,7 +924,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.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", 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,
@@ -1008,6 +1024,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             (valueChange)="handleMultiViewCalendarValueChange($event, multiviewcalendar.focusedDate)"
             (focusCalendar)="handleFocus()"
             (blur)="handleBlur($event)"
+            (blurEvent)="handleBlur($event)"
             (keydown)="handleMultiViewCalendarKeydown($event)"
         >
             <kendo-multiviewcalendar-messages
@@ -1019,7 +1036,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </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", "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 });
+  `, 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", "focus", "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: [{
@@ -1127,6 +1144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             (valueChange)="handleMultiViewCalendarValueChange($event, multiviewcalendar.focusedDate)"
             (focusCalendar)="handleFocus()"
             (blur)="handleBlur($event)"
+            (blurEvent)="handleBlur($event)"
             (keydown)="handleMultiViewCalendarKeydown($event)"
         >
             <kendo-multiviewcalendar-messages
@@ -1187,6 +1205,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], activeViewDateChange: [{
                 type: Output
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
             }], valueChange: [{
                 type: Output
             }], cellTemplate: [{

package/esm2015/calendar/horizontal-view-list.component.js

@@ -55,12 +55,12 @@ export class HorizontalViewListComponent {
         this.dates = [];
         this.intlSubscription = this.intl.changes.subscribe(this.intlChange.bind(this));
     }
-    /**
-     * @hidden
-     */
-    handleFocus() {
+    handleMultiViewCalendarFocus() {
         this.focusCalendar.emit();
     }
+    handleMultiViewCalendarBlur(event) {
+        this.blurCalendar.emit(event);
+    }
     get weekNumber() {
         return this.showWeekNumbers && this.isMonthView();
     }
@@ -85,6 +85,9 @@ export class HorizontalViewListComponent {
     get getComponentCenturyClass() {
         return this.activeView === CalendarViewEnum.century;
     }
+    get role() {
+        return this.views === 2 ? 'grid' : null;
+    }
     get getActiveDescendant() {
         return this.views === 1 ? this.activeDescendant : null;
     }
@@ -140,6 +143,12 @@ export class HorizontalViewListComponent {
     getCaptionClass() {
         return this.isMonthView() ? 'k-month-header' : 'k-meta-header';
     }
+    handleClassicCalendarFocus() {
+        this.focusCalendar.emit();
+    }
+    handleClassicCalendarBlur(event) {
+        this.blurCalendar.emit(event);
+    }
     animateView(action) {
         const container = this.element.nativeElement;
         const table = container.querySelector('table');
@@ -261,17 +270,17 @@ export class HorizontalViewListComponent {
     }
 }
 HorizontalViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HorizontalViewListComponent, deps: [{ token: i1.BusViewService }, { token: i2.IntlService }, { token: i3.WeekNamesService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", activeRangeEnd: "activeRangeEnd", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectionRange: "selectionRange", selectedDates: "selectedDates", views: "views", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", orientation: "orientation", activeDescendant: "activeDescendant", tabIndex: "tabIndex", disabled: "disabled", id: "id", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { listeners: { "focus": "handleFocus()" }, properties: { "class.k-calendar-view": "this.getComponentClass", "class.k-align-items-start": "this.getComponentClass", "class.k-justify-content-center": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, usesOnChanges: true, ngImport: i0, template: `
+HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", activeRangeEnd: "activeRangeEnd", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectionRange: "selectionRange", selectedDates: "selectedDates", views: "views", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", orientation: "orientation", activeDescendant: "activeDescendant", tabIndex: "tabIndex", disabled: "disabled", id: "id", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { listeners: { "focus": "handleMultiViewCalendarFocus()", "blur": "handleMultiViewCalendarBlur($event)" }, properties: { "class.k-calendar-view": "this.getComponentClass", "class.k-align-items-start": "this.getComponentClass", "class.k-justify-content-center": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #tableTemplate let-date="date" let-class="className">
             <table
-                role="grid"
+                [attr.role]="views === 2 ? 'none' : 'grid'"
                 class="k-content k-calendar-table"
                 [ngClass]="class"
                 [attr.aria-labelledby]="id"
                 [attr.aria-activedescendant]="getActiveDescendant"
                 [attr.tabindex]="getTabIndex"
-                (focus)="focusCalendar.emit()"
-                (focusout)="blurCalendar.emit($event)"
+                (focus)="handleClassicCalendarFocus()"
+                (blur)="handleClassicCalendarBlur($event)"
             >
                 <caption *ngIf="showViewHeader" [ngClass]="getCaptionClass()">{{ getCaptionTitle(date) }}</caption>
                 <thead *ngIf="isMonthView()" class="k-calendar-thead" role="rowgroup">
@@ -351,14 +360,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     template: `
         <ng-template #tableTemplate let-date="date" let-class="className">
             <table
-                role="grid"
+                [attr.role]="views === 2 ? 'none' : 'grid'"
                 class="k-content k-calendar-table"
                 [ngClass]="class"
                 [attr.aria-labelledby]="id"
                 [attr.aria-activedescendant]="getActiveDescendant"
                 [attr.tabindex]="getTabIndex"
-                (focus)="focusCalendar.emit()"
-                (focusout)="blurCalendar.emit($event)"
+                (focus)="handleClassicCalendarFocus()"
+                (blur)="handleClassicCalendarBlur($event)"
             >
                 <caption *ngIf="showViewHeader" [ngClass]="getCaptionClass()">{{ getCaptionTitle(date) }}</caption>
                 <thead *ngIf="isMonthView()" class="k-calendar-thead" role="rowgroup">
@@ -431,9 +440,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i2.IntlService }, { type: i3.WeekNamesService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { handleFocus: [{
+        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i2.IntlService }, { type: i3.WeekNamesService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { handleMultiViewCalendarFocus: [{
                 type: HostListener,
                 args: ["focus"]
+            }], handleMultiViewCalendarBlur: [{
+                type: HostListener,
+                args: ["blur", ['$event']]
             }], cellTemplateRef: [{
                 type: Input
             }], weekNumberTemplateRef: [{
@@ -517,4 +529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], getComponentCenturyClass: [{
                 type: HostBinding,
                 args: ["class.k-calendar-centuryview"]
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
             }] } });

package/esm2015/calendar/multiview-calendar.component.js

@@ -190,9 +190,13 @@ export class MultiViewCalendarComponent {
          */
         this.valueChange = new EventEmitter();
         /**
-         * @hidden
+         * Fires each time the MultiViewCalendar gets blurred.
          */
         this.blurEvent = new EventEmitter();
+        /**
+         * Fires each time the MultiViewCalendar gets focused.
+         */
+        this.focusEvent = new EventEmitter();
         /**
          * @hidden
          */
@@ -436,7 +440,8 @@ export class MultiViewCalendarComponent {
     handleFocusout(event) {
         const relatedTarget = event.relatedTarget;
         if (!this.element.nativeElement.contains(relatedTarget)) {
-            this.blurEvent.emit(event);
+            const isClassicCalendar = this.views === 1;
+            isClassicCalendar ? this.blurEvent.emit(event) : this.blurEvent.emit();
             this.onControlTouched();
         }
         this.isActive = false;
@@ -447,7 +452,9 @@ export class MultiViewCalendarComponent {
      */
     handleFocus() {
         this.isActive = true;
-        this.focusCalendar.emit();
+        const isClassicCalendar = this.views === 1;
+        isClassicCalendar ? this.focusCalendar.emit() : this.focusEvent.emit();
+        this.focusEvent.emit();
     }
     /**
      * @hidden
@@ -792,7 +799,7 @@ export class MultiViewCalendarComponent {
     }
 }
 MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarComponent, deps: [{ token: i1.BusViewService }, { token: i0.ElementRef }, { token: i2.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.DisabledDatesService }, { token: i4.SelectionService }], target: i0.ɵɵFactoryTarget.Component });
-MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", blurEvent: "blur", focusCalendar: "focusCalendar" }, host: { listeners: { "focusout": "handleFocusout($event)", "focus": "handleFocus()", "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", blurEvent: "blur", focusEvent: "focus", focusCalendar: "focusCalendar" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
         BusViewService,
         RANGE_CALENDAR_VALUE_ACCESSOR,
         RANGE_CALENDAR_RANGE_VALIDATORS,
@@ -1011,6 +1018,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], blurEvent: [{
                 type: Output,
                 args: ['blur']
+            }], focusEvent: [{
+                type: Output,
+                args: ['focus']
             }], focusCalendar: [{
                 type: Output
             }], cellTemplate: [{
@@ -1070,12 +1080,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-disabled']
-            }], handleFocusout: [{
-                type: HostListener,
-                args: ['focusout', ['$event']]
-            }], handleFocus: [{
-                type: HostListener,
-                args: ["focus"]
             }], handleMouseEnter: [{
                 type: HostListener,
                 args: ["mouseenter"]

package/esm2015/calendar/view-list.component.js

@@ -219,7 +219,7 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [attr.tabindex]="getTabIndex()"
             [attr.aria-labelledby]="id"
             (focus)="focusCalendar.emit()"
-            (focusout)="blurCalendar.emit($event)"
+            (blur)="blurCalendar.emit($event)"
         >
             <colgroup><col *ngFor="let _ of cols" /></colgroup>
 
@@ -288,7 +288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [attr.tabindex]="getTabIndex()"
             [attr.aria-labelledby]="id"
             (focus)="focusCalendar.emit()"
-            (focusout)="blurCalendar.emit($event)"
+            (blur)="blurCalendar.emit($event)"
         >
             <colgroup><col *ngFor="let _ of cols" /></colgroup>
 

package/esm2015/dateinput/dateinput.component.js

@@ -75,7 +75,6 @@ class KendoDate {
         validatePackage(packageMetadata);
         this.monthNames = this.allFormatedMonths();
         this.dayPeriods = this.allDayPeriods();
-        nextId++;
         if (!value) {
             this.value = getDate(new Date());
             const sampleFormat = this.dateFormatString(this.value, this.format).symbols;
@@ -562,10 +561,6 @@ export class DateInputComponent {
          * [spinner buttons]({% slug spinbuttons_dateinput %}).
          */
         this.spinners = false;
-        /**
-         * @hidden
-         */
-        this.hasPopup = false;
         /**
          * Fires each time the user selects a new value.
          * For more information, refer to the section on
@@ -645,6 +640,7 @@ export class DateInputComponent {
         this.incompleteValidator = noop;
         this._value = null;
         this._active = false;
+        this._focusableId = `dateinput-${nextId++}`;
         this.kendoDate = null;
         this.paste = false;
         this.domEvents = [];
@@ -667,14 +663,21 @@ export class DateInputComponent {
     /**
      * @hidden
      */
+    set focusableId(_focusableId) {
+        this._focusableId = _focusableId;
+    }
     get focusableId() {
-        if (this.pickerType) {
-            return `${this.pickerType}-${nextId}`;
-        }
-        else {
-            return `dateinput-${nextId}`;
+        return this._focusableId;
+    }
+    /**
+     * @hidden
+     */
+    set pickerType(_pickerType) {
+        if (_pickerType) {
+            this.focusableId = `${_pickerType}-${nextId}`;
         }
     }
+    ;
     /**
      * @hidden
      */
@@ -1117,6 +1120,7 @@ export class DateInputComponent {
      * @hidden
      */
     handleFocus(args) {
+        this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
         this.isActive = true;
         this.updateElementValue();
         if (!this.hasMousedown) {
@@ -1420,7 +1424,7 @@ export class DateInputComponent {
     }
 }
 DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i2.LocalizationService }, { token: i3.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateInputComponent, selector: "kendo-dateinput", inputs: { pickerType: "pickerType", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrect: "autoCorrect", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
+DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrect: "autoCorrect", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: L10N_PREFIX, useValue: 'kendo.dateinput' },
@@ -1570,7 +1574,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.IntlService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i2.LocalizationService }, { type: i3.PickerService, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { pickerType: [{
+                }] }]; }, propDecorators: { focusableId: [{
+                type: Input
+            }], pickerType: [{
                 type: Input
             }], disabled: [{
                 type: Input

package/esm2015/datepicker/datepicker.component.js

@@ -457,7 +457,7 @@ export class DatePickerComponent {
     }
     get popupUID() {
         var _a;
-        return (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.id;
+        return (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.popupId;
     }
     ;
     get isActive() {
@@ -923,7 +923,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             #input
             [role]="'combobox'"
             pickerType="datepicker"
-            [hasPopup]="true"
+            hasPopup="grid"
             [isPopupOpen]="show"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
@@ -996,7 +996,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         <ng-template>
-    `, isInline: true, components: [{ type: i5.DateInputComponent, selector: "kendo-dateinput", inputs: ["pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i6.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i7.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i8.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i5.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i6.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i7.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i8.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1034,7 +1034,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             #input
             [role]="'combobox'"
             pickerType="datepicker"
-            [hasPopup]="true"
+            hasPopup="grid"
             [isPopupOpen]="show"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"