@one-paragon/angular-utilities 0.3.10 → 0.3.11-beta.1

package/src/table-builder/components/header-menu/header-menu.component.html

@@ -0,0 +1,98 @@
+<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" >
+  <button mat-menu-item (click)="tableState.addGroupByKey(metaData.key)">
+    <mat-icon color="primary">group</mat-icon>
+    <span>Group By</span>
+  </button>
+  <button mat-menu-item (click)=hideField(metaData.key)>
+    <mat-icon color="primary">visibility_off</mat-icon>
+    <span>Hide Column</span>
+  </button>
+  <ng-form #myForm="ngForm" (keydown.enter)="onEnter(myForm.value)" class="tb-header-filter">
+    <input type="hidden" name="filterId"  [ngModel]="'header-column-' + metaData.key" />
+    <input type="hidden" name="filterType"  [ngModel]="myFilterType" />
+    <input type="hidden" name="key"  [ngModel]="metaData.key" />
+    <input type="hidden" name="fieldType"  [ngModel]="metaData.fieldType" />
+    
+    @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){
+      <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue'/>
+    }
+    @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {
+      <mat-form-field stop-propagation class="font auto-width">
+        <mat-icon matPrefix class="search-icon">search</mat-icon>
+        <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>
+        <input matInput name="filterValue" [ngModel]="filter.filterValue" />
+        <span matSuffix [matTooltip]="myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'">
+          <button mat-icon-button color="primary" (click)="setStringFilterType()" class="header-filter-icon-button">
+            <mat-icon [ngClass]="{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }">
+              block
+            </mat-icon>
+          </button>
+        </span>
+      </mat-form-field>
+    }
+    @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {
+      <mat-form-field class="auto-width" stop-propagation>
+        <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>
+        <input matInput type='number'  name="filterValue" [ngModel]="filter.filterValue" />
+        <span matPrefix class="tb-header-prefix">
+          <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.NumberLessThan)"
+          [ngClass]="{'chosen-icon': myFilterType === FilterType.NumberLessThan }">
+            <mat-icon  class="suffix-icons"
+              >
+              arrow_back_ios</mat-icon>
+          </button>
+          <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.NumberGreaterThan)"
+          [ngClass]="{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }" >
+            <mat-icon  class="suffix-icons">arrow_forward_ios</mat-icon>
+          </button>
+          <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.NumberEquals)"
+          [ngClass]="{'chosen-icon': myFilterType === FilterType.NumberEquals }">
+            <span class="suffix-icons">=</span>
+          </button>
+        </span>
+      </mat-form-field>
+    }
+    @else if (metaData.fieldType === FieldType.Boolean) {
+      <div>
+        <label>
+          <mat-icon class="search-icon">filter_list</mat-icon>
+        </label>
+        <mat-radio-group stop-propagation #ctrl="matRadioGroup" #boolField='ngModel' class="font" name="filterValue" [ngModel]="myFilterValue" >
+          <mat-radio-button class="filter-radio-button" (click)="myFilterValue = true;" [value]="true">True</mat-radio-button><br/>
+          <mat-radio-button class="filter-radio-button" (click)="myFilterValue = false" [value]="false">False</mat-radio-button><br/>
+        </mat-radio-group>
+      </div>
+    }
+    @else if (metaData.fieldType === FieldType.Date || metaData.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" (click)="setFilterType(FilterType.DateOnOrAfter)"
+            [ngClass]="{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }">
+            <mat-icon  class="suffix-icons underline">arrow_forward_ios</mat-icon>
+          </button>
+          <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.DateOnOrBefore)"
+            [ngClass]="{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }">
+            <mat-icon  class="suffix-icons underline">arrow_back_ios</mat-icon>
+          </button>
+          <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.DateIsOn)"
+            [ngClass]="{'chosen-icon': myFilterType === FilterType.DateIsOn }">
+            <span  class="suffix-icons underline"> =</span>
+          </button>
+        </span>
+        <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :
+          myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>
+        <input matInput name="filterValue" [ngModel]="filter.filterValue" [matDatepicker]="calendar"
+          (click)="calendar.open()"/>
+        <mat-datepicker-toggle class="date-toggle header-filter-icon-button" matSuffix [for]="calendar" preventEnter></mat-datepicker-toggle>
+        <mat-datepicker #calendar></mat-datepicker>
+      </mat-form-field>
+    }
+
+    <button mat-button (click)="onEnter(myForm.value)" [disabled]="myForm.value.filterValue == undefined" disableRipple>
+      Apply
+    </button>
+  </ng-form>
+</mat-menu>

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

@@ -0,0 +1,96 @@
+@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;
+  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/header-menu/header-menu.component.ts

@@ -0,0 +1,98 @@
+import { ChangeDetectionStrategy, Component, Input, 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 { NgClass } from '@angular/common';
+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: './header-menu.component.html',
+  styleUrls: ['./header-menu.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatMenuModule, MatIconModule, MatButtonModule, FormsModule, InListFilterComponent,
+    MatInputModule, MatTooltipModule, NgClass, StopPropagationDirective, MatRadioModule, MatDatepickerModule
+  ]
+})
+export class HeaderMenuComponent {
+  FieldType = FieldType;
+  FilterType = FilterType;
+  myFilterType!: FilterType;
+  myFilterValue: any;
+
+  filter!: Partial<FilterInfo>;
+
+  @Input() metaData!: MetaData;
+  @ViewChild(MatMenuTrigger) trigger!: MatMenuTrigger;
+  constructor( public tableState: TableStore) {}
+
+  hideField(key: string) {
+    this.tableState.hideColumn(key);
+  }
+
+  ngOnInit() {
+    this.filter = { key: this.metaData.key, fieldType: this.metaData.fieldType };
+    this.resetFilterType();
+  }
+
+  resetFilterType() {
+    if(this.metaData.additional?.filterOptions?.filterableValues) {
+      this.myFilterType = FilterType.In;
+      return;
+    }
+    switch (this.metaData.fieldType) {
+      case FieldType.String:
+      case FieldType.Link:
+      case FieldType.PhoneNumber:
+      case FieldType.Array:
+      case FieldType.Unknown:
+        this.myFilterType = FilterType.StringContains;
+        break;
+      case FieldType.Currency:
+      case FieldType.Number:
+        this.myFilterType = FilterType.NumberEquals;
+        break;
+      case FieldType.Boolean:
+          this.myFilterType = FilterType.BooleanEquals;
+          break;
+      case FieldType.Date:
+      case FieldType.DateTime:
+          this.myFilterType = FilterType.DateIsOn;
+          break;
+      case FieldType.Enum:
+        this.myFilterType = FilterType.In;
+        break;
+    }
+  }
+
+  setStringFilterType() {
+    this.myFilterType = this.myFilterType === FilterType.StringContains ? FilterType.StringDoesNotContain : FilterType.StringContains;
+  }
+
+  setFilterType(filterType: FilterType) {
+    if (filterType === this.myFilterType) {
+      this.resetFilterType();
+    } else {
+      this.myFilterType = filterType;
+    }
+  }
+
+  onEnter(filter: FilterInfo) {
+    if (filter.filterValue != undefined && filter.filterType) {
+      this.tableState.addFilter(filter);
+      this.trigger.closeMenu();
+    }
+  }
+}

package/src/table-builder/components/in-filter/in-filter.component.css

@@ -0,0 +1,3 @@
+.inline{
+  display: inline-block;
+}

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

@@ -0,0 +1,20 @@
+<div class=inline>
+  @for (val of value; track $index) {
+    <div>
+      @if(type === FieldType.Number || type === FieldType.Currency){
+        <input [ngModel]="val" (ngModelChange)="onValueChange($index, $event)"
+        [readonly]="$index + 1 < value.length" type="number" [ngModelOptions]="{standalone:true}" [autoFocus]="$index === value.length - 1"/>
+      }
+      @else {
+        <input [ngModel]="val" (ngModelChange)="onValueChange($index ,$event)"
+        [readonly]="$index + 1 < value.length" type="string" [ngModelOptions]="{standalone:true}"
+        #input [autoFocus]="$index === value.length - 1" />
+      }
+    </div>
+    <button [disabled]="value.length <= 1" (click)="removeInput($index)">-</button>
+    @if ($index === value.length - 1) {
+      <button [disabled]="val == undefined || val === ''" (click)="addInput()">+</button>
+    }
+    
+  }
+</div>

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

@@ -0,0 +1,64 @@
+import { ChangeDetectionStrategy, Component, Input, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FieldType } from '../../interfaces/report-def';
+import { AutoFocusDirective } from '../../../utilities';
+
+@Component({
+  selector: 'lib-in-filter',
+  templateUrl: './in-filter.component.html',
+  styleUrls: ['./in-filter.component.css'],
+  changeDetection:ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InFilterComponent,
+    multi: true
+  }],
+  standalone: true,
+  imports: [
+    FormsModule, AutoFocusDirective
+  ]
+})
+export class InFilterComponent implements ControlValueAccessor {
+  FieldType = FieldType;
+  @Input() type! : FieldType;
+  value: (string | number | undefined)[] = [undefined];
+
+  constructor(private ref: ChangeDetectorRef) {
+    this.value = [undefined];
+  }
+  writeValue(obj: any[]): void {
+    if(!obj?.length) obj  = [undefined];
+    this.value = obj;
+    this.ref.markForCheck();
+  }
+  onChange = (_: any) => { };
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  onTouched = () => { };
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  addInput(){
+    this.value = [...this.value, undefined];
+    this.ref.markForCheck();
+    this.onChange(this.value);
+  }
+
+  removeInput(index: number){
+    this.value = [...this.value];
+    this.value.splice(index,1);
+    this.ref.markForCheck();
+    this.onChange(this.value);
+  }
+
+  onValueChange(i:number,value: number | string){
+    this.value = [...this.value];
+    this.value[i] = value;
+    this.ref.markForCheck();
+    this.onChange(this.value);
+  }
+
+}

package/{table-builder/components/index.d.ts → src/table-builder/components/index.ts}

@@ -1,9 +1,9 @@
-export * from './date-filter/date-filter.component';
-export * from './filter/filter.component';
-export * from './gen-col-displayer/gen-col-displayer.component';
-export * from './table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
-export * from './table-container-filter/filter-list/filter-list.component';
-export * from './generic-table/generic-table.component';
-export * from './table-container/table-container';
-export * from './generic-table/paginator.component';
-export * from './group-by-list/group-by-list.component';
+export * from './date-filter/date-filter.component';
+export * from './filter/filter.component';
+export * from './gen-col-displayer/gen-col-displayer.component';
+export * from './table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
+export * from './table-container-filter/filter-list/filter-list.component';
+export * from './generic-table/generic-table.component';
+export * from './table-container/table-container';
+export * from './generic-table/paginator.component';
+export * from './group-by-list/group-by-list.component';

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

@@ -0,0 +1,29 @@
+<ng-template #link  let-value='value' let-element='element' let-additional="additional">
+  <tb-link-column [element]="element" [value]="value" [additional]="additional" />
+</ng-template>
+
+<ng-template #routerLink  let-value='value' let-element='element' let-additional="additional">
+  <tb-router-link-column [element]="element" [value]="value" [additional]="additional"/>
+</ng-template>
+
+<ng-template #imageUrl  let-value='value'>
+  <span>
+    <img src="{{value}}" height="75px" width="75px" />
+  </span>
+</ng-template>
+
+<ng-template #arrayNewLine let-value='value' let-element='element' let-additional="additional">
+  <tb-new-line-array-column [value]='value' [additional]='additional'/>
+</ng-template>
+
+<ng-template #arrayComma let-value='value' let-element='element' let-additional="additional">
+  <tb-comma-array-column [value]='value' [additional]='additional'/>
+</ng-template>
+
+<ng-template #default let-value='value'>
+  <span>{{ value }}</span>
+</ng-template>
+
+<ng-template #defaultWithIcon  let-value='value'>
+  <mat-icon>{{ value}}</mat-icon>
+</ng-template>

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

@@ -0,0 +1,24 @@
+import { Component, TemplateRef, ViewChild } from "@angular/core";
+import { LinkColumnComponent, RouterLinkColumnComponent } from "../link-column.component";
+import { ArrayCommaColumnComponent, ArrayNewLineColumnComponent } from "../array-column.component";
+import { MatIconModule } from "@angular/material/icon";
+import { FunctionPipe } from "../../../utilities";
+
+@Component({
+    selector: 'initialization',
+    templateUrl: './initialization-component.html',
+    standalone: true,
+    imports: [
+        LinkColumnComponent, ArrayCommaColumnComponent, MatIconModule, FunctionPipe,
+        RouterLinkColumnComponent, ArrayNewLineColumnComponent
+    ]
+})
+export class InitializationComponent {
+  @ViewChild('link', {static: true}) linkTemplate! : TemplateRef<any>;
+  @ViewChild('routerLink', {static: true}) routerLinkTemplate! : TemplateRef<any>;
+  @ViewChild('imageUrl', {static: true}) imageUrlTemplate! : TemplateRef<any>;
+  @ViewChild('arrayNewLine', {static: true}) arrayNewLineTemplate! : TemplateRef<any>;
+  @ViewChild('arrayComma', {static: true}) arrayCommaTemplate! : TemplateRef<any>;
+  @ViewChild('default', {static: true}) defaultTemplate! : TemplateRef<any>;
+  @ViewChild('defaultWithIcon', {static: true}) defaultWithIcon! : TemplateRef<any>;
+}

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

@@ -0,0 +1,47 @@
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { LinkInfo } from "../services/link-creator.service";
+
+@Component({
+  selector: "tb-router-link-column",
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    RouterModule
+  ],
+  template: `
+  <a target="{{additional().target}}"
+    [routerLink]=" [link()]"
+    [queryParams]="queryParams()"
+    [fragment]="routerLinkOptions().fragment"
+    [preserveFragment]="routerLinkOptions().preserveFragment"
+    [queryParamsHandling]="routerLinkOptions().queryParamsHandling"
+  >
+    {{value()}}
+  </a>
+  `
+})export class RouterLinkColumnComponent {
+  additional =  input.required<LinkInfo>();
+  element = input.required<any>();
+  value = input.required<string>();
+  link = computed(() => this.additional().link(this.element()));
+  queryParams = computed(() => this.additional().routerLinkOptions!.queryParams(this.element()));
+  routerLinkOptions = computed(() => this.additional().routerLinkOptions!);
+}
+
+@Component({
+  selector: "tb-link-column",
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <a target="{{additional().target}}"
+      href="{{link()}}">
+      {{value()}}
+  </a>
+  `
+})export class LinkColumnComponent {
+  value = input.required<string>();
+  element = input.required<any>();
+  additional =  input.required<LinkInfo>();
+  link = computed(() => this.additional().link(this.element()));
+}

package/src/table-builder/components/number-filter/number-filter.component.css

@@ -0,0 +1,10 @@
+.switch {
+    display: inline-block;
+}
+
+.my-filter {
+    margin-right: 15px;
+}
+.inline{
+  display: inline-block;
+}

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

@@ -0,0 +1,19 @@
+@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){
+  <mat-form-field class="my-filter">
+    <input matInput name="filterValue" [ngModel]="info.filterValue" type="number"/>
+  </mat-form-field>
+}
+@if(CurrentFilterType === FilterType.NumberBetween){
+  <ng-container ngModelGroup="filterValue"  >
+    <mat-form-field class="my-filter">
+      <input matInput name="Start" [ngModel]="info.filterValue?.Start" placeholder="Start" type="number"/>
+    </mat-form-field>
+    <mat-form-field class="my-filter">
+      <input matInput name="End" [ngModel]="info.filterValue?.End" placeholder="End" type="number"/>
+    </mat-form-field>
+  </ng-container>
+}
+
+@if (CurrentFilterType === FilterType.In) {
+  <lib-in-filter name='filterValue' [type]="FieldType.Number" [(ngModel)]='info.filterValue' />
+}

package/src/table-builder/components/number-filter/number-filter.component.spec.ts

@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FieldType } from 'projects/angular-utilities/src/public-api';
+
+import { NumberFilterComponent } from './number-filter.component';
+
+describe('NumberFilterComponent', () => {
+  let component: NumberFilterComponent;
+  let fixture: ComponentFixture<NumberFilterComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NumberFilterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NumberFilterComponent);
+    component = fixture.componentInstance;
+    component.info = {
+      key: '',
+      fieldType: FieldType.Unknown
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,25 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { FilterType } from '../../enums/filterTypes';
+import { ControlContainer, FormsModule, NgForm } from '@angular/forms';
+import { PartialFilter } from '../../classes/filter-info';
+import { FieldType } from '../../interfaces/report-def';
+import { MatInputModule } from '@angular/material/input';
+import { InFilterComponent } from '../in-filter/in-filter.component';
+
+
+@Component({
+  selector: 'tb-number-filter',
+  templateUrl: './number-filter.component.html',
+  styleUrls: ['./number-filter.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: ControlContainer, useExisting: NgForm}],
+  standalone: true,
+  imports: [
+    MatInputModule, FormsModule, InFilterComponent
+  ]
+})
+export class NumberFilterComponent {
+  FilterType = FilterType; FieldType = FieldType;
+  @Input() CurrentFilterType!: FilterType;
+  @Input() info!:PartialFilter;
+}