import { Directive , ElementRef , Inject , OnDestroy , QueryList , Renderer2 } from '@angular/core' ; import { Subject } from 'rxjs' ; import { takeUntil } from 'rxjs/operators' ; import { ResizeService } from '../../../directives/resize' ; import { BaseResizableTableService } from './resizable-table-base.service' ; import { ResizableTableColumnComponent } from './resizable-table-column.component' ; import { RESIZABLE_TABLE_SERVICE_TOKEN } from './resizable-table-service.token' ; @ Directive ( ) export abstract class BaseResizableTableDirective implements OnDestroy { columns : QueryList < ResizableTableColumnComponent > ; /** Unsubscribe from the observables */ protected _onDestroy = new Subject < void > ( ) ; /** Store the initialised state of the table */ protected _initialised : boolean = false ; constructor ( protected _elementRef , @ Inject ( RESIZABLE_TABLE_SERVICE_TOKEN ) protected _table , protected _renderer , resize ) { resize . addResizeListener ( this . _elementRef . nativeElement ) . pipe ( takeUntil ( this . _onDestroy ) ) . subscribe ( ( ) => { _table . tableWidth = this . getScrollWidth ( ) ; this . onTableReady ( ) ; } ) ; } /** Cleanup after the component is destroyed */ ngOnDestroy ( ) { this . _onDestroy . next ( ) ; this . _onDestroy . complete ( ) ; } /** Set all resizable columns to the same width */ setUniformWidths ( ) { this . _table . setUniformWidths ( ) ; } /** Get the smallest tbody width taking into account scrollbars (uxFixedHeaderTable) */ protected getScrollWidth ( ) { return Array . from ( ( this . _elementRef . nativeElement as HTMLTableElement ) . tBodies ) . reduce ( ( width , tbody ) => Math . min ( width , tbody . scrollWidth ) , ( this . _elementRef . nativeElement as HTMLTableElement ) . offsetWidth ) ; } abstract onTableReady ( ) ; }