@progress/kendo-angular-listbox 21.0.0-develop.20 → 21.0.0-develop.22

package/data-binding.directive.d.ts

@@ -52,6 +52,7 @@ export declare class DataBindingDirective implements OnChanges, OnDestroy {
     private removeSelectedItems;
     private transferSelectedItems;
     private transferAll;
+    private updateListBoxIndices;
     static ɵfac: i0.ɵɵFactoryDeclaration<DataBindingDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DataBindingDirective, "[kendoListBoxDataBinding]", never, { "connectedWith": { "alias": "connectedWith"; "required": false; }; }, {}, never, never, true, never>;
 }

package/esm2022/data-binding.directive.mjs

@@ -98,11 +98,37 @@ export class DataBindingDirective {
             }
             this.selectedBoxSub.add(this.listbox.selectionChange.subscribe(() => {
                 this.selectedBox = this.listbox;
+                const connectedNavService = this.connectedWith.keyboardNavigationService;
+                const connectedSelService = this.connectedWith.selectionService;
+                let lastSelectedIndex = 0;
+                if (connectedSelService.selectedIndices.length > 0) {
+                    lastSelectedIndex = connectedSelService.rangeSelectionTargetIndex ?? connectedSelService.lastSelectedOrUnselectedIndex ?? 0;
+                }
                 this.connectedWith.clearSelection();
+                if (this.connectedWith.data?.length > 0) {
+                    const validIndex = Math.min(lastSelectedIndex, this.connectedWith.data.length - 1);
+                    this.updateListBoxIndices(connectedNavService, connectedSelService, validIndex, false);
+                }
+                else {
+                    this.updateListBoxIndices(connectedNavService, connectedSelService, 0, false);
+                }
             }));
             this.selectedBoxSub.add(this.connectedWith.selectionChange.subscribe(() => {
                 this.selectedBox = this.connectedWith;
+                const listboxNavService = this.listbox.keyboardNavigationService;
+                const listboxSelService = this.listbox.selectionService;
+                let lastSelectedIndex = 0;
+                if (listboxSelService.selectedIndices.length > 0) {
+                    lastSelectedIndex = listboxSelService.rangeSelectionTargetIndex ?? listboxSelService.lastSelectedOrUnselectedIndex ?? 0;
+                }
                 this.listbox.clearSelection();
+                if (this.listbox.data?.length > 0) {
+                    const validIndex = Math.min(lastSelectedIndex, this.listbox.data.length - 1);
+                    this.updateListBoxIndices(listboxNavService, listboxSelService, validIndex, false);
+                }
+                else {
+                    this.updateListBoxIndices(listboxNavService, listboxSelService, 0, false);
+                }
             }));
         }
     }
@@ -183,20 +209,51 @@ export class DataBindingDirective {
         if (!target || !source || !isPresent(selectedIndices) || selectedIndices.length === 0) {
             return;
         }
+        const sourceLastIndex = source.selectionService.rangeSelectionTargetIndex ??
+            source.selectionService.lastSelectedOrUnselectedIndex ??
+            0;
         target.data.push(...selectedIndices.map(index => source.data[index]));
         source.data = source.data.filter((_, index) => !selectedIndices.includes(index));
         source.clearSelection();
-        target.select([target.data.length - 1]);
+        const removedBeforeAnchor = selectedIndices.filter(i => i < sourceLastIndex).length;
+        const adjustedAnchorIndex = Math.max(0, Math.min(sourceLastIndex - removedBeforeAnchor, source.data.length - 1));
+        const sourceNavService = source.keyboardNavigationService;
+        const sourceSelService = source.selectionService;
+        if (source.data.length > 0) {
+            this.updateListBoxIndices(sourceNavService, sourceSelService, adjustedAnchorIndex);
+        }
+        const targetIndex = target.data.length - 1;
+        target.select([targetIndex]);
+        const targetNavService = target.keyboardNavigationService;
+        const targetSelService = target.selectionService;
+        this.updateListBoxIndices(targetNavService, targetSelService, targetIndex);
         this.selectedBox = target;
     }
     transferAll(source, target) {
-        if (!target || !source) {
+        if (!target || !source || source.data?.length === 0) {
             return;
         }
-        target.data.splice(target.data.length, 0, ...source.data.splice(0, source.data.length));
-        target.select([target.data.length - 1]);
+        const itemsToTransfer = source.data.splice(0, source.data.length);
+        target.data.push(...itemsToTransfer);
+        source.clearSelection();
+        const sourceNavService = source.keyboardNavigationService;
+        const sourceSelService = source.selectionService;
+        this.updateListBoxIndices(sourceNavService, sourceSelService, 0);
+        const targetIndex = target.data.length - 1;
+        target.select([targetIndex]);
+        const targetNavService = target.keyboardNavigationService;
+        const targetSelService = target.selectionService;
+        this.updateListBoxIndices(targetNavService, targetSelService, targetIndex);
         this.selectedBox = target;
     }
+    updateListBoxIndices = (keyboardNavService, selectionService, index, setFocusedIndex = true) => {
+        if (setFocusedIndex) {
+            keyboardNavService.focusedListboxItemIndex = index;
+        }
+        keyboardNavService.selectedListboxItemIndex = index;
+        selectionService.rangeSelectionAnchorIndex = index;
+        selectionService.lastSelectedOrUnselectedIndex = index;
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.ListBoxComponent }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DataBindingDirective, isStandalone: true, selector: "[kendoListBoxDataBinding]", inputs: { connectedWith: "connectedWith" }, usesOnChanges: true, ngImport: i0 });
 }

package/esm2022/keyboard-navigation.service.mjs

@@ -28,7 +28,7 @@ export class KeyboardNavigationService {
         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;
@@ -68,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);
@@ -122,9 +122,7 @@ export class KeyboardNavigationService {
             ctrlKey,
             shiftKey
         });
-        if (!shiftKey) {
-            this.selectedListboxItemIndex = this.focusedListboxItemIndex;
-        }
+        this.selectedListboxItemIndex = this.focusedListboxItemIndex;
     }
     onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar, listboxItems) {
         event.preventDefault();
@@ -149,13 +147,16 @@ export class KeyboardNavigationService {
         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);
         }
     }
@@ -313,19 +314,17 @@ export class KeyboardNavigationService {
         }
     }
     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

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-inferrable-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, isDevMode, NgZone, Output, QueryList, Renderer2, ViewChild, ViewChildren } from '@angular/core';
+import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, isDevMode, NgZone, Output, QueryList, Renderer2, ViewChild, ViewChildren } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { Subscription } from 'rxjs';
 import { packageMetadata } from './package-metadata';
@@ -62,6 +62,7 @@ export class ListBoxComponent {
     renderer;
     zone;
     localization;
+    cdr;
     /**
      * @hidden
      */
@@ -218,13 +219,14 @@ export class ListBoxComponent {
     subs = new Subscription();
     shouldFireFocusIn = false;
     _selectable = 'single';
-    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization) {
+    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.cdr = cdr;
         validatePackage(packageMetadata);
         this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
         this.setSizingClass(this.size);
@@ -260,6 +262,7 @@ 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.action.next(actionName);
         }
@@ -276,6 +279,9 @@ export class ListBoxComponent {
             const currentTool = toolsRef[navService.focusedToolIndex]?.element;
             navService.changeTabindex(prevTool, currentTool);
         }
+        this.zone.runOutsideAngular(() => setTimeout(() => {
+            this.shouldFireFocusIn = true;
+        }));
     }
     /**
      * Selects multiple ListBox nodes programmatically.
@@ -356,16 +362,17 @@ export class ListBoxComponent {
             const newFocusIndex = isPresent(this.selectionService.rangeSelectionTargetIndex)
                 ? this.selectionService.rangeSelectionTargetIndex
                 : this.selectionService.lastSelectedOrUnselectedIndex;
-            if (newFocusIndex !== null && newFocusIndex !== undefined) {
+            if (isPresent(newFocusIndex)) {
                 const listboxItems = this.listboxItems.toArray();
                 const previousItem = listboxItems[navService.focusedListboxItemIndex]?.nativeElement;
                 const currentItem = listboxItems[newFocusIndex]?.nativeElement;
-                if (previousItem !== currentItem && currentItem) {
+                if (previousItem && currentItem) {
                     navService.changeTabindex(previousItem, currentItem, false);
                     navService.focusedListboxItemIndex = newFocusIndex;
                     navService.selectedListboxItemIndex = newFocusIndex;
                 }
             }
+            this.cdr.markForCheck();
             this.zone.runOutsideAngular(() => setTimeout(() => {
                 this.shouldFireFocusIn = true;
             }));
@@ -391,6 +398,7 @@ export class ListBoxComponent {
                         deselectedIndices: null
                     });
                 }
+                this.cdr.markForCheck();
             }
         }));
         this.subs.add(navService.onSelectToEnd.subscribe(({ direction }) => {
@@ -410,6 +418,7 @@ export class ListBoxComponent {
                 const targetItem = listboxItems[targetIndex]?.nativeElement;
                 navService.changeTabindex(currentItem, targetItem);
                 navService.focusedListboxItemIndex = targetIndex;
+                this.cdr.markForCheck();
                 this.zone.runOutsideAngular(() => setTimeout(() => {
                     this.shouldFireFocusIn = true;
                 }));
@@ -418,7 +427,7 @@ export class ListBoxComponent {
         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(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);
@@ -510,7 +519,7 @@ export 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: i1.KeyboardNavigationService }, { token: i2.ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    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", 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,
@@ -722,7 +731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     standalone: true,
                     imports: [LocalizedMessagesDirective, NgIf, NgFor, ButtonComponent, ItemSelectableDirective, TemplateContextDirective]
                 }]
-        }], ctorParameters: () => [{ type: i1.KeyboardNavigationService }, { type: i2.ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.LocalizationService }], propDecorators: { listboxClassName: [{
+        }], ctorParameters: () => [{ type: i1.KeyboardNavigationService }, { type: i2.ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { listboxClassName: [{
                 type: HostBinding,
                 args: ['class.k-listbox']
             }], direction: [{

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1762335746,
-    version: '21.0.0-develop.20',
+    publishDate: 1762432333,
+    version: '21.0.0-develop.22',
     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/fesm2022/progress-kendo-angular-listbox.mjs

@@ -25,8 +25,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1762335746,
-    version: '21.0.0-develop.20',
+    publishDate: 1762432333,
+    version: '21.0.0-develop.22',
     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'
 };
 
@@ -335,7 +335,7 @@ class KeyboardNavigationService {
         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;
@@ -375,7 +375,7 @@ 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);
@@ -429,9 +429,7 @@ class KeyboardNavigationService {
             ctrlKey,
             shiftKey
         });
-        if (!shiftKey) {
-            this.selectedListboxItemIndex = this.focusedListboxItemIndex;
-        }
+        this.selectedListboxItemIndex = this.focusedListboxItemIndex;
     }
     onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar, listboxItems) {
         event.preventDefault();
@@ -456,13 +454,16 @@ class KeyboardNavigationService {
         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);
         }
     }
@@ -620,19 +621,17 @@ class KeyboardNavigationService {
         }
     }
     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);
         }
@@ -813,6 +812,7 @@ class ListBoxComponent {
     renderer;
     zone;
     localization;
+    cdr;
     /**
      * @hidden
      */
@@ -969,13 +969,14 @@ class ListBoxComponent {
     subs = new Subscription();
     shouldFireFocusIn = false;
     _selectable = 'single';
-    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization) {
+    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.cdr = cdr;
         validatePackage(packageMetadata);
         this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
         this.setSizingClass(this.size);
@@ -1011,6 +1012,7 @@ 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.action.next(actionName);
         }
@@ -1027,6 +1029,9 @@ class ListBoxComponent {
             const currentTool = toolsRef[navService.focusedToolIndex]?.element;
             navService.changeTabindex(prevTool, currentTool);
         }
+        this.zone.runOutsideAngular(() => setTimeout(() => {
+            this.shouldFireFocusIn = true;
+        }));
     }
     /**
      * Selects multiple ListBox nodes programmatically.
@@ -1107,16 +1112,17 @@ class ListBoxComponent {
             const newFocusIndex = isPresent$1(this.selectionService.rangeSelectionTargetIndex)
                 ? this.selectionService.rangeSelectionTargetIndex
                 : this.selectionService.lastSelectedOrUnselectedIndex;
-            if (newFocusIndex !== null && newFocusIndex !== undefined) {
+            if (isPresent$1(newFocusIndex)) {
                 const listboxItems = this.listboxItems.toArray();
                 const previousItem = listboxItems[navService.focusedListboxItemIndex]?.nativeElement;
                 const currentItem = listboxItems[newFocusIndex]?.nativeElement;
-                if (previousItem !== currentItem && currentItem) {
+                if (previousItem && currentItem) {
                     navService.changeTabindex(previousItem, currentItem, false);
                     navService.focusedListboxItemIndex = newFocusIndex;
                     navService.selectedListboxItemIndex = newFocusIndex;
                 }
             }
+            this.cdr.markForCheck();
             this.zone.runOutsideAngular(() => setTimeout(() => {
                 this.shouldFireFocusIn = true;
             }));
@@ -1142,6 +1148,7 @@ class ListBoxComponent {
                         deselectedIndices: null
                     });
                 }
+                this.cdr.markForCheck();
             }
         }));
         this.subs.add(navService.onSelectToEnd.subscribe(({ direction }) => {
@@ -1161,6 +1168,7 @@ class ListBoxComponent {
                 const targetItem = listboxItems[targetIndex]?.nativeElement;
                 navService.changeTabindex(currentItem, targetItem);
                 navService.focusedListboxItemIndex = targetIndex;
+                this.cdr.markForCheck();
                 this.zone.runOutsideAngular(() => setTimeout(() => {
                     this.shouldFireFocusIn = true;
                 }));
@@ -1169,7 +1177,7 @@ class ListBoxComponent {
         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(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);
@@ -1261,7 +1269,7 @@ 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 }], target: i0.ɵɵFactoryTarget.Component });
+    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", 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,
@@ -1473,7 +1481,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 }], propDecorators: { listboxClassName: [{
+        }], ctorParameters: () => [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { listboxClassName: [{
                 type: HostBinding,
                 args: ['class.k-listbox']
             }], direction: [{
@@ -1606,11 +1614,37 @@ class DataBindingDirective {
             }
             this.selectedBoxSub.add(this.listbox.selectionChange.subscribe(() => {
                 this.selectedBox = this.listbox;
+                const connectedNavService = this.connectedWith.keyboardNavigationService;
+                const connectedSelService = this.connectedWith.selectionService;
+                let lastSelectedIndex = 0;
+                if (connectedSelService.selectedIndices.length > 0) {
+                    lastSelectedIndex = connectedSelService.rangeSelectionTargetIndex ?? connectedSelService.lastSelectedOrUnselectedIndex ?? 0;
+                }
                 this.connectedWith.clearSelection();
+                if (this.connectedWith.data?.length > 0) {
+                    const validIndex = Math.min(lastSelectedIndex, this.connectedWith.data.length - 1);
+                    this.updateListBoxIndices(connectedNavService, connectedSelService, validIndex, false);
+                }
+                else {
+                    this.updateListBoxIndices(connectedNavService, connectedSelService, 0, false);
+                }
             }));
             this.selectedBoxSub.add(this.connectedWith.selectionChange.subscribe(() => {
                 this.selectedBox = this.connectedWith;
+                const listboxNavService = this.listbox.keyboardNavigationService;
+                const listboxSelService = this.listbox.selectionService;
+                let lastSelectedIndex = 0;
+                if (listboxSelService.selectedIndices.length > 0) {
+                    lastSelectedIndex = listboxSelService.rangeSelectionTargetIndex ?? listboxSelService.lastSelectedOrUnselectedIndex ?? 0;
+                }
                 this.listbox.clearSelection();
+                if (this.listbox.data?.length > 0) {
+                    const validIndex = Math.min(lastSelectedIndex, this.listbox.data.length - 1);
+                    this.updateListBoxIndices(listboxNavService, listboxSelService, validIndex, false);
+                }
+                else {
+                    this.updateListBoxIndices(listboxNavService, listboxSelService, 0, false);
+                }
             }));
         }
     }
@@ -1691,20 +1725,51 @@ class DataBindingDirective {
         if (!target || !source || !isPresent(selectedIndices) || selectedIndices.length === 0) {
             return;
         }
+        const sourceLastIndex = source.selectionService.rangeSelectionTargetIndex ??
+            source.selectionService.lastSelectedOrUnselectedIndex ??
+            0;
         target.data.push(...selectedIndices.map(index => source.data[index]));
         source.data = source.data.filter((_, index) => !selectedIndices.includes(index));
         source.clearSelection();
-        target.select([target.data.length - 1]);
+        const removedBeforeAnchor = selectedIndices.filter(i => i < sourceLastIndex).length;
+        const adjustedAnchorIndex = Math.max(0, Math.min(sourceLastIndex - removedBeforeAnchor, source.data.length - 1));
+        const sourceNavService = source.keyboardNavigationService;
+        const sourceSelService = source.selectionService;
+        if (source.data.length > 0) {
+            this.updateListBoxIndices(sourceNavService, sourceSelService, adjustedAnchorIndex);
+        }
+        const targetIndex = target.data.length - 1;
+        target.select([targetIndex]);
+        const targetNavService = target.keyboardNavigationService;
+        const targetSelService = target.selectionService;
+        this.updateListBoxIndices(targetNavService, targetSelService, targetIndex);
         this.selectedBox = target;
     }
     transferAll(source, target) {
-        if (!target || !source) {
+        if (!target || !source || source.data?.length === 0) {
             return;
         }
-        target.data.splice(target.data.length, 0, ...source.data.splice(0, source.data.length));
-        target.select([target.data.length - 1]);
+        const itemsToTransfer = source.data.splice(0, source.data.length);
+        target.data.push(...itemsToTransfer);
+        source.clearSelection();
+        const sourceNavService = source.keyboardNavigationService;
+        const sourceSelService = source.selectionService;
+        this.updateListBoxIndices(sourceNavService, sourceSelService, 0);
+        const targetIndex = target.data.length - 1;
+        target.select([targetIndex]);
+        const targetNavService = target.keyboardNavigationService;
+        const targetSelService = target.selectionService;
+        this.updateListBoxIndices(targetNavService, targetSelService, targetIndex);
         this.selectedBox = target;
     }
+    updateListBoxIndices = (keyboardNavService, selectionService, index, setFocusedIndex = true) => {
+        if (setFocusedIndex) {
+            keyboardNavService.focusedListboxItemIndex = index;
+        }
+        keyboardNavService.selectedListboxItemIndex = index;
+        selectionService.rangeSelectionAnchorIndex = index;
+        selectionService.lastSelectedOrUnselectedIndex = index;
+    };
     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 });
 }

package/keyboard-navigation.service.d.ts

@@ -36,7 +36,7 @@ export declare class KeyboardNavigationService {
         direction: 'home' | 'end';
     }>;
     constructor(renderer: Renderer2, zone: NgZone);
-    onKeyDown(event: any, toolsRef: Array<Button>, toolbar: Tool[], childListbox: ListBoxComponent, parentListbox: ListBoxComponent, listboxItems: Array<ElementRef>): void;
+    onKeyDown(event: any, toolsRef: Array<Button>, toolbar: Tool[], childListbox: ListBoxComponent, parentListbox: ListBoxComponent, listboxItems: Array<ElementRef>, currentListbox: ListBoxComponent): void;
     changeTabindex(previousItem: HTMLElement, currentItem: HTMLElement, shouldBlur?: boolean): void;
     private handleToolbarArrows;
     private onSpaceKey;

package/listbox.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, Renderer2 } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, Renderer2 } from '@angular/core';
 import { ListBoxSelectionEvent, ListBoxSelectionService } from './selection.service';
 import { ItemTemplateDirective } from './item-template.directive';
 import { Direction } from './util';
@@ -49,6 +49,7 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
     private renderer;
     private zone;
     private localization;
+    private cdr;
     /**
      * @hidden
      */
@@ -177,7 +178,7 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
     private subs;
     private shouldFireFocusIn;
     private _selectable;
-    constructor(keyboardNavigationService: KeyboardNavigationService, selectionService: ListBoxSelectionService, hostElement: ElementRef, renderer: Renderer2, zone: NgZone, localization: LocalizationService);
+    constructor(keyboardNavigationService: KeyboardNavigationService, selectionService: ListBoxSelectionService, hostElement: ElementRef, renderer: Renderer2, zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-listbox",
-  "version": "21.0.0-develop.20",
+  "version": "21.0.0-develop.22",
   "description": "Kendo UI for Angular ListBox",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -44,7 +44,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1762335746,
+      "publishDate": 1762432333,
       "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"
     }
   },
@@ -54,14 +54,14 @@
     "@angular/core": "18 - 20",
     "@angular/platform-browser": "18 - 20",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-buttons": "21.0.0-develop.20",
-    "@progress/kendo-angular-common": "21.0.0-develop.20",
-    "@progress/kendo-angular-popup": "21.0.0-develop.20",
+    "@progress/kendo-angular-buttons": "21.0.0-develop.22",
+    "@progress/kendo-angular-common": "21.0.0-develop.22",
+    "@progress/kendo-angular-popup": "21.0.0-develop.22",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "21.0.0-develop.20",
+    "@progress/kendo-angular-schematics": "21.0.0-develop.22",
     "@progress/kendo-common": "^1.0.1",
     "node-html-parser": "^7.0.1"
   },

package/schematics/ngAdd/index.js

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

package/selection.service.d.ts

@@ -29,7 +29,7 @@ export declare class ListBoxSelectionService {
     selectionMode: SelectionMode;
     lastSelectedOrUnselectedIndex: number | null;
     rangeSelectionTargetIndex: number | null;
-    private rangeSelectionAnchorIndex;
+    rangeSelectionAnchorIndex: number | null;
     onSelect: EventEmitter<any>;
     select(index: number, ctrlKey?: boolean, shiftKey?: boolean): void;
     selectRange(targetIndex: number): void;