feat(ripple): Add primary and secondary theme color properties (#400)

Assign modifier classes that can be used for styling ripple surfaces using the configured theme's primary and secondary colors.

- Add `primary` property
- Add `secondary` property
- Add `active` property

Closes #322

src/demo-app/components/buttons/icon-toggle-demo/icon-toggle-demo.html

@@ -119,7 +119,7 @@ <h1 mdc-typography-display1>Icon Toggle Buttons</h1>
         <label>Dark Theme</label>
       </mdc-form-field>
     </div>
-    <div fxLayout="column" class="demo-icon-toggle" [mdc-theme-dark]="isDarkTheme">
+    <div fxLayout="column" class="demo-small-container" [mdc-theme-dark]="isDarkTheme">
 <mdc-icon-toggle
   [(ngModel)]="isOn"
   [disabled]="isDisabled"

src/demo-app/components/core/ripple-demo/ripple-demo.html

@@ -24,27 +24,63 @@ <h1 mdc-typography-display1>Ripple</h1>
       </thead>
       <tbody>
         <tr>
-          <td>boolean</td>
+          <td>active: boolean</td>
           <td>Activate or de-activate ripple ink effect. (Default is true)</td>
         </tr>
+        <tr>
+          <td>primary: boolean</td>
+          <td>Colors the ripple with the primary theme color.</td>
+        </tr>
+        <tr>
+          <td>secondary: boolean</td>
+          <td>Colors the ripple with the secondary theme color.</td>
+        </tr>
       </tbody>
     </table>
   </div>
-  <div fxLayout="column" fxLayoutAlign="start start" class="mdc-padding">
-  <mdc-card class="demo-card mdc-padding" [mdc-ripple]="isRippleActive">
-    <mdc-card-primary>
-      <mdc-card-title>Card - Click me</mdc-card-title>
-    </mdc-card-primary>
-  </mdc-card>
+  <div fxLayout.gt-xs="row" fxLayout.xs="column" fxLayoutWrap>
+<div fxLayout="column" fxFlexOffset="5">
+<div class="demo-small-container" mdc-ripple>
+  Click me
+</div>
+<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">div</span> <span style="color:#89bdff">mdc-ripple</span>></span>
+  Click me
+<span style="color:#89bdff">&lt;/<span style="color:#89bdff">div</span>></span>
+</pre>
+</div>
+
+<div fxLayout="column" fxFlexOffset="5">
+<mdc-ripple class="demo-small-container" [mdc-elevation]="7" [active]="isRippleActive">
+  Click me
+</mdc-ripple>
   <mdc-form-field>
     <mdc-checkbox [(ngModel)]="isRippleActive"></mdc-checkbox>
-    <label>Active ripple</label>
+    <label>Ripple Active</label>
   </mdc-form-field>
-  <pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-card</span> [<span style="color:#89bdff">mdc-ripple</span>]=<span style="color:#65b042">"true"</span>></span>
-  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-card-primary</span>></span>
-    <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-card-title</span>></span>My card - Click me<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-card-title</span>></span>
-    <span style="color:#89bdff">&lt;<span style="color:#89bdff">h2</span> <span style="color:#89bdff">mdc-card-subtitle</span>></span>Subtitle<span style="color:#89bdff">&lt;/<span style="color:#89bdff">h2</span>></span>
-  <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-card-primary</span>></span>
-<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-card</span>></span></pre>
+<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-ripple</span> [<span style="color:#89bdff">active</span>]=<span style="color:#65b042">"true"</span>></span>
+  Click me
+<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-ripple</span>></span>
+</pre>
+</div>
+
+<div fxLayout="column" fxFlexOffset="5">
+  <mdc-ripple [primary]="true" class="demo-small-container" [mdc-elevation]="7">
+   Ripple w/Primary Color
+  </mdc-ripple>
+<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-ripple</span> [<span style="color:#89bdff">primary</span>]=<span style="color:#65b042">"true"</span>></span>
+ Ripple w/Primary Color
+<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-ripple</span>></span>
+</pre>
+</div>
+
+<div fxLayout="column" fxFlexOffset="5">
+  <mdc-ripple [secondary]="true" class="demo-small-container" [mdc-elevation]="7">
+   Ripple w/Secondary Color
+  </mdc-ripple>
+<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-ripple</span> [<span style="color:#89bdff">secondary</span>]=<span style="color:#65b042">"true"</span>></span>
+ Ripple w/Secondary Color
+<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-ripple</span>></span>
+</pre>
+</div>
   </div>
 </div>

src/demo-app/components/core/surface-demo/surface-demo.html

@@ -34,7 +34,7 @@ <h1 mdc-typography-display1>Surface</h1>
 <div fxLayout="column" fxLayoutAlign="start start" class="mdc-padding">
 <mdc-card class="demo-card mdc-padding" [mdc-surface]="isSurfaceActive">
   <mdc-card-primary>
-    <mdc-card-title>Card - Touch or Mouse over</mdc-card-title>
+    <mdc-card-title>Touch or Hover me</mdc-card-title>
   </mdc-card-primary>
 </mdc-card>
 <mdc-form-field>

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

@@ -161,7 +161,8 @@ <h1 mdc-typography-display1>Lists</h1>
   </div>
   <div fxLayout="column" class="mdc-padding">
     <h3>Single-Line</h3>
-    <div fxLayout="row">
+        <div fxLayout="row">
+    <div fxLayout="column">
       <mdc-form-field>
         <mdc-checkbox [(ngModel)]="isSinglelineDense"></mdc-checkbox>
         <label>Dense</label>
@@ -170,6 +171,8 @@ <h3>Single-Line</h3>
         <mdc-checkbox [(ngModel)]="isSingleDarkTheme"></mdc-checkbox>
         <label>Dark Theme</label>
       </mdc-form-field>
+    </div>
+    <div fxLayout="column">
       <mdc-form-field>
         <mdc-checkbox [(ngModel)]="isBordered"></mdc-checkbox>
         <label>Bordered</label>
@@ -179,6 +182,7 @@ <h3>Single-Line</h3>
         <label>Ripple Disabled</label>
       </mdc-form-field>
     </div>
+  </div>
 <mdc-list [dense]="isSinglelineDense" [mdc-theme-dark]="isSingleDarkTheme" [border]="isBordered" [disableRipple]="isSingleRippleDisabled">
   <mdc-list-item>Single-line item</mdc-list-item>
   <mdc-list-item>Single-line item</mdc-list-item>

src/demo-app/navigation/app-toolbar.html

@@ -26,7 +26,7 @@
   <mdc-toolbar-row>
     <mdc-toolbar-section [alignStart]="true">
       <button material-icon mdc-toolbar-menu-icon (click)="toggleDrawer();" fxShow fxHide.gt-sm="true">menu</button>
-      <a class="demo-toolbar-logo" button mdc-toolbar-menu-icon fxHide fxShow.gt-sm="true" [routerLink]="['home']" [mdc-ripple]="true">
+      <a class="demo-toolbar-logo" button mdc-toolbar-menu-icon fxHide fxShow.gt-sm="true" [routerLink]="['home']" mdc-ripple>
        <img src="https://trimox.github.io/angular-mdc-web/assets/hub-192x192.png" width="28" height="28" />
      </a>
       <mdc-toolbar-title>

src/demo-app/sass/main.scss

@@ -85,12 +85,13 @@ body {
   font-size: .8rem;
 }
 
-.demo-icon-toggle {
+.demo-small-container {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 200px;
-  height: 190px;
+  height: 170px;
+  padding: 5px;
 }
 
 .info-banner {

src/lib/core/ripple/ripple.directive.ts

@@ -1,4 +1,5 @@
 import {
+  AfterContentInit,
   Directive,
   ElementRef,
   HostBinding,
@@ -11,7 +12,7 @@ import { EventRegistry } from '../../common/event-registry';
 import { MdcRippleOrchestration } from './ripple.orchestration';
 
 @Directive({
-  selector: '[mdc-surface]',
+  selector: '[mdc-surface], mdc-surface',
   providers: [EventRegistry]
 })
 export class MdcSurfaceDirective extends MdcRippleOrchestration {
@@ -34,18 +35,21 @@ export class MdcSurfaceDirective extends MdcRippleOrchestration {
 }
 
 @Directive({
-  selector: '[mdc-ripple]',
+  selector: '[mdc-ripple], mdc-ripple',
   providers: [EventRegistry]
 })
-export class MdcRippleDirective extends MdcRippleOrchestration {
-  @Input('mdc-ripple')
-  get mdcRipple() { return this.activeSurface; }
-  set mdcRipple(value: boolean) {
-    this.activeSurface = toBoolean(value);
-    value ? this.init() : this.destroy();
-  }
+export class MdcRippleDirective extends MdcRippleOrchestration implements AfterContentInit {
+  @Input() active: boolean = true;
+  @Input() primary: boolean = false;
+  @Input() secondary: boolean = false;
   @HostBinding('class.mdc-ripple-surface') get classSurface(): string {
-    return this.mdcRipple ? 'mdc-ripple-surface' : '';
+    return this.active ? 'mdc-ripple-surface' : '';
+  }
+  @HostBinding('class.mdc-ripple-surface--primary') get classPrimary(): string {
+    return this.primary ? 'mdc-ripple-surface--primary' : '';
+  }
+  @HostBinding('class.mdc-ripple-surface--accent') get classSecondary(): string {
+    return this.secondary ? 'mdc-ripple-surface--accent' : '';
   }
 
   constructor(
@@ -54,4 +58,8 @@ export class MdcRippleDirective extends MdcRippleOrchestration {
     public elementRef: ElementRef) {
     super(renderer, registry, elementRef);
   }
+
+  ngAfterContentInit(): void {
+    this.init();
+  }
 }

src/lib/core/ripple/ripple.orchestration.ts

@@ -9,7 +9,6 @@ import { EventRegistry } from '../../common/event-registry';
 import { MDCRippleAdapter } from './adapter';
 import { MDCRippleFoundation, util } from '@material/ripple';
 
-@Injectable()
 export abstract class MdcRippleOrchestration {
   private _mdcAdapter: MDCRippleAdapter = {
     browserSupportsCssVars: () => (typeof window !== 'undefined') ? util.supportsCssVariables(window) : false,

test/unit/ripple/ripple.test.ts

@@ -48,6 +48,18 @@ describe('MdcRippleDirective', () => {
       fixture.detectChanges();
       expect(testDebugElement.nativeElement.classList.contains('mdc-ripple-surface')).toBe(false);
     });
+
+    it('#should have mdc-ripple-surface--primary if true', () => {
+      testComponent.isPrimary = true;
+      fixture.detectChanges();
+      expect(testDebugElement.nativeElement.classList.contains('mdc-ripple-surface--primary')).toBe(true);
+    });
+
+    it('#should have mdc-ripple-surface--accent if true', () => {
+      testComponent.isSecondary = true;
+      fixture.detectChanges();
+      expect(testDebugElement.nativeElement.classList.contains('mdc-ripple-surface--accent')).toBe(true);
+    });
   });
 });
 
@@ -97,11 +109,13 @@ describe('MdcSurfaceDirective', () => {
 /** Simple component for testing. */
 @Component({
   template: `
-  <div [mdc-ripple]="isRippleActive"></div>
+  <mdc-ripple [active]="isRippleActive" [primary]="isPrimary" [secondary]="isSecondary">Test</mdc-ripple>
   `,
 })
 class SimpleRipple {
   isRippleActive: boolean = true;
+  isPrimary: boolean = false;
+  isSecondary: boolean = false;
 }
 
 @Component({