Single Selection list
-mat-list demo
+ + + +
+
diff --git a/src/dev-app/mdc-list/mdc-list-demo.scss b/src/dev-app/mdc-list/mdc-list-demo.scss
new file mode 100644
index 000000000000..fc16b362cfc1
--- /dev/null
+++ b/src/dev-app/mdc-list/mdc-list-demo.scss
@@ -0,0 +1,27 @@
+.demo-list {
+ display: flex;
+ flex-flow: row wrap;
+
+ .mat-mdc-list-base {
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ width: 350px;
+ margin: 20px 20px 0 0;
+ }
+
+ h2 {
+ margin-top: 20px;
+ }
+
+ .mat-icon {
+ color: rgba(0, 0, 0, 0.12);
+ }
+
+ .mat-mdc-list-icon {
+ color: white;
+ background: rgba(0, 0, 0, 0.3);
+ }
+}
+
+.demo-secondary-text {
+ color: rgba(0, 0, 0, 0.54);
+}
diff --git a/src/dev-app/mdc-list/mdc-list-demo.ts b/src/dev-app/mdc-list/mdc-list-demo.ts
new file mode 100644
index 000000000000..68ec758a79a1
--- /dev/null
+++ b/src/dev-app/mdc-list/mdc-list-demo.ts
@@ -0,0 +1,78 @@
+/**
+ * @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 {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'mdc-list-demo',
+ templateUrl: 'mdc-list-demo.html',
+ styleUrls: ['mdc-list-demo.css'],
+})
+export class MdcListDemo {
+ items: string[] = [
+ 'Pepper',
+ 'Salt',
+ 'Paprika'
+ ];
+
+ contacts: {name: string, headline: string}[] = [
+ {name: 'Nancy', headline: 'Software engineer'},
+ {name: 'Mary', headline: 'TPM'},
+ {name: 'Bobby', headline: 'UX designer'}
+ ];
+
+ messages: {from: string, subject: string, message: string, image: string}[] = [
+ {
+ from: 'Nancy',
+ subject: 'Brunch?',
+ message: 'Did you want to go on Sunday? I was thinking that might work.',
+ image: 'https://angular.io/generated/images/bios/julie-ralph.jpg'
+ },
+ {
+ from: 'Mary',
+ subject: 'Summer BBQ',
+ message: 'Wish I could come, but I have some prior obligations.',
+ image: 'https://angular.io/generated/images/bios/juleskremer.jpg'
+ },
+ {
+ from: 'Bobby',
+ subject: 'Oui oui',
+ message: 'Do you have Paris reservations for the 15th? I just booked!',
+ image: 'https://angular.io/generated/images/bios/jelbourn.jpg'
+ }
+ ];
+
+ links: {name: string}[] = [
+ {name: 'Inbox'},
+ {name: 'Outbox'},
+ {name: 'Spam'},
+ {name: 'Trash'}
+
+ ];
+
+ thirdLine = false;
+ infoClicked = false;
+ selectionListDisabled = false;
+ selectionListRippleDisabled = false;
+
+ selectedOptions: string[] = ['apples'];
+ changeEventCount = 0;
+ modelChangeEventCount = 0;
+
+ onSelectedOptionsChange(values: string[]) {
+ this.selectedOptions = values;
+ this.modelChangeEventCount++;
+ }
+
+ favoriteOptions: string[] = [];
+
+ alertItem(msg: string) {
+ alert(msg);
+ }
+}
diff --git a/src/material-experimental/mdc-list/BUILD.bazel b/src/material-experimental/mdc-list/BUILD.bazel
index f3a711221031..c5f15a2c660a 100644
--- a/src/material-experimental/mdc-list/BUILD.bazel
+++ b/src/material-experimental/mdc-list/BUILD.bazel
@@ -22,6 +22,7 @@ ng_module(
assets = [":list_scss"] + glob(["**/*.html"]),
module_name = "@angular/material-experimental/mdc-list",
deps = [
+ "//src/material/divider",
"@npm//@angular/core",
"@npm//@angular/forms",
"@npm//@material/list",
diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/src/material-experimental/mdc-list/_list-theme.scss
index 9bff8ce892c1..03e3f7729e96 100644
--- a/src/material-experimental/mdc-list/_list-theme.scss
+++ b/src/material-experimental/mdc-list/_list-theme.scss
@@ -1,5 +1,14 @@
+@import '@material/list/mixins.import';
+@import '../mdc-helpers/mdc-helpers';
+
@mixin mat-list-theme-mdc($theme) {
+ @include mat-using-mdc-theme($theme) {
+ @include mdc-list-without-ripple($query: $mat-theme-styles-query);
+ }
}
-@mixin mat-list-typography-mdc($config) {
+@mixin mat-list-typography-mdc($config: null) {
+ @include mat-using-mdc-typography($config) {
+ @include mdc-list-without-ripple($query: $mat-typography-styles-query);
+ }
}
diff --git a/src/material-experimental/mdc-list/action-list.ts b/src/material-experimental/mdc-list/action-list.ts
index 914b7ea216ad..b407dee1cd7b 100644
--- a/src/material-experimental/mdc-list/action-list.ts
+++ b/src/material-experimental/mdc-list/action-list.ts
@@ -12,9 +12,9 @@ import {MatListBase} from './list-base';
@Component({
selector: 'mat-action-list',
exportAs: 'matActionList',
- templateUrl: 'list.html',
+ template: '
+
+
+ {{item}}
+
+
+
+
+
+
+
+
+
+
+ ![Image of {{message.from}}]()
+
+
+
+
+
+
+ Normal lists
+ +Items
+{{contact.name}}
+extra line
+{{contact.headline}}
+Today
+{{message.from}}
++ {{message.subject}} -- + {{message.message}} +
+{{message.from}}
+{{message.subject}}
+{{message.message}}
+
+
+
+ {{item}}
+
+
+
+
+
+
+
+
+
+
+ ![Image of {{message.from}}]()
+
+
+
+ Dense lists
+Items
+{{contact.name}}
+{{contact.headline}}
+Today
+{{message.from}}
+{{message.subject}}
+{{message.message}}
+
+
+
+ {{ link.name }}
+
+
+
+
+ {{ link.name }}
+
+
+
+
+
+ folder
+ {{ link.name }}
+ Description
+
+
+
+ {{ link.name }}
+
+
+
+
+
+ Nav lists
+
+ More info!
+
+
+
+
+
+
+
+ Action list
+
+
+Selection list
+ + TODO: Implement MDC-based selection list. +- `, since we use `