@progress/kendo-angular-dateinputs 17.1.2-develop.5 → 17.2.0-develop.2

package/esm2022/timepicker/services/dom.service.mjs

@@ -4,8 +4,10 @@
 *-------------------------------------------------------------------------------------------*/
 import { Injectable } from '@angular/core';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
-import { domContainerFactory as containerFactory, windowSize } from '../../util';
+import { domContainerFactory as containerFactory } from '../../util';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-utils";
 const div = containerFactory('div');
 const ul = containerFactory('ul');
 const li = containerFactory('li');
@@ -40,12 +42,16 @@ const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker
  * @hidden
  */
 export 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) {
@@ -78,7 +84,7 @@ export 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: i1.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: [{
@@ -86,4 +92,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i1.AdaptiveService }]; } });

package/esm2022/timepicker/timepicker.component.mjs

@@ -8,6 +8,7 @@ import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { cloneDate, isEqual } from '@progress/kendo-date-math';
 import { hasObservers, isControlRequired, isDocumentAvailable, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { MIDNIGHT_DATE, MIN_TIME, MAX_TIME } from '../defaults';
@@ -18,7 +19,7 @@ import { TIME_PART } from './models/time-part.default';
 import { TimeSelectorComponent } from './timeselector.component';
 import { DateInputComponent } from '../dateinput/dateinput.component';
 import { PreventableEvent } from '../preventable-event';
-import { noop, setTime, isWindowAvailable, getFillModeClass, getSizeClass, getRoundedClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE, windowSize } from '../util';
+import { noop, setTime, isWindowAvailable, getFillModeClass, getSizeClass, getRoundedClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { timeRangeValidator } from '../validators/time-range.validator';
 import { fromEvent } from 'rxjs';
 import { incompleteDateValidator } from '../validators/incomplete-date.validator';
@@ -38,6 +39,7 @@ import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "@progress/kendo-angular-popup";
 import * as i4 from "../common/picker.service";
 import * as i5 from "@progress/kendo-angular-intl";
+import * as i6 from "@progress/kendo-angular-utils";
 const VALUE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/#toc-integration-with-json';
 const INTL_DATE_FORMAT = 'https://github.com/telerik/kendo-intl/blob/master/docs/date-formatting/index.md';
 const formatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PART.second}|${TIME_PART.millisecond}|${TIME_PART.dayperiod}|literal`);
@@ -57,6 +59,7 @@ export class TimePickerComponent extends MultiTabStop {
     injector;
     pickerService;
     intl;
+    adaptiveService;
     /**
      * @hidden
      */
@@ -518,7 +521,7 @@ export 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;
@@ -530,6 +533,7 @@ export 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)));
@@ -562,6 +566,7 @@ export 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');
@@ -775,7 +780,7 @@ export class TimePickerComponent extends MultiTabStop {
      * @hidden
      */
     handleDateInputClick() {
-        this.windowSize = windowSize();
+        this.windowSize = this.adaptiveService.size;
         if (this.isAdaptive) {
             this.show = true;
         }
@@ -847,7 +852,8 @@ export 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) {
@@ -856,7 +862,7 @@ export class TimePickerComponent extends MultiTabStop {
         else {
             this.togglePopup(false);
         }
-        this.windowSize = windowSize();
+        this.windowSize = currentWindowSize;
     }
     /**
      * @hidden
@@ -883,12 +889,23 @@ export 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();
     }
@@ -1071,7 +1088,7 @@ export 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: i1.BusViewService }, { token: i0.NgZone }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i4.PickerService }, { token: i5.IntlService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerComponent, deps: [{ token: i1.BusViewService }, { token: i0.NgZone }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i4.PickerService }, { token: i5.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 },
@@ -1521,7 +1538,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: i1.BusViewService }, { type: i0.NgZone }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i4.PickerService }, { type: i5.IntlService }]; }, propDecorators: { container: [{
+        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i0.NgZone }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i4.PickerService }, { type: i5.IntlService }, { type: i6.AdaptiveService }]; }, propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: false }]
             }], popupTemplate: [{

package/esm2022/timepicker/timepicker.module.mjs

@@ -12,7 +12,8 @@ import { MinutesService } from './services/minutes.service';
 import { SecondsService } from './services/seconds.service';
 import { IconsService } from '@progress/kendo-angular-icons';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { KENDO_TOGGLEBUTTONTABSTOP, ResizeBatchService } from '@progress/kendo-angular-common';
+import { ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./localization/timepicker-custom-messages.component";
 import * as i2 from "./timepicker.component";
@@ -35,6 +36,7 @@ export class TimePickerModule {
             SecondsService,
             MillisecondsService,
             DayPeriodService,
+            AdaptiveService
         ], imports: [i2.TimePickerComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerModule, decorators: [{
@@ -52,6 +54,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SecondsService,
                         MillisecondsService,
                         DayPeriodService,
+                        AdaptiveService
                     ]
                 }]
         }] });

package/esm2022/util.mjs

@@ -6,7 +6,6 @@ import { MS_PER_HOUR, MS_PER_MINUTE, addDays, cloneDate, getDate, isEqual } from
 import { MIDNIGHT_DATE } from './defaults';
 import { EMPTY_SELECTIONRANGE } from './calendar/models/selection-range.interface';
 import { isPresent } from './common/utils';
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
 const isSet = (value) => value !== null && value !== undefined;
 const setter = (method) => (date, value) => {
     const clone = cloneDate(date);
@@ -405,20 +404,3 @@ export const DEFAULT_SIZE = 'medium';
  * @hidden
  */
 export const DEFAULT_FILL_MODE = 'solid';
-/**
- * @hidden
- */
-export const windowSize = () => {
-    if (!isDocumentAvailable()) {
-        return;
-    }
-    if (window.innerWidth > 768) {
-        return 'large';
-    }
-    else if (window.innerWidth > 500) {
-        return 'medium';
-    }
-    else {
-        return 'small';
-    }
-};