feat(chip): Add disableRipple property (#1533)

- Adds `disableRipple: boolean`
- Updated documentation
- Included unit test

Closes #1521

Author: trimox

demos/components/chips-demo/chips-demo.html

@@ -95,6 +95,10 @@ <h2>Design & API Documentation</h2>
             <td>removable: boolean</td>
             <td>Sets whether a trailing icon click should trigger exit/removal of the chip. (Default is true)</td>
           </tr>
+          <tr>
+            <td>disableRipple: boolean</td>
+            <td>Whether ripples are disabled.</td>
+          </tr>
           <tr>
             <td>primary: boolean</td>
             <td>Colors selected chip with the primary theme color.</td>
@@ -172,6 +176,7 @@ <h3 class="demo-content__headline">Chip - Theming</h3>
     <div class="demo-layout__row">
       <button mdc-button (click)="simplechip.primary = !simplechip.primary">Primary: {{simplechip.primary ? 'On' : 'Off'}}</button>
       <button mdc-button (click)="simplechip.secondary = !simplechip.secondary">Secondary: {{simplechip.secondary ? 'On' : 'Off'}}</button>
+      <button mdc-button (click)="simplechip.disableRipple = !simplechip.disableRipple">Disable Ripple: {{simplechip.disableRipple ? 'On' : 'Off'}}</button>
     </div>
     <mdc-chip-set>
       <mdc-chip #simplechip>

packages/chips/chip.ts

@@ -205,6 +205,14 @@ export class MdcChip implements AfterViewInit, OnDestroy {
   }
   private _disabled: boolean;
 
+  /** Whether the chip ripple is disabled. */
+  @Input()
+  get disableRipple(): boolean { return this._disableRipple; }
+  set disableRipple(value: boolean) {
+    this._disableRipple = toBoolean(value);
+  }
+  private _disableRipple: boolean;
+
   /** Emitted when the chip is selected or deselected. */
   @Output() readonly selectionChange: EventEmitter<MdcChipSelectionEvent> =
     new EventEmitter<MdcChipSelectionEvent>();
@@ -283,7 +291,11 @@ export class MdcChip implements AfterViewInit, OnDestroy {
 
   ngAfterViewInit(): void {
     this._foundation.init();
-    this._ripple.init({ surface: this._getHostElement() });
+    this._ripple.init({
+      surface: this._getHostElement()
+    }, Object.assign(this._ripple.createAdapter(), {
+      isSurfaceDisabled: () => this._disableRipple
+    }));
     this._loadListeners();
   }
 

test/chips/chips.test.ts

@@ -80,6 +80,10 @@ describe('Chips', () => {
       expect(testComponent.chipRemoved).toHaveBeenCalledTimes(1);
     });
 
+    it('expect disableRipple to be true', () => {
+      expect(testInstance.disableRipple).toBeUndefined();
+    });
+
     it('handles focus event', () => {
       testInstance.focus();
       fixture.detectChanges();
@@ -196,7 +200,7 @@ describe('Chips', () => {
       <mdc-chip-text>Get Directions</mdc-chip-text>
       <mdc-chip-icon #trailingIcon trailing>more_vert</mdc-chip-icon>
     </mdc-chip>
-    <mdc-chip id="removableChip" [removable]="removable">
+    <mdc-chip id="removableChip" [removable]="removable" [disableRipple]="disableRipple">
       <mdc-chip-text>Get Weather</mdc-chip-text>
     </mdc-chip>
     <mdc-chip id="newsChip">
@@ -213,6 +217,7 @@ class ChipTest {
   input: boolean;
   primary: boolean;
   secondary: boolean;
+  disableRipple: boolean;
 
   @ViewChild('trailingIcon') trailingIcon: MdcIcon;