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

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1631260317,
+    publishDate: 1635420981,
     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'
 };

package/dist/fesm2015/index.js

@@ -23,7 +23,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1631260317,
+    publishDate: 1635420981,
     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'
 };
@@ -9361,6 +9361,12 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
          * @default false
          */
         this.filterable = false;
+        /**
+         * 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
+         */
+        this.checkAll = false;
         /**
          * A function which determines if a specific node has child nodes.
          */
@@ -9464,6 +9470,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
         this._checkableSettings = DEFAULT_CHECKABLE_SETTINGS;
         this._isFocused = false;
         this.subscriptions = [];
+        this.lastAction = 'check';
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -9473,7 +9480,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
         this._treeview = treeview;
         if (treeview) {
             // If filtering is enabled, focus the TreeView on mobile devices instead of the filter input
-            if (this.isFocused && !this.filterable || this.touchEnabled) {
+            if (this.isFocused && !this.filterable && !this.checkAll || this.touchEnabled) {
                 treeview.focus();
             }
             /**
@@ -9704,6 +9711,12 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
     get isWrapperActive() {
         return document.activeElement === this.wrapper.nativeElement;
     }
+    get isFilterActive() {
+        return this.filterInput && document.activeElement === this.filterInput.nativeElement;
+    }
+    get isCheckAllActive() {
+        return this.checkAllInput && document.activeElement === this.checkAllInput.nativeElement;
+    }
     ngOnInit() {
         this.renderer.removeAttribute(this.hostElement.nativeElement, 'tabindex');
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', String(this.isOpen));
@@ -9920,6 +9933,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
      */
     handleCheckedItemsChange(items) {
         this.valueDepth = items.map(item => item.level);
+        this.lastAction = items.length > this.dataItems.length ? 'check' : 'uncheck';
         this.dataItems = items.slice();
         this.updateValue(this.dataItems);
     }
@@ -10008,6 +10022,13 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
         this.filterChange.next(term);
         this.allNodesHidden = this.nodes.every((node, index) => !this.isVisible(node, String(index)));
     }
+    /**
+     * @hidden
+     */
+    toggleCheckAll() {
+        this.checkAllInput.nativeElement.focus();
+        this.checkAllInput.nativeElement.click();
+    }
     verifySettings() {
         if (!isDevMode()) {
             return;
@@ -10130,17 +10151,20 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
             return;
         }
         const isFirstNodeActive = this.treeview['navigationService']['activeIndex'] === '0';
-        if (this.filterable) {
-            const isFilterActive = this.filterInput.nativeElement === document.activeElement;
-            if (isFilterActive) {
-                this.focus();
-            }
-            else if (!isFilterActive && isFirstNodeActive) {
-                this.filterInput.nativeElement.focus();
-            }
-        }
-        if (!this.filterable && isFirstNodeActive) {
+        // Current focus is on the filter input => should focus the wrapper
+        if (this.filterable && this.isFilterActive) {
             this.focus();
+            // Current focus is on the treeview first node => should focus the check all checkbox if enabled
+        }
+        else if (this.checkAll && !this.isCheckAllActive && isFirstNodeActive) {
+            this.checkAllInput.nativeElement.focus();
+            // Current focus is either on the check all checkbox or the treeview's first node
+            // => should focus either the filter input (if enabled) or the wrapper
+        }
+        else if (this.isCheckAllActive || isFirstNodeActive) {
+            this.filterable ?
+                this.filterInput.nativeElement.focus() :
+                this.focus();
         }
     }
     handleDownKey(event) {
@@ -10148,9 +10172,14 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
             return;
         }
         event.originalEvent.preventDefault();
-        // Put the focus back on the filter input if the wrapper is focused
+        // Current focus is on the wrapper => should focus the filter input
         if (this.filterable && this.isWrapperActive) {
             this.filterInput.nativeElement.focus();
+            // Current focus is on the wrapper/filter input => should focus check all checkbox if enabled
+        }
+        else if (this.checkAll && (this.isWrapperActive || this.isFilterActive)) {
+            this.checkAllInput.nativeElement.focus();
+            // Should focus the treeview if filterable and check all are disabled
         }
         else if (!this.treeview.isActive) {
             this.treeview.focus();
@@ -10308,6 +10337,10 @@ __decorate([
     ViewChild('filterInput', { static: false }),
     __metadata("design:type", ElementRef)
 ], MultiSelectTreeComponent.prototype, "filterInput", void 0);
+__decorate([
+    ViewChild('checkAllInput', { static: false }),
+    __metadata("design:type", ElementRef)
+], MultiSelectTreeComponent.prototype, "checkAllInput", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Number),
@@ -10390,6 +10423,10 @@ __decorate([
     Input(),
     __metadata("design:type", Boolean)
 ], MultiSelectTreeComponent.prototype, "filterable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], MultiSelectTreeComponent.prototype, "checkAll", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Function)
@@ -10497,6 +10534,9 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
 
             i18n-clearTitle="kendo.multiselecttree.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-checkAllText="kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox"
+            checkAllText="Check all"
         >
         </ng-container>
         <div #wrapper
@@ -10565,9 +10605,7 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
                     #filterInput
                     (input)="handleFilterInputChange($event.target.value)"
                     [filterInput]="filterable && !touchEnabled"
-                    (keydown.arrowdown)="handleKeydown($event)"
-                    (keydown.arrowup)="handleKeydown($event)"
-                    (keydown.alt.arrowup)="handleKeydown($event)"
+                    (keydown)="handleKeydown($event)"
                     [(ngModel)]="filter"
                     class="k-textbox"
                     role="textbox"
@@ -10590,6 +10628,35 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
                     templateRef: headerTemplate?.templateRef
                 }">
             </ng-template>
+            <div *ngIf="checkAll" class="k-check-all">
+                <input
+                    #checkAllInput
+                    [checkAll]="!filterable && !touchEnabled"
+                    type="checkbox"
+                    class="k-checkbox"
+                    role="checkbox"
+                    tabindex="0"
+                    aria-disabled="false"
+                    aria-readonly="false"
+                    [treeview]="treeview"
+                    [checkedItems]="checkedItems"
+                    [valueField]="valueField"
+                    [lastAction]="lastAction"
+                    (checkedItemsChange)="handleCheckedItemsChange($event)"
+                    (keydown)="handleKeydown($event)"
+                    [kendoEventsOutsideAngular]="{
+                        blur: handleBlur
+                    }"
+                    [scope]="this"
+                >
+                <span
+                    class="k-checkbox-label"
+                    (click)="toggleCheckAll()"
+                    (mousedown)="$event.preventDefault()"
+                >
+                    {{ messageFor('checkAllText') }}
+                </span>
+            </div>
             <kendo-treeview
                 #treeview
                 [nodes]="data"
@@ -10948,6 +11015,10 @@ __decorate([
     Input(),
     __metadata("design:type", String)
 ], Messages.prototype, "clearTitle", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], Messages.prototype, "checkAllText", void 0);
 
 var LocalizedMessagesDirective_1;
 /**
@@ -11307,8 +11378,51 @@ TemplateContextDirective = __decorate([
  *
  * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
  */
-let CheckDirective = class CheckDirective {
+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)));
+    }
+}
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], BaseCheckDirective.prototype, "valueField", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], BaseCheckDirective.prototype, "checkedItems", void 0);
+
+/**
+ * @hidden
+ *
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
+ */
+let CheckDirective = class CheckDirective extends BaseCheckDirective {
     constructor(treeView) {
+        super();
         this.treeView = treeView;
         /**
          * Fires when the `checkedItems` collection was updated.
@@ -11331,8 +11445,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() {
@@ -11412,28 +11525,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) {
@@ -11474,6 +11565,158 @@ CheckDirective = __decorate([
     __metadata("design:paramtypes", [TreeViewComponent])
 ], CheckDirective);
 
+/**
+ * @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$$1 = (item) => this.treeview.isVisible(item.dataItem, item.index) &&
+            !this.treeview.isDisabled(item.dataItem, item.index);
+        pendingCheck.push(itemLookup.item);
+        fetchDescendentNodes(itemLookup, filter$$1)
+            .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);
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], CheckAllDirective.prototype, "lastAction", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", TreeViewComponent)
+], CheckAllDirective.prototype, "treeview", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], CheckAllDirective.prototype, "checkedItems", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], CheckAllDirective.prototype, "valueField", void 0);
+__decorate([
+    Input('checkAll'),
+    __metadata("design:type", Boolean)
+], CheckAllDirective.prototype, "focused", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], CheckAllDirective.prototype, "checkedItemsChange", void 0);
+__decorate([
+    HostListener('change', ['$event.target']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], CheckAllDirective.prototype, "handleChange", null);
+CheckAllDirective = __decorate([
+    Directive({
+        selector: '[checkAll]' // tslint:disable-line
+    }),
+    __metadata("design:paramtypes", [ElementRef, NgZone, ChangeDetectorRef, Renderer2])
+], CheckAllDirective);
+
 const INTERNAL_DIRECTIVES = [
     ListComponent,
     ListItemDirective,
@@ -11481,7 +11724,8 @@ const INTERNAL_DIRECTIVES = [
     SearchBarComponent,
     TemplateContextDirective,
     TagListComponent,
-    CheckDirective
+    CheckDirective,
+    CheckAllDirective
 ];
 /**
  * @hidden
@@ -11788,4 +12032,4 @@ DropDownsModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { AUTOCOMPLETE_VALUE_ACCESSOR, COMBOBOX_VALUE_ACCESSOR, TOUCH_ENABLED, DataService, DisabledItemsService, FilterInputDirective, FilterableComponent, ListItemDirective, CustomMessagesComponent, LocalizedMessagesDirective, Messages, NavigationService, SearchBarComponent, SelectionService, TagListComponent, NoDataTemplateDirective, TagTemplateDirective, DROPDOWNLIST_VALUE_ACCESSOR, CheckDirective, MultiSelectTreeSummaryTagDirective, AutoCompleteComponent, ComboBoxComponent, DropDownListComponent, MultiSelectComponent, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnCellTemplateDirective, ColumnHeaderTemplateDirective, DropDownTreeComponent, MultiSelectTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, DropDownTreesModule, NodeTemplateDirective, ItemTemplateDirective, GroupTemplateDirective, FixedGroupTemplateDirective, CustomItemTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, TemplateContextDirective, GroupTagTemplateDirective, SelectableDirective, SummaryTagDirective, FilterDirective, DropDownsModule, MultiSelectModule, SharedModule, AutoCompleteModule, ComboBoxModule, DropDownListModule, SharedDirectivesModule, ListComponent, PreventableEvent, RemoveTagEvent };
+export { AUTOCOMPLETE_VALUE_ACCESSOR, COMBOBOX_VALUE_ACCESSOR, TOUCH_ENABLED, DataService, DisabledItemsService, FilterInputDirective, FilterableComponent, ListItemDirective, CustomMessagesComponent, LocalizedMessagesDirective, Messages, NavigationService, SearchBarComponent, SelectionService, TagListComponent, NoDataTemplateDirective, TagTemplateDirective, DROPDOWNLIST_VALUE_ACCESSOR, BaseCheckDirective, CheckAllDirective, CheckDirective, MultiSelectTreeSummaryTagDirective, AutoCompleteComponent, ComboBoxComponent, DropDownListComponent, MultiSelectComponent, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnCellTemplateDirective, ColumnHeaderTemplateDirective, DropDownTreeComponent, MultiSelectTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, DropDownTreesModule, NodeTemplateDirective, ItemTemplateDirective, GroupTemplateDirective, FixedGroupTemplateDirective, CustomItemTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, TemplateContextDirective, GroupTagTemplateDirective, SelectableDirective, SummaryTagDirective, FilterDirective, DropDownsModule, MultiSelectModule, SharedModule, AutoCompleteModule, ComboBoxModule, DropDownListModule, SharedDirectivesModule, ListComponent, PreventableEvent, RemoveTagEvent };