@progress/kendo-angular-listbox 21.0.0-develop.9 → 21.0.1-develop.1

package/esm2022/keyboard-navigation.service.mjs

@@ -22,11 +22,13 @@ 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;
     }
-    onKeyDown(event, toolsRef, toolbar, childListbox, parentListbox, listboxItems) {
+    onKeyDown(event, toolsRef, toolbar, childListbox, parentListbox, listboxItems, currentListbox) {
         const target = event.target;
         const keyCode = normalizeNumpadKeys(event);
         const ctrlOrMetaKey = event.ctrlKey || event.metaKey;
@@ -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;
@@ -55,7 +68,7 @@ export class KeyboardNavigationService {
                 isTransferToolVisible = activeToolbar.some(tool => tool.name.startsWith('transfer'));
             }
             if ((keyCode === Keys.ArrowRight || keyCode === Keys.ArrowLeft) && ctrlOrMetaKey && isTransferToolVisible) {
-                this.onArrowLeftOrRight(keyCode, parentListbox, childListbox, event, listboxItems);
+                this.onArrowLeftOrRight(keyCode, parentListbox, childListbox, event, listboxItems, currentListbox);
             }
             else if ((keyCode === Keys.ArrowUp || keyCode === Keys.ArrowDown)) {
                 this.onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar, listboxItems);
@@ -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,17 +101,27 @@ 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 });
+        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
+        });
         this.selectedListboxItemIndex = this.focusedListboxItemIndex;
     }
     onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar, listboxItems) {
@@ -118,17 +139,24 @@ 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;
     }
-    onArrowLeftOrRight(keyCode, parentListbox, childListbox, event, listboxItems) {
+    onArrowLeftOrRight(keyCode, parentListbox, childListbox, event, listboxItems, currentListbox) {
         event.preventDefault();
         if (event.shiftKey) {
             this.transferAllItems(keyCode, childListbox, parentListbox);
             return;
         }
-        if (this.selectedListboxItemIndex >= 0) {
+        const isArrowRight = keyCode === Keys.ArrowRight;
+        const sourceListbox = isArrowRight ? currentListbox : childListbox || parentListbox?.childListbox;
+        const hasSelection = sourceListbox?.selectedIndices && sourceListbox.selectedIndices.length > 0;
+        if (hasSelection) {
             this.transferItem(keyCode, childListbox, parentListbox, listboxItems);
         }
     }
@@ -151,7 +179,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,29 +282,49 @@ 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) {
-            const offset = this.selectedListboxItemIndex ? this.selectedListboxItemIndex : this.focusedListboxItemIndex;
-            this.selectedListboxItemIndex = offset + 1;
-            const previousItem = listboxItems[this.selectedListboxItemIndex - 1]?.nativeElement;
+        if (this.focusedListboxItemIndex < listboxItems.length - 1) {
+            this.selectedListboxItemIndex = this.focusedListboxItemIndex + 1;
+            const previousItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
             const currentItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
             this.changeTabindex(previousItem, currentItem);
         }
     }
     onArrowUp(listboxItems) {
-        if (this.selectedListboxItemIndex > 0 || this.focusedListboxItemIndex > 0) {
-            const offset = this.selectedListboxItemIndex ? this.selectedListboxItemIndex : this.focusedListboxItemIndex;
-            this.selectedListboxItemIndex = offset - 1;
-            const previousItem = listboxItems[this.selectedListboxItemIndex + 1]?.nativeElement;
+        if (this.focusedListboxItemIndex > 0) {
+            this.selectedListboxItemIndex = this.focusedListboxItemIndex - 1;
+            const previousItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
             const currentItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
             this.changeTabindex(previousItem, currentItem);
         }

package/esm2022/listbox.component.mjs

@@ -20,7 +20,7 @@ import { caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 import { ItemSelectableDirective } from './item-selectable.directive';
 import { NgIf, NgFor } from '@angular/common';
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
-import { TemplateContextDirective } from '@progress/kendo-angular-common';
+import { isPresent, TemplateContextDirective } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "./keyboard-navigation.service";
 import * as i2 from "./selection.service";
@@ -62,7 +62,7 @@ export class ListBoxComponent {
     renderer;
     zone;
     localization;
-    changeDetector;
+    cdr;
     /**
      * @hidden
      */
@@ -95,6 +95,18 @@ export 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.
      *
@@ -117,6 +129,8 @@ export 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;
@@ -155,7 +169,7 @@ export class ListBoxComponent {
     /**
      * Fires when you click a ListBox item.
      */
-    actionClick = new EventEmitter();
+    action = new EventEmitter();
     /**
      * @hidden
      */
@@ -175,7 +189,7 @@ export class ListBoxComponent {
     /**
      * @hidden
      */
-    selectedTools = allTools;
+    selectedTools = [];
     /**
      * @hidden
      */
@@ -203,15 +217,16 @@ export 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, cdr) {
         this.keyboardNavigationService = keyboardNavigationService;
         this.selectionService = selectionService;
         this.hostElement = hostElement;
         this.renderer = renderer;
         this.zone = zone;
         this.localization = localization;
-        this.changeDetector = changeDetector;
+        this.cdr = cdr;
         validatePackage(packageMetadata);
         this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
         this.setSizingClass(this.size);
@@ -224,9 +239,6 @@ export 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';
         });
@@ -250,11 +262,12 @@ export class ListBoxComponent {
         const isListboxChild = this.parentListbox && !this.childListbox;
         const isListboxParentAndChild = !!(this.parentListbox && this.childListbox);
         const isListboxParent = !!(this.childListbox || (!this.childListbox && !this.parentListbox));
+        this.shouldFireFocusIn = false;
         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);
@@ -266,12 +279,27 @@ export class ListBoxComponent {
             const currentTool = toolsRef[navService.focusedToolIndex]?.element;
             navService.changeTabindex(prevTool, currentTool);
         }
+        this.cdr.markForCheck();
+        this.zone.runOutsideAngular(() => setTimeout(() => {
+            this.shouldFireFocusIn = true;
+        }));
+    }
+    /**
+     * 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.
@@ -280,10 +308,10 @@ export 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
@@ -326,36 +354,84 @@ export 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(this.selectionService.rangeSelectionTargetIndex)
+                ? this.selectionService.rangeSelectionTargetIndex
+                : this.selectionService.lastSelectedOrUnselectedIndex;
+            if (isPresent(newFocusIndex)) {
+                const listboxItems = this.listboxItems.toArray();
+                const previousItem = listboxItems[navService.focusedListboxItemIndex]?.nativeElement;
+                const currentItem = listboxItems[newFocusIndex]?.nativeElement;
+                if (previousItem && currentItem) {
+                    navService.changeTabindex(previousItem, currentItem, false);
+                    navService.focusedListboxItemIndex = newFocusIndex;
+                    navService.selectedListboxItemIndex = newFocusIndex;
+                }
+            }
+            this.cdr.markForCheck();
+            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.cdr.markForCheck();
+            }
+        }));
+        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.cdr.markForCheck();
+                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(this.renderer.listen(hostEl, 'keydown', (event) => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox, this.listboxItems.toArray(), this)));
+        this.subs.add(navService.onSelectionChange.subscribe((event) => {
+            const { index, ctrlKey, shiftKey } = event;
+            this.selectionService.select(index, ctrlKey, shiftKey);
         }));
     }
     onFocusIn(event) {
@@ -366,8 +442,15 @@ export 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');
@@ -409,17 +492,20 @@ export 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) => {
@@ -435,7 +521,7 @@ export class ListBoxComponent {
         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: i1.KeyboardNavigationService }, { token: i2.ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.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 ɵ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,
@@ -502,16 +588,16 @@ export 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)"
                         >
@@ -609,16 +695,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)"
                         >
@@ -669,6 +755,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['tools']
             }], textField: [{
                 type: Input
+            }], selectable: [{
+                type: Input
             }], data: [{
                 type: Input
             }], size: [{
@@ -683,7 +771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], selectionChange: [{
                 type: Output
-            }], actionClick: [{
+            }], action: [{
                 type: Output
             }], getChildListbox: [{
                 type: Output

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1761910558,
-    version: '21.0.0-develop.9',
+    publishDate: 1762953613,
+    version: '21.0.1-develop.1',
     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'
 };

package/esm2022/selection-mode.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};