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

package/fesm2015/kendo-angular-dateinputs.js

@@ -28,7 +28,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1666814053,
+    publishDate: 1668098044,
     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'
 };
@@ -1913,12 +1913,12 @@ 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();
     }
@@ -1943,6 +1943,9 @@ 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;
     }
@@ -1998,6 +2001,12 @@ 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');
@@ -2119,17 +2128,17 @@ class HorizontalViewListComponent {
     }
 }
 HorizontalViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HorizontalViewListComponent, deps: [{ token: BusViewService }, { token: i1.IntlService }, { token: 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">
@@ -2209,14 +2218,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">
@@ -2289,9 +2298,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i1.IntlService }, { type: WeekNamesService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { handleFocus: [{
+        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i1.IntlService }, { type: 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: [{
@@ -2375,6 +2387,9 @@ 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']
             }] } });
 
 /**
@@ -3275,9 +3290,13 @@ 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
          */
@@ -3521,7 +3540,8 @@ 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;
@@ -3532,7 +3552,9 @@ 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
@@ -3877,7 +3899,7 @@ class MultiViewCalendarComponent {
     }
 }
 MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarComponent, deps: [{ token: BusViewService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DisabledDatesService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Component });
-MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "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,
@@ -4096,6 +4118,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: [{
@@ -4155,12 +4180,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"]
@@ -5188,7 +5207,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>
 
@@ -5257,7 +5276,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>
 
@@ -5701,6 +5720,14 @@ 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)).
@@ -5729,6 +5756,12 @@ 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
@@ -6314,17 +6347,19 @@ 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) {
@@ -6422,7 +6457,7 @@ class CalendarComponent {
     }
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarComponent, deps: [{ token: BusViewService }, { token: CalendarDOMService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: ScrollSyncService }, { token: DisabledDatesService }, { token: i1$1.LocalizationService }, { token: SelectionService }, { token: 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,
@@ -6522,6 +6557,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
@@ -6533,7 +6569,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
     </ng-container>
-  `, isInline: true, components: [{ type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: 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: i5.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: 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: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: 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: i5.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: 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: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i7.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: [{
@@ -6641,6 +6677,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
@@ -6701,6 +6738,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: [{
@@ -6894,7 +6937,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;
@@ -7381,10 +7423,6 @@ 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
@@ -7464,6 +7502,7 @@ class DateInputComponent {
         this.incompleteValidator = noop$2;
         this._value = null;
         this._active = false;
+        this._focusableId = `dateinput-${nextId++}`;
         this.kendoDate = null;
         this.paste = false;
         this.domEvents = [];
@@ -7486,14 +7525,21 @@ 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
      */
@@ -7936,6 +7982,7 @@ class DateInputComponent {
      * @hidden
      */
     handleFocus(args) {
+        this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
         this.isActive = true;
         this.updateElementValue();
         if (!this.hasMousedown) {
@@ -8239,7 +8286,7 @@ 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: i1$1.LocalizationService }, { token: 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' },
@@ -8389,7 +8436,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: i1$1.LocalizationService }, { type: PickerService, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { pickerType: [{
+                }] }]; }, propDecorators: { focusableId: [{
+                type: Input
+            }], pickerType: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -9016,7 +9065,7 @@ 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() {
@@ -9482,7 +9531,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"
@@ -9555,7 +9604,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         <ng-template>
-    `, isInline: true, components: [{ type: 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: 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: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: 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: 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: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i5.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: [{
@@ -9593,7 +9642,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"
@@ -10492,23 +10541,14 @@ class TimeListComponent {
         this.data = [];
         this.indexToScroll = -1;
         this.domEvents = [];
-        this.hostElement = this.element.nativeElement;
     }
     get roleAttribute() {
-        return this.isDayPeriod ? 'listbox' : 'spinbutton';
+        return 'listbox';
     }
     get ariaLabel() {
         var _a;
         return this.localization.get((_a = this.part) === null || _a === void 0 ? void 0 : _a.type);
     }
-    get valueMin() {
-        var _a;
-        return (_a = this.data[0]) === null || _a === void 0 ? void 0 : _a.text;
-    }
-    get valueMax() {
-        var _a;
-        return (_a = this.data[this.data.length - 1]) === null || _a === void 0 ? void 0 : _a.text;
-    }
     get tabIndex() {
         return this.disabled ? undefined : 0;
     }
@@ -10516,8 +10556,10 @@ class TimeListComponent {
         var _a;
         return ((_a = this.part) === null || _a === void 0 ? void 0 : _a.type) === 'dayperiod';
     }
+    get currentSelectedIndex() {
+        return this.selectedIndex(this.value);
+    }
     ngOnChanges(changes) {
-        var _a, _b;
         if (changes.part) {
             this.service = this.injector.get(services[this.part.type]);
             this.service.configure(this.serviceSettings());
@@ -10537,8 +10579,6 @@ class TimeListComponent {
         this.animateToIndex = this.animateToIndex && this.textHasChanged(valueChanges);
         this.total = this.service.total(value);
         this.indexToScroll = this.selectedIndex(value);
-        this.renderer.setAttribute(this.hostElement, attributeNames.valueNow, (_a = this.getCurrentItem()) === null || _a === void 0 ? void 0 : _a.value.toString());
-        this.renderer.setAttribute(this.hostElement, attributeNames.valuetext, (_b = this.getCurrentItem()) === null || _b === void 0 ? void 0 : _b.text);
     }
     ngOnInit() {
         this.animateToIndex = true;
@@ -10691,7 +10731,7 @@ class TimeListComponent {
     }
 }
 TimeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: TimePickerDOMService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimeListComponent, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.role": "this.roleAttribute", "attr.aria-label": "this.ariaLabel", "attr.valuemin": "this.valueMin", "attr.valuemax": "this.valueMax", "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimeListComponent, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.role": "this.roleAttribute", "attr.aria-label": "this.ariaLabel", "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-virtualization
         [skip]="skip"
         [take]="total"
@@ -10709,11 +10749,12 @@ TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 click: handleItemClick
             }"
             [scope]="this"
-            [attr.role]="isDayPeriod ? 'presentation' : null"
+            [attr.role]="'presentation'"
         >
             <li *ngFor="let item of data; let index = index;" class="k-item"
                 [attr.data-timelist-item-index]="index"
-                [attr.role]="isDayPeriod ? 'option' : null"
+                [attr.role]="'option'"
+                [attr.aria-selected]="index === currentSelectedIndex"
                 >
                 <span>{{item.text}}</span>
             </li>
@@ -10742,11 +10783,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 click: handleItemClick
             }"
             [scope]="this"
-            [attr.role]="isDayPeriod ? 'presentation' : null"
+            [attr.role]="'presentation'"
         >
             <li *ngFor="let item of data; let index = index;" class="k-item"
                 [attr.data-timelist-item-index]="index"
-                [attr.role]="isDayPeriod ? 'option' : null"
+                [attr.role]="'option'"
+                [attr.aria-selected]="index === currentSelectedIndex"
                 >
                 <span>{{item.text}}</span>
             </li>
@@ -10777,12 +10819,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], ariaLabel: [{
                 type: HostBinding,
                 args: ["attr.aria-label"]
-            }], valueMin: [{
-                type: HostBinding,
-                args: ['attr.valuemin']
-            }], valueMax: [{
-                type: HostBinding,
-                args: ["attr.valuemax"]
             }], tabIndex: [{
                 type: HostBinding,
                 args: ["attr.tabindex"]
@@ -12048,12 +12084,14 @@ class TimePickerComponent {
         const { altKey, keyCode } = event;
         if (keyCode === Keys$1.Escape) {
             this.show = false;
+            this.cdr.detectChanges();
             return;
         }
         if (altKey) {
             if (keyCode === Keys$1.ArrowUp) {
                 event.preventDefault();
                 this.show = false;
+                this.cdr.detectChanges();
             }
             if (keyCode === Keys$1.ArrowDown && !this.show) {
                 event.preventDefault();
@@ -12207,6 +12245,7 @@ class TimePickerComponent {
         //due to async IE focus event
         this.handleFocus();
         this.show = !this.show;
+        this.cdr.detectChanges();
     }
     /**
      * @hidden
@@ -12353,6 +12392,7 @@ class TimePickerComponent {
         else {
             this.blurComponent();
         }
+        this.cdr.detectChanges();
     }
     blurComponent() {
         this.isActive = false; // order is important ¯\_(ツ)_/¯
@@ -12433,7 +12473,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         <kendo-dateinput
             #input
             pickerType="timepicker"
-            [hasPopup]="true"
+            hasPopup="dialog"
             [isPopupOpen]="show"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
@@ -12504,7 +12544,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </kendo-timeselector>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: 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: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: 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: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -12565,7 +12605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <kendo-dateinput
             #input
             pickerType="timepicker"
-            [hasPopup]="true"
+            hasPopup="dialog"
             [isPopupOpen]="show"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
@@ -13257,7 +13297,7 @@ class DateTimePickerComponent {
     }
     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;
     }
     ;
     ngOnInit() {
@@ -13841,7 +13881,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [tabindex]="tabindex"
             [title]="title"
             pickerType="datetimepicker"
-            [hasPopup]="true"
+            hasPopup="grid"
             [isPopupOpen]="isOpen"
             (valueChange)="handleInputValueChange($event)"
             [kendoEventsOutsideAngular]="{
@@ -13892,12 +13932,13 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     }"
                     [scope]="this"
                 >
-                    <div class="k-button-group k-button-group-stretched">
+                    <div class="k-button-group k-button-group-stretched" role="group">
                         <button
                             type="button"
                             class="k-button k-group-start k-date-tab"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'date'"
+                            [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
                             [attr.title]="localization.get('dateTabLabel')"
                             [attr.aria-label]="localization.get('dateTabLabel')"
                             [kendoEventsOutsideAngular]="{
@@ -13913,6 +13954,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                             class="k-button k-group-end k-time-tab"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'time'"
+                            [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
                             [attr.title]="localization.get('timeTabLabel')"
                             [attr.aria-label]="localization.get('timeTabLabel')"
                             [kendoEventsOutsideAngular]="{
@@ -14019,7 +14061,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: 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: 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: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: 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: 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: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -14100,7 +14142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [tabindex]="tabindex"
             [title]="title"
             pickerType="datetimepicker"
-            [hasPopup]="true"
+            hasPopup="grid"
             [isPopupOpen]="isOpen"
             (valueChange)="handleInputValueChange($event)"
             [kendoEventsOutsideAngular]="{
@@ -14151,12 +14193,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     }"
                     [scope]="this"
                 >
-                    <div class="k-button-group k-button-group-stretched">
+                    <div class="k-button-group k-button-group-stretched" role="group">
                         <button
                             type="button"
                             class="k-button k-group-start k-date-tab"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'date'"
+                            [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
                             [attr.title]="localization.get('dateTabLabel')"
                             [attr.aria-label]="localization.get('dateTabLabel')"
                             [kendoEventsOutsideAngular]="{
@@ -14172,6 +14215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                             class="k-button k-group-end k-time-tab"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'time'"
+                            [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
                             [attr.title]="localization.get('timeTabLabel')"
                             [attr.aria-label]="localization.get('timeTabLabel')"
                             [kendoEventsOutsideAngular]="{
@@ -14418,8 +14462,6 @@ class DateRangeService {
     /** @hidden */
     constructor(renderer) {
         this.renderer = renderer;
-        /** @hidden */
-        this.focusedCellChange = new Subscription();
         /**
          * An Observable instance that notifies when the `activeRangeEnd` state is changed.
          */
@@ -14479,23 +14521,34 @@ class DateRangeService {
     get selectionRange() {
         return this.range$.value;
     }
+    /**
+     * @hidden
+     * Gets the start input element.
+     */
+    get inputStartElement() {
+        return this.startInput$.value.dateInput.nativeElement;
+    }
+    /**
+     * @hidden
+     * Gets the end input element.
+     */
+    get inputEndElement() {
+        return this.endInput$.value.dateInput.nativeElement;
+    }
     /**
      * Activates the registered `DateRangePopup` component.
      * The method opens the popup and focuses the calendar.
      */
     activatePopup() {
-        var _a;
         const dateRangePopup = this.dateRangePopup$.value;
         if (!dateRangePopup) {
             return;
         }
         if (this.startInput$.value) {
-            const inputElement = this.startInput$.value.dateInput.nativeElement;
-            this.renderer.setAttribute(inputElement, attributeNames.ariaControls, dateRangePopup.popupUID);
-            this.renderer.setAttribute(inputElement, attributeNames.ariaExpanded, 'true');
-            this.focusedCellChange = (_a = dateRangePopup.viewCalendar.first) === null || _a === void 0 ? void 0 : _a.viewList.focusedCellChange.subscribe((id) => {
-                this.renderer.setAttribute(inputElement, attributeNames.ariaActiveDescendant, id);
-            });
+            this.renderer.setAttribute(this.inputStartElement, attributeNames.ariaControls, dateRangePopup.popupUID);
+            this.renderer.setAttribute(this.inputStartElement, attributeNames.ariaExpanded, 'true');
+            this.renderer.setAttribute(this.inputEndElement, attributeNames.ariaControls, dateRangePopup.popupUID);
+            this.renderer.setAttribute(this.inputEndElement, attributeNames.ariaExpanded, 'true');
         }
         dateRangePopup.activate();
     }
@@ -14504,20 +14557,28 @@ class DateRangeService {
      * The method closes the popup.
      */
     deactivatePopup() {
-        var _a;
         const dateRangePopup = this.dateRangePopup$.value;
         if (!(dateRangePopup && dateRangePopup.show)) {
             return;
         }
         if (this.startInput$.value) {
-            const inputElement = this.startInput$.value.dateInput.nativeElement;
-            this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
-            this.renderer.setAttribute(inputElement, attributeNames.ariaExpanded, 'false');
-            (_a = this.focusedCellChange) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-            this.renderer.removeAttribute(inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.inputStartElement, attributeNames.ariaControls);
+            this.renderer.setAttribute(this.inputStartElement, attributeNames.ariaExpanded, 'false');
+            this.renderer.removeAttribute(this.inputStartElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.inputEndElement, attributeNames.ariaControls);
+            this.renderer.setAttribute(this.inputEndElement, attributeNames.ariaExpanded, 'false');
+            this.renderer.removeAttribute(this.inputEndElement, attributeNames.ariaActiveDescendant);
         }
         dateRangePopup.show = false;
     }
+    /**
+     * @hidden
+     */
+    setActiveDescendent(id) {
+        this.renderer.setAttribute(this.inputStartElement, attributeNames.ariaActiveDescendant, id);
+        this.renderer.setAttribute(this.inputEndElement, attributeNames.ariaActiveDescendant, id);
+    }
+    ;
     /**
      * @hidden
      *
@@ -14946,7 +15007,12 @@ class DateRangePopupComponent {
         this.zone.runOutsideAngular(() => {
             this.activateSubscription = merge(this.contentCalendar.changes, this.viewCalendar.changes)
                 .pipe(filter(changes => changes && changes.first), map(changes => changes.first))
-                .subscribe((calendar) => setTimeout(() => calendar.focus()));
+                .subscribe((calendar) => setTimeout(() => {
+                calendar.focus();
+                this.calendarSubscriptions.add(calendar.viewList.focusedCellChange.subscribe((id) => {
+                    this.dateRangeService.setActiveDescendent(id);
+                }));
+            }));
         });
     }
     /**
@@ -15073,7 +15139,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <ng-template #defaultTemplate>
             <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
         </ng-template>
-    `, isInline: true, components: [{ type: 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"] }], directives: [{ type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
+    `, isInline: true, components: [{ type: 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"] }], directives: [{ type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
@@ -15239,6 +15305,8 @@ class DateRangeInput {
         return isPresent(popup) && isPresent(popup.calendar);
     }
     init() {
+        this.input.role = 'combobox';
+        this.input.hasPopup = 'grid';
         if (this.input.value) {
             this.dateRangeService.setRange(this.getRange(this.input.value));
         }
@@ -15370,11 +15438,10 @@ class DateRangeEndInputDirective extends DateRangeInput {
     ngOnInit() {
         this.rangeService.registerEndInput(this.dateInput);
         super.init();
+        this.dateInput.pickerType = 'daterangeend';
     }
     ngAfterViewInit() {
-        const inputElement = this.dateInput.inputElement;
-        this.renderer.removeAttribute(inputElement, attributeNames.ariaExpanded);
-        this.dateInput.pickerType = 'daterangeend';
+        this.renderer.setAttribute(this.dateInput.inputElement, attributeNames.ariaExpanded, 'false');
     }
     ngOnDestroy() {
         super.destroy();
@@ -15452,13 +15519,10 @@ class DateRangeStartInputDirective extends DateRangeInput {
     ngOnInit() {
         this.rangeService.registerStartInput(this.dateInput);
         super.init();
+        this.dateInput.pickerType = 'daterangestart';
     }
     ngAfterViewInit() {
-        const inputElement = this.dateInput.inputElement;
-        this.renderer.setAttribute(inputElement, 'role', 'combobox');
-        this.renderer.setAttribute(inputElement, attributeNames.ariaHasPopup, 'true');
-        this.dateInput.pickerType = 'daterangestart';
-        this.renderer.setAttribute(inputElement, attributeNames.ariaExpanded, 'false');
+        this.renderer.setAttribute(this.dateInput.inputElement, attributeNames.ariaExpanded, 'false');
     }
     ngOnDestroy() {
         super.destroy();
@@ -15700,7 +15764,7 @@ const COMPONENT_DIRECTIVES$3 = [
 /**
  * @hidden
  *
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Virtualization component.
  */
 class VirtualizationModule {
@@ -15929,7 +15993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the DateInput component.
  */
 class DateInputModule {
@@ -15992,7 +16056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the DatePicker component.
  */
 class DatePickerModule {
@@ -16187,7 +16251,7 @@ const providers = [
     }
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the TimePicker component.
  */
 class TimePickerModule {
@@ -16260,7 +16324,7 @@ const COMPONENT_DIRECTIVES = [
     LocalizedMessagesDirective
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the DateTimePicker component.
  */
 class DateTimePickerModule {
@@ -16325,7 +16389,7 @@ const COMPONENT_MODULES = [
     DateTimePickerModule
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Date Inputs components.
  *
  * @example