import { ChangeDetectionStrategy , Component , EventEmitter , HostBinding , HostListener , Input , Output , ViewEncapsulation } from '@angular/core' ; import { Column , Sort , SortDirection } from '../../table.types' ; @ Component ( { selector : 'th[table-column-head]' , templateUrl : './table-column-head.component.html' , styleUrls : [ './table-column-head.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush , encapsulation : ViewEncapsulation . Emulated } ) export class TableColumnHeadComponent { @ HostBinding ( 'class' ) public cssClasses : Array < string > ; @ HostBinding ( 'class.sortable' ) public sortable : boolean = false ; @ HostBinding ( 'class.hidden' ) @ Input ( ) public hidden : boolean = false ; @ HostBinding ( 'class.sorting-asc' ) public sortAsc : boolean = true ; @ HostBinding ( 'class.sorting-desc' ) public sortDesc : boolean = true ; /**
     * Column of this head element.
     */ public column : Column ; param c @ Input ( 'column' ) public set Column ( c ) { this . column = c ; this . hidden = this . column . hidden ; this . sortable = this . column . sortable || false ; this . cssClasses = this . column . cssClasses || [ ] ; } /**
     * Sort order of this element.
     */ @ Input ( ) public order : SortDirection = SortDirection . NONE ; /**
     * Event Emitter when the sort order and selection was changed.
     */ @ Output ( ) public sortChange : EventEmitter < Sort > = new EventEmitter < Sort > ( ) ; /**
     * Is this the selected sort column.
     */ public sortActivated : boolean = false ; param value @ Input ( 'sortActivated' ) public set SortActivated ( value ) { this . onSelectedChange ( value ) ; } param value public onSelectedChange ( value ) { this . sortActivated = value ; if ( ! this . sortActivated ) { this . order = SortDirection . NONE ; this . sortAsc = false ; this . sortDesc = false ; } else { this . order = this . reverseOrder ( this . order ) ; if ( this . order === SortDirection . ASCENDING ) { this . sortDesc = false ; this . sortAsc = true ; } else if ( this . order === SortDirection . DESCENDING ) { this . sortDesc = true ; this . sortAsc = false ; } else { this . sortAsc = false ; this . sortDesc = false ; } } } param e @ HostListener ( 'click' , [ '$event' ] ) public onClick ( e ) { if ( this . column && this . column . sortable && this . sortable ) { this . onSelectedChange ( true ) ; const sort = { name : this . column . name , order : this . order } as Sort ; this . sortChange . emit ( sort ) ; } } param direction public reverseOrder ( direction ) { if ( direction === SortDirection . DESCENDING ) { return SortDirection . ASCENDING ; } else { return SortDirection . DESCENDING ; } } }