+ [mdRippleDisabled]="_isRippleDisabled()">
+ [mdRippleDisabled]="_isRippleDisabled()">
diff --git a/src/lib/list/list.spec.ts b/src/lib/list/list.spec.ts
index 832afc7bf391..d9854cf1dfdf 100644
--- a/src/lib/list/list.spec.ts
+++ b/src/lib/list/list.spec.ts
@@ -125,7 +125,7 @@ describe('MdList', () => {
const items: QueryList = 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));
});
});
diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts
index a78156d71e34..7762facbc6a5 100644
--- a/src/lib/list/list.ts
+++ b/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() {
diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts
index a1b3f508dda1..50655da853ca 100644
--- a/src/lib/list/selection-list.ts
+++ b/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;
/** 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 = new SelectionModel(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();
}