@one-paragon/angular-utilities 2.2.6 → 2.2.7

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

@@ -1,38 +0,0 @@
-:host{
-  --mat-paginator-container-size: var(tb-paginator-container-size, initial);
-}
-.select-column {
-  min-width: var(--tb-min-select-column-width, 42px)
-}
-.index-column {
-  min-width: var(--tb-min-index-column-width, 42px)
-}
-.mat-mdc-row:nth-child(odd) {
-  background-color: var(--tb-odd-row-background-color, #cdeefe);
-}
-.page-amounts{
-  color: rgba(0, 0, 0, 0.54);
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-  font-size: 12px;
-  margin-right: .2rem;
-}
-
-:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder) {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-:host::ng-deep{
-  & .mdc-data-table__cell, .mdc-data-table__header-cell, .mdc-data-table__cell, .mdc-data-table__header-cell{
-    padding: var(--tb-cell-padding, 0 0 0 .2rem);
-    line-height: var(--tb-cell-line-height, normal);
-  }
-}
-
-::ng-deep .op-date-time-input{
-  line-height: 3rem;
-  font-size: .9rem;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-  padding-left: 0.2rem;
-  width: 12rem;
-
-}

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

@@ -1,403 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewContainerRef, Injector, computed, inject, input, viewChild, effect, untracked, signal, output, linkedSignal } from '@angular/core';
-import { MatFooterRowDef, MatHeaderRowDef, MatRowDef, MatTable, MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { SelectionChange, SelectionModel } from '@angular/cdk/collections';
-import { TableStore } from '../../classes/table-store';
-import { switchMap } from 'rxjs/operators';
-import { ColumnBuilderComponent } from '../column-builder/column-builder.component';
-import { Dictionary } from '../../interfaces/dictionary';
-import { ColumnInfo } from '../../interfaces/ColumnInfo';
-import { CdkDragDrop, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
-import { ConditionalClassesDirective, FunctionPipe, StylerDirective } from '../../../utilities';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { formatNumber, NgTemplateOutlet } from '@angular/common';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { createTransformer } from '../../services/transform-creator';
-import { initIndexSymbol } from '../table-container/table-container.helpers/sort-state.helpers';
-import { parseTbSizeToPixels } from '../../classes/table-builder-general-settings';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
-import { DataStore } from '../../classes/data-store';
-import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
-import { Group, isGroupHeader } from '../../classes/TableState';
-import { mapGroupHeader } from '../table-container/table-container.helpers/groupBy.helpers';
-
-@Component({
-  selector: 'tb-generic-table',
-  templateUrl: './generic-table.component.html',
-  styleUrls: ['./generic-table.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
-    MatTooltipModule, FunctionPipe, StylerDirective, ConditionalClassesDirective
-  ],
-})
-export class GenericTableComponent {
-  protected state = inject(TableStore);
-  private dataStore = inject(DataStore);
-  private viewContainer = inject(ViewContainerRef);
-  private config = inject(TableBuilderConfigToken);
-  private _injector = inject(Injector);
-
-  smallFooter = 10
-
-  $headerRow = viewChild(MatHeaderRowDef);
-  $footerRow = viewChild(MatFooterRowDef);
-  $table = viewChild(MatTable);
-  $dropList = viewChild(CdkDropList);
-
-  selection$ = output<SelectionChange<any>>({ alias: 'selection' });
-
-  $displayDataLength = input.required<number>({ alias: 'displayDataLength' });
-  $data = input.required<any[]>({ alias: 'data' });
-  $rows = input<MatRowDef<any>[]>([], { alias: 'rows' });
-  $columnInfos = input.required<ColumnInfo[]>({ alias: 'columnInfos' });
-  $dataSource = input.required<MatTableDataSource<any>>({ alias: 'dataSource' });
-
-
-  $keys = computed(() => {
-    const displayed = this.state.$orderedVisibleColumns();
-    const built = this.$columns();
-    const keys = displayed.filter(d => !!built[d]);
-    if(this.$hasSelectColumn()){
-      keys.unshift('select');
-    }
-    if(this.$hasIndexColumn()) {
-      keys.unshift('index');
-    }
-    return keys;
-  });
-  keys$ = toObservable(this.$keys);
-
-  $trackBy = input<string | undefined>(undefined, { alias: 'trackBy' });
-  $trackByFunction = computed(() => {
-    const trackBy = this.$trackBy();
-    if(!trackBy) return (index:number, item: any) => item[initIndexSymbol];
-    return ((index:number, item: any) => item[trackBy]);
-  });
-
-  $hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer))
-  $hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell));
-  $footerRowStyle = computed(() => {
-    const hasData = !!this.$displayDataLength();
-    const metaFooter = this.$hasFooterMeta();
-    const customFooter = this.$hasCustomFooter();
-    const hasSelectionColumn = this.state.$props().selectionColumn;
-    return customFooter || hasSelectionColumn || (hasData && metaFooter) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
-  });
-  $showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer');
-
-  injector = Injector.create({
-    providers: [
-      { provide: MatTable, useFactory: () => this.$table() },
-      { provide: CdkDropList, useFactory: () => this.$dropList() },
-    ],
-    parent: this._injector
-  });
-
-  $hasIndexColumn = computed(() => this.state.selectSignal(state => state.props.indexColumn)());
-  $columns = signal<Dictionary<ColumnBuilderComponent>>({});
-  $showHeader = computed(() => !this.state.$tableSettings().hideColumnHeader)
-  $offset = this.dataStore.selectSignal( s => s.virtualScrollOffset );
-
-  drop(event: CdkDragDrop<string[]>) {
-    this.state.setUserDefinedOrder({ newOrder: event.currentIndex, oldOrder: event.previousIndex })
-  }
-
-  #buildColumnsEffect = effect(() => {
-    const columnInfos = this.$columnInfos() || [];
-    const table = this.$table();
-    if(!table) return;
-
-    untracked(() => {
-
-      Object.entries(this.$columns()).forEach(([key, value]) => {
-        const columnInfo = columnInfos.find(ci => ci.metaData.key === key);
-        if(!columnInfo || columnInfo.customCell !== value.$customCell()) {
-          delete this.$columns()[key];
-          table?.removeColumnDef(value.$columnDef()!);
-        }
-      });
-
-      columnInfos.forEach(ci => this.buildColumn(ci))
-    })
-  });
-
-  #buildRowsEffect = effect(() => {
-    const table = this.$table();
-    const rows = this.$rows();
-    const keys = this.$keys();
-    if(!table) return;
-
-    untracked(() => {
-      rows.forEach(row => {
-        table.removeRowDef(row);
-        row.columns = keys;
-        table.addRowDef(row);
-      });
-    })
-  });
-
-  #buildHeaderRowEffect = effect(() => {
-    const headerRow = this.$headerRow();
-    const showHeader = this.$showHeader();
-    const table = this.$table();
-    untracked(() => {
-      if(headerRow && showHeader && table) table.addHeaderRowDef(headerRow);
-      else if(headerRow && table) table.removeHeaderRowDef(headerRow);
-    })
-  });
-
-  #buildFooterEffect = effect(() => {
-    const footerRow = this.$footerRow();
-    const showFooter = this.$showFooterRow();
-    const table = this.$table();
-
-    untracked(() => {
-      if(footerRow && showFooter && table) table.addFooterRowDef(footerRow);
-      else if(footerRow && table) table.removeFooterRowDef(footerRow);
-    })
-  });
-
-  $usePaginator = computed(() => this.state.$tableSettings().usePaginator);
-  $useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'));
-  $virtualStart = this.dataStore.selectSignal(d => d.virtualEnds.start);
-  $offsetIndex = computed(() => {
-    const virtualStart = this.$virtualStart();
-    const pageSize = this.state.$pageSize();
-    const currentPage = this.state.$currentPage();
-    if(this.$useVirtualScroll()){
-      return virtualStart;
-    }
-    if(this.$usePaginator()){
-      return pageSize * currentPage;
-    }
-    return 0;
-  });
-
-  rowClicked(t: any, event?: MouseEvent){
-    const tbs = this.state.$tableSettings();
-    if(tbs.rowClick) tbs.rowClick(t, event);
-  }
-
-  isGroupHeader(_: number, row: { isGroupHeader: boolean }) {
-    return row.isGroupHeader;
-  }
-
-  setExpanded(key: string, groupKey: string, isExpanded: boolean): void {
-    this.state.updateExpandedGroups({ key, isExpanded, groupKey });
-  }
-
-  buildColumn(column: ColumnInfo) {
-    const alreadyBuiltColumn = this.$columns()[column.metaData.key];
-    if(alreadyBuiltColumn) {
-      alreadyBuiltColumn.setMetaData(column.metaData);
-    } else {
-      const component = this.viewContainer.createComponent(ColumnBuilderComponent, {
-        index: 0,
-        injector: this.injector
-      });
-      component.instance.$customCell.set(column.customCell);
-      component.instance.setMetaData(column.metaData);
-      component.instance.$data = this.$data;
-      component.instance.whenViewInited(() => {
-        this.$columns.update(columnsDict => ({
-          ...columnsDict,
-          [column.metaData.key]: component.instance
-        }));
-      });
-    }
-  }
-
-  $hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)());
-  $selection = computed(() => {
-    const trackBy = this.$trackBy();
-    if(trackBy){
-      return new SelectionModel<any>(true, [], true, (a, b) => a[trackBy] === b[trackBy]);
-    }
-    return new SelectionModel<any>(true, []);
-  });
-  selectionChange$ = toObservable(this.$selection).pipe(switchMap(s => s.changed));
-  $selectionChange = toSignal(this.selectionChange$);
-  onSelectionChangeEffect = effect(() => {
-    const selectionChange = this.$selectionChange();
-    if(!selectionChange) return ;
-    untracked(() => this.selection$.emit(selectionChange))
-  });
-  $isAllSelected = computed(() => {
-    this.$selectionChange();
-    const selected = this.$selection()?.selected;
-    if(!selected?.length) return false;
-    return this.$selectableData()?.length === selected.length;
-  });
-  $masterToggleChecked = this.$isAllSelected;
-  $masterToggleIndeterminate = computed(() => {
-    this.$selectionChange();
-    return !!this.$selection()?.selected.length && !this.$masterToggleChecked()});
-
-  $paginated = computed(() => this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator');
-  $selectableData = computed(() => {
-    const isGrouped = !!this.state.$groupByKeys().length;
-    this.state.$expandGroups();
-    if(this.$paginated()){
-      const previousPageRecords = this.state.$currentPage() * this.state.$pageSize();
-      if(isGrouped){
-        const onScreen = this.$dataSource().data.slice(previousPageRecords, previousPageRecords + this.state.$pageSize());
-        const nested = onScreen.flatMap(
-          (group: Group) => (group.isGroupHeader && !this.state.$getIsExpanded(group.key, group.groupName)()) ? mapGroupHeader(group, true) : []
-        );
-        return onScreen.concat(nested).filter(row => !row.isGroupHeader);
-      }
-      return this.$data().slice(previousPageRecords, previousPageRecords + this.state.$pageSize());
-    }
-    else if(this.state.$viewType() === 'all' || this.state.$viewType() === 'virtual all'){
-      return this.$data();
-    }
-    return [];
-  });
-
-  $selectAllMessage = computed(() => {
-    if(this.$isAllSelected()) return `Deselect all ${this.$selection().selected.length} selected`;
-    const selectable = formatNumber(this.$selectableData().length, 'en-US');
-    let message = `Select all ${selectable}`;
-    if(this.$paginated()){
-      message += ' on this page';
-    }
-    return message;
-  })
-
-  #onSelectableDataChangeEffect = effect(() => {
-    const selectableData = this.$selectableData();
-    untracked(() => {
-      const selected = this.$selection()?.selected;
-      if(!selected.length) return;
-      const trackBy = this.$trackBy();
-      const trackByFunc = trackBy ? (s) => selectableData.every(d => d[trackBy!] !== s[trackBy!]) : s => !selectableData.includes(s);
-      const removed = selected.filter(trackByFunc);
-      this.$selection().deselect(...removed)
-    })
-  });
-
-  /** Selects all rows if they are not all selected; otherwise clear selection. */
-  masterToggle() {
-    if(this.$isAllSelected()){
-      this.$selection().clear()
-    } else {
-      this.$selection().select(...this.$selectableData());
-    }
-  }
-
-  $tableWidth = linkedSignal<number | undefined, { width: string }>({
-    source: this.state.$getUserDefinedTableWidth,
-    computation: (currentUserDefinedWidth, { source: previousUserDefinedWidth } = { value: null as any, source: 0 as any }) => {
-      if( currentUserDefinedWidth){
-        return ({ width: `${currentUserDefinedWidth}px`, minWidth: 'initial' });
-      } if( wasReset() ){
-        return ({ width: 'initial' });
-      }
-      return ({} as { width: string });
-
-      function wasReset(){
-        return (previousUserDefinedWidth ?? 0) >= 0 && currentUserDefinedWidth == null;
-      }
-    }
-  });
-
-  getTransform = (key: string, val: string) => computed(() => {
-    if(val == undefined || val === 'null') return '';
-    try {
-      return createTransformer(this.state.$getMetaData(key)(), this.config, true, true)({ [`${key}`]: val }) || val;
-    } catch (error) {
-      return signal(val);
-    }
-  })
-
-  $rowHeight = computed(() => {
-    if(this.state.$userDefinedRowHeight()){
-      return this.state.$userDefinedRowHeight() + 'px';
-    }
-    const notPersistedTableSettings = this.state.$notPersistedTableSettings();
-    if(this.state.$isVirtual() && notPersistedTableSettings.virtualSettings?.enforceRowHeight){
-      const height = notPersistedTableSettings.virtualSettings!.rowHeight;
-      return parseTbSizeToPixels(height) + 'px';
-    }
-    if(notPersistedTableSettings.rowHeight){
-      return parseTbSizeToPixels(notPersistedTableSettings.rowHeight) + 'px';
-    }
-    return undefined;
-  });
-
-  $headerHeight = computed(() => {
-    if(this.state.$userDefinedHeaderHeight()){
-      return this.state.$userDefinedHeaderHeight() + 'px';
-    }
-    const notPersistedTableSettings = this.state.$notPersistedTableSettings();
-    if(this.state.$isVirtual() && notPersistedTableSettings.virtualSettings?.enforceHeaderHeight){
-      const height = notPersistedTableSettings.virtualSettings!.headerHeight;
-      return parseTbSizeToPixels(height) + 'px';
-    }
-    if(notPersistedTableSettings.headerHeight){
-      return parseTbSizeToPixels(notPersistedTableSettings.headerHeight) + 'px';
-    }
-    return undefined;
-  });
-
-  $groupHeaderHeight = computed(() => {
-    const groupHeaderHeight = this.state.$notPersistedTableSettings().groupHeaderHeight;
-    if(groupHeaderHeight){
-      return parseTbSizeToPixels(groupHeaderHeight) + 'px';
-    }
-    return this.$rowHeight();
-  });
-
-  $footerHeight = computed(() => {
-    const footerStyle = this.$footerRowStyle();
-    switch (footerStyle) {
-      case 'regular-footer':
-        return this.$rowHeight();
-      case 'small-footer':
-        return `${this.smallFooter}px`;
-      default:
-        return '0px';
-    }
-  });
-
-  $stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual());
-
-  $rowStyles = computed(() => this.state.$tableSettings().rowStyles || {});
-  $rowClasses = computed(() => this.state.$tableSettings().rowClasses || {});
-
-  allOfGroupSelected = (uniqueName: string) => computed(() => {
-    //make sure signal is marked dirty when selection or over all data changes
-    this.$selectionChange();
-    this.$data();
-    const header = this.$dataSource().data.find(d => isGroupHeader(d) && d.uniqueName === uniqueName);
-    const children = mapGroupHeader(header, true).filter(i => !isGroupHeader(i));
-    if(!children.length) return { containsAll: false, containsSome: false, length: 0 };
-    let containsAll = true;
-    let containsSome = false;
-    for(var a of children){
-      const contains = this.$selection().isSelected(a);
-      if(contains) containsSome = true;
-      else containsAll = false;
-      if(!containsAll && containsSome) break;
-    }
-    return { containsAll, containsSome, length: children.length };
-  });
-
-  toggleGroup = (uniqueName: string, allSelected: boolean) => {
-    const header = this.$dataSource().data.find(d => isGroupHeader(d) && d.uniqueName === uniqueName);
-    const children = mapGroupHeader(header, true).filter(i => !isGroupHeader(i));
-    if(allSelected){
-      this.$selection().deselect(...children)
-    } else {
-      this.$selection().select(...children);
-    }
-  }
-
-  toggleGroupMessage = (amountOfItems: number, allSelected: boolean) => {
-    if(allSelected) return `Deselect all in this group`;
-    const selectable = formatNumber(amountOfItems, 'en-US');
-    return `Select all ${selectable} in this group`;
-  }
-}

package/src/table-builder/components/generic-table/paginator.component.ts

@@ -1,112 +0,0 @@
-import { Component, ChangeDetectionStrategy, computed, inject, viewChild, effect, untracked } from '@angular/core';
-import { MatPaginator, MatPaginatorModule, PageEvent } from '@angular/material/paginator';
-import { switchMap } from 'rxjs/operators';
-import { TableStore } from '../../classes/table-store';
-import { MatButtonModule } from '@angular/material/button';
-import { DataStore } from '../../classes/data-store';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
-import { notNull } from '../../../rxjs';
-import { InitializationState } from '../../classes/TableState';
-
-@Component({
-  selector: 'tb-paginator',
-  imports: [MatPaginatorModule, MatButtonModule],
-  template: `
-  <div class="paginator-row">
-    @if($currentPageData(); as pageData)
-    {
-      <div [class]="{ 'hide' : ! $collapseFooter(), 'page-amounts':true}">
-        @if(!$showAll()){ {{pageData.currentStart}} - {{pageData.currentEnd}} of }{{pageData.total}}
-      </div>
-    }
-    <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons
-      [class]="{ 'hide' : $collapseFooter() }">
-    </mat-paginator>
-    @if ($showAllOption() && !$collapseFooter())
-    {
-      <button mat-button (click)="showAll()">
-        <span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span>
-      </button>
-    }
-  </div>
-  `,
-  styleUrls: ['./generic-table.component.scss', '../../styles/collapser.styles.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PaginatorComponent {
-  private state = inject(TableStore);
-  private data = inject(DataStore);
-  $paginator = viewChild(MatPaginator);
-
-  $dataLength = this.data.selectSignal(d => d.sortedFilteredDataLength);
-  $viewableDataLength = this.data.selectSignal(d => d.sortedFilteredGroupedDataLength);
-  pageEvent$ = toObservable(this.$paginator).pipe(notNull(), switchMap(p => p.page));
-  $pageEvent = toSignal(this.pageEvent$);
-  $pageIndexChangeEvent = computed(() => this.$pageEvent()?.pageIndex);
-  $pageSizeChangeEvent = computed(() => this.$pageEvent()?.pageSize);
-  $currentPageData = computed(() => {
-    const pageEvent = this.$pageEvent();
-    if(!pageEvent) return;
-    const paginator = this.$paginator()!;
-    // Reset because initial page event does not have page length
-    pageEvent.pageIndex = paginator.pageIndex;
-    pageEvent.pageSize = paginator.pageSize;
-    pageEvent.length = paginator.length;
-    const pageDetails = mapPaginationEventToCurrentPageDetails(pageEvent);
-    const dataLength = this.$dataLength();
-    return ({ ...pageDetails, total: dataLength })
-  })
-
-  #onPageIndexEffect = effect(() => {
-    const index = this.$pageIndexChangeEvent();
-    if(index === undefined) return;
-    untracked(() => this.state.setCurrentPage(index))
-  });
-  #onPageSizeEffect = effect(() => {
-    const size = this.$pageSizeChangeEvent();
-    const initialized = this.state.$initializationState() >= InitializationState.Ready;
-    if(!size || !initialized) return;
-    untracked(() => this.state.setUserDefinedPageSize(size));
-  });
-  #onMetaPageSizeEffect = effect(() => {
-    const paginator = this.$paginator();
-    if(!paginator) return;
-    const metaPageSize = this.state.$pageSize();
-    const initialized = this.state.$initializationState() >= InitializationState.Ready;
-    untracked(() => initialized && paginator._changePageSize(metaPageSize));
-  });
-  onDataLengthEffect = effect(() => {
-    const paginator = this.$paginator();
-    const dataLength = this.$viewableDataLength();
-    untracked(() => {
-      if(paginator){
-        paginator.length = dataLength;
-        const maxIndex = Math.max(0, Math.ceil(dataLength / paginator.pageSize) - 1);
-        if(paginator.pageIndex > maxIndex){
-          paginator.pageIndex = maxIndex;
-          this.state.setCurrentPage(maxIndex);
-        }
-      }
-    })
-  });
-  $collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)() || this.$showAll());
-  $showAllOption = this.state.selectSignal(s => s.notPersistedTableSettings?.paginatorSettings?.includeAllInOptions);
-  $showAll = this.state.$showAll;
-  showAll(){
-    this.state.setUserDefinedShowAll(!this.$showAll());
-  }
-}
-
-const mapPaginationEventToCurrentPageDetails = (pageData: PageEvent):CurrentPageDetails => {
-  return ({
-    currentStart: (pageData.pageIndex * pageData.pageSize) + 1,
-    currentEnd: Math.min(pageData.length, ((pageData.pageIndex + 1) * pageData.pageSize)),
-    total: pageData.length
-  })};
-
-
-interface CurrentPageDetails {
-  currentStart:number,
-  currentEnd:number,
-  total:number
-}

package/src/table-builder/components/group-by-list/group-by-list.component.css

@@ -1,17 +0,0 @@
-.tb-group-label {
-  font-weight: bolder;
-  padding-right: 15px;
-}
-:host{
-  display: flex;
-  padding-left: 8px;
-  align-items: center;
-}
-:host mat-chip-set mat-chip{
-  margin: 0;
-}
-:host mat-chip-set .nested-arrow{
-  display: flex;
-  width: 15px;
-  justify-content: center;
-}

package/src/table-builder/components/group-by-list/group-by-list.component.html

@@ -1,14 +0,0 @@
-<span class="tb-group-label">Group By:</span>
-<mat-chip-set>
-  @for (groupBy of $groups(); track groupBy.key)
-  {
-    @if($index > 0)
-    {
-      <mat-icon class="nested-arrow">arrow_right</mat-icon>
-    }
-    <mat-chip (removed)="tableStore.removeGroupByKey(groupBy.key)">
-      {{groupBy.name | spaceCase}}
-      <mat-icon matChipRemove>cancel</mat-icon>
-    </mat-chip>
-  }
-</mat-chip-set>

package/src/table-builder/components/group-by-list/group-by-list.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { GroupByListComponent } from './group-by-list.component';
-
-describe('GroupByListComponent', () => {
-  let component: GroupByListComponent;
-  let fixture: ComponentFixture<GroupByListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [GroupByListComponent]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(GroupByListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/table-builder/components/group-by-list/group-by-list.component.ts

@@ -1,25 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
-import { TableStore } from '../../classes/table-store';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatIconModule } from '@angular/material/icon';
-import { SpaceCasePipe } from '../../../utilities';
-
-@Component({
-  selector: 'group-by-list',
-  templateUrl: './group-by-list.component.html',
-  styleUrls: ['./group-by-list.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    MatChipsModule, MatIconModule, SpaceCasePipe
-  ]
-})
-export class GroupByListComponent {
-  tableStore = inject(TableStore);
-  $groups = computed(() => {
-    const dict = this.tableStore.$metaData();
-    return this.tableStore.$groupByKeys().map(gbk => ({
-      key: gbk,
-      name: dict[gbk].displayName || gbk
-    }))
-  })
-}

package/src/table-builder/components/in-filter/in-filter.component.css

@@ -1,3 +0,0 @@
-.inline{
-  display: inline-block;
-}

package/src/table-builder/components/in-filter/in-filter.component.html

@@ -1,23 +0,0 @@
-<div class=inline>
-  @for (val of value; track $index)
-  {
-    <div>
-      @if($type() === FieldType.Number || $type() === FieldType.Currency)
-      {
-        <input type="number" [ngModel]="val"
-        [readonly]="$index + 1 < value.length" [ngModelOptions]="{standalone:true}" [autoFocus]="$index === value.length - 1" (ngModelChange)="onValueChange($index, $event)"/>
-      }
-      @else
-      {
-        <input #input type="string"
-        [ngModel]="val" [readonly]="$index + 1 < value.length" [ngModelOptions]="{standalone:true}"
-        [autoFocus]="$index === value.length - 1" (ngModelChange)="onValueChange($index ,$event)" />
-      }
-    </div>
-    <button [disabled]="value.length <= 1" (click)="removeInput($index)">-</button>
-    @if ($index === value.length - 1)
-    {
-      <button [disabled]="val == undefined || val === ''" (click)="addInput()">+</button>
-    }
-  }
-</div>