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

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

@@ -48,10 +48,9 @@ import * as i10 from "@angular/common";
  * ```
  */
 export class DateRangePopupComponent {
-    constructor(popupService, dateRangeService, ref, zone, renderer, localization, cdr, rtl) {
+    constructor(popupService, dateRangeService, zone, renderer, localization, cdr, rtl) {
         this.popupService = popupService;
         this.dateRangeService = dateRangeService;
-        this.ref = ref;
         this.zone = zone;
         this.renderer = renderer;
         this.localization = localization;
@@ -194,8 +193,16 @@ export class DateRangePopupComponent {
         }
     }
     ngAfterViewInit() {
-        this.calendarSubscriptions.add(this.contentCalendar.changes.subscribe((changes) => this.calendar = changes.first));
-        this.calendarSubscriptions.add(this.viewCalendar.changes.subscribe((changes) => this.calendar = changes.first));
+        this.calendarSubscriptions.add(this.contentCalendar.changes.subscribe((changes) => {
+            this.calendar = changes.first;
+            this.actionSheet.titleId = changes.first?.headerId;
+            this.cdr.detectChanges();
+        }));
+        this.calendarSubscriptions.add(this.viewCalendar.changes.subscribe((changes) => {
+            this.calendar = changes.first;
+            this.actionSheet.titleId = changes.first?.headerId;
+            this.cdr.detectChanges();
+        }));
         if (isWindowAvailable()) {
             this.zone.runOutsideAngular(() => this.windowBlurSubscription = fromEvent(window, 'blur').subscribe(this.handleWindowBlur.bind(this)));
         }
@@ -226,7 +233,7 @@ export class DateRangePopupComponent {
             this.activateSubscription.unsubscribe();
         }
         this.show = true;
-        this.ref.markForCheck();
+        this.cdr.markForCheck();
         this.zone.runOutsideAngular(() => {
             this.activateSubscription = merge(this.contentCalendar.changes, this.viewCalendar.changes)
                 .pipe(filter(changes => changes && changes.first), map(changes => changes.first))
@@ -301,6 +308,48 @@ export class DateRangePopupComponent {
         }
         this.windowSize = windowSize();
     }
+    /**
+     * @hidden
+     */
+    closePopup(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.toggle(false);
+        if (this.dateRangeService.activeRangeEnd === 'start' || !this.dateRangeService.activeRangeEnd) {
+            this.dateRangeService.startInput$.value.focus();
+        }
+        else {
+            this.dateRangeService.endInput$.value.focus();
+        }
+        ;
+    }
+    /**
+     * @hidden
+     */
+    handleTab(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.dateRangeService.activeRangeEnd === 'start' || !this.dateRangeService.activeRangeEnd) {
+            this.dateRangeService.setActiveRangeEnd('end');
+        }
+        else {
+            this.dateRangeService.endInput$.value.focus();
+        }
+    }
+    ;
+    /**
+     * @hidden
+     */
+    handleShiftTab(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.dateRangeService.activeRangeEnd === 'end') {
+            this.dateRangeService.setActiveRangeEnd('start');
+        }
+        else {
+            this.dateRangeService.startInput$.value.focus();
+        }
+    }
     handleWindowBlur() {
         if (!this.show || this.actionSheet.expanded) {
             return;
@@ -421,7 +470,7 @@ export class DateRangePopupComponent {
         }
     }
 }
-DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1.PopupService }, { token: i2.DateRangeService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1.PopupService }, { token: i2.DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
         LocalizationService,
         {
@@ -445,10 +494,10 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         </ng-container> 
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
-            <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
+            <kendo-multiviewcalendar kendoDateRangeSelection (onClosePopup)="closePopup($event)" (onTabPress)="handleTab($event)" (onShiftTabPress)="handleShiftTab($event)"></kendo-multiviewcalendar>
         </ng-template>
 
-        <kendo-actionsheet 
+        <kendo-actionsheet
             #actionSheet
             (overlayClick)="show=false"
             (collapse)="onBlur.emit()"
@@ -485,7 +534,6 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                         <kendo-multiviewcalendar
                             class="k-calendar-lg"
                             orientation="vertical"
-                            #test
                             kendoDateRangeSelection
                             [shouldSetRange]="false">
                         </kendo-multiviewcalendar>
@@ -513,7 +561,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
             </ng-template>
         </kendo-actionsheet>
-    `, isInline: true, components: [{ type: i4.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }, { type: i5.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i7.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"] }], directives: [{ type: i8.DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { type: i9.DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd", "shouldSetRange"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }, { type: i5.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i4.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { type: i5.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i7.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"] }], directives: [{ type: i8.DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { type: i9.DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd", "shouldSetRange"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }, { type: i5.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
@@ -543,10 +591,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-container> 
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
-            <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
+            <kendo-multiviewcalendar kendoDateRangeSelection (onClosePopup)="closePopup($event)" (onTabPress)="handleTab($event)" (onShiftTabPress)="handleShiftTab($event)"></kendo-multiviewcalendar>
         </ng-template>
 
-        <kendo-actionsheet 
+        <kendo-actionsheet
             #actionSheet
             (overlayClick)="show=false"
             (collapse)="onBlur.emit()"
@@ -583,7 +631,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         <kendo-multiviewcalendar
                             class="k-calendar-lg"
                             orientation="vertical"
-                            #test
                             kendoDateRangeSelection
                             [shouldSetRange]="false">
                         </kendo-multiviewcalendar>
@@ -613,7 +660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-actionsheet>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.DateRangeService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.DateRangeService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,

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

@@ -82,14 +82,14 @@ export class DateRangeService {
      * Gets the start input element.
      */
     get inputStartElement() {
-        return this.startInput$.value.dateInput.nativeElement;
+        return this.startInput$.value.inputElement;
     }
     /**
      * @hidden
      * Gets the end input element.
      */
     get inputEndElement() {
-        return this.endInput$.value.dateInput.nativeElement;
+        return this.endInput$.value.inputElement;
     }
     /**
      * Activates the registered `DateRangePopup` component.

package/esm2020/datetimepicker/datetimepicker.component.mjs

@@ -265,15 +265,9 @@ export class DateTimePickerComponent {
     /**
      * @hidden
      */
-    get input() {
+    get dateInput() {
         return this.pickerService.input;
     }
-    /**
-     * @hidden
-     */
-    get inputElement() {
-        return this.wrapper.nativeElement.querySelector('input');
-    }
     /**
      * @hidden
      */
@@ -626,6 +620,9 @@ export class DateTimePickerComponent {
             this.incompleteValidator = this.incompleteDateValidation ? incompleteDateValidator() : noop;
             this.onValidatorChange();
         }
+        if (!this.focusableId || changes['focusableId']) {
+            this.focusableId = this.dateInput?.focusableId;
+        }
     }
     ngOnDestroy() {
         if (this.isOpen) {
@@ -645,7 +642,7 @@ export class DateTimePickerComponent {
             this.activeTabComponent.focus();
         }
         else {
-            this.input.focus();
+            this.dateInput.focus();
         }
     }
     /**
@@ -656,7 +653,7 @@ export class DateTimePickerComponent {
             this.activeTabComponent.blur();
         }
         else {
-            this.input.blur();
+            this.dateInput.blur();
         }
     }
     /**
@@ -708,7 +705,7 @@ export class DateTimePickerComponent {
      * @hidden
      */
     validate(control) {
-        return this.minValidateFn(control) || this.maxValidateFn(control) || this.disabledDatesValidateFn(control) || this.incompleteValidator(control, this.input && this.input.isDateIncomplete);
+        return this.minValidateFn(control) || this.maxValidateFn(control) || this.disabledDatesValidateFn(control) || this.incompleteValidator(control, this.dateInput && this.dateInput.isDateIncomplete);
     }
     /**
      * @hidden
@@ -722,7 +719,7 @@ export class DateTimePickerComponent {
      * Used by the TextBoxContainer to determine if the floating label will render in the input.
      */
     isEmpty() {
-        return !isPresent(this.value) && this.input.isEmpty();
+        return !isPresent(this.value) && this.dateInput.isEmpty();
     }
     /**
      * @hidden
@@ -795,7 +792,7 @@ export class DateTimePickerComponent {
             return;
         }
         if (this.activeTab === 'time') {
-            this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant);
         }
         this.activeTabComponent.focus();
     }
@@ -940,7 +937,6 @@ export class DateTimePickerComponent {
         this.cdr.markForCheck();
         // Reset tabs after actionsheet is collapsed, otherwise the tab change can be seen during the animation
         this.resetActiveTab();
-        this.input.focus();
     }
     /**
      * @hidden
@@ -972,14 +968,14 @@ export class DateTimePickerComponent {
             this.actionSheet.toggle();
             this.updateActionSheetAdaptiveAppearance();
             this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'id', this.popupUID);
-            this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+            this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaControls, this.popupUID);
             this.setAriaActiveDescendant();
         }
         else if (isPresent(show) && !show && this.isOpen) {
             this.actionSheet.toggle();
             this.ariaActiveDescendantSubscription.unsubscribe();
-            this.renderer.removeAttribute(this.input.inputElement, attributeNames.ariaActiveDescendant);
-            this.renderer.removeAttribute(this.input.inputElement, attributeNames.ariaControls);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant);
+            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaControls);
         }
     }
     updateActionSheetAdaptiveAppearance() {
@@ -1094,9 +1090,9 @@ export class DateTimePickerComponent {
             this.activeTabComponent.focus();
         }
         else if (!this.touchEnabled) {
-            this.input.focus();
+            this.dateInput.focus();
         }
-        else if (!this.input.isActive) {
+        else if (!this.dateInput.isActive) {
             this.handleBlur();
         }
     }
@@ -1115,7 +1111,7 @@ export class DateTimePickerComponent {
             popupAlign: { vertical: 'top', horizontal: direction }
         });
         this.popupRef.popupElement.setAttribute('id', this.popupUID);
-        this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
+        this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaControls, this.popupUID);
         this.setAriaActiveDescendant();
         this.popupRef.popupAnchorViewportLeave.subscribe(() => this.handleCancel());
         if (this.calendar.type === 'infinite') {
@@ -1132,15 +1128,15 @@ export class DateTimePickerComponent {
         const focusedCellChangeEvent = this.calendar.type === 'infinite' ?
             this.calendar.monthView.focusedCellChange :
             this.calendar.multiViewCalendar.viewList.focusedCellChange;
-        this.ariaActiveDescendantSubscription = focusedCellChangeEvent.subscribe((id) => this.renderer.setAttribute(this.input.inputElement, attributeNames.ariaActiveDescendant, id));
+        this.ariaActiveDescendantSubscription = focusedCellChangeEvent.subscribe((id) => this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant, id));
     }
     closePopup() {
         if (!this.isOpen) {
             return;
         }
         this.ariaActiveDescendantSubscription.unsubscribe();
-        this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
-        this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
+        this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaControls);
+        this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant);
         this.popupRef.close();
         this.popupRef = null;
     }
@@ -1360,6 +1356,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             #actionSheet
             (overlayClick)="toggleDateTime(false)"
             (collapse)="handleActionSheetCollapse()"
+            [titleId]="calendar?.headerId"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">
@@ -1469,6 +1466,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 >
                     <div class="k-datetime-calendar-wrap">
                         <kendo-calendar
+                            #calendar
                             [ngClass]="{'k-calendar-lg': isAdaptive}"
                             [focusedDate]="focusedDate"
                             [(value)]="calendarValue"
@@ -1531,7 +1529,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
                 <div
                     *ngIf="!isAdaptive"
-                    class="k-datetime-footer k-action-buttons k-actions k-hstack k-justify-content-stretch"
+                    class="k-datetime-footer k-actions k-actions-stretched k-actions-horizontal"
                     [kendoEventsOutsideAngular]="{
                         focusin: handleFocus,
                         focusout: handleBlur
@@ -1539,39 +1537,39 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     [scope]="this"
                 >
                     <button
-                        *ngIf="cancelButton"
                         type="button"
-                        class="k-button k-time-cancel"
-                        [ngClass]="popupButtonsClasses()"
-                        [attr.title]="localization.get('cancelLabel')"
-                        [attr.aria-label]="localization.get('cancelLabel')"
+                        class="k-button k-time-accept"
+                        [ngClass]="popupButtonsClasses('primary')"
+                        [attr.title]="localization.get('acceptLabel')"
+                        [attr.aria-label]="localization.get('acceptLabel')"
+                        [disabled]="!calendarValue"
                         [kendoEventsOutsideAngular]="{
-                            click: handleCancel,
+                            click: handleAccept,
                             'keydown.tab': handleTab
                         }"
                         [scope]="this"
                     >
-                        {{localization.get('cancel')}}
+                        {{localization.get('accept')}}
                     </button>
                     <button
+                        *ngIf="cancelButton"
                         type="button"
-                        class="k-button k-time-accept"
-                        [ngClass]="popupButtonsClasses('primary')"
-                        [attr.title]="localization.get('acceptLabel')"
-                        [attr.aria-label]="localization.get('acceptLabel')"
-                        [disabled]="!calendarValue"
+                        class="k-button k-time-cancel"
+                        [ngClass]="popupButtonsClasses()"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
-                            click: handleAccept,
+                            click: handleCancel,
                             'keydown.tab': handleTab
                         }"
                         [scope]="this"
                     >
-                        {{localization.get('accept')}}
+                        {{localization.get('cancel')}}
                     </button>
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: i6.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.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", "titleId"], 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: i11.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: i12.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: i13.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: i14.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i15.LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i16.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i6.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.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], 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", "titleId"], 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: i11.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: i12.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: i13.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: i14.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i15.LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i16.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: [{
@@ -1722,6 +1720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             #actionSheet
             (overlayClick)="toggleDateTime(false)"
             (collapse)="handleActionSheetCollapse()"
+            [titleId]="calendar?.headerId"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">
@@ -1831,6 +1830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 >
                     <div class="k-datetime-calendar-wrap">
                         <kendo-calendar
+                            #calendar
                             [ngClass]="{'k-calendar-lg': isAdaptive}"
                             [focusedDate]="focusedDate"
                             [(value)]="calendarValue"
@@ -1893,7 +1893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </div>
                 <div
                     *ngIf="!isAdaptive"
-                    class="k-datetime-footer k-action-buttons k-actions k-hstack k-justify-content-stretch"
+                    class="k-datetime-footer k-actions k-actions-stretched k-actions-horizontal"
                     [kendoEventsOutsideAngular]="{
                         focusin: handleFocus,
                         focusout: handleBlur
@@ -1901,34 +1901,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [scope]="this"
                 >
                     <button
-                        *ngIf="cancelButton"
                         type="button"
-                        class="k-button k-time-cancel"
-                        [ngClass]="popupButtonsClasses()"
-                        [attr.title]="localization.get('cancelLabel')"
-                        [attr.aria-label]="localization.get('cancelLabel')"
+                        class="k-button k-time-accept"
+                        [ngClass]="popupButtonsClasses('primary')"
+                        [attr.title]="localization.get('acceptLabel')"
+                        [attr.aria-label]="localization.get('acceptLabel')"
+                        [disabled]="!calendarValue"
                         [kendoEventsOutsideAngular]="{
-                            click: handleCancel,
+                            click: handleAccept,
                             'keydown.tab': handleTab
                         }"
                         [scope]="this"
                     >
-                        {{localization.get('cancel')}}
+                        {{localization.get('accept')}}
                     </button>
                     <button
+                        *ngIf="cancelButton"
                         type="button"
-                        class="k-button k-time-accept"
-                        [ngClass]="popupButtonsClasses('primary')"
-                        [attr.title]="localization.get('acceptLabel')"
-                        [attr.aria-label]="localization.get('acceptLabel')"
-                        [disabled]="!calendarValue"
+                        class="k-button k-time-cancel"
+                        [ngClass]="popupButtonsClasses()"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
-                            click: handleAccept,
+                            click: handleCancel,
                             'keydown.tab': handleTab
                         }"
                         [scope]="this"
                     >
-                        {{localization.get('accept')}}
+                        {{localization.get('cancel')}}
                     </button>
                 </div>
             </div>

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: 1684846671,
-    version: '13.0.0-develop.2',
+    publishDate: 1685972909,
+    version: '13.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };