@progress/kendo-angular-dropdowns 7.1.0-dev.202208301423 → 7.2.0-dev.202209131018

package/common/data.service.d.ts

@@ -69,6 +69,11 @@ export declare class DataService {
      * Used to get the group at the provided index.
      */
     groupAt(index: number): any;
+    /**
+     * @hidden
+     * Used to get all group items indices.
+     */
+    groupItemsIndices(): number[];
     /**
      * @hidden
      * Used to get the field by which the data is grouped.

package/common/navigation/navigation-action.d.ts

@@ -21,5 +21,10 @@ export declare enum NavigationAction {
     Left = 12,
     Right = 13,
     PageDown = 14,
-    PageUp = 15
+    PageUp = 15,
+    SelectPrevious = 16,
+    SelectNext = 17,
+    SelectAll = 18,
+    SelectAllToBeginning = 19,
+    SelectAllToEnd = 20
 }

package/common/navigation/navigation.service.d.ts

@@ -39,6 +39,11 @@ export declare class NavigationService {
     end: EventEmitter<NavigationEvent>;
     pagedown: EventEmitter<NavigationEvent>;
     pageup: EventEmitter<NavigationEvent>;
+    selectnext: EventEmitter<NavigationEvent>;
+    selectprevious: EventEmitter<NavigationEvent>;
+    selectall: EventEmitter<NavigationEvent>;
+    selectalltobeginning: EventEmitter<NavigationEvent>;
+    selectalltoend: EventEmitter<NavigationEvent>;
     constructor(disabledItemsService: DisabledItemsService, selectionService: SelectionService);
     process(args: any): NavigationAction;
     private next;

package/common/selection/selection.service.d.ts

@@ -3,38 +3,52 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { EventEmitter } from '@angular/core';
+import { DisabledItemsService } from '../disabled-items/disabled-items.service';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
 export interface SelectionEvent {
     indices: number[];
-    added?: number;
-    removed?: number;
+    added?: number | number[];
+    removed?: number | number[];
     newSelection?: boolean;
+    preventClosingPopup?: boolean;
+    isMultipleSelection?: boolean;
 }
 /**
  * @hidden
  */
 export declare class SelectionService {
+    private disabledItemsService;
     onSelect: EventEmitter<SelectionEvent>;
     onChange: EventEmitter<SelectionEvent>;
     onFocus: EventEmitter<number>;
     total: number;
+    lastClickedIndex: number;
     private selectedIndices;
     private focusedIndex;
+    constructor(disabledItemsService: DisabledItemsService);
     getTotal(): number;
     isSelected(index: number): boolean;
     isFocused(index: number): boolean;
     focus(index: number): void;
     select(index: number): void;
-    add(index: number): void;
-    unselect(index: number): void;
+    add(index: number, preventClosingPopup?: boolean): void;
+    private indicesToBeRemoved;
+    private indicesToBeAdded;
+    emitMultipleAddedRemoved(): void;
+    addMultiple(indices: number[]): void;
+    deselect(index: number, preventClosingPopup?: boolean): void;
+    unselectMultiple(indices: number[]): void;
     change(index: number): void;
     resetSelection(index: number | number[]): void;
     get selected(): number[];
     get focused(): number;
     set focused(index: number);
+    selectFromTo(from: number, to: number): void;
+    unselectFromTo(from: number, to: number): void;
+    unselectNotNeededIndices(startOfSelection: number, endOfSelection: number, totalItems: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectionService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<SelectionService>;
 }

package/common/util.d.ts

@@ -157,3 +157,7 @@ export declare const getRoundedClass: (rounded: DropDownRounded) => string;
  * Return the fillMode class based on the component and fillMode input.
  */
 export declare const getFillModeClass: (component: string, fillMode: DropDownFillMode) => string;
+/**
+ * @hidden
+ */
+export declare const filterAndMap: (arr: any[], predicate: (item: any) => boolean, mapper: (item: any) => any) => any[];

package/esm2015/autocomplete/autocomplete.component.js

@@ -752,6 +752,7 @@ export class AutoCompleteComponent {
         this.escSubscription = this.navigationService.esc.subscribe(this.handleEscape.bind(this));
         this.scrollSubscription = merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
             if (this.isOpen) {
+                event.originalEvent.preventDefault();
                 this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
             }
         });

package/esm2015/comboboxes/combobox.component.js

@@ -616,6 +616,7 @@ export class ComboBoxComponent {
         this.subs.add(this.navigationService.close.subscribe(() => this.togglePopup(false)));
         this.subs.add(merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
             if (this.isOpen) {
+                event.originalEvent.preventDefault();
                 this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
             }
         }));

package/esm2015/common/data.service.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Injectable } from '@angular/core';
-import { isPresent, hasProps, getter } from './util';
+import { isPresent, hasProps, getter, filterAndMap } from './util';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -178,6 +178,16 @@ export class DataService {
         }
         return this._flatData.find((item) => item.header && item.index === index);
     }
+    /**
+     * @hidden
+     * Used to get all group items indices.
+     */
+    groupItemsIndices() {
+        if (this.isGrouped) {
+            return filterAndMap(this.data, item => item.header, mappedItem => mappedItem.index);
+        }
+        return [];
+    }
     /**
      * @hidden
      * Used to get the field by which the data is grouped.

package/esm2015/common/list.component.js

@@ -142,7 +142,7 @@ export class ListComponent {
             this.selectionService.add(index);
         }
         if (!isChecked && this.selectionService.isSelected(index)) {
-            this.selectionService.unselect(index);
+            this.selectionService.deselect(index);
         }
     }
     prepareClasses() {

package/esm2015/common/navigation/navigation-action.js

@@ -24,4 +24,9 @@ export var NavigationAction;
     NavigationAction[NavigationAction["Right"] = 13] = "Right";
     NavigationAction[NavigationAction["PageDown"] = 14] = "PageDown";
     NavigationAction[NavigationAction["PageUp"] = 15] = "PageUp";
+    NavigationAction[NavigationAction["SelectPrevious"] = 16] = "SelectPrevious";
+    NavigationAction[NavigationAction["SelectNext"] = 17] = "SelectNext";
+    NavigationAction[NavigationAction["SelectAll"] = 18] = "SelectAll";
+    NavigationAction[NavigationAction["SelectAllToBeginning"] = 19] = "SelectAllToBeginning";
+    NavigationAction[NavigationAction["SelectAllToEnd"] = 20] = "SelectAllToEnd";
 })(NavigationAction || (NavigationAction = {}));

package/esm2015/common/navigation/navigation.service.js

@@ -44,10 +44,17 @@ export class NavigationService {
         this.end = new EventEmitter();
         this.pagedown = new EventEmitter();
         this.pageup = new EventEmitter();
+        this.selectnext = new EventEmitter();
+        this.selectprevious = new EventEmitter();
+        this.selectall = new EventEmitter();
+        this.selectalltobeginning = new EventEmitter();
+        this.selectalltoend = new EventEmitter();
     }
     process(args) {
         const keyCode = args.originalEvent.keyCode;
         const altKey = args.originalEvent.altKey;
+        const shiftKey = args.originalEvent.shiftKey;
+        const ctrlKey = args.originalEvent.ctrlKey;
         let index;
         let action = NavigationAction.Undefined;
         if (altKey && keyCode === Keys.ArrowDown) {
@@ -56,6 +63,21 @@ export class NavigationService {
         else if (altKey && keyCode === Keys.ArrowUp) {
             action = NavigationAction.Close;
         }
+        else if (shiftKey && keyCode === Keys.ArrowUp) {
+            action = NavigationAction.SelectPrevious;
+        }
+        else if (shiftKey && keyCode === Keys.ArrowDown) {
+            action = NavigationAction.SelectNext;
+        }
+        else if (ctrlKey && keyCode === Keys.KeyA) {
+            action = NavigationAction.SelectAll;
+        }
+        else if (ctrlKey && shiftKey && keyCode === Keys.Home) {
+            action = NavigationAction.SelectAllToBeginning;
+        }
+        else if (ctrlKey && shiftKey && keyCode === Keys.End) {
+            action = NavigationAction.SelectAllToEnd;
+        }
         else if (keyCode === Keys.Enter) {
             action = NavigationAction.Enter;
         }

package/esm2015/common/selection/selectable.directive.js

@@ -24,12 +24,13 @@ export class SelectableDirective {
     }
     onClick(event) {
         event.stopPropagation();
+        this.selectionService.lastClickedIndex = this.index;
         if (this.checkboxes.enabled && !this.checkboxes.checkOnClick) {
             return;
         }
         if (this.multipleSelection) {
             if (this.selectionService.isSelected(this.index)) {
-                this.selectionService.unselect(this.index);
+                this.selectionService.deselect(this.index);
             }
             else {
                 this.selectionService.add(this.index);

package/esm2015/common/selection/selection.service.js

@@ -5,16 +5,20 @@
 import { Injectable, EventEmitter } from '@angular/core';
 import { isPresent } from '../util';
 import * as i0 from "@angular/core";
+import * as i1 from "../disabled-items/disabled-items.service";
 /**
  * @hidden
  */
 export class SelectionService {
-    constructor() {
+    constructor(disabledItemsService) {
+        this.disabledItemsService = disabledItemsService;
         this.onSelect = new EventEmitter();
         this.onChange = new EventEmitter();
         this.onFocus = new EventEmitter();
         this.total = 0;
         this.selectedIndices = [];
+        this.indicesToBeRemoved = [];
+        this.indicesToBeAdded = [];
     }
     getTotal() {
         return this.total;
@@ -43,7 +47,7 @@ export class SelectionService {
             newSelection: isPresent(index)
         });
     }
-    add(index) {
+    add(index, preventClosingPopup) {
         if (this.isSelected(index)) {
             return;
         }
@@ -51,20 +55,47 @@ export class SelectionService {
         this.focused = index;
         this.onChange.emit({
             added: index,
-            indices: this.selectedIndices.slice()
+            indices: this.selectedIndices.slice(),
+            preventClosingPopup: preventClosingPopup
+        });
+    }
+    emitMultipleAddedRemoved() {
+        this.onChange.emit({
+            added: this.indicesToBeAdded,
+            removed: this.indicesToBeRemoved,
+            indices: this.selectedIndices.slice(),
+            preventClosingPopup: true,
+            isMultipleSelection: true
         });
+        this.indicesToBeAdded = [];
+        this.indicesToBeRemoved = [];
+    }
+    addMultiple(indices) {
+        this.indicesToBeAdded = indices.slice();
+        this.selectedIndices.push(...indices);
     }
-    unselect(index) {
+    deselect(index, preventClosingPopup) {
         if (!this.isSelected(index)) {
             return;
         }
         const position = this.selectedIndices.indexOf(index);
         this.selectedIndices.splice(position, 1);
         this.focused = index;
+        if (this.selected.length === 0) {
+            this.lastClickedIndex = null;
+        }
         this.onChange.emit({
             indices: this.selectedIndices.slice(),
-            removed: index
+            removed: index,
+            preventClosingPopup: preventClosingPopup
+        });
+    }
+    unselectMultiple(indices) {
+        indices.forEach((index) => {
+            const position = this.selectedIndices.indexOf(index);
+            this.selectedIndices.splice(position, 1);
         });
+        this.indicesToBeRemoved = indices.slice();
     }
     change(index) {
         const newSelection = isPresent(index) && !this.isSelected(index);
@@ -91,9 +122,41 @@ export class SelectionService {
             this.onFocus.emit(index);
         }
     }
+    selectFromTo(from, to) {
+        let addedIndices = [];
+        for (let i = from; i <= to; i++) {
+            if (!this.isSelected(i) && !this.disabledItemsService.isIndexDisabled(i)) {
+                addedIndices.push(i);
+            }
+        }
+        this.addMultiple(addedIndices);
+    }
+    unselectFromTo(from, to) {
+        let indicesToBeUnselected = [];
+        for (let i = from; i >= to; i--) {
+            if (this.isSelected(i) && !this.disabledItemsService.isIndexDisabled(i)) {
+                indicesToBeUnselected.push(i);
+            }
+        }
+        this.unselectMultiple(indicesToBeUnselected);
+    }
+    unselectNotNeededIndices(startOfSelection, endOfSelection, totalItems) {
+        let indicesToBeUnselected = [];
+        for (let i = 0; i < startOfSelection; i++) {
+            if (this.isSelected(i)) {
+                indicesToBeUnselected.push(i);
+            }
+        }
+        for (let i = endOfSelection + 1; i < totalItems; i++) {
+            if (this.isSelected(i)) {
+                indicesToBeUnselected.push(i);
+            }
+        }
+        this.unselectMultiple(indicesToBeUnselected);
+    }
 }
-SelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionService, deps: [{ token: i1.DisabledItemsService }], target: i0.ɵɵFactoryTarget.Injectable });
 SelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: i1.DisabledItemsService }]; } });

package/esm2015/common/util.js

@@ -324,3 +324,7 @@ export const getFillModeClass = (component, fillMode) => {
     };
     return FILLMODE_CLASSES[fillMode];
 };
+/**
+ * @hidden
+ */
+export const filterAndMap = (arr, predicate, mapper) => arr.reduce((acc, curr) => predicate(curr) ? [...acc, mapper(curr)] : acc, []);

package/esm2015/dropdownlist/dropdownlist.component.js

@@ -898,6 +898,7 @@ export class DropDownListComponent {
             .subscribe((event) => this.selectionService.select(event.index)));
         this.subs.add(merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
             if (this.isOpen) {
+                event.originalEvent.preventDefault();
                 this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
             }
         }));

package/esm2015/multiselect/multiselect.component.js

@@ -5,7 +5,7 @@
 import { guid, isPresent, isArray, isObjectArray, resolveAllValues, selectedIndices, getter, isNumber, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass } from '../common/util';
 import { SearchBarComponent } from '../common/searchbar.component';
 import { ViewChild, ViewContainerRef, Component, HostBinding, Input, Output, EventEmitter, isDevMode, forwardRef, ContentChild, Optional, Inject, HostListener } from '@angular/core';
-import { Subscription, Subject, of } from 'rxjs';
+import { Subscription, Subject, of, merge } from 'rxjs';
 import { catchError, filter, map, tap } from 'rxjs/operators';
 import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged } from '@progress/kendo-angular-common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -560,6 +560,16 @@ export class MultiSelectComponent {
     get isLoading() {
         return this.loading;
     }
+    /**
+     * @hidden
+     */
+    handleKeyboardEvent(event) {
+        if (event.ctrlKey && event.keyCode === Keys.KeyA) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            this.handleSelectAll();
+        }
+    }
     /**
      * @hidden
      */
@@ -651,23 +661,45 @@ export class MultiSelectComponent {
      * @hidden
      */
     change(event) {
-        const isCustomItem = (isPresent(event.added) || isPresent(event.removed)) && (event.added === -1 || event.removed === -1);
-        if (isCustomItem) {
-            this.addCustomValue(this.text);
-            return; // The change is emited asynchronosly.
-        }
-        // Existing items.
-        if (isPresent(event.added)) {
-            const dataItem = this.dataService.itemAt(event.added);
-            const newItem = (this.valuePrimitive && isPresent(dataItem) && isPresent(dataItem[this.valueField])) ? dataItem[this.valueField] : dataItem;
-            this.value = [...this.value, newItem];
-        }
-        if (isPresent(event.removed)) {
-            const dataItem = this.dataService.itemAt(event.removed);
-            const filter = (item) => getter(item, this.valueField) !== getter(dataItem, this.valueField);
-            this.value = this.value.filter(filter);
-            this.selectionService.focused = event.removed;
-            this.cdr.detectChanges();
+        if (event.isMultipleSelection) {
+            // Existing items.
+            if (isPresent(event.added) && event.added.length > 0) {
+                event.added.forEach((itemIndex) => {
+                    const dataItem = this.dataService.itemAt(itemIndex);
+                    const newItem = (this.valuePrimitive && isPresent(dataItem) && isPresent(dataItem[this.valueField])) ? dataItem[this.valueField] : dataItem;
+                    if (newItem) {
+                        this.value = [...this.value, newItem];
+                    }
+                });
+            }
+            if (isPresent(event.removed) && event.removed.length > 0) {
+                event.removed.forEach((itemIndex) => {
+                    const dataItem = this.dataService.itemAt(itemIndex);
+                    const filter = (item) => getter(item, this.valueField) !== getter(dataItem, this.valueField);
+                    this.value = this.value.filter(filter);
+                });
+                this.cdr.detectChanges();
+            }
+        }
+        else {
+            const isCustomItem = (isPresent(event.added) || isPresent(event.removed)) && (event.added === -1 || event.removed === -1);
+            if (isCustomItem) {
+                this.addCustomValue(this.text);
+                return; // The change is emited asynchronosly.
+            }
+            // Existing items.
+            if (isPresent(event.added)) {
+                const dataItem = this.dataService.itemAt(event.added);
+                const newItem = (this.valuePrimitive && isPresent(dataItem) && isPresent(dataItem[this.valueField])) ? dataItem[this.valueField] : dataItem;
+                this.value = [...this.value, newItem];
+            }
+            if (isPresent(event.removed)) {
+                const dataItem = this.dataService.itemAt(event.removed);
+                const filter = (item) => getter(item, this.valueField) !== getter(dataItem, this.valueField);
+                this.value = this.value.filter(filter);
+                this.selectionService.focused = event.removed;
+                this.cdr.detectChanges();
+            }
         }
         this.emitValueChange();
     }
@@ -800,10 +832,11 @@ export class MultiSelectComponent {
      * @hidden
      */
     clearAll(event) {
-        event.stopImmediatePropagation();
-        event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
+        event === null || event === void 0 ? void 0 : event.preventDefault();
         this.focus();
         this.clearFilter();
+        this.selectionService.lastClickedIndex = null;
         const selected = this.selectionService.selected;
         this.value = this.value.filter((_item, index) => this.disabledItemsService.isIndexDisabled(selected[index]));
         this.emitValueChange();
@@ -952,7 +985,17 @@ export class MultiSelectComponent {
             this.navigationService.delete.pipe(filter(isTagFocused)).subscribe(this.handleDelete.bind(this)),
             this.navigationService.left.subscribe(this.direction === 'rtl' ? this.handleRightKey.bind(this) : this.handleLeftKey.bind(this)),
             this.navigationService.right.subscribe(this.direction === 'rtl' ? this.handleLeftKey.bind(this) : this.handleRightKey.bind(this)),
-            this.navigationService.down.subscribe((event) => this.handleDownKey(event.index))
+            this.navigationService.down.subscribe((event) => this.handleDownKey(event.index)),
+            this.navigationService.selectprevious.pipe(filter(isOpen)).subscribe((event) => this.handleSelectUpDown(event)),
+            this.navigationService.selectnext.pipe(filter(isOpen)).subscribe((event) => this.handleSelectUpDown(event)),
+            this.navigationService.selectalltobeginning.pipe(filter(isOpen)).subscribe(() => this.handleSelectAllToBeginning()),
+            this.navigationService.selectalltoend.pipe(filter(isOpen)).subscribe(() => this.handleSelectAllToEnd()),
+            merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
+                if (this.isOpen) {
+                    event.originalEvent.preventDefault();
+                    this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
+                }
+            })
         ].forEach(s => this.observableSubscriptions.add(s));
     }
     subscribeTouchEvents() {
@@ -1011,7 +1054,7 @@ export class MultiSelectComponent {
             return;
         }
         if (isNumber(index)) {
-            this.selectionService.unselect(index);
+            this.selectionService.deselect(index);
             this.selectionService.focused = index;
             this.togglePopup(false);
         }
@@ -1076,7 +1119,7 @@ export class MultiSelectComponent {
                 }
                 else {
                     if (!customItem && this.selectionService.isSelected(itemIndex)) {
-                        this.selectionService.unselect(itemIndex);
+                        this.selectionService.deselect(itemIndex);
                         this.selectionService.focused = itemIndex;
                     }
                     else {
@@ -1098,7 +1141,7 @@ export class MultiSelectComponent {
     }
     handleItemChange(event) {
         this.change(event);
-        if (this.autoClose) {
+        if (this.autoClose && !event.preventClosingPopup) {
             this.togglePopup(false);
         }
         if (this.autoClose || !this.filterable) {
@@ -1108,6 +1151,7 @@ export class MultiSelectComponent {
     handleEnter(event) {
         const service = this.selectionService;
         const focusedIndex = this.selectionService.focused;
+        this.selectionService.lastClickedIndex = focusedIndex;
         if (this.isOpen) {
             event.originalEvent.preventDefault();
         }
@@ -1118,7 +1162,7 @@ export class MultiSelectComponent {
             return; // Clear filter & close are done at customValueSubscription due to race conditions.
         }
         if (service.isSelected(focusedIndex)) {
-            service.unselect(focusedIndex);
+            service.deselect(focusedIndex);
             service.focused = focusedIndex;
         }
         else {
@@ -1141,6 +1185,85 @@ export class MultiSelectComponent {
     handleHome() {
         this.focusedTagIndex = 0;
     }
+    sortSelectionAscending() {
+        return this.selectionService.selected.sort((a, b) => a - b);
+    }
+    handleSelectAll() {
+        const selectedItemsCount = this.selectionService.selected.length;
+        const dataItemsCount = this.dataService.data.length;
+        const dataItemsWithoutHeadersCount = this.dataService.data.filter(i => !i.header).length;
+        if ((!this.dataService.grouped && selectedItemsCount === dataItemsCount) ||
+            (this.dataService.grouped && selectedItemsCount === dataItemsWithoutHeadersCount)) {
+            this.clearAll();
+        }
+        else {
+            this.selectionService.selectFromTo(0, dataItemsCount - 1);
+            this.selectionService.emitMultipleAddedRemoved();
+        }
+    }
+    handleSelectAllToBeginning() {
+        const selectedItemsCount = this.selectionService.selected.length;
+        const dataItemsCount = this.dataService.data.length;
+        const focusedItem = this.selectionService.focused;
+        const largestIndex = this.sortSelectionAscending()[selectedItemsCount - 1];
+        if (selectedItemsCount !== dataItemsCount) {
+            this.selectionService.unselectFromTo(largestIndex, focusedItem + 1);
+            this.selectionService.selectFromTo(0, focusedItem);
+        }
+        this.nextTick(() => this.selectionService.focus(0));
+        this.selectionService.emitMultipleAddedRemoved();
+    }
+    handleSelectAllToEnd() {
+        const selectedItemsCount = this.selectionService.selected.length;
+        const dataItemsCount = this.dataService.data.length;
+        const focusedItem = this.selectionService.focused;
+        if (selectedItemsCount !== dataItemsCount) {
+            this.selectionService.unselectFromTo(focusedItem - 1, 0);
+            this.selectionService.selectFromTo(focusedItem, dataItemsCount - 1);
+        }
+        if (this.dataService.grouped) {
+            const lastItemIndex = this.dataService.groupIndices[this.dataService.groupIndices.length - 1] - 1;
+            this.nextTick(() => this.selectionService.focus(lastItemIndex));
+        }
+        else {
+            this.nextTick(() => this.selectionService.focus(dataItemsCount - 1));
+        }
+        this.selectionService.emitMultipleAddedRemoved();
+    }
+    handleSelectUpDown(event) {
+        const focusedIndex = this.selectionService.focused;
+        if (!isPresent(focusedIndex)) {
+            return;
+        }
+        let indexToSelect;
+        if (event.originalEvent.key === 'ArrowUp') {
+            indexToSelect = focusedIndex > 0 ? focusedIndex - 1 : focusedIndex;
+        }
+        else {
+            indexToSelect = focusedIndex < this.dataService.data.length - 1 ? focusedIndex + 1 : focusedIndex;
+        }
+        if (!isPresent(this.selectionService.lastClickedIndex)) {
+            this.selectionService.lastClickedIndex = focusedIndex;
+        }
+        this.selectRangeFromTo(indexToSelect);
+    }
+    /**
+     * Selects all items between the focused item and the last clicked item (index). Also removes all other selected items.
+     */
+    selectRangeFromTo(indexToSelect) {
+        const lastClickedIndex = this.selectionService.lastClickedIndex;
+        if (lastClickedIndex > indexToSelect) {
+            this.selectionService.unselectNotNeededIndices(indexToSelect, lastClickedIndex, this.dataService.data.length);
+            this.selectionService.selectFromTo(indexToSelect, this.selectionService.lastClickedIndex);
+            this.selectionService.emitMultipleAddedRemoved();
+        }
+        else {
+            this.selectionService.unselectNotNeededIndices(lastClickedIndex, indexToSelect, this.dataService.data.length);
+            this.selectionService.selectFromTo(lastClickedIndex, indexToSelect);
+            this.selectionService.emitMultipleAddedRemoved();
+        }
+        this.nextTick(() => this.selectionService.focus(indexToSelect));
+    }
     handleUp(index) {
         this.selectionService.focused = index;
     }
@@ -1339,7 +1462,7 @@ export class MultiSelectComponent {
     }
 }
 MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.DataService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { listeners: { "mousedown": "hostMousedown($event)" }, properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)", "mousedown": "hostMousedown($event)" }, properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
         MULTISELECT_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -1778,6 +1901,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], isLoading: [{
                 type: HostBinding,
                 args: ['class.k-loading']
+            }], handleKeyboardEvent: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
             }], hostMousedown: [{
                 type: HostListener,
                 args: ['mousedown', ['$event']]

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1661869333,
+    publishDate: 1663064236,
     version: '',
     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'
 };