ngx-wapp-components 1.8.2 → 1.8.4

package/src/lib/misc/w-filter-panel/w-filter-panel.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WFilterPanelComponent } from './w-filter-panel.component';
+
+describe('WFilterPanelComponent', () => {
+  let component: WFilterPanelComponent;
+  let fixture: ComponentFixture<WFilterPanelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WFilterPanelComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(WFilterPanelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/misc/w-filter-panel/w-filter-panel.component.ts

@@ -0,0 +1,457 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormControl } from '@angular/forms';
+import { QBDataTypeEnum } from '../../shared/models/enums.model';
+import { QbPanelFilter } from '../../shared/models/filter-panel/qb-panel-filter.model';
+import { Entity, EntityMap, Field, FieldMap, QueryBuilderConfig, Rule, RuleSet } from '../../shared/models/filter-panel/field.model';
+import { FilterPanelTranslations } from '../../shared/models/filter-panel/filter-panel-translations.model';
+import { QueryResultType, QueryResults } from '../../shared/models/filter-panel/query-results.model';
+import { FilterField } from '../../shared/models/filter-panel/filter-field.models';
+import { QbFilterEntity } from '../../shared/models/filter-panel/qb-filter-entity.model';
+import { ApiService } from '../../shared/service/api/api.service';
+import { StoredFilterPanelQuery } from '../../shared/models/stored-filter-panel-query.model';
+import { SessionStorageService } from '../../shared/services/session-storage.service';
+
+@Component({
+  selector: 'w-filter-panel',
+  templateUrl: './w-filter-panel.component.html',
+  styleUrls: ['./w-filter-panel.component.scss']
+})
+export class WFilterPanelComponent implements OnInit {
+  public queryCtrl!: FormControl;
+  public advancedQueryCtrl!: FormControl;
+  public groupedQueryCtrl!: FormControl;
+  public persistValueOnFieldChange: boolean = false;
+  
+  queryConfigReady: boolean = false;
+  isAdvancedSearch: boolean = false;
+  qbDataTypeEnum = QBDataTypeEnum;
+  qbDataEnums = Object.values(QBDataTypeEnum);
+  basicQueryConfig!: any;
+  advancedQueryConfig!: any;
+  basicQuery: any = {
+    condition: 'and',
+    rules: []
+  };
+  groupedQuery: any = {
+    condition: 'and',
+    rules: []
+  };
+  advancedQuery: any = {
+    condition: 'and',
+    rules: []
+  };
+  filterPanelObject!: QbPanelFilter;
+  entityConfigGrouped: QueryBuilderConfig = { fields: {} };
+  entities: any[] = [];
+  defaultValues: any[] = [];
+  defaultOperators: any[] = [];
+  storedQuery!: StoredFilterPanelQuery;
+  parentRoute!: string;
+
+  @Input('apiUrl') authorizationApiUrl!: string;
+  @Input('commonDataApiUrl') commonDataApiUrl!: string;
+  @Input('segmentationApiUrl') segmentationApiUrl!: string;
+  @Input('token') token!: string;
+  @Input('commonDataToken') commonDataToken!: string;
+  @Input('segmentationToken') segmentationToken!: string;
+  @Input('filterId') filterId!: string;
+  @Input('dataIsLoadingSearchButton') dataIsLoadingSearchButton: boolean = false;
+  @Input('tenantId') tenantId!: string;
+
+  @Input('translationsObject') translationsObject: FilterPanelTranslations = {
+    basicSearchTabLabel: 'Basic search',
+    advancedSearchTabLabel: 'Advanced search',
+    groupedFilterTitle: 'Grouped filter',
+    advancedSearch: {
+      andButtonLabel: 'And',
+      orButtonLabel: 'Or',
+      addRuleButtonLabel: 'Add filter',
+      addRuleSetButtonLabel: 'Add filter set',
+      removeRuleSetButtonLabel: 'Remove rule set'
+    },
+    noRulesLabel: 'Add filter or filter set to start',
+    searchButtonLabel: 'Clear',
+    clearButtonLabel: 'Clear',
+    fieldsPlaceholders: {
+      boolean: {
+          true: 'True',
+          false: 'False'
+      },
+      decimal: 'Insert decimal number',
+      list: 'Select an option',
+      number: 'Insert a number',
+      text: 'Insert text',
+      datetime: 'Select a date'
+    },
+    operators: {
+      contains:'contains'
+    },
+    fields: {
+      IdleDeadline: 'Id',
+      name: 'Name',
+      code: 'Code',
+      delete: 'Deleted',
+      country: 'Country'
+    }
+  };
+  
+  @Output('searchClicked') searchClicked = new EventEmitter<QueryResults>();
+  @Output('clearClicked') clearClicked = new EventEmitter<boolean>();
+  @Output('lastQuery') lastQuery = new EventEmitter<QueryResults>();
+  
+  stateOptions: any[] = [{ label: this.translationsObject.advancedSearch.andButtonLabel, value: 'and' }, { label: this.translationsObject.advancedSearch.orButtonLabel, value: 'or' }];
+
+  constructor(
+    private formBuilder: FormBuilder, 
+    private apiService: ApiService,
+    private sessionStorage: SessionStorageService
+  ) { }
+
+  ngOnInit() {
+    this.isAdvancedSearch = this.sessionStorage.getLastFilterPanelQuery(this.tenantId, this.filterId)?.advancedQueryValue ? true : false;
+    this.storedQuery= this.sessionStorage.getLastFilterPanelQuery(this.tenantId, this.filterId)
+    this.getQueryBuilderFilterPanel();
+  }
+  
+  initQueryBuilderControls() {
+    this.queryCtrl = this.formBuilder.control(this.basicQuery);
+    this.advancedQueryCtrl = this.formBuilder.control(this.advancedQuery);
+    if(this.filterPanelObject.allowGrouped) {
+      this.groupedQueryCtrl = this.formBuilder.control(this.groupedQuery);
+    }
+    
+    if(this.storedQuery) {
+      let lastQuery: QueryResults = {
+        type: this.getQueryType(),
+        basic: this.storedQuery?.basicQueryValue ? Object.assign({}, this.storedQuery?.basicQueryValue) : null,
+        advanced: this.storedQuery?.advancedQueryValue ? Object.assign({}, this.storedQuery?.advancedQueryValue) : null,
+        grouped: this.isAdvancedSearch && this.filterPanelObject.allowGrouped && this.groupedQueryCtrl ? Object.assign({}, this.groupedQueryCtrl?.value) : null
+      }
+      lastQuery = this.deleteFieldsWithoutValue(lastQuery);
+      lastQuery = this.handleEmptyFieldsQuery(lastQuery);
+      this.lastQuery.emit(lastQuery);
+    }
+  }
+
+  updateSearchType() {
+    this.isAdvancedSearch = !this.isAdvancedSearch;
+  }
+
+  onSearchClicked() {
+    let queries: QueryResults = {
+      type: this.getQueryType(),
+      basic: this.isAdvancedSearch ? null : Object.assign({}, this.queryCtrl.value),
+      advanced: this.isAdvancedSearch ? Object.assign({}, this.advancedQueryCtrl.value) : null,
+      grouped: this.isAdvancedSearch && this.filterPanelObject.allowGrouped ? Object.assign({}, this.groupedQueryCtrl.value) : null
+    }
+
+    this.setEntity(queries);
+
+    queries = this.initializeOperators(queries);
+    
+    let storedQuery: StoredFilterPanelQuery = {
+      id: this.filterId,
+      basicQueryValue: queries.basic,
+      advancedQueryValue: queries.advanced,
+      groupedQueryValue: queries.grouped
+    }
+    this.sessionStorage.setLastFilterPanelQuery(this.tenantId, storedQuery);
+    
+    queries = this.deleteFieldsWithoutValue(queries);
+    queries = this.handleEmptyFieldsQuery(queries);
+
+    this.searchClicked.emit(queries);
+  }
+
+  onClearClicked() {
+    this.resetBasicQueryValues();
+    this.advancedQuery.rules = [];
+    this.groupedQuery.rules = [];
+    this.sessionStorage.removeLastFilterPanelQuery(this.tenantId, this.filterId);
+    this.clearClicked.emit(true);
+  }
+
+  handleEmptyFieldsQuery(queries: QueryResults): QueryResults {
+    if(queries.advanced != null && queries.advanced?.rules.length == 0) {
+      queries.type = 0
+    }
+    if(queries.basic != null && queries.basic?.rules.length == 0) {
+      queries.type = 0
+    }
+    if(queries.grouped != null && queries.grouped?.rules.length == 0) {
+      queries.type = 0
+    }
+    return queries;
+  }
+
+  getQueryType(): QueryResultType {
+    if(!this.isAdvancedSearch) {
+      return QueryResultType.Basic;
+    } else {
+      if(this.isAdvancedSearch && this.groupedQueryCtrl?.value) {
+        return QueryResultType.Grouped
+      } else {
+        return QueryResultType.Advanced;
+      }
+    }
+  }
+
+  setEntity(queries: QueryResults) {
+    if(this.getQueryType() == QueryResultType.Basic) {
+      queries.basic!.rules = queries.basic!.rules.map((r:any) => {
+        return {
+          field: r.field,
+          operator: r.operator,
+          value: r.value,
+          entity: this.entities.find(e => e.fieldJsonName == r.field).entity
+        }
+      })
+    }
+  }
+
+  getQueryBuilderFilterPanel() {
+    this.apiService.getFilterPanel(this.authorizationApiUrl, this.token, this.commonDataApiUrl, this.commonDataToken, this.filterId)
+      .subscribe((qbPanelFilter: QbPanelFilter) => {
+        this.filterPanelObject = qbPanelFilter;
+        let basicFilterIds: number[] = qbPanelFilter.qbpanelToFields.filter(panelToField => panelToField.basic).map(panelToField => panelToField.qbfilterFieldId);
+        let advancedFilterIds: number[] = qbPanelFilter.qbpanelToFields.filter(panelToField => !panelToField.basic).map(panelToField => panelToField.qbfilterFieldId);
+        this.defaultValues = qbPanelFilter.qbpanelToFields.map(panelToField => {
+          return {
+            qbfilterFieldId: panelToField.qbfilterFieldId,
+            defaultValue: panelToField.defaultValue
+          }
+        })
+        this.defaultOperators = qbPanelFilter.qbpanelToFields.map(panelToField => {
+          return {
+            qbfilterFieldId: panelToField.qbfilterFieldId,
+            qbdefaultOperator: panelToField.qbdefaultOperator
+          }
+        })
+        let filterEntity: QbFilterEntity[] = qbPanelFilter.qbpanelToFields.map(panelToField => {
+          return {
+            id: panelToField.qbfilterField.qbfilterEntity.id, 
+            basic: panelToField.basic,
+            name: panelToField.qbfilterField.qbfilterEntity.name, 
+            jsonName: panelToField.qbfilterField.qbfilterEntity.jsonName, 
+            fields: []
+          }
+        });
+
+        let filterFields: FilterField[] = qbPanelFilter.qbpanelToFields.map(p => p.qbfilterField);
+        filterEntity.forEach((entity: QbFilterEntity, index: number) => {
+           let fields = filterFields.filter(e => e.qbfilterEntity.id == entity.id);
+           filterEntity[index].fields = fields ;
+        })
+        
+        this.basicQueryConfig = this.initQueryBuilder(filterEntity);
+        this.basicQueryConfig = this.filterFieldsById(this.basicQueryConfig, basicFilterIds);
+        this.basicQueryConfig.fields = this.translateFields(this.basicQueryConfig.fields);
+        this.advancedQueryConfig = this.initQueryBuilder(filterEntity);
+        this.advancedQueryConfig = this.filterFieldsById(this.advancedQueryConfig, advancedFilterIds);
+        this.advancedQueryConfig.fields = this.translateFields(this.advancedQueryConfig.fields);
+        let rules = Object.keys(this.basicQueryConfig.fields)
+          .map(fieldKey => { 
+            let defaultOperator = this.defaultOperators.find(operator => operator.qbfilterFieldId == this.basicQueryConfig.fields[fieldKey].id && operator.qbdefaultOperator != null);
+            return {
+              field: fieldKey, 
+              value: this.basicQueryConfig.fields[fieldKey].defaultValue!,
+              operator: defaultOperator ? defaultOperator.qbdefaultOperator.symbol : null
+            }
+          });
+
+          if(this.storedQuery && this.storedQuery?.id == this.filterId && this.storedQuery?.basicQueryValue) {
+            this.basicQuery = this.storedQuery.basicQueryValue;
+          } else {
+            this.basicQuery = {
+              condition: 'and',
+              rules: rules
+            };
+          }
+          if(this.storedQuery && this.storedQuery?.id == this.filterId && this.storedQuery?.advancedQueryValue) {
+            this.advancedQuery = this.storedQuery.advancedQueryValue;
+          } else {
+            this.advancedQuery = {
+              condition: 'and',
+              rules: []
+            };
+          }
+
+        this.queryConfigReady = true;
+        this.initQueryBuilderControls();
+      })
+  }
+
+  initQueryBuilder(filterEntities: QbFilterEntity[]) {
+    let entityConfigAux: QueryBuilderConfig = { fields: {} };
+    let entitiesArray: EntityMap[] = [];
+    
+    filterEntities.map((e, index) => {
+      let entity: Entity = { name: e.jsonName };
+      return entitiesArray[index] = { [e.jsonName]: entity };
+    });
+
+    let entitiesMap: EntityMap = {};
+
+    for (const entity of entitiesArray) {
+      const keys = Object.keys(entity);
+
+      keys.forEach(key => {
+        if(this.translationsObject.entities) {
+          let entitiesTranslationsKeys = Object.keys(this.translationsObject.entities);
+          let translation = entitiesTranslationsKeys.find(translationKey => translationKey == key);
+          if(translation) {
+            entitiesMap[key] = { name: this.translationsObject.entities[key] }
+          } else {
+            entitiesMap[key] = entity[key]
+          }
+        } else {
+          entitiesMap[key] = entity[key]
+        }
+      });
+
+      entityConfigAux.entities = entitiesMap;
+    }
+
+    let fields: FieldMap[] = [];
+    filterEntities.forEach((filterEntity) => {
+      return filterEntity.fields.filter((filterField: FilterField) => {
+        let index: number = fields.length ?? 0;
+        let operatorsFlatArray = filterField.operators.map((o:any) => o.symbol);
+        let defaultOperator = this.defaultOperators.find(operator => operator.qbfilterFieldId == filterField.id);
+        let field: Field = {
+          id: filterField.id,
+          name: filterField.name,
+          operators: defaultOperator.qbdefaultOperator?.symbol ? this.moveElementToFirstPlace(operatorsFlatArray, defaultOperator.qbdefaultOperator?.symbol) : operatorsFlatArray,
+          type: this.getDataType(filterField.dataType),
+          defaultValue: this.formatDefaultValue(this.defaultValues.find(value => value.qbfilterFieldId == filterField.id).defaultValue, filterField.dataType),
+          defaultOperator: defaultOperator.qbdefaultOperator?.symbol,
+          entity: filterEntity.jsonName,
+          options: filterField.listOfValues,
+          validator: (rule: Rule, parent: RuleSet): any | null => {
+            if (rule.operator !== "is null" && rule.operator !== "is not null") {
+              if (rule.value === undefined || rule.value === null || rule.value === '' || rule.value.length == 0) {
+                return { required: 'empty field' };
+              }
+            }
+            return null;
+          }
+        }
+        this.entities.push({fieldJsonName: filterField.jsonName, entity: field.entity});
+        fields[index] = { [filterField.jsonName]: field };
+      });
+    });
+
+    let fieldsMap: FieldMap = {};
+
+    for (const field of fields) {
+      const keys = Object.keys(field);
+      keys.forEach(key => {
+        fieldsMap[key] = field[key];
+      });
+
+      entityConfigAux.fields = fieldsMap;
+    }
+    return entityConfigAux;
+  }
+
+  filterFieldsById(fieldsObj: any, idArray: number[]): any {
+    const filteredFields: any = {};
+    
+    for (const key in fieldsObj.fields) {
+      const field = fieldsObj.fields[key];
+      if (idArray.includes(field.id)) {
+        filteredFields[key] = field;
+      }
+    }
+    
+    return {
+      ...fieldsObj,
+      fields: filteredFields,
+    };
+  }
+
+  translateFields(fields: FieldMap) {
+    for (const key in fields) {
+      if (fields.hasOwnProperty(key)) {
+        fields[key].field = key;
+        fields[key].name = this.translationsObject.fields[key];
+      }
+    }
+    return fields;
+  }
+
+  moveElementToFirstPlace(array: any[], elementToFirstPlace: string) {
+    const index = array.indexOf(elementToFirstPlace);
+    if (index !== -1) {
+      array.splice(index, 1);
+      array.unshift(elementToFirstPlace); 
+    }
+    return array;
+  }
+
+  formatDefaultValue(value: any, type: QBDataTypeEnum) {
+    if(value) {
+      if(type == QBDataTypeEnum.Boolean) {
+        return value.toLowerCase() === 'true';
+      }
+      if(type == this.qbDataTypeEnum.Number || type == this.qbDataTypeEnum.Decimal || type == this.qbDataTypeEnum.List){
+        return Number(value);
+      }
+    } 
+    return value;
+  }
+
+  getDataType(id: number) {
+    return this.qbDataEnums.find(value => value === id)?.toString() ?? "";
+  }
+
+  deleteFieldsWithoutValue(json: any) {
+    if (json.basic && json.basic.rules) {
+      json.basic.rules = json.basic.rules.filter((rule: any) => rule.value != null);
+      json.basic.rules = json.basic.rules.filter((rule: any) => rule.value != undefined);
+      json.basic.rules = json.basic.rules.filter((rule: any) => rule.value !== "");
+    }
+    if(json.advanced && json.advanced.rules?.length != 0) {
+      json.advanced.rules = json.advanced.rules.filter((rule: any) => rule.rules?.length != 0);
+    }
+    if(json.grouped && json.grouped?.rules.length != 0) {
+      json.grouped.rules = json.grouped.rules.filter((rule: any) => rule.rules?.length != 0);
+    }
+    if(json.grouped && json.grouped?.rules.length == 0) {
+      json.grouped = null;
+    }
+    return json;
+  }
+  
+  initializeOperators(json: any) {
+    if (json.basic && json.basic.rules) {
+      json.basic.rules.forEach((rule:any) => {
+        if(!rule.operator) {
+          rule.operator = "=";
+        }
+      });
+    }
+    return json;
+  }
+
+  resetBasicQueryValues() {
+    this.basicQuery.rules.forEach((rule: Rule) => {
+      if(rule.value || rule.value == 0){
+        rule.value = null
+      }
+    });
+  }
+
+  getQueryFieldName(fieldName: string, fields: FieldMap) {
+    const fieldEntry = Object.keys(fields).find(key => fields[key].field === fieldName);
+
+    return fieldEntry && fields[fieldEntry].name ? fields[fieldEntry].name : fieldName;
+  }
+
+  fieldIsBoolean(fieldName: string, fields: FieldMap) {
+    const fieldEntry = Object.keys(fields).find(key => fields[key].field === fieldName);
+
+    return fields[fieldEntry!].type == QBDataTypeEnum.Boolean.toString() ? true : false;
+  }
+
+}

package/src/lib/misc/w-filter-panel/w-list-field/w-list-field.component.html

@@ -0,0 +1,21 @@
+<div *ngIf="options.length == 0; else optionsDataReady" class="mx-2 w-list-field-skeleton-container p-dropdown p-component"><p-skeleton width="8rem" height="9px"></p-skeleton></div>
+<ng-template #optionsDataReady>
+    <p-multiSelect *ngIf="getDataType() == dataType.Multi"
+        appendTo="body" 
+        [options]="options" 
+        [(ngModel)]="optionSelected" 
+        optionLabel="name" 
+        optionValue="value" 
+        [placeholder]="placeholder ?? 'Select an option'"
+        (onChange)="onOptionSelected()">
+    </p-multiSelect>
+    <p-dropdown *ngIf="options && getDataType() == dataType.Single"
+        appendTo="body" 
+        [options]="options" 
+        [(ngModel)]="optionSelected" 
+        optionLabel="name" 
+        optionValue="value" 
+        [placeholder]="placeholder ?? 'Select an option'" 
+        (onChange)="onOptionSelected()">
+    </p-dropdown>
+</ng-template>

package/src/lib/misc/w-filter-panel/w-list-field/w-list-field.component.scss

@@ -0,0 +1,64 @@
+@import '../../../../styles/_variables.scss';
+
+::ng-deep .p-multiselect {
+    max-width: 140px;
+}
+
+.w-list-field-skeleton-container{
+    padding: 14px;
+}
+
+:host ::ng-deep .w-edit-select-input-small .p-dropdown{
+    font-weight: 600;
+    border-width: $borderWidth;
+	border-radius: 8px;
+    border-color: $black200;
+    height: $spacingXXXL;
+    margin: $spacingXXS;
+}
+:host ::ng-deep .w-edit-select-input-small .p-dropdown:not(.p-disabled):hover{
+    border: $borderWidth solid $primaryColor !important;
+}
+:host ::ng-deep .w-edit-select-input-small .p-dropdown:not(.p-disabled).p-focus {
+    box-shadow: $spacingZero $spacingZero 8px $spacingZero rgba($primary500, 0.50);
+    border: $borderWidth solid $primary50;
+}
+:host ::ng-deep .w-edit-select-input-small .p-dropdown .p-placeholder {
+    color: $text500;
+}
+:host ::ng-deep .w-edit-select-input-small .p-inputtext{
+    padding: 6px $spacingZero 6px 12px;
+}
+:host ::ng-deep .w-edit-select-input-small .p-dropdown .pi{
+    font-size: .8rem;
+}
+:host ::ng-deep .w-edit-select-input-small .p-dropdown-panel{
+    padding: 8px;
+}
+:host ::ng-deep .w-edit-select-input-small .p-dropdown-panel .p-dropdown-items{
+    padding: $spacingZero;
+}
+:host ::ng-deep .w-edit-select-input-small .p-dropdown-panel .p-dropdown-items .p-dropdown-item{
+    padding: 8px;
+    margin-bottom: 4px;
+    font-weight: 600;
+}
+:host ::ng-deep .w-edit-select-input-small .p-dropdown-panel .p-dropdown-items .p-dropdown-item:hover{
+    background: $primary50;
+    border-radius: 8px;
+}
+:host ::ng-deep .w-edit-select-input-small .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight{
+    background: $primary50;
+    border-radius: 8px;
+    color: $black;
+}
+:host ::ng-deep .w-edit-select-input-small .p-disabled{
+    background: $white;
+	opacity: 1;
+}
+:host ::ng-deep .w-edit-select-input-small .p-disabled .p-inputtext{
+    color: $black400;
+}
+::ng-deep .select-disabled .p-dropdown .p-dropdown-trigger {
+	display: none;
+}

package/src/lib/misc/w-filter-panel/w-list-field/w-list-field.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WListFieldComponent } from './w-list-field.component';
+
+describe('ListFieldComponent', () => {
+  let component: WListFieldComponent;
+  let fixture: ComponentFixture<WListFieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WListFieldComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(WListFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/misc/w-filter-panel/w-list-field/w-list-field.component.ts

@@ -0,0 +1,73 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges, forwardRef } from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { DataTypeEnum, OperatorEnum } from "../../../shared/models/enums.model";
+
+@Component({
+  selector: 'w-list-field',
+  templateUrl: './w-list-field.component.html',
+  styleUrls: ['./w-list-field.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => WListFieldComponent),
+      multi: true
+    }
+  ]
+})
+export class WListFieldComponent implements OnInit, ControlValueAccessor, OnChanges{
+  @Input('options') optionsReceived!: any;
+  options!: any;
+  optionSelected: any;
+  @Input('operator') operator: any;
+  @Input('placeholder') placeholder!: any;
+  @Input('onlyDropdown') onlyDropdown: boolean = false;
+  
+
+  dataType: typeof DataTypeEnum = DataTypeEnum;
+
+  private onChange: any = () => {};
+  private onTouched: any = () => {};
+
+  constructor(){}
+  
+  ngOnInit(): void {
+    this.options = this.optionsReceived;
+  }
+  
+  ngOnChanges(changes: SimpleChanges): void {
+    if(this.onlyDropdown == true && (changes[this.optionsReceived] != undefined) && (changes[this.optionsReceived].currentValue[0] !== changes[this.optionsReceived].previousValue[0])){
+      this.options = this.optionsReceived;
+    }
+
+    if(this.onlyDropdown == false){
+      if(changes[this.operator]?.previousValue != undefined){
+        this.optionSelected = null;
+      }
+    }
+  }
+
+  onOptionSelected(){
+    this.onChange(this.optionSelected);
+    this.onTouched();
+  }
+
+  writeValue(value: any): void {
+    this.optionSelected = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  
+  getDataType(){
+    if(this.operator == OperatorEnum.Equals || this.operator == OperatorEnum.NotEquals){
+      return DataTypeEnum.Single;
+    }else{
+      return DataTypeEnum.Multi;
+    }
+  }
+}