fix: add camelCase ng-content selectors (#5953)

* fix: add camelCase ng-content selectors

* change list.md

Author: andrewseguin

src/lib/card/card-header.html

@@ -1,4 +1,4 @@
-<ng-content select="[md-card-avatar], [mat-card-avatar]"></ng-content>
+<ng-content select="[md-card-avatar], [mat-card-avatar], [mdCardAvatar], [matCardAvatar]"></ng-content>
 <div class="mat-card-header-text">
   <ng-content
       select="md-card-title, mat-card-title, md-card-subtitle, mat-card-subtitle,

src/lib/grid-list/grid-tile-text.html

@@ -1,3 +1,3 @@
-<ng-content select="[md-grid-avatar], [mat-grid-avatar]"></ng-content>
-<div class="mat-grid-list-text"><ng-content select="[md-line], [mat-line]"></ng-content></div>
+<ng-content select="[md-grid-avatar], [mat-grid-avatar], [mdGridAvatar], [matGridAvatar]"></ng-content>
+<div class="mat-grid-list-text"><ng-content select="[md-line], [mat-line], [mdLine], [matLine]"></ng-content></div>
 <ng-content></ng-content>

src/lib/list/list-item.html

@@ -5,7 +5,13 @@
   </div>
 
   <ng-content
-      select="[md-list-avatar],[md-list-icon], [mat-list-avatar], [mat-list-icon]"></ng-content>
-  <div class="mat-list-text"><ng-content select="[md-line], [mat-line]"></ng-content></div>
+      select="[md-list-avatar], [md-list-icon], [mat-list-avatar], [mat-list-icon],
+              [mdListAvatar], [mdListIcon], [matListAvatar], [matListIcon]">
+  </ng-content>
+
+  <div class="mat-list-text">
+    <ng-content select="[md-line], [mat-line], [mdLine], [matLine]"></ng-content>
+  </div>
+
   <ng-content></ng-content>
 </div>

src/lib/list/list.md

@@ -34,7 +34,7 @@ element in an `<md-list-item>`.
 ```html
 <md-nav-list>
   <md-list-item *ngFor="let link of links">
-     <a md-line href="...">{{ link }}</a>
+     <a mdLine href="...">{{ link }}</a>
      <button md-icon-button (click)="showInfo(link)">
         <md-icon>info</md-icon>
      </button>
@@ -43,16 +43,16 @@ element in an `<md-list-item>`.
 ```
 
 ### Multi-line lists
-For lists that require multiple lines per item, annotate each line with an `md-line` attribute.
+For lists that require multiple lines per item, annotate each line with an `mdLine` attribute.
 Whichever heading tag is appropriate for your DOM hierarchy should be used (not necessarily `<h3>`
 as shown in the example).
 
 ```html
 <!-- two line list -->
 <md-list>
   <md-list-item *ngFor="let message of messages">
-    <h3 md-line> {{message.from}} </h3>
-    <p md-line>
+    <h3 mdLine> {{message.from}} </h3>
+    <p mdLine>
       <span> {{message.subject}} </span>
       <span class="demo-2"> -- {{message.content}} </span>
     </p>
@@ -62,24 +62,24 @@ as shown in the example).
 <!-- three line list -->
 <md-list>
   <md-list-item *ngFor="let message of messages">
-    <h3 md-line> {{message.from}} </h3>
-    <p md-line> {{message.subject}} </p>
-    <p md-line class="demo-2"> {{message.content}} </p>
+    <h3 mdLine> {{message.from}} </h3>
+    <p mdLine> {{message.subject}} </p>
+    <p mdLine class="demo-2"> {{message.content}} </p>
   </md-list-item>
 </md-list>
 ```
 
 ### Lists with icons
 
-To add an icon to your list item, use the `md-list-icon` attribute.
+To add an icon to your list item, use the `mdListIcon` attribute.
 
 
 ```html
 <md-list>
   <md-list-item *ngFor="let message of messages">
-    <md-icon md-list-icon>folder</md-icon>
-    <h3 md-line> {{message.from}} </h3>
-    <p md-line>
+    <md-icon mdListIcon>folder</md-icon>
+    <h3 mdLine> {{message.from}} </h3>
+    <p mdLine>
       <span> {{message.subject}} </span>
       <span class="demo-2"> -- {{message.content}} </span>
     </p>
@@ -89,14 +89,14 @@ To add an icon to your list item, use the `md-list-icon` attribute.
 
 ### Lists with avatars
 
-To include an avatar image, add an image tag with an `md-list-avatar` attribute. 
+To include an avatar image, add an image tag with an `mdListAvatar` attribute. 
 
 ```html
 <md-list>
   <md-list-item *ngFor="let message of messages">
-    <img md-list-avatar src="..." alt="...">
-    <h3 md-line> {{message.from}} </h3>
-    <p md-line>
+    <img mdListAvatar src="..." alt="...">
+    <h3 mdLine> {{message.from}} </h3>
+    <p mdLine>
       <span> {{message.subject}} </span>
       <span class="demo-2"> -- {{message.content}} </span>
     </p>
@@ -121,23 +121,23 @@ to the main `md-list` tag.
 
 ### Lists with multiple sections
 
-Subheader can be added to a list by annotating a heading tag with an `md-subheader` attribute. 
+Subheader can be added to a list by annotating a heading tag with an `mdSubheader` attribute. 
 To add a divider, use `<md-divider>`.
 
 ```html
 <md-list>
-   <h3 md-subheader>Folders</h3>
+   <h3 mdSubheader>Folders</h3>
    <md-list-item *ngFor="let folder of folders">
-      <md-icon md-list-icon>folder</md-icon>
-      <h4 md-line>{{folder.name}}</h4>
-      <p md-line class="demo-2"> {{folder.updated}} </p>
+      <md-icon mdListIcon>folder</md-icon>
+      <h4 mdLine>{{folder.name}}</h4>
+      <p mdLine class="demo-2"> {{folder.updated}} </p>
    </md-list-item>
    <md-divider></md-divider>
-   <h3 md-subheader>Notes</h3>
+   <h3 mdSubheader>Notes</h3>
    <md-list-item *ngFor="let note of notes">
-      <md-icon md-list-icon>note</md-icon>
-      <h4 md-line>{{note.name}}</h4>
-      <p md-line class="demo-2"> {{note.updated}} </p>
+      <md-icon mdListIcon>note</md-icon>
+      <h4 mdLine>{{note.name}}</h4>
+      <p mdLine class="demo-2"> {{note.updated}} </p>
    </md-list-item>
 </md-list>
 ```

src/lib/list/list.ts

@@ -108,7 +108,7 @@ export class MdListIconCssMatStyler {}
  * @docs-private
  */
 @Directive({
-  selector: '[md-subheader], [mat-subheader]',
+  selector: '[md-subheader], [mat-subheader], [mdSubheader], [matSubheader]',
   host: {'class': 'mat-subheader'}
 })
 export class MdListSubheaderCssMatStyler {}