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

package/dist/fesm5/index.js

@@ -23,7 +23,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1642685068,
+    publishDate: 1645547418,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -364,6 +364,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
@@ -545,7 +552,7 @@ var SearchBarComponent = /** @class */ (function () {
     SearchBarComponent = __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   "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             Renderer2])
@@ -2182,19 +2189,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;
@@ -2417,15 +2417,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();
         }
@@ -2445,6 +2443,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
      */
@@ -2847,16 +2851,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));
@@ -3078,7 +3072,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  "
         }),
         __param(10, Optional()), __param(10, Inject(TOUCH_ENABLED)),
         __metadata("design:paramtypes", [LocalizationService,
@@ -3404,19 +3398,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;
@@ -3706,7 +3693,6 @@ var ComboBoxComponent = /** @class */ (function () {
         this.createValueStream();
         this.subscribeTouchEvents();
         this.attachSelectClickHandler();
-        this.setMessages();
         this.setComponentClasses();
     };
     ComboBoxComponent.prototype.createValueStream = function () {
@@ -3816,7 +3802,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); }))
@@ -3849,7 +3835,6 @@ var ComboBoxComponent = /** @class */ (function () {
     };
     ComboBoxComponent.prototype.ngOnDestroy = function () {
         this.destroyPopup();
-        clearTimeout(this.messagesTimeout);
         this.subs.unsubscribe();
         if (isPresent(this.valueSubscription)) {
             this.valueSubscription.unsubscribe();
@@ -3951,6 +3936,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
      */
@@ -4457,16 +4448,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) {
@@ -4737,7 +4718,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  "
         }),
         __param(10, Optional()), __param(10, Inject(TOUCH_ENABLED)),
         __metadata("design:paramtypes", [ElementRef,
@@ -4996,7 +4977,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$1(this.dataItem, this.valueField);
@@ -5007,7 +4988,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,
@@ -5411,9 +5392,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();
     };
@@ -5437,7 +5417,6 @@ var DropDownListComponent = /** @class */ (function () {
     DropDownListComponent.prototype.ngOnDestroy = function () {
         this.destroyPopup();
         this.unsubscribeEvents();
-        clearTimeout(this.messagesTimeout);
         if (this.localizationChangesSubscription) {
             this.localizationChangesSubscription.unsubscribe();
         }
@@ -5563,6 +5542,12 @@ var DropDownListComponent = /** @class */ (function () {
     DropDownListComponent.prototype.reset = function () {
         this.value = undefined;
     };
+    /**
+     * @hidden
+     */
+    DropDownListComponent.prototype.messageFor = function (key) {
+        return this.localization.get(key);
+    };
     /**
      * @hidden
      */
@@ -6093,16 +6078,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();
@@ -6400,7 +6375,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  "
         }),
         __param(10, Optional()), __param(10, Inject(TOUCH_ENABLED)),
         __metadata("design:paramtypes", [ElementRef,
@@ -6646,7 +6621,8 @@ var MultiSelectComponent = /** @class */ (function () {
          */
         this.clearButton = true;
         /**
-         * A user-defined callback function which receives an array of selected data items and maps them to an array of tags.
+         * A user-defined callback function which receives an array of selected data items and maps them to an array of tags
+         * ([see examples]({% slug summarytagmode_multiselect %}#toc-rendering-of-tags)).
          *
          * @param { Any[] } dataItems - The selected data items from the list.
          * @returns { Any[] } - The tags that will be rendered by the component.
@@ -6761,6 +6737,7 @@ var MultiSelectComponent = /** @class */ (function () {
          */
         this.removeTag = new EventEmitter();
         this.hostClasses = true;
+        this.role = 'combobox';
         this.initialized = false;
         this._size = 'medium';
         this._rounded = 'medium';
@@ -7137,6 +7114,13 @@ var MultiSelectComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MultiSelectComponent.prototype, "isAriaExpanded", {
+        get: function () {
+            return this.isOpen;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @hidden
      */
@@ -7221,19 +7205,12 @@ var MultiSelectComponent = /** @class */ (function () {
     Object.defineProperty(MultiSelectComponent.prototype, "noDataLabel", {
         get: function () {
             if (this.dataService.itemsCount === 0) {
-                return this.noDataText;
+                return this.messageFor('noDataText');
             }
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiSelectComponent.prototype, "clearTitle", {
-        get: function () {
-            return this.localization.get('clearTitle');
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(MultiSelectComponent.prototype, "clearButtonVisiblity", {
         get: function () {
             if (this.touchEnabled) {
@@ -7453,9 +7430,8 @@ var MultiSelectComponent = /** @class */ (function () {
             .changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
-            _this.setMessages();
+            _this.cdr.markForCheck();
         });
-        this.setMessages();
         this.setState(this.value);
         this.setComponentClasses();
         this.initialized = true;
@@ -7479,7 +7455,6 @@ var MultiSelectComponent = /** @class */ (function () {
     MultiSelectComponent.prototype.ngOnDestroy = function () {
         this._toggle(false);
         this.unsubscribeEvents();
-        clearTimeout(this.messagesTimeout);
     };
     /**
      * Toggles the visibility of the popup
@@ -7517,6 +7492,12 @@ var MultiSelectComponent = /** @class */ (function () {
         this.text = "";
         this.value = [];
     };
+    /**
+     * @hidden
+     */
+    MultiSelectComponent.prototype.messageFor = function (key) {
+        return this.localization.get(key);
+    };
     // NG MODEL BINDINGS
     /**
      * @hidden
@@ -7961,16 +7942,6 @@ var MultiSelectComponent = /** @class */ (function () {
             setTimeout(function () { return _this._zone.run(f); });
         });
     };
-    MultiSelectComponent.prototype.setMessages = function () {
-        var _this = this;
-        this._zone.runOutsideAngular(function () {
-            clearTimeout(_this.messagesTimeout);
-            _this.messagesTimeout = setTimeout(function () {
-                _this.noDataText = _this.localization.get('noDataText');
-                _this.cdr.detectChanges();
-            });
-        });
-    };
     MultiSelectComponent.prototype.setComponentClasses = function () {
         if (this.size) {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
@@ -8207,6 +8178,15 @@ var MultiSelectComponent = /** @class */ (function () {
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], MultiSelectComponent.prototype, "isLoading", null);
+    __decorate([
+        HostBinding('attr.role'),
+        __metadata("design:type", String)
+    ], MultiSelectComponent.prototype, "role", void 0);
+    __decorate([
+        HostBinding('attr.aria-expanded'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], MultiSelectComponent.prototype, "isAriaExpanded", null);
     __decorate([
         HostListener('mousedown', ['$event']),
         __metadata("design:type", Function),
@@ -8235,7 +8215,7 @@ var MultiSelectComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-multiselect',
-            template: "\n        <ng-container kendoMultiSelectLocalizedMessages\n            i18n-noDataText=\"kendo.multiselect.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.combobox.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <kendo-taglist\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [id]=\"tagListId\"\n            [tags]=\"tags\"\n            [textField]=\"textField\"\n            [valueField]=\"valueField\"\n            [focused]=\"focusedTagIndex\"\n            [disabled]=\"disabled\"\n            [template]=\"tagTemplate\"\n            [groupTemplate]=\"groupTagTemplate\"\n            [tagPrefix]=\"tagPrefix\"\n            [disabledIndices]=\"disabledIndices\"\n            (removeTag)=\"handleRemoveTag($event)\"\n        >\n            <kendo-searchbar\n                #searchbar\n                [id]=\"focusableId\"\n                [role]=\"'listbox'\"\n                [tagListId]=\"tagListId\"\n                [activeDescendant]=\"activeDescendant\"\n                [noDataLabel]=\"noDataLabel\"\n                [userInput]=\"text\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [tabIndex]=\"tabIndex\"\n                [popupOpen]=\"isOpen\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"handleFilter($event)\"\n                (onBlur)=\"onSearchBarBlur()\"\n                (onFocus)=\"onSearchBarFocus()\"\n            >\n            </kendo-searchbar>\n        </kendo-taglist>\n\n        <span\n            *ngIf=\"!loading && !readonly && clearButton && (tags?.length || text?.length)\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            [attr.title]=\"clearTitle\"\n            role=\"button\"\n            tabindex=\"-1\"\n            (mousedown)=\"clearAll($event)\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <span\n            *ngIf=\"loading\"\n            class=\"k-icon k-i-loading\"\n        >\n        </span>\n        <ng-template #popupTemplate>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\n            <!--custom item template-->\n            <div\n                *ngIf=\"allowCustom && text\"\n                class=\"k-list\"\n                [ngClass]=\"customItemSizeClass\"\n            >\n                <div class=\"k-list-item k-custom-item\" kendoDropDownsSelectable [multipleSelection]=\"true\" [index]=\"-1\">\n                    <ng-template *ngIf=\"customItemTemplate;else default_custom_item_template\"\n                        [templateContext]=\"{\n                            templateRef: customItemTemplate.templateRef,\n                            $implicit: text\n                        }\">\n                    </ng-template>\n                    <ng-template #default_custom_item_template>{{ text }}</ng-template>\n                    <span class=\"k-icon k-i-plus\" style=\"float: right\"></span>\n                </div>\n            </div>\n            <!--list-->\n            <kendo-list\n                #optionsList\n                [size]=\"size\"\n                [rounded]=\"rounded\"\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [height]=\"listHeight\"\n                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [show]=\"isOpen\"\n                [multipleSelection]=\"true\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\n                [checkboxes]=\"checkboxes\"\n                >\n            </kendo-list>\n            <!--no data template-->\n            <div class=\"k-no-data\" *ngIf=\"data.length === 0\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ noDataText }}</div>\n                </ng-template>\n            </div>\n            <!--footer template-->\n            <ng-template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </ng-template>\n        </ng-template>\n        <ng-template [ngIf]=\"isOpen\">\n            <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n        </ng-template>\n        <ng-container #container></ng-container>\n  "
+            template: "\n        <ng-container kendoMultiSelectLocalizedMessages\n            i18n-noDataText=\"kendo.multiselect.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.multiselect.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <kendo-taglist\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [id]=\"tagListId\"\n            [tags]=\"tags\"\n            [textField]=\"textField\"\n            [valueField]=\"valueField\"\n            [focused]=\"focusedTagIndex\"\n            [disabled]=\"disabled\"\n            [template]=\"tagTemplate\"\n            [groupTemplate]=\"groupTagTemplate\"\n            [tagPrefix]=\"tagPrefix\"\n            [disabledIndices]=\"disabledIndices\"\n            (removeTag)=\"handleRemoveTag($event)\"\n        >\n            <kendo-searchbar\n                #searchbar\n                [id]=\"focusableId\"\n                [role]=\"'textbox'\"\n                [tagListId]=\"tagListId\"\n                [activeDescendant]=\"activeDescendant\"\n                [noDataLabel]=\"noDataLabel\"\n                [userInput]=\"text\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [tabIndex]=\"tabIndex\"\n                [popupOpen]=\"isOpen\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"handleFilter($event)\"\n                (onBlur)=\"onSearchBarBlur()\"\n                (onFocus)=\"onSearchBarFocus()\"\n            >\n            </kendo-searchbar>\n        </kendo-taglist>\n\n        <span\n            *ngIf=\"!loading && !readonly && clearButton && (tags?.length || text?.length)\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            [attr.title]=\"messageFor('clearTitle')\"\n            role=\"button\"\n            tabindex=\"-1\"\n            (mousedown)=\"clearAll($event)\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <span\n            *ngIf=\"loading\"\n            class=\"k-icon k-i-loading\"\n        >\n        </span>\n        <ng-template #popupTemplate>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\n            <!--custom item template-->\n            <div\n                *ngIf=\"allowCustom && text\"\n                class=\"k-list\"\n                [ngClass]=\"customItemSizeClass\"\n            >\n                <div class=\"k-list-item k-custom-item\" kendoDropDownsSelectable [multipleSelection]=\"true\" [index]=\"-1\">\n                    <ng-template *ngIf=\"customItemTemplate;else default_custom_item_template\"\n                        [templateContext]=\"{\n                            templateRef: customItemTemplate.templateRef,\n                            $implicit: text\n                        }\">\n                    </ng-template>\n                    <ng-template #default_custom_item_template>{{ text }}</ng-template>\n                    <span class=\"k-icon k-i-plus\" style=\"float: right\"></span>\n                </div>\n            </div>\n            <!--list-->\n            <kendo-list\n                #optionsList\n                [size]=\"size\"\n                [rounded]=\"rounded\"\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [height]=\"listHeight\"\n                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [show]=\"isOpen\"\n                [multipleSelection]=\"true\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\n                [checkboxes]=\"checkboxes\"\n                >\n            </kendo-list>\n            <!--no data template-->\n            <div class=\"k-no-data\" *ngIf=\"data.length === 0\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ messageFor('noDataText') }}</div>\n                </ng-template>\n            </div>\n            <!--footer template-->\n            <ng-template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </ng-template>\n        </ng-template>\n        <ng-template [ngIf]=\"isOpen\">\n            <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n        </ng-template>\n        <ng-container #container></ng-container>\n  "
         }),
         __param(11, Optional()), __param(11, Inject(TOUCH_ENABLED)),
         __metadata("design:paramtypes", [ElementRef,
@@ -8609,7 +8589,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    "
         }),
         __param(10, Inject(TOUCH_ENABLED)),
         __metadata("design:paramtypes", [LocalizationService,
@@ -9995,7 +9975,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
         }),
         __param(7, Optional()), __param(7, Inject(TOUCH_ENABLED)),
@@ -10031,7 +10011,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         this.cdr = cdr;
         this.touchEnabled = touchEnabled$$1;
         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.
@@ -10235,6 +10215,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;
@@ -11355,6 +11342,11 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         HostBinding('attr.role'),
         __metadata("design:type", String)
     ], MultiSelectTreeComponent.prototype, "role", void 0);
+    __decorate([
+        HostBinding('attr.aria-expanded'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "isAriaExpanded", null);
     __decorate([
         HostBinding('attr.aria-haspopup'),
         __metadata("design:type", String)
@@ -11950,7 +11942,7 @@ var TagListComponent = /** @class */ (function () {
     TagListComponent = __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  "
         }),
         __metadata("design:paramtypes", [Renderer2,
             ElementRef])
@@ -11978,6 +11970,10 @@ var Messages = /** @class */ (function (_super) {
         Input(),
         __metadata("design:type", String)
     ], Messages.prototype, "checkAllText", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "selectButtonText", void 0);
     return Messages;
 }(ComponentMessages));
 
@@ -12384,7 +12380,7 @@ var BaseCheckDirective = /** @class */ (function () {
         var level = getHierarchicalItemLevel(item.index);
         var candidate = __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;
@@ -12395,15 +12391,29 @@ var BaseCheckDirective = /** @class */ (function () {
         var candidate = __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);
     };
     __decorate([
         Input(),