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

package/fesm2015/progress-kendo-angular-dateinputs.mjs

@@ -36,8 +36,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684846671,
-    version: '13.0.0-develop.2',
+    publishDate: 1685961167,
+    version: '13.0.0-develop.20',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1978,13 +1978,16 @@ 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();
@@ -2009,7 +2012,7 @@ 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());
         }
     }
@@ -2156,16 +2159,16 @@ 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: 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: "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"
@@ -2252,7 +2255,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"
@@ -2424,6 +2427,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
             }] } });
 
 /**
@@ -3356,6 +3362,18 @@ 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;
@@ -3400,7 +3418,7 @@ class MultiViewCalendarComponent {
      * @hidden
      */
     get multiViewCalendarHeaderIdLabel() {
-        return this.views === 2 ? this.id + 'header-' : null;
+        return this.views >= 2 ? this.id + 'header-' : null;
     }
     /**
  * @hidden
@@ -3578,7 +3596,7 @@ 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;
@@ -3648,6 +3666,11 @@ class MultiViewCalendarComponent {
         const onArrowLeftAndControl = event.keyCode === Keys$1.ArrowLeft && ctrlKey;
         const onTKeyPress = event.keyCode === Keys$1.KeyT;
         const onEnterKeyPress = event.keyCode === Keys$1.Enter;
+        const onArrowUpPress = event.keyCode === Keys$1.ArrowUp;
+        const altKey = event.altKey;
+        const escKey = event.keyCode === Keys$1.Escape;
+        const tabKeyPress = event.keyCode === Keys$1.Tab;
+        const shiftKeyPress = event.shiftKey;
         if (onArrowRightAndControl) {
             event.preventDefault();
             this.navigateView(this.nextView);
@@ -3670,6 +3693,17 @@ 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;
@@ -3745,7 +3779,7 @@ 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();
     }
@@ -3955,7 +3989,7 @@ class MultiViewCalendarComponent {
     }
 }
 MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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: "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,
@@ -4179,6 +4213,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 }]
@@ -6664,7 +6704,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: i8.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 });
+  `, 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: i8.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", "onClosePopup", "onTabPress", "onShiftTabPress"], 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: "13.3.12", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -8470,7 +8510,7 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 </kendo-icon-wrapper>
         </button>
     </span>
-  `, isInline: true, components: [{ type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }, { type: i8.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: [{
@@ -9281,7 +9321,7 @@ 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
@@ -9306,6 +9346,7 @@ class DatePickerComponent {
      * @hidden
      */
     ngOnChanges(changes) {
+        var _a;
         this.verifySettings();
         if (changes.min || changes.max || changes.rangeValidation || changes.disabledDatesValidation || changes.disabledDates || changes.incompleteDateValidation) {
             this.minValidateFn = this.rangeValidation ? minValidator(this.min) : noop$2;
@@ -9314,6 +9355,9 @@ class DatePickerComponent {
             this.incompleteValidator = this.incompleteDateValidation ? incompleteDateValidator() : noop$2;
             this.onValidatorChange();
         }
+        if (!this.focusableId || changes.focusableId) {
+            this.focusableId = (_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.focusableId;
+        }
     }
     /**
      * @hidden
@@ -9343,9 +9387,9 @@ 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);
         }
     }
     /**
@@ -9371,7 +9415,7 @@ 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
@@ -9408,13 +9452,13 @@ 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.
@@ -9476,7 +9520,7 @@ 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
@@ -9498,7 +9542,7 @@ class DatePickerComponent {
         }
         return appendTo === 'component' ? this.container : appendTo;
     }
-    get input() {
+    get dateInput() {
         return this.pickerService.input;
     }
     get calendar() {
@@ -9555,7 +9599,7 @@ class DatePickerComponent {
             }
         }
         if (keyCode === Keys$1.Tab && this.show && this.calendar.isActive && isTabExitingCalendar(this.calendarType, target, shiftKey)) {
-            this.input.focus();
+            this.dateInput.focus();
             this.show = false;
         }
     }
@@ -9570,6 +9614,7 @@ class DatePickerComponent {
         this.toggleFocus();
     }
     togglePopup(show) {
+        var _a, _b, _c;
         if (show === this._show) {
             return;
         }
@@ -9588,7 +9633,7 @@ class DatePickerComponent {
             });
             this.setAriaActiveDescendant();
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
-            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.inputElement, attributeNames.ariaControls, this.popupUID);
             this.subscription = this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
@@ -9596,12 +9641,13 @@ 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((_b = this.dateInput) === null || _b === void 0 ? void 0 : _b.inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute((_c = this.dateInput) === null || _c === void 0 ? void 0 : _c.inputElement, attributeNames.ariaActiveDescendant);
             this.cdr.detectChanges();
         }
     }
     toggleActionSheet(show) {
+        var _a, _b, _c;
         if (show === this._show) {
             return;
         }
@@ -9610,13 +9656,13 @@ 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((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.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((_b = this.dateInput) === null || _b === void 0 ? void 0 : _b.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute((_c = this.dateInput) === null || _c === void 0 ? void 0 : _c.inputElement, attributeNames.ariaControls);
         }
         this._show = show;
     }
@@ -9643,13 +9689,13 @@ 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) => { var _a; return this.renderer.setAttribute((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.inputElement, attributeNames.ariaActiveDescendant, id); });
     }
     focusInput() {
         if (this.touchEnabled) {
             return;
         }
-        this.input.focus();
+        this.dateInput.focus();
     }
     toggleFocus() {
         if (!this.isActive) {
@@ -9664,9 +9710,9 @@ class DatePickerComponent {
             }
         }
         else if (!this.touchEnabled) {
-            this.input.focus();
+            this.dateInput.focus();
         }
-        else if (!this.input.isActive) {
+        else if (!this.dateInput.isActive) {
             this.handleBlur();
         }
     }
@@ -9714,7 +9760,7 @@ 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;
         }
@@ -9849,6 +9895,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">
@@ -9917,7 +9964,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: ["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: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.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: 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: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], 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: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.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: 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: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.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: [{
@@ -10013,6 +10060,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">
@@ -11828,22 +11876,7 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </div>
             </ng-template>
         </div>
-        <div class="k-time-footer k-action-buttons k-actions k-actions-stretched" *ngIf="setButton || cancelButton">
-            <button
-                #cancel
-                *ngIf="cancelButton"
-                class="k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base"
-                type="button"
-                [attr.title]="localization.get('cancelLabel')"
-                [attr.aria-label]="localization.get('cancelLabel')"
-                [kendoEventsOutsideAngular]="{
-                    click: handleReject,
-                    focus: handleFocus,
-                    blur: handleBlur
-                }"
-                [scope]="this"
-                [disabled]="disabled"
-            >{{localization.get('cancel')}}</button>
+        <div class="k-time-footer k-actions k-actions-stretched k-actions-horizontal" *ngIf="setButton || cancelButton">
             <button
                 #accept
                 *ngIf="setButton"
@@ -11860,6 +11893,21 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [scope]="this"
                 [disabled]="disabled"
             >{{localization.get('accept')}}</button>
+            <button
+                #cancel
+                *ngIf="cancelButton"
+                class="k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base"
+                type="button"
+                [attr.title]="localization.get('cancelLabel')"
+                [attr.aria-label]="localization.get('cancelLabel')"
+                [kendoEventsOutsideAngular]="{
+                    click: handleReject,
+                    focus: handleFocus,
+                    blur: handleBlur
+                }"
+                [scope]="this"
+                [disabled]="disabled"
+            >{{localization.get('cancel')}}</button>
         </div>
     `, isInline: true, components: [{ type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value", "isLast"], outputs: ["valueChange", "tabOutLastPart"] }], directives: [{ type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeSelectorComponent, decorators: [{
@@ -11948,22 +11996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </div>
             </ng-template>
         </div>
-        <div class="k-time-footer k-action-buttons k-actions k-actions-stretched" *ngIf="setButton || cancelButton">
-            <button
-                #cancel
-                *ngIf="cancelButton"
-                class="k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base"
-                type="button"
-                [attr.title]="localization.get('cancelLabel')"
-                [attr.aria-label]="localization.get('cancelLabel')"
-                [kendoEventsOutsideAngular]="{
-                    click: handleReject,
-                    focus: handleFocus,
-                    blur: handleBlur
-                }"
-                [scope]="this"
-                [disabled]="disabled"
-            >{{localization.get('cancel')}}</button>
+        <div class="k-time-footer k-actions k-actions-stretched k-actions-horizontal" *ngIf="setButton || cancelButton">
             <button
                 #accept
                 *ngIf="setButton"
@@ -11980,6 +12013,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [scope]="this"
                 [disabled]="disabled"
             >{{localization.get('accept')}}</button>
+            <button
+                #cancel
+                *ngIf="cancelButton"
+                class="k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base"
+                type="button"
+                [attr.title]="localization.get('cancelLabel')"
+                [attr.aria-label]="localization.get('cancelLabel')"
+                [kendoEventsOutsideAngular]="{
+                    click: handleReject,
+                    focus: handleFocus,
+                    blur: handleBlur
+                }"
+                [scope]="this"
+                [disabled]="disabled"
+            >{{localization.get('cancel')}}</button>
         </div>
     `
                 }]
@@ -12503,7 +12551,7 @@ class TimePickerComponent {
             this.toggleTimeSelector(show);
         }
     }
-    get input() {
+    get dateInput() {
         return this.pickerService.input;
     }
     get timeSelector() {
@@ -12517,7 +12565,7 @@ class TimePickerComponent {
      * 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
@@ -12544,6 +12592,7 @@ class TimePickerComponent {
      * @hidden
      */
     ngOnChanges(changes) {
+        var _a;
         if (changes.min || changes.max || changes.rangeValidation || changes.incompleteDateValidation) {
             this.timeRangeValidateFn = this.rangeValidation ? timeRangeValidator(this.min, this.max) : noop$2;
             this.incompleteValidator = this.incompleteDateValidation ? incompleteDateValidator() : noop$2;
@@ -12552,6 +12601,9 @@ class TimePickerComponent {
         if (changes.format) {
             this.verifyFormat();
         }
+        if (!this.focusableId || changes.focusableId) {
+            this.focusableId = (_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.focusableId;
+        }
     }
     /**
      * @hidden
@@ -12597,9 +12649,9 @@ class TimePickerComponent {
         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);
         }
     }
     /**
@@ -12625,7 +12677,7 @@ class TimePickerComponent {
      * @hidden
      */
     validate(control) {
-        return this.timeRangeValidateFn(control) || this.incompleteValidator(control, this.input && this.input.isDateIncomplete);
+        return this.timeRangeValidateFn(control) || this.incompleteValidator(control, this.dateInput && this.dateInput.isDateIncomplete);
     }
     /**
      * @hidden
@@ -12649,13 +12701,13 @@ class TimePickerComponent {
      * ```
      */
     focus() {
-        this.input.focus();
+        this.dateInput.focus();
     }
     /**
      * Blurs the TimePicker component.
      */
     blur() {
-        (this.timeSelector || this.input)['blur']();
+        (this.timeSelector || this.dateInput)['blur']();
     }
     /**
      * Toggles the visibility of the popup or actionSheet.
@@ -12728,7 +12780,7 @@ class TimePickerComponent {
      * @hidden
      */
     handleInputChange(value) {
-        const val = this.input.formatSections['date'] ? value : this.mergeTime(value);
+        const val = this.dateInput.formatSections['date'] ? value : this.mergeTime(value);
         this.handleChange(val);
     }
     /**
@@ -12832,6 +12884,7 @@ class TimePickerComponent {
         this.toggleFocus();
     }
     toggleActionSheet(show) {
+        var _a, _b;
         if (show === this._show) {
             return;
         }
@@ -12839,17 +12892,18 @@ class TimePickerComponent {
             this.actionSheet.toggle();
             this.updateActionSheetAdaptiveAppearance();
             this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'id', this.popupUID);
-            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.inputElement, attributeNames.ariaControls, this.popupUID);
         }
         else if (!show && this.isOpen) {
             // Need to disable the pointer events to avoid triggering focus on the timelist when acionsheet close down animation starts
             this.renderer.setStyle(this.timeSelector.element.nativeElement, 'pointer-events', 'none');
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute((_b = this.dateInput) === null || _b === void 0 ? void 0 : _b.inputElement, attributeNames.ariaControls);
             this.actionSheet.toggle();
         }
         this._show = show;
     }
     togglePopup(show) {
+        var _a, _b;
         if (show === this.isOpen) {
             return;
         }
@@ -12868,13 +12922,13 @@ class TimePickerComponent {
                 positionMode: 'absolute'
             });
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
-            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.inputElement, attributeNames.ariaControls, this.popupUID);
             this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
             this.popupRef.close();
             this.popupRef = null;
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute((_b = this.dateInput) === null || _b === void 0 ? void 0 : _b.inputElement, attributeNames.ariaControls);
         }
     }
     updateActionSheetAdaptiveAppearance() {
@@ -12900,7 +12954,7 @@ class TimePickerComponent {
         if (this.touchEnabled) {
             return;
         }
-        this.input.focus();
+        this.dateInput.focus();
     }
     toggleFocus() {
         if (!this.isActive) {
@@ -12915,9 +12969,9 @@ class TimePickerComponent {
             }
         }
         else if (!this.touchEnabled) {
-            this.input.focus();
+            this.dateInput.focus();
         }
-        else if (!this.input.isActive) {
+        else if (!this.dateInput.isActive) {
             this.handleBlur();
         }
     }
@@ -12966,7 +13020,7 @@ class TimePickerComponent {
         const currentTarget = args && currentFocusTarget(args); // relatedTarget || activeElement
         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.timeSelector && this.timeSelector.containsElement(currentTarget)) || isInsideActionSheet)) {
             return;
         }
@@ -13113,6 +13167,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             #actionSheet
             (overlayClick)="show=false"
             (collapse)="handleActionSheetCollapse()"
+            [titleId]="focusableId"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">
@@ -13201,7 +13256,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-    `, 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: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.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: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], 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: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.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: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -13315,6 +13370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             #actionSheet
             (overlayClick)="show=false"
             (collapse)="handleActionSheetCollapse()"
+            [titleId]="focusableId"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">
@@ -13791,15 +13847,9 @@ class DateTimePickerComponent {
     /**
      * @hidden
      */
-    get input() {
+    get dateInput() {
         return this.pickerService.input;
     }
-    /**
-     * @hidden
-     */
-    get inputElement() {
-        return this.wrapper.nativeElement.querySelector('input');
-    }
     /**
      * @hidden
      */
@@ -14147,6 +14197,7 @@ class DateTimePickerComponent {
         this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
     }
     ngOnChanges(changes) {
+        var _a;
         if (isPresent(changes['min']) || isPresent(changes['max'])) {
             this.verifyMinMaxRange();
         }
@@ -14157,6 +14208,9 @@ class DateTimePickerComponent {
             this.incompleteValidator = this.incompleteDateValidation ? incompleteDateValidator() : noop$2;
             this.onValidatorChange();
         }
+        if (!this.focusableId || changes['focusableId']) {
+            this.focusableId = (_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.focusableId;
+        }
     }
     ngOnDestroy() {
         if (this.isOpen) {
@@ -14176,7 +14230,7 @@ class DateTimePickerComponent {
             this.activeTabComponent.focus();
         }
         else {
-            this.input.focus();
+            this.dateInput.focus();
         }
     }
     /**
@@ -14187,7 +14241,7 @@ class DateTimePickerComponent {
             this.activeTabComponent.blur();
         }
         else {
-            this.input.blur();
+            this.dateInput.blur();
         }
     }
     /**
@@ -14239,7 +14293,7 @@ class DateTimePickerComponent {
      * @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
@@ -14253,7 +14307,7 @@ class DateTimePickerComponent {
      * Used by the TextBoxContainer to determine if the floating label will render in the input.
      */
     isEmpty() {
-        return !isPresent(this.value) && this.input.isEmpty();
+        return !isPresent(this.value) && this.dateInput.isEmpty();
     }
     /**
      * @hidden
@@ -14321,12 +14375,13 @@ class DateTimePickerComponent {
      * @hidden
      */
     handleTabChangeTransitionEnd(dateTimeSelector, event) {
+        var _a;
         // handle only the .k-datetime-selector element transition, ignore any child element transitions
         if (event.target !== dateTimeSelector) {
             return;
         }
         if (this.activeTab === 'time') {
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.inputElement, attributeNames.ariaActiveDescendant);
         }
         this.activeTabComponent.focus();
     }
@@ -14471,7 +14526,6 @@ class DateTimePickerComponent {
         this.cdr.markForCheck();
         // Reset tabs after actionsheet is collapsed, otherwise the tab change can be seen during the animation
         this.resetActiveTab();
-        this.input.focus();
     }
     /**
      * @hidden
@@ -14499,18 +14553,19 @@ class DateTimePickerComponent {
         this.resetActiveTab();
     }
     toggleActionSheet(show) {
+        var _a, _b, _c;
         if (isPresent(show) && show && !this.isOpen) {
             this.actionSheet.toggle();
             this.updateActionSheetAdaptiveAppearance();
             this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'id', this.popupUID);
-            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.inputElement, attributeNames.ariaControls, this.popupUID);
             this.setAriaActiveDescendant();
         }
         else if (isPresent(show) && !show && this.isOpen) {
             this.actionSheet.toggle();
             this.ariaActiveDescendantSubscription.unsubscribe();
-            this.renderer.removeAttribute(this.input.inputElement, attributeNames.ariaActiveDescendant);
-            this.renderer.removeAttribute(this.input.inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute((_b = this.dateInput) === null || _b === void 0 ? void 0 : _b.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute((_c = this.dateInput) === null || _c === void 0 ? void 0 : _c.inputElement, attributeNames.ariaControls);
         }
     }
     updateActionSheetAdaptiveAppearance() {
@@ -14625,13 +14680,14 @@ class DateTimePickerComponent {
             this.activeTabComponent.focus();
         }
         else if (!this.touchEnabled) {
-            this.input.focus();
+            this.dateInput.focus();
         }
-        else if (!this.input.isActive) {
+        else if (!this.dateInput.isActive) {
             this.handleBlur();
         }
     }
     openPopup() {
+        var _a;
         this.setCalendarValue(this.value);
         this.setTimeSelectorMinMax(this.value);
         const direction = this.localization.rtl ? 'right' : 'left';
@@ -14646,7 +14702,7 @@ class DateTimePickerComponent {
             popupAlign: { vertical: 'top', horizontal: direction }
         });
         this.popupRef.popupElement.setAttribute('id', this.popupUID);
-        this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+        this.renderer.setAttribute((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.inputElement, attributeNames.ariaControls, this.popupUID);
         this.setAriaActiveDescendant();
         this.popupRef.popupAnchorViewportLeave.subscribe(() => this.handleCancel());
         if (this.calendar.type === 'infinite') {
@@ -14663,15 +14719,16 @@ class DateTimePickerComponent {
         const focusedCellChangeEvent = this.calendar.type === 'infinite' ?
             this.calendar.monthView.focusedCellChange :
             this.calendar.multiViewCalendar.viewList.focusedCellChange;
-        this.ariaActiveDescendantSubscription = focusedCellChangeEvent.subscribe((id) => this.renderer.setAttribute(this.input.inputElement, attributeNames.ariaActiveDescendant, id));
+        this.ariaActiveDescendantSubscription = focusedCellChangeEvent.subscribe((id) => { var _a; return this.renderer.setAttribute((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.inputElement, attributeNames.ariaActiveDescendant, id); });
     }
     closePopup() {
+        var _a, _b;
         if (!this.isOpen) {
             return;
         }
         this.ariaActiveDescendantSubscription.unsubscribe();
-        this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
-        this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
+        this.renderer.removeAttribute((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.inputElement, attributeNames.ariaControls);
+        this.renderer.removeAttribute((_b = this.dateInput) === null || _b === void 0 ? void 0 : _b.inputElement, attributeNames.ariaActiveDescendant);
         this.popupRef.close();
         this.popupRef = null;
     }
@@ -14891,6 +14948,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             #actionSheet
             (overlayClick)="toggleDateTime(false)"
             (collapse)="handleActionSheetCollapse()"
+            [titleId]="calendar?.headerId"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">
@@ -15000,6 +15058,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 >
                     <div class="k-datetime-calendar-wrap">
                         <kendo-calendar
+                            #calendar
                             [ngClass]="{'k-calendar-lg': isAdaptive}"
                             [focusedDate]="focusedDate"
                             [(value)]="calendarValue"
@@ -15062,7 +15121,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
                 <div
                     *ngIf="!isAdaptive"
-                    class="k-datetime-footer k-action-buttons k-actions k-hstack k-justify-content-stretch"
+                    class="k-datetime-footer k-actions k-actions-stretched k-actions-horizontal"
                     [kendoEventsOutsideAngular]="{
                         focusin: handleFocus,
                         focusout: handleBlur
@@ -15070,39 +15129,39 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     [scope]="this"
                 >
                     <button
-                        *ngIf="cancelButton"
                         type="button"
-                        class="k-button k-time-cancel"
-                        [ngClass]="popupButtonsClasses()"
-                        [attr.title]="localization.get('cancelLabel')"
-                        [attr.aria-label]="localization.get('cancelLabel')"
+                        class="k-button k-time-accept"
+                        [ngClass]="popupButtonsClasses('primary')"
+                        [attr.title]="localization.get('acceptLabel')"
+                        [attr.aria-label]="localization.get('acceptLabel')"
+                        [disabled]="!calendarValue"
                         [kendoEventsOutsideAngular]="{
-                            click: handleCancel,
+                            click: handleAccept,
                             'keydown.tab': handleTab
                         }"
                         [scope]="this"
                     >
-                        {{localization.get('cancel')}}
+                        {{localization.get('accept')}}
                     </button>
                     <button
+                        *ngIf="cancelButton"
                         type="button"
-                        class="k-button k-time-accept"
-                        [ngClass]="popupButtonsClasses('primary')"
-                        [attr.title]="localization.get('acceptLabel')"
-                        [attr.aria-label]="localization.get('acceptLabel')"
-                        [disabled]="!calendarValue"
+                        class="k-button k-time-cancel"
+                        [ngClass]="popupButtonsClasses()"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
-                            click: handleAccept,
+                            click: handleCancel,
                             'keydown.tab': handleTab
                         }"
                         [scope]="this"
                     >
-                        {{localization.get('accept')}}
+                        {{localization.get('cancel')}}
                     </button>
                 </div>
             </div>
         </ng-template>
-    `, 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: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.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: 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: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], 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: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.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: 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: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -15253,6 +15312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             #actionSheet
             (overlayClick)="toggleDateTime(false)"
             (collapse)="handleActionSheetCollapse()"
+            [titleId]="calendar?.headerId"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">
@@ -15362,6 +15422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 >
                     <div class="k-datetime-calendar-wrap">
                         <kendo-calendar
+                            #calendar
                             [ngClass]="{'k-calendar-lg': isAdaptive}"
                             [focusedDate]="focusedDate"
                             [(value)]="calendarValue"
@@ -15424,7 +15485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </div>
                 <div
                     *ngIf="!isAdaptive"
-                    class="k-datetime-footer k-action-buttons k-actions k-hstack k-justify-content-stretch"
+                    class="k-datetime-footer k-actions k-actions-stretched k-actions-horizontal"
                     [kendoEventsOutsideAngular]="{
                         focusin: handleFocus,
                         focusout: handleBlur
@@ -15432,34 +15493,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [scope]="this"
                 >
                     <button
-                        *ngIf="cancelButton"
                         type="button"
-                        class="k-button k-time-cancel"
-                        [ngClass]="popupButtonsClasses()"
-                        [attr.title]="localization.get('cancelLabel')"
-                        [attr.aria-label]="localization.get('cancelLabel')"
+                        class="k-button k-time-accept"
+                        [ngClass]="popupButtonsClasses('primary')"
+                        [attr.title]="localization.get('acceptLabel')"
+                        [attr.aria-label]="localization.get('acceptLabel')"
+                        [disabled]="!calendarValue"
                         [kendoEventsOutsideAngular]="{
-                            click: handleCancel,
+                            click: handleAccept,
                             'keydown.tab': handleTab
                         }"
                         [scope]="this"
                     >
-                        {{localization.get('cancel')}}
+                        {{localization.get('accept')}}
                     </button>
                     <button
+                        *ngIf="cancelButton"
                         type="button"
-                        class="k-button k-time-accept"
-                        [ngClass]="popupButtonsClasses('primary')"
-                        [attr.title]="localization.get('acceptLabel')"
-                        [attr.aria-label]="localization.get('acceptLabel')"
-                        [disabled]="!calendarValue"
+                        class="k-button k-time-cancel"
+                        [ngClass]="popupButtonsClasses()"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
-                            click: handleAccept,
+                            click: handleCancel,
                             'keydown.tab': handleTab
                         }"
                         [scope]="this"
                     >
-                        {{localization.get('accept')}}
+                        {{localization.get('cancel')}}
                     </button>
                 </div>
             </div>
@@ -15679,14 +15740,14 @@ class DateRangeService {
      * Gets the start input element.
      */
     get inputStartElement() {
-        return this.startInput$.value.dateInput.nativeElement;
+        return this.startInput$.value.inputElement;
     }
     /**
      * @hidden
      * Gets the end input element.
      */
     get inputEndElement() {
-        return this.endInput$.value.dateInput.nativeElement;
+        return this.endInput$.value.inputElement;
     }
     /**
      * Activates the registered `DateRangePopup` component.
@@ -16098,10 +16159,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class DateRangePopupComponent {
-    constructor(popupService, dateRangeService, ref, zone, renderer, localization, cdr, rtl) {
+    constructor(popupService, dateRangeService, zone, renderer, localization, cdr, rtl) {
         this.popupService = popupService;
         this.dateRangeService = dateRangeService;
-        this.ref = ref;
         this.zone = zone;
         this.renderer = renderer;
         this.localization = localization;
@@ -16244,8 +16304,18 @@ class DateRangePopupComponent {
         }
     }
     ngAfterViewInit() {
-        this.calendarSubscriptions.add(this.contentCalendar.changes.subscribe((changes) => this.calendar = changes.first));
-        this.calendarSubscriptions.add(this.viewCalendar.changes.subscribe((changes) => this.calendar = changes.first));
+        this.calendarSubscriptions.add(this.contentCalendar.changes.subscribe((changes) => {
+            var _a;
+            this.calendar = changes.first;
+            this.actionSheet.titleId = (_a = changes.first) === null || _a === void 0 ? void 0 : _a.headerId;
+            this.cdr.detectChanges();
+        }));
+        this.calendarSubscriptions.add(this.viewCalendar.changes.subscribe((changes) => {
+            var _a;
+            this.calendar = changes.first;
+            this.actionSheet.titleId = (_a = changes.first) === null || _a === void 0 ? void 0 : _a.headerId;
+            this.cdr.detectChanges();
+        }));
         if (isWindowAvailable()) {
             this.zone.runOutsideAngular(() => this.windowBlurSubscription = fromEvent(window, 'blur').subscribe(this.handleWindowBlur.bind(this)));
         }
@@ -16276,7 +16346,7 @@ class DateRangePopupComponent {
             this.activateSubscription.unsubscribe();
         }
         this.show = true;
-        this.ref.markForCheck();
+        this.cdr.markForCheck();
         this.zone.runOutsideAngular(() => {
             this.activateSubscription = merge(this.contentCalendar.changes, this.viewCalendar.changes)
                 .pipe(filter(changes => changes && changes.first), map(changes => changes.first))
@@ -16351,6 +16421,48 @@ class DateRangePopupComponent {
         }
         this.windowSize = windowSize();
     }
+    /**
+     * @hidden
+     */
+    closePopup(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.toggle(false);
+        if (this.dateRangeService.activeRangeEnd === 'start' || !this.dateRangeService.activeRangeEnd) {
+            this.dateRangeService.startInput$.value.focus();
+        }
+        else {
+            this.dateRangeService.endInput$.value.focus();
+        }
+        ;
+    }
+    /**
+     * @hidden
+     */
+    handleTab(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.dateRangeService.activeRangeEnd === 'start' || !this.dateRangeService.activeRangeEnd) {
+            this.dateRangeService.setActiveRangeEnd('end');
+        }
+        else {
+            this.dateRangeService.endInput$.value.focus();
+        }
+    }
+    ;
+    /**
+     * @hidden
+     */
+    handleShiftTab(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.dateRangeService.activeRangeEnd === 'end') {
+            this.dateRangeService.setActiveRangeEnd('start');
+        }
+        else {
+            this.dateRangeService.startInput$.value.focus();
+        }
+    }
     handleWindowBlur() {
         if (!this.show || this.actionSheet.expanded) {
             return;
@@ -16471,7 +16583,7 @@ class DateRangePopupComponent {
         }
     }
 }
-DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1$2.PopupService }, { token: DateRangeService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1$2.PopupService }, { token: DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
         LocalizationService,
         {
@@ -16495,10 +16607,10 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         </ng-container> 
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
-            <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
+            <kendo-multiviewcalendar kendoDateRangeSelection (onClosePopup)="closePopup($event)" (onTabPress)="handleTab($event)" (onShiftTabPress)="handleShiftTab($event)"></kendo-multiviewcalendar>
         </ng-template>
 
-        <kendo-actionsheet 
+        <kendo-actionsheet
             #actionSheet
             (overlayClick)="show=false"
             (collapse)="onBlur.emit()"
@@ -16535,7 +16647,6 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                         <kendo-multiviewcalendar
                             class="k-calendar-lg"
                             orientation="vertical"
-                            #test
                             kendoDateRangeSelection
                             [shouldSetRange]="false">
                         </kendo-multiviewcalendar>
@@ -16563,7 +16674,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
             </ng-template>
         </kendo-actionsheet>
-    `, 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"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.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"] }], directives: [{ type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd", "shouldSetRange"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, 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", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.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"] }], directives: [{ type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd", "shouldSetRange"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
@@ -16593,10 +16704,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-container> 
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
-            <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
+            <kendo-multiviewcalendar kendoDateRangeSelection (onClosePopup)="closePopup($event)" (onTabPress)="handleTab($event)" (onShiftTabPress)="handleShiftTab($event)"></kendo-multiviewcalendar>
         </ng-template>
 
-        <kendo-actionsheet 
+        <kendo-actionsheet
             #actionSheet
             (overlayClick)="show=false"
             (collapse)="onBlur.emit()"
@@ -16633,7 +16744,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         <kendo-multiviewcalendar
                             class="k-calendar-lg"
                             orientation="vertical"
-                            #test
                             kendoDateRangeSelection
                             [shouldSetRange]="false">
                         </kendo-multiviewcalendar>
@@ -16664,7 +16774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
     `
                 }]
         }], ctorParameters: function () {
-        return [{ type: i1$2.PopupService }, { type: DateRangeService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+        return [{ type: i1$2.PopupService }, { type: DateRangeService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -16837,7 +16947,6 @@ 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) {