@one-paragon/angular-utilities 2.2.6 → 2.2.7

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

@@ -1,129 +0,0 @@
-import { Component, ChangeDetectionStrategy, TemplateRef, Predicate, Injector, computed, inject, viewChild, signal, Signal, AfterViewInit } from '@angular/core';
-import { ArrayAdditional, FieldType, MetaData } from '../../interfaces/report-def';
-import { MatColumnDef, MatTable, MatTableModule } from '@angular/material/table';
-import { CustomCellDirective, 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);
-  $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

@@ -1,54 +0,0 @@
-import { Dictionary } from "@ngrx/entity";
-import { MetaData, metaDataArrToDict } from "../../interfaces/report-def";
-import { StylerStyle } from "../../../utilities/directives/styler";
-
-export const calculateWidths = (metaData: MetaData, userDefinedWidth: number | undefined) => {
-  const definedWidth = (userDefinedWidth && `${userDefinedWidth}px`) || metaData.width;
-  return definedWidth;
-}
-
-export function calculateUserDefinedWidth(userDefinedWidth: number | undefined){
-  if(userDefinedWidth) return { flex: `0 0 ${userDefinedWidth}px`, maxWidth: 'none' };
-  return undefined;
-}
-
-export function calculateTableDefinedWidth(metaData: MetaData, tableSettingsMinWidth: number | undefined){
-  if(metaData.width) return ({ flex: `0 0 ${metaData.width}`, maxWidth: 'none' });
-  const style = { flex: `${1}` };
-  if(tableSettingsMinWidth) style['minWidth'] = `${tableSettingsMinWidth}px`;
-  return style;
-}
-
-export const calculateFlexWidth = (metaData: MetaData, userDefinedWidth: number | undefined, tableSettingsMinWidth: number | undefined) => {
-  const definedWidth = calculateWidths(metaData, userDefinedWidth);
-  if(definedWidth) return ({ flex: `0 0 ${definedWidth}`, maxWidth: 'none' });
-  const style = { flex: `${1}` };
-  if(tableSettingsMinWidth) style['minWidth'] = `${tableSettingsMinWidth}px`;
-  return style;
-}
-
-export const columnStyles = (metaData: MetaData, userDefinedWidth: number | undefined, tableSettingsMinWidth?: number | undefined) => {
-  const fullMetaStyles = metaData.additional?.styles ?? {};
-  const userWidth = calculateUserDefinedWidth(userDefinedWidth) ?? {};
-  const tableWidth = userDefinedWidth ? {} : calculateTableDefinedWidth(metaData, tableSettingsMinWidth);
-  const styles: {
-    header: Dictionary<string>;
-    body: StylerStyle;
-    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

@@ -1,110 +0,0 @@
-@let metaData = $metaData();
-@let fieldType = $fieldType();
-@let currentFilterType = $currentFilterType();
-
-<button 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))
-  {
-    <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>
-  <div (keydown)="$event.stopImmediatePropagation()">
-    @if (!(fieldType === FieldType.NotMapped))
-    {
-      <ng-form #myForm="ngForm" class="tb-header-filter" (keydown.enter)="onEnter(myForm.value, metaData)">
-        @if(currentFilterType === FilterType.Or || currentFilterType === FilterType.In)
-        {
-          <tb-in-list-filter name='filterValue' [key]='metaData.key' [ngModel]="undefined"/>
-        }
-        @else if(fieldType === FieldType.Link || fieldType === FieldType.String || fieldType === FieldType.Array || fieldType === FieldType.Unknown || fieldType === 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 (fieldType === FieldType.Number || fieldType === 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 (fieldType === 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 (fieldType === FieldType.Date || fieldType === 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>
-    }
-  </div>
-
-</mat-menu>

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

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

@@ -1,94 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, linkedSignal, viewChild } from '@angular/core';
-import { FieldType, MetaData } from '../../interfaces/report-def';
-import { FilterType } from '../../enums/filterTypes';
-import { FilterInfo } 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 { StopPropagationDirective } from '../../../utilities';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-
-@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
-  ]
-})
-export class ColumnHeaderMenuComponent {
-  protected tableState = inject(TableStore);
-
-  FieldType = FieldType;
-  FilterType = FilterType;
-
-  $metaData = input.required<MetaData>({ alias: 'metaData' });
-  $fieldType = computed(() => this.$metaData().filterLogic?.filterType || this.$metaData().fieldType)
-  $trigger = viewChild(MatMenuTrigger);
-
-  hideField(key: string) {
-    this.tableState.hideColumn(key);
-  }
-
-  $metaFilterType = computed<FilterType>(() => {
-    if(this.$metaData().additional?.filterOptions?.filterableValues) {
-      return FilterType.In;
-    }
-    switch (this.$fieldType()) {
-      case FieldType.String:
-      case FieldType.Link:
-      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(filter.filterValue != undefined && this.$currentFilterType()) {
-      this.tableState.addFilter({
-        fieldType: this.$fieldType(),
-        filterId: `header-column-${metaData.key}`,
-        filterType: this.$currentFilterType(),
-        filterValue: filter.filterValue,
-        key: metaData.key,
-        filterBy: metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy
-      });
-      this.$trigger()!.closeMenu();
-    }
-  }
-}

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

@@ -1,25 +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 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>
-}
-

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

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

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

@@ -1,11 +0,0 @@
-@if(CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull)
-{
-  <input type="datetime-local" preventEnter name="filterValue" class="op-date-time-input" [ngModel]="info.filterValue"/>
-}
-@if(CurrentFilterType === FilterType.DateTimeBetween)
-{
-  <ng-container ngModelGroup="filterValue">
-    <input type="datetime-local" preventEnter name="Start" class="op-date-time-input" [ngModel]="info.filterValue?.Start"/>
-    <input type="datetime-local" preventEnter name="End" class="op-date-time-input" [ngModel]="info.filterValue?.End"/>
-  </ng-container>
-}

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

@@ -1,20 +0,0 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
-import { PartialFilter } from '../../classes/filter-info';
-import { FilterType } from '../../enums/filterTypes';
-import { ControlContainer, FormsModule, NgForm } from '@angular/forms';
-
-@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 }],
-  imports: [
-    FormsModule
-  ]
-})
-export class DateTimeFilterComponent {
-  FilterType = FilterType;
-  @Input() info!: PartialFilter;
-  @Input() CurrentFilterType!: FilterType;
-}