@progress/kendo-angular-dropdowns 6.0.1-dev.202201201244 → 6.0.2-dev.202202221531

package/dist/es/multiselect/multiselect.component.js

@@ -120,7 +120,8 @@ var MultiSelectComponent = /** @class */ (function () {
          */
         this.clearButton = true;
         /**
-         * A user-defined callback function which receives an array of selected data items and maps them to an array of tags.
+         * A user-defined callback function which receives an array of selected data items and maps them to an array of tags
+         * ([see examples]({% slug summarytagmode_multiselect %}#toc-rendering-of-tags)).
          *
          * @param { Any[] } dataItems - The selected data items from the list.
          * @returns { Any[] } - The tags that will be rendered by the component.
@@ -235,6 +236,7 @@ var MultiSelectComponent = /** @class */ (function () {
          */
         this.removeTag = new EventEmitter();
         this.hostClasses = true;
+        this.role = 'combobox';
         this.initialized = false;
         this._size = 'medium';
         this._rounded = 'medium';
@@ -611,6 +613,13 @@ var MultiSelectComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MultiSelectComponent.prototype, "isAriaExpanded", {
+        get: function () {
+            return this.isOpen;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @hidden
      */
@@ -695,19 +704,12 @@ var MultiSelectComponent = /** @class */ (function () {
     Object.defineProperty(MultiSelectComponent.prototype, "noDataLabel", {
         get: function () {
             if (this.dataService.itemsCount === 0) {
-                return this.noDataText;
+                return this.messageFor('noDataText');
             }
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiSelectComponent.prototype, "clearTitle", {
-        get: function () {
-            return this.localization.get('clearTitle');
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(MultiSelectComponent.prototype, "clearButtonVisiblity", {
         get: function () {
             if (this.touchEnabled) {
@@ -927,9 +929,8 @@ var MultiSelectComponent = /** @class */ (function () {
             .changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
-            _this.setMessages();
+            _this.cdr.markForCheck();
         });
-        this.setMessages();
         this.setState(this.value);
         this.setComponentClasses();
         this.initialized = true;
@@ -953,7 +954,6 @@ var MultiSelectComponent = /** @class */ (function () {
     MultiSelectComponent.prototype.ngOnDestroy = function () {
         this._toggle(false);
         this.unsubscribeEvents();
-        clearTimeout(this.messagesTimeout);
     };
     /**
      * Toggles the visibility of the popup
@@ -991,6 +991,12 @@ var MultiSelectComponent = /** @class */ (function () {
         this.text = "";
         this.value = [];
     };
+    /**
+     * @hidden
+     */
+    MultiSelectComponent.prototype.messageFor = function (key) {
+        return this.localization.get(key);
+    };
     // NG MODEL BINDINGS
     /**
      * @hidden
@@ -1435,16 +1441,6 @@ var MultiSelectComponent = /** @class */ (function () {
             setTimeout(function () { return _this._zone.run(f); });
         });
     };
-    MultiSelectComponent.prototype.setMessages = function () {
-        var _this = this;
-        this._zone.runOutsideAngular(function () {
-            clearTimeout(_this.messagesTimeout);
-            _this.messagesTimeout = setTimeout(function () {
-                _this.noDataText = _this.localization.get('noDataText');
-                _this.cdr.detectChanges();
-            });
-        });
-    };
     MultiSelectComponent.prototype.setComponentClasses = function () {
         if (this.size) {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
@@ -1681,6 +1677,15 @@ var MultiSelectComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], MultiSelectComponent.prototype, "isLoading", null);
+    tslib_1.__decorate([
+        HostBinding('attr.role'),
+        tslib_1.__metadata("design:type", String)
+    ], MultiSelectComponent.prototype, "role", void 0);
+    tslib_1.__decorate([
+        HostBinding('attr.aria-expanded'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], MultiSelectComponent.prototype, "isAriaExpanded", null);
     tslib_1.__decorate([
         HostListener('mousedown', ['$event']),
         tslib_1.__metadata("design:type", Function),
@@ -1709,7 +1714,7 @@ var MultiSelectComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-multiselect',
-            template: "\n        <ng-container kendoMultiSelectLocalizedMessages\n            i18n-noDataText=\"kendo.multiselect.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.combobox.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <kendo-taglist\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [id]=\"tagListId\"\n            [tags]=\"tags\"\n            [textField]=\"textField\"\n            [valueField]=\"valueField\"\n            [focused]=\"focusedTagIndex\"\n            [disabled]=\"disabled\"\n            [template]=\"tagTemplate\"\n            [groupTemplate]=\"groupTagTemplate\"\n            [tagPrefix]=\"tagPrefix\"\n            [disabledIndices]=\"disabledIndices\"\n            (removeTag)=\"handleRemoveTag($event)\"\n        >\n            <kendo-searchbar\n                #searchbar\n                [id]=\"focusableId\"\n                [role]=\"'listbox'\"\n                [tagListId]=\"tagListId\"\n                [activeDescendant]=\"activeDescendant\"\n                [noDataLabel]=\"noDataLabel\"\n                [userInput]=\"text\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [tabIndex]=\"tabIndex\"\n                [popupOpen]=\"isOpen\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"handleFilter($event)\"\n                (onBlur)=\"onSearchBarBlur()\"\n                (onFocus)=\"onSearchBarFocus()\"\n            >\n            </kendo-searchbar>\n        </kendo-taglist>\n\n        <span\n            *ngIf=\"!loading && !readonly && clearButton && (tags?.length || text?.length)\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            [attr.title]=\"clearTitle\"\n            role=\"button\"\n            tabindex=\"-1\"\n            (mousedown)=\"clearAll($event)\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <span\n            *ngIf=\"loading\"\n            class=\"k-icon k-i-loading\"\n        >\n        </span>\n        <ng-template #popupTemplate>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\n            <!--custom item template-->\n            <div\n                *ngIf=\"allowCustom && text\"\n                class=\"k-list\"\n                [ngClass]=\"customItemSizeClass\"\n            >\n                <div class=\"k-list-item k-custom-item\" kendoDropDownsSelectable [multipleSelection]=\"true\" [index]=\"-1\">\n                    <ng-template *ngIf=\"customItemTemplate;else default_custom_item_template\"\n                        [templateContext]=\"{\n                            templateRef: customItemTemplate.templateRef,\n                            $implicit: text\n                        }\">\n                    </ng-template>\n                    <ng-template #default_custom_item_template>{{ text }}</ng-template>\n                    <span class=\"k-icon k-i-plus\" style=\"float: right\"></span>\n                </div>\n            </div>\n            <!--list-->\n            <kendo-list\n                #optionsList\n                [size]=\"size\"\n                [rounded]=\"rounded\"\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [height]=\"listHeight\"\n                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [show]=\"isOpen\"\n                [multipleSelection]=\"true\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\n                [checkboxes]=\"checkboxes\"\n                >\n            </kendo-list>\n            <!--no data template-->\n            <div class=\"k-no-data\" *ngIf=\"data.length === 0\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ noDataText }}</div>\n                </ng-template>\n            </div>\n            <!--footer template-->\n            <ng-template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </ng-template>\n        </ng-template>\n        <ng-template [ngIf]=\"isOpen\">\n            <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n        </ng-template>\n        <ng-container #container></ng-container>\n  "
+            template: "\n        <ng-container kendoMultiSelectLocalizedMessages\n            i18n-noDataText=\"kendo.multiselect.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.multiselect.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <kendo-taglist\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [id]=\"tagListId\"\n            [tags]=\"tags\"\n            [textField]=\"textField\"\n            [valueField]=\"valueField\"\n            [focused]=\"focusedTagIndex\"\n            [disabled]=\"disabled\"\n            [template]=\"tagTemplate\"\n            [groupTemplate]=\"groupTagTemplate\"\n            [tagPrefix]=\"tagPrefix\"\n            [disabledIndices]=\"disabledIndices\"\n            (removeTag)=\"handleRemoveTag($event)\"\n        >\n            <kendo-searchbar\n                #searchbar\n                [id]=\"focusableId\"\n                [role]=\"'textbox'\"\n                [tagListId]=\"tagListId\"\n                [activeDescendant]=\"activeDescendant\"\n                [noDataLabel]=\"noDataLabel\"\n                [userInput]=\"text\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [tabIndex]=\"tabIndex\"\n                [popupOpen]=\"isOpen\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"handleFilter($event)\"\n                (onBlur)=\"onSearchBarBlur()\"\n                (onFocus)=\"onSearchBarFocus()\"\n            >\n            </kendo-searchbar>\n        </kendo-taglist>\n\n        <span\n            *ngIf=\"!loading && !readonly && clearButton && (tags?.length || text?.length)\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            [attr.title]=\"messageFor('clearTitle')\"\n            role=\"button\"\n            tabindex=\"-1\"\n            (mousedown)=\"clearAll($event)\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <span\n            *ngIf=\"loading\"\n            class=\"k-icon k-i-loading\"\n        >\n        </span>\n        <ng-template #popupTemplate>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\n            <!--custom item template-->\n            <div\n                *ngIf=\"allowCustom && text\"\n                class=\"k-list\"\n                [ngClass]=\"customItemSizeClass\"\n            >\n                <div class=\"k-list-item k-custom-item\" kendoDropDownsSelectable [multipleSelection]=\"true\" [index]=\"-1\">\n                    <ng-template *ngIf=\"customItemTemplate;else default_custom_item_template\"\n                        [templateContext]=\"{\n                            templateRef: customItemTemplate.templateRef,\n                            $implicit: text\n                        }\">\n                    </ng-template>\n                    <ng-template #default_custom_item_template>{{ text }}</ng-template>\n                    <span class=\"k-icon k-i-plus\" style=\"float: right\"></span>\n                </div>\n            </div>\n            <!--list-->\n            <kendo-list\n                #optionsList\n                [size]=\"size\"\n                [rounded]=\"rounded\"\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [height]=\"listHeight\"\n                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [show]=\"isOpen\"\n                [multipleSelection]=\"true\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\n                [checkboxes]=\"checkboxes\"\n                >\n            </kendo-list>\n            <!--no data template-->\n            <div class=\"k-no-data\" *ngIf=\"data.length === 0\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ messageFor('noDataText') }}</div>\n                </ng-template>\n            </div>\n            <!--footer template-->\n            <ng-template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </ng-template>\n        </ng-template>\n        <ng-template [ngIf]=\"isOpen\">\n            <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n        </ng-template>\n        <ng-container #container></ng-container>\n  "
         }),
         tslib_1.__param(11, Optional()), tslib_1.__param(11, Inject(TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [ElementRef,

package/dist/es/package-metadata.js

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

package/dist/es2015/autocomplete/autocomplete.component.d.ts

@@ -87,7 +87,6 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
     togglePopup(open: boolean): void;
     readonly activeDescendant: string;
     readonly noDataLabel: string;
-    readonly clearTitle: string;
     /**
      * Defines whether the first match from the suggestions list will be automatically focused.
      * By default, `highlightFirst` is set to `true`.
@@ -276,7 +275,6 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
     listBoxId: string;
     optionPrefix: string;
     popupRef: PopupRef;
-    noDataText: string;
     protected onChangeCallback: Function;
     protected onTouchedCallback: Function;
     constructor(localization: LocalizationService, dataService: DataService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, _zone: NgZone, cdr: ChangeDetectorRef, renderer: Renderer2, hostElement: ElementRef, touchEnabled: boolean);
@@ -289,6 +287,10 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
      * the model will not update automatically and the `selectionChange` and `valueChange` events will not be fired.
      */
     reset(): void;
+    /**
+     * @hidden
+     */
+    messageFor(key: string): string;
     /**
      * @hidden
      */
@@ -370,7 +372,6 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
     private closeSubscription;
     private localizationChangeSubscription;
     private touchstartDisposeHandler;
-    private messagesTimeout;
     private wrapper;
     private _isFocused;
     private direction;
@@ -388,6 +389,5 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
     private triggerPopupEvents;
     private firstFocusableIndex;
     private findIndexPredicate;
-    private setMessages;
     private setComponentClasses;
 }

package/dist/es2015/autocomplete/autocomplete.component.js

@@ -265,12 +265,9 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
     }
     get noDataLabel() {
         if (this.data.length === 0) {
-            return this.noDataText;
+            return this.messageFor('noDataText');
         }
     }
-    get clearTitle() {
-        return this.localization.get('clearTitle');
-    }
     /**
      * Sets the data of the AutoComplete.
      *
@@ -439,15 +436,13 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
             .changes
             .subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
-            this.setMessages();
+            this.cdr.detectChanges();
         });
-        this.setMessages();
         this.setComponentClasses();
     }
     ngOnDestroy() {
         this.destroyPopup();
         this.unsubscribeEvents();
-        clearTimeout(this.messagesTimeout);
         if (this.localizationChangeSubscription) {
             this.localizationChangeSubscription.unsubscribe();
         }
@@ -467,6 +462,12 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
     reset() {
         this.value = NO_VALUE;
     }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
     /**
      * @hidden
      */
@@ -861,15 +862,6 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
             };
         }
     }
-    setMessages() {
-        this._zone.runOutsideAngular(() => {
-            clearTimeout(this.messagesTimeout);
-            this.messagesTimeout = setTimeout(() => {
-                this.noDataText = this.localization.get('noDataText');
-                this.cdr.detectChanges();
-            });
-        });
-    }
     setComponentClasses() {
         if (this.size) {
             this.renderer.addClass(this.wrapper, getSizeClass('input', this.size));
@@ -1122,7 +1114,7 @@ AutoCompleteComponent = AutoCompleteComponent_1 = tslib_1.__decorate([
             *ngIf="!loading && !readonly && (clearButton && text?.length)"
             class="k-clear-value"
             [style.visibility]="clearButtonVisiblity"
-            [attr.title]="clearTitle"
+            [attr.title]="messageFor('clearTitle')"
             role="button"
             tabindex="-1"
             (click)="clearValue($event)"
@@ -1165,7 +1157,7 @@ AutoCompleteComponent = AutoCompleteComponent_1 = tslib_1.__decorate([
                     }">
                 </ng-template>
                 <ng-template [ngIf]="!noDataTemplate">
-                    <div>{{ noDataText }}</div>
+                    <div>{{ messageFor('noDataText') }}</div>
                 </ng-template>
             </div>
             <!--footer template-->

package/dist/es2015/comboboxes/combobox.component.d.ts

@@ -68,7 +68,6 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
     togglePopup(open: boolean): void;
     readonly activeDescendant: string;
     readonly noDataLabel: string;
-    readonly clearTitle: string;
     readonly appendTo: ViewContainerRef;
     dataItem: any;
     selected: any[];
@@ -332,7 +331,6 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
     listBoxId: string;
     optionPrefix: string;
     popupRef: PopupRef;
-    noDataText: string;
     protected readonly popupWidth: {
         min: string;
         max: string;
@@ -349,7 +347,6 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
      */
     protected defaultVirtualPageSize: number;
     private valueSubscription;
-    private messagesTimeout;
     private _filtering;
     private _text;
     private filterText;
@@ -416,6 +413,10 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
      * should be rendered in the input when the component is not focused.
      */
     isEmpty(): boolean;
+    /**
+     * @hidden
+     */
+    messageFor(key: string): string;
     /**
      * @hidden
      */
@@ -519,7 +520,6 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
     private _toggle;
     private triggerPopupEvents;
     private clearFilter;
-    private setMessages;
     private subscribeTouchEvents;
     private attachSelectClickHandler;
     private setComponentClasses;

package/dist/es2015/comboboxes/combobox.component.js

@@ -272,12 +272,9 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
     }
     get noDataLabel() {
         if (this.data.length === 0) {
-            return this.noDataText;
+            return this.messageFor('noDataText');
         }
     }
-    get clearTitle() {
-        return this.localization.get('clearTitle');
-    }
     get appendTo() {
         const { appendTo } = this.popupSettings;
         if (!appendTo || appendTo === 'root') {
@@ -495,7 +492,6 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         this.createValueStream();
         this.subscribeTouchEvents();
         this.attachSelectClickHandler();
-        this.setMessages();
         this.setComponentClasses();
     }
     createValueStream() {
@@ -602,7 +598,7 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
-            this.setMessages();
+            this.cdr.detectChanges();
         }));
         this.subs.add(merge(this.navigationService.up, this.navigationService.down, this.navigationService.home, this.navigationService.end)
             .pipe(filter((event) => isPresent(event.index)))
@@ -635,7 +631,6 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
     }
     ngOnDestroy() {
         this.destroyPopup();
-        clearTimeout(this.messagesTimeout);
         this.subs.unsubscribe();
         if (isPresent(this.valueSubscription)) {
             this.valueSubscription.unsubscribe();
@@ -732,6 +727,12 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         const valueEmpty = !isPresent(this.value) || isEmptyString(this.value);
         return textEmpty && valueEmpty;
     }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
     /**
      * @hidden
      */
@@ -1214,15 +1215,6 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         this.filterText = '';
         this.filterChange.emit(this.filterText);
     }
-    setMessages() {
-        this.zone.runOutsideAngular(() => {
-            clearTimeout(this.messagesTimeout);
-            this.messagesTimeout = setTimeout(() => {
-                this.noDataText = this.localization.get('noDataText');
-                this.cdr.detectChanges();
-            });
-        });
-    }
     subscribeTouchEvents() {
         if (!isDocumentAvailable() || !this.touchEnabled) {
             return;
@@ -1498,6 +1490,9 @@ ComboBoxComponent = ComboBoxComponent_1 = tslib_1.__decorate([
 
             i18n-clearTitle="kendo.combobox.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-selectButtonText="kendo.combobox.selectButtonText|The text set as aria-label on the select button"
+            selectButtonText="Select"
         >
         </ng-container>
         <kendo-searchbar #searchbar
@@ -1523,7 +1518,7 @@ ComboBoxComponent = ComboBoxComponent_1 = tslib_1.__decorate([
             class="k-clear-value"
             [style.visibility]="clearButtonVisiblity"
             aria-hidden="true"
-            [attr.title]="clearTitle"
+            [attr.title]="messageFor('clearTitle')"
             (click)="clearValue($event)"
             [kendoEventsOutsideAngular]="{
                 mousedown: preventEventDefault
@@ -1533,11 +1528,11 @@ ComboBoxComponent = ComboBoxComponent_1 = tslib_1.__decorate([
         </span>
         <button
             #select
-            aria-hidden="true"
             unselectable="on"
             type="button"
             class="k-input-button k-button k-icon-button"
             [ngClass]="selectButtonClasses"
+            [attr.aria-label]="messageFor('selectButtonText')"
             [kendoEventsOutsideAngular]="{
                 mousedown: preventEventDefault
             }"
@@ -1578,7 +1573,7 @@ ComboBoxComponent = ComboBoxComponent_1 = tslib_1.__decorate([
                     }">
                 </ng-template>
                 <ng-template [ngIf]="!noDataTemplate">
-                    <div>{{ noDataText }}</div>
+                    <div>{{ messageFor('noDataText') }}</div>
                 </ng-template>
             </div>
             <!--footer template-->

package/dist/es2015/comboboxes/multicolumncombobox.component.js

@@ -222,7 +222,7 @@ MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = tslib_1.__decora
             class="k-clear-value"
             [style.visibility]="clearButtonVisiblity"
             aria-hidden="true"
-            [attr.title]="clearTitle"
+            [attr.title]="messageFor('clearTitle')"
             (click)="clearValue($event)"
             [kendoEventsOutsideAngular]="{
                 mousedown: preventEventDefault
@@ -239,6 +239,7 @@ MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = tslib_1.__decora
             type="button"
             class="k-input-button k-button k-icon-button"
             [ngClass]="selectButtonClasses"
+            [attr.aria-label]="messageFor('selectButtonText')"
             [kendoEventsOutsideAngular]="{
                 mousedown: preventEventDefault
             }"
@@ -363,7 +364,7 @@ MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = tslib_1.__decora
                     >
                     </ng-template>
                     <ng-template [ngIf]="!noDataTemplate">
-                        <div>{{ noDataText }}</div>
+                        <div>{{ messageFor('noDataText') }}</div>
                     </ng-template>
                 </div>
 

package/dist/es2015/common/localization/messages.d.ts

@@ -19,4 +19,8 @@ export declare class Messages extends ComponentMessages {
      * The text displayed for the check-all checkbox.
      */
     checkAllText: string;
+    /**
+     * The text set as aria-label on the select button.
+     */
+    selectButtonText: string;
 }

package/dist/es2015/common/localization/messages.js

@@ -22,3 +22,7 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
 ], Messages.prototype, "checkAllText", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], Messages.prototype, "selectButtonText", void 0);

package/dist/es2015/common/searchbar.component.d.ts

@@ -32,6 +32,7 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
     searchBarClass: boolean;
     readonly value: string;
     placeholder: string;
+    readonly ariaExpanded: boolean;
     private _userInput;
     private _previousValue;
     private _placeholder;

package/dist/es2015/common/searchbar.component.js

@@ -43,6 +43,9 @@ let SearchBarComponent = class SearchBarComponent {
     get placeholder() {
         return this._placeholder;
     }
+    get ariaExpanded() {
+        return this.role === 'combobox' ? this.popupOpen : null;
+    }
     ngOnInit() {
         this.localizationChangeSubscription = this.localization
             .changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
@@ -242,7 +245,7 @@ SearchBarComponent = tslib_1.__decorate([
             [attr.aria-disabled]="disabled"
             [attr.aria-readonly]="readonly"
             aria-haspopup="listbox"
-            [attr.aria-expanded]="popupOpen"
+            [attr.aria-expanded]="ariaExpanded"
             [attr.aria-owns]="listId"
             [attr.aria-describedby]="tagListId"
             [attr.aria-activedescendant]="activeDescendant"

package/dist/es2015/common/taglist.component.js

@@ -164,11 +164,8 @@ TagListComponent = tslib_1.__decorate([
         template: `
         <div
             *ngFor="let tag of tags; let index = index;"
-            role="option"
             [attr.id]="itemId(tag, index)"
             [attr.aria-hidden]="tagAriaHidden(index)"
-            aria-selected="true"
-            [attr.aria-setsize]="tags?.length"
             class="k-chip"
             [ngClass]="{
                 'k-focus': index === focused,

package/dist/es2015/dropdownlist/dropdownlist.component.d.ts

@@ -313,7 +313,6 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     direction: Direction;
     dataItem: any;
     popupRef: PopupRef;
-    noDataText: string;
     protected onTouchedCallback: Function;
     protected onChangeCallback: Function;
     private popupMouseDownHandler;
@@ -341,7 +340,6 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     private _popupSettings;
     private _virtualSettings;
     private localizationChangesSubscription;
-    private messagesTimeout;
     private _size;
     private _rounded;
     private _fillMode;
@@ -406,6 +404,10 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
      * the model will not update automatically and the `selectionChange` and `valueChange` events will not be fired.
      */
     reset(): void;
+    /**
+     * @hidden
+     */
+    messageFor(key: string): string;
     /**
      * @hidden
      */
@@ -498,7 +500,6 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
      * @hidden
      */
     pageChange(event: PageChangeEvent): void;
-    private setMessages;
     private assignAriaDescribedBy;
     private setComponentClasses;
 }

package/dist/es2015/dropdownlist/dropdownlist.component.js

@@ -211,14 +211,14 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         return this.listBoxId;
     }
     get ariaActivedescendant() {
-        if (!isPresent(this.dataItem)) {
+        if (!isPresent(this.dataItem) || !this.isOpen) {
             return;
         }
         return this.optionPrefix + "-" + getter(this.dataItem, this.valueField);
     }
     get noDataLabel() {
         if (this.dataService.itemsCount === 0) {
-            return this.noDataText;
+            return this.messageFor('noDataText');
         }
     }
     get appendTo() {
@@ -532,9 +532,8 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         this.localizationChangesSubscription = this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
-            this.setMessages();
+            this.cdr.detectChanges();
         });
-        this.setMessages();
         this.assignAriaDescribedBy();
         this.setComponentClasses();
     }
@@ -558,7 +557,6 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
     ngOnDestroy() {
         this.destroyPopup();
         this.unsubscribeEvents();
-        clearTimeout(this.messagesTimeout);
         if (this.localizationChangesSubscription) {
             this.localizationChangesSubscription.unsubscribe();
         }
@@ -679,6 +677,12 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
     reset() {
         this.value = undefined;
     }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
     /**
      * @hidden
      */
@@ -1173,15 +1177,6 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         const virtual = this.virtual;
         virtual.skip = event.skip;
     }
-    setMessages() {
-        this._zone.runOutsideAngular(() => {
-            clearTimeout(this.messagesTimeout);
-            this.messagesTimeout = setTimeout(() => {
-                this.noDataText = this.localization.get('noDataText');
-                this.cdr.detectChanges();
-            });
-        });
-    }
     assignAriaDescribedBy() {
         const currentValue = this.wrapper.nativeElement.getAttribute('aria-describedby') || '';
         const trimmed = currentValue.replace(this.valueLabelId, '').trim();
@@ -1483,9 +1478,12 @@ DropDownListComponent = DropDownListComponent_1 = tslib_1.__decorate([
         <ng-container kendoDropDownListLocalizedMessages
             i18n-noDataText="kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
+
+            i18n-selectButtonText="kendo.dropdownlist.selectButtonText|The text set as aria-label on the select button"
+            selectButtonText="Select"
         >
         </ng-container>
-        <span class="k-input-inner" unselectable="on" [id]="valueLabelId">
+        <span class="k-input-inner" unselectable="on" role="option" [id]="valueLabelId">
             <span class="k-input-value-text">
                 <ng-template *ngIf="valueTemplate"
                     [templateContext]="{
@@ -1502,6 +1500,7 @@ DropDownListComponent = DropDownListComponent_1 = tslib_1.__decorate([
             type="button"
             class="k-input-button k-button k-icon-button"
             [ngClass]="selectButtonClasses"
+            [attr.aria-label]="messageFor('selectButtonText')"
             [kendoEventsOutsideAngular]="{
                 mousedown: onMouseDown
             }"
@@ -1597,7 +1596,7 @@ DropDownListComponent = DropDownListComponent_1 = tslib_1.__decorate([
                     }">
                 </ng-template>
                 <ng-template [ngIf]="!noDataTemplate">
-                    <div>{{ noDataText }}</div>
+                    <div>{{ messageFor('noDataText') }}</div>
                 </ng-template>
             </div>
             <!--footer template-->

package/dist/es2015/dropdowntrees/checked-state/base-check.directive.d.ts

@@ -29,4 +29,11 @@ export declare abstract class BaseCheckDirective {
     protected removeItem(item: TreeItem): void;
     protected isItemChecked(item: CheckedItem): boolean;
     protected updateItems(): void;
+    /**
+     * Adds the item's depth to the item's value to allow duplicate values on different levels.
+     *
+     * @param item - The checked key.
+     * @returns { string } - A string key consisting of the item's `valueField` value and its depth.
+     */
+    private getKey;
 }