import { Component , ElementRef , Inject , OnDestroy , OnInit , Renderer2 , ChangeDetectionStrategy } from '@angular/core' ; import { combineLatest , Subject } from 'rxjs' ; import { takeUntil } from 'rxjs/operators' ; import { ColumnUnit } from './table-column-resize-standard/resizable-table.service' ; import { RESIZABLE_TABLE_SERVICE_TOKEN } from './resizable-table-service.token' ; import { BaseResizableTableService , ResizableTableType } from './resizable-table-base.service' ; @ Component ( { selector : '[uxResizableTableCell]' , templateUrl : './resizable-table-cell.component.html' , changeDetection : ChangeDetectionStrategy . OnPush } ) export class ResizableTableCellComponent implements OnInit , OnDestroy { /** Unsubscribe from all subscriptions on destroy */ private readonly _onDestroy = new Subject < void > ( ) ; /** Min width of the column*/ private _minWidth : number ; constructor ( private _elementRef , private _renderer , @ Inject ( RESIZABLE_TABLE_SERVICE_TOKEN ) private _table ) { } ngOnInit ( ) { this . _minWidth = parseFloat ( getComputedStyle ( this . _elementRef . nativeElement ) . minWidth ) ; if ( this . _table . isInitialised$ . value ) { this . setColumnWidth ( ) ; this . setColumnFlex ( ) ; } combineLatest ( [ this . _table . onResize$ , this . _table . isResizing$ ] ) . pipe ( takeUntil ( this . _onDestroy ) ) . subscribe ( ( ) => { this . setColumnWidth ( ) ; this . setColumnFlex ( ) ; } ) ; } ngOnDestroy ( ) { this . _onDestroy . next ( ) ; this . _onDestroy . complete ( ) ; } /** Get the column index this cell is part of */ private getCellIndex ( ) { return ( this . _elementRef . nativeElement as HTMLTableCellElement ) . cellIndex ; } /** Set the width of the column */ private setColumnWidth ( ) { const width = this . _table . isResizing$ . value || this . _table . getColumnDisabled ( this . getCellIndex ( ) ) ? `${ this . _table . getColumnWidth ( this . getCellIndex ( ) , ColumnUnit . Pixel ) }px` : `${ this . _table . getColumnWidth ( this . getCellIndex ( ) , ColumnUnit . Percentage ) }%` ; if ( this . _table . type === ResizableTableType . Expand ) { const minWidth = Math . max ( this . _table . getColumnWidth ( this . getCellIndex ( ) , ColumnUnit . Pixel ) , this . _minWidth ) ; this . _renderer . setStyle ( this . _elementRef . nativeElement , 'min-width' , `${ minWidth }px` ) ; } this . _renderer . setStyle ( this . _elementRef . nativeElement , 'width' , width ) ; } /** Set the flex value of the column */ private setColumnFlex ( ) { if ( this . _table . isResizing$ . value || this . _table . getColumnDisabled ( this . getCellIndex ( ) ) ) { this . _renderer . setStyle ( this . _elementRef . nativeElement , 'flex' , 'none' ) ; return ; } const flex = this . _table . isInitialised$ . value ? `0 1 ${ this . _table . getColumnWidth ( this . getCellIndex ( ) , ColumnUnit . Percentage ) }%` : '' ; this . _renderer . setStyle ( this . _elementRef . nativeElement , 'flex' , flex ) ; } }