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

package/dist/es/autocomplete/autocomplete.component.js

@@ -299,19 +299,12 @@ var AutoCompleteComponent = /** @class */ (function () {
     Object.defineProperty(AutoCompleteComponent.prototype, "noDataLabel", {
         get: function () {
             if (this.data.length === 0) {
-                return this.noDataText;
+                return this.messageFor('noDataText');
             }
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(AutoCompleteComponent.prototype, "clearTitle", {
-        get: function () {
-            return this.localization.get('clearTitle');
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(AutoCompleteComponent.prototype, "data", {
         get: function () {
             var virtual = this.virtual;
@@ -534,15 +527,13 @@ var AutoCompleteComponent = /** @class */ (function () {
             .subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
-            _this.setMessages();
+            _this.cdr.detectChanges();
         });
-        this.setMessages();
         this.setComponentClasses();
     };
     AutoCompleteComponent.prototype.ngOnDestroy = function () {
         this.destroyPopup();
         this.unsubscribeEvents();
-        clearTimeout(this.messagesTimeout);
         if (this.localizationChangeSubscription) {
             this.localizationChangeSubscription.unsubscribe();
         }
@@ -562,6 +553,12 @@ var AutoCompleteComponent = /** @class */ (function () {
     AutoCompleteComponent.prototype.reset = function () {
         this.value = NO_VALUE;
     };
+    /**
+     * @hidden
+     */
+    AutoCompleteComponent.prototype.messageFor = function (key) {
+        return this.localization.get(key);
+    };
     /**
      * @hidden
      */
@@ -964,16 +961,6 @@ var AutoCompleteComponent = /** @class */ (function () {
             };
         }
     };
-    AutoCompleteComponent.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();
-            });
-        });
-    };
     AutoCompleteComponent.prototype.setComponentClasses = function () {
         if (this.size) {
             this.renderer.addClass(this.wrapper, getSizeClass('input', this.size));
@@ -1195,7 +1182,7 @@ var AutoCompleteComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-autocomplete',
-            template: "\n        <ng-container kendoAutoCompleteLocalizedMessages\n            i18n-noDataText=\"kendo.autocomplete.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.autocomplete.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <kendo-searchbar #searchbar\n            [role]=\"'combobox'\"\n            [id]=\"focusableId\"\n            [listId]=\"listBoxId\"\n            [activeDescendant]=\"activeDescendant\"\n            [noDataLabel]=\"noDataLabel\"\n            [userInput]=\"text\"\n            [suggestedText]=\"suggestion\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [tabIndex]=\"tabIndex\"\n            [popupOpen]=\"isOpen\"\n            [placeholder]=\"placeholder\"\n            (onNavigate)=\"handleNavigate($event)\"\n            (valueChange)=\"searchBarChange($event)\"\n            (onBlur)=\"handleBlur()\"\n            (onFocus)=\"handleFocus()\"\n        ></kendo-searchbar>\n        <span\n            *ngIf=\"!loading && !readonly && (clearButton && text?.length)\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            [attr.title]=\"clearTitle\"\n            role=\"button\"\n            tabindex=\"-1\"\n            (click)=\"clearValue($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <span *ngIf=\"loading\" class=\"k-icon k-i-loading\"></span>\n        <ng-template #popupTemplate>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\n            <!--list-->\n            <kendo-list\n                #optionsList\n                [size]=\"size\"\n                [rounded]=\"rounded\"\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"valueField\"\n                [valueField]=\"valueField\"\n                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [height]=\"listHeight\"\n                [show]=\"isOpen\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\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?.templateRef\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 kendoAutoCompleteLocalizedMessages\n            i18n-noDataText=\"kendo.autocomplete.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.autocomplete.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <kendo-searchbar #searchbar\n            [role]=\"'combobox'\"\n            [id]=\"focusableId\"\n            [listId]=\"listBoxId\"\n            [activeDescendant]=\"activeDescendant\"\n            [noDataLabel]=\"noDataLabel\"\n            [userInput]=\"text\"\n            [suggestedText]=\"suggestion\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [tabIndex]=\"tabIndex\"\n            [popupOpen]=\"isOpen\"\n            [placeholder]=\"placeholder\"\n            (onNavigate)=\"handleNavigate($event)\"\n            (valueChange)=\"searchBarChange($event)\"\n            (onBlur)=\"handleBlur()\"\n            (onFocus)=\"handleFocus()\"\n        ></kendo-searchbar>\n        <span\n            *ngIf=\"!loading && !readonly && (clearButton && text?.length)\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            [attr.title]=\"messageFor('clearTitle')\"\n            role=\"button\"\n            tabindex=\"-1\"\n            (click)=\"clearValue($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <span *ngIf=\"loading\" class=\"k-icon k-i-loading\"></span>\n        <ng-template #popupTemplate>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\n            <!--list-->\n            <kendo-list\n                #optionsList\n                [size]=\"size\"\n                [rounded]=\"rounded\"\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"valueField\"\n                [valueField]=\"valueField\"\n                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [height]=\"listHeight\"\n                [show]=\"isOpen\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\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?.templateRef\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(10, Optional()), tslib_1.__param(10, Inject(TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,

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

@@ -283,19 +283,12 @@ var ComboBoxComponent = /** @class */ (function () {
     Object.defineProperty(ComboBoxComponent.prototype, "noDataLabel", {
         get: function () {
             if (this.data.length === 0) {
-                return this.noDataText;
+                return this.messageFor('noDataText');
             }
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ComboBoxComponent.prototype, "clearTitle", {
-        get: function () {
-            return this.localization.get('clearTitle');
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(ComboBoxComponent.prototype, "appendTo", {
         get: function () {
             var appendTo = this.popupSettings.appendTo;
@@ -585,7 +578,6 @@ var ComboBoxComponent = /** @class */ (function () {
         this.createValueStream();
         this.subscribeTouchEvents();
         this.attachSelectClickHandler();
-        this.setMessages();
         this.setComponentClasses();
     };
     ComboBoxComponent.prototype.createValueStream = function () {
@@ -695,7 +687,7 @@ var ComboBoxComponent = /** @class */ (function () {
             .changes.subscribe(function (_a) {
             var rtl = _a.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(function (event) { return isPresent(event.index); }))
@@ -728,7 +720,6 @@ var ComboBoxComponent = /** @class */ (function () {
     };
     ComboBoxComponent.prototype.ngOnDestroy = function () {
         this.destroyPopup();
-        clearTimeout(this.messagesTimeout);
         this.subs.unsubscribe();
         if (isPresent(this.valueSubscription)) {
             this.valueSubscription.unsubscribe();
@@ -830,6 +821,12 @@ var ComboBoxComponent = /** @class */ (function () {
         var valueEmpty = !isPresent(this.value) || isEmptyString(this.value);
         return textEmpty && valueEmpty;
     };
+    /**
+     * @hidden
+     */
+    ComboBoxComponent.prototype.messageFor = function (key) {
+        return this.localization.get(key);
+    };
     /**
      * @hidden
      */
@@ -1336,16 +1333,6 @@ var ComboBoxComponent = /** @class */ (function () {
         this.filterText = '';
         this.filterChange.emit(this.filterText);
     };
-    ComboBoxComponent.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();
-            });
-        });
-    };
     ComboBoxComponent.prototype.subscribeTouchEvents = function () {
         var _this = this;
         if (!isDocumentAvailable() || !this.touchEnabled) {
@@ -1616,7 +1603,7 @@ var ComboBoxComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-combobox',
-            template: "\n        <ng-container kendoComboBoxLocalizedMessages\n            i18n-noDataText=\"kendo.combobox.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-searchbar #searchbar\n            [role]=\"'combobox'\"\n            [id]=\"focusableId\"\n            [listId]=\"listBoxId\"\n            [activeDescendant]=\"activeDescendant\"\n            [noDataLabel]=\"noDataLabel\"\n            [userInput]=\"text\"\n            [suggestedText]=\"getSuggestion()\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [tabIndex]=\"tabIndex\"\n            [popupOpen]=\"isOpen\"\n            [placeholder]=\"placeholder\"\n            (onNavigate)=\"handleNavigate($event)\"\n            (valueChange)=\"searchBarChange($event)\"\n            (onBlur)=\"handleBlur()\"\n            (onFocus)=\"handleFocus()\"\n        ></kendo-searchbar>\n        <span\n            *ngIf=\"clearButton && !loading && !disabled && !readonly && text?.length\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            aria-hidden=\"true\"\n            [attr.title]=\"clearTitle\"\n            (click)=\"clearValue($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: preventEventDefault\n            }\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <button\n            #select\n            aria-hidden=\"true\"\n            unselectable=\"on\"\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [ngClass]=\"selectButtonClasses\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: preventEventDefault\n            }\"\n        >\n            <span class=\"k-button-icon k-icon\" [ngClass]=\"buttonClasses\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\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                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [height]=\"listHeight\"\n                [show]=\"isOpen\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\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 kendoComboBoxLocalizedMessages\n            i18n-noDataText=\"kendo.combobox.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            i18n-selectButtonText=\"kendo.combobox.selectButtonText|The text set as aria-label on the select button\"\n            selectButtonText=\"Select\"\n        >\n        </ng-container>\n        <kendo-searchbar #searchbar\n            [role]=\"'combobox'\"\n            [id]=\"focusableId\"\n            [listId]=\"listBoxId\"\n            [activeDescendant]=\"activeDescendant\"\n            [noDataLabel]=\"noDataLabel\"\n            [userInput]=\"text\"\n            [suggestedText]=\"getSuggestion()\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [tabIndex]=\"tabIndex\"\n            [popupOpen]=\"isOpen\"\n            [placeholder]=\"placeholder\"\n            (onNavigate)=\"handleNavigate($event)\"\n            (valueChange)=\"searchBarChange($event)\"\n            (onBlur)=\"handleBlur()\"\n            (onFocus)=\"handleFocus()\"\n        ></kendo-searchbar>\n        <span\n            *ngIf=\"clearButton && !loading && !disabled && !readonly && text?.length\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            aria-hidden=\"true\"\n            [attr.title]=\"messageFor('clearTitle')\"\n            (click)=\"clearValue($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: preventEventDefault\n            }\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <button\n            #select\n            unselectable=\"on\"\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [ngClass]=\"selectButtonClasses\"\n            [attr.aria-label]=\"messageFor('selectButtonText')\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: preventEventDefault\n            }\"\n        >\n            <span class=\"k-button-icon k-icon\" [ngClass]=\"buttonClasses\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\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                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [height]=\"listHeight\"\n                [show]=\"isOpen\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\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(10, Optional()), tslib_1.__param(10, Inject(TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [ElementRef,

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

@@ -211,7 +211,7 @@ var MultiColumnComboBoxComponent = /** @class */ (function (_super) {
                 }
             ],
             selector: 'kendo-multicolumncombobox',
-            template: "\n        <ng-container\n            kendoMultiColumnComboBoxLocalizedMessages\n\n            i18n-noDataText=\"kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.multicolumncombobox.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <kendo-searchbar\n            #searchbar\n            [role]=\"'combobox'\"\n            [id]=\"focusableId\"\n            [listId]=\"listBoxId\"\n            [activeDescendant]=\"activeDescendant\"\n            [noDataLabel]=\"noDataLabel\"\n            [userInput]=\"text\"\n            [suggestedText]=\"getSuggestion()\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [tabIndex]=\"tabIndex\"\n            [popupOpen]=\"isOpen\"\n            [placeholder]=\"placeholder\"\n            (onNavigate)=\"handleNavigate($event)\"\n            (valueChange)=\"searchBarChange($event)\"\n            (onBlur)=\"handleBlur()\"\n            (onFocus)=\"handleFocus()\"\n        >\n        </kendo-searchbar>\n\n        <span\n            *ngIf=\"clearButton && !loading && !disabled && !readonly && text?.length\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            aria-hidden=\"true\"\n            [attr.title]=\"clearTitle\"\n            (click)=\"clearValue($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: preventEventDefault\n            }\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n\n        <button\n            #select\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            unselectable=\"on\"\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [ngClass]=\"selectButtonClasses\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: preventEventDefault\n            }\"\n        >\n            <span class=\"k-button-icon k-icon\" [ngClass]=\"buttonClasses\"></span>\n        </button>\n\n        <ng-template #popupTemplate>\n            <!--user-defined header template -->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\"\n            >\n            </ng-template>\n\n            <!--data table-->\n            <div class=\"k-data-table\" [ngClass]=\"tableSizeClass\">\n\n                <!--grid header-->\n                <div\n                    #header\n                    class=\"k-table-header\"\n                >\n                    <div class=\"k-table-header-wrap\">\n                        <table class=\"k-table\" role=\"presentation\">\n                            <colgroup>\n                                <ng-container *ngFor=\"let column of columns\">\n                                    <col\n                                        *ngIf=\"!column.hidden && column.matchesMedia\"\n                                        [style.width.px]=\"column.width\"\n                                    />\n                                </ng-container>\n                            </colgroup>\n                            <thead class=\"k-table-thead\">\n                                <tr class=\"k-table-row\">\n                                    <ng-container *ngFor=\"let column of columns\">\n                                        <th\n                                            *ngIf=\"!column.hidden && column.matchesMedia\"\n                                            class=\"k-table-th\"\n                                            [ngStyle]=\"column.headerStyle\"\n                                            [ngClass]=\"column.headerClass\"\n                                        >\n                                            <ng-container *ngIf=\"!column.headerTemplate\">\n                                                {{ column.title || column.field }}\n                                            </ng-container>\n                                            <ng-template\n                                                *ngIf=\"column.headerTemplate\"\n                                                [templateContext]=\"{\n                                                    templateRef: column.headerTemplate?.templateRef,\n                                                    $implicit: column,\n                                                    column: column\n                                                }\"\n                                            >\n                                            </ng-template>\n                                        </th>\n                                    </ng-container>\n                                </tr>\n                            </thead>\n                        </table>\n                    </div>\n                </div>\n\n                <!-- item template -->\n                <ng-template #rowTemplate let-dataItem>\n                    <ng-container *ngFor=\"let column of columns\">\n                        <span\n                            *ngIf=\"!column.hidden && column.matchesMedia\"\n                            class=\"k-table-td\"\n                            [ngClass]=\"column.class\"\n                            [style.width.px]=\"column.width\"\n                            [ngStyle]=\"column.style\"\n                        >\n                            <ng-container *ngIf=\"!column.cellTemplate\">\n                                {{ textFrom(dataItem, column.field) }}\n                            </ng-container>\n                            <ng-template\n                                *ngIf=\"column.cellTemplate\"\n                                [templateContext]=\"{\n                                    templateRef: column.cellTemplate?.templateRef,\n                                    $implicit: dataItem,\n                                    dataItem: dataItem,\n                                    column: column\n                                }\"\n                            >\n                            </ng-template>\n                        </span>\n                    </ng-container>\n                </ng-template>\n\n                <!--list-->\n                <kendo-list\n                    #optionsList\n                    [id]=\"listBoxId\"\n                    [optionPrefix]=\"optionPrefix\"\n                    [data]=\"data\"\n                    [textField]=\"textField\"\n                    [valueField]=\"valueField\"\n                    [template]=\"{ templateRef: rowTemplate }\"\n                    [groupTemplate]=\"groupTemplate\"\n                    [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                    [height]=\"listHeight\"\n                    [show]=\"isOpen\"\n                    [virtual]=\"virtual\"\n                    [type]=\"'dropdowngrid'\"\n                    (pageChange)=\"pageChange($event)\"\n                    (listResize)=\"updateHeaderPadding(header)\"\n                >\n                </kendo-list>\n\n                <!--no-data template-->\n                <div\n                    class=\"k-no-data\"\n                    *ngIf=\"data.length === 0\"\n                >\n                    <ng-template\n                        [ngIf]=\"noDataTemplate\"\n                        [templateContext]=\"{\n                            templateRef: noDataTemplate?.templateRef\n                        }\"\n                    >\n                    </ng-template>\n                    <ng-template [ngIf]=\"!noDataTemplate\">\n                        <div>{{ noDataText }}</div>\n                    </ng-template>\n                </div>\n\n                <!--user-defined footer template-->\n                <ng-container *ngIf=\"footerTemplate\">\n                    <div class=\"k-table-footer\">\n                        <table class=\"k-table\">\n                            <tfoot class=\"k-table-tfoot\">\n                                <tr class=\"k-table-row\">\n                                    <td class=\"k-table-td\">\n                                        <ng-template\n                                            [templateContext]=\"{\n                                                templateRef: footerTemplate.templateRef\n                                            }\"\n                                        >\n                                        </ng-template>\n                                    </td>\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </ng-container>\n\n            </div>\n\n        </ng-template>\n\n        <kendo-resize-sensor\n            *ngIf=\"isOpen\"\n            (resize)=\"onResize()\"\n        >\n        </kendo-resize-sensor>\n\n        <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->\n        <ng-container #container></ng-container>\n    "
+            template: "\n        <ng-container\n            kendoMultiColumnComboBoxLocalizedMessages\n\n            i18n-noDataText=\"kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.multicolumncombobox.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <kendo-searchbar\n            #searchbar\n            [role]=\"'combobox'\"\n            [id]=\"focusableId\"\n            [listId]=\"listBoxId\"\n            [activeDescendant]=\"activeDescendant\"\n            [noDataLabel]=\"noDataLabel\"\n            [userInput]=\"text\"\n            [suggestedText]=\"getSuggestion()\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [tabIndex]=\"tabIndex\"\n            [popupOpen]=\"isOpen\"\n            [placeholder]=\"placeholder\"\n            (onNavigate)=\"handleNavigate($event)\"\n            (valueChange)=\"searchBarChange($event)\"\n            (onBlur)=\"handleBlur()\"\n            (onFocus)=\"handleFocus()\"\n        >\n        </kendo-searchbar>\n\n        <span\n            *ngIf=\"clearButton && !loading && !disabled && !readonly && text?.length\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            aria-hidden=\"true\"\n            [attr.title]=\"messageFor('clearTitle')\"\n            (click)=\"clearValue($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: preventEventDefault\n            }\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n\n        <button\n            #select\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            unselectable=\"on\"\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [ngClass]=\"selectButtonClasses\"\n            [attr.aria-label]=\"messageFor('selectButtonText')\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: preventEventDefault\n            }\"\n        >\n            <span class=\"k-button-icon k-icon\" [ngClass]=\"buttonClasses\"></span>\n        </button>\n\n        <ng-template #popupTemplate>\n            <!--user-defined header template -->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\"\n            >\n            </ng-template>\n\n            <!--data table-->\n            <div class=\"k-data-table\" [ngClass]=\"tableSizeClass\">\n\n                <!--grid header-->\n                <div\n                    #header\n                    class=\"k-table-header\"\n                >\n                    <div class=\"k-table-header-wrap\">\n                        <table class=\"k-table\" role=\"presentation\">\n                            <colgroup>\n                                <ng-container *ngFor=\"let column of columns\">\n                                    <col\n                                        *ngIf=\"!column.hidden && column.matchesMedia\"\n                                        [style.width.px]=\"column.width\"\n                                    />\n                                </ng-container>\n                            </colgroup>\n                            <thead class=\"k-table-thead\">\n                                <tr class=\"k-table-row\">\n                                    <ng-container *ngFor=\"let column of columns\">\n                                        <th\n                                            *ngIf=\"!column.hidden && column.matchesMedia\"\n                                            class=\"k-table-th\"\n                                            [ngStyle]=\"column.headerStyle\"\n                                            [ngClass]=\"column.headerClass\"\n                                        >\n                                            <ng-container *ngIf=\"!column.headerTemplate\">\n                                                {{ column.title || column.field }}\n                                            </ng-container>\n                                            <ng-template\n                                                *ngIf=\"column.headerTemplate\"\n                                                [templateContext]=\"{\n                                                    templateRef: column.headerTemplate?.templateRef,\n                                                    $implicit: column,\n                                                    column: column\n                                                }\"\n                                            >\n                                            </ng-template>\n                                        </th>\n                                    </ng-container>\n                                </tr>\n                            </thead>\n                        </table>\n                    </div>\n                </div>\n\n                <!-- item template -->\n                <ng-template #rowTemplate let-dataItem>\n                    <ng-container *ngFor=\"let column of columns\">\n                        <span\n                            *ngIf=\"!column.hidden && column.matchesMedia\"\n                            class=\"k-table-td\"\n                            [ngClass]=\"column.class\"\n                            [style.width.px]=\"column.width\"\n                            [ngStyle]=\"column.style\"\n                        >\n                            <ng-container *ngIf=\"!column.cellTemplate\">\n                                {{ textFrom(dataItem, column.field) }}\n                            </ng-container>\n                            <ng-template\n                                *ngIf=\"column.cellTemplate\"\n                                [templateContext]=\"{\n                                    templateRef: column.cellTemplate?.templateRef,\n                                    $implicit: dataItem,\n                                    dataItem: dataItem,\n                                    column: column\n                                }\"\n                            >\n                            </ng-template>\n                        </span>\n                    </ng-container>\n                </ng-template>\n\n                <!--list-->\n                <kendo-list\n                    #optionsList\n                    [id]=\"listBoxId\"\n                    [optionPrefix]=\"optionPrefix\"\n                    [data]=\"data\"\n                    [textField]=\"textField\"\n                    [valueField]=\"valueField\"\n                    [template]=\"{ templateRef: rowTemplate }\"\n                    [groupTemplate]=\"groupTemplate\"\n                    [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                    [height]=\"listHeight\"\n                    [show]=\"isOpen\"\n                    [virtual]=\"virtual\"\n                    [type]=\"'dropdowngrid'\"\n                    (pageChange)=\"pageChange($event)\"\n                    (listResize)=\"updateHeaderPadding(header)\"\n                >\n                </kendo-list>\n\n                <!--no-data template-->\n                <div\n                    class=\"k-no-data\"\n                    *ngIf=\"data.length === 0\"\n                >\n                    <ng-template\n                        [ngIf]=\"noDataTemplate\"\n                        [templateContext]=\"{\n                            templateRef: noDataTemplate?.templateRef\n                        }\"\n                    >\n                    </ng-template>\n                    <ng-template [ngIf]=\"!noDataTemplate\">\n                        <div>{{ messageFor('noDataText') }}</div>\n                    </ng-template>\n                </div>\n\n                <!--user-defined footer template-->\n                <ng-container *ngIf=\"footerTemplate\">\n                    <div class=\"k-table-footer\">\n                        <table class=\"k-table\">\n                            <tfoot class=\"k-table-tfoot\">\n                                <tr class=\"k-table-row\">\n                                    <td class=\"k-table-td\">\n                                        <ng-template\n                                            [templateContext]=\"{\n                                                templateRef: footerTemplate.templateRef\n                                            }\"\n                                        >\n                                        </ng-template>\n                                    </td>\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </ng-container>\n\n            </div>\n\n        </ng-template>\n\n        <kendo-resize-sensor\n            *ngIf=\"isOpen\"\n            (resize)=\"onResize()\"\n        >\n        </kendo-resize-sensor>\n\n        <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->\n        <ng-container #container></ng-container>\n    "
         }),
         tslib_1.__param(10, Inject(TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,

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

@@ -25,6 +25,10 @@ var Messages = /** @class */ (function (_super) {
         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);
     return Messages;
 }(ComponentMessages));
 export { Messages };

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

@@ -55,6 +55,13 @@ var SearchBarComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(SearchBarComponent.prototype, "ariaExpanded", {
+        get: function () {
+            return this.role === 'combobox' ? this.popupOpen : null;
+        },
+        enumerable: true,
+        configurable: true
+    });
     SearchBarComponent.prototype.ngOnInit = function () {
         var _this = this;
         this.localizationChangeSubscription = this.localization
@@ -236,7 +243,7 @@ var SearchBarComponent = /** @class */ (function () {
     SearchBarComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-searchbar',
-            template: "\n        <input #input\n            autocomplete=\"off\"\n            [id]=\"id\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [placeholder]=\"placeholder\"\n            [class]=\"'k-input-inner'\"\n            (input)=\"handleInput($event)\"\n            (keydown)=\"handleKeydown($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur\n            }\"\n            [scope]=\"this\"\n            [attr.tabIndex]=\"tabIndex\"\n            [attr.dir]=\"direction\"\n            [attr.role]=\"role\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-readonly]=\"readonly\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"popupOpen\"\n            [attr.aria-owns]=\"listId\"\n            [attr.aria-describedby]=\"tagListId\"\n            [attr.aria-activedescendant]=\"activeDescendant\"\n            [attr.aria-label]=\"noDataLabel\"\n        />\n   "
+            template: "\n        <input #input\n            autocomplete=\"off\"\n            [id]=\"id\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [placeholder]=\"placeholder\"\n            [class]=\"'k-input-inner'\"\n            (input)=\"handleInput($event)\"\n            (keydown)=\"handleKeydown($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur\n            }\"\n            [scope]=\"this\"\n            [attr.tabIndex]=\"tabIndex\"\n            [attr.dir]=\"direction\"\n            [attr.role]=\"role\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-readonly]=\"readonly\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"ariaExpanded\"\n            [attr.aria-owns]=\"listId\"\n            [attr.aria-describedby]=\"tagListId\"\n            [attr.aria-activedescendant]=\"activeDescendant\"\n            [attr.aria-label]=\"noDataLabel\"\n        />\n   "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,
             Renderer2])

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

@@ -169,7 +169,7 @@ var TagListComponent = /** @class */ (function () {
     TagListComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-taglist',
-            template: "\n        <div\n            *ngFor=\"let tag of tags; let index = index;\"\n            role=\"option\"\n            [attr.id]=\"itemId(tag, index)\"\n            [attr.aria-hidden]=\"tagAriaHidden(index)\"\n            aria-selected=\"true\"\n            [attr.aria-setsize]=\"tags?.length\"\n            class=\"k-chip\"\n            [ngClass]=\"{\n                'k-focus': index === focused,\n                'k-disabled': isTagDisabled(tag, index),\n                'k-chip-sm': size === 'small',\n                'k-chip-md': size === 'medium',\n                'k-chip-lg': size === 'large',\n                'k-rounded-sm': rounded === 'small',\n                'k-rounded-md': rounded === 'medium',\n                'k-rounded-lg': rounded === 'large',\n                'k-rounded-full': rounded === 'full',\n                'k-chip-solid k-chip-solid-base': fillMode === 'solid',\n                'k-chip-flat k-chip-flat-base': fillMode === 'flat',\n                'k-chip-outline k-chip-outline-base': fillMode === 'outline'\n            }\"\n        >\n            <span class=\"k-chip-content\">\n                <ng-template *ngIf=\"isGroupTag(tag); then groupTag else singleTag\"></ng-template>\n                <ng-template #groupTag>\n                    <span class=\"k-chip-label k-text-ellipsis\">\n                        <ng-template *ngIf=\"groupTemplate\"\n                            [templateContext]=\"{\n                            templateRef: groupTemplate.templateRef,\n                            $implicit: tag\n                        }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!groupTemplate\">{{ tag.length }} {{ tag.length === 1 ? 'item' : 'items' }} selected</ng-template>\n                    </span>\n                </ng-template>\n                <ng-template #singleTag>\n                    <span class=\"k-chip-label k-text-ellipsis\">\n                        <ng-template *ngIf=\"template\"\n                            [templateContext]=\"{\n                            templateRef: template.templateRef,\n                            $implicit: tag\n                        }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!template\">{{ tagProp(tag, textField, index) }}</ng-template>\n                    </span>\n                </ng-template>\n            </span>\n\n            <span class=\"k-chip-actions\">\n                <span aria-label=\"delete\" [attr.aria-hidden]=\"index !== focused\" class=\"k-chip-action k-chip-remove-action\">\n                    <span class=\"k-icon k-i-x-circle\" (mousedown)=\"deleteTag($event, tag, index)\">\n                    </span>\n                </span>\n            </span>\n        </div>\n        <ng-content></ng-content>\n  "
+            template: "\n        <div\n            *ngFor=\"let tag of tags; let index = index;\"\n            [attr.id]=\"itemId(tag, index)\"\n            [attr.aria-hidden]=\"tagAriaHidden(index)\"\n            class=\"k-chip\"\n            [ngClass]=\"{\n                'k-focus': index === focused,\n                'k-disabled': isTagDisabled(tag, index),\n                'k-chip-sm': size === 'small',\n                'k-chip-md': size === 'medium',\n                'k-chip-lg': size === 'large',\n                'k-rounded-sm': rounded === 'small',\n                'k-rounded-md': rounded === 'medium',\n                'k-rounded-lg': rounded === 'large',\n                'k-rounded-full': rounded === 'full',\n                'k-chip-solid k-chip-solid-base': fillMode === 'solid',\n                'k-chip-flat k-chip-flat-base': fillMode === 'flat',\n                'k-chip-outline k-chip-outline-base': fillMode === 'outline'\n            }\"\n        >\n            <span class=\"k-chip-content\">\n                <ng-template *ngIf=\"isGroupTag(tag); then groupTag else singleTag\"></ng-template>\n                <ng-template #groupTag>\n                    <span class=\"k-chip-label k-text-ellipsis\">\n                        <ng-template *ngIf=\"groupTemplate\"\n                            [templateContext]=\"{\n                            templateRef: groupTemplate.templateRef,\n                            $implicit: tag\n                        }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!groupTemplate\">{{ tag.length }} {{ tag.length === 1 ? 'item' : 'items' }} selected</ng-template>\n                    </span>\n                </ng-template>\n                <ng-template #singleTag>\n                    <span class=\"k-chip-label k-text-ellipsis\">\n                        <ng-template *ngIf=\"template\"\n                            [templateContext]=\"{\n                            templateRef: template.templateRef,\n                            $implicit: tag\n                        }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!template\">{{ tagProp(tag, textField, index) }}</ng-template>\n                    </span>\n                </ng-template>\n            </span>\n\n            <span class=\"k-chip-actions\">\n                <span aria-label=\"delete\" [attr.aria-hidden]=\"index !== focused\" class=\"k-chip-action k-chip-remove-action\">\n                    <span class=\"k-icon k-i-x-circle\" (mousedown)=\"deleteTag($event, tag, index)\">\n                    </span>\n                </span>\n            </span>\n        </div>\n        <ng-content></ng-content>\n  "
         }),
         tslib_1.__metadata("design:paramtypes", [Renderer2,
             ElementRef])

package/dist/es/dropdownlist/dropdownlist.component.js

@@ -232,7 +232,7 @@ var DropDownListComponent = /** @class */ (function () {
     });
     Object.defineProperty(DropDownListComponent.prototype, "ariaActivedescendant", {
         get: function () {
-            if (!isPresent(this.dataItem)) {
+            if (!isPresent(this.dataItem) || !this.isOpen) {
                 return;
             }
             return this.optionPrefix + "-" + getter(this.dataItem, this.valueField);
@@ -243,7 +243,7 @@ var DropDownListComponent = /** @class */ (function () {
     Object.defineProperty(DropDownListComponent.prototype, "noDataLabel", {
         get: function () {
             if (this.dataService.itemsCount === 0) {
-                return this.noDataText;
+                return this.messageFor('noDataText');
             }
         },
         enumerable: true,
@@ -647,9 +647,8 @@ var DropDownListComponent = /** @class */ (function () {
             .changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
-            _this.setMessages();
+            _this.cdr.detectChanges();
         });
-        this.setMessages();
         this.assignAriaDescribedBy();
         this.setComponentClasses();
     };
@@ -673,7 +672,6 @@ var DropDownListComponent = /** @class */ (function () {
     DropDownListComponent.prototype.ngOnDestroy = function () {
         this.destroyPopup();
         this.unsubscribeEvents();
-        clearTimeout(this.messagesTimeout);
         if (this.localizationChangesSubscription) {
             this.localizationChangesSubscription.unsubscribe();
         }
@@ -799,6 +797,12 @@ var DropDownListComponent = /** @class */ (function () {
     DropDownListComponent.prototype.reset = function () {
         this.value = undefined;
     };
+    /**
+     * @hidden
+     */
+    DropDownListComponent.prototype.messageFor = function (key) {
+        return this.localization.get(key);
+    };
     /**
      * @hidden
      */
@@ -1329,16 +1333,6 @@ var DropDownListComponent = /** @class */ (function () {
         var virtual = this.virtual;
         virtual.skip = event.skip;
     };
-    DropDownListComponent.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();
-            });
-        });
-    };
     DropDownListComponent.prototype.assignAriaDescribedBy = function () {
         var currentValue = this.wrapper.nativeElement.getAttribute('aria-describedby') || '';
         var trimmed = currentValue.replace(this.valueLabelId, '').trim();
@@ -1636,7 +1630,7 @@ var DropDownListComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-dropdownlist',
-            template: "\n        <ng-container kendoDropDownListLocalizedMessages\n            i18n-noDataText=\"kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n        >\n        </ng-container>\n        <span class=\"k-input-inner\" unselectable=\"on\" [id]=\"valueLabelId\">\n            <span class=\"k-input-value-text\">\n                <ng-template *ngIf=\"valueTemplate\"\n                    [templateContext]=\"{\n                        templateRef: valueTemplate.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!valueTemplate\">{{ getText() }}</ng-template>\n            </span>\n        </span>\n        <button\n            tabindex=\"-1\"\n            unselectable=\"on\"\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [ngClass]=\"selectButtonClasses\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: onMouseDown\n            }\"\n        >\n            <span\n                class=\"k-button-icon k-icon\"\n                unselectable=\"on\"\n                [ngClass]=\"buttonClasses\"\n            ></span>\n        </button>\n        <ng-template #popupTemplate>\n            <!--filterable-->\n\n            <ng-template [ngIf]=\"filterable\">\n                <div class=\"k-list-filter\" (click)=\"$event.stopImmediatePropagation()\">\n                    <span\n                        class=\"k-searchbox k-input\"\n                        [ngClass]=\"filterInputClasses\"\n                    >\n                        <span class=\"k-input-icon k-icon k-i-search\" unselectable=\"on\"></span>\n                        <input\n                            [attr.aria-owns]=\"ariaOwns\"\n                            [attr.aria-activedescendant]=\"ariaActivedescendant\"\n                            [attr.aria-label]=\"noDataLabel\"\n                            tabindex=\"-1\"\n                            [filterInput]=\"isFocused && !touchEnabled\"\n                            [dir]=\"direction\"\n                            [(ngModel)]=\"filterText\"\n                            class=\"k-input-inner\"\n                            (keydown)=\"keydown($event)\"\n                            (input)=\"handleFilter($event)\"\n                            (focus)=\"onFilterFocus()\"\n                            (blur)=\"blurFilterInput()\" />\n                    </span>\n                </div>\n            </ng-template>\n            <!--default item-->\n            <ng-template [ngIf]=\"defaultItem && !itemTemplate\">\n                <div\n                    class=\"k-list\"\n                    [ngClass]=\"optionLabelSizeClass\"\n                >\n                    <div class=\"k-list-optionlabel k-list-item\" [ngClass]=\"{ 'k-disabled': isDisabledDefaultItem }\" kendoDropDownsSelectable [index]=\"-1\">\n                        {{ getDefaultItemText() }}\n                    </div>\n                </div>\n            </ng-template>\n            <ng-template [ngIf]=\"defaultItem && itemTemplate\">\n                <div\n                    class=\"k-list\"\n                    [ngClass]=\"optionLabelSizeClass\"\n                >\n                    <div class=\"k-list-optionlabel k-list-item\" [ngClass]=\"{ 'k-disabled': isDisabledDefaultItem }\" kendoDropDownsSelectable [index]=\"-1\">\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: itemTemplate.templateRef,\n                                $implicit: defaultItem\n                            }\">\n                        </ng-template>\n                    </div>\n                </div>\n            </ng-template>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\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                [template]=\"itemTemplate\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [height]=\"listHeight\"\n                [show]=\"isOpen\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\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 kendoDropDownListLocalizedMessages\n            i18n-noDataText=\"kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-selectButtonText=\"kendo.dropdownlist.selectButtonText|The text set as aria-label on the select button\"\n            selectButtonText=\"Select\"\n        >\n        </ng-container>\n        <span class=\"k-input-inner\" unselectable=\"on\" role=\"option\" [id]=\"valueLabelId\">\n            <span class=\"k-input-value-text\">\n                <ng-template *ngIf=\"valueTemplate\"\n                    [templateContext]=\"{\n                        templateRef: valueTemplate.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!valueTemplate\">{{ getText() }}</ng-template>\n            </span>\n        </span>\n        <button\n            tabindex=\"-1\"\n            unselectable=\"on\"\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [ngClass]=\"selectButtonClasses\"\n            [attr.aria-label]=\"messageFor('selectButtonText')\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: onMouseDown\n            }\"\n        >\n            <span\n                class=\"k-button-icon k-icon\"\n                unselectable=\"on\"\n                [ngClass]=\"buttonClasses\"\n            ></span>\n        </button>\n        <ng-template #popupTemplate>\n            <!--filterable-->\n\n            <ng-template [ngIf]=\"filterable\">\n                <div class=\"k-list-filter\" (click)=\"$event.stopImmediatePropagation()\">\n                    <span\n                        class=\"k-searchbox k-input\"\n                        [ngClass]=\"filterInputClasses\"\n                    >\n                        <span class=\"k-input-icon k-icon k-i-search\" unselectable=\"on\"></span>\n                        <input\n                            [attr.aria-owns]=\"ariaOwns\"\n                            [attr.aria-activedescendant]=\"ariaActivedescendant\"\n                            [attr.aria-label]=\"noDataLabel\"\n                            tabindex=\"-1\"\n                            [filterInput]=\"isFocused && !touchEnabled\"\n                            [dir]=\"direction\"\n                            [(ngModel)]=\"filterText\"\n                            class=\"k-input-inner\"\n                            (keydown)=\"keydown($event)\"\n                            (input)=\"handleFilter($event)\"\n                            (focus)=\"onFilterFocus()\"\n                            (blur)=\"blurFilterInput()\" />\n                    </span>\n                </div>\n            </ng-template>\n            <!--default item-->\n            <ng-template [ngIf]=\"defaultItem && !itemTemplate\">\n                <div\n                    class=\"k-list\"\n                    [ngClass]=\"optionLabelSizeClass\"\n                >\n                    <div class=\"k-list-optionlabel k-list-item\" [ngClass]=\"{ 'k-disabled': isDisabledDefaultItem }\" kendoDropDownsSelectable [index]=\"-1\">\n                        {{ getDefaultItemText() }}\n                    </div>\n                </div>\n            </ng-template>\n            <ng-template [ngIf]=\"defaultItem && itemTemplate\">\n                <div\n                    class=\"k-list\"\n                    [ngClass]=\"optionLabelSizeClass\"\n                >\n                    <div class=\"k-list-optionlabel k-list-item\" [ngClass]=\"{ 'k-disabled': isDisabledDefaultItem }\" kendoDropDownsSelectable [index]=\"-1\">\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: itemTemplate.templateRef,\n                                $implicit: defaultItem\n                            }\">\n                        </ng-template>\n                    </div>\n                </div>\n            </ng-template>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\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                [template]=\"itemTemplate\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [height]=\"listHeight\"\n                [show]=\"isOpen\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\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(10, Optional()), tslib_1.__param(10, Inject(TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [ElementRef,

package/dist/es/dropdowntrees/checked-state/base-check.directive.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 import { Input } from '@angular/core';
-import { getHierarchicalItemLevel, valueFrom } from '../../common/util';
+import { getHierarchicalItemLevel, isArray, valueFrom } from '../../common/util';
 /**
  * @hidden
  *
@@ -20,7 +20,7 @@ var BaseCheckDirective = /** @class */ (function () {
         var level = getHierarchicalItemLevel(item.index);
         var candidate = tslib_1.__assign({}, item, { level: level });
         this.checkedItems.push(candidate);
-        this.checkedKeys.add(valueFrom(candidate, this.valueField));
+        this.checkedKeys.add(this.getKey(candidate));
     };
     BaseCheckDirective.prototype.removeItem = function (item) {
         var _this = this;
@@ -31,15 +31,29 @@ var BaseCheckDirective = /** @class */ (function () {
         var candidate = tslib_1.__assign({}, item, { level: level });
         this.checkedItems = this.checkedItems
             .filter(function (item) { return valueFrom(item, _this.valueField) !== valueFrom(candidate, _this.valueField); });
-        this.checkedKeys.delete(valueFrom(candidate, this.valueField));
+        this.checkedKeys.delete(this.getKey(candidate));
     };
     BaseCheckDirective.prototype.isItemChecked = function (item) {
-        return this.checkedKeys.has(valueFrom(item, this.valueField));
+        var level = item.index.split('_').length - 1;
+        item.level = level;
+        return this.checkedKeys.has(this.getKey(item));
     };
     BaseCheckDirective.prototype.updateItems = function () {
         var _this = this;
         this.checkedItems = this.checkedItems || [];
-        this.checkedKeys = new Set(this.checkedItems.map(function (item) { return valueFrom(item, _this.valueField); }));
+        this.checkedKeys = new Set(this.checkedItems.map(function (item) { return _this.getKey(item); }));
+    };
+    /**
+     * 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.
+     */
+    BaseCheckDirective.prototype.getKey = function (item) {
+        if (isArray(this.valueField)) {
+            return valueFrom(item, this.valueField) + '_' + item.level;
+        }
+        return valueFrom(item, this.valueField);
     };
     tslib_1.__decorate([
         Input(),

package/dist/es/dropdowntrees/dropdowntree.component.js

@@ -1376,7 +1376,7 @@ var DropDownTreeComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-dropdowntree',
-            template: "\n        <ng-container kendoDropDownTreeLocalizedMessages\n            i18n-noDataText=\"kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.dropdowntree.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <span\n            [attr.id]=\"valueLabelId\"\n            class=\"k-input-inner\"\n        >\n            <span class=\"k-input-value-text\">\n                <ng-template *ngIf=\"valueTemplate\"\n                    [templateContext]=\"{\n                        templateRef: valueTemplate.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!valueTemplate\"> {{ text || placeholder }} </ng-template>\n            </span>\n        </span>\n        <span\n            *ngIf=\"!loading && !readonly && clearButton && text?.length && !disabled\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            aria-hidden=\"true\"\n            [attr.title]=\"messageFor('clearTitle')\"\n            (click)=\"clearValue($event)\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <button\n            tabindex=\"-1\"\n            type=\"button\"\n            aria-hidden=\"true\"\n            class=\"k-input-button k-button k-icon-button\"\n            [ngClass]=\"selectButtonClasses\"\n        >\n            <span\n                class=\"k-button-icon k-icon\"\n                [ngClass]=\"buttonClasses\"\n            ></span>\n        </button>\n        <ng-template #popupTemplate>\n            <span\n                *ngIf=\"filterable\"\n                class=\"k-list-filter\"\n            >\n                <span\n                    class=\"k-textbox k-input\"\n                    [ngClass]=\"filterInputClasses\"\n                >\n                    <span class=\"k-input-prefix\">\n                        <span class=\"k-input-icon k-icon k-i-search\"></span>\n                    </span>\n                    <input\n                        #filterInput\n                        (input)=\"handleFilterInputChange($event.target.value)\"\n                        [filterInput]=\"filterable && !touchEnabled\"\n                        (keydown.arrowdown)=\"handleKeydown($event)\"\n                        (keydown.alt.arrowup)=\"handleKeydown($event)\"\n                        [(ngModel)]=\"filter\"\n                        class=\"k-input-inner\"\n                        role=\"textbox\"\n                        aria-haspopup=\"true\"\n                        aria-expanded=\"false\"\n                        tabindex=\"0\"\n                        aria-disabled=\"false\"\n                        aria-readonly=\"false\"\n                        [kendoEventsOutsideAngular]=\"{\n                            blur: handleBlur\n                        }\"\n                        [scope]=\"this\"\n                    >\n                </span>\n            </span>\n            <!--header template-->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <kendo-treeview\n                #treeview\n                *ngIf=\"data.length !== 0 && !allNodesHidden\"\n                [size]=\"size\"\n                [nodes]=\"data\"\n                [style.maxHeight.px]=\"listHeight\"\n                [animate]=\"false\"\n                [(selectedKeys)]=\"selectedKeys\"\n                [selectBy]=\"selectBy\"\n                [textField]=\"textField\"\n                kendoTreeViewSelectable\n                [children]=\"children\"\n                [hasChildren]=\"hasChildren\"\n                [loadOnDemand]=\"loadOnDemand\"\n                [isExpanded]=\"isNodeExpanded\"\n                [isDisabled]=\"itemDisabled\"\n                [nodeTemplate]=\"nodeTemplate\"\n                [filter]=\"filter\"\n                [isVisible]=\"isNodeVisible\"\n                (focusout)=\"handleBlur($event)\"\n                (keydown)=\"handleKeydown($event)\"\n                (selectionChange)=\"onSelectionChange($event)\"\n                (expand)=\"nodeExpand.emit($event)\"\n                (collapse)=\"nodeCollapse.emit($event)\"\n            >\n            </kendo-treeview>\n            <!--footer template-->\n            <ng-template\n                *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <!--no-data template-->\n            <div class=\"k-no-data\" *ngIf=\"data.length === 0 || allNodesHidden\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate?.templateRef\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ messageFor('noDataText') }}</div>\n                </ng-template>\n            </div>\n        </ng-template>\n        <ng-container #container></ng-container>\n    ",
+            template: "\n        <ng-container kendoDropDownTreeLocalizedMessages\n            i18n-noDataText=\"kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.dropdowntree.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n\n            i18n-selectButtonText=\"kendo.dropdowntree.selectButtonText|The text set as aria-label on the select button\"\n            selectButtonText=\"Select\"\n        >\n        </ng-container>\n        <span\n            [attr.id]=\"valueLabelId\"\n            class=\"k-input-inner\"\n            role=\"option\"\n        >\n            <span class=\"k-input-value-text\">\n                <ng-template *ngIf=\"valueTemplate\"\n                    [templateContext]=\"{\n                        templateRef: valueTemplate.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!valueTemplate\"> {{ text || placeholder }} </ng-template>\n            </span>\n        </span>\n        <span\n            *ngIf=\"!loading && !readonly && clearButton && text?.length && !disabled\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            aria-hidden=\"true\"\n            [attr.title]=\"messageFor('clearTitle')\"\n            (click)=\"clearValue($event)\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <button\n            tabindex=\"-1\"\n            type=\"button\"\n            aria-hidden=\"true\"\n            class=\"k-input-button k-button k-icon-button\"\n            [ngClass]=\"selectButtonClasses\"\n            [attr.aria-label]=\"messageFor('selectButtonText')\"\n        >\n            <span\n                class=\"k-button-icon k-icon\"\n                [ngClass]=\"buttonClasses\"\n            ></span>\n        </button>\n        <ng-template #popupTemplate>\n            <span\n                *ngIf=\"filterable\"\n                class=\"k-list-filter\"\n            >\n                <span\n                    class=\"k-textbox k-input\"\n                    [ngClass]=\"filterInputClasses\"\n                >\n                    <span class=\"k-input-prefix\">\n                        <span class=\"k-input-icon k-icon k-i-search\"></span>\n                    </span>\n                    <input\n                        #filterInput\n                        (input)=\"handleFilterInputChange($event.target.value)\"\n                        [filterInput]=\"filterable && !touchEnabled\"\n                        (keydown.arrowdown)=\"handleKeydown($event)\"\n                        (keydown.alt.arrowup)=\"handleKeydown($event)\"\n                        [(ngModel)]=\"filter\"\n                        class=\"k-input-inner\"\n                        role=\"textbox\"\n                        aria-haspopup=\"true\"\n                        aria-expanded=\"false\"\n                        tabindex=\"0\"\n                        aria-disabled=\"false\"\n                        aria-readonly=\"false\"\n                        [kendoEventsOutsideAngular]=\"{\n                            blur: handleBlur\n                        }\"\n                        [scope]=\"this\"\n                    >\n                </span>\n            </span>\n            <!--header template-->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <kendo-treeview\n                #treeview\n                *ngIf=\"data.length !== 0 && !allNodesHidden\"\n                [size]=\"size\"\n                [nodes]=\"data\"\n                [style.maxHeight.px]=\"listHeight\"\n                [animate]=\"false\"\n                [(selectedKeys)]=\"selectedKeys\"\n                [selectBy]=\"selectBy\"\n                [textField]=\"textField\"\n                kendoTreeViewSelectable\n                [children]=\"children\"\n                [hasChildren]=\"hasChildren\"\n                [loadOnDemand]=\"loadOnDemand\"\n                [isExpanded]=\"isNodeExpanded\"\n                [isDisabled]=\"itemDisabled\"\n                [nodeTemplate]=\"nodeTemplate\"\n                [filter]=\"filter\"\n                [isVisible]=\"isNodeVisible\"\n                (focusout)=\"handleBlur($event)\"\n                (keydown)=\"handleKeydown($event)\"\n                (selectionChange)=\"onSelectionChange($event)\"\n                (expand)=\"nodeExpand.emit($event)\"\n                (collapse)=\"nodeCollapse.emit($event)\"\n            >\n            </kendo-treeview>\n            <!--footer template-->\n            <ng-template\n                *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <!--no-data template-->\n            <div class=\"k-no-data\" *ngIf=\"data.length === 0 || allNodesHidden\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate?.templateRef\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ messageFor('noDataText') }}</div>\n                </ng-template>\n            </div>\n        </ng-template>\n        <ng-container #container></ng-container>\n    ",
             changeDetection: ChangeDetectionStrategy.OnPush
         }),
         tslib_1.__param(7, Optional()), tslib_1.__param(7, Inject(TOUCH_ENABLED)),

package/dist/es/dropdowntrees/multiselecttree.component.js

@@ -52,7 +52,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         this.cdr = cdr;
         this.touchEnabled = touchEnabled;
         this.hostClasses = true;
-        this.role = 'listbox';
+        this.role = 'combobox';
         this.ariaHasPopup = 'tree';
         /**
          * Sets the levels in the data set where the values can be found when `valueField` is an Array.
@@ -256,6 +256,13 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "isAriaExpanded", {
+        get: function () {
+            return this.isOpen;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MultiSelectTreeComponent.prototype, "isReadonly", {
         get: function () {
             return this.readonly;
@@ -1376,6 +1383,11 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         HostBinding('attr.role'),
         tslib_1.__metadata("design:type", String)
     ], MultiSelectTreeComponent.prototype, "role", void 0);
+    tslib_1.__decorate([
+        HostBinding('attr.aria-expanded'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "isAriaExpanded", null);
     tslib_1.__decorate([
         HostBinding('attr.aria-haspopup'),
         tslib_1.__metadata("design:type", String)