@one-paragon/angular-utilities 0.1.21 → 0.1.23

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

@@ -1,66 +0,0 @@
-<ng-container [matColumnDef]="metaData.key" *ngrxLet="styles$ as styles" >
-
-  <ng-template #body let-element='element' >
-      <mat-cell  [matTooltip]="metaData.toolTip ?? ''"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' [class.group-footer]="element.isGroupFooter" (click)='cellClicked(element, metaData.key)' >
-        <ng-container *ngTemplateOutlet="innerTemplate;context: {metaData: metaData, element: element, transform: transform }; Injector: injector">
-        </ng-container>
-    </mat-cell>
-
-  </ng-template>
-
-  <ng-template matHeaderCellDef #myHeader>
-
-    <ng-container *ngIf="customCell?.columnDef?.headerCell;else header;">
-      <ng-container *ngTemplateOutlet="customCell.columnDef.headerCell.template; context: {metaData: metaData, styles:  styles.header} ">
-      </ng-container>
-    </ng-container>
-
-    <ng-template #header>
-
-      <mat-header-cell  cdkDrag [styler]='styles.header' [resizeColumn]="true" [key]="metaData.key"   class="column-head drag-header" #headref >
-        <div class="header-container" cdkDragHandle>
-          <div *ngIf="!metaData._internalNotUserDefined || !customCell?.columnDef?.cell ; else headerWithoutMenu" mat-sort-header style="width: 100%">
-            {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
-          </div>
-          <ng-template #headerWithoutMenu >
-            <div *ngIf="metaData._internalNotUserDefined;" style="width: 100%">
-              {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
-            </div>
-          </ng-template>
-          <tb-header-menu
-            *ngIf="(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);" #menu [metaData]='metaData' [filter]='filter' >
-          </tb-header-menu>
-        </div>
-      </mat-header-cell>
-
-    </ng-template>
-
-  </ng-template>
-
-
-  <ng-container *matCellDef="let element;">
-    <ng-container *ngTemplateOutlet="outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }">
-    </ng-container>
-  </ng-container>
-
-  <ng-template matFooterCellDef>
-    <ng-container *ngIf="customCell?.columnDef?.footerCell;else footer">
-      <ng-container
-        *ngTemplateOutlet="customCell.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }">
-      </ng-container>
-    </ng-container>
-
-    <ng-template #footer>
-      <mat-footer-cell  [styler]='styles.footer' *ngrxLet="data$ as data">
-        <span *ngIf="data?.length && metaData.additional?.footer" [ngSwitch]="metaData.fieldType" class="bold">
-          <span *ngSwitchCase="FieldType.Currency">
-            {{ data | columnTotal: metaData | currency }}
-          </span>
-          <span *ngSwitchCase="FieldType.Number">
-            {{ data | columnTotal: metaData | number }}
-          </span>
-        </span>
-      </mat-footer-cell>
-    </ng-template>
-  </ng-template>
-</ng-container>

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

@@ -1,43 +0,0 @@
-.header-container {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    align-items: center;
-}
-
-.negative-currency {
-  color: red;
-}
-
-.column-head{
-  position: relative;
-}
-
-.bold,
-.group-footer {
-  font-weight: 900;
-}
-
-.cdk-drag-preview {
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-  opacity: 33%;
-  border-right-width: 0px;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-.drag-handle{
-  color:lightblue;
-  cursor: move;
-  margin-right: 9px;
-}
-
-

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

@@ -1,51 +0,0 @@
-import { ComponentFixture, ComponentFixtureAutoDetect, TestBed, waitForAsync } from '@angular/core/testing';
-import { ColumnBuilderComponent } from './column-builder.component';
-import { FieldType } from '../../interfaces/report-def';
-import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
-import { provideMockStore } from '@ngrx/store/testing';
-import { MaterialModule } from '../../material.module';
-import { SpaceCasePipe } from '../../../utilities/pipes/space-case.pipes';
-import { CurrencyPipe, DatePipe } from '@angular/common';
-import { PhoneNumberPipe } from 'projects/angular-utilities/src/utilities';
-import { MatTable } from '@angular/material/table';
-
-const initialState = {fullTableState: {
-  'test-id': {
-    metaData: [],
-    hiddenKeys: [],
-    pageSize: 10,
-    initialized : true ,
-  }
-}};
-
-
-describe('ColumnBuilderComponent', () => {
-  let component: ColumnBuilderComponent;
-  let fixture: ComponentFixture<ColumnBuilderComponent>;
-
-  beforeEach(waitForAsync(() => {
-     TestBed.configureTestingModule({
-      declarations: [ ColumnBuilderComponent, SpaceCasePipe ],
-      providers: [
-        { provide : TableBuilderConfigToken , useValue: {defaultTableState: { }}},
-        { provide: MatTable, useValue: {addColumnDef:(colDef) => {}}},
-        provideMockStore({ initialState }),
-        DatePipe,
-        CurrencyPipe,
-        PhoneNumberPipe,
-      ],
-      imports: [MaterialModule]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ColumnBuilderComponent);
-    component = fixture.componentInstance;
-    component.metaData = { key: 'key', fieldType: FieldType.String };
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,126 +0,0 @@
-import { Component, Input, ChangeDetectionStrategy, TemplateRef, ViewChild, OnInit, HostBinding, ContentChild, ContentChildren, Predicate, Injector } from '@angular/core';
-import { FieldType, MetaData } from '../../interfaces/report-def';
-import { MatColumnDef, MatTable } from '@angular/material/table';
-import { Observable } from 'rxjs';
-import { CustomCellDirective } 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 { previousAndCurrent } from '../../../rxjs/rxjs-operators';
-import { CdkDropList, CDK_DROP_LIST } from '@angular/cdk/drag-drop';
-import { Dictionary } from '@ngrx/entity';
-
-
-interface widthStyle {
-    flex?: string;
-    maxWidth?: string;
-}
-
-interface allStyles {
-  body: widthStyle;
-  header: widthStyle;
-  footer: widthStyle;
-}
-
-@Component({
-  selector: 'tb-column-builder',
-  templateUrl: './column-builder.component.html',
-  styleUrls: ['./column-builder.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  viewProviders: [
-    { provide: CDK_DROP_LIST, useExisting: CdkDropList },
-  ]
-})
-export class ColumnBuilderComponent implements OnInit {
-  FieldType = FieldType;
-  filter!: Partial<FilterInfo>;
-  @Input() metaData!: MetaData;
-
-  @Input() customCell!: CustomCellDirective;
-  @Input() data$!: Observable<any[]>;
-
-  @ViewChild(MatColumnDef) columnDef!: MatColumnDef;
-  outerTemplate!: TemplateRef<any>;
-  innerTemplate!: TemplateRef<any>;
-  transform!: (o: any, ...args: any[])=> any ;
-
-  @ViewChild('body') bodyTemplate!: TemplateRef<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>>;
-
-  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};
-    const width$ = this.state.getUserDefinedWidth$(this.metaData.key).pipe(
-      previousAndCurrent(0),
-      map(this.mapWidth),
-    );
-    const fullMetaStyles = this.metaData.additional?.styles ?? {};
-    this.styles$ = width$.pipe(map(width => {
-      const styles: allStyles = {
-        header : {...fullMetaStyles,...this.metaData.additional?.columnPartStyles?.header, ...width},
-        footer: {...fullMetaStyles,...this.metaData.additional?.columnPartStyles?.footer, ...width},
-        body: {...fullMetaStyles,...this.metaData.additional?.columnPartStyles?.body, ...width},
-      };
-      return styles;
-    }));
-    this.showfilters$ = this.state.tableSettings$.pipe(map(settings => !(settings.hideColumnHeaderFilters || this.metaData.noFilter)));
-  }
-
-  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);
-    }
-  }
-
-  mapWidth = ([previousUserDefinedWidth, currentUserDefinedWidth] : [number, number]) : widthStyle => {
-
-    if( currentUserDefinedWidth ){
-      return ({flex:`0 0 ${currentUserDefinedWidth}px`, maxWidth:'none'});
-    } if( wasReset() ){
-      return ({flex:'1'});
-    }
-    return ({});
-    function wasReset(){
-      return previousUserDefinedWidth >=0 && currentUserDefinedWidth == null;
-    }
-  }
-
-  styles$!:Observable<allStyles>
-
-}

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

@@ -1,24 +0,0 @@
-<ng-container *ngIf="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-toggle>
-      <mat-datepicker #cal></mat-datepicker>
-  </mat-form-field>
-</ng-container>
-
-<ng-container *ngIf="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-toggle>
-      <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-toggle>
-      <mat-datepicker #toVal></mat-datepicker>
-    </mat-form-field>
-  </ng-container>
-</ng-container>
-

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

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

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

@@ -1,78 +0,0 @@
-<mat-card appearance="outlined" class="filter-card" *ngIf="filter">
-  <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" >
-                    <mat-option *ngFor="let kvp of  filterTypes[filter.fieldType] | keyvalue " [value]="$any(kvp.value)[0]">
-                        {{ kvp.key }}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-          </div>
-          <ng-container [ngSwitch]="true">
-              <ng-container *ngSwitchCase="filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||
-                                            filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber" >
-                  <ng-container *ngTemplateOutlet="String"></ng-container>
-              </ng-container>
-              <ng-container   *ngSwitchCase="filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency">
-                  <tb-number-filter [info]="filter" [CurrentFilterType]="currentFilterType!" ></tb-number-filter>
-              </ng-container>
-              <ng-container  *ngSwitchCase="filter.fieldType === FieldType.Boolean">
-                <ng-container   *ngTemplateOutlet="Boolean"></ng-container>
-              </ng-container>
-              <ng-container *ngSwitchCase="filter.fieldType === FieldType.Date">
-                  <tb-date-filter [info]="filter" [CurrentFilterType]="currentFilterType!"></tb-date-filter>
-              </ng-container>
-              <ng-container *ngSwitchCase='filter.fieldType === FieldType.Enum' >
-                <ng-container  *ngTemplateOutlet="Enum"></ng-container>
-              </ng-container>
-          </ng-container>
-          <mat-radio-group name="filterValue" [ngModel]="filter.filterValue" *ngIf="currentFilterType === FilterType.IsNull">
-            <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>
-    <mat-form-field class="my-filter" *ngIf="currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In">
-      <input matInput name="filterValue" [ngModel]="filter.filterValue" />
-    </mat-form-field>
-    <ng-container *ngIf="currentFilterType === FilterType.In">
-      <lib-in-filter [type]="FieldType.String" name='filterValue' [(ngModel)]="filter.filterValue" ></lib-in-filter>
-    </ng-container>
-    </ng-template>
-    
-    <ng-template #Boolean >
-    <div class="switch" [ngSwitch]="currentFilterType">
-      <div class="switch" *ngSwitchCase="FilterType.BooleanEquals">
-        <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>
-    </div>
-    </ng-template>
-    <ng-template #Enum>
-      <ng-container *ngIf='currentFilterType === FilterType.In' >
-        <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>
-      </ng-container>
-    </ng-template>
-    </form>
-  </mat-card-content>
-</mat-card>

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

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

@@ -1,89 +0,0 @@
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { MaterialModule } from '../../material.module';
-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,
-        MaterialModule,
-        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

@@ -1,35 +0,0 @@
-import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
-import { filterTypeMap, FilterInfo, UnmappedTypes, mappedFieldTypes, PartialFilter } from '../../classes/filter-info';
-import { TableStore } from '../../classes/table-store';
-import { FilterType } from '../../enums/filterTypes';
-import { FieldType } from '../../interfaces/report-def';
-
-
-type thingy = Omit<FieldType,UnmappedTypes>
-
-@Component({
-    selector: 'tb-filter',
-    templateUrl: './filter.component.html',
-    styleUrls: ['./filter.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class FilterComponent<T extends mappedFieldTypes = any> {
-  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;
-  }
-  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,82 +0,0 @@
-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';
-
-
-@Component({
-  selector: 'tb-in-list-filter , [tb-in-list-filter]',
-  template: `
-  <div *ngFor="let item of keyValues$ | async| keyvalue" >
-    <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
-  }]
-})
-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.push(val);
-    } else {
-      this.selectedKeys = this.selectedKeys.filter( item => item !== val);
-    }
-
-   this.value = this.selectedKeys;
-    this.onChange(this.value);
-  }
-
-}