@progress/kendo-angular-dateinputs 13.0.0-develop.9 → 13.0.0

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: 1685111006,
-    version: '13.0.0-develop.9',
+    publishDate: 1686055688,
+    version: '13.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -9321,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
@@ -9346,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;
@@ -9354,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
@@ -9383,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);
         }
     }
     /**
@@ -9411,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
@@ -9448,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.
@@ -9516,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
@@ -9538,7 +9542,7 @@ class DatePickerComponent {
         }
         return appendTo === 'component' ? this.container : appendTo;
     }
-    get input() {
+    get dateInput() {
         return this.pickerService.input;
     }
     get calendar() {
@@ -9595,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;
         }
     }
@@ -9610,6 +9614,7 @@ class DatePickerComponent {
         this.toggleFocus();
     }
     togglePopup(show) {
+        var _a, _b, _c;
         if (show === this._show) {
             return;
         }
@@ -9628,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 {
@@ -9636,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;
         }
@@ -9650,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;
     }
@@ -9683,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) {
@@ -9704,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();
         }
     }
@@ -9754,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;
         }
@@ -9889,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">
@@ -10053,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">
@@ -12543,7 +12551,7 @@ class TimePickerComponent {
             this.toggleTimeSelector(show);
         }
     }
-    get input() {
+    get dateInput() {
         return this.pickerService.input;
     }
     get timeSelector() {
@@ -12557,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
@@ -12584,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;
@@ -12592,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
@@ -12637,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);
         }
     }
     /**
@@ -12665,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
@@ -12689,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.
@@ -12768,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);
     }
     /**
@@ -12872,6 +12884,7 @@ class TimePickerComponent {
         this.toggleFocus();
     }
     toggleActionSheet(show) {
+        var _a, _b;
         if (show === this._show) {
             return;
         }
@@ -12879,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;
         }
@@ -12908,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() {
@@ -12940,7 +12954,7 @@ class TimePickerComponent {
         if (this.touchEnabled) {
             return;
         }
-        this.input.focus();
+        this.dateInput.focus();
     }
     toggleFocus() {
         if (!this.isActive) {
@@ -12955,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();
         }
     }
@@ -13006,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;
         }
@@ -13153,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">
@@ -13355,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">
@@ -13831,15 +13847,9 @@ class DateTimePickerComponent {
     /**
      * @hidden
      */
-    get input() {
+    get dateInput() {
         return this.pickerService.input;
     }
-    /**
-     * @hidden
-     */
-    get inputElement() {
-        return this.wrapper.nativeElement.querySelector('input');
-    }
     /**
      * @hidden
      */
@@ -14187,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();
         }
@@ -14197,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) {
@@ -14216,7 +14230,7 @@ class DateTimePickerComponent {
             this.activeTabComponent.focus();
         }
         else {
-            this.input.focus();
+            this.dateInput.focus();
         }
     }
     /**
@@ -14227,7 +14241,7 @@ class DateTimePickerComponent {
             this.activeTabComponent.blur();
         }
         else {
-            this.input.blur();
+            this.dateInput.blur();
         }
     }
     /**
@@ -14279,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
@@ -14293,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
@@ -14361,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();
     }
@@ -14511,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
@@ -14539,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() {
@@ -14665,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';
@@ -14686,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') {
@@ -14703,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;
     }
@@ -14931,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">
@@ -15040,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"
@@ -15293,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">
@@ -15402,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"
@@ -15719,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.
@@ -16138,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;
@@ -16284,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)));
         }
@@ -16316,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))
@@ -16553,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,
         {
@@ -16580,7 +16610,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             <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()"
@@ -16617,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>
@@ -16678,7 +16707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <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()"
@@ -16715,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>
@@ -16746,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,