1
- import { Component , ElementRef , Input , HostBinding , Renderer } from '@angular/core' ;
1
+ import { Component , ElementRef , Input , Renderer } from '@angular/core' ;
2
2
import { Focusable } from '../core/a11y/focus-key-manager' ;
3
+ import { coerceBooleanProperty } from '../core/coercion/boolean-property' ;
3
4
4
5
/**
5
6
* This directive is intended to be used inside an md-menu tag.
@@ -11,40 +12,49 @@ import {Focusable} from '../core/a11y/focus-key-manager';
11
12
host : {
12
13
'role' : 'menuitem' ,
13
14
'[class.mat-menu-item]' : 'true' ,
15
+ '[attr.tabindex]' : '_getTabIndex()' ,
16
+ '[attr.aria-disabled]' : 'disabled.toString()' ,
17
+ '[attr.disabled]' : '_getDisabledAttr()' ,
14
18
'(click)' : '_checkDisabled($event)' ,
15
- '[attr.tabindex]' : '_tabindex'
16
19
} ,
17
20
templateUrl : 'menu-item.html' ,
18
21
exportAs : 'mdMenuItem'
19
22
} )
20
23
export class MdMenuItem implements Focusable {
21
- _disabled : boolean ;
24
+ /** Whether the menu item is disabled */
25
+ private _disabled : boolean = false ;
22
26
23
27
constructor ( private _renderer : Renderer , private _elementRef : ElementRef ) { }
24
28
29
+ /** Focuses the menu item. */
25
30
focus ( ) : void {
26
- this . _renderer . invokeElementMethod ( this . _elementRef . nativeElement , 'focus' ) ;
31
+ this . _renderer . invokeElementMethod ( this . _getHostElement ( ) , 'focus' ) ;
27
32
}
28
33
29
- // this is necessary to support anchors
30
34
/** Whether the menu item is disabled. */
31
- @HostBinding ( 'attr.disabled' )
32
35
@Input ( )
33
- get disabled ( ) : boolean { return this . _disabled ; }
34
- set disabled ( value : boolean ) {
35
- this . _disabled = ( value === false || value === undefined ) ? null : true ;
36
+ get disabled ( ) { return this . _disabled ; }
37
+ set disabled ( value : any ) {
38
+ this . _disabled = coerceBooleanProperty ( value ) ;
36
39
}
37
40
38
- /** Sets the aria-disabled property on the menu item. */
39
- @HostBinding ( 'attr.aria-disabled' )
40
- get isAriaDisabled ( ) : string { return String ( ! ! this . disabled ) ; }
41
- get _tabindex ( ) { return this . disabled ? '-1' : '0' ; }
41
+ /** Used to set the `tabindex`. */
42
+ _getTabIndex ( ) : string {
43
+ return this . _disabled ? '-1' : '0' ;
44
+ }
45
+
46
+ /** Used to set the HTML `disabled` attribute. Necessary for links to be disabled properly. */
47
+ _getDisabledAttr ( ) : boolean {
48
+ return this . _disabled ? true : null ;
49
+ }
42
50
51
+ /** Returns the host DOM element. */
43
52
_getHostElement ( ) : HTMLElement {
44
53
return this . _elementRef . nativeElement ;
45
54
}
46
55
47
- _checkDisabled ( event : Event ) {
56
+ /** Prevents the default element actions if it is disabled. */
57
+ _checkDisabled ( event : Event ) : void {
48
58
if ( this . disabled ) {
49
59
event . preventDefault ( ) ;
50
60
event . stopPropagation ( ) ;
0 commit comments