import { UpdateHostClassService } from 'ngx-tethys/core' ; import { ChangeDetectorRef , Component , ElementRef , HostBinding , Input , OnInit } from '@angular/core' ; import { ThyCollapsePanelComponent } from './collapse-panel.component' ; export type Position = 'left' | 'right' ; @ Component ( { selector : 'thy-collapse' , template : `
        <ng-container>
            <ng-content></ng-content>
        </ng-container>
    ` , host : { '[class.thy-collapse-ghost]' : 'thyGhost' , '[class.thy-collapse-borderless]' : '!thyBordered' , '[class.thy-collapse-icon-position-right]' : `thyExpandIconPosition === 'right'` , '[class.thy-collapse-icon-position-left]' : `thyExpandIconPosition === 'left'` } , providers : [ UpdateHostClassService ] } ) export class ThyCollapseComponent implements OnInit { constructor ( private cdr , private elementRef , private updateHostClassService ) { } @ HostBinding ( 'class.thy-collapse' ) isCollapse = true ; @ Input ( ) thyAccordion : boolean ; @ Input ( ) thyBordered : boolean = true ; @ Input ( ) thyExpandIconPosition : Position = 'left' ; @ Input ( ) thyGhost : boolean ; private listOfCollapsePanelComponent : ThyCollapsePanelComponent [ ] = [ ] ; ngOnInit ( ) { } addPanel ( value ) { this . listOfCollapsePanelComponent . push ( value ) ; } removePanel ( value ) { this . listOfCollapsePanelComponent . splice ( this . listOfCollapsePanelComponent . indexOf ( value ) , 1 ) ; } click ( collapse , event ) { if ( this . thyAccordion && ! collapse . thyActive ) { this . listOfCollapsePanelComponent . filter ( item => item !== collapse ) . forEach ( item => { if ( item . thyActive ) { item . thyActive = false ; item . thyExpandChange . emit ( { expanded : collapse . thyActive , event } ) ; item . markForCheck ( ) ; } } ) ; } collapse . thyActive = ! collapse . thyActive ; collapse . thyExpandChange . emit ( { expanded : collapse . thyActive , event } ) ; } }