Moved selection logic into MatChipOption, MatChipList components

Author: vanessanschmitt

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

@@ -21,15 +21,14 @@ <h4>Unstyled</h4>
 
       <h4>Advanced</h4>
 
-      <mat-chip-set selectable="false">
-        <mat-chip color="accent" selected="true">Selected/Colored</mat-chip>
-
-        <mat-chip color="warn" selected="true" *ngIf="visible"
-                       (destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
+      <mat-chip-list multiple="true">
+        <mat-chip-option color="accent" selected="true">Selected/Colored</mat-chip-option>
+        <mat-chip-option color="warn" selected="true" *ngIf="visible"
+                 (destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
           With Events
           <mat-icon matChipRemove>cancel</mat-icon>
-        </mat-chip>
-      </mat-chip-set>
+        </mat-chip-option>
+      </mat-chip-list>
       <div>{{message}}</div>
 
       <h4>With avatar and icons</h4>

src/material-experimental/mdc-chips/chip-option.html

@@ -0,0 +1,17 @@
+<div #mdcChip
+  class="mdc-chip"
+  [class.mat-primary] = "color === 'primary'"
+  [class.mat-accent] = "color === 'accent'"
+  [class.mat-warn] = "color === 'warn'"
+  [ngClass]="_mdcClasses"
+  (click)='_handleInteraction($event)'
+  (keydown)='_handleInteraction($event)'
+  (transitionend)='_chipFoundation.handleTransitionEnd($event)'
+  tabindex="0">
+  <svg *ngIf="_chipListMultiple" class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
+    <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
+      d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+  </svg>
+  <div class="mdc-chip__text"><ng-content></ng-content></div>
+</div>
+

src/material-experimental/mdc-chips/chip-set.html

@@ -1,7 +1,6 @@
 <div #mdcChipSet
-     class="mdc-chip-set"
-     [class.mdc-chip-set--choice]="selectable && !multiple"
-     [class.mdc-chip-set--filter]="selectable && multiple">
+  class="mdc-chip-set"
+  [ngClass]="_mdcClasses">
   <ng-content></ng-content>
 </div>