@progress/kendo-angular-dateinputs 11.4.0-develop.8 → 11.4.0-develop.9

package/esm2020/datetimepicker/datetimepicker.module.mjs

@@ -17,6 +17,7 @@ import { DateTimePickerComponent } from './datetimepicker.component';
 import { DateTimePickerCustomMessagesComponent } from './localization/datetimepicker-custom-messages.component';
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
 import { IconsModule } from '@progress/kendo-angular-icons';
+import { AdaptiveModule } from '../common/adaptive.module';
 import * as i0 from "@angular/core";
 const COMPONENT_DIRECTIVES = [
     DateTimePickerComponent,
@@ -40,7 +41,8 @@ DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         PopupModule,
         EventsModule,
         TemplatesModule,
-        IconsModule], exports: [DateTimePickerComponent,
+        IconsModule,
+        AdaptiveModule], exports: [DateTimePickerComponent,
         DateTimePickerCustomMessagesComponent,
         LocalizedMessagesDirective, TemplatesModule] });
 DateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimePickerModule, providers: [
@@ -54,7 +56,8 @@ DateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
             PopupModule,
             EventsModule,
             TemplatesModule,
-            IconsModule
+            IconsModule,
+            AdaptiveModule
         ], TemplatesModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimePickerModule, decorators: [{
             type: NgModule,
@@ -75,7 +78,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         PopupModule,
                         EventsModule,
                         TemplatesModule,
-                        IconsModule
+                        IconsModule,
+                        AdaptiveModule
                     ],
                     providers: [
                         { provide: TOUCH_ENABLED, useValue: touchEnabled }

package/esm2020/index.mjs

@@ -57,3 +57,6 @@ export { TimePickerCustomMessagesComponent } from './timepicker/localization/tim
 export { TimeSelectorCustomMessagesComponent } from './timepicker/localization/timeselector-custom-messages.component';
 export { LocalizedMessagesDirective } from './datetimepicker/localization/localized-messages.directive';
 export { DateTimePickerCustomMessagesComponent } from './datetimepicker/localization/datetimepicker-custom-messages.component';
+export { DateRangePopupCustomMessagesComponent } from './daterange/localization/daterange-popup-custom-messages.component';
+export { DateRangePopupLocalizedMessagesDirective } from './daterange/localization/daterange-popup-localized-messages.directive';
+export { AdaptiveModule } from './common/adaptive.module';

package/esm2020/package-metadata.mjs

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

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

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Injectable } from '@angular/core';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
-import { domContainerFactory as containerFactory } from '../../util';
+import { domContainerFactory as containerFactory, windowSize } from '../../util';
 import * as i0 from "@angular/core";
 const div = containerFactory('div');
 const ul = containerFactory('ul');
@@ -14,17 +14,35 @@ const listTitle = () => span('hour', 'k-title k-timeselector-title');
 const listItem = () => li('<span>02</span>', 'k-item');
 const list = () => ul([listItem()], 'k-reset');
 const scrollable = () => (div([list()], 'k-time-container k-flex k-content k-scrollable'));
-const timeListWrapper = () => {
+const actionSheetContent = (isDateTimePicker) => ([
+    isDateTimePicker ? div([div('button', 'k-button k-button-lg')], 'k-datetime-buttongroup') : null,
+    div([
+        div([span('title', 'k-title')], 'k-time-header'),
+        div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper')
+    ], 'k-timeselector k-timeselector-lg')
+]);
+const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker) => {
     if (!isDocumentAvailable()) {
         return null;
     }
-    return div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper', { left: '-10000px', position: 'absolute' });
+    if (!isAdaptiveEnabled) {
+        return div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper', { left: '-10000px', position: 'absolute' });
+    }
+    return div([div([div([div([div([], 'k-i-x k-button-icon k-icon')], 'k-icon-wrapper-host')], 'k-button k-icon-button k-button-lg')], 'k-actionsheet-titlebar'),
+        div([
+            isDateTimePicker ? div([...actionSheetContent(isDateTimePicker)], 'k-datetime-wrap k-time-tab') : actionSheetContent(isDateTimePicker)[1]
+        ], 'k-actionsheet-content'),
+        div([
+            div('button', 'k-button k-button-lg')
+        ], 'k-adaptive-actionsheet k-actionsheet-footer')], `k-actionsheet k-adaptive-actionsheet ${windowSize === 'small' ? 'k-actionsheet-fullscreen' : ''}`, { height: windowSize === 'small' ? '100%' : '60vh', left: '-10000px', position: 'absolute', top: 0 });
 };
-const TIMELIST_WRAPPER = timeListWrapper();
 /**
  * @hidden
  */
 export class TimePickerDOMService {
+    get windowSize() {
+        return windowSize();
+    }
     ensureHeights() {
         if (this.timeListHeight !== undefined) {
             return;
@@ -35,9 +53,17 @@ export class TimePickerDOMService {
         if (!isDocumentAvailable()) {
             return;
         }
-        const listContainer = container && container.querySelector('.k-time-list-container');
-        const hostContainer = listContainer || document.body;
-        const wrapper = hostContainer.appendChild(TIMELIST_WRAPPER);
+        let wrapper;
+        let hostContainer;
+        if (!this.isAdaptiveEnabled || this.windowSize === 'large') { // not adaptive            
+            const listContainer = container && container.querySelector('.k-time-list-container');
+            hostContainer = listContainer || document.body;
+            wrapper = hostContainer.appendChild(timeListWrapper());
+        }
+        else { // adaptive mode
+            hostContainer = document.body;
+            wrapper = hostContainer.appendChild(timeListWrapper(true, this.windowSize, this.isDateTimePicker));
+        }
         this.timeListHeight = wrapper.querySelector('.k-scrollable').getBoundingClientRect().height;
         this.itemHeight = wrapper.querySelector('li').getBoundingClientRect().height;
         hostContainer.removeChild(wrapper);