feat(list): Add component selector option to mdc-list-item-text

Allow's developers to use as both component or directive

Author: trimox

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

@@ -150,7 +150,14 @@ <h3>Single-Line</h3>
       <mdc-list-item>Single-line item</mdc-list-item>
       <mdc-list-item>Single-line item</mdc-list-item>
     </mdc-list>
-  </div>
+<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>
+ [<span style="color:#89bdff">dense</span>]=<span style="color:#65b042">"isSinglelineDense"</span>
+ [<span style="color:#89bdff">mdc-theme-dark</span>]=<span style="color:#65b042">"false"</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Single-line item<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Single-line item<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Single-line item<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>></span>
+</pre>  </div>
   <div fxLayout="column" class="mdc-padding">
     <h3>Two-line List</h3>
     <div fxLayout="row">
@@ -165,25 +172,49 @@ <h3>Two-line List</h3>
     </div>
     <mdc-list class="demo-wrapper" [twoLine]="true" [dense]="isTwolineDense" [mdc-theme-dark]="isTwoDarkTheme">
       <mdc-list-item>
-        <span mdc-list-item-text>
+        <mdc-list-item-text>
           Single-line item
-          <span mdc-list-item-secondary>Secondary text</span>
-        </span>
+          <mdc-list-item-secondary>Secondary text</mdc-list-item-secondary>
+        </mdc-list-item-text>
       </mdc-list-item>
       <mdc-list-item>
-        <span mdc-list-item-text>
+        <mdc-list-item-text>
           Single-line item
-          <span mdc-list-item-secondary>Secondary text</span>
-        </span>
+          <mdc-list-item-secondary>Secondary text</mdc-list-item-secondary>
+        </mdc-list-item-text>
       </mdc-list-item>
       <mdc-list-item>
-        <span mdc-list-item-text>
+        <mdc-list-item-text>
           Single-line item
-          <span mdc-list-item-secondary>Secondary text</span>
-        </span>
+          <mdc-list-item-secondary>Secondary text</mdc-list-item-secondary>
+        </mdc-list-item-text>
       </mdc-list-item>
     </mdc-list>
-  </div>
+
+<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span> 
+  [<span style="color:#89bdff">twoLine</span>]=<span style="color:#65b042">"true"</span>
+  [<span style="color:#89bdff">dense</span>]=<span style="color:#65b042">"false"</span>
+  [<span style="color:#89bdff">mdc-theme-dark</span>]=<span style="color:#65b042">"false"</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+    <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item-text</span>></span>
+      Single-line item
+      <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item-secondary</span>></span>Secondary text<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item-secondary</span>></span>
+    <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item-text</span>></span>
+  <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+    <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item-text</span>></span>
+      Single-line item
+      <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item-secondary</span>></span>Secondary text<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item-secondary</span>></span>
+    <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item-text</span>></span>
+  <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+    <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item-text</span>></span>
+      Single-line item
+      <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item-secondary</span>></span>Secondary text<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item-secondary</span>></span>
+    <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item-text</span>></span>
+  <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>></span>
+</pre></div>
 
   <div fxLayout="column" class="mdc-padding">
     <h3>Start Detail</h3>
@@ -238,7 +269,24 @@ <h3>Start + End Detail</h3>
         <i mdc-list-item-start material-icon>data_usage</i>Data Usage<i mdc-list-item-end material-icon>info</i>
       </mdc-list-item>
     </mdc-list>
-  </div>
+<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span> [<span style="color:#89bdff">mdc-theme-dark</span>]=<span style="color:#65b042">"false"</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-start</span> <span style="color:#e0c589">material-icon</span>></span>network_wifi<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>
+    Wi-Fi
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-end</span> <span style="color:#e0c589">material-icon</span>></span>info<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>
+  <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-start</span> <span style="color:#e0c589">material-icon</span>></span>bluetooth<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>
+    Bluetooth
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-end</span> <span style="color:#e0c589">material-icon</span>></span>info<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>
+  <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-start</span> <span style="color:#e0c589">material-icon</span>></span>data_usage<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>
+    Data Usage
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-end</span> <span style="color:#e0c589">material-icon</span>></span>info<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>
+  <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>></span>
+</pre>  </div>
 
   <div fxLayout="column" class="mdc-padding">
     <h3>Avatar List</h3>

src/lib/list/list-item.directive.ts

@@ -66,7 +66,7 @@ export class ListItemEndDirective {
 }
 
 @Directive({
-  selector: '[mdc-list-item-text]'
+  selector: '[mdc-list-item-text], mdc-list-item-text'
 })
 export class ListItemTextDirective {
   @HostBinding('class.mdc-list-item__text') isHostClass = true;