@progress/kendo-angular-dateinputs 11.4.0-develop.1 → 11.4.0-develop.11

package/esm2020/datetimepicker/datetimepicker.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding, ViewChild, ElementRef, Input, isDevMode, TemplateRef, ChangeDetectorRef, Output, EventEmitter, NgZone, ViewContainerRef, forwardRef, ContentChild, Inject, ChangeDetectionStrategy, Renderer2 } from '@angular/core';
+import { Component, HostBinding, ViewChild, ElementRef, Input, isDevMode, TemplateRef, ChangeDetectorRef, Output, EventEmitter, NgZone, ViewContainerRef, forwardRef, ContentChild, Inject, ChangeDetectionStrategy, Renderer2, } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { Subscription, fromEvent } from 'rxjs';
 import { tap } from 'rxjs/operators';
@@ -16,7 +16,7 @@ import { packageMetadata } from '../package-metadata';
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
 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 { mergeDateAndTime, noop, lastMillisecondOfDate, isInRange, isValidRange, isWindowAvailable, getFillModeClass, getRoundedClass, getSizeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE, windowSize } from '../util';
 import { PreventableEvent } from '../preventable-event';
 import { minValidator } from '../validators/min.validator';
 import { maxValidator } from '../validators/max.validator';
@@ -32,7 +32,8 @@ 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, clockIcon } from '@progress/kendo-svg-icons';
+import { calendarIcon, clockIcon, xIcon } from '@progress/kendo-svg-icons';
+import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
 import * as i2 from "@progress/kendo-angular-intl";
@@ -41,13 +42,15 @@ import * as i4 from "@progress/kendo-angular-l10n";
 import * as i5 from "../calendar/services/disabled-dates.service";
 import * as i6 from "../dateinput/dateinput.component";
 import * as i7 from "@progress/kendo-angular-icons";
-import * as i8 from "../calendar/calendar.component";
-import * as i9 from "../calendar/localization/calendar-custom-messages.component";
-import * as i10 from "../timepicker/timeselector.component";
-import * as i11 from "../timepicker/localization/timeselector-custom-messages.component";
-import * as i12 from "./localization/localized-messages.directive";
-import * as i13 from "@progress/kendo-angular-common";
-import * as i14 from "@angular/common";
+import * as i8 from "@progress/kendo-angular-common";
+import * as i9 from "@progress/kendo-angular-navigation";
+import * as i10 from "@progress/kendo-angular-buttons";
+import * as i11 from "../calendar/calendar.component";
+import * as i12 from "../calendar/localization/calendar-custom-messages.component";
+import * as i13 from "../timepicker/timeselector.component";
+import * as i14 from "../timepicker/localization/timeselector-custom-messages.component";
+import * as i15 from "./localization/localized-messages.directive";
+import * as i16 from "@angular/common";
 const timeFormatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PART.second}|${TIME_PART.dayperiod}|literal`);
 const VALUE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/integration-with-json/';
 const MIN_MAX_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/date-time-limits/';
@@ -91,7 +94,8 @@ export class DateTimePickerComponent {
          */
         this.twoDigitYearMax = TWO_DIGIT_YEAR_MAX;
         /**
-         * Sets the title of the input element of the DateTimePicker.
+         * 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).
          */
         this.title = '';
         /**
@@ -160,6 +164,10 @@ export class DateTimePickerComponent {
          * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
          */
         this.incompleteDateValidation = false;
+        /**
+         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+         */
+        this.adaptiveMode = 'none';
         /**
          * Fires each time the user selects a new value.
          * ([more information and example]({% slug overview_datetimepicker %}#toc-methods-and-events)).
@@ -220,6 +228,10 @@ export class DateTimePickerComponent {
          * @hidden
          */
         this.calendarMax = lastMillisecondOfDate(MAX_DATE);
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         this._popupSettings = { animate: true };
         this._value = null;
         this._format = DEFAULT_DATEINPUT_FORMAT;
@@ -340,6 +352,16 @@ export class DateTimePickerComponent {
     get popupSettings() {
         return this._popupSettings;
     }
+    /**
+     * 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;
+    }
     /**
      * Specifies the smallest valid date.
      * The Calendar will not display dates before this value.
@@ -375,10 +397,13 @@ export class DateTimePickerComponent {
         return this._max;
     }
     /**
-     * Indicates whether the component is currently open.
+     * Indicates whether the component is currently open. That is when the popup or actionSheet is open.
      */
     get isOpen() {
-        return isPresent(this.popupRef);
+        if (!this.isAdaptive) {
+            return isPresent(this.popupRef);
+        }
+        return this.actionSheet && this.actionSheet.expanded;
     }
     /**
      * Indicates whether the component or its popup content is focused.
@@ -506,6 +531,34 @@ export class DateTimePickerComponent {
     get disableTimeSelector() {
         return this.activeTab !== 'time' && !this.timeSelector.isActive;
     }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
+    /**
+     * @hidden
+     */
+    onResize() {
+        if (!this.isOpen || this.windowSize === windowSize()) {
+            return;
+        }
+        ;
+        if (this.actionSheet.expanded) {
+            this.toggleActionSheet(false);
+        }
+        else {
+            this._togglePopup(false);
+        }
+        this.windowSize = windowSize();
+    }
     get activeTabComponent() {
         if (!this.isOpen) {
             return;
@@ -536,11 +589,16 @@ export class DateTimePickerComponent {
         this.subscriptions.add(this.localization.changes.subscribe(() => this.cdr.markForCheck()));
         this.subscriptions.add(this.pickerService.dateCompletenessChange.subscribe(this.handleDateCompletenessChange.bind(this)));
         if (isWindowAvailable()) {
-            this.subscriptions.add(this.ngZone.runOutsideAngular(() => fromEvent(window, 'blur').subscribe(this.handleCancel.bind(this))));
+            this.subscriptions.add(this.ngZone.runOutsideAngular(() => fromEvent(window, 'blur').subscribe(() => {
+                if (!this.isAdaptive) {
+                    this.handleCancel();
+                }
+            })));
         }
     }
     ngAfterViewInit() {
         this.setComponentClasses();
+        this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
     }
     ngOnChanges(changes) {
         if (isPresent(changes['min']) || isPresent(changes['max'])) {
@@ -587,7 +645,8 @@ export class DateTimePickerComponent {
         }
     }
     /**
-     * Toggles the visibility of the popup. If you use the `toggle` method to show or hide the popup,
+     * Toggles the visibility of the popup or actionSheet.
+     * If you use the `toggle` method to show or hide the popup or actionSheet,
      * the `open` and `close` events do not fire.
      * ([more information and example]({% slug overview_datetimepicker %}#toc-methods-and-events)).
      *
@@ -597,17 +656,12 @@ export class DateTimePickerComponent {
         if (this.disabled || this.readonly || show === this.isOpen) {
             return;
         }
-        const shouldOpen = isPresent(show) ? show : !this.isOpen;
-        if (shouldOpen) {
-            this.openPopup();
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.toggleActionSheet(show);
         }
         else {
-            this.closePopup();
-            // Changes the tab and the calendar or clock icon to the designated default.
-            if (this.activeTab !== this.defaultTab) {
-                this.activeTab = this.defaultTab;
-                this.cdr.detectChanges();
-            }
+            this._togglePopup(show);
         }
     }
     /**
@@ -669,7 +723,7 @@ export class DateTimePickerComponent {
             const shouldOpen = !this.isOpen;
             // handle focus first to maintain correct event order `focus` => `open`
             this.handleFocus();
-            this.togglePopup(shouldOpen);
+            this.toggleDateTime(shouldOpen);
             this.switchFocus();
         });
     }
@@ -698,7 +752,7 @@ export class DateTimePickerComponent {
         this.run(runInZone, () => {
             this.onBlur.emit();
             this.onControlTouched();
-            this.togglePopup(false);
+            this.toggleDateTime(false);
             this.cdr.markForCheck();
         });
     }
@@ -742,7 +796,7 @@ export class DateTimePickerComponent {
         const runInZone = valueChangePresent || hasObservers(this.close);
         this.run(runInZone, () => {
             this.handleValueChange(candidate);
-            this.togglePopup(false);
+            this.toggleDateTime(false);
         });
     }
     /**
@@ -753,7 +807,7 @@ export class DateTimePickerComponent {
             return;
         }
         const runInZone = hasObservers(this.close);
-        this.run(runInZone, () => this.togglePopup(false));
+        this.run(runInZone, () => this.toggleDateTime(false));
     }
     /**
      * @hidden
@@ -761,7 +815,16 @@ export class DateTimePickerComponent {
     handleInputValueChange(value) {
         this.handleValueChange(value);
         if (this.isOpen) {
-            this.togglePopup(false);
+            this.toggleDateTime(false);
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleDateInputClick() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.toggleDateTime(true);
         }
     }
     /**
@@ -785,7 +848,7 @@ export class DateTimePickerComponent {
                 this.handleCancel();
                 break;
             case !this.isOpen && altKey && Keys.ArrowDown:
-                this.ngZone.run(() => this.togglePopup(true));
+                this.ngZone.run(() => this.toggleDateTime(true));
                 break;
             case altKey && Keys.ArrowRight:
                 this.changeActiveTab('time');
@@ -821,12 +884,22 @@ export class DateTimePickerComponent {
             this.input.focus();
         }
     }
+    /**
+     * @hidden
+     */
+    handleActionSheetCollapse() {
+        // If not handled, the actionsheet expanded state does not get updated when overlay is clicked
+        this.cdr.markForCheck();
+        // 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';
-        return `${this.size ? getSizeClass('button', this.size) : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''} ${this.fillMode ? 'k-button-' + this.fillMode + ' ' + 'k-button-' + this.fillMode + '-' + buttonType : ''}`;
+        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
@@ -836,6 +909,55 @@ export class DateTimePickerComponent {
     preventMouseDown(event) {
         event.preventDefault();
     }
+    _togglePopup(show) {
+        const shouldOpen = isPresent(show) ? show : !this.isOpen;
+        if (shouldOpen) {
+            this.openPopup();
+            return;
+        }
+        this.closePopup();
+        this.resetActiveTab();
+    }
+    toggleActionSheet(show) {
+        if (isPresent(show) && show && !this.isOpen) {
+            this.actionSheet.toggle();
+            this.updateActionSheetAdaptiveAppearance();
+            this.setAriaActiveDescendant();
+        }
+        else if (isPresent(show) && !show && this.isOpen) {
+            this.actionSheet.toggle();
+            this.ariaActiveDescendantSubscription.unsubscribe();
+            this.renderer.removeAttribute(this.input.inputElement, attributeNames.ariaActiveDescendant);
+        }
+    }
+    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');
+        }
+    }
+    /**
+     * Changes the tab and the calendar or clock icon to the designated default.
+     */
+    resetActiveTab() {
+        if (this.activeTab !== this.defaultTab) {
+            this.activeTab = this.defaultTab;
+            this.cdr.detectChanges();
+        }
+    }
     verifyValue(value) {
         if (!isDevMode()) {
             return;
@@ -892,7 +1014,10 @@ export class DateTimePickerComponent {
         }
         return timeFormatRegExp.test(part.type);
     }
-    togglePopup(open) {
+    /**
+     * @hidden
+     */
+    toggleDateTime(open) {
         if (open === this.isOpen) {
             return;
         }
@@ -939,24 +1064,20 @@ export class DateTimePickerComponent {
         });
         this.popupRef.popupElement.setAttribute('id', this.popupUID);
         this.renderer.setAttribute(this.inputElement, attributeNames.ariaControls, this.popupUID);
-        if (this.activeTab === 'date') {
-            if (this.calendar.type === 'infinite') {
-                this.subscriptions.add(this.calendar.monthView.focusedCellChange.subscribe((id) => {
-                    this.renderer.setAttribute(this.inputElement, attributeNames.ariaActiveDescendant, id);
-                }));
-            }
-            else {
-                this.subscriptions.add(this.calendar.multiViewCalendar.viewList.focusedCellChange.subscribe((id) => {
-                    this.renderer.setAttribute(this.inputElement, attributeNames.ariaActiveDescendant, id);
-                }));
-            }
-        }
+        this.setAriaActiveDescendant();
         this.popupRef.popupAnchorViewportLeave.subscribe(() => this.handleCancel());
     }
+    setAriaActiveDescendant() {
+        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));
+    }
     closePopup() {
         if (!this.isOpen) {
             return;
         }
+        this.ariaActiveDescendantSubscription.unsubscribe();
         this.renderer.removeAttribute(this.inputElement, attributeNames.ariaControls);
         this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
         this.popupRef.close();
@@ -981,7 +1102,8 @@ export class DateTimePickerComponent {
         const relatedTarget = event.relatedTarget || document.activeElement;
         const focusInPopup = isPresent(this.popupRef) && this.popupRef.popupElement.contains(relatedTarget);
         const focusInWrapper = this.wrapper.nativeElement.contains(relatedTarget);
-        return focusInPopup || focusInWrapper;
+        const isInsideActionSheet = this.actionSheet && (this.actionSheet.element.nativeElement.contains(event.target) || this.actionSheet.element.nativeElement.contains(relatedTarget));
+        return focusInPopup || focusInWrapper || isInsideActionSheet;
     }
     setTimeSelectorMinMax(selectedDate) {
         const minDateSelected = isPresent(selectedDate) && isEqual(getDate(selectedDate), getDate(this.min));
@@ -997,7 +1119,7 @@ export class DateTimePickerComponent {
      * If the popup is available, runs a popup change detection.
      */
     detectPopupChanges() {
-        if (!this.isOpen) {
+        if (!this.isOpen || this.isAdaptive) {
             return;
         }
         this.popupRef.popup.changeDetectorRef.detectChanges();
@@ -1034,7 +1156,7 @@ export class DateTimePickerComponent {
     }
 }
 DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.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: TOUCH_ENABLED }, { token: i4.LocalizationService }, { token: i5.DisabledDatesService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", 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", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", 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", adaptiveMode: "adaptiveMode", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
@@ -1042,7 +1164,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) }
-    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, read: TemplateRef, static: true }], exportAs: ["kendo-datetimepicker"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datetimepicker"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoDateTimePickerLocalizedMessages
 
@@ -1118,6 +1240,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [fillMode]="fillMode"
             [rounded]="rounded"
             [size]="size"
+            (click)="handleDateInputClick()"
         >
         </kendo-dateinput>
         <button
@@ -1152,6 +1275,64 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <ng-container #container></ng-container>
 
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
+        </ng-template>
+
+        <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+
+        <kendo-actionsheet 
+            #actionSheet
+            (overlayClick)="toggleDateTime(false)"
+            (collapse)="handleActionSheetCollapse()"
+        >
+            <ng-template kendoActionSheetTemplate>
+                <div class="k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group k-hbox">
+                        <div class="k-actionsheet-title">
+                            <div class="k-text-center">{{ title }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                        </div>
+                        <div class="k-actionsheet-actions">
+                            <button
+                                kendoButton
+                                icon="x"
+                                [attr.title]="localization.get('clearTitle')"
+                                [svgIcon]="xIcon"
+                                fillMode="flat"
+                                size="large"
+                                innerCssClass="k-button-icon"
+                                (click)="toggleDateTime(false)">
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="k-actionsheet-content !k-overflow-hidden">
+                    <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
+                </div>
+                <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton 
+                        (click)="handleCancel()"
+                        size="large"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
+                    <button kendoButton
+                        (click)="handleAccept()"
+                        size="large"
+                        themeColor="primary"
+                        [attr.title]="localization.get('acceptLabel')"
+                        [attr.aria-label]="localization.get('acceptLabel')"
+                    >
+                        {{localization.get('accept')}}
+                    </button>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
+
+        <ng-template #dateTimeTemplate>
             <div
                 class="k-datetime-wrap k-{{activeTab}}-tab"
                 [kendoEventsOutsideAngular]="{
@@ -1210,6 +1391,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 >
                     <div class="k-datetime-calendar-wrap">
                         <kendo-calendar
+                            [ngClass]="{'k-calendar-lg': isAdaptive}"
                             [focusedDate]="focusedDate"
                             [(value)]="calendarValue"
                             [type]="calendarType"
@@ -1239,6 +1421,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     </div>
                     <div class="k-datetime-time-wrap">
                         <kendo-timeselector
+                            [ngClass]="{'k-timeselector-lg': isAdaptive}"
                             [value]="value"
                             [format]="timeSelectorFormat"
                             [min]="timeSelectorMin"
@@ -1247,6 +1430,8 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                             [cancelButton]="false"
                             [steps]="steps"
                             [disabled]="disableTimeSelector"
+                            [isAdaptiveEnabled]="isAdaptiveModeEnabled"
+                            [isDateTimePicker]="true"
                         >
                             <kendo-timeselector-messages
                                 [now]="localization.get('now')"
@@ -1257,6 +1442,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     </div>
                 </div>
                 <div
+                    *ngIf="!isAdaptive"
                     class="k-datetime-footer k-action-buttons k-actions k-hstack k-justify-content-stretch"
                     [kendoEventsOutsideAngular]="{
                         keydown: handleTabOut,
@@ -1296,7 +1482,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </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.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"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i9.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: i10.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: i11.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i13.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.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"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: 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"], 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: [{
@@ -1388,6 +1574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [fillMode]="fillMode"
             [rounded]="rounded"
             [size]="size"
+            (click)="handleDateInputClick()"
         >
         </kendo-dateinput>
         <button
@@ -1422,6 +1609,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-container #container></ng-container>
 
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
+        </ng-template>
+
+        <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+
+        <kendo-actionsheet 
+            #actionSheet
+            (overlayClick)="toggleDateTime(false)"
+            (collapse)="handleActionSheetCollapse()"
+        >
+            <ng-template kendoActionSheetTemplate>
+                <div class="k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group k-hbox">
+                        <div class="k-actionsheet-title">
+                            <div class="k-text-center">{{ title }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                        </div>
+                        <div class="k-actionsheet-actions">
+                            <button
+                                kendoButton
+                                icon="x"
+                                [attr.title]="localization.get('clearTitle')"
+                                [svgIcon]="xIcon"
+                                fillMode="flat"
+                                size="large"
+                                innerCssClass="k-button-icon"
+                                (click)="toggleDateTime(false)">
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="k-actionsheet-content !k-overflow-hidden">
+                    <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
+                </div>
+                <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton 
+                        (click)="handleCancel()"
+                        size="large"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
+                    <button kendoButton
+                        (click)="handleAccept()"
+                        size="large"
+                        themeColor="primary"
+                        [attr.title]="localization.get('acceptLabel')"
+                        [attr.aria-label]="localization.get('acceptLabel')"
+                    >
+                        {{localization.get('accept')}}
+                    </button>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
+
+        <ng-template #dateTimeTemplate>
             <div
                 class="k-datetime-wrap k-{{activeTab}}-tab"
                 [kendoEventsOutsideAngular]="{
@@ -1480,6 +1725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 >
                     <div class="k-datetime-calendar-wrap">
                         <kendo-calendar
+                            [ngClass]="{'k-calendar-lg': isAdaptive}"
                             [focusedDate]="focusedDate"
                             [(value)]="calendarValue"
                             [type]="calendarType"
@@ -1509,6 +1755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     </div>
                     <div class="k-datetime-time-wrap">
                         <kendo-timeselector
+                            [ngClass]="{'k-timeselector-lg': isAdaptive}"
                             [value]="value"
                             [format]="timeSelectorFormat"
                             [min]="timeSelectorMin"
@@ -1517,6 +1764,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [cancelButton]="false"
                             [steps]="steps"
                             [disabled]="disableTimeSelector"
+                            [isAdaptiveEnabled]="isAdaptiveModeEnabled"
+                            [isDateTimePicker]="true"
                         >
                             <kendo-timeselector-messages
                                 [now]="localization.get('now')"
@@ -1527,6 +1776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     </div>
                 </div>
                 <div
+                    *ngIf="!isAdaptive"
                     class="k-datetime-footer k-action-buttons k-actions k-hstack k-justify-content-stretch"
                     [kendoEventsOutsideAngular]="{
                         keydown: handleTabOut,
@@ -1599,6 +1849,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], title: [{
                 type: Input
+            }], subtitle: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{
@@ -1631,6 +1883,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], incompleteDateValidation: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], open: [{
@@ -1678,4 +1932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], popupTemplate: [{
                 type: ViewChild,
                 args: ['popupTemplate', { read: TemplateRef, static: true }]
+            }], actionSheet: [{
+                type: ViewChild,
+                args: ['actionSheet']
             }] } });