@one-paragon/angular-utilities 1.2.18 → 1.3.0

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

@@ -1,146 +0,0 @@
-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 {
-  private transformCreator = inject(TransformCreator);
-  private table = inject<MatTable<any>>(MatTable);
-  private state = inject(TableStore);
-  private templateService = inject(TableTemplateService);
-  protected injector = inject(Injector);
-
-  @ViewChild(MatColumnDef) columnDef!: MatColumnDef;
-  @ViewChild('body') bodyTemplate!: TemplateRef<any>;
-  tableConfig = inject(TableBuilderConfigToken);
-  FieldType = FieldType;
-  filter!: Partial<FilterInfo>;
-  _metaData!: MetaData;
-  get metaData(){
-    return this._metaData;
-  }
-  set metaData(md: MetaData){
-    if(this.metaData && this.metaData.fieldType !== md.fieldType){
-      this._metaData = md;
-      this.initialSetUp();
-      this.furtherSetUp();
-    } else {
-      this._metaData = md;
-    }
-  }
-  customCell?: CustomCellDirective = undefined;
-  data$!: Observable<any[]>;
-
-  outerTemplate!: TemplateRef<any>;
-  innerTemplate!: TemplateRef<any>;
-  transform!: (o: any, ...args: any[])=> any ;
-
-  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)(), this.state.tableSettingsMinWidth());
-  })
-  ngOnInit() {
-    this.initialSetUp();
-  }
-
-  private viewInited = false;
-  ngAfterViewInit() {
-    this.furtherSetUp();
-    this.table.addColumnDef(this.columnDef);
-    this.onViewInit();
-    this.viewInited = true;
-  }
-  private onViewInit: () => void = () => {};
-  whenViewInited = (callback: () => void) => {
-    if(this.viewInited) {
-      callback();
-      return;
-    }
-    this.onViewInit = callback;
-  }
-
-  initialSetUp(){
-    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?.arrayDefaults?.arrayStyle
-      : undefined;
-  }
-
-  furtherSetUp(){
-    this.outerTemplate = this.getOuterTemplate();
-    this.innerTemplate = this.getInnerTemplate();
-    this.transform = this.transformCreator.createTransformer(this.metaData);
-  }
-
-  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

@@ -1,52 +0,0 @@
-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 function calculateUserDefinedWidth(userDefinedWidth: number | undefined){
-  if(userDefinedWidth) return {flex: `0 0 ${userDefinedWidth}px`, maxWidth: 'none' };
-  return undefined;
-}
-
-export function calculateTableDefinedWidth(metaData: MetaData, tableSettingsMinWidth: number | undefined){
-  if(metaData.width) return ({flex: `0 0 ${metaData.width}`, maxWidth: 'none'});
-  const style = { flex: `${1}`};
-  if(tableSettingsMinWidth) style['minWidth'] = `${tableSettingsMinWidth}px`;
-  return style;
-}
-
-export const calculateFlexWidth = (metaData: MetaData, userDefinedWidth: number | undefined, tableSettingsMinWidth: number | undefined) => {
-  const definedWidth = calculateWidths(metaData, userDefinedWidth);
-  if(definedWidth) return ({flex: `0 0 ${definedWidth}`, maxWidth: 'none' });
-  const style = { flex: `${1}`};
-  if(tableSettingsMinWidth) style['minWidth'] = `${tableSettingsMinWidth}px`;
-  return style;
-}
-
-export const columnStyles = (metaData: MetaData, userDefinedWidth: number | undefined, tableSettingsMinWidth?: number | undefined) => {
-  const fullMetaStyles = metaData.additional?.styles ?? {};
-  const userWidth = calculateUserDefinedWidth(userDefinedWidth) ?? {};
-  const tableWidth = userDefinedWidth ? {} : calculateTableDefinedWidth(metaData, tableSettingsMinWidth);
-  const styles: {
-    header: Dictionary<string>;
-    body: StylerStyle;
-    footer: Dictionary<string>;
-  } = {
-    header: { ...tableWidth, ...fullMetaStyles, ...metaData.additional?.columnPartStyles?.header, ...userWidth},
-    footer: { ...tableWidth, ...fullMetaStyles, ...metaData.additional?.columnPartStyles?.footer, ...userWidth},
-    body: { ...tableWidth, ...fullMetaStyles, ...metaData.additional?.columnPartStyles?.body, ...userWidth},
-  };
-  return styles;
-}
-
-export const calculateFlexWidths = (metaDatas: MetaData[], userDefinedWidths: Dictionary<number>, tableSettingsMinWidth: number | undefined) => {
-  return metaDataArrToDict(metaDatas, md => calculateFlexWidth(md, userDefinedWidths[md.key], tableSettingsMinWidth));
-}
-
-export const columnsStyles = (metaDatas: MetaData[], userDefinedWidths: Dictionary<number>) => {
-  return metaDataArrToDict(metaDatas, md => columnStyles(md, userDefinedWidths[md.key]));
-}

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

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

@@ -1,24 +0,0 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
-import { PartialFilter } from '../../classes/filter-info';
-import { FilterType, FilterTypes } 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 = FilterTypes;
-    @Input() info!: PartialFilter;
-    @Input() CurrentFilterType!: FilterType;
-}

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

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

@@ -1,22 +0,0 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
-import { PartialFilter } from '../../classes/filter-info';
-import { FilterType, FilterTypes } 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 = FilterTypes;
-  @Input() info!: PartialFilter;
-  @Input() CurrentFilterType!: FilterType;
-}

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

@@ -1,91 +0,0 @@
-@let filter = $filter();
-@let currentFilterType = $currentFilterType();
-
-@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()" (ngModelChange)="$enteredFilterType.set($event)" [panelWidth]="null">
-                  @for (kvp of filterTypes[filter.fieldType]; track kvp) {
-                    <mat-option [value]="kvp">
-                      {{ kvp }}
-                    </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

@@ -1,60 +0,0 @@
-.filter-name {
-  color: cornflowerblue;
-  margin: 10px 0;
-  font-weight: 600;
-  display: inline-block;
-}
-
-.switch {
-  display: inline-block;
-}
-
-.head-row {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-}
-.filter-row{
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-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{
-  font-weight: 700;
-}
-.date-toggle ::ng-deep svg{
-  position: absolute;
-  left: 0;
-  top: 0;
-}

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

@@ -1,87 +0,0 @@
-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 { FilterTypes } 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(FilterTypes.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

@@ -1,60 +0,0 @@
-import { Component, ChangeDetectionStrategy, inject, input, computed, output, signal } from '@angular/core';
-import { filterTypeMap, FilterInfo, PartialFilter } from '../../classes/filter-info';
-import { TableStore } from '../../classes/table-store';
-import { FilterType, FilterTypes } from '../../enums/filterTypes';
-import { FieldType } from '../../interfaces/report-def';
-import { MatCardModule } from '@angular/material/card';
-import { NgTemplateOutlet } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { 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, NumberFilterComponent,
-      DateFilterComponent, DateTimeFilterComponent, MatRadioModule, InFilterComponent, InListFilterComponent,
-      NgTemplateOutlet
-    ]
-})
-export class FilterComponent<T extends FieldType> {
-  protected state = inject(TableStore);
-
-  filterTypes = filterTypeMap;
-  FilterType = FilterTypes;
-  FieldType = FieldType;
-
-  $filter = input.required<PartialFilter, PartialFilter>({ 
-    alias: 'filter',
-    transform: (f) => ({ ...f })
-  });
-
-  close = output();
-
-  $enteredFilterType = signal<FilterType | undefined>(undefined);
-  $currentFilterType = computed(() =>  this.$enteredFilterType() || this.$filter()?.filterType);
-  $availableFilterTypes = computed(() => this.filterTypes[this.$filter()?.fieldType]);
-
-  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

@@ -1,93 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewContainerRef, inject } 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 {
-  private ref = inject(ChangeDetectorRef);
-  private tableState = inject(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);
-  }
-
-}