Skip to content

Commit 371cd30

Browse files
yifangeyifange
committed
Add Material versions for CdkSelection directives and components
1 parent b61df23 commit 371cd30

24 files changed

+581
-2
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@
114114
/src/material-experimental/mdc-theming/** @mmalerba
115115
/src/material-experimental/mdc-typography/** @mmalerba
116116
/src/material-experimental/popover-edit/** @kseamon @andrewseguin
117+
/src/material-experimental/selection/** @yifange @jelbourn
117118

118119
# CDK experimental package
119120
/src/cdk-experimental/* @jelbourn

‎src/components-examples/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ EXAMPLE_PACKAGES = [
4444
"//src/components-examples/material/badge",
4545
"//src/components-examples/material/autocomplete",
4646
"//src/components-examples/material-experimental/popover-edit",
47+
"//src/components-examples/material-experimental/selection",
4748
"//src/components-examples/cdk/tree",
4849
"//src/components-examples/cdk/text-field",
4950
"//src/components-examples/cdk/table",

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
package(default_visibility = ["//visibility:public"])
2+
3+
load("//tools:defaults.bzl", "ng_module")
4+
5+
ng_module(
6+
name = "selection",
7+
srcs = glob(["**/*.ts"]),
8+
assets = glob([
9+
"**/*.html",
10+
"**/*.css",
11+
]),
12+
module_name = "@angular/components-examples/material-experimental/selection",
13+
deps = [
14+
"//src/cdk/collections",
15+
"//src/cdk/table",
16+
"//src/material-experimental/selection",
17+
"//src/material/checkbox",
18+
"@npm//@angular/forms",
19+
],
20+
)
21+
22+
filegroup(
23+
name = "source-files",
24+
srcs = glob([
25+
"**/*.html",
26+
"**/*.css",
27+
"**/*.ts",
28+
]),
29+
)

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import {MatSelectionModule} from '@angular/material-experimental/selection';
2+
import {MatTableModule} from '@angular/material/table';
3+
import {CommonModule} from '@angular/common';
4+
import {NgModule} from '@angular/core';
5+
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
6+
import {MatCheckboxModule} from '@angular/material/checkbox';
7+
8+
import {MatSelectionColumnExample} from './mat-selection-column/mat-selection-column-example';
9+
import {MatSelectionListExample} from './mat-selection-list/mat-selection-list-example';
10+
11+
export {
12+
MatSelectionListExample,
13+
MatSelectionColumnExample,
14+
};
15+
16+
const EXAMPLES = [
17+
MatSelectionListExample,
18+
MatSelectionColumnExample,
19+
];
20+
21+
@NgModule({
22+
imports: [
23+
MatSelectionModule,
24+
MatTableModule,
25+
CommonModule,
26+
FormsModule,
27+
ReactiveFormsModule,
28+
MatCheckboxModule,
29+
],
30+
declarations: EXAMPLES,
31+
exports: EXAMPLES,
32+
})
33+
export class MatSelectionExamplesModule {
34+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.example-table {
2+
width: 100%;
3+
}

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
Selected: {{selected}}
2+
<table class="example-table" mat-table [dataSource]="dataSource" matSelection [matSelectionMultiple]="true" (matSelectionChange)="selectionChanged($event)">
3+
<mat-selection-column matSelectionColumnName="select"></mat-selection-column>
4+
<!-- Position Column -->
5+
<ng-container matColumnDef="position">
6+
<th mat-header-cell *matHeaderCellDef> No. </th>
7+
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
8+
</ng-container>
9+
10+
<!-- Name Column -->
11+
<ng-container matColumnDef="name">
12+
<th mat-header-cell *matHeaderCellDef> Name </th>
13+
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
14+
</ng-container>
15+
16+
<!-- Weight Column -->
17+
<ng-container matColumnDef="weight">
18+
<th mat-header-cell *matHeaderCellDef> Weight </th>
19+
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
20+
</ng-container>
21+
22+
<!-- Symbol Column -->
23+
<ng-container matColumnDef="symbol">
24+
<th mat-header-cell *matHeaderCellDef> Symbol </th>
25+
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
26+
</ng-container>
27+
28+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
29+
<tr mat-row *matRowDef="let row; columns: displayedColumns;" matRowSelection [matRowSelectionValue]="row"></tr>
30+
</table>

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import {SelectionChange} from '@angular/cdk-experimental/selection';
2+
import {Component, OnDestroy} from '@angular/core';
3+
import {ReplaySubject} from 'rxjs';
4+
5+
/**
6+
* @title Mat Selection Column on a Mat table.
7+
*/
8+
@Component({
9+
selector: 'mat-selection-column-example',
10+
templateUrl: 'mat-selection-column-example.html',
11+
styleUrls: ['mat-selection-column-example.css'],
12+
})
13+
export class MatSelectionColumnExample implements OnDestroy {
14+
private readonly _destroyed = new ReplaySubject(1);
15+
16+
displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
17+
dataSource = ELEMENT_DATA;
18+
selected: string[] = [];
19+
20+
ngOnDestroy() {
21+
this._destroyed.next();
22+
this._destroyed.complete();
23+
}
24+
25+
selectionChanged(event: SelectionChange<PeriodicElement>) {
26+
this.selected = event.after.map((select) => select.value.name);
27+
}
28+
}
29+
30+
interface PeriodicElement {
31+
name: string;
32+
position: number;
33+
weight: number;
34+
symbol: string;
35+
}
36+
37+
const ELEMENT_DATA: PeriodicElement[] = [
38+
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
39+
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
40+
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
41+
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
42+
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
43+
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
44+
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
45+
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
46+
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
47+
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
48+
{position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
49+
{position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
50+
{position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
51+
{position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
52+
{position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
53+
{position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
54+
{position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
55+
{position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
56+
{position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
57+
{position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
58+
];

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<h3><code>native input</code></h3>
2+
Selected: {{selected1}}
3+
<ul matSelection [dataSource]="data" [matSelectionMultiple]="true" (matSelectionChange)="selected1 = getCurrentSelected($event)">
4+
<input type="checkbox" matSelectAll #allToggler="matSelectAll"
5+
[checked]="allToggler.checked | async"
6+
[indeterminate]="allToggler.indeterminate | async"
7+
(click)="allToggler.toggle($event)">
8+
<li *ngFor="let item of data">
9+
<input type="checkbox" matSelectionToggle #toggler="matSelectionToggle" [matSelectionToggleValue]="item"
10+
[checked]="toggler.checked | async" (click)="toggler.toggle()">
11+
{{item}}
12+
</li>
13+
</ul>
14+
15+
<h3><code>mat-checkbox</code></h3>
16+
Selected: {{selected2}}
17+
<ul matSelection [dataSource]="data" [matSelectionMultiple]="true" (matSelectionChange)="selected2 = getCurrentSelected($event)">
18+
<mat-checkbox matSelectAll #toggle1="matSelectAll" [indeterminate]="toggle1.indeterminate | async"></mat-checkbox>
19+
<li *ngFor="let item of data">
20+
<mat-checkbox matSelectionToggle [matSelectionToggleValue]="item"></mat-checkbox>
21+
{{item}}
22+
</li>
23+
</ul>
24+
25+
<h3><code>Single select with mat-checkbox</code></h3>
26+
Selected: {{selected3}}
27+
<ul matSelection [dataSource]="data" [matSelectionMultiple]="false" (matSelectionChange)="selected3 = getCurrentSelected($event)">
28+
<li *ngFor="let item of data">
29+
<mat-checkbox matSelectionToggle [matSelectionToggleValue]="item"></mat-checkbox>
30+
{{item}}
31+
</li>
32+
</ul>
33+
34+
<h3><code>with trackBy</code></h3>
35+
Selected: {{selected4}}
36+
<ul matSelection [dataSource]="data" [matSelectionMultiple]="true" [trackBy]="trackByFn" (matSelectionChange)="selected4 = getCurrentSelected($event)">
37+
<mat-checkbox matSelectAll #toggle2="matSelectAll" [indeterminate]="toggle2.indeterminate | async"></mat-checkbox>
38+
<li *ngFor="let item of data; index as i; trackBy: trackByFn">
39+
<mat-checkbox matSelectionToggle [matSelectionToggleValue]="item" [matSelectionToggleIndex]="i"></mat-checkbox>
40+
{{item}}
41+
</li>
42+
</ul>
43+
44+
<button (click)="changeElementName()">Change element names and the already selected stays</button>
45+
<button (click)="reset()">reset</button>

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import {SelectionChange} from '@angular/cdk-experimental/selection';
2+
import {Component, OnDestroy} from '@angular/core';
3+
import {ReplaySubject} from 'rxjs';
4+
5+
/**
6+
* @title Mat Selection on a simple list.
7+
*/
8+
@Component({
9+
selector: 'mat-selection-list-example',
10+
templateUrl: 'mat-selection-list-example.html',
11+
})
12+
export class MatSelectionListExample implements OnDestroy {
13+
private readonly _destroyed = new ReplaySubject(1);
14+
15+
data = ELEMENT_NAMES;
16+
17+
selected1: string[] = [];
18+
selected2: string[] = [];
19+
selected3: string[] = [];
20+
selected4: string[] = [];
21+
22+
ngOnDestroy() {
23+
this._destroyed.next();
24+
this._destroyed.complete();
25+
}
26+
27+
getCurrentSelected(event: SelectionChange<string>) {
28+
return event.after.map((select) => select.value);
29+
}
30+
31+
trackByFn(index: number, value: string) {
32+
return index;
33+
}
34+
35+
changeElementName() {
36+
this.data = ELEMENT_SYMBOLS;
37+
}
38+
39+
reset() {
40+
this.data = ELEMENT_NAMES;
41+
}
42+
}
43+
44+
const ELEMENT_NAMES = [
45+
'Hydrogen', 'Helium', 'Lithium', 'Beryllium', 'Boron', 'Carbon', 'Nitrogen',
46+
'Oxygen', 'Fluorine', 'Neon', 'Sodium', 'Magnesium', 'Aluminum', 'Silicon',
47+
'Phosphorus', 'Sulfur', 'Chlorine', 'Argon', 'Potassium', 'Calcium',
48+
];
49+
50+
const ELEMENT_SYMBOLS = [
51+
'H', 'He', 'Li', 'Be', 'B', 'C', 'N', 'O', 'F', 'Ne',
52+
'Na', 'Mg', 'Al', 'Si', 'P', 'S', 'Cl', 'Ar', 'K', 'Ca'
53+
];

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
1010
import {EXAMPLE_COMPONENTS} from '@angular/components-examples';
1111
import {Component, Input} from '@angular/core';
1212

13-
console.log(EXAMPLE_COMPONENTS);
14-
1513
/** Displays a set of components-examples in a mat-accordion. */
1614
@Component({
1715
selector: 'material-example-list',

‎src/dev-app/selection/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ ng_module(
77
srcs = glob(["**/*.ts"]),
88
deps = [
99
"//src/components-examples/cdk-experimental/selection",
10+
"//src/components-examples/material-experimental/selection",
1011
"//src/dev-app/example",
1112
"@npm//@angular/forms",
1213
"@npm//@angular/router",

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
*/
88

99
import {CdkSelectionExamplesModule} from '@angular/components-examples/cdk-experimental/selection';
10+
import {MatSelectionExamplesModule} from
11+
'@angular/components-examples/material-experimental/selection';
1012
import {NgModule} from '@angular/core';
1113
import {FormsModule} from '@angular/forms';
1214
import {RouterModule} from '@angular/router';
@@ -16,6 +18,7 @@ import {SelectionDemo} from './selection-demo';
1618
@NgModule({
1719
imports: [
1820
CdkSelectionExamplesModule,
21+
MatSelectionExamplesModule,
1922
FormsModule,
2023
RouterModule.forChild([{path: '', component: SelectionDemo}]),
2124
],

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@ import {Component} from '@angular/core';
1515
1616
<h3>CDK selection column and CDK row selection with CDK table</h3>
1717
<cdk-selection-column-example></cdk-selection-column-example>
18+
19+
<h3>Mat selection with a list</h3>
20+
<mat-selection-list-example></mat-selection-list-example>
21+
22+
<h3>Mat selection column and Mat row selection with Mat table</h3>
23+
<mat-selection-column-example></mat-selection-column-example>
1824
`,
1925
})
2026
export class SelectionDemo {

‎src/material-experimental/config.bzl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ entryPoints = [
2727
"mdc-table",
2828
"mdc-tabs",
2929
"popover-edit",
30+
"selection",
3031
]
3132

3233
# List of all non-testing entry-points of the Angular material-experimental package.

‎src/material-experimental/selection/BUILD.bazel

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
package(default_visibility = ["//visibility:public"])
2+
3+
load("//tools:defaults.bzl", "ng_module", "sass_library")
4+
5+
ng_module(
6+
name = "selection",
7+
srcs = glob(
8+
["**/*.ts"],
9+
exclude = ["**/*.spec.ts"],
10+
),
11+
module_name = "@angular/material-experimental/selection",
12+
deps = [
13+
"//src/cdk-experimental/selection",
14+
"//src/material/checkbox",
15+
"//src/material/table",
16+
"@npm//@angular/core",
17+
],
18+
)
19+
20+
sass_library(
21+
name = "selection_scss_lib",
22+
srcs = glob(["**/_*.scss"]),
23+
deps = [],
24+
)

‎src/material-experimental/selection/_selection.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@mixin mat-selection-theme($theme) {}
2+
@mixin mat-selection-typography($config) {}

‎src/material-experimental/selection/index.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
export * from './public-api';
10+

‎src/material-experimental/selection/public-api.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
export * from './selection';
10+
export * from './select-all';
11+
export * from './selection-toggle';
12+
export * from './selection-column';
13+
export * from './row-selection';
14+
export * from './selection-module';

0 commit comments

Comments
 (0)