@progress/kendo-angular-listbox 21.0.0-develop.14 → 21.0.0-develop.16

package/data-binding.directive.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { NgZone, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { ListBoxComponent } from './listbox.component';
 import * as i0 from "@angular/core";
 /**
@@ -29,16 +29,17 @@ import * as i0 from "@angular/core";
  */
 export declare class DataBindingDirective implements OnChanges, OnDestroy {
     private listbox;
+    private zone;
     /**
      * Specifies the `ListBoxComponent` instance with which the current ListBox connects.
      * When you link two listboxes through this input, you can transfer items between them.
      */
     connectedWith: ListBoxComponent;
-    private actionClickSub;
+    private actionSub;
     private selectedBoxSub;
     private connectedWithSub;
     private selectedBox;
-    constructor(listbox: ListBoxComponent);
+    constructor(listbox: ListBoxComponent, zone: NgZone);
     /**
      * @hidden
      */
@@ -48,8 +49,8 @@ export declare class DataBindingDirective implements OnChanges, OnDestroy {
      */
     ngOnDestroy(): void;
     private moveVertically;
-    private removeItem;
-    private transferItem;
+    private removeSelectedItems;
+    private transferSelectedItems;
     private transferAll;
     static ɵfac: i0.ɵɵFactoryDeclaration<DataBindingDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DataBindingDirective, "[kendoListBoxDataBinding]", never, { "connectedWith": { "alias": "connectedWith"; "required": false; }; }, {}, never, never, true, never>;

package/esm2022/data-binding.directive.mjs

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

package/esm2022/item-selectable.directive.mjs

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

package/esm2022/keyboard-navigation.service.mjs

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