@progress/kendo-angular-dateinputs 12.1.0-develop.1 → 12.1.0-develop.2

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: 1684148954,
-    version: '12.1.0-develop.1',
+    publishDate: 1684164847,
+    version: '12.1.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -10913,7 +10913,9 @@ class TimeListComponent {
         this.max = cloneDate(MAX_TIME);
         this.step = 1;
         this.disabled = false;
+        this.isLast = false;
         this.valueChange = new EventEmitter();
+        this.tabOutLastPart = new EventEmitter();
         this.componentClass = true;
         this.animateToIndex = true;
         this.isActive = false;
@@ -11090,6 +11092,10 @@ class TimeListComponent {
         return oldData && newData && oldData.text !== newData.text;
     }
     handleKeyDown(e) {
+        if (e.keyCode === Keys$1.Tab && !e.shiftKey && this.isLast) {
+            e.preventDefault();
+            this.tabOutLastPart.emit();
+        }
         const getter = getters[e.keyCode] || nil;
         const dataItem = getter(this.data, this.service.selectedIndex(this.value));
         if (dataItem) {
@@ -11110,7 +11116,7 @@ class TimeListComponent {
     }
 }
 TimeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.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 });
-TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimeListComponent, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, 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: `
+TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimeListComponent, 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: `
     <kendo-virtualization
         [skip]="skip"
         [take]="total"
@@ -11185,8 +11191,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], value: [{
                 type: Input
+            }], isLast: [{
+                type: Input
             }], valueChange: [{
                 type: Output
+            }], tabOutLastPart: [{
+                type: Output
             }], virtualization: [{
                 type: ViewChild,
                 args: [VirtualizationComponent, { static: true }]
@@ -11408,6 +11418,7 @@ class TimeSelectorComponent {
          * Fires each time the user cancels the selected value.
          */
         this.valueReject = new EventEmitter();
+        this.tabOutLastPart = new EventEmitter();
         this.isActive = false;
         this.showNowButton = true;
         this._activeListIndex = -1;
@@ -11497,6 +11508,22 @@ 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.accept.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
      */
@@ -11601,6 +11628,16 @@ class TimeSelectorComponent {
     containsElement(element) {
         return Boolean(closest(element, node => node === this.element.nativeElement));
     }
+    /**
+     * @hidden
+     */
+    handleTabOut(event) {
+        const { keyCode, shiftKey } = event;
+        if (keyCode === Keys$1.Tab && !shiftKey) {
+            event.preventDefault();
+            this.timeLists.first.focus();
+        }
+    }
     partStep(part) {
         return this.steps[part.type] || 1;
     }
@@ -11688,7 +11725,7 @@ class TimeSelectorComponent {
     }
 }
 TimeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.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 });
-TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimeSelectorComponent, 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" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
+TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimeSelectorComponent, 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" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -11746,12 +11783,14 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 >
                     <span class="k-title k-timeselector-title">{{intl.dateFieldName(part)}}</span>
                     <kendo-timelist
+                        [isLast]="idx === dateFormatParts.length - 1"
                         [min]="min"
                         [max]="max"
                         [part]="part"
                         [step]="partStep(part)"
                         [disabled]="disabled"
                         [(value)]="current"
+                        (tabOutLastPart)="tabOutLastPart.emit()"
                         [kendoEventsOutsideAngular]="{
                             focus: handleListFocus,
                             blur: handleBlur
@@ -11791,13 +11830,14 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [kendoEventsOutsideAngular]="{
                     click: handleAccept,
                     focus: handleFocus,
-                    blur: handleBlur
+                    blur: handleBlur,
+                    keydown: handleTabOut
                 }"
                 [scope]="this"
                 [disabled]="disabled"
             >{{localization.get('accept')}}</button>
         </div>
-    `, isInline: true, components: [{ type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value"], outputs: ["valueChange"] }], directives: [{ type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value", "isLast"], outputs: ["valueChange", "tabOutLastPart"] }], directives: [{ type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeSelectorComponent, decorators: [{
             type: Component,
             args: [{
@@ -11863,12 +11903,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 >
                     <span class="k-title k-timeselector-title">{{intl.dateFieldName(part)}}</span>
                     <kendo-timelist
+                        [isLast]="idx === dateFormatParts.length - 1"
                         [min]="min"
                         [max]="max"
                         [part]="part"
                         [step]="partStep(part)"
                         [disabled]="disabled"
                         [(value)]="current"
+                        (tabOutLastPart)="tabOutLastPart.emit()"
                         [kendoEventsOutsideAngular]="{
                             focus: handleListFocus,
                             blur: handleBlur
@@ -11908,7 +11950,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [kendoEventsOutsideAngular]="{
                     click: handleAccept,
                     focus: handleFocus,
-                    blur: handleBlur
+                    blur: handleBlur,
+                    keydown: handleTabOut
                 }"
                 [scope]="this"
                 [disabled]="disabled"
@@ -11962,6 +12005,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }], valueReject: [{
                 type: Output
+            }], tabOutLastPart: [{
+                type: Output
             }] } });
 
 /**
@@ -12736,6 +12781,17 @@ class TimePickerComponent {
         }
         this.windowSize = windowSize();
     }
+    /**
+     * @hidden
+     */
+    onTabOutLastPart() {
+        if (this.cancelButton) {
+            this.timeSelector.cancel.nativeElement.focus();
+        }
+        else {
+            this.timeSelector.accept.nativeElement.focus();
+        }
+    }
     toggleTimeSelector(show) {
         this.windowSize = windowSize();
         if (this.isAdaptive) {
@@ -13094,6 +13150,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [scope]="this"
                 (valueChange)="handleChange($event)"
                 (valueReject)="handleReject()"
+                (tabOutLastPart)="onTabOutLastPart()"
             >
                 <kendo-timeselector-messages
                     [acceptLabel]="localization.get('acceptLabel')"
@@ -13111,7 +13168,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -13293,6 +13350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [scope]="this"
                 (valueChange)="handleChange($event)"
                 (valueReject)="handleReject()"
+                (tabOutLastPart)="onTabOutLastPart()"
             >
                 <kendo-timeselector-messages
                     [acceptLabel]="localization.get('acceptLabel')"
@@ -13489,6 +13547,9 @@ const DEFAULT_ACTIVE_TAB = 'date';
 const DEFAULT_DATEINPUT_FORMAT = 'g';
 const DEFAULT_TIMESELECTOR_FORMAT = 't';
 const TWO_DIGIT_YEAR_MAX = 68;
+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-date-tab';
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
@@ -14010,6 +14071,18 @@ class DateTimePickerComponent {
         return this.calendar?.popupId;
     }
     ;
+    get acceptButton() {
+        return this.popupRef?.popup.instance.container.nativeElement.querySelector(ACCEPT_BUTTON_SELECTOR);
+    }
+    ;
+    get cancelButtonElement() {
+        return this.popupRef?.popup.instance.container.nativeElement.querySelector(CANCEL_BUTTON_SELECOTR);
+    }
+    ;
+    get dateTabButton() {
+        return this.popupRef?.popup.instance.container.nativeElement.querySelector(DATE_TAB_BUTTON_SELECTOR);
+    }
+    ;
     ngOnInit() {
         this.subscriptions.add(this.pickerService.onFocus
             // detect popup changes to disable the inactive view mark-up when the popup is open
@@ -14215,6 +14288,20 @@ class DateTimePickerComponent {
         }
         this.activeTabComponent.focus();
     }
+    /**
+     * @hidden
+     */
+    onTabOutLastPart() {
+        if (!this.cancelButton && !this.calendarValue) {
+            this.dateTabButton.focus();
+        }
+        else if (!this.cancelButton && this.calendarValue) {
+            this.acceptButton.focus();
+        }
+        else if (this.cancelButton) {
+            this.cancelButtonElement.focus();
+        }
+    }
     /**
      * @hidden
      */
@@ -14297,22 +14384,41 @@ class DateTimePickerComponent {
     /**
      * @hidden
      */
-    handleTabOut(event) {
-        const { keyCode, shiftKey, target } = event;
-        // if no focusable next sibling elements exist in the controls sections, the user is tabbing out of the popup
-        const focusableSiblingAvailable = isPresent(target.nextElementSibling) && !target.nextElementSibling.disabled;
-        if (keyCode === Keys$1.Tab && !shiftKey && !focusableSiblingAvailable) {
-            this.input.focus();
-            this.handleCancel();
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleBackTabOut(event) {
-        const { keyCode, shiftKey } = event;
-        if (keyCode === Keys$1.Tab && shiftKey) {
-            this.input.focus();
+    handleTab(event) {
+        event.preventDefault();
+        const { shiftKey } = event;
+        switch (event.target) {
+            case this.acceptButton:
+                if (!shiftKey && this.calendarValue) {
+                    this.dateTabButton.focus();
+                }
+                break;
+            case this.cancelButtonElement:
+                if (!shiftKey && !this.calendarValue) {
+                    this.dateTabButton.focus();
+                }
+                else if (!shiftKey && this.calendarValue) {
+                    this.acceptButton.focus();
+                }
+                break;
+            case this.dateTabButton:
+                if (this.calendarValue) {
+                    this.acceptButton.focus();
+                }
+                else if (!this.calendarValue && this.cancelButton) {
+                    this.cancelButtonElement.focus();
+                }
+                else if (!this.calendarValue && !this.cancelButton) {
+                    if (this.activeTab === 'date') {
+                        this.calendar.monthView.list.nativeElement.focus();
+                    }
+                    else {
+                        this.timeSelector.focus();
+                    }
+                }
+                break;
+            default:
+                break;
         }
     }
     /**
@@ -14497,6 +14603,15 @@ class DateTimePickerComponent {
         this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
         this.setAriaActiveDescendant();
         this.popupRef.popupAnchorViewportLeave.subscribe(() => this.handleCancel());
+        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) {
+                    event.preventDefault();
+                    this.dateTabButton.focus();
+                }
+            }));
+        }
     }
     setAriaActiveDescendant() {
         const focusedCellChangeEvent = this.calendar.type === 'infinite' ?
@@ -14805,7 +14920,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                             [attr.aria-label]="localization.get('dateTabLabel')"
                             [kendoEventsOutsideAngular]="{
                                 click: changeActiveTab.bind(this, 'date'),
-                                keydown: handleBackTabOut
+                                'keydown.shift.tab': handleTab
                             }"
                             [scope]="this"
                         >
@@ -14878,6 +14993,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                             [disabled]="disableTimeSelector"
                             [isAdaptiveEnabled]="isAdaptiveModeEnabled"
                             [isDateTimePicker]="true"
+                            (tabOutLastPart)="onTabOutLastPart()"
                         >
                             <kendo-timeselector-messages
                                 [acceptLabel]="localization.get('acceptLabel')"
@@ -14900,7 +15016,6 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     *ngIf="!isAdaptive"
                     class="k-datetime-footer k-action-buttons k-actions k-hstack k-justify-content-stretch"
                     [kendoEventsOutsideAngular]="{
-                        keydown: handleTabOut,
                         focusin: handleFocus,
                         focusout: handleBlur
                     }"
@@ -14914,7 +15029,8 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                         [attr.title]="localization.get('cancelLabel')"
                         [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
-                            click: handleCancel
+                            click: handleCancel,
+                            'keydown.tab': handleTab
                         }"
                         [scope]="this"
                     >
@@ -14928,7 +15044,8 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                         [attr.aria-label]="localization.get('acceptLabel')"
                         [disabled]="!calendarValue"
                         [kendoEventsOutsideAngular]="{
-                            click: handleAccept
+                            click: handleAccept,
+                            'keydown.tab': handleTab
                         }"
                         [scope]="this"
                     >
@@ -14937,7 +15054,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -15163,7 +15280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [attr.aria-label]="localization.get('dateTabLabel')"
                             [kendoEventsOutsideAngular]="{
                                 click: changeActiveTab.bind(this, 'date'),
-                                keydown: handleBackTabOut
+                                'keydown.shift.tab': handleTab
                             }"
                             [scope]="this"
                         >
@@ -15236,6 +15353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [disabled]="disableTimeSelector"
                             [isAdaptiveEnabled]="isAdaptiveModeEnabled"
                             [isDateTimePicker]="true"
+                            (tabOutLastPart)="onTabOutLastPart()"
                         >
                             <kendo-timeselector-messages
                                 [acceptLabel]="localization.get('acceptLabel')"
@@ -15258,7 +15376,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     *ngIf="!isAdaptive"
                     class="k-datetime-footer k-action-buttons k-actions k-hstack k-justify-content-stretch"
                     [kendoEventsOutsideAngular]="{
-                        keydown: handleTabOut,
                         focusin: handleFocus,
                         focusout: handleBlur
                     }"
@@ -15272,7 +15389,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         [attr.title]="localization.get('cancelLabel')"
                         [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
-                            click: handleCancel
+                            click: handleCancel,
+                            'keydown.tab': handleTab
                         }"
                         [scope]="this"
                     >
@@ -15286,7 +15404,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         [attr.aria-label]="localization.get('acceptLabel')"
                         [disabled]="!calendarValue"
                         [kendoEventsOutsideAngular]="{
-                            click: handleAccept
+                            click: handleAccept,
+                            'keydown.tab': handleTab
                         }"
                         [scope]="this"
                     >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dateinputs",
-  "version": "12.1.0-develop.1",
+  "version": "12.1.0-develop.2",
   "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.1.0-develop.1",
-    "@progress/kendo-angular-intl": "12.1.0-develop.1",
-    "@progress/kendo-angular-l10n": "12.1.0-develop.1",
-    "@progress/kendo-angular-icons": "12.1.0-develop.1",
-    "@progress/kendo-angular-popup": "12.1.0-develop.1",
-    "@progress/kendo-angular-navigation": "12.1.0-develop.1",
+    "@progress/kendo-angular-common": "12.1.0-develop.2",
+    "@progress/kendo-angular-intl": "12.1.0-develop.2",
+    "@progress/kendo-angular-l10n": "12.1.0-develop.2",
+    "@progress/kendo-angular-icons": "12.1.0-develop.2",
+    "@progress/kendo-angular-popup": "12.1.0-develop.2",
+    "@progress/kendo-angular-navigation": "12.1.0-develop.2",
     "rxjs": "^6.5.3 || ^7.0.0",
-    "@progress/kendo-angular-buttons": "12.1.0-develop.1",
-    "@progress/kendo-angular-inputs": "12.1.0-develop.1",
-    "@progress/kendo-angular-label": "12.1.0-develop.1"
+    "@progress/kendo-angular-buttons": "12.1.0-develop.2",
+    "@progress/kendo-angular-inputs": "12.1.0-develop.2",
+    "@progress/kendo-angular-label": "12.1.0-develop.2"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "12.1.0-develop.1",
+    "@progress/kendo-angular-schematics": "12.1.0-develop.2",
     "@progress/kendo-common": "^0.2.0",
     "@progress/kendo-date-math": "^1.1.0"
   },

package/timepicker/timelist.component.d.ts

@@ -26,7 +26,9 @@ export declare class TimeListComponent implements OnChanges, OnInit, OnDestroy {
     step: number;
     disabled: boolean;
     value: Date;
+    isLast: boolean;
     valueChange: EventEmitter<Date>;
+    tabOutLastPart: EventEmitter<any>;
     virtualization: VirtualizationComponent;
     get roleAttribute(): string;
     get ariaLabel(): string;
@@ -88,5 +90,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": "min"; "max": "max"; "part": "part"; "step": "step"; "disabled": "disabled"; "value": "value"; }, { "valueChange": "valueChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimeListComponent, "kendo-timelist", never, { "min": "min"; "max": "max"; "part": "part"; "step": "step"; "disabled": "disabled"; "value": "value"; "isLast": "isLast"; }, { "valueChange": "valueChange"; "tabOutLastPart": "tabOutLastPart"; }, never, never>;
 }

package/timepicker/timepicker.component.d.ts

@@ -516,6 +516,10 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
      * @hidden
      */
     onResize(): void;
+    /**
+     * @hidden
+     */
+    onTabOutLastPart(): void;
     private toggleTimeSelector;
     private toggleActionSheet;
     private togglePopup;

package/timepicker/timeselector.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2023 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 } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, QueryList, OnInit, OnChanges, OnDestroy, Renderer2, AfterViewInit } 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 {
+export declare class TimeSelectorComponent implements OnChanges, OnInit, OnDestroy, AfterViewInit {
     localization: LocalizationService;
     private cdr;
     element: ElementRef;
@@ -105,6 +105,7 @@ export declare class TimeSelectorComponent implements OnChanges, OnInit, OnDestr
      * Fires each time the user cancels the selected value.
      */
     valueReject: EventEmitter<any>;
+    tabOutLastPart: EventEmitter<any>;
     dateFormatParts: any[];
     isActive: boolean;
     showNowButton: boolean;
@@ -124,6 +125,7 @@ export declare class TimeSelectorComponent implements OnChanges, OnInit, OnDestr
      * @hidden
      */
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     /**
      * @hidden
      */
@@ -177,6 +179,10 @@ export declare class TimeSelectorComponent implements OnChanges, OnInit, OnDestr
      * @hidden
      */
     containsElement(element: any): boolean;
+    /**
+     * @hidden
+     */
+    handleTabOut(event: KeyboardEvent): void;
     partStep(part: any): number;
     private init;
     private focusList;
@@ -190,5 +196,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": "format"; "min": "min"; "max": "max"; "cancelButton": "cancelButton"; "setButton": "setButton"; "nowButton": "nowButton"; "disabled": "disabled"; "isAdaptiveEnabled": "isAdaptiveEnabled"; "isDateTimePicker": "isDateTimePicker"; "steps": "steps"; "value": "value"; }, { "valueChange": "valueChange"; "valueReject": "valueReject"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimeSelectorComponent, "kendo-timeselector", ["kendo-timeselector"], { "format": "format"; "min": "min"; "max": "max"; "cancelButton": "cancelButton"; "setButton": "setButton"; "nowButton": "nowButton"; "disabled": "disabled"; "isAdaptiveEnabled": "isAdaptiveEnabled"; "isDateTimePicker": "isDateTimePicker"; "steps": "steps"; "value": "value"; }, { "valueChange": "valueChange"; "valueReject": "valueReject"; "tabOutLastPart": "tabOutLastPart"; }, never, never>;
 }