@one-paragon/angular-utilities 2.8.4 → 2.8.6

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

@@ -1,540 +0,0 @@
-import { FieldType, MetaData } from '../interfaces/meta-data';
-import { Observable } from 'rxjs';
-import { defaultTableState, 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, 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';
-import { merge } from 'lodash';
-import { GroupedData } from '../types/group-types';
-
-@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);
-  });
-
-  //#region meta order and hidden
-  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 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 } })
-  })
-  $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));
-  //#endregion meta order and hidden
-
-  //#region widths
-  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 setTableWidth = this.updater((state, widthInPixels:number) =>
-    ({ ...state, userDefined: { ...state.userDefined, table: { width: widthInPixels } } }));
-  $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]);
-  $getUserDefinedTableWidth = this.selectSignal(state => state.userDefined.table.width);
-  getUserDefinedTableWidth$ = this.select(state => state.userDefined.table.width);
-  //#endregion widths
-
-  //#region filter
-  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();
-        }
-        const metaData = state.metaData[filter.key];
-        filter.filterBy = metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy
-        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 }
-    };
-  }
-  $filters = this.selectSignal(state => state.filters);
-  $filtersArray = computed(() => Object.values(this.state().filters) || []);
-  filters$ = this.select(state => state.filters );
-  $getFilter = (filterId: string) : Signal<FilterInfo | CustomFilter | undefined> => {
-    return this.selectSignal(this.$filters, filters => filters[filterId] );
-  }
-  //#endregion filter
-
-  //#region sort
-  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,
-    };
-  });
-  $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);
-  //#endregion sort
-
-  //#region groupBy
-  readonly addGroupByKey = this.updater((state, metaDataKey: string) => ({
-    ...state,
-    groupBy: [...state.groupBy, { key: metaDataKey, expandedHeaders: [], sort: '' }]
-  }));
-
-  readonly removeGroupByKey = this.updater((state, groupByKey: string) => {
-    const groupBy = state.groupBy.filter(key => groupByKey !== key.key);
-    return ({
-      ...state,
-      groupBy,
-      userDefined: { ...state.userDefined, noGroups: groupBy.length === 0 }
-    })});
-
-  readonly updateExpandedGroups = this.updater((state, data: { key: string, groupUniqueName: string, isExpanded: boolean }) => {
-    const gbk = replaceInArrayWithClone(state.groupBy, k => k.key === data.key, gk => {
-      if(data.isExpanded) {
-        if(gk.expandedHeaders === 'all' || gk.expandedHeaders.includes(data.groupUniqueName)) return;
-        gk.expandedHeaders = [...gk.expandedHeaders, data.groupUniqueName];
-      } else {
-        //we need to make sure it will not = all at this point. See generic table setExpanded
-        if(gk.expandedHeaders !== 'all') {
-          gk.expandedHeaders = gk.expandedHeaders.filter(g => g !== data.groupUniqueName);
-        }
-      }
-    });
-    return ({
-      ...state,
-      groupBy: gbk
-    })}
-  );
-  readonly expandOfGroup = this.updater((state, data: { groupKey: string, uniqueNameOfHeadersToExpand: string[] }[]) => {
-    const newGroupedData = state.groupBy.map(gb => ({
-      key: gb.key,
-      expandedHeaders: data.find(g => g.groupKey === gb.key)?.uniqueNameOfHeadersToExpand ?? gb.expandedHeaders,
-      sort: gb.sort,
-    } as GroupedData));
-    return ({ ...state, groupBy: newGroupedData });
-  });
-  readonly collapseAll = this.updater((state) => ({
-    ...state,
-    groupBy: state.groupBy.map(gb => ({ key: gb.key, expandedHeaders: [], sort: gb.sort }))
-  }));
-  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,
-      sort: gb.sort,
-    }))
-  }));
-
-  updateGroupBySort = this.updater((state, data: { key: string, sort: SortDirection }) => {
-    const newGroupedData = replaceInArrayWithClone(state.groupBy, gb => gb.key === data.key, gb => {
-      gb.sort = data.sort;
-    });
-    return ({ ...state, groupBy: newGroupedData });
-  });
-
-  getGroupBySortDirection = (key: string) => computed(() => {
-    const groupBy = this.state().groupBy.find(gb => gb.key === key);
-    return groupBy ? groupBy.sort : '';
-  });
-
-  cycleGroupBySortDirection = this.updater((state, key: string) => {
-    const currentGroupBy = state.groupBy.find(gb => gb.key === key);
-    console.log(currentGroupBy);
-    if(!currentGroupBy) return state;
-
-    let nextSort: SortDirection;
-    switch (currentGroupBy.sort) {
-      case '':
-      case undefined:
-        nextSort = 'desc';
-        break;
-      case 'desc':
-        nextSort = 'asc';
-        break;
-      case 'asc':
-        nextSort = '';
-        break;
-    }
-
-    const newGroupedData = replaceInArrayWithClone(state.groupBy, gb => gb.key === key, gb => {
-      gb.sort = nextSort;
-    });
-    return ({ ...state, groupBy: newGroupedData });
-  });
-  #$groupBy = this.selectSignal(state => state.groupBy);
-  $groupByData = this.selectSignal(
-    this.#$groupBy,
-    this.$metaDataArray,
-    (gb, mds) => gb.filter(bg => mds.some(md => md.key === bg.key)),
-
-    {
-      equal: (prev: GroupedData[], curr: GroupedData[]) =>
-        prev.length === curr.length && curr.every((k, i) => prev[i].key === k.key)
-    }
-  );
-  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)));
-  $userDefinedNoGroups = this.selectSignal(state => state.userDefined.noGroups);
-  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 === 'all' ? ['all'] : g.expandedHeaders);
-    const bb = b.flatMap(g => g.expandedHeaders === 'all' ? ['all'] : g.expandedHeaders);
-    return aa.length === bb.length && aa.every((k) => bb.includes(k));
-  } });
-  $getIsExpanded = (columnKey: string, groupUniqueName: string) => {
-    return this.selectSignal(state => !!state.groupBy.filter(g => g.key === columnKey && (g.expandedHeaders.includes(groupUniqueName) || g.expandedHeaders === 'all')).length);
-  };
-  $expandedPropForKeyIsAll = (columnKey: string) =>
-    this.selectSignal(state => state.groupBy.find(g => g.key === columnKey)?.expandedHeaders === 'all');
-  $sortedGroupsUpdates = this.selectSignal(state => state.groupBy,
-    { equal: (a, b) =>
-      sortsAreSame(a.map(g => ({ active: g.key, direction: g.sort })), b.map(g => ({ active: g.key, direction: g.sort }))) }
-  );
-  //#endregion groupBy
-
-  //#region page paginator and show all
-  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 } }));
-  $isVirtual = this.selectSignal(state =>
-    state.notPersistedTableSettings.useVirtualScroll
-    || state.showAll
-    || state.userDefined?.showAll
-  );
-  $showAll = this.selectSignal(s => s.userDefined?.showAll ?? s.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';
-    }
-  });
-  $userDefinedPageSize = this.selectSignal(state => (state.userDefined.pageSize));
-  $currentPage = this.selectSignal(state => state.currentPage);
-  $pageSize = this.selectSignal(s => s.userDefined?.pageSize || s.pageSize!);
-  //#endregion page paginator and show all
-
-  //#region table settings and props
-
-  //#region footer
-  addFooter = this.updater((state, key: string) => {
-    const meta = this.$metaData()[key];
-    if(!meta) return state;
-    if(meta.fieldType === FieldType.Currency || meta.fieldType === FieldType.Number){
-      meta.additional = { ...meta.additional ?? {}, footer: { type: 'sum' } }
-    }
-    return { ...state, metaData: { ...state.metaData, [key]: { ...meta } } }
-  })
-  //#end region footer
-
-  $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);
-  //#endregion table settings and props
-  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 } });
-  });
-  $userDefinedRowHeight = this.selectSignal(state => (state.userDefined.rowHeight));
-  $userDefinedHeaderHeight = this.selectSignal(state => (state.userDefined.headerHeight));
-  $footerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseFooter);
-  $headerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseHeader);
-
-  $getLinkInfo = (md:MetaData) => this.selectSignal(state => state.linkMaps[md.key]);
-
-  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 = [];
-        newState.userDefined.noGroups = false;
-        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;
-    }
-  })
-
-  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;
-    const groupBy = incomingTableState.groupBy?.length ? incomingTableState.groupBy : incomingTableState.userDefined?.noGroups ? [] : state.groupBy;
-    return { ...state, ...incomingTableState, metaData, sorted, groupBy };
-  };
-
-  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;
-    s.groupBy = (settings.tableSettings?.groupBySettings || []).map(g => ({
-      expandedHeaders: g.expanded ? 'all' : [],
-      key: g.key,
-      sort: '' as SortDirection
-    } as GroupedData));
-    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 setProps = this.updater((state, props: TableProps) => {
-    return ({ ...state, props });
-  });
-
-
-  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, options?: { collapseFooter: boolean } | void) => {
-    const tableSettings = { ...state.persistedTableSettings };
-    tableSettings.collapseFooter = options?.collapseFooter ?? !tableSettings.collapseFooter;
-    return ({ ...state, persistedTableSettings: new PersistedTableSettings(tableSettings) });
-  });
-
-  readonly setLinkMaps = this.updater((state, maps: any) => {
-    return ({ ...state, linkMaps: maps });
-  });
-
-  updateRowProps = this.updater((state, updates: Pick<NotPersistedTableSettings, 'rowClasses' | 'rowClick' | 'rowStyles'>) => {
-    const notPersistedTableSettings = merge(new NotPersistedTableSettings(), (state.notPersistedTableSettings));
-    if(updates.rowClasses)
-      notPersistedTableSettings.rowClasses = updates.rowClasses;
-    if(updates.rowClick)
-      notPersistedTableSettings.rowClick = updates.rowClick;
-    if(updates.rowStyles)
-      notPersistedTableSettings.rowStyles = updates.rowStyles;
-    return ({ ...state, notPersistedTableSettings });
-  });
-
-  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,109 +0,0 @@
-@let metaData = $metaData();
-@let customCell = $customCell();
-@let customHeader = $customHeader();
-@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>
-          @let headerTemplate = customHeader?.template();
-          @if(!headerTemplate && !customCell?.columnDef?.headerCell)
-          {
-              @if((metaData.fieldType !== FieldType.NotMapped || !!metaData.sortLogic?.sortBy) && !metaData.noSort)
-              {
-                <div mat-sort-header style="width: 100%">
-                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
-                </div>
-              }
-              @else if(metaData.fieldType === FieldType.NotMapped || metaData.noSort)
-              {
-                <div style="width: 100%">
-                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
-                </div>
-              }
-              @if($showFilters())
-              {
-                <tb-header-menu #menu [metaData]='metaData' />
-              }
-          }
-          @else if(!customCell?.columnDef?.headerCell)
-          {
-            @if((metaData.fieldType !== FieldType.NotMapped || !!metaData.sortLogic?.sortBy) && !metaData.noSort)
-            {
-              <div mat-sort-header style="width: 100%">
-                <ng-container
-                  *ngTemplateOutlet="headerTemplate; context: { $implicit: metaData, metaData: metaData, styles:  styles?.header } " />
-              </div>
-            }
-            @else if(metaData.fieldType === FieldType.NotMapped || metaData.noSort)
-            {
-              <ng-container
-                *ngTemplateOutlet="headerTemplate; context: { $implicit: metaData, metaData: metaData, styles:  styles?.header } " />
-            }
-            @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>
-}