feat(grid): add class for previewed selection

Author: CatalinB7

projects/angular/components/ui-grid/src/_ui-grid-variables.scss

@@ -1,6 +1,7 @@
 $ui-grid-cell-background-color: var(--color-background, #ffffff);
 $ui-grid-border-color: var(--color-border-de-emp, #cfd8dd);
-$ui-grid-cell-bottom-border: 0.5px solid $ui-grid-border-color;
+$ui-grid-cell-bottom-border: 1px solid $ui-grid-border-color;
 $ui-grid-row-hover-color: var(--color-hover, #e9f1fa);
 $header-background-color:  var(--color-background-secondary, #f4f5f7);
 $grid-actions-box-shadow: var(--color-background, #ffffff);
+$preview-selection-color: var(--color-primary, #0067df);

projects/angular/components/ui-grid/src/body/ui-grid-column.directive.ts

@@ -169,7 +169,7 @@ export class UiGridColumnDirective<T> implements OnChanges, OnDestroy {
     }
 
     /**
-     * If the column should be styled as primary.
+     * If the column should be styled as primary. Has the side-effect of setting column to sticky.
      *
      */
     @Input()

projects/angular/components/ui-grid/src/ui-grid.component.html

@@ -378,7 +378,8 @@
                                     index: index,
                                     expanded: expandedEntries,
                                     last: last,
-                                    columnWidths: columnWidths
+                                    columnWidths: columnWidths,
+                                    previewSelectedEntityId: (previewSelected$ | async)
                                 }">
                                 </ng-container>
                             </ng-container>
@@ -401,12 +402,14 @@
              let-expanded="expanded"
              let-last="last"
              let-index="index"
-             let-columnWidths="columnWidths">
+             let-columnWidths="columnWidths"
+             let-previewSelectedEntityId="previewSelectedEntityId">
     <div cdkMonitorSubtreeFocus
          class="ui-grid-row"
          *ngIf="!isRowExpanded(row?.id) || expandMode === 'preserve'"
          [class.ui-grid-row-state-expanded]="isRowExpanded(row?.id)"
          [class.ui-grid-border-none]="!footer && last"
+         [class.selected-preview]="previewSelectedEntityId === row?.id"
          [ngClass]="rowConfig?.ngClassFn(row) ?? ''"
          [tabIndex]="0"
          [attr.data-row-index]="index"

projects/angular/components/ui-grid/src/ui-grid.component.scss

@@ -463,6 +463,12 @@ ui-grid {
                         }
                     }
                 }
+
+                &.selected-preview {
+                    > div:first-of-type {
+                        box-shadow: inset 4px 0px 0px $preview-selection-color;
+                    }
+                }
             }
 
             .ui-grid-header-row,
@@ -602,7 +608,6 @@ ui-grid {
                         padding-right: $ui-grid-default-spacing;
                         right: 0;
                         bottom: 0;
-                        box-shadow: -16px 0px 16px -4px $ui-grid-row-hover-color;
                     }
                 }
             }

projects/angular/components/ui-grid/src/ui-grid.component.ts

@@ -209,6 +209,9 @@ export class UiGridComponent<T extends IGridDataEntry>
             this._initResizeManager();
         }
     }
+    get resizeStrategy() {
+        return this._resizeStrategy;
+    }
 
     /**
      * Marks the grid loading state.
@@ -413,6 +416,15 @@ export class UiGridComponent<T extends IGridDataEntry>
     @Input()
     useCardView = false;
 
+    /**
+     * Id of the entity that should be previewed
+     *
+     */
+    @Input()
+    set previewSelectionId(value: string) {
+        this.previewSelected$.next(value);
+    }
+
     /**
      * Emits an event with the sort model when a column sort changes.
      *
@@ -696,6 +708,12 @@ export class UiGridComponent<T extends IGridDataEntry>
         })),
     );
 
+    /**
+     * Emits the id of the entity that should be previewed.
+     *
+     */
+    previewSelected$ = new BehaviorSubject<string | number>('');
+
     /**
      * @internal
      * @ignore
@@ -1127,13 +1145,19 @@ export class UiGridComponent<T extends IGridDataEntry>
     }
 
     onRowClick(event: Event, row: T) {
-        if (this.shouldSelectOnRowClick && (event.target instanceof Element) &&
+        if ((event.target instanceof Element) &&
             !EXCLUDED_ROW_SELECTION_ELEMENTS.find(el => (event.target as Element).closest(el))) {
-            if (this.singleSelectable) {
-                this.rowSelected(row);
-            } else {
-                this.selectionManager.toggle(row);
-            }
+                if (this.resizeStrategy === ResizeStrategy.ScrollableGrid) {
+                    this.previewSelected$.next(row.id);
+                }
+
+                if (this.shouldSelectOnRowClick) {
+                    if (this.singleSelectable) {
+                        this.rowSelected(row);
+                    } else {
+                        this.selectionManager.toggle(row);
+                    }
+                }
         }
         this.rowClick.emit({
             event,