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

package/datepicker/datepicker.component.d.ts

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

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

@@ -37,7 +37,6 @@ import * as i0 from "@angular/core";
 export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     private popupService;
     private dateRangeService;
-    private ref;
     private zone;
     private renderer;
     localization: LocalizationService;
@@ -180,7 +179,7 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     private _calendar;
     private _show;
     private windowSize;
-    constructor(popupService: PopupService, dateRangeService: DateRangeService, ref: ChangeDetectorRef, zone: NgZone, renderer: Renderer2, localization: LocalizationService, cdr: ChangeDetectorRef, rtl: boolean);
+    constructor(popupService: PopupService, dateRangeService: DateRangeService, zone: NgZone, renderer: Renderer2, localization: LocalizationService, cdr: ChangeDetectorRef, rtl: boolean);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -243,6 +242,6 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     private toggleDateRange;
     private toggleActionSheet;
     private updateActionSheetAdaptiveAppearance;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePopupComponent, [null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePopupComponent, [null, null, null, null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePopupComponent, "kendo-daterange-popup", ["kendo-daterange-popup"], { "animate": "animate"; "anchor": "anchor"; "anchorAlign": "anchorAlign"; "appendTo": "appendTo"; "collision": "collision"; "popupAlign": "popupAlign"; "margin": "margin"; "adaptiveMode": "adaptiveMode"; "title": "title"; "subtitle": "subtitle"; }, { "open": "open"; "close": "close"; "onBlur": "blur"; "onFocus": "focus"; "cancel": "cancel"; }, ["contentTemplate", "contentCalendar"], never>;
 }

package/datetimepicker/datetimepicker.component.d.ts

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

package/esm2020/datepicker/datepicker.component.mjs

@@ -550,7 +550,7 @@ export class DatePickerComponent {
      * Used by the TextBoxContainer to determine if the component is empty.
      */
     isEmpty() {
-        return !this.value && this.input.isEmpty();
+        return !this.value && this.dateInput.isEmpty();
     }
     /**
      * @hidden
@@ -583,6 +583,9 @@ export class DatePickerComponent {
             this.incompleteValidator = this.incompleteDateValidation ? incompleteDateValidator() : noop;
             this.onValidatorChange();
         }
+        if (!this.focusableId || changes.focusableId) {
+            this.focusableId = this.dateInput?.focusableId;
+        }
     }
     /**
      * @hidden
@@ -612,9 +615,9 @@ export class DatePickerComponent {
         this.verifyValue(value);
         this.value = cloneDate(value);
         this.cdr.markForCheck();
-        if (!value && this.input) {
-            this.input.placeholder = this.placeholder;
-            this.input.writeValue(value);
+        if (!value && this.dateInput) {
+            this.dateInput.placeholder = this.placeholder;
+            this.dateInput.writeValue(value);
         }
     }
     /**
@@ -640,7 +643,7 @@ export class DatePickerComponent {
      * @hidden
      */
     validate(control) {
-        return this.minValidateFn(control) || this.maxValidateFn(control) || this.disabledDatesValidateFn(control) || this.incompleteValidator(control, this.input && this.input.isDateIncomplete);
+        return this.minValidateFn(control) || this.maxValidateFn(control) || this.disabledDatesValidateFn(control) || this.incompleteValidator(control, this.dateInput && this.dateInput.isDateIncomplete);
     }
     /**
      * @hidden
@@ -677,13 +680,13 @@ export class DatePickerComponent {
      * ```
      */
     focus() {
-        this.input.focus();
+        this.dateInput.focus();
     }
     /**
      * Blurs the DatePicker component.
      */
     blur() {
-        (this.calendar || this.input)['blur']();
+        (this.calendar || this.dateInput)['blur']();
     }
     /**
      * Toggles the visibility of the popup or actionSheet.
@@ -745,7 +748,7 @@ export class DatePickerComponent {
      * @hidden
      */
     handleInputChange(value) {
-        this.handleChange(this.input.formatSections['time'] ? value : this.mergeTime(value));
+        this.handleChange(this.dateInput.formatSections['time'] ? value : this.mergeTime(value));
     }
     /**
      * @hidden
@@ -767,7 +770,7 @@ export class DatePickerComponent {
         }
         return appendTo === 'component' ? this.container : appendTo;
     }
-    get input() {
+    get dateInput() {
         return this.pickerService.input;
     }
     get calendar() {
@@ -824,7 +827,7 @@ export class DatePickerComponent {
             }
         }
         if (keyCode === Keys.Tab && this.show && this.calendar.isActive && isTabExitingCalendar(this.calendarType, target, shiftKey)) {
-            this.input.focus();
+            this.dateInput.focus();
             this.show = false;
         }
     }
@@ -857,7 +860,7 @@ export class DatePickerComponent {
             });
             this.setAriaActiveDescendant();
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
-            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaControls, this.popupUID);
             this.subscription = this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
@@ -865,8 +868,8 @@ export class DatePickerComponent {
             this.popupRef = null;
             this.subscription.unsubscribe();
             this.ariaActiveDescendantSubscription.unsubscribe();
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant);
             this.cdr.detectChanges();
         }
     }
@@ -879,13 +882,13 @@ export class DatePickerComponent {
             this.updateActionSheetAdaptiveAppearance();
             this.setAriaActiveDescendant();
             this.actionSheet.element.nativeElement.setAttribute('id', this.popupUID);
-            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaControls, this.popupUID);
         }
         else if (!show && this.isOpen) {
             this.actionSheet.toggle();
             this.ariaActiveDescendantSubscription.unsubscribe();
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaControls);
         }
         this._show = show;
     }
@@ -912,13 +915,13 @@ export class DatePickerComponent {
         const focusedCellChangeEvent = this.calendar.type === 'infinite' ?
             this.calendar.monthView.focusedCellChange :
             this.calendar.multiViewCalendar.viewList.focusedCellChange;
-        this.ariaActiveDescendantSubscription = focusedCellChangeEvent.subscribe((id) => this.renderer.setAttribute(this.inputElement, attributeNames.ariaActiveDescendant, id));
+        this.ariaActiveDescendantSubscription = focusedCellChangeEvent.subscribe((id) => this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant, id));
     }
     focusInput() {
         if (this.touchEnabled) {
             return;
         }
-        this.input.focus();
+        this.dateInput.focus();
     }
     toggleFocus() {
         if (!this.isActive) {
@@ -933,9 +936,9 @@ export class DatePickerComponent {
             }
         }
         else if (!this.touchEnabled) {
-            this.input.focus();
+            this.dateInput.focus();
         }
-        else if (!this.input.isActive) {
+        else if (!this.dateInput.isActive) {
             this.handleBlur();
         }
     }
@@ -983,7 +986,7 @@ export class DatePickerComponent {
         const currentTarget = args && currentFocusTarget(args);
         const target = args && args.target;
         const isInsideActionSheet = this.actionSheet && (this.actionSheet.element.nativeElement.contains(target) || this.actionSheet.element.nativeElement.contains(currentTarget));
-        if (currentTarget && (this.input.containsElement(currentTarget) ||
+        if (currentTarget && (this.dateInput.containsElement(currentTarget) ||
             (this.calendar && this.calendar.containsElement(currentTarget)) || isInsideActionSheet)) {
             return;
         }
@@ -1118,6 +1121,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             }"
             [scope]="this"
             (collapse)="handleActionSheetCollapse()"
+            [titleId]="calendar?.headerId"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">
@@ -1282,6 +1286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }"
             [scope]="this"
             (collapse)="handleActionSheetCollapse()"
+            [titleId]="calendar?.headerId"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">

package/esm2020/daterange/date-range-popup.component.mjs

@@ -48,10 +48,9 @@ import * as i10 from "@angular/common";
  * ```
  */
 export 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;
@@ -194,8 +193,16 @@ export 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) => {
+            this.calendar = changes.first;
+            this.actionSheet.titleId = changes.first?.headerId;
+            this.cdr.detectChanges();
+        }));
+        this.calendarSubscriptions.add(this.viewCalendar.changes.subscribe((changes) => {
+            this.calendar = changes.first;
+            this.actionSheet.titleId = changes.first?.headerId;
+            this.cdr.detectChanges();
+        }));
         if (isWindowAvailable()) {
             this.zone.runOutsideAngular(() => this.windowBlurSubscription = fromEvent(window, 'blur').subscribe(this.handleWindowBlur.bind(this)));
         }
@@ -226,7 +233,7 @@ export 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))
@@ -463,7 +470,7 @@ export class DateRangePopupComponent {
         }
     }
 }
-DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1.PopupService }, { token: i2.DateRangeService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.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.PopupService }, { token: i2.DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.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,
         {
@@ -490,7 +497,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()"
@@ -527,7 +534,6 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                         <kendo-multiviewcalendar
                             class="k-calendar-lg"
                             orientation="vertical"
-                            #test
                             kendoDateRangeSelection
                             [shouldSetRange]="false">
                         </kendo-multiviewcalendar>
@@ -588,7 +594,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()"
@@ -625,7 +631,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>
@@ -655,7 +660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-actionsheet>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.DateRangeService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.DateRangeService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,

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

@@ -82,14 +82,14 @@ export 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.

package/esm2020/datetimepicker/datetimepicker.component.mjs

@@ -265,15 +265,9 @@ export class DateTimePickerComponent {
     /**
      * @hidden
      */
-    get input() {
+    get dateInput() {
         return this.pickerService.input;
     }
-    /**
-     * @hidden
-     */
-    get inputElement() {
-        return this.wrapper.nativeElement.querySelector('input');
-    }
     /**
      * @hidden
      */
@@ -626,6 +620,9 @@ export class DateTimePickerComponent {
             this.incompleteValidator = this.incompleteDateValidation ? incompleteDateValidator() : noop;
             this.onValidatorChange();
         }
+        if (!this.focusableId || changes['focusableId']) {
+            this.focusableId = this.dateInput?.focusableId;
+        }
     }
     ngOnDestroy() {
         if (this.isOpen) {
@@ -645,7 +642,7 @@ export class DateTimePickerComponent {
             this.activeTabComponent.focus();
         }
         else {
-            this.input.focus();
+            this.dateInput.focus();
         }
     }
     /**
@@ -656,7 +653,7 @@ export class DateTimePickerComponent {
             this.activeTabComponent.blur();
         }
         else {
-            this.input.blur();
+            this.dateInput.blur();
         }
     }
     /**
@@ -708,7 +705,7 @@ export 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
@@ -722,7 +719,7 @@ export 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
@@ -795,7 +792,7 @@ export class DateTimePickerComponent {
             return;
         }
         if (this.activeTab === 'time') {
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant);
         }
         this.activeTabComponent.focus();
     }
@@ -940,7 +937,6 @@ export 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
@@ -972,14 +968,14 @@ export class DateTimePickerComponent {
             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(this.dateInput?.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(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaControls);
         }
     }
     updateActionSheetAdaptiveAppearance() {
@@ -1094,9 +1090,9 @@ export 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();
         }
     }
@@ -1115,7 +1111,7 @@ export 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(this.dateInput?.inputElement, attributeNames.ariaControls, this.popupUID);
         this.setAriaActiveDescendant();
         this.popupRef.popupAnchorViewportLeave.subscribe(() => this.handleCancel());
         if (this.calendar.type === 'infinite') {
@@ -1132,15 +1128,15 @@ export 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) => this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant, id));
     }
     closePopup() {
         if (!this.isOpen) {
             return;
         }
         this.ariaActiveDescendantSubscription.unsubscribe();
-        this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
-        this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
+        this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaControls);
+        this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant);
         this.popupRef.close();
         this.popupRef = null;
     }
@@ -1360,6 +1356,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">
@@ -1469,6 +1466,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"
@@ -1722,6 +1720,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">
@@ -1831,6 +1830,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"

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export 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/'
 };

package/esm2020/timepicker/timepicker.component.mjs

@@ -443,7 +443,7 @@ export class TimePickerComponent {
             this.toggleTimeSelector(show);
         }
     }
-    get input() {
+    get dateInput() {
         return this.pickerService.input;
     }
     get timeSelector() {
@@ -457,7 +457,7 @@ export 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
@@ -492,6 +492,9 @@ export class TimePickerComponent {
         if (changes.format) {
             this.verifyFormat();
         }
+        if (!this.focusableId || changes.focusableId) {
+            this.focusableId = this.dateInput?.focusableId;
+        }
     }
     /**
      * @hidden
@@ -537,9 +540,9 @@ export 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);
         }
     }
     /**
@@ -565,7 +568,7 @@ export 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
@@ -589,13 +592,13 @@ export 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.
@@ -668,7 +671,7 @@ export 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);
     }
     /**
@@ -779,12 +782,12 @@ export 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(this.dateInput?.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(this.dateInput?.inputElement, attributeNames.ariaControls);
             this.actionSheet.toggle();
         }
         this._show = show;
@@ -808,13 +811,13 @@ export class TimePickerComponent {
                 positionMode: 'absolute'
             });
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
-            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaControls, this.popupUID);
             this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
             this.popupRef.close();
             this.popupRef = null;
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaControls);
         }
     }
     updateActionSheetAdaptiveAppearance() {
@@ -840,7 +843,7 @@ export class TimePickerComponent {
         if (this.touchEnabled) {
             return;
         }
-        this.input.focus();
+        this.dateInput.focus();
     }
     toggleFocus() {
         if (!this.isActive) {
@@ -855,9 +858,9 @@ export class TimePickerComponent {
             }
         }
         else if (!this.touchEnabled) {
-            this.input.focus();
+            this.dateInput.focus();
         }
-        else if (!this.input.isActive) {
+        else if (!this.dateInput.isActive) {
             this.handleBlur();
         }
     }
@@ -906,7 +909,7 @@ export 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;
         }
@@ -1053,6 +1056,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">
@@ -1255,6 +1259,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">