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

package/fesm2015/kendo-angular-dropdowns.js

@@ -7,12 +7,12 @@ import { EventEmitter, Component, Input, Output, ViewChild, HostBinding, Directi
 import * as i9 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, Keys, isChanged, hasObservers, KendoInput, anyChanged, guid as guid$1, ResizeSensorModule, EventsModule } from '@progress/kendo-angular-common';
 import * as i12 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { NgControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getter as getter$1, pointers, touchEnabled } from '@progress/kendo-common';
+import { Subscription, merge, fromEvent, Subject, of, interval } from 'rxjs';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { merge, fromEvent, Subject, Subscription, of, interval } from 'rxjs';
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 export { PopupComponent } from '@progress/kendo-angular-popup';
@@ -29,7 +29,7 @@ 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'
 };
@@ -354,13 +354,18 @@ const getFillModeClass = (component, fillMode) => {
     };
     return FILLMODE_CLASSES[fillMode];
 };
+/**
+ * @hidden
+ */
+const filterAndMap = (arr, predicate, mapper) => arr.reduce((acc, curr) => predicate(curr) ? [...acc, mapper(curr)] : acc, []);
 
 /**
  * @hidden
  */
 class SearchBarComponent {
-    constructor(localization, renderer) {
+    constructor(localization, renderer, injector) {
         this.localization = localization;
+        this.injector = injector;
         this.valueChange = new EventEmitter();
         this.onBlur = new EventEmitter();
         this.onFocus = new EventEmitter();
@@ -370,9 +375,30 @@ class SearchBarComponent {
         this._userInput = "";
         this._previousValue = "";
         this._placeholder = "";
+        this._isSuggestable = false;
+        this._isFilterable = false;
+        this.subs = new Subscription();
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.renderer = renderer;
     }
+    set isSuggestable(isSuggestable) {
+        this._isSuggestable = isSuggestable;
+        this.setAriaAutocomplete();
+    }
+    ;
+    get isSuggestable() {
+        return this._isSuggestable;
+    }
+    ;
+    set isFilterable(isFilterable) {
+        this._isFilterable = isFilterable;
+        this.setAriaAutocomplete();
+    }
+    ;
+    get isFilterable() {
+        return this._isFilterable;
+    }
+    ;
     get userInput() {
         return this._userInput;
     }
@@ -393,8 +419,19 @@ class SearchBarComponent {
         return this.role === 'combobox' ? this.popupOpen : null;
     }
     ngOnInit() {
-        this.localizationChangeSubscription = this.localization
-            .changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
+        this.subs.add(this.localization
+            .changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
+    }
+    ngAfterContentChecked() {
+        var _a;
+        const formControl = (_a = this.injector.get(NgControl, null)) === null || _a === void 0 ? void 0 : _a.control;
+        this.control = formControl;
+        if (formControl) {
+            this.subs.add(formControl.valueChanges.subscribe(() => {
+                this.control = formControl;
+            }));
+        }
+        this.setAriaInvalid();
     }
     ngOnChanges(changes) {
         let previousUserInput;
@@ -426,9 +463,7 @@ class SearchBarComponent {
         }
     }
     ngOnDestroy() {
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
+        this.subs.unsubscribe();
     }
     writeInputValue(text) {
         if (isDocumentAvailable()) {
@@ -445,6 +480,33 @@ class SearchBarComponent {
             }
         }
     }
+    setAriaInvalid() {
+        if (this.control) {
+            if (this.control.invalid) {
+                this.renderer.setAttribute(this.input.nativeElement, 'aria-invalid', 'true');
+            }
+            else {
+                this.renderer.setAttribute(this.input.nativeElement, 'aria-invalid', 'false');
+            }
+        }
+        else {
+            this.renderer.removeAttribute(this.input.nativeElement, 'aria-invalid');
+        }
+    }
+    setAriaAutocomplete() {
+        if (this.isFilterable) {
+            this.renderer.setAttribute(this.input.nativeElement, 'aria-autocomplete', 'list');
+        }
+        if (this.isSuggestable) {
+            this.renderer.setAttribute(this.input.nativeElement, 'aria-autocomplete', 'inline');
+        }
+        if (this.isFilterable && this.isSuggestable) {
+            this.renderer.setAttribute(this.input.nativeElement, 'aria-autocomplete', 'both');
+        }
+        if (!this.isFilterable && !this.isSuggestable) {
+            this.renderer.removeAttribute(this.input.nativeElement, 'aria-autocomplete');
+        }
+    }
     handleInput(event) {
         const value = event.target.value;
         if (value !== this.userInput) {
@@ -485,8 +547,8 @@ class SearchBarComponent {
         this.renderer.setAttribute(input, 'size', size.toString());
     }
 }
-SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SearchBarComponent, selector: "kendo-searchbar", inputs: { 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" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-searchbar": "this.searchBarClass" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SearchBarComponent, selector: "kendo-searchbar", inputs: { 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" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-searchbar": "this.searchBarClass" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <input #input
             autocomplete="off"
             [id]="id"
@@ -504,14 +566,12 @@ SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [attr.tabIndex]="tabIndex"
             [attr.dir]="direction"
             [attr.role]="role"
-            [attr.aria-disabled]="disabled"
-            [attr.aria-readonly]="readonly"
             aria-haspopup="listbox"
             [attr.aria-expanded]="ariaExpanded"
-            [attr.aria-owns]="listId"
+            [attr.aria-controls]="listId"
             [attr.aria-describedby]="tagListId"
             [attr.aria-activedescendant]="activeDescendant"
-            [attr.aria-label]="noDataLabel"
+            [attr.aria-busy]="isLoading"
         />
    `, isInline: true, directives: [{ type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SearchBarComponent, decorators: [{
@@ -536,18 +596,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [attr.tabIndex]="tabIndex"
             [attr.dir]="direction"
             [attr.role]="role"
-            [attr.aria-disabled]="disabled"
-            [attr.aria-readonly]="readonly"
             aria-haspopup="listbox"
             [attr.aria-expanded]="ariaExpanded"
-            [attr.aria-owns]="listId"
+            [attr.aria-controls]="listId"
             [attr.aria-describedby]="tagListId"
             [attr.aria-activedescendant]="activeDescendant"
-            [attr.aria-label]="noDataLabel"
+            [attr.aria-busy]="isLoading"
         />
    `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { id: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { id: [{
                 type: Input
             }], listId: [{
                 type: Input
@@ -555,8 +613,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], activeDescendant: [{
                 type: Input
-            }], noDataLabel: [{
-                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{
@@ -567,6 +623,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], role: [{
                 type: Input
+            }], isLoading: [{
+                type: Input
+            }], isSuggestable: [{
+                type: Input
+            }], isFilterable: [{
+                type: Input
             }], userInput: [{
                 type: Input
             }], suggestedText: [{
@@ -812,123 +874,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-/**
- * @hidden
- */
-class SelectionService {
-    constructor() {
-        this.onSelect = new EventEmitter();
-        this.onChange = new EventEmitter();
-        this.onFocus = new EventEmitter();
-        this.total = 0;
-        this.selectedIndices = [];
-    }
-    getTotal() {
-        return this.total;
-    }
-    isSelected(index) {
-        return isPresent(this.selectedIndices.find(current => current === index));
-    }
-    isFocused(index) {
-        return index === this.focused;
-    }
-    focus(index) {
-        if (this.isFocused(index)) {
-            return;
-        }
-        this.focused = index;
-        this.onFocus.emit(index);
-    }
-    select(index) {
-        if (this.isSelected(index)) {
-            return;
-        }
-        this.selectedIndices = [index];
-        this.focused = index;
-        this.onSelect.emit({
-            indices: [index],
-            newSelection: isPresent(index)
-        });
-    }
-    add(index) {
-        if (this.isSelected(index)) {
-            return;
-        }
-        this.selectedIndices.push(index);
-        this.focused = index;
-        this.onChange.emit({
-            added: index,
-            indices: this.selectedIndices.slice()
-        });
-    }
-    unselect(index) {
-        if (!this.isSelected(index)) {
-            return;
-        }
-        const position = this.selectedIndices.indexOf(index);
-        this.selectedIndices.splice(position, 1);
-        this.focused = index;
-        this.onChange.emit({
-            indices: this.selectedIndices.slice(),
-            removed: index
-        });
-    }
-    change(index) {
-        const newSelection = isPresent(index) && !this.isSelected(index);
-        this.selectedIndices = [index];
-        this.focused = index;
-        this.onChange.emit({
-            indices: [index],
-            newSelection: newSelection
-        });
-    }
-    resetSelection(index) {
-        this.selectedIndices = index instanceof Array ? index : [index];
-        this.focused = this.selectedIndices[this.selectedIndices.length - 1];
-    }
-    get selected() {
-        return this.selectedIndices.slice();
-    }
-    get focused() {
-        return this.focusedIndex;
-    }
-    set focused(index) {
-        if (this.focusedIndex !== index) {
-            this.focusedIndex = index;
-            this.onFocus.emit(index);
-        }
-    }
-}
-SelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionService, deps: [], 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
-        }] });
-
-/**
- * @hidden
- */
-var NavigationAction;
-(function (NavigationAction) {
-    // eslint-disable-next-line id-denylist
-    NavigationAction[NavigationAction["Undefined"] = 0] = "Undefined";
-    NavigationAction[NavigationAction["Open"] = 1] = "Open";
-    NavigationAction[NavigationAction["Close"] = 2] = "Close";
-    NavigationAction[NavigationAction["Enter"] = 3] = "Enter";
-    NavigationAction[NavigationAction["Tab"] = 4] = "Tab";
-    NavigationAction[NavigationAction["Esc"] = 5] = "Esc";
-    NavigationAction[NavigationAction["Delete"] = 6] = "Delete";
-    NavigationAction[NavigationAction["Backspace"] = 7] = "Backspace";
-    NavigationAction[NavigationAction["Home"] = 8] = "Home";
-    NavigationAction[NavigationAction["End"] = 9] = "End";
-    NavigationAction[NavigationAction["Up"] = 10] = "Up";
-    NavigationAction[NavigationAction["Down"] = 11] = "Down";
-    NavigationAction[NavigationAction["Left"] = 12] = "Left";
-    NavigationAction[NavigationAction["Right"] = 13] = "Right";
-    NavigationAction[NavigationAction["PageDown"] = 14] = "PageDown";
-    NavigationAction[NavigationAction["PageUp"] = 15] = "PageUp";
-})(NavigationAction || (NavigationAction = {}));
-
 /**
  * @hidden
  */
@@ -1102,6 +1047,16 @@ 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.
@@ -1197,6 +1152,190 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: DataService }]; } });
 
+/**
+ * @hidden
+ */
+class SelectionService {
+    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;
+    }
+    isSelected(index) {
+        return isPresent(this.selectedIndices.find(current => current === index));
+    }
+    isFocused(index) {
+        return index === this.focused;
+    }
+    focus(index) {
+        if (this.isFocused(index)) {
+            return;
+        }
+        this.focused = index;
+        this.onFocus.emit(index);
+    }
+    select(index) {
+        if (this.isSelected(index)) {
+            return;
+        }
+        this.selectedIndices = [index];
+        this.focused = index;
+        this.onSelect.emit({
+            indices: [index],
+            newSelection: isPresent(index)
+        });
+    }
+    add(index, preventClosingPopup) {
+        if (this.isSelected(index)) {
+            return;
+        }
+        this.selectedIndices.push(index);
+        this.focused = index;
+        this.onChange.emit({
+            added: index,
+            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);
+    }
+    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,
+            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);
+        this.selectedIndices = [index];
+        this.focused = index;
+        this.onChange.emit({
+            indices: [index],
+            newSelection: newSelection
+        });
+    }
+    resetSelection(index) {
+        this.selectedIndices = index instanceof Array ? index : [index];
+        this.focused = this.selectedIndices[this.selectedIndices.length - 1];
+    }
+    get selected() {
+        return this.selectedIndices.slice();
+    }
+    get focused() {
+        return this.focusedIndex;
+    }
+    set focused(index) {
+        if (this.focusedIndex !== index) {
+            this.focusedIndex = index;
+            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: [{ token: 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: DisabledItemsService }]; } });
+
+/**
+ * @hidden
+ */
+var NavigationAction;
+(function (NavigationAction) {
+    // eslint-disable-next-line id-denylist
+    NavigationAction[NavigationAction["Undefined"] = 0] = "Undefined";
+    NavigationAction[NavigationAction["Open"] = 1] = "Open";
+    NavigationAction[NavigationAction["Close"] = 2] = "Close";
+    NavigationAction[NavigationAction["Enter"] = 3] = "Enter";
+    NavigationAction[NavigationAction["Tab"] = 4] = "Tab";
+    NavigationAction[NavigationAction["Esc"] = 5] = "Esc";
+    NavigationAction[NavigationAction["Delete"] = 6] = "Delete";
+    NavigationAction[NavigationAction["Backspace"] = 7] = "Backspace";
+    NavigationAction[NavigationAction["Home"] = 8] = "Home";
+    NavigationAction[NavigationAction["End"] = 9] = "End";
+    NavigationAction[NavigationAction["Up"] = 10] = "Up";
+    NavigationAction[NavigationAction["Down"] = 11] = "Down";
+    NavigationAction[NavigationAction["Left"] = 12] = "Left";
+    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 = {}));
+
 const MIN_INDEX = 0;
 /**
  * @hidden
@@ -1232,10 +1371,17 @@ 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) {
@@ -1244,6 +1390,21 @@ 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;
         }
@@ -1504,12 +1665,13 @@ 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);
@@ -1679,7 +1841,7 @@ class ListComponent {
             this.selectionService.add(index);
         }
         if (!isChecked && this.selectionService.isSelected(index)) {
-            this.selectionService.unselect(index);
+            this.selectionService.deselect(index);
         }
     }
     prepareClasses() {
@@ -1861,6 +2023,9 @@ 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)
      */
@@ -1906,7 +2071,7 @@ class ListComponent {
     }
 }
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListComponent, deps: [{ token: DataService }, { token: i0.ElementRef }, { token: SelectionService }, { token: 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]="{
@@ -1931,6 +2096,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
@@ -1942,6 +2109,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),
@@ -1998,6 +2166,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),
@@ -2055,6 +2224,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
@@ -2066,6 +2237,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),
@@ -2122,6 +2294,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),
@@ -2181,6 +2354,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: [{
@@ -2498,11 +2675,6 @@ 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.
      *
@@ -3055,6 +3227,11 @@ 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);
@@ -3158,10 +3335,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"
@@ -3235,7 +3414,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: 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: 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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: 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: 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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -3272,10 +3451,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"
@@ -3760,11 +3941,6 @@ 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') {
@@ -4682,6 +4858,11 @@ 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);
@@ -4786,8 +4967,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"
@@ -4815,6 +4998,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"
@@ -4874,7 +5058,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: 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: 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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: 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: 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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -4914,8 +5098,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"
@@ -4943,6 +5129,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"
@@ -5231,7 +5418,7 @@ const DEFAULT_FILL_MODE$3 = 'solid';
  * ```
  */
 class DropDownListComponent {
-    constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, _zone, renderer, cdr, touchEnabled) {
+    constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, _zone, renderer, cdr, touchEnabled, injector) {
         this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
@@ -5243,6 +5430,7 @@ class DropDownListComponent {
         this.renderer = renderer;
         this.cdr = cdr;
         this.touchEnabled = touchEnabled;
+        this.injector = injector;
         /**
          * Sets the height of the options list. By default, `listHeight` is 200px.
          *
@@ -5250,10 +5438,6 @@ class DropDownListComponent {
          * > To set the height of the popup container, use `popupSettings.height`.
          */
         this.listHeight = 200;
-        /**
-         * Sets the disabled state of the component.
-         */
-        this.disabled = false;
         /**
          * Sets the read-only state of the component.
          */
@@ -5325,7 +5509,8 @@ class DropDownListComponent {
          * @hidden
          */
         this.focusableId = `k-${guid()}`;
-        this.role = 'listbox';
+        this.role = 'combobox';
+        this.haspopup = 'listbox';
         this.groupIndices = [];
         this.listBoxId = guid();
         this.optionPrefix = guid();
@@ -5375,7 +5560,7 @@ class DropDownListComponent {
     get ariaExpanded() {
         return this.isOpen;
     }
-    get ariaOwns() {
+    get ariaControls() {
         if (!this.isOpen) {
             return;
         }
@@ -5387,11 +5572,6 @@ class DropDownListComponent {
         }
         return this.optionPrefix + "-" + getter(this.dataItem, this.valueField);
     }
-    get noDataLabel() {
-        if (this.dataService.itemsCount === 0) {
-            return this.messageFor('noDataText');
-        }
-    }
     get appendTo() {
         const { appendTo } = this.popupSettings;
         if (!appendTo || appendTo === 'root') {
@@ -5399,6 +5579,12 @@ class DropDownListComponent {
         }
         return appendTo === 'component' ? this.container : appendTo;
     }
+    /**
+     * @hidden
+     */
+    get ariaLive() {
+        return this.filterable ? 'polite' : 'off';
+    }
     /**
      * Sets the data of the DropDownList.
      *
@@ -5607,9 +5793,12 @@ class DropDownListComponent {
             popupWrapper.style.width = max;
         }
     }
-    get isDisabled() {
+    get isDisabledClass() {
         return this.disabled;
     }
+    get isDisabledAttribute() {
+        return this.disabled ? '' : null;
+    }
     get isLoading() {
         return this.loading;
     }
@@ -5619,21 +5808,28 @@ class DropDownListComponent {
     get hostTabIndex() {
         return this.widgetTabIndex;
     }
-    get isReadonly() {
+    get readonlyClass() {
         return this.readonly;
     }
+    get readonlyAttr() {
+        return this.readonly ? '' : null;
+    }
+    get isBusy() {
+        return this.isLoading;
+    }
     get isAriaExpanded() {
         return this.ariaExpanded;
     }
-    get hostAriaOwns() {
-        return this.ariaOwns;
+    get hostAriaControls() {
+        return this.ariaControls;
+    }
+    get hostAriaInvalid() {
+        var _a;
+        return this.formControl ? (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.invalid.toString() : null;
     }
     get hostAriaActivedescendant() {
         return this.ariaActivedescendant;
     }
-    get hostNoDataLabel() {
-        return this.noDataLabel;
-    }
     /**
      * @hidden
      */
@@ -5760,6 +5956,13 @@ class DropDownListComponent {
     ngAfterContentChecked() {
         this.verifySettings();
     }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+    }
     /**
      * Focuses a specific item of the DropDownList based on a provided index.
      * If there is a default item it is positioned at index -1.
@@ -5789,6 +5992,7 @@ class DropDownListComponent {
     blur() {
         if (!this.disabled) {
             this.wrapper.nativeElement.blur();
+            this.cdr.detectChanges();
         }
     }
     /**
@@ -5960,6 +6164,11 @@ class DropDownListComponent {
         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.wrapper.nativeElement.getAttribute('aria-labelledby');
+        if (ariaLabel) {
+            listBox.setAttribute('aria-labelledby', ariaLabel);
+        }
         this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.optionsList.scrollToItem(this.selectionService.focused);
@@ -6362,8 +6571,8 @@ class DropDownListComponent {
         }
     }
 }
-DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: { 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", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click($event)" }, properties: { "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.isReadonly", "attr.aria-readonly": "this.isReadonly", "attr.role": "this.role", "attr.aria-haspopup": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-owns": "this.hostAriaOwns", "attr.aria-activedescendant": "this.hostAriaActivedescendant", "attr.aria-label": "this.hostNoDataLabel" } }, providers: [
+DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: { 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", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click($event)" }, properties: { "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-controls": "this.hostAriaControls", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-activedescendant": "this.hostAriaActivedescendant" } }, providers: [
         DROPDOWNLIST_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -6389,7 +6598,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             selectButtonText="Select"
         >
         </ng-container>
-        <span class="k-input-inner" unselectable="on" role="option" [id]="valueLabelId">
+        <span class="k-input-inner" unselectable="on" [id]="valueLabelId">
             <span class="k-input-value-text">
                 <ng-template *ngIf="valueTemplate"
                     [templateContext]="{
@@ -6428,9 +6637,11 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     >
                         <span class="k-input-icon k-icon k-i-search" unselectable="on"></span>
                         <input
-                            [attr.aria-owns]="ariaOwns"
+                            role="searchbox"
+                            aria-autocomplete="list"
+                            aria-haspopup="listbox"
+                            [attr.aria-controls]="ariaControls"
                             [attr.aria-activedescendant]="ariaActivedescendant"
-                            [attr.aria-label]="noDataLabel"
                             tabindex="-1"
                             [filterInput]="isFocused && !touchEnabled"
                             [dir]="direction"
@@ -6491,6 +6702,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [height]="listHeight"
                 [show]="isOpen"
                 [virtual]="virtual"
+                [ariaLive]="ariaLive"
                 (pageChange)="pageChange($event)"
                 >
             </kendo-list>
@@ -6516,7 +6728,7 @@ DropDownListComponent.ɵ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: 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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: 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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownListComponent, decorators: [{
             type: Component,
             args: [{
@@ -6549,7 +6761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             selectButtonText="Select"
         >
         </ng-container>
-        <span class="k-input-inner" unselectable="on" role="option" [id]="valueLabelId">
+        <span class="k-input-inner" unselectable="on" [id]="valueLabelId">
             <span class="k-input-value-text">
                 <ng-template *ngIf="valueTemplate"
                     [templateContext]="{
@@ -6588,9 +6800,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     >
                         <span class="k-input-icon k-icon k-i-search" unselectable="on"></span>
                         <input
-                            [attr.aria-owns]="ariaOwns"
+                            role="searchbox"
+                            aria-autocomplete="list"
+                            aria-haspopup="listbox"
+                            [attr.aria-controls]="ariaControls"
                             [attr.aria-activedescendant]="ariaActivedescendant"
-                            [attr.aria-label]="noDataLabel"
                             tabindex="-1"
                             [filterInput]="isFocused && !touchEnabled"
                             [dir]="direction"
@@ -6651,6 +6865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [height]="listHeight"
                 [show]="isOpen"
                 [virtual]="virtual"
+                [ariaLive]="ariaLive"
                 (pageChange)="pageChange($event)"
                 >
             </kendo-list>
@@ -6683,7 +6898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }]; }, propDecorators: { iconClass: [{
+                }] }, { type: i0.Injector }]; }, propDecorators: { iconClass: [{
                 type: Input
             }], loading: [{
                 type: Input
@@ -6784,12 +6999,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-picker']
-            }], isDisabled: [{
+            }], isDisabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
-            }, {
+            }], isDisabledAttribute: [{
                 type: HostBinding,
-                args: ['attr.aria-disabled']
+                args: ['attr.disabled']
             }], isLoading: [{
                 type: HostBinding,
                 args: ['class.k-loading']
@@ -6805,30 +7020,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], hostTabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
-            }], isReadonly: [{
+            }], readonlyClass: [{
                 type: HostBinding,
                 args: ['attr.readonly']
-            }, {
+            }], readonlyAttr: [{
                 type: HostBinding,
-                args: ['attr.aria-readonly']
+                args: ['attr.readonly']
+            }], isBusy: [{
+                type: HostBinding,
+                args: ['attr.aria-busy']
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
-            }, {
+            }], haspopup: [{
                 type: HostBinding,
                 args: ['attr.aria-haspopup']
             }], isAriaExpanded: [{
                 type: HostBinding,
                 args: ['attr.aria-expanded']
-            }], hostAriaOwns: [{
+            }], hostAriaControls: [{
                 type: HostBinding,
-                args: ['attr.aria-owns']
+                args: ['attr.aria-controls']
+            }], hostAriaInvalid: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
             }], hostAriaActivedescendant: [{
                 type: HostBinding,
                 args: ['attr.aria-activedescendant']
-            }], hostNoDataLabel: [{
-                type: HostBinding,
-                args: ['attr.aria-label']
             }], keydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -7426,7 +7644,6 @@ class MultiSelectComponent {
          */
         this.removeTag = new EventEmitter();
         this.hostClasses = true;
-        this.role = 'combobox';
         this.initialized = false;
         this._size = 'medium';
         this._rounded = 'medium';
@@ -7739,8 +7956,15 @@ 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
@@ -7803,11 +8027,6 @@ 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';
@@ -7838,23 +8057,45 @@ 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();
     }
@@ -7987,10 +8228,11 @@ 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();
@@ -8139,7 +8381,11 @@ 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() {
@@ -8198,7 +8444,7 @@ class MultiSelectComponent {
             return;
         }
         if (isNumber(index)) {
-            this.selectionService.unselect(index);
+            this.selectionService.deselect(index);
             this.selectionService.focused = index;
             this.togglePopup(false);
         }
@@ -8263,7 +8509,7 @@ class MultiSelectComponent {
                 }
                 else {
                     if (!customItem && this.selectionService.isSelected(itemIndex)) {
-                        this.selectionService.unselect(itemIndex);
+                        this.selectionService.deselect(itemIndex);
                         this.selectionService.focused = itemIndex;
                     }
                     else {
@@ -8285,7 +8531,7 @@ class MultiSelectComponent {
     }
     handleItemChange(event) {
         this.change(event);
-        if (this.autoClose) {
+        if (this.autoClose && !event.preventClosingPopup) {
             this.togglePopup(false);
         }
         if (this.autoClose || !this.filterable) {
@@ -8295,6 +8541,7 @@ class MultiSelectComponent {
     handleEnter(event) {
         const service = this.selectionService;
         const focusedIndex = this.selectionService.focused;
+        this.selectionService.lastClickedIndex = focusedIndex;
         if (this.isOpen) {
             event.originalEvent.preventDefault();
         }
@@ -8305,7 +8552,7 @@ 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 {
@@ -8328,6 +8575,85 @@ 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;
     }
@@ -8463,6 +8789,11 @@ 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);
@@ -8521,7 +8852,7 @@ 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: DataService }, { token: SelectionService }, { token: NavigationService }, { token: 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,
@@ -8566,10 +8897,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"
@@ -8643,6 +8976,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 [virtual]="virtual"
                 (pageChange)="pageChange($event)"
                 [checkboxes]="checkboxes"
+                [isMultiselect]="true"
                 >
             </kendo-list>
             <!--no data template-->
@@ -8667,7 +9001,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: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: 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: 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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: 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: 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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: 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: [{
@@ -8719,10 +9053,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"
@@ -8796,6 +9132,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-->
@@ -8954,12 +9291,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']]
@@ -9266,6 +9600,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
@@ -9273,8 +9610,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"
@@ -9472,7 +9811,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: 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: 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: 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: 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: 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: 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: 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: 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: [{
@@ -9510,6 +9849,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
@@ -9517,8 +9859,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"
@@ -13839,21 +14183,21 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         TemplateContextDirective,
         TagListComponent,
         CheckDirective,
-        CheckAllDirective], imports: [CommonModule, FormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule], exports: [ListComponent,
+        CheckAllDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule], exports: [ListComponent,
         ListItemDirective,
         SelectableDirective,
         SearchBarComponent,
         TemplateContextDirective,
         TagListComponent,
         CheckDirective,
-        CheckAllDirective, CommonModule, FormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, imports: [[CommonModule, FormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule], CommonModule, FormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule] });
+        CheckAllDirective, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule] });
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule], CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [INTERNAL_DIRECTIVES],
-                    exports: [INTERNAL_DIRECTIVES, CommonModule, FormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule],
-                    imports: [CommonModule, FormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule]
+                    exports: [INTERNAL_DIRECTIVES, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule],
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule]
                 }]
         }] });