@progress/kendo-angular-dateinputs 17.1.2-develop.4 → 17.2.0-develop.1

package/datepicker/datepicker.component.d.ts

@@ -34,6 +34,7 @@ import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
 import { HeaderTemplateDirective } from '../calendar/templates/header-template.directive';
 import { FooterTemplateDirective } from '../calendar/templates/footer-template.directive';
 import { WeekDaysFormat } from '../common/models/week-days-format';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI DatePicker component for Angular](slug:overview_datepicker).
@@ -48,6 +49,7 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
     private injector;
     private pickerService;
     private disabledDatesService;
+    private adaptiveService;
     /**
      * @hidden
      */
@@ -543,7 +545,7 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
     private _rounded;
     private _fillMode;
     private windowSize;
-    constructor(zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, popupService: PopupService, wrapper: ElementRef, renderer: Renderer2, injector: Injector, pickerService: PickerService, disabledDatesService: DisabledDatesService);
+    constructor(zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, popupService: PopupService, wrapper: ElementRef, renderer: Renderer2, injector: Injector, pickerService: PickerService, disabledDatesService: DisabledDatesService, adaptiveService: AdaptiveService);
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty.

package/daterange/date-range-popup.component.d.ts

@@ -9,6 +9,7 @@ import { DateRangePopupTemplateDirective } from './date-range-popup-template.dir
 import { DateRangeService } from './date-range.service';
 import { MultiViewCalendarComponent } from '../calendar/multiview-calendar.component';
 import { PreventableEvent } from '../preventable-event';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { AdaptiveMode } from '../util';
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import { DateRangeSelectionDirective } from './date-range-selection.directive';
@@ -45,6 +46,7 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     localization: LocalizationService;
     private cdr;
     private rtl;
+    private adaptiveService;
     container: ViewContainerRef;
     actionSheet: ActionSheetComponent;
     defaultTemplate: TemplateRef<any>;
@@ -287,7 +289,7 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     private _show;
     private _rangeSelection;
     private windowSize;
-    constructor(popupService: PopupService, dateRangeService: DateRangeService, zone: NgZone, renderer: Renderer2, localization: LocalizationService, cdr: ChangeDetectorRef, rtl: boolean);
+    constructor(popupService: PopupService, dateRangeService: DateRangeService, zone: NgZone, renderer: Renderer2, localization: LocalizationService, cdr: ChangeDetectorRef, rtl: boolean, adaptiveService: AdaptiveService);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -355,6 +357,6 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     private toggleDateRange;
     private toggleActionSheet;
     private updateActionSheetAdaptiveAppearance;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePopupComponent, [null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePopupComponent, [null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePopupComponent, "kendo-daterange-popup", ["kendo-daterange-popup"], { "showCalendarHeader": { "alias": "showCalendarHeader"; "required": false; }; "focusedDate": { "alias": "focusedDate"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "bottomView": { "alias": "bottomView"; "required": false; }; "topView": { "alias": "topView"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "allowReverse": { "alias": "allowReverse"; "required": false; }; "animateNavigation": { "alias": "animateNavigation"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "views": { "alias": "views"; "required": false; }; "weekNumber": { "alias": "weekNumber"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "anchor": { "alias": "anchor"; "required": false; }; "anchorAlign": { "alias": "anchorAlign"; "required": false; }; "showViewHeader": { "alias": "showViewHeader"; "required": false; }; "showOtherMonthDays": { "alias": "showOtherMonthDays"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "collision": { "alias": "collision"; "required": false; }; "popupAlign": { "alias": "popupAlign"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "open": "open"; "close": "close"; "onBlur": "blur"; "onFocus": "focus"; "cancel": "cancel"; }, ["contentTemplate", "contentCalendar"], never, true, never>;
 }

package/datetimepicker/datetimepicker.component.d.ts

@@ -8,6 +8,7 @@ import { Day } from '@progress/kendo-date-math';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { MultiTabStop } from '@progress/kendo-angular-common';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
@@ -52,6 +53,7 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
     private disabledDatesService;
     private renderer;
     private injector;
+    private adaptiveService;
     /**
      * @hidden
      */
@@ -554,7 +556,7 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
     private _rounded;
     private _fillMode;
     private windowSize;
-    constructor(popupService: PopupService, intl: IntlService, cdr: ChangeDetectorRef, pickerService: PickerService, ngZone: NgZone, wrapper: ElementRef<HTMLElement>, localization: LocalizationService, disabledDatesService: DisabledDatesService, renderer: Renderer2, injector: Injector);
+    constructor(popupService: PopupService, intl: IntlService, cdr: ChangeDetectorRef, pickerService: PickerService, ngZone: NgZone, wrapper: ElementRef<HTMLElement>, localization: LocalizationService, disabledDatesService: DisabledDatesService, renderer: Renderer2, injector: Injector, adaptiveService: AdaptiveService);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;

package/esm2022/dateinputs.module.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
 import { KENDO_DATEINPUTS } from './directives';
-import { KENDO_TOGGLEBUTTONTABSTOP, ResizeBatchService } from '@progress/kendo-angular-common';
+import { ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
 import { IconsService } from '@progress/kendo-angular-icons';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { CenturyViewService } from './calendar/services/century-view.service';
@@ -19,6 +19,7 @@ import { HoursService } from './timepicker/services/hours.service';
 import { MillisecondsService } from './timepicker/services/milliseconds.service';
 import { MinutesService } from './timepicker/services/minutes.service';
 import { SecondsService } from './timepicker/services/seconds.service';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./calendar/localization/calendar-custom-messages.component";
 import * as i2 from "./calendar/calendar.component";
@@ -102,7 +103,8 @@ export class DateInputsModule {
             MinutesService,
             SecondsService,
             MillisecondsService,
-            DayPeriodService
+            DayPeriodService,
+            AdaptiveService
         ], imports: [i2.CalendarComponent, i14.MultiViewCalendarComponent, i16.DateInputComponent, i18.DatePickerComponent, i16.DateInputComponent, i23.DateRangeComponent, i24.DateRangePopupComponent, i28.DateTimePickerComponent, i30.TimePickerComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateInputsModule, decorators: [{
@@ -127,7 +129,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MinutesService,
                         SecondsService,
                         MillisecondsService,
-                        DayPeriodService
+                        DayPeriodService,
+                        AdaptiveService
                     ]
                 }]
         }] });

package/esm2022/datepicker/datepicker.component.mjs

@@ -25,7 +25,7 @@ import { HeaderTitleTemplateDirective } from '../calendar/templates/header-title
 import { NavigationItemTemplateDirective } from '../calendar/templates/navigation-item-template.directive';
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
-import { noop, isValidRange, setTime, isWindowAvailable, isTabExitingCalendar, getSizeClass, getRoundedClass, getFillModeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE, windowSize } from '../util';
+import { noop, isValidRange, setTime, isWindowAvailable, isTabExitingCalendar, getSizeClass, getRoundedClass, getFillModeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { requiresZoneOnBlur, currentFocusTarget, attributeNames } from '../common/utils';
 import { fromEvent } from 'rxjs';
 import { incompleteDateValidator } from '../validators/incomplete-date.validator';
@@ -43,11 +43,13 @@ import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { DateInputCustomMessagesComponent } from '../dateinput/localization/dateinput-custom-messages.component';
 import { DatePickerLocalizedMessagesDirective } from './localization/datepicker-localized-messages.directive';
 import { touchEnabled } from '@progress/kendo-common';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-popup";
 import * as i3 from "../common/picker.service";
 import * as i4 from "../calendar/services/disabled-dates.service";
+import * as i5 from "@progress/kendo-angular-utils";
 const MIN_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-min';
 const MAX_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-max';
 const VALUE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/#toc-using-with-json';
@@ -66,6 +68,7 @@ export class DatePickerComponent extends MultiTabStop {
     injector;
     pickerService;
     disabledDatesService;
+    adaptiveService;
     /**
      * @hidden
      */
@@ -686,7 +689,7 @@ export class DatePickerComponent extends MultiTabStop {
     _rounded = DEFAULT_ROUNDED;
     _fillMode = DEFAULT_FILL_MODE;
     windowSize;
-    constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService) {
+    constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService, adaptiveService) {
         super();
         this.zone = zone;
         this.localization = localization;
@@ -697,6 +700,7 @@ export class DatePickerComponent extends MultiTabStop {
         this.injector = injector;
         this.pickerService = pickerService;
         this.disabledDatesService = disabledDatesService;
+        this.adaptiveService = adaptiveService;
         validatePackage(packageMetadata);
         this.pickerSubscriptions = this.pickerService.onFocus.subscribe(this.handleFocus.bind(this));
         this.pickerSubscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
@@ -728,6 +732,7 @@ export class DatePickerComponent 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');
@@ -888,7 +893,7 @@ export class DatePickerComponent extends MultiTabStop {
      * @hidden
      */
     handleDateInputClick() {
-        this.windowSize = windowSize();
+        this.windowSize = this.adaptiveService.size;
         if (this.isAdaptive) {
             this.show = true;
         }
@@ -960,7 +965,8 @@ export class DatePickerComponent extends MultiTabStop {
      * @hidden
      */
     onResize() {
-        if (!this.isOpen || this.windowSize === windowSize()) {
+        const currentWindowSize = this.adaptiveService.size;
+        if (!this.isOpen || this.windowSize === currentWindowSize) {
             return;
         }
         if (this.actionSheet.expanded) {
@@ -969,7 +975,7 @@ export class DatePickerComponent extends MultiTabStop {
         else {
             this.togglePopup(false);
         }
-        this.windowSize = windowSize();
+        this.windowSize = currentWindowSize;
     }
     /**
      * @hidden
@@ -1002,12 +1008,23 @@ export class DatePickerComponent extends MultiTabStop {
         }
     }
     toggleCalendar(show) {
-        this.windowSize = windowSize();
-        if (this.isAdaptive) {
-            this.toggleActionSheet(show);
+        const previousWindowSize = this.windowSize;
+        this.windowSize = this.adaptiveService.size;
+        if (previousWindowSize !== this.windowSize && !show) {
+            if (previousWindowSize !== 'large') {
+                this.toggleActionSheet(show);
+            }
+            else {
+                this.togglePopup(show);
+            }
         }
         else {
-            this.togglePopup(show);
+            if (this.isAdaptive) {
+                this.toggleActionSheet(show);
+            }
+            else {
+                this.togglePopup(show);
+            }
         }
         this.toggleFocus();
     }
@@ -1206,7 +1223,7 @@ export class DatePickerComponent extends MultiTabStop {
             this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.PickerService }, { token: i4.DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.PickerService }, { token: i4.DisabledDatesService }, { token: i5.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DatePickerComponent, isStandalone: true, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], clearButton: "clearButton", inputAttributes: "inputAttributes", monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer", navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
@@ -1590,7 +1607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [DatePickerLocalizedMessagesDirective, DateInputComponent, DateInputCustomMessagesComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgTemplateOutlet, NgIf, ResizeSensorComponent, ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, CalendarComponent, CalendarCustomMessagesComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i3.PickerService }, { type: i4.DisabledDatesService }]; }, propDecorators: { container: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i3.PickerService }, { type: i4.DisabledDatesService }, { type: i5.AdaptiveService }]; }, propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: true }]
             }], popupTemplate: [{

package/esm2022/datepicker/datepicker.module.mjs

@@ -5,7 +5,7 @@
 import { NgModule } from '@angular/core';
 import { KENDO_DATEPICKER } from '../directives';
 import { IconsService } from '@progress/kendo-angular-icons';
-import { KENDO_TOGGLEBUTTONTABSTOP, ResizeBatchService } from '@progress/kendo-angular-common';
+import { ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { CenturyViewService } from '../calendar/services/century-view.service';
 import { DecadeViewService } from '../calendar/services/decade-view.service';
@@ -13,6 +13,7 @@ import { CalendarDOMService } from '../calendar/services/dom.service';
 import { MonthViewService } from '../calendar/services/month-view.service';
 import { NavigationService } from '../calendar/services/navigation.service';
 import { YearViewService } from '../calendar/services/year-view.service';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./localization/datepicker-custom-messages.component";
 import * as i2 from "./datepicker.component";
@@ -46,7 +47,8 @@ export class DatePickerModule {
             MonthViewService,
             YearViewService,
             PopupService,
-            NavigationService
+            NavigationService,
+            AdaptiveService
         ], imports: [i2.DatePickerComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerModule, decorators: [{
@@ -65,7 +67,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MonthViewService,
                         YearViewService,
                         PopupService,
-                        NavigationService
+                        NavigationService,
+                        AdaptiveService
                     ]
                 }]
         }] });

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

@@ -10,9 +10,10 @@ import { DateRangeService } from './date-range.service';
 import { MultiViewCalendarComponent } from '../calendar/multiview-calendar.component';
 import { PreventableEvent } from '../preventable-event';
 import { isDocumentAvailable, guid, Keys, hasObservers, ResizeSensorComponent } from '@progress/kendo-angular-common';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { Subscription, fromEvent, merge } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
-import { isWindowAvailable, windowSize } from '../util';
+import { isWindowAvailable } from '../util';
 import { isPresent } from '../common/utils';
 import { xIcon } from '@progress/kendo-svg-icons';
 import { DateRangeSelectionDirective } from './date-range-selection.directive';
@@ -25,6 +26,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
 import * as i2 from "./date-range.service";
 import * as i3 from "@progress/kendo-angular-l10n";
+import * as i4 from "@progress/kendo-angular-utils";
 /**
  * Represents the Kendo UI DateRangePopup component for Angular.
  *
@@ -52,6 +54,7 @@ export class DateRangePopupComponent {
     localization;
     cdr;
     rtl;
+    adaptiveService;
     container;
     actionSheet;
     defaultTemplate;
@@ -330,7 +333,7 @@ export class DateRangePopupComponent {
     _show;
     _rangeSelection;
     windowSize;
-    constructor(popupService, dateRangeService, zone, renderer, localization, cdr, rtl) {
+    constructor(popupService, dateRangeService, zone, renderer, localization, cdr, rtl, adaptiveService) {
         this.popupService = popupService;
         this.dateRangeService = dateRangeService;
         this.zone = zone;
@@ -338,6 +341,7 @@ export class DateRangePopupComponent {
         this.localization = localization;
         this.cdr = cdr;
         this.rtl = rtl;
+        this.adaptiveService = adaptiveService;
     }
     ngOnInit() {
         this.dateRangeService.registerPopup(this);
@@ -478,7 +482,8 @@ export class DateRangePopupComponent {
      * @hidden
      */
     onResize() {
-        if (!this.show || this.windowSize === windowSize()) {
+        const currentWindowSize = this.adaptiveService.size;
+        if (!this.show || this.windowSize === currentWindowSize) {
             return;
         }
         if (this.actionSheet.expanded) {
@@ -487,7 +492,7 @@ export class DateRangePopupComponent {
         else {
             this.togglePopup(false);
         }
-        this.windowSize = windowSize();
+        this.windowSize = currentWindowSize;
     }
     /**
      * @hidden
@@ -608,7 +613,7 @@ export class DateRangePopupComponent {
         }
     }
     toggleDateRange(show) {
-        this.windowSize = windowSize();
+        this.windowSize = this.adaptiveService.size;
         if (this.isAdaptive) {
             this.toggleActionSheet(show);
         }
@@ -649,7 +654,7 @@ export class DateRangePopupComponent {
             this.renderer.setStyle(animationContainer, 'bottom', '0px');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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 }, { token: i4.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateRangePopupComponent, isStandalone: true, selector: "kendo-daterange-popup", inputs: { showCalendarHeader: "showCalendarHeader", focusedDate: "focusedDate", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", min: "min", max: "max", allowReverse: "allowReverse", animateNavigation: "animateNavigation", disabled: "disabled", views: "views", weekNumber: "weekNumber", animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", showViewHeader: "showViewHeader", showOtherMonthDays: "showOtherMonthDays", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", size: "size" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
             LocalizationService,
             {
@@ -937,7 +942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }, {
                     type: Inject,
                     args: [RTL]
-                }] }]; }, propDecorators: { container: [{
+                }] }, { type: i4.AdaptiveService }]; }, propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: false }]
             }], actionSheet: [{

package/esm2022/daterange/date-range.module.mjs

@@ -12,6 +12,7 @@ import { NavigationService } from '../calendar/services/navigation.service';
 import { YearViewService } from '../calendar/services/year-view.service';
 import { IconsService } from '@progress/kendo-angular-icons';
 import { ResizeBatchService } from '@progress/kendo-angular-common';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./localization/daterange-popup-custom-messages.component";
 import * as i2 from "../dateinput/localization/dateinput-custom-messages.component";
@@ -75,7 +76,8 @@ export class DateRangeModule {
             // DateInputModule providers
             IconsService,
             // AdaptiveModule providers
-            ResizeBatchService
+            ResizeBatchService,
+            AdaptiveService
         ], imports: [i3.DateInputComponent, i6.DateRangeComponent, i7.DateRangePopupComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeModule, decorators: [{
@@ -94,7 +96,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         // DateInputModule providers
                         IconsService,
                         // AdaptiveModule providers
-                        ResizeBatchService
+                        ResizeBatchService,
+                        AdaptiveService
                     ]
                 }]
         }] });

package/esm2022/datetimepicker/datetimepicker.component.mjs

@@ -10,13 +10,14 @@ 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 { 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 { mergeDateAndTime, noop, lastMillisecondOfDate, isInRange, isValidRange, isWindowAvailable, getFillModeClass, getRoundedClass, getSizeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE, windowSize } from '../util';
+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';
 import { DateInputComponent } from '../dateinput/dateinput.component';
@@ -52,6 +53,7 @@ import * as i2 from "@progress/kendo-angular-intl";
 import * as i3 from "../common/picker.service";
 import * as i4 from "@progress/kendo-angular-l10n";
 import * as i5 from "../calendar/services/disabled-dates.service";
+import * as i6 from "@progress/kendo-angular-utils";
 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/';
@@ -78,6 +80,7 @@ export class DateTimePickerComponent extends MultiTabStop {
     disabledDatesService;
     renderer;
     injector;
+    adaptiveService;
     /**
      * @hidden
      */
@@ -422,10 +425,7 @@ export class DateTimePickerComponent extends MultiTabStop {
      * Indicates whether the component is currently open. That is when the popup or actionSheet is open.
      */
     get isOpen() {
-        if (!this.isAdaptive) {
-            return isPresent(this.popupRef);
-        }
-        return isTruthy(this.actionSheet?.expanded);
+        return isTruthy(this.actionSheet?.expanded) || isPresent(this.popupRef);
     }
     /**
      * Indicates whether the component or its popup content is focused.
@@ -569,7 +569,8 @@ export class DateTimePickerComponent extends MultiTabStop {
      * @hidden
      */
     onResize() {
-        if (!this.isOpen || this.windowSize === windowSize()) {
+        const currentWindowSize = this.adaptiveService.size;
+        if (!this.isOpen || this.windowSize === currentWindowSize) {
             return;
         }
         if (this.actionSheet.expanded) {
@@ -578,7 +579,7 @@ export class DateTimePickerComponent extends MultiTabStop {
         else {
             this._togglePopup(false);
         }
-        this.windowSize = windowSize();
+        this.windowSize = currentWindowSize;
     }
     /**
      * @hidden
@@ -768,7 +769,7 @@ export class DateTimePickerComponent extends MultiTabStop {
     _rounded = DEFAULT_ROUNDED;
     _fillMode = DEFAULT_FILL_MODE;
     windowSize;
-    constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, localization, disabledDatesService, renderer, injector) {
+    constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, localization, disabledDatesService, renderer, injector, adaptiveService) {
         super();
         this.popupService = popupService;
         this.intl = intl;
@@ -780,6 +781,7 @@ export class DateTimePickerComponent extends MultiTabStop {
         this.disabledDatesService = disabledDatesService;
         this.renderer = renderer;
         this.injector = injector;
+        this.adaptiveService = adaptiveService;
         validatePackage(packageMetadata);
     }
     ngOnInit() {
@@ -802,6 +804,7 @@ 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');
@@ -866,12 +869,23 @@ export class DateTimePickerComponent extends MultiTabStop {
         if (this.disabled || this.readonly || show === this.isOpen) {
             return;
         }
-        this.windowSize = windowSize();
-        if (this.isAdaptive) {
-            this.toggleActionSheet(show);
+        const previousWindowSize = this.windowSize;
+        this.windowSize = this.adaptiveService.size;
+        if (previousWindowSize !== this.windowSize && !show) {
+            if (previousWindowSize !== 'large') {
+                this.toggleActionSheet(show);
+            }
+            else {
+                this._togglePopup(show);
+            }
         }
         else {
-            this._togglePopup(show);
+            if (this.isAdaptive) {
+                this.toggleActionSheet(show);
+            }
+            else {
+                this._togglePopup(show);
+            }
         }
     }
     /**
@@ -1073,7 +1087,7 @@ export class DateTimePickerComponent extends MultiTabStop {
      * @hidden
      */
     handleDateInputClick() {
-        this.windowSize = windowSize();
+        this.windowSize = this.adaptiveService.size;
         if (this.isAdaptive) {
             this.toggleDateTime(true);
         }
@@ -1476,7 +1490,7 @@ export class DateTimePickerComponent extends MultiTabStop {
             this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
         }
     }
-    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 }], target: i0.ɵɵFactoryTarget.Component });
+    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: [
             PickerService,
             LocalizationService,
@@ -2292,7 +2306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [LocalizedMessagesDirective, DateInputComponent, EventsOutsideAngularDirective, DateInputCustomMessagesComponent, NgIf, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent, ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, NgClass, CalendarComponent, CalendarCustomMessagesComponent, TimeSelectorComponent, TimeSelectorCustomMessagesComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.IntlService }, { type: i0.ChangeDetectorRef }, { type: i3.PickerService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i4.LocalizationService }, { type: i5.DisabledDatesService }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.IntlService }, { type: i0.ChangeDetectorRef }, { type: i3.PickerService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i4.LocalizationService }, { type: i5.DisabledDatesService }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i6.AdaptiveService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-datetimepicker']
             }, {

package/esm2022/datetimepicker/datetimepicker.module.mjs

@@ -5,7 +5,7 @@
 import { NgModule } from '@angular/core';
 import { KENDO_DATETIMEPICKER } from '../directives';
 import { IconsService } from '@progress/kendo-angular-icons';
-import { KENDO_TOGGLEBUTTONTABSTOP, ResizeBatchService } from '@progress/kendo-angular-common';
+import { ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { CenturyViewService } from '../calendar/services/century-view.service';
 import { DecadeViewService } from '../calendar/services/decade-view.service';
@@ -19,6 +19,7 @@ import { HoursService } from '../timepicker/services/hours.service';
 import { MillisecondsService } from '../timepicker/services/milliseconds.service';
 import { MinutesService } from '../timepicker/services/minutes.service';
 import { SecondsService } from '../timepicker/services/seconds.service';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./localization/datetimepicker-custom-messages.component";
 import * as i2 from "./datetimepicker.component";
@@ -59,6 +60,7 @@ export class DateTimePickerModule {
             SecondsService,
             MillisecondsService,
             DayPeriodService,
+            AdaptiveService
         ], imports: [i2.DateTimePickerComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimePickerModule, decorators: [{
@@ -84,6 +86,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SecondsService,
                         MillisecondsService,
                         DayPeriodService,
+                        AdaptiveService
                     ]
                 }]
         }] });

package/esm2022/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1734358896,
-    version: '17.1.2-develop.4',
+    publishDate: 1734364421,
+    version: '17.2.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };