license import { AfterContentInit , ChangeDetectionStrategy , Component , ContentChild , ContentChildren , Directive , ElementRef , Optional , QueryList , ViewEncapsulation , } from '@angular/core' ; import { CanDisableRipple , CanDisableRippleCtor , MatLine , setLines , mixinDisableRipple , } from '@angular/material/core' ; docs-private export class MatListBase { } export const _MatListMixinBase = mixinDisableRipple ( MatListBase ) ; docs-private export class MatListItemBase { } export const _MatListItemMixinBase = mixinDisableRipple ( MatListItemBase ) ; @ Component ( { moduleId : module . id , selector : 'mat-nav-list' , exportAs : 'matNavList' , host : { 'role' : 'navigation' , 'class' : 'mat-nav-list mat-list-base' } , templateUrl : 'list.html' , styleUrls : [ 'list.css' ] , inputs : [ 'disableRipple' ] , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class MatNavList extends _MatListMixinBase implements CanDisableRipple { } @ Component ( { moduleId : module . id , selector : 'mat-list, mat-action-list' , exportAs : 'matList' , templateUrl : 'list.html' , host : { 'class' : 'mat-list mat-list-base' } , styleUrls : [ 'list.css' ] , inputs : [ 'disableRipple' ] , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class MatList extends _MatListMixinBase implements CanDisableRipple { deprecated breaking-change constructor ( private _elementRef ? ) { super ( ) ; } _getListType ( ) { const elementRef = this . _elementRef ; if ( elementRef ) { const nodeName = elementRef . nativeElement . nodeName . toLowerCase ( ) ; if ( nodeName === 'mat-list' ) { return 'list' ; } if ( nodeName === 'mat-action-list' ) { return 'action-list' ; } } return null ; } } docs-private @ Directive ( { selector : '[mat-list-avatar], [matListAvatar]' , host : { 'class' : 'mat-list-avatar' } } ) export class MatListAvatarCssMatStyler { } docs-private @ Directive ( { selector : '[mat-list-icon], [matListIcon]' , host : { 'class' : 'mat-list-icon' } } ) export class MatListIconCssMatStyler { } docs-private @ Directive ( { selector : '[mat-subheader], [matSubheader]' , host : { 'class' : 'mat-subheader' } } ) export class MatListSubheaderCssMatStyler { } /** An item within a Material Design list. */ @ Component ( { moduleId : module . id , selector : 'mat-list-item, a[mat-list-item], button[mat-list-item]' , exportAs : 'matListItem' , host : { 'class' : 'mat-list-item' , '[class.mat-list-item-avatar]' : '_avatar || _icon' , '[class.mat-list-item-with-avatar]' : '_avatar || _icon' , } , inputs : [ 'disableRipple' ] , templateUrl : 'list-item.html' , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class MatListItem extends _MatListItemMixinBase implements AfterContentInit , CanDisableRipple { private _isInteractiveList : boolean = false ; private _list ? : MatNavList | MatList ; @ ContentChildren ( MatLine ) _lines : QueryList < MatLine > ; @ ContentChild ( MatListAvatarCssMatStyler ) _avatar : MatListAvatarCssMatStyler ; @ ContentChild ( MatListIconCssMatStyler ) _icon : MatListIconCssMatStyler ; constructor ( private _element , @ Optional ( ) navList ? , @ Optional ( ) list ? ) { super ( ) ; this . _isInteractiveList = ! ! ( navList || ( list && list . _getListType ( ) === 'action-list' ) ) ; this . _list = navList || list ; const element = this . _getHostElement ( ) ; if ( element . nodeName . toLowerCase ( ) === 'button' && ! element . hasAttribute ( 'type' ) ) { element . setAttribute ( 'type' , 'button' ) ; } } ngAfterContentInit ( ) { setLines ( this . _lines , this . _element ) ; } /** Whether this list item should show a ripple effect when clicked. */ _isRippleDisabled ( ) { return ! this . _isInteractiveList || this . disableRipple || ! ! ( this . _list && this . _list . disableRipple ) ; } /** Retrieves the DOM element of the component host. */ _getHostElement ( ) { return this . _element . nativeElement ; } }