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

package/comboboxes/combobox.component.d.ts

@@ -69,7 +69,6 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
      */
     togglePopup(open: boolean): void;
     get activeDescendant(): string;
-    get noDataLabel(): string;
     get appendTo(): ViewContainerRef;
     dataItem: any;
     selected: any[];

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/list.component.d.ts

@@ -45,6 +45,8 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     virtual: VirtualizationSettings;
     type: ListType;
     checkboxes: MultiSelectCheckableSettings;
+    ariaLive: string;
+    isMultiselect: boolean;
     set data(data: any[]);
     get data(): any[];
     set size(size: DropDownSize);
@@ -108,6 +110,7 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
      * Indicates whether a scrollbar is currently rendered in the list.
      */
     hasScrollbar(): boolean;
+    isItemSelected(index: number): boolean;
     /**
      * Sets the list's content overflow (hides/shows scrollbar)
      */
@@ -123,5 +126,5 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     private firstGroupHeaderInTargetedPage;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "kendo-list", never, { "selected": "selected"; "focused": "focused"; "textField": "textField"; "valueField": "valueField"; "height": "height"; "template": "template"; "groupTemplate": "groupTemplate"; "fixedGroupTemplate": "fixedGroupTemplate"; "show": "show"; "id": "id"; "optionPrefix": "optionPrefix"; "multipleSelection": "multipleSelection"; "virtual": "virtual"; "type": "type"; "checkboxes": "checkboxes"; "data": "data"; "size": "size"; "rounded": "rounded"; }, { "onClick": "onClick"; "pageChange": "pageChange"; "listResize": "listResize"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "kendo-list", never, { "selected": "selected"; "focused": "focused"; "textField": "textField"; "valueField": "valueField"; "height": "height"; "template": "template"; "groupTemplate": "groupTemplate"; "fixedGroupTemplate": "fixedGroupTemplate"; "show": "show"; "id": "id"; "optionPrefix": "optionPrefix"; "multipleSelection": "multipleSelection"; "virtual": "virtual"; "type": "type"; "checkboxes": "checkboxes"; "ariaLive": "ariaLive"; "isMultiselect": "isMultiselect"; "data": "data"; "size": "size"; "rounded": "rounded"; }, { "onClick": "onClick"; "pageChange": "pageChange"; "listResize": "listResize"; }, never, never>;
 }

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/searchbar.component.d.ts

@@ -2,26 +2,31 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Renderer2, EventEmitter, ElementRef, OnChanges, OnInit, OnDestroy } from '@angular/core';
+import { Renderer2, EventEmitter, ElementRef, OnChanges, OnInit, OnDestroy, Injector, AfterContentChecked } from '@angular/core';
 import { Direction } from './models/direction';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy {
+export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy, AfterContentChecked {
     private localization;
+    private injector;
     direction: Direction;
     id: string;
     listId: string;
     tagListId: string;
     activeDescendant: string;
-    noDataLabel: string;
     disabled: boolean;
     readonly: boolean;
     tabIndex: number;
     popupOpen: boolean;
     role: string;
+    isLoading: boolean;
+    set isSuggestable(isSuggestable: boolean);
+    get isSuggestable(): boolean;
+    set isFilterable(isFilterable: boolean);
+    get isFilterable(): boolean;
     get userInput(): string;
     set userInput(userInput: string);
     suggestedText: string;
@@ -39,14 +44,20 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
     private _userInput;
     private _previousValue;
     private _placeholder;
+    private _isSuggestable;
+    private _isFilterable;
+    private control?;
     private renderer;
-    private localizationChangeSubscription;
-    constructor(localization: LocalizationService, renderer: Renderer2);
+    private subs;
+    constructor(localization: LocalizationService, renderer: Renderer2, injector: Injector);
     ngOnInit(): void;
+    ngAfterContentChecked(): void;
     ngOnChanges(changes: any): void;
     ngOnDestroy(): void;
     private writeInputValue;
     private setInputSelection;
+    private setAriaInvalid;
+    private setAriaAutocomplete;
     handleInput(event: any): void;
     handleFocus(event: any): void;
     handleBlur(event: any): void;
@@ -55,5 +66,5 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
     blur(): void;
     setInputSize(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SearchBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SearchBarComponent, "kendo-searchbar", never, { "id": "id"; "listId": "listId"; "tagListId": "tagListId"; "activeDescendant": "activeDescendant"; "noDataLabel": "noDataLabel"; "disabled": "disabled"; "readonly": "readonly"; "tabIndex": "tabIndex"; "popupOpen": "popupOpen"; "role": "role"; "userInput": "userInput"; "suggestedText": "suggestedText"; "placeholder": "placeholder"; }, { "valueChange": "valueChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onNavigate": "onNavigate"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SearchBarComponent, "kendo-searchbar", never, { "id": "id"; "listId": "listId"; "tagListId": "tagListId"; "activeDescendant": "activeDescendant"; "disabled": "disabled"; "readonly": "readonly"; "tabIndex": "tabIndex"; "popupOpen": "popupOpen"; "role": "role"; "isLoading": "isLoading"; "isSuggestable": "isSuggestable"; "isFilterable": "isFilterable"; "userInput": "userInput"; "suggestedText": "suggestedText"; "placeholder": "placeholder"; }, { "valueChange": "valueChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onNavigate": "onNavigate"; }, never, never>;
 }

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/shared.module.d.ts

@@ -21,6 +21,6 @@ import * as i13 from "./shared-directives.module";
  */
 export declare class SharedModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SharedModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedModule, [typeof i1.ListComponent, typeof i2.ListItemDirective, typeof i3.SelectableDirective, typeof i4.SearchBarComponent, typeof i5.TemplateContextDirective, typeof i6.TagListComponent, typeof i7.CheckDirective, typeof i8.CheckAllDirective], [typeof i9.CommonModule, typeof i10.FormsModule, typeof i11.PopupModule, typeof i12.ResizeSensorModule, typeof i13.SharedDirectivesModule, typeof i12.EventsModule], [typeof i1.ListComponent, typeof i2.ListItemDirective, typeof i3.SelectableDirective, typeof i4.SearchBarComponent, typeof i5.TemplateContextDirective, typeof i6.TagListComponent, typeof i7.CheckDirective, typeof i8.CheckAllDirective, typeof i9.CommonModule, typeof i10.FormsModule, typeof i11.PopupModule, typeof i12.ResizeSensorModule, typeof i13.SharedDirectivesModule, typeof i12.EventsModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedModule, [typeof i1.ListComponent, typeof i2.ListItemDirective, typeof i3.SelectableDirective, typeof i4.SearchBarComponent, typeof i5.TemplateContextDirective, typeof i6.TagListComponent, typeof i7.CheckDirective, typeof i8.CheckAllDirective], [typeof i9.CommonModule, typeof i10.FormsModule, typeof i10.ReactiveFormsModule, typeof i11.PopupModule, typeof i12.ResizeSensorModule, typeof i13.SharedDirectivesModule, typeof i12.EventsModule], [typeof i1.ListComponent, typeof i2.ListItemDirective, typeof i3.SelectableDirective, typeof i4.SearchBarComponent, typeof i5.TemplateContextDirective, typeof i6.TagListComponent, typeof i7.CheckDirective, typeof i8.CheckAllDirective, typeof i9.CommonModule, typeof i10.FormsModule, typeof i10.ReactiveFormsModule, typeof i11.PopupModule, typeof i12.ResizeSensorModule, typeof i13.SharedDirectivesModule, typeof i12.EventsModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SharedModule>;
 }

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/dropdownlist/dropdownlist.component.d.ts

@@ -2,8 +2,8 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Renderer2, ElementRef, EventEmitter, ViewContainerRef, OnDestroy, OnChanges, NgZone, TemplateRef, ChangeDetectorRef, OnInit, SimpleChanges, AfterContentChecked } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { Renderer2, ElementRef, EventEmitter, ViewContainerRef, OnDestroy, OnChanges, NgZone, TemplateRef, ChangeDetectorRef, OnInit, SimpleChanges, AfterContentChecked, Injector } from '@angular/core';
+import { ControlValueAccessor, FormControl } from '@angular/forms';
 import { PopupSettings } from '../common/models/popup-settings';
 import { SelectionService } from '../common/selection/selection.service';
 import { NavigationService } from '../common/navigation/navigation.service';
@@ -62,14 +62,18 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     private renderer;
     private cdr;
     touchEnabled: boolean;
+    private injector;
     get width(): any;
     get height(): any;
     get widgetTabIndex(): number;
     get ariaExpanded(): boolean;
-    get ariaOwns(): string;
+    get ariaControls(): string;
     get ariaActivedescendant(): string;
-    get noDataLabel(): string;
     get appendTo(): ViewContainerRef;
+    /**
+     * @hidden
+     */
+    get ariaLive(): string;
     /**
      * @hidden
      */
@@ -287,7 +291,8 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
      */
     onResize(): void;
     hostClasses: boolean;
-    get isDisabled(): boolean;
+    get isDisabledClass(): boolean;
+    get isDisabledAttribute(): string;
     get isLoading(): boolean;
     /**
      * @hidden
@@ -295,12 +300,15 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     focusableId: string;
     get dir(): string;
     get hostTabIndex(): number;
-    get isReadonly(): boolean;
+    get readonlyClass(): boolean;
+    get readonlyAttr(): string;
+    get isBusy(): boolean;
     role: string;
+    haspopup: string;
     get isAriaExpanded(): boolean;
-    get hostAriaOwns(): string;
+    get hostAriaControls(): string;
+    get hostAriaInvalid(): string;
     get hostAriaActivedescendant(): string;
-    get hostNoDataLabel(): string;
     /**
      * @hidden
      */
@@ -346,7 +354,7 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     private _size;
     private _rounded;
     private _fillMode;
-    constructor(wrapper: ElementRef, localization: LocalizationService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, dataService: DataService, _zone: NgZone, renderer: Renderer2, cdr: ChangeDetectorRef, touchEnabled: boolean);
+    constructor(wrapper: ElementRef, localization: LocalizationService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, dataService: DataService, _zone: NgZone, renderer: Renderer2, cdr: ChangeDetectorRef, touchEnabled: boolean, injector: Injector);
     ngOnInit(): void;
     /**
      * @hidden
@@ -369,6 +377,10 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
      * @hidden
      */
     ngAfterContentChecked(): void;
+    /**
+     * @hidden
+     */
+    get formControl(): FormControl;
     /**
      * Focuses a specific item of the DropDownList based on a provided index.
      * If there is a default item it is positioned at index -1.
@@ -504,6 +516,6 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     pageChange(event: PageChangeEvent): void;
     private assignAriaDescribedBy;
     private setComponentClasses;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DropDownListComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropDownListComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DropDownListComponent, "kendo-dropdownlist", ["kendoDropDownList"], { "iconClass": "iconClass"; "loading": "loading"; "data": "data"; "value": "value"; "textField": "textField"; "valueField": "valueField"; "popupSettings": "popupSettings"; "listHeight": "listHeight"; "defaultItem": "defaultItem"; "disabled": "disabled"; "itemDisabled": "itemDisabled"; "readonly": "readonly"; "filterable": "filterable"; "virtual": "virtual"; "ignoreCase": "ignoreCase"; "delay": "delay"; "valuePrimitive": "valuePrimitive"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "focusableId": "id"; }, { "valueChange": "valueChange"; "filterChange": "filterChange"; "selectionChange": "selectionChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; }, ["itemTemplate", "groupTemplate", "fixedGroupTemplate", "valueTemplate", "headerTemplate", "footerTemplate", "noDataTemplate"], never>;
 }

package/esm2015/autocomplete/autocomplete.component.js

@@ -274,11 +274,6 @@ export class AutoCompleteComponent {
         const dataItem = this.dataService.itemAt(this.selectionService.focused);
         return this.optionPrefix + "-" + getter(dataItem, this.valueField);
     }
-    get noDataLabel() {
-        if (this.data.length === 0) {
-            return this.messageFor('noDataText');
-        }
-    }
     /**
      * Sets the data of the AutoComplete.
      *
@@ -831,6 +826,11 @@ export class AutoCompleteComponent {
         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);
@@ -934,10 +934,12 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </ng-container>
         <kendo-searchbar #searchbar
             [role]="'combobox'"
+            [isSuggestable]="suggest"
+            [isFilterable]="filterable"
+            [isLoading]="isLoading"
             [id]="focusableId"
             [listId]="listBoxId"
             [activeDescendant]="activeDescendant"
-            [noDataLabel]="noDataLabel"
             [userInput]="text"
             [suggestedText]="suggestion"
             [disabled]="disabled"
@@ -1011,7 +1013,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: i7.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: i8.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: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i10.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.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: i8.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: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i10.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -1048,10 +1050,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-container>
         <kendo-searchbar #searchbar
             [role]="'combobox'"
+            [isSuggestable]="suggest"
+            [isFilterable]="filterable"
+            [isLoading]="isLoading"
             [id]="focusableId"
             [listId]="listBoxId"
             [activeDescendant]="activeDescendant"
-            [noDataLabel]="noDataLabel"
             [userInput]="text"
             [suggestedText]="suggestion"
             [disabled]="disabled"

package/esm2015/comboboxes/combobox.component.js

@@ -281,11 +281,6 @@ export class ComboBoxComponent {
         const dataItem = this.dataService.itemAt(this.selectionService.focused);
         return this.optionPrefix + "-" + (dataItem ? getter(dataItem, this.valueField) : "");
     }
-    get noDataLabel() {
-        if (this.data.length === 0) {
-            return this.messageFor('noDataText');
-        }
-    }
     get appendTo() {
         const { appendTo } = this.popupSettings;
         if (!appendTo || appendTo === 'root') {
@@ -1203,6 +1198,11 @@ export class ComboBoxComponent {
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.popupHeight;
         popupWrapper.setAttribute("dir", this.direction);
+        const listBox = this.popupRef.popupElement.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);
@@ -1307,8 +1307,10 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [role]="'combobox'"
             [id]="focusableId"
             [listId]="listBoxId"
+            [isLoading]="loading"
+            [isSuggestable]="suggest"
+            [isFilterable]="filterable"
             [activeDescendant]="activeDescendant"
-            [noDataLabel]="noDataLabel"
             [userInput]="text"
             [suggestedText]="getSuggestion()"
             [disabled]="disabled"
@@ -1336,6 +1338,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         </span>
         <button
             #select
+            tabindex="-1"
             unselectable="on"
             type="button"
             class="k-input-button k-button k-icon-button"
@@ -1395,7 +1398,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: i7.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: i8.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: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i10.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.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: i8.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: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i10.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1435,8 +1438,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [role]="'combobox'"
             [id]="focusableId"
             [listId]="listBoxId"
+            [isLoading]="loading"
+            [isSuggestable]="suggest"
+            [isFilterable]="filterable"
             [activeDescendant]="activeDescendant"
-            [noDataLabel]="noDataLabel"
             [userInput]="text"
             [suggestedText]="getSuggestion()"
             [disabled]="disabled"
@@ -1464,6 +1469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </span>
         <button
             #select
+            tabindex="-1"
             unselectable="on"
             type="button"
             class="k-input-button k-button k-icon-button"

package/esm2015/comboboxes/multicolumncombobox.component.js

@@ -183,6 +183,9 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
 
             i18n-clearTitle="kendo.multicolumncombobox.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-selectButtonText="kendo.multicolumncombobox.selectButtonText|The title of the select button"
+            selectButtonText="Select"
         >
         </ng-container>
         <kendo-searchbar
@@ -190,8 +193,10 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             [role]="'combobox'"
             [id]="focusableId"
             [listId]="listBoxId"
+            [isLoading]="loading"
+            [isSuggestable]="suggest"
+            [isFilterable]="filterable"
             [activeDescendant]="activeDescendant"
-            [noDataLabel]="noDataLabel"
             [userInput]="text"
             [suggestedText]="getSuggestion()"
             [disabled]="disabled"
@@ -389,7 +394,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
 
         <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i7.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: i8.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: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i10.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, components: [{ type: i7.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: i8.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: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i10.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -427,6 +432,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
             i18n-clearTitle="kendo.multicolumncombobox.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-selectButtonText="kendo.multicolumncombobox.selectButtonText|The title of the select button"
+            selectButtonText="Select"
         >
         </ng-container>
         <kendo-searchbar
@@ -434,8 +442,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [role]="'combobox'"
             [id]="focusableId"
             [listId]="listBoxId"
+            [isLoading]="loading"
+            [isSuggestable]="suggest"
+            [isFilterable]="filterable"
             [activeDescendant]="activeDescendant"
-            [noDataLabel]="noDataLabel"
             [userInput]="text"
             [suggestedText]="getSuggestion()"
             [disabled]="disabled"

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() {
@@ -324,6 +324,9 @@ export class ListComponent {
         const hasVirtualScroll = isPresent(this.virtual) && this.hasVirtualScrollbar();
         return hasVirtualScroll || this.list.nativeElement.scrollHeight > this.content.nativeElement.offsetHeight;
     }
+    isItemSelected(index) {
+        return this.selectionService.isSelected(index) || null;
+    }
     /**
      * Sets the list's content overflow (hides/shows scrollbar)
      */
@@ -369,7 +372,7 @@ export class ListComponent {
     }
 }
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListComponent, deps: [{ token: i1.DataService }, { token: i0.ElementRef }, { token: i2.SelectionService }, { token: i3.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListComponent, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListComponent, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div *ngIf="dataService.grouped"
         [class]="listGroupStickyHeaderClass"
         [ngStyle]="{
@@ -394,6 +397,8 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         role="listbox"
         [class]="listClass"
         [attr.id]="id"
+        [attr.aria-live]="ariaLive"
+        [attr.aria-multiselectable]="isMultiselect"
         [attr.aria-hidden]="!show">
          <ng-template *ngIf="!dataService.grouped && show" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
             <li
@@ -405,6 +410,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 [multipleSelection]="multipleSelection"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem)"
                 [attr.tabIndex]="-1"
+                [attr.aria-selected]="isItemSelected(itemIndex)"
                 [class]="listItemClass"
                 [ngClass]="{
                     'k-disabled': isDisabled(itemIndex),
@@ -461,6 +467,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 [attr.absolute-index]="dataItem.index"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem.value)"
                 [attr.tabIndex]="-1"
+                [attr.aria-selected]="isItemSelected(dataItem.offsetIndex)"
                 [class]="listItemClass"
                 [ngClass]="{
                     'k-disabled': isDisabled(dataItem.offsetIndex),
@@ -518,6 +525,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         role="listbox"
         [class]="listClass"
         [attr.id]="id"
+        [attr.aria-live]="ariaLive"
+        [attr.aria-multiselectable]="isMultiselect"
         [attr.aria-hidden]="!show">
          <ng-template *ngIf="!dataService.grouped && show" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
             <li
@@ -529,6 +538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [multipleSelection]="multipleSelection"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem)"
                 [attr.tabIndex]="-1"
+                [attr.aria-selected]="isItemSelected(itemIndex)"
                 [class]="listItemClass"
                 [ngClass]="{
                     'k-disabled': isDisabled(itemIndex),
@@ -585,6 +595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [attr.absolute-index]="dataItem.index"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem.value)"
                 [attr.tabIndex]="-1"
+                [attr.aria-selected]="isItemSelected(dataItem.offsetIndex)"
                 [class]="listItemClass"
                 [ngClass]="{
                     'k-disabled': isDisabled(dataItem.offsetIndex),
@@ -644,6 +655,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], checkboxes: [{
                 type: Input
+            }], ariaLive: [{
+                type: Input
+            }], isMultiselect: [{
+                type: Input
             }], data: [{
                 type: Input
             }], size: [{