@unifylib/ui-lib 1.1.3 → 1.1.4

package/src/lib/components/base-form-canvas/base-form-canvas.component.spec.ts

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

package/src/lib/components/base-form-canvas/base-form-canvas.component.ts

@@ -1,680 +0,0 @@
-import {
-  Component, ElementRef,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  Output,
-  SimpleChanges,
-  ViewChild,
-  computed,
-  model,
-  signal
-} from '@angular/core';
-import {FormBuilder, FormGroup, ReactiveFormsModule, FormsModule, FormControl} from "@angular/forms";
-import {
-  MatChip,
-  MatChipGrid,
-  MatChipInput,
-  MatChipInputEvent,
-  MatChipListbox, MatChipOption, MatChipRemove,
-  MatChipRow
-} from "@angular/material/chips";
-import {FieldInfo} from "../../base-model/field-info";
-import {ActivatedRoute} from "@angular/router";
-import {BackendService} from "../../services/backend-service";
-import {TranslateModule, TranslateService} from "@ngx-translate/core";
-import {PageInfo} from "../../base-model/page-info";
-import {COMMA, ENTER, SEMICOLON} from "@angular/cdk/keycodes";
-import {LookupItem} from "../../base-model/lookupItem";
-import {FieldMessage} from "../../base-model/api-response";
-import {
-  AsyncPipe,
-  CurrencyPipe,
-  DatePipe,
-  KeyValuePipe,
-  NgForOf,
-  NgIf, NgStyle,
-  NgSwitch,
-  NgSwitchCase,
-  NgTemplateOutlet
-} from "@angular/common";
-import {MatError, MatFormFieldModule, MatLabel} from "@angular/material/form-field";
-import {MatInputModule} from "@angular/material/input";
-import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle, MatDateRangeInput} from "@angular/material/datepicker";
-import {MatIcon} from "@angular/material/icon";
-import {CdkTextareaAutosize} from "@angular/cdk/text-field";
-import {MatRadioButton, MatRadioGroup} from "@angular/material/radio";
-import {MatCheckbox} from "@angular/material/checkbox";
-import {MatOption, MatSelect} from "@angular/material/select";
-import {MatDivider} from "@angular/material/divider";
-import {NgxJsonViewerModule} from "ngx-json-viewer";
-import {CKEditorModule} from "@ckeditor/ckeditor5-angular";
-import {NgxMatIntlTelInputComponent} from "ngx-mat-intl-tel-input";
-import {MultiAutoCompleteComponent} from "../multi-auto-complete/multi-auto-complete.component";
-import {AutoCompleteComponent} from "../auto-complete/auto-complete.component";
-import {MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger} from "@angular/material/autocomplete";
-import {BehaviorSubject, map} from "rxjs";
-import {LiveAnnouncer} from "@angular/cdk/a11y";
-import {buildFormFields, extractFieldName} from "../../utils/base-utils";
-import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
-import moment, {Moment} from "moment/moment";
-import {MatCell, MatCellDef, MatHeaderCell, MatHeaderCellDef} from "@angular/material/table";
-import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from "@angular/material/core";
-import {MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter} from "@angular/material-moment-adapter";
-export const DD_MM_YYYY_Format = {
-  parse: { dateInput: 'DD/MM/YYYY' },
-  display: {
-    dateInput: 'DD/MM/YYYY',
-    monthYearLabel: 'MMM YYYY',
-    dateA11yLabel: 'DD/MM/YYYY',
-    monthYearA11yLabel: 'MMMM YYYY',
-  },
-};
-@Component({
-  selector: 'app-base-form-canvas',
-  standalone: true,
-  imports: [
-    ReactiveFormsModule,
-    NgSwitch,
-    FormsModule,
-    NgForOf,
-    NgTemplateOutlet,
-    KeyValuePipe,
-    NgIf,
-    MatLabel,
-    MatFormFieldModule,
-    TranslateModule,
-    MatInputModule,
-    MatDatepickerInput,
-    MatDatepicker,
-    MatDatepickerToggle,
-    MatError,
-    NgSwitchCase,
-    MatIcon,
-    MatAutocomplete,
-    MatAutocompleteTrigger,
-    MatChip,
-    CdkTextareaAutosize,
-    MatRadioGroup,
-    MatCheckbox,
-    MatRadioButton,
-    MatSelect,
-    MatOption,
-    MatDivider,
-    DatePipe,
-    NgxJsonViewerModule,
-    CurrencyPipe,
-    CKEditorModule,
-    NgxMatIntlTelInputComponent,
-    MatChipGrid,
-    MatChipInput,
-    MatChipRow,
-    MatChipListbox,
-    MatChipOption,
-    MultiAutoCompleteComponent,
-    AutoCompleteComponent,
-    MatDateRangeInput,
-    AsyncPipe,
-    MatChipRemove,
-    MatCell,
-    MatCellDef,
-    MatHeaderCell,
-    MatHeaderCellDef,
-    NgStyle
-  ],
-  templateUrl: './base-form-canvas.component.html',
-  styleUrl: './base-form-canvas.component.css',
-  providers: [
-    {
-      provide: DateAdapter,
-      useClass: MomentDateAdapter,
-      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
-    },
-    { provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format },
-    { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
-  ]
-
-})
-export class BaseFormCanvasComponent implements OnInit, OnChanges, OnDestroy {
-  public Editor = ClassicEditor;
-  public hide: boolean = true;
-  dateViewMode: 'month' | 'year' | 'multi-year' = 'month';
-  @Input()
-  pageInfo!: PageInfo;
-
-
-  @Input()
-  currency: string;
-
-  @Input()// @ts-ignore
-  fields: FieldInfo[] = [];
-
-  @Input()// @ts-ignore
-  errors: FieldMessage[] = [];
-
-  @Input()
-  workflowEditableFields: string[]=[];
-  @Input()
-  isWorkflowEditableManaged: boolean = false;
-
-  @Input()
-  supportingAttributes: any;
-
-  @Input()
-  editable: boolean = false;
-
-  // When true, emit formUpdated on every value change. Default is false to avoid
-  // noisy emissions for all consumers. Item-line-editor will enable this explicitly.
-  @Input()
-  emitOnValueChanges: boolean = false;
-
-  @Input()
-  item: any = {};
-
-  _defaults: any = {};
-
-  @Output() attachmentEmitter: EventEmitter<any> = new EventEmitter<any>();
-
-  @Output() actionEmitter: EventEmitter<any> = new EventEmitter<any>();
-
-
-  @Output()
-  formUpdated: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
-
-  @Output()
-  hyperTextEvent: EventEmitter<boolean> = new EventEmitter();
-
-
-  formParam!: FormGroup;
-  screenFields = new Map<number, FieldInfo[]>();
-  removable = true;
-  selectable = true;
-  addOnBlur = true;
-
-  readonly separatorKeysCodes: number[] = [ENTER, COMMA, SEMICOLON];
-
-
-  public isPending: boolean = false;
-  public isNew: boolean = false;
-  itemId: number | undefined;
-
-  equationOperators : string[] = ['+','-','(' ];
-  @Input() equationSuggestedFields: { name: string, id: string }[] = [];
-  allEquationFields: BehaviorSubject<string[]>;
-  readonly equationValues = signal<string[]>([]);
-  currentEquationValue = model<string>('');
-
-  readonly equationFilteredFields = computed(() => {
-    const currentEquationValue = this.currentEquationValue().toLowerCase();
-    return this.allEquationFields.pipe(
-        map(fields =>
-            currentEquationValue ? fields?.filter(field => field.toLowerCase().includes(currentEquationValue)) : fields?.slice()
-        )
-    );
-  });
-  @ViewChild('EquationValueInput') fieldsInput: ElementRef<HTMLInputElement>;
-
-  set defaults(value: any | undefined) {
-    // this.backendService._defaults = value;
-    this._defaults = value;
-    this.buildForm();
-    // this.myCallback = value;
-  }
-
-  get defaults(): any | undefined {
-    // this.myCallback;
-    return this._defaults;
-    // return this.backendService._defaults;
-  }
-
-  constructor(protected translateService: TranslateService,
-              protected activatedRoute: ActivatedRoute,
-              protected backendService: BackendService,
-              private fb: FormBuilder,
-              private announcer: LiveAnnouncer) {
-    ClassicEditor.defaultConfig = {
-      toolbar: {
-        items: ['heading', '|', 'bold', 'italic', '|', 'bulletedList', 'numberedList']
-      },
-      image: {
-        toolbar: ['imageStyle:side', '|', 'imageTextAlternative']
-      },
-      table: {
-        contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
-      },
-      language: 'en'
-    };
-  }
-
-  ngOnInit(): void {
-    if(this.item && this.item.fieldValue){
-      this.equationValues.update(value => this.item.fieldValue)
-    }
-    this.defaults = this.item;
-    this.extractLables();
-    this.buildForm();
-    this.activatedRoute.data.subscribe(data => {
-      this.isPending = data['mode'] === 'pending';
-      this.isNew = data['mode'] === 'new';
-    });
-    // this.authService.summaryPanelState$.next(Constants.SUMMARY_PANEL_CLOSED);
-    // this.defaults = {};
-    // this.invoiceQInit();
-    this.allEquationFields = new BehaviorSubject<string[]>([]);
-
-    this.updateEquationOptions();
-  }
-
-  formatTimeToDate(v: any){
-    const fromTime: Date = new Date();
-    if (v) {
-      let split = v.split(":");
-      fromTime.setHours(split[0], split[1]);
-    }
-    return new Date(fromTime.getTime());
-  }
-
-  patchLookupValue($event: LookupItem, fieldName: string) {
-    if ($event?.id !== -1 && this.defaults) {
-      // @ts-ignore
-      this.defaults[fieldName] = this.formParam.get(fieldName).value;
-    }
-  }
-  getBankName(fieldName: string) {
-    //TODO Batool do we need this here ?
-    if (this.formParam.get(fieldName).value?.length > 10 && !isNaN(this.formParam.get(fieldName).value) ) {
-      return ' / ' + this.translateService.instant('BANK.' + this.formParam.get(fieldName).value?.substr(4, 4));
-    } else {
-      return '';
-    }
-  }
-
-  patchMultiSelectValue($event: LookupItem[], fieldName: string) {
-    if ($event?.length >= 0 && this.defaults) {
-      this.defaults[fieldName] = this.formParam.get(fieldName).value;
-    }
-  }
-
-  ngOnChanges({item, errors, fields}: SimpleChanges): void {
-    errors?.currentValue?.forEach((msg: FieldMessage) => {
-      this.formParam.get(msg.fieldName)?.setErrors({serverError: msg.message});
-    });
-
-    if (item?.currentValue && !item.isFirstChange()){
-      this.defaults = item.currentValue;
-    }
-
-    if (fields?.currentValue && !fields.isFirstChange()){
-      this.buildForm();
-    }
-  }
-
-  showField(item: any, field: any) {
-    return (item.id || (!item.id && !field.updateOnly)) && field.visible
-  }
-
-  workflowEditableField(field: { property: string; }) {
-    const x = this.isWorkflowEditableManaged ? this.workflowEditableFields?.findIndex(d => d === field.property) > -1 : true;
-    return x;
-  }
-
-  showMultiSelectValuesAsReadonly(field: FieldInfo) {
-    const viewProp = this.translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName';
-    return this.extractFieldName(this.defaults,field.property)?.map((a: { [x: string]: any; }) => a[viewProp]);
-  }
-
-  splitReadonly(values: any) {
-    return !values || values === '' ? []: values.split(';');
-  }
-
-
-  referenceAttributeTrue(fieldName: string, attribute: any) {
-    // return this.authService.referenceAttributeTrue(fieldName, this.pageInfo.processId, attribute);
-  }
-
-  translateLable(itemElement: any) {
-    return this.translateService.instant(itemElement)
-  }
-
-  buildForm() {
-    if (!this.fields || this.fields.length === 0 || !this.defaults) return;
-
-    if (!this.formParam) {
-      this.formParam = this.fb.group(buildFormFields(this.fields, this.defaults));
-      // Emit initial form reference
-      this.formUpdated.next(this.formParam);
-      // Emit on every value change so parent components can react live
-      if (this.emitOnValueChanges) {
-        this.formParam.valueChanges.subscribe(() => {
-          this.formUpdated.emit(this.formParam);
-        });
-      }
-      return;
-    }
-
-    const patchValues: any = {};
-    for (const field of this.fields) {
-      if (field.readonly) {
-        this.formParam.get(field.property)?.disable({ emitEvent: false });
-      } else {
-        this.formParam.get(field.property)?.enable({ emitEvent: false });
-      }
-      if (field.type !== 'spacer') {
-        patchValues[field.property] = extractFieldName(this.defaults, field.property);
-      }
-    }
-
-    this.formParam.patchValue(patchValues, { emitEvent: false });
-  }
-
-  labelKey(column: any) {
-    const configuredKey = column.label ? column.label : column.property
-    return configuredKey.startsWith(this.pageInfo.labelsSection) ? `${configuredKey}` : `${this.pageInfo.labelsSection}.${configuredKey}`;
-  }
-
-  labelKeyPlaceHolder(column: any) {
-    const configuredKey = column.placeholder ? column.placeholder : column.property
-    return configuredKey.startsWith(this.pageInfo.labelsSection) ? `${configuredKey}` : `${this.pageInfo.labelsSection}.${configuredKey}`;
-  }
-
-  getErrors(prop: string): string {
-    const control = this.formParam.get(prop);
-    if (!control || control.disabled) return '';
-
-    const field = this.fields.find(f => f.property === prop);
-
-    if (!field?.validationMessages) {
-      if (control.value && control.status !== 'VALID' && this.getFirstErrorKey) {
-        return this.getFirstErrorKey(prop);
-      }
-      return '';
-    }
-
-    if (control.invalid) {
-      const errors = control.errors || {};
-      const prefix = this.pageInfo.labelsSection + ".";
-
-      if (errors['required']) return prefix + 'REQUIRED';
-      if (errors['min']) return prefix + (field.validationMessages?.min || 'NUMBER_MIN');
-      if (errors['max']) return prefix + (field.validationMessages?.max || 'NUMBER_MAX');
-      if (errors['maxlength']) return prefix + (field.validationMessages?.maxlength || 'MAX_LENGTH');
-      if (errors['decimalMin']) return prefix + (field.validationMessages?.decimalMin || 'DECIMAL_MIN');
-      if (errors['decimalMax']) return prefix + (field.validationMessages?.decimalMax || 'DECIMAL_MAX');
-      if (errors['pattern']) return prefix + (field.validationMessages?.pattern || 'INVALID_FORMAT');
-      if (errors['invalidMathExpression']) return prefix + 'INVALID_MATH';
-      if (errors['serverError']) return prefix + errors['serverError'];
-
-      return prefix + 'INVALID_VALUE';
-    }
-
-    return '';
-  }
-
-
-  getFirstErrorKey(prop: string): string {
-    const errors = this.formParam.get(prop)?.errors;
-
-    if (!errors || Object.keys(errors).length === 0) {
-      return errors?.['serverError'] || 'INVALID_FORMAT';
-    }
-
-    return Object.keys(errors)[0];
-  }
-
-  public getCountryCodeList() {
-    return ['af', 'ax', 'al', 'dz', 'as', 'ad', 'ao', 'ai', 'aq', 'ag', 'ar', 'am', 'aw', 'au', 'at', 'az',
-      'bs', 'bh', 'bd', 'bb', 'by', 'be', 'bz', 'bj', 'bm', 'bt', 'bo', 'ba', 'bw', 'bv', 'br', 'io', 'bn',
-      'bg', 'bf', 'bi', 'kh', 'cm', 'ca', 'cv', 'ky', 'cf', 'td', 'cl', 'cn', 'cx', 'cc', 'co', 'km', 'cg',
-      'cd', 'ck', 'cr', 'ci', 'hr', 'cu', 'cy', 'cz', 'dk', 'dj', 'dm', 'do', 'ec', 'eg', 'sv', 'gq', 'er',
-      'ee', 'et', 'fk', 'fo', 'fj', 'fi', 'fr', 'gf', 'pf', 'tf', 'ga', 'gm', 'ge', 'de', 'gh', 'gi', 'gr',
-      'gl', 'gd', 'gp', 'gu', 'gt', 'gg', 'gn', 'gw', 'gy', 'ht', 'hm', 'va', 'hn', 'hk', 'hu', 'is', 'in',
-      'id', 'ir', 'iq', 'ie', 'im', 'it', 'jm', 'jp', 'je', 'jo', 'kz', 'ke', 'ki', 'kr', 'kw', 'kg', 'la',
-      'lv', 'lb', 'ls', 'lr', 'ly', 'li', 'lt', 'lu', 'mo', 'mk', 'mg', 'mw', 'my', 'mv', 'ml', 'mt', 'mh',
-      'mq', 'mr', 'mu', 'yt', 'mx', 'fm', 'md', 'mc', 'mn', 'me', 'ms', 'ma', 'mz', 'mm', 'na', 'nr', 'np',
-      'nl', 'an', 'nc', 'nz', 'ni', 'ne', 'ng', 'nu', 'nf', 'mp', 'no', 'om', 'pk', 'pw', 'ps', 'pa', 'pg',
-      'py', 'pe', 'ph', 'pn', 'pl', 'pt', 'pr', 'qa', 're', 'ro', 'ru', 'rw', 'bl', 'sh', 'kn', 'lc', 'mf',
-      'pm', 'vc', 'ws', 'sm', 'st', 'sa', 'sn', 'rs', 'sc', 'sl', 'sg', 'sk', 'si', 'sb', 'so', 'za', 'gs',
-      'es', 'lk', 'sd', 'sr', 'sj', 'sz', 'se', 'ch', 'sy', 'tw', 'tj', 'tz', 'th', 'tl', 'tg', 'tk', 'to',
-      'tt', 'tn', 'tr', 'tm', 'tc', 'tv', 'ug', 'ua', 'ae', 'gb', 'us', 'um', 'uy', 'uz', 'vu', 've', 'vn',
-      'vg', 'vi', 'wf', 'eh', 'ye', 'zm', 'zw'];
-  }
-
-
-  friendlyName(fullPath: string , subPath: string , item: string){
-    return  fullPath.substring(0, fullPath.indexOf(subPath)) + item ;
-  }
-
-  showValue(defaults, field){
-    return  this.friendlyName(field.label , field.property , defaults[field.property]);
-  }
-
-  showError(prop: string) {
-    return (this.formParam?.get(prop)?.value || this.formParam?.get(prop)?.value == 0)
-      && this.formParam.get(prop).status  === 'INVALID';
-  }
-
-  ngOnDestroy(): void {
-    this.defaults = null;
-  }
-
-  private extractLables() {
-    this.fields.forEach(f => {
-      if (f.visible) {
-        f.label = this.labelKey(f);
-
-        if (!this.screenFields.has(f.row)) {
-          this.screenFields.set(f.row, []);
-        }
-        this.screenFields.get(f.row)!.push(f);
-
-        if (f.cascadedBy) {
-          this.formParam?.get(f.cascadedBy)?.valueChanges.subscribe(() => {
-            this.formParam?.get(f.property)?.patchValue(null);
-          })
-        }
-      }
-    });
-
-    for (let i = 1; i < this.screenFields.size; i++) {
-      this.calcFlexSize(i);
-    }
-    // console.log(this.screenFields)
-  }
-
-  private calcFlexSize(i: number){
-    // Preserve explicit fieldSize values only. For fields without fieldSize, allow
-    // the layout to auto-size via flex (handled in the template/CSS).
-    // Intentionally do nothing here so that unspecified fields remain flexible.
-    return;
-  }
-
-  getCurrencyPattern(field: FieldInfo) {
-    // const decimalPlaces  = this.authService?.myCurrencies?.find(c => c.key === this.formParam.get(field.currency)?.value)?.currencyNumOfDecimalPattern || 3;
-    const decimalPlaces  = 3;
-    return '^\\d*(?:[.,]\\d{1,' + decimalPlaces + '})?$';
-  }
-
-  splittedChips(form: FormGroup, fieldName: string):string[] {
-    return form.get(fieldName).value === '' ? []: form.get(fieldName).value.trim().split(';');
-  }
-
-
-  fixArabicNumbers(str: any) {
-    // if(typeof str === 'string') {
-    //     str = str.replace(/([٠١٢٣٤٥٦٧٨٩])|([۰۱۲۳۴۵۶۷۸۹])/g, (m, $1, $2) => m.charCodeAt(0) - ($1 ? 1632 : 1776));
-    // }
-    // console.log(str);
-  }
-
-  listShowValue(defaults: any, field: FieldInfo) {
-    return defaults[field.property] ? this.showValue(defaults, field) : '';
-  }
-
-  removeChipsItem(form: FormGroup, fieldName: string, idx: number) {
-    const emails = this.splittedChips(form, fieldName);
-    if (emails.length >= 1){
-      emails.splice(idx,1);
-    }
-    let cleanedEmails = emails.join(";");
-    form.get(fieldName).setValue(cleanedEmails);
-  }
-
-  extractFieldName(element: any, property: string) {
-    if (property?.includes('.')) {
-      return property.split('.').reduce((acc, part) => acc && acc[part], element);
-    } else {
-      return element[property];
-    }
-  }
-
-  getMultiValue(field: FieldInfo) {
-    return this.formParam.get(field.property)?.value;
-  }
-
-  private validateEmail(email) {
-    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-    return re.test(String(email).toLowerCase());
-  }
-
-  addEmailToChips(event: MatChipInputEvent, form: FormGroup, fieldName: string) {
-
-    const input = event.input;
-    const value = event.value;
-    const items = value.split(';');
-    // value.split(' ');
-    items.forEach(itm => {
-      if (this.validateEmail((itm || '').trim())) {
-        const x = this.splittedChips(form, fieldName);
-        x.push(itm);
-        form.get(fieldName).patchValue(x.join(';'));
-        if (input) {
-          input.value = '';
-        }
-      }
-    });
-
-  }
-
-  extractJsonFieldName(defaults: any, property: string) {
-    const x= this.extractFieldName(defaults, property);
-    if (x?.length > 0)
-      return JSON.parse(x);
-    else return '{}';
-  }
-
-  getOptionValue(item: any) {
-    const value = typeof item === 'object' ?
-        this.translateService.getDefaultLang() === 'en' ? item.englishName : item.arabicName
-        : item;
-    return value;
-  }
-
-  getHyperTextEvent() {
-    this.hyperTextEvent.emit(true);
-  }
-
-  add(event: MatChipInputEvent): void {
-    const value = (event.value || '').trim();
-    if (value) {
-      if (this.equationOperators.includes(value) || !this.equationValues().includes(value)) {
-        this.equationValues.update(equationValues => [...equationValues, value]);
-      }
-    }
-
-    this.fieldsInput.nativeElement.value = '';
-    this.currentEquationValue.set('');
-    this.updateEquationOptions();
-
-  }
-
-  remove(item: string, index: number): void {
-    this.equationValues.update(equationValues => {
-      if (index < 0) {
-        return equationValues;
-      }
-
-      equationValues.splice(index, 1);
-      this.announcer.announce(`Removed ${item}`);
-      return [...equationValues];
-    });
-    this.updateEquationOptions();
-  }
-
-  selected(event: MatAutocompleteSelectedEvent): void{
-    const selectedValue = event.option.viewValue.trim();
-
-    if (!this.equationOperators.includes(selectedValue) && !this.equationValues().includes(selectedValue)) {
-      this.equationValues.update(equationValues => [...equationValues, selectedValue]);
-    } else if (this.equationOperators.includes(selectedValue)) {
-      this.equationValues.update(equationValues => [...equationValues, selectedValue]);
-    }
-
-    this.currentEquationValue.set('');
-    event.option.deselect();
-    this.fieldsInput.nativeElement.value = '';
-    this.updateEquationOptions();
-  }
-
-  updateEquationOptions(){
-    this.reflectEquationValueOnForm();
-
-    let updatedFields: string[];
-    if (this.equationValues().length === 0) {
-      updatedFields = this.getNamesFromSuggestedEquationFields();
-    } else {
-      let lastElement = this.equationValues()[this.equationValues().length - 1];
-      if (this.equationOperators.includes(lastElement)) {
-        updatedFields = this.getNamesFromSuggestedEquationFields();
-      } else {
-        updatedFields = this.equationOperators;
-      }
-    }
-    // console.log('*****', updatedFields);
-    this.allEquationFields.next(updatedFields);
-  }
-
-  getNamesFromSuggestedEquationFields(): string[] {
-    return this.equationSuggestedFields?.map(field => field.name);
-  }
-
-  reflectEquationValueOnForm() {
-    if (this.formParam && this.formParam.get('fieldValue')) {
-      this.formParam.get('fieldValue').setValue(this.equationValues());
-    } else {
-      // console.log('Form or fieldValue is not available.');
-    }
-  }
-
-  checkEquation(field: FieldInfo, $event: Event) {
-    // console.log('$event', $event);
-    // try {
-    //   evaluate(equation.replace(/[a-zA-Z0-9]+/g, '1')); // Replace variables with dummy values
-    //   this.formGroups[index].get('xyz').setErrors(null);
-    //   console.log('valid ', equation)
-    // } catch (e) {
-    //   this.formGroups[index].get('xyz').setErrors({serverError: 'incomplete '});
-    //   console.log('bad ', equation)
-    // }
-  }
-
-  getView(field): 'month' | 'year' | 'multi-year' {
-    return field.pattern || 'month';
-  }
-
-  setMonthAndYear(normalizedMonthAndYear: Moment, picker: MatDatepicker<Moment>, field) {
-    console.log('field.pattern', field.pattern)
-    if (field.pattern === 'multi-year') {
-      console.log('hi')
-      const date = new FormControl(moment());
-      const ctrlValue = date.value;
-      ctrlValue.year(normalizedMonthAndYear.year());
-      ctrlValue.month(1);
-      ctrlValue.dayOfYear(1);
-      this.formParam.get(field.property).setValue(ctrlValue)
-      picker.close();
-    }
-  }
-}
-