@one-paragon/angular-utilities 0.3.10 → 0.3.11-beta.1

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

@@ -0,0 +1,117 @@
+import { Component, ChangeDetectionStrategy, TemplateRef, ViewChild, OnInit, Predicate, Injector, computed, inject } from '@angular/core';
+import { ArrayAdditional, FieldType, MetaData } from '../../interfaces/report-def';
+import { MatColumnDef, MatTable, MatTableModule } from '@angular/material/table';
+import { Observable } from 'rxjs';
+import { CustomCellDirective, ResizeColumnDirective } from '../../directives';
+import { FilterInfo } from '../../classes/filter-info';
+import { TransformCreator } from '../../services/transform-creator';
+import { TableStore } from '../../classes/table-store';
+import { map } from 'rxjs/operators';
+import { TableTemplateService } from '../../services/table-template-service';
+import { CdkDropList, CDK_DROP_LIST, DragDropModule } from '@angular/cdk/drag-drop';
+import { Dictionary } from '@ngrx/entity';
+import { AsyncPipe, CurrencyPipe, DecimalPipe, NgTemplateOutlet } from '@angular/common';
+import { ConditionalClassesDirective, FunctionPipe, SpaceCasePipe } from '../../../utilities';
+import { MatSortModule } from '@angular/material/sort';
+import { HeaderMenuComponent } from '../header-menu/header-menu.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { LetDirective } from '@ngrx/component';
+import { ColumnTotalPipe } from '../../pipes/column-total.pipe';
+import { StylerDirective } from '../../../utilities/directives/styler';
+import { columnStyles } from './column-helpers';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import { LinkInfo } from '../../services/link-creator.service';
+
+
+@Component({
+  templateUrl: './column-builder.component.html',
+  styleUrls: ['./column-builder.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    { provide: CDK_DROP_LIST, useExisting: CdkDropList },
+  ],
+  standalone: true,
+  imports: [
+    MatTableModule, NgTemplateOutlet, ResizeColumnDirective, FunctionPipe, StylerDirective,
+    ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, HeaderMenuComponent,
+    AsyncPipe, MatTooltipModule, LetDirective, ColumnTotalPipe, CurrencyPipe, DecimalPipe
+  ]
+})
+export class ColumnBuilderComponent implements OnInit {
+  @ViewChild(MatColumnDef) columnDef!: MatColumnDef;
+  @ViewChild('body') bodyTemplate!: TemplateRef<any>;
+  tableConfig = inject(TableBuilderConfigToken);
+  FieldType = FieldType;
+  filter!: Partial<FilterInfo>;
+  metaData!: MetaData;
+  customCell?: CustomCellDirective = undefined;
+  data$!: Observable<any[]>;
+
+  outerTemplate!: TemplateRef<any>;
+  innerTemplate!: TemplateRef<any>;
+  transform!: (o: any, ...args: any[])=> any ;
+
+  constructor(
+    private transformCreator: TransformCreator,
+    private table: MatTable<any>,
+    public state: TableStore,
+    private templateService: TableTemplateService,
+    protected injector: Injector,
+    ) { }
+
+  getInnerTemplate() :TemplateRef<any> {
+    if(this.metaData.template) return this.metaData.template;
+    if (this.customCell?.TemplateRef)  return this.customCell.TemplateRef;
+    return this.templateService.getTemplate(this.metaData);
+  }
+  showFilters$!: Observable<boolean>;
+  getOuterTemplate() {
+    return this.customCell?.columnDef?.cell?.template ?? this.bodyTemplate;
+  }
+  classes?: Dictionary<Predicate<any>>;
+  styles = computed(() => {
+    return columnStyles(this.metaData, this.state.getUserDefinedWidth(this.metaData.key)())
+  })
+  ngOnInit() {
+    if(this.metaData.fieldType === FieldType.Currency) {
+      this.classes = {
+        ['negative-currency']: (element) => element[this.metaData.key] < 0,
+        ...this.metaData.classes
+      }
+    }
+    else {
+      this.classes = this.metaData.classes;
+    }
+    this.filter = {key: this.metaData.key, fieldType: this.metaData.fieldType};
+
+    this.showFilters$ = this.state.tableSettings$.pipe(map(settings => !(settings.hideColumnHeaderFilters || this.metaData.noFilter)));
+    this.additional = this.metaData.fieldType === FieldType.Link
+      ? this.state.getLinkInfo(this.metaData)()
+      :
+      this.metaData.fieldType === FieldType.Array
+      ? (this.metaData.additional as ArrayAdditional)?.limit || this.tableConfig?.arrayInfo?.arrayStyle
+      : undefined;
+  }
+
+  ngAfterViewInit() {
+    this.outerTemplate = this.getOuterTemplate();
+    this.innerTemplate = this.getInnerTemplate();
+    this.transform = this.transformCreator.createTransformer(this.metaData);
+    this.table.addColumnDef(this.columnDef);
+  }
+
+  cellClicked(element: any, key: string) {
+    if(this.metaData.click) {
+      this.metaData.click(element,key);
+    }
+  }
+
+  getTooltip = (element: any) => {
+    if(typeof this.metaData.toolTip === 'string') {
+      return this.metaData.toolTip;
+    }
+    return this.metaData.toolTip!(element);
+  }
+
+  additional: LinkInfo | number | undefined;
+}

package/src/table-builder/components/column-builder/column-helpers.ts

@@ -0,0 +1,38 @@
+import { Dictionary } from "@ngrx/entity";
+import { MetaData, metaDataArrToDict } from "../../interfaces/report-def";
+import { StylerStyle } from "../../../utilities/directives/styler";
+
+export const calculateWidths = (metaData: MetaData, userDefinedWidth : number | undefined) => {
+  const definedWidth = (userDefinedWidth && `${userDefinedWidth}px`) || metaData.width;
+  return definedWidth;
+}
+
+export const calculateFlexWidth = (metaData: MetaData, userDefinedWidth : number | undefined) => {
+  const definedWidth = calculateWidths(metaData, userDefinedWidth);
+  return definedWidth ? ({flex: `0 0 ${definedWidth}`, maxWidth:'none'}) : ({flex: `${1}`});
+}
+
+export const columnStyles = (metaData: MetaData, userDefinedWidth : number | undefined) => {
+  const fullMetaStyles = metaData.additional?.styles ?? {};
+  const flexWidth = calculateFlexWidth(metaData, userDefinedWidth);
+  const styles: AllStyles = {
+    header : {...fullMetaStyles,...metaData.additional?.columnPartStyles?.header, ...flexWidth},
+    footer: {...fullMetaStyles,...metaData.additional?.columnPartStyles?.footer, ...flexWidth},
+    body: {...fullMetaStyles,...metaData.additional?.columnPartStyles?.body, ...flexWidth},
+  };
+  return styles;
+}
+
+export const calculateFlexWidths = (metaDatas: MetaData[], userDefinedWidths : Dictionary<number>) => {
+  return metaDataArrToDict(metaDatas, md => calculateFlexWidth(md, userDefinedWidths[md.key]));
+}
+
+export const columnsStyles = (metaDatas: MetaData[], userDefinedWidths : Dictionary<number>) => {
+  return metaDataArrToDict(metaDatas, md => columnStyles(md, userDefinedWidths[md.key]));
+}
+
+interface AllStyles {
+  header: Dictionary<string>;
+  body: StylerStyle;
+  footer: Dictionary<string>;
+}

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

@@ -0,0 +1,23 @@
+@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {
+  <mat-form-field>
+    <input matInput name="filterValue" [ngModel]="info.filterValue" [matDatepicker]="cal"/>
+    <mat-datepicker-toggle class="small-button date-toggle" matSuffix [for]="cal" preventEnter />
+    <mat-datepicker #cal />
+  </mat-form-field>
+}
+@if(CurrentFilterType === FilterType.DateBetween){
+  <ng-container ngModelGroup="filterValue">
+    <mat-form-field class="my-filter" >
+      <input matInput name="Start" [ngModel]="info.filterValue?.Start"  placeholder="From" [matDatepicker]="fromVal"
+          (click)="fromVal.open()"/>
+      <mat-datepicker-toggle matSuffix class="small-button date-toggle" [for]="fromVal" preventEnter />
+      <mat-datepicker #fromVal></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field>
+      <input matInput name="End" [ngModel]="info.filterValue?.End"  placeholder="To" [matDatepicker]="toVal" (click)="toVal.open()"/>
+      <mat-datepicker-toggle matSuffix class="small-button date-toggle" [for]="toVal" preventEnter />
+      <mat-datepicker #toVal />
+    </mat-form-field>
+  </ng-container>
+}
+

package/src/table-builder/components/date-filter/date-filter.component.ts

@@ -0,0 +1,24 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { PartialFilter } from '../../classes/filter-info';
+import { FilterType } from '../../enums/filterTypes';
+import { ControlContainer, FormsModule, NgForm } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { PreventEnterDirective } from '../../../utilities';
+
+@Component({
+    selector: 'tb-date-filter',
+    templateUrl: './date-filter.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    styleUrls: ['../filter/filter.component.scss'],
+    viewProviders: [{provide: ControlContainer, useExisting: NgForm}],
+    standalone: true,
+    imports: [
+        MatInputModule, FormsModule, MatDatepickerModule, PreventEnterDirective
+    ]
+})
+export class DateFilterComponent {
+    FilterType = FilterType;
+    @Input() info!: PartialFilter;
+    @Input() CurrentFilterType!: FilterType;
+}

package/src/table-builder/components/date-time-filter/date-time-filter.component.html

@@ -0,0 +1,9 @@
+@if(CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull){
+  <input type="datetime-local" [ngModel]="info.filterValue" preventEnter name="filterValue" class="op-date-time-input"/>
+}
+@if(CurrentFilterType === FilterType.DateTimeBetween){
+  <ng-container ngModelGroup="filterValue">
+    <input type="datetime-local" [ngModel]="info.filterValue?.Start" preventEnter name="Start" class="op-date-time-input"/>
+    <input type="datetime-local" [ngModel]="info.filterValue?.End" preventEnter name="End" class="op-date-time-input"/>
+  </ng-container>
+}

package/src/table-builder/components/date-time-filter/date-time-filter.component.ts

@@ -0,0 +1,22 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { PartialFilter } from '../../classes/filter-info';
+import { FilterType } from '../../enums/filterTypes';
+import { ControlContainer, FormsModule, NgForm } from '@angular/forms';
+import { PreventEnterDirective } from '../../../utilities';
+
+@Component({
+  selector: 'tb-date-time-filter',
+  templateUrl: './date-time-filter.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['../filter/filter.component.scss'],
+  viewProviders: [{provide: ControlContainer, useExisting: NgForm}],
+  standalone: true,
+  imports: [
+    FormsModule, PreventEnterDirective
+  ]
+})
+export class DateTimeFilterComponent {
+  FilterType = FilterType;
+  @Input() info!: PartialFilter;
+  @Input() CurrentFilterType!: FilterType;
+}

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

@@ -0,0 +1,88 @@
+@if (filter) {
+<mat-card appearance="outlined" class="filter-card">
+  <mat-card-content>
+    <form #form="ngForm"  (keydown.enter)="onEnter(form.value,$event)" (keydown.escape)="close.emit()">
+      <input type="hidden" name="filterId" [ngModel]="filter.filterId" />
+      <input type="hidden" name="key" [ngModel]="filter.key" />
+      <input type="hidden" name="fieldType" [ngModel]="filter.fieldType" />
+      <div class="head-row" >
+        <h4 class="filter-name">{{(filter.key | spaceCase)}} Filter</h4>
+        <button class="cancel-button small-button" color="primary" mat-icon-button (click)="close.emit();" type="button"
+            matTooltip="Close">
+          <mat-icon class="cancel-button" color="primary">close</mat-icon>
+        </button>
+      </div>
+      <div class="filter-row">
+          <div class="inline">
+            <mat-form-field class="my-filter" >
+                <mat-select  placeholder="Select Filter Type" name="filterType"  [(ngModel)]="currentFilterType" [panelWidth]="null">
+                  @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {
+                    <mat-option [value]="kvp.value">
+                      {{ kvp.key }}
+                    </mat-option>
+                  }
+                </mat-select>
+            </mat-form-field>
+          </div>
+          @if(filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||
+          filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {
+            <ng-container *ngTemplateOutlet="String" />
+          }
+          @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency){
+            <tb-number-filter [info]="filter" [CurrentFilterType]="currentFilterType!" />
+          }
+          @else if(filter.fieldType === FieldType.Boolean){
+            <ng-container *ngTemplateOutlet="Boolean" />
+          }
+          @else if(filter.fieldType === FieldType.Date){
+            <tb-date-filter [info]="filter" [CurrentFilterType]="currentFilterType!" />
+          }
+          @else if(filter.fieldType === FieldType.DateTime){
+            <tb-date-time-filter [info]="filter" [CurrentFilterType]="currentFilterType!" />
+          }
+          @else if(filter.fieldType === FieldType.Enum){
+            <ng-container *ngTemplateOutlet="Enum" />
+          }
+
+          @if(currentFilterType === FilterType.IsNull){
+            <mat-radio-group name="filterValue" [ngModel]="filter.filterValue">
+              <mat-radio-button [value]="true">True</mat-radio-button>
+              <mat-radio-button [value]="false">False</mat-radio-button>
+            </mat-radio-group>
+          }
+      </div>
+      <button mat-button (click)="state.addFilter(form.value)" disableRipple [disabled]="form.value.filterValue==undefined || !form.value.filterType">
+        Apply
+      </button>
+    
+    
+    <ng-template #String>
+      @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In){
+        <mat-form-field class="my-filter">
+          <input matInput name="filterValue" [ngModel]="filter.filterValue" />
+        </mat-form-field>
+      } @else if(currentFilterType === FilterType.In) {
+        <lib-in-filter [type]="FieldType.String" name='filterValue' [(ngModel)]="filter.filterValue" />
+      }
+    </ng-template>
+    
+    <ng-template #Boolean >
+      @if(currentFilterType === FilterType.BooleanEquals){
+        <div class="switch">
+          <mat-radio-group name="filterValue" [ngModel]="filter.filterValue" >
+            <mat-radio-button [value]="true" preventEnter>True</mat-radio-button>
+            <mat-radio-button [value]="false" preventEnter>False</mat-radio-button>
+          </mat-radio-group>
+        </div>
+      }
+    </ng-template>
+    <ng-template #Enum>
+      @if(currentFilterType === FilterType.In){
+        <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>
+
+      }
+    </ng-template>
+    </form>
+  </mat-card-content>
+</mat-card>
+}

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

@@ -0,0 +1,64 @@
+.filter-name {
+  color: cornflowerblue;
+  margin: 10px 0;
+  font-weight: 600;
+  display: inline-block;
+}
+
+.switch {
+  display: inline-block;
+}
+
+.my-filter {
+  margin-right: 15px;
+}
+
+.cancel-button {
+  float: right;
+}
+
+.head-row {
+  width: 100%;
+}
+.filter-row{
+  width: fit-content;
+}
+mat-card.filter-card{
+  &::ng-deep mat-form-field{
+    width: 150px;
+  }
+  &::ng-deep.mat-mdc-form-field-subscript-wrapper{
+    line-height: 0;
+    &::before{
+      height: 0;
+    }
+  }
+}
+.inline{
+  display: inline-block;
+}
+.small-button {
+  height: 18px;
+  width: 18px;
+  font-size: 18px;
+  padding: 0;
+  margin: 0;
+  ::ng-deep * {
+    line-height: initial;
+    font-size: initial;
+    height: 18px;
+    width: 18px;
+    font-size: 18px;
+    bottom: initial;
+
+  }
+}
+.cancel-button{
+  float: right;
+  font-weight: 700;
+}
+.date-toggle ::ng-deep svg{
+  position: absolute;
+  left: 0;
+  top: 0;
+}

package/src/table-builder/components/filter/filter.component.spec.ts

@@ -0,0 +1,87 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { FilterComponent } from '../filter/filter.component';
+import { CommonModule, DatePipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FieldType } from '../../interfaces/report-def';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { SpaceCasePipe } from '../../../utilities/pipes/space-case.pipes';
+import { DateFilterComponent } from '../date-filter/date-filter.component';
+import { FilterType } from '../../enums/filterTypes';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatButtonHarness} from '@angular/material/button/testing';
+import { MatSelectHarness } from '@angular/material/select/testing';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { OptionHarnessFilters } from '@angular/material/core/testing';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import { provideMockStore } from '@ngrx/store/testing';
+import { isObservable } from 'rxjs';
+
+function fillInput<T>(fixture: ComponentFixture<T>, name: string, value: string) {
+  const input = fixture.debugElement.query(By.css('input[name=' + name + ']')).nativeElement as HTMLInputElement;
+  input.value = value;
+  input.dispatchEvent(new Event('input'));
+  fixture.detectChanges();
+}
+
+async function setSelect(loader: HarnessLoader, filter: Pick<OptionHarnessFilters, 'isSelected' | 'selector' | 'text'>) {
+  const select = await loader.getHarness<MatSelectHarness>(MatSelectHarness);
+  await select.open();
+  await select.clickOptions(filter);
+}
+
+describe('filter component', () => {
+
+  beforeEach(() => {
+
+    TestBed.configureTestingModule({
+      declarations: [FilterComponent, DatePipe, SpaceCasePipe, DateFilterComponent],
+      providers: [
+        DatePipe,
+        { provide : TableBuilderConfigToken , useValue: {defaultTableState: { }}},
+        provideMockStore({ initialState: {} }),
+      ],
+      imports: [
+        NoopAnimationsModule,
+        CommonModule,
+        FormsModule,
+      ]
+    })
+      .compileComponents();
+  });
+
+  it('filter info object should be populated', async () => {
+    const fixture = TestBed.createComponent(FilterComponent);
+    const component = fixture.componentInstance;
+
+    const originFunc = component.state.addFilter;
+
+    const spy = spyOn(component.state, 'addFilter');
+
+
+
+    spy.and.callFake( a => {
+      if(isObservable(a)) {
+        throw new Error('Observable not supported');
+      } else {
+        expect(a.filterType).toBe(FilterType.StringContains);
+        expect(a.filterValue).toBe('a');
+      }
+      return originFunc(a);
+    });
+
+    component.filter = {
+      key: 'name',
+      fieldType: FieldType.String
+    };
+
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+    const button = await loader.getHarness<MatButtonHarness>(MatButtonHarness.with( {text: 'Apply'}));
+
+    await setSelect(loader, {text: 'Contains'});
+    fillInput(fixture, 'filterValue', 'a');
+    await button.click();
+
+    expect(spy).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,55 @@
+import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
+import { filterTypeMap, FilterInfo, PartialFilter } from '../../classes/filter-info';
+import { TableStore } from '../../classes/table-store';
+import { FilterType } from '../../enums/filterTypes';
+import { FieldType } from '../../interfaces/report-def';
+import { MatCardModule } from '@angular/material/card';
+import { KeyValuePipe, NgTemplateOutlet } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { PreventEnterDirective, SpaceCasePipe } from '../../../utilities';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { NumberFilterComponent } from '../number-filter/number-filter.component';
+import { DateFilterComponent } from '../date-filter/date-filter.component';
+import { DateTimeFilterComponent } from '../date-time-filter/date-time-filter.component';
+import { MatRadioModule } from '@angular/material/radio';
+import { InFilterComponent } from '../in-filter/in-filter.component';
+import { InListFilterComponent } from './in-list/in-list-filter.component';
+
+@Component({
+    selector: 'tb-filter',
+    templateUrl: './filter.component.html',
+    styleUrls: ['./filter.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+      MatCardModule, FormsModule, SpaceCasePipe, MatButtonModule, MatTooltipModule, MatIconModule,
+      MatInputModule, MatSelectModule, KeyValuePipe, NumberFilterComponent,
+      DateFilterComponent, DateTimeFilterComponent, MatRadioModule, InFilterComponent, InListFilterComponent,
+      PreventEnterDirective, NgTemplateOutlet
+    ]
+})
+export class FilterComponent {
+  filterTypes = filterTypeMap;
+  FilterType = FilterType;
+  FieldType = FieldType;
+  @Input() filter!: PartialFilter;
+  @Output() close = new EventEmitter();
+  currentFilterType?: FilterType;
+  constructor( public state: TableStore) { }
+
+  ngOnInit() {
+    this.currentFilterType = this.filter.filterType;
+    this.filter = {...this.filter}
+  }
+  onEnter(filter: FilterInfo, event: any) {
+    event.preventDefault();
+    if (filter.filterValue != null && filter.filterType) {
+      this.state.addFilter(filter);
+      this.close.emit();
+    }
+  }
+}

package/src/table-builder/components/filter/in-list/in-list-filter.component.ts

@@ -0,0 +1,92 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewContainerRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+import { TableStore } from '../../../classes/table-store';
+import { Dictionary } from '../../../interfaces/dictionary';
+import { FieldType, MetaData } from '../../../interfaces/report-def';
+import { AsyncPipe, KeyValuePipe } from '@angular/common';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { SpaceCasePipe, StopPropagationDirective } from '../../../../utilities';
+
+
+@Component({
+  selector: 'tb-in-list-filter , [tb-in-list-filter]',
+  template: `
+  @for (item of keyValues$ | async| keyvalue; track item.key) {
+    <div>
+      <mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
+        {{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
+      </mat-checkbox>
+    </div>
+  }
+
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InListFilterComponent,
+    multi: true
+  }],
+  standalone: true,
+  imports: [
+    AsyncPipe, KeyValuePipe, MatCheckboxModule, StopPropagationDirective, SpaceCasePipe
+  ]
+})
+export class InListFilterComponent implements ControlValueAccessor {
+
+  constructor(private ref: ChangeDetectorRef, private tableState: TableStore ) {}
+  value: string[] = [];
+  FieldType = FieldType;
+  writeValue(obj: string[]): void {
+    this.value = obj;
+
+    if(this.value) {
+      this.selectedKeys = this.value.map( f => f );
+    }
+    this.ref.markForCheck();
+  }
+
+  onChange = (_: any) => { };
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  onTouched = () => { };
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  @Input() key!: string;
+
+  keyValues$! : Observable<Dictionary<string>>;
+  selectedKeys : string[] = [];
+  metaData!: MetaData;
+
+  ngOnInit() {
+    this.keyValues$ = this.tableState.getMetaData$(this.key).pipe(
+      tap(metaData => this.metaData = metaData),
+      map( metaData => {
+        if(metaData.additional?.filterOptions?.filterableValues ) {
+          return  metaData.additional.filterOptions.filterableValues.reduce( (prev: any, cur)=> { prev[cur] = cur; return prev }, {});
+        } else {
+          if(metaData.fieldType === FieldType.Enum ) {
+            return metaData.additional!.enumMap;
+          }
+        }
+        return {};
+      })
+    );
+  }
+
+  selectFilterChanged($event, val) {
+    if($event.checked) {
+      this.selectedKeys = [...this.selectedKeys, val];
+    } else {
+      this.selectedKeys = this.selectedKeys.filter( item => item !== val);
+    }
+
+    this.value = this.selectedKeys;
+    this.onChange(this.value);
+  }
+
+}