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

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

@@ -107,6 +107,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.
          */
@@ -210,6 +216,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';
@@ -219,7 +226,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();
             }
             /**
@@ -450,6 +457,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));
@@ -666,6 +679,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);
     }
@@ -754,6 +768,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;
@@ -876,17 +897,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) {
@@ -894,9 +918,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();
@@ -1054,6 +1083,10 @@ tslib_1.__decorate([
     ViewChild('filterInput', { static: false }),
     tslib_1.__metadata("design:type", ElementRef)
 ], MultiSelectTreeComponent.prototype, "filterInput", void 0);
+tslib_1.__decorate([
+    ViewChild('checkAllInput', { static: false }),
+    tslib_1.__metadata("design:type", ElementRef)
+], MultiSelectTreeComponent.prototype, "checkAllInput", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Number),
@@ -1136,6 +1169,10 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean)
 ], MultiSelectTreeComponent.prototype, "filterable", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], MultiSelectTreeComponent.prototype, "checkAll", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
@@ -1243,6 +1280,9 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = tslib_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
@@ -1311,9 +1351,7 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = tslib_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"
@@ -1336,6 +1374,35 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = tslib_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"

package/dist/es2015/index.d.ts

@@ -24,5 +24,7 @@ export { TagListComponent } from './common/taglist.component';
 export { NoDataTemplateDirective } from './common/templates/no-data-template.directive';
 export { TagTemplateDirective } from './common/templates/tag-template.directive';
 export { DROPDOWNLIST_VALUE_ACCESSOR } from './dropdownlist/dropdownlist.component';
+export { BaseCheckDirective } from './dropdowntrees/checked-state/base-check.directive';
+export { CheckAllDirective } from './dropdowntrees/checked-state/check-all.directive';
 export { CheckDirective } from './dropdowntrees/checked-state/check.directive';
 export { MultiSelectTreeSummaryTagDirective } from './dropdowntrees/summary-tag/summary-tag.directive';

package/dist/es2015/index.js

@@ -24,5 +24,7 @@ export { TagListComponent } from './common/taglist.component';
 export { NoDataTemplateDirective } from './common/templates/no-data-template.directive';
 export { TagTemplateDirective } from './common/templates/tag-template.directive';
 export { DROPDOWNLIST_VALUE_ACCESSOR } from './dropdownlist/dropdownlist.component';
+export { BaseCheckDirective } from './dropdowntrees/checked-state/base-check.directive';
+export { CheckAllDirective } from './dropdowntrees/checked-state/check-all.directive';
 export { CheckDirective } from './dropdowntrees/checked-state/check.directive';
 export { MultiSelectTreeSummaryTagDirective } from './dropdowntrees/summary-tag/summary-tag.directive';