feat(material-experimental/selection): Add Material version for cdk-experimental/selection

.github/CODEOWNERS

@@ -114,6 +114,7 @@
 /src/material-experimental/mdc-theming/**          @mmalerba
 /src/material-experimental/mdc-typography/**       @mmalerba
 /src/material-experimental/popover-edit/**         @kseamon @andrewseguin
+/src/material-experimental/selection/**            @yifange @jelbourn
 
 # CDK experimental package
 /src/cdk-experimental/*                            @jelbourn

src/components-examples/BUILD.bazel

@@ -44,6 +44,7 @@ EXAMPLE_PACKAGES = [
     "//src/components-examples/material/badge",
     "//src/components-examples/material/autocomplete",
     "//src/components-examples/material-experimental/popover-edit",
+    "//src/components-examples/material-experimental/selection",
     "//src/components-examples/cdk/tree",
     "//src/components-examples/cdk/text-field",
     "//src/components-examples/cdk/table",

src/components-examples/material-experimental/selection/BUILD.bazel

@@ -0,0 +1,29 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "selection",
+    srcs = glob(["**/*.ts"]),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    module_name = "@angular/components-examples/material-experimental/selection",
+    deps = [
+        "//src/cdk/collections",
+        "//src/cdk/table",
+        "//src/material-experimental/selection",
+        "//src/material/checkbox",
+        "@npm//@angular/forms",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
+    ]),
+)

src/components-examples/material-experimental/selection/index.ts

@@ -0,0 +1,34 @@
+import {MatSelectionModule} from '@angular/material-experimental/selection';
+import {MatTableModule} from '@angular/material/table';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+
+import {MatSelectionColumnExample} from './mat-selection-column/mat-selection-column-example';
+import {MatSelectionListExample} from './mat-selection-list/mat-selection-list-example';
+
+export {
+  MatSelectionListExample,
+  MatSelectionColumnExample,
+};
+
+const EXAMPLES = [
+  MatSelectionListExample,
+  MatSelectionColumnExample,
+];
+
+@NgModule({
+  imports: [
+    MatSelectionModule,
+    MatTableModule,
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatCheckboxModule,
+  ],
+  declarations: EXAMPLES,
+  exports: EXAMPLES,
+})
+export class MatSelectionExamplesModule {
+}

src/components-examples/material-experimental/selection/mat-selection-column/mat-selection-column-example.css

@@ -0,0 +1,3 @@
+.example-table {
+  width: 100%;
+}

src/components-examples/material-experimental/selection/mat-selection-column/mat-selection-column-example.html

@@ -0,0 +1,30 @@
+Selected: {{selected}}
+<table class="example-table" mat-table [dataSource]="dataSource" matSelection [matSelectionMultiple]="true" (matSelectionChange)="selectionChanged($event)">
+    <mat-selection-column name="select"></mat-selection-column>
+    <!-- Position Column -->
+    <ng-container matColumnDef="position">
+      <th mat-header-cell *matHeaderCellDef> No. </th>
+      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+    </ng-container>
+
+    <!-- Weight Column -->
+    <ng-container matColumnDef="weight">
+      <th mat-header-cell *matHeaderCellDef> Weight </th>
+      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+    </ng-container>
+
+    <!-- Symbol Column -->
+    <ng-container matColumnDef="symbol">
+      <th mat-header-cell *matHeaderCellDef> Symbol </th>
+      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" matRowSelection [matRowSelectionValue]="row"></tr>
+</table>

src/components-examples/material-experimental/selection/mat-selection-column/mat-selection-column-example.ts

@@ -0,0 +1,58 @@
+import {Component, OnDestroy} from '@angular/core';
+import {SelectionChange} from '@angular/material-experimental/selection';
+import {ReplaySubject} from 'rxjs';
+
+/**
+ * @title Table that uses `matSelectionColumn` which allows users to select rows.
+ */
+@Component({
+  selector: 'mat-selection-column-example',
+  templateUrl: 'mat-selection-column-example.html',
+  styleUrls: ['mat-selection-column-example.css'],
+})
+export class MatSelectionColumnExample implements OnDestroy {
+  private readonly _destroyed = new ReplaySubject(1);
+
+  displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+  selected: string[] = [];
+
+  ngOnDestroy() {
+    this._destroyed.next();
+    this._destroyed.complete();
+  }
+
+  selectionChanged(event: SelectionChange<PeriodicElement>) {
+    this.selected = event.after.map((select) => select.value.name);
+  }
+}
+
+interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
+  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
+  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
+  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
+  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
+  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
+  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
+  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
+  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
+  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
+];

src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.html

@@ -0,0 +1,45 @@
+<h3><code>native input</code></h3>
+Selected: {{selected1}}
+<ul matSelection [dataSource]="data" [matSelectionMultiple]="true" (matSelectionChange)="selected1 = getCurrentSelected($event)">
+  <input type="checkbox" matSelectAll #allToggler="matSelectAll"
+      [checked]="allToggler.checked | async"
+      [indeterminate]="allToggler.indeterminate | async"
+      (click)="allToggler.toggle($event)">
+  <li *ngFor="let item of data">
+    <input type="checkbox" matSelectionToggle #toggler="matSelectionToggle" [matSelectionToggleValue]="item"
+      [checked]="toggler.checked | async" (click)="toggler.toggle()">
+    {{item}}
+  </li>
+</ul>
+
+<h3><code>mat-checkbox</code></h3>
+Selected: {{selected2}}
+<ul matSelection [dataSource]="data" [matSelectionMultiple]="true" (matSelectionChange)="selected2 = getCurrentSelected($event)">
+  <mat-checkbox matSelectAll #toggle1="matSelectAll" [indeterminate]="toggle1.indeterminate | async"></mat-checkbox>
+  <li *ngFor="let item of data">
+    <mat-checkbox matSelectionToggle [matSelectionToggleValue]="item"></mat-checkbox>
+    {{item}}
+  </li>
+</ul>
+
+<h3><code>Single select with mat-checkbox</code></h3>
+Selected: {{selected3}}
+<ul matSelection [dataSource]="data" [matSelectionMultiple]="false" (matSelectionChange)="selected3 = getCurrentSelected($event)">
+  <li *ngFor="let item of data">
+    <mat-checkbox matSelectionToggle [matSelectionToggleValue]="item"></mat-checkbox>
+    {{item}}
+  </li>
+</ul>
+
+<h3><code>with trackBy</code></h3>
+Selected: {{selected4}}
+<ul matSelection [dataSource]="data" [matSelectionMultiple]="true" [trackBy]="trackByFn" (matSelectionChange)="selected4 = getCurrentSelected($event)">
+  <mat-checkbox matSelectAll #toggle2="matSelectAll" [indeterminate]="toggle2.indeterminate | async"></mat-checkbox>
+  <li *ngFor="let item of data; index as i; trackBy: trackByFn">
+    <mat-checkbox matSelectionToggle [matSelectionToggleValue]="item" [matSelectionToggleIndex]="i"></mat-checkbox>
+    {{item}}
+  </li>
+</ul>
+
+<button (click)="changeElementName()">Change element names and the already selected stays</button>
+<button (click)="reset()">reset</button>

src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.ts

@@ -0,0 +1,53 @@
+import {SelectionChange} from '@angular/cdk-experimental/selection';
+import {Component, OnDestroy} from '@angular/core';
+import {ReplaySubject} from 'rxjs';
+
+/**
+ * @title Mat Selection on a simple list.
+ */
+@Component({
+  selector: 'mat-selection-list-example',
+  templateUrl: 'mat-selection-list-example.html',
+})
+export class MatSelectionListExample implements OnDestroy {
+  private readonly _destroyed = new ReplaySubject(1);
+
+  data = ELEMENT_NAMES;
+
+  selected1: string[] = [];
+  selected2: string[] = [];
+  selected3: string[] = [];
+  selected4: string[] = [];
+
+  ngOnDestroy() {
+    this._destroyed.next();
+    this._destroyed.complete();
+  }
+
+  getCurrentSelected(event: SelectionChange<string>) {
+    return event.after.map((select) => select.value);
+  }
+
+  trackByFn(index: number, value: string) {
+    return index;
+  }
+
+  changeElementName() {
+    this.data = ELEMENT_SYMBOLS;
+  }
+
+  reset() {
+    this.data = ELEMENT_NAMES;
+  }
+}
+
+const ELEMENT_NAMES = [
+  'Hydrogen',   'Helium',   'Lithium',  'Beryllium', 'Boron',     'Carbon',   'Nitrogen',
+  'Oxygen',     'Fluorine', 'Neon',     'Sodium',    'Magnesium', 'Aluminum', 'Silicon',
+  'Phosphorus', 'Sulfur',   'Chlorine', 'Argon',     'Potassium', 'Calcium',
+];
+
+const ELEMENT_SYMBOLS = [
+  'H',  'He', 'Li', 'Be', 'B', 'C', 'N',  'O',  'F', 'Ne',
+  'Na', 'Mg', 'Al', 'Si', 'P', 'S', 'Cl', 'Ar', 'K', 'Ca'
+];

src/dev-app/example/example-list.ts

@@ -10,8 +10,6 @@ import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {EXAMPLE_COMPONENTS} from '@angular/components-examples';
 import {Component, Input} from '@angular/core';
 
-console.log(EXAMPLE_COMPONENTS);
-
 /** Displays a set of components-examples in a mat-accordion. */
 @Component({
   selector: 'material-example-list',

src/dev-app/selection/BUILD.bazel

@@ -7,6 +7,7 @@ ng_module(
     srcs = glob(["**/*.ts"]),
     deps = [
         "//src/components-examples/cdk-experimental/selection",
+        "//src/components-examples/material-experimental/selection",
         "//src/dev-app/example",
         "@npm//@angular/forms",
         "@npm//@angular/router",

src/dev-app/selection/selection-demo-module.ts

@@ -7,6 +7,8 @@
  */
 
 import {CdkSelectionExamplesModule} from '@angular/components-examples/cdk-experimental/selection';
+import {MatSelectionExamplesModule} from
+'@angular/components-examples/material-experimental/selection';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
@@ -16,6 +18,7 @@ import {SelectionDemo} from './selection-demo';
 @NgModule({
   imports: [
     CdkSelectionExamplesModule,
+    MatSelectionExamplesModule,
     FormsModule,
     RouterModule.forChild([{path: '', component: SelectionDemo}]),
   ],

src/dev-app/selection/selection-demo.ts

@@ -15,6 +15,12 @@ import {Component} from '@angular/core';
 
     <h3>CDK selection column and CDK row selection with CDK table</h3>
     <cdk-selection-column-example></cdk-selection-column-example>
+
+    <h3>Mat selection with a list</h3>
+    <mat-selection-list-example></mat-selection-list-example>
+
+    <h3>Mat selection column and Mat row selection with Mat table</h3>
+    <mat-selection-column-example></mat-selection-column-example>
   `,
 })
 export class SelectionDemo {

src/material-experimental/config.bzl

@@ -27,6 +27,7 @@ entryPoints = [
     "mdc-table",
     "mdc-tabs",
     "popover-edit",
+    "selection",
 ]
 
 # List of all non-testing entry-points of the Angular material-experimental package.

src/material-experimental/selection/BUILD.bazel

@@ -0,0 +1,35 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "sass_binary", "sass_library")
+
+ng_module(
+    name = "selection",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    assets = [":selection_column_scss"],
+    module_name = "@angular/material-experimental/selection",
+    deps = [
+        "//src/cdk-experimental/selection",
+        "//src/material/checkbox",
+        "//src/material/table",
+        "@npm//@angular/core",
+    ],
+)
+
+sass_library(
+    name = "selection_scss_lib",
+    srcs = glob(["**/_*.scss"]),
+    deps = [],
+)
+
+sass_binary(
+    name = "selection_column_scss",
+    src = "selection-column.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+    deps = [
+    ],
+)

src/material-experimental/selection/_selection.scss

@@ -0,0 +1,3 @@
+@mixin mat-selection-theme($theme) {}
+
+@mixin mat-selection-typography($config) {}

src/material-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/material-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';