chore(*): Add hover styles.

Author: MKirova

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

@@ -305,6 +305,10 @@
             @extend %igx-grid__td--merged-selected !optional;
         }
 
+        @include e(td, $m: merged-hovered) {
+            @extend %igx-grid__td--merged-hovered !optional;
+        }
+
         @include e(td, $m: editing) {
             @extend %igx-grid__td--editing !optional;
         }

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

@@ -1827,11 +1827,17 @@
 
         &%grid-row--mrl {
             %grid-mrl-block {
-                color: var-get($theme, 'row-selected-text-color');
-                background: var-get($theme, 'row-selected-background');
                 %igx-grid__td--merged {
                     color: var-get($theme, 'row-selected-text-color');
                     background: var-get($theme, 'row-selected-background');
+                    &:hover {
+                        background: var-get($theme, 'row-selected-hover-background');
+                        color: var-get($theme, 'row-selected-hover-text-color');
+                    }
+                    &%igx-grid__td--merged-hovered {
+                        background: var-get($theme, 'row-selected-hover-background');
+                        color: var-get($theme, 'row-selected-hover-text-color');
+                    }
                 }
             }
         }
@@ -1893,6 +1899,21 @@
     %igx-grid__td--merged-selected {
         color: var-get($theme, 'row-selected-text-color');
         background: var-get($theme, 'row-selected-background');
+
+        &%igx-grid__td--merged-hovered {
+            background: var-get($theme, 'row-selected-hover-background');
+            color: var-get($theme, 'row-selected-hover-text-color');
+        }
+    }
+
+    %igx-grid__td--merged-hovered {
+        background: var-get($theme, 'row-hover-background');
+        color: var-get($theme, 'row-hover-text-color');
+
+        &%igx-grid__td--merged-selected {
+            background: var-get($theme, 'row-selected-hover-background');
+            color: var-get($theme, 'row-selected-hover-text-color');
+        }
     }
 
     %igx-grid__tr--deleted {

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -728,6 +728,8 @@ export interface GridType extends IGridDataBindable {
     isColumnWidthSum: boolean;
     /** @hidden @internal */
     minColumnWidth: number;
+    /** @hidden @internal */
+    hoverIndex?: number;
     /** Strategy, used for cloning the provided data. The type has one method, that takes any type of data */
     dataCloneStrategy: IDataCloneStrategy;
 

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

@@ -3099,6 +3099,11 @@ export abstract class IgxGridBaseDirective implements GridType,
      */
     public groupablePipeTrigger = 0;
 
+    /**
+     * @hidden @internal
+     */
+        public hoverIndex: number;
+
     /**
     * @hidden @internal
     */

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

@@ -134,6 +134,7 @@
     <igx-grid-cell
         [class.igx-grid__td--merged]="metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1"
         [class.igx-grid__td--merged-selected]="isSelectionRoot(col)"
+        [class.igx-grid__td--merged-hovered]="isHoveredRoot(col)"
         class="igx-grid__td igx-grid__td--fw"
         [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
         [class.igx-grid__td--pinned]="col.pinned"

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

@@ -632,6 +632,25 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
         return false;
     }
 
+    @HostListener('mouseenter') onMouseEnter() {
+        this.grid.hoverIndex = this.index;
+      }
+
+      @HostListener('mouseleave') onMouseLeave() {
+        this.grid.hoverIndex = null;
+      }
+
+    protected isHoveredRoot(col: ColumnType) {
+        const mergeMeta = this.metaData?.cellMergeMeta;
+        const rowCount = mergeMeta?.get(col.field)?.rowSpan;
+        if (mergeMeta && rowCount > 1 && this.grid.hoverIndex !== null && this.grid.hoverIndex !== undefined) {
+            const indexInData = this.index;
+            const hoveredIndex = this.grid.hoverIndex;
+            return indexInData <= hoveredIndex && indexInData + rowCount > hoveredIndex;
+        }
+        return false;
+    }
+
     protected getRowHeight() {
         const indexInData  = this.grid.verticalScrollContainer.igxForOf.indexOf(this.metaData);
         const size = this.grid.verticalScrollContainer.getSizeAt(indexInData) - 1;