feat(cdk-experimental/table): experimental column resize (#16114)

Author: kseamon

.github/CODEOWNERS

@@ -91,6 +91,7 @@
 
 # Material experimental package
 /src/material-experimental/*                       @jelbourn
+/src/material-experimental/column-resize/**        @kseamon @andrewseguin
 /src/material-experimental/mdc-autocomplete/**     @crisbeto
 /src/material-experimental/mdc-button/**           @andrewseguin
 /src/material-experimental/mdc-card/**             @mmalerba
@@ -118,6 +119,7 @@
 
 # CDK experimental package
 /src/cdk-experimental/*                            @jelbourn
+/src/cdk-experimental/column-resize/**             @kseamon @andrewseguin
 /src/cdk-experimental/dialog/**                    @jelbourn @crisbeto
 /src/cdk-experimental/popover-edit/**              @kseamon @andrewseguin
 /src/cdk-experimental/scrolling/**                 @mmalerba
@@ -140,6 +142,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/BUILD.bazel

@@ -0,0 +1,24 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "column-resize",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/cdk-experimental/column-resize",
+    deps = [
+        "//src/cdk-experimental/popover-edit",
+        "//src/cdk/bidi",
+        "//src/cdk/coercion",
+        "//src/cdk/keycodes",
+        "//src/cdk/overlay",
+        "//src/cdk/portal",
+        "//src/cdk/table",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//rxjs",
+    ],
+)

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Directive, ElementRef, NgZone} from '@angular/core';
+import {Directionality} from '@angular/cdk/bidi';
+
+import {ColumnResize} from '../column-resize';
+import {ColumnResizeNotifier, ColumnResizeNotifierSource} from '../column-resize-notifier';
+import {HeaderRowEventDispatcher} from '../event-dispatcher';
+import {HOST_BINDINGS, FLEX_PROVIDERS} from './constants';
+
+/**
+ * Explicitly enables column resizing for a flexbox-based cdk-table.
+ * Individual columns must be annotated specifically.
+ */
+@Directive({
+  selector: 'cdk-table[columnResize]',
+  host: HOST_BINDINGS,
+  providers: [
+    ...FLEX_PROVIDERS,
+    {provide: ColumnResize, useExisting: CdkColumnResizeFlex},
+  ],
+})
+export class CdkColumnResizeFlex extends ColumnResize {
+  constructor(
+      readonly columnResizeNotifier: ColumnResizeNotifier,
+      readonly directionality: Directionality,
+      protected readonly elementRef: ElementRef,
+      protected readonly eventDispatcher: HeaderRowEventDispatcher,
+      protected readonly ngZone: NgZone,
+      protected readonly notifier: ColumnResizeNotifierSource) {
+    super();
+  }
+}

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Directive, ElementRef, NgZone} from '@angular/core';
+import {Directionality} from '@angular/cdk/bidi';
+
+import {ColumnResize} from '../column-resize';
+import {ColumnResizeNotifier, ColumnResizeNotifierSource} from '../column-resize-notifier';
+import {HeaderRowEventDispatcher} from '../event-dispatcher';
+import {HOST_BINDINGS, TABLE_PROVIDERS} from './constants';
+
+/**
+ * Explicitly enables column resizing for a table-based cdk-table.
+ * Individual columns must be annotated specifically.
+ */
+@Directive({
+  selector: 'table[cdk-table][columnResize]',
+  host: HOST_BINDINGS,
+  providers: [
+    ...TABLE_PROVIDERS,
+    {provide: ColumnResize, useExisting: CdkColumnResize},
+  ],
+})
+export class CdkColumnResize extends ColumnResize {
+  constructor(
+      readonly columnResizeNotifier: ColumnResizeNotifier,
+      readonly directionality: Directionality,
+      protected readonly elementRef: ElementRef,
+      protected readonly eventDispatcher: HeaderRowEventDispatcher,
+      protected readonly ngZone: NgZone,
+      protected readonly notifier: ColumnResizeNotifierSource) {
+    super();
+  }
+}

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

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Provider} from '@angular/core';
+import {ColumnResizeNotifier, ColumnResizeNotifierSource} from '../column-resize-notifier';
+import {HeaderRowEventDispatcher} from '../event-dispatcher';
+import {
+  TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER,
+  FLEX_RESIZE_STRATEGY_PROVIDER,
+} from '../resize-strategy';
+
+const PROVIDERS: Provider[] = [
+  ColumnResizeNotifier,
+  HeaderRowEventDispatcher,
+  ColumnResizeNotifierSource,
+];
+
+export const TABLE_PROVIDERS: Provider[] = [
+  ...PROVIDERS,
+  TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER,
+];
+export const FLEX_PROVIDERS: Provider[] = [...PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER];
+export const HOST_BINDINGS = {
+  '[class.cdk-column-resize-rtl]': 'directionality.value === "rtl"',
+};

src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Directive, ElementRef, NgZone} from '@angular/core';
+import {Directionality} from '@angular/cdk/bidi';
+
+import {ColumnResize} from '../column-resize';
+import {ColumnResizeNotifier, ColumnResizeNotifierSource} from '../column-resize-notifier';
+import {HeaderRowEventDispatcher} from '../event-dispatcher';
+import {HOST_BINDINGS, FLEX_PROVIDERS} from './constants';
+
+/**
+ * Implicitly enables column resizing for a flex cdk-table.
+ * Individual columns will be resizable unless opted out.
+ */
+@Directive({
+  selector: 'cdk-table',
+  host: HOST_BINDINGS,
+  providers: [
+    ...FLEX_PROVIDERS,
+    {provide: ColumnResize, useExisting: CdkDefaultEnabledColumnResizeFlex},
+  ],
+})
+export class CdkDefaultEnabledColumnResizeFlex extends ColumnResize {
+  constructor(
+      readonly columnResizeNotifier: ColumnResizeNotifier,
+      readonly directionality: Directionality,
+      protected readonly elementRef: ElementRef,
+      protected readonly eventDispatcher: HeaderRowEventDispatcher,
+      protected readonly ngZone: NgZone,
+      protected readonly notifier: ColumnResizeNotifierSource) {
+    super();
+  }
+}

src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Directive, ElementRef, NgZone} from '@angular/core';
+import {Directionality} from '@angular/cdk/bidi';
+
+import {ColumnResize} from '../column-resize';
+import {ColumnResizeNotifier, ColumnResizeNotifierSource} from '../column-resize-notifier';
+import {HeaderRowEventDispatcher} from '../event-dispatcher';
+import {HOST_BINDINGS, TABLE_PROVIDERS} from './constants';
+
+/**
+ * Implicitly enables column resizing for a table-based cdk-table.
+ * Individual columns will be resizable unless opted out.
+ */
+@Directive({
+  selector: 'table[cdk-table]',
+  host: HOST_BINDINGS,
+  providers: [
+    ...TABLE_PROVIDERS,
+    {provide: ColumnResize, useExisting: CdkDefaultEnabledColumnResize},
+  ],
+})
+export class CdkDefaultEnabledColumnResize extends ColumnResize {
+  constructor(
+      readonly columnResizeNotifier: ColumnResizeNotifier,
+      readonly directionality: Directionality,
+      protected readonly elementRef: ElementRef,
+      protected readonly eventDispatcher: HeaderRowEventDispatcher,
+      protected readonly ngZone: NgZone,
+      protected readonly notifier: ColumnResizeNotifierSource) {
+    super();
+  }
+}

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

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+
+import {CdkColumnResize} from './column-resize-directives/column-resize';
+import {CdkColumnResizeFlex} from './column-resize-directives/column-resize-flex';
+import {
+  CdkDefaultEnabledColumnResize
+} from './column-resize-directives/default-enabled-column-resize';
+import {
+  CdkDefaultEnabledColumnResizeFlex
+} from './column-resize-directives/default-enabled-column-resize-flex';
+
+/**
+ * One of two NgModules for use with CdkColumnResize.
+ * When using this module, columns are resizable by default.
+ */
+@NgModule({
+  declarations: [CdkDefaultEnabledColumnResize, CdkDefaultEnabledColumnResizeFlex],
+  exports: [CdkDefaultEnabledColumnResize, CdkDefaultEnabledColumnResizeFlex],
+})
+export class CdkColumnResizeDefaultEnabledModule {}
+
+/**
+ * One of two NgModules for use with CdkColumnResize.
+ * When using this module, columns are not resizable by default.
+ */
+@NgModule({
+  declarations: [CdkColumnResize, CdkColumnResizeFlex],
+  exports: [CdkColumnResize, CdkColumnResizeFlex],
+})
+export class CdkColumnResizeModule {}

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

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Injectable} from '@angular/core';
+import {Observable, Subject} from 'rxjs';
+
+/** Indicates the width of a column. */
+export interface ColumnSize {
+  /** The ID/name of the column, as defined in CdkColumnDef. */
+  readonly columnId: string;
+
+  /** The width in pixels of the column. */
+  readonly size: number;
+}
+
+/** Interface describing column size changes. */
+export interface ColumnSizeAction extends ColumnSize {
+  /**
+   * Whether the resize action should be applied instantaneously. False for events triggered during
+   * a UI-triggered resize (such as with the mouse) until the mouse button is released. True
+   * for all programatically triggered resizes.
+   */
+  readonly completeImmediately?: boolean;
+}
+
+/** Originating source of column resize events within a table. */
+@Injectable()
+export class ColumnResizeNotifierSource {
+  /** Emits when an in-progress resize is canceled. */
+  readonly resizeCanceled = new Subject<ColumnSizeAction>();
+
+  /** Emits when a resize is applied. */
+  readonly resizeCompleted = new Subject<ColumnSize>();
+
+  /** Triggers a resize action. */
+  readonly triggerResize = new Subject<ColumnSizeAction>();
+}
+
+/** Service for triggering column resizes imperatively or being notified of them. */
+@Injectable()
+export class ColumnResizeNotifier {
+  /** Emits whenever a column is resized. */
+  readonly resizeCompleted: Observable<ColumnSize> = this._source.resizeCompleted.asObservable();
+
+  constructor(private readonly _source: ColumnResizeNotifierSource) {}
+
+  /** Instantly resizes the specified column. */
+  resize(columnId: string, size: number): void {
+    this._source.triggerResize.next({columnId, size, completeImmediately: true});
+  }
+}