@one-paragon/angular-utilities 0.1.19 → 0.1.21

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

@@ -0,0 +1,221 @@
+import {
+  Component,
+  ViewChild,
+  Input,
+  ChangeDetectionStrategy,
+  Output,
+  SimpleChanges,
+  OnInit,
+  QueryList,
+  ViewContainerRef,
+  ElementRef,
+  Injector,
+  TemplateRef,
+} from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { MatRowDef, MatTable } from '@angular/material/table';
+import { Observable } from 'rxjs';
+import { SelectionModel } from '@angular/cdk/collections';
+import { TableStore } from '../../classes/table-store';
+import { tap, map } from 'rxjs/operators';
+import { ColumnBuilderComponent } from '../column-builder/column-builder.component';
+import { Dictionary } from '../../interfaces/dictionary';
+import { GenericTableDataSource } from '../../classes/GenericTableDataSource';
+import { FieldType } from '../../interfaces/report-def';
+import { previousAndCurrent } from '../../../rxjs/rxjs-operators';
+import { ColumnInfo } from '../../interfaces/ColumnInfo';
+import { CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
+import { Group } from '../../classes/TableState';
+
+@Component({
+  selector: 'tb-generic-table',
+  templateUrl: './generic-table.component.html',
+  styleUrls: ['./generic-table.component.scss','../../styles/collapser.styles.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GenericTableComponent implements OnInit {
+
+
+  drop(event: CdkDragDrop<string[]>) {
+    this.state.setUserDefinedOrder({newOrder:event.currentIndex,oldOrder:event.previousIndex})
+  }
+
+  @Input() data$!: Observable<any[]>;
+  @Input() IndexColumn = false;
+  @Input() SelectionColumn = false;
+  @Input() trackBy!: string;
+  @Input() rows!: QueryList<MatRowDef<any>>;
+  @Input() isSticky = false;
+  @Input() columnBuilders!: ColumnBuilderComponent[];
+  @Input() columnInfos!: Observable<ColumnInfo[]>;
+  @Input() groupHeaderTemplate!: TemplateRef<any>;
+
+  private _disableSort!: boolean;
+  @Input() set disableSort(val: boolean) {
+    this._disableSort = val;
+    if (val) {
+      if (this.dataSource?.sort) {
+        this.dataSource.sort = null;
+      }
+    } else {
+      if (this.dataSource && !this.dataSource.sort) {
+        this.dataSource.sort = this.sort;
+      }
+    }
+  }
+  get disableSort() { return this._disableSort; }
+
+  @ViewChild(MatTable, { static: true }) table!: MatTable<any>;
+  @ViewChild(CdkDropList, { static: true }) dropList!: CdkDropList;
+  @ViewChild('table', {read: ElementRef}) tableElRef!: ElementRef;
+  currentColumns!: string[];
+  dataSource!: GenericTableDataSource<any>;
+  keys: string [] = [];
+  injector: Injector;
+  rowDefArr :MatRowDef<any>[]= [];
+  columns:string [] = [];
+  myColumns: Dictionary<ColumnBuilderComponent> = {};
+  showHeader$!: Observable<boolean>;
+
+  constructor(
+    private sort: MatSort,
+    public state: TableStore,
+    private viewContainer: ViewContainerRef,
+    injector: Injector,
+    ) {
+
+    this.injector = Injector.create({ providers: [
+      {provide: MatTable, useFactory: ()=> {return this.table} },
+      {provide: CdkDropList, useFactory: ()=> {return this.dropList} },
+    ], parent: injector});
+  }
+
+  trackByFunction = (index:number, item: any) => {
+    if (!item) {
+      return null;
+    }
+    if (this.trackBy) {
+      return item[this.trackBy];
+    }
+    return item;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.rows && this.rows && this.myColumns.length) {
+      this.initializeRowDefs([...this.rows]);
+    }
+  }
+
+  ngOnInit() {
+    if (this.SelectionColumn) {
+      this.columns.push('select');
+    }
+
+    if (this.IndexColumn) {
+     this.columns.push('index');
+    }
+
+    this.createDataSource();
+
+    this.state.on(this.columnInfos, columns => {
+      columns.forEach(ci => this.addMetaData(ci))
+    });
+
+    this.initializeRowDefs([...this.rows]);
+
+    this.state.on(this.state.displayedColumns$, keys => {
+      this.keys = [...this.columns, ...keys];
+      this.rowDefArr?.forEach(row => row.columns = this.keys)
+    });
+
+    this.showHeader$ = this.state.tableSettings$.pipe(map(settings => !(settings.hideColumnHeader)));
+  }
+
+  createDataSource() {
+    this.dataSource = new GenericTableDataSource(
+      this.data$.pipe(tap((d) => this.selection.clear() ))
+    );
+
+    if (!this.disableSort) {
+      this.dataSource.sort = this.sort;
+    }
+  }
+
+  isGroupHeader(_: number, row: { isGroupHeader: boolean }) {
+    return row.isGroupHeader;
+  }
+
+  isGroupFooter(_: number, row: { isGroupFooter: boolean }) {
+    return row.isGroupFooter;
+  }
+
+  updateGroup(group: Group): void {
+    this.state.updateGroup({
+      ...group,
+      isExpanded: !group.isExpanded
+    });
+  }
+
+  addMetaData(column: ColumnInfo) {
+    let 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[column.metaData.key] = component.instance;
+    }
+  }
+
+  initializeRowDefs = (defs:MatRowDef<any>[])=>{
+    this.rowDefArr.forEach(r=>this.table.removeRowDef(r));
+    this.rowDefArr = defs;
+    defs.forEach(r => {
+      r.columns = this.columns.concat(Object.values(this.myColumns).filter(c => c.metaData.fieldType !== FieldType.Hidden).map(c => c.metaData.key));
+      if (this.table) {
+        this.table.addRowDef(r);
+      }
+    });
+  }
+
+  selection : SelectionModel<any> = new SelectionModel<any>(true, []);
+  @Output() selection$: Observable<any> = this.selection.changed;
+  masterToggleChecked$ = this.selection$.pipe(map(()=>this.selection.hasValue() && this.isAllSelected()));
+  masterToggleIndeterminate$ = this.selection$.pipe(map(()=>this.selection.hasValue() && !this.isAllSelected()));
+
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle() {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.selection.select(...this.dataSource.data);
+  }
+
+  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;
+      }
+    })
+  );
+
+  collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
+}

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

@@ -0,0 +1,89 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewChild,
+  Input,
+  ElementRef,
+  AfterViewInit,
+  OnInit,
+} from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { asyncScheduler, merge, Observable } from 'rxjs';
+import { delay, distinct, distinctUntilKeyChanged, map } from 'rxjs/operators';
+import { GenericTableDataSource } from '../../classes/GenericTableDataSource';
+import { TableStore } from '../../classes/table-store';
+@Component({
+  selector: 'tb-paginator',
+  template: `
+  <div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}" *ngIf="currentPageData$ | async as pageData">
+    {{pageData.currentStart}} - {{pageData.currentEnd}} of {{pageData.total}}
+  </div>
+  <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
+    [ngClass]="{'hide' : (collapseFooter$ | async)}">
+  </mat-paginator>
+  `,
+  styleUrls: ['./generic-table.component.scss','../../styles/collapser.styles.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PaginatorComponent implements OnInit, AfterViewInit{
+  @Input() dataSource! : GenericTableDataSource<any>;
+  @Input() tableElRef! : ElementRef
+  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
+  currentPageData$!: Observable<CurrentPageDetails>;
+  collapseFooter$!:Observable<boolean>;
+  @Input() data$!: Observable<any[]>;
+
+  constructor(private state : TableStore){}
+  ngOnInit(){
+    this.dataSource.paginator = this.paginator;
+    this.ourPageEvent = true;
+    this.state.on(metaDataPageSizeChange(this.state), setPaginatorPageSize(this.paginator));
+    this.state.setPageSize(onPagiantorPageSizeChange(this.paginator));
+    this.collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
+
+  }
+  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;
+
+}
+
+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.pageSize),distinct());
+
+const setPaginatorPageSize = (paginator:MatPaginator) => (pageSize: number) =>
+  paginator._changePageSize(pageSize);
+
+const onPagiantorPageSizeChange = (paginator: MatPaginator) => paginator.page.pipe(map( e => e.pageSize ), distinct());

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,10 @@
+<mat-chip-set *ngrxLet="tableStore.groupByKeys$ as groupByKeys">
+  <span *ngIf="groupByKeys?.length" class="tb-group-label">Group By:</span>
+  <ng-container *ngFor="let groupByKey of groupByKeys; let i = index;">
+    <mat-icon *ngIf="i > 0" class="nested-arrow">arrow_right</mat-icon>
+    <mat-chip (removed)="tableStore.removeGroupByKey(groupByKey)">
+      {{groupByKey | spaceCase}}
+      <mat-icon matChipRemove>cancel</mat-icon>
+    </mat-chip>
+  </ng-container>
+</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,16 @@
+import { Component, OnInit } from '@angular/core';
+import { TableStore } from '../../classes/table-store';
+
+@Component({
+  selector: 'group-by-list',
+  templateUrl: './group-by-list.component.html',
+  styleUrls: ['./group-by-list.component.css']
+})
+export class GroupByListComponent implements OnInit {
+
+  constructor(public tableStore: TableStore) { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,117 @@
+<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" >
+  <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>
+  <ng-form #myForm="ngForm" [ngSwitch]="true" (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" />
+
+      <ng-container *ngIf="(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter">
+          <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' >
+          </tb-in-list-filter>
+      </ng-container>
+
+
+      <ng-template #defaultFilter>
+        <ng-container *ngSwitchCase="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>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="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>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="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>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="metaData.fieldType === FieldType.Date">
+          <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>
+        </ng-container>
+      </ng-template>
+
+    <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

@@ -0,0 +1,92 @@
+
+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;
+}

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

@@ -0,0 +1,81 @@
+import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core';
+import { FieldType, MetaData } from '../../interfaces/report-def';
+import { FilterType } from '../../enums/filterTypes';
+import { FilterInfo } from '../../classes/filter-info';
+import { TableStore } from '../../classes/table-store';
+import { MatMenuTrigger } from '@angular/material/menu';
+
+@Component({
+  selector: 'tb-header-menu',
+  templateUrl: './header-menu.component.html',
+  styleUrls: ['./header-menu.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HeaderMenuComponent {
+  FieldType = FieldType;
+  FilterType = FilterType;
+  myFilterType!: FilterType;
+  myFilterValue: any;
+
+  @Input() filter!: Partial<FilterInfo>;
+
+  @Input() metaData!: MetaData;
+  @ViewChild(MatMenuTrigger) trigger!: MatMenuTrigger;
+  constructor( public tableState: TableStore) {}
+
+  hideField(key: string) {
+    this.tableState.hideColumn(key);
+  }
+
+  ngOnInit() {
+    this.resetFilterType();
+  }
+
+  resetFilterType() {
+    if(this.metaData.additional?.filterOptions?.filterableValues) {
+      this.myFilterType = FilterType.In;
+      return;
+    }
+    switch (this.metaData.fieldType) {
+      case FieldType.String:
+      case FieldType.Link:
+      case FieldType.PhoneNumber:
+      case FieldType.Array:
+      case FieldType.Unknown:
+        this.myFilterType = FilterType.StringContains;
+        break;
+      case FieldType.Currency:
+      case FieldType.Number:
+        this.myFilterType = FilterType.NumberEquals;
+        break;
+      case FieldType.Boolean:
+          this.myFilterType = FilterType.BooleanEquals;
+          break;
+      case FieldType.Date:
+          this.myFilterType = FilterType.DateIsOn;
+          break;
+      case FieldType.Enum:
+        this.myFilterType = FilterType.In;
+        break;
+    }
+  }
+
+  setStringFilterType() {
+    this.myFilterType = this.myFilterType === FilterType.StringContains ? FilterType.StringDoesNotContain : FilterType.StringContains;
+  }
+
+  setFilterType(filterType: FilterType) {
+    if (filterType === this.myFilterType) {
+      this.resetFilterType();
+    } else {
+      this.myFilterType = filterType;
+    }
+  }
+
+  onEnter(filter: FilterInfo) {
+    if (filter.filterValue != undefined && filter.filterType) {
+      this.tableState.addFilter(filter);
+      this.trigger.closeMenu();
+    }
+  }
+}

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

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

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

@@ -0,0 +1,13 @@
+<div class=inline>
+    <div *ngFor="let val of value; index as i">
+      <input *ngIf="type === FieldType.Number || type === FieldType.Currency"
+        [ngModel]="val" (ngModelChange)="onValueChange(i,$event)"
+        [readonly]="i+1 < value.length" type="number" [ngModelOptions]="{standalone:true}" [autoFocus]="i === value.length - 1"/>
+      <input *ngIf="type !== FieldType.Number && type !== FieldType.Currency"
+        [ngModel]="val" (ngModelChange)="onValueChange(i,$event)"
+        [readonly]="i+1 < value.length" type="string" [ngModelOptions]="{standalone:true}"
+        #input [autoFocus]="i === value.length - 1" />
+      <button [disabled]="value.length <= 1" (click)="removeInput(i)">-</button>
+      <button *ngIf="i === value.length - 1" [disabled]="val == undefined || val === ''" (click)="addInput()">+</button>
+    </div>
+</div>