@unifylib/ui-lib 1.0.3 → 1.1.3

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

@@ -1,573 +1,680 @@
-import {
-  Component,
-  computed,
-  ElementRef,
-  EventEmitter,
-  Input,
-  model,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  Output,
-  signal,
-  SimpleChanges,
-  ViewChild
-} from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule} 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 {
-  CurrencyPipe,
-  DatePipe,
-  KeyValuePipe,
-  NgForOf,
-  NgIf,
-  NgSwitch,
-  NgSwitchCase,
-  NgTemplateOutlet
-} from "@angular/common";
-import {FlexLayoutModule} from "@angular/flex-layout";
-import {MatError, MatFormFieldModule, MatLabel} from "@angular/material/form-field";
-import {MatInputModule} from "@angular/material/input";
-import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} 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 {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 {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
-import {BehaviorSubject, map} from "rxjs";
-import {LiveAnnouncer} from "@angular/cdk/a11y";
-import {buildFormFields} from "../../utils/base-utils";
-import moment, {Moment} from "moment/moment";
-
-@Component({
-  selector: 'app-base-form-canvas',
-  standalone: true,
-  imports: [
-    ReactiveFormsModule,
-    NgSwitch,
-    FormsModule,
-    FlexLayoutModule,
-    NgForOf,
-    NgTemplateOutlet,
-    KeyValuePipe,
-    NgIf,
-    MatLabel,
-    MatFormFieldModule,
-    TranslateModule,
-    MatInputModule,
-    MatDatepickerInput,
-    MatDatepicker,
-    MatDatepickerToggle,
-    MatError,
-    NgSwitchCase,
-    MatIcon,
-    MatChip,
-    CdkTextareaAutosize,
-    MatRadioGroup,
-    MatCheckbox,
-    MatRadioButton,
-    MatSelect,
-    MatOption,
-    MatDivider,
-    DatePipe,
-    NgxJsonViewerModule,
-    CurrencyPipe,
-    NgxMatIntlTelInputComponent,
-    MatChipGrid,
-    MatChipInput,
-    MatChipRow,
-    MatChipListbox,
-    MatChipOption,
-    MultiAutoCompleteComponent,
-    AutoCompleteComponent,
-    MatChipRemove
-  ],
-  templateUrl: './base-form-canvas.component.html',
-  styleUrl: './base-form-canvas.component.css'
-})
-export class BaseFormCanvasComponent implements OnInit, OnChanges, OnDestroy {
-  public hide: boolean = true;
-  dateViewMode: 'month' | 'year' | 'multi-year' = 'month';
-  @Input()
-  pageInfo!: PageInfo;
-
-  @Input()// @ts-ignore
-  fields: FieldInfo[] = [];
-
-  @Input()// @ts-ignore
-  errors: FieldMessage[] = [];
-
-  @Input()
-  workflowEditableFields: string[]=[];
-  @Input()
-  isWorkflowEditableManaged: boolean = false;
-
-  @Input()
-  supportingAttributes: any;
-
-  @Input()
-  editable: 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) {
-
-  }
-
-  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) {
-      this.formParam = this.fb.group(buildFormFields(this.fields, this.defaults));
-      this.formUpdated.next(this.formParam);
-    }}
-
-  labelKey(column: any) {
-    const configuredKey = column.label ? column.label : column.property
-    return configuredKey.startsWith(this.pageInfo.labelsSection) ? `${configuredKey}` : `${this.pageInfo.labelsSection}.${configuredKey}`;
-  }
-
-  getErrors(prop: string) {
-
-    if (this.formParam.get(prop).value && this.formParam.get(prop).status !== 'VALID'  && !this.formParam.get(prop).disabled) {
-      return this.getFirstErrorKey(prop);
-      // if (this.formParam.get(prop).errors?.['invalidMathExpression']) {
-      //   return 'invalidMathExpression'
-      // }  else {
-      //   return this.formParam.get(prop).errors?.['serverError'] || 'INVALID_FORMAT';
-      // }
-
-      // return this.formParam.get(prop).errors?.find(e => typeof e !== 'undefined')?.serverError || 'INVALID_FORMAT';
-    }
-    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];
-  }
-
-  getCountryCodeList() {
-    return ["jo"]
-  }
-
-
-  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).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){
-    if (this.screenFields.get(i)) {
-      const autoSizeFields = this.screenFields.get(i).filter(f => !f.fieldSize);
-      const configLength = this.screenFields.get(i).filter(f => f.fieldSize > 0)
-        .reduce((sum, obj) => {
-          return sum + obj.fieldSize;
-        }, 0);
-      if (autoSizeFields.length > 0) {
-        const x = (100 - configLength) / autoSizeFields.length;
-        autoSizeFields.forEach(f => f.fieldSize = x);
-      }
-    }
-  }
-
-  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();
-    }
-  }
-}
-
+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();
+    }
+  }
+}
+