fix(grid): move progress bar to parent container

Author: CatalinB7

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

@@ -102,8 +102,12 @@
             <div [class.ui-grid-table-refreshable]="refreshable"
                  [style.minWidth.px]="isScrollable && dataManager.length ? (minWidth$ | async) : undefined"
                  [style.overflow]="isScrollable ? (tableOverflowStyle$ | async) : 'visible'"
-                class="ui-grid-table"
-                role="grid">
+                 class="ui-grid-table"
+                 role="grid">
+                <mat-progress-bar *ngIf="loading && !loadingState"
+                                  mode="query"
+                                  class="ui-grid-loader">
+                </mat-progress-bar>
                 <div class="ui-grid-header">
                     <div *ngIf="showHeaderRow"
                         class="ui-grid-header-row"
@@ -151,8 +155,8 @@
                                          (focusout)="hideColumnHeaderTooltip(columnTooltip)"
                                          (keyup.enter)="sortManager.changeSort(column)"
                                          (keyup.space)="sortManager.changeSort(column)"
-                                         (keydown.ArrowLeft)="(!last || columns.freeColumns.length) && resizeManager.startKeyboardResize('left', column, columnIndex); $event.preventDefault()"
-                                         (keydown.ArrowRight)="(!last || columns.freeColumns.length) && resizeManager.startKeyboardResize('right', column, columnIndex); $event.preventDefault()"
+                                         (keydown.ArrowLeft)="columns.freeColumns.length && resizeManager.startKeyboardResize('left', column, columnIndex); $event.preventDefault()"
+                                         (keydown.ArrowRight)="columns.freeColumns.length && resizeManager.startKeyboardResize('right', column, columnIndex); $event.preventDefault()"
                                          cdkMonitorElementFocus
                                          class="ui-grid-header-cell ui-grid-sticky-element"
                                          role="columnheader"
@@ -218,8 +222,8 @@
                                      (focusout)="hideColumnHeaderTooltip(columnTooltip)"
                                      (keyup.enter)="sortManager.changeSort(column)"
                                      (keyup.space)="sortManager.changeSort(column)"
-                                     (keydown.ArrowLeft)="!last && resizeManager.startKeyboardResize('left', column, columnIndex); $event.preventDefault()"
-                                     (keydown.ArrowRight)="!last && resizeManager.startKeyboardResize('right', column, columnIndex); $event.preventDefault()"
+                                     (keydown.ArrowLeft)="resizeManager.startKeyboardResize('left', column, columnIndex); $event.preventDefault()"
+                                     (keydown.ArrowRight)="resizeManager.startKeyboardResize('right', column, columnIndex); $event.preventDefault()"
                                      cdkMonitorElementFocus
                                      class="ui-grid-header-cell"
                                      role="columnheader"
@@ -289,10 +293,6 @@
                             class="ui-grid-header-cell ui-grid-action-cell ui-grid-feature-cell">
                         </div>
                     </div>
-                    <mat-progress-bar *ngIf="loading && !loadingState"
-                                    mode="query"
-                                    class="ui-grid-loader">
-                    </mat-progress-bar>
                 </div>
 
                 <ng-container *ngIf="dataManager?.length; else noData">

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

@@ -299,6 +299,7 @@ ui-grid {
 
         &-table-container {
             position: relative;
+            z-index: 2;
 
             &.scrollable {
                 overflow-x: auto;
@@ -440,15 +441,13 @@ ui-grid {
                 }
             }
 
+            mat-progress-bar {
+                z-index: 2;
+            }
+
             .ui-grid-header {
                 background-color: $header-background-color;
 
-                mat-progress-bar {
-                    position: absolute;
-                    right: 0;
-                    z-index: 1;
-                }
-
                 .ui-grid-resize-handle-container {
                     background-color: transparent;
                 }
@@ -481,7 +480,7 @@ ui-grid {
                 &:focus,
                 &.cdk-focused {
                     .ui-grid-action-cell {
-                        > div {
+                        > div:has(button) {
                             box-shadow: -16px 0px 16px -4px $ui-grid-row-hover-color;
                         }
                     }

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

@@ -774,7 +774,6 @@ export class UiGridComponent<T extends IGridDataEntry>
     }
 
     deficit$ = new BehaviorSubject(0);
-    isOverflown$ = new BehaviorSubject(false);
 
     minWidth$ = defer(() => merge(
         this.visible$,
@@ -785,11 +784,16 @@ export class UiGridComponent<T extends IGridDataEntry>
         tap(minWidth => {
             const containerWidth = this._ref.nativeElement.getBoundingClientRect().width;
             this.deficit$.next(Math.max(0, containerWidth - minWidth));
-
-            this.isOverflown$.next(this._isOverflown(minWidth));
         }),
         tap(() => { this._cd.detectChanges(); }),
-    ));
+    )).pipe(
+        shareReplay(1),
+    );
+
+    isOverflown$ = this.minWidth$.pipe(
+        map(minWidth => this._isOverflown(minWidth)),
+        distinctUntilChanged(),
+    );
 
     tableOverflowStyle$ = this.isOverflown$.pipe(
         map(value => value ? 'visible' : 'hidden'),