@one-paragon/angular-utilities 0.1.20 → 0.1.21

package/src/table-builder/classes/table-store.ts

@@ -0,0 +1,360 @@
+import { FieldType, MetaData, SortDef } from '../interfaces/report-def';
+import { v4 as uuid } from 'uuid';
+import { Observable } from 'rxjs';
+import { defaultTableState, Group, InitializationState, keysToDelete, PersistedTableState, TableState } from './TableState';
+import { Injectable, Inject, Predicate } from '@angular/core';
+import { TableBuilderConfig, TableBuilderConfigToken } from './TableBuilderConfig';
+import { CustomFilter, FilterInfo, isCustomFilter, isFilterInfo } from './filter-info';
+import { Sort, SortDirection }  from '@angular/material/sort' ;
+import { ComponentStore } from '@ngrx/component-store'  ;
+import update from 'immutability-helper';
+import { Dictionary } from '../interfaces/dictionary';
+import { filter, last, map, tap } from 'rxjs/operators'
+import { moveItemInArray } from '@angular/cdk/drag-drop';
+import { notNull, onceWhen } from '../../rxjs/rxjs-operators';
+import { GeneralTableSettings, NotPersisitedTableSettings, PesrsistedTableSettings } from './table-builder-general-settings';
+
+export function stateIs(initializationState: InitializationState) {
+  return (state: TableState) => state.initializationState === initializationState;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TableStore extends ComponentStore<TableState> {
+
+  constructor(@Inject(TableBuilderConfigToken) config: TableBuilderConfig) {
+   super( { ...defaultTableState, ...config.defaultTableState});
+  }
+
+  getSavableState() : Observable<PersistedTableState> {
+    return  this.state$.pipe(
+      map( s => {
+        const savableState = {...s} as Partial<TableState>;
+        keysToDelete.forEach(key => delete savableState[key]);
+        return savableState as PersistedTableState;
+      })
+    );
+  }
+
+  on = <V>(srcObservable: Observable<V>, func: (obj: V) => void) => {
+    this.effect(() => srcObservable.pipe(
+      tap(func)
+    ))
+  }
+
+  onLast(callback: (state: TableState) => void ) {
+    this.on(this.state$.pipe(last()),callback);
+  }
+
+  readonly metaData$ = this.select( state => state.metaData);
+
+  readonly metaDataArray$ = this.select(
+    this.state$,
+    orderMetaData
+  );
+
+  getMetaData$ = (key: string) : Observable<MetaData> => {
+    return this.select( state => state.metaData[key]  ).pipe(
+      tap(meta => {if(!meta)console.warn(`Meta data with key ${key} not found`)}),
+      notNull())
+  }
+
+  getUserDefinedWidth$ = (key:string) => this.select(state => state.userDefined.widths[key]);
+  getUserDefinedWidths$ = this.select(state => state.userDefined.widths);
+
+  private displayedColumns =  (state:TableState) => orderMetaData(state).map(md => md.key)
+    .filter(key => !state.hiddenKeys.includes(key) && state.metaData[key].fieldType !== FieldType.Hidden);
+  readonly displayedColumns$ = this.select(this.displayedColumns);
+  readonly hideColumn = this.updater((state, key: string) => ({
+    ...state,
+    hiddenKeys: [...state.hiddenKeys.filter( k => k !== key), key],
+  }));
+
+  readonly resetState = this.updater((state) => {
+    const hiddenColumns = Object.values(state.metaData)
+      .filter(md => md.fieldType === FieldType.Hidden)
+      .map(md => md.key);
+    const sorted = this.createPreSort(state.metaData);
+    return update(state, {
+       hiddenKeys: { $set: [...hiddenColumns] },
+       filters: { $set: {} },
+       sorted: {$set: sorted},
+       userDefined : {$set: {widths:{},order:{},table:{}}},
+      });
+  });
+
+  readonly showColumn = this.updater((state, key: string) => ({
+    ...state,
+    hiddenKeys: state.hiddenKeys.filter( k => k !== key),
+  }));
+
+  readonly setHiddenColumns = this.updater((state, displayCols: {key: string, visible: boolean}[]) => {
+
+    var hiddenKeysSet= new Set<string>(
+      [
+        ...displayCols.filter(col => !col.visible).map(col => col.key),
+        ...Object.values(state.metaData).filter(md => md.fieldType === FieldType.Hidden).map(md => md.key)
+      ]
+    );
+
+    return update( state , { hiddenKeys: {$set: [...hiddenKeysSet]}});
+  });
+
+
+  setUserDefinedWidth = this.updater((state,colWidths:{key: string, widthInPixel:number}[]) => {
+    const userDefinedWidths = {...state.userDefined.widths};
+    colWidths.forEach(cw => {
+      userDefinedWidths[cw.key] = cw.widthInPixel;
+    });
+    return {...state, userDefined: {...state.userDefined,widths:userDefinedWidths}};
+  });
+
+  setUserDefinedOrder = this.updater((state,moved:{newOrder:number,oldOrder:number})=>{
+    const {newOrder ,oldOrder} = moved;
+    const mdsArr = orderViewableMetaData(state);
+    moveItemInArray(mdsArr,oldOrder,newOrder);
+
+    const userDefinedOrder = mdsArr.reduce((aggregate: any,current,index) => {
+      aggregate[current.key] = index;
+      return aggregate
+    },{});
+    return({...state, userDefined:{...state.userDefined,order:userDefinedOrder}})
+  })
+
+
+  readonly filters$ = this.select(state => state.filters );
+
+  readonly getFilter$ = (filterId: string) : Observable<FilterInfo | CustomFilter | undefined> => {
+    return this.select( state => state.filters[filterId] );
+  }
+  readonly addFilter = this.updater( (state, filter: FilterInfo | CustomFilter ) => {
+    return this.addFiltersToState(state, [filter]);
+  });
+
+  readonly addFilters = this.updater((state,filters:(FilterInfo | CustomFilter )[])=>{
+    return this.addFiltersToState(state, filters);
+  })
+
+
+  private addFiltersToState = (state:TableState,filters:(FilterInfo | CustomFilter)[]) : TableState => {
+
+    var customFilters = filters.filter(  isCustomFilter );
+
+    var filterInfos = filters.filter(isFilterInfo);
+
+    const filtersObj = filterInfos
+      .filter(fltr => Object.keys(state.metaData).some(key => key === fltr.key) || console.warn(`Meta data with key ${fltr.key} not found`))
+      .reduce((filtersObj: {[k: string]: any},filter)=>{
+        if (!filter.filterId) {
+          filter.filterId = uuid();
+        }
+        filtersObj[filter.filterId] = filter;
+        return filtersObj;
+      },{});
+
+      customFilters.forEach( fltr => {
+        if(!fltr.filterId) {
+          fltr.filterId = uuid();
+        }
+        filtersObj[fltr.filterId] = fltr;
+      })
+    return {
+      ...state,
+      filters : {...state.filters, ...filtersObj }
+    };
+  }
+
+  readonly removeFilter = this.updater( (state, filterId: string) =>
+    update(state, {filters: {$unset : [filterId ]}})
+  );
+
+  readonly removeFilters = this.updater( (state, filterIds: string[]) =>
+    update(state, {filters: {$unset : [...filterIds ]}})
+  );
+
+  readonly clearFilters = this.updater((state)=>
+    ({...state,filters:{}}))
+
+
+  readonly sorted$ = this.state$.pipe(
+    filter(stateIs(InitializationState.Ready)),
+    map( state => state.sorted)
+  );
+
+  createPreSort = (metaDatas: Dictionary<MetaData>): Sort[] => {
+    return Object.values(metaDatas).filter(( metaData ) : metaData is MetaData & {preSort: SortDef} => !!metaData.preSort)
+    .sort(({  preSort: ps1  }, { preSort: ps2 } ) => (ps1.precedence || Number.MAX_VALUE) - ( ps2.precedence || Number.MAX_VALUE))
+    .map(( {key, preSort} ) => ({ active: key, direction: preSort.direction }))
+  }
+  readonly setSort = this.updater<{key: string, direction?: SortDirection}>((state, {key, direction} ) => {
+    const sortArray = state.sorted.filter( s => s.active !== key );
+    if(direction) {
+      sortArray.unshift({active: key, direction});
+    }
+    return {
+      ...state,
+      sorted: sortArray,
+    };
+  });
+
+  readonly setAllSort = this.updater((state,sortArray:Sort[])=>{
+    return {
+      ...state,
+      sorted: sortArray,
+    };
+  });
+
+  updateStateFunc = (state: TableState, incomingTableState: Partial<TableState>) : TableState => {
+    const metaData = state.metaData;
+    const sorted = incomingTableState.sorted?.length ? incomingTableState.sorted
+      : state.initializationState === InitializationState.Created ? this.createPreSort(metaData) : state.sorted;
+    return {...state, ...incomingTableState, metaData , sorted};
+  }
+
+  readonly setPageSize = this.updater( (state, pageSize: number)=> ({...state,pageSize}));
+
+  readonly updateState = this.updater<Partial<TableState>>(this.updateStateFunc);
+
+  cleanPersistedState(state: TableState,pState: PersistedTableState) {
+    const metas = Object.values(state.metaData);
+    const filters = Object.values(pState.filters).filter(fltr => isCustomFilter(fltr) || metas.some(m => m.key === fltr.key)).reduce((obj: any, filter) => {
+      obj[filter.filterId!] = pState.filters[filter.filterId!];
+      return obj;
+    }, {});
+    const sorted = pState.sorted.filter(s => metas.some(m => m.key === s.active));
+    return ({...pState,filters,sorted})
+  }
+
+  readonly updateStateFromPersistedState = this.updater( ( state: TableState, persistedState: PersistedTableState) : TableState => {
+    const incomingTableState: Partial<TableState> = this.cleanPersistedState(state,persistedState);
+    const newState =  this.updateStateFunc(state,incomingTableState);
+    newState.initializationState = state.initializationState === InitializationState.MetaDataLoaded ? InitializationState.LoadedFromStore : state.initializationState;
+    return newState;
+  });
+
+  getUserDefinedTableSize$ = this.select(state => state.userDefined.table.width);
+  setTableWidth = this.updater((state,widthInpixels:number) => ({...state,userDefined: {...state.userDefined,table:{width:widthInpixels}}})) ;
+
+  mergeMeta = (orig: MetaData, merge: MetaData): MetaData => {
+    return {
+        key: orig.key,
+        displayName: merge.displayName ?? orig.displayName,
+        fieldType: merge.fieldType || orig.fieldType,
+        additional: {...orig.additional, ...merge.additional},
+        order: merge.order ?? orig.order,
+        preSort: merge.preSort ?? orig.preSort,
+        _internalNotUserDefined: merge._internalNotUserDefined || orig._internalNotUserDefined,
+        width: merge.width ?? orig.width,
+        noExport: merge.noExport || orig.noExport,
+        noFilter: merge.noFilter || orig.noFilter,
+        customCell: merge.customCell ?? orig.customCell,
+        transform: merge.transform ?? orig.transform,
+        click: merge.click ?? orig.click,
+    };
+  }
+
+  readonly setIntializationState = this.updater( (state, initializationState:  InitializationState) => {
+    return {...state, initializationState};
+  });
+
+  runOnceWhen(predicate: Predicate<TableState>, func: (state:TableState) => void) {
+    const obs = this.state$.pipe(onceWhen(predicate));
+    this.on(obs, (state) => {
+      func(state);
+    });
+  }
+
+  onReady( func: (state: TableState) => void ) {
+    this.runOnceWhen(stateIs(InitializationState.Ready),func);
+  }
+
+  readonly setMetaData = this.updater((state, md: MetaData[] | MetaData ) => {
+    const metaData = ( Array.isArray(md) ? [...md] : [md] )
+      .reduce((prev: Dictionary<MetaData>,curr) => {
+        if(prev[curr.key]) {
+          prev[curr.key] = this.mergeMeta(prev[curr.key],curr);
+        } else {
+          prev[curr.key] = curr;
+        }
+        return prev;
+      } ,{});
+    let sorted = state.sorted;
+    if(sorted.length === 0) {
+      sorted = this.createPreSort(metaData);
+    }
+    const order = this.initializeOrder(state, metaData);
+    const initializationState = state.initializationState == InitializationState.Created ?  InitializationState.MetaDataLoaded : state.initializationState;
+    return {...state, initializationState, metaData, sorted, userDefined:{...state.userDefined,order:order}};
+  });
+
+  private initializeOrder = (state:TableState,mds: Dictionary<MetaData>) : Dictionary<number> => {
+    const viewableMetaDataArr = Object.values(mds).filter(a => a.fieldType !== FieldType.Hidden);
+    let userDefinedOrder = state.userDefined.order;
+    if(viewableMetaDataArr.some(meta => userDefinedOrder[meta.key] == null)){
+      return {}
+    }
+    return userDefinedOrder;
+  }
+
+  toggleCollapseHeader = this.updater((state)=>{
+    const tableSettings = {...state.persistedTableSettings};
+    tableSettings.collapseHeader = !tableSettings.collapseHeader;
+    return ({...state,persistedTableSettings : new PesrsistedTableSettings(tableSettings)});
+  })
+
+  toggleCollapseFooter = this.updater((state)=>{
+    const tableSettings = {...state.persistedTableSettings};
+    tableSettings.collapseFooter = !tableSettings.collapseFooter;
+    return ({...state,persistedTableSettings : new PesrsistedTableSettings(tableSettings)});
+  })
+
+  addGroupByKey = this.updater((state, groupByKey: string) => ({
+    ...state,
+    groupByKeys: [...state.groupByKeys, groupByKey]
+  }));
+
+  removeGroupByKey = this.updater((state, groupByKey: string) => ({
+    ...state,
+    groupByKeys: state.groupByKeys.filter(key => groupByKey != key)
+  }));
+
+  updateGroup = this.updater((state, group: Group) => ({
+    ...state,
+    groups: [...state.groups.filter(g => g.groupName != group.groupName), group]
+  }))
+
+  groupByKeys$ = this.select(state => state.groupByKeys);
+  groups$ = this.select(state => state.groups);
+
+  setTableSettings = this.updater((state,settings:GeneralTableSettings)=>{
+    const s:TableState = {
+      ...state,
+      persistedTableSettings : new PesrsistedTableSettings(settings),
+      notPersisitedTableSettings : new NotPersisitedTableSettings(settings)
+      };
+    return s;
+  });
+
+  tableSettings$ = this.select(state => {
+    const ts : PesrsistedTableSettings & NotPersisitedTableSettings =
+      {...state.persistedTableSettings,...state.notPersisitedTableSettings};
+    return ts;
+  })
+
+  setLinkMaps = this.updater((state,maps: any)=>{
+    return {...state,linkMaps:maps};
+  });
+  getLinkMap = (md:MetaData) =>{
+    return  this.select(state => {
+      return state.linkMaps[md.key]})};
+}
+export const orderViewableMetaData = (state:TableState) => orderMetaData(state).filter(a => a.fieldType !== FieldType.Hidden);
+
+export const orderMetaData = (state:TableState) => {
+  const userOrderArr = Object.entries(state.userDefined.order);
+  return userOrderArr.length ?
+   Object.values(state.metaData).sort((a,b)=> state.userDefined.order[a.key] - state.userDefined.order[b.key])
+   :
+   Object.values(state.metaData).sort((a,b)=> a.order! - b.order!)
+}

package/src/table-builder/components/array-column.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, Input, Inject } from '@angular/core';
+import { ArrayStyle, ArrayAdditional, MetaData } from '../interfaces/report-def';
+import { TableBuilderConfigToken, TableBuilderConfig } from '../classes/TableBuilderConfig';
+
+
+@Component({
+  selector: 'tb-array-column',
+  template: `
+  <ng-container  *ngIf="array.length === 0; else hasVals">-</ng-container>
+  <ng-template #hasVals>
+    <ng-container [ngSwitch]="additional.arrayStyle">
+      <ng-container *ngSwitchCase="ArrayStyle.CommaDelimited">
+        <span *ngFor="let val of array; last as isLast">{{val}}<ng-container *ngIf="!isLast">, </ng-container> </span>
+      </ng-container>
+      <ng-container *ngSwitchCase="ArrayStyle.NewLine">
+        <span *ngFor="let val of array; last as isLast">{{val}}<ng-container *ngIf="!isLast"><br /></ng-container> </span>
+      </ng-container>
+    </ng-container>
+  </ng-template>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ArrayColumnComponent {
+  ArrayStyle = ArrayStyle;
+  additional!: ArrayAdditional;
+  @Input() array!: any[];
+  @Input() metaData!: MetaData;
+
+  constructor( @Inject(TableBuilderConfigToken) private config: TableBuilderConfig
+    ) {
+
+  }
+
+  ngOnInit() {
+    this.additional = this.metaData?.additional ??  this.config.arrayInfo ?? { limit: 3, arrayStyle: ArrayStyle.NewLine } as ArrayAdditional;
+    this.array = (this.array ?? []).slice(0, this.additional.limit );
+
+  }
+}

package/src/table-builder/components/column-builder/column-builder.component.html

@@ -0,0 +1,66 @@
+<ng-container [matColumnDef]="metaData.key" *ngrxLet="styles$ as styles" >
+
+  <ng-template #body let-element='element' >
+      <mat-cell  [matTooltip]="metaData.toolTip ?? ''"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' [class.group-footer]="element.isGroupFooter" (click)='cellClicked(element, metaData.key)' >
+        <ng-container *ngTemplateOutlet="innerTemplate;context: {metaData: metaData, element: element, transform: transform }; Injector: injector">
+        </ng-container>
+    </mat-cell>
+
+  </ng-template>
+
+  <ng-template matHeaderCellDef #myHeader>
+
+    <ng-container *ngIf="customCell?.columnDef?.headerCell;else header;">
+      <ng-container *ngTemplateOutlet="customCell.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} ">
+      </ng-container>
+    </ng-container>
+
+    <ng-template #header>
+
+      <mat-header-cell  cdkDrag [styler]='styles.header' [resizeColumn]="true" [key]="metaData.key"   class="column-head drag-header" #headref >
+        <div class="header-container" cdkDragHandle>
+          <div *ngIf="!metaData._internalNotUserDefined || !customCell?.columnDef?.cell ; else headerWithoutMenu" mat-sort-header style="width: 100%">
+            {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
+          </div>
+          <ng-template #headerWithoutMenu >
+            <div *ngIf="metaData._internalNotUserDefined;" style="width: 100%">
+              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
+            </div>
+          </ng-template>
+          <tb-header-menu
+            *ngIf="(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);" #menu [metaData]='metaData' [filter]='filter' >
+          </tb-header-menu>
+        </div>
+      </mat-header-cell>
+
+    </ng-template>
+
+  </ng-template>
+
+
+  <ng-container *matCellDef="let element;">
+    <ng-container *ngTemplateOutlet="outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }">
+    </ng-container>
+  </ng-container>
+
+  <ng-template matFooterCellDef>
+    <ng-container *ngIf="customCell?.columnDef?.footerCell;else footer">
+      <ng-container
+        *ngTemplateOutlet="customCell.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }">
+      </ng-container>
+    </ng-container>
+
+    <ng-template #footer>
+      <mat-footer-cell  [styler]='styles.footer' *ngrxLet="data$ as data">
+        <span *ngIf="data?.length && metaData.additional?.footer" [ngSwitch]="metaData.fieldType" class="bold">
+          <span *ngSwitchCase="FieldType.Currency">
+            {{ data | columnTotal: metaData | currency }}
+          </span>
+          <span *ngSwitchCase="FieldType.Number">
+            {{ data | columnTotal: metaData | number }}
+          </span>
+        </span>
+      </mat-footer-cell>
+    </ng-template>
+  </ng-template>
+</ng-container>

package/src/table-builder/components/column-builder/column-builder.component.scss

@@ -0,0 +1,43 @@
+.header-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: center;
+}
+
+.negative-currency {
+  color: red;
+}
+
+.column-head{
+  position: relative;
+}
+
+.bold,
+.group-footer {
+  font-weight: 900;
+}
+
+.cdk-drag-preview {
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 33%;
+  border-right-width: 0px;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+.drag-handle{
+  color:lightblue;
+  cursor: move;
+  margin-right: 9px;
+}
+
+

package/src/table-builder/components/column-builder/column-builder.component.spec.ts

@@ -0,0 +1,51 @@
+import { ComponentFixture, ComponentFixtureAutoDetect, TestBed, waitForAsync } from '@angular/core/testing';
+import { ColumnBuilderComponent } from './column-builder.component';
+import { FieldType } from '../../interfaces/report-def';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import { provideMockStore } from '@ngrx/store/testing';
+import { MaterialModule } from '../../material.module';
+import { SpaceCasePipe } from '../../../utilities/pipes/space-case.pipes';
+import { CurrencyPipe, DatePipe } from '@angular/common';
+import { PhoneNumberPipe } from 'projects/angular-utilities/src/utilities';
+import { MatTable } from '@angular/material/table';
+
+const initialState = {fullTableState: {
+  'test-id': {
+    metaData: [],
+    hiddenKeys: [],
+    pageSize: 10,
+    initialized : true ,
+  }
+}};
+
+
+describe('ColumnBuilderComponent', () => {
+  let component: ColumnBuilderComponent;
+  let fixture: ComponentFixture<ColumnBuilderComponent>;
+
+  beforeEach(waitForAsync(() => {
+     TestBed.configureTestingModule({
+      declarations: [ ColumnBuilderComponent, SpaceCasePipe ],
+      providers: [
+        { provide : TableBuilderConfigToken , useValue: {defaultTableState: { }}},
+        { provide: MatTable, useValue: {addColumnDef:(colDef) => {}}},
+        provideMockStore({ initialState }),
+        DatePipe,
+        CurrencyPipe,
+        PhoneNumberPipe,
+      ],
+      imports: [MaterialModule]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ColumnBuilderComponent);
+    component = fixture.componentInstance;
+    component.metaData = { key: 'key', fieldType: FieldType.String };
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/table-builder/components/column-builder/column-builder.component.ts

@@ -0,0 +1,126 @@
+import { Component, Input, ChangeDetectionStrategy, TemplateRef, ViewChild, OnInit, HostBinding, ContentChild, ContentChildren, Predicate, Injector } from '@angular/core';
+import { FieldType, MetaData } from '../../interfaces/report-def';
+import { MatColumnDef, MatTable } from '@angular/material/table';
+import { Observable } from 'rxjs';
+import { CustomCellDirective } from '../../directives';
+import { FilterInfo } from '../../classes/filter-info';
+import { TransformCreator } from '../../services/transform-creator';
+import { TableStore } from '../../classes/table-store';
+import { map } from 'rxjs/operators';
+import { TableTemplateService } from '../../services/table-template-service';
+import { previousAndCurrent } from '../../../rxjs/rxjs-operators';
+import { CdkDropList, CDK_DROP_LIST } from '@angular/cdk/drag-drop';
+import { Dictionary } from '@ngrx/entity';
+
+
+interface widthStyle {
+    flex?: string;
+    maxWidth?: string;
+}
+
+interface allStyles {
+  body: widthStyle;
+  header: widthStyle;
+  footer: widthStyle;
+}
+
+@Component({
+  selector: 'tb-column-builder',
+  templateUrl: './column-builder.component.html',
+  styleUrls: ['./column-builder.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    { provide: CDK_DROP_LIST, useExisting: CdkDropList },
+  ]
+})
+export class ColumnBuilderComponent implements OnInit {
+  FieldType = FieldType;
+  filter!: Partial<FilterInfo>;
+  @Input() metaData!: MetaData;
+
+  @Input() customCell!: CustomCellDirective;
+  @Input() data$!: Observable<any[]>;
+
+  @ViewChild(MatColumnDef) columnDef!: MatColumnDef;
+  outerTemplate!: TemplateRef<any>;
+  innerTemplate!: TemplateRef<any>;
+  transform!: (o: any, ...args: any[])=> any ;
+
+  @ViewChild('body') bodyTemplate!: TemplateRef<any>;
+
+
+  constructor(
+    private transformCreator: TransformCreator,
+    private table: MatTable<any>,
+    public state: TableStore,
+    private templateService: TableTemplateService,
+    protected injector: Injector,
+    ) { }
+
+  getInnerTemplate() :TemplateRef<any> {
+    if(this.metaData.template) return this.metaData.template;
+    if (this.customCell?.TemplateRef)  return this.customCell.TemplateRef;
+    return this.templateService.getTemplate(this.metaData);
+  }
+  showfilters$!: Observable<boolean>;
+  getOuterTemplate() {
+    return this.customCell?.columnDef?.cell?.template ?? this.bodyTemplate;
+  }
+  classes?: Dictionary<Predicate<any>>;
+
+  ngOnInit() {
+    if(this.metaData.fieldType === FieldType.Currency) {
+      this.classes = {
+        ['negative-currency']: (element) => element[this.metaData.key] < 0,
+        ...this.metaData.classes
+      }
+    }
+    else {
+      this.classes = this.metaData.classes;
+    }
+    this.filter = {key: this.metaData.key, fieldType: this.metaData.fieldType};
+    const width$ = this.state.getUserDefinedWidth$(this.metaData.key).pipe(
+      previousAndCurrent(0),
+      map(this.mapWidth),
+    );
+    const fullMetaStyles = this.metaData.additional?.styles ?? {};
+    this.styles$ = width$.pipe(map(width => {
+      const styles: allStyles = {
+        header : {...fullMetaStyles,...this.metaData.additional?.columnPartStyles?.header, ...width},
+        footer: {...fullMetaStyles,...this.metaData.additional?.columnPartStyles?.footer, ...width},
+        body: {...fullMetaStyles,...this.metaData.additional?.columnPartStyles?.body, ...width},
+      };
+      return styles;
+    }));
+    this.showfilters$ = this.state.tableSettings$.pipe(map(settings => !(settings.hideColumnHeaderFilters || this.metaData.noFilter)));
+  }
+
+  ngAfterViewInit() {
+    this.outerTemplate = this.getOuterTemplate();
+    this.innerTemplate = this.getInnerTemplate();
+    this.transform = this.transformCreator.createTransformer(this.metaData);
+    this.table.addColumnDef(this.columnDef);
+  }
+
+  cellClicked(element: any, key: string) {
+    if(this.metaData.click) {
+      this.metaData.click(element,key);
+    }
+  }
+
+  mapWidth = ([previousUserDefinedWidth, currentUserDefinedWidth] : [number, number]) : widthStyle => {
+
+    if( currentUserDefinedWidth ){
+      return ({flex:`0 0 ${currentUserDefinedWidth}px`, maxWidth:'none'});
+    } if( wasReset() ){
+      return ({flex:'1'});
+    }
+    return ({});
+    function wasReset(){
+      return previousUserDefinedWidth >=0 && currentUserDefinedWidth == null;
+    }
+  }
+
+  styles$!:Observable<allStyles>
+
+}