Merge branch 'master' into change-cell-row-add

Author: Aleksandyr

CHANGELOG.md

@@ -3,8 +3,32 @@
 All notable changes for each version of this project will be documented in this file.
 
 ## 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
+    <igx-paginator #paginator>
+        <igx-paginator-content>
+            <igx-page-size></igx-page-size>
+            <button [disabled]="paginator.isFirstPage" (click)="paginator.previousPage()">PREV</button>
+            <span>Page {{paginator.page}} of {{paginator.totalPages}}</span>
+            <button [disabled]="paginator.isLastPage" (click)="paginator.nextPage()">NEXT</button>
+        </igx-paginator-content>
+    </igx-paginator>
+    ```
+
+- `Exporters`'s `columnExporting` event now supports changing the index of the column in the exported file.
     ```typescript
         this.excelExporterService.columnExporting.subscribe((col) => {
             if (col.field === 'Index') {
@@ -13,6 +37,15 @@ All notable changes for each version of this project will be documented in this
         });
     ```
 ### General
+- `IgxPaginatorComponent`
+    - Deprecated properties `selectLabel` and `prepositionPage` are now removed;
+    -  **Breaking Change** - the following properties are removed
+        - `pagerEnabled`
+        - `pagerHidden `
+        - `dropdownEnabled`
+        - `dropdownHidden`
+
+
 - **Breaking Change** - `IgxOverlayService` events are renamed as follows:
     - `onOpening` -> `opening`
     - `onOpened` -> `opened`

projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-component.scss

@@ -3,40 +3,43 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
-
 @include b(igx-paginator) {
     $this: bem--selector-to-string(&);
     @include register-component(str-slice($this, 2, -1));
 
     @extend %igx-paginator !optional;
 
-    @include e(label) {
-        @extend %igx-paginator__label !optional;
+    @include m(cosy) {
+        @extend %igx-paginator !optional;
+        @extend %igx-paginator--cosy !optional;
     }
 
-    @include e(select) {
-        @extend %igx-paginator__select !optional;
+    @include m(compact) {
+        @extend %igx-paginator !optional;
+        @extend %igx-paginator--compact !optional;
     }
+}
 
-    @include e(select-input) {
-        @extend %igx-paginator__select-input !optional;
-    }
+@include b(igx-page-nav) {
+    @extend %igx-page-nav !optional;
 
-    @include e(pager) {
-        @extend %igx-paginator__pager !optional;
+    @include e(text) {
+        @extend %igx-page-nav__text !optional;
     }
+}
 
-    @include e(pager-text) {
-        @extend %igx-paginator__pager-text !optional;
-    }
+@include b(igx-page-size) {
+    @extend %igx-page-size !optional;
 
-    @include m(cosy) {
-        @extend %igx-paginator !optional;
-        @extend %igx-paginator--cosy !optional;
+    @include e(label) {
+        @extend %igx-page-size__label !optional;
     }
 
-    @include m(compact) {
-        @extend %igx-paginator !optional;
-        @extend %igx-paginator--compact !optional;
+    @include e(select) {
+        @extend %igx-page-size__select !optional;
     }
 }
+
+@include b(igx-paginator-content) {
+    @extend %igx-paginator-content !optional;
+}

projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss

@@ -107,20 +107,32 @@
         height: map-get($paginator-height, 'compact');
     }
 
-
-    %igx-paginator__label {
-        margin-#{$right}: 8px;
-        @include ellipsis();
+    %igx-paginator-content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
     }
 
-    %igx-paginator__select {
+    %igx-page-size {
         display: flex;
         justify-content: flex-start;
         align-items: center;
         flex: 1;
     }
 
-    %igx-paginator__pager {
+    %igx-page-size__label {
+        margin-#{$right}: 8px;
+        @include ellipsis();
+    }
+
+    %igx-page-size__select {
+        display: flex;
+        max-width: 90px;
+        min-width: 80px;
+    }
+
+    %igx-page-nav {
         display: flex;
         justify-content: flex-end;
         align-items: center;
@@ -137,13 +149,7 @@
         }
     }
 
-    %igx-paginator__pager-text {
+    %igx-page-nav__text {
         display: flex;
     }
-
-    %igx-paginator__select-input {
-        display: flex;
-        max-width: 90px;
-        min-width: 80px;
-    }
 }

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/common/events.ts

@@ -69,15 +69,6 @@ export interface IPinColumnEventArgs extends IBaseEventArgs {
  */
 export interface IPinColumnCancellableEventArgs extends IPinColumnEventArgs, CancelableEventArgs {
 }
-
-/**
- * The event arguments after a page is changed.
- */
-export interface IPageEventArgs extends IBaseEventArgs {
-    previous: number;
-    current: number;
-}
-
 export interface IRowDataEventArgs extends IBaseEventArgs {
     data: any;
 }

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

@@ -119,7 +119,6 @@ import {
     IRowSelectionEventArgs,
     IPinColumnEventArgs,
     IGridEditEventArgs,
-    IPageEventArgs,
     IRowDataEventArgs,
     IColumnResizeEventArgs,
     IColumnMovingStartEventArgs,
@@ -159,6 +158,7 @@ import { IgxActionStripComponent } from '../action-strip/action-strip.component'
 import { DeprecateProperty } from '../core/deprecateDecorators';
 import { RowType } from './common/row.interface';
 import { IgxGridRowComponent } from './grid/grid-row.component';
+import { IPageEventArgs } from '../paginator/paginator_interfaces';
 
 let FAKE_ROW_ID = -1;
 
@@ -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/grid/grid.component.spec.ts

@@ -2205,7 +2205,7 @@ describe('IgxGrid Component Tests #grid', () => {
             grid.cdr.detectChanges();
             const headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
             const gridBody = fix.debugElement.query(By.css(TBODY_CLASS));
-            const paging = fix.debugElement.query(By.css('.igx-paginator__pager'));
+            const paging = fix.debugElement.query(By.css('igx-page-nav'));
             const summaries = fix.debugElement.queryAll(By.css('igx-grid-summary-cell'));
             expect(headers.length).toBe(4);
             expect(summaries.length).toBe(4);
@@ -2230,7 +2230,7 @@ describe('IgxGrid Component Tests #grid', () => {
             grid.cdr.detectChanges();
             const headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
             const gridBody = fix.debugElement.query(By.css(TBODY_CLASS));
-            const paging = fix.debugElement.query(By.css('.igx-paginator__pager'));
+            const paging = fix.debugElement.query(By.css('igx-page-nav'));
             expect(headers.length).toBe(4);
             expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(204);
             expect(parseInt(window.getComputedStyle(paging.nativeElement).height, 10)).toBe(36);

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

@@ -19,7 +19,7 @@ const verifyGridPager = (fix, rowsCount, firstCellValue, pagerText, buttonsVisib
     if (pagerText != null) {
         expect(grid.nativeElement.querySelector(PAGER_CLASS)).toBeDefined();
         expect(grid.nativeElement.querySelectorAll('igx-select').length).toEqual(1);
-        expect(grid.nativeElement.querySelector('.igx-paginator__pager > div').textContent).toMatch(pagerText);
+        expect(grid.nativeElement.querySelector('.igx-page-nav__text').textContent).toMatch(pagerText);
     }
     if (buttonsVisibility != null && buttonsVisibility.length === 4) {
         const pagingButtons = GridFunctions.getPagingButtons(grid.nativeElement);

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>