@progress/kendo-angular-dateinputs 19.0.0-develop.3 → 19.0.0-develop.30

package/esm2022/datetimepicker/datetimepicker.component.mjs

@@ -9,14 +9,14 @@ import { tap } from 'rxjs/operators';
 import { cloneDate, isEqual, getDate } from '@progress/kendo-date-math';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { IntlService } from '@progress/kendo-angular-intl';
-import { hasObservers, isControlRequired, isDocumentAvailable, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
-import { attributeNames, isPresent, isTruthy } from '../common/utils';
+import { attributeNames, isPresent } from '../common/utils';
 import { mergeDateAndTime, noop, lastMillisecondOfDate, isInRange, isValidRange, isWindowAvailable, getFillModeClass, getRoundedClass, getSizeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { CalendarComponent } from '../calendar/calendar.component';
 import { TimeSelectorComponent } from '../timepicker/timeselector.component';
@@ -35,7 +35,7 @@ import { CenturyCellTemplateDirective } from '../calendar/templates/century-cell
 import { WeekNumberCellTemplateDirective } from '../calendar/templates/weeknumber-cell-template.directive';
 import { HeaderTitleTemplateDirective } from '../calendar/templates/header-title-template.directive';
 import { incompleteDateValidator } from '../validators/incomplete-date.validator';
-import { calendarIcon, checkIcon, clockIcon } from '@progress/kendo-svg-icons';
+import { calendarIcon, clockIcon, checkIcon } from '@progress/kendo-svg-icons';
 import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
 import { HeaderTemplateDirective } from '../calendar/templates/header-template.directive';
 import { FooterTemplateDirective } from '../calendar/templates/footer-template.directive';
@@ -218,18 +218,12 @@ export class DateTimePickerComponent extends MultiTabStop {
      * Sets the title of the input element of the DateTimePicker and the title text rendered
      * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
      */
-    title = '';
+    adaptiveTitle = '';
     /**
      * Sets the subtitle text rendered in the header of the popup(action sheet).
      * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
      */
-    set subtitle(subtitle) {
-        this._subtitle = subtitle;
-    }
-    get subtitle() {
-        return this._subtitle || this.placeholder;
-    }
-    _subtitle;
+    adaptiveSubtitle = '';
     /**
      * Sets or gets the `disabled` property of the DateTimePicker and determines whether the component is active
      * ([see example]({% slug disabled_datetimepicker %})).
@@ -427,7 +421,7 @@ export class DateTimePickerComponent extends MultiTabStop {
      * Indicates whether the component is currently open. That is when the popup or actionSheet is open.
      */
     get isOpen() {
-        return isTruthy(this.actionSheet?.expanded) || isPresent(this.popupRef);
+        return this.actionSheet?.expanded || isPresent(this.popupRef);
     }
     /**
      * Indicates whether the component or its popup content is focused.
@@ -620,6 +614,10 @@ export class DateTimePickerComponent extends MultiTabStop {
      * @hidden
      */
     checkIcon = checkIcon;
+    /**
+     * @hidden
+     */
+    windowSize;
     /**
      * @hidden
      */
@@ -770,7 +768,6 @@ export class DateTimePickerComponent extends MultiTabStop {
     _size = DEFAULT_SIZE;
     _rounded = DEFAULT_ROUNDED;
     _fillMode = DEFAULT_FILL_MODE;
-    windowSize;
     constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, localization, disabledDatesService, renderer, injector, adaptiveService) {
         super();
         this.popupService = popupService;
@@ -809,11 +806,6 @@ export class DateTimePickerComponent extends MultiTabStop {
     ngAfterViewInit() {
         this.setComponentClasses();
         this.windowSize = this.adaptiveService.size;
-        if (this.actionSheet && isDocumentAvailable()) {
-            // The following syntax is used as it does not violate CSP compliance
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
     }
     ngOnChanges(changes) {
         if (isPresent(changes['min']) || isPresent(changes['max'])) {
@@ -1208,14 +1200,6 @@ export class DateTimePickerComponent extends MultiTabStop {
         // Reset tabs after actionsheet is collapsed, otherwise the tab change can be seen during the animation
         this.resetActiveTab();
     }
-    /**
-     * @hidden
-     */
-    popupButtonsClasses(type) {
-        const buttonType = type ? type : 'base';
-        const sizeClass = `${this.isAdaptive ? getSizeClass('button', 'large') : this.size ? getSizeClass('button', this.size) : ''}`;
-        return `${sizeClass} ${this.rounded ? getRoundedClass(this.rounded) : ''} ${this.fillMode ? 'k-button-' + this.fillMode + ' ' + 'k-button-' + this.fillMode + '-' + buttonType : ''}`;
-    }
     /**
      * @hidden
      *
@@ -1224,50 +1208,35 @@ export class DateTimePickerComponent extends MultiTabStop {
     preventMouseDown(event) {
         event.preventDefault();
     }
-    _togglePopup(show) {
-        const shouldOpen = isPresent(show) ? show : !this.isOpen;
-        if (shouldOpen) {
-            this.openPopup();
-            return;
-        }
-        this.closePopup();
-        this.resetActiveTab();
-    }
+    /**
+     * @hidden
+     */
     toggleActionSheet(show) {
         if (isPresent(show) && show && !this.isOpen) {
             this.actionSheet.toggle();
-            this.updateActionSheetAdaptiveAppearance();
             this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'id', this.popupUID);
             this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaControls, this.popupUID);
             this.setAriaActiveDescendant();
         }
         else if (isPresent(show) && !show && this.isOpen) {
+            this.handleBlur();
             this.actionSheet.toggle();
             this.ariaActiveDescendantSubscription.unsubscribe();
             if (this.dateInput) {
                 this.renderer.removeAttribute(this.dateInput.inputElement, attributeNames.ariaActiveDescendant);
                 this.renderer.removeAttribute(this.dateInput.inputElement, attributeNames.ariaControls);
+                this.dateInput.focus();
             }
         }
     }
-    updateActionSheetAdaptiveAppearance() {
-        let element;
-        let animationContainer;
-        if (this.actionSheet) {
-            element = this.actionSheet['element'].nativeElement.querySelector('.k-actionsheet');
-            animationContainer = this.actionSheet['element'].nativeElement.querySelector('.k-child-animation-container');
-            if (this.windowSize === 'medium') {
-                this.renderer.removeClass(element, 'k-actionsheet-fullscreen');
-                this.renderer.removeStyle(animationContainer, 'height');
-            }
-            else if (this.windowSize === 'small') {
-                this.renderer.addClass(element, 'k-actionsheet-fullscreen');
-                this.renderer.setStyle(animationContainer, 'height', '100%');
-            }
-            this.renderer.addClass(element, 'k-adaptive-actionsheet');
-            this.renderer.addClass(element, 'k-actionsheet-bottom');
-            this.renderer.setStyle(animationContainer, 'bottom', '0px');
+    _togglePopup(show) {
+        const shouldOpen = isPresent(show) ? show : !this.isOpen;
+        if (shouldOpen) {
+            this.openPopup();
+            return;
         }
+        this.closePopup();
+        this.resetActiveTab();
     }
     /**
      * Changes the tab and the calendar or clock icon to the designated default.
@@ -1498,7 +1467,7 @@ export class DateTimePickerComponent extends MultiTabStop {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1.PopupService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i3.PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i5.DisabledDatesService }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i6.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateTimePickerComponent, isStandalone: true, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", clearButton: "clearButton", autoFill: "autoFill", adaptiveMode: "adaptiveMode", inputAttributes: "inputAttributes", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", escape: "escape" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateTimePickerComponent, isStandalone: true, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", clearButton: "clearButton", autoFill: "autoFill", adaptiveMode: "adaptiveMode", inputAttributes: "inputAttributes", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", escape: "escape" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
             PickerService,
             LocalizationService,
             DisabledDatesService,
@@ -1573,6 +1542,9 @@ export class DateTimePickerComponent extends MultiTabStop {
 
             i18n-clearTitle="kendo.datetimepicker.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-adaptiveCloseButtonTitle="kendo.datetimepicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container>
 
@@ -1600,7 +1572,7 @@ export class DateTimePickerComponent extends MultiTabStop {
             [steps]="steps"
             [tabindex]="tabindex"
             [isRequired]="isControlRequired"
-            [title]="title"
+            [title]="adaptiveTitle"
             pickerType="datetimepicker"
             hasPopup="dialog"
             [inputAttributes]="inputAttributes"
@@ -1660,30 +1632,39 @@ export class DateTimePickerComponent extends MultiTabStop {
 
         <kendo-actionsheet
             #actionSheet
-            (overlayClick)="toggleDateTime(false)"
+            (overlayClick)="toggleActionSheet(false)"
             (collapse)="handleActionSheetCollapse()"
             [titleId]="calendar?.headerId"
+            [cssClass]="{
+                'k-adaptive-actionsheet': true,
+                'k-actionsheet-fullscreen': windowSize === 'small',
+                'k-actionsheet-bottom': windowSize === 'medium'
+            }"
+            [cssStyle]="{
+                height: windowSize === 'small' ? '100vh' : '60vh'
+            }"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">
                     <div class="k-actionsheet-titlebar-group">
                         <div class="k-actionsheet-title">
-                            <div *ngIf="title" class="k-text-center">{{ title }}</div>
-                            <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                            <div class="k-text-center" *ngIf="adaptiveTitle">{{ adaptiveTitle }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center" *ngIf="adaptiveSubtitle">{{ adaptiveSubtitle }}</div>
                         </div>
                         <div class="k-actionsheet-actions">
                             <button
                                 kendoButton
                                 type="button"
                                 icon="check"
-                                [attr.title]="localization.get('clearTitle')"
+                                [attr.title]="localization.get('adaptiveCloseButtonTitle')"
                                 [svgIcon]="checkIcon"
                                 fillMode="flat"
+                                themeColor="primary"
                                 [tabIndex]="-1"
                                 aria-hidden="true"
                                 size="large"
-                                themeColor="primary"
-                                (click)="toggleDateTime(false)">
+                                innerCssClass="k-button-icon"
+                                (click)="toggleActionSheet(false)">
                             </button>
                         </div>
                     </div>
@@ -1741,10 +1722,10 @@ export class DateTimePickerComponent extends MultiTabStop {
                     [scope]="this"
                 >
                     <div class="k-button-group k-button-group-solid k-button-group-stretched" role="group">
-                        <button
+                        <button kendoButton
                             type="button"
-                            class="k-button k-group-start"
-                            [ngClass]="popupButtonsClasses()"
+                            class="k-group-start"
+                            [size]="isAdaptive ? 'large' : size"
                             [class.k-selected]="activeTab === 'date'"
                             [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
                             [attr.title]="localization.get('dateTabLabel')"
@@ -1757,10 +1738,10 @@ export class DateTimePickerComponent extends MultiTabStop {
                         >
                             {{localization.get('dateTab')}}
                         </button>
-                        <button
+                        <button kendoButton
                             type="button"
-                            class="k-button k-group-end"
-                            [ngClass]="popupButtonsClasses()"
+                            class="k-group-end"
+                            [size]="isAdaptive ? 'large' : size"
                             [class.k-selected]="activeTab === 'time'"
                             [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
                             [attr.title]="localization.get('timeTabLabel')"
@@ -1770,7 +1751,6 @@ export class DateTimePickerComponent extends MultiTabStop {
                                 'keydown.tab': handleTab
                             }"
                             [scope]="this"
-                            
                         >
                             {{localization.get('timeTab')}}
                         </button>
@@ -1864,10 +1844,10 @@ export class DateTimePickerComponent extends MultiTabStop {
                     }"
                     [scope]="this"
                 >
-                    <button
+                    <button kendoButton
                         type="button"
-                        class="k-button k-time-accept"
-                        [ngClass]="popupButtonsClasses('primary')"
+                        class="k-time-accept"
+                        themeColor="primary"
                         [attr.title]="localization.get('acceptLabel')"
                         [attr.aria-label]="localization.get('acceptLabel')"
                         [disabled]="!calendarValue"
@@ -1881,11 +1861,10 @@ export class DateTimePickerComponent extends MultiTabStop {
                         {{localization.get('accept')}}
                     </button>
 
-                    <button
+                    <button kendoButton
                         *ngIf="cancelButton"
                         type="button"
-                        class="k-button k-time-cancel"
-                        [ngClass]="popupButtonsClasses()"
+                        class="k-time-cancel"
                         [attr.title]="localization.get('cancelLabel')"
                         [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
@@ -1900,7 +1879,7 @@ export class DateTimePickerComponent extends MultiTabStop {
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, 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: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -1984,6 +1963,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-clearTitle="kendo.datetimepicker.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-adaptiveCloseButtonTitle="kendo.datetimepicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container>
 
@@ -2011,7 +1993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [steps]="steps"
             [tabindex]="tabindex"
             [isRequired]="isControlRequired"
-            [title]="title"
+            [title]="adaptiveTitle"
             pickerType="datetimepicker"
             hasPopup="dialog"
             [inputAttributes]="inputAttributes"
@@ -2071,30 +2053,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
         <kendo-actionsheet
             #actionSheet
-            (overlayClick)="toggleDateTime(false)"
+            (overlayClick)="toggleActionSheet(false)"
             (collapse)="handleActionSheetCollapse()"
             [titleId]="calendar?.headerId"
+            [cssClass]="{
+                'k-adaptive-actionsheet': true,
+                'k-actionsheet-fullscreen': windowSize === 'small',
+                'k-actionsheet-bottom': windowSize === 'medium'
+            }"
+            [cssStyle]="{
+                height: windowSize === 'small' ? '100vh' : '60vh'
+            }"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-actionsheet-titlebar">
                     <div class="k-actionsheet-titlebar-group">
                         <div class="k-actionsheet-title">
-                            <div *ngIf="title" class="k-text-center">{{ title }}</div>
-                            <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                            <div class="k-text-center" *ngIf="adaptiveTitle">{{ adaptiveTitle }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center" *ngIf="adaptiveSubtitle">{{ adaptiveSubtitle }}</div>
                         </div>
                         <div class="k-actionsheet-actions">
                             <button
                                 kendoButton
                                 type="button"
                                 icon="check"
-                                [attr.title]="localization.get('clearTitle')"
+                                [attr.title]="localization.get('adaptiveCloseButtonTitle')"
                                 [svgIcon]="checkIcon"
                                 fillMode="flat"
+                                themeColor="primary"
                                 [tabIndex]="-1"
                                 aria-hidden="true"
                                 size="large"
-                                themeColor="primary"
-                                (click)="toggleDateTime(false)">
+                                innerCssClass="k-button-icon"
+                                (click)="toggleActionSheet(false)">
                             </button>
                         </div>
                     </div>
@@ -2152,10 +2143,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [scope]="this"
                 >
                     <div class="k-button-group k-button-group-solid k-button-group-stretched" role="group">
-                        <button
+                        <button kendoButton
                             type="button"
-                            class="k-button k-group-start"
-                            [ngClass]="popupButtonsClasses()"
+                            class="k-group-start"
+                            [size]="isAdaptive ? 'large' : size"
                             [class.k-selected]="activeTab === 'date'"
                             [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
                             [attr.title]="localization.get('dateTabLabel')"
@@ -2168,10 +2159,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         >
                             {{localization.get('dateTab')}}
                         </button>
-                        <button
+                        <button kendoButton
                             type="button"
-                            class="k-button k-group-end"
-                            [ngClass]="popupButtonsClasses()"
+                            class="k-group-end"
+                            [size]="isAdaptive ? 'large' : size"
                             [class.k-selected]="activeTab === 'time'"
                             [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
                             [attr.title]="localization.get('timeTabLabel')"
@@ -2181,7 +2172,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 'keydown.tab': handleTab
                             }"
                             [scope]="this"
-                            
                         >
                             {{localization.get('timeTab')}}
                         </button>
@@ -2275,10 +2265,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     }"
                     [scope]="this"
                 >
-                    <button
+                    <button kendoButton
                         type="button"
-                        class="k-button k-time-accept"
-                        [ngClass]="popupButtonsClasses('primary')"
+                        class="k-time-accept"
+                        themeColor="primary"
                         [attr.title]="localization.get('acceptLabel')"
                         [attr.aria-label]="localization.get('acceptLabel')"
                         [disabled]="!calendarValue"
@@ -2292,11 +2282,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         {{localization.get('accept')}}
                     </button>
 
-                    <button
+                    <button kendoButton
                         *ngIf="cancelButton"
                         type="button"
-                        class="k-button k-time-cancel"
-                        [ngClass]="popupButtonsClasses()"
+                        class="k-time-cancel"
                         [attr.title]="localization.get('cancelLabel')"
                         [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
@@ -2345,9 +2334,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], popupSettings: [{
                 type: Input
-            }], title: [{
+            }], adaptiveTitle: [{
                 type: Input
-            }], subtitle: [{
+            }], adaptiveSubtitle: [{
                 type: Input
             }], disabled: [{
                 type: Input

package/esm2022/datetimepicker/localization/messages.mjs

@@ -93,8 +93,12 @@ export class DateTimePickerMessages extends ComponentMessages {
      * The title of the **Clear** button of the DateTimePicker.
      */
     clearTitle;
+    /**
+     * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
+     */
+    adaptiveCloseButtonTitle;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DateTimePickerMessages, selector: "kendo-datetimepicker-messages-base", inputs: { toggle: "toggle", dateTab: "dateTab", dateTabLabel: "dateTabLabel", timeTab: "timeTab", timeTabLabel: "timeTabLabel", accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", today: "today", now: "now", nowLabel: "nowLabel", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DateTimePickerMessages, selector: "kendo-datetimepicker-messages-base", inputs: { toggle: "toggle", dateTab: "dateTab", dateTabLabel: "dateTabLabel", timeTab: "timeTab", timeTabLabel: "timeTabLabel", accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", today: "today", now: "now", nowLabel: "nowLabel", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimePickerMessages, decorators: [{
             type: Directive,
@@ -144,4 +148,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], clearTitle: [{
                 type: Input
+            }], adaptiveCloseButtonTitle: [{
+                type: Input
             }] } });

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1745498608,
-    version: '19.0.0-develop.3',
+    publishDate: 1747836213,
+    version: '19.0.0-develop.30',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/timepicker/localization/messages.mjs

@@ -61,8 +61,12 @@ export class TimePickerMessages extends ComponentMessages {
      * The title of the **Clear** button of the TimePicker.
      */
     clearTitle;
+    /**
+     * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
+     */
+    adaptiveCloseButtonTitle;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TimePickerMessages, selector: "kendo-timepicker-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", now: "now", nowLabel: "nowLabel", toggle: "toggle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TimePickerMessages, selector: "kendo-timepicker-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", now: "now", nowLabel: "nowLabel", toggle: "toggle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerMessages, decorators: [{
             type: Directive,
@@ -96,4 +100,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], clearTitle: [{
                 type: Input
+            }], adaptiveCloseButtonTitle: [{
+                type: Input
             }] } });