@one-paragon/angular-utilities 1.2.12 → 1.2.13

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

@@ -1,299 +0,0 @@
-import { Component, ViewChild, Input, ChangeDetectionStrategy, Output, SimpleChanges, OnInit, QueryList, ViewContainerRef, Injector, EventEmitter, computed, inject, input, viewChild, effect, untracked, signal } from '@angular/core';
-import { MatFooterRowDef, MatHeaderRowDef, MatRowDef, MatTable, MatTableModule } from '@angular/material/table';
-import { Observable, combineLatest } from 'rxjs';
-import { SelectionChange, SelectionModel } from '@angular/cdk/collections';
-import { TableStore } from '../../classes/table-store';
-import { map } from 'rxjs/operators';
-import { ColumnBuilderComponent } from '../column-builder/column-builder.component';
-import { Dictionary } from '../../interfaces/dictionary';
-import { FieldType } from '../../interfaces/report-def';
-import { previousAndCurrent } from '../../../rxjs/rxjs-operators';
-import { ColumnInfo } from '../../interfaces/ColumnInfo';
-import { CdkDragDrop, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
-import { FunctionPipe } from '../../../utilities';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { TransformCreator } from '../../services/transform-creator';
-import { initIndexSymbol } from '../table-container/table-container.helpers/sort-state.helpers';
-import { VirtualScrollOptions } from '../../classes/table-builder-general-settings';
-import { toObservable } from '@angular/core/rxjs-interop';
-import { DataStore } from '../../classes/data-store';
-
-@Component({
-  selector: 'tb-generic-table',
-  templateUrl: './generic-table.component.html',
-  styleUrls: ['./generic-table.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
-    MatTooltipModule, AsyncPipe, FunctionPipe,
-  ],
-})
-export class GenericTableComponent implements OnInit {
-  protected state = inject(TableStore);
-  private dataStore = inject(DataStore);
-  private viewContainer = inject(ViewContainerRef);
-  private transformCreator = inject(TransformCreator);
-
-  $headerRow = viewChild(MatHeaderRowDef);
-  $footerRow = viewChild(MatFooterRowDef);
-  $table = viewChild(MatTable);
-
-  drop(event: CdkDragDrop<string[]>) {
-    this.state.setUserDefinedOrder({ newOrder:event.currentIndex, oldOrder:event.previousIndex })
-  }
-  _trackBy?: string;
-  @Input() set trackBy(trackBy: string){
-    if(trackBy){
-      this._trackBy = trackBy;
-      this.trackByFunction = (index:number, item: any) => item[trackBy];
-    }
-    this.setUpSelections(trackBy);
-  }
-  get trackBy(): string | undefined { return this._trackBy }
-  $displayData = input.required<any[]>({ alias: 'displayData' });
-  $displayDataLength = computed(() => this.$displayData()?.length || 0);
-  $hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer))
-  $data = input.required<any[]>({ alias: 'data' })
-  data$ = toObservable(this.$data);
-  @Input() rows!: QueryList<MatRowDef<any>>;
-  @Input() columnBuilders!: ColumnBuilderComponent[];
-  $columnInfos = input.required<ColumnInfo[]>({ alias: 'columnInfos' });
-  $hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell))
-  @ViewChild(CdkDropList, { static: true }) dropList!: CdkDropList;
-  $footerRowStyle = computed(() => {
-    const hasData = !!this.$displayDataLength();
-    const metaFooter = this.$hasFooterMeta();
-    const customFooter = this.$hasCustomFooter();
-    const hasSelectionColumn = this.state.props().selectionColumn;
-    return customFooter || (hasData && (metaFooter || hasSelectionColumn)) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
-  });
-  $showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer');
-  currentColumns!: string[];
-  _injector = inject(Injector);
-  injector = Injector.create({
-    providers: [
-      {provide: MatTable, useFactory: ()=> this.$table() },
-      {provide: CdkDropList, useFactory: ()=> this.dropList },
-    ],
-    parent: this._injector
-  });
-  rowDefArr :MatRowDef<any>[] = [];
-  $hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)());
-  $hasIndexColumn = computed(() => this.state.selectSignal(state => state.props.indexColumn)());
-  myColumns = signal<Dictionary<ColumnBuilderComponent>>({});
-  $showHeader = computed(() => !this.state.tableSettings().hideColumnHeader)
-  offset$ = this.dataStore.select( s => s.virtualScrollOffset );
-  offsetIndex = 0;
-  dataView!: Observable<any[]>;
-
-  constructor() {
-    this.setUpSelections();
-    effect(() => {
-      const columnInfos = this.$columnInfos() || [];
-      untracked(() => {
-        Object.entries(this.myColumns()).forEach(([key, value]) => {
-          const columnInfo = columnInfos.find(ci => ci.metaData.key === key);
-          if(!columnInfo || columnInfo.customCell !== value.customCell) {
-            delete this.myColumns()[key];
-            this.$table()?.removeColumnDef(value.columnDef);
-          }
-        })
-        columnInfos.forEach(ci => this.addMetaData(ci))
-      })
-    });
-    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);
-      })
-    });
-    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);
-      })
-    });
-  }
-
-  defaultTrackBy = (index:number, item: any) => item[initIndexSymbol];
-  trackByFunction = this.defaultTrackBy;
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.rows && this.rows && this.myColumns().length) {
-      this.initializeRowDefs([...this.rows]);
-    }
-  }
-  $keys = computed(() => {
-    const displayed = this.state.$orderedVisibleColumns();
-    const built = this.myColumns();
-    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);
-  ngOnInit() {
-    this.initializeRowDefs([...this.rows]);
-
-    this.state.on(this.keys$, keys => {
-      this.rowDefArr?.forEach(row => row.columns = keys)
-    });
-
-    this.state.on(this.selectableData$, (data) => {
-      if(this.selection.selected.length){
-        const trackByFunction = this.trackBy ? (s) => data.every(d =>  d[this.trackBy!] !== s[this.trackBy!]) : s => !data.includes(s);
-        const removed = this.selection.selected.filter(trackByFunction);
-        this.selection.deselect(...removed);
-      }
-    });
-
-    if(this.state.tableSettings().usePaginator || this.state.tableSettings().useVirtualScroll) {
-      this.state.on(combineLatest([this.state.state$, this.dataStore.state$]), ([state, data]) => {
-        this.offsetIndex = data.virtualEnds.start;
-        if(this.state.tableSettings().usePaginator) {
-          this.offsetIndex += (state.pageSize * state.currentPage);
-        }
-      });
-    }
-  }
-
-
-  isGroupHeader(_: number, row: { isGroupHeader: boolean }) {
-    return row.isGroupHeader;
-  }
-
-  setExpanded(key: string, groupKey: string, isExpanded: boolean): void {
-    this.state.updateExpandedGroups({ key , isExpanded, groupKey });
-  }
-
-  addMetaData(column: ColumnInfo) {
-    const columnBuilder = this.myColumns()[column.metaData.key];
-    if(columnBuilder) {
-      columnBuilder.metaData = column.metaData;
-    } else {
-      const component = this.viewContainer.createComponent(ColumnBuilderComponent, {
-        index: 0,
-        injector: this.injector
-      });
-      component.instance.customCell = column.customCell;
-      component.instance.metaData = column.metaData;
-      component.instance.data$ = this.data$;
-      this.myColumns.update(mc => ({...mc, [column.metaData.key]: component.instance}));
-    }
-  }
-
-  initializeRowDefs = (defs:MatRowDef<any>[])=>{
-    const table = this.$table();
-    if(!table) return;
-    this.rowDefArr.forEach(r=> table.removeRowDef(r));
-    this.rowDefArr = defs;
-    defs.forEach(r => {
-      r.columns = this.$keys().concat(Object.values(this.myColumns()).filter(c => c.metaData.fieldType !== FieldType.Hidden).map(c => c.metaData.key));
-      table.addRowDef(r)
-    });
-  }
-
-  selection! : SelectionModel<any>;
-  @Output() selection$ = new EventEmitter<SelectionChange<any>>();
-  masterToggleChecked$ = this.selection$.pipe(map(()=>this.selection.hasValue() && this.isAllSelected()));
-  masterToggleIndeterminate$ = this.selection$.pipe(map(()=>this.selection.hasValue() && !this.isAllSelected()));
-  setUpSelections(trackBy?: string){
-    this.selection = trackBy ? new SelectionModel<any>(true, [], true, (a, b) => a[trackBy] === b[trackBy]) : new SelectionModel<any>(true, []);
-    this.state.on(this.selection.changed, c => this.selection$.emit(c));
-  }
-  $selectableData = computed(() => {
-    if(this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator'){
-      const previousPageRecords = this.state.state().currentPage * this.state.state().pageSize;
-      return this.$data().slice(previousPageRecords, previousPageRecords + this.state.state().pageSize);
-    }else if(this.state.$viewType() === 'all' || this.state.$viewType() === 'virtual all'){
-      return this.$data();
-    }
-    return [];
-  });
-  selectableData$ = toObservable(this.$selectableData);
-  isAllSelected() {
-    const numSelected = this.selection.selected.length;
-    const numRows = this.$selectableData()?.length || 0;
-    return numSelected === numRows;
-  }
-
-  /** 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 = this.state.getUserDefinedTableSize$.pipe(
-    previousAndCurrent<number | undefined>(0),
-    map(([previousUserDefinedWidth, currentUserDefinedWidth]) => {
-      if( currentUserDefinedWidth){
-        return ({width:`${currentUserDefinedWidth}px`});
-      } if( wasReset() ){
-        return ({width:'initial'});
-      }
-      return ({});
-
-      function wasReset(){
-        return (previousUserDefinedWidth ?? 0) >=0 && currentUserDefinedWidth == null;
-      }
-    })
-  );
-
-  getTransform = (key: string, val: string) => {
-    if(val == undefined || val === 'null') return '';
-    try {
-      return this.transformCreator.createTransformer(this.myColumns[key].metaData, true)({ [key]: val});
-    } catch (error) {
-      return val;
-    }
-  }
-
-  $rowHeight = this.state.selectSignal(s => {
-      if(this.state.$isVirtual() && (s.notPersistedTableSettings.useVirtualScroll as VirtualScrollOptions)?.enforceRowHeight){
-        const height = (s.notPersistedTableSettings.useVirtualScroll as VirtualScrollOptions)!.rowHeight;
-        return height + 'px' ;
-      }
-      if(typeof s.notPersistedTableSettings.rowHeight === 'number'){
-        return s.notPersistedTableSettings.rowHeight + 'px';
-      }
-      return s.notPersistedTableSettings.rowHeight;
-
-    });
-
-  $headerHeight = this.state.selectSignal(s => {
-    if(this.state.$isVirtual() && (s.notPersistedTableSettings.useVirtualScroll as VirtualScrollOptions)?.enforceHeaderHeight){
-      const height = (s.notPersistedTableSettings.useVirtualScroll as VirtualScrollOptions)!.headerHeight;
-      return height + 'px';
-    }
-    if(typeof s.notPersistedTableSettings.headerHeight === 'number'){
-      return s.notPersistedTableSettings.headerHeight + 'px';
-    }
-    return s.notPersistedTableSettings.headerHeight;
-  });
-
-  $groupHeaderHeight = this.state.selectSignal(s => {
-    if(s.notPersistedTableSettings.groupHeaderHeight){
-      return s.notPersistedTableSettings.groupHeaderHeight + 'px';
-    }
-    return this.$rowHeight();
-  });
-
-  $stickyFooter = computed(() => this.state.props().stickyFooter || this.state.$isVirtual());
-}

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

@@ -1,99 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewChild, Input, AfterViewInit, OnInit, ElementRef, computed, inject } from '@angular/core';
-import { MatPaginator, MatPaginatorModule, PageEvent } from '@angular/material/paginator';
-import { asyncScheduler, merge, Observable } from 'rxjs';
-import { delay, distinctUntilChanged, distinctUntilKeyChanged, map } from 'rxjs/operators';
-import { TableStore } from '../../classes/table-store';
-import { AsyncPipe, NgClass } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { DataStore } from '../../classes/data-store';
-
-@Component({
-  selector: 'tb-paginator',
-  standalone: true,
-  imports: [AsyncPipe, MatPaginatorModule, NgClass, MatButtonModule],
-  template: `
-  <div class="paginator-row">
-    @if(currentPageData$ | async; 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 (page)="paginatorChange()"
-      [class]="{ 'hide' : $collapseFooter() }">
-    </mat-paginator>
-    @if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><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 implements OnInit, AfterViewInit{
-  private state = inject(TableStore);
-  private data = inject(DataStore);
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  currentPageData$!: Observable<CurrentPageDetails>;
-  $collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)() || this.$showAll());
-  @Input() data$!: Observable<any[]>;
-  @Input({ required: true }) tableElRef! : ElementRef
-  ngOnInit(){
-    this.ourPageEvent = true;
-    this.state.on(metaDataPageSizeChange(this.state), setPaginatorPageSize(this.paginator));
-    this.state.on(this.paginator.page, (pageEvent) => {
-      this.state.updateState({currentPage: pageEvent.pageIndex} );
-    });
-    this.state.setPageSize(onPaginatorPageSizeChange(this.paginator))
-
-    this.state.on( this.data.select( s => s.dataLen), (len) => this.paginator.length = len);
-  }
-
-  ngAfterViewInit() {
-    this.currentPageData$ = merge(
-      this.paginator.page.pipe(map(mapPaginationEventToCurrentPageDetails)),
-      this.data$.pipe(
-        distinctUntilKeyChanged("length"),
-        delayToAllowForProperUpdate,
-        map(updateCurrentPageDetailsOnDataLengthChange(this.paginator))),
-    );
-  }
-
-  paginatorChange() : void {
-    if(!this.ourPageEvent){
-      setTimeout(() => this.tableElRef?.nativeElement?.scrollIntoView(), 0);
-    } else {
-      this.ourPageEvent = false;
-    }
-  }
-  ourPageEvent = false;
-
-  $showAllOption = this.state.selectSignal(s => s.notPersistedTableSettings?.includeAllInPaginatorOptions);
-  $showAll = this.state.selectSignal(s => s.showAll);
-  updatePaginator = this.state.updater(state => ({ ...state, showAll: !state.showAll }));
-  showAll(){
-    this.updatePaginator();
-  }
-}
-
-const mapPaginationEventToCurrentPageDetails = (pageData: PageEvent):CurrentPageDetails => ({
-  currentStart : (pageData.pageIndex * pageData.pageSize) + 1,
-  currentEnd : Math.min(pageData.length , ((pageData.pageIndex + 1) * pageData.pageSize)),
-  total : pageData.length
-});
-
-const updateCurrentPageDetailsOnDataLengthChange = (paginator:MatPaginator) => () => ({currentStart:(paginator.pageIndex * paginator.pageSize) + 1,
-  currentEnd: Math.min(paginator.length , ((paginator.pageIndex + 1) * paginator.pageSize)),
-  total:paginator.length})
-
-const delayToAllowForProperUpdate = delay<any[]>(0,asyncScheduler);
-
-interface CurrentPageDetails {
-  currentStart:number,
-  currentEnd:number,
-  total:number
-}
-
-const metaDataPageSizeChange = (state:TableStore) => state.state$.pipe(map(state => state.userDefined.pageSize || state.pageSize), distinctUntilChanged());
-
-const setPaginatorPageSize = (paginator:MatPaginator) => (pageSize: number) =>
-  paginator._changePageSize(pageSize);
-
-const onPaginatorPageSizeChange = (paginator: MatPaginator) => paginator.page.pipe(map( e => e.pageSize ), distinctUntilChanged());

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

@@ -1,8 +0,0 @@
-.tb-group-label {
-  padding-right: 5px;
-}
-
-.nested-arrow {
-  margin-right: -8px;
-  margin-left: -8px;
-}

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

@@ -1,12 +0,0 @@
-<mat-chip-set *ngrxLet="tableStore.groupByKeys$ as groupByKeys">
-  <span class="tb-group-label">Group By:</span>
-  @for (groupByKey of groupByKeys; track groupByKey) {
-    @if($index > 0){
-      <mat-icon class="nested-arrow">arrow_right</mat-icon>
-    }
-    <mat-chip (removed)="tableStore.removeGroupByKey(groupByKey)">
-      {{groupByKey | 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,21 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { TableStore } from '../../classes/table-store';
-import { MatChipsModule } from '@angular/material/chips';
-import { LetDirective } from '@ngrx/component';
-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'],
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    MatChipsModule, LetDirective, MatIconModule, SpaceCasePipe
-  ]
-})
-export class GroupByListComponent {
-  
-  tableStore = inject(TableStore);
-}

package/src/table-builder/components/header-menu/header-menu.component.html

@@ -1,104 +0,0 @@
-<button mat-icon-button class="open-menu-icon-button" disableRipple [matMenuTriggerFor]="menu" [matMenuTriggerRestoreFocus]="false">
-  <mat-icon class="menu-icon">more_vert</mat-icon>
-</button>
-<mat-menu #menu="matMenu" >
-  @if (!(metaData.fieldType === FieldType.NotMapped))
-  {
-    <button mat-menu-item (click)="tableState.addGroupByKey(metaData.key)">
-      <mat-icon color="primary">group</mat-icon>
-      <span>Group By</span>
-    </button>
-  }
-  <button mat-menu-item (click)=hideField(metaData.key)>
-    <mat-icon color="primary">visibility_off</mat-icon>
-    <span>Hide Column</span>
-  </button>
-  @if (!(metaData.fieldType === FieldType.NotMapped))
-  {
-    <ng-form #myForm="ngForm" (keydown.enter)="onEnter(myForm.value)" class="tb-header-filter">
-      <input type="hidden" name="filterId"  [ngModel]="'header-column-' + metaData.key" />
-      <input type="hidden" name="filterType"  [ngModel]="myFilterType" />
-      <input type="hidden" name="key"  [ngModel]="metaData.key" />
-      <input type="hidden" name="fieldType"  [ngModel]="metaData.fieldType" />
-      
-      @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){
-        <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue'/>
-      }
-      @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {
-        <mat-form-field stop-propagation class="font auto-width">
-          <mat-icon matPrefix class="search-icon">search</mat-icon>
-          <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>
-          <input matInput name="filterValue" [ngModel]="filter.filterValue" />
-          <span matSuffix [matTooltip]="myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'">
-            <button mat-icon-button color="primary" (click)="setStringFilterType()" class="header-filter-icon-button">
-              <mat-icon [ngClass]="{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }">
-                block
-              </mat-icon>
-            </button>
-          </span>
-        </mat-form-field>
-      }
-      @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {
-        <mat-form-field class="auto-width" stop-propagation>
-          <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>
-          <input matInput type='number'  name="filterValue" [ngModel]="filter.filterValue" />
-          <span matPrefix class="tb-header-prefix">
-            <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.NumberLessThan)"
-            [ngClass]="{'chosen-icon': myFilterType === FilterType.NumberLessThan }">
-              <mat-icon  class="suffix-icons"
-                >
-                arrow_back_ios</mat-icon>
-            </button>
-            <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.NumberGreaterThan)"
-            [ngClass]="{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }" >
-              <mat-icon  class="suffix-icons">arrow_forward_ios</mat-icon>
-            </button>
-            <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.NumberEquals)"
-            [ngClass]="{'chosen-icon': myFilterType === FilterType.NumberEquals }">
-              <span class="suffix-icons">=</span>
-            </button>
-          </span>
-        </mat-form-field>
-      }
-      @else if (metaData.fieldType === FieldType.Boolean) {
-        <div>
-          <label>
-            <mat-icon class="search-icon">filter_list</mat-icon>
-          </label>
-          <mat-radio-group stop-propagation #ctrl="matRadioGroup" #boolField='ngModel' class="font" name="filterValue" [ngModel]="myFilterValue" >
-            <mat-radio-button class="filter-radio-button" (click)="myFilterValue = true;" [value]="true">True</mat-radio-button><br/>
-            <mat-radio-button class="filter-radio-button" (click)="myFilterValue = false" [value]="false">False</mat-radio-button><br/>
-          </mat-radio-group>
-        </div>
-      }
-      @else if (metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime) {
-        <mat-form-field class="font auto-width" stop-propagation >
-          <span matPrefix class="tb-header-prefix">
-            <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.DateOnOrAfter)"
-              [ngClass]="{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }">
-              <mat-icon  class="suffix-icons underline">arrow_forward_ios</mat-icon>
-            </button>
-            <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.DateOnOrBefore)"
-              [ngClass]="{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }">
-              <mat-icon  class="suffix-icons underline">arrow_back_ios</mat-icon>
-            </button>
-            <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.DateIsOn)"
-              [ngClass]="{'chosen-icon': myFilterType === FilterType.DateIsOn }">
-              <span  class="suffix-icons underline"> =</span>
-            </button>
-          </span>
-          <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :
-            myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>
-          <input matInput name="filterValue" [ngModel]="filter.filterValue" [matDatepicker]="calendar"
-            (click)="calendar.open()"/>
-          <mat-datepicker-toggle class="date-toggle header-filter-icon-button" matSuffix [for]="calendar" preventEnter></mat-datepicker-toggle>
-          <mat-datepicker #calendar></mat-datepicker>
-        </mat-form-field>
-      }
-  
-      <button mat-button (click)="onEnter(myForm.value)" [disabled]="myForm.value.filterValue == undefined" disableRipple>
-        Apply
-      </button>
-    </ng-form>
-  }
-</mat-menu>

package/src/table-builder/components/header-menu/header-menu.component.scss

@@ -1,96 +0,0 @@
-@use '@angular/material' as mat;
-:host{
-  @include mat.button-density(-3);
-  @include mat.icon-density(-3);
-}
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.menu-icon{
-  font-size: 16px;
-  line-height: 16px;
-  vertical-align: top;
-  height: 16px;
-  width: 16px;
-}
-.search-icon{
-  margin-right: 16px;
-  vertical-align: middle;
-  height: 24px;
-  color: rgba(0,0,0,.54);
-  font-size: 21px;
-  line-height: 1.125
-}
-.font{
-  font-size: 14px;
-}
-.filter-radio-button:first-of-type{
-  padding-left: 0;
-}
-.filter-radio-button{
-  padding: 10px 40px;
-  min-width: 110px;
-}
-.auto-width {
-  width: 260px;
-  margin: 5px;
-  display: block;
-  height: 55px;
-}
-
-
-.open-menu-icon-button{
-  height: 28px;
-  width: 28px;
-  padding: 6px;
-}
-.header-filter-icon-button {
-  height: 18px;
-  width: 18px;
-  font-size: 18px;
-  padding: 0;
-  margin: 0 2px;
-
-  ::ng-deep * {
-    line-height: initial;
-    font-size: initial;
-    height: 18px;
-    width: 18px;
-    font-size: 18px;
-    bottom: initial;
-
-  }
-
-  &.chosen-icon,
-  &.chosen-icon ::ng-deep * {
-    height: 22px;
-    width: 22px;
-    font-size: 22px;
-    color: green;
-  }
-}
-mat-icon.mat-icon.suffix-icons.underline{
-  height: 20px;
-  text-decoration: underline 0.1px solid;
-  .chosen-icon &{
-    height: 24px;
-  }
-}
-::ng-deep.mat-mdc-form-field-icon-prefix:has(.tb-header-prefix), .tb-header-prefix{
-  padding: 0;
-  flex-basis: 36%;
-}
-.tb-header-filter ::ng-deep.mat-mdc-form-field-subscript-wrapper{
-  line-height: 0;
-  &::before{
-    height: 0;
-  }
-}
-.date-toggle ::ng-deep svg{
-  position: absolute;
-  left: 0;
-  top: 0;
-}