Merge branch '20.1.x' into mkirkova/fix-16238-20.1.x

Author: MonikaKirkova

projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss

@@ -350,6 +350,7 @@
 
     %igx-stepper__step-content-wrapper {
         margin-inline-start: $v-line-indent;
+        padding-inline-start: $v-line-indent;
         position: relative;
         min-height: if($variant == 'indigo', rem(24px), rem(32px));
 
@@ -364,12 +365,6 @@
         }
     }
 
-    [aria-selected='true'] {
-        %igx-stepper__step-content-wrapper {
-            padding-inline-start: $v-line-indent;
-        }
-    }
-
     @if $variant == 'indigo' {
         [aria-selected='true'] {
             %igx-stepper__step-content-wrapper {

projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts

@@ -355,7 +355,8 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
 
     private hasNextVerticalPosition(prev = false) {
         if ((prev && this.activeNode.row === 0 && (!this.isDataRow(this.activeNode.row) || this.activeNode.layout.rowStart === 1)) ||
-            (!prev && this.activeNode.row >= this.grid.dataView.length - 1 && this.activeNode.column === this.lastColIndexPerMRLBlock())) {
+            (!prev && this.activeNode.row >= this.grid.dataView.length - 1 &&
+                this.activeNode.layout.rowStart === this.lastRowStartPerBlock())) {
             return false;
         }
         return true;

projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts

@@ -12,6 +12,7 @@ import { GridFunctions, GRID_MRL_BLOCK } from '../../test-utils/grid-functions.s
 import { CellType } from '../common/grid.interface';
 import { IgxColumnLayoutComponent } from '../columns/column-layout.component';
 import { IGridCellEventArgs, IgxColumnComponent } from '../public_api';
+import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service';
 
 const DEBOUNCE_TIME = 30;
 const CELL_CSS_CLASS = '.igx-grid__td';
@@ -297,6 +298,40 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
                 GridFunctions.verifyGridContentActiveDescendant(GridFunctions.getGridContent(fix), cell.nativeElement.id);
             });
 
+            it('should not return an out of bounds row index when navigating down from the last layout row', () => {
+                fix.componentInstance.data = SampleTestData.contactInfoDataFull().slice(0, 10);
+                fix.componentInstance.colGroups = [{
+                    group: 'group1',
+                    columns: [
+                        { field: 'ID', rowStart: 1, colStart: 1 },
+                        { field: 'CompanyName', rowStart: 1, colStart: 2 },
+                        { field: 'ContactName', rowStart: 1, colStart: 3 },
+                        { field: 'ContactTitle', rowStart: 1, colStart: 4 },
+                        { field: 'Address', rowStart: 1, colStart: 5 },
+                        { field: 'City', rowStart: 2, colStart: 1 },
+                        { field: 'Region', rowStart: 2, colStart: 2 },
+                        { field: 'PostalCode', rowStart: 2, colStart: 3 },
+                        { field: 'Phone', rowStart: 2, colStart: 4 },
+                        { field: 'Fax', rowStart: 2, colStart: 5 }
+                    ]
+                }];
+                fix.detectChanges();
+
+                const grid = fix.componentInstance.grid;
+                const lastRowIndex = grid.dataView.length - 1;
+                const navService = grid.navigation as IgxGridMRLNavigationService;
+                const col = grid.getColumnByName('City');
+                navService.setActiveNode({
+                    row: lastRowIndex,
+                    column: col.visibleIndex,
+                    layout: navService.layout(col.visibleIndex)
+                });
+
+                const nextPos = navService.getNextVerticalPosition();
+                expect(nextPos.row).toBe(lastRowIndex);
+                expect(nextPos.column).toBe(navService.activeNode.column);
+            });
+
             it('should navigate up correctly', () => {
                 fix.componentInstance.colGroups = [{
                     group: 'group1',

projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts

@@ -738,6 +738,32 @@ describe('Rendering Tests', () => {
             expect(Math.abs(width - height)).toBeLessThan(1.5);
             expect(Math.abs(width - parseFloat(minWidth))).toBeLessThan(1.5);
         }));
+
+        it('should not shift step content horizontally when navigating between steps in vertical mode', fakeAsync(() => {
+            const indicatorFix = TestBed.createComponent(IgxStepperIndicatorNoShrinkComponent);
+            indicatorFix.detectChanges();
+            const indicatorStepper = indicatorFix.componentInstance.stepper;
+
+            const getContentWrapperStyles = (stepIndex: number) => {
+                const contentWrapper = indicatorStepper.steps[stepIndex].nativeElement.querySelector('.igx-stepper__step-content-wrapper') as HTMLElement;
+                const styles = window.getComputedStyle(contentWrapper);
+                return {
+                    paddingInlineStart: styles.paddingInlineStart || styles.paddingLeft,
+                    marginInlineStart: styles.marginInlineStart || styles.marginLeft
+                };
+            };
+
+            const step0ActiveStyles = getContentWrapperStyles(0);
+
+            indicatorStepper.navigateTo(1);
+            indicatorFix.detectChanges();
+            tick(500);
+
+            const step0InactiveStyles = getContentWrapperStyles(0);
+
+            expect(step0InactiveStyles.paddingInlineStart).toBe(step0ActiveStyles.paddingInlineStart);
+            expect(step0InactiveStyles.marginInlineStart).toBe(step0ActiveStyles.marginInlineStart);
+        }));
     });
 
     describe('Keyboard navigation', () => {