@progress/kendo-angular-dropdowns 7.0.0-next.202204011414 → 7.0.0

package/fesm2015/kendo-angular-dropdowns.js

@@ -29,7 +29,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648822118,
+    publishDate: 1650440767,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -2244,6 +2244,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 const NO_VALUE = "";
+const DEFAULT_SIZE$5 = 'medium';
+const DEFAULT_ROUNDED$5 = 'medium';
+const DEFAULT_FILL_MODE$5 = 'solid';
 /**
  * @hidden
  */
@@ -2569,18 +2572,19 @@ class AutoCompleteComponent {
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      *
      */
     set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE$5;
         this.renderer.removeClass(this.wrapper, getSizeClass('input', this.size));
-        if (size) {
-            this.renderer.addClass(this.wrapper, getSizeClass('input', size));
+        if (size !== 'none') {
+            this.renderer.addClass(this.wrapper, getSizeClass('input', newSize));
         }
-        this._size = size;
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -2589,19 +2593,20 @@ class AutoCompleteComponent {
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded) {
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$5;
         this.renderer.removeClass(this.wrapper, getRoundedClass(this.rounded));
-        if (rounded) {
-            this.renderer.addClass(this.wrapper, getRoundedClass(rounded));
+        if (rounded !== 'none') {
+            this.renderer.addClass(this.wrapper, getRoundedClass(newRounded));
         }
-        this._rounded = rounded;
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -2610,18 +2615,19 @@ class AutoCompleteComponent {
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      *
      */
     set fillMode(fillMode) {
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$5;
         this.renderer.removeClass(this.wrapper, getFillModeClass('input', this.fillMode));
-        if (fillMode) {
-            this.renderer.addClass(this.wrapper, getFillModeClass('input', fillMode));
+        if (fillMode !== 'none') {
+            this.renderer.addClass(this.wrapper, getFillModeClass('input', newFillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -3075,13 +3081,13 @@ class AutoCompleteComponent {
         }
     }
     setComponentClasses() {
-        if (this.size) {
+        if (this.size !== 'none') {
             this.renderer.addClass(this.wrapper, getSizeClass('input', this.size));
         }
-        if (this.rounded) {
+        if (this.rounded !== 'none') {
             this.renderer.addClass(this.wrapper, getRoundedClass(this.rounded));
         }
-        if (this.fillMode) {
+        if (this.fillMode !== 'none') {
             this.renderer.addClass(this.wrapper, getFillModeClass('input', this.fillMode));
         }
     }
@@ -3145,7 +3151,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         >
             <span class="k-icon k-i-x"></span>
         </span>
-        <span *ngIf="loading" class="k-icon k-i-loading"></span>
+        <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
         <ng-template #popupTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
@@ -3259,7 +3265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         >
             <span class="k-icon k-i-x"></span>
         </span>
-        <span *ngIf="loading" class="k-icon k-i-loading"></span>
+        <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
         <ng-template #popupTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
@@ -3489,6 +3495,9 @@ const COMBOBOX_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => ComboBoxComponent)
 };
+const DEFAULT_SIZE$4 = 'medium';
+const DEFAULT_ROUNDED$4 = 'medium';
+const DEFAULT_FILL_MODE$4 = 'solid';
 /**
  * Represents the [Kendo UI ComboBox component for Angular]({% slug overview_combobox %}).
  *
@@ -3840,18 +3849,19 @@ class ComboBoxComponent {
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      *
      */
     set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE$4;
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
-        if (size) {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+        if (size !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
         }
-        this._size = size;
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -3860,19 +3870,20 @@ class ComboBoxComponent {
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded) {
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$4;
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        if (rounded) {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        if (rounded !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
         }
-        this._rounded = rounded;
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -3881,18 +3892,19 @@ class ComboBoxComponent {
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      *
      */
     set fillMode(fillMode) {
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$4;
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
-        if (fillMode) {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+        if (fillMode !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -4219,7 +4231,7 @@ class ComboBoxComponent {
      * @hidden
      */
     get buttonClasses() {
-        return this.loading ? 'k-i-loading' : this.iconClass || 'k-i-arrow-s';
+        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass || 'k-i-arrow-s';
     }
     /**
      * @hidden
@@ -4686,13 +4698,13 @@ class ComboBoxComponent {
         this.selectClickDisposeHandler = this.renderer.listen(selectElement, event, this.selectClick.bind(this));
     }
     setComponentClasses() {
-        if (this.size) {
+        if (this.size !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
         }
-        if (this.rounded) {
+        if (this.rounded !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
         }
-        if (this.fillMode) {
+        if (this.fillMode !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         }
     }
@@ -5155,6 +5167,9 @@ const DROPDOWNLIST_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => DropDownListComponent)
 };
+const DEFAULT_SIZE$3 = 'medium';
+const DEFAULT_ROUNDED$3 = 'medium';
+const DEFAULT_FILL_MODE$3 = 'solid';
 /**
  * Represents the [Kendo UI DropDownList component for Angular]({% slug overview_ddl %}).
  *
@@ -5444,18 +5459,19 @@ class DropDownListComponent {
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      *
      */
     set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE$3;
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
-        if (size) {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', size));
+        if (size !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', newSize));
         }
-        this._size = size;
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -5464,17 +5480,18 @@ class DropDownListComponent {
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded) {
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$3;
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        if (rounded) {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        if (rounded !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
         }
         this._rounded = rounded;
     }
@@ -5485,18 +5502,19 @@ class DropDownListComponent {
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      *
      */
     set fillMode(fillMode) {
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$3;
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
-        if (fillMode) {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', fillMode));
+        if (fillMode !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', newFillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -5824,7 +5842,7 @@ class DropDownListComponent {
      * @hidden
      */
     get buttonClasses() {
-        return this.loading ? 'k-i-loading' : this.iconClass || 'k-i-arrow-s';
+        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass || 'k-i-arrow-s';
     }
     /**
      * @hidden
@@ -6302,13 +6320,13 @@ class DropDownListComponent {
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-describedby', newValue);
     }
     setComponentClasses() {
-        if (this.size) {
+        if (this.size !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
         }
-        if (this.rounded) {
+        if (this.rounded !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
         }
-        if (this.fillMode) {
+        if (this.fillMode !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
         }
     }
@@ -7183,6 +7201,9 @@ const MULTISELECT_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => MultiSelectComponent)
 };
+const DEFAULT_SIZE$2 = 'medium';
+const DEFAULT_ROUNDED$2 = 'medium';
+const DEFAULT_FILL_MODE$2 = 'solid';
 /**
  * Represents the [Kendo UI MultiSelect component for Angular]({% slug overview_multiselect %}).
  *
@@ -7550,18 +7571,19 @@ class MultiSelectComponent {
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      *
      */
     set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE$2;
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
-        if (size) {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+        if (size !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
         }
-        this._size = size;
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -7570,19 +7592,20 @@ class MultiSelectComponent {
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded) {
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$2;
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        if (rounded) {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        if (rounded !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
         }
-        this._rounded = rounded;
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -7591,18 +7614,19 @@ class MultiSelectComponent {
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      *
      */
     set fillMode(fillMode) {
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$2;
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
-        if (fillMode) {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+        if (fillMode !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -8454,13 +8478,13 @@ class MultiSelectComponent {
         });
     }
     setComponentClasses() {
-        if (this.size) {
+        if (this.size !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
         }
-        if (this.rounded) {
+        if (this.rounded !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
         }
-        if (this.fillMode) {
+        if (this.fillMode !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         }
     }
@@ -8542,7 +8566,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span
             *ngIf="loading"
-            class="k-icon k-i-loading"
+            class="k-icon k-i-loading k-input-loading-icon"
         >
         </span>
         <ng-template #popupTemplate>
@@ -8695,7 +8719,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </span>
         <span
             *ngIf="loading"
-            class="k-icon k-i-loading"
+            class="k-icon k-i-loading k-input-loading-icon"
         >
         </span>
         <ng-template #popupTemplate>
@@ -9708,6 +9732,9 @@ const hasChildren$1 = () => false;
 const fetchChildren$1 = () => of([]);
 const itemDisabled$1 = () => false;
 const isNodeVisible$1 = () => true;
+const DEFAULT_SIZE$1 = 'medium';
+const DEFAULT_ROUNDED$1 = 'medium';
+const DEFAULT_FILL_MODE$1 = 'solid';
 /**
  * Represents the [Kendo UI DropDownTree component for Angular]({% slug overview_ddt %}).
  */
@@ -9986,18 +10013,19 @@ class DropDownTreeComponent {
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      *
      */
     set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE$1;
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
-        if (size) {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', size));
+        if (size !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', newSize));
         }
-        this._size = size;
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -10006,19 +10034,20 @@ class DropDownTreeComponent {
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded) {
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        if (rounded) {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        if (rounded !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
         }
-        this._rounded = rounded;
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -10027,18 +10056,19 @@ class DropDownTreeComponent {
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      *
      */
     set fillMode(fillMode) {
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$1;
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
-        if (fillMode) {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', fillMode));
+        if (fillMode !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', newFillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -10189,9 +10219,12 @@ class DropDownTreeComponent {
         }
         const togglePrevented = this.triggerPopupEvents(open);
         if (!togglePrevented) {
-            open ?
-                this.createPopup() :
+            if (open) {
+                this.createPopup();
+            }
+            else {
                 this.destroyPopup();
+            }
         }
     }
     /**
@@ -10392,7 +10425,7 @@ class DropDownTreeComponent {
      * @hidden
      */
     get buttonClasses() {
-        return this.loading ? 'k-i-loading' : 'k-i-arrow-s';
+        return this.loading ? 'k-i-loading k-input-loading-icon' : 'k-i-arrow-s';
     }
     /**
      * @hidden
@@ -10614,13 +10647,13 @@ class DropDownTreeComponent {
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-describedby', newValue);
     }
     setComponentClasses() {
-        if (this.size) {
+        if (this.size !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
         }
-        if (this.rounded) {
+        if (this.rounded !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
         }
-        if (this.fillMode) {
+        if (this.fillMode !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
         }
     }
@@ -11252,14 +11285,20 @@ class CheckAllDirective extends BaseCheckDirective {
             .forEach(lookup => pendingCheck.push(lookup.item));
         pendingCheck.forEach(item => {
             if (this.currentIndeterminateState) {
-                this.lastAction === 'check' ?
-                    this.addItem(item) :
+                if (this.lastAction === 'check') {
+                    this.addItem(item);
+                }
+                else {
                     this.removeItem(item);
+                }
                 return;
             }
-            this.currentCheckedState ?
-                this.addItem(item) :
+            if (this.currentCheckedState) {
+                this.addItem(item);
+            }
+            else {
                 this.removeItem(item);
+            }
         });
     }
     allChecked(lookup) {
@@ -11294,7 +11333,8 @@ CheckAllDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", vers
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckAllDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[checkAll]' // tslint:disable-line
+                    // eslint-disable-next-line
+                    selector: '[checkAll]'
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { lastAction: [{
                 type: Input
@@ -11464,6 +11504,9 @@ const hasChildren = () => false;
 const fetchChildren = () => of([]);
 const itemDisabled = () => false;
 const isNodeVisible = () => true;
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the [Kendo UI MultiSelectTree component for Angular]({% slug overview_multiselecttree %}).
  */
@@ -11738,18 +11781,19 @@ class MultiSelectTreeComponent {
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      *
      */
     set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE;
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
-        if (size) {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+        if (size !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
         }
-        this._size = size;
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -11758,19 +11802,20 @@ class MultiSelectTreeComponent {
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded) {
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        if (rounded) {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        if (rounded !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
         }
-        this._rounded = rounded;
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -11779,18 +11824,19 @@ class MultiSelectTreeComponent {
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      *
      */
     set fillMode(fillMode) {
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
-        if (fillMode) {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+        if (fillMode !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -12183,9 +12229,12 @@ class MultiSelectTreeComponent {
         }
         const togglePrevented = this.triggerPopupEvents(open);
         if (!togglePrevented) {
-            open ?
-                this.createPopup() :
+            if (open) {
+                this.createPopup();
+            }
+            else {
                 this.destroyPopup();
+            }
         }
         else {
             this.removeTreeViewFromTabOrder();
@@ -12354,9 +12403,12 @@ class MultiSelectTreeComponent {
     }
     triggerPopupEvents(open) {
         const eventArgs = new PreventableEvent();
-        open ?
-            this.open.emit(eventArgs) :
+        if (open) {
+            this.open.emit(eventArgs);
+        }
+        else {
             this.close.emit(eventArgs);
+        }
         return eventArgs.isDefaultPrevented();
     }
     createPopup() {
@@ -12468,9 +12520,12 @@ class MultiSelectTreeComponent {
             // => should focus either the filter input (if enabled) or the wrapper
         }
         else if (this.isCheckAllActive || isFirstNodeActive) {
-            this.filterable ?
-                this.filterInput.nativeElement.focus() :
+            if (this.filterable) {
+                this.filterInput.nativeElement.focus();
+            }
+            else {
                 this.focus();
+            }
         }
     }
     handleDownKey(event) {
@@ -12590,13 +12645,13 @@ class MultiSelectTreeComponent {
         }, []));
     }
     setComponentClasses() {
-        if (this.size) {
+        if (this.size !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
         }
-        if (this.rounded) {
+        if (this.rounded !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
         }
-        if (this.fillMode) {
+        if (this.fillMode !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         }
     }
@@ -12676,7 +12731,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         </span>
         <span
             *ngIf="loading"
-            class="k-icon k-i-loading"
+            class="k-icon k-i-loading k-input-loading-icon"
         >
         </span>
         <ng-template #popupTemplate>
@@ -12879,7 +12934,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </span>
         <span
             *ngIf="loading"
-            class="k-icon k-i-loading"
+            class="k-icon k-i-loading k-input-loading-icon"
         >
         </span>
         <ng-template #popupTemplate>
@@ -13192,6 +13247,18 @@ class DropDownTreeFlatBindingDirective extends FlatDataBindingDirective {
         this.nodes = nodes;
     }
     ;
+    /**
+     * @hidden
+     */
+    set nodes(values) {
+        super.nodes = values;
+    }
+    /**
+     * @hidden
+     */
+    set filter(term) {
+        super.filter = term;
+    }
 }
 DropDownTreeFlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownTreeFlatBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
 DropDownTreeFlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DropDownTreeFlatBindingDirective, selector: "[kendoDropDownTreeFlatBinding]", inputs: { data: ["kendoDropDownTreeFlatBinding", "data"], idField: ["valueField", "idField"] }, usesInheritance: true, ngImport: i0 });
@@ -13208,6 +13275,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['valueField']
             }] } });
 
+const INDEX_SEPARATOR = '_';
+const nodeIndex = (index = '', parentIndex = '') => {
+    return `${parentIndex}${parentIndex ? INDEX_SEPARATOR : ''}${index}`;
+};
+const isArrayWithAtLeastOneItem = v => v && Array.isArray(v) && v.length !== 0;
+const mapToWrappers = (currentLevelNodes, childrenField, parent = null, parentIndex = '') => {
+    if (!isArrayWithAtLeastOneItem(currentLevelNodes)) {
+        return [];
+    }
+    return currentLevelNodes.map((node, idx) => {
+        const index = nodeIndex(idx.toString(), parentIndex);
+        const wrapper = {
+            dataItem: node,
+            index,
+            parent,
+            visible: true
+        };
+        wrapper.children = mapToWrappers(getter$1(childrenField)(node), childrenField, wrapper, index);
+        return wrapper;
+    });
+};
 /**
  * A directive which encapsulates the retrieval of the child nodes when hierarchical data is provided.
  */
@@ -13223,6 +13311,18 @@ class DropDownTreeHierarchyBindingDirective extends HierarchyBindingDirective {
         this.dropDownTree.nodes = nodes;
         this.nodes = nodes;
     }
+    /**
+     * @hidden
+     */
+    set nodes(values) {
+        super.nodes = values;
+    }
+    /**
+     * @hidden
+     */
+    set filter(term) {
+        super.filter = term;
+    }
 }
 DropDownTreeHierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
 DropDownTreeHierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DropDownTreeHierarchyBindingDirective, selector: "[kendoDropDownTreeHierarchyBinding]", inputs: { data: ["kendoDropDownTreeHierarchyBinding", "data"] }, usesInheritance: true, ngImport: i0 });
@@ -13251,6 +13351,18 @@ class MultiSelectTreeFlatBindingDirective extends FlatDataBindingDirective {
         this.multiSelectTree.nodes = nodes;
         this.nodes = nodes;
     }
+    /**
+     * @hidden
+     */
+    set nodes(values) {
+        super.nodes = values;
+    }
+    /**
+     * @hidden
+     */
+    set filter(term) {
+        super.filter = term;
+    }
 }
 MultiSelectTreeFlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
 MultiSelectTreeFlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MultiSelectTreeFlatBindingDirective, selector: "[kendoMultiSelectTreeFlatBinding]", inputs: { data: ["kendoMultiSelectTreeFlatBinding", "data"], idField: ["valueField", "idField"] }, usesInheritance: true, ngImport: i0 });
@@ -13282,6 +13394,18 @@ class MultiSelectTreeHierarchyBindingDirective extends HierarchyBindingDirective
         this.multiSelectTree.nodes = nodes;
         this.nodes = nodes;
     }
+    /**
+     * @hidden
+     */
+    set nodes(values) {
+        super.nodes = values;
+    }
+    /**
+     * @hidden
+     */
+    set filter(term) {
+        super.filter = term;
+    }
 }
 MultiSelectTreeHierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
 MultiSelectTreeHierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: { data: ["kendoMultiSelectTreeHierarchyBinding", "data"] }, usesInheritance: true, ngImport: i0 });