feat(behaviors): abstract disableRipple inputs and create mixin for r…

…euse (#762)

src/platform/core/common/behaviors/disable-ripple.mixin.ts

@@ -0,0 +1,34 @@
+import { Constructor } from './constructor';
+import { coerceBooleanProperty } from '@angular/cdk';
+
+/** Interface to implement when applying the disabled mixin */
+export interface ICanDisableRipple {
+  disableRipple: boolean;
+  onDisableRippleChange(v: boolean): void;
+}
+
+/** Mixin to augment a component or directive with a `disabled` property. */
+export function mixinDisableRipple<T extends Constructor<{}>>(base: T): Constructor<ICanDisableRipple> & T {
+  return class extends base {
+    private _disableRipple: boolean = false;
+
+    constructor(...args: any[]) {
+      super(...args);
+    }
+
+    get disableRipple(): boolean {
+      return this._disableRipple;
+    }
+    set disableRipple(value: boolean) {
+      let newValue: boolean = coerceBooleanProperty(value);
+      if (this._disableRipple !== newValue) {
+        this._disableRipple = newValue;
+        this.onDisableRippleChange(this._disableRipple);
+      }
+    }
+
+    onDisableRippleChange(v: boolean): void {
+      /** NOT IMPLEMENTED, this needs to be overriden by subclasses if needed */
+    }
+  };
+}

src/platform/core/common/behaviors/disabled.mixin.ts

@@ -1,7 +1,5 @@
 import { Constructor } from './constructor';
 import { coerceBooleanProperty } from '@angular/cdk';
-import { Observable } from 'rxjs/Observable';
-import { Subject } from 'rxjs/Subject';
 
 /** Interface to implement when applying the disabled mixin */
 export interface ICanDisable {

src/platform/core/common/common.module.ts

@@ -25,6 +25,7 @@ export { TdFadeInOutAnimation } from './animations/fade/fadeInOut.animation';
  */
 
 export { ICanDisable, mixinDisabled } from './behaviors/disabled.mixin';
+export { ICanDisableRipple, mixinDisableRipple } from './behaviors/disable-ripple.mixin';
 
 /**
  * FORMS

src/platform/core/expansion-panel/expansion-panel.component.ts

@@ -3,7 +3,7 @@ import { Component, Directive, Input, Output, TemplateRef, ViewContainerRef, Con
 import { EventEmitter } from '@angular/core';
 import { coerceBooleanProperty, TemplatePortalDirective } from '@angular/cdk';
 
-import { TdCollapseAnimation, ICanDisable, mixinDisabled } from '../common/common.module';
+import { TdCollapseAnimation, ICanDisable, mixinDisabled, ICanDisableRipple, mixinDisableRipple } from '../common/common.module';
 
 @Directive({
   selector: '[td-expansion-panel-header]ng-template',
@@ -41,20 +41,19 @@ export class TdExpansionPanelSummaryComponent {}
 export class TdExpansionPanelBase {}
 
 /* tslint:disable-next-line */
-export const _TdExpansionPanelMixinBase = mixinDisabled(TdExpansionPanelBase);
+export const _TdExpansionPanelMixinBase = mixinDisableRipple(mixinDisabled(TdExpansionPanelBase));
 
 @Component({
   selector: 'td-expansion-panel',
   styleUrls: ['./expansion-panel.component.scss' ],
   templateUrl: './expansion-panel.component.html',
-  inputs: ['disabled'],
+  inputs: ['disabled', 'disableRipple'],
   animations: [
     TdCollapseAnimation(),
   ],
 })
-export class TdExpansionPanelComponent extends _TdExpansionPanelMixinBase implements ICanDisable  {
+export class TdExpansionPanelComponent extends _TdExpansionPanelMixinBase implements ICanDisable, ICanDisableRipple {
 
-  private _disableRipple: boolean = false;
   private _expand: boolean = false;
 
   @ContentChild(TdExpansionPanelHeaderDirective) expansionPanelHeader: TdExpansionPanelHeaderDirective;
@@ -74,18 +73,6 @@ export class TdExpansionPanelComponent extends _TdExpansionPanelMixinBase implem
    */
   @Input() sublabel: string;
 
-  /**
-   * disableRipple?: string
-   * Whether the ripple effect for this component is disabled.
-   */
-  @Input('disableRipple')
-  set disableRipple(disableRipple: boolean) {
-    this._disableRipple = coerceBooleanProperty(disableRipple);
-  }
-  get disableRipple(): boolean {
-    return this._disableRipple;
-  }
-
   /**
    * expand?: boolean
    * Toggles [TdExpansionPanelComponent] between expand/collapse.

src/platform/core/steps/step-header/step-header.component.ts

@@ -1,33 +1,27 @@
 import { Component, Input } from '@angular/core';
 
-import { ICanDisable, mixinDisabled } from '../../common/common.module';
+import { ICanDisable, mixinDisabled, ICanDisableRipple, mixinDisableRipple } from '../../common/common.module';
 
 import { StepState } from '../step.component';
 
 export class TdStepHeaderBase {}
 
 /* tslint:disable-next-line */
-export const _TdStepHeaderMixinBase = mixinDisabled(TdStepHeaderBase);
+export const _TdStepHeaderMixinBase = mixinDisableRipple(mixinDisabled(TdStepHeaderBase));
 
 @Component({
   selector: 'td-step-header',
-  inputs: ['disabled'],
+  inputs: ['disabled', 'disableRipple'],
   styleUrls: ['./step-header.component.scss' ],
   templateUrl: './step-header.component.html',
 })
-export class TdStepHeaderComponent extends _TdStepHeaderMixinBase implements ICanDisable {
+export class TdStepHeaderComponent extends _TdStepHeaderMixinBase implements ICanDisable, ICanDisableRipple {
 
   /**
    * Number assigned to [TdStepHeaderComponent].
    */
   @Input('number') number: number;
 
-  /**
-   * disableRipple?: string
-   * Whether the ripple effect on header is disabled.
-   */
-  @Input('disableRipple') disableRipple: boolean;
-
   /**
    * active?: boolean
    * Sets for active/inactive states on header.

src/platform/core/steps/step.component.ts

@@ -3,7 +3,7 @@ import { Component, Directive, Input, Output, TemplateRef, ViewChild,
 import { EventEmitter } from '@angular/core';
 import { coerceBooleanProperty, TemplatePortalDirective, TemplatePortal } from '@angular/cdk';
 
-import { ICanDisable, mixinDisabled } from '../common/common.module';
+import { ICanDisable, mixinDisabled, ICanDisableRipple, mixinDisableRipple } from '../common/common.module';
 
 export enum StepState {
   None = <any>'none',
@@ -41,16 +41,15 @@ export class TdStepSummaryDirective extends TemplatePortalDirective {
 export class TdStepBase {}
 
 /* tslint:disable-next-line */
-export const _TdStepMixinBase = mixinDisabled(TdStepBase);
+export const _TdStepMixinBase = mixinDisableRipple(mixinDisabled(TdStepBase));
 
 @Component({
   selector: 'td-step',
-  inputs: ['disabled'],
+  inputs: ['disabled', 'disableRipple'],
   templateUrl: './step.component.html',
 })
-export class TdStepComponent extends _TdStepMixinBase implements OnInit, ICanDisable {
+export class TdStepComponent extends _TdStepMixinBase implements OnInit, ICanDisable, ICanDisableRipple {
 
-  private _disableRipple: boolean = false;
   private _active: boolean = false;
   private _state: StepState = StepState.None;
 
@@ -77,18 +76,6 @@ export class TdStepComponent extends _TdStepMixinBase implements OnInit, ICanDis
    */
   @Input('sublabel') sublabel: string;
 
-  /**
-   * disableRipple?: string
-   * Whether the ripple effect for this component is disabled.
-   */
-  @Input('disableRipple')
-  set disableRipple(disableRipple: boolean) {
-    this._disableRipple = coerceBooleanProperty(disableRipple);
-  }
-  get disableRipple(): boolean {
-    return this._disableRipple;
-  }
-
   /**
    * active?: boolean
    * Toggles [TdStepComponent] between active/deactive.