almost there

Author: kseamon

.github/CODEOWNERS

@@ -119,6 +119,7 @@
 /src/dev-app/card/**                               @jelbourn
 /src/dev-app/checkbox/**                           @jelbourn @devversion
 /src/dev-app/chips/**                              @jelbourn
+/src/dev-app/column-resize/**                      @kseamon @andrewseguin
 /src/dev-app/connected-overlay/**                  @jelbourn @crisbeto
 /src/dev-app/dataset/**                            @andrewseguin
 /src/dev-app/datepicker/**                         @mmalerba

src/cdk-experimental/column-resize/column-resize.ts

@@ -26,7 +26,7 @@ const TABLE_PROVIDERS = [...PROVIDERS, TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVID
 const FLEX_PROVIDERS = [...PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER];
 const HOST_BINDINGS = {
   '[class]': 'getIdClass()',
-  '[class.column-resize-rtl]': 'directionality.value === "rtl"',
+  '[class.cdk-column-resize-rtl]': 'directionality.value === "rtl"',
 };
 
 let idSequence = 0;
@@ -68,11 +68,7 @@ export abstract class ColumnResize implements AfterViewInit, OnDestroy {
   }
 
   getIdClass() {
-    return `column-resize-${this.id}`;
-  }
-
-  getWithResizedColumnClass() {
-    return 'with-resized-column';
+    return `cdk-column-resize-${this.id}`;
   }
 
   private _listenForRowHoverEvents() {
@@ -101,7 +97,7 @@ export abstract class ColumnResize implements AfterViewInit, OnDestroy {
         takeUntil(this.destroyed),
         take(1),
     ).subscribe(() => {
-      this.elementRef.nativeElement!.classList.add(this.getWithResizedColumnClass());
+      this.elementRef.nativeElement!.classList.add(WITH_RESIZED_COLUMN_CLASS);
     });
   }
 
@@ -112,10 +108,10 @@ export abstract class ColumnResize implements AfterViewInit, OnDestroy {
         pairwise(),
     ).subscribe(([previousRow, hoveredRow]) => {
       if (hoveredRow) {
-        hoveredRow.classList.add('hover-or-active');
+        hoveredRow.classList.add(HOVER_OR_ACTIVE_CLASS);
       }
       if (previousRow) {
-        previousRow.classList.remove('hover-or-active');
+        previousRow.classList.remove(HOVER_OR_ACTIVE_CLASS);
       }
     });
   }
@@ -196,3 +192,6 @@ export class CdkColumnResizeFlex extends ColumnResize {
     super();
   }
 }
+
+const HOVER_OR_ACTIVE_CLASS = 'cdk-column-resize-hover-or-active';
+const WITH_RESIZED_COLUMN_CLASS = 'cdk-column-resize-with-resized-column';

src/cdk-experimental/column-resize/resizable.ts

@@ -114,7 +114,7 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
         takeUntilDestroyed,
         filter(columnSize => columnSize.columnId === this.columnDef.name),
     ).subscribe(({size, completeImmediately}) => {
-      this.elementRef.nativeElement!.classList.add('resizable-overlay-thumb-active');
+      this.elementRef.nativeElement!.classList.add(OVERLAY_ACTIVE_CLASS);
       this._applySize(size);
 
       if (completeImmediately) {
@@ -131,7 +131,7 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
         this.resizeNotifier.resizeCanceled,
         this.resizeNotifier.resizeCompleted,
     ).pipe(takeUntilDestroyed).subscribe(columnSize => {
-      this.elementRef.nativeElement!.classList.remove('resizable-overlay-thumb-active');
+      this.elementRef.nativeElement!.classList.remove(OVERLAY_ACTIVE_CLASS);
 
       if (this.overlayRef && this.overlayRef.hasAttached()) {
         this._updateOverlayHandleHeight();
@@ -178,3 +178,5 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
     this.elementRef.nativeElement!.appendChild(this.inlineHandle);
   }
 }
+
+const OVERLAY_ACTIVE_CLASS = 'cdk-resizable-overlay-thumb-active';

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

@@ -12,7 +12,7 @@
   $resizable-active-divider: mat-color($primary, 500);
 
   // Required for resizing to work properly.
-  table.with-resized-column {
+  table.cdk-column-resize-with-resized-column {
     table-layout: fixed;
   }
 
@@ -39,29 +39,29 @@
     right: 0;
   }
 
-  .column-resize-rtl .mat-header-cell:not(.mat-resizable)::after,
-  .column-resize-rtl .mat-resizable-handle {
+  .mat-column-resize-rtl .mat-header-cell:not(.mat-resizable)::after,
+  .mat-column-resize-rtl .mat-resizable-handle {
     left: 0;
     right: auto;
   }
 
-  .mat-header-row.hover-or-active {
+  .mat-header-row.cdk-column-resize-hover-or-active {
     .mat-header-cell:not(.mat-resizable)::after {
       background: $non-resizable-hover-divider;
     }
-    
+
     .mat-resizable-handle {
       background: $resizable-hover-divider;
     }
   }
 
-  .mat-resizable.resizable-overlay-thumb-active > .mat-resizable-handle {
+  .mat-resizable.cdk-resizable-overlay-thumb-active > .mat-resizable-handle {
     opacity: 0;
     transition: none;
   }
 
   .mat-resizable-handle:focus,
-  .mat-header-row.hover-or-active .mat-resizable-handle:focus {
+  .mat-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus {
     background: $resizable-active-divider;
     outline: none;
   }

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

@@ -25,7 +25,7 @@ const TABLE_PROVIDERS = [...PROVIDERS, TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVID
 const FLEX_PROVIDERS = [...PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER];
 const HOST_BINDINGS = {
   '[class]': 'getIdClass()',
-  '[class.column-resize-rtl]': 'directionality.value === "rtl"',
+  '[class.mat-column-resize-rtl]': 'directionality.value === "rtl"',
 };
 
 export abstract class AbstractMatColumnResize extends ColumnResize {