1- import { Component , ElementRef , Input , HostBinding , Renderer } from '@angular/core' ;
1+ import { Component , ElementRef , Input , Renderer } from '@angular/core' ;
22import { Focusable } from '../core/a11y/focus-key-manager' ;
3+ import { coerceBooleanProperty } from '../core/coercion/boolean-property' ;
34
45/**
56 * This directive is intended to be used inside an md-menu tag.
@@ -11,40 +12,49 @@ import {Focusable} from '../core/a11y/focus-key-manager';
1112 host : {
1213 'role' : 'menuitem' ,
1314 '[class.mat-menu-item]' : 'true' ,
15+ '[attr.tabindex]' : '_getTabIndex()' ,
16+ '[attr.aria-disabled]' : 'disabled.toString()' ,
17+ '[attr.disabled]' : '_getDisabledAttr()' ,
1418 '(click)' : '_checkDisabled($event)' ,
15- '[attr.tabindex]' : '_tabindex'
1619 } ,
1720 templateUrl : 'menu-item.html' ,
1821 exportAs : 'mdMenuItem'
1922} )
2023export class MdMenuItem implements Focusable {
21- _disabled : boolean ;
24+ /** Whether the menu item is disabled */
25+ private _disabled : boolean = false ;
2226
2327 constructor ( private _renderer : Renderer , private _elementRef : ElementRef ) { }
2428
29+ /** Focuses the menu item. */
2530 focus ( ) : void {
26- this . _renderer . invokeElementMethod ( this . _elementRef . nativeElement , 'focus' ) ;
31+ this . _renderer . invokeElementMethod ( this . _getHostElement ( ) , 'focus' ) ;
2732 }
2833
29- // this is necessary to support anchors
3034 /** Whether the menu item is disabled. */
31- @HostBinding ( 'attr.disabled' )
3235 @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 ) ;
3639 }
3740
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+ }
4250
51+ /** Returns the host DOM element. */
4352 _getHostElement ( ) : HTMLElement {
4453 return this . _elementRef . nativeElement ;
4554 }
4655
47- _checkDisabled ( event : Event ) {
56+ /** Prevents the default element actions if it is disabled. */
57+ _checkDisabled ( event : Event ) : void {
4858 if ( this . disabled ) {
4959 event . preventDefault ( ) ;
5060 event . stopPropagation ( ) ;
0 commit comments