comments pt 1

Author: kseamon

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

@@ -25,11 +25,10 @@ const PROVIDERS = [ColumnResizeNotifier, HeaderRowEventDispatcher, ColumnResizeN
 const TABLE_PROVIDERS = [...PROVIDERS, TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER];
 const FLEX_PROVIDERS = [...PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER];
 const HOST_BINDINGS = {
-  '[class]': 'getIdClass()',
   '[class.cdk-column-resize-rtl]': 'directionality.value === "rtl"',
 };
 
-let idSequence = 0;
+let nextId = 0;
 
 export abstract class ColumnResize implements AfterViewInit, OnDestroy {
   protected readonly destroyed = new ReplaySubject<void>();
@@ -40,23 +39,13 @@ export abstract class ColumnResize implements AfterViewInit, OnDestroy {
   protected abstract readonly ngZone: NgZone;
   protected abstract readonly notifier: ColumnResizeNotifierSource;
 
-  private _specifiedId?: string;
-  private _generatedId?: string;
-
-  get id() {
-    if (this._specifiedId) {
-      return this._specifiedId;
-    }
-    if (!this._generatedId) {
-      this._generatedId = (++idSequence).toString();
-    }
-    return this._generatedId;
-  }
-  set id(value: string) {
-    this._specifiedId = value;
-  }
+  protected readonly selectorId = `${++nextId}`;
+
+  id?: string;
 
   ngAfterViewInit() {
+    this.elementRef.nativeElement!.classList.add(this.getUniqueCssClass());
+
     this._listenForRowHoverEvents();
     this._listenForResizeActivity();
     this._listenForHoverActivity();
@@ -67,8 +56,8 @@ export abstract class ColumnResize implements AfterViewInit, OnDestroy {
     this.destroyed.complete();
   }
 
-  getIdClass() {
-    return `cdk-column-resize-${this.id}`;
+  getUniqueCssClass() {
+    return `cdk-column-resize-${this.selectorId}`;
   }
 
   private _listenForRowHoverEvents() {

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

@@ -40,7 +40,7 @@ export class HeaderRowEventDispatcher {
           distinctUntilChanged(),
       ),
   ).pipe(
-      skip(1),
+      skip(1), // Ignore initial [null, null] emission.
       map(([hovered, active]) => active || hovered),
       distinctUntilChanged(),
       share(),

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

@@ -134,7 +134,7 @@ export abstract class ResizeOverlayHandle implements AfterViewInit, OnDestroy {
 
           let computedNewSize: number = size + (this._isLtr() ? deltaX : -deltaX);
           computedNewSize = Math.min(
-              Math.max(computedNewSize, this.resizeRef.minPx, 0), this.resizeRef.maxPx);
+              Math.max(computedNewSize, this.resizeRef.minWidthPx, 0), this.resizeRef.maxWidthPx);
 
           this.resizeNotifier.triggerResize.next({columnId, size: computedNewSize});
 

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

@@ -35,33 +35,33 @@ import {ResizeStrategy} from './resize-strategy';
 
 export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
     implements AfterViewInit, OnDestroy {
-  protected minPxInternal: number = 0;
-  protected maxPxInternal: number = Number.MAX_SAFE_INTEGER;
+  protected minWidthPxInternal: number = 0;
+  protected maxWidthPxInternal: number = Number.MAX_SAFE_INTEGER;
 
   protected inlineHandle?: HTMLElement;
   protected overlayRef?: OverlayRef;
   protected readonly destroyed = new ReplaySubject<void>();
   protected readonly document: Document;
 
-  get minPx(): number {
-    return this.minPxInternal;
+  get minWidthPx(): number {
+    return this.minWidthPxInternal;
   }
-  set minPx(value: number) {
-    this.minPxInternal = value;
+  set minWidthPx(value: number) {
+    this.minWidthPxInternal = value;
 
     if (this.elementRef.nativeElement) {
-      this._applyMinPx();
+      this._applyMinWidthPx();
     }
   }
 
-  get maxPx(): number {
-    return this.maxPxInternal;
+  get maxWidthPx(): number {
+    return this.maxWidthPxInternal;
   }
-  set maxPx(value: number) {
-    this.maxPxInternal = value;
+  set maxWidthPx(value: number) {
+    this.maxWidthPxInternal = value;
 
     if (this.elementRef.nativeElement) {
-      this._applyMaxPx();
+      this._applyMaxWidthPx();
     }
   }
 
@@ -84,7 +84,8 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
     this._listenForRowHoverEvents();
     this._listenForResizeEvents();
     this._appendInlineHandle();
-    this._applyMinPx();
+    this._applyMinWidthPx();
+    this._applyMaxWidthPx();
   }
 
   ngOnDestroy(): void {
@@ -187,7 +188,7 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
 
   private _createHandlePortal(): ComponentPortal<HandleComponent> {
     const injector = new PortalInjector(this.injector, new WeakMap([
-      [ResizeRef, new ResizeRef(this.elementRef, this.overlayRef!, this.minPx, this.maxPx)]
+      [ResizeRef, new ResizeRef(this.elementRef, this.overlayRef!, this.minWidthPx, this.maxWidthPx)]
     ]));
     return new ComponentPortal(this.getOverlayHandleComponentType(),
         this.viewContainerRef, injector);
@@ -203,20 +204,20 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   }
 
   private _applySize(sizeInPixels: number): void {
-    const sizeToApply = Math.min(Math.max(sizeInPixels, this.minPx, 0), this.maxPx);
+    const sizeToApply = Math.min(Math.max(sizeInPixels, this.minWidthPx, 0), this.maxWidthPx);
 
     this.resizeStrategy.applyColumnSize(this.columnDef.cssClassFriendlyName,
         this.elementRef.nativeElement!, sizeToApply);
   }
 
-  private _applyMinPx(): void {
+  private _applyMinWidthPx(): void {
     this.resizeStrategy.applyMinColumnSize(this.columnDef.cssClassFriendlyName,
-        this.elementRef.nativeElement, this.minPx);
+        this.elementRef.nativeElement, this.minWidthPx);
   }
 
-  private _applyMaxPx(): void {
+  private _applyMaxWidthPx(): void {
     this.resizeStrategy.applyMaxColumnSize(this.columnDef.cssClassFriendlyName,
-        this.elementRef.nativeElement, this.maxPx);
+        this.elementRef.nativeElement, this.maxWidthPx);
   }
 
   private _appendInlineHandle(): void {

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

@@ -13,6 +13,6 @@ export class ResizeRef {
   constructor(
       readonly origin: ElementRef,
       readonly overlayRef: OverlayRef,
-      readonly minPx: number,
-      readonly maxPx: number, ) {}
+      readonly minWidthPx: number,
+      readonly maxWidthPx: number, ) {}
 }

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

@@ -122,7 +122,7 @@ export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDest
     } else {
       properties.delete(key);
     }
-    this._applySizeCSS(cssFriendlyColumnName);
+    this._applySizeCss(cssFriendlyColumnName);
   }
 
   private _getStyleSheet(): CSSStyleSheet {
@@ -144,7 +144,7 @@ export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDest
     return properties;
   }
 
-  private _applySizeCSS(cssFriendlyColumnName: string) {
+  private _applySizeCss(cssFriendlyColumnName: string) {
     const properties = this._getColumnPropertiesMap(cssFriendlyColumnName);
     const propertyKeys = Array.from(properties.keys());
 
@@ -162,7 +162,7 @@ export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDest
     }
 
     const columnClassName = this.getColumnCssClass(cssFriendlyColumnName);
-    const tableClassName = this._columnResize.getIdClass();
+    const tableClassName = this._columnResize.getUniqueCssClass();
 
     const selector = `.${tableClassName} .${columnClassName}`;
     const body = propertyKeys.map(key => `${key}:${properties.get(key)}`).join(';');

src/dev-app/column-resize/default-enabled-flex/default-enabled-column-resize-flex-demo.html

@@ -1,13 +1,13 @@
 <mat-table [dataSource]="dataSource" class="mat-elevation-z8 example-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
-    <mat-header-cell *matHeaderCellDef [matResizableMaxPx]="100"> No. </mat-header-cell>
+    <mat-header-cell *matHeaderCellDef [matResizableMaxWidthPx]="100"> No. </mat-header-cell>
     <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
   </ng-container>
 
   <!-- Name Column -->
   <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef [matResizableMinPx]="100"> Name </mat-header-cell>
+    <mat-header-cell *matHeaderCellDef [matResizableMinWidthPx]="100"> Name </mat-header-cell>
     <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
   </ng-container>
 

src/dev-app/column-resize/default-enabled/default-enabled-column-resize-demo.html

@@ -1,13 +1,13 @@
 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 example-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
-    <th mat-header-cell *matHeaderCellDef [matResizableMaxPx]="100"> No. </th>
+    <th mat-header-cell *matHeaderCellDef [matResizableMaxWidthPx]="100"> No. </th>
     <td mat-cell *matCellDef="let element"> {{element.position}} </td>
   </ng-container>
 
   <!-- Name Column -->
   <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef [matResizableMinPx]="100"> Name </th>
+    <th mat-header-cell *matHeaderCellDef [matResizableMinWidthPx]="100"> Name </th>
     <td mat-cell *matCellDef="let element"> {{element.name}} </td>
   </ng-container>
 

src/dev-app/column-resize/opt-in/opt-in-column-resize-demo.html

@@ -1,13 +1,13 @@
 <table mat-table columnResize [dataSource]="dataSource" class="mat-elevation-z8 example-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
-    <th mat-header-cell *matHeaderCellDef resizable [matResizableMaxPx]="100"> No. </th>
+    <th mat-header-cell *matHeaderCellDef resizable [matResizableMaxWidthPx]="100"> No. </th>
     <td mat-cell *matCellDef="let element"> {{element.position}} </td>
   </ng-container>
 
   <!-- Name Column -->
   <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef resizable [matResizableMinPx]="100"> Name </th>
+    <th mat-header-cell *matHeaderCellDef resizable [matResizableMinWidthPx]="100"> Name </th>
     <td mat-cell *matCellDef="let element"> {{element.name}} </td>
   </ng-container>
 

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

@@ -28,11 +28,11 @@ const HOST_BINDINGS = {
 };
 const TABLE_HOST_BINDINGS = {
   ...HOST_BINDINGS,
-  '[class]': '"mat-column-resize-table " + getIdClass()',
+  'class': 'mat-column-resize-table',
 };
 const FLEX_HOST_BINDINGS = {
   ...HOST_BINDINGS,
-  '[class]': '"mat-column-resize-flex " + getIdClass()',
+  'class': 'mat-column-resize-flex',
 };
 
 export abstract class AbstractMatColumnResize extends ColumnResize {

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

@@ -12,7 +12,7 @@ import {Resizable} from '@angular/cdk-experimental/column-resize';
 import {MatColumnResizeOverlayHandle} from './overlay-handle';
 
 export abstract class AbstractMatResizable extends Resizable<MatColumnResizeOverlayHandle> {
-  minPxInternal = 32;
+  minWidthPxInternal = 32;
 
   protected getInlineHandleCssClassName(): string {
     return 'mat-resizable-handle';
@@ -28,8 +28,8 @@ const RESIZABLE_HOST_BINDINGS = {
 };
 
 const RESIZABLE_INPUTS = [
-  'minPx: matResizableMinPx',
-  'maxPx: matResizableMaxPx',
+  'minWidthPx: matResizableMinWidthPx',
+  'maxWidthPx: matResizableMaxWidthPx',
 ];
 
 @Directive({