feat(list): allow avatar in selection list options

Author: tinayuangao

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

@@ -119,6 +119,20 @@ <h3 mat-subheader>Groceries</h3>
       <mat-list-option value="strawberries">Strawberries</mat-list-option>
     </mat-selection-list>
 
+    <mat-selection-list>
+      <h3 mat-subheader>Dogs</h3>
+
+      <mat-list-option checkboxPosition="before">
+        <img matListAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg">
+        <span matLine>Shiba Inu</span>
+      </mat-list-option>
+
+      <mat-list-option checkboxPosition="after">
+        <img matListAvatar src="https://material.angular.io/assets/img/examples/shiba2.jpg">
+        <span matLine>Other Shiba Inu</span>
+      </mat-list-option>
+    </mat-selection-list>
+
     <p>Selected: {{selectedOptions | json}}</p>
     <p>Change Event Count {{changeEventCount}}</p>
     <p>Model Change Event Count {{modelChangeEventCount}}</p>

src/lib/list/list-option.html

@@ -12,4 +12,7 @@
 
   <div class="mat-list-text" #text><ng-content></ng-content></div>
 
+  <ng-content select="[mat-list-avatar], [mat-list-icon], [matListAvatar], [matListIcon]">
+  </ng-content>
+
 </div>

src/lib/list/list.scss

@@ -127,6 +127,31 @@ $mat-list-item-inset-divider-offset: 72px;
     }
   }
 
+  // If avatar is the 4th item, it means the list-item has both checkbox and avatar-icon.
+  // This means that there should be a margin for the mat-list-avatar on the start-side.
+  .mat-list-item-content .mat-list-avatar:nth-child(4) {
+    margin-right: 0;
+    margin-left: $mat-list-side-padding;
+
+    [dir='rtl'] & {
+      margin-right: $mat-list-side-padding;
+      margin-left: 0;
+    }
+  }
+
+  // Reversed content is mainly used by the MatSelectionList for displaying the checkbox at the
+  // end of the list option. If avatar is the 4th item, it means the list-item has both checkbox
+  // and avatar-icon. There needs to be a padding for the mat-list-avatar on the end-side.
+  .mat-list-item-content-reverse .mat-list-avatar:nth-child(4) {
+    margin-left: 0;
+    margin-right: $mat-list-side-padding;
+
+    [dir='rtl'] & {
+      margin-right: 0;
+      margin-left: $mat-list-side-padding;
+    }
+  }
+
   .mat-list-avatar {
     flex-shrink: 0;
     width: $avatar-size;

src/lib/list/selection-list.ts

@@ -16,6 +16,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ContentChild,
   ContentChildren,
   ElementRef,
   EventEmitter,
@@ -39,6 +40,7 @@ import {
 } from '@angular/material/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {Subscription} from 'rxjs/Subscription';
+import {MatListAvatarCssMatStyler} from './list';
 
 
 /** @docs-private */
@@ -97,6 +99,7 @@ export class MatSelectionListChange {
     'tabindex': '-1',
     '[class.mat-list-item-disabled]': 'disabled',
     '[class.mat-list-item-focus]': '_hasFocus',
+    '[class.mat-list-item-with-avatar]': '_avatar',
     '[attr.aria-selected]': 'selected.toString()',
     '[attr.aria-disabled]': 'disabled.toString()',
   },
@@ -113,6 +116,7 @@ export class MatListOption extends _MatListOptionMixinBase
   /** Whether the option has focus. */
   _hasFocus: boolean = false;
 
+  @ContentChild(MatListAvatarCssMatStyler) _avatar: MatListAvatarCssMatStyler;
   @ContentChildren(MatLine) _lines: QueryList<MatLine>;
 
   /** DOM element containing the item's text. */