import { isPlatformBrowser } from '@angular/common' ; import { AfterViewInit , ContentChildren , Directive , ElementRef , Inject , PLATFORM_ID , QueryList , Renderer2 } from '@angular/core' ; import { fromEvent , merge } from 'rxjs' ; import { takeUntil } from 'rxjs/operators' ; import { ResizeService } from '../../../../directives/resize/index' ; import { BaseResizableTableDirective } from '../resizable-table-base.directive' ; import { ResizableTableColumnComponent } from '../resizable-table-column.component' ; import { RESIZABLE_TABLE_SERVICE_TOKEN } from '../resizable-table-service.token' ; import { ResizableExpandingTableService } from './resizable-expanding-table.service' ; @ Directive ( { selector : '[uxResizableExpandingTable]' , exportAs : 'ux-resizable-expanding-table' , providers : [ { provide : RESIZABLE_TABLE_SERVICE_TOKEN , useClass : ResizableExpandingTableService } ] , host : { 'class' : 'ux-resizable-expanding-table' , '[class.ux-resizable-expanding-table-overflow]' : '_overflowX' } } ) export class ResizableExpandingTableDirective extends BaseResizableTableDirective implements AfterViewInit { /** Get all the column headers */ @ ContentChildren ( ResizableTableColumnComponent , { descendants : true } ) columns : QueryList < ResizableTableColumnComponent > ; /** Has horizontal overflow */ _overflowX : boolean = false ; constructor ( elementRef , @ Inject ( RESIZABLE_TABLE_SERVICE_TOKEN ) table , renderer , resize , @ Inject ( PLATFORM_ID ) private _platformId ) { super ( elementRef , table , renderer , resize ) ; } ngAfterViewInit ( ) { if ( isPlatformBrowser ( this . _platformId ) ) { const tableHeaders = this . _elementRef . nativeElement . querySelectorAll ( 'thead > tr' ) ; for ( const body of Array . from ( this . _elementRef . nativeElement . tBodies ) ) { fromEvent ( body , 'scroll' ) . pipe ( takeUntil ( this . _onDestroy ) ) . subscribe ( ( ) => { Array . from ( tableHeaders ) . forEach ( thead => this . _renderer . setStyle ( thead , 'margin-left' , `-${ body . scrollLeft }px` ) ) ; } ) ; } /** checks if the table is resizing and allows for a class to be added for when moving from
             overflow to no overflow */ merge ( this . _table . onResize$ , this . columns . changes ) . pipe ( takeUntil ( this . _onDestroy ) ) . subscribe ( ( ) => { this . _overflowX = this . _elementRef . nativeElement . tBodies [ 0 ] . scrollWidth > this . _elementRef . nativeElement . tBodies [ 0 ] . offsetWidth ; } ) ; } } /**
     * If this is being used within a modal the table width may initially be zero. This can cause some issues when it does actually appear
     * visibily on screen. We should only setup the table once we actually have a width/
     */ onTableReady ( ) { if ( this . _initialised || this . getScrollWidth ( ) === 0 ) { if ( this . _initialised && this . getScrollWidth ( ) === 0 ) { this . _initialised = false ; } return ; } this . _table . tableWidth = this . getScrollWidth ( ) ; Promise . resolve ( ) . then ( ( ) => { this . _table . setColumns ( this . columns ) ; this . updateLayout ( ) ; } ) ; this . columns . changes . pipe ( takeUntil ( this . _onDestroy ) ) . subscribe ( ( ) => Promise . resolve ( ) . then ( ( ) => this . _table . setColumns ( this . columns ) ) ) ; this . _initialised = true ; } /** Force the layout to recalculate */ updateLayout ( ) { Promise . resolve ( ) . then ( ( ) => this . columns . forEach ( ( _column , index ) => this . _table . resizeColumn ( index , 0 ) ) ) ; } }