import { animate , state , style , transition , trigger } from '@angular/animations' ; import { ChangeDetectionStrategy , Component , Input } from '@angular/core' ; let uniqueId = 0 ; @ Component ( { selector : 'kirby-accordion-item' , templateUrl : './accordion-item.component.html' , styleUrls : [ './accordion-item.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush , animations : [ trigger ( 'isExpanded' , [ state ( 'true' , style ( { height : '*' , visibility : 'visible' } ) ) , state ( 'false' , style ( { height : '0px' , visibility : 'hidden' } ) ) , transition ( 'true <=> false' , animate ( '0.2s' ) ) , ] ) , ] , } ) export class AccordionItemComponent { @ Input ( ) title : string ; @ Input ( ) isExpanded : boolean = false ; _titleId = `kirby-accordion-item-title-${ ++ uniqueId }` ; _contentId = `kirby-accordion-item-content-${ uniqueId }` ; }