Add CdkSelection and examples

No test coverage so far

Author: yifange

src/cdk-experimental/config.bzl

@@ -3,6 +3,7 @@ CDK_EXPERIMENTAL_ENTRYPOINTS = [
     "dialog",
     "popover-edit",
     "scrolling",
+    "selection",
 ]
 
 # List of all entry-point targets of the Angular cdk-experimental package.

src/cdk-experimental/selection/BUILD.bazel

@@ -0,0 +1,53 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
+load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module", "ng_test_library", "ng_web_test_suite")
+
+ng_module(
+    name = "selection",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/cdk-experimental/selection",
+    deps = [
+        "//src/cdk/coercion",
+        "//src/cdk/collections",
+        "//src/cdk/table",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//rxjs",
+    ],
+)
+
+ng_test_library(
+    name = "unit_test_sources",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":selection",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)
+
+ng_e2e_test_library(
+    name = "e2e_test_sources",
+    srcs = glob(["**/*.e2e.spec.ts"]),
+    deps = [
+        "//src/cdk/testing/private/e2e",
+    ],
+)
+
+e2e_test_suite(
+    name = "e2e_tests",
+    deps = [
+        ":e2e_test_sources",
+        "//src/cdk/testing/private/e2e",
+    ],
+)

src/cdk-experimental/selection/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @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
+ */
+
+export * from './public-api';
+

src/cdk-experimental/selection/public-api.ts

@@ -0,0 +1,14 @@
+/**
+ * @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
+ */
+
+export * from './selection';
+export * from './select-all';
+export * from './selection-toggle';
+export * from './selection-column';
+export * from './row-selection';
+export * from './selection-module';

src/cdk-experimental/selection/row-selection.ts

@@ -0,0 +1,49 @@
+/**
+ * @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, HostBinding, Input} from '@angular/core';
+
+import {CdkSelection} from './selection';
+
+/**
+ * Applies `cdk-selected` class and `aria-selected` to an element.
+ *
+ * Must be used within a parent `CdkSelection` directive.
+ * Must be provided with the value. The index is required if `trackBy` is used on the `CdkSelection`
+ * directive.
+ */
+@Directive({
+  selector: '[cdkRowSelection]',
+})
+export class CdkRowSelection<T> {
+  @Input()
+  get cdkRowSelectionValue(): T {
+    return this._value;
+  }
+  set cdkRowSelectionValue(value: T) {
+    this._value = value;
+  }
+  _value: T;
+
+  @Input()
+  get cdkRowSelectionIndex(): number|undefined {
+    return this._index;
+  }
+  set cdkRowSelectionIndex(index: number|undefined) {
+    this._index = index;
+  }
+  _index?: number;
+
+  constructor(private readonly _selection: CdkSelection<T>) {}
+
+  @HostBinding('class.cdk-selected')
+  @HostBinding('attr.aria-selected')
+  get isSelected() {
+    return this._selection.isSelected(this._value, this._index);
+  }
+}

src/cdk-experimental/selection/select-all.ts

@@ -0,0 +1,114 @@
+/**
+ * @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, Inject, OnDestroy, OnInit, Optional, Self} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {BehaviorSubject, of as observableOf, Subject} from 'rxjs';
+import {switchMap, takeUntil} from 'rxjs/operators';
+
+import {CdkSelection} from './selection';
+
+/**
+ * Makes the element a select-all toggle.
+ *
+ * Must be used within a parent `CdkSelection` directive. It toggles the selection states
+ * of all the selection toggles connected with the `CdkSelection` directive.
+ * If the element implements `ControlValueAccessor`, e.g. `MatCheckbox`, the directive
+ * automatically connects it with the select-all state provided by the `CdkSelection` directive. If
+ * not, use `checked$` to get the checked state, `indeterminate$` to get the indeterminate state,
+ * and `toggle()` to change the selection state.
+ */
+@Directive({
+  selector: '[cdkSelectAll]',
+  exportAs: 'cdkSelectAll',
+})
+export class CdkSelectAll<T> implements OnDestroy, OnInit {
+  /**
+   * The checked state of the toggle.
+   * Resolves to `true` if all the values are selected, `false` if no value is selected.
+   */
+  readonly checked$ = new BehaviorSubject(false);
+
+  /**
+   * The indeterminate state of the toggle.
+   * Resolves to `true` if part (not all) of the values are selected, `false` if all values or no
+   * value at all are selected.
+   */
+  readonly indeterminate$ = new BehaviorSubject(false);
+
+  /**
+   * Toggles the select-all state.
+   * @param event The click event if the toggle is triggered by a (mouse or keyboard) click. If
+   *     using with a native <input type="checkbox">, the parameter is required for the
+   *     indeterminate state to work properly.
+   */
+  toggle(event?: MouseEvent) {
+    // This is needed when applying the directive on a native <input type="checkbox">
+    // checkbox. The default behavior needs to be prevented in order to support the indeterminate
+    // state. The timeout is also needed so the checkbox can show the latest state.
+    if (event) {
+      event.preventDefault();
+    }
+
+    setTimeout(() => {
+      this._selection.toggleSelectAll();
+    });
+  }
+
+  private readonly _destroyed$ = new Subject();
+
+  constructor(
+      @Optional() private readonly _selection: CdkSelection<T>,
+      @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) private readonly _controlValueAccessor:
+          ControlValueAccessor[]) {}
+
+  ngOnInit() {
+    if (!this._selection) {
+      throw new Error('CdkSelectAll: missing CdkSelection in the parent');
+    }
+
+    if (!this._selection.cdkSelectionMultiple) {
+      throw new Error('CdkSelectAll: CdkSelection must have cdkSelectionMultiple set to true');
+    }
+
+    this._selection.cdkSelectionChange
+        .pipe(
+            switchMap(() => observableOf(this._selection.isAllSelected())),
+            takeUntil(this._destroyed$),
+            )
+        .subscribe((state) => {
+          this.checked$.next(state);
+        });
+
+    this._selection.cdkSelectionChange
+        .pipe(
+            switchMap(() => observableOf(this._selection.isPartialSelected())),
+            takeUntil(this._destroyed$),
+            )
+        .subscribe((state) => {
+          this.indeterminate$.next(state);
+        });
+
+    if (this._controlValueAccessor && this._controlValueAccessor.length) {
+      this._controlValueAccessor[0].registerOnChange((e: unknown) => {
+        if (e === true || e === false) {
+          this.toggle();
+        }
+      });
+
+      this.checked$.pipe(takeUntil(this._destroyed$)).subscribe((state) => {
+        this._controlValueAccessor[0].writeValue(state);
+      });
+    }
+  }
+
+  ngOnDestroy() {
+    this._destroyed$.next();
+    this._destroyed$.complete();
+  }
+}

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

@@ -0,0 +1,100 @@
+/**
+ * @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 {CdkCellDef, CdkColumnDef, CdkHeaderCellDef, CdkTable} from '@angular/cdk/table';
+import {
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional,
+  ViewChild,
+} from '@angular/core';
+
+import {CdkSelection} from './selection';
+
+/**
+ * Column that adds row selecting checkboxes and a select-all checkbox if `cdkSelectionMultiple` is
+ * `true`.
+ *
+ * Must be used within a parent `CdkSelection` directive.
+ */
+@Component({
+  selector: 'cdk-selection-column',
+  template: `
+    <ng-container cdkColumnDef>
+      <th cdkHeaderCell *cdkHeaderCellDef>
+        <input type="checkbox" *ngIf="selection.cdkSelectionMultiple"
+            cdkSelectAll
+            #allToggler="cdkSelectAll"
+            [checked]="allToggler.checked$ | async"
+            [indeterminate]="allToggler.indeterminate$ | async"
+            (click)="allToggler.toggle($event)">
+      </th>
+      <td cdkCell *cdkCellDef="let row; let i = $index">
+        <input type="checkbox"
+            #toggler="cdkSelectionToggle"
+            cdkSelectionToggle
+            [cdkSelectionToggleValue]="row"
+            [cdkSelectionToggleIndex]="i"
+            (click)="toggler.toggle()"
+            [checked]="toggler.checked$ | async">
+      </td>
+    </ng-container>
+  `,
+})
+export class CdkSelectionColumn<T> implements OnInit, OnDestroy {
+  /** Column name that should be used to reference this column. */
+  @Input()
+  get cdkSelectionColumnName(): string {
+    return this._name;
+  }
+  set cdkSelectionColumnName(name: string) {
+    this._name = name;
+
+    this.syncColumnDefName();
+  }
+  _name: string;
+
+  @ViewChild(CdkColumnDef, {static: true}) private readonly _columnDef: CdkColumnDef;
+  @ViewChild(CdkCellDef, {static: true}) private readonly _cell: CdkCellDef;
+  @ViewChild(CdkHeaderCellDef, {static: true}) private readonly _headerCell: CdkHeaderCellDef;
+
+  constructor(
+      @Optional() private table: CdkTable<T>,
+      @Optional() readonly selection: CdkSelection<T>,
+  ) {}
+
+  ngOnInit() {
+    if (!this.selection) {
+      throw new Error('CdkSelectionColumn: missing CdkSelection in the parent');
+    }
+
+    this.syncColumnDefName();
+
+    if (this.table) {
+      this._columnDef.cell = this._cell;
+      this._columnDef.headerCell = this._headerCell;
+      this.table.addColumnDef(this._columnDef);
+    } else {
+      throw new Error('CdkSelectionColumn: missing parent table');
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.table) {
+      this.table.removeColumnDef(this._columnDef);
+    }
+  }
+
+  private syncColumnDefName() {
+    if (this._columnDef) {
+      this._columnDef.name = this._name;
+    }
+  }
+}

src/cdk-experimental/selection/selection-module.ts

@@ -0,0 +1,40 @@
+/**
+ * @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 {CdkTableModule} from '@angular/cdk/table';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+
+import {CdkRowSelection} from './row-selection';
+import {CdkSelectAll} from './select-all';
+import {CdkSelection} from './selection';
+import {CdkSelectionColumn} from './selection-column';
+import {CdkSelectionToggle} from './selection-toggle';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CdkTableModule,
+  ],
+  exports: [
+    CdkSelection,
+    CdkSelectionToggle,
+    CdkSelectAll,
+    CdkSelectionColumn,
+    CdkRowSelection,
+  ],
+  declarations: [
+    CdkSelection,
+    CdkSelectionToggle,
+    CdkSelectAll,
+    CdkSelectionColumn,
+    CdkRowSelection,
+  ],
+})
+export class CdkSelectionModule {
+}