import { ChangeDetectionStrategy , Component , ContentChild , ContentChildren , ElementRef , Optional , QueryList , Renderer , ViewChild , ViewEncapsulation } from '@angular/core' ; import { Button } from '../button/button' ; import { Config } from '../../config/config' ; import { Form } from '../../util/form' ; import { Icon } from '../icon/icon' ; import { Ion } from '../ion' ; import { Label } from '../label/label' ; import { ItemReorder } from './item-reorder' ; name description usage advanced demo see {@link /docs/components#lists List Component Docs} see {@link ../../list/List List API Docs} see {@link ../ItemSliding ItemSliding API Docs} @ Component ( { selector : 'ion-list-header,ion-item,[ion-item],ion-item-divider' , template : '<ng-content select="[item-start],[item-left],ion-checkbox:not([item-end]):not([item-right])"></ng-content>' + '<div class="item-inner">' + '<div class="input-wrapper">' + '<ng-content select="ion-label"></ng-content>' + '<ion-label *ngIf="_viewLabel">' + '<ng-content></ng-content>' + '</ion-label>' + '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>' + '</div>' + '<ng-content select="[item-end],[item-right],ion-radio,ion-toggle"></ng-content>' + '<ion-reorder *ngIf="_hasReorder"></ion-reorder>' + '</div>' + '<div class="button-effect"></div>' , host : { 'class' : 'item' } , changeDetection : ChangeDetectionStrategy . OnPush , encapsulation : ViewEncapsulation . None , } ) export class Item extends Ion { _ids : number = - 1 ; _inputs : Array < string > = [ ] ; _label : Label ; _viewLabel : boolean = true ; _name : string = 'item' ; _hasReorder : boolean ; hidden id : string ; hidden labelId : string = null ; constructor ( form , config , elementRef , renderer , @ Optional ( ) reorder ) { super ( config , elementRef , renderer , 'item' ) ; this . _setName ( elementRef ) ; this . _hasReorder = ! ! reorder ; this . id = form . nextId ( ) . toString ( ) ; this . labelId = 'lbl-' + this . id ; if ( ! ( < any > renderer ) . orgListen ) { ( < any > renderer ) . orgListen = renderer . listen ; renderer . listen = function ( renderElement , name , callback ) : Function { if ( name === 'click' && renderElement . setAttribute ) { renderElement . setAttribute ( 'tappable' , '' ) ; } return ( < any > renderer ) . orgListen ( renderElement , name , callback ) ; } ; } } hidden registerInput ( type ) { this . _inputs . push ( type ) ; return this . id + '-' + ( ++ this . _ids ) ; } hidden ngAfterContentInit ( ) { if ( this . _viewLabel && this . _inputs . length ) { let labelText = this . getLabelText ( ) . trim ( ) ; this . _viewLabel = ( labelText . length > 0 ) ; } if ( this . _inputs . length > 1 ) { this . setElementClass ( 'item-multiple-inputs' , true ) ; } } hidden _updateColor ( newColor , componentName ? ) { componentName = componentName || 'item' ; this . _setColor ( newColor , componentName ) ; } hidden _setName ( elementRef ) { let nodeName = elementRef . nativeElement . nodeName . replace ( 'ION-' , '' ) ; if ( nodeName === 'LIST-HEADER' || nodeName === 'ITEM-DIVIDER' ) { this . _name = nodeName ; } } hidden getLabelText ( ) { return this . _label ? this . _label . text : '' ; } hidden @ ContentChild ( Label ) set contentLabel ( label ) { if ( label ) { this . _label = label ; label . id = this . labelId ; if ( label . type ) { this . setElementClass ( 'item-label-' + label . type , true ) ; } this . _viewLabel = false ; } } hidden @ ViewChild ( Label ) set viewLabel ( label ) { if ( ! this . _label ) { this . _label = label ; } } hidden @ ContentChildren ( Button ) set _buttons ( buttons ) { buttons . forEach ( button => { if ( ! button . _size ) { button . setElementClass ( 'item-button' , true ) ; } } ) ; } hidden @ ContentChildren ( Icon ) set _icons ( icons ) { icons . forEach ( icon => { icon . setElementClass ( 'item-icon' , true ) ; } ) ; } }