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

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

@@ -9,7 +9,7 @@ import { Subscription } from 'rxjs';
 import { getter } from '@progress/kendo-common';
 import { caretAltUpIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, caretDoubleAltRightIcon, caretDoubleAltLeftIcon, xIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { normalizeNumpadKeys, Keys, TemplateContextDirective, isChanged, ResizeBatchService } from '@progress/kendo-angular-common';
+import { normalizeNumpadKeys, Keys, isPresent as isPresent$1, TemplateContextDirective, isChanged, ResizeBatchService } from '@progress/kendo-angular-common';
 import { take } from 'rxjs/operators';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -25,8 +25,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1761753096,
-    version: '21.0.0-develop.2',
+    publishDate: 1762427032,
+    version: '21.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -34,17 +34,138 @@ const packageMetadata = {
  * @hidden
  */
 class ListBoxSelectionService {
+    selectedIndices = [];
+    selectionMode = 'single';
+    lastSelectedOrUnselectedIndex = null;
+    rangeSelectionTargetIndex = null;
+    rangeSelectionAnchorIndex = null;
     onSelect = new EventEmitter();
-    selectedIndex = null;
-    select(index) {
-        this.onSelect.next({ index: index, prevIndex: this.selectedIndex });
-        this.selectedIndex = index;
+    select(index, ctrlKey = false, shiftKey = false) {
+        const previousSelection = [...this.selectedIndices];
+        let selectedIndices = [];
+        let deselectedIndices = null;
+        const previousTargetIndex = this.rangeSelectionTargetIndex;
+        if (this.selectionMode === 'single') {
+            if (ctrlKey) {
+                const isSelected = this.isSelected(index);
+                if (isSelected) {
+                    this.selectedIndices = [];
+                    deselectedIndices = [index];
+                }
+                else {
+                    this.selectedIndices = [index];
+                    selectedIndices = [index];
+                    if (previousSelection.length > 0) {
+                        deselectedIndices = previousSelection;
+                    }
+                }
+                this.lastSelectedOrUnselectedIndex = index;
+            }
+            else {
+                this.selectedIndices = [index];
+                selectedIndices = [index];
+                this.lastSelectedOrUnselectedIndex = index;
+                this.rangeSelectionAnchorIndex = index;
+                if (previousSelection.length > 0 && previousSelection[0] !== index) {
+                    deselectedIndices = previousSelection;
+                }
+            }
+        }
+        else if (this.selectionMode === 'multiple') {
+            if (shiftKey) {
+                let anchorIndex = this.rangeSelectionAnchorIndex ?? this.lastSelectedOrUnselectedIndex ?? 0;
+                if (index === anchorIndex) {
+                    this.selectedIndices = [anchorIndex];
+                    this.rangeSelectionTargetIndex = index;
+                    selectedIndices = this.selectedIndices.filter(i => !previousSelection.includes(i));
+                    const nowDeselected = previousSelection.filter(i => !this.selectedIndices.includes(i));
+                    deselectedIndices = nowDeselected.length > 0 ? nowDeselected : null;
+                }
+                else {
+                    if (previousTargetIndex !== null && previousTargetIndex !== anchorIndex) {
+                        const previousDirection = previousTargetIndex > anchorIndex ? 'down' : 'up';
+                        const currentDirection = index > anchorIndex ? 'down' : 'up';
+                        if (previousDirection !== currentDirection) {
+                            this.rangeSelectionAnchorIndex = previousTargetIndex;
+                            anchorIndex = previousTargetIndex;
+                        }
+                    }
+                    const startIndex = Math.min(anchorIndex, index);
+                    const endIndex = Math.max(anchorIndex, index);
+                    this.selectedIndices = [];
+                    for (let i = startIndex; i <= endIndex; i++) {
+                        this.selectedIndices.push(i);
+                    }
+                    this.rangeSelectionTargetIndex = index;
+                    selectedIndices = this.selectedIndices.filter(i => !previousSelection.includes(i));
+                    const nowDeselected = previousSelection.filter(i => !this.selectedIndices.includes(i));
+                    deselectedIndices = nowDeselected.length > 0 ? nowDeselected : null;
+                }
+            }
+            else if (ctrlKey) {
+                const indexInSelection = this.selectedIndices.indexOf(index);
+                if (indexInSelection === -1) {
+                    this.selectedIndices.push(index);
+                    selectedIndices = [index];
+                }
+                else {
+                    this.selectedIndices.splice(indexInSelection, 1);
+                    deselectedIndices = [index];
+                }
+                this.lastSelectedOrUnselectedIndex = index;
+                this.rangeSelectionAnchorIndex = index;
+                this.rangeSelectionTargetIndex = index;
+            }
+            else {
+                this.selectedIndices = [index];
+                selectedIndices = [index];
+                this.lastSelectedOrUnselectedIndex = index;
+                this.rangeSelectionAnchorIndex = index;
+                this.rangeSelectionTargetIndex = index;
+                const nowDeselected = previousSelection.filter(i => i !== index);
+                deselectedIndices = nowDeselected.length > 0 ? nowDeselected : null;
+            }
+        }
+        this.onSelect.next({
+            selectedIndices: selectedIndices.length > 0 ? selectedIndices : null,
+            deselectedIndices
+        });
+    }
+    selectRange(targetIndex) {
+        const anchorIndex = this.lastSelectedOrUnselectedIndex ?? 0;
+        const startIndex = Math.min(anchorIndex, targetIndex);
+        const endIndex = Math.max(anchorIndex, targetIndex);
+        this.selectedIndices = [];
+        for (let i = startIndex; i <= endIndex; i++) {
+            this.selectedIndices.push(i);
+        }
+    }
+    setSelectedIndices(indices) {
+        this.selectedIndices = [...indices];
+    }
+    addToSelectedIndices(index) {
+        if (this.selectionMode === 'single') {
+            this.selectedIndices = [index];
+        }
+        else if (this.selectedIndices.indexOf(index) === -1) {
+            this.selectedIndices = [...this.selectedIndices, index];
+        }
+    }
+    selectAll(totalItems) {
+        if (this.selectionMode === 'multiple') {
+            this.selectedIndices = Array.from({ length: totalItems }, (_, i) => i);
+        }
+    }
+    areAllSelected(totalItems) {
+        return this.selectedIndices.length === totalItems && totalItems > 0;
     }
     isSelected(index) {
-        return index === this.selectedIndex;
+        return this.selectedIndices.indexOf(index) !== -1;
     }
     clearSelection() {
-        this.selectedIndex = null;
+        this.selectedIndices = [];
+        this.lastSelectedOrUnselectedIndex = null;
+        this.rangeSelectionAnchorIndex = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListBoxSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListBoxSelectionService });
@@ -208,6 +329,8 @@ 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;
@@ -234,6 +357,17 @@ 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;
@@ -250,9 +384,7 @@ class KeyboardNavigationService {
                 this.onSelectChange(event, listboxItems);
             }
             else if (keyCode === Keys.Space) {
-                if (this.selectedListboxItemIndex !== this.focusedListboxItemIndex) {
-                    this.onSpaceKey(event, listboxItems);
-                }
+                this.onSpaceKey(event, listboxItems);
             }
         }
     }
@@ -276,18 +408,30 @@ 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();
@@ -304,6 +448,10 @@ 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;
@@ -337,7 +485,8 @@ 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) {
@@ -439,14 +588,36 @@ 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) {
@@ -487,7 +658,12 @@ 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: 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 });
@@ -637,7 +813,6 @@ class ListBoxComponent {
     renderer;
     zone;
     localization;
-    changeDetector;
     /**
      * @hidden
      */
@@ -670,6 +845,18 @@ class ListBoxComponent {
      * Specifies the field of the data item that provides the text content of the nodes.
      */
     textField;
+    /**
+     * Sets the selection mode of the ListBox.
+     *
+     * @default 'single'
+     */
+    set selectable(mode) {
+        this._selectable = mode;
+        this.selectionService.selectionMode = mode;
+    }
+    get selectable() {
+        return this._selectable;
+    }
     /**
      * Specifies the data that the ListBox displays.
      *
@@ -692,6 +879,8 @@ class ListBoxComponent {
     /**
      * Configures the toolbar of the ListBox.
      * Specifies whether to display a toolbar and which tools and position to use.
+     *
+     * @default false
      */
     set toolbar(config) {
         let position = DEFAULT_TOOLBAR_POSITION;
@@ -730,7 +919,7 @@ class ListBoxComponent {
     /**
      * Fires when you click a ListBox item.
      */
-    actionClick = new EventEmitter();
+    action = new EventEmitter();
     /**
      * @hidden
      */
@@ -750,7 +939,7 @@ class ListBoxComponent {
     /**
      * @hidden
      */
-    selectedTools = allTools;
+    selectedTools = [];
     /**
      * @hidden
      */
@@ -778,15 +967,15 @@ class ListBoxComponent {
     localizationSubscription;
     _size = DEFAULT_SIZE;
     subs = new Subscription();
-    shouldFireFocusIn = true;
-    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization, changeDetector) {
+    shouldFireFocusIn = false;
+    _selectable = 'single';
+    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization) {
         this.keyboardNavigationService = keyboardNavigationService;
         this.selectionService = selectionService;
         this.hostElement = hostElement;
         this.renderer = renderer;
         this.zone = zone;
         this.localization = localization;
-        this.changeDetector = changeDetector;
         validatePackage(packageMetadata);
         this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
         this.setSizingClass(this.size);
@@ -799,9 +988,6 @@ class ListBoxComponent {
             // This allows us to know to which parent Listbox the child Listbox is connected to
             this.childListbox.parentListbox = this;
         }
-        if (this.selectedIndex) {
-            this.keyboardNavigationService.focusedToolIndex = this.selectedIndex;
-        }
         this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
@@ -826,10 +1012,10 @@ class ListBoxComponent {
         const isListboxParentAndChild = !!(this.parentListbox && this.childListbox);
         const isListboxParent = !!(this.childListbox || (!this.childListbox && !this.parentListbox));
         if (isListboxChild || (isListboxParentAndChild && isActionTransferFrom)) {
-            this.parentListbox.actionClick.next(actionName);
+            this.parentListbox.action.next(actionName);
         }
         else if (isListboxParent || (isListboxParentAndChild && !isActionTransferFrom)) {
-            this.actionClick.next(actionName);
+            this.action.next(actionName);
         }
         const toolsRef = this.tools.toArray() || this.parentListbox.tools.toArray();
         const focusedToolIndex = toolsRef.findIndex(elem => elem.nativeElement === document.activeElement);
@@ -842,11 +1028,22 @@ class ListBoxComponent {
             navService.changeTabindex(prevTool, currentTool);
         }
     }
+    /**
+     * Selects multiple ListBox nodes programmatically.
+     */
+    select(indices) {
+        const validIndices = indices.filter(index => index >= 0 && index < this.data.length);
+        this.selectionService.setSelectedIndices(validIndices);
+    }
     /**
      * Selects a ListBox node programmatically.
+     *
+     * @hidden
      */
     selectItem(index) {
-        this.selectionService.selectedIndex = index;
+        if (index >= 0 && index < this.data.length) {
+            this.select([index]);
+        }
     }
     /**
      * Clears the ListBox selection programmatically.
@@ -855,10 +1052,10 @@ class ListBoxComponent {
         this.selectionService.clearSelection();
     }
     /**
-     * Gets the index of the currently selected item in the ListBox.
+     * Gets the indexes of the currently selected items in the ListBox.
      */
-    get selectedIndex() {
-        return this.selectionService.selectedIndex;
+    get selectedIndices() {
+        return this.selectionService.selectedIndices;
     }
     /**
      * @hidden
@@ -901,36 +1098,81 @@ class ListBoxComponent {
                     this.caretAltLeftIcon :
                     icon;
     }
-    onClickEvent(prevIndex, index) {
-        this.shouldFireFocusIn = false;
-        this.selectionChange.next({ index, prevIndex: this.keyboardNavigationService.selectedListboxItemIndex });
-        this.keyboardNavigationService.selectedListboxItemIndex = index;
-        this.keyboardNavigationService.focusedListboxItemIndex = index;
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
-            const listboxItems = this.listboxItems.toArray();
-            const previousItem = prevIndex ? listboxItems[prevIndex].nativeElement : listboxItems[0].nativeElement;
-            const currentItem = listboxItems[index].nativeElement;
-            this.keyboardNavigationService.changeTabindex(previousItem, currentItem);
-        });
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
-            this.shouldFireFocusIn = true;
-        });
-    }
     initSubscriptions(navService, hostEl, toolsRef) {
         this.subs.add(navService.onShiftSelectedItem.subscribe((actionToPerform) => this.performAction(actionToPerform)));
         this.subs.add(navService.onTransferAllEvent.subscribe((actionToPerform) => this.performAction(actionToPerform)));
-        this.subs.add(this.selectionService.onSelect.subscribe((e) => this.onClickEvent(e.prevIndex, e.index)));
+        this.subs.add(this.selectionService.onSelect.subscribe((event) => {
+            this.shouldFireFocusIn = false;
+            this.selectionChange.next(event);
+            const newFocusIndex = isPresent$1(this.selectionService.rangeSelectionTargetIndex)
+                ? this.selectionService.rangeSelectionTargetIndex
+                : this.selectionService.lastSelectedOrUnselectedIndex;
+            if (newFocusIndex !== null && newFocusIndex !== undefined) {
+                const listboxItems = this.listboxItems.toArray();
+                const previousItem = listboxItems[navService.focusedListboxItemIndex]?.nativeElement;
+                const currentItem = listboxItems[newFocusIndex]?.nativeElement;
+                if (previousItem !== currentItem && currentItem) {
+                    navService.changeTabindex(previousItem, currentItem, false);
+                    navService.focusedListboxItemIndex = newFocusIndex;
+                    navService.selectedListboxItemIndex = newFocusIndex;
+                }
+            }
+            this.zone.runOutsideAngular(() => setTimeout(() => {
+                this.shouldFireFocusIn = true;
+            }));
+        }));
         this.subs.add(navService.onDeleteEvent.subscribe((index) => this.onDeleteEvent(index, navService)));
         this.subs.add(navService.onMoveSelectedItem.subscribe((dir) => this.performAction(dir)));
+        this.subs.add(navService.onSelectAll.subscribe(() => {
+            if (this.selectable === 'multiple') {
+                const previousSelection = [...this.selectionService.selectedIndices];
+                const allSelected = this.selectionService.areAllSelected(this.data.length);
+                if (allSelected) {
+                    this.selectionService.clearSelection();
+                    this.selectionChange.next({
+                        selectedIndices: null,
+                        deselectedIndices: previousSelection.length > 0 ? previousSelection : null
+                    });
+                }
+                else {
+                    this.selectionService.selectAll(this.data.length);
+                    const selectedIndices = this.selectionService.selectedIndices.filter(i => !previousSelection.includes(i));
+                    this.selectionChange.next({
+                        selectedIndices: selectedIndices.length > 0 ? selectedIndices : null,
+                        deselectedIndices: null
+                    });
+                }
+            }
+        }));
+        this.subs.add(navService.onSelectToEnd.subscribe(({ direction }) => {
+            if (this.selectable === 'multiple') {
+                this.shouldFireFocusIn = false;
+                const previousSelection = [...this.selectionService.selectedIndices];
+                const targetIndex = direction === 'home' ? 0 : this.data.length - 1;
+                this.selectionService.selectRange(targetIndex);
+                const selectedIndices = this.selectionService.selectedIndices.filter(i => !previousSelection.includes(i));
+                const deselectedIndices = previousSelection.filter(i => !this.selectionService.selectedIndices.includes(i));
+                this.selectionChange.next({
+                    selectedIndices: selectedIndices.length > 0 ? selectedIndices : null,
+                    deselectedIndices: deselectedIndices.length > 0 ? deselectedIndices : null
+                });
+                const listboxItems = this.listboxItems.toArray();
+                const currentItem = listboxItems[navService.focusedListboxItemIndex]?.nativeElement;
+                const targetItem = listboxItems[targetIndex]?.nativeElement;
+                navService.changeTabindex(currentItem, targetItem);
+                navService.focusedListboxItemIndex = targetIndex;
+                this.zone.runOutsideAngular(() => setTimeout(() => {
+                    this.shouldFireFocusIn = true;
+                }));
+            }
+        }));
         if (this.listboxElement) {
             this.subs.add(this.renderer.listen(this.listboxElement.nativeElement, 'focusin', (event) => this.onFocusIn(event)));
         }
         this.subs.add(this.renderer.listen(hostEl, 'keydown', (event) => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox, this.listboxItems.toArray())));
-        this.subs.add(navService.onSelectionChange.subscribe((indexes) => {
-            const { prevIndex, index } = indexes;
-            this.selectionService.selectedIndex = index;
-            this.selectionChange.next({ index, prevIndex });
-            this.changeDetector.markForCheck();
+        this.subs.add(navService.onSelectionChange.subscribe((event) => {
+            const { index, ctrlKey, shiftKey } = event;
+            this.selectionService.select(index, ctrlKey, shiftKey);
         }));
     }
     onFocusIn(event) {
@@ -941,8 +1183,15 @@ class ListBoxComponent {
             if (index === -1) {
                 return;
             }
-            this.selectionService.selectedIndex = index;
-            this.selectionChange.next({ index, prevIndex: null });
+            const previousSelection = [...this.selectionService.selectedIndices];
+            this.selectionService.addToSelectedIndices(index);
+            navService.focusedListboxItemIndex = index;
+            navService.selectedListboxItemIndex = index;
+            const deselected = previousSelection.filter(i => i !== index);
+            this.selectionChange.next({
+                selectedIndices: [index],
+                deselectedIndices: deselected.length > 0 ? deselected : null
+            });
             const previousItem = items[navService.selectedListboxItemIndex]?.nativeElement;
             const currentItem = items[index]?.nativeElement;
             this.renderer.setAttribute(previousItem, 'tabindex', '-1');
@@ -984,17 +1233,20 @@ class ListBoxComponent {
         }
     }
     onDeleteEvent(index, navService) {
-        this.selectionService.selectedIndex = index;
+        this.selectionService.addToSelectedIndices(index);
         this.performAction('remove');
         const listboxItems = this.listboxItems.toArray();
         const setIndex = index + 1 === listboxItems.length ?
             { index: index - 1, tabindex: index - 1 } : { index, tabindex: index + 1 };
         navService.changeTabindex(null, listboxItems[setIndex['tabindex']]?.nativeElement);
-        this.selectionChange.next({ index: setIndex['index'], prevIndex: null });
+        this.selectionChange.next({
+            selectedIndices: [setIndex['index']],
+            deselectedIndices: null
+        });
         navService.selectedListboxItemIndex = setIndex['index'];
         navService.focusedListboxItemIndex = setIndex['index'];
         navService.focusedListboxItem = setIndex['index'];
-        this.selectionService.selectedIndex = setIndex['index'];
+        this.selectionService.selectedIndices = [setIndex['index']];
     }
     setToolbarClass(pos) {
         Object.keys(actionsClasses).forEach((className) => {
@@ -1009,8 +1261,8 @@ class ListBoxComponent {
     setSizingClass(size) {
         this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListBoxComponent, deps: [{ token: KeyboardNavigationService }, { token: ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListBoxComponent, isStandalone: true, selector: "kendo-listbox", inputs: { textField: "textField", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", actionClick: "actionClick", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName", "attr.dir": "this.direction" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListBoxComponent, deps: [{ token: KeyboardNavigationService }, { token: ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListBoxComponent, isStandalone: true, selector: "kendo-listbox", inputs: { textField: "textField", selectable: "selectable", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", action: "action", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName", "attr.dir": "this.direction" } }, providers: [
             ListBoxSelectionService,
             KeyboardNavigationService,
             LocalizationService,
@@ -1077,16 +1329,16 @@ class ListBoxComponent {
                         class="k-list-ul"
                         role="listbox"
                         [attr.aria-label]="listboxLabel"
-                        [attr.aria-multiselectable]="false"
+                        [attr.aria-multiselectable]="selectable === 'multiple'"
                     >
                         <li
                             #listboxItems
                             *ngFor="let item of data; let i = index"
                             kendoListBoxItemSelectable
                             class="k-list-item"
-                            [attr.tabindex]="i === 0 ? '0' : '-1'"
+                            [attr.tabindex]="i === keyboardNavigationService.focusedListboxItemIndex ? '0' : '-1'"
                             role="option"
-                            [attr.aria-selected]="selectedIndex === i"
+                            [attr.aria-selected]="selectedIndices.indexOf(i) >= 0"
                             [index]="i"
                             [class.k-disabled]="itemDisabled(item)"
                         >
@@ -1184,16 +1436,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         class="k-list-ul"
                         role="listbox"
                         [attr.aria-label]="listboxLabel"
-                        [attr.aria-multiselectable]="false"
+                        [attr.aria-multiselectable]="selectable === 'multiple'"
                     >
                         <li
                             #listboxItems
                             *ngFor="let item of data; let i = index"
                             kendoListBoxItemSelectable
                             class="k-list-item"
-                            [attr.tabindex]="i === 0 ? '0' : '-1'"
+                            [attr.tabindex]="i === keyboardNavigationService.focusedListboxItemIndex ? '0' : '-1'"
                             role="option"
-                            [attr.aria-selected]="selectedIndex === i"
+                            [attr.aria-selected]="selectedIndices.indexOf(i) >= 0"
                             [index]="i"
                             [class.k-disabled]="itemDisabled(item)"
                         >
@@ -1221,7 +1473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     standalone: true,
                     imports: [LocalizedMessagesDirective, NgIf, NgFor, ButtonComponent, ItemSelectableDirective, TemplateContextDirective]
                 }]
-        }], ctorParameters: () => [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { listboxClassName: [{
+        }], ctorParameters: () => [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { listboxClassName: [{
                 type: HostBinding,
                 args: ['class.k-listbox']
             }], direction: [{
@@ -1244,6 +1496,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['tools']
             }], textField: [{
                 type: Input
+            }], selectable: [{
+                type: Input
             }], data: [{
                 type: Input
             }], size: [{
@@ -1258,7 +1512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], selectionChange: [{
                 type: Output
-            }], actionClick: [{
+            }], action: [{
                 type: Output
             }], getChildListbox: [{
                 type: Output
@@ -1288,22 +1542,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 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');
@@ -1314,11 +1570,11 @@ 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': {
@@ -1330,7 +1586,7 @@ class DataBindingDirective {
                     break;
                 }
                 case 'remove': {
-                    this.removeItem();
+                    this.removeSelectedItems();
                     break;
                 }
                 default: {
@@ -1362,9 +1618,9 @@ 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();
@@ -1372,38 +1628,73 @@ 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) {
@@ -1411,10 +1702,10 @@ 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: ListBoxComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataBindingDirective, deps: [{ token: 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: [{
@@ -1423,7 +1714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[kendoListBoxDataBinding]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: ListBoxComponent }], propDecorators: { connectedWith: [{
+        }], ctorParameters: () => [{ type: ListBoxComponent }, { type: i0.NgZone }], propDecorators: { connectedWith: [{
                 type: Input
             }] } });