@one-paragon/angular-utilities 2.0.0-beta.2 → 2.0.0-beta.4

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

@@ -0,0 +1,330 @@
+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 { FunctionPipe } from '../../../utilities';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { 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, toSignal } 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,
+    imports: [
+    MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
+    MatTooltipModule, FunctionPipe,
+  ],
+})
+export class GenericTableComponent {
+  protected state = inject(TableStore);
+  private dataStore = inject(DataStore);
+  private viewContainer = inject(ViewContainerRef);
+  private transformCreator = inject(TransformCreator);
+  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 || (hasData && (metaFooter || hasSelectionColumn)) ? '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'));
+  $offsetIndex = computed(() => {
+    const virtualStart = this.dataStore.selectSignal(d => d.virtualEnds.start)();
+    const pageSize = this.state.$pageSize();
+    const currentPage = this.state.$currentPage();
+    if(this.$useVirtualScroll()){
+      return virtualStart;
+    }
+    if(this.$usePaginator()){
+      return pageSize * currentPage;
+    }
+    return 0;
+  });
+
+
+  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) return false;
+    return this.$selectableData()?.length === selected.length;
+  });
+  $masterToggleChecked = this.$isAllSelected;
+  $masterToggleIndeterminate = computed(() => {
+    this.$selectionChange();
+    return !!this.$selection()?.selected.length && !this.$masterToggleChecked()});
+
+  $selectableData = computed(() => {
+    if(this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator'){
+      const previousPageRecords = this.state.$currentPage() * this.state.$pageSize();
+      return this.$data().slice(previousPageRecords, previousPageRecords + this.state.$pageSize());
+    }else if(this.state.$viewType() === 'all' || this.state.$viewType() === 'virtual all'){
+      return this.$data();
+    }
+    return [];
+  });
+  #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) => {
+    if(val == undefined || val === 'null') return '';
+    try {
+      return this.transformCreator.createTransformer(this.$columns[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();
+  });
+
+  $footerHeight = this.state.selectSignal(s => {
+    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());
+}

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

@@ -0,0 +1,97 @@
+import { Component, ChangeDetectionStrategy, ElementRef, computed, inject, viewChild, input, 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';
+
+@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()) {<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 {
+  private state = inject(TableStore);
+  private data = inject(DataStore);
+  $paginator = viewChild(MatPaginator);
+
+  $dataLength = this.data.selectSignal(d => d.dataLen);
+  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();
+    if(!size) return;
+    untracked(() => this.state.setPageSize(size));
+  });
+  onMetaPageSizeEffect = effect(() => {
+    const paginator = this.$paginator();
+    if(!paginator) return;
+    const metaPageSize = this.state.$pageSize();
+    untracked(() => paginator._changePageSize(metaPageSize));
+  });
+  onDataLengthEffect = effect(() => {
+    const paginator = this.$paginator();
+    const dataLength = this.$dataLength();
+    untracked(() => {
+      if(paginator){
+        paginator.length = dataLength;
+      }
+    })
+  });
+  $collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)() || this.$showAll());
+  $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
+});
+
+
+interface CurrentPageDetails {
+  currentStart:number,
+  currentEnd:number,
+  total:number
+}

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

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

@@ -0,0 +1,12 @@
+<mat-chip-set>
+  <span class="tb-group-label">Group By:</span>
+  @for (groupByKey of tableStore.$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

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

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, 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);
+}

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

@@ -0,0 +1,105 @@
+@let metaData = $metaData();
+
+<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]="undefined"/>
+      }
+      @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]="undefined"/>
+          <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 [class]="{'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]="undefined" />
+          <span matPrefix class="tb-header-prefix">
+            <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.NumberLessThan)"
+            [class]="{'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)"
+            [class]="{'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)"
+            [class]="{'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]="undefined" >
+            <mat-radio-button class="filter-radio-button" (click)="boolField.control.setValue(true);" [value]="true">True</mat-radio-button><br/>
+            <mat-radio-button class="filter-radio-button" (click)="boolField.control.setValue(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)"
+              [class]="{'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)"
+              [class]="{'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)"
+              [class]="{'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]="undefined" [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>