@progress/kendo-angular-dropdowns 7.1.0-dev.202208301349 → 7.2.0-dev.202209121509

package/esm2015/multiselect/multiselect.component.js

@@ -248,7 +248,6 @@ export class MultiSelectComponent {
          */
         this.removeTag = new EventEmitter();
         this.hostClasses = true;
-        this.role = 'combobox';
         this.initialized = false;
         this._size = 'medium';
         this._rounded = 'medium';
@@ -561,8 +560,15 @@ export class MultiSelectComponent {
     get isLoading() {
         return this.loading;
     }
-    get isAriaExpanded() {
-        return this.isOpen;
+    /**
+     * @hidden
+     */
+    handleKeyboardEvent(event) {
+        if (event.ctrlKey && event.keyCode === Keys.KeyA) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            this.handleSelectAll();
+        }
     }
     /**
      * @hidden
@@ -625,11 +631,6 @@ export class MultiSelectComponent {
         }
         return prefix + "-" + getter(item, this.valueField);
     }
-    get noDataLabel() {
-        if (this.dataService.itemsCount === 0) {
-            return this.messageFor('noDataText');
-        }
-    }
     get clearButtonVisiblity() {
         if (this.touchEnabled) {
             return 'visible';
@@ -660,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();
     }
@@ -809,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();
@@ -961,7 +985,11 @@ 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())
         ].forEach(s => this.observableSubscriptions.add(s));
     }
     subscribeTouchEvents() {
@@ -1020,7 +1048,7 @@ export class MultiSelectComponent {
             return;
         }
         if (isNumber(index)) {
-            this.selectionService.unselect(index);
+            this.selectionService.deselect(index);
             this.selectionService.focused = index;
             this.togglePopup(false);
         }
@@ -1085,7 +1113,7 @@ export class MultiSelectComponent {
                 }
                 else {
                     if (!customItem && this.selectionService.isSelected(itemIndex)) {
-                        this.selectionService.unselect(itemIndex);
+                        this.selectionService.deselect(itemIndex);
                         this.selectionService.focused = itemIndex;
                     }
                     else {
@@ -1107,7 +1135,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) {
@@ -1117,6 +1145,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();
         }
@@ -1127,7 +1156,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 {
@@ -1150,6 +1179,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;
     }
@@ -1285,6 +1393,11 @@ export class MultiSelectComponent {
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.height;
         popupWrapper.setAttribute("dir", this.direction);
+        const listBox = popupWrapper.querySelector('ul.k-list-ul');
+        const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby');
+        if (ariaLabel) {
+            listBox.setAttribute('aria-labelledby', ariaLabel);
+        }
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.optionsList.scrollToItem(this.selectionService.focused);
@@ -1343,7 +1456,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", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded" } }, 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,
@@ -1388,10 +1501,12 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             <kendo-searchbar
                 #searchbar
                 [id]="focusableId"
-                [role]="'textbox'"
+                [role]="'combobox'"
                 [tagListId]="tagListId"
+                [listId]="listBoxId"
+                [isLoading]="loading"
+                [isFilterable]="filterable"
                 [activeDescendant]="activeDescendant"
-                [noDataLabel]="noDataLabel"
                 [userInput]="text"
                 [disabled]="disabled"
                 [readonly]="readonly"
@@ -1465,6 +1580,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 [virtual]="virtual"
                 (pageChange)="pageChange($event)"
                 [checkboxes]="checkboxes"
+                [isMultiselect]="true"
                 >
             </kendo-list>
             <!--no data template-->
@@ -1489,7 +1605,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: i7.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i8.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "noDataLabel", "disabled", "readonly", "tabIndex", "popupOpen", "role", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i9.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i14.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: i7.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i8.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i9.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i14.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -1541,10 +1657,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <kendo-searchbar
                 #searchbar
                 [id]="focusableId"
-                [role]="'textbox'"
+                [role]="'combobox'"
                 [tagListId]="tagListId"
+                [listId]="listBoxId"
+                [isLoading]="loading"
+                [isFilterable]="filterable"
                 [activeDescendant]="activeDescendant"
-                [noDataLabel]="noDataLabel"
                 [userInput]="text"
                 [disabled]="disabled"
                 [readonly]="readonly"
@@ -1618,6 +1736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [virtual]="virtual"
                 (pageChange)="pageChange($event)"
                 [checkboxes]="checkboxes"
+                [isMultiselect]="true"
                 >
             </kendo-list>
             <!--no data template-->
@@ -1776,12 +1895,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], isLoading: [{
                 type: HostBinding,
                 args: ['class.k-loading']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], isAriaExpanded: [{
-                type: HostBinding,
-                args: ['attr.aria-expanded']
+            }], 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: 1661867343,
+    publishDate: 1662995282,
     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'
 };