Merge pull request #8993 from IgniteUI/gedinakova/fix-8982-master

Renamed exporters' onColumnExport and onRowExport events

Author: zdrawku

CHANGELOG.md

@@ -13,7 +13,7 @@ All notable changes for each version of this project will be documented in this
     - Added support for filtering based on the formatted cell values using the `FormattedValuesFilteringStrategy` for `IgxGrid`/`IgxHierarchicalGrid` and `TreeGridFormattedValuesFilteringStrategy` for `IgxTreeGrid`.
 - `IgxPaginator`
     - `paging` and `pagingDone` events are now emitted.
-- `IgxInput` now supports `type="file"` and its styling upon all themes.  
+- `IgxInput` now supports `type="file"` and its styling upon all themes.
    _Note: validation of file type input is not yet supported._
 
 ### General
@@ -93,7 +93,27 @@ All notable changes for each version of this project will be documented in this
         - `page`, `perPage`, `paginate`, `nextPage`, `previousPage` and `totalPages` in the grids are deprecated and will be removed. Use the corresponding `IgxPaginator` outputs/inputs. When using an external paginator, take care to provide the corresponding slice of data. See [`Paging with Custom Template`](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/paging#remote-paging-with-custom-template)
 - IgxButton
     - IgxIcon(s) placed in a button now include margin if there are one or more sibling elements to give them some breathing room. The amount of margin applied depends on the display density of the button.
-    
+- `IgxListComponent`
+    - **Breaking Change** - The following outputs are renamed:
+        - `onLeftPan` to `leftPan`
+        - `onRightPan` to `rightPan`
+        - `onPanStateChange` to `panStateChange`
+        - `onItemClicked` to `itemClicked`
+- `IgxNavbarComponent`
+    - **Breaking Change** - The `onAction` output is renamed to `action`.
+- `IgxTabsComponent`
+    - **Breaking Change** - The following outputs are renamed:
+        - `onTabItemSelected` to `tabItemSelected`
+        - `onTabItemDeselected` to `tabItemDeselected`
+- `IgxTooltipTargetDirective`
+    - **Breaking Change** - The following outputs are renamed:
+        - `onTooltipShow` to `tooltipShow`
+        - `onTooltipHide` to `tooltipHide`
+- `IgxBaseExporter`, `IgxExcelExporterService`, `IgxCsvExporterService`
+    - **Breaking Change** - The following outputs are renamed:
+        - `onColumnExport` to `columnExporting`
+        - `onRowExport` to `rowExporting`
+        - `onExportEnded` to `exportEnded`
 
 ## 11.0.4
 

projects/igniteui-angular/migrations/update-11_1_0/changes/members.json

@@ -282,6 +282,83 @@
             "definedIn": [
                 "IgxMonthsViewComponent"
             ]
+        },
+        {
+            "member": "onRowExport",
+            "replaceWith": "rowExporting",
+            "definedIn": [
+                "IgxBaseExporter"
+            ]
+        },
+        {
+            "member": "onColumnExport",
+            "replaceWith": "columnExporting",
+            "definedIn": [
+                "IgxBaseExporter"
+            ]
+        },
+        {
+            "member": "onAction",
+            "replaceWith": "action",
+            "definedIn": [
+                "IgxNavbarComponent"
+            ]
+        },
+        {
+            "member": "onLeftPan",
+            "replaceWith": "leftPan",
+            "definedIn": [
+                "IgxListComponent"
+            ]
+        },
+        {
+            "member": "onRightPan",
+            "replaceWith": "rightPan",
+            "definedIn": [
+                "IgxListComponent"
+            ]
+        },
+        {
+            "member": "onPanStateChange",
+            "replaceWith": "panStateChange",
+            "definedIn": [
+                "IgxListComponent"
+            ]
+        },
+        {
+            "member": "onItemClicked",
+            "replaceWith": "itemClicked",
+            "definedIn": [
+                "IgxListComponent"
+            ]
+        },
+        {
+            "member": "onTabItemSelected",
+            "replaceWith": "tabItemSelected",
+            "definedIn": [
+                "IgxTabsComponent"
+            ]
+        },
+        {
+            "member": "onTabItemDeselected",
+            "replaceWith": "tabItemDeselected",
+            "definedIn": [
+                "IgxTabsComponent"
+            ]
+        },
+        {
+            "member": "onTooltipShow",
+            "replaceWith": "tooltipShow",
+            "definedIn": [
+                "IgxTooltipTargetDirective"
+            ]
+        },
+        {
+            "member": "onTooltipHide",
+            "replaceWith": "tooltipHide",
+            "definedIn": [
+                "IgxTooltipTargetDirective"
+            ]
         }
     ]
 }

projects/igniteui-angular/migrations/update-11_1_0/index.spec.ts

@@ -630,4 +630,123 @@ export class CsvExportComponent {
 ></igx-month-picker>`
         );
     });
+
+    it('should update Excel exporter onColumnExport and onRowExport event names to columnmExporting and rowExporting', async () => {
+        pending('set up tests for migrations through lang service');
+        appTree.create(
+            '/testSrc/appPrefix/component/excel-export.component.ts',
+`import { Component } from '@angular/core';
+import { IgxExcelExporterService } from "igniteui-angular";
+
+@Component({
+    selector: "app-excel-export",
+    styleUrls: ["./excel-export.component.scss"],
+    templateUrl: "./excel-export.component.html"
+})
+export class ExcelExportComponent {
+    constructor(private excelExportService: IgxExcelExporterService) {
+        this.excelExportService.onColumnExport.subscribe();
+        this.excelExportService.onRowExport.subscribe();
+    }
+}
+@NgModule({
+    declarations: [ExcelExportComponent],
+    exports: [ExcelExportComponent],
+    imports: [],
+    providers: [IgxExcelExporterService]
+});
+`);
+
+        const tree = await runner
+            .runSchematicAsync('migration-19', {}, appTree)
+            .toPromise();
+
+        const expectedContent =
+`import { Component } from '@angular/core';
+import { IgxExcelExporterService } from "igniteui-angular";
+
+@Component({
+    selector: "app-excel-export",
+    styleUrls: ["./excel-export.component.scss"],
+    templateUrl: "./excel-export.component.html"
+})
+export class ExcelExportComponent {
+    constructor(private excelExportService: IgxExcelExporterService) {
+        this.excelExportService.columnExporting.subscribe();
+        this.excelExportService.rowExporting.subscribe();
+    }
+}
+@NgModule({
+    declarations: [ExcelExportComponent],
+    exports: [ExcelExportComponent],
+    imports: [],
+    providers: [IgxExcelExporterService]
+});
+`;
+
+        expect(
+            tree.readContent(
+                '/testSrc/appPrefix/component/excel-export.component.ts'
+            )
+        ).toEqual(expectedContent);
+    });
+
+    it('should update CSV exporter onColumnExport and onRowExport event names to columnmExporting and rowExporting', async () => {
+        pending('set up tests for migrations through lang service');
+        appTree.create(
+            '/testSrc/appPrefix/component/csv-export.component.ts',
+`import { Component } from '@angular/core';
+import { IgxCsvExporterService } from "igniteui-angular";
+
+@Component({
+    selector: "app-csv-export",
+    styleUrls: ["./csv-export.component.scss"],
+    templateUrl: "./csv-export.component.html"
+})
+export class CsvExportComponent {
+    constructor(private csvExportService: IgxCsvExporterService) {
+        this.csvExportService.onColumnExport.subscribe();
+        this.csvExportService.onRowExport.subscribe();
+    }
+}
+@NgModule({
+    declarations: [CsvExportComponent],
+    exports: [CsvExportComponent],
+    imports: [],
+    providers: [IgxCsvExporterService]
+});
+`);
+
+        const tree = await runner
+            .runSchematicAsync('migration-19', {}, appTree)
+            .toPromise();
+
+        const expectedContent =
+`import { Component } from '@angular/core';
+import { IgxCsvExporterService } from "igniteui-angular";
+
+@Component({
+    selector: "app-csv-export",
+    styleUrls: ["./csv-export.component.scss"],
+    templateUrl: "./csv-export.component.html"
+})
+export class CsvExportComponent {
+    constructor(private csvExportService: IgxCsvExporterService) {
+        this.csvExportService.columnExporting.subscribe();
+        this.csvExportService.rowExporting.subscribe();
+    }
+}
+@NgModule({
+    declarations: [CsvExportComponent],
+    exports: [CsvExportComponent],
+    imports: [],
+    providers: [IgxCsvExporterService]
+});
+`;
+        expect(
+            tree.readContent(
+                '/testSrc/appPrefix/component/csv-export.component.ts'
+            )
+        ).toEqual(expectedContent);
+    });
 });

projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts

@@ -49,8 +49,8 @@ describe('CSV Grid Exporter', () => {
     }));
 
     afterEach(waitForAsync(() => {
-        exporter.onColumnExport.unsubscribe();
-        exporter.onRowExport.unsubscribe();
+        exporter.columnExporting.unsubscribe();
+        exporter.rowExporting.unsubscribe();
     }));
 
     it('should export grid as displayed.', async () => {
@@ -212,14 +212,14 @@ describe('CSV Grid Exporter', () => {
         wrapper.verifyData(wrapper.simpleGridData, 'Name should not have been the first field!');
     });
 
-    it('should fire \'onColumnExport\' for each grid column.', async () => {
+    it('should fire \'columnExporting\' for each grid column.', async () => {
         const fix = TestBed.createComponent(GridIDNameJobTitleComponent);
         fix.detectChanges();
 
         const grid = fix.componentInstance.grid;
         const cols = [];
 
-        exporter.onColumnExport.subscribe((value) => {
+        exporter.columnExporting.subscribe((value) => {
             cols.push({ header: value.header, index: value.columnIndex });
         });
 
@@ -234,14 +234,14 @@ describe('CSV Grid Exporter', () => {
         wrapper.verifyData(wrapper.simpleGridData);
     });
 
-    it('should fire \'onColumnExport\' for each visible grid column.', async () => {
+    it('should fire \'columnExporting\' for each visible grid column.', async () => {
         const fix = TestBed.createComponent(GridIDNameJobTitleComponent);
         fix.detectChanges();
 
         const grid = fix.componentInstance.grid;
         const cols = [];
 
-        exporter.onColumnExport.subscribe((value) => {
+        exporter.columnExporting.subscribe((value) => {
             cols.push({ header: value.header, index: value.columnIndex });
         });
 
@@ -258,28 +258,28 @@ describe('CSV Grid Exporter', () => {
         wrapper.verifyData(wrapper.gridNameJobTitle);
     });
 
-    it('should not export columns when \'onColumnExport\' is canceled.', async () => {
+    it('should not export columns when \'columnExporting\' is canceled.', async () => {
         const fix = TestBed.createComponent(GridIDNameJobTitleComponent);
         fix.detectChanges();
 
         const grid = fix.componentInstance.grid;
 
-        exporter.onColumnExport.subscribe((value: IColumnExportingEventArgs) => {
+        exporter.columnExporting.subscribe((value: IColumnExportingEventArgs) => {
             value.cancel = true;
         });
 
         const wrapper = await getExportedData(grid, options);
         wrapper.verifyData('');
     });
 
-    it('should fire \'onRowExport\' for each grid row.', async () => {
+    it('should fire \'rowExporting\' for each grid row.', async () => {
         const fix = TestBed.createComponent(GridIDNameJobTitleComponent);
         fix.detectChanges();
 
         const grid = fix.componentInstance.grid;
         const rows = [];
 
-        exporter.onRowExport.subscribe((value: IRowExportingEventArgs) => {
+        exporter.rowExporting.subscribe((value: IRowExportingEventArgs) => {
             rows.push({ data: value.rowData, index: value.rowIndex });
         });
 
@@ -292,13 +292,13 @@ describe('CSV Grid Exporter', () => {
         }
     });
 
-    it('should not export rows when \'onRowExport\' is canceled.', async () => {
+    it('should not export rows when \'rowExporting\' is canceled.', async () => {
         const fix = TestBed.createComponent(GridIDNameJobTitleComponent);
         fix.detectChanges();
 
         const grid = fix.componentInstance.grid;
 
-        exporter.onRowExport.subscribe((value: IRowExportingEventArgs) => {
+        exporter.rowExporting.subscribe((value: IRowExportingEventArgs) => {
             value.cancel = true;
         });
 
@@ -318,14 +318,14 @@ describe('CSV Grid Exporter', () => {
         let wrapper = await getExportedData(grid, options);
         wrapper.verifyData(wrapper.simpleGridDataFormatted, 'Columns\' formatter should not be skipped.');
 
-        exporter.onColumnExport.subscribe((val: IColumnExportingEventArgs) => {
+        exporter.columnExporting.subscribe((val: IColumnExportingEventArgs) => {
             val.skipFormatter = true;
         });
         grid.cdr.detectChanges();
         wrapper = await getExportedData(grid, options);
         wrapper.verifyData(wrapper.simpleGridData, 'Columns formatter should be skipped.');
 
-        exporter.onColumnExport.subscribe((val: IColumnExportingEventArgs) => {
+        exporter.columnExporting.subscribe((val: IColumnExportingEventArgs) => {
             val.skipFormatter = false;
         });
         grid.cdr.detectChanges();
@@ -430,10 +430,10 @@ describe('CSV Grid Exporter', () => {
             wrapper.verifyData(wrapper.treeGridDataFilterSorted);
         });
 
-        it('should fire \'onRowExport\' for each tree grid row.', async () => {
+        it('should fire \'rowExporting\' for each tree grid row.', async () => {
             const rows = [];
 
-            exporter.onRowExport.subscribe((value: IRowExportingEventArgs) => {
+            exporter.rowExporting.subscribe((value: IRowExportingEventArgs) => {
                 rows.push({ data: value.rowData, index: value.rowIndex });
             });
 
@@ -446,7 +446,7 @@ describe('CSV Grid Exporter', () => {
             }
         });
 
-        it('should skip the column formatter when onColumnExporting skipFormatter is true.', async () => {
+        it('should skip the column formatter when columnExportinging skipFormatter is true.', async () => {
             treeGrid.columns[3].formatter = ((val: string) => val.toLowerCase());
             treeGrid.columns[4].formatter = ((val: number) =>
                  val * 12 // months
@@ -455,13 +455,13 @@ describe('CSV Grid Exporter', () => {
             let wrapper = await getExportedData(treeGrid, options);
             wrapper.verifyData(wrapper.treeGridDataFormatted, 'Columns\' formatter should be applied.');
 
-            exporter.onColumnExport.subscribe((val: IColumnExportingEventArgs) => {
+            exporter.columnExporting.subscribe((val: IColumnExportingEventArgs) => {
                 val.skipFormatter = true;
             });
             wrapper = await getExportedData(treeGrid, options);
             wrapper.verifyData(wrapper.treeGridData, 'Columns\' formatter should be skipped.');
 
-            exporter.onColumnExport.subscribe((val: IColumnExportingEventArgs) => {
+            exporter.columnExporting.subscribe((val: IColumnExportingEventArgs) => {
                 val.skipFormatter = false;
             });
             wrapper = await getExportedData(treeGrid, options);