@progress/kendo-angular-dropdowns 5.5.0 → 6.0.0-dev.202201171002

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

@@ -3,9 +3,9 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, forwardRef, HostBinding, Inject, Input, isDevMode, NgZone, Optional, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, Inject, Input, isDevMode, NgZone, Optional, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { anyChanged, guid, hasObservers, Keys, KendoInput } from '@progress/kendo-angular-common';
+import { anyChanged, guid, hasObservers, Keys, KendoInput, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { NavigationService } from '../common/navigation/navigation.service';
 import { PopupService } from '@progress/kendo-angular-popup';
@@ -15,7 +15,7 @@ import { DisabledItemsService } from '../common/disabled-items/disabled-items.se
 import { SelectionService } from '../common/selection/selection.service';
 import { PreventableEvent } from '../common/models/preventable-event';
 import { NavigationAction } from '../common/navigation/navigation-action';
-import { hasProps, isArray, isObject, isObjectArray, isPresent, isUntouched, noop, parseNumber, valueFrom } from '../common/util';
+import { getFillModeClass, getRoundedClass, getSizeClass, hasProps, isArray, isObject, isObjectArray, isPresent, isUntouched, noop, parseNumber, valueFrom } from '../common/util';
 import { RemoveTagEvent } from '../common/models/remove-tag-event';
 import { MultiSelectTreeMessages } from '../common/constants/error-messages';
 import { HeaderTemplateDirective } from '../common/templates/header-template.directive';
@@ -42,16 +42,18 @@ var ɵ3 = isNodeVisible;
  * Represents the [Kendo UI MultiSelectTree component for Angular]({% slug overview_multiselecttree %}).
  */
 var MultiSelectTreeComponent = /** @class */ (function () {
-    function MultiSelectTreeComponent(popupService, renderer, hostElement, navigationService, _zone, localization, cdr, touchEnabled) {
+    function MultiSelectTreeComponent(wrapper, popupService, renderer, navigationService, _zone, localization, cdr, touchEnabled) {
+        this.wrapper = wrapper;
         this.popupService = popupService;
         this.renderer = renderer;
-        this.hostElement = hostElement;
         this.navigationService = navigationService;
         this._zone = _zone;
         this.localization = localization;
         this.cdr = cdr;
         this.touchEnabled = touchEnabled;
         this.hostClasses = true;
+        this.role = 'listbox';
+        this.ariaHasPopup = 'tree';
         /**
          * Sets the levels in the data set where the values can be found when `valueField` is an Array.
          * The field serves to correctly allocate a data item used when the MultiSelectTree is initialized with a value.
@@ -214,14 +216,93 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         this._popupSettings = DEFAULT_POPUP_SETTINGS;
         this._checkableSettings = DEFAULT_CHECKABLE_SETTINGS;
         this._isFocused = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         this.subscriptions = [];
         this.lastAction = 'check';
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.subscribeEvents();
+        this.subscribeFocusEvents();
     }
     MultiSelectTreeComponent_1 = MultiSelectTreeComponent;
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "isDisabled", {
+        get: function () {
+            return this.disabled;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "isLoading", {
+        get: function () {
+            return this.loading;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "id", {
+        get: function () {
+            return this.focusableId;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "hostTabIndex", {
+        get: function () {
+            return this.tabindex;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "isReadonly", {
+        get: function () {
+            return this.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "ariaDescribedBy", {
+        get: function () {
+            return this.tagListId;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "ariaActiveDescendant", {
+        get: function () {
+            return this.focusedTagId;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    MultiSelectTreeComponent.prototype.handleClick = function () {
+        this.togglePopup(!this.isOpen);
+    };
+    /**
+     * @hidden
+     */
+    MultiSelectTreeComponent.prototype.handleKeydown = function (event) {
+        var deleteTag = this.isWrapperActive && event.keyCode === Keys.Backspace && this.tags.length > 0;
+        if (deleteTag) {
+            this.handleBackspace();
+            return;
+        }
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        var eventData = event;
+        var action = this.navigationService.process({
+            originalEvent: eventData
+        });
+        if (action === NavigationAction.Open) {
+            eventData.preventDefault();
+        }
+    };
     Object.defineProperty(MultiSelectTreeComponent.prototype, "treeview", {
         get: function () {
             return this._treeview;
@@ -262,6 +343,79 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * Sets the size of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         *
+         */
+        set: function (size) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * Sets the border radius of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         *
+         */
+        set: function (rounded) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+            if (rounded) {
+                this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+            }
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * Sets the fillMode of the component.
+         *
+         * The possible values are:
+         * * `'flat'`
+         * * `'solid'` (default)
+         * * `'outline'`
+         * * `null`
+         *
+         */
+        set: function (fillMode) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+            if (fillMode) {
+                this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+            }
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MultiSelectTreeComponent.prototype, "popupSettings", {
         get: function () {
             return this._popupSettings;
@@ -381,7 +535,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
             return this._isFocused;
         },
         set: function (isFocused) {
-            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.hostElement.nativeElement, 'k-state-focused');
+            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
             this._isFocused = isFocused;
         },
         enumerable: true,
@@ -432,7 +586,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
          * @hidden
          */
         get: function () {
-            var containerClasses = ['k-popup-dropdowntree', 'k-reset', 'k-group', 'k-list-container'];
+            var containerClasses = ['k-popup-dropdowntree'];
             if (this.popupSettings.popupClass) {
                 containerClasses.push(this.popupSettings.popupClass);
             }
@@ -568,7 +722,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
     });
     MultiSelectTreeComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.renderer.removeAttribute(this.hostElement.nativeElement, 'tabindex');
+        this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', String(this.isOpen));
         this.subscriptions.push(this.localization
             .changes.subscribe(function (_a) {
@@ -576,6 +730,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
             _this.direction = rtl ? 'rtl' : 'ltr';
             _this.cdr.markForCheck();
         }));
+        this.setComponentClasses();
     };
     /**
      * @hidden
@@ -681,8 +836,12 @@ var MultiSelectTreeComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    MultiSelectTreeComponent.prototype.handleFocus = function () {
+    MultiSelectTreeComponent.prototype.handleFocus = function (event) {
         var _this = this;
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
         if (!this.isFocused) {
             this.isFocused = true;
             if (hasObservers(this.onFocus)) {
@@ -692,7 +851,9 @@ var MultiSelectTreeComponent = /** @class */ (function () {
             }
             // Re-focus the treeview if `close` is prevented
             if (this.isOpen && this.treeview) {
-                this.lastNodeOnFocus.setAttribute('tabindex', '0');
+                if (this.lastNodeOnFocus) {
+                    this.lastNodeOnFocus.setAttribute('tabindex', '0');
+                }
                 this.treeview.focus();
             }
         }
@@ -703,46 +864,20 @@ var MultiSelectTreeComponent = /** @class */ (function () {
     MultiSelectTreeComponent.prototype.handleBlur = function (e) {
         var _this = this;
         var relatedTarget = e && e.relatedTarget;
-        if (this.hostElement.nativeElement.contains(relatedTarget) ||
+        if (this.wrapper.nativeElement.contains(relatedTarget) ||
             (this.isOpen && this.popupRef.popupElement.contains(relatedTarget))) {
             return;
         }
         this.isFocused = false;
         this.togglePopup(false);
         if (hasObservers(this.onBlur) ||
-            isUntouched(this.hostElement.nativeElement)) {
+            isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(function () {
                 _this.onBlur.emit();
                 _this.onTouchedCallback();
             });
         }
     };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.handleClick = function () {
-        this.togglePopup(!this.isOpen);
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.handleKeydown = function (event) {
-        var deleteTag = this.isWrapperActive && event.keyCode === Keys.Backspace && this.tags.length > 0;
-        if (deleteTag) {
-            this.handleBackspace();
-            return;
-        }
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        var eventData = event;
-        var action = this.navigationService.process({
-            originalEvent: eventData
-        });
-        if (action === NavigationAction.Open) {
-            eventData.preventDefault();
-        }
-    };
     /**
      * @hidden
      */
@@ -882,6 +1017,26 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         this.filterChange.next(term);
         this.allNodesHidden = this.nodes.every(function (node, index) { return !_this.isVisible(node, String(index)); });
     };
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "filterInputClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return (this.size ? getSizeClass('input', this.size) : '') + " " + (this.fillMode ? 'k-input-' + this.fillMode : '') + " " + (this.rounded ? getRoundedClass(this.rounded) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "checkAllCheckboxClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return "" + (this.size ? getSizeClass('checkbox', this.size) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @hidden
      */
@@ -997,6 +1152,32 @@ var MultiSelectTreeComponent = /** @class */ (function () {
             .pipe(filter(function () { return !_this.isTreeViewActive; }))
             .subscribe(this.direction === 'rtl' ? this.handleLeftKey.bind(this) : this.handleRightKey.bind(this)), this.navigationService.home.pipe(filter(function () { return !_this.isOpen; })).subscribe(this.handleHome.bind(this)), this.navigationService.end.pipe(filter(function () { return !_this.isOpen; })).subscribe(this.handleEnd.bind(this)), this.navigationService.backspace.pipe(filter(function () { return _this.isTagFocused; })).subscribe(this.handleBackspace.bind(this)), this.navigationService.delete.pipe(filter(function () { return _this.isTagFocused; })).subscribe(this.handleDelete.bind(this)));
     };
+    MultiSelectTreeComponent.prototype.subscribeFocusEvents = function () {
+        var _this = this;
+        if (isDocumentAvailable()) {
+            this.handleFocus = this.handleFocus.bind(this);
+            this.handleDocumentBlur = this.handleDocumentBlur.bind(this);
+            this._zone.runOutsideAngular(function () {
+                var useCapture = true;
+                document.addEventListener('focus', _this.handleFocus, useCapture);
+                document.addEventListener('blur', _this.handleDocumentBlur, useCapture);
+            });
+        }
+    };
+    MultiSelectTreeComponent.prototype.unSubscribeFocusEvents = function () {
+        if (isDocumentAvailable()) {
+            var useCapture = true;
+            document.removeEventListener('focus', this.handleFocus, useCapture);
+            document.removeEventListener('blur', this.handleDocumentBlur, useCapture);
+        }
+    };
+    MultiSelectTreeComponent.prototype.handleDocumentBlur = function (event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.handleBlur(event);
+    };
     MultiSelectTreeComponent.prototype.handleTabKey = function () {
         this.focus();
         if (this.isOpen) {
@@ -1099,6 +1280,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
     };
     MultiSelectTreeComponent.prototype.unsubscribeEvents = function () {
         this.subscriptions.forEach(function (sub) { return sub.unsubscribe(); });
+        this.unSubscribeFocusEvents();
     };
     /**
      * Remove the `TreeView` from the tab order, otherwise a focus loop between the page elements will occur
@@ -1148,16 +1330,84 @@ var MultiSelectTreeComponent = /** @class */ (function () {
             return indices;
         }, []));
     };
+    MultiSelectTreeComponent.prototype.setComponentClasses = function () {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+        }
+    };
     var MultiSelectTreeComponent_1;
     tslib_1.__decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-dropdowntree'),
+        HostBinding('class.k-input'),
         tslib_1.__metadata("design:type", Boolean)
     ], MultiSelectTreeComponent.prototype, "hostClasses", void 0);
+    tslib_1.__decorate([
+        HostBinding('class.k-disabled'),
+        HostBinding('attr.aria-disabled'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "isDisabled", null);
+    tslib_1.__decorate([
+        HostBinding('class.k-loading'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "isLoading", null);
+    tslib_1.__decorate([
+        HostBinding('attr.id'),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "id", null);
     tslib_1.__decorate([
         HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String)
     ], MultiSelectTreeComponent.prototype, "direction", void 0);
+    tslib_1.__decorate([
+        HostBinding('attr.tabindex'),
+        tslib_1.__metadata("design:type", Number),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "hostTabIndex", null);
+    tslib_1.__decorate([
+        HostBinding('attr.role'),
+        tslib_1.__metadata("design:type", String)
+    ], MultiSelectTreeComponent.prototype, "role", void 0);
+    tslib_1.__decorate([
+        HostBinding('attr.aria-haspopup'),
+        tslib_1.__metadata("design:type", String)
+    ], MultiSelectTreeComponent.prototype, "ariaHasPopup", void 0);
+    tslib_1.__decorate([
+        HostBinding('attr.readonly'),
+        HostBinding('attr.aria-readonly'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "isReadonly", null);
+    tslib_1.__decorate([
+        HostBinding('attr.aria-describedby'),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "ariaDescribedBy", null);
+    tslib_1.__decorate([
+        HostBinding('attr.aria-activedescendant'),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "ariaActiveDescendant", null);
+    tslib_1.__decorate([
+        HostListener('click'),
+        tslib_1.__metadata("design:type", Function),
+        tslib_1.__metadata("design:paramtypes", []),
+        tslib_1.__metadata("design:returntype", void 0)
+    ], MultiSelectTreeComponent.prototype, "handleClick", null);
+    tslib_1.__decorate([
+        HostListener('keydown', ['$event']),
+        tslib_1.__metadata("design:type", Function),
+        tslib_1.__metadata("design:paramtypes", [Object]),
+        tslib_1.__metadata("design:returntype", void 0)
+    ], MultiSelectTreeComponent.prototype, "handleKeydown", null);
     tslib_1.__decorate([
         ContentChild(HeaderTemplateDirective, { static: false }),
         tslib_1.__metadata("design:type", HeaderTemplateDirective)
@@ -1186,10 +1436,6 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         ViewChild('popupTemplate', { static: true }),
         tslib_1.__metadata("design:type", TemplateRef)
     ], MultiSelectTreeComponent.prototype, "popupTemplate", void 0);
-    tslib_1.__decorate([
-        ViewChild('wrapper', { static: true }),
-        tslib_1.__metadata("design:type", ElementRef)
-    ], MultiSelectTreeComponent.prototype, "wrapper", void 0);
     tslib_1.__decorate([
         ViewChild('container', { read: ViewContainerRef, static: true }),
         tslib_1.__metadata("design:type", ViewContainerRef)
@@ -1212,6 +1458,21 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Number),
         tslib_1.__metadata("design:paramtypes", [Number])
     ], MultiSelectTreeComponent.prototype, "tabindex", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], MultiSelectTreeComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], MultiSelectTreeComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], MultiSelectTreeComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Object),
@@ -1393,12 +1654,12 @@ var MultiSelectTreeComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-multiselecttree',
-            template: "\n        <ng-container kendoMultiSelectTreeLocalizedMessages\n            i18n-noDataText=\"kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.multiselecttree.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n\n            i18n-checkAllText=\"kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox\"\n            checkAllText=\"Check all\"\n        >\n        </ng-container>\n        <div #wrapper\n            [ngClass]=\"{\n                'k-multiselect-wrap': true,\n                'k-floatwrap': true,\n                'k-state-disabled': this.disabled\n            }\"\n            role=\"listbox\"\n            aria-haspopup=\"tree\"\n            [attr.aria-describedby]=\"tagListId\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-activedescendant]=\"focusedTagId\"\n            [attr.tabindex]=\"tabindex\"\n            [attr.id]=\"focusableId\"\n            [attr.dir]=\"direction\"\n            (click)=\"handleClick()\"\n            (keydown)=\"handleKeydown($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur\n            }\"\n            [scope]=\"this\"\n        >\n            <kendo-taglist\n                [id]=\"tagListId\"\n                [tags]=\"tags\"\n                [focused]=\"focusedTagIndex\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [valueDepth]=\"valueDepth\"\n                [disabled]=\"disabled\"\n                [tagPrefix]=\"tagPrefix\"\n                [template]=\"tagTemplate\"\n                [groupTemplate]=\"groupTagTemplate\"\n                [disabledIndices]=\"disabledIndices\"\n                (removeTag)=\"handleRemoveTag($event)\"\n            >\n            </kendo-taglist>\n            <span *ngIf=\"!tags || !tags.length\"\n                class=\"k-input k-readonly\"\n            >\n                {{ placeholder }}\n            </span>\n            <span\n                *ngIf=\"!disabled && !loading && !readonly && clearButton && tags?.length\"\n                class=\"k-icon k-clear-value k-i-close\"\n                [attr.title]=\"messageFor('clearTitle')\"\n                role=\"button\"\n                tabindex=\"-1\"\n                (click)=\"clearAll($event)\"\n            >\n            </span>\n            <span\n                *ngIf=\"loading\"\n                class=\"k-icon k-i-loading\"\n            >\n            </span>\n        </div>\n        <ng-template #popupTemplate>\n            <span\n                *ngIf=\"filterable\"\n                class=\"k-list-filter\"\n            >\n                <input\n                    #filterInput\n                    (input)=\"handleFilterInputChange($event.target.value)\"\n                    [filterInput]=\"filterable && !touchEnabled\"\n                    (keydown)=\"handleKeydown($event)\"\n                    [(ngModel)]=\"filter\"\n                    class=\"k-textbox\"\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 class=\"k-icon k-i-zoom\"></span>\n            </span>\n            <!--header template-->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <div *ngIf=\"checkAll\" class=\"k-check-all\">\n                <input\n                    #checkAllInput\n                    [checkAll]=\"!filterable && !touchEnabled\"\n                    type=\"checkbox\"\n                    class=\"k-checkbox\"\n                    role=\"checkbox\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                    aria-readonly=\"false\"\n                    [treeview]=\"treeview\"\n                    [checkedItems]=\"checkedItems\"\n                    [valueField]=\"valueField\"\n                    [lastAction]=\"lastAction\"\n                    (checkedItemsChange)=\"handleCheckedItemsChange($event)\"\n                    (keydown)=\"handleKeydown($event)\"\n                    [kendoEventsOutsideAngular]=\"{\n                        blur: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                <span\n                    class=\"k-checkbox-label\"\n                    (click)=\"toggleCheckAll()\"\n                    (mousedown)=\"$event.preventDefault()\"\n                >\n                    {{ messageFor('checkAllText') }}\n                </span>\n            </div>\n            <kendo-treeview\n                #treeview\n                [nodes]=\"data\"\n                [style.maxHeight.px]=\"listHeight\"\n                [animate]=\"false\"\n                kendoMultiSelectTreeCheckable\n                [checkable]=\"checkableSettings\"\n                [checkedItems]=\"checkedItems\"\n                [valueField]=\"valueField\"\n                [textField]=\"textField\"\n                [children]=\"children\"\n                [hasChildren]=\"hasChildren\"\n                [isExpanded]=\"isNodeExpanded\"\n                [isDisabled]=\"itemDisabled\"\n                [nodeTemplate]=\"nodeTemplate\"\n                [loadOnDemand]=\"loadOnDemand\"\n                [filter]=\"filter\"\n                [isVisible]=\"isNodeVisible\"\n                (keydown)=\"handleKeydown($event)\"\n                (nodeClick)=\"handleNodeClick($event)\"\n                (expand)=\"nodeExpand.emit($event)\"\n                (collapse)=\"nodeCollapse.emit($event)\"\n                (checkedItemsChange)=\"handleCheckedItemsChange($event)\"\n                [kendoEventsOutsideAngular]=\"{\n                    focusout: handleBlur\n                }\"\n                [scope]=\"this\"\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-nodata\" *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 kendoMultiSelectTreeLocalizedMessages\n            i18n-noDataText=\"kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.multiselecttree.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n\n            i18n-checkAllText=\"kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox\"\n            checkAllText=\"Check all\"\n        >\n        </ng-container>\n        <kendo-taglist\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [id]=\"tagListId\"\n            [tags]=\"tags\"\n            [focused]=\"focusedTagIndex\"\n            [textField]=\"textField\"\n            [valueField]=\"valueField\"\n            [valueDepth]=\"valueDepth\"\n            [disabled]=\"disabled\"\n            [tagPrefix]=\"tagPrefix\"\n            [template]=\"tagTemplate\"\n            [groupTemplate]=\"groupTagTemplate\"\n            [disabledIndices]=\"disabledIndices\"\n            (removeTag)=\"handleRemoveTag($event)\"\n        >\n            <span *ngIf=\"!tags || !tags.length\"\n                class=\"k-input-inner k-readonly\"\n            >\n                <span class=\"k-input-value-text\">{{ placeholder }}</span>\n            </span>\n        </kendo-taglist>\n        <span\n            *ngIf=\"!disabled && !loading && !readonly && clearButton && tags?.length\"\n            class=\"k-clear-value\"\n            [attr.title]=\"messageFor('clearTitle')\"\n            role=\"button\"\n            tabindex=\"-1\"\n            (click)=\"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            <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)=\"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            <div *ngIf=\"checkAll\" class=\"k-check-all\">\n                <input\n                    #checkAllInput\n                    [checkAll]=\"!filterable && !touchEnabled\"\n                    type=\"checkbox\"\n                    class=\"k-checkbox\"\n                    [ngClass]=\"checkAllCheckboxClasses\"\n                    role=\"checkbox\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                    aria-readonly=\"false\"\n                    [treeview]=\"treeview\"\n                    [checkedItems]=\"checkedItems\"\n                    [valueField]=\"valueField\"\n                    [lastAction]=\"lastAction\"\n                    (checkedItemsChange)=\"handleCheckedItemsChange($event)\"\n                    (keydown)=\"handleKeydown($event)\"\n                    [kendoEventsOutsideAngular]=\"{\n                        blur: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                <span\n                    class=\"k-checkbox-label\"\n                    (click)=\"toggleCheckAll()\"\n                    (mousedown)=\"$event.preventDefault()\"\n                >\n                    {{ messageFor('checkAllText') }}\n                </span>\n            </div>\n            <kendo-treeview\n                #treeview\n                [size]=\"size\"\n                [nodes]=\"data\"\n                [style.maxHeight.px]=\"listHeight\"\n                [animate]=\"false\"\n                kendoMultiSelectTreeCheckable\n                [checkable]=\"checkableSettings\"\n                [checkedItems]=\"checkedItems\"\n                [valueField]=\"valueField\"\n                [textField]=\"textField\"\n                [children]=\"children\"\n                [hasChildren]=\"hasChildren\"\n                [isExpanded]=\"isNodeExpanded\"\n                [isDisabled]=\"itemDisabled\"\n                [nodeTemplate]=\"nodeTemplate\"\n                [loadOnDemand]=\"loadOnDemand\"\n                [filter]=\"filter\"\n                [isVisible]=\"isNodeVisible\"\n                (keydown)=\"handleKeydown($event)\"\n                (nodeClick)=\"handleNodeClick($event)\"\n                (expand)=\"nodeExpand.emit($event)\"\n                (collapse)=\"nodeCollapse.emit($event)\"\n                (checkedItemsChange)=\"handleCheckedItemsChange($event)\"\n                [kendoEventsOutsideAngular]=\"{\n                    focusout: handleBlur\n                }\"\n                [scope]=\"this\"\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    "
         }),
         tslib_1.__param(7, Optional()), tslib_1.__param(7, Inject(TOUCH_ENABLED)),
-        tslib_1.__metadata("design:paramtypes", [PopupService,
+        tslib_1.__metadata("design:paramtypes", [ElementRef,
+            PopupService,
             Renderer2,
-            ElementRef,
             NavigationService,
             NgZone,
             LocalizationService,