@progress/kendo-angular-dropdowns 19.3.0-develop.4 → 19.3.0-develop.40

package/common/list.component.d.ts

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { EventEmitter, QueryList, ElementRef, SimpleChange, ChangeDetectorRef, NgZone, Renderer2 } from '@angular/core';
 import { AfterViewInit, OnChanges, OnDestroy } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ListItemDirective } from './list-item.directive';
 import { ItemTemplateDirective } from './templates/item-template.directive';
 import { GroupTemplateDirective } from './templates/group-template.directive';
@@ -31,6 +32,7 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     private cdr;
     private zone;
     private renderer;
+    private localization;
     selected: any[];
     focused: number;
     textField: string;
@@ -88,11 +90,15 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     get pageSize(): number;
     get scrollHeight(): number;
     get overflowY(): string;
+    /**
+     * @hidden
+     */
+    get useCustomValueText(): string;
     /**
      * @hidden
      */
     get checkboxClasses(): any;
-    constructor(dataService: DataService, wrapper: ElementRef<HTMLElement>, selectionService: SelectionService, disabledItemsService: DisabledItemsService, cdr: ChangeDetectorRef, zone: NgZone, renderer: Renderer2);
+    constructor(dataService: DataService, wrapper: ElementRef<HTMLElement>, selectionService: SelectionService, disabledItemsService: DisabledItemsService, cdr: ChangeDetectorRef, zone: NgZone, renderer: Renderer2, localization: LocalizationService);
     ngOnChanges(changes: {
         [propertyName: string]: SimpleChange;
     }): void;

package/common/localization/messages.d.ts

@@ -40,6 +40,16 @@ export declare class Messages extends ComponentMessages {
      * The text for the input's placeholder when filtering is enabled.
      */
     filterInputPlaceholder: string;
+    /**
+     * The text displayed when the user types a custom value that is not in the list of options.
+     *
+     * The text includes a localizable string and the custom value.
+     * For example, when adding a custom value **Test**, the default text is **Use "Test"**.
+     *
+     * You can reorder the custom value and the localizable part by using a placeholder in `useCustomValueText`.
+     * Use `{customValue}` to insert the value, for example, **Add: {customValue}**.
+     */
+    useCustomValueText: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<Messages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<Messages, never, never, { "noDataText": { "alias": "noDataText"; "required": false; }; "clearTitle": { "alias": "clearTitle"; "required": false; }; "checkAllText": { "alias": "checkAllText"; "required": false; }; "selectButtonText": { "alias": "selectButtonText"; "required": false; }; "filterInputLabel": { "alias": "filterInputLabel"; "required": false; }; "popupLabel": { "alias": "popupLabel"; "required": false; }; "adaptiveCloseButtonTitle": { "alias": "adaptiveCloseButtonTitle"; "required": false; }; "filterInputPlaceholder": { "alias": "filterInputPlaceholder"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Messages, never, never, { "noDataText": { "alias": "noDataText"; "required": false; }; "clearTitle": { "alias": "clearTitle"; "required": false; }; "checkAllText": { "alias": "checkAllText"; "required": false; }; "selectButtonText": { "alias": "selectButtonText"; "required": false; }; "filterInputLabel": { "alias": "filterInputLabel"; "required": false; }; "popupLabel": { "alias": "popupLabel"; "required": false; }; "adaptiveCloseButtonTitle": { "alias": "adaptiveCloseButtonTitle"; "required": false; }; "filterInputPlaceholder": { "alias": "filterInputPlaceholder"; "required": false; }; "useCustomValueText": { "alias": "useCustomValueText"; "required": false; }; }, {}, never, never, false, never>;
 }

package/common/searchbar.component.d.ts

@@ -85,7 +85,7 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
     handleInput(event: any): void;
     handleFocus(event: any): void;
     handleBlur(event: any): void;
-    handleKeydown(event: any): void;
+    handleKeydown(event: KeyboardEvent): void;
     focus(): void;
     blur(): void;
     setInputSize(): void;

package/esm2022/autocomplete/autocomplete.component.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, Renderer2, forwardRef, ElementRef, Input, Output, EventEmitter, ContentChild, ViewChild, ViewContainerRef, TemplateRef, HostBinding, isDevMode, ChangeDetectorRef, NgZone, Injector } from '@angular/core';
-import { isDocumentAvailable, KendoInput, hasObservers, SuffixTemplateDirective, PrefixTemplateDirective, isControlRequired, SeparatorComponent, ResizeSensorComponent, TemplateContextDirective, guid } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, KendoInput, hasObservers, SuffixTemplateDirective, PrefixTemplateDirective, isControlRequired, SeparatorComponent, ResizeSensorComponent, TemplateContextDirective, guid, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -967,8 +967,10 @@ export class AutoCompleteComponent {
         this.subs.add(this.valueChangeSubject
             .subscribe(value => {
             const hasChange = this.value !== value;
-            const index = this.findIndex(value);
-            this.selectionService.focused = index;
+            if (this.isOpen) {
+                const index = this.findIndex(value);
+                this.selectionService.focused = index;
+            }
             this.value = value;
             this.text = value;
             // emit change after assigning `this.value` => allows the user to modify the component value on `valueChange`
@@ -986,7 +988,8 @@ export class AutoCompleteComponent {
         this.subs.add(merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
             if (this.isOpen) {
                 event.originalEvent.preventDefault();
-                this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
+                const code = normalizeNumpadKeys(event.originalEvent);
+                this.optionsList.scrollWithOnePage(NavigationAction[code]);
             }
         }));
     }

package/esm2022/comboboxes/combobox.component.mjs

@@ -18,7 +18,7 @@ import { NavigationService } from '../common/navigation/navigation.service';
 import { DisabledItemsService } from '../common/disabled-items/disabled-items.service';
 import { merge, of, Subject, Subscription } from 'rxjs';
 import { catchError, filter, map, partition, tap, throttleTime } from 'rxjs/operators';
-import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged, SuffixTemplateDirective, PrefixTemplateDirective, isControlRequired, MultiTabStop, SeparatorComponent, EventsOutsideAngularDirective, ResizeSensorComponent, Keys, TemplateContextDirective, guid } from '@progress/kendo-angular-common';
+import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged, SuffixTemplateDirective, PrefixTemplateDirective, isControlRequired, MultiTabStop, SeparatorComponent, EventsOutsideAngularDirective, ResizeSensorComponent, Keys, TemplateContextDirective, guid, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { isPresent, getter, isEmptyString, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, setListBoxAriaLabelledBy, setActionSheetTitle, animationDuration } from '../common/util';
 import { NavigationAction } from '../common/navigation/navigation-action';
@@ -798,7 +798,8 @@ export class ComboBoxComponent extends MultiTabStop {
         this.subs.add(merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
             if (this.isOpen) {
                 event.originalEvent.preventDefault();
-                this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
+                const code = normalizeNumpadKeys(event.originalEvent);
+                this.optionsList.scrollWithOnePage(NavigationAction[code]);
             }
         }));
         this.subs.add(this.navigationService.esc.subscribe(this.handleEscape.bind(this)));
@@ -1147,14 +1148,18 @@ export class ComboBoxComponent extends MultiTabStop {
         if (this.disabled || this.readonly) {
             return;
         }
-        if (event.keyCode === Keys.Home || event.keyCode === Keys.End) {
+        // on some keyboards, Home and End keys are mapped to Numpad keys
+        const code = normalizeNumpadKeys(event);
+        const isHomeKey = code === Keys.Home;
+        const isEndKey = code === Keys.End;
+        if (isHomeKey || isEndKey) {
             return;
         }
         if (!hasSelected) {
-            if (event.keyCode === Keys.ArrowDown) {
+            if (code === Keys.ArrowDown) {
                 offset = -1;
             }
-            else if (event.keyCode === Keys.ArrowUp) {
+            else if (code === Keys.ArrowUp) {
                 offset = 1;
             }
         }

package/esm2022/common/list.component.mjs

@@ -3,7 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input, Output, EventEmitter, ViewChildren, QueryList, ElementRef, ViewChild, ChangeDetectorRef, NgZone, Renderer2 } from '@angular/core';
-import { ResizeSensorComponent, TemplateContextDirective, isChanged } from '@progress/kendo-angular-common';
+import { ResizeSensorComponent, TemplateContextDirective, isChanged, replaceMessagePlaceholder } from '@progress/kendo-angular-common';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ListItemDirective } from './list-item.directive';
 import { ItemTemplateDirective } from './templates/item-template.directive';
 import { GroupTemplateDirective } from './templates/group-template.directive';
@@ -22,6 +23,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "./data.service";
 import * as i2 from "./selection/selection.service";
 import * as i3 from "./disabled-items/disabled-items.service";
+import * as i4 from "@progress/kendo-angular-l10n";
 /**
  * @hidden
  */
@@ -33,6 +35,7 @@ export class ListComponent {
     cdr;
     zone;
     renderer;
+    localization;
     selected = [];
     focused = -1;
     textField;
@@ -117,6 +120,13 @@ export class ListComponent {
             return overflow;
         }
     }
+    /**
+     * @hidden
+     */
+    get useCustomValueText() {
+        const localizationMsg = this.localization.get('useCustomValueText');
+        return replaceMessagePlaceholder(localizationMsg, 'customValue', this.text);
+    }
     /**
      * @hidden
      */
@@ -124,7 +134,7 @@ export class ListComponent {
         return `${this.size ? getSizeClass('checkbox', this.size) : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
     }
     /* tslint:disable:member-ordering */
-    constructor(dataService, wrapper, selectionService, disabledItemsService, cdr, zone, renderer) {
+    constructor(dataService, wrapper, selectionService, disabledItemsService, cdr, zone, renderer, localization) {
         this.dataService = dataService;
         this.wrapper = wrapper;
         this.selectionService = selectionService;
@@ -132,6 +142,7 @@ export class ListComponent {
         this.cdr = cdr;
         this.zone = zone;
         this.renderer = renderer;
+        this.localization = localization;
         this.selectSubscription = merge(this.selectionService.onSelect.pipe(map((args) => args.indices[0])), this.selectionService.onFocus)
             .pipe(
         // handle only the very last onSelect/onFocus emission
@@ -453,7 +464,7 @@ export class ListComponent {
             this.renderer.addClass(this.wrapper.nativeElement, this.listVirtualClass);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, deps: [{ token: i1.DataService }, { token: i0.ElementRef }, { token: i2.SelectionService }, { token: i3.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, deps: [{ token: i1.DataService }, { token: i0.ElementRef }, { token: i2.SelectionService }, { token: i3.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i4.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListComponent, isStandalone: true, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div *ngIf="defaultItem && !template"
         class="k-list-optionlabel"
@@ -486,7 +497,7 @@ export class ListComponent {
             }">
         </ng-template>
         <ng-template #default_custom_item_template>
-            Use "{{text}}"
+            {{useCustomValueText}}
         </ng-template>
     </div>
     <div *ngIf="dataService.grouped && showStickyHeader"
@@ -657,7 +668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }">
         </ng-template>
         <ng-template #default_custom_item_template>
-            Use "{{text}}"
+            {{useCustomValueText}}
         </ng-template>
     </div>
     <div *ngIf="dataService.grouped && showStickyHeader"
@@ -794,7 +805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [NgIf, NgStyle, TemplateContextDirective, NgFor, ListItemDirective, SelectableDirective, NgClass, ResizeSensorComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i0.ElementRef }, { type: i2.SelectionService }, { type: i3.DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { selected: [{
+        }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i0.ElementRef }, { type: i2.SelectionService }, { type: i3.DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i4.LocalizationService }]; }, propDecorators: { selected: [{
                 type: Input
             }], focused: [{
                 type: Input

package/esm2022/common/localization/messages.mjs

@@ -41,8 +41,18 @@ export class Messages extends ComponentMessages {
      * The text for the input's placeholder when filtering is enabled.
      */
     filterInputPlaceholder;
+    /**
+     * The text displayed when the user types a custom value that is not in the list of options.
+     *
+     * The text includes a localizable string and the custom value.
+     * For example, when adding a custom value **Test**, the default text is **Use "Test"**.
+     *
+     * You can reorder the custom value and the localizable part by using a placeholder in `useCustomValueText`.
+     * Use `{customValue}` to insert the value, for example, **Add: {customValue}**.
+     */
+    useCustomValueText;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", filterInputPlaceholder: "filterInputPlaceholder" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", filterInputPlaceholder: "filterInputPlaceholder", useCustomValueText: "useCustomValueText" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive
@@ -62,4 +72,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], filterInputPlaceholder: [{
                 type: Input
+            }], useCustomValueText: [{
+                type: Input
             }] } });

package/esm2022/common/navigation/navigation.service.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Injectable, EventEmitter } from '@angular/core';
 import { isPresent } from '../util';
-import { Keys } from '@progress/kendo-angular-common';
+import { Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { NavigationAction } from './navigation-action';
 import { DisabledItemsService } from '../disabled-items/disabled-items.service';
 import { SelectionService } from '../selection/selection.service';
@@ -57,7 +57,8 @@ export class NavigationService {
         this.selectionService = selectionService;
     }
     process(args) {
-        const keyCode = args.originalEvent.keyCode;
+        // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
+        const keyCode = normalizeNumpadKeys(args.originalEvent);
         const altKey = args.originalEvent.altKey;
         const shiftKey = args.originalEvent.shiftKey;
         const ctrlKey = args.originalEvent.ctrlKey || args.originalEvent.metaKey;

package/esm2022/common/searchbar.component.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, Renderer2, Input, Output, EventEmitter, ElementRef, HostBinding, Injector, NgZone } from '@angular/core';
-import { isDocumentAvailable, isObjectPresent, isSafari, removeHTMLAttributes, setHTMLAttributes, Keys, parseAttributes } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isObjectPresent, isSafari, removeHTMLAttributes, setHTMLAttributes, Keys, parseAttributes, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { combineStr, isJapanese } from './util';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Subscription } from 'rxjs';
@@ -269,7 +269,8 @@ export class SearchBarComponent {
         this.onBlur.emit(event);
     }
     handleKeydown(event) {
-        const keyCode = event.keyCode;
+        // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
+        const keyCode = normalizeNumpadKeys(event);
         const keys = [Keys.ArrowUp, Keys.ArrowDown, Keys.ArrowLeft, Keys.ArrowRight, Keys.Enter,
             Keys.Escape, Keys.Delete, Keys.Backspace, Keys.Home, Keys.End, Keys.PageDown, Keys.PageUp];
         if (keys.indexOf(keyCode) > -1) {

package/esm2022/common/shared-events.directive.mjs

@@ -63,7 +63,7 @@ export class SharedDropDownEventsDirective {
                 cursorInsideWrapper = false;
             }));
             this.subscriptions.add(this.renderer.listen(hostElement, 'keydown', (args) => {
-                if (args.keyCode === Keys.Tab) {
+                if (args.code === Keys.Tab) {
                     tabbing = true;
                 }
                 else {

package/esm2022/dropdownlist/dropdownlist.component.mjs

@@ -8,7 +8,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { merge, interval, Subscription } from 'rxjs';
 import { concatMap, filter, map, skipWhile, take, takeUntil, tap } from 'rxjs/operators';
-import { isDocumentAvailable, KendoInput, hasObservers, anyChanged, isChanged, EventsOutsideAngularDirective, ResizeSensorComponent, Keys, TemplateContextDirective, isSafari, guid } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, KendoInput, hasObservers, anyChanged, isChanged, EventsOutsideAngularDirective, ResizeSensorComponent, Keys, TemplateContextDirective, isSafari, guid, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { isPresent, getter, shuffleData, sameCharsOnly, matchText, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, setListBoxAriaLabelledBy, setActionSheetTitle, animationDuration } from '../common/util';
 import { SelectionService } from '../common/selection/selection.service';
@@ -598,7 +598,11 @@ export class DropDownListComponent {
         if (this.disabled || this.readonly) {
             return;
         }
-        const isHomeEnd = event.keyCode === Keys.Home || event.keyCode === Keys.End;
+        // on some keyboards, Home and End keys are mapped to Numpad keys
+        const code = normalizeNumpadKeys(event);
+        const isHomeKey = code === Keys.Home;
+        const isEndKey = code === Keys.End;
+        const isHomeEnd = isHomeKey || isEndKey;
         const isFilterFocused = this.filterable && this.isFocused && this.isOpen;
         if (isFilterFocused && isHomeEnd) {
             return;
@@ -606,10 +610,10 @@ export class DropDownListComponent {
         const hasSelected = isPresent(this.selectionService.selected[0]);
         const focusedItemNotSelected = isPresent(this.selectionService.focused) && !this.selectionService.isSelected(this.selectionService.focused);
         if (!hasSelected || focusedItemNotSelected) {
-            if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.ArrowRight && this.leftRightArrowsNavigation) {
+            if (code === Keys.ArrowDown || code === Keys.ArrowRight && this.leftRightArrowsNavigation) {
                 offset = -1;
             }
-            else if (event.keyCode === Keys.ArrowUp || event.keyCode === Keys.ArrowLeft && this.leftRightArrowsNavigation) {
+            else if (code === Keys.ArrowUp || code === Keys.ArrowLeft && this.leftRightArrowsNavigation) {
                 offset = 1;
             }
         }
@@ -1061,7 +1065,8 @@ export class DropDownListComponent {
         this.subs.add(merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
             if (this.isOpen) {
                 event.originalEvent.preventDefault();
-                this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
+                const code = normalizeNumpadKeys(event.originalEvent);
+                this.optionsList.scrollWithOnePage(NavigationAction[code]);
             }
         }));
         this.subs.add(this.navigationService.open.subscribe(() => this.togglePopup(true)));
@@ -1256,10 +1261,10 @@ export class DropDownListComponent {
         }
     }
     onKeyPress(event) {
-        if (event.which === 0 || event.keyCode === Keys.Enter) {
+        if (event.which === 0 || event.code === Keys.Enter || event.code === Keys.NumpadEnter || event.key.length > 1) {
             return;
         }
-        let character = String.fromCharCode(event.charCode || event.keyCode);
+        let character = event.key;
         if (this.ignoreCase) {
             character = character.toLowerCase();
         }

package/esm2022/dropdowntrees/dropdowntree.component.mjs

@@ -804,7 +804,7 @@ export class DropDownTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
-        if (event.keyCode === Keys.Tab && this.isActionSheetExpanded) {
+        if (event.code === Keys.Tab && this.isActionSheetExpanded) {
             this.togglePopup(false);
             return;
         }

package/esm2022/dropdowntrees/multiselecttree.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, forwardRef, HostBinding, Injector, Input, isDevMode, NgZone, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
 import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { anyChanged, guid, hasObservers, Keys, KendoInput, isDocumentAvailable, EventsOutsideAngularDirective, ResizeSensorComponent, TemplateContextDirective } from '@progress/kendo-angular-common';
+import { anyChanged, guid, hasObservers, Keys, KendoInput, isDocumentAvailable, EventsOutsideAngularDirective, ResizeSensorComponent, TemplateContextDirective, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { NavigationService } from '../common/navigation/navigation.service';
@@ -201,14 +201,15 @@ export class MultiSelectTreeComponent {
      * @hidden
      */
     handleKeydown(event, input) {
+        const code = normalizeNumpadKeys(event);
         if (event.target === this.filterInput?.nativeElement &&
-            (event.keyCode === Keys.ArrowLeft || event.keyCode === Keys.ArrowRight)) {
+            (code === Keys.ArrowLeft || code === Keys.ArrowRight)) {
             return;
         }
         if (input) {
             event.stopImmediatePropagation();
         }
-        const deleteTag = this.isWrapperActive && event.keyCode === Keys.Backspace && this.tags.length > 0;
+        const deleteTag = this.isWrapperActive && code === Keys.Backspace && this.tags.length > 0;
         if (deleteTag) {
             this.handleBackspace();
             return;

package/esm2022/multiselect/multiselect.component.mjs

@@ -6,7 +6,7 @@ import { isPresent, isArray, isObjectArray, resolveAllValues, selectedIndices, g
 import { SearchBarComponent } from '../common/searchbar.component';
 import { ViewChild, Renderer2, ViewContainerRef, Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter, isDevMode, forwardRef, ContentChild, ChangeDetectorRef, KeyValueDiffers, NgZone, Injector } from '@angular/core';
 import { Subscription, Subject, of, merge } from 'rxjs';
-import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged, SuffixTemplateDirective, PrefixTemplateDirective, isControlRequired, SeparatorComponent, ResizeSensorComponent, Keys, TemplateContextDirective, guid } from '@progress/kendo-angular-common';
+import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged, SuffixTemplateDirective, PrefixTemplateDirective, isControlRequired, SeparatorComponent, ResizeSensorComponent, Keys, TemplateContextDirective, guid, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { catchError, filter, map, take, tap } from 'rxjs/operators';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
@@ -956,10 +956,11 @@ export class MultiSelectComponent {
      * @hidden
      */
     handleNavigate(event) {
-        const navigateInput = this.text && event.keyCode !== Keys.ArrowDown && event.keyCode !== Keys.ArrowUp;
-        const selectValue = this.text && event.keyCode === Keys.Enter || event.keyCode === Keys.Escape;
-        const deleteTag = !this.text && event.keyCode === Keys.Backspace && this.tags.length > 0;
-        if (event.keyCode === Keys.Backspace && this.isActionSheetExpanded) {
+        const code = normalizeNumpadKeys(event);
+        const navigateInput = this.text && code !== Keys.ArrowDown && code !== Keys.ArrowUp;
+        const selectValue = this.text && code === Keys.Enter || code === Keys.Escape;
+        const deleteTag = !this.text && code === Keys.Backspace && this.tags.length > 0;
+        if (code === Keys.Backspace && this.isActionSheetExpanded) {
             return;
         }
         if (deleteTag) {
@@ -1217,7 +1218,8 @@ export class MultiSelectComponent {
             merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
                 if (this.isOpen) {
                     event.originalEvent.preventDefault();
-                    this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
+                    const code = normalizeNumpadKeys(event.originalEvent);
+                    this.optionsList.scrollWithOnePage(NavigationAction[code]);
                 }
             })
         ].forEach(s => this.subs.add(s));
@@ -1408,7 +1410,7 @@ export class MultiSelectComponent {
         }
     }
     handleKeydown(event) {
-        if (this.isFocused && this.isOpen && (event.ctrlKey || event.metaKey) && event.keyCode === Keys.KeyA) {
+        if (this.isFocused && this.isOpen && (event.ctrlKey || event.metaKey) && event.code === Keys.KeyA) {
             event.preventDefault();
             this.handleSelectAll();
         }
@@ -1812,6 +1814,9 @@ export class MultiSelectComponent {
 
             i18n-adaptiveCloseButtonTitle="kendo.multiselect.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
             adaptiveCloseButtonTitle="Close"
+
+            i18n-useCustomValueText="kendo.multiselect.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
+            useCustomValueText="{{ 'Use "{customValue}"' }}"
         >
         </ng-container>
 
@@ -2005,6 +2010,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-adaptiveCloseButtonTitle="kendo.multiselect.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
             adaptiveCloseButtonTitle="Close"
+
+            i18n-useCustomValueText="kendo.multiselect.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
+            useCustomValueText="{{ 'Use &quot;{customValue}&quot;' }}"
         >
         </ng-container>
 

package/esm2022/package-metadata.mjs

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

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

@@ -5,7 +5,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, HostBinding, Output, Directive, Injectable, HostListener, ViewChildren, ViewChild, forwardRef, isDevMode, ViewContainerRef, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i10 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, isObjectPresent, removeHTMLAttributes, parseAttributes, isSafari, Keys, setHTMLAttributes, isChanged, TemplateContextDirective, ResizeSensorComponent, closest as closest$1, isControlRequired, guid, hasObservers, KendoInput, SuffixTemplateDirective, PrefixTemplateDirective, SeparatorComponent, MultiTabStop, anyChanged, EventsOutsideAngularDirective, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_ADORNMENTS, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isObjectPresent, removeHTMLAttributes, parseAttributes, isSafari, normalizeNumpadKeys, Keys, setHTMLAttributes, replaceMessagePlaceholder, isChanged, TemplateContextDirective, ResizeSensorComponent, closest as closest$1, isControlRequired, guid, hasObservers, KendoInput, SuffixTemplateDirective, PrefixTemplateDirective, SeparatorComponent, MultiTabStop, anyChanged, EventsOutsideAngularDirective, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_ADORNMENTS, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
 export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective, ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
 import * as i7 from '@progress/kendo-angular-utils';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
@@ -37,8 +37,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1752065402,
-    version: '19.3.0-develop.4',
+    publishDate: 1754990723,
+    version: '19.3.0-develop.40',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -672,7 +672,8 @@ class SearchBarComponent {
         this.onBlur.emit(event);
     }
     handleKeydown(event) {
-        const keyCode = event.keyCode;
+        // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
+        const keyCode = normalizeNumpadKeys(event);
         const keys = [Keys.ArrowUp, Keys.ArrowDown, Keys.ArrowLeft, Keys.ArrowRight, Keys.Enter,
             Keys.Escape, Keys.Delete, Keys.Backspace, Keys.Home, Keys.End, Keys.PageDown, Keys.PageUp];
         if (keys.indexOf(keyCode) > -1) {
@@ -1532,7 +1533,8 @@ class NavigationService {
         this.selectionService = selectionService;
     }
     process(args) {
-        const keyCode = args.originalEvent.keyCode;
+        // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
+        const keyCode = normalizeNumpadKeys(args.originalEvent);
         const altKey = args.originalEvent.altKey;
         const shiftKey = args.originalEvent.shiftKey;
         const ctrlKey = args.originalEvent.ctrlKey || args.originalEvent.metaKey;
@@ -1908,6 +1910,7 @@ class ListComponent {
     cdr;
     zone;
     renderer;
+    localization;
     selected = [];
     focused = -1;
     textField;
@@ -1992,6 +1995,13 @@ class ListComponent {
             return overflow;
         }
     }
+    /**
+     * @hidden
+     */
+    get useCustomValueText() {
+        const localizationMsg = this.localization.get('useCustomValueText');
+        return replaceMessagePlaceholder(localizationMsg, 'customValue', this.text);
+    }
     /**
      * @hidden
      */
@@ -1999,7 +2009,7 @@ class ListComponent {
         return `${this.size ? getSizeClass('checkbox', this.size) : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
     }
     /* tslint:disable:member-ordering */
-    constructor(dataService, wrapper, selectionService, disabledItemsService, cdr, zone, renderer) {
+    constructor(dataService, wrapper, selectionService, disabledItemsService, cdr, zone, renderer, localization) {
         this.dataService = dataService;
         this.wrapper = wrapper;
         this.selectionService = selectionService;
@@ -2007,6 +2017,7 @@ class ListComponent {
         this.cdr = cdr;
         this.zone = zone;
         this.renderer = renderer;
+        this.localization = localization;
         this.selectSubscription = merge(this.selectionService.onSelect.pipe(map((args) => args.indices[0])), this.selectionService.onFocus)
             .pipe(
         // handle only the very last onSelect/onFocus emission
@@ -2328,7 +2339,7 @@ class ListComponent {
             this.renderer.addClass(this.wrapper.nativeElement, this.listVirtualClass);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, deps: [{ token: DataService }, { token: i0.ElementRef }, { token: SelectionService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, deps: [{ token: DataService }, { token: i0.ElementRef }, { token: SelectionService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListComponent, isStandalone: true, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div *ngIf="defaultItem && !template"
         class="k-list-optionlabel"
@@ -2361,7 +2372,7 @@ class ListComponent {
             }">
         </ng-template>
         <ng-template #default_custom_item_template>
-            Use "{{text}}"
+            {{useCustomValueText}}
         </ng-template>
     </div>
     <div *ngIf="dataService.grouped && showStickyHeader"
@@ -2532,7 +2543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }">
         </ng-template>
         <ng-template #default_custom_item_template>
-            Use "{{text}}"
+            {{useCustomValueText}}
         </ng-template>
     </div>
     <div *ngIf="dataService.grouped && showStickyHeader"
@@ -2669,7 +2680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [NgIf, NgStyle, TemplateContextDirective, NgFor, ListItemDirective, SelectableDirective, NgClass, ResizeSensorComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: DataService }, { type: i0.ElementRef }, { type: SelectionService }, { type: DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { selected: [{
+        }], ctorParameters: function () { return [{ type: DataService }, { type: i0.ElementRef }, { type: SelectionService }, { type: DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { selected: [{
                 type: Input
             }], focused: [{
                 type: Input
@@ -3046,7 +3057,7 @@ class SharedDropDownEventsDirective {
                 cursorInsideWrapper = false;
             }));
             this.subscriptions.add(this.renderer.listen(hostElement, 'keydown', (args) => {
-                if (args.keyCode === Keys.Tab) {
+                if (args.code === Keys.Tab) {
                     tabbing = true;
                 }
                 else {
@@ -3117,8 +3128,18 @@ class Messages extends ComponentMessages {
      * The text for the input's placeholder when filtering is enabled.
      */
     filterInputPlaceholder;
+    /**
+     * The text displayed when the user types a custom value that is not in the list of options.
+     *
+     * The text includes a localizable string and the custom value.
+     * For example, when adding a custom value **Test**, the default text is **Use "Test"**.
+     *
+     * You can reorder the custom value and the localizable part by using a placeholder in `useCustomValueText`.
+     * Use `{customValue}` to insert the value, for example, **Add: {customValue}**.
+     */
+    useCustomValueText;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", filterInputPlaceholder: "filterInputPlaceholder" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", filterInputPlaceholder: "filterInputPlaceholder", useCustomValueText: "useCustomValueText" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive
@@ -3138,6 +3159,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], filterInputPlaceholder: [{
                 type: Input
+            }], useCustomValueText: [{
+                type: Input
             }] } });
 
 /**
@@ -4103,8 +4126,10 @@ class AutoCompleteComponent {
         this.subs.add(this.valueChangeSubject
             .subscribe(value => {
             const hasChange = this.value !== value;
-            const index = this.findIndex(value);
-            this.selectionService.focused = index;
+            if (this.isOpen) {
+                const index = this.findIndex(value);
+                this.selectionService.focused = index;
+            }
             this.value = value;
             this.text = value;
             // emit change after assigning `this.value` => allows the user to modify the component value on `valueChange`
@@ -4122,7 +4147,8 @@ class AutoCompleteComponent {
         this.subs.add(merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
             if (this.isOpen) {
                 event.originalEvent.preventDefault();
-                this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
+                const code = normalizeNumpadKeys(event.originalEvent);
+                this.optionsList.scrollWithOnePage(NavigationAction[code]);
             }
         }));
     }
@@ -5580,7 +5606,8 @@ class ComboBoxComponent extends MultiTabStop {
         this.subs.add(merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
             if (this.isOpen) {
                 event.originalEvent.preventDefault();
-                this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
+                const code = normalizeNumpadKeys(event.originalEvent);
+                this.optionsList.scrollWithOnePage(NavigationAction[code]);
             }
         }));
         this.subs.add(this.navigationService.esc.subscribe(this.handleEscape.bind(this)));
@@ -5929,14 +5956,18 @@ class ComboBoxComponent extends MultiTabStop {
         if (this.disabled || this.readonly) {
             return;
         }
-        if (event.keyCode === Keys.Home || event.keyCode === Keys.End) {
+        // on some keyboards, Home and End keys are mapped to Numpad keys
+        const code = normalizeNumpadKeys(event);
+        const isHomeKey = code === Keys.Home;
+        const isEndKey = code === Keys.End;
+        if (isHomeKey || isEndKey) {
             return;
         }
         if (!hasSelected) {
-            if (event.keyCode === Keys.ArrowDown) {
+            if (code === Keys.ArrowDown) {
                 offset = -1;
             }
-            else if (event.keyCode === Keys.ArrowUp) {
+            else if (code === Keys.ArrowUp) {
                 offset = 1;
             }
         }
@@ -7509,7 +7540,11 @@ class DropDownListComponent {
         if (this.disabled || this.readonly) {
             return;
         }
-        const isHomeEnd = event.keyCode === Keys.Home || event.keyCode === Keys.End;
+        // on some keyboards, Home and End keys are mapped to Numpad keys
+        const code = normalizeNumpadKeys(event);
+        const isHomeKey = code === Keys.Home;
+        const isEndKey = code === Keys.End;
+        const isHomeEnd = isHomeKey || isEndKey;
         const isFilterFocused = this.filterable && this.isFocused && this.isOpen;
         if (isFilterFocused && isHomeEnd) {
             return;
@@ -7517,10 +7552,10 @@ class DropDownListComponent {
         const hasSelected = isPresent(this.selectionService.selected[0]);
         const focusedItemNotSelected = isPresent(this.selectionService.focused) && !this.selectionService.isSelected(this.selectionService.focused);
         if (!hasSelected || focusedItemNotSelected) {
-            if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.ArrowRight && this.leftRightArrowsNavigation) {
+            if (code === Keys.ArrowDown || code === Keys.ArrowRight && this.leftRightArrowsNavigation) {
                 offset = -1;
             }
-            else if (event.keyCode === Keys.ArrowUp || event.keyCode === Keys.ArrowLeft && this.leftRightArrowsNavigation) {
+            else if (code === Keys.ArrowUp || code === Keys.ArrowLeft && this.leftRightArrowsNavigation) {
                 offset = 1;
             }
         }
@@ -7972,7 +8007,8 @@ class DropDownListComponent {
         this.subs.add(merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
             if (this.isOpen) {
                 event.originalEvent.preventDefault();
-                this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
+                const code = normalizeNumpadKeys(event.originalEvent);
+                this.optionsList.scrollWithOnePage(NavigationAction[code]);
             }
         }));
         this.subs.add(this.navigationService.open.subscribe(() => this.togglePopup(true)));
@@ -8167,10 +8203,10 @@ class DropDownListComponent {
         }
     }
     onKeyPress(event) {
-        if (event.which === 0 || event.keyCode === Keys.Enter) {
+        if (event.which === 0 || event.code === Keys.Enter || event.code === Keys.NumpadEnter || event.key.length > 1) {
             return;
         }
-        let character = String.fromCharCode(event.charCode || event.keyCode);
+        let character = event.key;
         if (this.ignoreCase) {
             character = character.toLowerCase();
         }
@@ -10160,10 +10196,11 @@ class MultiSelectComponent {
      * @hidden
      */
     handleNavigate(event) {
-        const navigateInput = this.text && event.keyCode !== Keys.ArrowDown && event.keyCode !== Keys.ArrowUp;
-        const selectValue = this.text && event.keyCode === Keys.Enter || event.keyCode === Keys.Escape;
-        const deleteTag = !this.text && event.keyCode === Keys.Backspace && this.tags.length > 0;
-        if (event.keyCode === Keys.Backspace && this.isActionSheetExpanded) {
+        const code = normalizeNumpadKeys(event);
+        const navigateInput = this.text && code !== Keys.ArrowDown && code !== Keys.ArrowUp;
+        const selectValue = this.text && code === Keys.Enter || code === Keys.Escape;
+        const deleteTag = !this.text && code === Keys.Backspace && this.tags.length > 0;
+        if (code === Keys.Backspace && this.isActionSheetExpanded) {
             return;
         }
         if (deleteTag) {
@@ -10421,7 +10458,8 @@ class MultiSelectComponent {
             merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
                 if (this.isOpen) {
                     event.originalEvent.preventDefault();
-                    this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
+                    const code = normalizeNumpadKeys(event.originalEvent);
+                    this.optionsList.scrollWithOnePage(NavigationAction[code]);
                 }
             })
         ].forEach(s => this.subs.add(s));
@@ -10612,7 +10650,7 @@ class MultiSelectComponent {
         }
     }
     handleKeydown(event) {
-        if (this.isFocused && this.isOpen && (event.ctrlKey || event.metaKey) && event.keyCode === Keys.KeyA) {
+        if (this.isFocused && this.isOpen && (event.ctrlKey || event.metaKey) && event.code === Keys.KeyA) {
             event.preventDefault();
             this.handleSelectAll();
         }
@@ -11016,6 +11054,9 @@ class MultiSelectComponent {
 
             i18n-adaptiveCloseButtonTitle="kendo.multiselect.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
             adaptiveCloseButtonTitle="Close"
+
+            i18n-useCustomValueText="kendo.multiselect.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
+            useCustomValueText="{{ 'Use &quot;{customValue}&quot;' }}"
         >
         </ng-container>
 
@@ -11209,6 +11250,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-adaptiveCloseButtonTitle="kendo.multiselect.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
             adaptiveCloseButtonTitle="Close"
+
+            i18n-useCustomValueText="kendo.multiselect.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
+            useCustomValueText="{{ 'Use &quot;{customValue}&quot;' }}"
         >
         </ng-container>
 
@@ -13353,7 +13397,7 @@ class DropDownTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
-        if (event.keyCode === Keys.Tab && this.isActionSheetExpanded) {
+        if (event.code === Keys.Tab && this.isActionSheetExpanded) {
             this.togglePopup(false);
             return;
         }
@@ -15096,14 +15140,15 @@ class MultiSelectTreeComponent {
      * @hidden
      */
     handleKeydown(event, input) {
+        const code = normalizeNumpadKeys(event);
         if (event.target === this.filterInput?.nativeElement &&
-            (event.keyCode === Keys.ArrowLeft || event.keyCode === Keys.ArrowRight)) {
+            (code === Keys.ArrowLeft || code === Keys.ArrowRight)) {
             return;
         }
         if (input) {
             event.stopImmediatePropagation();
         }
-        const deleteTag = this.isWrapperActive && event.keyCode === Keys.Backspace && this.tags.length > 0;
+        const deleteTag = this.isWrapperActive && code === Keys.Backspace && this.tags.length > 0;
         if (deleteTag) {
             this.handleBackspace();
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dropdowns",
-  "version": "19.3.0-develop.4",
+  "version": "19.3.0-develop.40",
   "description": "A wide variety of native Angular dropdown components including AutoComplete, ComboBox, DropDownList, DropDownTree, MultiColumnComboBox, MultiSelect, and MultiSelectTree ",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -100,7 +100,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1752065402,
+      "publishDate": 1754990723,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -110,19 +110,19 @@
     "@angular/core": "16 - 20",
     "@angular/forms": "16 - 20",
     "@angular/platform-browser": "16 - 20",
-    "@progress/kendo-licensing": "^1.5.0",
-    "@progress/kendo-angular-common": "19.3.0-develop.4",
-    "@progress/kendo-angular-utils": "19.3.0-develop.4",
-    "@progress/kendo-angular-l10n": "19.3.0-develop.4",
-    "@progress/kendo-angular-navigation": "19.3.0-develop.4",
-    "@progress/kendo-angular-popup": "19.3.0-develop.4",
-    "@progress/kendo-angular-icons": "19.3.0-develop.4",
-    "@progress/kendo-angular-treeview": "19.3.0-develop.4",
+    "@progress/kendo-licensing": "^1.7.0",
+    "@progress/kendo-angular-common": "19.3.0-develop.40",
+    "@progress/kendo-angular-utils": "19.3.0-develop.40",
+    "@progress/kendo-angular-l10n": "19.3.0-develop.40",
+    "@progress/kendo-angular-navigation": "19.3.0-develop.40",
+    "@progress/kendo-angular-popup": "19.3.0-develop.40",
+    "@progress/kendo-angular-icons": "19.3.0-develop.40",
+    "@progress/kendo-angular-treeview": "19.3.0-develop.40",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "19.3.0-develop.4",
+    "@progress/kendo-angular-schematics": "19.3.0-develop.40",
     "@progress/kendo-common": "^1.0.1",
     "node-html-parser": "^7.0.1"
   },

package/schematics/ngAdd/index.js

@@ -4,9 +4,9 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'DropDownsModule', package: 'dropdowns', peerDependencies: {
             // peers of the treeview
-            '@progress/kendo-angular-inputs': '19.3.0-develop.4',
+            '@progress/kendo-angular-inputs': '19.3.0-develop.40',
             // peers of inputs
-            '@progress/kendo-angular-intl': '19.3.0-develop.4',
+            '@progress/kendo-angular-intl': '19.3.0-develop.40',
             '@progress/kendo-drawing': '^1.17.2',
             // Peer dependency of icons
             '@progress/kendo-svg-icons': '^4.0.0'