@progress/kendo-angular-dateinputs 17.0.0-develop.2 → 17.0.0-develop.21

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

@@ -20,6 +20,7 @@ import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/ke
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { NgIf } from '@angular/common';
 import { DateRangePopupLocalizedMessagesDirective } from './localization/daterange-popup-localized-messages.directive';
+import { CalendarViewEnum } from '../calendar/models/view.enum';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
 import * as i2 from "./date-range.service";
@@ -53,12 +54,58 @@ export class DateRangePopupComponent {
         this.cdr = cdr;
         this.rtl = rtl;
         /**
-         * Allows reverse selection when using `range` selection.
+         * @hidden
+         *
+         * Determines whether to display the MultiViewCalendar header.
+         */
+        this.showCalendarHeader = true;
+        /**
+         * Defines the active view that the MultiViewCalendar initially renders
+         * ([see example]({% slug viewoptions_multiviewcalendar %})).
+         * By default, the active view is `month`.
+         *
+         * > You have to set `activeView` within the `topView`-`bottomView` range.
+         */
+        this.activeView = CalendarViewEnum[CalendarViewEnum.month];
+        /**
+         * Defines the bottommost view, to which the user can navigate
+         * ([see example](slug:viewdepth_multiviewcalendar)).
+         */
+        this.bottomView = CalendarViewEnum[CalendarViewEnum.month];
+        /**
+         * Defines the topmost view, to which the user can navigate.
+         */
+        this.topView = CalendarViewEnum[CalendarViewEnum.century];
+        /**
+         * Allows reverse selection.
          * If `allowReverse` is set to `true`, the component skips the validation of whether the start date is after the end date.
          *
          * @default false
          */
         this.allowReverse = false;
+        /**
+         * Determines whether to enable animation when navigating to previous/next view.
+         * @default false
+         */
+        this.animateNavigation = false;
+        /**
+         * Sets or gets the `disabled` property of the MultiViewCalendar and
+         * determines whether the component is active
+         * ([see example]({% slug disabled_multiviewcalendar %})).
+         */
+        this.disabled = false;
+        /**
+         * Sets or gets the `views` property of the MultiViewCalendar and
+         * defines the number of rendered months.
+         *
+         * @default 2
+         */
+        this.views = 2;
+        /**
+         * Determines whether to display a week number column in the `month` view
+         * ([see example]({% slug weeknumcolumn_multiviewcalendar %})).
+         */
+        this.weekNumber = false;
         /**
          * Controls the popup animation.
          * By default, the opening and closing animations are enabled.
@@ -66,6 +113,17 @@ export class DateRangePopupComponent {
          * refer to the article on [animations]({% slug animations_popup %}).
          */
         this.animate = true;
+        /**
+         * Determines whether to display a header for every view (for example the month name).
+         *
+         * @default false
+         */
+        this.showViewHeader = false;
+        /**
+         * Displays the days that fall out of the current month ([see example]({% slug viewoptions_multiviewcalendar %}#toc-displaying-other-month-days)).
+         * @default false
+         */
+        this.showOtherMonthDays = false;
         /**
          * Configures the collision behavior of the popup.
          * For more information, refer to the article on
@@ -500,7 +558,7 @@ export class DateRangePopupComponent {
     }
 }
 DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1.PopupService }, { token: i2.DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangePopupComponent, isStandalone: true, selector: "kendo-daterange-popup", inputs: { allowReverse: "allowReverse", animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", size: "size" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
+DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangePopupComponent, isStandalone: true, selector: "kendo-daterange-popup", inputs: { showCalendarHeader: "showCalendarHeader", focusedDate: "focusedDate", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", min: "min", max: "max", allowReverse: "allowReverse", animateNavigation: "animateNavigation", disabled: "disabled", views: "views", weekNumber: "weekNumber", animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", showViewHeader: "showViewHeader", showOtherMonthDays: "showOtherMonthDays", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", size: "size" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -524,7 +582,22 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
             <kendo-multiviewcalendar
+                [activeView]="activeView"
+                [bottomView]="bottomView"
+                [animateNavigation]="animateNavigation"
+                [disabled]="disabled"
+                orientation="horizontal"
+                [views]="views"
+                [weekNumber]="weekNumber"
+                [topView]="topView"
+                [disabledDates]="disabledDates"
+                [min]="min"
+                [max]="max"
+                [showCalendarHeader]="showCalendarHeader"
+                [focusedDate]="focusedDate"
                 [allowReverse]="allowReverse"
+                [showViewHeader]="showViewHeader"
+                [showOtherMonthDays]="showOtherMonthDays"
                 selection="range"
                 [size]="size"
                 [value]="dateRangeService.selectionRange"
@@ -572,8 +645,22 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                     <div class="k-scrollable-wrap">
                         <kendo-multiviewcalendar
                             size="large"
+                            [animateNavigation]="animateNavigation"
+                            [disabled]="disabled"
                             orientation="vertical"
+                            [views]="views"
+                            [weekNumber]="weekNumber"
+                            [disabledDates]="disabledDates"
+                            [activeView]="activeView"
+                            [bottomView]="bottomView"
+                            [topView]="topView"
+                            [min]="min"
+                            [max]="max"
+                            [showCalendarHeader]="showCalendarHeader"
+                            [focusedDate]="focusedDate"
                             [allowReverse]="allowReverse"
+                            [showViewHeader]="showViewHeader"
+                            [showOtherMonthDays]="showOtherMonthDays"
                             [focusedDate]="dateRangeService.focusedDate"
                             [value]="dateRangeService.selectionRange"
                             selection="range"
@@ -606,7 +693,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 </div>
             </ng-template>
         </kendo-actionsheet>
-    `, isInline: true, dependencies: [{ kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
@@ -637,7 +724,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
             <kendo-multiviewcalendar
+                [activeView]="activeView"
+                [bottomView]="bottomView"
+                [animateNavigation]="animateNavigation"
+                [disabled]="disabled"
+                orientation="horizontal"
+                [views]="views"
+                [weekNumber]="weekNumber"
+                [topView]="topView"
+                [disabledDates]="disabledDates"
+                [min]="min"
+                [max]="max"
+                [showCalendarHeader]="showCalendarHeader"
+                [focusedDate]="focusedDate"
                 [allowReverse]="allowReverse"
+                [showViewHeader]="showViewHeader"
+                [showOtherMonthDays]="showOtherMonthDays"
                 selection="range"
                 [size]="size"
                 [value]="dateRangeService.selectionRange"
@@ -685,8 +787,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     <div class="k-scrollable-wrap">
                         <kendo-multiviewcalendar
                             size="large"
+                            [animateNavigation]="animateNavigation"
+                            [disabled]="disabled"
                             orientation="vertical"
+                            [views]="views"
+                            [weekNumber]="weekNumber"
+                            [disabledDates]="disabledDates"
+                            [activeView]="activeView"
+                            [bottomView]="bottomView"
+                            [topView]="topView"
+                            [min]="min"
+                            [max]="max"
+                            [showCalendarHeader]="showCalendarHeader"
+                            [focusedDate]="focusedDate"
                             [allowReverse]="allowReverse"
+                            [showViewHeader]="showViewHeader"
+                            [showOtherMonthDays]="showOtherMonthDays"
                             [focusedDate]="dateRangeService.focusedDate"
                             [value]="dateRangeService.selectionRange"
                             selection="range"
@@ -749,14 +865,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], contentCalendar: [{
                 type: ContentChildren,
                 args: [MultiViewCalendarComponent]
+            }], showCalendarHeader: [{
+                type: Input
+            }], focusedDate: [{
+                type: Input
+            }], disabledDates: [{
+                type: Input
+            }], activeView: [{
+                type: Input
+            }], bottomView: [{
+                type: Input
+            }], topView: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
             }], allowReverse: [{
                 type: Input
+            }], animateNavigation: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], views: [{
+                type: Input
+            }], weekNumber: [{
+                type: Input
             }], animate: [{
                 type: Input
             }], anchor: [{
                 type: Input
             }], anchorAlign: [{
                 type: Input
+            }], showViewHeader: [{
+                type: Input
+            }], showOtherMonthDays: [{
+                type: Input
             }], appendTo: [{
                 type: Input
             }], collision: [{

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

@@ -70,7 +70,7 @@ DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeComponent, isStandalone: true, selector: "kendo-daterange", inputs: { size: "size" }, host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
         <kendo-daterange-popup *ngIf="showDefault" [size]="size"></kendo-daterange-popup>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["allowReverse", "animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle", "size"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["showCalendarHeader", "focusedDate", "disabledDates", "activeView", "bottomView", "topView", "min", "max", "allowReverse", "animateNavigation", "disabled", "views", "weekNumber", "animate", "anchor", "anchorAlign", "showViewHeader", "showOtherMonthDays", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle", "size"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/datetimepicker/datetimepicker.component.mjs

@@ -657,10 +657,20 @@ export class DateTimePickerComponent extends MultiTabStop {
         }
     }
     get dateTabButton() {
-        return this.popupRef?.popup.instance.container.nativeElement.querySelector(DATE_TAB_BUTTON_SELECTOR);
+        if (this.isAdaptive) {
+            return this.actionSheet.element.nativeElement.querySelector(DATE_TAB_BUTTON_SELECTOR);
+        }
+        else {
+            return this.popupRef?.popup.instance.container.nativeElement.querySelector(DATE_TAB_BUTTON_SELECTOR);
+        }
     }
     get timeTabButton() {
-        return this.popupRef?.popup.instance.container.nativeElement.querySelector(TIME_TAB_BUTTON_SELECTOR);
+        if (this.isAdaptive) {
+            return this.actionSheet.element.nativeElement.querySelector(TIME_TAB_BUTTON_SELECTOR);
+        }
+        else {
+            return this.popupRef?.popup.instance.container.nativeElement.querySelector(TIME_TAB_BUTTON_SELECTOR);
+        }
     }
     /**
      * @hidden
@@ -1531,6 +1541,18 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                     <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton
+                        *ngIf="cancelButton"
+                        class="k-time-cancel"
+                        type="button"
+                        (click)="handleCancel()"
+                        size="large"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
                     <button kendoButton
                         type="button"
                         class="k-time-accept"
@@ -1543,18 +1565,6 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                     >
                         {{localization.get('accept')}}
                     </button>
-
-                    <button kendoButton
-                        *ngIf="cancelButton"
-                        class="k-time-cancel"
-                        type="button"
-                        (click)="handleCancel()"
-                        size="large"
-                        [attr.title]="localization.get('cancelLabel')"
-                        [attr.aria-label]="localization.get('cancelLabel')"
-                    >
-                        {{localization.get('cancel')}}
-                    </button>
                 </div>
             </ng-template>
         </kendo-actionsheet>
@@ -1733,7 +1743,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 </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], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "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", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1934,6 +1944,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton
+                        *ngIf="cancelButton"
+                        class="k-time-cancel"
+                        type="button"
+                        (click)="handleCancel()"
+                        size="large"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
                     <button kendoButton
                         type="button"
                         class="k-time-accept"
@@ -1946,18 +1968,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     >
                         {{localization.get('accept')}}
                     </button>
-
-                    <button kendoButton
-                        *ngIf="cancelButton"
-                        class="k-time-cancel"
-                        type="button"
-                        (click)="handleCancel()"
-                        size="large"
-                        [attr.title]="localization.get('cancelLabel')"
-                        [attr.aria-label]="localization.get('cancelLabel')"
-                    >
-                        {{localization.get('cancel')}}
-                    </button>
                 </div>
             </ng-template>
         </kendo-actionsheet>

package/esm2020/package-metadata.mjs

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

package/esm2020/timepicker/timepicker.component.mjs

@@ -42,6 +42,7 @@ const VALUE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/date
 const INTL_DATE_FORMAT = 'https://github.com/telerik/kendo-intl/blob/master/docs/date-formatting/index.md';
 const formatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PART.second}|${TIME_PART.millisecond}|${TIME_PART.dayperiod}|literal`);
 const ACCEPT_BUTTON_SELECTOR = '.k-button.k-time-accept';
+const CANCEL_BUTTON_SELECTOR = '.k-button.k-time-cancel';
 /**
  * Represents the [Kendo UI TimePicker component for Angular](slug:overview_timepicker).
  */
@@ -455,6 +456,9 @@ export class TimePickerComponent extends MultiTabStop {
     get adaptiveAcceptButton() {
         return this.actionSheet.element.nativeElement.querySelector(ACCEPT_BUTTON_SELECTOR);
     }
+    get adaptiveCancelButton() {
+        return this.actionSheet.element.nativeElement.querySelector(CANCEL_BUTTON_SELECTOR);
+    }
     get inputElement() {
         return this.wrapper.nativeElement.querySelector('input');
     }
@@ -775,7 +779,12 @@ export class TimePickerComponent extends MultiTabStop {
      * @hidden
      */
     onTabOutLastPart() {
-        this.isAdaptive ? this.adaptiveAcceptButton.focus() : this.timeSelector.accept.nativeElement.focus();
+        if (this.isAdaptive) {
+            this.cancelButton ? this.adaptiveCancelButton.focus() : this.adaptiveAcceptButton.focus();
+        }
+        else {
+            this.timeSelector.accept.nativeElement.focus();
+        }
     }
     toggleTimeSelector(show) {
         this.windowSize = windowSize();
@@ -1119,6 +1128,17 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                     <ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton 
+                        type="button"
+                        (click)="handleReject()"
+                        size="large"
+                        class="k-time-cancel"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
                     <button kendoButton
                         type="button"
                         (click)="handleActionSheetAccept()"
@@ -1130,17 +1150,6 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                     >
                         {{localization.get('accept')}}
                     </button>
-
-                    <button kendoButton 
-                        type="button"
-                        (click)="handleReject()"
-                        size="large"
-                        class="k-time-cancel"
-                        [attr.title]="localization.get('cancelLabel')"
-                        [attr.aria-label]="localization.get('cancelLabel')"
-                    >
-                        {{localization.get('cancel')}}
-                    </button>
                 </div>
             </ng-template>
         </kendo-actionsheet>
@@ -1183,7 +1192,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </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], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "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", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1343,6 +1352,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     <ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton 
+                        type="button"
+                        (click)="handleReject()"
+                        size="large"
+                        class="k-time-cancel"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
                     <button kendoButton
                         type="button"
                         (click)="handleActionSheetAccept()"
@@ -1354,17 +1374,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     >
                         {{localization.get('accept')}}
                     </button>
-
-                    <button kendoButton 
-                        type="button"
-                        (click)="handleReject()"
-                        size="large"
-                        class="k-time-cancel"
-                        [attr.title]="localization.get('cancelLabel')"
-                        [attr.aria-label]="localization.get('cancelLabel')"
-                    >
-                        {{localization.get('cancel')}}
-                    </button>
                 </div>
             </ng-template>
         </kendo-actionsheet>

package/esm2020/timepicker/timeselector.component.mjs

@@ -316,7 +316,7 @@ export class TimeSelectorComponent {
                 this.tabOutNow.emit();
             }
             else {
-                this.cancel ? this.cancel.nativeElement.focus() : this.accept.nativeElement.focus();
+                this.cancel ? this.cancel.nativeElement.focus() : this.accept?.nativeElement.focus();
             }
             return;
         }