@progress/kendo-angular-listbox 12.0.1-develop.3 → 12.0.1-develop.4

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

@@ -24,8 +24,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-listbox',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1683100281,
-    version: '12.0.1-develop.3',
+    publishDate: 1683180097,
+    version: '12.0.1-develop.4',
     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'
 };
 
@@ -37,8 +37,8 @@ class ListBoxSelectionService {
         this.onSelect = new EventEmitter();
         this.selectedIndex = null;
     }
-    select(index, dir) {
-        this.onSelect.next({ index: index, prevIndex: this.selectedIndex, dir });
+    select(index) {
+        this.onSelect.next({ index: index, prevIndex: this.selectedIndex });
         this.selectedIndex = index;
     }
     isSelected(index) {
@@ -206,7 +206,7 @@ class KeyboardNavigationService {
         this.onTransferAllEvent = new EventEmitter();
         this.onShiftSelectedItem = new EventEmitter();
     }
-    onKeyDown(event, toolsRef, toolbar, childListbox, parentListbox) {
+    onKeyDown(event, toolsRef, toolbar, childListbox, parentListbox, listboxItems) {
         const target = event.target;
         const keyCode = event.keyCode;
         const ctrlOrMetaKey = event.ctrlKey || event.metaKey;
@@ -228,29 +228,24 @@ class KeyboardNavigationService {
                 this.onDeleteEvent.emit(this.selectedListboxItemIndex);
             }
         }
-        const isTargetListboxItem = this.listboxItems.find(elem => elem === target);
+        const isTargetListboxItem = listboxItems.find(elem => elem.nativeElement === target);
         if (isTargetListboxItem) {
             let isTransferToolVisible;
             if (activeToolbar) {
                 isTransferToolVisible = activeToolbar.some(tool => tool.name.startsWith('transfer'));
             }
             if ((keyCode === Keys.ArrowRight || keyCode === Keys.ArrowLeft) && ctrlOrMetaKey && isTransferToolVisible) {
-                this.onArrowLeftOrRight(keyCode, parentListbox, childListbox, event);
+                this.onArrowLeftOrRight(keyCode, parentListbox, childListbox, event, listboxItems);
             }
             else if ((keyCode === Keys.ArrowUp || keyCode === Keys.ArrowDown)) {
-                this.onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar);
+                this.onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar, listboxItems);
             }
             else if ((event.metaKey && keyCode === Keys.Enter) || (event.ctrlKey && keyCode === Keys.Space)) {
-                event.stopImmediatePropagation();
-                event.preventDefault();
-                this.onSelectChange();
+                this.onSelectChange(event, listboxItems);
             }
             else if (keyCode === Keys.Space) {
                 if (this.selectedListboxItemIndex !== this.focusedListboxItemIndex) {
-                    const items = this.listboxItems;
-                    this.changeTabindex(items[this.selectedListboxItemIndex], items[this.focusedListboxItemIndex]);
-                    this.selectedListboxItemIndex = this.focusedListboxItemIndex;
-                    this.onSelectionChange.emit(this.selectedListboxItemIndex);
+                    this.onSpaceKey(event, listboxItems);
                 }
             }
         }
@@ -266,9 +261,6 @@ class KeyboardNavigationService {
             currentItem.focus();
         }
     }
-    onFocusIn() {
-        this.onSelectionChange.emit(this.selectedListboxItemIndex);
-    }
     handleToolbarArrows(toolsRef, dir) {
         const topReached = dir === 'up' && this.focusedToolIndex <= 0;
         const bottomReached = dir === 'down' && this.focusedToolIndex >= toolsRef.length - 1;
@@ -281,7 +273,16 @@ class KeyboardNavigationService {
         const currentItem = toolsRef[this.focusedToolIndex].element;
         this.changeTabindex(prevItem, currentItem);
     }
-    onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar) {
+    onSpaceKey(event, listboxItems) {
+        event.stopImmediatePropagation();
+        event.preventDefault();
+        const previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
+        const currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
+        this.changeTabindex(previousItem, currentItem);
+        this.selectedListboxItemIndex = this.focusedListboxItemIndex;
+        this.onSelectionChange.emit(this.selectedListboxItemIndex);
+    }
+    onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar, listboxItems) {
         event.preventDefault();
         const dir = keyCode === Keys.ArrowUp ? 'moveUp' : 'moveDown';
         if (ctrlOrMetaKey) {
@@ -293,31 +294,35 @@ class KeyboardNavigationService {
                 this.onMoveSelectedItem.emit(dir);
                 return;
             }
-            this.changeFocusedItem(dir);
+            this.changeFocusedItem(dir, listboxItems);
             return;
         }
-        dir === 'moveUp' ? this.onArrowUp() : this.onArrowDown();
+        dir === 'moveUp' ? this.onArrowUp(listboxItems) : this.onArrowDown(listboxItems);
         this.onSelectionChange.emit(this.selectedListboxItemIndex);
         this.focusedListboxItemIndex = this.selectedListboxItemIndex;
     }
-    onArrowLeftOrRight(keyCode, parentListbox, childListbox, event) {
+    onArrowLeftOrRight(keyCode, parentListbox, childListbox, event, listboxItems) {
         event.preventDefault();
         if (event.shiftKey) {
             this.transferAllItems(keyCode, childListbox, parentListbox);
             return;
         }
         if (this.selectedListboxItemIndex >= 0) {
-            this.transferItem(keyCode, childListbox, parentListbox);
+            this.transferItem(keyCode, childListbox, parentListbox, listboxItems);
         }
     }
-    onSelectChange() {
-        const canDeslect = (this.selectedListboxItemIndex || this.selectedListboxItemIndex === 0) && this.selectedListboxItemIndex === this.focusedListboxItemIndex;
+    onSelectChange(event, listboxItems) {
+        event.stopImmediatePropagation();
+        event.preventDefault();
+        const areIndexesEqual = this.selectedListboxItemIndex === this.focusedListboxItemIndex;
+        const canDeslect = (this.selectedListboxItemIndex || this.selectedListboxItemIndex === 0) && areIndexesEqual;
         if (canDeslect) {
             this.selectedListboxItemIndex = null;
         }
         else {
-            const items = this.listboxItems;
-            this.changeTabindex(items[this.selectedListboxItemIndex], items[this.focusedListboxItemIndex]);
+            const previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
+            const currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
+            this.changeTabindex(previousItem, currentItem);
             this.selectedListboxItemIndex = this.focusedListboxItemIndex;
         }
         this.onSelectionChange.emit(this.selectedListboxItemIndex);
@@ -332,48 +337,59 @@ class KeyboardNavigationService {
             }
         }
         else {
-            tools[0].element.focus();
+            tools[0]?.element.focus();
         }
     }
     transferAllItems(keyCode, childListbox, parentListbox) {
         const isArrowRight = keyCode === Keys.ArrowRight;
         const actionToPerform = isArrowRight ? 'transferAllTo' : 'transferAllFrom';
         this.onTransferAllEvent.emit(actionToPerform);
+        const adjustTabindex = (items) => {
+            items.forEach(item => {
+                if (item.nativeElement.getAttribute('tabindex') === '0') {
+                    this.changeTabindex(item.nativeElement, null);
+                }
+            });
+        };
         this.zone.onStable.pipe(take(1)).subscribe(() => {
             const childListboxNav = childListbox?.keyboardNavigationService || parentListbox?.childListbox.keyboardNavigationService;
             let currentItem;
             if (isArrowRight) {
                 if (childListbox) {
-                    const childListboxItemsLength = childListboxNav.listboxItems.length - 1;
-                    currentItem = childListboxNav.listboxItems[childListboxItemsLength];
+                    const childListBoxItems = childListbox.listboxItems.toArray();
+                    const childListboxItemsLength = childListBoxItems.length - 1;
+                    currentItem = childListBoxItems[childListboxItemsLength].nativeElement;
                     childListboxNav.focusedListboxItemIndex = childListboxItemsLength;
                     childListboxNav.selectedListboxItemIndex = childListboxItemsLength;
                     this.focusedListboxItemIndex = 0;
                     this.selectedListboxItemIndex = 0;
+                    adjustTabindex(childListBoxItems);
                 }
             }
             else {
                 if (parentListbox) {
                     const parentListboxNav = parentListbox.keyboardNavigationService;
-                    const parentListboxItemsLength = parentListboxNav.listboxItems.length - 1;
-                    currentItem = parentListboxNav.listboxItems[parentListboxItemsLength];
+                    const parentListBoxItems = parentListbox.listboxItems.toArray();
+                    const parentListboxItemsLength = parentListBoxItems.length - 1;
+                    currentItem = parentListBoxItems[parentListboxItemsLength].nativeElement;
                     parentListboxNav.focusedListboxItemIndex = parentListboxItemsLength;
                     parentListboxNav.selectedListboxItemIndex = parentListboxItemsLength;
                     childListboxNav.focusedListboxItemIndex = 0;
                     childListboxNav.selectedListboxItemIndex = 0;
+                    adjustTabindex(parentListBoxItems);
                 }
             }
             this.changeTabindex(null, currentItem);
         });
     }
-    transferItem(keyCode, childListbox, parentListbox) {
+    transferItem(keyCode, childListbox, parentListbox, listboxItems) {
         const isArrowRight = keyCode === Keys.ArrowRight;
         const actionToPerform = isArrowRight ? 'transferFrom' : 'transferTo';
         this.onShiftSelectedItem.emit(actionToPerform);
         const adjustTabindex = (items, firstItem, currentItem) => {
-            items.listboxItems.forEach(item => {
-                if (item.getAttribute('tabindex') === '0') {
-                    this.changeTabindex(item, firstItem);
+            items.forEach(item => {
+                if (item.nativeElement.getAttribute('tabindex') === '0') {
+                    this.changeTabindex(item.nativeElement, firstItem);
                 }
             });
             this.changeTabindex(null, currentItem);
@@ -381,58 +397,60 @@ class KeyboardNavigationService {
         this.zone.onStable.pipe(take(1)).subscribe(() => {
             if (isArrowRight) {
                 if (childListbox) {
+                    const childListBoxItems = childListbox.listboxItems.toArray();
                     const childListboxNav = childListbox.keyboardNavigationService;
-                    const childListboxItemsLength = childListboxNav.listboxItems.length - 1;
-                    const currentItem = childListboxNav.listboxItems[childListboxItemsLength];
-                    const parentListboxFirstItem = this.listboxItems[0];
+                    const childListboxItemsLength = childListbox.listboxItems.length - 1;
+                    const parentListboxFirstItem = listboxItems[0].nativeElement;
+                    const currentItem = childListBoxItems[childListboxItemsLength].nativeElement;
                     childListboxNav.focusedListboxItemIndex = childListboxItemsLength;
                     childListboxNav.selectedListboxItemIndex = childListboxItemsLength;
                     this.focusedListboxItemIndex = 0;
                     this.selectedListboxItemIndex = 0;
-                    adjustTabindex(childListboxNav, parentListboxFirstItem, currentItem);
+                    adjustTabindex(childListBoxItems, parentListboxFirstItem, currentItem);
                 }
             }
             else {
                 if (parentListbox) {
+                    const parentListBoxItems = parentListbox.listboxItems.toArray();
                     const childListboxNav = parentListbox.childListbox.keyboardNavigationService;
                     const parentListboxNav = parentListbox.keyboardNavigationService;
-                    const parentListboxItemsLength = parentListboxNav.listboxItems.length - 1;
-                    const currentItem = parentListboxNav.listboxItems[parentListboxItemsLength];
-                    const childListboxFirstItem = childListboxNav.listboxItems[0];
+                    const parentListboxItemsLength = parentListbox.listboxItems.length - 1;
+                    const childListboxFirstItem = listboxItems[0].nativeElement;
+                    const currentItem = parentListBoxItems[parentListboxItemsLength].nativeElement;
                     parentListboxNav.focusedListboxItemIndex = parentListboxItemsLength;
                     parentListboxNav.selectedListboxItemIndex = parentListboxItemsLength;
                     childListboxNav.focusedListboxItemIndex = 0;
                     childListboxNav.selectedListboxItemIndex = 0;
-                    adjustTabindex(parentListboxNav, childListboxFirstItem, currentItem);
+                    adjustTabindex(parentListBoxItems, childListboxFirstItem, currentItem);
                 }
             }
         });
     }
-    changeFocusedItem(dir) {
-        this.listboxItems[this.focusedListboxItemIndex].blur();
+    changeFocusedItem(dir, listboxItems) {
+        listboxItems[this.focusedListboxItemIndex].nativeElement.blur();
         if (this.focusedListboxItemIndex > 0 && dir === 'moveUp') {
             this.focusedListboxItemIndex -= 1;
         }
-        else if (this.focusedListboxItemIndex < this.listboxItems.length - 1 && dir === 'moveDown') {
+        else if (this.focusedListboxItemIndex < listboxItems.length - 1 && dir === 'moveDown') {
             this.focusedListboxItemIndex += 1;
         }
-        this.listboxItems[this.focusedListboxItemIndex].focus();
+        listboxItems[this.focusedListboxItemIndex].nativeElement.focus();
     }
-    onArrowDown() {
-        if (this.selectedListboxItemIndex < this.listboxItems.length - 1) {
+    onArrowDown(listboxItems) {
+        if (this.selectedListboxItemIndex < listboxItems.length - 1) {
             const offset = this.selectedListboxItemIndex ? this.selectedListboxItemIndex : this.focusedListboxItemIndex;
             this.selectedListboxItemIndex = offset + 1;
-            const previousItem = this.listboxItems[this.selectedListboxItemIndex - 1];
-            const currentItem = this.listboxItems[this.selectedListboxItemIndex];
+            const previousItem = listboxItems[this.selectedListboxItemIndex - 1]?.nativeElement;
+            const currentItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
             this.changeTabindex(previousItem, currentItem);
         }
     }
-    onArrowUp() {
+    onArrowUp(listboxItems) {
         if (this.selectedListboxItemIndex > 0 || this.focusedListboxItemIndex > 0) {
             const offset = this.selectedListboxItemIndex ? this.selectedListboxItemIndex : this.focusedListboxItemIndex;
             this.selectedListboxItemIndex = offset - 1;
-            const previousItem = this.listboxItems[this.selectedListboxItemIndex + 1];
-            const currentItem = this.listboxItems[this.selectedListboxItemIndex];
+            const previousItem = listboxItems[this.selectedListboxItemIndex + 1]?.nativeElement;
+            const currentItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
             this.changeTabindex(previousItem, currentItem);
         }
     }
@@ -650,7 +668,6 @@ class ListBoxComponent {
         const toolsRef = this.tools.toArray();
         const hostEl = this.hostElement.nativeElement;
         const navService = this.keyboardNavigationService;
-        navService.listboxItems = Array.from(this.listboxElement.nativeElement.querySelectorAll('li.k-list-item'));
         this.setIds();
         this.initSubscriptions(navService, hostEl, toolsRef);
     }
@@ -717,58 +734,41 @@ class ListBoxComponent {
         }
         return fieldAccessor(dataItem, this.textField);
     }
-    /**
-     * @hidden
-     */
-    updateListboxItems() {
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
-            this.keyboardNavigationService.listboxItems = Array.from(this.listboxElement.nativeElement.querySelectorAll('li.k-list-item'));
-        });
-    }
-    /**
-     * @hidden
-     */
-    swapItems(firstItemIndex, secondItemIndex) {
-        const listboxItems = this.keyboardNavigationService.listboxItems;
-        [listboxItems[firstItemIndex], listboxItems[secondItemIndex]] = [
-            listboxItems[secondItemIndex],
-            listboxItems[firstItemIndex],
-        ];
-    }
-    onClickEvent(listboxItems, prevIndex, currentIndex, dir) {
-        this.selectionChange.next(currentIndex);
+    onClickEvent(prevIndex, currentIndex) {
         this.keyboardNavigationService.selectedListboxItemIndex = currentIndex;
         this.keyboardNavigationService.focusedListboxItemIndex = currentIndex;
+        this.selectionChange.next(currentIndex);
         this.zone.onStable.pipe(take(1)).subscribe(() => {
-            if (dir)
-                this.swapItems(prevIndex, currentIndex);
-            const previousItem = prevIndex ? listboxItems[prevIndex] : listboxItems[0];
-            const currentItem = listboxItems[currentIndex];
+            const listboxItems = this.listboxItems.toArray();
+            const previousItem = prevIndex ? listboxItems[prevIndex].nativeElement : listboxItems[0].nativeElement;
+            const currentItem = listboxItems[currentIndex].nativeElement;
             this.keyboardNavigationService.changeTabindex(previousItem, currentItem);
         });
     }
     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.renderer.listen(this.listboxElement.nativeElement, 'focusin', (event) => this.onFocusIn(event)));
+        this.subs.add(this.selectionService.onSelect.subscribe((e) => this.onClickEvent(e.prevIndex, e.index)));
         this.subs.add(navService.onDeleteEvent.subscribe((index) => this.onDeleteEvent(index, navService)));
-        this.subs.add(this.renderer.listen(hostEl, 'keydown', (event) => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox)));
-        this.subs.add(this.renderer.listen(this.listboxElement.nativeElement, 'focusin', () => navService.onFocusIn()));
-        this.subs.add(navService.onShiftSelectedItem.subscribe((actionToPerform) => this.onShiftItems(actionToPerform)));
-        this.subs.add(navService.onTransferAllEvent.subscribe((actionToPerform) => this.onShiftItems(actionToPerform)));
         this.subs.add(navService.onMoveSelectedItem.subscribe((dir) => this.performAction(dir)));
-        this.subs.add(this.selectionService.onSelect.subscribe((e) => this.onClickEvent(navService.listboxItems, e.prevIndex, e.index, e.dir)));
+        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((index) => {
             this.selectionService.selectedIndex = index;
             this.selectionChange.next({ index, prevIndex: null });
         }));
     }
-    onShiftItems(actionToPerform) {
-        this.performAction(actionToPerform);
-        if (actionToPerform === 'transferFrom' || actionToPerform === 'transferAllTo') {
-            this.updateListboxItems();
-            this.childListbox?.updateListboxItems();
-        }
-        else {
-            this.updateListboxItems();
-            this.parentListbox?.updateListboxItems();
+    onFocusIn(event) {
+        const navService = this.keyboardNavigationService;
+        if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex) {
+            const items = this.listboxItems.toArray();
+            const index = items.findIndex(elem => elem.nativeElement === event.target);
+            this.selectionService.selectedIndex = index;
+            this.selectionChange.next({ index, prevIndex: null });
+            const previousItem = items[navService.selectedListboxItemIndex]?.nativeElement;
+            const currentItem = items[index]?.nativeElement;
+            this.renderer.setAttribute(previousItem, 'tabindex', '-1');
+            this.renderer.setAttribute(currentItem, 'tabindex', '0');
         }
     }
     setIds() {
@@ -805,13 +805,13 @@ class ListBoxComponent {
     onDeleteEvent(index, navService) {
         this.selectionService.selectedIndex = index;
         this.performAction('remove');
-        this.updateListboxItems();
-        const setIndex = index + 1 === navService.listboxItems.length
-            ? { index: index - 1, tabindex: index - 1 }
-            : { index, tabindex: index + 1 };
-        navService.changeTabindex(null, navService.listboxItems[setIndex['tabindex']]);
+        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 });
         navService.selectedListboxItemIndex = setIndex['index'];
+        navService.focusedListboxItemIndex = setIndex['index'];
         navService.focusedListboxItem = setIndex['index'];
         this.selectionService.selectedIndex = setIndex['index'];
     }
@@ -838,7 +838,7 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             provide: L10N_PREFIX,
             useValue: 'kendo.listbox'
         },
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "listboxElement", first: true, predicate: ["listbox"], descendants: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "tools", predicate: ["tools"], descendants: true }], ngImport: i0, template: `
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "listboxElement", first: true, predicate: ["listbox"], descendants: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "listboxItems", predicate: ["listboxItems"], descendants: true }, { propertyName: "tools", predicate: ["tools"], descendants: true }], ngImport: i0, template: `
         <ng-container kendoListBoxLocalizedMessages
             i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
             moveUp="Move Up"
@@ -894,6 +894,7 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                         [attr.aria-multiselectable]="false"
                     >
                         <li
+                            #listboxItems
                             *ngFor="let item of data; let i = index"
                             kendoListBoxItemSelectable
                             class="k-list-item"
@@ -989,6 +990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         [attr.aria-multiselectable]="false"
                     >
                         <li
+                            #listboxItems
                             *ngFor="let item of data; let i = index"
                             kendoListBoxItemSelectable
                             class="k-list-item"
@@ -1028,6 +1030,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], listboxElement: [{
                 type: ViewChild,
                 args: ['listbox']
+            }], listboxItems: [{
+                type: ViewChildren,
+                args: ['listboxItems']
             }], toolbarElement: [{
                 type: ViewChild,
                 args: ['toolbar']
@@ -1148,9 +1153,8 @@ class DataBindingDirective {
             return;
         }
         const newIndex = dir === 'up' ? index - 1 : index + 1;
-        // ES6 Destructuring swap
         [this.selectedBox.data[newIndex], this.selectedBox.data[index]] = [this.selectedBox.data[index], this.selectedBox.data[newIndex]];
-        this.selectedBox.selectionService.select(newIndex, dir);
+        this.selectedBox.selectionService.select(newIndex);
     }
     removeItem() {
         const index = this.selectedBox.selectedIndex;

package/keyboard-navigation.service.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter, NgZone, Renderer2 } from "@angular/core";
+import { ElementRef, EventEmitter, NgZone, Renderer2 } from "@angular/core";
 import { Button } from "@progress/kendo-angular-buttons";
 import { ListBoxComponent } from "./listbox.component";
 import { ActionName, Tool } from "./toolbar";
@@ -13,7 +13,6 @@ import * as i0 from "@angular/core";
 export declare class KeyboardNavigationService {
     private renderer;
     private zone;
-    listboxItems: Array<HTMLElement>;
     selectedListboxItemIndex: number;
     focusedListboxItemIndex: number;
     focusedToolIndex: number;
@@ -23,10 +22,10 @@ export declare class KeyboardNavigationService {
     onTransferAllEvent: EventEmitter<ActionName>;
     onShiftSelectedItem: EventEmitter<ActionName>;
     constructor(renderer: Renderer2, zone: NgZone);
-    onKeyDown(event: any, toolsRef: Array<Button>, toolbar: Tool[], childListbox: ListBoxComponent, parentListbox: ListBoxComponent): void;
+    onKeyDown(event: any, toolsRef: Array<Button>, toolbar: Tool[], childListbox: ListBoxComponent, parentListbox: ListBoxComponent, listboxItems: Array<ElementRef>): void;
     changeTabindex(previousItem: HTMLElement, currentItem: HTMLElement): void;
-    onFocusIn(): void;
     private handleToolbarArrows;
+    private onSpaceKey;
     private onArrowUpOrDown;
     private onArrowLeftOrRight;
     private onSelectChange;

package/listbox.component.d.ts

@@ -38,6 +38,10 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
      * @hidden
      */
     listboxElement: ElementRef;
+    /**
+     * @hidden
+     */
+    listboxItems: QueryList<any>;
     /**
      * @hidden
      */
@@ -151,17 +155,9 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
      * @hidden
      */
     getText(dataItem: any): string;
-    /**
-     * @hidden
-     */
-    updateListboxItems(): void;
-    /**
-     * @hidden
-     */
-    swapItems(firstItemIndex: number, secondItemIndex: number): void;
     private onClickEvent;
     private initSubscriptions;
-    private onShiftItems;
+    private onFocusIn;
     private setIds;
     private onDeleteEvent;
     private setToolbarClass;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-listbox",
-  "version": "12.0.1-develop.3",
+  "version": "12.0.1-develop.4",
   "description": "Kendo UI for Angular ListBox",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,14 +23,14 @@
     "@angular/core": "13 - 16",
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "12.0.1-develop.3",
-    "@progress/kendo-angular-common": "12.0.1-develop.3",
-    "@progress/kendo-angular-popup": "12.0.1-develop.3",
+    "@progress/kendo-angular-buttons": "12.0.1-develop.4",
+    "@progress/kendo-angular-common": "12.0.1-develop.4",
+    "@progress/kendo-angular-popup": "12.0.1-develop.4",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "12.0.1-develop.3",
+    "@progress/kendo-angular-schematics": "12.0.1-develop.4",
     "@progress/kendo-common": "^0.2.2"
   },
   "schematics": "./schematics/collection.json",

package/schematics/ngAdd/index.js

@@ -6,11 +6,11 @@ function default_1(options) {
         // Additional dependencies to install.
         // See https://github.com/telerik/kendo-schematics/issues/28
         peerDependencies: {
-            '@progress/kendo-angular-buttons': '12.0.1-develop.3',
-            '@progress/kendo-angular-common': '12.0.1-develop.3',
-            '@progress/kendo-angular-l10n': '12.0.1-develop.3',
+            '@progress/kendo-angular-buttons': '12.0.1-develop.4',
+            '@progress/kendo-angular-common': '12.0.1-develop.4',
+            '@progress/kendo-angular-l10n': '12.0.1-develop.4',
             // Peer of kendo-angular-buttons
-            '@progress/kendo-angular-popup': '12.0.1-develop.3'
+            '@progress/kendo-angular-popup': '12.0.1-develop.4'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }

package/selection.service.d.ts

@@ -17,7 +17,7 @@ export interface ListBoxSelectionEvent {
 export declare class ListBoxSelectionService {
     onSelect: EventEmitter<any>;
     selectedIndex: number;
-    select(index: number, dir?: string): void;
+    select(index: number): void;
     isSelected(index: number): boolean;
     clearSelection(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ListBoxSelectionService, never>;