fix(material-experimental/column-resize): Update for MDC and spec cha…

src/material-experimental/column-resize/_column-resize-theme.scss

@@ -9,8 +9,8 @@
   $foreground: map.get($config, foreground);
 
   $non-resizable-hover-divider: theming.get-color-from-palette($foreground, divider);
-  $resizable-hover-divider: theming.get-color-from-palette($primary, 200);
-  $resizable-active-divider: theming.get-color-from-palette($primary, 500);
+  $resizable-hover-divider: theming.get-color-from-palette($primary, 600);
+  $resizable-active-divider: theming.get-color-from-palette($primary, 600);
 
   // TODO: these styles don't really belong in the `color` part of the theme.
   // We should figure out a better place for them.
@@ -21,13 +21,16 @@
 
   .mat-column-resize-flex {
     .mat-header-cell,
-    .mat-cell {
+    .mat-mdc-header-cell,
+    .mat-cell,
+    .mat-mdc-cell {
       box-sizing: border-box;
       min-width: 32px;
     }
   }
 
-  .mat-header-cell {
+  .mat-header-cell,
+  .mat-mdc-header-cell {
     position: relative;
   }
 
@@ -36,6 +39,7 @@
   }
 
   .mat-header-cell:not(.mat-resizable)::after,
+  .mat-mdc-header-cell:not(.mat-resizable)::after,
   .mat-resizable-handle {
     background: transparent;
     bottom: 0;
@@ -46,23 +50,26 @@
     width: 1px;
   }
 
-  .mat-header-cell:not(.mat-resizable)::after {
+  .mat-header-cell:not(.mat-resizable)::after,
+  .mat-mdc-header-cell:not(.mat-resizable)::after {
     content: '';
   }
 
   .mat-header-cell:not(.mat-resizable)::after,
+  .mat-mdc-header-cell:not(.mat-resizable)::after,
   .mat-resizable-handle {
     right: 0;
   }
 
-  [dir='rtl'] .mat-header-cell:not(.mat-resizable)::after,
-  [dir='rtl'] .mat-resizable-handle {
-    left: 0;
-    right: auto;
-  }
+  .mat-header-row.cdk-column-resize-hover-or-active,
+  .mat-mdc-header-row.cdk-column-resize-hover-or-active {
+    .mat-header-cell,
+    .mat-mdc-header-cell {
+      border-right: none;
+    }
 
-  .mat-header-row.cdk-column-resize-hover-or-active {
-    .mat-header-cell:not(.mat-resizable)::after {
+    .mat-header-cell:not(.mat-resizable)::after,
+    .mat-mdc-header-cell:not(.mat-resizable)::after {
       background: $non-resizable-hover-divider;
     }
 
@@ -71,13 +78,31 @@
     }
   }
 
+  [dir='rtl'] {
+    .mat-header-cell:not(.mat-resizable)::after,
+    .mat-mdc-header-cell:not(.mat-resizable)::after,
+    .mat-resizable-handle {
+      left: 0;
+      right: auto;
+    }
+
+    .mat-header-row.cdk-column-resize-hover-or-active,
+    .mat-mdc-header-row.cdk-column-resize-hover-or-active {
+      .mat-header-cell,
+      .mat-mdc-header-cell {
+        border-left: none;
+      }
+    }
+  }
+
   .mat-resizable.cdk-resizable-overlay-thumb-active > .mat-resizable-handle {
     opacity: 0;
     transition: none;
   }
 
   .mat-resizable-handle:focus,
-  .mat-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus {
+  .mat-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus,
+  .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus {
     background: $resizable-active-divider;
     outline: none;
   }
@@ -94,11 +119,22 @@
     &:active {
       background: linear-gradient(90deg,
           transparent, transparent 7px,
-          $resizable-active-divider, $resizable-active-divider 1px,
-          transparent 8px, transparent);
+          $resizable-active-divider 7px, $resizable-active-divider 9px,
+          transparent 9px, transparent);
       will-change: transform;
+
+      .mat-column-resize-overlay-thumb-top {
+        background: linear-gradient(90deg,
+            transparent, transparent 4px,
+            $resizable-active-divider 4px, $resizable-active-divider 12px,
+            transparent 12px, transparent);
+      }
     }
   }
+
+  .mat-column-resize-overlay-thumb-top {
+    width: 100%;
+  }
 }
 
 @mixin typography($config-or-theme) {}

src/material-experimental/column-resize/column-resize.spec.ts

@@ -159,10 +159,18 @@ abstract class BaseTestComponent {
   dataSource = new ElementDataSource();
   direction = 'ltr';
 
+  getTableHeight(): number {
+    return this.table.nativeElement.querySelector('.mat-table').offsetHeight;
+  }
+
   getTableWidth(): number {
     return this.table.nativeElement.querySelector('.mat-table').offsetWidth;
   }
 
+  getHeaderRowHeight(): number {
+    return this.table.nativeElement.querySelector('.mat-header-row .mat-header-cell').offsetHeight;
+  }
+
   getColumnElement(index: number): HTMLElement {
     return this.table.nativeElement!.querySelectorAll('.mat-header-cell')[index] as HTMLElement;
   }
@@ -189,6 +197,10 @@ abstract class BaseTestComponent {
     return document.querySelectorAll('.mat-column-resize-overlay-thumb')[index] as HTMLElement;
   }
 
+  getOverlayThumbTopElement(index: number): HTMLElement {
+    return document.querySelectorAll('.mat-column-resize-overlay-thumb-top')[index] as HTMLElement;
+  }
+
   getOverlayThumbPosition(index: number): number {
     const thumbPositionElement = this.getOverlayThumbElement(index)!.parentNode as HTMLElement;
     const left = parseInt(thumbPositionElement.style.left!, 10);
@@ -372,6 +384,9 @@ describe('Material Popover Edit', () => {
       it('shows resize handle overlays on header row hover and while a resize handle is in use', fakeAsync(() => {
         expect(component.getOverlayThumbElement(0)).toBeUndefined();
 
+        const headerRowHeight = component.getHeaderRowHeight();
+        const tableHeight = component.getTableHeight();
+
         component.triggerHoverState();
         fixture.detectChanges();
 
@@ -382,6 +397,13 @@ describe('Material Popover Edit', () => {
           component.getOverlayThumbElement(2).classList.contains('mat-column-resize-overlay-thumb'),
         ).toBe(true);
 
+        (expect(component.getOverlayThumbElement(0).offsetHeight) as any).isApproximately(
+          headerRowHeight,
+        );
+        (expect(component.getOverlayThumbElement(2).offsetHeight) as any).isApproximately(
+          headerRowHeight,
+        );
+
         component.beginColumnResizeWithMouse(0);
 
         expect(
@@ -391,6 +413,16 @@ describe('Material Popover Edit', () => {
           component.getOverlayThumbElement(2).classList.contains('mat-column-resize-overlay-thumb'),
         ).toBe(true);
 
+        (expect(component.getOverlayThumbElement(0).offsetHeight) as any).isApproximately(
+          tableHeight,
+        );
+        (expect(component.getOverlayThumbTopElement(0).offsetHeight) as any).isApproximately(
+          headerRowHeight,
+        );
+        (expect(component.getOverlayThumbElement(2).offsetHeight) as any).isApproximately(
+          headerRowHeight,
+        );
+
         component.completeResizeWithMouseInProgress(0);
         component.endHoverState();
         fixture.detectChanges();

src/material-experimental/column-resize/overlay-handle.ts

@@ -12,6 +12,7 @@ import {
   ElementRef,
   Inject,
   NgZone,
+  ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
@@ -39,11 +40,13 @@ import {AbstractMatColumnResize} from './column-resize-directives/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   host: {'class': 'mat-column-resize-overlay-thumb'},
-  template: '',
+  template: '<div #top class="mat-column-resize-overlay-thumb-top"></div>',
 })
 export class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {
   protected readonly document: Document;
 
+  @ViewChild('top', {static: true}) topElement: ElementRef<HTMLElement>;
+
   constructor(
     protected readonly columnDef: CdkColumnDef,
     protected readonly columnResize: ColumnResize,
@@ -64,10 +67,12 @@ export class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {
   protected override updateResizeActive(active: boolean): void {
     super.updateResizeActive(active);
 
+    const originHeight = this.resizeRef.origin.nativeElement.offsetHeight;
+    this.topElement.nativeElement.style.height = `${originHeight}px`;
     this.resizeRef.overlayRef.updateSize({
       height: active
         ? (this.columnResize as AbstractMatColumnResize).getTableHeight()
-        : this.resizeRef.origin.nativeElement!.offsetHeight,
+        : originHeight,
     });
   }
 }