Merge branch 'pickers-refactoring' of https://github.com/IgniteUI/igniteui-angular into PMiteva/time-picker-refactoring

Author: PlamenaMiteva

Diff for: CHANGELOG.md

@@ -7,7 +7,12 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Breaking Change** - The `locale` and `pipeArgs` parameters are removed from the `operate` method exposed by the `IgxNumberSummaryOperand`, `IgxDateSummaryOperand`, `IgxCurrencySummaryOperand` and `IgxPercentSummaryOperand`. They are now set in the `igx-grid-summary-cell` template. To change the locale and format setting of the `igx-grid-summary-cell` the user can use the new `summaryFormatter` property of the `IgxColumnComponent`.
-- `IgxTabs`, `IgxBottomNav`
+    - `IgxGridRowComponent`, `IgxGridGroupByRowComponent`, `IgxTreeGridRowComponent`, `IgxHierarchicalRowComponent` are no longer exposed in the public API. Automatic migration will change these imports with `RowType`.
+    - **Behavioral changes**
+    - `getRowByIndex`, `getRowByKey`, `cell.row` now return an object implemening the `RowType` interface.
+    - `dragData` emitted with `IRowDragEndEventArgs`, `IRowDragStartEventArgs` is now `RowType`
+    - `IRowDragEndEventArgs`, `IRowDragStartEventArgs` now emit `dragElement`, which holds the dragged row html element.
+    - `row` in `IPinRowEventArgs` is now `RowType`
     - **Breaking Change** - `IgxTabs` and `IgxBottomNav` components were completely refactored in order to provide more flexible and descriptive way to define tab headers and contents. Please make sure to update via `ng update` in order to migrate the existing `igx-tabs` and `igx-bottom-nav` definitions to the new ones.
 - `IgxForOfDirective`
     - **Breaking Change** - `IgxForOfDirective` events are renamed as follows:

Diff for: projects/igniteui-angular/migrations/update-12_0_0/changes/members.json

@@ -47,42 +47,48 @@
       "member": "onChunkLoad",
       "replaceWith": "chunkLoad",
       "definedIn": [
-        "IgxForOfDirective"
+        "IgxForOfDirective",
+        "IgxGridForOfDirective"
       ]
     },
     {
       "member": "onScrollbarVisibilityChanged",
       "replaceWith": "scrollbarVisibilityChanged",
       "definedIn": [
-        "IgxForOfDirective"
+        "IgxForOfDirective",
+        "IgxGridForOfDirective"
       ]
     },
     {
       "member": "onContentSizeChange",
       "replaceWith": "contentSizeChange",
       "definedIn": [
-        "IgxForOfDirective"
+        "IgxForOfDirective",
+        "IgxGridForOfDirective"
       ]
     },
     {
       "member": "onDataChanged",
       "replaceWith": "dataChanged",
       "definedIn": [
-        "IgxForOfDirective"
+        "IgxForOfDirective",
+        "IgxGridForOfDirective"
       ]
     },
     {
       "member": "onBeforeViewDestroyed",
       "replaceWith": "beforeViewDestroyed",
       "definedIn": [
-        "IgxForOfDirective"
+        "IgxForOfDirective",
+        "IgxGridForOfDirective"
       ]
     },
     {
       "member": "onChunkPreload",
       "replaceWith": "chunkPreload",
       "definedIn": [
-        "IgxForOfDirective"
+        "IgxForOfDirective",
+        "IgxGridForOfDirective"
       ]
     },
     {
@@ -93,4 +99,4 @@
       ]
     }
   ]
-}
+}

Diff for: projects/igniteui-angular/migrations/update-12_0_0/changes/outputs.json

@@ -17,6 +17,14 @@
                 "type": "directive"
             }
         },
+        {
+            "name": "onChunkLoad",
+            "replaceWith": "chunkLoad",
+            "owner": {
+                "selector": "[igxGridFor][igxGridForOf]",
+                "type": "directive"
+            }
+        },
         {
             "name": "onScrollbarVisibilityChanged",
             "replaceWith": "scrollbarVisibilityChanged",
@@ -25,6 +33,14 @@
                 "type": "directive"
             }
         },
+        {
+            "name": "onScrollbarVisibilityChanged",
+            "replaceWith": "scrollbarVisibilityChanged",
+            "owner": {
+                "selector": "[igxGridFor][igxGridForOf]",
+                "type": "directive"
+            }
+        },
         {
             "name": "onContentSizeChange",
             "replaceWith": "contentSizeChange",
@@ -33,6 +49,14 @@
                 "type": "directive"
             }
         },
+        {
+            "name": "onContentSizeChange",
+            "replaceWith": "contentSizeChange",
+            "owner": {
+                "selector": "[igxGridFor][igxGridForOf]",
+                "type": "directive"
+            }
+        },
         {
             "name": "onDataChanged",
             "replaceWith": "dataChanged",
@@ -41,6 +65,14 @@
                 "type": "directive"
             }
         },
+        {
+            "name": "onDataChanged",
+            "replaceWith": "dataChanged",
+            "owner": {
+                "selector": "[igxGridFor][igxGridForOf]",
+                "type": "directive"
+            }
+        },
         {
             "name": "onBeforeViewDestroyed",
             "replaceWith": "beforeViewDestroyed",
@@ -49,6 +81,14 @@
                 "type": "directive"
             }
         },
+        {
+            "name": "onBeforeViewDestroyed",
+            "replaceWith": "beforeViewDestroyed",
+            "owner": {
+                "selector": "[igxGridFor][igxGridForOf]",
+                "type": "directive"
+            }
+        },
         {
             "name": "onChunkPreload",
             "replaceWith": "chunkPreload",
@@ -57,6 +97,14 @@
                 "type": "directive"
             }
         },
+        {
+            "name": "onChunkPreload",
+            "replaceWith": "chunkPreload",
+            "owner": {
+                "selector": "[igxGridFor][igxGridForOf]",
+                "type": "directive"
+            }
+        },
         {
             "name": "onDataChanging",
             "replaceWith": "dataChanging",

Diff for: projects/igniteui-angular/migrations/update-12_0_0/index.spec.ts

@@ -336,6 +336,52 @@ igx-bottom-nav-content {
 }
 igx-bottom-nav-header {
     padding: 8px;
+}`);
+    });
+
+    it('Should update row component types with RowType', async () => {
+        appTree.create(
+            '/testSrc/appPrefix/component/rows.component.ts', `
+import { IgxGridComponent, IgxGridRowComponent, IgxHierarchicalRowComponent, RowPinningPosition } from 'igniteui-angular';
+export class HGridMultiRowDragComponent {
+    public onDropAllowed(args: IDropDroppedEventArgs)
+        const hierRow: IgxHierarchicalRowComponent = args.dragData;
+        const row: IgxGridRowComponent = args.dragData;
+        const treeRow: IgxTreeGridRowComponent = args.dragData;
+        const groupByRow: IgxGridGroupByRowComponent = args.dragData;
+        const children = (cell.row as IgxTreeGridRowComponent).children;
+    }
+    public ngOnInit() {
+        const hierRow: this.hierGrid1.getRowByIndex(0) as IgxHierarchicalRowComponent;
+        const row: this.grid1.getRowByIndex(0) as IgxGridRowComponent;
+        const treeRow: this.treeGrid1.getRowByIndex(0) as IgxTreeGridRowComponent;
+        const hierRowComp: this.hierGrid1.hGridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+        const rowComp: this.grid1.gridAPI.get_row_by_index(0) as IgxGridRowComponent;
+        const treeRowComp: this.gridAPI.get_row_by_index(0) as IgxTreeGridRowComponent;
+    }
+}`);
+        const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
+            .toPromise();
+
+        expect(tree.readContent('/testSrc/appPrefix/component/rows.component.ts'))
+            .toEqual(`
+import { IgxGridComponent, RowType, RowPinningPosition } from 'igniteui-angular';
+export class HGridMultiRowDragComponent {
+    public onDropAllowed(args: IDropDroppedEventArgs)
+        const hierRow: RowType = args.dragData;
+        const row: RowType = args.dragData;
+        const treeRow: RowType = args.dragData;
+        const groupByRow: RowType = args.dragData;
+        const children = (cell.row as RowType).children;
+    }
+    public ngOnInit() {
+        const hierRow: this.hierGrid1.getRowByIndex(0) as RowType;
+        const row: this.grid1.getRowByIndex(0) as RowType;
+        const treeRow: this.treeGrid1.getRowByIndex(0) as RowType;
+        const hierRowComp: this.hierGrid1.hGridAPI.get_row_by_index(0) as RowType;
+        const rowComp: this.grid1.gridAPI.get_row_by_index(0) as RowType;
+        const treeRowComp: this.gridAPI.get_row_by_index(0) as RowType;
+    }
 }`);
     });
 });

Diff for: projects/igniteui-angular/migrations/update-12_0_0/index.ts

@@ -34,6 +34,7 @@ export default (): Rule => (host: Tree, context: SchematicContext) => {
     const changes = new Map<string, FileChange[]>();
     const htmlFiles = update.templateFiles;
     const sassFiles = update.sassFiles;
+    const tsFiles = update.tsFiles;
     let applyComment = false;
 
     const applyChanges = () => {
@@ -217,6 +218,111 @@ export default (): Rule => (host: Tree, context: SchematicContext) => {
         }
     }
 
-    // Apply all selector and input changes
+    // update row components imports and typings with new RowType interface
+    const rowsImports = [
+        'IgxGridRowComponent, ',
+        'IgxGridGroupByRowComponent, ',
+        'IgxTreeGridRowComponent, ',
+        'IgxHierarchicalRowComponent, '];
+
+    const rowsImportsNoSpace = [
+            'IgxGridRowComponent,',
+            'IgxGridGroupByRowComponent,',
+            'IgxTreeGridRowComponent,',
+            'IgxHierarchicalRowComponent,'];
+
+    const rowsImportsEnd = [
+        ', IgxGridRowComponent }',
+        ', IgxGridGroupByRowComponent }',
+        ', IgxTreeGridRowComponent }',
+        ', IgxHierarchicalRowComponent }'];
+
+    const rowsImportsEndNewLIne = [
+        'IgxGridRowComponent }',
+        'IgxGridGroupByRowComponent }',
+        'IgxTreeGridRowComponent }',
+        'IgxHierarchicalRowComponent }'];
+
+    const typyingsToReplace = [
+        'as IgxGridRowComponent;',
+        'as IgxGridRowComponent).',
+        ': IgxGridRowComponent',
+
+        'as IgxGridGroupByRowComponent;',
+        'as IgxGridGroupByRowComponent).',
+        ': IgxGridGroupByRowComponent',
+
+        'as IgxTreeGridRowComponent;',
+        'as IgxTreeGridRowComponent).',
+        ': IgxTreeGridRowComponent',
+
+        'as IgxHierarchicalRowComponent;',
+        'as IgxHierarchicalRowComponent).',
+        ': IgxHierarchicalRowComponent'
+    ];
+
+    const replacements = [
+        'as RowType;',
+        'as RowType).',
+        ': RowType'
+    ];
+
+
+    for (const entryPath of tsFiles) {
+        let content = host.read(entryPath).toString();
+        let importChanged = 0;
+
+        rowsImports.forEach((n, i) => {
+            if (content.indexOf(n) !== -1) {
+                if (importChanged === 0) {
+                    content = content.replace(n, 'RowType, ');
+                    importChanged++;
+                } else {
+                    content = content.split(n).join('');
+                }
+            }
+        });
+
+        rowsImportsNoSpace.forEach((n, i) => {
+            if (content.indexOf(n) !== -1) {
+                if (importChanged === 0) {
+                    content = content.replace(n, 'RowType,');
+                    importChanged++;
+                } else {
+                    content = content.split(n).join('');
+                }
+            }
+        });
+
+        rowsImportsEnd.forEach((n, i) => {
+            if (content.indexOf(n) !== -1) {
+                if (importChanged === 0) {
+                    content = content.replace(n, ', RowType }');
+                    importChanged++;
+                } else {
+                    content = content.split(n).join(' }');
+                }
+            }
+        });
+
+        rowsImportsEndNewLIne.forEach((n, i) => {
+            if (content.indexOf(n) !== -1) {
+                if (importChanged === 0) {
+                    content = content.replace(n, 'RowType }');
+                    importChanged++;
+                } else {
+                    content = content.split(n).join('}');
+                }
+            }
+        });
+
+        typyingsToReplace.forEach((n, i) => {
+            if (content.indexOf(n) !== -1) {
+                content = content.split(n).join(replacements[i % 3]);
+            }
+        });
+        host.overwrite(entryPath, content);
+    }
+
     update.applyChanges();
 };