@progress/kendo-angular-dropdowns 6.0.2-dev.202202171128 → 6.0.2-dev.202202251358

package/dist/npm/autocomplete/autocomplete.component.js

@@ -301,19 +301,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;
@@ -536,15 +529,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();
         }
@@ -564,6 +555,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
      */
@@ -966,16 +963,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, util_1.getSizeClass('input', this.size));
@@ -1197,7 +1184,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, core_1.Optional()), tslib_1.__param(10, core_1.Inject(touch_enabled_1.TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,

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

@@ -285,19 +285,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;
@@ -587,7 +580,6 @@ var ComboBoxComponent = /** @class */ (function () {
         this.createValueStream();
         this.subscribeTouchEvents();
         this.attachSelectClickHandler();
-        this.setMessages();
         this.setComponentClasses();
     };
     ComboBoxComponent.prototype.createValueStream = function () {
@@ -697,7 +689,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(rxjs_1.merge(this.navigationService.up, this.navigationService.down, this.navigationService.home, this.navigationService.end)
             .pipe(operators_1.filter(function (event) { return util_1.isPresent(event.index); }))
@@ -730,7 +722,6 @@ var ComboBoxComponent = /** @class */ (function () {
     };
     ComboBoxComponent.prototype.ngOnDestroy = function () {
         this.destroyPopup();
-        clearTimeout(this.messagesTimeout);
         this.subs.unsubscribe();
         if (util_1.isPresent(this.valueSubscription)) {
             this.valueSubscription.unsubscribe();
@@ -832,6 +823,12 @@ var ComboBoxComponent = /** @class */ (function () {
         var valueEmpty = !util_1.isPresent(this.value) || util_1.isEmptyString(this.value);
         return textEmpty && valueEmpty;
     };
+    /**
+     * @hidden
+     */
+    ComboBoxComponent.prototype.messageFor = function (key) {
+        return this.localization.get(key);
+    };
     /**
      * @hidden
      */
@@ -1338,16 +1335,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 (!kendo_angular_common_1.isDocumentAvailable() || !this.touchEnabled) {
@@ -1618,7 +1605,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, core_1.Optional()), tslib_1.__param(10, core_1.Inject(touch_enabled_1.TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,

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

@@ -213,7 +213,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, core_1.Inject(touch_enabled_1.TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,

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

@@ -27,6 +27,10 @@ var Messages = /** @class */ (function (_super) {
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
     ], Messages.prototype, "checkAllText", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], Messages.prototype, "selectButtonText", void 0);
     return Messages;
 }(kendo_angular_l10n_1.ComponentMessages));
 exports.Messages = Messages;

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

@@ -57,6 +57,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
@@ -238,7 +245,7 @@ var SearchBarComponent = /** @class */ (function () {
     SearchBarComponent = tslib_1.__decorate([
         core_1.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", [kendo_angular_l10n_1.LocalizationService,
             core_1.Renderer2])

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

@@ -171,7 +171,7 @@ var TagListComponent = /** @class */ (function () {
     TagListComponent = tslib_1.__decorate([
         core_1.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", [core_1.Renderer2,
             core_1.ElementRef])

package/dist/npm/dropdownlist/dropdownlist.component.js

@@ -234,7 +234,7 @@ var DropDownListComponent = /** @class */ (function () {
     });
     Object.defineProperty(DropDownListComponent.prototype, "ariaActivedescendant", {
         get: function () {
-            if (!util_1.isPresent(this.dataItem)) {
+            if (!util_1.isPresent(this.dataItem) || !this.isOpen) {
                 return;
             }
             return this.optionPrefix + "-" + util_1.getter(this.dataItem, this.valueField);
@@ -245,7 +245,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,
@@ -649,9 +649,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();
     };
@@ -675,7 +674,6 @@ var DropDownListComponent = /** @class */ (function () {
     DropDownListComponent.prototype.ngOnDestroy = function () {
         this.destroyPopup();
         this.unsubscribeEvents();
-        clearTimeout(this.messagesTimeout);
         if (this.localizationChangesSubscription) {
             this.localizationChangesSubscription.unsubscribe();
         }
@@ -801,6 +799,12 @@ var DropDownListComponent = /** @class */ (function () {
     DropDownListComponent.prototype.reset = function () {
         this.value = undefined;
     };
+    /**
+     * @hidden
+     */
+    DropDownListComponent.prototype.messageFor = function (key) {
+        return this.localization.get(key);
+    };
     /**
      * @hidden
      */
@@ -1331,16 +1335,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();
@@ -1638,7 +1632,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\" [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\" [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, core_1.Optional()), tslib_1.__param(10, core_1.Inject(touch_enabled_1.TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,

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

@@ -1382,7 +1382,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: core_1.ChangeDetectionStrategy.OnPush
         }),
         tslib_1.__param(7, core_1.Optional()), tslib_1.__param(7, core_1.Inject(touch_enabled_1.TOUCH_ENABLED)),

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

@@ -58,7 +58,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.
@@ -262,6 +262,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;
@@ -1382,6 +1389,11 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         core_1.HostBinding('attr.role'),
         tslib_1.__metadata("design:type", String)
     ], MultiSelectTreeComponent.prototype, "role", void 0);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.aria-expanded'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "isAriaExpanded", null);
     tslib_1.__decorate([
         core_1.HostBinding('attr.aria-haspopup'),
         tslib_1.__metadata("design:type", String)