@one-paragon/angular-utilities 2.8.3 → 2.8.4

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/meta-data';
+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,130 @@
+import { Component, ChangeDetectionStrategy, TemplateRef, Predicate, Injector, computed, inject, viewChild, signal, Signal, AfterViewInit } from '@angular/core';
+import { ArrayAdditional, FieldType, MetaData } from '../../interfaces/meta-data';
+import { MatColumnDef, MatTable, MatTableModule } from '@angular/material/table';
+import { CustomCellDirective, CustomHeaderDirective, ResizeColumnDirective } from '../../directives';
+import { createTransformer } from '../../services/transform-creator';
+import { TableStore } from '../../classes/table-store';
+import { TableTemplateService } from '../../services/table-template-service';
+import { CdkDropList, CDK_DROP_LIST, DragDropModule } from '@angular/cdk/drag-drop';
+import { Dictionary } from '@ngrx/entity';
+import { CurrencyPipe, DecimalPipe, NgTemplateOutlet } from '@angular/common';
+import { ConditionalClassesDirective, FunctionPipe, SpaceCasePipe } from '../../../utilities';
+import { MatSortModule } from '@angular/material/sort';
+import { ColumnHeaderMenuComponent } from '../column-header-menu/column-header-menu.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ColumnTotalPipe } from '../../pipes/column-total.pipe';
+import { StylerDirective } from '../../../utilities/directives/styler';
+import { columnStyles } from './column-helpers';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+
+@Component({
+  templateUrl: './column-builder.component.html',
+  styleUrls: ['./column-builder.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    { provide: CDK_DROP_LIST, useExisting: CdkDropList },
+  ],
+  imports: [
+    MatTableModule, NgTemplateOutlet, ResizeColumnDirective, FunctionPipe, StylerDirective,
+    ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, ColumnHeaderMenuComponent,
+    MatTooltipModule, ColumnTotalPipe, CurrencyPipe, DecimalPipe
+  ]
+})
+export class ColumnBuilderComponent implements AfterViewInit {
+  FieldType = FieldType;
+  private config = inject(TableBuilderConfigToken);
+  private table = inject<MatTable<any>>(MatTable);
+  private state = inject(TableStore);
+  private templateService = inject(TableTemplateService);
+  private tableConfig = inject(TableBuilderConfigToken);
+  protected injector = inject(Injector);
+
+  $columnDef = viewChild(MatColumnDef);
+  $bodyTemplate = viewChild<TemplateRef<any>>('body');
+  protected $metaData = signal<MetaData | undefined>(undefined);
+  $additional = computed(() => {
+    const metaData = this.$metaData();
+    if(!metaData) return;
+    const linkInfo = this.state.$getLinkInfo(metaData)();
+    if(linkInfo){
+      return linkInfo;
+    }
+    if(metaData.fieldType === FieldType.Array){
+      return (metaData.additional as ArrayAdditional)?.limit || this.tableConfig?.arrayDefaults?.limit;
+    }
+    return undefined;
+  });
+  setMetaData(md: MetaData){
+    this.$metaData.set(md);
+  }
+  $customCell = signal<CustomCellDirective | undefined>(undefined);
+  $customHeader = signal<CustomHeaderDirective | undefined>(undefined);
+  $data!: Signal<any[]>;
+
+  $transform = computed(() => {
+    const metaData = this.$metaData();
+    if(!metaData) return;
+    return createTransformer(metaData, this.config)
+  });
+  $innerTemplate = computed(() => {
+    const metaData = this.$metaData();
+    if(!metaData) return;
+    return metaData.template || this.$customCell()?.$templateRef() || this.templateService.getTemplate(metaData);
+  });
+  $showFilters = computed(() => {
+    const metaData = this.$metaData();
+    if(!metaData) return;
+    const settings = this.state.$tableSettings();
+    return !(settings.hideColumnHeaderFilters || metaData.noFilter)
+  });
+  $outerTemplate = computed(() => {
+    return this.$customCell()?.columnDef?.cell?.template ?? this.$bodyTemplate();
+  });
+  $classes: Signal<Dictionary<Predicate<any> | true> | undefined> = computed(() => {
+    const metaData = this.$metaData();
+    if(!metaData) return;
+    if(metaData.fieldType === FieldType.Currency) {
+      return ({
+        ['negative-currency']: (element) => element[metaData.key] < 0,
+        ...metaData.classes
+      })
+    }
+    return metaData.classes;
+  });
+  $styles = computed(() => {
+    const metaData = this.$metaData();
+    if(!metaData) return
+    return columnStyles(metaData, this.state.$getUserDefinedWidth(metaData.key)(), this.state.$tableSettingsMinWidth());
+  });
+
+  private viewInited = false;
+  ngAfterViewInit() {
+    this.table.addColumnDef(this.$columnDef()!);
+    this.onViewInit();
+    this.viewInited = true;
+  }
+  private onViewInit: () => void = () => {};
+  whenViewInited = (callback: () => void) => {
+    if(this.viewInited) {
+      callback();
+      return;
+    }
+    this.onViewInit = callback;
+  }
+
+  cellClicked(element: any, key: string, event: MouseEvent) {
+    const metaData = this.$metaData();
+    if(metaData?.click) {
+      metaData.click(element, key, event);
+    }
+  }
+
+  getTooltip = (element: any) => {
+    const metaData = this.$metaData();
+    if(!metaData?.toolTip) return;
+    if(typeof metaData.toolTip === 'string') {
+      return metaData.toolTip;
+    }
+    return metaData.toolTip!(element);
+  }
+}

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

@@ -0,0 +1,54 @@
+import { Dictionary } from "@ngrx/entity";
+import { MetaData, metaDataArrToDict } from "../../interfaces/meta-data";
+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;
+    innerBody: StylerStyle;
+    footer: Dictionary<string>;
+  } = {
+    header: { ...tableWidth, ...fullMetaStyles, ...metaData.additional?.columnPartStyles?.header, ...userWidth },
+    footer: { ...tableWidth, ...fullMetaStyles, ...metaData.additional?.columnPartStyles?.footer, ...userWidth },
+    innerBody: { ...metaData.additional?.columnPartStyles?.innerBody },
+    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/column-header-menu/column-header-menu.component.html

@@ -0,0 +1,128 @@
+@let metaData = $metaData();
+@let filterFieldType = $filterFieldType();
+@let currentFilterType = $currentFilterType();
+
+<button #b mat-icon-button class="open-menu-icon-button" disableRipple [matMenuTriggerFor]="menu" [matMenuTriggerRestoreFocus]="false">
+  <mat-icon class="menu-icon">more_vert</mat-icon>
+</button>
+<mat-menu #menu="matMenu" >
+  @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)
+  {
+    <button color="primary" mat-menu-item (click)="tableState.addGroupByKey(metaData.key)">
+      <mat-icon color="primary">group</mat-icon>
+      <span>Group By</span>
+    </button>
+  }
+  <button color="primary" mat-menu-item (click)=hideField(metaData.key)>
+    <mat-icon color="primary">visibility_off</mat-icon>
+    <span>Hide Column</span>
+  </button>
+  @if((metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) && !metaData.additional?.footer)
+  {
+    <button color="primary" mat-menu-item (click)="tableState.addFooter(metaData.key)">
+      <mat-icon color="primary">calculate</mat-icon>
+      <span>Sum</span>
+    </button>
+  }
+  <div (keydown)="$event.stopImmediatePropagation()">
+    @let filterValue = $filterValue();
+    <ng-template matMenuContent>
+      @if (filterFieldType !== FieldType.NotMapped)
+      {
+        <button color="primary" mat-menu-item (click)="addFilter(metaData)">
+          <mat-icon color="primary">filter_list</mat-icon>
+          <span>Choose Other Filter</span>
+        </button>
+        <ng-form #myForm="ngForm" class="tb-header-filter" (keydown.enter)="onEnter(myForm.value, metaData)">
+          @if(currentFilterType === FilterType.In)
+          {
+            <tb-in-list-filter name="filterValue" [key]="metaData.key" [ngModel]="filterValue" [values]="filterValue" />
+          }
+          @else if(filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)
+          {
+            <mat-form-field stop-propagation class="font auto-width">
+              <mat-icon matPrefix class="search-icon">search</mat-icon>
+              <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>
+              <input matInput name="filterValue" [ngModel]="undefined"/>
+              <span matSuffix [matTooltip]="currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'">
+                <button mat-icon-button color="primary" class="header-filter-icon-button" (click)="setStringFilterType()">
+                  <mat-icon [class]="{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }">
+                    block
+                  </mat-icon>
+                </button>
+              </span>
+            </mat-form-field>
+          }
+          @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)
+          {
+            <mat-form-field class="auto-width" stop-propagation>
+              <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>
+              <input matInput type='number'  name="filterValue" [ngModel]="undefined" />
+              <span matPrefix class="tb-header-prefix">
+                <button mat-icon-button disableRipple class="header-filter-icon-button" [class]="{'chosen-icon': currentFilterType === FilterType.NumberLessThan }"
+                (click)="setFilterType(FilterType.NumberLessThan)">
+                  <mat-icon  class="suffix-icons"
+                    >
+                    arrow_back_ios</mat-icon>
+                </button>
+                <button mat-icon-button disableRipple class="header-filter-icon-button" [class]="{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }"
+                (click)="setFilterType(FilterType.NumberGreaterThan)" >
+                  <mat-icon  class="suffix-icons">arrow_forward_ios</mat-icon>
+                </button>
+                <button mat-icon-button disableRipple class="header-filter-icon-button" [class]="{'chosen-icon': currentFilterType === FilterType.NumberEquals }"
+                (click)="setFilterType(FilterType.NumberEquals)">
+                  <span class="suffix-icons">=</span>
+                </button>
+              </span>
+            </mat-form-field>
+          }
+          @else if (filterFieldType === FieldType.Boolean)
+          {
+            <div>
+              <label>
+                <mat-icon class="search-icon">filter_list</mat-icon>
+              </label>
+              <mat-radio-group #ctrl="matRadioGroup" #boolField='ngModel' stop-propagation class="font" name="filterValue" [ngModel]="undefined" >
+                <mat-radio-button class="filter-radio-button" [value]="true" (click)="boolField.control.setValue(true);">True</mat-radio-button><br/>
+                <mat-radio-button class="filter-radio-button" [value]="false" (click)="boolField.control.setValue(false)">False</mat-radio-button><br/>
+              </mat-radio-group>
+            </div>
+          }
+          @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)
+          {
+            <mat-form-field class="font auto-width" stop-propagation >
+              <span matPrefix class="tb-header-prefix">
+                <button mat-icon-button disableRipple class="header-filter-icon-button" [class]="{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }"
+                  (click)="setFilterType(FilterType.DateOnOrAfter)">
+                  <mat-icon  class="suffix-icons underline">arrow_forward_ios</mat-icon>
+                </button>
+                <button mat-icon-button disableRipple class="header-filter-icon-button" [class]="{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore  }"
+                  (click)="setFilterType(FilterType.DateOnOrBefore)">
+                  <mat-icon  class="suffix-icons underline">arrow_back_ios</mat-icon>
+                </button>
+                <button mat-icon-button disableRipple class="header-filter-icon-button" [class]="{'chosen-icon': currentFilterType === FilterType.DateIsOn }"
+                  (click)="setFilterType(FilterType.DateIsOn)">
+                  <span  class="suffix-icons underline"> =</span>
+                </button>
+              </span>
+              <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :
+                currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>
+              <input matInput name="filterValue" [ngModel]="undefined" [matDatepicker]="calendar"
+                (click)="calendar.open()"/>
+              <mat-datepicker-toggle class="date-toggle header-filter-icon-button" matSuffix preventEnter [for]="calendar" />
+              <mat-datepicker #calendar />
+            </mat-form-field>
+          }
+          <button mat-button disableRipple [disabled]="myForm.value.filterValue == undefined" (click)="onEnter(myForm.value, metaData)">
+            Apply
+          </button>
+        </ng-form>
+      }
+    </ng-template>
+  </div>
+
+</mat-menu>
+
+<tb-filter
+  *opDialog="addFilter$; let filter; origin b._elementRef.nativeElement; positionOnScreen { width: 300 }"
+  [filter]="filter" (done)="addFilter$.next(null)" />

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

@@ -0,0 +1,97 @@
+@use '@angular/material' as mat;
+:host{
+  @include mat.button-density(-3);
+  @include mat.icon-density(-3);
+}
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.menu-icon{
+  font-size: 16px;
+  line-height: 16px;
+  vertical-align: top;
+  height: 16px;
+  width: 16px;
+}
+.search-icon{
+  margin-right: 16px;
+  vertical-align: middle;
+  height: 24px;
+  width: 24px;
+  color: rgba(0,0,0,.54);
+  font-size: 21px;
+  line-height: 1.125
+}
+.font{
+  font-size: 14px;
+}
+.filter-radio-button:first-of-type{
+  padding-left: 0;
+}
+.filter-radio-button{
+  padding: 10px 40px;
+  min-width: 110px;
+}
+.auto-width {
+  width: 260px;
+  margin: 5px;
+  display: block;
+  height: 55px;
+}
+
+
+.open-menu-icon-button{
+  height: 28px;
+  width: 28px;
+  padding: 6px;
+}
+.header-filter-icon-button {
+  height: 18px;
+  width: 18px;
+  font-size: 18px;
+  padding: 0;
+  margin: 0 2px;
+
+  ::ng-deep * {
+    line-height: initial;
+    font-size: initial;
+    height: 18px;
+    width: 18px;
+    font-size: 18px;
+    bottom: initial;
+
+  }
+
+  .chosen-icon,
+  &.chosen-icon ::ng-deep * {
+    height: 22px;
+    width: 22px;
+    font-size: 22px;
+    color: green;
+  }
+}
+mat-icon.mat-icon.suffix-icons.underline{
+  height: 20px;
+  text-decoration: underline 0.1px solid;
+  .chosen-icon &{
+    height: 24px;
+  }
+}
+::ng-deep.mat-mdc-form-field-icon-prefix:has(.tb-header-prefix), .tb-header-prefix{
+  padding: 0;
+  flex-basis: 36%;
+}
+.tb-header-filter ::ng-deep.mat-mdc-form-field-subscript-wrapper{
+  line-height: 0;
+  &::before{
+    height: 0;
+  }
+}
+.date-toggle ::ng-deep svg{
+  position: absolute;
+  left: 0;
+  top: 0;
+}

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

@@ -0,0 +1,113 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, linkedSignal, viewChild } from '@angular/core';
+import { FieldType, MetaData } from '../../interfaces/meta-data';
+import { FilterType } from '../../enums/filterTypes';
+import { FilterInfo, isFilterInfo, PartialFilter } from '../../classes/filter-info';
+import { TableStore } from '../../classes/table-store';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { FormsModule } from '@angular/forms';
+import { InListFilterComponent } from '../filter/in-list/in-list-filter.component';
+import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { DialogDirective, StopPropagationDirective } from '../../../utilities';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { WrapperFilterStore } from '../table-container-filter/table-wrapper-filter-store';
+import { Subject } from 'rxjs';
+import { FilterComponent } from '../filter/filter.component';
+
+@Component({
+  selector: 'tb-header-menu',
+  templateUrl: './column-header-menu.component.html',
+  styleUrl: './column-header-menu.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    MatMenuModule, MatIconModule, MatButtonModule, FormsModule, InListFilterComponent,
+    MatInputModule, MatTooltipModule, StopPropagationDirective, MatRadioModule, MatDatepickerModule,
+    DialogDirective, FilterComponent
+  ]
+})
+export class ColumnHeaderMenuComponent {
+  protected tableState = inject(TableStore);
+  protected filterStore = inject(WrapperFilterStore, { optional: true });
+  FieldType = FieldType;
+  FilterType = FilterType;
+
+  $metaData = input.required<MetaData>({ alias: 'metaData' });
+  $fieldType = computed(() => this.$metaData().fieldType);
+  $filterFieldType = computed(() => this.$metaData().filterLogic?.filterType || this.$fieldType())
+  $filterValue = computed(() => this.tableState.$filtersArray().filter(isFilterInfo)
+    .find(f => f.key === this.$metaData().key && f.filterType === this.$currentFilterType())?.filterValue);
+  $trigger = viewChild(MatMenuTrigger);
+
+  hideField(key: string) {
+    this.tableState.hideColumn(key);
+  }
+
+  $metaFilterType = computed<FilterType>(() => {
+    if(this.$metaData().additional?.filterOptions?.filterableValues) {
+      return FilterType.In;
+    }
+    switch (this.$filterFieldType()) {
+      case FieldType.String:
+      case FieldType.PhoneNumber:
+      case FieldType.Array:
+      case FieldType.Unknown:
+        return FilterType.StringContains;
+      case FieldType.Currency:
+      case FieldType.Number:
+        return FilterType.NumberEquals;
+      case FieldType.Boolean:
+        return FilterType.BooleanEquals;
+      case FieldType.Date:
+      case FieldType.DateTime:
+        return FilterType.DateIsOn;
+      case FieldType.Enum:
+        return FilterType.In;
+      default: return FilterType.StringContains
+    }
+  });
+
+  $currentFilterType = linkedSignal(() => this.$metaFilterType());
+  $key = computed(() => this.$metaData().key || crypto.randomUUID());
+
+  setStringFilterType() {
+    if(this.$currentFilterType() === FilterType.StringContains){
+      this.$currentFilterType.set(FilterType.StringDoesNotContain);
+    } else {
+      this.$currentFilterType.set(FilterType.StringContains);
+    }
+  }
+
+  setFilterType(filterType: FilterType) {
+    this.$currentFilterType.set(filterType)
+  }
+
+  onEnter(filter: FilterInfo, metaData: MetaData) {
+    if(this.$currentFilterType() === FilterType.In && !filter.filterValue.length){
+
+      this.tableState.removeFilter(`header-column-${metaData.key}`);
+
+    } else if(filter.filterValue != undefined && this.$currentFilterType()) {
+      this.tableState.addFilter({
+        fieldType: this.$filterFieldType(),
+        filterId: `header-column-${metaData.key}`,
+        filterType: this.$currentFilterType(),
+        filterValue: filter.filterValue,
+        key: metaData.key,
+      });
+      this.$trigger()!.closeMenu();
+    }
+  }
+
+  addFilter(metaData: MetaData) {
+    if(!this.filterStore) return;
+    this.addFilter$.next({
+      key: metaData.key,
+      fieldType: metaData.filterLogic?.filterType || metaData.fieldType,
+    });
+  }
+
+  addFilter$ = new Subject<PartialFilter | null>();
+}

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

@@ -0,0 +1,39 @@
+@let currentFilterType = $currentFilterType();
+@let info = $info();
+
+@if (currentFilterType !== FilterType.DateBetween && currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)
+{
+  <mat-form-field>
+    <input matInput name="filterValue" [ngModel]="info.filterValue" [matDatepicker]="cal"/>
+    <mat-datepicker-toggle class="small-button date-toggle" matSuffix preventEnter [for]="cal" />
+    <mat-datepicker #cal />
+  </mat-form-field>
+}
+@if(currentFilterType === FilterType.DateBetween)
+{
+  <ng-container ngModelGroup="filterValue">
+    <mat-form-field class="my-filter" >
+      <input matInput name="Start" placeholder="From"  [ngModel]="info.filterValue?.Start" [matDatepicker]="fromVal"
+          (click)="fromVal.open()"/>
+      <mat-datepicker-toggle matSuffix class="small-button date-toggle" preventEnter [for]="fromVal" />
+      <mat-datepicker #fromVal />
+    </mat-form-field>
+    <mat-form-field>
+      <input matInput name="End" placeholder="To"  [ngModel]="info.filterValue?.End" [matDatepicker]="toVal" (click)="toVal.open()"/>
+      <mat-datepicker-toggle matSuffix class="small-button date-toggle" preventEnter [for]="toVal" />
+      <mat-datepicker #toVal />
+    </mat-form-field>
+  </ng-container>
+}
+@if(currentFilterType === FilterType.In)
+{
+  @if($allValuesInMeta())
+  {
+    <tb-in-list-filter name="filterValue" [key]="info.key" [values]="info.filterValue" [(ngModel)]="info.filterValue" />
+  }
+  @else
+  {
+    <lib-in-filter name="filterValue" [type]="FieldType.Date" [(ngModel)]="info.filterValue" />
+  }
+}
+