@progress/kendo-angular-dateinputs 19.3.0-develop.2 → 19.3.0-develop.21

package/dateinput/dateinput.component.d.ts

@@ -150,7 +150,6 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
      * Specifies the hint the DateInput displays when its value is `null`.
      * For more information, refer to the article on
      * [placeholders]({% slug placeholders_dateinput %}).
-     * @default null
      */
     placeholder: string;
     /**

package/datepicker/datepicker.component.d.ts

@@ -346,7 +346,6 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
     /**
      * Specifies the hint the DatePicker displays when its value is `null`.
      * ([more information and exaples]({% slug placeholders_datepicker %})).
-     * @default null
      */
     placeholder: string;
     /**

package/esm2022/dateinput/dateinput.component.mjs

@@ -207,9 +207,8 @@ export class DateInputComponent {
      * Specifies the hint the DateInput displays when its value is `null`.
      * For more information, refer to the article on
      * [placeholders]({% slug placeholders_dateinput %}).
-     * @default null
      */
-    placeholder = null;
+    placeholder;
     /**
      * Configures the incremental steps of the DateInput.
      * For more information, refer to the article on
@@ -919,7 +918,7 @@ export class DateInputComponent {
         [tabindex]="tabindex"
         [disabled]="disabled"
         [readonly]="readonly"
-        [placeholder]="placeholder"
+        [attr.placeholder]="placeholder"
         [attr.aria-expanded]="isPopupOpen"
         [attr.aria-haspopup]="hasPopup"
         [kendoEventsOutsideAngular]="{
@@ -1022,7 +1021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [tabindex]="tabindex"
         [disabled]="disabled"
         [readonly]="readonly"
-        [placeholder]="placeholder"
+        [attr.placeholder]="placeholder"
         [attr.aria-expanded]="isPopupOpen"
         [attr.aria-haspopup]="hasPopup"
         [kendoEventsOutsideAngular]="{

package/esm2022/datepicker/datepicker.component.mjs

@@ -399,9 +399,8 @@ export class DatePickerComponent extends MultiTabStop {
     /**
      * Specifies the hint the DatePicker displays when its value is `null`.
      * ([more information and exaples]({% slug placeholders_datepicker %})).
-     * @default null
      */
-    placeholder = null;
+    placeholder;
     /**
      * Sets the `tabindex` of the DatePicker.
      * This property is used to set the order in which the DatePicker will receive focus when navigating through the page using the Tab key.

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1751964637,
-    version: '19.3.0-develop.2',
+    publishDate: 1754395732,
+    version: '19.3.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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

@@ -16,13 +16,18 @@ 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 actionSheetContent = (isDateTimePicker) => ([
+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')
-]);
+        div([span('04:08:48:49 AM', 'k-title k-timeselector-title'),
+            div('now', 'k-button k-button-md')
+        ], 'k-time-header'),
+        div([
+            span('', 'k-time-highlight'),
+            div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper'),
+        ], 'k-time-list-container'),
+    ], 'k-timeselector k-timeselector-lg'),
+];
 const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker) => {
     if (!isDocumentAvailable()) {
         return null;
@@ -30,13 +35,24 @@ const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker
     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'),
+    return div([
         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 });
+            div([div([
+                    div([], 'k-actionsheet-title'),
+                    div([
+                        div([
+                            div([div('', 'k-i-check k-button-icon k-icon k-font-icon')], 'k-icon-wrapper-host'),
+                        ], 'k-button k-icon-button k-button-lg'),
+                    ], 'k-actionsheet-actions'),
+                ], 'k-actionsheet-titlebar-group')], '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-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer'),
+        ], 'k-actionsheet-view'),
+    ], `k-actionsheet k-adaptive-actionsheet ${windowSize === 'small' ? 'k-actionsheet-fullscreen' : ''}`, { height: windowSize === 'small' ? '100%' : '60vh', left: '-10000px', position: 'absolute', top: 0 });
 };
 /**
  * @hidden
@@ -59,6 +75,9 @@ export class TimePickerDOMService {
         }
         this.calculateHeights();
     }
+    sumCSSProperties(style, ...properties) {
+        return properties.reduce((sum, property) => sum + parseFloat(style.getPropertyValue(property)), 0) || 0;
+    }
     calculateHeights(container) {
         if (!isDocumentAvailable()) {
             return;
@@ -74,8 +93,15 @@ export class TimePickerDOMService {
             hostContainer = document.body;
             wrapper = hostContainer.appendChild(timeListWrapper(true, this.windowSize, this.isDateTimePicker));
         }
-        this.timeListHeight = wrapper.querySelector('.k-scrollable').offsetHeight;
-        this.itemHeight = wrapper.querySelector('li').offsetHeight;
+        const itemStyle = getComputedStyle(wrapper.querySelector('li'));
+        const listStyle = getComputedStyle(wrapper.querySelector('.k-scrollable'));
+        if (this.isAdaptiveEnabled && this.windowSize !== 'large') {
+            this.itemHeight = parseFloat(itemStyle.getPropertyValue('height'));
+        }
+        else {
+            this.itemHeight = this.sumCSSProperties(itemStyle, 'height', 'padding-top', 'padding-bottom');
+        }
+        this.timeListHeight = parseFloat(listStyle.getPropertyValue('height'));
         hostContainer.removeChild(wrapper);
     }
     isActive(element) {

package/esm2022/timepicker/timepicker.component.mjs

@@ -136,7 +136,7 @@ export class TimePickerComponent extends MultiTabStop {
      * [placeholders]({% slug placeholders_timepicker %}).
      * @default null
      */
-    placeholder = null;
+    placeholder;
     /**
      * Specifies the smallest valid time value
      * ([see example]({% slug timeranges_timepicker %})).

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

@@ -36,8 +36,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1751964637,
-    version: '19.3.0-develop.2',
+    publishDate: 1754395732,
+    version: '19.3.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -8640,9 +8640,8 @@ class DateInputComponent {
      * Specifies the hint the DateInput displays when its value is `null`.
      * For more information, refer to the article on
      * [placeholders]({% slug placeholders_dateinput %}).
-     * @default null
      */
-    placeholder = null;
+    placeholder;
     /**
      * Configures the incremental steps of the DateInput.
      * For more information, refer to the article on
@@ -9352,7 +9351,7 @@ class DateInputComponent {
         [tabindex]="tabindex"
         [disabled]="disabled"
         [readonly]="readonly"
-        [placeholder]="placeholder"
+        [attr.placeholder]="placeholder"
         [attr.aria-expanded]="isPopupOpen"
         [attr.aria-haspopup]="hasPopup"
         [kendoEventsOutsideAngular]="{
@@ -9455,7 +9454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [tabindex]="tabindex"
         [disabled]="disabled"
         [readonly]="readonly"
-        [placeholder]="placeholder"
+        [attr.placeholder]="placeholder"
         [attr.aria-expanded]="isPopupOpen"
         [attr.aria-haspopup]="hasPopup"
         [kendoEventsOutsideAngular]="{
@@ -10195,9 +10194,8 @@ class DatePickerComponent extends MultiTabStop {
     /**
      * Specifies the hint the DatePicker displays when its value is `null`.
      * ([more information and exaples]({% slug placeholders_datepicker %})).
-     * @default null
      */
-    placeholder = null;
+    placeholder;
     /**
      * Sets the `tabindex` of the DatePicker.
      * This property is used to set the order in which the DatePicker will receive focus when navigating through the page using the Tab key.
@@ -11554,13 +11552,18 @@ 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 actionSheetContent = (isDateTimePicker) => ([
+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')
-]);
+        div([span('04:08:48:49 AM', 'k-title k-timeselector-title'),
+            div('now', 'k-button k-button-md')
+        ], 'k-time-header'),
+        div([
+            span('', 'k-time-highlight'),
+            div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper'),
+        ], 'k-time-list-container'),
+    ], 'k-timeselector k-timeselector-lg'),
+];
 const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker) => {
     if (!isDocumentAvailable()) {
         return null;
@@ -11568,13 +11571,24 @@ const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker
     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'),
+    return div([
         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 });
+            div([div([
+                    div([], 'k-actionsheet-title'),
+                    div([
+                        div([
+                            div([div('', 'k-i-check k-button-icon k-icon k-font-icon')], 'k-icon-wrapper-host'),
+                        ], 'k-button k-icon-button k-button-lg'),
+                    ], 'k-actionsheet-actions'),
+                ], 'k-actionsheet-titlebar-group')], '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-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer'),
+        ], 'k-actionsheet-view'),
+    ], `k-actionsheet k-adaptive-actionsheet ${windowSize === 'small' ? 'k-actionsheet-fullscreen' : ''}`, { height: windowSize === 'small' ? '100%' : '60vh', left: '-10000px', position: 'absolute', top: 0 });
 };
 /**
  * @hidden
@@ -11597,6 +11611,9 @@ class TimePickerDOMService {
         }
         this.calculateHeights();
     }
+    sumCSSProperties(style, ...properties) {
+        return properties.reduce((sum, property) => sum + parseFloat(style.getPropertyValue(property)), 0) || 0;
+    }
     calculateHeights(container) {
         if (!isDocumentAvailable()) {
             return;
@@ -11612,8 +11629,15 @@ class TimePickerDOMService {
             hostContainer = document.body;
             wrapper = hostContainer.appendChild(timeListWrapper(true, this.windowSize, this.isDateTimePicker));
         }
-        this.timeListHeight = wrapper.querySelector('.k-scrollable').offsetHeight;
-        this.itemHeight = wrapper.querySelector('li').offsetHeight;
+        const itemStyle = getComputedStyle(wrapper.querySelector('li'));
+        const listStyle = getComputedStyle(wrapper.querySelector('.k-scrollable'));
+        if (this.isAdaptiveEnabled && this.windowSize !== 'large') {
+            this.itemHeight = parseFloat(itemStyle.getPropertyValue('height'));
+        }
+        else {
+            this.itemHeight = this.sumCSSProperties(itemStyle, 'height', 'padding-top', 'padding-bottom');
+        }
+        this.timeListHeight = parseFloat(listStyle.getPropertyValue('height'));
         hostContainer.removeChild(wrapper);
     }
     isActive(element) {
@@ -13660,7 +13684,7 @@ class TimePickerComponent extends MultiTabStop {
      * [placeholders]({% slug placeholders_timepicker %}).
      * @default null
      */
-    placeholder = null;
+    placeholder;
     /**
      * Specifies the smallest valid time value
      * ([see example]({% slug timeranges_timepicker %})).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dateinputs",
-  "version": "19.3.0-develop.2",
+  "version": "19.3.0-develop.21",
   "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",
@@ -79,7 +79,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1751964637,
+      "publishDate": 1754395732,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -89,20 +89,20 @@
     "@angular/core": "16 - 20",
     "@angular/forms": "16 - 20",
     "@angular/platform-browser": "16 - 20",
-    "@progress/kendo-licensing": "^1.5.0",
-    "@progress/kendo-angular-buttons": "19.3.0-develop.2",
-    "@progress/kendo-angular-common": "19.3.0-develop.2",
-    "@progress/kendo-angular-utils": "19.3.0-develop.2",
-    "@progress/kendo-angular-intl": "19.3.0-develop.2",
-    "@progress/kendo-angular-l10n": "19.3.0-develop.2",
-    "@progress/kendo-angular-icons": "19.3.0-develop.2",
-    "@progress/kendo-angular-popup": "19.3.0-develop.2",
-    "@progress/kendo-angular-navigation": "19.3.0-develop.2",
+    "@progress/kendo-licensing": "^1.7.0",
+    "@progress/kendo-angular-buttons": "19.3.0-develop.21",
+    "@progress/kendo-angular-common": "19.3.0-develop.21",
+    "@progress/kendo-angular-utils": "19.3.0-develop.21",
+    "@progress/kendo-angular-intl": "19.3.0-develop.21",
+    "@progress/kendo-angular-l10n": "19.3.0-develop.21",
+    "@progress/kendo-angular-icons": "19.3.0-develop.21",
+    "@progress/kendo-angular-popup": "19.3.0-develop.21",
+    "@progress/kendo-angular-navigation": "19.3.0-develop.21",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "19.3.0-develop.2",
+    "@progress/kendo-angular-schematics": "19.3.0-develop.21",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-date-math": "^1.1.0",
     "@progress/kendo-dateinputs-common": "^0.4.4",

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

@@ -17,6 +17,7 @@ export declare class TimePickerDOMService {
     isDateTimePicker: boolean;
     get windowSize(): AdaptiveSize;
     ensureHeights(): void;
+    private sumCSSProperties;
     calculateHeights(container?: HTMLElement): void;
     isActive(element: ElementRef): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerDOMService, never>;