@progress/kendo-angular-dateinputs 19.3.0-develop.15 → 19.3.0-develop.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/esm2022/package-metadata.mjs +2 -2
  2. package/esm2022/timepicker/services/dom.service.mjs +39 -13
  3. package/fesm2022/progress-kendo-angular-dateinputs.mjs +41 -15
  4. package/package.json +11 -11
  5. package/timepicker/services/dom.service.d.ts +1 -0
package/esm2022/package-metadata.mjs CHANGED
@@ -10,7 +10,7 @@ export const packageMetadata = {
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCode: 'KENDOUIANGULAR',
12
12
  productCodes: ['KENDOUIANGULAR'],
13
- publishDate: 1753347539,
14
- version: '19.3.0-develop.15',
13
+ publishDate: 1753856683,
14
+ version: '19.3.0-develop.17',
15
15
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
16
16
  };
package/esm2022/timepicker/services/dom.service.mjs CHANGED
@@ -16,13 +16,18 @@ const listTitle = () => span('hour', 'k-title k-timeselector-title');
16
16
  const listItem = () => li('<span>02</span>', 'k-item');
17
17
  const list = () => ul([listItem()], 'k-reset');
18
18
  const scrollable = () => (div([list()], 'k-time-container k-flex k-content k-scrollable'));
19
- const actionSheetContent = (isDateTimePicker) => ([
19
+ const actionSheetContent = (isDateTimePicker) => [
20
20
  isDateTimePicker ? div([div('button', 'k-button k-button-lg')], 'k-datetime-buttongroup') : null,
21
21
  div([
22
- div([span('title', 'k-title')], 'k-time-header'),
23
- div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper')
24
- ], 'k-timeselector k-timeselector-lg')
25
- ]);
22
+ div([span('04:08:48:49 AM', 'k-title k-timeselector-title'),
23
+ div('now', 'k-button k-button-md')
24
+ ], 'k-time-header'),
25
+ div([
26
+ span('', 'k-time-highlight'),
27
+ div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper'),
28
+ ], 'k-time-list-container'),
29
+ ], 'k-timeselector k-timeselector-lg'),
30
+ ];
26
31
  const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker) => {
27
32
  if (!isDocumentAvailable()) {
28
33
  return null;
@@ -30,13 +35,24 @@ const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker
30
35
  if (!isAdaptiveEnabled) {
31
36
  return div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper', { left: '-10000px', position: 'absolute' });
32
37
  }
33
- 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'),
34
- div([
35
- isDateTimePicker ? div([...actionSheetContent(isDateTimePicker)], 'k-datetime-wrap k-time-tab') : actionSheetContent(isDateTimePicker)[1]
36
- ], 'k-actionsheet-content'),
38
+ return div([
37
39
  div([
38
- div('button', 'k-button k-button-lg')
39
- ], '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 });
40
+ div([div([
41
+ div([], 'k-actionsheet-title'),
42
+ div([
43
+ div([
44
+ div([div('', 'k-i-check k-button-icon k-icon k-font-icon')], 'k-icon-wrapper-host'),
45
+ ], 'k-button k-icon-button k-button-lg'),
46
+ ], 'k-actionsheet-actions'),
47
+ ], 'k-actionsheet-titlebar-group')], 'k-actionsheet-titlebar'),
48
+ div([
49
+ isDateTimePicker
50
+ ? div([...actionSheetContent(isDateTimePicker)], 'k-datetime-wrap k-time-tab')
51
+ : actionSheetContent(isDateTimePicker)[1],
52
+ ], 'k-actionsheet-content'),
53
+ div([div('button', 'k-button k-button-lg')], 'k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer'),
54
+ ], 'k-actionsheet-view'),
55
+ ], `k-actionsheet k-adaptive-actionsheet ${windowSize === 'small' ? 'k-actionsheet-fullscreen' : ''}`, { height: windowSize === 'small' ? '100%' : '60vh', left: '-10000px', position: 'absolute', top: 0 });
40
56
  };
41
57
  /**
42
58
  * @hidden
@@ -59,6 +75,9 @@ export class TimePickerDOMService {
59
75
  }
60
76
  this.calculateHeights();
61
77
  }
78
+ sumCSSProperties(style, ...properties) {
79
+ return properties.reduce((sum, property) => sum + parseFloat(style.getPropertyValue(property)), 0) || 0;
80
+ }
62
81
  calculateHeights(container) {
63
82
  if (!isDocumentAvailable()) {
64
83
  return;
@@ -74,8 +93,15 @@ export class TimePickerDOMService {
74
93
  hostContainer = document.body;
75
94
  wrapper = hostContainer.appendChild(timeListWrapper(true, this.windowSize, this.isDateTimePicker));
76
95
  }
77
- this.timeListHeight = wrapper.querySelector('.k-scrollable').offsetHeight;
78
- this.itemHeight = wrapper.querySelector('li').offsetHeight;
96
+ const itemStyle = getComputedStyle(wrapper.querySelector('li'));
97
+ const listStyle = getComputedStyle(wrapper.querySelector('.k-scrollable'));
98
+ if (this.isAdaptiveEnabled && this.windowSize !== 'large') {
99
+ this.itemHeight = parseFloat(itemStyle.getPropertyValue('height'));
100
+ }
101
+ else {
102
+ this.itemHeight = this.sumCSSProperties(itemStyle, 'height', 'padding-top', 'padding-bottom');
103
+ }
104
+ this.timeListHeight = parseFloat(listStyle.getPropertyValue('height'));
79
105
  hostContainer.removeChild(wrapper);
80
106
  }
81
107
  isActive(element) {
package/fesm2022/progress-kendo-angular-dateinputs.mjs CHANGED
@@ -36,8 +36,8 @@ const packageMetadata = {
36
36
  productName: 'Kendo UI for Angular',
37
37
  productCode: 'KENDOUIANGULAR',
38
38
  productCodes: ['KENDOUIANGULAR'],
39
- publishDate: 1753347539,
40
- version: '19.3.0-develop.15',
39
+ publishDate: 1753856683,
40
+ version: '19.3.0-develop.17',
41
41
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
42
42
  };
43
43
 
@@ -11554,13 +11554,18 @@ const listTitle = () => span('hour', 'k-title k-timeselector-title');
11554
11554
  const listItem = () => li('<span>02</span>', 'k-item');
11555
11555
  const list = () => ul([listItem()], 'k-reset');
11556
11556
  const scrollable = () => (div([list()], 'k-time-container k-flex k-content k-scrollable'));
11557
- const actionSheetContent = (isDateTimePicker) => ([
11557
+ const actionSheetContent = (isDateTimePicker) => [
11558
11558
  isDateTimePicker ? div([div('button', 'k-button k-button-lg')], 'k-datetime-buttongroup') : null,
11559
11559
  div([
11560
- div([span('title', 'k-title')], 'k-time-header'),
11561
- div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper')
11562
- ], 'k-timeselector k-timeselector-lg')
11563
- ]);
11560
+ div([span('04:08:48:49 AM', 'k-title k-timeselector-title'),
11561
+ div('now', 'k-button k-button-md')
11562
+ ], 'k-time-header'),
11563
+ div([
11564
+ span('', 'k-time-highlight'),
11565
+ div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper'),
11566
+ ], 'k-time-list-container'),
11567
+ ], 'k-timeselector k-timeselector-lg'),
11568
+ ];
11564
11569
  const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker) => {
11565
11570
  if (!isDocumentAvailable()) {
11566
11571
  return null;
@@ -11568,13 +11573,24 @@ const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker
11568
11573
  if (!isAdaptiveEnabled) {
11569
11574
  return div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper', { left: '-10000px', position: 'absolute' });
11570
11575
  }
11571
- 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'),
11572
- div([
11573
- isDateTimePicker ? div([...actionSheetContent(isDateTimePicker)], 'k-datetime-wrap k-time-tab') : actionSheetContent(isDateTimePicker)[1]
11574
- ], 'k-actionsheet-content'),
11576
+ return div([
11575
11577
  div([
11576
- div('button', 'k-button k-button-lg')
11577
- ], '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 });
11578
+ div([div([
11579
+ div([], 'k-actionsheet-title'),
11580
+ div([
11581
+ div([
11582
+ div([div('', 'k-i-check k-button-icon k-icon k-font-icon')], 'k-icon-wrapper-host'),
11583
+ ], 'k-button k-icon-button k-button-lg'),
11584
+ ], 'k-actionsheet-actions'),
11585
+ ], 'k-actionsheet-titlebar-group')], 'k-actionsheet-titlebar'),
11586
+ div([
11587
+ isDateTimePicker
11588
+ ? div([...actionSheetContent(isDateTimePicker)], 'k-datetime-wrap k-time-tab')
11589
+ : actionSheetContent(isDateTimePicker)[1],
11590
+ ], 'k-actionsheet-content'),
11591
+ div([div('button', 'k-button k-button-lg')], 'k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer'),
11592
+ ], 'k-actionsheet-view'),
11593
+ ], `k-actionsheet k-adaptive-actionsheet ${windowSize === 'small' ? 'k-actionsheet-fullscreen' : ''}`, { height: windowSize === 'small' ? '100%' : '60vh', left: '-10000px', position: 'absolute', top: 0 });
11578
11594
  };
11579
11595
  /**
11580
11596
  * @hidden
@@ -11597,6 +11613,9 @@ class TimePickerDOMService {
11597
11613
  }
11598
11614
  this.calculateHeights();
11599
11615
  }
11616
+ sumCSSProperties(style, ...properties) {
11617
+ return properties.reduce((sum, property) => sum + parseFloat(style.getPropertyValue(property)), 0) || 0;
11618
+ }
11600
11619
  calculateHeights(container) {
11601
11620
  if (!isDocumentAvailable()) {
11602
11621
  return;
@@ -11612,8 +11631,15 @@ class TimePickerDOMService {
11612
11631
  hostContainer = document.body;
11613
11632
  wrapper = hostContainer.appendChild(timeListWrapper(true, this.windowSize, this.isDateTimePicker));
11614
11633
  }
11615
- this.timeListHeight = wrapper.querySelector('.k-scrollable').offsetHeight;
11616
- this.itemHeight = wrapper.querySelector('li').offsetHeight;
11634
+ const itemStyle = getComputedStyle(wrapper.querySelector('li'));
11635
+ const listStyle = getComputedStyle(wrapper.querySelector('.k-scrollable'));
11636
+ if (this.isAdaptiveEnabled && this.windowSize !== 'large') {
11637
+ this.itemHeight = parseFloat(itemStyle.getPropertyValue('height'));
11638
+ }
11639
+ else {
11640
+ this.itemHeight = this.sumCSSProperties(itemStyle, 'height', 'padding-top', 'padding-bottom');
11641
+ }
11642
+ this.timeListHeight = parseFloat(listStyle.getPropertyValue('height'));
11617
11643
  hostContainer.removeChild(wrapper);
11618
11644
  }
11619
11645
  isActive(element) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-dateinputs",
3
- "version": "19.3.0-develop.15",
3
+ "version": "19.3.0-develop.17",
4
4
  "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).",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -79,7 +79,7 @@
79
79
  "package": {
80
80
  "productName": "Kendo UI for Angular",
81
81
  "productCode": "KENDOUIANGULAR",
82
- "publishDate": 1753347539,
82
+ "publishDate": 1753856683,
83
83
  "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
84
84
  }
85
85
  },
@@ -90,19 +90,19 @@
90
90
  "@angular/forms": "16 - 20",
91
91
  "@angular/platform-browser": "16 - 20",
92
92
  "@progress/kendo-licensing": "^1.5.0",
93
- "@progress/kendo-angular-buttons": "19.3.0-develop.15",
94
- "@progress/kendo-angular-common": "19.3.0-develop.15",
95
- "@progress/kendo-angular-utils": "19.3.0-develop.15",
96
- "@progress/kendo-angular-intl": "19.3.0-develop.15",
97
- "@progress/kendo-angular-l10n": "19.3.0-develop.15",
98
- "@progress/kendo-angular-icons": "19.3.0-develop.15",
99
- "@progress/kendo-angular-popup": "19.3.0-develop.15",
100
- "@progress/kendo-angular-navigation": "19.3.0-develop.15",
93
+ "@progress/kendo-angular-buttons": "19.3.0-develop.17",
94
+ "@progress/kendo-angular-common": "19.3.0-develop.17",
95
+ "@progress/kendo-angular-utils": "19.3.0-develop.17",
96
+ "@progress/kendo-angular-intl": "19.3.0-develop.17",
97
+ "@progress/kendo-angular-l10n": "19.3.0-develop.17",
98
+ "@progress/kendo-angular-icons": "19.3.0-develop.17",
99
+ "@progress/kendo-angular-popup": "19.3.0-develop.17",
100
+ "@progress/kendo-angular-navigation": "19.3.0-develop.17",
101
101
  "rxjs": "^6.5.3 || ^7.0.0"
102
102
  },
103
103
  "dependencies": {
104
104
  "tslib": "^2.3.1",
105
- "@progress/kendo-angular-schematics": "19.3.0-develop.15",
105
+ "@progress/kendo-angular-schematics": "19.3.0-develop.17",
106
106
  "@progress/kendo-common": "^1.0.1",
107
107
  "@progress/kendo-date-math": "^1.1.0",
108
108
  "@progress/kendo-dateinputs-common": "^0.4.4",
package/timepicker/services/dom.service.d.ts CHANGED
@@ -17,6 +17,7 @@ export declare class TimePickerDOMService {
17
17
  isDateTimePicker: boolean;
18
18
  get windowSize(): AdaptiveSize;
19
19
  ensureHeights(): void;
20
+ private sumCSSProperties;
20
21
  calculateHeights(container?: HTMLElement): void;
21
22
  isActive(element: ElementRef): boolean;
22
23
  static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerDOMService, never>;