feat(expansion-panel) and (steps): add [disableRipple] input. (#665)

* feat(expansion-panel): add [disableRipple] input

* feat(steps): add [disableRipple] input

* fix(): lint error and hover on disable introduced bug

* fix(expansion): polish scss rules when not disabled

* fix(): move disabledRipple to the correct step in example

src/app/components/components/expansion-panel/expansion-panel.component.html

@@ -217,12 +217,12 @@ <h4 md-line>Headquarters</h4>
 
 <md-card>
   <md-card-title>Expansion panel with header template</md-card-title>
-  <md-card-subtitle>replace the entire header as needed</md-card-subtitle>
+  <md-card-subtitle>replace the entire header as needed and disable ripple</md-card-subtitle>
   <md-divider></md-divider>
   <md-tab-group md-stretch-tabs dynamicHeight>
     <md-tab>
       <ng-template md-tab-label>Demo</ng-template>
-        <td-expansion-panel>
+        <td-expansion-panel disableRipple>
           <ng-template td-expansion-panel-header>
             <md-toolbar color="accent">
               <span>Custom td-expansion-panel-header</span>
@@ -270,7 +270,7 @@ <h4 md-line>1141e8e8-8d24-4956-93c2</h4>
         <p>HTML:</p>
         <td-highlight lang="html">
           <![CDATA[
-            <td-expansion-panel>
+            <td-expansion-panel disableRipple>
               <ng-template td-expansion-panel-header>
                 <md-toolbar color="accent">
                   <span>Custom td-expansion-panel-header</span>

src/app/components/components/steps/steps.component.html

@@ -21,7 +21,7 @@ <h3>{{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}</h3>
             <ng-template td-step-label><span>Basic Usage (template)</span></ng-template>
             Include any content you like for an active stepper
           </td-step>
-          <td-step #step2 label="Required State" sublabel="Toggle between active and inactive while in required state." [state]="stateStep2" [disabled]="disabled">
+          <td-step #step2 label="Required State" sublabel="Toggle between active and inactive while in required state and disable ripple." [state]="stateStep2" [disabled]="disabled" disableRipple>
             This step is required!
             <ng-template td-step-actions>
               <button md-raised-button color="primary" (click)="toggleRequiredStep2()" class="text-upper">Toggle Require</button>
@@ -50,7 +50,7 @@ <h3>{{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}</h3>
                 <ng-template td-step-label><span>Basic Usage (template)</span></ng-template>
                 Include any content you like for an active stepper
               </td-step>
-              <td-step #step2 label="Required State" sublabel="Toggle between active and inactive while in required state." [state]="stateStep2" [disabled]="disabled">
+              <td-step #step2 label="Required State" sublabel="Toggle between active and inactive while in required state and disable ripple." [state]="stateStep2" [disabled]="disabled" disableRipple>
                 This step is required!
                 <ng-template td-step-actions>
                   <button md-raised-button color="primary" (click)="toggleRequiredStep2()" class="text-upper">Toggle Require</button>
@@ -195,7 +195,7 @@ <h3>Example:</h3>
     <p>HTML:</p>
     <td-highlight lang="html">
       <![CDATA[
-        <td-step #step label="Label" sublabel="Sublabel" [active]="active" [disabled]="disabled" [state]="state" (activated)="activeEvent()" (deactivated)="deactiveEvent()">
+        <td-step #step label="Label" sublabel="Sublabel" [active]="active" [disabled]="disabled" [state]="state" (activated)="activeEvent()" (deactivated)="deactiveEvent()" [disableRipple]="false">
           <ng-template td-step-label>
             ... add label content (if not used, falls back to [label] input)
           </ng-template>

src/app/components/components/steps/steps.component.ts

@@ -46,6 +46,10 @@ export class StepsDemoComponent implements OnInit, OnDestroy {
     description: 'Sets state of [TdStepComponent] depending on value. Defaults to [StepState.None | "none"]',
     name: 'state?',
     type: 'StepState or ["none" | "required" | "complete"]',
+  }, {
+    description: ' Whether the ripple effect for this component is disabled',
+    name: 'disableRipple?',
+    type: 'boolean',
   }, {
     description: 'Event emitted when [TdStepComponent] is activated.',
     name: 'activated?',

src/platform/core/expansion-panel/README.md

@@ -13,6 +13,7 @@ Properties:
 | `label?` | `string` | Sets label of component header.
 | `sublabel?` | `string` | Sets sublabel of component header.
 | `expand?` | `boolean` | Toggles component between expand/collapse state.
+| `disableRipple?` | `boolean` | Whether the ripple effect for this component is disabled.
 | `expanded?` | `function` | Event emitted when component is expanded.
 | `collapsed?` | `function` | Event emitted when component is collapsed.
 | `toggle?` | `function` | Toggle state of component. Returns "true" if successful, else "false".
@@ -40,7 +41,7 @@ export class MyModule {}
 Example for HTML usage:
 
 ```html
-<td-expansion-panel label="label" sublabel="sublabel" expand="true|false" disabled="true|false" (expanded)="expandedEvent()" (collapsed)="collapsedEvent()">
+<td-expansion-panel label="label" sublabel="sublabel" expand="true" disabled="false" (expanded)="expandedEvent()" (collapsed)="collapsedEvent()" [disableRipple]="false">
   <ng-template td-expansion-panel-header>
     ... add header content (overrides label and sublabel)
   </ng-template>

src/platform/core/expansion-panel/_expansion-panel-theme.scss

@@ -28,8 +28,8 @@
     @include mat-elevation(1);
     background-color: mat-color($background, card);
     .td-expansion-panel-header {
-      &:focus,
-      &:hover {
+      &:focus:not(.mat-disabled),
+      &:hover:not(.mat-disabled) {
         background: mat-color($background, 'hover');
       }
       .td-expansion-panel-header-content {

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

@@ -1,7 +1,7 @@
 <div class="td-expansion-panel-header"
       [class.mat-disabled]="disabled"
       md-ripple
-      [mdRippleDisabled]="disabled"
+      [mdRippleDisabled]="disabled || disableRipple"
       [tabIndex]="disabled? -1 : 0"
       (keydown.enter)="clickEvent()"
       (click)="clickEvent()">

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

@@ -3,14 +3,10 @@
   .td-expansion-panel-header {
     position: relative;
     outline: none;
-    &:focus,
-    &:hover {
+    &:focus:not(.mat-disabled),
+    &:hover:not(.mat-disabled) {
       cursor: pointer;
     }
-    &.mat-disabled {
-      background: none;
-      cursor: auto;
-    }
     .td-expansion-panel-header-content {
       height: 48px;
       padding: 0 16px;

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

@@ -48,6 +48,7 @@ export class TdExpansionPanelSummaryComponent {}
 })
 export class TdExpansionPanelComponent {
 
+  private _disableRipple: boolean = false;
   private _expand: boolean = false;
   private _disabled: boolean = false;
 
@@ -68,13 +69,25 @@ export class TdExpansionPanelComponent {
    */
   @Input() sublabel: string;
 
+  /**
+   * disableRipple?: string
+   * Whether the ripple effect for this component is disabled.
+   */
+  @Input('disableRipple')
+  set disableRipple(disableRipple: boolean) {
+    this._disableRipple = <any>disableRipple !== '' ? (<any>disableRipple === 'true' || disableRipple === true) : true;
+  }
+  get disableRipple(): boolean {
+    return this._disableRipple;
+  }
+
   /**
    * expand?: boolean
    * Toggles [TdExpansionPanelComponent] between expand/collapse.
    */
   @Input('expand')
   set expand(expand: boolean) {
-    this._setExpand(expand);
+    this._setExpand(<any>expand === 'true' || expand === true);
   }
   get expand(): boolean {
     return this._expand;

src/platform/core/steps/_steps-theme.scss

@@ -25,8 +25,8 @@
     }
     // header
     .td-step-header {
-      &:focus,
-      &:hover {
+      &:focus:not(.mat-disabled),
+      &:hover:not(.mat-disabled) {
         background: mat-color($background, 'hover');
       }
       .td-step-label-wrapper {

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

@@ -1,7 +1,7 @@
 <div class="td-step-header"
       [class.mat-disabled]="disabled"
       md-ripple
-      [mdRippleDisabled]="disabled"
+      [mdRippleDisabled]="disabled || disableRipple"
       [tabIndex]="disabled ? -1 : 0"
       flex>
   <div class="td-step-header-content"

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

@@ -3,14 +3,9 @@ $step-circle: 24px;
 .td-step-header {
   position: relative;
   outline: none;
-  &:focus,
-  &:hover {
+  &:hover:not(.mat-disabled) {
     cursor: pointer;
   }
-  &.mat-disabled {
-    background: none;
-    cursor: auto;
-  }
   .td-step-header-content {
     height: 72px;
   }

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

@@ -14,6 +14,12 @@ export class 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

@@ -42,6 +42,7 @@ export class TdStepSummaryDirective extends TemplatePortalDirective {
 })
 export class TdStepComponent implements OnInit {
 
+  private _disableRipple: boolean = false;
   private _active: boolean = false;
   private _state: StepState = StepState.None;
   private _disabled: boolean = false;
@@ -69,13 +70,25 @@ export class TdStepComponent implements OnInit {
    */
   @Input('sublabel') sublabel: string;
 
+  /**
+   * disableRipple?: string
+   * Whether the ripple effect for this component is disabled.
+   */
+  @Input('disableRipple')
+  set disableRipple(disableRipple: boolean) {
+    this._disableRipple = <any>disableRipple !== '' ? (<any>disableRipple === 'true' || disableRipple === true) : true;
+  }
+  get disableRipple(): boolean {
+    return this._disableRipple;
+  }
+
   /**
    * active?: boolean
    * Toggles [TdStepComponent] between active/deactive.
    */
   @Input('active')
   set active(active: boolean) {
-    this._setActive(active);
+    this._setActive(<any>active === 'true' || active === true);
   }
   get active(): boolean {
     return this._active;

src/platform/core/steps/steps.component.html

@@ -3,7 +3,8 @@
     <td-step-header class="td-step-horizontal-header"
                     (keydown.enter)="step.toggle()"
                     [number]="index + 1"
-                    [active]="step.active" 
+                    [active]="step.active"
+                    [disableRipple]="step.disableRipple"
                     [disabled]="step.disabled" 
                     [state]="step.state"
                     (click)="step.toggle()">
@@ -19,7 +20,8 @@
                   (keydown.enter)="step.toggle()"
                   [number]="index + 1"
                   [active]="step.active" 
-                  [disabled]="step.disabled" 
+                  [disabled]="step.disabled"
+                  [disableRipple]="step.disableRipple"
                   [state]="step.state"
                   (click)="step.toggle()"
                   *ngIf="isVertical()">