import { Component , Input , EventEmitter } from '@angular/core' ; import { trigger , state , style , transition , animate } from '@angular/animations' ; @ Component ( { selector : 'lsu-accordionPanel' , template : `
    <div class="title" [ngClass]="{'active': active}" (click)="setAccordion()">
      <i class="dropdown icon"></i>
      {{ title }}
    </div>
    <div class="content active" [@accordionPanelState]="panelState">
      <ng-content></ng-content>
    </div>
  ` , animations : [ trigger ( 'accordionPanelState' , [ state ( 'inactive' , style ( { padding : '0 1em' , overflow : 'hidden' , height : 0 } ) ) , state ( 'active' , style ( { padding : '.5em 1em 1.5em' , overflow : 'initial' , height : '*' } ) ) , transition ( 'inactive => active' , animate ( '150ms ease-in' ) ) , transition ( 'active => inactive' , animate ( '150ms ease-out' ) ) ] ) ] } ) export class AccordionPanelComponent { @ Input ( ) public title : string = "" ; @ Input ( ) get active ( ) : boolean { return this . _active ; } set active ( v ) { this . _active = ! ! v ; if ( this . _active ) { this . panelState = 'active' ; } else { this . panelState = 'inactive' ; } } _active : boolean = false ; panelState : string = 'inactive' ; parent : any ; constructor ( ) { } onChange ( parent ) { this . parent = parent ; } setAccordion ( ) { this . parent . setAccordion ( this ) ; } }