@one-paragon/angular-utilities 2.2.6 → 2.2.7

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

@@ -1,440 +0,0 @@
-import { FieldType, MetaData } from '../interfaces/report-def';
-import { Observable } from 'rxjs';
-import { defaultTableState, GroupedData, InitializationState, PersistedTableState, TableState } from './TableState';
-import { Injectable, Signal, computed, inject } from '@angular/core';
-import { 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 { Dictionary } from '../interfaces/dictionary';
-import { distinctUntilChanged, filter, switchMap, tap } from 'rxjs/operators'
-import { moveItemInArray } from '@angular/cdk/drag-drop';
-import { NonFunctionProperties, NotPersistedTableSettings, parseTbSizeToPixels, PersistedTableSettings, TableBuilderSettings } from './table-builder-general-settings';
-import { replaceInArrayWithClone } from '../../utilities/array-helpers';
-import { sortsAreSame } from '../directives';
-import { toObservable } from '@angular/core/rxjs-interop';
-import { TableProps } from '../components/table-container/tableProps';
-import { cleanPersistedState, createPreSort, initializeOrder, mapSaveableState, mergeMeta, orderedStateVisibleMetaData, orderMetaData } from './table-store.helpers';
-import { TableBuilderSort } from '../components/table-container/table-container.helpers/sort-state.helpers';
-
-@Injectable()
-export class TableStore extends ComponentStore<TableState> {
-  constructor() {
-    const config = inject(TableBuilderConfigToken);
-    const settingsFromConfig: Pick<TableState, 'notPersistedTableSettings' | 'persistedTableSettings'> =
-      {
-        persistedTableSettings: new PersistedTableSettings().merge(config.defaultTableSettings),
-        notPersistedTableSettings: new NotPersistedTableSettings().merge(config.defaultTableSettings),
-      };
-    if(config.defaultTableSettings?.pageSize){
-      settingsFromConfig.notPersistedTableSettings.paginatorSettings!.pageSize = config.defaultTableSettings?.pageSize;
-    }
-    const pageSize = settingsFromConfig.notPersistedTableSettings.paginatorSettings!.pageSize || defaultTableState.pageSize;
-    const showAll = settingsFromConfig.notPersistedTableSettings.paginatorSettings!.defaultAll || defaultTableState.showAll;
-    super( { ...defaultTableState, ...settingsFromConfig, pageSize, showAll });
-  }
-
-  $initializationState = this.selectSignal(state => state.initializationState);
-  $savableState = computed(() => {
-    const state = this.state();
-    return mapSaveableState(state);
-  });
-  $userDefinedOrder = this.selectSignal( state => state.userDefined.order);
-  metaData$ = this.select( state => state.metaData);
-  $metaData = this.selectSignal( state => state.metaData);
-  $metaDataArray = this.selectSignal(
-    this.$metaData,
-    this.$userDefinedOrder,
-    orderMetaData
-  );
-  $orderedCodeVisibleMetaDatas = this.selectSignal(
-    this.$metaDataArray, (mds) => mds.filter(m => m.fieldType !== FieldType.Hidden),
-    { equal: (a: MetaData[], b) => b.length === a.length && b.every((s, i) => a[i].key === s.key) }
-  )
-  $getMetaData = (key: string) => computed(() => {
-    const metaData = this.state().metaData[key];
-    if(!metaData)console.warn(`Meta data with key ${key} not found`);
-    return metaData;
-  });
-
-  $hiddenKeys = this.selectSignal( state => state.hiddenKeys);
-
-  $orderedVisibleColumns = this.selectSignal(this.$orderedCodeVisibleMetaDatas, this.$hiddenKeys,
-    (cs, hiddenKeys) => cs.filter(m => !hiddenKeys.includes(m.key)).map(m => m.key));
-
-  $getUserDefinedWidths = this.selectSignal(state => state.userDefined.widths);
-  $tableSettingsMinWidth = this.selectSignal(state => parseTbSizeToPixels(state.notPersistedTableSettings.minColumnWidth));
-  $getUserDefinedWidth = (key:string) => this.selectSignal(this.$getUserDefinedWidths, widths => widths[key]);
-
-  $filters = this.selectSignal(state => state.filters);
-  filters$ = this.select(state => state.filters );
-  $getFilter = (filterId: string) : Signal<FilterInfo | CustomFilter | undefined> => {
-    return this.selectSignal(this.$filters, filters => filters[filterId] );
-  }
-  $preSort = computed(() => createPreSort(this.$metaData()));
-
-  _$selectSorted = this.selectSignal(state => state.sorted, {
-    equal: sortsAreSame
-  });
-  $selectSorted = computed<TableBuilderSort[]>(() => {
-    const metaDict = this.$metaData();
-    return this._$selectSorted().map(s => {
-      const meta = metaDict[s.active];
-      const sortLogic = meta.sortLogic;
-      const sortBy = sortLogic?.sortBy === 'use map' ? meta.map : sortLogic?.sortBy;
-      return ({ ...s, ...sortLogic, sortBy })
-    })
-  })
-  selectSorted$ = this.select(state => state.sorted).pipe(distinctUntilChanged(sortsAreSame));
-  $getSorts = this.selectSignal(() => this.$initializationState() !== InitializationState.Ready ? [] : this.$selectSorted());
-
-  sort$ = toObservable(this.$getSorts);
-  $getUserDefinedTableWidth = this.selectSignal(state => state.userDefined.table.width);
-  getUserDefinedTableWidth$ = this.select(state => state.userDefined.table.width);
-  $userDefinedRowHeight = this.selectSignal(state => (state.userDefined.rowHeight));
-  $userDefinedHeaderHeight = this.selectSignal(state => (state.userDefined.headerHeight));
-  $userDefinedPageSize = this.selectSignal(state => (state.userDefined.pageSize));
-  $footerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseFooter);
-  $headerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseHeader);
-
-  $groupBy = this.selectSignal(state => state.groupBy);
-  $groupByKeys = this.selectSignal(this.$groupBy, gb => gb.map(gbk => gbk.key), {
-    equal: (prev: string[], curr: string[]) => prev.length === curr.length && curr.every((k, i) => prev[i] === k)
-  })
-  groupByKeys$ = this.select(state => state.groupBy.map(gbk => gbk.key))
-    .pipe(distinctUntilChanged<string[]>((prev, curr) => prev.length === curr.length && curr.every((k, i) => prev[i] === k)));
-
-  expandedGroups$ = this.select(state => state.groupBy).pipe(distinctUntilChanged((a, b) => {
-    const aa = a.flatMap(g => g.expandedHeaders);
-    const bb = b.flatMap(g => g.expandedHeaders);
-    return aa.length === bb.length && aa.every((k) => bb.includes(k));
-  }));
-  $expandGroups = this.selectSignal(state => state.groupBy, { equal: (a, b) => {
-    const aa = a.flatMap(g => g.expandedHeaders);
-    const bb = b.flatMap(g => g.expandedHeaders);
-    return aa.length === bb.length && aa.every((k) => bb.includes(k));
-  } })
-
-  $getIsExpanded = (columnKey: string, groupHeaderKey: string) => {
-    return this.selectSignal(state => !!state.groupBy.filter(g => g.key === columnKey && g.expandedHeaders.includes(groupHeaderKey)).length);
-  };
-
-  $currentPage = this.selectSignal(state => state.currentPage);
-  $pageSize = this.selectSignal(s => s.userDefined?.pageSize || s.pageSize!);
-  $showAll = this.selectSignal(s => s.userDefined?.showAll ?? s.showAll);
-
-
-  $tableSettings = this.selectSignal(state => {
-    const ts : NonFunctionProperties<PersistedTableSettings & NotPersistedTableSettings> =
-      { ...state.persistedTableSettings, ...state.notPersistedTableSettings };
-    return ts;
-  });
-  $notPersistedTableSettings = this.selectSignal(state => state.notPersistedTableSettings)
-  tableSettings$ = toObservable(this.$tableSettings);
-
-  $props = this.selectSignal(s => s.props);
-
-  $getLinkInfo = (md:MetaData) => this.selectSignal(state => state.linkMaps[md.key]);
-
-  $isVirtual = this.selectSignal(state =>
-    state.notPersistedTableSettings.useVirtualScroll
-    || state.showAll
-    || state.userDefined?.showAll
-  );
-  $viewType = this.selectSignal<ViewType>(state => {
-    const usePaginator = state.notPersistedTableSettings.usePaginator;
-    const showAll = state.showAll || state.userDefined?.showAll;
-    const useVirtualScroll = state.notPersistedTableSettings.useVirtualScroll;
-    if(showAll || (useVirtualScroll && !usePaginator)){
-      return 'virtual all';
-    } else if(useVirtualScroll && usePaginator) {
-      return 'virtual paginator';
-    } else if(usePaginator) {
-      return 'paginator';
-    } else {
-      return 'all';
-    }
-  });
-
-  readonly resetState = this.updater((state) => {
-    const sorted = this.$preSort();
-    return ({ ...state, hiddenKeys: [], sorted, filters: {}, groupBy: [], userDefined: { widths: {}, order: {}, table: {} } });
-  });
-
-  readonly resetPart = this.updater((state, part: typeof resetable[number]) => {
-    const newState = { ...state };
-    switch (part){
-      case 'Sorting':
-        newState.sorted = this.$preSort();
-        return newState;
-      case 'Filters':
-        newState.filters = {};
-        return newState;
-      case 'Group By':
-        newState.groupBy = [];
-        return newState;
-      case 'Hidden Columns':
-        newState.hiddenKeys = [];
-        return newState;
-      case 'Column Widths':
-        newState.userDefined.widths = {};
-        newState.userDefined.table = {};
-        return newState;
-      case 'Column Order':
-        newState.userDefined.order = {};
-        return newState;
-      case 'Page Size':
-        delete newState.userDefined.pageSize;
-        return newState;
-      case 'Show All':
-        delete newState.userDefined.showAll;
-        return newState;
-      case 'Row Height':
-        delete newState.userDefined.rowHeight;
-        return newState;
-      case 'Header Height':
-        delete newState.userDefined.headerHeight;
-        return newState;
-    }
-    return newState;
-  })
-
-  readonly updateStateFromPersistedState = this.updater( ( state: TableState, persistedState: PersistedTableState) : TableState => {
-    const incomingTableState: Partial<TableState> = cleanPersistedState(state, persistedState);
-    const newState = this.updateStateFunc(state, incomingTableState);
-    newState.initializationState = state.initializationState <= InitializationState.MetaDataLoaded ? InitializationState.TableSettingsLoaded : state.initializationState;
-    return newState;
-  });
-  private updateStateFunc = (state: TableState, incomingTableState: Partial<TableState>) : TableState => {
-    const metaData = state.metaData;
-    const sorted = incomingTableState.sorted?.length ? incomingTableState.sorted
-      : state.initializationState <= InitializationState.Created ? createPreSort(metaData) : state.sorted;
-    return { ...state, ...incomingTableState, metaData, sorted };
-  };
-
-  readonly setTableSettings = this.updater((state, settings: TableBuilderSettings) => {
-    const s: TableState = {
-      ...state,
-      persistedTableSettings: state.persistedTableSettings.merge(settings),
-      notPersistedTableSettings: state.notPersistedTableSettings.merge(settings),
-      initializationState: InitializationState.TableSettingsLoaded
-    };
-    s.pageSize = settings.tableSettings?.paginatorSettings?.pageSize ?? s.pageSize;
-    s.showAll = settings.tableSettings?.paginatorSettings?.defaultAll ?? s.showAll;
-
-    return s;
-  });
-
-  readonly setMetaData = this.updater((state, md: MetaData[]) => {
-    const metaData = md
-      .reduce((prev: Dictionary<MetaData>, curr) => {
-        if(prev[curr.key]) {
-          prev[curr.key] = mergeMeta(prev[curr.key], curr);
-        } else {
-          prev[curr.key] = curr;
-        }
-        return prev;
-      }, {});
-
-    const sortedInitialized = state.sorted.length > 0;
-    const sorted = sortedInitialized ? state.sorted : createPreSort(metaData);
-    const order = initializeOrder(state, metaData);
-    const initializationState = state.initializationState == InitializationState.Created ? InitializationState.MetaDataLoaded : state.initializationState;
-    return { ...state, initializationState, metaData, sorted, userDefined: { ...state.userDefined, order: order } };
-  });
-
-  readonly showColumn = this.updater((state, key: string) => ({
-    ...state,
-    hiddenKeys: state.hiddenKeys.filter( k => k !== key),
-  }));
-  readonly hideColumn = this.updater((state, key: string) => ({
-    ...state,
-    hiddenKeys: [...state.hiddenKeys.filter( k => k !== key), key],
-  }));
-  readonly setHiddenColumns = this.updater((state, displayCols: {key: string, visible: boolean}[]) => {
-    return ({ ...state, hiddenKeys: displayCols.filter(d => !d.visible).map(d => d.key) })
-  });
-
-  readonly 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 } };
-  });
-
-  readonly setUserDefinedOrder = this.updater((state, moved: { newOrder: number, oldOrder: number }) => {
-    const { newOrder, oldOrder } = moved;
-    const mdsArr = orderedStateVisibleMetaData(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 setUserDefinedRowHeight = this.updater((state, rowHeight: number) => {
-    return ({ ...state, userDefined: { ...state.userDefined, rowHeight } });
-  });
-  readonly setUserDefinedHeaderHeight = this.updater((state, headerHeight: number) => {
-    return ({ ...state, userDefined: { ...state.userDefined, headerHeight } });
-  });
-  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);
-  });
-  readonly removeFilter = this.updater( (state, filterId: string) => {
-    const filtersCopy = { ...state.filters };
-    delete filtersCopy[filterId];
-    return ({ ...state, filters: filtersCopy });
-  });
-
-  readonly removeFilters = this.updater( (state, filterIds: string[]) => {
-    const filtersCopy = { ...state.filters };
-    filterIds.forEach(id => { delete filtersCopy[id] })
-    return ({ ...state, filters: filtersCopy });
-  });
-  readonly clearFilters = this.updater((state) =>
-    ({ ...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 = crypto.randomUUID();
-        }
-        filtersObj[filter.filterId] = filter;
-        return filtersObj;
-      }, {});
-
-    customFilters.forEach( fltr => {
-      if(!fltr.filterId) {
-        fltr.filterId = crypto.randomUUID();
-      }
-      filtersObj[fltr.filterId] = fltr;
-    })
-    return {
-      ...state,
-      filters: { ...state.filters, ...filtersObj }
-    };
-  }
-
-  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,
-    };
-  });
-
-  readonly setCurrentPage = this.updater((state, currentPage: number) => ({ ...state, currentPage }))
-  readonly setPageSize = this.updater((state, pageSize: number) =>
-    ({ ...state, pageSize }));
-  readonly setUserDefinedPageSize = this.updater((state, pageSize: number) =>
-    ({ ...state, userDefined: { ...state.userDefined, pageSize } }));
-  readonly setUserDefinedShowAll = this.updater((state, showAll: boolean) =>
-    ({ ...state, showAll, userDefined: { ...state.userDefined, showAll } }))
-
-  readonly setProps = this.updater((state, props: TableProps) => {
-    return ({ ...state, props });
-  });
-
-  readonly setTableWidth = this.updater((state, widthInPixels:number) =>
-    ({ ...state, userDefined: { ...state.userDefined, table: { width: widthInPixels } } }));
-
-  readonly setInitializationState = this.updater( (state, initializationState: InitializationState) => {
-    return { ...state, initializationState };
-  });
-
-  readonly toggleCollapseHeader = this.updater((state) => {
-    const tableSettings = { ...state.persistedTableSettings };
-    tableSettings.collapseHeader = !tableSettings.collapseHeader;
-    return ({ ...state, persistedTableSettings: new PersistedTableSettings(tableSettings) });
-  })
-  readonly toggleCollapseFooter = this.updater((state) => {
-    const tableSettings = { ...state.persistedTableSettings };
-    tableSettings.collapseFooter = !tableSettings.collapseFooter;
-    return ({ ...state, persistedTableSettings: new PersistedTableSettings(tableSettings) });
-  });
-
-  readonly addGroupByKey = this.updater((state, metaDataKey: string) => ({
-    ...state,
-    groupBy: [...state.groupBy, { key: metaDataKey, expandedHeaders: [] }]
-  }));
-  readonly removeGroupByKey = this.updater((state, groupByKey: string) => ({
-    ...state,
-    groupBy: state.groupBy.filter(key => groupByKey !== key.key)
-  }));
-  readonly updateExpandedGroups = this.updater((state, data: {key: string, groupKey: string, isExpanded: boolean}) => {
-    const gbk = replaceInArrayWithClone(state.groupBy, k => k.key === data.key, gk => {
-      gk.expandedHeaders = data.isExpanded ? [...gk.expandedHeaders, data.groupKey] : gk.expandedHeaders.filter(g => g !== data.groupKey);
-    });
-    return ({
-      ...state,
-      groupBy: gbk
-    })}
-  );
-  readonly expandAllOfGroup = this.updater((state, data: { groupHeadersByKey: Dictionary<{ groupName: string }[]> }) => {
-    const newGroupedData = state.groupBy.map(gb => ({
-      key: gb.key,
-      expandedHeaders: data.groupHeadersByKey[gb.key]?.map(g => g.groupName) ?? gb.expandedHeaders
-    } as GroupedData));
-    return ({ ...state, groupBy: newGroupedData });
-  });
-  readonly collapseAll = this.updater((state) => ({
-    ...state,
-    groupBy: state.groupBy.map(gb => ({ key: gb.key, expandedHeaders: [] }))
-  }));
-  readonly collapseAllOfKey = this.updater((state, data: { keys: string[] }) => ({
-    ...state,
-    groupBy: state.groupBy.map(gb => ({
-      key: gb.key,
-      expandedHeaders: data.keys.includes(gb.key) ? [] : gb.expandedHeaders
-    }))
-  }));
-
-  readonly setLinkMaps = this.updater((state, maps: any) => {
-    return ({ ...state, linkMaps: maps });
-  });
-
-  on = <V>(srcObservable: Observable<V>, func: (obj: V) => void) => {
-    this.effect(() => srcObservable.pipe(
-      tap(func)
-    ));
-    return this;
-  };
-}
-
-
-export type ViewType = 'virtual paginator' | 'paginator' | 'virtual all' | 'all';
-export const resetable = [
-  'Sorting',
-  'Filters',
-  'Group By',
-  'Hidden Columns',
-  'Column Widths',
-  'Column Order',
-  'Row Height',
-  'Header Height',
-  'Page Size',
-  'Show All',
-] as const

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

@@ -1,34 +0,0 @@
-import { ChangeDetectionStrategy, Component, input, computed } from '@angular/core';
-
-@Component({
-  selector: 'tb-comma-array-column',
-  template: `
-  @for(val of displayArray(); track $index){
-          {{val + (!$last ? ',' : '')}}
-        }
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ArrayCommaColumnComponent {
-
-  value = input.required<(string | number)[]>();
-  additional = input(3);
-  displayArray = computed(() => (this.value() || []).slice(0, this.additional()))
-}
-
-
-@Component({
-  selector: 'tb-new-line-array-column',
-  template: `
-  @for(val of displayArray(); track $index){
-          {{val}}
-          @if(!$last){ <br/> }
-        }
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ArrayNewLineColumnComponent {
-  value = input.required<(string | number)[]>();
-  additional = input(3);
-  displayArray = computed(() => (this.value() || []).slice(0, this.additional()));
-}

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

@@ -1,87 +0,0 @@
-@let metaData = $metaData();
-@let customCell = $customCell();
-@let styles = $styles()!;
-
-@if(metaData)
-{
-  <ng-container [matColumnDef]="metaData.key">
-
-    <!-- header -->
-    <ng-template #myHeader matHeaderCellDef>
-      <mat-header-cell class="column-head" cdkDrag resizeColumn [style]='styles?.header' [key]="metaData.key"
-        [class]='metaData.additional?.columnPartClasses?.header'>
-        <div class="header-container" cdkDragHandle>
-          @if(!customCell?.columnDef?.headerCell)
-          {
-              @if(metaData.fieldType !== FieldType.NotMapped || !!metaData.sortLogic?.sortBy)
-              {
-                <div mat-sort-header style="width: 100%" [disabled]="metaData.noSort">
-                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
-                </div>
-              }
-              @else if(metaData.fieldType === FieldType.NotMapped)
-              {
-                <div style="width: 100%">
-                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
-                </div>
-              }
-              @if($showFilters())
-              {
-                <tb-header-menu #menu [metaData]='metaData' />
-              }
-          }
-          @else
-          {
-            <ng-container *ngTemplateOutlet="customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles:  styles?.header} " />
-          }
-        </div>
-      </mat-header-cell>
-    </ng-template>
-  
-    <!-- body -->
-    <ng-container *matCellDef="let element;">
-      <ng-container *ngTemplateOutlet="$outerTemplate()!; context: { metaData: metaData, element: element , styles: styles?.body, $implicit: element }"/>
-    </ng-container>
-    <ng-template #body let-element='element' >
-      <mat-cell  [matTooltip]="metaData.toolTip ? (getTooltip | func : element) : ''" 
-        [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body'
-        (click)='cellClicked(element, metaData.key, $event)' >
-        <ng-container *ngTemplateOutlet="$innerTemplate()!;
-          context: {
-            value: ($transform()! | func : element),
-            element: element,
-            additional: $additional(),
-            innerStyles: styles.innerBody,
-            $implicit: element
-            }; Injector: injector" />
-      </mat-cell>
-    </ng-template>
-  
-    <!-- footer -->
-    <ng-template matFooterCellDef>
-      @if(customCell?.columnDef?.footerCell)
-      {
-        <ng-container
-        *ngTemplateOutlet="customCell!.columnDef!.footerCell.template;
-        context: {metaData: metaData, data: $data, styles : styles.footer }"/>
-      }
-      @else
-      {
-        @let data = $data();
-        <mat-footer-cell  [style]='styles.footer' [class]='metaData.additional?.columnPartClasses?.footer'>
-          @if(!!data?.length && metaData.additional?.footer)
-          {
-            <span class="bold">
-              @switch (metaData.fieldType)
-              {
-                @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }
-                @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }
-              }
-            </span>
-          }
-  
-        </mat-footer-cell>
-      }
-    </ng-template>
-  </ng-container>
-}

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

@@ -1,43 +0,0 @@
-.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

@@ -1,49 +0,0 @@
-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 { 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,
-      ],
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ColumnBuilderComponent);
-    component = fixture.componentInstance;
-    component.metaData = { key: 'key', fieldType: FieldType.String };
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});