feat(toolbar): allow passing overlaySettings through every action

CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes for each version of this project will be documented in this
 ## 12.1.0
 
 ### New Features
+- `Toolbar Actions`
+    - Exposed a new input property `overlaySettings` for all column actions (`hiding` | `pinning` | `advanced filtering` | `exporter`). Example below:
+
+    ```html
+    <igx-grid-toolbar-actions>
+        <igx-grid-toolbar-pinning [overlaySettings]="overlaySettingsGlobal"></igx-grid-toolbar-pinning>
+        <igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
+    </igx-grid-toolbar-actions>
+    ```
+- `Exporters`'s `columnExporting` event now supports changing the index of the column in the exported file. 
 - `IgxPaginatorComponent`
     - Added `paging` and `pagingDone` events; `paging` event is cancellable and is emitted before pagination is performed, `pagingDone` event gives you information about the previous and the current page number and is not cancellable; Also `IgxPageSizeSelectorComponent` and `IgxPageNavigationComponent` are introduced and now the paginator components allows you to define a custom content, as it is shown in the example below:
     ```html

projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts

@@ -13,7 +13,7 @@ import {
 import { IgxColumnComponent } from '../columns/column.component';
 import { ColumnDisplayOrder } from '../common/enums';
 import { IgxColumnActionsBaseDirective } from './column-actions-base.directive';
-import { IgxCheckboxComponent, IChangeCheckboxEventArgs } from '../../checkbox/checkbox.component';
+import { IgxCheckboxComponent } from '../../checkbox/checkbox.component';
 import { IColumnToggledEventArgs } from '../common/events';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { DeprecateProperty } from '../../core/deprecateDecorators';

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -5914,20 +5914,21 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * Opens the advanced filtering dialog.
      */
-    public openAdvancedFilteringDialog() {
+    public openAdvancedFilteringDialog(overlaySettings?: OverlaySettings) {
+        const settings = overlaySettings ? overlaySettings : this._advancedFilteringOverlaySettings;
         if (!this._advancedFilteringOverlayId) {
             this._advancedFilteringOverlaySettings.target =
                 (this as any).rootGrid ? (this as any).rootGrid.nativeElement : this.nativeElement;
             this._advancedFilteringOverlaySettings.outlet = this.outlet;
 
             this._advancedFilteringOverlayId = this.overlayService.attach(
                 IgxAdvancedFilteringDialogComponent,
-                this._advancedFilteringOverlaySettings,
+                settings,
                 {
                     injector: this.viewRef.injector,
                     componentFactoryResolver: this.resolver
                 });
-            this.overlayService.show(this._advancedFilteringOverlayId, this._advancedFilteringOverlaySettings);
+            this.overlayService.show(this._advancedFilteringOverlayId);
         }
     }
 

projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { TestBed, fakeAsync, ComponentFixture } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxCsvExporterService, IgxExcelExporterService } from '../../services/public_api';
+import { AbsoluteScrollStrategy, GlobalPositionStrategy, IgxCsvExporterService, IgxExcelExporterService } from '../../services/public_api';
 import { IgxGridModule } from './public_api';
 import { configureTestSuite } from '../../test-utils/configure-suite';
+import { BaseToolbarColumnActionsDirective } from '../toolbar/grid-toolbar.base';
 
 
 const TOOLBAR_TAG = 'igx-grid-toolbar';
@@ -154,6 +155,28 @@ describe('IgxGrid - Grid Toolbar #grid - ', () => {
             expect($('#excelEntry').textContent).toMatch(instance.customExcelText);
             expect($('#csvEntry').textContent).toMatch(instance.customCSVText);
         });
+
+        it('Setting overlaySettings for each toolbar columns action', () => {
+            const defaultSettings = instance.pinningAction.overlaySettings;
+            const defaultFiltSettings = instance.advancedFiltAction.overlaySettings;
+            const defaultExportSettings = instance.exporterAction.overlaySettings;
+
+            instance.pinningAction.overlaySettings = instance.overlaySettings;
+            instance.hidingAction.overlaySettings = instance.overlaySettings;
+            fixture.detectChanges();
+
+            expect(defaultSettings).not.toEqual(instance.pinningAction.overlaySettings);
+            expect(defaultSettings).not.toEqual(instance.hidingAction.overlaySettings);
+            expect(defaultFiltSettings).toEqual(instance.advancedFiltAction.overlaySettings);
+            expect(defaultExportSettings).toEqual(instance.exporterAction.overlaySettings);
+
+            instance.advancedFiltAction.overlaySettings = instance.overlaySettings;
+            instance.exporterAction.overlaySettings = instance.overlaySettings;
+            fixture.detectChanges();
+
+            expect(defaultFiltSettings).not.toEqual(instance.advancedFiltAction.overlaySettings);
+            expect(defaultExportSettings).not.toEqual(instance.exporterAction.overlaySettings);
+        });
     });
 });
 
@@ -188,12 +211,12 @@ export class DefaultToolbarComponent {
     <igx-grid [data]="data" [autoGenerate]="true">
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>
-                <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
-                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
-                <igx-grid-toolbar-advanced-filtering>
+                <igx-grid-toolbar-pinning #pinningAction></igx-grid-toolbar-pinning>
+                <igx-grid-toolbar-hiding #hidingAction ></igx-grid-toolbar-hiding>
+                <igx-grid-toolbar-advanced-filtering #advancedFiltAction>
                     {{ advancedFilteringTitle }}
                 </igx-grid-toolbar-advanced-filtering>
-                <igx-grid-toolbar-exporter [exportCSV]="exportCSV" [exportExcel]="exportExcel" [filename]="exportFilename">
+                <igx-grid-toolbar-exporter #exporterAction [exportCSV]="exportCSV" [exportExcel]="exportExcel" [filename]="exportFilename">
                     {{ exporterText }}
                     <span id="excelEntry" excelText>{{ customExcelText }}</span>
                     <span id="csvEntry" csvText>{{ customCSVText }}</span>
@@ -204,14 +227,32 @@ export class DefaultToolbarComponent {
     `
 })
 export class ToolbarActionsComponent {
-    data  = [];
-    advancedFilteringTitle = 'Custom button text';
-    exportCSV = true;
-    exportExcel = true;
-    exportFilename = '';
-    exporterText = 'Exporter Options';
-    customExcelText = '<< Excel export >>';
-    customCSVText = '<< CSV export >>';
+    @ViewChild('pinningAction', {static: true})
+    public pinningAction;
+
+    @ViewChild('hidingAction', {static: true})
+    public hidingAction;
+
+    @ViewChild('advancedFiltAction', {static: true})
+    public advancedFiltAction;
+
+    @ViewChild('exporterAction', {static: true})
+    public exporterAction;
+
+    public data  = [];
+    public advancedFilteringTitle = 'Custom button text';
+    public exportCSV = true;
+    public exportExcel = true;
+    public exportFilename = '';
+    public exporterText = 'Exporter Options';
+    public customExcelText = '<< Excel export >>';
+    public customCSVText = '<< CSV export >>';
+    public overlaySettings = {
+        positionStrategy: new GlobalPositionStrategy(),
+        scrollStrategy: new AbsoluteScrollStrategy(),
+        modal: true,
+        closeOnEscape: false
+    };
 
     constructor() {
         this.data = [...DATA];

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html

@@ -1,6 +1,6 @@
 <button igxButton="outlined" [displayDensity]="grid.displayDensity" name="btnAdvancedFiltering" igxRipple
     [title]="grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip"
-    (click)="grid.openAdvancedFilteringDialog()"
+    (click)="grid.openAdvancedFilteringDialog(overlaySettings)"
     [ngClass]="grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'">
     <igx-icon>filter_list</igx-icon>
     <span #ref>

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts

@@ -1,4 +1,5 @@
-import { Component, Host } from '@angular/core';
+import { Component, Host, Input } from '@angular/core';
+import { OverlaySettings } from '../../services/public_api';
 import { IgxGridToolbarComponent } from './grid-toolbar.component';
 
 
@@ -28,5 +29,8 @@ export class IgxGridToolbarAdvancedFilteringComponent {
         return this.toolbar.grid;
     }
 
+    @Input()
+    public overlaySettings: OverlaySettings;
+
     constructor(@Host() private toolbar: IgxGridToolbarComponent) { }
 }

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts

@@ -7,7 +7,6 @@ import {
     ConnectedPositioningStrategy,
     HorizontalAlignment,
     OverlaySettings,
-    PositionSettings,
     VerticalAlignment
 } from '../../services/public_api';
 import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
@@ -41,6 +40,20 @@ export abstract class BaseToolbarDirective implements OnDestroy {
     @Input()
     public prompt: string;
 
+    /**
+     * Sets overlay settings
+     */
+    @Input()
+    public set overlaySettings(overlaySettings: OverlaySettings) {
+        this._overlaySettings = overlaySettings;
+    };
+
+    /**
+     * Returns overlay settings
+     */
+    public get overlaySettings(): OverlaySettings {
+        return this._overlaySettings;
+    }
     /**
      * Emits an event before the toggle container is opened.
      */
@@ -74,6 +87,19 @@ export abstract class BaseToolbarDirective implements OnDestroy {
     private $destroyer = new Subject<boolean>();
     private $sub: Subscription;
 
+    private _overlaySettings: OverlaySettings = {
+        positionStrategy: new ConnectedPositioningStrategy({
+            horizontalDirection: HorizontalAlignment.Left,
+            horizontalStartPoint: HorizontalAlignment.Right,
+            verticalDirection: VerticalAlignment.Bottom,
+            verticalStartPoint: VerticalAlignment.Bottom
+        }),
+        scrollStrategy: new AbsoluteScrollStrategy(),
+        modal: false,
+        closeOnEscape: true,
+        closeOnOutsideClick: true
+    };
+
     /**
      * Returns the grid containing this component.
      */
@@ -94,7 +120,7 @@ export abstract class BaseToolbarDirective implements OnDestroy {
             const setHeight = () => actions.columnsAreaMaxHeight = this.columnListHeight ?? `${Math.max(this.grid.calcHeight, 200)}px`;
             toggleRef.onOpening.pipe(first()).subscribe(setHeight);
         }
-        toggleRef.toggle({ ..._makeOverlaySettings(), ...{ target: anchorElement, outlet: this.grid.outlet,
+        toggleRef.toggle({ ...this.overlaySettings, ...{ target: anchorElement, outlet: this.grid.outlet,
             excludeFromOutsideClick: [anchorElement] }});
 
     }
@@ -160,19 +186,3 @@ export abstract class BaseToolbarColumnActionsDirective extends BaseToolbarDirec
         this.columnActionsUI.uncheckAllColumns();
     }
 }
-
-const _makeOverlaySettings = (): OverlaySettings => {
-    const positionSettings: PositionSettings = {
-        horizontalDirection: HorizontalAlignment.Left,
-        horizontalStartPoint: HorizontalAlignment.Right,
-        verticalDirection: VerticalAlignment.Bottom,
-        verticalStartPoint: VerticalAlignment.Bottom
-    };
-    return {
-        positionStrategy: new ConnectedPositioningStrategy(positionSettings),
-        scrollStrategy: new AbsoluteScrollStrategy(),
-        modal: false,
-        closeOnEscape: true,
-        closeOnOutsideClick: true
-    };
-};