Merge branch '7.3.x' into PMiteva/fix-drag-indicator-tmp

Author: Lipata

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

@@ -128,6 +128,10 @@
         @extend %grid-row--mrl !optional;
     }
 
+    @include e(tr, $mods: (mrl, edit)) {
+        @extend %grid-row--edit-mrl !optional;
+    }
+
     @include e(summaries) {
         @extend %grid-summaries !optional;
 

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

@@ -708,7 +708,9 @@
     }
 
     %grid-row--mrl {
-        border-bottom: none !important;
+        &%grid-row {
+            border-bottom-color: transparent;
+        }
 
         %grid__cbx-selection,
         %igx-grid__row-indentation,
@@ -907,6 +909,10 @@
             background: --var($theme, 'edit-mode-color');
         }
 
+        &%grid-row {
+            border-bottom: 1px solid --var($theme, 'edit-mode-color');
+        }
+
         %igx-grid__td--editing {
             border: none;
 
@@ -920,6 +926,13 @@
         }
     }
 
+    %grid-row--edit-mrl {
+        &:first-of-type::after {
+            top: 0;
+            z-index: 5;
+        }
+    }
+
     %igx-grid__tr--edited {
         &::before {
             content: '';

projects/igniteui-angular/src/lib/dialog/dialog.component.ts

@@ -259,8 +259,8 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     public onRightButtonSelect = new EventEmitter<IDialogEventArgs>();
 
     private _animaitonSettings: PositionSettings = {
-        openAnimation: useAnimation(slideInBottom, {params: {fromPosition: 'translateY(100%)'}}),
-        closeAnimation: useAnimation(slideOutTop, {params: {toPosition: 'translateY(-100%)'}})
+        openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
+        closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)' } })
     };
 
     private _overlayDefaultSettings: OverlaySettings;
@@ -391,6 +391,9 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     public open(overlaySettings: OverlaySettings = this._overlayDefaultSettings) {
         this.toggleRef.open(overlaySettings);
         this.onOpen.emit({ dialog: this, event: null });
+        if (!this.leftButtonLabel && !this.rightButtonLabel) {
+            this.toggleRef.element.focus();
+        }
     }
 
     /**

projects/igniteui-angular/src/lib/drop-down/drop-down-item.component.ts

@@ -83,4 +83,12 @@ export class IgxDropDownItemComponent extends IgxDropDownItemBase implements DoC
             this.dropDown.selectItem(this, event);
         }
     }
+
+    /**
+     * @hidden @internal
+     */
+    @HostListener('mousedown', ['$event'])
+    mousedownHandler(event) {
+        event.preventDefault();
+    }
 }

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

@@ -591,11 +591,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     /**
     * Sets whether rows can be edited.
     * ```html
-    * <igx-grid #grid [showToolbar]="true" [rowEditable]="true" [columnHiding]="true"></igx-grid>
+    * <igx-grid #grid [showToolbar]="true" [rowEditable]="true" [primaryKey]="'ProductID'" [columnHiding]="true"></igx-grid>
     * ```
     * @memberof IgxGridBaseComponent
     */
     set rowEditable(val: boolean) {
+        if (val && (this.primaryKey === undefined || this.primaryKey === null)) {
+            console.warn('The grid must have a `primaryKey` specified when using `rowEditable`!');
+        }
         this._rowEditable = val;
         if (this.gridAPI.grid) {
             this.refreshGridState();

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

@@ -1342,6 +1342,36 @@ describe('IgxGrid Component Tests', () => {
         }));
 
         describe('Row Editing - General tests', () => {
+            it('Should throw a warning when [rowEditable] is set on a grid w/o [primaryKey]', fakeAsync(() => {
+                const fix = TestBed.createComponent(IgxGridRowEditingComponent);
+                fix.detectChanges();
+                const grid = fix.componentInstance.grid;
+                grid.primaryKey = null;
+                grid.rowEditable = false;
+                tick();
+                fix.detectChanges();
+
+                spyOn(console, 'warn');
+                grid.rowEditable = true;
+                tick();
+                fix.detectChanges();
+                expect(console.warn).toHaveBeenCalledWith('The grid must have a `primaryKey` specified when using `rowEditable`!');
+                expect(console.warn).toHaveBeenCalledTimes(1);
+                // Throws warinig but still sets the property correctly
+                expect(grid.rowEditable).toBeTruthy();
+
+                tick();
+                fix.detectChanges();
+                grid.primaryKey = 'ProductID';
+                grid.rowEditable = false;
+                tick();
+                fix.detectChanges();
+                grid.rowEditable = true;
+                tick();
+                fix.detectChanges();
+                expect(console.warn).toHaveBeenCalledTimes(1);
+                expect(grid.rowEditable).toBeTruthy();
+            }));
             it('Should be able to enter edit mode on dblclick, enter and f2', fakeAsync(() => {
                 const fix = TestBed.createComponent(IgxGridRowEditingComponent);
                 fix.detectChanges();

projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts

@@ -1091,7 +1091,7 @@ describe('IgxGrid - multi-row-layout', () => {
         expect(lastRow.element.nativeElement.getBoundingClientRect().bottom).toBe(grid.tbody.nativeElement.getBoundingClientRect().bottom);
 
         // check size is correct
-        expect(grid.verticalScrollContainer.getSizeAt(lastIndex)).toBe(150);
+        expect(grid.verticalScrollContainer.getSizeAt(lastIndex)).toBe(151);
 
         // check DOM
         const lastRowCells = lastRow.cells.toArray();

projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts

@@ -863,6 +863,7 @@ describe('IgxGrid - Row Drag Tests', () => {
         <igx-grid #grid
             [width]='width'
             [height]='height'
+            primaryKey="ID"
             [data]="data"
             [autoGenerate]="true" (onColumnInit)="columnsCreated($event)" (onGroupingDone)="onGroupingDoneHandler($event)"
             [rowEditable]="true" [rowDraggable]="enableRowDraggable"
@@ -916,7 +917,7 @@ export class IgxGridRowDraggableComponent extends DataParent {
             [width]="'800px'"
             [height]="'300px'"
             [data]="data"
-            [primaryKey]="'ID'"
+            primaryKey="ID"
             [autoGenerate]="true" (onGroupingDone)="onGroupingDoneHandler($event)"
             [rowEditable]="true" [rowDraggable]="true"
             >

src/app/grid-multi-row-layout/grid-mrl.sample.html

@@ -1,7 +1,7 @@
 <div  class="sample-wrapper">
     <app-page-header title="Grid MRL"></app-page-header>
     <section style="height: 800px" class="sample-content">
-        <igx-grid [rowSelectable]="true" #grid [data]="data" displayDensity="compact" [width]="'100%'" [showToolbar]='true' [columnHiding]='true'>
+        <igx-grid [rowEditable]="true" [primaryKey]="'PostalCode'" [rowSelectable]="true" #grid [data]="data" displayDensity="compact" [width]="'100%'" [showToolbar]='true' [columnHiding]='true'>
             <igx-column-layout [movable]="false" [pinned]="true" field='group1'>
                 <igx-column [rowStart]="1" [colStart]="1" [colEnd]="5" field="ContactName"></igx-column>
                 <igx-column [rowStart]="1" [colStart]="5" field="ContactTitle"></igx-column>
@@ -13,8 +13,8 @@
                 <igx-column [rowStart]="3" [colStart]="2"  field="PostalCode"></igx-column>
                 <igx-column [rowStart]="3" [colStart]="3" [colEnd]="7" field="Fax"></igx-column>
             </igx-column-layout>
-            <igx-column-layout [movable]="false" [pinned]="false" field='group2'>
-                <igx-column [rowStart]="1" [colStart]="1" [movable]="false" [pinned]="false" sortable="true" field="ContactName" [width]='"500px"'></igx-column>
+            <igx-column-layout [movable]="false" [pinned]="true" field='group2'>
+                <igx-column [rowStart]="1" [colStart]="1" [movable]="false" sortable="true" field="ContactName" [width]='"500px"'></igx-column>
                 <igx-column [rowStart]="1" [colStart]="2" [movable]="false" sortable="true" field="ContactTitle" [width]='"200px"'></igx-column>
                 <igx-column [rowStart]="1" [colStart]="3" [movable]="false" sortable="true" field="Country" [width]='"150px"'></igx-column>
                 <igx-column [rowStart]="1" [colStart]="4" [movable]="false" sortable="true" field="Phone" [width]='"150px"'></igx-column>