@progress/kendo-angular-dropdowns 5.4.0 → 5.5.0-dev.202111011140

package/dist/es2015/common/localization/messages.d.ts

@@ -15,4 +15,8 @@ export declare class Messages extends ComponentMessages {
      * The title of the clear button.
      */
     clearTitle: string;
+    /**
+     * The text displayed for the check-all checkbox.
+     */
+    checkAllText: string;
 }

package/dist/es2015/common/localization/messages.js

@@ -18,3 +18,7 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
 ], Messages.prototype, "clearTitle", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], Messages.prototype, "checkAllText", void 0);

package/dist/es2015/common/shared.module.js

@@ -16,6 +16,7 @@ import { ListItemDirective } from './list-item.directive';
 import { SelectableDirective } from './selection/selectable.directive';
 import { TemplateContextDirective } from './templates/template-context.directive';
 import { CheckDirective } from '../dropdowntrees/checked-state/check.directive';
+import { CheckAllDirective } from '../dropdowntrees/checked-state/check-all.directive';
 const INTERNAL_DIRECTIVES = [
     ListComponent,
     ListItemDirective,
@@ -23,7 +24,8 @@ const INTERNAL_DIRECTIVES = [
     SearchBarComponent,
     TemplateContextDirective,
     TagListComponent,
-    CheckDirective
+    CheckDirective,
+    CheckAllDirective
 ];
 /**
  * @hidden

package/dist/es2015/dropdowntrees/checked-state/base-check.directive.d.ts

@@ -0,0 +1,32 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TreeItem } from '@progress/kendo-angular-treeview';
+import { CheckedItem } from './checked-item';
+/**
+ * @hidden
+ *
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
+ */
+export declare abstract class BaseCheckDirective {
+    /**
+     * The item key/keys by which the data items will be compared.
+     */
+    abstract valueField: string | string[];
+    /**
+     * Defines the collection that will store the full checked items.
+     */
+    abstract checkedItems: CheckedItem[];
+    /**
+     * Holds a Set with just the checked item keys.
+     *
+     * Should be updated each time the `checkedItems` value or content is changed.
+     * Can be used for efficient look-up of whether an item is checked or not (O(1) access time).
+     */
+    abstract checkedKeys: Set<any>;
+    protected addItem(item: TreeItem): void;
+    protected removeItem(item: TreeItem): void;
+    protected isItemChecked(item: CheckedItem): boolean;
+    protected updateItems(): void;
+}

package/dist/es2015/dropdowntrees/checked-state/base-check.directive.js

@@ -0,0 +1,48 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Input } from '@angular/core';
+import { getHierarchicalItemLevel, valueFrom } from '../../common/util';
+/**
+ * @hidden
+ *
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
+ */
+export class BaseCheckDirective {
+    addItem(item) {
+        if (this.isItemChecked(item)) {
+            return;
+        }
+        const level = getHierarchicalItemLevel(item.index);
+        const candidate = Object.assign({}, item, { level });
+        this.checkedItems.push(candidate);
+        this.checkedKeys.add(valueFrom(candidate, this.valueField));
+    }
+    removeItem(item) {
+        if (!this.isItemChecked(item)) {
+            return;
+        }
+        const level = getHierarchicalItemLevel(item.index);
+        const candidate = Object.assign({}, item, { level });
+        this.checkedItems = this.checkedItems
+            .filter(item => valueFrom(item, this.valueField) !== valueFrom(candidate, this.valueField));
+        this.checkedKeys.delete(valueFrom(candidate, this.valueField));
+    }
+    isItemChecked(item) {
+        return this.checkedKeys.has(valueFrom(item, this.valueField));
+    }
+    updateItems() {
+        this.checkedItems = this.checkedItems || [];
+        this.checkedKeys = new Set(this.checkedItems.map(item => valueFrom(item, this.valueField)));
+    }
+}
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], BaseCheckDirective.prototype, "valueField", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Array)
+], BaseCheckDirective.prototype, "checkedItems", void 0);

package/dist/es2015/dropdowntrees/checked-state/check-all.directive.d.ts

@@ -0,0 +1,53 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnInit, Renderer2, SimpleChanges } from '@angular/core';
+import { TreeViewComponent } from '@progress/kendo-angular-treeview';
+import { BaseCheckDirective } from './base-check.directive';
+import { CheckedItem } from './checked-item';
+/**
+ * @hidden
+ *
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
+ */
+export declare class CheckAllDirective extends BaseCheckDirective implements OnChanges, OnInit {
+    private element;
+    private zone;
+    cdr: ChangeDetectorRef;
+    renderer: Renderer2;
+    lastAction: 'check' | 'uncheck';
+    treeview: TreeViewComponent;
+    /**
+     * Defines the collection that will store the full checked items.
+     */
+    checkedItems: CheckedItem[];
+    /**
+     * The item key/keys by which the data items will be compared.
+     */
+    valueField: string | string[];
+    focused: boolean;
+    /**
+     * Fires when the `checkedItems` collection was updated.
+     */
+    checkedItemsChange: EventEmitter<CheckedItem[]>;
+    /**
+     * Holds a Set with just the checked item keys.
+     *
+     * Should be updated each time the `checkedItems` value or content is changed.
+     * Can be used for efficient look-up of whether an item is checked or not (O(1) access time).
+     */
+    checkedKeys: Set<any>;
+    private currentCheckedState;
+    private currentIndeterminateState;
+    handleChange(event: any): void;
+    readonly isIndeterminate: boolean;
+    readonly isChecked: boolean;
+    constructor(element: ElementRef, zone: NgZone, cdr: ChangeDetectorRef, renderer: Renderer2);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    private nextTick;
+    private checkNode;
+    private allChecked;
+    private someChecked;
+}

package/dist/es2015/dropdowntrees/checked-state/check-all.directive.js

@@ -0,0 +1,161 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { ChangeDetectorRef, Directive, ElementRef, EventEmitter, HostListener, Input, NgZone, Output, Renderer2 } from '@angular/core';
+import { TreeViewComponent } from '@progress/kendo-angular-treeview';
+import { fetchDescendentNodes, isPresent } from '../../common/util';
+import { BaseCheckDirective } from './base-check.directive';
+/**
+ * @hidden
+ *
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
+ */
+let CheckAllDirective = class CheckAllDirective extends BaseCheckDirective {
+    constructor(element, zone, cdr, renderer) {
+        super();
+        this.element = element;
+        this.zone = zone;
+        this.cdr = cdr;
+        this.renderer = renderer;
+        /**
+         * Fires when the `checkedItems` collection was updated.
+         */
+        this.checkedItemsChange = new EventEmitter();
+        /**
+         * Holds a Set with just the checked item keys.
+         *
+         * Should be updated each time the `checkedItems` value or content is changed.
+         * Can be used for efficient look-up of whether an item is checked or not (O(1) access time).
+         */
+        this.checkedKeys = new Set();
+    }
+    handleChange(event) {
+        // Need to store the current checkbox state at the moment of click
+        this.currentCheckedState = event.checked;
+        this.currentIndeterminateState = this.isIndeterminate;
+        this.treeview.nodes.map((_value, index) => {
+            const itemIndex = String(index);
+            const itemLookup = this.treeview.itemLookup(itemIndex);
+            this.checkNode(itemLookup);
+        });
+        this.checkedItemsChange.emit(this.checkedItems.slice());
+    }
+    get isIndeterminate() {
+        const isIndeterminate = this.treeview.nodes.some((_node, index) => {
+            const itemIndex = String(index);
+            const itemLookup = this.treeview.itemLookup(itemIndex);
+            return this.someChecked(itemLookup);
+        });
+        return this.isChecked ? false : isIndeterminate;
+    }
+    get isChecked() {
+        const isChecked = this.treeview.nodes.every((_node, index) => {
+            const itemIndex = String(index);
+            const itemLookup = this.treeview.itemLookup(itemIndex);
+            return this.allChecked(itemLookup);
+        });
+        return isChecked;
+    }
+    ngOnChanges(changes) {
+        if (isPresent(changes.checkedItems)) {
+            this.updateItems();
+            this.renderer.setProperty(this.element.nativeElement, 'checked', this.isChecked);
+            this.renderer.setProperty(this.element.nativeElement, 'indeterminate', this.isIndeterminate);
+        }
+    }
+    ngOnInit() {
+        if (this.focused) {
+            this.nextTick(() => this.element.nativeElement.focus());
+        }
+    }
+    nextTick(fn) {
+        this.zone.runOutsideAngular(() => setTimeout(fn));
+    }
+    checkNode(itemLookup) {
+        if (this.treeview.isDisabled(itemLookup.item.dataItem, itemLookup.item.index)) {
+            return;
+        }
+        const pendingCheck = [];
+        const filter = (item) => this.treeview.isVisible(item.dataItem, item.index) &&
+            !this.treeview.isDisabled(item.dataItem, item.index);
+        pendingCheck.push(itemLookup.item);
+        fetchDescendentNodes(itemLookup, filter)
+            .forEach(lookup => pendingCheck.push(lookup.item));
+        pendingCheck.forEach(item => {
+            if (this.currentIndeterminateState) {
+                this.lastAction === 'check' ?
+                    this.addItem(item) :
+                    this.removeItem(item);
+                return;
+            }
+            this.currentCheckedState ?
+                this.addItem(item) :
+                this.removeItem(item);
+        });
+    }
+    allChecked(lookup) {
+        const children = lookup && lookup.children;
+        if (!Array.isArray(children)) {
+            return;
+        }
+        const childrenChecked = children.every(child => {
+            if (child.children.length) {
+                return this.isItemChecked(child.item) && this.allChecked(child);
+            }
+            return this.isItemChecked(child.item);
+        });
+        return childrenChecked && this.isItemChecked(lookup.item);
+    }
+    someChecked(lookup) {
+        const children = lookup && lookup.children;
+        if (!Array.isArray(children)) {
+            return;
+        }
+        const childrenChecked = children.some(child => {
+            if (child.children.length) {
+                return this.isItemChecked(child.item) || this.someChecked(child);
+            }
+            return this.isItemChecked(child.item);
+        });
+        return childrenChecked || this.isItemChecked(lookup.item);
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], CheckAllDirective.prototype, "lastAction", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", TreeViewComponent)
+], CheckAllDirective.prototype, "treeview", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Array)
+], CheckAllDirective.prototype, "checkedItems", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], CheckAllDirective.prototype, "valueField", void 0);
+tslib_1.__decorate([
+    Input('checkAll'),
+    tslib_1.__metadata("design:type", Boolean)
+], CheckAllDirective.prototype, "focused", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], CheckAllDirective.prototype, "checkedItemsChange", void 0);
+tslib_1.__decorate([
+    HostListener('change', ['$event.target']),
+    tslib_1.__metadata("design:type", Function),
+    tslib_1.__metadata("design:paramtypes", [Object]),
+    tslib_1.__metadata("design:returntype", void 0)
+], CheckAllDirective.prototype, "handleChange", null);
+CheckAllDirective = tslib_1.__decorate([
+    Directive({
+        selector: '[checkAll]' // tslint:disable-line
+    }),
+    tslib_1.__metadata("design:paramtypes", [ElementRef, NgZone, ChangeDetectorRef, Renderer2])
+], CheckAllDirective);
+export { CheckAllDirective };

package/dist/es2015/dropdowntrees/checked-state/check.directive.d.ts

@@ -6,12 +6,13 @@ import { EventEmitter, OnDestroy, OnChanges, SimpleChanges } from '@angular/core
 import { TreeViewComponent } from '@progress/kendo-angular-treeview';
 import { CheckedItem } from './checked-item';
 import { MultiSelectTreeCheckableSettings } from './checkable-settings';
+import { BaseCheckDirective } from './base-check.directive';
 /**
  * @hidden
  *
  * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
  */
-export declare class CheckDirective implements OnChanges, OnDestroy {
+export declare class CheckDirective extends BaseCheckDirective implements OnChanges, OnDestroy {
     private treeView;
     /**
      * Specifies whether items should be checked on click,
@@ -37,7 +38,7 @@ export declare class CheckDirective implements OnChanges, OnDestroy {
      * Should be updated each time the `checkedItems` value or content is changed.
      * Can be used for efficient look-up of whether an item is checked or not (O(1) access time).
      */
-    private checkedKeys;
+    checkedKeys: Set<any>;
     private subscriptions;
     private clickSubscription;
     constructor(treeView: TreeViewComponent);
@@ -49,8 +50,5 @@ export declare class CheckDirective implements OnChanges, OnDestroy {
     private unsubscribeClick;
     private checkNode;
     private checkParents;
-    private addItem;
-    private removeItem;
-    private isItemChecked;
     private isItemIndeterminate;
 }

package/dist/es2015/dropdowntrees/checked-state/check.directive.js

@@ -7,14 +7,16 @@ import { Directive, EventEmitter, Input, Output } from '@angular/core';
 import { TreeViewComponent } from '@progress/kendo-angular-treeview';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
-import { fetchDescendentNodes, getHierarchicalItemLevel, isPresent, valueFrom } from '../../common/util';
+import { fetchDescendentNodes, isPresent } from '../../common/util';
+import { BaseCheckDirective } from './base-check.directive';
 /**
  * @hidden
  *
  * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
  */
-let CheckDirective = class CheckDirective {
+let CheckDirective = class CheckDirective extends BaseCheckDirective {
     constructor(treeView) {
+        super();
         this.treeView = treeView;
         /**
          * Fires when the `checkedItems` collection was updated.
@@ -37,8 +39,7 @@ let CheckDirective = class CheckDirective {
             this.toggleCheckOnClick();
         }
         if (isPresent(changes.checkedItems)) {
-            this.checkedItems = this.checkedItems || [];
-            this.checkedKeys = new Set(this.checkedItems.map(item => valueFrom(item, this.valueField)));
+            this.updateItems();
         }
     }
     ngOnDestroy() {
@@ -118,28 +119,6 @@ let CheckDirective = class CheckDirective {
             currentParent = currentParent.parent;
         }
     }
-    addItem(item) {
-        if (this.isItemChecked(item)) {
-            return;
-        }
-        const level = getHierarchicalItemLevel(item.index);
-        const candidate = Object.assign({}, item, { level });
-        this.checkedItems.push(candidate);
-        this.checkedKeys.add(valueFrom(candidate, this.valueField));
-    }
-    removeItem(item) {
-        if (!this.isItemChecked(item)) {
-            return;
-        }
-        const level = getHierarchicalItemLevel(item.index);
-        const candidate = Object.assign({}, item, { level });
-        this.checkedItems = this.checkedItems
-            .filter(item => valueFrom(item, this.valueField) !== valueFrom(candidate, this.valueField));
-        this.checkedKeys.delete(valueFrom(candidate, this.valueField));
-    }
-    isItemChecked(item) {
-        return this.checkedKeys.has(valueFrom(item, this.valueField));
-    }
     isItemIndeterminate(lookup) {
         const children = lookup.children;
         if (!Array.isArray(children) || children.length === 0) {

package/dist/es2015/dropdowntrees/dropdowntree.component.d.ts

@@ -418,6 +418,10 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
      * @hidden
      */
     handleFilterInputChange(term: string): void;
+    /**
+     * @hidden
+     */
+    readonly buttonClasses: any;
     protected onTouchedCallback: Function;
     protected onChangeCallback: Function;
     protected verifySettings(): void;

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

@@ -552,8 +552,8 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
             dataItem;
         const shouldUpdateValue = newValue !== this.value;
         if (shouldUpdateValue) {
-            this.dataItem = dataItem;
             this.value = newValue;
+            this.dataItem = dataItem;
             this.emitValueChange(this.value);
         }
         this.togglePopup(false);
@@ -629,6 +629,12 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
         this.filterChange.next(term);
         this.allNodesHidden = this.nodes.every((node, index) => !this.isVisible(node, String(index)));
     }
+    /**
+     * @hidden
+     */
+    get buttonClasses() {
+        return this.loading ? 'k-i-loading' : 'k-i-arrow-s';
+    }
     verifySettings() {
         if (!isDevMode()) {
             return;
@@ -753,7 +759,6 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
     }
     clearState() {
         this.text = undefined;
-        this.valueDepth = undefined;
         this.selectedKeys = [];
     }
     subscribeEvents() {
@@ -1084,7 +1089,7 @@ DropDownTreeComponent = DropDownTreeComponent_1 = tslib_1.__decorate([
                 <ng-template [ngIf]="!valueTemplate"> {{ text || placeholder }} </ng-template>
             </span>
             <span
-                *ngIf="!loading && !readonly && clearButton && text?.length"
+                *ngIf="!loading && !readonly && clearButton && text?.length && !disabled"
                 class="k-icon k-clear-value k-i-close"
                 [style.visibility]="clearButtonVisiblity"
                 aria-hidden="true"
@@ -1093,7 +1098,10 @@ DropDownTreeComponent = DropDownTreeComponent_1 = tslib_1.__decorate([
             >
             </span>
             <span class="k-select" aria-hidden="true">
-                <span class="k-icon k-i-arrow-60-down"></span>
+                <span
+                    class="k-icon k-i-arrow-60-down"
+                    [ngClass]="buttonClasses"
+                ></span>
             </span>
         </span>
         <ng-template #popupTemplate>

package/dist/es2015/dropdowntrees/multiselecttree.component.d.ts

@@ -46,6 +46,7 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     container: ViewContainerRef;
     treeview: TreeViewComponent;
     private filterInput;
+    private checkAllInput;
     /**
      * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      */
@@ -160,6 +161,12 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
      * @default false
      */
     filterable: boolean;
+    /**
+     * If `checkАll` is set to `true` and the checkboxes are enabled, a tri-state checkbox appears above the embedded treeview.
+     * Clicking the checkbox checks or unchecks all enabled items of the treeview that are loaded.
+     * @default false
+     */
+    checkAll: boolean;
     /**
      * A function which determines if a specific node has child nodes.
      */
@@ -302,6 +309,8 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     private readonly isTagFocused;
     private readonly isTreeViewActive;
     private readonly isWrapperActive;
+    private readonly isFilterActive;
+    private readonly isCheckAllActive;
     /**
      * @hidden
      */
@@ -419,6 +428,7 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
      * @hidden
      */
     messageFor(key: string): string;
+    lastAction: 'check' | 'uncheck';
     /**
      * @hidden
      */
@@ -458,6 +468,10 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
      * @hidden
      */
     handleFilterInputChange(term: string): void;
+    /**
+     * @hidden
+     */
+    toggleCheckAll(): void;
     protected onTouchedCallback: Function;
     protected onChangeCallback: Function;
     protected verifySettings(): void;