fix(grid: column-pinning): working pinColumn with indexes for the last position (#13397)

* fix(grid: column-pinning): working pinColumn with indexes for the last position

* fix(grid-column-pinning): add the DropPosition and parse the string to number

* fix(grid-column-pinning): using parseInt instead of Number

* fix(grid-column-pinning): index of type number pinColumn and unpinColumn methods

Author: georgianastasov

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

@@ -2114,7 +2114,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         }
 
         if (hasIndex) {
-            grid._moveColumns(this, targetColumn);
+            index === grid._pinnedColumns.length - 1 ? 
+            grid._moveColumns(this, targetColumn, DropPosition.AfterDropTarget) : grid._moveColumns(this, targetColumn, DropPosition.BeforeDropTarget);
         }
 
         if (this.columnGroup) {

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

@@ -5092,7 +5092,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @param columnName
      * @param index
      */
-    public pinColumn(columnName: string | IgxColumnComponent, index?): boolean {
+    public pinColumn(columnName: string | IgxColumnComponent, index?: number): boolean {
         const col = columnName instanceof IgxColumnComponent ? columnName : this.getColumnByName(columnName);
         return col.pin(index);
     }
@@ -5107,7 +5107,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @param columnName
      * @param index
      */
-    public unpinColumn(columnName: string | IgxColumnComponent, index?): boolean {
+    public unpinColumn(columnName: string | IgxColumnComponent, index?: number): boolean {
         const col = columnName instanceof IgxColumnComponent ? columnName : this.getColumnByName(columnName);
         return col.unpin(index);
     }

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

@@ -188,6 +188,17 @@ describe('IgxGrid - Column Pinning #grid', () => {
 
             });
 
+            it('should pin the column on the last position if the index for the last position is provided', () => {
+                grid.pinColumn('CompanyName');
+                fix.detectChanges();
+
+                grid.pinColumn('City', 2);
+                fix.detectChanges();
+
+                expect(grid.pinnedColumns.length).toEqual(3);
+                expect(grid.pinnedColumns[2].field).toEqual('City');
+            });
+
             it('should correctly initialize pinned columns z-index values.', () => {
 
                 const headers = GridFunctions.getColumnHeaders(fix);