From 4053e7cdf92ed0ea546ec3db5c12acedab9794ed Mon Sep 17 00:00:00 2001
From: Yuan Gao <tinagao@google.com>
Date: Tue, 6 Mar 2018 14:45:17 -0800
Subject: [PATCH] feat(list): allow avatar in selection list options

---
 src/demo-app/list/list-demo.html | 14 +++++++++++
 src/lib/list/list-option.html    |  3 +++
 src/lib/list/list.scss           | 43 +++++++++++++++++++-------------
 src/lib/list/list.ts             |  5 ++--
 src/lib/list/selection-list.ts   |  4 +++
 5 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html
index 75796ac8de50..ac2baa38a724 100644
--- a/src/demo-app/list/list-demo.html
+++ b/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>
diff --git a/src/lib/list/list-option.html b/src/lib/list/list-option.html
index 4e97f99bb1c2..b785eca5a6e6 100644
--- a/src/lib/list/list-option.html
+++ b/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>
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index a74be2a1895f..b1fecb6124c3 100644
--- a/src/lib/list/list.scss
+++ b/src/lib/list/list.scss
@@ -102,27 +102,36 @@ $mat-list-item-inset-divider-offset: 72px;
     padding: 0;
   }
 
-  // There can be a secondary item (e.g. avatar-icon, checkbox) at the start of the
-  // list-item. This means that there should be a padding for the mat-list-text on the start-side.
-  .mat-list-item-content .mat-list-text:not(:nth-child(2)) {
-    padding-right: 0;
-    padding-left: $mat-list-side-padding;
+  &.mat-list-item-with-avatar,
+  &.mat-list-option {
+    .mat-list-item-content .mat-list-text {
+      padding-right: 0;
+      padding-left: $mat-list-side-padding;
 
-    [dir='rtl'] & {
-      padding-right: $mat-list-side-padding;
-      padding-left: 0;
+      [dir='rtl'] & {
+        padding-right: $mat-list-side-padding;
+        padding-left: 0;
+      }
     }
-  }
 
-  // Reversed content is mainly used by the MatSelectionList for displaying the checkbox at the
-  // end of the list option. Since there is a secondary item (checkbox) at the end of the
-  // option, there needs to be a padding for the mat-list-text on the end-side.
-  .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)) {
-    padding-left: 0;
-    padding-right: $mat-list-side-padding;
+    // Reversed content is mainly used by the MatSelectionList for displaying the checkbox at the
+    // end of the list option. Since there is a secondary item (checkbox) at the end of the
+    // option, there needs to be a padding for the mat-list-text on the end-side.
+    .mat-list-item-content-reverse .mat-list-text {
+      padding-left: 0;
+      padding-right: $mat-list-side-padding;
 
-    [dir='rtl'] & {
-      padding-right: 0;
+      [dir='rtl'] & {
+        padding-right: 0;
+        padding-left: $mat-list-side-padding;
+      }
+    }
+   }
+
+  &.mat-list-item-with-avatar.mat-list-option {
+    .mat-list-item-content-reverse .mat-list-text,
+    .mat-list-item-content .mat-list-text {
+      padding-right: $mat-list-side-padding;
       padding-left: $mat-list-side-padding;
     }
   }
diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts
index 00f9c7b8ab36..744ed61063df 100644
--- a/src/lib/list/list.ts
+++ b/src/lib/list/list.ts
@@ -97,8 +97,8 @@ export class MatListSubheaderCssMatStyler {}
   host: {
     'class': 'mat-list-item',
     // @deletion-target 7.0.0 Remove `mat-list-item-avatar` in favor of `mat-list-item-with-avatar`.
-    '[class.mat-list-item-avatar]': '_avatar',
-    '[class.mat-list-item-with-avatar]': '_avatar',
+    '[class.mat-list-item-avatar]': '_avatar || _icon',
+    '[class.mat-list-item-with-avatar]': '_avatar || _icon',
     '(focus)': '_handleFocus()',
     '(blur)': '_handleBlur()',
   },
@@ -113,6 +113,7 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
 
   @ContentChildren(MatLine) _lines: QueryList<MatLine>;
   @ContentChild(MatListAvatarCssMatStyler) _avatar: MatListAvatarCssMatStyler;
+  @ContentChild(MatListIconCssMatStyler) _icon: MatListIconCssMatStyler;
 
   constructor(private _element: ElementRef,
               @Optional() private _navList: MatNavList) {
diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts
index 10d81fc7571c..f78f1a95be96 100644
--- a/src/lib/list/selection-list.ts
+++ b/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';
+import {MatListAvatarCssMatStyler} from './list';
 
 
 /** @docs-private */
@@ -84,6 +86,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()',
   },
@@ -100,6 +103,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. */