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

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();