@progress/kendo-angular-listbox 21.0.0-develop.2 → 21.0.0-develop.21

package/codemods/v21/listbox-actionclick.js

@@ -0,0 +1,52 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const utils_1 = require("../utils");
+const fs = __importStar(require("fs"));
+const index_1 = require("../template-transformer/index");
+function default_1(fileInfo, api) {
+    const filePath = fileInfo.path;
+    if (filePath.endsWith('.html')) {
+        if ((0, utils_1.hasKendoInTemplate)(fileInfo.source)) {
+            let updatedContent = fileInfo.source;
+            updatedContent = (0, utils_1.htmlEventTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-listbox', 'actionClick', 'action');
+            // Only write to file once after all transformations
+            fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        }
+        return;
+    }
+    const j = api.jscodeshift;
+    const rootSource = j(fileInfo.source);
+    (0, index_1.templateTransformer)(rootSource, j, (root) => {
+        (0, utils_1.templateEventTransformer)(root, 'kendo-listbox', 'actionClick', 'action');
+    });
+    (0, utils_1.tsPropertyTransformer)(fileInfo.source, rootSource, j, 'ListBoxComponent', 'actionClick', 'action');
+    return rootSource.toSource();
+}

package/codemods/v21/listbox-selectedindex.js

@@ -0,0 +1,125 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+function default_1(fileInfo, api) {
+    const filePath = fileInfo.path;
+    if (filePath.endsWith('.html')) {
+        // HTML transformations not needed for this migration
+        return;
+    }
+    const j = api.jscodeshift;
+    const rootSource = j(fileInfo.source);
+    tsSelectedIndexTransformer(fileInfo.source, rootSource, j, 'ListBoxComponent');
+    return rootSource.toSource();
+}
+/**
+ * Custom transformer to convert selectedIndex property access to selectedIndices[0]
+ * for ListBoxComponent instances
+ */
+const tsSelectedIndexTransformer = (source, root, j, componentType) => {
+    if (source.includes(componentType)) {
+        // Find all class properties that are of type ListBoxComponent
+        const properties = new Set();
+        // Find properties with type annotations
+        root.find(j.ClassProperty, {
+            typeAnnotation: {
+                typeAnnotation: {
+                    typeName: {
+                        name: componentType,
+                    },
+                },
+            },
+        }).forEach((path) => {
+            if (path.node.key.type === 'Identifier') {
+                properties.add(path.node.key.name);
+            }
+        });
+        // Find function parameters of type componentType
+        const parameters = new Set();
+        root.find(j.FunctionDeclaration).forEach((path) => {
+            if (path.node.params) {
+                path.node.params.forEach((param) => {
+                    if (param.type === 'Identifier' &&
+                        param.typeAnnotation &&
+                        param.typeAnnotation.typeAnnotation?.type === 'TSTypeReference' &&
+                        param.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                        param.typeAnnotation.typeAnnotation.typeName.name === componentType) {
+                        parameters.add(param.name);
+                    }
+                });
+            }
+        });
+        // Also check method declarations in classes
+        root.find(j.ClassMethod).forEach((path) => {
+            if (path.node.params) {
+                path.node.params.forEach((param) => {
+                    if (param.type === 'Identifier' &&
+                        param.typeAnnotation &&
+                        param.typeAnnotation.typeAnnotation?.type === 'TSTypeReference' &&
+                        param.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                        param.typeAnnotation.typeAnnotation.typeName.name === componentType) {
+                        parameters.add(param.name);
+                    }
+                });
+            }
+        });
+        // Also check arrow functions
+        root.find(j.ArrowFunctionExpression).forEach((path) => {
+            if (path.node.params) {
+                path.node.params.forEach((param) => {
+                    if (param.type === 'Identifier' &&
+                        param.typeAnnotation &&
+                        param.typeAnnotation.typeAnnotation?.type === 'TSTypeReference' &&
+                        param.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                        param.typeAnnotation.typeAnnotation.typeName.name === componentType) {
+                        parameters.add(param.name);
+                    }
+                });
+            }
+        });
+        // Find local variable declarations of type componentType
+        const localVariables = new Set();
+        root.find(j.VariableDeclarator).forEach((path) => {
+            if (path.node.id.type === 'Identifier' &&
+                path.node.id.typeAnnotation &&
+                path.node.id.typeAnnotation.typeAnnotation?.type === 'TSTypeReference' &&
+                path.node.id.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                path.node.id.typeAnnotation.typeAnnotation.typeName.name === componentType) {
+                localVariables.add(path.node.id.name);
+            }
+        });
+        // Find all member expressions where selectedIndex property is accessed on any ListBoxComponent instance
+        root.find(j.MemberExpression, {
+            property: {
+                type: 'Identifier',
+                name: 'selectedIndex',
+            },
+        })
+            .filter((path) => {
+            // Filter to only include accesses on properties that are ListBoxComponent instances
+            if (path.node.object.type === 'MemberExpression' && path.node.object.property.type === 'Identifier') {
+                // handle properties of this
+                if (path.node.object.object.type === 'ThisExpression' &&
+                    properties.has(path.node.object.property.name)) {
+                    return true;
+                }
+            }
+            // Handle function parameters and local variables
+            if (path.node.object.type === 'Identifier') {
+                return parameters.has(path.node.object.name) || localVariables.has(path.node.object.name);
+            }
+            return false;
+        })
+            .forEach((path) => {
+            // Replace selectedIndex with selectedIndices[0]
+            const memberExpression = j.memberExpression(j.memberExpression(path.node.object, j.identifier('selectedIndices')), j.numericLiteral(0), true // computed property access (uses brackets)
+            );
+            // Replace the entire member expression
+            j(path).replaceWith(memberExpression);
+        });
+    }
+};

package/codemods/v21/listbox-toolbar.js

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const utils_1 = require("../utils");
+function default_1(fileInfo, api) {
+    const j = api.jscodeshift;
+    const rootSource = j(fileInfo.source);
+    (0, utils_1.tsInterfaceTransformer)(fileInfo, rootSource, j, '@progress/kendo-angular-listbox', 'Toolbar', 'ListBoxToolbarConfig');
+    return rootSource.toSource();
+}

package/data-binding.directive.d.ts

@@ -2,7 +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 { OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { NgZone, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { ListBoxComponent } from './listbox.component';
 import * as i0 from "@angular/core";
 /**
@@ -29,16 +29,17 @@ import * as i0 from "@angular/core";
  */
 export declare class DataBindingDirective implements OnChanges, OnDestroy {
     private listbox;
+    private zone;
     /**
      * Specifies the `ListBoxComponent` instance with which the current ListBox connects.
      * When you link two listboxes through this input, you can transfer items between them.
      */
     connectedWith: ListBoxComponent;
-    private actionClickSub;
+    private actionSub;
     private selectedBoxSub;
     private connectedWithSub;
     private selectedBox;
-    constructor(listbox: ListBoxComponent);
+    constructor(listbox: ListBoxComponent, zone: NgZone);
     /**
      * @hidden
      */
@@ -48,8 +49,8 @@ export declare class DataBindingDirective implements OnChanges, OnDestroy {
      */
     ngOnDestroy(): void;
     private moveVertically;
-    private removeItem;
-    private transferItem;
+    private removeSelectedItems;
+    private transferSelectedItems;
     private transferAll;
     static ɵfac: i0.ɵɵFactoryDeclaration<DataBindingDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DataBindingDirective, "[kendoListBoxDataBinding]", never, { "connectedWith": { "alias": "connectedWith"; "required": false; }; }, {}, never, never, true, never>;

package/esm2022/data-binding.directive.mjs

@@ -2,9 +2,10 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, Input } from '@angular/core';
+import { Directive, Input, NgZone } from '@angular/core';
 import { isChanged } from '@progress/kendo-angular-common';
 import { Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
 import { ListBoxComponent } from './listbox.component';
 import { isPresent } from './util';
 import * as i0 from "@angular/core";
@@ -33,22 +34,24 @@ import * as i1 from "./listbox.component";
  */
 export class DataBindingDirective {
     listbox;
+    zone;
     /**
      * Specifies the `ListBoxComponent` instance with which the current ListBox connects.
      * When you link two listboxes through this input, you can transfer items between them.
      */
     connectedWith;
-    actionClickSub = new Subscription();
+    actionSub = new Subscription();
     selectedBoxSub = new Subscription();
     connectedWithSub = new Subscription();
     selectedBox;
-    constructor(listbox) {
+    constructor(listbox, zone) {
         this.listbox = listbox;
+        this.zone = zone;
         this.selectedBox = this.listbox;
         this.connectedWithSub.add(this.listbox.getChildListbox.subscribe(() => {
             this.listbox.childListbox = this.connectedWith;
         }));
-        this.actionClickSub.add(this.listbox.actionClick.subscribe((actionName) => {
+        this.actionSub.add(this.listbox.action.subscribe((actionName) => {
             switch (actionName) {
                 case 'moveUp': {
                     this.moveVertically('up');
@@ -59,11 +62,11 @@ export class DataBindingDirective {
                     break;
                 }
                 case 'transferFrom': {
-                    this.transferItem(this.connectedWith, this.listbox);
+                    this.transferSelectedItems(this.connectedWith, this.listbox);
                     break;
                 }
                 case 'transferTo': {
-                    this.transferItem(this.listbox, this.connectedWith);
+                    this.transferSelectedItems(this.listbox, this.connectedWith);
                     break;
                 }
                 case 'transferAllTo': {
@@ -75,7 +78,7 @@ export class DataBindingDirective {
                     break;
                 }
                 case 'remove': {
-                    this.removeItem();
+                    this.removeSelectedItems();
                     break;
                 }
                 default: {
@@ -107,9 +110,9 @@ export class DataBindingDirective {
      * @hidden
      */
     ngOnDestroy() {
-        if (this.actionClickSub) {
-            this.actionClickSub.unsubscribe();
-            this.actionClickSub = null;
+        if (this.actionSub) {
+            this.actionSub.unsubscribe();
+            this.actionSub = null;
         }
         if (this.selectedBoxSub) {
             this.selectedBoxSub.unsubscribe();
@@ -117,38 +120,73 @@ export class DataBindingDirective {
         }
     }
     moveVertically(dir) {
-        const index = this.selectedBox.selectedIndex;
-        if (!isPresent(index)) {
+        const selectedIndices = this.selectedBox.selectedIndices;
+        if (!isPresent(selectedIndices) || selectedIndices.length === 0) {
             return;
         }
-        const topReached = dir === 'up' && index <= 0;
-        const bottomReached = dir === 'down' && index >= this.selectedBox.data.length - 1;
+        const sortedIndices = [...selectedIndices].sort((a, b) => a - b);
+        const topIndex = sortedIndices[0];
+        const bottomIndex = sortedIndices[sortedIndices.length - 1];
+        const topReached = dir === 'up' && topIndex <= 0;
+        const bottomReached = dir === 'down' && bottomIndex >= this.selectedBox.data.length - 1;
         if (topReached || bottomReached) {
             return;
         }
-        const newIndex = dir === 'up' ? index - 1 : index + 1;
+        const data = this.selectedBox.data;
+        const newSelectedIndices = [];
+        if (dir === 'up') {
+            for (const index of sortedIndices) {
+                const newIndex = index - 1;
+                [data[newIndex], data[index]] = [data[index], data[newIndex]];
+                newSelectedIndices.push(newIndex);
+            }
+        }
+        else {
+            for (let i = sortedIndices.length - 1; i >= 0; i--) {
+                const index = sortedIndices[i];
+                const newIndex = index + 1;
+                [data[newIndex], data[index]] = [data[index], data[newIndex]];
+                newSelectedIndices.push(newIndex);
+            }
+        }
+        newSelectedIndices.sort((a, b) => a - b);
+        this.selectedBox.selectionService.setSelectedIndices(newSelectedIndices);
         const navigation = this.selectedBox.keyboardNavigationService;
-        navigation.focusedListboxItemIndex = navigation.selectedListboxItemIndex = newIndex;
-        [this.selectedBox.data[newIndex], this.selectedBox.data[index]] = [this.selectedBox.data[index], this.selectedBox.data[newIndex]];
-        this.selectedBox.selectionService.select(newIndex);
+        const currentFocusedIndex = navigation.focusedListboxItemIndex;
+        const focusedItemIndexInSelection = sortedIndices.indexOf(currentFocusedIndex);
+        let newFocusIndex;
+        if (focusedItemIndexInSelection !== -1) {
+            newFocusIndex = newSelectedIndices[focusedItemIndexInSelection];
+        }
+        else {
+            newFocusIndex = dir === 'up' ? topIndex - 1 : bottomIndex + 1;
+        }
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            const listboxItems = this.selectedBox.listboxItems.toArray();
+            const previousItem = listboxItems[currentFocusedIndex]?.nativeElement;
+            const currentItem = listboxItems[newFocusIndex]?.nativeElement;
+            navigation.changeTabindex(previousItem, currentItem);
+            navigation.focusedListboxItemIndex = newFocusIndex;
+            navigation.selectedListboxItemIndex = newFocusIndex;
+        });
     }
-    removeItem() {
-        const index = this.selectedBox.selectedIndex;
-        if (!isPresent(index)) {
+    removeSelectedItems() {
+        const itemIndices = this.selectedBox.selectedIndices;
+        if (!isPresent(itemIndices) || itemIndices.length === 0) {
             return;
         }
-        this.selectedBox.data.splice(index, 1);
+        this.selectedBox.data = this.selectedBox.data.filter((_, index) => !itemIndices.includes(index));
         this.selectedBox.selectionService.clearSelection();
     }
-    transferItem(source, target) {
-        const item = source && source.data[source.selectedIndex];
-        if (!item || !target || !source) {
+    transferSelectedItems(source, target) {
+        const selectedIndices = source?.data && source?.selectedIndices;
+        if (!target || !source || !isPresent(selectedIndices) || selectedIndices.length === 0) {
             return;
         }
-        target.data.push(item);
-        source.data.splice(source.selectedIndex, 1);
+        target.data.push(...selectedIndices.map(index => source.data[index]));
+        source.data = source.data.filter((_, index) => !selectedIndices.includes(index));
         source.clearSelection();
-        target.selectItem(target.data.length - 1);
+        target.select([target.data.length - 1]);
         this.selectedBox = target;
     }
     transferAll(source, target) {
@@ -156,10 +194,10 @@ export class DataBindingDirective {
             return;
         }
         target.data.splice(target.data.length, 0, ...source.data.splice(0, source.data.length));
-        target.selectItem(target.data.length - 1);
+        target.select([target.data.length - 1]);
         this.selectedBox = target;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.ListBoxComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.ListBoxComponent }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DataBindingDirective, isStandalone: true, selector: "[kendoListBoxDataBinding]", inputs: { connectedWith: "connectedWith" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataBindingDirective, decorators: [{
@@ -168,6 +206,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[kendoListBoxDataBinding]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1.ListBoxComponent }], propDecorators: { connectedWith: [{
+        }], ctorParameters: () => [{ type: i1.ListBoxComponent }, { type: i0.NgZone }], propDecorators: { connectedWith: [{
                 type: Input
             }] } });

package/esm2022/item-selectable.directive.mjs

@@ -20,7 +20,12 @@ export class ItemSelectableDirective {
     }
     onClick(event) {
         event.stopPropagation();
-        this.selectionService.select(this.index);
+        const ctrlKey = event.ctrlKey || event.metaKey;
+        const shiftKey = event.shiftKey;
+        if (shiftKey) {
+            event.preventDefault();
+        }
+        this.selectionService.select(this.index, ctrlKey, shiftKey);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemSelectableDirective, deps: [{ token: i1.ListBoxSelectionService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ItemSelectableDirective, isStandalone: true, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "mousedown": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });

package/esm2022/keyboard-navigation.service.mjs

@@ -22,6 +22,8 @@ export class KeyboardNavigationService {
     onTransferAllEvent = new EventEmitter();
     onShiftSelectedItem = new EventEmitter();
     onSelectionChange = new EventEmitter();
+    onSelectAll = new EventEmitter();
+    onSelectToEnd = new EventEmitter();
     constructor(renderer, zone) {
         this.renderer = renderer;
         this.zone = zone;
@@ -48,6 +50,17 @@ export class KeyboardNavigationService {
                 this.onDeleteEvent.emit(this.selectedListboxItemIndex);
             }
         }
+        if (ctrlOrMetaKey && (event.key === 'a' || event.key === 'A')) {
+            event.preventDefault();
+            this.onSelectAll.emit();
+            return;
+        }
+        if (ctrlOrMetaKey && event.shiftKey && (keyCode === Keys.Home || keyCode === Keys.End)) {
+            event.preventDefault();
+            const direction = keyCode === Keys.Home ? 'home' : 'end';
+            this.onSelectToEnd.emit({ direction });
+            return;
+        }
         const isTargetListboxItem = listboxItems.find(elem => elem.nativeElement === target);
         if (isTargetListboxItem) {
             let isTransferToolVisible;
@@ -64,9 +77,7 @@ export class KeyboardNavigationService {
                 this.onSelectChange(event, listboxItems);
             }
             else if (keyCode === Keys.Space) {
-                if (this.selectedListboxItemIndex !== this.focusedListboxItemIndex) {
-                    this.onSpaceKey(event, listboxItems);
-                }
+                this.onSpaceKey(event, listboxItems);
             }
         }
     }
@@ -90,18 +101,30 @@ export class KeyboardNavigationService {
         }
         const offset = dir === 'up' ? -1 : 1;
         this.focusedToolIndex += offset;
-        const prevItem = toolsRef[this.focusedToolIndex + (offset * -1)].element;
-        const currentItem = toolsRef[this.focusedToolIndex].element;
+        const prevItem = toolsRef[this.focusedToolIndex + (offset * -1)]?.element;
+        const currentItem = toolsRef[this.focusedToolIndex]?.element;
         this.changeTabindex(prevItem, currentItem);
     }
     onSpaceKey(event, listboxItems) {
         event.stopImmediatePropagation();
         event.preventDefault();
-        const previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
-        const currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
-        this.changeTabindex(previousItem, currentItem);
-        this.onSelectionChange.emit({ index: this.focusedListboxItemIndex, prevIndex: this.selectedListboxItemIndex });
-        this.selectedListboxItemIndex = this.focusedListboxItemIndex;
+        event.stopPropagation();
+        const ctrlKey = event.ctrlKey || event.metaKey;
+        const shiftKey = event.shiftKey;
+        if (this.selectedListboxItemIndex !== this.focusedListboxItemIndex) {
+            const previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
+            const currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
+            this.changeTabindex(previousItem, currentItem);
+        }
+        this.onSelectionChange.emit({
+            index: this.focusedListboxItemIndex,
+            prevIndex: this.selectedListboxItemIndex,
+            ctrlKey,
+            shiftKey
+        });
+        if (!shiftKey) {
+            this.selectedListboxItemIndex = this.focusedListboxItemIndex;
+        }
     }
     onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar, listboxItems) {
         event.preventDefault();
@@ -118,6 +141,10 @@ export class KeyboardNavigationService {
             this.changeFocusedItem(dir, listboxItems);
             return;
         }
+        if (event.shiftKey) {
+            this.onShiftArrow(dir, listboxItems);
+            return;
+        }
         dir === 'moveUp' ? this.onArrowUp(listboxItems) : this.onArrowDown(listboxItems);
         this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex: this.focusedListboxItemIndex });
         this.focusedListboxItemIndex = this.selectedListboxItemIndex;
@@ -151,7 +178,8 @@ export class KeyboardNavigationService {
             this.selectedListboxItemIndex = this.focusedListboxItemIndex;
         }
         this.changeTabindex(previousItem, currentItem, !!currentItem);
-        this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex });
+        const ctrlKey = event.ctrlKey || event.metaKey;
+        this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex, ctrlKey });
     }
     onF10Key(tools) {
         if (this.focusedToolIndex && this.focusedToolIndex > -1) {
@@ -253,14 +281,36 @@ export class KeyboardNavigationService {
         });
     }
     changeFocusedItem(dir, listboxItems) {
-        listboxItems[this.focusedListboxItemIndex].nativeElement.blur();
+        const previousIndex = this.focusedListboxItemIndex;
+        const previousItem = listboxItems[previousIndex].nativeElement;
         if (this.focusedListboxItemIndex > 0 && dir === 'moveUp') {
             this.focusedListboxItemIndex -= 1;
         }
         else if (this.focusedListboxItemIndex < listboxItems.length - 1 && dir === 'moveDown') {
             this.focusedListboxItemIndex += 1;
         }
-        listboxItems[this.focusedListboxItemIndex].nativeElement.focus();
+        const currentItem = listboxItems[this.focusedListboxItemIndex].nativeElement;
+        this.changeTabindex(previousItem, currentItem);
+    }
+    onShiftArrow(dir, listboxItems) {
+        const previousFocusIndex = this.focusedListboxItemIndex;
+        if (dir === 'moveUp' && this.focusedListboxItemIndex > 0) {
+            this.focusedListboxItemIndex -= 1;
+        }
+        else if (dir === 'moveDown' && this.focusedListboxItemIndex < listboxItems.length - 1) {
+            this.focusedListboxItemIndex += 1;
+        }
+        if (previousFocusIndex !== this.focusedListboxItemIndex) {
+            const previousItem = listboxItems[previousFocusIndex]?.nativeElement;
+            const currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
+            this.changeTabindex(previousItem, currentItem);
+            this.onSelectionChange.emit({
+                index: this.focusedListboxItemIndex,
+                prevIndex: this.selectedListboxItemIndex,
+                shiftKey: true
+            });
+            this.selectedListboxItemIndex = this.focusedListboxItemIndex;
+        }
     }
     onArrowDown(listboxItems) {
         if (this.selectedListboxItemIndex < listboxItems.length - 1) {