@one-paragon/angular-utilities 1.2.10 → 1.2.12

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

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, input, computed } from '@angular/core';
+
+@Component({
+  selector: 'tb-comma-array-column',
+  standalone: true,
+  template: `
+  @for(val of displayArray(); track $index){
+          {{val + (!$last ? ',' : '')}}
+        }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ArrayCommaColumnComponent {
+
+  value = input.required<(string | number)[]>();
+  additional = input(3);
+  displayArray = computed(() => (this.value() || []).slice(0, this.additional()))
+}
+
+
+@Component({
+  selector: 'tb-new-line-array-column',
+  standalone: true,
+  template: `
+  @for(val of displayArray(); track $index){
+          {{val}}
+          @if(!$last){ <br/> }
+        }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ArrayNewLineColumnComponent {
+  value = input.required<(string | number)[]>();
+  additional = input(3);
+  displayArray = computed(() => (this.value() || []).slice(0, this.additional()));
+}

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

@@ -0,0 +1,61 @@
+<ng-container [matColumnDef]="metaData.key" *ngrxLet="styles() as styles" >
+
+  <!-- header -->
+  <ng-template matHeaderCellDef #myHeader>
+    <mat-header-cell cdkDrag [style]='styles.header' resizeColumn [key]="metaData.key" class="column-head"
+      [class]='metaData.additional?.columnPartClasses?.header'>
+      <div class="header-container" cdkDragHandle>
+        @if(!customCell?.columnDef?.headerCell)
+        {
+            @if(metaData.fieldType !== FieldType.NotMapped){
+              <div mat-sort-header [disabled]="metaData.noSort" style="width: 100%">
+                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
+              </div>
+            } @else if(metaData.fieldType === FieldType.NotMapped){
+              <div style="width: 100%">
+                {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
+              </div>
+            }
+            @if((showFilters$ | async)){
+              <tb-header-menu #menu [metaData]='metaData' />
+            }
+        }
+        @else
+        {
+          <ng-container *ngTemplateOutlet="customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles:  styles.header} ">
+          </ng-container>
+        }
+      </div>
+    </mat-header-cell>
+  </ng-template>
+
+  <!-- body -->
+  <ng-container *matCellDef="let element;">
+    <ng-container *ngTemplateOutlet="outerTemplate; context: { metaData: metaData, element: element , styles: styles.body, $implicit: element }"/>
+  </ng-container>
+  <ng-template #body let-element='element' >
+    <mat-cell  [matTooltip]="metaData.toolTip ? (getTooltip | func : element) : ''"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >
+      <ng-container *ngTemplateOutlet="innerTemplate; context: { value: (transform | func : element), element: element, additional: additional, $implicit: element }; Injector: injector" />
+    </mat-cell>
+  </ng-template>
+
+  <!-- footer -->
+  <ng-template matFooterCellDef>
+    @if(customCell?.columnDef?.footerCell){
+      <ng-container
+      *ngTemplateOutlet="customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: data$, styles : styles.footer }"/>
+    } @else {
+      <mat-footer-cell  [style]='styles.footer' *ngrxLet="data$ as data" [class]='metaData.additional?.columnPartClasses?.footer'>
+        @if(!!data?.length && metaData.additional?.footer){
+          <span class="bold">
+            @switch (metaData.fieldType) {
+              @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }
+              @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }
+            }
+          </span>
+        }
+
+      </mat-footer-cell>
+    }
+  </ng-template>
+</ng-container>

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

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

@@ -0,0 +1,49 @@
+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 { 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,
+      ],
+    })
+    .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

@@ -0,0 +1,135 @@
+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();
+  }
+
+  ngAfterViewInit() {
+    this.furtherSetUp();
+    this.table.addColumnDef(this.columnDef);
+  }
+
+  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?.arrayInfo?.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

@@ -0,0 +1,53 @@
+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) console.log(metaData.key, definedWidth);
+  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

@@ -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, 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

@@ -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, 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

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

@@ -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;
+}