@progress/kendo-angular-dropdowns 5.5.1 → 6.0.1-dev.202201201129

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, NgZone, Renderer2, TemplateRef, ViewChild, ChangeDetectorRef, ContentChild, forwardRef, ViewContainerRef, isDevMode, Optional, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, NgZone, Renderer2, TemplateRef, ViewChild, ChangeDetectorRef, ContentChild, forwardRef, ViewContainerRef, isDevMode, Optional, Inject, HostListener } from '@angular/core';
 import { anyChanged, guid, hasObservers, isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { TreeViewComponent, DataBoundComponent, ExpandableComponent } from '@progress/kendo-angular-treeview';
@@ -15,7 +15,7 @@ import { NavigationService } from '../common/navigation/navigation.service';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { SelectionService } from '../common/selection/selection.service';
 import { PreventableEvent } from '../common/models/preventable-event';
-import { inDropDown, isArray, isPresent, isUntouched, noop } from '../common/util';
+import { getFillModeClass, getRoundedClass, getSizeClass, inDropDown, isArray, isPresent, isUntouched, noop } from '../common/util';
 import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
 import { of } from 'rxjs';
 import { tap } from 'rxjs/operators';
@@ -39,16 +39,18 @@ var ɵ3 = isNodeVisible;
  * Represents the [Kendo UI DropDownTree component for Angular]({% slug overview_ddt %}).
  */
 var DropDownTreeComponent = /** @class */ (function () {
-    function DropDownTreeComponent(popupService, navigationService, renderer, hostElement, _zone, cdr, localization, touchEnabled) {
+    function DropDownTreeComponent(wrapper, popupService, navigationService, renderer, _zone, cdr, localization, touchEnabled) {
+        this.wrapper = wrapper;
         this.popupService = popupService;
         this.navigationService = navigationService;
         this.renderer = renderer;
-        this.hostElement = hostElement;
         this._zone = _zone;
         this.cdr = cdr;
         this.localization = localization;
         this.touchEnabled = touchEnabled;
         this.hostClasses = true;
+        this.role = 'listbox';
+        this.ariaHasPopup = 'tree';
         /**
          * Fires each time the popup is about to open
          * ([see example]({% slug openstate_ddt %})).
@@ -183,21 +185,78 @@ var DropDownTreeComponent = /** @class */ (function () {
         this._popupSettings = DEFAULT_POPUP_SETTINGS;
         this._tabindex = 0;
         this._isFocused = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         this.subscriptions = [];
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.subscribeEvents();
         this.subscribeTouchEvents();
+        this.subscribeFocusEvents();
     }
     DropDownTreeComponent_1 = DropDownTreeComponent;
-    Object.defineProperty(DropDownTreeComponent.prototype, "clearable", {
+    Object.defineProperty(DropDownTreeComponent.prototype, "isDisabled", {
         get: function () {
-            return this.clearButton;
+            return this.disabled;
         },
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DropDownTreeComponent.prototype, "isLoading", {
+        get: function () {
+            return this.loading;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownTreeComponent.prototype, "id", {
+        get: function () {
+            return this.focusableId;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownTreeComponent.prototype, "hostTabIndex", {
+        get: function () {
+            return this.tabindex;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownTreeComponent.prototype, "isAriaExpanded", {
+        get: function () {
+            return this.isOpen;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownTreeComponent.prototype, "isReadonly", {
+        get: function () {
+            return this.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    DropDownTreeComponent.prototype.handleClick = function () {
+        this.togglePopup(!this.isOpen);
+    };
+    /**
+     * @hidden
+     */
+    DropDownTreeComponent.prototype.handleKeydown = function (event) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        var eventData = event;
+        this.navigationService.process({
+            originalEvent: eventData
+        });
+    };
     Object.defineProperty(DropDownTreeComponent.prototype, "treeview", {
         get: function () {
             return this._treeview;
@@ -299,12 +358,85 @@ var DropDownTreeComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DropDownTreeComponent.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('picker', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownTreeComponent.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(DropDownTreeComponent.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('picker', this.fillMode));
+            if (fillMode) {
+                this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', fillMode));
+            }
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DropDownTreeComponent.prototype, "isFocused", {
         get: function () {
             return this._isFocused;
         },
         set: function (isFocused) {
-            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-state-focused');
+            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
             this._isFocused = isFocused;
         },
         enumerable: true,
@@ -440,7 +572,7 @@ var DropDownTreeComponent = /** @class */ (function () {
     });
     DropDownTreeComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.renderer.removeAttribute(this.hostElement.nativeElement, 'tabindex');
+        this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.assignAriaDescribedBy();
         this.subscriptions.push(this.localization
             .changes.subscribe(function (_a) {
@@ -448,6 +580,7 @@ var DropDownTreeComponent = /** @class */ (function () {
             _this.direction = rtl ? 'rtl' : 'ltr';
             _this.cdr.markForCheck();
         }));
+        this.setComponentClasses();
     };
     /**
      * @hidden
@@ -498,8 +631,12 @@ var DropDownTreeComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    DropDownTreeComponent.prototype.handleFocus = function () {
+    DropDownTreeComponent.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)) {
@@ -515,13 +652,13 @@ var DropDownTreeComponent = /** @class */ (function () {
     DropDownTreeComponent.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;
         if (hasObservers(this.onBlur) ||
-            isUntouched(this.hostElement.nativeElement)) {
+            isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(function () {
                 _this.togglePopup(false);
                 _this.onBlur.emit();
@@ -532,24 +669,6 @@ var DropDownTreeComponent = /** @class */ (function () {
             this.togglePopup(false);
         }
     };
-    /**
-     * @hidden
-     */
-    DropDownTreeComponent.prototype.handleKeydown = function (event) {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        var eventData = event;
-        this.navigationService.process({
-            originalEvent: eventData
-        });
-    };
-    /**
-     * @hidden
-     */
-    DropDownTreeComponent.prototype.handleClick = function () {
-        this.togglePopup(!this.isOpen);
-    };
     /**
      * Focuses a specific item of the DropDownTree based on a provided index in the format of `1_1`.
      * The targeted item should be expanded in order for it to be focused.
@@ -613,7 +732,7 @@ var DropDownTreeComponent = /** @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);
             }
@@ -726,6 +845,26 @@ var DropDownTreeComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DropDownTreeComponent.prototype, "selectButtonClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return (this.size ? getSizeClass('button', this.size) : '') + " " + (this.fillMode ? 'k-button-' + this.fillMode : '') + " " + (this.fillMode ? 'k-button-' + this.fillMode + '-base' : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownTreeComponent.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
+    });
     DropDownTreeComponent.prototype.verifySettings = function () {
         if (!isDevMode()) {
             return;
@@ -889,7 +1028,7 @@ var DropDownTreeComponent = /** @class */ (function () {
             // Roll up DropDownTree on iOS when tapped outside
             return _this.touchstartDisposeHandler = _this.renderer.listen(document, 'touchstart', function (e) {
                 var target = e.target;
-                if (_this.isFocused && !inDropDown(_this.hostElement, target, _this.popupRef)) {
+                if (_this.isFocused && !inDropDown(_this.wrapper, target, _this.popupRef)) {
                     _this._zone.run(function () {
                         if (_this.isOpen) {
                             _this.treeview.blur();
@@ -900,34 +1039,118 @@ var DropDownTreeComponent = /** @class */ (function () {
             });
         });
     };
+    DropDownTreeComponent.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);
+            });
+        }
+    };
+    DropDownTreeComponent.prototype.unSubscribeFocusEvents = function () {
+        if (isDocumentAvailable()) {
+            var useCapture = true;
+            document.removeEventListener('focus', this.handleFocus, useCapture);
+            document.removeEventListener('blur', this.handleDocumentBlur, useCapture);
+        }
+    };
     DropDownTreeComponent.prototype.unsubscribeEvents = function () {
         this.subscriptions.forEach(function (sub) { return sub.unsubscribe(); });
+        this.unSubscribeFocusEvents();
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
         }
     };
+    DropDownTreeComponent.prototype.handleDocumentBlur = function (event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.handleBlur(event);
+    };
     DropDownTreeComponent.prototype.assignAriaDescribedBy = function () {
         var currentValue = this.wrapper.nativeElement.getAttribute('aria-describedby') || '';
         // add to the current value - don't replace it (the aria-describedby is used by the FormField component as well)
         var newValue = (this.valueLabelId + " " + currentValue.trim()).trim();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-describedby', newValue);
     };
+    DropDownTreeComponent.prototype.setComponentClasses = function () {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
+        }
+    };
     var DropDownTreeComponent_1;
     tslib_1.__decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-dropdowntree'),
-        HostBinding('class.k-dropdowntree-clearable'),
+        HostBinding('class.k-picker'),
         tslib_1.__metadata("design:type", Boolean)
     ], DropDownTreeComponent.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", [])
+    ], DropDownTreeComponent.prototype, "isDisabled", null);
+    tslib_1.__decorate([
+        HostBinding('class.k-loading'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], DropDownTreeComponent.prototype, "isLoading", null);
+    tslib_1.__decorate([
+        HostBinding('attr.id'),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], DropDownTreeComponent.prototype, "id", null);
     tslib_1.__decorate([
         HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String)
     ], DropDownTreeComponent.prototype, "direction", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-dropdowntree-clearable'),
+        HostBinding('attr.tabindex'),
+        tslib_1.__metadata("design:type", Number),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], DropDownTreeComponent.prototype, "hostTabIndex", null);
+    tslib_1.__decorate([
+        HostBinding('attr.role'),
+        tslib_1.__metadata("design:type", String)
+    ], DropDownTreeComponent.prototype, "role", void 0);
+    tslib_1.__decorate([
+        HostBinding('attr.aria-haspopup'),
+        tslib_1.__metadata("design:type", String)
+    ], DropDownTreeComponent.prototype, "ariaHasPopup", void 0);
+    tslib_1.__decorate([
+        HostBinding('attr.aria-expanded'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
-    ], DropDownTreeComponent.prototype, "clearable", null);
+    ], DropDownTreeComponent.prototype, "isAriaExpanded", null);
+    tslib_1.__decorate([
+        HostBinding('attr.readonly'),
+        HostBinding('attr.aria-readonly'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], DropDownTreeComponent.prototype, "isReadonly", null);
+    tslib_1.__decorate([
+        HostListener('click'),
+        tslib_1.__metadata("design:type", Function),
+        tslib_1.__metadata("design:paramtypes", []),
+        tslib_1.__metadata("design:returntype", void 0)
+    ], DropDownTreeComponent.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)
+    ], DropDownTreeComponent.prototype, "handleKeydown", null);
     tslib_1.__decorate([
         ContentChild(NoDataTemplateDirective, { static: false }),
         tslib_1.__metadata("design:type", NoDataTemplateDirective)
@@ -952,10 +1175,6 @@ var DropDownTreeComponent = /** @class */ (function () {
         ViewChild('popupTemplate', { static: true }),
         tslib_1.__metadata("design:type", TemplateRef)
     ], DropDownTreeComponent.prototype, "popupTemplate", void 0);
-    tslib_1.__decorate([
-        ViewChild('wrapper', { static: true }),
-        tslib_1.__metadata("design:type", ElementRef)
-    ], DropDownTreeComponent.prototype, "wrapper", void 0);
     tslib_1.__decorate([
         ViewChild('container', { read: ViewContainerRef, static: true }),
         tslib_1.__metadata("design:type", ViewContainerRef)
@@ -1082,6 +1301,21 @@ var DropDownTreeComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Number),
         tslib_1.__metadata("design:paramtypes", [Number])
     ], DropDownTreeComponent.prototype, "tabindex", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DropDownTreeComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DropDownTreeComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DropDownTreeComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Function)
@@ -1142,14 +1376,14 @@ 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            #wrapper\n            [ngClass]=\"{\n                'k-dropdown-wrap': true,\n                'k-state-disabled': this.disabled\n            }\"\n            [attr.id]=\"focusableId\"\n            role=\"listbox\"\n            aria-haspopup=\"tree\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.tabindex]=\"tabindex\"\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            <span\n                [attr.id]=\"valueLabelId\"\n                class=\"k-input\"\n            >\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                *ngIf=\"!loading && !readonly && clearButton && text?.length && !disabled\"\n                class=\"k-icon k-clear-value k-i-close\"\n                [style.visibility]=\"clearButtonVisiblity\"\n                aria-hidden=\"true\"\n                [attr.title]=\"messageFor('clearTitle')\"\n                (click)=\"clearValue($event)\"\n            >\n            </span>\n            <span class=\"k-select\" aria-hidden=\"true\">\n                <span\n                    class=\"k-icon k-i-arrow-60-down\"\n                    [ngClass]=\"buttonClasses\"\n                ></span>\n            </span>\n        </span>\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.arrowdown)=\"handleKeydown($event)\"\n                    (keydown.alt.arrowup)=\"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            <kendo-treeview\n                #treeview\n                *ngIf=\"data.length !== 0 && !allNodesHidden\"\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-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 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    ",
             changeDetection: ChangeDetectionStrategy.OnPush
         }),
         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,
             NavigationService,
             Renderer2,
-            ElementRef,
             NgZone,
             ChangeDetectorRef,
             LocalizationService, Boolean])