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

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

@@ -4,9 +4,9 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 var MultiSelectTreeComponent_1;
-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';
@@ -16,7 +16,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';
@@ -43,16 +43,18 @@ const ɵ3 = isNodeVisible;
  * Represents the [Kendo UI MultiSelectTree component for Angular]({% slug overview_multiselecttree %}).
  */
 let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTreeComponent {
-    constructor(popupService, renderer, hostElement, navigationService, _zone, localization, cdr, touchEnabled) {
+    constructor(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.
@@ -215,12 +217,63 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
         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();
+    }
+    get isDisabled() {
+        return this.disabled;
+    }
+    get isLoading() {
+        return this.loading;
+    }
+    get id() {
+        return this.focusableId;
+    }
+    get hostTabIndex() {
+        return this.tabindex;
+    }
+    get isReadonly() {
+        return this.readonly;
+    }
+    get ariaDescribedBy() {
+        return this.tagListId;
+    }
+    get ariaActiveDescendant() {
+        return this.focusedTagId;
+    }
+    /**
+     * @hidden
+     */
+    handleClick() {
+        this.togglePopup(!this.isOpen);
+    }
+    /**
+     * @hidden
+     */
+    handleKeydown(event) {
+        const deleteTag = this.isWrapperActive && event.keyCode === Keys.Backspace && this.tags.length > 0;
+        if (deleteTag) {
+            this.handleBackspace();
+            return;
+        }
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const eventData = event;
+        const action = this.navigationService.process({
+            originalEvent: eventData
+        });
+        if (action === NavigationAction.Open) {
+            eventData.preventDefault();
+        }
     }
     set treeview(treeview) {
         this._treeview = treeview;
@@ -253,6 +306,67 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
     get tabindex() {
         return this.disabled ? -1 : this._tabindex;
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    set size(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;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    set rounded(rounded) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        }
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    set fillMode(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;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     /**
      * Configures the popup of the MultiSelectTree.
      *
@@ -342,7 +456,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
         return `${this.tagPrefix}-${valueFrom({ dataItem }, this.valueField)}`;
     }
     set isFocused(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;
     }
     get isFocused() {
@@ -376,7 +490,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
      * @hidden
      */
     get popupContainerClasses() {
-        const containerClasses = ['k-popup-dropdowntree', 'k-reset', 'k-group', 'k-list-container'];
+        const containerClasses = ['k-popup-dropdowntree'];
         if (this.popupSettings.popupClass) {
             containerClasses.push(this.popupSettings.popupClass);
         }
@@ -464,13 +578,14 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
         return this.checkAllInput && document.activeElement === this.checkAllInput.nativeElement;
     }
     ngOnInit() {
-        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(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.markForCheck();
         }));
+        this.setComponentClasses();
     }
     /**
      * @hidden
@@ -574,7 +689,11 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
     /**
      * @hidden
      */
-    handleFocus() {
+    handleFocus(event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
         if (!this.isFocused) {
             this.isFocused = true;
             if (hasObservers(this.onFocus)) {
@@ -584,7 +703,9 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
             }
             // 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();
             }
         }
@@ -594,46 +715,20 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
      */
     handleBlur(e) {
         const 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(() => {
                 this.onBlur.emit();
                 this.onTouchedCallback();
             });
         }
     }
-    /**
-     * @hidden
-     */
-    handleClick() {
-        this.togglePopup(!this.isOpen);
-    }
-    /**
-     * @hidden
-     */
-    handleKeydown(event) {
-        const deleteTag = this.isWrapperActive && event.keyCode === Keys.Backspace && this.tags.length > 0;
-        if (deleteTag) {
-            this.handleBackspace();
-            return;
-        }
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        const eventData = event;
-        const action = this.navigationService.process({
-            originalEvent: eventData
-        });
-        if (action === NavigationAction.Open) {
-            eventData.preventDefault();
-        }
-    }
     /**
      * @hidden
      */
@@ -768,6 +863,18 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
         this.filterChange.next(term);
         this.allNodesHidden = this.nodes.every((node, index) => !this.isVisible(node, String(index)));
     }
+    /**
+     * @hidden
+     */
+    get filterInputClasses() {
+        return `${this.size ? getSizeClass('input', this.size) : ''} ${this.fillMode ? 'k-input-' + this.fillMode : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
+    }
+    /**
+     * @hidden
+     */
+    get checkAllCheckboxClasses() {
+        return `${this.size ? getSizeClass('checkbox', this.size) : ''}`;
+    }
     /**
      * @hidden
      */
@@ -880,6 +987,31 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
             .pipe(filter(() => !this.isTreeViewActive))
             .subscribe(this.direction === 'rtl' ? this.handleLeftKey.bind(this) : this.handleRightKey.bind(this)), this.navigationService.home.pipe(filter(() => !this.isOpen)).subscribe(this.handleHome.bind(this)), this.navigationService.end.pipe(filter(() => !this.isOpen)).subscribe(this.handleEnd.bind(this)), this.navigationService.backspace.pipe(filter(() => this.isTagFocused)).subscribe(this.handleBackspace.bind(this)), this.navigationService.delete.pipe(filter(() => this.isTagFocused)).subscribe(this.handleDelete.bind(this)));
     }
+    subscribeFocusEvents() {
+        if (isDocumentAvailable()) {
+            this.handleFocus = this.handleFocus.bind(this);
+            this.handleDocumentBlur = this.handleDocumentBlur.bind(this);
+            this._zone.runOutsideAngular(() => {
+                const useCapture = true;
+                document.addEventListener('focus', this.handleFocus, useCapture);
+                document.addEventListener('blur', this.handleDocumentBlur, useCapture);
+            });
+        }
+    }
+    unSubscribeFocusEvents() {
+        if (isDocumentAvailable()) {
+            const useCapture = true;
+            document.removeEventListener('focus', this.handleFocus, useCapture);
+            document.removeEventListener('blur', this.handleDocumentBlur, useCapture);
+        }
+    }
+    handleDocumentBlur(event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.handleBlur(event);
+    }
     handleTabKey() {
         this.focus();
         if (this.isOpen) {
@@ -982,6 +1114,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
     }
     unsubscribeEvents() {
         this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.unSubscribeFocusEvents();
     }
     /**
      * Remove the `TreeView` from the tab order, otherwise a focus loop between the page elements will occur
@@ -1028,16 +1161,84 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
             return indices;
         }, []));
     }
+    setComponentClasses() {
+        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));
+        }
+    }
 };
 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)
@@ -1066,10 +1267,6 @@ tslib_1.__decorate([
     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)
@@ -1092,6 +1289,21 @@ tslib_1.__decorate([
     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),
@@ -1285,87 +1497,75 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = tslib_1.__decorate([
             checkAllText="Check all"
         >
         </ng-container>
-        <div #wrapper
-            [ngClass]="{
-                'k-multiselect-wrap': true,
-                'k-floatwrap': true,
-                'k-state-disabled': this.disabled
-            }"
-            role="listbox"
-            aria-haspopup="tree"
-            [attr.aria-describedby]="tagListId"
-            [attr.aria-readonly]="readonly"
-            [attr.aria-activedescendant]="focusedTagId"
-            [attr.tabindex]="tabindex"
-            [attr.id]="focusableId"
-            [attr.dir]="direction"
-            (click)="handleClick()"
-            (keydown)="handleKeydown($event)"
-            [kendoEventsOutsideAngular]="{
-                focus: handleFocus,
-                blur: handleBlur
-            }"
-            [scope]="this"
+        <kendo-taglist
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [id]="tagListId"
+            [tags]="tags"
+            [focused]="focusedTagIndex"
+            [textField]="textField"
+            [valueField]="valueField"
+            [valueDepth]="valueDepth"
+            [disabled]="disabled"
+            [tagPrefix]="tagPrefix"
+            [template]="tagTemplate"
+            [groupTemplate]="groupTagTemplate"
+            [disabledIndices]="disabledIndices"
+            (removeTag)="handleRemoveTag($event)"
         >
-            <kendo-taglist
-                [id]="tagListId"
-                [tags]="tags"
-                [focused]="focusedTagIndex"
-                [textField]="textField"
-                [valueField]="valueField"
-                [valueDepth]="valueDepth"
-                [disabled]="disabled"
-                [tagPrefix]="tagPrefix"
-                [template]="tagTemplate"
-                [groupTemplate]="groupTagTemplate"
-                [disabledIndices]="disabledIndices"
-                (removeTag)="handleRemoveTag($event)"
-            >
-            </kendo-taglist>
             <span *ngIf="!tags || !tags.length"
-                class="k-input k-readonly"
+                class="k-input-inner k-readonly"
             >
-                {{ placeholder }}
+                <span class="k-input-value-text">{{ placeholder }}</span>
             </span>
-            <span
-                *ngIf="!disabled && !loading && !readonly && clearButton && tags?.length"
-                class="k-icon k-clear-value k-i-close"
-                [attr.title]="messageFor('clearTitle')"
-                role="button"
-                tabindex="-1"
-                (click)="clearAll($event)"
-            >
-            </span>
-            <span
-                *ngIf="loading"
-                class="k-icon k-i-loading"
-            >
-            </span>
-        </div>
+        </kendo-taglist>
+        <span
+            *ngIf="!disabled && !loading && !readonly && clearButton && tags?.length"
+            class="k-clear-value"
+            [attr.title]="messageFor('clearTitle')"
+            role="button"
+            tabindex="-1"
+            (click)="clearAll($event)"
+        >
+            <span class="k-icon k-i-x"></span>
+        </span>
+        <span
+            *ngIf="loading"
+            class="k-icon k-i-loading"
+        >
+        </span>
         <ng-template #popupTemplate>
             <span
                 *ngIf="filterable"
                 class="k-list-filter"
             >
-                <input
-                    #filterInput
-                    (input)="handleFilterInputChange($event.target.value)"
-                    [filterInput]="filterable && !touchEnabled"
-                    (keydown)="handleKeydown($event)"
-                    [(ngModel)]="filter"
-                    class="k-textbox"
-                    role="textbox"
-                    aria-haspopup="true"
-                    aria-expanded="false"
-                    tabindex="0"
-                    aria-disabled="false"
-                    aria-readonly="false"
-                    [kendoEventsOutsideAngular]="{
-                        blur: handleBlur
-                    }"
-                    [scope]="this"
+                <span
+                    class="k-textbox k-input"
+                    [ngClass]="filterInputClasses"
                 >
-                <span class="k-icon k-i-zoom"></span>
+                    <span class="k-input-prefix">
+                        <span class="k-input-icon k-icon k-i-search"></span>
+                    </span>
+                    <input
+                        #filterInput
+                        (input)="handleFilterInputChange($event.target.value)"
+                        [filterInput]="filterable && !touchEnabled"
+                        (keydown)="handleKeydown($event)"
+                        [(ngModel)]="filter"
+                        class="k-input-inner"
+                        role="textbox"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        [kendoEventsOutsideAngular]="{
+                            blur: handleBlur
+                        }"
+                        [scope]="this"
+                    >
+                </span>
             </span>
             <!--header template-->
             <ng-template
@@ -1380,6 +1580,7 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = tslib_1.__decorate([
                     [checkAll]="!filterable && !touchEnabled"
                     type="checkbox"
                     class="k-checkbox"
+                    [ngClass]="checkAllCheckboxClasses"
                     role="checkbox"
                     tabindex="0"
                     aria-disabled="false"
@@ -1405,6 +1606,7 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = tslib_1.__decorate([
             </div>
             <kendo-treeview
                 #treeview
+                [size]="size"
                 [nodes]="data"
                 [style.maxHeight.px]="listHeight"
                 [animate]="false"
@@ -1440,7 +1642,7 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = tslib_1.__decorate([
                 }">
             </ng-template>
             <!--no-data template-->
-            <div class="k-nodata" *ngIf="data?.length === 0 || allNodesHidden">
+            <div class="k-no-data" *ngIf="data?.length === 0 || allNodesHidden">
                 <ng-template [ngIf]="noDataTemplate"
                     [templateContext]="{
                         templateRef: noDataTemplate?.templateRef
@@ -1455,9 +1657,9 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = tslib_1.__decorate([
     `
     }),
     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,