@progress/kendo-angular-dateinputs 12.2.0-develop.2 → 12.2.0-develop.4

package/datepicker/datepicker.component.d.ts

@@ -460,6 +460,7 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
      * @hidden
      */
     xIcon: SVGIcon;
+    private get inputElement();
     private _popupSettings;
     private _show;
     private _value;

package/esm2020/datepicker/datepicker.component.mjs

@@ -542,6 +542,9 @@ export class DatePickerComponent {
             this.toggleCalendar(show);
         }
     }
+    get inputElement() {
+        return this.wrapper.nativeElement.querySelector('input');
+    }
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty.
@@ -840,7 +843,6 @@ export class DatePickerComponent {
             return;
         }
         this._show = show;
-        const inputElement = this.wrapper.nativeElement.querySelector('input');
         if (show) {
             const direction = this.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
@@ -855,7 +857,7 @@ export class DatePickerComponent {
             });
             this.setAriaActiveDescendant();
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
-            this.renderer.setAttribute(inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
             this.subscription = this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
@@ -863,8 +865,8 @@ export class DatePickerComponent {
             this.popupRef = null;
             this.subscription.unsubscribe();
             this.ariaActiveDescendantSubscription.unsubscribe();
-            this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
-            this.renderer.removeAttribute(inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
             this.cdr.detectChanges();
         }
     }
@@ -876,11 +878,14 @@ export class DatePickerComponent {
             this.actionSheet.toggle();
             this.updateActionSheetAdaptiveAppearance();
             this.setAriaActiveDescendant();
+            this.actionSheet.element.nativeElement.setAttribute('id', this.popupUID);
+            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
         }
         else if (!show && this.isOpen) {
             this.actionSheet.toggle();
             this.ariaActiveDescendantSubscription.unsubscribe();
-            this.renderer.removeAttribute(this.input.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
         }
         this._show = show;
     }
@@ -907,7 +912,7 @@ 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.input.inputElement, attributeNames.ariaActiveDescendant, id));
+        this.ariaActiveDescendantSubscription = focusedCellChangeEvent.subscribe((id) => this.renderer.setAttribute(this.inputElement, attributeNames.ariaActiveDescendant, id));
     }
     focusInput() {
         if (this.touchEnabled) {
@@ -1128,6 +1133,8 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">
@@ -1290,6 +1297,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">

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

@@ -394,6 +394,7 @@ export class DateRangePopupComponent {
         if (show && !this.actionSheet.expanded) {
             this.actionSheet.toggle();
             this.updateActionSheetAdaptiveAppearance();
+            this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'id', this.popupUID);
         }
         else if (!show && this.actionSheet.expanded) {
             this.actionSheet.toggle();
@@ -470,6 +471,8 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">
@@ -566,6 +569,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">

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

@@ -114,9 +114,6 @@ export class DateRangeService {
      */
     deactivatePopup() {
         const dateRangePopup = this.dateRangePopup$.value;
-        if (!(dateRangePopup && dateRangePopup.show)) {
-            return;
-        }
         if (this.startInput$.value) {
             this.renderer.removeAttribute(this.inputStartElement, attributeNames.ariaControls);
             this.renderer.setAttribute(this.inputStartElement, attributeNames.ariaExpanded, 'false');
@@ -125,6 +122,9 @@ export class DateRangeService {
             this.renderer.setAttribute(this.inputEndElement, attributeNames.ariaExpanded, 'false');
             this.renderer.removeAttribute(this.inputEndElement, attributeNames.ariaActiveDescendant);
         }
+        if (!(dateRangePopup && dateRangePopup.show)) {
+            return;
+        }
         dateRangePopup.show = false;
     }
     /**

package/esm2020/datetimepicker/datetimepicker.component.mjs

@@ -940,6 +940,7 @@ 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
@@ -970,12 +971,15 @@ export class DateTimePickerComponent {
         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.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);
         }
     }
     updateActionSheetAdaptiveAppearance() {
@@ -1371,6 +1375,8 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="toggleDateTime(false)">
@@ -1731,6 +1737,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="toggleDateTime(false)">

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: 1684484707,
-    version: '12.2.0-develop.2',
+    publishDate: 1684491463,
+    version: '12.2.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/timepicker/timepicker.component.mjs

@@ -449,6 +449,9 @@ export class TimePickerComponent {
     get timeSelector() {
         return this.pickerService.timeSelector;
     }
+    get inputElement() {
+        return this.wrapper.nativeElement.querySelector('input');
+    }
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty
@@ -775,10 +778,13 @@ export class TimePickerComponent {
         if (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);
         }
         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.actionSheet.toggle();
         }
         this._show = show;
@@ -789,7 +795,6 @@ export class TimePickerComponent {
         }
         this._show = show;
         this.cdr.markForCheck();
-        const inputElement = this.wrapper.nativeElement.querySelector('input');
         if (show) {
             const direction = this.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
@@ -803,13 +808,13 @@ export class TimePickerComponent {
                 positionMode: 'absolute'
             });
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
-            this.renderer.setAttribute(inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
             this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
             this.popupRef.close();
             this.popupRef = null;
-            this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
         }
     }
     updateActionSheetAdaptiveAppearance() {
@@ -1064,6 +1069,8 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
                                 size="large"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">
                             </button>
@@ -1264,6 +1271,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
                                 size="large"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">
                             </button>

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: 1684484707,
-    version: '12.2.0-develop.2',
+    publishDate: 1684491463,
+    version: '12.2.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -9273,6 +9273,9 @@ class DatePickerComponent {
             this.toggleCalendar(show);
         }
     }
+    get inputElement() {
+        return this.wrapper.nativeElement.querySelector('input');
+    }
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty.
@@ -9571,7 +9574,6 @@ class DatePickerComponent {
             return;
         }
         this._show = show;
-        const inputElement = this.wrapper.nativeElement.querySelector('input');
         if (show) {
             const direction = this.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
@@ -9586,7 +9588,7 @@ class DatePickerComponent {
             });
             this.setAriaActiveDescendant();
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
-            this.renderer.setAttribute(inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
             this.subscription = this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
@@ -9594,8 +9596,8 @@ class DatePickerComponent {
             this.popupRef = null;
             this.subscription.unsubscribe();
             this.ariaActiveDescendantSubscription.unsubscribe();
-            this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
-            this.renderer.removeAttribute(inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
             this.cdr.detectChanges();
         }
     }
@@ -9607,11 +9609,14 @@ class DatePickerComponent {
             this.actionSheet.toggle();
             this.updateActionSheetAdaptiveAppearance();
             this.setAriaActiveDescendant();
+            this.actionSheet.element.nativeElement.setAttribute('id', this.popupUID);
+            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
         }
         else if (!show && this.isOpen) {
             this.actionSheet.toggle();
             this.ariaActiveDescendantSubscription.unsubscribe();
-            this.renderer.removeAttribute(this.input.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
         }
         this._show = show;
     }
@@ -9638,7 +9643,7 @@ 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.input.inputElement, attributeNames.ariaActiveDescendant, id));
+        this.ariaActiveDescendantSubscription = focusedCellChangeEvent.subscribe((id) => this.renderer.setAttribute(this.inputElement, attributeNames.ariaActiveDescendant, id));
     }
     focusInput() {
         if (this.touchEnabled) {
@@ -9859,6 +9864,8 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">
@@ -10021,6 +10028,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">
@@ -12500,6 +12509,9 @@ class TimePickerComponent {
     get timeSelector() {
         return this.pickerService.timeSelector;
     }
+    get inputElement() {
+        return this.wrapper.nativeElement.querySelector('input');
+    }
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty
@@ -12826,10 +12838,13 @@ class TimePickerComponent {
         if (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);
         }
         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.actionSheet.toggle();
         }
         this._show = show;
@@ -12840,7 +12855,6 @@ class TimePickerComponent {
         }
         this._show = show;
         this.cdr.markForCheck();
-        const inputElement = this.wrapper.nativeElement.querySelector('input');
         if (show) {
             const direction = this.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
@@ -12854,13 +12868,13 @@ class TimePickerComponent {
                 positionMode: 'absolute'
             });
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
-            this.renderer.setAttribute(inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
             this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
             this.popupRef.close();
             this.popupRef = null;
-            this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
         }
     }
     updateActionSheetAdaptiveAppearance() {
@@ -13115,6 +13129,8 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
                                 size="large"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">
                             </button>
@@ -13315,6 +13331,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
                                 size="large"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">
                             </button>
@@ -14453,6 +14471,7 @@ 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
@@ -14483,12 +14502,15 @@ class DateTimePickerComponent {
         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.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);
         }
     }
     updateActionSheetAdaptiveAppearance() {
@@ -14884,6 +14906,8 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="toggleDateTime(false)">
@@ -15244,6 +15268,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="toggleDateTime(false)">
@@ -15685,9 +15711,6 @@ class DateRangeService {
      */
     deactivatePopup() {
         const dateRangePopup = this.dateRangePopup$.value;
-        if (!(dateRangePopup && dateRangePopup.show)) {
-            return;
-        }
         if (this.startInput$.value) {
             this.renderer.removeAttribute(this.inputStartElement, attributeNames.ariaControls);
             this.renderer.setAttribute(this.inputStartElement, attributeNames.ariaExpanded, 'false');
@@ -15696,6 +15719,9 @@ class DateRangeService {
             this.renderer.setAttribute(this.inputEndElement, attributeNames.ariaExpanded, 'false');
             this.renderer.removeAttribute(this.inputEndElement, attributeNames.ariaActiveDescendant);
         }
+        if (!(dateRangePopup && dateRangePopup.show)) {
+            return;
+        }
         dateRangePopup.show = false;
     }
     /**
@@ -16418,6 +16444,7 @@ class DateRangePopupComponent {
         if (show && !this.actionSheet.expanded) {
             this.actionSheet.toggle();
             this.updateActionSheetAdaptiveAppearance();
+            this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'id', this.popupUID);
         }
         else if (!show && this.actionSheet.expanded) {
             this.actionSheet.toggle();
@@ -16494,6 +16521,8 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">
@@ -16590,6 +16619,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">

package/fesm2020/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: 1684484707,
-    version: '12.2.0-develop.2',
+    publishDate: 1684491463,
+    version: '12.2.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -9262,6 +9262,9 @@ class DatePickerComponent {
             this.toggleCalendar(show);
         }
     }
+    get inputElement() {
+        return this.wrapper.nativeElement.querySelector('input');
+    }
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty.
@@ -9560,7 +9563,6 @@ class DatePickerComponent {
             return;
         }
         this._show = show;
-        const inputElement = this.wrapper.nativeElement.querySelector('input');
         if (show) {
             const direction = this.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
@@ -9575,7 +9577,7 @@ class DatePickerComponent {
             });
             this.setAriaActiveDescendant();
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
-            this.renderer.setAttribute(inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
             this.subscription = this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
@@ -9583,8 +9585,8 @@ class DatePickerComponent {
             this.popupRef = null;
             this.subscription.unsubscribe();
             this.ariaActiveDescendantSubscription.unsubscribe();
-            this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
-            this.renderer.removeAttribute(inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
             this.cdr.detectChanges();
         }
     }
@@ -9596,11 +9598,14 @@ class DatePickerComponent {
             this.actionSheet.toggle();
             this.updateActionSheetAdaptiveAppearance();
             this.setAriaActiveDescendant();
+            this.actionSheet.element.nativeElement.setAttribute('id', this.popupUID);
+            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
         }
         else if (!show && this.isOpen) {
             this.actionSheet.toggle();
             this.ariaActiveDescendantSubscription.unsubscribe();
-            this.renderer.removeAttribute(this.input.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
         }
         this._show = show;
     }
@@ -9627,7 +9632,7 @@ 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.input.inputElement, attributeNames.ariaActiveDescendant, id));
+        this.ariaActiveDescendantSubscription = focusedCellChangeEvent.subscribe((id) => this.renderer.setAttribute(this.inputElement, attributeNames.ariaActiveDescendant, id));
     }
     focusInput() {
         if (this.touchEnabled) {
@@ -9848,6 +9853,8 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">
@@ -10010,6 +10017,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">
@@ -12483,6 +12492,9 @@ class TimePickerComponent {
     get timeSelector() {
         return this.pickerService.timeSelector;
     }
+    get inputElement() {
+        return this.wrapper.nativeElement.querySelector('input');
+    }
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty
@@ -12809,10 +12821,13 @@ class TimePickerComponent {
         if (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);
         }
         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.actionSheet.toggle();
         }
         this._show = show;
@@ -12823,7 +12838,6 @@ class TimePickerComponent {
         }
         this._show = show;
         this.cdr.markForCheck();
-        const inputElement = this.wrapper.nativeElement.querySelector('input');
         if (show) {
             const direction = this.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
@@ -12837,13 +12851,13 @@ class TimePickerComponent {
                 positionMode: 'absolute'
             });
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
-            this.renderer.setAttribute(inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
             this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
             this.popupRef.close();
             this.popupRef = null;
-            this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
         }
     }
     updateActionSheetAdaptiveAppearance() {
@@ -13098,6 +13112,8 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
                                 size="large"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">
                             </button>
@@ -13298,6 +13314,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
                                 size="large"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">
                             </button>
@@ -14429,6 +14447,7 @@ 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
@@ -14459,12 +14478,15 @@ class DateTimePickerComponent {
         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.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);
         }
     }
     updateActionSheetAdaptiveAppearance() {
@@ -14860,6 +14882,8 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="toggleDateTime(false)">
@@ -15220,6 +15244,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="toggleDateTime(false)">
@@ -15659,9 +15685,6 @@ class DateRangeService {
      */
     deactivatePopup() {
         const dateRangePopup = this.dateRangePopup$.value;
-        if (!(dateRangePopup && dateRangePopup.show)) {
-            return;
-        }
         if (this.startInput$.value) {
             this.renderer.removeAttribute(this.inputStartElement, attributeNames.ariaControls);
             this.renderer.setAttribute(this.inputStartElement, attributeNames.ariaExpanded, 'false');
@@ -15670,6 +15693,9 @@ class DateRangeService {
             this.renderer.setAttribute(this.inputEndElement, attributeNames.ariaExpanded, 'false');
             this.renderer.removeAttribute(this.inputEndElement, attributeNames.ariaActiveDescendant);
         }
+        if (!(dateRangePopup && dateRangePopup.show)) {
+            return;
+        }
         dateRangePopup.show = false;
     }
     /**
@@ -16388,6 +16414,7 @@ class DateRangePopupComponent {
         if (show && !this.actionSheet.expanded) {
             this.actionSheet.toggle();
             this.updateActionSheetAdaptiveAppearance();
+            this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'id', this.popupUID);
         }
         else if (!show && this.actionSheet.expanded) {
             this.actionSheet.toggle();
@@ -16464,6 +16491,8 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">
@@ -16560,6 +16589,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [attr.title]="localization.get('clearTitle')"
                                 [svgIcon]="xIcon"
                                 fillMode="flat"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
                                 size="large"
                                 innerCssClass="k-button-icon"
                                 (click)="show = false">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dateinputs",
-  "version": "12.2.0-develop.2",
+  "version": "12.2.0-develop.4",
   "description": "Kendo UI for Angular Date Inputs Package - Everything you need to add date selection functionality to apps (DatePicker, TimePicker, DateInput, DateRangePicker, DateTimePicker, Calendar, and MultiViewCalendar).",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -33,20 +33,20 @@
     "@angular/core": "13 - 16",
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "12.2.0-develop.2",
-    "@progress/kendo-angular-intl": "12.2.0-develop.2",
-    "@progress/kendo-angular-l10n": "12.2.0-develop.2",
-    "@progress/kendo-angular-icons": "12.2.0-develop.2",
-    "@progress/kendo-angular-popup": "12.2.0-develop.2",
-    "@progress/kendo-angular-navigation": "12.2.0-develop.2",
+    "@progress/kendo-angular-common": "12.2.0-develop.4",
+    "@progress/kendo-angular-intl": "12.2.0-develop.4",
+    "@progress/kendo-angular-l10n": "12.2.0-develop.4",
+    "@progress/kendo-angular-icons": "12.2.0-develop.4",
+    "@progress/kendo-angular-popup": "12.2.0-develop.4",
+    "@progress/kendo-angular-navigation": "12.2.0-develop.4",
     "rxjs": "^6.5.3 || ^7.0.0",
-    "@progress/kendo-angular-buttons": "12.2.0-develop.2",
-    "@progress/kendo-angular-inputs": "12.2.0-develop.2",
-    "@progress/kendo-angular-label": "12.2.0-develop.2"
+    "@progress/kendo-angular-buttons": "12.2.0-develop.4",
+    "@progress/kendo-angular-inputs": "12.2.0-develop.4",
+    "@progress/kendo-angular-label": "12.2.0-develop.4"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "12.2.0-develop.2",
+    "@progress/kendo-angular-schematics": "12.2.0-develop.4",
     "@progress/kendo-common": "^0.2.0",
     "@progress/kendo-date-math": "^1.1.0"
   },

package/timepicker/timepicker.component.d.ts

@@ -350,6 +350,7 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
     set show(show: boolean);
     get input(): DateInputComponent;
     get timeSelector(): TimeSelectorComponent;
+    private get inputElement();
     private onControlChange;
     private onControlTouched;
     private onValidatorChange;