demo(mdc-list): Add a demo page for the MDC-based list

.github/CODEOWNERS

@@ -164,6 +164,7 @@
 /src/dev-app/mdc-checkbox/**                       @mmalerba
 /src/dev-app/mdc-chips/**                          @mmalerba
 /src/dev-app/mdc-input/**                          @devversion @mmalerba
+/src/dev-app/mdc-list/**                           @mmalerba
 /src/dev-app/mdc-menu/**                           @crisbeto
 /src/dev-app/mdc-progress-bar/**                   @crisbeto
 /src/dev-app/mdc-radio/**                          @mmalerba

package.json

@@ -55,7 +55,7 @@
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.9",
-    "material-components-web": "5.0.0",
+    "material-components-web": "^6.0.0-canary.265ecbad5.0",
     "rxjs": "^6.5.3",
     "systemjs": "0.19.43",
     "tslib": "^1.10.0",

packages.bzl

@@ -2,7 +2,7 @@
 # all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
 # version for the placeholders.
 ANGULAR_PACKAGE_VERSION = "^9.0.0 || ^10.0.0-0"
-MDC_PACKAGE_VERSION = "^4.0.0"
+MDC_PACKAGE_VERSION = "^6.0.0-canary.265ecbad5.0"
 TSLIB_PACKAGE_VERSION = "^1.9.0"
 
 VERSION_PLACEHOLDER_REPLACEMENTS = {

src/dev-app/BUILD.bazel

@@ -48,6 +48,7 @@ ng_module(
         "//src/dev-app/mdc-checkbox",
         "//src/dev-app/mdc-chips",
         "//src/dev-app/mdc-input",
+        "//src/dev-app/mdc-list",
         "//src/dev-app/mdc-menu",
         "//src/dev-app/mdc-progress-bar",
         "//src/dev-app/mdc-radio",

src/dev-app/dev-app/dev-app-layout.ts

@@ -75,6 +75,7 @@ export class DevAppLayout {
     {name: 'MDC Checkbox', route: '/mdc-checkbox'},
     {name: 'MDC Chips', route: '/mdc-chips'},
     {name: 'MDC Input', route: '/mdc-input'},
+    {name: 'MDC List', route: '/mdc-list'},
     {name: 'MDC Menu', route: '/mdc-menu'},
     {name: 'MDC Radio', route: '/mdc-radio'},
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},

src/dev-app/dev-app/routes.ts

@@ -68,6 +68,7 @@ export const DEV_APP_ROUTES: Routes = [
   },
   {path: 'mdc-chips', loadChildren: 'mdc-chips/mdc-chips-demo-module#MdcChipsDemoModule'},
   {path: 'mdc-input', loadChildren: 'mdc-input/mdc-input-demo-module#MdcInputDemoModule'},
+  {path: 'mdc-list', loadChildren: 'mdc-list/mdc-list-demo-module#MdcListDemoModule'},
   {path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},
   {path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},
   {

src/dev-app/list/list-demo.html

@@ -162,11 +162,11 @@ <h3 mat-subheader>Dogs</h3>
       <button mat-raised-button (click)="groceries.deselectAll()">Deselect all</button>
     </p>
   </div>
-  
+
   <div>
     <h2>Single Selection list</h2>
 
-    <mat-selection-list #favorite 
+    <mat-selection-list #favorite
                         [(ngModel)]="favoriteOptions"
                         [multiple]="false"
                         color="primary">

src/dev-app/mdc-list/BUILD.bazel

@@ -0,0 +1,24 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+ng_module(
+    name = "mdc-list",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "mdc-list-demo.html",
+        ":mdc_list_demo_scss",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-button",
+        "//src/material-experimental/mdc-checkbox",
+        "//src/material-experimental/mdc-list",
+        "//src/material/icon",
+        "@npm//@angular/router",
+    ],
+)
+
+sass_binary(
+    name = "mdc_list_demo_scss",
+    src = "mdc-list-demo.scss",
+)

src/dev-app/mdc-list/mdc-list-demo-module.ts

@@ -0,0 +1,32 @@
+/**
+ * @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 {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material-experimental/mdc-button';
+import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
+import {MatListModule} from '@angular/material-experimental/mdc-list';
+import {MatIconModule} from '@angular/material/icon';
+import {RouterModule} from '@angular/router';
+import {MdcListDemo} from './mdc-list-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatIconModule,
+    MatListModule,
+    RouterModule.forChild([{path: '', component: MdcListDemo}]),
+  ],
+  declarations: [MdcListDemo],
+})
+export class MdcListDemoModule {
+}

src/dev-app/mdc-list/mdc-list-demo.html

@@ -0,0 +1,121 @@
+
+<h1>mat-list demo</h1>
+
+<button mat-raised-button (click)="thirdLine=!thirdLine">Show third line</button>
+
+<div class="demo-list">
+  <div>
+    <h2>Normal lists</h2>
+
+    <mat-list>
+      <h3 mat-subheader>Items</h3>
+      <mat-list-item *ngFor="let item of items">
+        {{item}}
+      </mat-list-item>
+    </mat-list>
+
+    <mat-list>
+      <mat-list-item *ngFor="let contact of contacts">
+        <h3 mat-line>{{contact.name}}</h3>
+        <p mat-line *ngIf="thirdLine">extra line</p>
+        <p mat-line class="demo-secondary-text">{{contact.headline}}</p>
+      </mat-list-item>
+    </mat-list>
+
+    <mat-list>
+      <h3 mat-subheader>Today</h3>
+      <mat-list-item *ngFor="let message of messages; last as last">
+        <img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
+        <h4 mat-line>{{message.from}}</h4>
+        <p mat-line>
+          <span>{{message.subject}} -- </span>
+          <span class="demo-secondary-text">{{message.message}}</span>
+        </p>
+        <mat-divider inset *ngIf="!last"></mat-divider>
+      </mat-list-item>
+      <mat-divider></mat-divider>
+      <mat-list-item *ngFor="let message of messages">
+        <h4 mat-line>{{message.from}}</h4>
+        <p mat-line> {{message.subject}} </p>
+        <p mat-line class="demo-secondary-text">{{message.message}} </p>
+      </mat-list-item>
+    </mat-list>
+  </div>
+
+  <div>
+    <h2>Dense lists</h2>
+    <mat-list dense>
+      <h3 mat-subheader>Items</h3>
+      <mat-list-item *ngFor="let item of items">
+        {{item}}
+      </mat-list-item>
+    </mat-list>
+
+    <mat-list dense>
+      <mat-list-item *ngFor="let contact of contacts">
+        <h3 mat-line>{{contact.name}}</h3>
+        <p mat-line class="demo-secondary-text">{{contact.headline}}</p>
+      </mat-list-item>
+    </mat-list>
+
+    <mat-list dense>
+      <h3 mat-subheader>Today</h3>
+      <mat-list-item *ngFor="let message of messages">
+        <img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
+        <h4 mat-line>{{message.from}}</h4>
+        <p mat-line> {{message.subject}} </p>
+        <p mat-line class="demo-secondary-text">{{message.message}} </p>
+      </mat-list-item>
+    </mat-list>
+  </div>
+  <div>
+    <h2>Nav lists</h2>
+    <mat-nav-list>
+      <a mat-list-item *ngFor="let link of links" href="http://www.google.com">
+        {{ link.name }}
+      </a>
+    </mat-nav-list>
+    <div *ngIf="infoClicked">
+      More info!
+    </div>
+    <mat-nav-list>
+      <mat-list-item *ngFor="let link of links">
+        <a mat-line href="http://www.google.com">{{ link.name }}</a>
+        <button mat-icon-button (click)="infoClicked=!infoClicked">
+          <mat-icon>info</mat-icon>
+        </button>
+      </mat-list-item>
+    </mat-nav-list>
+    <mat-nav-list>
+      <a mat-list-item *ngFor="let link of links; last as last" href="http://www.google.com">
+        <mat-icon mat-list-icon>folder</mat-icon>
+        <span mat-line>{{ link.name }}</span>
+        <span mat-line class="demo-secondary-text"> Description </span>
+        <mat-divider inset *ngIf="!last"></mat-divider>
+      </a>
+    </mat-nav-list>
+    <mat-nav-list dense>
+      <mat-list-item *ngFor="let link of links">
+        <a mat-line href="http://www.google.com">{{ link.name }}</a>
+        <button mat-icon-button (click)="infoClicked=!infoClicked">
+          <mat-icon class="material-icons">info</mat-icon>
+        </button>
+      </mat-list-item>
+    </mat-nav-list>
+  </div>
+
+  <div>
+    <h2>Action list</h2>
+    <mat-action-list>
+      <button mat-list-item *ngFor="let link of links" (click)="alertItem(link.name)">
+        {{link.name}}
+      </button>
+    </mat-action-list>
+  </div>
+
+  <div>
+    <h2>Selection list</h2>
+
+    TODO: Implement MDC-based selection list.
+  </div>
+</div>

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);
+}

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);
+  }
+}

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",

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);
+  }
 }

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: '<ng-content></ng-content>',
   host: {
-    'class': 'mat-mdc-action-list mat-mdc-list-base',
+    'class': 'mat-mdc-action-list mat-mdc-list-base mdc-list',
   },
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,

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

@@ -1 +1 @@
-TODO: Implement.
+<span class="mdc-list-item__text"><ng-content></ng-content></span>