feat(slide-toggle): add option to disable ripple (#3195)

* Adds an option to disable ripples for slide-toggle elements. Similar as for buttons, checkbox and other components.

Author: devversion

src/lib/slide-toggle/slide-toggle.html

@@ -12,7 +12,7 @@
         <div class="mat-slide-toggle-ripple" md-ripple
              [mdRippleTrigger]="label"
              [mdRippleCentered]="true"
-             [mdRippleDisabled]="disabled"
+             [mdRippleDisabled]="disableRipple || disabled"
              [mdRippleSpeedFactor]="0.3">
         </div>
       </div>

src/lib/slide-toggle/slide-toggle.spec.ts

@@ -367,6 +367,27 @@ describe('MdSlideToggle', () => {
       expect(slideToggleElement.classList).toContain('mat-slide-toggle-label-before');
     });
 
+    it('should show ripples on label mousedown', () => {
+      expect(slideToggleElement.querySelectorAll('.mat-ripple-element').length).toBe(0);
+
+      dispatchFakeEvent(labelElement, 'mousedown');
+      dispatchFakeEvent(labelElement, 'mouseup');
+
+      expect(slideToggleElement.querySelectorAll('.mat-ripple-element').length).toBe(1);
+    });
+
+    it('should not show ripples when disableRipple is set', () => {
+      testComponent.disableRipple = true;
+      fixture.detectChanges();
+
+      expect(slideToggleElement.querySelectorAll('.mat-ripple-element').length).toBe(0);
+
+      dispatchFakeEvent(labelElement, 'mousedown');
+      dispatchFakeEvent(labelElement, 'mouseup');
+
+      expect(slideToggleElement.querySelectorAll('.mat-ripple-element').length).toBe(0);
+    });
+
   });
 
   describe('custom template', () => {
@@ -620,6 +641,7 @@ function dispatchFocusChangeEvent(eventName: string, element: HTMLElement): void
                      [aria-labelledby]="slideLabelledBy"
                      [tabIndex]="slideTabindex"
                      [labelPosition]="labelPosition"
+                     [disableRipple]="disableRipple"
                      (change)="onSlideChange($event)"
                      (click)="onSlideClick($event)">
 
@@ -630,6 +652,7 @@ function dispatchFocusChangeEvent(eventName: string, element: HTMLElement): void
 class SlideToggleTestApp {
   isDisabled: boolean = false;
   isRequired: boolean = false;
+  disableRipple: boolean = false;
   slideModel: boolean = false;
   slideChecked: boolean = false;
   slideColor: string;
@@ -671,3 +694,10 @@ class SlideToggleFormsTestApp {
 class SlideToggleWithFormControl {
   formControl = new FormControl();
 }
+
+// TODO(devversion): replace with global utility once pull request #2943 is merged.
+function dispatchFakeEvent(element: HTMLElement, eventName: string): void {
+  let event  = document.createEvent('Event');
+  event.initEvent(eventName, true, true);
+  element.dispatchEvent(event);
+}

src/lib/slide-toggle/slide-toggle.ts

@@ -75,6 +75,7 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
   private _slideRenderer: SlideToggleRenderer = null;
   private _disabled: boolean = false;
   private _required: boolean = false;
+  private _disableRipple: boolean = false;
 
   // Needs to be public to support AOT compilation (as host binding).
   _hasFocus: boolean = false;
@@ -107,6 +108,11 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
   get required(): boolean { return this._required; }
   set required(value) { this._required = coerceBooleanProperty(value); }
 
+  /** Whether the ripple effect for this slide-toggle is disabled. */
+  @Input()
+  get disableRipple(): boolean { return this._disableRipple; }
+  set disableRipple(value) { this._disableRipple = coerceBooleanProperty(value); }
+
   private _change: EventEmitter<MdSlideToggleChange> = new EventEmitter<MdSlideToggleChange>();
   /** An event will be dispatched each time the slide-toggle changes its value. */
   @Output() change: Observable<MdSlideToggleChange> = this._change.asObservable();