@progress/kendo-angular-grid 20.0.4-develop.2 → 20.1.0-develop.2

package/esm2022/rendering/toolbar/tools/column-chooser-tool.directive.mjs

@@ -5,7 +5,6 @@
 import { Directive, NgZone, Input, Renderer2, ChangeDetectorRef } from '@angular/core';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { RefreshService, ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
-import { ColumnListComponent } from '../../../column-menu/column-list.component';
 import { closest, isPresent } from '@progress/kendo-angular-common';
 import { Subscription } from 'rxjs';
 import { columnsIcon } from '@progress/kendo-svg-icons';
@@ -15,6 +14,7 @@ import { AdaptiveGridService } from '../../../common/adaptiveness.service';
 import { ColumnInfoService } from '../../../common/column-info.service';
 import { ToolbarToolBase } from '../../../common/toolbar-tool-base.directive';
 import { ToolbarToolName } from '../../../navigation/toolbar-tool-name';
+import { ColumnChooserContentComponent } from '../../../column-menu/column-chooser-content.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
 import * as i2 from "@progress/kendo-angular-toolbar";
@@ -58,6 +58,18 @@ export class ColumnChooserToolbarDirective extends ToolbarToolBase {
      * @default true
      */
     allowHideAll = true;
+    /**
+     * When `true`, enables the columns' filtering.
+     *
+     * @default true
+     */
+    filterable = true;
+    /**
+     * When `true`, displays a select all checkbox.
+     *
+     * @default true
+     */
+    showSelectAll = true;
     /**
      * @hidden
      */
@@ -136,7 +148,7 @@ export class ColumnChooserToolbarDirective extends ToolbarToolBase {
             const direction = this.ctx.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupSerivce.open({
                 anchor: this.buttonElement,
-                content: ColumnListComponent,
+                content: ColumnChooserContentComponent,
                 positionMode: 'absolute',
                 anchorAlign: { vertical: 'bottom', horizontal: direction },
                 popupAlign: { vertical: 'top', horizontal: direction }
@@ -158,18 +170,28 @@ export class ColumnChooserToolbarDirective extends ToolbarToolBase {
             this.buttonElement?.setAttribute('aria-expanded', 'true');
             this.buttonElement?.setAttribute('aria-controls', popupId);
             this.host.selected = true;
-            const columnList = this.popupRef.content.instance;
-            columnList.isLast = true;
-            columnList.autoSync = this.autoSync;
-            columnList.allowHideAll = this.allowHideAll;
-            columnList.applyText = this.ctx.localization.get('columnsApply');
-            columnList.resetText = this.ctx.localization.get('columnsReset');
-            columnList.columns = this.ctx.grid.columns;
-            columnList.ariaLabel = this.ctx.localization.get('columns');
+            const columnChooserContent = this.popupRef.content.instance;
+            columnChooserContent.columnInfoService = this.columnInfoService;
+            columnChooserContent.ctx = this.ctx;
+            columnChooserContent.showSelectAll = this.showSelectAll;
+            columnChooserContent.filterable = this.filterable;
+            columnChooserContent.isLast = true;
+            columnChooserContent.autoSync = this.autoSync;
+            columnChooserContent.allowHideAll = this.allowHideAll;
+            columnChooserContent.applyText = this.ctx.localization.get('columnsApply');
+            columnChooserContent.resetText = this.ctx.localization.get('columnsReset');
+            columnChooserContent.columns = this.ctx.grid.columns;
+            columnChooserContent.filteredColumns = this.columnInfoService?.leafNamedColumns.filter(column => {
+                if (column.includeInChooser !== false) {
+                    column.initiallyChecked = column.currentlyChecked = !column.hidden;
+                    return true;
+                }
+                return false;
+            });
             this.subs.add(this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
                 this.closePopup(true);
             }));
-            this.subs.add(columnList.apply.subscribe((changed) => {
+            this.subs.add(columnChooserContent.columnList.apply.subscribe((changed) => {
                 if (changed.length) {
                     this.cdr.markForCheck();
                     this.columnInfoService.changeVisibility(changed);
@@ -197,7 +219,7 @@ export class ColumnChooserToolbarDirective extends ToolbarToolBase {
         focusAnchor && this.buttonElement?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, deps: [{ token: i0.Renderer2 }, { token: i1.PopupService }, { token: i2.ToolBarButtonComponent }, { token: i3.ContextService }, { token: i0.NgZone }, { token: i2.RefreshService }, { token: i4.AdaptiveGridService }, { token: i5.ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserToolbarDirective, isStandalone: true, selector: "[kendoGridColumnChooserTool]", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserToolbarDirective, isStandalone: true, selector: "[kendoGridColumnChooserTool]", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll", filterable: "filterable", showSelectAll: "showSelectAll" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, decorators: [{
             type: Directive,
@@ -209,4 +231,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], allowHideAll: [{
                 type: Input
+            }], filterable: [{
+                type: Input
+            }], showSelectAll: [{
+                type: Input
             }] } });