@progress/kendo-angular-dropdowns 7.0.0-next.202204040550 → 7.0.1-dev.202204281135

package/esm2015/dropdownlist/dropdownlist.component.js

@@ -52,6 +52,9 @@ export const DROPDOWNLIST_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => DropDownListComponent)
 };
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the [Kendo UI DropDownList component for Angular]({% slug overview_ddl %}).
  *
@@ -341,18 +344,19 @@ export 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;
         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;
@@ -361,17 +365,18 @@ export 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;
         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;
     }
@@ -382,18 +387,19 @@ export 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;
         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;
@@ -721,7 +727,7 @@ export 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
@@ -1199,13 +1205,13 @@ export 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));
         }
     }

package/esm2015/dropdowntrees/checked-state/check-all.directive.js

@@ -84,14 +84,20 @@ export 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) {
@@ -126,7 +132,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

package/esm2015/dropdowntrees/data-binding/dropdowntree/flat-binding.directive.js

@@ -22,6 +22,18 @@ export 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.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 });

package/esm2015/dropdowntrees/data-binding/dropdowntree/hierarchy-binding.directive.js

@@ -4,8 +4,30 @@
 *-------------------------------------------------------------------------------------------*/
 import { Directive, Input } from '@angular/core';
 import { HierarchyBindingDirective } from '@progress/kendo-angular-treeview';
+import { getter } from '@progress/kendo-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-treeview";
+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(childrenField)(node), childrenField, wrapper, index);
+        return wrapper;
+    });
+};
 /**
  * A directive which encapsulates the retrieval of the child nodes when hierarchical data is provided.
  */
@@ -21,6 +43,18 @@ export class DropDownTreeHierarchyBindingDirective extends HierarchyBindingDirec
         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.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 });

package/esm2015/dropdowntrees/data-binding/multiselecttree/flat-binding.directive.js

@@ -21,6 +21,18 @@ export class MultiSelectTreeFlatBindingDirective extends FlatDataBindingDirectiv
         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.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 });

package/esm2015/dropdowntrees/data-binding/multiselecttree/hierarchy-binding.directive.js

@@ -21,6 +21,18 @@ export class MultiSelectTreeHierarchyBindingDirective extends HierarchyBindingDi
         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.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 });

package/esm2015/dropdowntrees/dropdowntree.component.js

@@ -39,6 +39,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 DropDownTree component for Angular]({% slug overview_ddt %}).
  */
@@ -317,18 +320,19 @@ export 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;
         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;
@@ -337,19 +341,20 @@ export 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;
         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;
@@ -358,18 +363,19 @@ export 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;
         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;
@@ -520,9 +526,12 @@ export class DropDownTreeComponent {
         }
         const togglePrevented = this.triggerPopupEvents(open);
         if (!togglePrevented) {
-            open ?
-                this.createPopup() :
+            if (open) {
+                this.createPopup();
+            }
+            else {
                 this.destroyPopup();
+            }
         }
     }
     /**
@@ -723,7 +732,7 @@ export 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
@@ -945,13 +954,13 @@ export 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));
         }
     }

package/esm2015/dropdowntrees/multiselecttree.component.js

@@ -45,6 +45,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 %}).
  */
@@ -187,7 +190,7 @@ export class MultiSelectTreeComponent {
          */
         this.valueChange = new EventEmitter();
         /**
-         * Fires each time a tag is about to be removed.
+         * Fires each time a tag is about to be removed([see examples]({% slug summarytagmode_multiselect %}#toc-notifying-on-removing-group-tags)).
          * This event is preventable. If you cancel it, the tag will not be removed.
          */
         this.removeTag = new EventEmitter();
@@ -319,18 +322,19 @@ export 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;
@@ -339,19 +343,20 @@ export 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;
@@ -360,18 +365,19 @@ export 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;
@@ -764,9 +770,12 @@ export class MultiSelectTreeComponent {
         }
         const togglePrevented = this.triggerPopupEvents(open);
         if (!togglePrevented) {
-            open ?
-                this.createPopup() :
+            if (open) {
+                this.createPopup();
+            }
+            else {
                 this.destroyPopup();
+            }
         }
         else {
             this.removeTreeViewFromTabOrder();
@@ -935,9 +944,12 @@ export 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() {
@@ -1049,9 +1061,12 @@ export 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) {
@@ -1171,13 +1186,13 @@ export 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));
         }
     }
@@ -1257,7 +1272,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>
@@ -1460,7 +1475,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>

package/esm2015/main.js

@@ -50,6 +50,10 @@ export { ComboBoxModule } from './comboboxes/combobox.module';
 export { DropDownListModule } from './dropdownlist/dropdownlist.module';
 export { SharedDirectivesModule } from './common/shared-directives.module';
 export { ListComponent } from './common/list.component';
+/**
+ * @hidden
+ * TODO: See if the export could be removed (AOT should pass)
+ */
 export { PopupComponent } from '@progress/kendo-angular-popup';
 export { PreventableEvent } from './common/models/preventable-event';
 export { RemoveTagEvent } from './common/models/remove-tag-event';