refactor(selection-list): use disable-ripple mixin (#6692)

* Switches the `disableRipple` getter/setter with the `disableRipple` mixin from core.
* Prefixes the `isRippleEnabled` method with an underscore to hide it from the API docs.
* Switch `isRippleEnabled` to `_isRippleDisabled`

Author: devversion

src/lib/list/list-item.html

@@ -1,7 +1,7 @@
 <div class="mat-list-item-content">
   <div class="mat-list-item-ripple" md-ripple
        [mdRippleTrigger]="_getHostElement()"
-       [mdRippleDisabled]="!isRippleEnabled()">
+       [mdRippleDisabled]="_isRippleDisabled()">
   </div>
 
   <ng-content

src/lib/list/list-option.html

@@ -1,7 +1,7 @@
 <div class="mat-list-item-content"  [class.mat-list-item-content-reverse]="checkboxPosition == 'after'" [class.mat-list-item-disabled]="disabled">
   <div class="mat-list-item-ripple" md-ripple
        [mdRippleTrigger]="_getHostElement()"
-       [mdRippleDisabled]="!isRippleEnabled()">
+       [mdRippleDisabled]="_isRippleDisabled()">
   </div>
 
   <md-pseudo-checkbox [state]="selected ? 'checked' : 'unchecked'" #autocheckbox [disabled]="disabled"></md-pseudo-checkbox>

src/lib/list/list.spec.ts

@@ -125,7 +125,7 @@ describe('MdList', () => {
 
     const items: QueryList<MdListItem> = fixture.debugElement.componentInstance.listItems;
     expect(items.length).toBeGreaterThan(0);
-    items.forEach(item => expect(item.isRippleEnabled()).toBe(false));
+    items.forEach(item => expect(item._isRippleDisabled()).toBe(true));
   });
 
   it('should allow disabling ripples for specific nav-list items', () => {
@@ -136,12 +136,12 @@ describe('MdList', () => {
     expect(items.length).toBeGreaterThan(0);
 
     // Ripples should be enabled by default, and can be disabled with a binding.
-    items.forEach(item => expect(item.isRippleEnabled()).toBe(true));
+    items.forEach(item => expect(item._isRippleDisabled()).toBe(false));
 
     fixture.componentInstance.disableItemRipple = true;
     fixture.detectChanges();
 
-    items.forEach(item => expect(item.isRippleEnabled()).toBe(false));
+    items.forEach(item => expect(item._isRippleDisabled()).toBe(true));
   });
 
   it('should allow disabling ripples for the whole nav-list', () => {
@@ -152,12 +152,12 @@ describe('MdList', () => {
     expect(items.length).toBeGreaterThan(0);
 
     // Ripples should be enabled by default, and can be disabled with a binding.
-    items.forEach(item => expect(item.isRippleEnabled()).toBe(true));
+    items.forEach(item => expect(item._isRippleDisabled()).toBe(false));
 
     fixture.componentInstance.disableListRipple = true;
     fixture.detectChanges();
 
-    items.forEach(item => expect(item.isRippleEnabled()).toBe(false));
+    items.forEach(item => expect(item._isRippleDisabled()).toBe(true));
   });
 });
 

src/lib/list/list.ts

@@ -156,8 +156,8 @@ export class MdListItem extends _MdListItemMixinBase implements AfterContentInit
   }
 
   /** Whether this list item should show a ripple effect when clicked.  */
-  isRippleEnabled() {
-    return !this.disableRipple && this._isNavList && !this._list.disableRipple;
+  _isRippleDisabled() {
+    return !this._isNavList || this.disableRipple || this._list.disableRipple;
   }
 
   _handleFocus() {

src/lib/list/selection-list.ts

@@ -32,9 +32,13 @@ import {FocusableOption} from '../core/a11y/focus-key-manager';
 import {CanDisable, mixinDisabled} from '../core/common-behaviors/disabled';
 import {RxChain, switchMap, startWith} from '../core/rxjs/index';
 import {merge} from 'rxjs/observable/merge';
+import {CanDisableRipple, mixinDisableRipple} from '../core/common-behaviors/disable-ripple';
 
 export class MdSelectionListBase {}
-export const _MdSelectionListMixinBase = mixinDisabled(MdSelectionListBase);
+export const _MdSelectionListMixinBase = mixinDisableRipple(mixinDisabled(MdSelectionListBase));
+
+export class MdListOptionBase {}
+export const _MdListOptionMixinBase = mixinDisableRipple(MdListOptionBase);
 
 
 export interface MdSelectionListOptionEvent {
@@ -51,6 +55,7 @@ const FOCUSED_STYLE: string = 'mat-list-item-focus';
 @Component({
   moduleId: module.id,
   selector: 'md-list-option, mat-list-option',
+  inputs: ['disableRipple'],
   host: {
     'role': 'option',
     'class': 'mat-list-item mat-list-option',
@@ -65,9 +70,10 @@ const FOCUSED_STYLE: string = 'mat-list-item-focus';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MdListOption implements AfterContentInit, OnDestroy, FocusableOption {
+export class MdListOption extends _MdListOptionMixinBase
+    implements AfterContentInit, OnDestroy, FocusableOption, CanDisableRipple {
+
   private _lineSetter: MdLineSetter;
-  private _disableRipple: boolean = false;
   private _selected: boolean = false;
   /** Whether the checkbox is disabled. */
   private _disabled: boolean = false;
@@ -76,15 +82,6 @@ export class MdListOption implements AfterContentInit, OnDestroy, FocusableOptio
   /** Whether the option has focus. */
   _hasFocus: boolean = false;
 
-  /**
-   * Whether the ripple effect on click should be disabled. This applies only to list items that are
-   * part of a selection list. The value of `disableRipple` on the `md-selection-list` overrides
-   * this flag
-   */
-  @Input()
-  get disableRipple() { return this._disableRipple; }
-  set disableRipple(value: boolean) { this._disableRipple = coerceBooleanProperty(value); }
-
   @ContentChildren(MdLine) _lines: QueryList<MdLine>;
 
   /** Whether the label should appear before or after the checkbox. Defaults to 'after' */
@@ -119,7 +116,9 @@ export class MdListOption implements AfterContentInit, OnDestroy, FocusableOptio
               private _element: ElementRef,
               private _changeDetector: ChangeDetectorRef,
               @Optional() @Inject(forwardRef(() => MdSelectionList))
-                  public selectionList: MdSelectionList) {}
+                  public selectionList: MdSelectionList) {
+    super();
+  }
 
   ngAfterContentInit() {
     this._lineSetter = new MdLineSetter(this._lines, this._renderer, this._element);
@@ -146,8 +145,8 @@ export class MdListOption implements AfterContentInit, OnDestroy, FocusableOptio
   }
 
   /** Whether this list item should show a ripple effect when clicked.  */
-  isRippleEnabled() {
-    return !this.disableRipple && !this.selectionList.disableRipple;
+  _isRippleDisabled() {
+    return this.disableRipple || this.selectionList.disableRipple;
   }
 
   _handleClick() {
@@ -175,7 +174,7 @@ export class MdListOption implements AfterContentInit, OnDestroy, FocusableOptio
 @Component({
   moduleId: module.id,
   selector: 'md-selection-list, mat-selection-list',
-  inputs: ['disabled'],
+  inputs: ['disabled', 'disableRipple'],
   host: {
     'role': 'listbox',
     '[attr.tabindex]': '_tabIndex',
@@ -189,8 +188,7 @@ export class MdListOption implements AfterContentInit, OnDestroy, FocusableOptio
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MdSelectionList extends _MdSelectionListMixinBase
-  implements FocusableOption, CanDisable, AfterContentInit, OnDestroy {
-  private _disableRipple: boolean = false;
+    implements FocusableOption, CanDisable, CanDisableRipple, AfterContentInit, OnDestroy {
 
   /** Tab index for the selection-list. */
   _tabIndex = 0;
@@ -210,14 +208,6 @@ export class MdSelectionList extends _MdSelectionListMixinBase
   /** options which are selected. */
   selectedOptions: SelectionModel<MdListOption> = new SelectionModel<MdListOption>(true);
 
-  /**
-   * Whether the ripple effect should be disabled on the list-items or not.
-   * This flag only has an effect for `mat-selection-list` components.
-   */
-  @Input()
-  get disableRipple() { return this._disableRipple; }
-  set disableRipple(value: boolean) { this._disableRipple = coerceBooleanProperty(value); }
-
   constructor(private _element: ElementRef) {
     super();
   }