@progress/kendo-angular-dateinputs 19.3.0-develop.4 → 19.3.0-develop.41

package/calendar/multiview-calendar.component.d.ts

@@ -17,7 +17,6 @@ import { CenturyCellTemplateDirective } from './templates/century-cell-template.
 import { WeekNumberCellTemplateDirective } from './templates/weeknumber-cell-template.directive';
 import { HeaderTitleTemplateDirective } from './templates/header-title-template.directive';
 import { Action } from './models/navigation-action.enum';
-import { KeyDown } from './models/keydown.interface';
 import { CalendarView } from './models/view.type';
 import { CalendarViewEnum } from './models/view.enum';
 import { SelectionRangeEnd } from './models/selection-range-end.type';
@@ -326,15 +325,15 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
     /**
      * @hidden
      */
-    onClosePopup: EventEmitter<KeyDown>;
+    onClosePopup: EventEmitter<any>;
     /**
      * @hidden
      */
-    onTabPress: EventEmitter<KeyDown>;
+    onTabPress: EventEmitter<any>;
     /**
      * @hidden
      */
-    onShiftTabPress: EventEmitter<KeyDown>;
+    onShiftTabPress: EventEmitter<any>;
     /**
      * @hidden
      *
@@ -543,7 +542,7 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
     /**
      * @hidden
      */
-    keydown(event: KeyDown): void;
+    keydown(event: KeyboardEvent): void;
     constructor(bus: BusViewService, element: ElementRef, navigator: NavigationService, renderer: Renderer2, cdr: ChangeDetectorRef, zone: NgZone, disabledDatesService: DisabledDatesService, selectionService: SelectionService);
     ngOnInit(): void;
     ngOnChanges(changes: any): void;

package/calendar/services/navigation.service.d.ts

@@ -3,7 +3,6 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Action } from '../models/navigation-action.enum';
-import { KeyDown } from '../models/keydown.interface';
 import { CalendarViewEnum } from '../models/view.enum';
 import { BusViewService } from '../services/bus-view.service';
 import * as i0 from "@angular/core";
@@ -13,7 +12,7 @@ import * as i0 from "@angular/core";
 export declare class NavigationService {
     private bus;
     constructor(bus: BusViewService);
-    action(event: KeyDown): Action;
+    action(event: KeyboardEvent): Action;
     move(value: Date, action: Action, activeView: CalendarViewEnum): Date;
     static ɵfac: i0.ɵɵFactoryDeclaration<NavigationService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NavigationService>;

package/common/utils.d.ts

@@ -43,17 +43,7 @@ export declare const isDateArray: (value: any) => boolean;
 /**
  * @hidden
  */
-export declare const isArrowWithShiftPressed: (args: any) => boolean;
-/**
- * @hidden
- * Enum with key codes.
- */
-export declare enum Keys {
-    ArrowDown = 40,
-    ArrowLeft = 37,
-    ArrowRight = 39,
-    ArrowUp = 38
-}
+export declare const isArrowWithShiftPressed: (args: KeyboardEvent) => boolean;
 /**
  * @hidden
  */

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/daterange/date-range-popup.component.d.ts

@@ -14,7 +14,6 @@ import { AdaptiveMode } from '../util';
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import { DateRangeSelectionDirective } from './date-range-selection.directive';
 import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
-import { KeyDown } from '../calendar/models/keydown.interface';
 import { DateInputSize } from '../common/models/size';
 import { CalendarView } from '../calendar/models/view.type';
 import { Day } from '@progress/kendo-date-math';
@@ -348,15 +347,15 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
     /**
      * @hidden
      */
-    closePopup(event: KeyDown): void;
+    closePopup(event: KeyboardEvent): void;
     /**
      * @hidden
      */
-    handleTab(event: KeyDown): void;
+    handleTab(event: KeyboardEvent): void;
     /**
      * @hidden
      */
-    handleShiftTab(event: KeyDown): void;
+    handleShiftTab(event: KeyboardEvent): void;
     private handleWindowBlur;
     private handleMouseLeave;
     private handleKeydown;

package/esm2022/calendar/calendar.component.mjs

@@ -6,7 +6,7 @@ import { Component, ChangeDetectorRef, ChangeDetectionStrategy, ContentChild, Ev
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { cloneDate, isEqual } from '@progress/kendo-date-math';
-import { hasObservers, KendoInput, guid, Keys, isObject, ResizeSensorComponent } from '@progress/kendo-angular-common';
+import { hasObservers, KendoInput, guid, Keys, isObject, ResizeSensorComponent, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { MultiViewCalendarComponent } from './multiview-calendar.component';
@@ -1048,7 +1048,7 @@ export class CalendarComponent {
      */
     handleMultiViewCalendarKeydown(args) {
         // Prevent form from submitting on enter if used in datepicker (classic view)
-        if (isPresent(this.pickerService) && args.keyCode === Keys.Enter) {
+        if (isPresent(this.pickerService) && (args.code === Keys.Enter || args.code === Keys.NumpadEnter)) {
             args.preventDefault();
         }
     }
@@ -1129,7 +1129,8 @@ export class CalendarComponent {
         if (this.type === 'infinite') {
             // reserve the alt + arrow key commands for the picker
             const ctrlKey = args.ctrlKey || args.metaKey;
-            const arrowKeyPressed = [Keys.ArrowUp, Keys.ArrowRight, Keys.ArrowDown, Keys.ArrowLeft].indexOf(args.keyCode) !== -1;
+            const code = normalizeNumpadKeys(args);
+            const arrowKeyPressed = [Keys.ArrowUp, Keys.ArrowRight, Keys.ArrowDown, Keys.ArrowLeft].indexOf(code) !== -1;
             const reserveKeyCommandsForPicker = isPresent(this.pickerService) && arrowKeyPressed && args.altKey;
             if (reserveKeyCommandsForPicker) {
                 return;
@@ -1138,7 +1139,7 @@ export class CalendarComponent {
                 args.preventDefault();
             }
             // Prevent form from submitting on enter if used in datepicker (infinite view)
-            const preventSubmitInDatePicker = isPresent(this.pickerService) && args.keyCode === Keys.Enter;
+            const preventSubmitInDatePicker = isPresent(this.pickerService) && code === Keys.Enter;
             if (preventSubmitInDatePicker) {
                 args.preventDefault();
             }
@@ -1148,7 +1149,7 @@ export class CalendarComponent {
                 this.detectChanges();
                 args.preventDefault();
             }
-            if (args.keyCode === Keys.Enter) {
+            if (code === Keys.Enter) {
                 this.selectionService.lastClicked = this.focusedDate;
                 if (this.selection !== 'range') {
                     this.performSelection(this.focusedDate, args);
@@ -1157,7 +1158,7 @@ export class CalendarComponent {
                     this.performRangeSelection(this.focusedDate);
                 }
             }
-            if (args.keyCode === Keys.KeyT) {
+            if (code === Keys.KeyT) {
                 this.focusToday();
             }
             if (isArrowWithShiftPressed(args) && this.selection !== 'range') {

package/esm2022/calendar/multiview-calendar.component.mjs

@@ -6,7 +6,7 @@ import { Component, ChangeDetectorRef, ChangeDetectionStrategy, ContentChild, Ev
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { cloneDate, isEqual } from '@progress/kendo-date-math';
-import { hasObservers, guid, Keys, isObject } from '@progress/kendo-angular-common';
+import { hasObservers, guid, Keys, isObject, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { HorizontalViewListComponent } from './horizontal-view-list.component';
 import { HeaderComponent } from './header.component';
 import { BusViewService } from './services/bus-view.service';
@@ -693,16 +693,17 @@ export class MultiViewCalendarComponent {
      * @hidden
      */
     keydown(event) {
-        const arrowUpOrDownKeyPressed = [Keys.ArrowUp, Keys.ArrowDown].indexOf(event.keyCode) !== -1;
+        const code = normalizeNumpadKeys(event);
+        const arrowUpOrDownKeyPressed = [Keys.ArrowUp, Keys.ArrowDown].indexOf(code) !== -1;
         const ctrlKey = event.ctrlKey || event.metaKey;
-        const onArrowRightAndControl = event.keyCode === Keys.ArrowRight && ctrlKey;
-        const onArrowLeftAndControl = event.keyCode === Keys.ArrowLeft && ctrlKey;
-        const onTKeyPress = event.keyCode === Keys.KeyT;
-        const onEnterKeyPress = event.keyCode === Keys.Enter;
-        const onArrowUpPress = event.keyCode === Keys.ArrowUp;
+        const onArrowRightAndControl = code === Keys.ArrowRight && ctrlKey;
+        const onArrowLeftAndControl = code === Keys.ArrowLeft && ctrlKey;
+        const onTKeyPress = code === Keys.KeyT;
+        const onEnterKeyPress = code === Keys.Enter;
+        const onArrowUpPress = code === Keys.ArrowUp;
         const altKey = event.altKey;
-        const escKey = event.keyCode === Keys.Escape;
-        const tabKeyPress = event.keyCode === Keys.Tab;
+        const escKey = code === Keys.Escape;
+        const tabKeyPress = code === Keys.Tab;
         const shiftKeyPress = event.shiftKey;
         if (onArrowRightAndControl) {
             event.preventDefault();

package/esm2022/calendar/services/navigation.service.mjs

@@ -5,19 +5,20 @@
 import { Injectable } from '@angular/core';
 import { Action } from '../models/navigation-action.enum';
 import { BusViewService } from '../services/bus-view.service';
+import { normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "../services/bus-view.service";
 const KEY_TO_ACTION = {
-    '33': Action.PrevView,
-    '34': Action.NextView,
-    '35': Action.LastInView,
-    '36': Action.FirstInView,
-    '37': Action.Left,
-    '38': Action.Up,
-    '39': Action.Right,
-    '40': Action.Down,
-    'meta+38': Action.UpperView,
-    'meta+40': Action.LowerView
+    'PageUp': Action.PrevView,
+    'PageDown': Action.NextView,
+    'End': Action.LastInView,
+    'Home': Action.FirstInView,
+    'ArrowLeft': Action.Left,
+    'ArrowUp': Action.Up,
+    'ArrowRight': Action.Right,
+    'ArrowDown': Action.Down,
+    'meta+ArrowUp': Action.UpperView,
+    'meta+ArrowDown': Action.LowerView
 };
 /**
  * @hidden
@@ -28,7 +29,9 @@ export class NavigationService {
         this.bus = bus;
     }
     action(event) {
-        const action = `${event.ctrlKey || event.metaKey ? 'meta+' : ''}${event.keyCode}`;
+        // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
+        const code = normalizeNumpadKeys(event);
+        const action = `${event.ctrlKey || event.metaKey ? 'meta+' : ''}${code}`;
         return KEY_TO_ACTION[action];
     }
     move(value, action, activeView) {

package/esm2022/common/utils.mjs

@@ -2,6 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { Keys, normalizeNumpadKeys } from "@progress/kendo-angular-common";
 /**
  * @hidden
  */
@@ -44,18 +45,10 @@ export const isDateArray = (value) => Array.isArray(value) && value.length > 0 &
 /**
  * @hidden
  */
-export const isArrowWithShiftPressed = (args) => args.shiftKey && (args.keyCode === Keys.ArrowRight || args.keyCode === Keys.ArrowLeft || args.keyCode === Keys.ArrowDown || args.keyCode === Keys.ArrowUp);
-/**
- * @hidden
- * Enum with key codes.
- */
-export var Keys;
-(function (Keys) {
-    Keys[Keys["ArrowDown"] = 40] = "ArrowDown";
-    Keys[Keys["ArrowLeft"] = 37] = "ArrowLeft";
-    Keys[Keys["ArrowRight"] = 39] = "ArrowRight";
-    Keys[Keys["ArrowUp"] = 38] = "ArrowUp";
-})(Keys || (Keys = {}));
+export const isArrowWithShiftPressed = (args) => {
+    const code = normalizeNumpadKeys(args);
+    return args.shiftKey && (code === Keys.ArrowRight || code === Keys.ArrowLeft || code === Keys.ArrowDown || code === Keys.ArrowUp);
+};
 /**
  * @hidden
  */

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
@@ -645,7 +644,7 @@ export class DateInputComponent {
         this.control = formControl;
         this.subs.add(this.formControl?.statusChanges.subscribe(() => this.setAriaInvalid()));
         this.setAriaInvalid();
-        this.subs.add(this.dateInput?.nativeElement.addEventListener('keydown', this.handleKeyDown, true));
+        this.subs.add(this.renderer.listen(this.dateInput?.nativeElement, 'keydown', this.handleKeyDown));
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
@@ -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

@@ -7,7 +7,7 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { cloneDate } from '@progress/kendo-date-math';
-import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { MIN_DATE, MAX_DATE } from '../defaults';
@@ -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.
@@ -924,22 +923,23 @@ export class DatePickerComponent extends MultiTabStop {
      * @hidden
      */
     handleKeydown(e) {
-        const { altKey, shiftKey, keyCode, target } = e;
-        if (keyCode === Keys.Escape) {
+        const { altKey, shiftKey, target } = e;
+        const code = normalizeNumpadKeys(e);
+        if (code === Keys.Escape) {
             this.dateInput.focus();
             this.show = false;
             hasObservers(this.escape) && this.escape.emit();
         }
         if (altKey) {
-            if (keyCode === Keys.ArrowDown && !this.show) {
+            if (code === Keys.ArrowDown && !this.show) {
                 this.show = true;
             }
-            if (keyCode === Keys.ArrowUp) {
+            if (code === Keys.ArrowUp) {
                 this.dateInput.focus();
                 this.show = false;
             }
         }
-        if (keyCode === Keys.Tab && this.show && this.calendar.isActive && isTabExitingCalendar(this.calendarType, target, shiftKey)) {
+        if (code === Keys.Tab && this.show && this.calendar.isActive && isTabExitingCalendar(this.calendarType, target, shiftKey)) {
             this.dateInput.focus();
             this.show = false;
         }

package/esm2022/daterange/date-range-input.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { ElementRef, Renderer2, NgZone, Directive } from '@angular/core';
 import { cloneDate } from '@progress/kendo-date-math';
-import { Keys } from '@progress/kendo-angular-common';
+import { Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { Subscription, fromEvent } from 'rxjs';
 import { DateInputComponent } from '../dateinput/dateinput.component';
 import { DateRangeService } from './date-range.service';
@@ -59,7 +59,7 @@ export class DateRangeInput {
             this.dateRangeService.range$.subscribe(range => this.updateInputValue(range)),
             fromEvent(this.element.nativeElement, 'click').subscribe(() => this.activate()),
             fromEvent(this.element.nativeElement, 'keydown').subscribe((event) => this.togglePopup(event || {}))
-        ].map(s => this.subscriptions.add(s));
+        ].forEach(s => this.subscriptions.add(s));
     }
     destroy() {
         this.subscriptions.unsubscribe();
@@ -107,11 +107,13 @@ export class DateRangeInput {
             this.dateRangeService.setRange(range);
         }
     }
-    togglePopup({ altKey, keyCode }) {
-        if (keyCode === Keys.Escape) {
+    togglePopup(e) {
+        const code = normalizeNumpadKeys(e);
+        const altKey = e.altKey;
+        if (code === Keys.Escape) {
             this.dateRangeService.cancelPopup();
         }
-        else if (altKey && keyCode === Keys.ArrowDown) {
+        else if (altKey && code === Keys.ArrowDown) {
             this.dateRangeService.activatePopup();
         }
     }

package/esm2022/daterange/date-range-popup.component.mjs

@@ -9,7 +9,7 @@ import { DateRangePopupTemplateDirective } from './date-range-popup-template.dir
 import { DateRangeService } from './date-range.service';
 import { MultiViewCalendarComponent } from '../calendar/multiview-calendar.component';
 import { PreventableEvent } from '../preventable-event';
-import { isDocumentAvailable, guid, Keys, hasObservers, ResizeSensorComponent } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, guid, Keys, hasObservers, ResizeSensorComponent, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { Subscription, fromEvent, merge } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
@@ -547,8 +547,9 @@ export class DateRangePopupComponent {
         this.dateRangeService.setRange(this.dateRangeService.selectionRange);
     }
     handleKeydown(event) {
-        const { altKey, keyCode } = event;
-        if (keyCode === Keys.Escape || (altKey && keyCode === Keys.ArrowUp)) {
+        const { altKey } = event;
+        const code = normalizeNumpadKeys(event);
+        if (code === Keys.Escape || (altKey && code === Keys.ArrowUp)) {
             this.zone.run(() => this.cancelPopup());
         }
     }

package/esm2022/daterange/date-range.component.mjs

@@ -7,7 +7,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { DateRangePopupComponent } from './date-range-popup.component';
 import { DateRangeService } from './date-range.service';
-import { Keys } from '@progress/kendo-angular-common';
+import { Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { NgIf } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "./date-range.service";
@@ -48,11 +48,12 @@ export class DateRangeComponent {
     * @hidden
     */
     keydown(event) {
-        const shouldOpenPopup = event.keyCode === Keys.ArrowDown && event.altKey;
+        const code = normalizeNumpadKeys(event);
+        const shouldOpenPopup = code === Keys.ArrowDown && event.altKey;
         if (shouldOpenPopup) {
             this.dateRangeService.activatePopup();
         }
-        const shouldClosePopup = (event.keyCode === Keys.ArrowUp && event.altKey) || event.keyCode === Keys.Escape;
+        const shouldClosePopup = (code === Keys.ArrowUp && event.altKey) || code === Keys.Escape;
         if (shouldClosePopup) {
             this.dateRangeService.deactivatePopup();
         }

package/esm2022/datetimepicker/datetimepicker.component.mjs

@@ -9,7 +9,7 @@ import { tap } from 'rxjs/operators';
 import { cloneDate, isEqual, getDate } from '@progress/kendo-date-math';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { IntlService } from '@progress/kendo-angular-intl';
-import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -1114,8 +1114,9 @@ export class DateTimePickerComponent extends MultiTabStop {
         if (this.disabled || this.readonly) {
             return;
         }
-        const { keyCode, altKey } = event;
-        switch (keyCode) {
+        const { altKey } = event;
+        const code = normalizeNumpadKeys(event);
+        switch (code) {
             case altKey && Keys.ArrowUp:
             case Keys.Escape:
                 this.handleCancel();
@@ -1370,8 +1371,8 @@ export class DateTimePickerComponent extends MultiTabStop {
         this.popupRef.popupAnchorViewportLeave.subscribe(() => this.handleCancel());
         if (this.calendar.type === 'infinite') {
             this.subscriptions.add(fromEvent(this.calendar.monthView.list.nativeElement, 'keydown').subscribe((event) => {
-                const { keyCode, shiftKey } = event;
-                if (keyCode === Keys.Tab && !shiftKey) {
+                const { code, shiftKey } = event;
+                if (code === Keys.Tab && !shiftKey) {
                     event.preventDefault();
                     if (!this.calendarValue && !this.cancelButton) {
                         this.dateTabButton.focus();

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1752065390,
-    version: '19.3.0-develop.4',
+    publishDate: 1754998578,
+    version: '19.3.0-develop.41',
     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/timelist.component.mjs

@@ -17,7 +17,7 @@ import { MillisecondsService } from './services/milliseconds.service';
 import { DayPeriodService } from './services/dayperiod.service';
 import { closestInScope } from '../common/dom-queries';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { Keys, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
+import { Keys, EventsOutsideAngularDirective, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { NgStyle, NgFor } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/dom.service";
@@ -26,10 +26,10 @@ const SNAP_THRESHOLD = 0.05; //% of the item height
 const SCROLL_THRESHOLD = 2; //< 2px threshold
 const nil = () => (null);
 const getters = {
-    35: (data, _) => data[data.length - 1],
-    36: (data, _) => data[0],
-    38: (data, index) => data[index - 1],
-    40: (data, index) => data[index + 1]
+    [Keys.End]: (data, _) => data[data.length - 1],
+    [Keys.Home]: (data, _) => data[0],
+    [Keys.ArrowUp]: (data, index) => data[index - 1],
+    [Keys.ArrowDown]: (data, index) => data[index + 1]
 };
 const services = {
     [TIME_PART.dayperiod]: DayPeriodService,
@@ -252,15 +252,16 @@ export class TimeListComponent {
         return oldData && newData && oldData.text !== newData.text;
     }
     handleKeyDown(e) {
-        if (e.keyCode === Keys.Tab && !e.shiftKey && this.isLast) {
+        const code = normalizeNumpadKeys(e);
+        if (code === Keys.Tab && !e.shiftKey && this.isLast) {
             e.preventDefault();
             this.tabOutLastPart.emit();
         }
-        if (e.keyCode === Keys.Tab && e.shiftKey && this.isFirst) {
+        if (code === Keys.Tab && e.shiftKey && this.isFirst) {
             e.preventDefault();
             this.tabOutFirstPart.emit();
         }
-        const getter = getters[e.keyCode] || nil;
+        const getter = getters[code] || nil;
         const dataItem = getter(this.data, this.service.selectedIndex(this.value));
         if (dataItem) {
             this.handleChange(dataItem);