diff --git a/src/components/list/list-item.html b/src/components/list/list-item.html
index 63f1544b67a3..630fd1d910b5 100644
--- a/src/components/list/list-item.html
+++ b/src/components/list/list-item.html
@@ -1,5 +1,5 @@
-
+
\ No newline at end of file
+
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
index 3263e4c9a800..cf407af33901 100644
--- a/src/components/list/list.scss
+++ b/src/components/list/list.scss
@@ -25,11 +25,11 @@ $md-dense-avatar-height: 48px;
$md-dense-two-line-height: 60px;
$md-dense-three-line-height: 76px;
-/*
+/*
This mixin provides all list-item styles, changing font size and height
based on whether the list is in dense mode.
*/
-@mixin md-list-item-base($font-size, $base-height, $avatar-height,
+@mixin md-list-item-base($font-size, $base-height, $avatar-height,
$two-line-height, $three-line-height) {
.md-list-item {
@@ -94,7 +94,7 @@ based on whether the list is in dense mode.
}
/*
-This mixin provides all md-line styles, changing secondary font size
+This mixin provides all md-line styles, changing secondary font size
based on whether the list is in dense mode.
*/
@mixin md-line-base($secondary-font-size) {
@@ -201,8 +201,8 @@ md-nav-list {
.md-list-item {
cursor: pointer;
- &:hover {
+ &:hover, &.md-list-item-focus {
background: md-color($md-background, 'hover');
}
}
-}
\ No newline at end of file
+}
diff --git a/src/components/list/list.spec.ts b/src/components/list/list.spec.ts
index 14f0afea34ab..c2577b8d9991 100644
--- a/src/components/list/list.spec.ts
+++ b/src/components/list/list.spec.ts
@@ -9,7 +9,7 @@ import {TestComponentBuilder} from '@angular/compiler/testing';
import {Component} from '@angular/core';
import {By} from '@angular/platform-browser';
-import {MD_LIST_DIRECTIVES} from './list';
+import {MD_LIST_DIRECTIVES, MdListItem} from './list';
describe('MdList', () => {
let builder: TestComponentBuilder;
@@ -18,6 +18,31 @@ describe('MdList', () => {
builder = tcb;
}));
+ it('should add and remove focus class on focus/blur', () => {
+ var template = `
+
+
+ Paprika
+
+
+ `;
+ return builder.overrideTemplate(TestList, template)
+ .createAsync(TestList).then((fixture) => {
+ let listItem = fixture.debugElement.query(By.directive(MdListItem));
+ let listItemDiv = fixture.debugElement.query(By.css('.md-list-item'));
+ fixture.detectChanges();
+ expect(listItemDiv.nativeElement.classList).not.toContain('md-list-item-focus');
+
+ listItem.componentInstance.handleFocus();
+ fixture.detectChanges();
+ expect(listItemDiv.nativeElement.classList).toContain('md-list-item-focus');
+
+ listItem.componentInstance.handleBlur();
+ fixture.detectChanges();
+ expect(listItemDiv.nativeElement.classList).not.toContain('md-list-item-focus');
+ });
+ });
+
it('should not apply any class to a list without lines', (done: () => void) => {
var template = `
diff --git a/src/components/list/list.ts b/src/components/list/list.ts
index 8846b6ed5666..51c557c41d36 100644
--- a/src/components/list/list.ts
+++ b/src/components/list/list.ts
@@ -33,13 +33,20 @@ export class MdListAvatar {}
@Component({
moduleId: module.id,
selector: 'md-list-item, a[md-list-item]',
- host: {'role': 'listitem'},
+ host: {
+ 'role': 'listitem',
+ '(focus)': 'handleFocus()',
+ '(blur)': 'handleBlur()',
+ },
templateUrl: 'list-item.html',
encapsulation: ViewEncapsulation.None
})
export class MdListItem implements AfterContentInit {
@ContentChildren(MdLine) _lines: QueryList;
+ /** @internal */
+ hasFocus: boolean = false;
+
/** @internal */
ngAfterContentInit() {
this._setLineClass(this._lines.length);
@@ -56,6 +63,16 @@ export class MdListItem implements AfterContentInit {
constructor(private _renderer: Renderer, private _element: ElementRef) {}
+ /** @internal */
+ handleFocus() {
+ this.hasFocus = true;
+ }
+
+ /** @internal */
+ handleBlur() {
+ this.hasFocus = false;
+ }
+
private _setLineClass(count: number): void {
this._resetClasses();
if (count === 2 || count === 3) {