@one-paragon/angular-utilities 1.2.12 → 1.2.13

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

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

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

@@ -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,49 +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 { 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

@@ -1,135 +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();
-  }
-
-  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

@@ -1,53 +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) 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

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