chore(*): Remove calculation of offset when pinning to the right side

Author: mddragnev

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -719,6 +719,7 @@
         width: 100%;
         overflow: visible;
         flex: 1;
+        min-width: 0; // needed to override the min-width of the column headers
     }
 
     %grid-mrl-block {

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

@@ -1619,13 +1619,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         return this.pinningPosition === ColumnPinningPosition.End && pinnedCols[0] === this;
     }
 
-    /** @hidden @internal **/
-    public get rightPinnedOffset(): string {
-        return this.pinned && this.pinningPosition === ColumnPinningPosition.End ?
-            - this.grid.pinnedEndWidth - this.grid.pinnedStartWidth + 'px' :
-            null;
-    }
-
     /** @hidden @internal **/
     public get gridRowSpan(): number {
         return this.rowEnd && this.rowStart ? this.rowEnd - this.rowStart : 1;

projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html

@@ -65,7 +65,6 @@
         <div class="igx-grid__mrl-block"
             [class.igx-grid__td--pinned-last]="col.hasLastPinnedChildColumn"
             [class.igx-grid__td--pinned-first]="col.hasFirstPinnedChildColumn"
-            [style.left]="col.rightPinnedOffset"
             [ngStyle]="{
                 'grid-template-rows':col.getGridTemplate(true),
                 'grid-template-columns':col.getGridTemplate(false),
@@ -113,7 +112,6 @@
         [style.min-width]="col.resolvedWidth"
         [style.max-width]="col.resolvedWidth"
         [style.flex-basis]="col.resolvedWidth"
-        [style.left]="col.rightPinnedOffset"
         [width]="col.getCellWidth()"
         [visibleColumnIndex]="col.visibleIndex"
         [value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"

projects/igniteui-angular/src/lib/grids/grid/grid-row.component.ts

@@ -26,7 +26,6 @@ export class IgxGridRowComponent extends IgxRowDirective {
         };
     }
 
-
     public getContextMRL(pinnedCols, row) {
         return {
             $implicit: pinnedCols,

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

@@ -28,7 +28,7 @@ import { IgxGridComponent } from './grid.component';
 import { DropPosition } from '../moving/moving.service';
 import { clearGridSubs, setupGridScrollDetection } from '../../test-utils/helper-utils.spec';
 import { SortingDirection } from '../../data-operations/sorting-strategy';
-import { IPinningConfig } from '../public_api';
+import { IgxGridHeaderRowComponent, IPinningConfig } from '../public_api';
 
 describe('IgxGrid - Column Pinning #grid', () => {
 
@@ -134,7 +134,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 expect(GridFunctions.isCellPinned(cell)).toBe(true);
             });
 
-           it('should allow pinning/unpinning via the column API', () => {
+            it('should allow pinning/unpinning via the column API', () => {
                 const col = grid.getColumnByName('ID');
 
                 col.pinned = true;
@@ -694,9 +694,14 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 expect(grid.getColumnByName('CompanyName').isFirstPinned).toBeTruthy();
                 const row = grid.gridAPI.get_row_by_index(0).nativeElement;
                 // check cells are rendered after main display container and have left offset
+                const headerRowDisplayContainer = fix.debugElement.query(By.directive(IgxGridHeaderRowComponent)).nativeElement.querySelector(".igx-display-container");
+                const displayContainerRect = headerRowDisplayContainer.getBoundingClientRect();
+                let xAxis = displayContainerRect.x + displayContainerRect.width;
                 for (let i = 0; i <= pinnedCols.length - 1; i++) {
                     const elem = row.children[i + 1];
-                    expect(parseInt((elem as any).style.left, 10)).toBe(-330);
+                    const rect = elem.getBoundingClientRect();
+                    expect(rect.x).toBe(xAxis);
+                    xAxis += rect.width;
                 }
 
                 // check correct headers have left border
@@ -715,9 +720,13 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 const row = grid.gridAPI.get_row_by_index(0).nativeElement;
                 expect(GridFunctions.getRowDisplayContainer(fix, 0)).toBeTruthy();
 
+                const headerRowdisplayContainer = fix.debugElement.query(By.directive(IgxGridHeaderRowComponent)).nativeElement.querySelector(".igx-display-container");
+                const displayContainerRect = headerRowdisplayContainer.getBoundingClientRect();
+                const xAxis = displayContainerRect.x + displayContainerRect.width;
+
                 expect(row.children[1].classList.contains(`${CELL_PINNED_CLASS}-first`)).toBeTruthy();
                 expect(row.children[1].classList.contains(GRID_MRL_BLOCK)).toBeTruthy();
-                expect(parseInt((row.children[1] as any).style.left, 10)).toEqual(-408);
+                expect(row.children[1].getBoundingClientRect().x).toEqual(xAxis);
 
                 // check correct headers have left border
                 const firstPinnedHeader = grid.headerGroupsList.find(group => group.isPinned);
@@ -810,7 +819,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 .toEqual(grid.pinnedStartColumns.length + grid.unpinnedColumns.length + 1);
             expect(col.pinningPosition).toBe(ColumnPinningPosition.End);
 
-            let cell = grid.gridAPI.get_cell_by_index(0, 'ID');
+            const cell = grid.gridAPI.get_cell_by_index(0, 'ID');
             expect(cell.visibleColumnIndex)
                 .toEqual(grid.pinnedStartColumns.length + grid.unpinnedColumns.length + 1);
             expect(GridFunctions.isCellPinned(cell)).toBe(true);

projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html

@@ -99,8 +99,7 @@
                     [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
                     [column]="column"
                     [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
-                    [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
-                    [style.left]="column.rightPinnedOffset">
+                    [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
                 </igx-grid-header-group>
             }
         }

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html

@@ -119,7 +119,6 @@
                 [style.min-width]="col.resolvedWidth"
                 [style.max-width]="col.resolvedWidth"
                 [style.flex-basis]="col.resolvedWidth"
-                [style.left]="col.rightPinnedOffset"
                 [width]="col.getCellWidth()"
                 [visibleColumnIndex]="col.visibleIndex"
                 [value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html

@@ -305,7 +305,7 @@
                         [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
                         [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
                         [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
-                        [style.left]="column.rightPinnedOffset" (pointerdown)="grid.navigation.focusOutRowHeader($event)">
+                        (pointerdown)="grid.navigation.focusOutRowHeader($event)">
                     </igx-grid-header-group>
                 }
             }

projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html

@@ -55,8 +55,7 @@
             [style.min-height.px]="minHeight"
             [style.min-width]="col.resolvedWidth"
             [style.max-width]="col.resolvedWidth"
-            [style.flex-basis]="col.resolvedWidth"
-            [style.left]="col.rightPinnedOffset">
+            [style.flex-basis]="col.resolvedWidth">
         </igx-grid-summary-cell>
     }
 </ng-template>

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html

@@ -123,7 +123,6 @@
                 [style.min-width]="col.resolvedWidth"
                 [style.max-width]="col.resolvedWidth"
                 [style.flex-basis]="col.resolvedWidth"
-                [style.left]="col.rightPinnedOffset"
                 [width]="col.getCellWidth()"
                 [visibleColumnIndex]="col.visibleIndex"
                 [value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"
@@ -155,7 +154,6 @@
                 [style.min-width]="col.resolvedWidth"
                 [style.max-width]="col.resolvedWidth"
                 [style.flex-basis]="col.resolvedWidth"
-                [style.left]="col.rightPinnedOffset"
                 [width]="col.getCellWidth()"
                 [visibleColumnIndex]="col.visibleIndex"
                 [value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"