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

package/esm2022/listbox.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-inferrable-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, isDevMode, NgZone, Output, QueryList, Renderer2, ViewChild, ViewChildren } from '@angular/core';
+import { 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';
@@ -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,6 @@ export class ListBoxComponent {
     renderer;
     zone;
     localization;
-    changeDetector;
     /**
      * @hidden
      */
@@ -95,6 +94,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 +128,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 +168,7 @@ export class ListBoxComponent {
     /**
      * Fires when you click a ListBox item.
      */
-    actionClick = new EventEmitter();
+    action = new EventEmitter();
     /**
      * @hidden
      */
@@ -175,7 +188,7 @@ export class ListBoxComponent {
     /**
      * @hidden
      */
-    selectedTools = allTools;
+    selectedTools = [];
     /**
      * @hidden
      */
@@ -203,15 +216,15 @@ 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) {
         this.keyboardNavigationService = keyboardNavigationService;
         this.selectionService = selectionService;
         this.hostElement = hostElement;
         this.renderer = renderer;
         this.zone = zone;
         this.localization = localization;
-        this.changeDetector = changeDetector;
         validatePackage(packageMetadata);
         this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
         this.setSizingClass(this.size);
@@ -224,9 +237,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';
         });
@@ -251,10 +261,10 @@ export class ListBoxComponent {
         const isListboxParentAndChild = !!(this.parentListbox && this.childListbox);
         const isListboxParent = !!(this.childListbox || (!this.childListbox && !this.parentListbox));
         if (isListboxChild || (isListboxParentAndChild && isActionTransferFrom)) {
-            this.parentListbox.actionClick.next(actionName);
+            this.parentListbox.action.next(actionName);
         }
         else if (isListboxParent || (isListboxParentAndChild && !isActionTransferFrom)) {
-            this.actionClick.next(actionName);
+            this.action.next(actionName);
         }
         const toolsRef = this.tools.toArray() || this.parentListbox.tools.toArray();
         const focusedToolIndex = toolsRef.findIndex(elem => elem.nativeElement === document.activeElement);
@@ -267,11 +277,22 @@ export class ListBoxComponent {
             navService.changeTabindex(prevTool, currentTool);
         }
     }
+    /**
+     * Selects multiple ListBox nodes programmatically.
+     */
+    select(indices) {
+        const validIndices = indices.filter(index => index >= 0 && index < this.data.length);
+        this.selectionService.setSelectedIndices(validIndices);
+    }
     /**
      * Selects a ListBox node programmatically.
+     *
+     * @hidden
      */
     selectItem(index) {
-        this.selectionService.selectedIndex = index;
+        if (index >= 0 && index < this.data.length) {
+            this.select([index]);
+        }
     }
     /**
      * Clears the ListBox selection programmatically.
@@ -280,10 +301,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 +347,81 @@ 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 (newFocusIndex !== null && newFocusIndex !== undefined) {
+                const listboxItems = this.listboxItems.toArray();
+                const previousItem = listboxItems[navService.focusedListboxItemIndex]?.nativeElement;
+                const currentItem = listboxItems[newFocusIndex]?.nativeElement;
+                if (previousItem !== currentItem && currentItem) {
+                    navService.changeTabindex(previousItem, currentItem, false);
+                    navService.focusedListboxItemIndex = newFocusIndex;
+                    navService.selectedListboxItemIndex = newFocusIndex;
+                }
+            }
+            this.zone.runOutsideAngular(() => setTimeout(() => {
+                this.shouldFireFocusIn = true;
+            }));
+        }));
         this.subs.add(navService.onDeleteEvent.subscribe((index) => this.onDeleteEvent(index, navService)));
         this.subs.add(navService.onMoveSelectedItem.subscribe((dir) => this.performAction(dir)));
+        this.subs.add(navService.onSelectAll.subscribe(() => {
+            if (this.selectable === 'multiple') {
+                const previousSelection = [...this.selectionService.selectedIndices];
+                const allSelected = this.selectionService.areAllSelected(this.data.length);
+                if (allSelected) {
+                    this.selectionService.clearSelection();
+                    this.selectionChange.next({
+                        selectedIndices: null,
+                        deselectedIndices: previousSelection.length > 0 ? previousSelection : null
+                    });
+                }
+                else {
+                    this.selectionService.selectAll(this.data.length);
+                    const selectedIndices = this.selectionService.selectedIndices.filter(i => !previousSelection.includes(i));
+                    this.selectionChange.next({
+                        selectedIndices: selectedIndices.length > 0 ? selectedIndices : null,
+                        deselectedIndices: null
+                    });
+                }
+            }
+        }));
+        this.subs.add(navService.onSelectToEnd.subscribe(({ direction }) => {
+            if (this.selectable === 'multiple') {
+                this.shouldFireFocusIn = false;
+                const previousSelection = [...this.selectionService.selectedIndices];
+                const targetIndex = direction === 'home' ? 0 : this.data.length - 1;
+                this.selectionService.selectRange(targetIndex);
+                const selectedIndices = this.selectionService.selectedIndices.filter(i => !previousSelection.includes(i));
+                const deselectedIndices = previousSelection.filter(i => !this.selectionService.selectedIndices.includes(i));
+                this.selectionChange.next({
+                    selectedIndices: selectedIndices.length > 0 ? selectedIndices : null,
+                    deselectedIndices: deselectedIndices.length > 0 ? deselectedIndices : null
+                });
+                const listboxItems = this.listboxItems.toArray();
+                const currentItem = listboxItems[navService.focusedListboxItemIndex]?.nativeElement;
+                const targetItem = listboxItems[targetIndex]?.nativeElement;
+                navService.changeTabindex(currentItem, targetItem);
+                navService.focusedListboxItemIndex = targetIndex;
+                this.zone.runOutsideAngular(() => setTimeout(() => {
+                    this.shouldFireFocusIn = true;
+                }));
+            }
+        }));
         if (this.listboxElement) {
             this.subs.add(this.renderer.listen(this.listboxElement.nativeElement, 'focusin', (event) => this.onFocusIn(event)));
         }
         this.subs.add(this.renderer.listen(hostEl, 'keydown', (event) => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox, this.listboxItems.toArray())));
-        this.subs.add(navService.onSelectionChange.subscribe((indexes) => {
-            const { prevIndex, index } = indexes;
-            this.selectionService.selectedIndex = index;
-            this.selectionChange.next({ index, prevIndex });
-            this.changeDetector.markForCheck();
+        this.subs.add(navService.onSelectionChange.subscribe((event) => {
+            const { index, ctrlKey, shiftKey } = event;
+            this.selectionService.select(index, ctrlKey, shiftKey);
         }));
     }
     onFocusIn(event) {
@@ -366,8 +432,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 +482,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) => {
@@ -434,8 +510,8 @@ 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 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListBoxComponent, isStandalone: true, selector: "kendo-listbox", inputs: { textField: "textField", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", actionClick: "actionClick", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName", "attr.dir": "this.direction" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListBoxComponent, deps: [{ token: i1.KeyboardNavigationService }, { token: i2.ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListBoxComponent, isStandalone: true, selector: "kendo-listbox", inputs: { textField: "textField", selectable: "selectable", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", action: "action", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName", "attr.dir": "this.direction" } }, providers: [
             ListBoxSelectionService,
             KeyboardNavigationService,
             LocalizationService,
@@ -502,16 +578,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 +685,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)"
                         >
@@ -646,7 +722,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 }, { type: i0.ChangeDetectorRef }], propDecorators: { listboxClassName: [{
+        }], ctorParameters: () => [{ type: i1.KeyboardNavigationService }, { type: i2.ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.LocalizationService }], propDecorators: { listboxClassName: [{
                 type: HostBinding,
                 args: ['class.k-listbox']
             }], direction: [{
@@ -669,6 +745,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 +761,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: 1761753096,
-    version: '21.0.0-develop.2',
+    publishDate: 1762427032,
+    version: '21.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

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 {};

package/esm2022/selection.service.mjs

@@ -8,17 +8,138 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class ListBoxSelectionService {
+    selectedIndices = [];
+    selectionMode = 'single';
+    lastSelectedOrUnselectedIndex = null;
+    rangeSelectionTargetIndex = null;
+    rangeSelectionAnchorIndex = null;
     onSelect = new EventEmitter();
-    selectedIndex = null;
-    select(index) {
-        this.onSelect.next({ index: index, prevIndex: this.selectedIndex });
-        this.selectedIndex = index;
+    select(index, ctrlKey = false, shiftKey = false) {
+        const previousSelection = [...this.selectedIndices];
+        let selectedIndices = [];
+        let deselectedIndices = null;
+        const previousTargetIndex = this.rangeSelectionTargetIndex;
+        if (this.selectionMode === 'single') {
+            if (ctrlKey) {
+                const isSelected = this.isSelected(index);
+                if (isSelected) {
+                    this.selectedIndices = [];
+                    deselectedIndices = [index];
+                }
+                else {
+                    this.selectedIndices = [index];
+                    selectedIndices = [index];
+                    if (previousSelection.length > 0) {
+                        deselectedIndices = previousSelection;
+                    }
+                }
+                this.lastSelectedOrUnselectedIndex = index;
+            }
+            else {
+                this.selectedIndices = [index];
+                selectedIndices = [index];
+                this.lastSelectedOrUnselectedIndex = index;
+                this.rangeSelectionAnchorIndex = index;
+                if (previousSelection.length > 0 && previousSelection[0] !== index) {
+                    deselectedIndices = previousSelection;
+                }
+            }
+        }
+        else if (this.selectionMode === 'multiple') {
+            if (shiftKey) {
+                let anchorIndex = this.rangeSelectionAnchorIndex ?? this.lastSelectedOrUnselectedIndex ?? 0;
+                if (index === anchorIndex) {
+                    this.selectedIndices = [anchorIndex];
+                    this.rangeSelectionTargetIndex = index;
+                    selectedIndices = this.selectedIndices.filter(i => !previousSelection.includes(i));
+                    const nowDeselected = previousSelection.filter(i => !this.selectedIndices.includes(i));
+                    deselectedIndices = nowDeselected.length > 0 ? nowDeselected : null;
+                }
+                else {
+                    if (previousTargetIndex !== null && previousTargetIndex !== anchorIndex) {
+                        const previousDirection = previousTargetIndex > anchorIndex ? 'down' : 'up';
+                        const currentDirection = index > anchorIndex ? 'down' : 'up';
+                        if (previousDirection !== currentDirection) {
+                            this.rangeSelectionAnchorIndex = previousTargetIndex;
+                            anchorIndex = previousTargetIndex;
+                        }
+                    }
+                    const startIndex = Math.min(anchorIndex, index);
+                    const endIndex = Math.max(anchorIndex, index);
+                    this.selectedIndices = [];
+                    for (let i = startIndex; i <= endIndex; i++) {
+                        this.selectedIndices.push(i);
+                    }
+                    this.rangeSelectionTargetIndex = index;
+                    selectedIndices = this.selectedIndices.filter(i => !previousSelection.includes(i));
+                    const nowDeselected = previousSelection.filter(i => !this.selectedIndices.includes(i));
+                    deselectedIndices = nowDeselected.length > 0 ? nowDeselected : null;
+                }
+            }
+            else if (ctrlKey) {
+                const indexInSelection = this.selectedIndices.indexOf(index);
+                if (indexInSelection === -1) {
+                    this.selectedIndices.push(index);
+                    selectedIndices = [index];
+                }
+                else {
+                    this.selectedIndices.splice(indexInSelection, 1);
+                    deselectedIndices = [index];
+                }
+                this.lastSelectedOrUnselectedIndex = index;
+                this.rangeSelectionAnchorIndex = index;
+                this.rangeSelectionTargetIndex = index;
+            }
+            else {
+                this.selectedIndices = [index];
+                selectedIndices = [index];
+                this.lastSelectedOrUnselectedIndex = index;
+                this.rangeSelectionAnchorIndex = index;
+                this.rangeSelectionTargetIndex = index;
+                const nowDeselected = previousSelection.filter(i => i !== index);
+                deselectedIndices = nowDeselected.length > 0 ? nowDeselected : null;
+            }
+        }
+        this.onSelect.next({
+            selectedIndices: selectedIndices.length > 0 ? selectedIndices : null,
+            deselectedIndices
+        });
+    }
+    selectRange(targetIndex) {
+        const anchorIndex = this.lastSelectedOrUnselectedIndex ?? 0;
+        const startIndex = Math.min(anchorIndex, targetIndex);
+        const endIndex = Math.max(anchorIndex, targetIndex);
+        this.selectedIndices = [];
+        for (let i = startIndex; i <= endIndex; i++) {
+            this.selectedIndices.push(i);
+        }
+    }
+    setSelectedIndices(indices) {
+        this.selectedIndices = [...indices];
+    }
+    addToSelectedIndices(index) {
+        if (this.selectionMode === 'single') {
+            this.selectedIndices = [index];
+        }
+        else if (this.selectedIndices.indexOf(index) === -1) {
+            this.selectedIndices = [...this.selectedIndices, index];
+        }
+    }
+    selectAll(totalItems) {
+        if (this.selectionMode === 'multiple') {
+            this.selectedIndices = Array.from({ length: totalItems }, (_, i) => i);
+        }
+    }
+    areAllSelected(totalItems) {
+        return this.selectedIndices.length === totalItems && totalItems > 0;
     }
     isSelected(index) {
-        return index === this.selectedIndex;
+        return this.selectedIndices.indexOf(index) !== -1;
     }
     clearSelection() {
-        this.selectedIndex = null;
+        this.selectedIndices = [];
+        this.lastSelectedOrUnselectedIndex = null;
+        this.rangeSelectionAnchorIndex = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListBoxSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListBoxSelectionService });