import { coerceBooleanProperty } from '@angular/cdk/coercion' ; import { Directive , EventEmitter , HostBinding , HostListener , Input , OnDestroy , OnInit , Output } from '@angular/core' ; import { Subject } from 'rxjs' ; import { takeUntil } from 'rxjs/operators' ; import { TreeGridItem } from './tree-grid-item.interface' ; import { TreeGridService } from './tree-grid.service' ; @ Directive ( { selector : '[uxTreeGridRow]' , exportAs : 'uxTreeGridRow' , host : { '[class.treegrid-row]' : 'true' } } ) export class TreeGridRowDirective implements OnInit , OnDestroy { @ Input ( 'uxTreeGridRow' ) item : TreeGridItem ; @ Input ( ) canExpand : boolean ; @ Input ( ) @ HostBinding ( 'class.treegrid-row-expanded' ) set expanded ( value ) { const expanded = coerceBooleanProperty ( value ) ; if ( expanded !== this . _expanded ) { this . _expanded = expanded ; this . _treeGridService . setExpanded ( this . item , expanded ) ; } } get expanded ( ) : boolean { return this . _expanded ; } @ Output ( ) expandedChange = new EventEmitter < boolean > ( ) ; @ HostBinding ( 'class.treegrid-row-loading' ) loading : boolean = false ; private _expanded = false ; private _onDestroy = new Subject < void > ( ) ; constructor ( private _treeGridService ) { } ngOnInit ( ) { if ( ! this . item || ! this . item . state ) { throw new Error ( 'uxTreeGridRow should be configured with an object emitted by uxTreeGrid.rows.' ) ; } this . item . state . loading$ . pipe ( takeUntil ( this . _onDestroy ) ) . subscribe ( loading => this . loading = loading ) ; } ngOnDestroy ( ) { this . _onDestroy . next ( ) ; this . _onDestroy . complete ( ) ; } @ HostListener ( 'keydown.ArrowLeft' , [ '$event' ] ) collapse ( event ? ) { this . expanded = false ; this . expandedChange . emit ( false ) ; if ( event ) { event . preventDefault ( ) ; } } @ HostListener ( 'keydown.ArrowRight' , [ '$event' ] ) expand ( event ? ) { if ( ! this . canExpand ) { return ; } this . expanded = true ; this . expandedChange . emit ( true ) ; if ( event ) { event . preventDefault ( ) ; } } toggle ( ) { this . expanded ? this . collapse ( ) : this . expand ( ) ; } }