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

package/fesm2022/progress-kendo-angular-dateinputs.mjs

@@ -25,6 +25,8 @@ import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
 import { touchEnabled } from '@progress/kendo-common';
+import * as i6 from '@progress/kendo-angular-utils';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 
 /**
  * @hidden
@@ -33,8 +35,8 @@ 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/'
 };
 
@@ -553,23 +555,6 @@ const DEFAULT_SIZE = 'medium';
  * @hidden
  */
 const DEFAULT_FILL_MODE = 'solid';
-/**
- * @hidden
- */
-const windowSize = () => {
-    if (!isDocumentAvailable()) {
-        return;
-    }
-    if (window.innerWidth > 768) {
-        return 'large';
-    }
-    else if (window.innerWidth > 500) {
-        return 'medium';
-    }
-    else {
-        return 'small';
-    }
-};
 
 const EMPTY_DATA$3 = [[]];
 const CELLS_LENGTH$3 = 4;
@@ -9895,6 +9880,7 @@ class DatePickerComponent extends MultiTabStop {
     injector;
     pickerService;
     disabledDatesService;
+    adaptiveService;
     /**
      * @hidden
      */
@@ -10515,7 +10501,7 @@ 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;
@@ -10526,6 +10512,7 @@ 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)));
@@ -10557,6 +10544,7 @@ 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');
@@ -10717,7 +10705,7 @@ class DatePickerComponent extends MultiTabStop {
      * @hidden
      */
     handleDateInputClick() {
-        this.windowSize = windowSize();
+        this.windowSize = this.adaptiveService.size;
         if (this.isAdaptive) {
             this.show = true;
         }
@@ -10789,7 +10777,8 @@ 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) {
@@ -10798,7 +10787,7 @@ class DatePickerComponent extends MultiTabStop {
         else {
             this.togglePopup(false);
         }
-        this.windowSize = windowSize();
+        this.windowSize = currentWindowSize;
     }
     /**
      * @hidden
@@ -10831,12 +10820,23 @@ 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();
     }
@@ -11035,7 +11035,7 @@ 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$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: 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$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: DisabledDatesService }, { token: i6.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 },
@@ -11419,7 +11419,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$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i1$2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: PickerService }, { type: DisabledDatesService }]; }, propDecorators: { container: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i1$2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: PickerService }, { type: DisabledDatesService }, { type: i6.AdaptiveService }]; }, propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: true }]
             }], popupTemplate: [{
@@ -11650,12 +11650,16 @@ const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker
  * @hidden
  */
 class TimePickerDOMService {
+    adaptiveService;
+    constructor(adaptiveService) {
+        this.adaptiveService = adaptiveService;
+    }
     itemHeight;
     timeListHeight;
     isAdaptiveEnabled;
     isDateTimePicker;
     get windowSize() {
-        return windowSize();
+        return this.adaptiveService.size;
     }
     ensureHeights() {
         if (this.timeListHeight !== undefined) {
@@ -11688,7 +11692,7 @@ class TimePickerDOMService {
         }
         return (element.nativeElement || element) === document.activeElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerDOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerDOMService, deps: [{ token: i6.AdaptiveService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerDOMService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerDOMService, decorators: [{
@@ -11696,7 +11700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i6.AdaptiveService }]; } });
 
 const HOURS_IN_DAY = 24;
 const clampToRange$3 = (rangeValue) => (value) => value % rangeValue;
@@ -13659,6 +13663,7 @@ class TimePickerComponent extends MultiTabStop {
     injector;
     pickerService;
     intl;
+    adaptiveService;
     /**
      * @hidden
      */
@@ -14120,7 +14125,7 @@ class TimePickerComponent extends MultiTabStop {
     _rounded = DEFAULT_ROUNDED;
     _fillMode = DEFAULT_FILL_MODE;
     windowSize;
-    constructor(bus, zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl) {
+    constructor(bus, zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, adaptiveService) {
         super();
         this.bus = bus;
         this.zone = zone;
@@ -14132,6 +14137,7 @@ class TimePickerComponent extends MultiTabStop {
         this.injector = injector;
         this.pickerService = pickerService;
         this.intl = intl;
+        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)));
@@ -14164,6 +14170,7 @@ class TimePickerComponent 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');
@@ -14377,7 +14384,7 @@ class TimePickerComponent extends MultiTabStop {
      * @hidden
      */
     handleDateInputClick() {
-        this.windowSize = windowSize();
+        this.windowSize = this.adaptiveService.size;
         if (this.isAdaptive) {
             this.show = true;
         }
@@ -14449,7 +14456,8 @@ class TimePickerComponent 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) {
@@ -14458,7 +14466,7 @@ class TimePickerComponent extends MultiTabStop {
         else {
             this.togglePopup(false);
         }
-        this.windowSize = windowSize();
+        this.windowSize = currentWindowSize;
     }
     /**
      * @hidden
@@ -14485,12 +14493,23 @@ class TimePickerComponent extends MultiTabStop {
         }
     }
     toggleTimeSelector(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();
     }
@@ -14673,7 +14692,7 @@ class TimePickerComponent 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: TimePickerComponent, deps: [{ token: BusViewService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerComponent, deps: [{ token: BusViewService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: i1.IntlService }, { token: i6.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimePickerComponent, isStandalone: true, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", clearButton: "clearButton", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
@@ -15123,7 +15142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [TimePickerLocalizedMessagesDirective, DateInputComponent, DateInputCustomMessagesComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgTemplateOutlet, NgIf, ResizeSensorComponent, ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, TimeSelectorComponent, TimeSelectorCustomMessagesComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i0.NgZone }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i1$2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: PickerService }, { type: i1.IntlService }]; }, propDecorators: { container: [{
+        }], ctorParameters: function () { return [{ type: BusViewService }, { type: i0.NgZone }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i1$2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: PickerService }, { type: i1.IntlService }, { type: i6.AdaptiveService }]; }, propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: false }]
             }], popupTemplate: [{
@@ -15421,6 +15440,7 @@ class DateTimePickerComponent extends MultiTabStop {
     disabledDatesService;
     renderer;
     injector;
+    adaptiveService;
     /**
      * @hidden
      */
@@ -15765,10 +15785,7 @@ 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.
@@ -15912,7 +15929,8 @@ 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) {
@@ -15921,7 +15939,7 @@ class DateTimePickerComponent extends MultiTabStop {
         else {
             this._togglePopup(false);
         }
-        this.windowSize = windowSize();
+        this.windowSize = currentWindowSize;
     }
     /**
      * @hidden
@@ -16111,7 +16129,7 @@ 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;
@@ -16123,6 +16141,7 @@ class DateTimePickerComponent extends MultiTabStop {
         this.disabledDatesService = disabledDatesService;
         this.renderer = renderer;
         this.injector = injector;
+        this.adaptiveService = adaptiveService;
         validatePackage(packageMetadata);
     }
     ngOnInit() {
@@ -16145,6 +16164,7 @@ 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');
@@ -16209,12 +16229,23 @@ 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);
+            }
         }
     }
     /**
@@ -16416,7 +16447,7 @@ class DateTimePickerComponent extends MultiTabStop {
      * @hidden
      */
     handleDateInputClick() {
-        this.windowSize = windowSize();
+        this.windowSize = this.adaptiveService.size;
         if (this.isAdaptive) {
             this.toggleDateTime(true);
         }
@@ -16819,7 +16850,7 @@ 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$2.PopupService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i1$1.LocalizationService }, { token: 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$2.PopupService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i1$1.LocalizationService }, { token: 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,
@@ -17635,7 +17666,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$2.PopupService }, { type: i1.IntlService }, { type: i0.ChangeDetectorRef }, { type: PickerService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i1$1.LocalizationService }, { type: DisabledDatesService }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i1$2.PopupService }, { type: i1.IntlService }, { type: i0.ChangeDetectorRef }, { type: PickerService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i1$1.LocalizationService }, { type: DisabledDatesService }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i6.AdaptiveService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-datetimepicker']
             }, {
@@ -18357,6 +18388,7 @@ class DateRangePopupComponent {
     localization;
     cdr;
     rtl;
+    adaptiveService;
     container;
     actionSheet;
     defaultTemplate;
@@ -18635,7 +18667,7 @@ 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;
@@ -18643,6 +18675,7 @@ class DateRangePopupComponent {
         this.localization = localization;
         this.cdr = cdr;
         this.rtl = rtl;
+        this.adaptiveService = adaptiveService;
     }
     ngOnInit() {
         this.dateRangeService.registerPopup(this);
@@ -18783,7 +18816,8 @@ 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) {
@@ -18792,7 +18826,7 @@ class DateRangePopupComponent {
         else {
             this.togglePopup(false);
         }
-        this.windowSize = windowSize();
+        this.windowSize = currentWindowSize;
     }
     /**
      * @hidden
@@ -18913,7 +18947,7 @@ class DateRangePopupComponent {
         }
     }
     toggleDateRange(show) {
-        this.windowSize = windowSize();
+        this.windowSize = this.adaptiveService.size;
         if (this.isAdaptive) {
             this.toggleActionSheet(show);
         }
@@ -18954,7 +18988,7 @@ 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$2.PopupService }, { token: DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.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$2.PopupService }, { token: DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }, { token: i6.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,
             {
@@ -19242,7 +19276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }, {
                     type: Inject,
                     args: [RTL]
-                }] }]; }, propDecorators: { container: [{
+                }] }, { type: i6.AdaptiveService }]; }, propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: false }]
             }], actionSheet: [{
@@ -20175,7 +20209,8 @@ class DatePickerModule {
             MonthViewService,
             YearViewService,
             PopupService,
-            NavigationService
+            NavigationService,
+            AdaptiveService
         ], imports: [DatePickerComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerModule, decorators: [{
@@ -20194,7 +20229,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MonthViewService,
                         YearViewService,
                         PopupService,
-                        NavigationService
+                        NavigationService,
+                        AdaptiveService
                     ]
                 }]
         }] });
@@ -20251,7 +20287,8 @@ class DateInputsModule {
             MinutesService,
             SecondsService,
             MillisecondsService,
-            DayPeriodService
+            DayPeriodService,
+            AdaptiveService
         ], imports: [CalendarComponent, MultiViewCalendarComponent, DateInputComponent, DatePickerComponent, DateInputComponent, DateRangeComponent, DateRangePopupComponent, DateTimePickerComponent, TimePickerComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateInputsModule, decorators: [{
@@ -20276,7 +20313,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MinutesService,
                         SecondsService,
                         MillisecondsService,
-                        DayPeriodService
+                        DayPeriodService,
+                        AdaptiveService
                     ]
                 }]
         }] });
@@ -20299,6 +20337,7 @@ class TimePickerModule {
             SecondsService,
             MillisecondsService,
             DayPeriodService,
+            AdaptiveService
         ], imports: [TimePickerComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerModule, decorators: [{
@@ -20316,6 +20355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SecondsService,
                         MillisecondsService,
                         DayPeriodService,
+                        AdaptiveService
                     ]
                 }]
         }] });
@@ -20346,6 +20386,7 @@ class DateTimePickerModule {
             SecondsService,
             MillisecondsService,
             DayPeriodService,
+            AdaptiveService
         ], imports: [DateTimePickerComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimePickerModule, decorators: [{
@@ -20371,6 +20412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SecondsService,
                         MillisecondsService,
                         DayPeriodService,
+                        AdaptiveService
                     ]
                 }]
         }] });
@@ -20492,7 +20534,8 @@ class DateRangeModule {
             // DateInputModule providers
             IconsService,
             // AdaptiveModule providers
-            ResizeBatchService
+            ResizeBatchService,
+            AdaptiveService
         ], imports: [DateInputComponent, DateRangeComponent, DateRangePopupComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeModule, decorators: [{
@@ -20511,7 +20554,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         // DateInputModule providers
                         IconsService,
                         // AdaptiveModule providers
-                        ResizeBatchService
+                        ResizeBatchService,
+                        AdaptiveService
                     ]
                 }]
         }] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dateinputs",
-  "version": "17.1.2-develop.4",
+  "version": "17.2.0-develop.1",
   "description": "Kendo UI for Angular Date Inputs Package - Everything you need to add date selection functionality to apps (DatePicker, TimePicker, DateInput, DateRangePicker, DateTimePicker, Calendar, and MultiViewCalendar).",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -34,18 +34,19 @@
     "@angular/forms": "16 - 19",
     "@angular/platform-browser": "16 - 19",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "17.1.2-develop.4",
-    "@progress/kendo-angular-common": "17.1.2-develop.4",
-    "@progress/kendo-angular-intl": "17.1.2-develop.4",
-    "@progress/kendo-angular-l10n": "17.1.2-develop.4",
-    "@progress/kendo-angular-icons": "17.1.2-develop.4",
-    "@progress/kendo-angular-popup": "17.1.2-develop.4",
-    "@progress/kendo-angular-navigation": "17.1.2-develop.4",
+    "@progress/kendo-angular-buttons": "17.2.0-develop.1",
+    "@progress/kendo-angular-common": "17.2.0-develop.1",
+    "@progress/kendo-angular-utils": "17.2.0-develop.1",
+    "@progress/kendo-angular-intl": "17.2.0-develop.1",
+    "@progress/kendo-angular-l10n": "17.2.0-develop.1",
+    "@progress/kendo-angular-icons": "17.2.0-develop.1",
+    "@progress/kendo-angular-popup": "17.2.0-develop.1",
+    "@progress/kendo-angular-navigation": "17.2.0-develop.1",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "17.1.2-develop.4",
+    "@progress/kendo-angular-schematics": "17.2.0-develop.1",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-date-math": "^1.1.0",
     "@progress/kendo-dateinputs-common": "^0.4.0"

package/timepicker/services/dom.service.d.ts

@@ -3,16 +3,19 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ElementRef } from '@angular/core';
+import { AdaptiveSize, AdaptiveService } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
 export declare class TimePickerDOMService {
+    private adaptiveService;
+    constructor(adaptiveService: AdaptiveService);
     itemHeight: number;
     timeListHeight: number;
     isAdaptiveEnabled: boolean;
     isDateTimePicker: boolean;
-    get windowSize(): 'large' | 'medium' | 'small';
+    get windowSize(): AdaptiveSize;
     ensureHeights(): void;
     calculateHeights(container?: HTMLElement): void;
     isActive(element: ElementRef): boolean;

package/timepicker/timepicker.component.d.ts

@@ -7,6 +7,7 @@ import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService, PopupRef } from '@progress/kendo-angular-popup';
 import { MultiTabStop } from '@progress/kendo-angular-common';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { DateInputFormatPlaceholder } from '../dateinput/models/format-placeholder.model';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { PickerService } from '../common/picker.service';
@@ -37,6 +38,7 @@ export declare class TimePickerComponent extends MultiTabStop implements Control
     private injector;
     private pickerService;
     private intl;
+    private adaptiveService;
     /**
      * @hidden
      */
@@ -383,7 +385,7 @@ export declare class TimePickerComponent extends MultiTabStop implements Control
     private _rounded;
     private _fillMode;
     private windowSize;
-    constructor(bus: BusViewService, zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, popupService: PopupService, wrapper: ElementRef, renderer: Renderer2, injector: Injector, pickerService: PickerService, intl: IntlService);
+    constructor(bus: BusViewService, zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, popupService: PopupService, wrapper: ElementRef, renderer: Renderer2, injector: Injector, pickerService: PickerService, intl: IntlService, adaptiveService: AdaptiveService);
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty