@progress/kendo-angular-dateinputs 17.0.2-develop.7 → 17.0.2-develop.9

package/datetimepicker/datetimepicker.component.d.ts

@@ -522,6 +522,7 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
     private get cancelButtonElement();
     private get dateTabButton();
     private get timeTabButton();
+    private get todayButton();
     /**
      * @hidden
      */
@@ -629,6 +630,10 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
      * @hidden
      */
     onTabOutLastPart(): void;
+    /**
+     * @hidden
+     */
+    onTabOutFirstPart(): void;
     /**
      * @hidden
      */

package/esm2022/calendar/header.component.mjs

@@ -194,7 +194,6 @@ export class HeaderComponent {
             <button
                 kendoButton
                 class="k-calendar-nav-today"
-                tabindex="-1"
                 fillMode="flat"
                 role="link"
                 [size]="size"
@@ -281,7 +280,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <button
                 kendoButton
                 class="k-calendar-nav-today"
-                tabindex="-1"
                 fillMode="flat"
                 role="link"
                 [size]="size"

package/esm2022/datetimepicker/datetimepicker.component.mjs

@@ -63,6 +63,7 @@ const ACCEPT_BUTTON_SELECTOR = '.k-button.k-time-accept';
 const CANCEL_BUTTON_SELECOTR = '.k-button.k-time-cancel';
 const DATE_TAB_BUTTON_SELECTOR = '.k-button.k-group-start';
 const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-group-end';
+const TODAY_BUTTON_SELECTOR = '.k-button.k-calendar-nav-today';
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
@@ -723,6 +724,14 @@ export class DateTimePickerComponent extends MultiTabStop {
             return this.popupRef?.popup.instance.container.nativeElement.querySelector(TIME_TAB_BUTTON_SELECTOR);
         }
     }
+    get todayButton() {
+        if (this.isAdaptive) {
+            return this.actionSheet.element.nativeElement.querySelector(TODAY_BUTTON_SELECTOR);
+        }
+        else {
+            return this.popupRef?.popup.instance.container.nativeElement.querySelector(TODAY_BUTTON_SELECTOR);
+        }
+    }
     /**
      * @hidden
      */
@@ -1008,6 +1017,15 @@ export class DateTimePickerComponent extends MultiTabStop {
             this.dateTabButton.focus();
         }
     }
+    /**
+     * @hidden
+     */
+    onTabOutFirstPart() {
+        if (this.activeTab === 'time') {
+            this.renderer.removeClass(this.timeSelector.timeListWrappers.first.nativeElement, 'k-focus');
+            this.timeSelector.showNowButton ? this.timeSelector.now.nativeElement.focus() : this.timeTabButton.focus();
+        }
+    }
     /**
      * @hidden
      */
@@ -1094,7 +1112,6 @@ export class DateTimePickerComponent extends MultiTabStop {
                 break;
             default: return;
         }
-        event.preventDefault();
     }
     /**
      * @hidden
@@ -1111,6 +1128,9 @@ export class DateTimePickerComponent extends MultiTabStop {
                     if (this.activeTab === 'date') {
                         this.calendar.monthView.list.nativeElement.focus();
                     }
+                    else {
+                        this.timeSelector.timeLists.last.focus();
+                    }
                 }
                 break;
             case this.cancelButtonElement:
@@ -1122,6 +1142,9 @@ export class DateTimePickerComponent extends MultiTabStop {
                         if (this.activeTab === 'date') {
                             this.calendar.monthView.list.nativeElement.focus();
                         }
+                        else {
+                            this.timeSelector.timeLists.last.focus();
+                        }
                     }
                     else {
                         this.dateTabButton.focus();
@@ -1144,6 +1167,16 @@ export class DateTimePickerComponent extends MultiTabStop {
                     }
                 }
                 break;
+            case this.timeTabButton:
+                if (this.activeTab === 'time') {
+                    this.timeSelector.showNowButton ?
+                        this.timeSelector.now.nativeElement.focus() :
+                        this.timeSelector.timeLists.first.focus();
+                }
+                else {
+                    this.todayButton.focus();
+                }
+                break;
             default:
                 break;
         }
@@ -1338,9 +1371,17 @@ export class DateTimePickerComponent extends MultiTabStop {
         if (this.calendar.type === 'infinite') {
             this.subscriptions.add(fromEvent(this.calendar.monthView.list.nativeElement, 'keydown').subscribe((event) => {
                 const { keyCode, shiftKey } = event;
-                if (keyCode === Keys.Tab && !shiftKey && !this.cancelButton && !this.calendarValue) {
+                if (keyCode === Keys.Tab && !shiftKey) {
                     event.preventDefault();
-                    this.dateTabButton.focus();
+                    if (!this.calendarValue && !this.cancelButton) {
+                        this.dateTabButton.focus();
+                    }
+                    else if (this.calendarValue) {
+                        this.acceptButton.focus();
+                    }
+                    else if (this.cancelButton) {
+                        this.cancelButtonElement.focus();
+                    }
                 }
             }));
         }
@@ -1702,8 +1743,11 @@ export class DateTimePickerComponent extends MultiTabStop {
                             [attr.title]="localization.get('timeTabLabel')"
                             [attr.aria-label]="localization.get('timeTabLabel')"
                             [kendoEventsOutsideAngular]="{
-                                click: changeActiveTab.bind(this, 'time')
+                                click: changeActiveTab.bind(this, 'time'),
+                                'keydown.tab': handleTab
                             }"
+                            [scope]="this"
+                            
                         >
                             {{localization.get('timeTab')}}
                         </button>
@@ -1768,6 +1812,7 @@ export class DateTimePickerComponent extends MultiTabStop {
                             [isAdaptiveEnabled]="isAdaptiveModeEnabled"
                             [isDateTimePicker]="true"
                             (tabOutLastPart)="onTabOutLastPart()"
+                            (tabOutFirstPart)="onTabOutFirstPart()"
                             (tabOutNow)="onTabOutNow()"
                         >
                             <kendo-timeselector-messages
@@ -1805,7 +1850,8 @@ export class DateTimePickerComponent extends MultiTabStop {
                         [disabled]="!calendarValue"
                         [kendoEventsOutsideAngular]="{
                             click: handleAccept,
-                            'keydown.tab': handleTab
+                            'keydown.tab': handleTab,
+                            'keydown.shift.tab': handleTab
                         }"
                         [scope]="this"
                     >
@@ -1821,7 +1867,8 @@ export class DateTimePickerComponent extends MultiTabStop {
                         [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
                             click: handleCancel,
-                            'keydown.tab': handleTab
+                            'keydown.tab': handleTab,
+                            'keydown.shift.tab': handleTab
                         }"
                         [scope]="this"
                     >
@@ -1830,7 +1877,7 @@ export class DateTimePickerComponent extends MultiTabStop {
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -2106,8 +2153,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             [attr.title]="localization.get('timeTabLabel')"
                             [attr.aria-label]="localization.get('timeTabLabel')"
                             [kendoEventsOutsideAngular]="{
-                                click: changeActiveTab.bind(this, 'time')
+                                click: changeActiveTab.bind(this, 'time'),
+                                'keydown.tab': handleTab
                             }"
+                            [scope]="this"
+                            
                         >
                             {{localization.get('timeTab')}}
                         </button>
@@ -2172,6 +2222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             [isAdaptiveEnabled]="isAdaptiveModeEnabled"
                             [isDateTimePicker]="true"
                             (tabOutLastPart)="onTabOutLastPart()"
+                            (tabOutFirstPart)="onTabOutFirstPart()"
                             (tabOutNow)="onTabOutNow()"
                         >
                             <kendo-timeselector-messages
@@ -2209,7 +2260,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [disabled]="!calendarValue"
                         [kendoEventsOutsideAngular]="{
                             click: handleAccept,
-                            'keydown.tab': handleTab
+                            'keydown.tab': handleTab,
+                            'keydown.shift.tab': handleTab
                         }"
                         [scope]="this"
                     >
@@ -2225,7 +2277,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
                             click: handleCancel,
-                            'keydown.tab': handleTab
+                            'keydown.tab': handleTab,
+                            'keydown.shift.tab': handleTab
                         }"
                         [scope]="this"
                     >

package/esm2022/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1731668645,
-    version: '17.0.2-develop.7',
+    publishDate: 1731923376,
+    version: '17.0.2-develop.9',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/timepicker/timelist.component.mjs

@@ -55,15 +55,11 @@ export class TimeListComponent {
     disabled = false;
     value;
     isLast = false;
+    isFirst = false;
     valueChange = new EventEmitter();
     tabOutLastPart = new EventEmitter();
+    tabOutFirstPart = new EventEmitter();
     virtualization;
-    get roleAttribute() {
-        return 'listbox';
-    }
-    get ariaLabel() {
-        return this.localization.get(this.part?.type);
-    }
     get tabIndex() {
         return this.disabled ? undefined : 0;
     }
@@ -74,6 +70,12 @@ export class TimeListComponent {
     get currentSelectedIndex() {
         return this.selectedIndex(this.value);
     }
+    get roleAttribute() {
+        return 'listbox';
+    }
+    get ariaLabel() {
+        return this.localization.get(this.part?.type);
+    }
     animateToIndex = true;
     isActive = false;
     skip = 0;
@@ -254,6 +256,10 @@ export class TimeListComponent {
             e.preventDefault();
             this.tabOutLastPart.emit();
         }
+        if (e.keyCode === Keys.Tab && e.shiftKey && this.isFirst) {
+            e.preventDefault();
+            this.tabOutFirstPart.emit();
+        }
         const getter = getters[e.keyCode] || nil;
         const dataItem = getter(this.data, this.service.selectedIndex(this.value));
         if (dataItem) {
@@ -273,8 +279,10 @@ export class TimeListComponent {
         this.domEvents.push(this.renderer.listen(element, 'mouseover', () => !this.isActive && this.focus()), this.renderer.listen(element, 'click', () => this.focus()), this.renderer.listen(element, 'blur', () => this.isActive = false), this.renderer.listen(element, 'focus', () => this.isActive = true), this.renderer.listen(element, 'keydown', this.handleKeyDown.bind(this)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: i1.TimePickerDOMService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeListComponent, isStandalone: true, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value", isLast: "isLast" }, outputs: { valueChange: "valueChange", tabOutLastPart: "tabOutLastPart" }, host: { properties: { "attr.role": "this.roleAttribute", "attr.aria-label": "this.ariaLabel", "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeListComponent, isStandalone: true, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value", isLast: "isLast", isFirst: "isFirst" }, outputs: { valueChange: "valueChange", tabOutLastPart: "tabOutLastPart", tabOutFirstPart: "tabOutFirstPart" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-virtualization
+        [attr.role]="roleAttribute"
+        [attr.aria-label]="ariaLabel"
         [skip]="skip"
         [take]="total"
         [total]="total"
@@ -283,7 +291,7 @@ export class TimeListComponent {
         [topOffset]="topOffset"
         [bottomOffset]="bottomOffset"
         class="k-time-container"
-        role="presentation"
+        tabindex="-1"
     >
         <ul [ngStyle]="style" class="k-reset"
             [kendoEventsOutsideAngular]="{
@@ -309,6 +317,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-timelist',
                     template: `
     <kendo-virtualization
+        [attr.role]="roleAttribute"
+        [attr.aria-label]="ariaLabel"
         [skip]="skip"
         [take]="total"
         [total]="total"
@@ -317,7 +327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [topOffset]="topOffset"
         [bottomOffset]="bottomOffset"
         class="k-time-container"
-        role="presentation"
+        tabindex="-1"
     >
         <ul [ngStyle]="style" class="k-reset"
             [kendoEventsOutsideAngular]="{
@@ -353,19 +363,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], isLast: [{
                 type: Input
+            }], isFirst: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], tabOutLastPart: [{
                 type: Output
+            }], tabOutFirstPart: [{
+                type: Output
             }], virtualization: [{
                 type: ViewChild,
                 args: [VirtualizationComponent, { static: true }]
-            }], roleAttribute: [{
-                type: HostBinding,
-                args: ["attr.role"]
-            }], ariaLabel: [{
-                type: HostBinding,
-                args: ["attr.aria-label"]
             }], tabIndex: [{
                 type: HostBinding,
                 args: ["attr.tabindex"]

package/esm2022/timepicker/timepicker.component.mjs

@@ -780,6 +780,16 @@ export class TimePickerComponent extends MultiTabStop {
             this.show = true;
         }
     }
+    /**
+     * @hidden
+     */
+    onTabOutNow() {
+        if (!this.timeSelector.showNowButton) {
+            this.cancelButton ?
+                this.timeSelector.cancel.nativeElement.focus() :
+                this.timeSelector.accept.nativeElement.focus();
+        }
+    }
     /**
      * @hidden
      */
@@ -852,6 +862,7 @@ export class TimePickerComponent extends MultiTabStop {
      * @hidden
      */
     onTabOutLastPart() {
+        this.renderer.removeClass(this.timeSelector.timeListWrappers.last.nativeElement, 'k-focus');
         if (this.isAdaptive) {
             this.cancelButton ? this.adaptiveCancelButton.focus() : this.adaptiveAcceptButton.focus();
         }
@@ -859,6 +870,18 @@ export class TimePickerComponent extends MultiTabStop {
             this.timeSelector.accept.nativeElement.focus();
         }
     }
+    /**
+     * @hidden
+     */
+    onTabOutFirstPart() {
+        this.renderer.removeClass(this.timeSelector.timeListWrappers.first.nativeElement, 'k-focus');
+        if (this.timeSelector.showNowButton) {
+            this.timeSelector.now.nativeElement.focus();
+        }
+        else {
+            this.cancelButton ? this.timeSelector.cancel.nativeElement.focus() : this.timeSelector.accept.nativeElement.focus();
+        }
+    }
     toggleTimeSelector(show) {
         this.windowSize = windowSize();
         if (this.isAdaptive) {
@@ -1247,6 +1270,8 @@ export class TimePickerComponent extends MultiTabStop {
                 (valueChange)="handleChange($event)"
                 (valueReject)="handleReject()"
                 (tabOutLastPart)="onTabOutLastPart()"
+                (tabOutFirstPart)="onTabOutFirstPart()"
+                (tabOutNow)="onTabOutNow()"
             >
                 <kendo-timeselector-messages
                     [acceptLabel]="localization.get('acceptLabel')"
@@ -1264,7 +1289,7 @@ export class TimePickerComponent extends MultiTabStop {
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -1472,6 +1497,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 (valueChange)="handleChange($event)"
                 (valueReject)="handleReject()"
                 (tabOutLastPart)="onTabOutLastPart()"
+                (tabOutFirstPart)="onTabOutFirstPart()"
+                (tabOutNow)="onTabOutNow()"
             >
                 <kendo-timeselector-messages
                     [acceptLabel]="localization.get('acceptLabel')"

package/esm2022/timepicker/timeselector.component.mjs

@@ -12,7 +12,6 @@ import { TimeListComponent } from './timelist.component';
 import { TimePickerDOMService } from './services/dom.service';
 import { getNow, hasChange, isInTimeRange, timeInRange } from '../util';
 import { generateGetters, generateSnappers, snapTime, valueMerger } from './util';
-import { fromEvent } from 'rxjs';
 import { PickerService } from '../common/picker.service';
 import { closest } from '../common/dom-queries';
 import { currentFocusTarget, isPresent } from '../common/utils';
@@ -139,6 +138,7 @@ export class TimeSelectorComponent {
      */
     valueReject = new EventEmitter();
     tabOutLastPart = new EventEmitter();
+    tabOutFirstPart = new EventEmitter();
     tabOutNow = new EventEmitter();
     dateFormatParts;
     isActive = false;
@@ -208,22 +208,6 @@ export class TimeSelectorComponent {
         this.init();
         this.bindEvents();
     }
-    ngAfterViewInit() {
-        this.subscriptions.add(fromEvent(this.timeListWrappers.first.nativeElement, 'keydown').subscribe((event) => {
-            const { keyCode, shiftKey } = event;
-            if (keyCode === Keys.Tab && shiftKey) {
-                event.preventDefault();
-                this.renderer.removeClass(this.timeListWrappers.first.nativeElement, 'k-focus');
-                this.now ? this.now.nativeElement.focus() : this.cancel.nativeElement.focus();
-            }
-        }));
-        this.subscriptions.add(fromEvent(this.timeListWrappers.last.nativeElement, 'keydown').subscribe((event) => {
-            const { keyCode, shiftKey } = event;
-            if (keyCode === Keys.Tab && !shiftKey) {
-                this.renderer.removeClass(this.timeListWrappers.last.nativeElement, 'k-focus');
-            }
-        }));
-    }
     /**
      * @hidden
      */
@@ -346,7 +330,12 @@ export class TimeSelectorComponent {
         if (keyCode === Keys.Tab && !shiftKey && event.target !== this.now?.nativeElement) {
             event.preventDefault();
             if (document.activeElement === this.accept.nativeElement) {
-                this.cancel ? this.cancel.nativeElement.focus() : this.now?.nativeElement.focus();
+                if (this.cancel) {
+                    this.cancel.nativeElement.focus();
+                }
+                else {
+                    this.now ? this.now.nativeElement.focus() : this.timeLists.first.focus();
+                }
             }
             else {
                 this.now ? this.now.nativeElement.focus() : this.timeLists.first.focus();
@@ -439,7 +428,7 @@ export class TimeSelectorComponent {
         return listIdx;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeSelectorComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.IntlService }, { token: i3.TimePickerDOMService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i4.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeSelectorComponent, isStandalone: true, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject", tabOutLastPart: "tabOutLastPart", tabOutNow: "tabOutNow" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeSelectorComponent, isStandalone: true, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject", tabOutLastPart: "tabOutLastPart", tabOutFirstPart: "tabOutFirstPart", tabOutNow: "tabOutNow" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -499,6 +488,7 @@ export class TimeSelectorComponent {
                     <span class="k-title k-timeselector-title">{{intl.dateFieldName(part)}}</span>
                     <kendo-timelist
                         [isLast]="idx === dateFormatParts.length - 1"
+                        [isFirst]="idx === 0"
                         [min]="min"
                         [max]="max"
                         [part]="part"
@@ -506,6 +496,7 @@ export class TimeSelectorComponent {
                         [disabled]="disabled"
                         [(value)]="current"
                         (tabOutLastPart)="tabOutLastPart.emit()"
+                        (tabOutFirstPart)="tabOutFirstPart.emit()"
                         [kendoEventsOutsideAngular]="{
                             focus: handleListFocus,
                             blur: handleBlur
@@ -553,7 +544,7 @@ export class TimeSelectorComponent {
                 [disabled]="disabled"
             >{{localization.get('cancel')}}</button>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value", "isLast"], outputs: ["valueChange", "tabOutLastPart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value", "isLast", "isFirst"], outputs: ["valueChange", "tabOutLastPart", "tabOutFirstPart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeSelectorComponent, decorators: [{
             type: Component,
@@ -622,6 +613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     <span class="k-title k-timeselector-title">{{intl.dateFieldName(part)}}</span>
                     <kendo-timelist
                         [isLast]="idx === dateFormatParts.length - 1"
+                        [isFirst]="idx === 0"
                         [min]="min"
                         [max]="max"
                         [part]="part"
@@ -629,6 +621,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [disabled]="disabled"
                         [(value)]="current"
                         (tabOutLastPart)="tabOutLastPart.emit()"
+                        (tabOutFirstPart)="tabOutFirstPart.emit()"
                         [kendoEventsOutsideAngular]="{
                             focus: handleListFocus,
                             blur: handleBlur
@@ -728,6 +721,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], tabOutLastPart: [{
                 type: Output
+            }], tabOutFirstPart: [{
+                type: Output
             }], tabOutNow: [{
                 type: Output
             }] } });

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

@@ -33,8 +33,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1731668645,
-    version: '17.0.2-develop.7',
+    publishDate: 1731923376,
+    version: '17.0.2-develop.9',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2777,7 +2777,6 @@ class HeaderComponent {
             <button
                 kendoButton
                 class="k-calendar-nav-today"
-                tabindex="-1"
                 fillMode="flat"
                 role="link"
                 [size]="size"
@@ -2864,7 +2863,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <button
                 kendoButton
                 class="k-calendar-nav-today"
-                tabindex="-1"
                 fillMode="flat"
                 role="link"
                 [size]="size"
@@ -12333,15 +12331,11 @@ class TimeListComponent {
     disabled = false;
     value;
     isLast = false;
+    isFirst = false;
     valueChange = new EventEmitter();
     tabOutLastPart = new EventEmitter();
+    tabOutFirstPart = new EventEmitter();
     virtualization;
-    get roleAttribute() {
-        return 'listbox';
-    }
-    get ariaLabel() {
-        return this.localization.get(this.part?.type);
-    }
     get tabIndex() {
         return this.disabled ? undefined : 0;
     }
@@ -12352,6 +12346,12 @@ class TimeListComponent {
     get currentSelectedIndex() {
         return this.selectedIndex(this.value);
     }
+    get roleAttribute() {
+        return 'listbox';
+    }
+    get ariaLabel() {
+        return this.localization.get(this.part?.type);
+    }
     animateToIndex = true;
     isActive = false;
     skip = 0;
@@ -12532,6 +12532,10 @@ class TimeListComponent {
             e.preventDefault();
             this.tabOutLastPart.emit();
         }
+        if (e.keyCode === Keys$1.Tab && e.shiftKey && this.isFirst) {
+            e.preventDefault();
+            this.tabOutFirstPart.emit();
+        }
         const getter = getters[e.keyCode] || nil;
         const dataItem = getter(this.data, this.service.selectedIndex(this.value));
         if (dataItem) {
@@ -12551,8 +12555,10 @@ class TimeListComponent {
         this.domEvents.push(this.renderer.listen(element, 'mouseover', () => !this.isActive && this.focus()), this.renderer.listen(element, 'click', () => this.focus()), this.renderer.listen(element, 'blur', () => this.isActive = false), this.renderer.listen(element, 'focus', () => this.isActive = true), this.renderer.listen(element, 'keydown', this.handleKeyDown.bind(this)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: TimePickerDOMService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeListComponent, isStandalone: true, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value", isLast: "isLast" }, outputs: { valueChange: "valueChange", tabOutLastPart: "tabOutLastPart" }, host: { properties: { "attr.role": "this.roleAttribute", "attr.aria-label": "this.ariaLabel", "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeListComponent, isStandalone: true, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value", isLast: "isLast", isFirst: "isFirst" }, outputs: { valueChange: "valueChange", tabOutLastPart: "tabOutLastPart", tabOutFirstPart: "tabOutFirstPart" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-virtualization
+        [attr.role]="roleAttribute"
+        [attr.aria-label]="ariaLabel"
         [skip]="skip"
         [take]="total"
         [total]="total"
@@ -12561,7 +12567,7 @@ class TimeListComponent {
         [topOffset]="topOffset"
         [bottomOffset]="bottomOffset"
         class="k-time-container"
-        role="presentation"
+        tabindex="-1"
     >
         <ul [ngStyle]="style" class="k-reset"
             [kendoEventsOutsideAngular]="{
@@ -12587,6 +12593,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-timelist',
                     template: `
     <kendo-virtualization
+        [attr.role]="roleAttribute"
+        [attr.aria-label]="ariaLabel"
         [skip]="skip"
         [take]="total"
         [total]="total"
@@ -12595,7 +12603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [topOffset]="topOffset"
         [bottomOffset]="bottomOffset"
         class="k-time-container"
-        role="presentation"
+        tabindex="-1"
     >
         <ul [ngStyle]="style" class="k-reset"
             [kendoEventsOutsideAngular]="{
@@ -12631,19 +12639,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], isLast: [{
                 type: Input
+            }], isFirst: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], tabOutLastPart: [{
                 type: Output
+            }], tabOutFirstPart: [{
+                type: Output
             }], virtualization: [{
                 type: ViewChild,
                 args: [VirtualizationComponent, { static: true }]
-            }], roleAttribute: [{
-                type: HostBinding,
-                args: ["attr.role"]
-            }], ariaLabel: [{
-                type: HostBinding,
-                args: ["attr.aria-label"]
             }], tabIndex: [{
                 type: HostBinding,
                 args: ["attr.tabindex"]
@@ -12957,6 +12963,7 @@ class TimeSelectorComponent {
      */
     valueReject = new EventEmitter();
     tabOutLastPart = new EventEmitter();
+    tabOutFirstPart = new EventEmitter();
     tabOutNow = new EventEmitter();
     dateFormatParts;
     isActive = false;
@@ -13026,22 +13033,6 @@ class TimeSelectorComponent {
         this.init();
         this.bindEvents();
     }
-    ngAfterViewInit() {
-        this.subscriptions.add(fromEvent(this.timeListWrappers.first.nativeElement, 'keydown').subscribe((event) => {
-            const { keyCode, shiftKey } = event;
-            if (keyCode === Keys$1.Tab && shiftKey) {
-                event.preventDefault();
-                this.renderer.removeClass(this.timeListWrappers.first.nativeElement, 'k-focus');
-                this.now ? this.now.nativeElement.focus() : this.cancel.nativeElement.focus();
-            }
-        }));
-        this.subscriptions.add(fromEvent(this.timeListWrappers.last.nativeElement, 'keydown').subscribe((event) => {
-            const { keyCode, shiftKey } = event;
-            if (keyCode === Keys$1.Tab && !shiftKey) {
-                this.renderer.removeClass(this.timeListWrappers.last.nativeElement, 'k-focus');
-            }
-        }));
-    }
     /**
      * @hidden
      */
@@ -13164,7 +13155,12 @@ class TimeSelectorComponent {
         if (keyCode === Keys$1.Tab && !shiftKey && event.target !== this.now?.nativeElement) {
             event.preventDefault();
             if (document.activeElement === this.accept.nativeElement) {
-                this.cancel ? this.cancel.nativeElement.focus() : this.now?.nativeElement.focus();
+                if (this.cancel) {
+                    this.cancel.nativeElement.focus();
+                }
+                else {
+                    this.now ? this.now.nativeElement.focus() : this.timeLists.first.focus();
+                }
             }
             else {
                 this.now ? this.now.nativeElement.focus() : this.timeLists.first.focus();
@@ -13257,7 +13253,7 @@ class TimeSelectorComponent {
         return listIdx;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeSelectorComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.IntlService }, { token: TimePickerDOMService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeSelectorComponent, isStandalone: true, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject", tabOutLastPart: "tabOutLastPart", tabOutNow: "tabOutNow" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeSelectorComponent, isStandalone: true, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject", tabOutLastPart: "tabOutLastPart", tabOutFirstPart: "tabOutFirstPart", tabOutNow: "tabOutNow" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -13317,6 +13313,7 @@ class TimeSelectorComponent {
                     <span class="k-title k-timeselector-title">{{intl.dateFieldName(part)}}</span>
                     <kendo-timelist
                         [isLast]="idx === dateFormatParts.length - 1"
+                        [isFirst]="idx === 0"
                         [min]="min"
                         [max]="max"
                         [part]="part"
@@ -13324,6 +13321,7 @@ class TimeSelectorComponent {
                         [disabled]="disabled"
                         [(value)]="current"
                         (tabOutLastPart)="tabOutLastPart.emit()"
+                        (tabOutFirstPart)="tabOutFirstPart.emit()"
                         [kendoEventsOutsideAngular]="{
                             focus: handleListFocus,
                             blur: handleBlur
@@ -13371,7 +13369,7 @@ class TimeSelectorComponent {
                 [disabled]="disabled"
             >{{localization.get('cancel')}}</button>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value", "isLast"], outputs: ["valueChange", "tabOutLastPart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value", "isLast", "isFirst"], outputs: ["valueChange", "tabOutLastPart", "tabOutFirstPart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeSelectorComponent, decorators: [{
             type: Component,
@@ -13440,6 +13438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     <span class="k-title k-timeselector-title">{{intl.dateFieldName(part)}}</span>
                     <kendo-timelist
                         [isLast]="idx === dateFormatParts.length - 1"
+                        [isFirst]="idx === 0"
                         [min]="min"
                         [max]="max"
                         [part]="part"
@@ -13447,6 +13446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [disabled]="disabled"
                         [(value)]="current"
                         (tabOutLastPart)="tabOutLastPart.emit()"
+                        (tabOutFirstPart)="tabOutFirstPart.emit()"
                         [kendoEventsOutsideAngular]="{
                             focus: handleListFocus,
                             blur: handleBlur
@@ -13546,6 +13546,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], tabOutLastPart: [{
                 type: Output
+            }], tabOutFirstPart: [{
+                type: Output
             }], tabOutNow: [{
                 type: Output
             }] } });
@@ -14379,6 +14381,16 @@ class TimePickerComponent extends MultiTabStop {
             this.show = true;
         }
     }
+    /**
+     * @hidden
+     */
+    onTabOutNow() {
+        if (!this.timeSelector.showNowButton) {
+            this.cancelButton ?
+                this.timeSelector.cancel.nativeElement.focus() :
+                this.timeSelector.accept.nativeElement.focus();
+        }
+    }
     /**
      * @hidden
      */
@@ -14451,6 +14463,7 @@ class TimePickerComponent extends MultiTabStop {
      * @hidden
      */
     onTabOutLastPart() {
+        this.renderer.removeClass(this.timeSelector.timeListWrappers.last.nativeElement, 'k-focus');
         if (this.isAdaptive) {
             this.cancelButton ? this.adaptiveCancelButton.focus() : this.adaptiveAcceptButton.focus();
         }
@@ -14458,6 +14471,18 @@ class TimePickerComponent extends MultiTabStop {
             this.timeSelector.accept.nativeElement.focus();
         }
     }
+    /**
+     * @hidden
+     */
+    onTabOutFirstPart() {
+        this.renderer.removeClass(this.timeSelector.timeListWrappers.first.nativeElement, 'k-focus');
+        if (this.timeSelector.showNowButton) {
+            this.timeSelector.now.nativeElement.focus();
+        }
+        else {
+            this.cancelButton ? this.timeSelector.cancel.nativeElement.focus() : this.timeSelector.accept.nativeElement.focus();
+        }
+    }
     toggleTimeSelector(show) {
         this.windowSize = windowSize();
         if (this.isAdaptive) {
@@ -14846,6 +14871,8 @@ class TimePickerComponent extends MultiTabStop {
                 (valueChange)="handleChange($event)"
                 (valueReject)="handleReject()"
                 (tabOutLastPart)="onTabOutLastPart()"
+                (tabOutFirstPart)="onTabOutFirstPart()"
+                (tabOutNow)="onTabOutNow()"
             >
                 <kendo-timeselector-messages
                     [acceptLabel]="localization.get('acceptLabel')"
@@ -14863,7 +14890,7 @@ class TimePickerComponent extends MultiTabStop {
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -15071,6 +15098,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 (valueChange)="handleChange($event)"
                 (valueReject)="handleReject()"
                 (tabOutLastPart)="onTabOutLastPart()"
+                (tabOutFirstPart)="onTabOutFirstPart()"
+                (tabOutNow)="onTabOutNow()"
             >
                 <kendo-timeselector-messages
                     [acceptLabel]="localization.get('acceptLabel')"
@@ -15375,6 +15404,7 @@ const ACCEPT_BUTTON_SELECTOR = '.k-button.k-time-accept';
 const CANCEL_BUTTON_SELECOTR = '.k-button.k-time-cancel';
 const DATE_TAB_BUTTON_SELECTOR = '.k-button.k-group-start';
 const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-group-end';
+const TODAY_BUTTON_SELECTOR = '.k-button.k-calendar-nav-today';
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
@@ -16035,6 +16065,14 @@ class DateTimePickerComponent extends MultiTabStop {
             return this.popupRef?.popup.instance.container.nativeElement.querySelector(TIME_TAB_BUTTON_SELECTOR);
         }
     }
+    get todayButton() {
+        if (this.isAdaptive) {
+            return this.actionSheet.element.nativeElement.querySelector(TODAY_BUTTON_SELECTOR);
+        }
+        else {
+            return this.popupRef?.popup.instance.container.nativeElement.querySelector(TODAY_BUTTON_SELECTOR);
+        }
+    }
     /**
      * @hidden
      */
@@ -16320,6 +16358,15 @@ class DateTimePickerComponent extends MultiTabStop {
             this.dateTabButton.focus();
         }
     }
+    /**
+     * @hidden
+     */
+    onTabOutFirstPart() {
+        if (this.activeTab === 'time') {
+            this.renderer.removeClass(this.timeSelector.timeListWrappers.first.nativeElement, 'k-focus');
+            this.timeSelector.showNowButton ? this.timeSelector.now.nativeElement.focus() : this.timeTabButton.focus();
+        }
+    }
     /**
      * @hidden
      */
@@ -16406,7 +16453,6 @@ class DateTimePickerComponent extends MultiTabStop {
                 break;
             default: return;
         }
-        event.preventDefault();
     }
     /**
      * @hidden
@@ -16423,6 +16469,9 @@ class DateTimePickerComponent extends MultiTabStop {
                     if (this.activeTab === 'date') {
                         this.calendar.monthView.list.nativeElement.focus();
                     }
+                    else {
+                        this.timeSelector.timeLists.last.focus();
+                    }
                 }
                 break;
             case this.cancelButtonElement:
@@ -16434,6 +16483,9 @@ class DateTimePickerComponent extends MultiTabStop {
                         if (this.activeTab === 'date') {
                             this.calendar.monthView.list.nativeElement.focus();
                         }
+                        else {
+                            this.timeSelector.timeLists.last.focus();
+                        }
                     }
                     else {
                         this.dateTabButton.focus();
@@ -16456,6 +16508,16 @@ class DateTimePickerComponent extends MultiTabStop {
                     }
                 }
                 break;
+            case this.timeTabButton:
+                if (this.activeTab === 'time') {
+                    this.timeSelector.showNowButton ?
+                        this.timeSelector.now.nativeElement.focus() :
+                        this.timeSelector.timeLists.first.focus();
+                }
+                else {
+                    this.todayButton.focus();
+                }
+                break;
             default:
                 break;
         }
@@ -16650,9 +16712,17 @@ class DateTimePickerComponent extends MultiTabStop {
         if (this.calendar.type === 'infinite') {
             this.subscriptions.add(fromEvent(this.calendar.monthView.list.nativeElement, 'keydown').subscribe((event) => {
                 const { keyCode, shiftKey } = event;
-                if (keyCode === Keys$1.Tab && !shiftKey && !this.cancelButton && !this.calendarValue) {
+                if (keyCode === Keys$1.Tab && !shiftKey) {
                     event.preventDefault();
-                    this.dateTabButton.focus();
+                    if (!this.calendarValue && !this.cancelButton) {
+                        this.dateTabButton.focus();
+                    }
+                    else if (this.calendarValue) {
+                        this.acceptButton.focus();
+                    }
+                    else if (this.cancelButton) {
+                        this.cancelButtonElement.focus();
+                    }
                 }
             }));
         }
@@ -17014,8 +17084,11 @@ class DateTimePickerComponent extends MultiTabStop {
                             [attr.title]="localization.get('timeTabLabel')"
                             [attr.aria-label]="localization.get('timeTabLabel')"
                             [kendoEventsOutsideAngular]="{
-                                click: changeActiveTab.bind(this, 'time')
+                                click: changeActiveTab.bind(this, 'time'),
+                                'keydown.tab': handleTab
                             }"
+                            [scope]="this"
+                            
                         >
                             {{localization.get('timeTab')}}
                         </button>
@@ -17080,6 +17153,7 @@ class DateTimePickerComponent extends MultiTabStop {
                             [isAdaptiveEnabled]="isAdaptiveModeEnabled"
                             [isDateTimePicker]="true"
                             (tabOutLastPart)="onTabOutLastPart()"
+                            (tabOutFirstPart)="onTabOutFirstPart()"
                             (tabOutNow)="onTabOutNow()"
                         >
                             <kendo-timeselector-messages
@@ -17117,7 +17191,8 @@ class DateTimePickerComponent extends MultiTabStop {
                         [disabled]="!calendarValue"
                         [kendoEventsOutsideAngular]="{
                             click: handleAccept,
-                            'keydown.tab': handleTab
+                            'keydown.tab': handleTab,
+                            'keydown.shift.tab': handleTab
                         }"
                         [scope]="this"
                     >
@@ -17133,7 +17208,8 @@ class DateTimePickerComponent extends MultiTabStop {
                         [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
                             click: handleCancel,
-                            'keydown.tab': handleTab
+                            'keydown.tab': handleTab,
+                            'keydown.shift.tab': handleTab
                         }"
                         [scope]="this"
                     >
@@ -17142,7 +17218,7 @@ class DateTimePickerComponent extends MultiTabStop {
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -17418,8 +17494,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             [attr.title]="localization.get('timeTabLabel')"
                             [attr.aria-label]="localization.get('timeTabLabel')"
                             [kendoEventsOutsideAngular]="{
-                                click: changeActiveTab.bind(this, 'time')
+                                click: changeActiveTab.bind(this, 'time'),
+                                'keydown.tab': handleTab
                             }"
+                            [scope]="this"
+                            
                         >
                             {{localization.get('timeTab')}}
                         </button>
@@ -17484,6 +17563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             [isAdaptiveEnabled]="isAdaptiveModeEnabled"
                             [isDateTimePicker]="true"
                             (tabOutLastPart)="onTabOutLastPart()"
+                            (tabOutFirstPart)="onTabOutFirstPart()"
                             (tabOutNow)="onTabOutNow()"
                         >
                             <kendo-timeselector-messages
@@ -17521,7 +17601,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [disabled]="!calendarValue"
                         [kendoEventsOutsideAngular]="{
                             click: handleAccept,
-                            'keydown.tab': handleTab
+                            'keydown.tab': handleTab,
+                            'keydown.shift.tab': handleTab
                         }"
                         [scope]="this"
                     >
@@ -17537,7 +17618,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
                             click: handleCancel,
-                            'keydown.tab': handleTab
+                            'keydown.tab': handleTab,
+                            'keydown.shift.tab': handleTab
                         }"
                         [scope]="this"
                     >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dateinputs",
-  "version": "17.0.2-develop.7",
+  "version": "17.0.2-develop.9",
   "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",
@@ -34,18 +34,18 @@
     "@angular/forms": "16 - 18",
     "@angular/platform-browser": "16 - 18",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "17.0.2-develop.7",
-    "@progress/kendo-angular-common": "17.0.2-develop.7",
-    "@progress/kendo-angular-intl": "17.0.2-develop.7",
-    "@progress/kendo-angular-l10n": "17.0.2-develop.7",
-    "@progress/kendo-angular-icons": "17.0.2-develop.7",
-    "@progress/kendo-angular-popup": "17.0.2-develop.7",
-    "@progress/kendo-angular-navigation": "17.0.2-develop.7",
+    "@progress/kendo-angular-buttons": "17.0.2-develop.9",
+    "@progress/kendo-angular-common": "17.0.2-develop.9",
+    "@progress/kendo-angular-intl": "17.0.2-develop.9",
+    "@progress/kendo-angular-l10n": "17.0.2-develop.9",
+    "@progress/kendo-angular-icons": "17.0.2-develop.9",
+    "@progress/kendo-angular-popup": "17.0.2-develop.9",
+    "@progress/kendo-angular-navigation": "17.0.2-develop.9",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "17.0.2-develop.7",
+    "@progress/kendo-angular-schematics": "17.0.2-develop.9",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-date-math": "^1.1.0",
     "@progress/kendo-dateinputs-common": "^0.4.0"

package/timepicker/timelist.component.d.ts

@@ -27,15 +27,17 @@ export declare class TimeListComponent implements OnChanges, OnInit, OnDestroy {
     disabled: boolean;
     value: Date;
     isLast: boolean;
+    isFirst: boolean;
     valueChange: EventEmitter<Date>;
     tabOutLastPart: EventEmitter<any>;
+    tabOutFirstPart: EventEmitter<any>;
     virtualization: VirtualizationComponent;
-    get roleAttribute(): string;
-    get ariaLabel(): string;
     get tabIndex(): number;
     componentClass: boolean;
     get isDayPeriod(): boolean;
     get currentSelectedIndex(): number;
+    get roleAttribute(): string;
+    get ariaLabel(): string;
     animateToIndex: boolean;
     isActive: boolean;
     skip: number;
@@ -90,5 +92,5 @@ export declare class TimeListComponent implements OnChanges, OnInit, OnDestroy {
     private handleKeyDown;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<TimeListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TimeListComponent, "kendo-timelist", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "part": { "alias": "part"; "required": false; }; "step": { "alias": "step"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "isLast": { "alias": "isLast"; "required": false; }; }, { "valueChange": "valueChange"; "tabOutLastPart": "tabOutLastPart"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimeListComponent, "kendo-timelist", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "part": { "alias": "part"; "required": false; }; "step": { "alias": "step"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "isLast": { "alias": "isLast"; "required": false; }; "isFirst": { "alias": "isFirst"; "required": false; }; }, { "valueChange": "valueChange"; "tabOutLastPart": "tabOutLastPart"; "tabOutFirstPart": "tabOutFirstPart"; }, never, never, true, never>;
 }

package/timepicker/timepicker.component.d.ts

@@ -495,6 +495,10 @@ export declare class TimePickerComponent extends MultiTabStop implements Control
      * @hidden
      */
     handleDateInputClick(): void;
+    /**
+     * @hidden
+     */
+    onTabOutNow(): void;
     /**
      * @hidden
      */
@@ -531,6 +535,10 @@ export declare class TimePickerComponent extends MultiTabStop implements Control
      * @hidden
      */
     onTabOutLastPart(): void;
+    /**
+     * @hidden
+     */
+    onTabOutFirstPart(): void;
     private toggleTimeSelector;
     private toggleActionSheet;
     private togglePopup;

package/timepicker/timeselector.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, QueryList, OnInit, OnChanges, OnDestroy, Renderer2, AfterViewInit } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, QueryList, OnInit, OnChanges, OnDestroy, Renderer2 } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { TimeListComponent } from './timelist.component';
@@ -15,7 +15,7 @@ import * as i0 from "@angular/core";
  *
  * Represents the Kendo UI TimeSelector component for Angular.
  */
-export declare class TimeSelectorComponent implements OnChanges, OnInit, OnDestroy, AfterViewInit {
+export declare class TimeSelectorComponent implements OnChanges, OnInit, OnDestroy {
     localization: LocalizationService;
     private cdr;
     element: ElementRef;
@@ -106,6 +106,7 @@ export declare class TimeSelectorComponent implements OnChanges, OnInit, OnDestr
      */
     valueReject: EventEmitter<any>;
     tabOutLastPart: EventEmitter<any>;
+    tabOutFirstPart: EventEmitter<any>;
     tabOutNow: EventEmitter<any>;
     dateFormatParts: any[];
     isActive: boolean;
@@ -126,7 +127,6 @@ export declare class TimeSelectorComponent implements OnChanges, OnInit, OnDestr
      * @hidden
      */
     ngOnInit(): void;
-    ngAfterViewInit(): void;
     /**
      * @hidden
      */
@@ -197,5 +197,5 @@ export declare class TimeSelectorComponent implements OnChanges, OnInit, OnDestr
     private emitFocus;
     private listIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<TimeSelectorComponent, [null, null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TimeSelectorComponent, "kendo-timeselector", ["kendo-timeselector"], { "format": { "alias": "format"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "cancelButton": { "alias": "cancelButton"; "required": false; }; "setButton": { "alias": "setButton"; "required": false; }; "nowButton": { "alias": "nowButton"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isAdaptiveEnabled": { "alias": "isAdaptiveEnabled"; "required": false; }; "isDateTimePicker": { "alias": "isDateTimePicker"; "required": false; }; "steps": { "alias": "steps"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "valueReject": "valueReject"; "tabOutLastPart": "tabOutLastPart"; "tabOutNow": "tabOutNow"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimeSelectorComponent, "kendo-timeselector", ["kendo-timeselector"], { "format": { "alias": "format"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "cancelButton": { "alias": "cancelButton"; "required": false; }; "setButton": { "alias": "setButton"; "required": false; }; "nowButton": { "alias": "nowButton"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isAdaptiveEnabled": { "alias": "isAdaptiveEnabled"; "required": false; }; "isDateTimePicker": { "alias": "isDateTimePicker"; "required": false; }; "steps": { "alias": "steps"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "valueReject": "valueReject"; "tabOutLastPart": "tabOutLastPart"; "tabOutFirstPart": "tabOutFirstPart"; "tabOutNow": "tabOutNow"; }, never, never, true, never>;
 }