Skip to content

Commit 4eb0e64

Browse files
mmalerbammalerba
committed
feat(material-experimental/mdc-list): Add scaffolding for MDC-based list
1 parent d3357b8 commit 4eb0e64

25 files changed

+371
-1
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,11 +96,11 @@
9696
/src/material-experimental/mdc-chips/** @mmalerba
9797
/src/material-experimental/mdc-dialog/** @devversion
9898
/src/material-experimental/mdc-helpers/** @mmalerba
99+
/src/material-experimental/mdc-list/** @mmalerba
99100
/src/material-experimental/mdc-menu/** @crisbeto
100101
/src/material-experimental/mdc-select/** @crisbeto
101102
/src/material-experimental/mdc-progress-spinner/** @andrewseguin
102103
/src/material-experimental/mdc-progress-bar/** @andrewseguin
103-
# Note to implementer: please repossess
104104
/src/material-experimental/mdc-radio/** @mmalerba
105105
/src/material-experimental/mdc-snackbar/** @opozo
106106
/src/material-experimental/mdc-slide-toggle/** @crisbeto

‎src/material-experimental/config.bzl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ entryPoints = [
88
"mdc-chips",
99
"mdc-chips/testing",
1010
"mdc-helpers",
11+
"mdc-list",
1112
"mdc-menu",
1213
"mdc-menu/testing",
1314
"mdc-progress-bar",

‎src/material-experimental/mdc-list/BUILD.bazel

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
package(default_visibility = ["//visibility:public"])
2+
3+
load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
4+
load(
5+
"//tools:defaults.bzl",
6+
"ng_e2e_test_library",
7+
"ng_module",
8+
"ng_test_library",
9+
"ng_web_test_suite",
10+
"sass_binary",
11+
"sass_library",
12+
)
13+
14+
ng_module(
15+
name = "mdc-list",
16+
srcs = glob(
17+
["**/*.ts"],
18+
exclude = [
19+
"**/*.spec.ts",
20+
],
21+
),
22+
assets = [":list_scss"] + glob(["**/*.html"]),
23+
module_name = "@angular/material-experimental/mdc-list",
24+
deps = [
25+
"@npm//@angular/core",
26+
"@npm//@angular/forms",
27+
"@npm//@material/list",
28+
],
29+
)
30+
31+
sass_library(
32+
name = "mdc_list_scss_lib",
33+
srcs = glob(["**/_*.scss"]),
34+
deps = [
35+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
36+
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
37+
],
38+
)
39+
40+
sass_binary(
41+
name = "list_scss",
42+
src = "list.scss",
43+
include_paths = [
44+
"external/npm/node_modules",
45+
],
46+
deps = [
47+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
48+
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
49+
],
50+
)
51+
52+
ng_test_library(
53+
name = "list_tests_lib",
54+
srcs = glob(
55+
["**/*.spec.ts"],
56+
exclude = ["**/*.e2e.spec.ts"],
57+
),
58+
deps = [
59+
":mdc-list",
60+
"//src/cdk/testing/private",
61+
"//src/cdk/testing/testbed",
62+
"@npm//@angular/platform-browser",
63+
],
64+
)
65+
66+
ng_web_test_suite(
67+
name = "unit_tests",
68+
static_files = [
69+
"@npm//:node_modules/@material/list/dist/mdc.list.js",
70+
],
71+
deps = [
72+
":list_tests_lib",
73+
"//src/material-experimental:mdc_require_config.js",
74+
],
75+
)
76+
77+
ng_e2e_test_library(
78+
name = "e2e_test_sources",
79+
srcs = glob(["**/*.e2e.spec.ts"]),
80+
deps = [
81+
"//src/cdk/testing/private/e2e",
82+
],
83+
)
84+
85+
e2e_test_suite(
86+
name = "e2e_tests",
87+
deps = [
88+
":e2e_test_sources",
89+
"//src/cdk/testing/private/e2e",
90+
],
91+
)

‎src/material-experimental/mdc-list/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
TODO: WIP

‎src/material-experimental/mdc-list/_mdc-list.scss

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

‎src/material-experimental/mdc-list/action-list.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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+
import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
10+
import {MatListBase} from './list-base';
11+
12+
@Component({
13+
selector: 'mat-action-list',
14+
exportAs: 'matActionList',
15+
templateUrl: 'list.html',
16+
host: {
17+
'class': 'mat-mdc-action-list mat-mdc-list-base',
18+
},
19+
styleUrls: ['list.css'],
20+
encapsulation: ViewEncapsulation.None,
21+
changeDetection: ChangeDetectionStrategy.OnPush,
22+
})
23+
export class MatActionList extends MatListBase {}

‎src/material-experimental/mdc-list/index.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
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';

‎src/material-experimental/mdc-list/list-base.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
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 class MatListBase {}
10+
11+
export class MatListItemBase {}

‎src/material-experimental/mdc-list/list-item.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
TODO: Implement.

‎src/material-experimental/mdc-list/list-option.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
TODO: Implement.

‎src/material-experimental/mdc-list/list.e2e.spec.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
it('should have e2e tests', () => {
2+
// TODO: Implement.
3+
});

‎src/material-experimental/mdc-list/list.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
TODO: Implement.

‎src/material-experimental/mdc-list/list.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// TODO: implement.

‎src/material-experimental/mdc-list/list.spec.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
it('should have unit tests', () => {
2+
// TODO: Implement.
3+
});

‎src/material-experimental/mdc-list/list.ts

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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+
import {ChangeDetectionStrategy, Component, Directive, ViewEncapsulation} from '@angular/core';
10+
import {MatListBase, MatListItemBase} from './list-base';
11+
12+
/**
13+
* Directive whose purpose is to add the mat- CSS styling to this selector.
14+
* @docs-private
15+
*/
16+
@Directive({
17+
selector: '[mat-list-avatar], [matListAvatar]',
18+
host: {'class': 'mat-mdc-list-avatar'}
19+
})
20+
export class MatListAvatarCssMatStyler {}
21+
22+
/**
23+
* Directive whose purpose is to add the mat- CSS styling to this selector.
24+
* @docs-private
25+
*/
26+
@Directive({
27+
selector: '[mat-list-icon], [matListIcon]',
28+
host: {'class': 'mat-mdc-list-icon'}
29+
})
30+
export class MatListIconCssMatStyler {}
31+
32+
/**
33+
* Directive whose purpose is to add the mat- CSS styling to this selector.
34+
* @docs-private
35+
*/
36+
@Directive({
37+
selector: '[mat-subheader], [matSubheader]',
38+
host: {'class': 'mat-mdc-subheader'}
39+
})
40+
export class MatListSubheaderCssMatStyler {}
41+
42+
@Component({
43+
selector: 'mat-list',
44+
exportAs: 'matList',
45+
templateUrl: 'list.html',
46+
host: {
47+
'class': 'mat-mdc-list mat-mdc-list-base',
48+
},
49+
styleUrls: ['list.css'],
50+
encapsulation: ViewEncapsulation.None,
51+
changeDetection: ChangeDetectionStrategy.OnPush,
52+
})
53+
export class MatList extends MatListBase {}
54+
55+
@Component({
56+
selector: 'mat-list-item, a[mat-list-item], button[mat-list-item]',
57+
exportAs: 'matListItem',
58+
host: {
59+
'class': 'mat-mdc-list-item',
60+
},
61+
templateUrl: 'list-item.html',
62+
encapsulation: ViewEncapsulation.None,
63+
changeDetection: ChangeDetectionStrategy.OnPush,
64+
})
65+
export class MatListItem extends MatListItemBase {}

‎src/material-experimental/mdc-list/module.ts

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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+
import {NgModule} from '@angular/core';
10+
import {MatActionList} from './action-list';
11+
import {
12+
MatList,
13+
MatListAvatarCssMatStyler,
14+
MatListIconCssMatStyler,
15+
MatListItem,
16+
MatListSubheaderCssMatStyler,
17+
} from './list';
18+
import {MatNavList} from './nav-list';
19+
import {MatListOption, MatSelectionList} from './selection-list';
20+
21+
@NgModule({
22+
exports: [
23+
MatList,
24+
MatActionList,
25+
MatNavList,
26+
MatSelectionList,
27+
MatListItem,
28+
MatListOption,
29+
MatListAvatarCssMatStyler,
30+
MatListIconCssMatStyler,
31+
MatListSubheaderCssMatStyler,
32+
],
33+
declarations: [
34+
MatList,
35+
MatActionList,
36+
MatNavList,
37+
MatSelectionList,
38+
MatListItem,
39+
MatListOption,
40+
MatListAvatarCssMatStyler,
41+
MatListIconCssMatStyler,
42+
MatListSubheaderCssMatStyler,
43+
]
44+
})
45+
export class MatListModule {}

‎src/material-experimental/mdc-list/nav-list.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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+
import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
10+
import {MatList} from '@angular/material-experimental/mdc-list/list';
11+
import {MatListBase} from './list-base';
12+
13+
@Component({
14+
selector: 'mat-nav-list',
15+
/**
16+
* @deprecated `matList` export will be removed, use `matNavList`
17+
* @breaking-change 11.0.0
18+
*/
19+
exportAs: 'matNavList, matList',
20+
templateUrl: 'list.html',
21+
host: {
22+
'class': 'mat-mdc-nav-list mat-mdc-list-base',
23+
},
24+
styleUrls: ['list.css'],
25+
encapsulation: ViewEncapsulation.None,
26+
changeDetection: ChangeDetectionStrategy.OnPush,
27+
providers: [
28+
/**
29+
* @deprecated Provider for `MatList` will be removed, use `MatNavList` instead.
30+
* @breaking-change 11.0.0
31+
*/
32+
{ provide: MatList, useExisting: MatNavList }
33+
]
34+
})
35+
export class MatNavList extends MatListBase {}

‎src/material-experimental/mdc-list/public-api.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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 './list';
10+
export * from './action-list';
11+
export * from './nav-list';
12+
export * from './selection-list';
13+
export * from './module';

‎src/material-experimental/mdc-list/selection-list.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
TODO: Implement.

‎src/material-experimental/mdc-list/selection-list.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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+
import {ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation} from '@angular/core';
10+
import {NG_VALUE_ACCESSOR} from '@angular/forms';
11+
import {MatListBase, MatListItemBase} from './list-base';
12+
13+
const MAT_SELECTION_LIST_VALUE_ACCESSOR: any = {
14+
provide: NG_VALUE_ACCESSOR,
15+
useExisting: forwardRef(() => MatSelectionList),
16+
multi: true
17+
};
18+
19+
/** Change event that is being fired whenever the selected state of an option changes. */
20+
export class MatSelectionListChange {
21+
constructor(
22+
/** Reference to the selection list that emitted the event. */
23+
public source: MatSelectionList,
24+
/** Reference to the option that has been changed. */
25+
public option: MatListOption) {}
26+
}
27+
28+
@Component({
29+
selector: 'mat-selection-list',
30+
exportAs: 'matSelectionList',
31+
host: {
32+
'class': 'mat-mdc-selection-list mat-mdc-list-base'
33+
},
34+
templateUrl: 'selection-list.html',
35+
styleUrls: ['list.css'],
36+
encapsulation: ViewEncapsulation.None,
37+
providers: [MAT_SELECTION_LIST_VALUE_ACCESSOR],
38+
changeDetection: ChangeDetectionStrategy.OnPush
39+
})
40+
export class MatSelectionList extends MatListBase {}
41+
42+
@Component({
43+
selector: 'mat-list-option',
44+
exportAs: 'matListOption',
45+
host: {
46+
'class': 'mat-mdc-list-item mat-mdc-list-option',
47+
},
48+
templateUrl: 'list-option.html',
49+
encapsulation: ViewEncapsulation.None,
50+
changeDetection: ChangeDetectionStrategy.OnPush,
51+
})
52+
export class MatListOption extends MatListItemBase {}

0 commit comments

Comments
 (0)