chore(*): Implement selection per spec.

Author: MKirova

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

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

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

@@ -1826,7 +1826,6 @@
         background: var-get($theme, 'row-selected-background');
 
         &%grid-row--mrl {
-            background: transparent;
             %grid-mrl-block {
                 color: var-get($theme, 'row-selected-text-color');
                 background: var-get($theme, 'row-selected-background');
@@ -1891,6 +1890,11 @@
         grid-row: 1 / -1;
     }
 
+    %igx-grid__td--merged-selected {
+        color: var-get($theme, 'row-selected-text-color');
+        background: var-get($theme, 'row-selected-background');
+    }
+
     %igx-grid__tr--deleted {
         %grid-cell-text {
             font-style: italic;

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

@@ -133,6 +133,7 @@
 <ng-template #cellTemplate let-col>
     <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 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

@@ -620,6 +620,18 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
         return `${sizeSpans}`;
     }
 
+    protected isSelectionRoot(col: ColumnType) {
+        const mergeMeta = this.metaData?.cellMergeMeta;
+        const rowCount = mergeMeta?.get(col.field)?.rowSpan;
+        if (mergeMeta && rowCount > 1) {
+            const indexInData = this.pinned && this.grid.isRowPinningToTop ? this.index - this.grid.pinnedRecordsCount : this.index;
+            const range = this.grid.verticalScrollContainer.igxForOf.slice(indexInData, indexInData + rowCount);
+            const inRange = range.filter(x => this.selectionService.isRowSelected(this.grid.primaryKey ? (x.recordRef || x)[this.grid.primaryKey] : (x.recordRef || x).recordRef)).length > 0;
+            return inRange;
+        }
+        return false;
+    }
+
     protected getRowHeight() {
         const indexInData  = this.grid.verticalScrollContainer.igxForOf.indexOf(this.metaData);
         const size = this.grid.verticalScrollContainer.getSizeAt(indexInData) - 1;