@progress/kendo-angular-dateinputs 13.0.0-develop.2 → 13.0.0-develop.21

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

@@ -62,6 +62,7 @@ export declare class HorizontalViewListComponent implements OnChanges, AfterView
     get getComponentDecadeClass(): boolean;
     get getComponentCenturyClass(): boolean;
     get role(): string;
+    get tabindex(): string;
     get getActiveDescendant(): string;
     get getTabIndex(): number;
     service: ViewService;

package/calendar/models/keydown.interface.d.ts

@@ -26,4 +26,12 @@ export interface KeyDown {
      * @hidden
      */
     preventDefault?: Function;
+    /**
+     * @hidden
+     */
+    stopPropagation?: Function;
+    /**
+     * @hidden
+     */
+    altKey: boolean;
 }

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

@@ -250,6 +250,18 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
      * @hidden
      */
     focusCalendar: EventEmitter<any>;
+    /**
+     * @hidden
+     */
+    onClosePopup: EventEmitter<KeyDown>;
+    /**
+     * @hidden
+     */
+    onTabPress: EventEmitter<KeyDown>;
+    /**
+     * @hidden
+     */
+    onShiftTabPress: EventEmitter<KeyDown>;
     /**
      * @hidden
      *
@@ -523,5 +535,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"; "focusEvent": "focus"; "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"; "onClosePopup": "onClosePopup"; "onTabPress": "onTabPress"; "onShiftTabPress": "onShiftTabPress"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], never>;
 }

package/datepicker/datepicker.component.d.ts

@@ -598,7 +598,7 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
      * @hidden
      */
     get appendTo(): ViewContainerRef;
-    get input(): DateInputComponent;
+    get dateInput(): DateInputComponent;
     get calendar(): any;
     /**
      * @hidden

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

@@ -13,6 +13,7 @@ import { AdaptiveMode } from '../util';
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import { DateRangeSelectionDirective } from './date-range-selection.directive';
 import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
+import { KeyDown } from '../calendar/models/keydown.interface';
 import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI DateRangePopup component for Angular.
@@ -36,7 +37,6 @@ import * as i0 from "@angular/core";
 export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     private popupService;
     private dateRangeService;
-    private ref;
     private zone;
     private renderer;
     localization: LocalizationService;
@@ -179,7 +179,7 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     private _calendar;
     private _show;
     private windowSize;
-    constructor(popupService: PopupService, dateRangeService: DateRangeService, ref: ChangeDetectorRef, zone: NgZone, renderer: Renderer2, localization: LocalizationService, cdr: ChangeDetectorRef, rtl: boolean);
+    constructor(popupService: PopupService, dateRangeService: DateRangeService, zone: NgZone, renderer: Renderer2, localization: LocalizationService, cdr: ChangeDetectorRef, rtl: boolean);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -219,6 +219,18 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
      * @hidden
      */
     onResize(): void;
+    /**
+     * @hidden
+     */
+    closePopup(event: KeyDown): void;
+    /**
+     * @hidden
+     */
+    handleTab(event: KeyDown): void;
+    /**
+     * @hidden
+     */
+    handleShiftTab(event: KeyDown): void;
     private handleWindowBlur;
     private handleMouseLeave;
     private handleKeydown;
@@ -230,6 +242,6 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     private toggleDateRange;
     private toggleActionSheet;
     private updateActionSheetAdaptiveAppearance;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePopupComponent, [null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePopupComponent, [null, null, null, null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePopupComponent, "kendo-daterange-popup", ["kendo-daterange-popup"], { "animate": "animate"; "anchor": "anchor"; "anchorAlign": "anchorAlign"; "appendTo": "appendTo"; "collision": "collision"; "popupAlign": "popupAlign"; "margin": "margin"; "adaptiveMode": "adaptiveMode"; "title": "title"; "subtitle": "subtitle"; }, { "open": "open"; "close": "close"; "onBlur": "blur"; "onFocus": "focus"; "cancel": "cancel"; }, ["contentTemplate", "contentCalendar"], never>;
 }

package/datetimepicker/datetimepicker.component.d.ts

@@ -71,11 +71,7 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
     /**
      * @hidden
      */
-    get input(): DateInputComponent;
-    /**
-     * @hidden
-     */
-    get inputElement(): HTMLElement;
+    get dateInput(): DateInputComponent;
     /**
      * @hidden
      */

package/esm2020/calendar/calendar.component.mjs

@@ -1067,7 +1067,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", "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 });
+  `, 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", "onClosePopup", "onTabPress", "onShiftTabPress"], 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: "13.3.12", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/calendar/horizontal-view-list.component.mjs

@@ -89,13 +89,16 @@ export class HorizontalViewListComponent {
         return this.activeView === CalendarViewEnum.century;
     }
     get role() {
-        return this.views === 2 ? 'grid' : null;
+        return this.views >= 2 ? 'grid' : null;
+    }
+    get tabindex() {
+        return this.views >= 2 ? '0' : null;
     }
     get getActiveDescendant() {
         return this.views === 1 ? this.activeDescendant : null;
     }
     get getTabIndex() {
-        return this.disabled || this.views === 2 ? null : this.tabIndex;
+        return this.disabled || this.views >= 2 ? null : this.tabIndex;
     }
     ngOnChanges(changes) {
         this.initService();
@@ -120,7 +123,7 @@ export class HorizontalViewListComponent {
         }
         this.setAriaActivedescendant();
         //set tabindex for MultiViewCalendar
-        if (this.views === 2) {
+        if (this.views >= 2) {
             this.renderer.setAttribute(this.element.nativeElement, 'tabindex', this.tabIndex.toString());
         }
     }
@@ -267,16 +270,16 @@ export class HorizontalViewListComponent {
         return Math.min(this.total - skip, this.views);
     }
     setAriaActivedescendant() {
-        if (this.views === 2) {
+        if (this.views >= 2) {
             this.renderer.setAttribute(this.element.nativeElement, attributeNames.ariaActiveDescendant, this.activeDescendant);
         }
     }
 }
 HorizontalViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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: "13.3.12", 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: `
+HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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", "attr.tabindex": "this.tabindex" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #tableTemplate let-date="date" let-class="className">
             <table
-                [attr.role]="views === 2 ? 'none' : 'grid'"
+                [attr.role]="views >= 2 ? 'none' : 'grid'"
                 class="k-content k-calendar-table"
                 [ngClass]="class"
                 [attr.aria-labelledby]="id"
@@ -363,7 +366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     template: `
         <ng-template #tableTemplate let-date="date" let-class="className">
             <table
-                [attr.role]="views === 2 ? 'none' : 'grid'"
+                [attr.role]="views >= 2 ? 'none' : 'grid'"
                 class="k-content k-calendar-table"
                 [ngClass]="class"
                 [attr.aria-labelledby]="id"
@@ -535,4 +538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
             }] } });

package/esm2020/calendar/multiview-calendar.component.mjs

@@ -201,6 +201,18 @@ export class MultiViewCalendarComponent {
          * @hidden
          */
         this.focusCalendar = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.onClosePopup = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.onTabPress = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.onShiftTabPress = new EventEmitter();
         this.cellUID = guid();
         this.isHovered = false;
         this.isPrevDisabled = true;
@@ -245,7 +257,7 @@ export class MultiViewCalendarComponent {
      * @hidden
      */
     get multiViewCalendarHeaderIdLabel() {
-        return this.views === 2 ? this.id + 'header-' : null;
+        return this.views >= 2 ? this.id + 'header-' : null;
     }
     /**
  * @hidden
@@ -423,7 +435,7 @@ export class MultiViewCalendarComponent {
         return CalendarViewEnum[this.topView];
     }
     get widgetId() {
-        return this.views === 2 ? this.id : null;
+        return this.views >= 2 ? this.id : null;
     }
     get ariaDisabled() {
         return this.disabled;
@@ -493,6 +505,11 @@ export class MultiViewCalendarComponent {
         const onArrowLeftAndControl = event.keyCode === Keys.ArrowLeft && ctrlKey;
         const onTKeyPress = event.keyCode === Keys.KeyT;
         const onEnterKeyPress = event.keyCode === Keys.Enter;
+        const onArrowUpPress = event.keyCode === Keys.ArrowUp;
+        const altKey = event.altKey;
+        const escKey = event.keyCode === Keys.Escape;
+        const tabKeyPress = event.keyCode === Keys.Tab;
+        const shiftKeyPress = event.shiftKey;
         if (onArrowRightAndControl) {
             event.preventDefault();
             this.navigateView(this.nextView);
@@ -515,6 +532,17 @@ export class MultiViewCalendarComponent {
             this.selectionService.lastClicked = this.focusedDate;
             this.performSelection(this.focusedDate, event);
         }
+        if (this.views >= 2) {
+            if ((escKey || (altKey && onArrowUpPress))) {
+                this.onClosePopup.emit(event);
+            }
+            else if ((tabKeyPress && shiftKeyPress)) {
+                this.onShiftTabPress.emit(event);
+            }
+            else if ((tabKeyPress && !shiftKeyPress)) {
+                this.onTabPress.emit(event);
+            }
+        }
         const candidate = dateInRange(this.navigator.move(this.focusedDate, this.navigator.action(event), this.activeViewEnum), this.min, this.max);
         if (isEqual(this.focusedDate, candidate)) {
             return;
@@ -590,7 +618,7 @@ export class MultiViewCalendarComponent {
         if (!this.element) {
             return;
         }
-        const activeElement = this.views === 2 ? this.element.nativeElement.querySelector('.k-calendar-view') :
+        const activeElement = this.views >= 2 ? this.element.nativeElement.querySelector('.k-calendar-view') :
             this.element.nativeElement.querySelector('.k-content.k-calendar-table');
         activeElement.blur();
     }
@@ -800,7 +828,7 @@ export class MultiViewCalendarComponent {
     }
 }
 MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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: "13.3.12", 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: [
+MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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", onClosePopup: "onClosePopup", onTabPress: "onTabPress", onShiftTabPress: "onShiftTabPress" }, 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,
@@ -1024,6 +1052,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['focus']
             }], focusCalendar: [{
                 type: Output
+            }], onClosePopup: [{
+                type: Output
+            }], onTabPress: [{
+                type: Output
+            }], onShiftTabPress: [{
+                type: Output
             }], cellTemplate: [{
                 type: ContentChild,
                 args: [CellTemplateDirective, { static: false }]

package/esm2020/dateinput/dateinput.component.mjs

@@ -1511,7 +1511,7 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 </kendo-icon-wrapper>
         </button>
     </span>
-  `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/datepicker/datepicker.component.mjs

@@ -550,7 +550,7 @@ export class DatePickerComponent {
      * Used by the TextBoxContainer to determine if the component is empty.
      */
     isEmpty() {
-        return !this.value && this.input.isEmpty();
+        return !this.value && this.dateInput.isEmpty();
     }
     /**
      * @hidden
@@ -583,6 +583,9 @@ export class DatePickerComponent {
             this.incompleteValidator = this.incompleteDateValidation ? incompleteDateValidator() : noop;
             this.onValidatorChange();
         }
+        if (!this.focusableId || changes.focusableId) {
+            this.focusableId = this.dateInput?.focusableId;
+        }
     }
     /**
      * @hidden
@@ -612,9 +615,9 @@ export class DatePickerComponent {
         this.verifyValue(value);
         this.value = cloneDate(value);
         this.cdr.markForCheck();
-        if (!value && this.input) {
-            this.input.placeholder = this.placeholder;
-            this.input.writeValue(value);
+        if (!value && this.dateInput) {
+            this.dateInput.placeholder = this.placeholder;
+            this.dateInput.writeValue(value);
         }
     }
     /**
@@ -640,7 +643,7 @@ export class DatePickerComponent {
      * @hidden
      */
     validate(control) {
-        return this.minValidateFn(control) || this.maxValidateFn(control) || this.disabledDatesValidateFn(control) || this.incompleteValidator(control, this.input && this.input.isDateIncomplete);
+        return this.minValidateFn(control) || this.maxValidateFn(control) || this.disabledDatesValidateFn(control) || this.incompleteValidator(control, this.dateInput && this.dateInput.isDateIncomplete);
     }
     /**
      * @hidden
@@ -677,13 +680,13 @@ export class DatePickerComponent {
      * ```
      */
     focus() {
-        this.input.focus();
+        this.dateInput.focus();
     }
     /**
      * Blurs the DatePicker component.
      */
     blur() {
-        (this.calendar || this.input)['blur']();
+        (this.calendar || this.dateInput)['blur']();
     }
     /**
      * Toggles the visibility of the popup or actionSheet.
@@ -745,7 +748,7 @@ export class DatePickerComponent {
      * @hidden
      */
     handleInputChange(value) {
-        this.handleChange(this.input.formatSections['time'] ? value : this.mergeTime(value));
+        this.handleChange(this.dateInput.formatSections['time'] ? value : this.mergeTime(value));
     }
     /**
      * @hidden
@@ -767,7 +770,7 @@ export class DatePickerComponent {
         }
         return appendTo === 'component' ? this.container : appendTo;
     }
-    get input() {
+    get dateInput() {
         return this.pickerService.input;
     }
     get calendar() {
@@ -824,7 +827,7 @@ export class DatePickerComponent {
             }
         }
         if (keyCode === Keys.Tab && this.show && this.calendar.isActive && isTabExitingCalendar(this.calendarType, target, shiftKey)) {
-            this.input.focus();
+            this.dateInput.focus();
             this.show = false;
         }
     }
@@ -857,7 +860,7 @@ export class DatePickerComponent {
             });
             this.setAriaActiveDescendant();
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
-            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaControls, this.popupUID);
             this.subscription = this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
@@ -865,8 +868,8 @@ export class DatePickerComponent {
             this.popupRef = null;
             this.subscription.unsubscribe();
             this.ariaActiveDescendantSubscription.unsubscribe();
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant);
             this.cdr.detectChanges();
         }
     }
@@ -879,13 +882,13 @@ export class DatePickerComponent {
             this.updateActionSheetAdaptiveAppearance();
             this.setAriaActiveDescendant();
             this.actionSheet.element.nativeElement.setAttribute('id', this.popupUID);
-            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaControls, this.popupUID);
         }
         else if (!show && this.isOpen) {
             this.actionSheet.toggle();
             this.ariaActiveDescendantSubscription.unsubscribe();
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaControls);
         }
         this._show = show;
     }
@@ -912,13 +915,13 @@ export class DatePickerComponent {
         const focusedCellChangeEvent = this.calendar.type === 'infinite' ?
             this.calendar.monthView.focusedCellChange :
             this.calendar.multiViewCalendar.viewList.focusedCellChange;
-        this.ariaActiveDescendantSubscription = focusedCellChangeEvent.subscribe((id) => this.renderer.setAttribute(this.inputElement, attributeNames.ariaActiveDescendant, id));
+        this.ariaActiveDescendantSubscription = focusedCellChangeEvent.subscribe((id) => this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant, id));
     }
     focusInput() {
         if (this.touchEnabled) {
             return;
         }
-        this.input.focus();
+        this.dateInput.focus();
     }
     toggleFocus() {
         if (!this.isActive) {
@@ -933,9 +936,9 @@ export class DatePickerComponent {
             }
         }
         else if (!this.touchEnabled) {
-            this.input.focus();
+            this.dateInput.focus();
         }
-        else if (!this.input.isActive) {
+        else if (!this.dateInput.isActive) {
             this.handleBlur();
         }
     }
@@ -983,7 +986,7 @@ export class DatePickerComponent {
         const currentTarget = args && currentFocusTarget(args);
         const target = args && args.target;
         const isInsideActionSheet = this.actionSheet && (this.actionSheet.element.nativeElement.contains(target) || this.actionSheet.element.nativeElement.contains(currentTarget));
-        if (currentTarget && (this.input.containsElement(currentTarget) ||
+        if (currentTarget && (this.dateInput.containsElement(currentTarget) ||
             (this.calendar && this.calendar.containsElement(currentTarget)) || isInsideActionSheet)) {
             return;
         }
@@ -1118,6 +1121,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             }"
             [scope]="this"
             (collapse)="handleActionSheetCollapse()"
+            [titleId]="calendar?.headerId"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">
@@ -1186,7 +1190,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: ["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.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i8.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i9.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i10.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", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i11.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i12.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], 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.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i8.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i9.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i10.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", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i11.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i12.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1282,6 +1286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }"
             [scope]="this"
             (collapse)="handleActionSheetCollapse()"
+            [titleId]="calendar?.headerId"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">

package/esm2020/daterange/date-range-input.mjs

@@ -6,7 +6,6 @@ import { ElementRef, Renderer2, NgZone, Directive } from '@angular/core';
 import { cloneDate } from '@progress/kendo-date-math';
 import { Keys } from '@progress/kendo-angular-common';
 import { Subscription, fromEvent } from 'rxjs';
-import { filter } from 'rxjs/operators';
 import { DateInputComponent } from '../dateinput/dateinput.component';
 import { DateRangeService } from './date-range.service';
 import { isPresent } from '../common/utils';
@@ -43,7 +42,6 @@ export class DateRangeInput {
         }
         [
             this.input.onBlur.subscribe(() => this.deactivate()),
-            this.input.onFocus.pipe(filter(() => !this.popupCalendarActivated)).subscribe(() => this.activate()),
             this.input.valueUpdate.subscribe(value => this.updateRange(value, 'change')),
             this.dateRangeService.activeRangeEnd$.subscribe(() => {
                 if (this.navigateCalendarOnFocus) {