fx-form-builder-wrapper 0.0.53 → 0.0.55

package/src/lib/components/dynamic-table/dynamic-table.component.html

@@ -1,69 +0,0 @@
-<fx-settings-panel [fxData]="fxData" (configuration)="onChangeConfiguration($event)">
-    <div *ngIf="fxData">
-        <table style="width: 100%;" class="formBuilder_dynamic_table">
-            <thead>
-                <tr>
-                    <th *ngFor="let column of tableConfig.columns">{{ column.header }}</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr *ngFor="let row of tableConfig.rows; let rowIndex = index">
-                    <td *ngFor="let column of tableConfig.columns">
-                        <ng-container [ngSwitch]="column.cellType">
-                            <span [class]="column?.className" *ngSwitchCase="'text'">{{row[column.header]}}</span>
-    
-                            <input [class]="column?.className" *ngSwitchCase="'input-text'" type="text"
-                                [(ngModel)]="row[column.header]" />
-    
-                            <input [class]="column?.className" *ngSwitchCase="'input-number'" type="number"
-                                [(ngModel)]="row[column.header]" />
-    
-                            <select [class]="column?.className" *ngSwitchCase="'dropdown'"
-                                [(ngModel)]="row[column.header]">
-                                <option *ngFor="let option of column?.options" [value]="option?.optionValue">     
-                                    {{ option?.optionName }}
-                                </option>
-                            </select>
-    
-                            <select [class]="column?.className" style="width: 60%;" *ngSwitchCase="'smart-dropdown'"
-                                [(ngModel)]="row[column.header]">
-                                <option *ngFor="let option of smartDropdownOptions[column.header]" [value]="option?.value">
-                                    {{option?.name }}
-                                </option>
-                            </select>
-    
-                            <input [class]="column?.className" *ngSwitchCase="'checkbox'" type="checkbox"
-                                [(ngModel)]="row[column.header]" />
-    
-                            <input name="radio-{{rowIndex}}" [class]="column?.className" *ngSwitchCase="'radio'" type="radio"
-                                [(ngModel)]="row[column.header]" />
-    
-                            <div [class]="column?.className" style="display: flex; justify-content: center; gap: 10px;"
-                                *ngSwitchCase="'radio-group'">
-                                <label *ngFor="let option of column.options">
-                                    <input name="radio-group-{{rowIndex}}" type="radio" [value]="option?.optionName"
-                                        [(ngModel)]="row[column.header]" />
-                                    {{ option?.optionName }}
-                                </label>
-                            </div>
-    
-                            <ng-container *ngSwitchCase="'file-upload'">
-                                <div style="display: flex; flex-direction: column; align-items: end;justify-content: end;">
-                                    <img  width="100" *ngIf="uploadedImages?.[rowIndex]?.['result']" [src]="uploadedImages[rowIndex]?.['result']"
-                                    alt="Uploaded Image" (click)="deleteFile(uploadedImages[rowIndex], rowIndex)"/>
-                                    <input [class]="column?.className" type="file" name="file" #uploadFile  hidden multiple
-                                        (change)="uploadImage($event, rowIndex)" />
-                                    <button (click)="uploadFile.click()">Upload</button>
-                                </div>
-                            </ng-container>
-    
-                            <ng-container *ngSwitchCase="'textarea'">
-                                <textarea [class]="column?.className" name="" id="" cols="30" rows="2"></textarea>
-                            </ng-container>
-                        </ng-container>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</fx-settings-panel>

package/src/lib/components/dynamic-table/dynamic-table.component.ts

@@ -1,258 +0,0 @@
-import { AfterViewInit, ChangeDetectorRef, Component, inject, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClient } from '@angular/common/http';
-import { FxBaseComponent, FxMode, FxSetting, FxStringSetting, FxValidation, FxValidatorService } from '@instantsys-labs/fx';
-import { SettingsPanelComponent } from '../../panel/settings-panel/settings-panel.component';
-import { FxBuilderWrapperService } from '../../fx-builder-wrapper.service';
-import {Subject, takeUntil } from 'rxjs';
-
-export interface TableColumnConfig {
-  header: string;
-  cellType: 'text' | 'input-text' | 'input-number' | 'dropdown' | 'smart-dropdown' | 'checkbox' | 'radio' | 'radio-group' | 'file-upload' | 'textarea';
-  placeholder?: string;
-  options?: string[];
-  apiUrl?: string;
-  valueKey?: string;
-  labelKey?: string;
-  className?: string;
-}
-export interface TableConfig {
-  columns: TableColumnConfig[];
-  rows: any[];
-}
-@Component({
-  selector: 'fx-dynamic-table',
-  standalone: true,
-  imports: [CommonModule, FormsModule, SettingsPanelComponent, ReactiveFormsModule],
-  templateUrl: './dynamic-table.component.html',
-  styleUrl: './dynamic-table.component.css',
-})
-
-export class DynamicTableComponent extends FxBaseComponent implements OnInit, AfterViewInit, OnDestroy {
-  @Input() tableRows: Array<any> = [];
-  @Input() previewType: FxMode = FxMode.VIEW;
-  @Input() tableConfig: any = {
-    columns: [
-      { header: 'Column 1', cellType: 'text' },
-      { header: 'Column 2', cellType: 'text' },
-      { header: 'Column 3', cellType: 'text' },
-      { header: 'Column 4', cellType: 'text' },
-      { header: 'Column 5', cellType: 'text' },
-    ],
-};
-
-  private destroy$ = new Subject<Boolean>();
-  public uploadedImages: Array<Record<string, string | File | null> | null> = [];
-
-  public tableFormControl = new FormControl();
-  public smartDropdownOptions: { [key: string]: Array<{ name: string, value: string }> } = {};
-  private http = inject(HttpClient);
-  constructor(private cdr: ChangeDetectorRef, private fxBuilderWrapperService: FxBuilderWrapperService) {
-    super(cdr);
-    this.onInit.subscribe((fxData)=>{
-      this._register(this.tableFormControl);
-    })
-  }
-
-  public ngOnInit(): void {
-    this.fxBuilderWrapperService.variables$.pipe(
-      takeUntil(this.destroy$)).subscribe((variables: any) => {
-        if (variables) {
-          let dynamicTableValues: any;
-          for (const [key, value] of Object.entries(variables)) {
-            if (key.includes('dynamic-table')) {
-              dynamicTableValues = value;
-            }
-          }
-          if (Object.keys(dynamicTableValues).length) {
-            // const fileHeaderName = dynamicTableValues?.columns.find((f: any) => f.cellType === 'file-upload')?.header;
-            const fileHeaderName = dynamicTableValues?.columns.find((f: any) => f.cellType === 'file-upload')?.header;
-            dynamicTableValues?.rows?.forEach((item: any, index: number) => {
-              // // this.uploadedImages[index] = item[fileHeaderName] ? item[fileHeaderName]: null;
-              // const fileUrl = item[fileHeaderName]; // Get the file URL
-
-              // this.uploadedImages[index] = fileUrl
-              //   ? { result: fileUrl, file: null } // Store the URL as 'result'
-              //   : null;
-              
-              if (item[fileHeaderName]) {
-                this.parseUrls(item[fileHeaderName], index);
-              }
-            })
-            console.log("uploadedImages", this.uploadedImages);
-            console.log("dynamictable", dynamicTableValues);
-            this.tableConfig = dynamicTableValues;
-            this.fxData.value = this.tableConfig;
-            // this.tableFormControl.reset();
-            // this.tableFormControl.setValue(this.tableConfig);
-            this.tableFormControl = new FormControl();
-            setTimeout(() => {  // Delay to ensure proper patching
-              this.tableFormControl.patchValue(this.tableConfig, { emitEvent: true });
-              console.log("tableFormControl",this.tableFormControl);
-              this.cdr.detectChanges();
-            }, 50);
-          }
-        }
-      })
-  }
-
-  public ngAfterViewInit(): void {
-    setTimeout(() => {
-      if(this.fxData?.value && Object.keys(this.fxData?.value)?.length != 0) {
-        this.tableConfig = this.fxData.value;
-        this.fetchSmartDropdownData();
-      }
-    }, 100)
-  }
-  
-  protected fetchSmartDropdownData(): void {
-    this.tableConfig.columns
-      .filter((column: TableColumnConfig) => column.cellType === 'smart-dropdown' && column?.apiUrl)
-      .forEach((column: TableColumnConfig) => {
-        this.http.get<any>(column.apiUrl!).subscribe((response: any) => {
-          this.smartDropdownOptions[column.header] = response.map((item: any) => ({
-            value: item[column.valueKey!],
-            name: item[column.labelKey!],
-          }));
-        });
-      });
-  }
-
-  public uploadImage(event: Event, rowIndex: number): void {
-    const file = (event.target as HTMLInputElement).files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = () => {
-        this.uploadedImages[rowIndex] = {
-          result: reader.result as string,
-          file: file
-        }
-        this.tableConfig.rows[rowIndex][this.tableConfig.columns.find((f: any) => f.cellType === 'file-upload')?.header] = file;
-        console.log("tableConfig", this.tableConfig);
-      };
-      reader.readAsDataURL(file);
-    }
-  }
-
-  protected settings(): FxSetting[] {
-    return [
-      new FxStringSetting({ key: 'column-size', $title: 'No. of columns', value: 1 }),
-      new FxStringSetting({ key: 'table-config', $title: 'Table Configuration', value: {} }),
-    ];
-  }
-
-  protected validations(): FxValidation[] {
-    return [FxValidatorService.required];
-  }
-
-  public getArray(count: number): number[] {
-    return Array.from({ length: count });
-  }
-
-  public onChangeConfiguration(event: any): void { 
-    const columns = event.columns.map((col: any) => {
-      return {
-        header: col?.header,
-        cellType: col?.cellType,
-        placeholder: col?.placeholder,
-        options: col?.options,
-        apiUrl: col?.apiUrl,
-        valueKey: col?.valueKey,
-        labelKey: col?.labelKey,
-        className: col?.className,
-        apiKey: col?.apiKey
-      }
-    });
-    if(!event?.enableAPI) {
-      this.tableConfig.columns = columns;
-      // this.tableConfig.rows = Array.from({ length: +event?.rows }, (e, index) => ({ name: `SKU-${index + 1}`, age: index % 2 !== 0, gender: 'male' }))
-      // this.tableConfig.rows = Array.from({ length: +event?.rows }, (e, index) => {
-      //   const rows = columns.map((c: any) => {
-      //     return {
-      //       c?.header: null
-      //     }
-      //   })
-      //   return rows
-      // })
-      this.tableConfig.rows = Array.from({ length: +event?.rows }, (_, index) => {
-        return columns.reduce((acc: any, c: any) => {
-          acc[c?.header] = ''; // Initialize each column key with null
-          return acc;
-        }, {});
-      });
-      
-      this.fetchSmartDropdownData();
-    }
-    if(event?.enableAPI) {
-      this.drawTable(event, columns)
-      this.tableConfig = {
-        columns: columns,
-        rows: []
-      };
-    }
-
-    this.fxData.value = this.tableConfig;
-    this.tableFormControl.reset();
-    this.tableFormControl.setValue(this.tableConfig);
-  }
-
-  private updateSettings(): void{
-    if(this.fxData.settings){
-      for(let setting of this.fxData.settings){
-      if(setting.key === 'table-config'){
-        setting.value = this.tableConfig;
-        }
-      }
-    }
-  }
-
-  public drawTable(event: any, columns: any): void {
-    let rows;
-    this.http.get(event.api).subscribe((res: any) => {
-      if(res) {
-        rows = res.map((item: any) => {
-          const newObj: Record<string, any> = {};
-          columns.forEach((col: any) => {
-            newObj[col.header] = item[col.apiKey];
-          });
-          return newObj;
-        });
-        this.tableConfig = {
-          columns,
-          rows
-        }
-        this.fxData.value = this.tableConfig;
-        this.tableFormControl.reset();
-        this.tableFormControl.setValue(this.tableConfig);
-      }
-    })
-  }
-
-  public deleteFile(file: any, index: number): void {
-    this.uploadedImages.splice(index, 1, null);
-    this.tableConfig.rows[index][this.tableConfig.columns.find((f: any) => f.cellType === 'file-upload')?.header] = null;
-    console.log("tableConfig", this.tableConfig);
-    this.tableFormControl.setValue(this.tableConfig);
-  }
-
-  public parseUrls(url: string, index: number): void {
-    this.http.get(url, { responseType: 'blob' }).subscribe({
-      next: (imageBlob: Blob) => {
-        const imageURL = URL.createObjectURL(imageBlob);
-        this.uploadedImages[index] = {
-          result: imageURL,
-          file: null
-        };
-      },
-      error: (error) => {
-        console.error('Error fetching image:', error);
-      }
-    });
-  }
-
-  public ngOnDestroy(): void {
-    this.destroy$.next(true);
-    this.destroy$.complete();
-  }
-}

package/src/lib/components/fx-form-component/fx-form-component.component.ts

@@ -1,86 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
-import { FxForm, FxFormComponent } from '@instantsys-labs/fx';
-import { DispatchToClinicComponent } from '../../custom-controls/dispatch-to-clinic/dispatch-to-clinic.component';
-import { FxBuilderWrapperService } from '../../fx-builder-wrapper.service';
-import { DynamicTableComponent } from '../dynamic-table/dynamic-table.component';
-import { ToggleButtonComponent } from '../toggle-button/toggle-button.component';
-import { UploaderComponent } from '../uploader/uploader.component';
-import { ToggleComponent } from '../toggle/toggle.component';
-
-@Component({
-  selector: 'fx-form-component',
-  standalone: true,
-  imports: [CommonModule, FxFormComponent],
-  template: `
-    <fx-form 
-      [fxForm]="fxForm" 
-      [value]="variables" 
-      (onSubmit)="onSubmit($event)" 
-      #form
-    >
-    </fx-form>
-  `,
-})
-export class FxFormWrapperComponent implements OnChanges, OnInit {
-  @ViewChild('form') form!: FxFormComponent;
-  @Input() fxForm!: FxForm;
-  @Input() variables: any;
-  @Output() fxFormSubmit = new EventEmitter<any>();
-
-  constructor(private fxWrapperService: FxBuilderWrapperService) {
-    this.registerCustomComponents();
-   }
-
-  public ngOnChanges(changes: SimpleChanges): void { 
-    // if('variables' in changes && !changes['fxForm']) {
-    //   this.fxWrapperService.variables$.next(this.variables);
-    // }
-    if ('variables' in changes) {
-      this.fxWrapperService.variables$.next(this.variables);
-    }
-  }
-
-  public ngOnInit(): void {
-    // if (!Boolean(this.fxWrapperService.getComponent('dispatch-to-clinic'))) {
-    //   this.fxWrapperService.registerCustomComponent('Dispatch To Clinic', 'dispatch-to-clinic', DispatchToClinicComponent);
-    // }
-    // if (!Boolean(this.fxWrapperService.getComponent('dynamic-table'))) {
-    //   this.fxWrapperService.registerCustomComponent('Dynamic Table', 'dynamic-table', DynamicTableComponent);
-    // }
-    // if (!Boolean(this.fxWrapperService.getComponent('toggle-button'))) {
-    //   this.fxWrapperService.registerCustomComponent('Toggle Button', 'toggle-button', ToggleButtonComponent);
-    // }
-    // if (!Boolean(this.fxWrapperService.getComponent('uploader'))) {
-    //   this.fxWrapperService.registerCustomComponent('Uploader', 'uploader', UploaderComponent);
-    // }
-    // if (!Boolean(this.fxWrapperService.getComponent('toggle'))) {
-    //   this.fxWrapperService.registerCustomComponent('Toggle', 'toggle', ToggleComponent);
-    // }
-  }
-
-
-  private registerCustomComponents(): void {
-    const components = [
-      { name: 'Dispatch To Clinic', key: 'dispatch-to-clinic', component: DispatchToClinicComponent },
-      { name: 'Dynamic Table', key: 'dynamic-table', component: DynamicTableComponent },
-      { name: 'Toggle Button', key: 'toggle-button', component: ToggleButtonComponent },
-      { name: 'Uploader', key: 'uploader', component: UploaderComponent },
-      { name: 'Toggle', key: 'toggle', component: ToggleComponent }
-    ];
-    
-    components.forEach(({ name, key, component }) => {
-      if (!this.fxWrapperService.getComponent(key)) {
-        this.fxWrapperService.registerCustomComponent(name, key, component);
-      }
-    });
-  }
-
-  public onSubmit(event: any): void {
-    this.fxFormSubmit.emit(event);
-  }
-
-  public submit(): void {
-    this.form.submit();
-  }
-}

package/src/lib/components/toggle/toggle.component.css

@@ -1,51 +0,0 @@
-label {
-    position: relative;
-    white-space: nowrap;
-    border-radius: 0;
-    border: 0 solid #999999;
-    margin: 0 14px 0 0;
-    width: 120px;
-    height: auto;
-    padding: 0;
-    text-align: center;
-    cursor: pointer;
-  }
-
-  .form-radio {
-    background-color: #DAE6F0;
-    color: white;
-    box-shadow: none;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-    border: 1px solid #DEDEDE;
-    padding: 9px 10px;
-    margin: 0;
-    white-space: nowrap;
-    width: 100%;
-    height: 38px;
-    background-image: none;
-    border-radius: 4px;
-  }
-
-  .form-radio:checked {
-    background-color: #ADD8E6;
-    border-color: #9BBBD6;
-  }
-
-  .form-radio:focus {
-    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black;
-    background-color: #ADD8E6;
-  }
-
-  .form-radio:hover {
-    border-color: #4682B4;
-  }
-
-  span {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 8px;
-    bottom: 0;
-    margin: 0;
-    padding: 0;
-  }

package/src/lib/components/toggle/toggle.component.html

@@ -1,12 +0,0 @@
-<fx-component [fxData]="fxData">
-    <div style="display: flex;">
-        <label>
-            <input [formControl]="toggleControl" type="radio" name="radio_grp" class="form-radio mr-3" value="true">
-            <span class="mt-1">{{setting('accept')}}</span>
-        </label>
-        <label>
-            <input [formControl]="toggleControl" type="radio" name="radio_grp" class="form-radio mr-3" value="false">
-            <span class="mt-1">{{setting('reject')}}</span>
-        </label>
-    </div>
-</fx-component>

package/src/lib/components/toggle/toggle.component.ts

@@ -1,33 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectorRef, Component, inject } from '@angular/core';
-import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { FxBaseComponent, FxComponent, FxSetting, FxStringSetting, FxValidation, FxValidatorService } from '@instantsys-labs/fx';
-
-@Component({
-  selector: 'fx-toggle',
-  standalone: true,
-  imports: [CommonModule, FxComponent, FormsModule, ReactiveFormsModule],
-  templateUrl: './toggle.component.html',
-  styleUrl: './toggle.component.css'
-})
-export class ToggleComponent extends FxBaseComponent {
-  public toggleControl = new FormControl<boolean>(false)
-
-  constructor(private cdr: ChangeDetectorRef) {
-    super(cdr)
-    this.onInit.subscribe((fxData)=>{
-      this._register(this.toggleControl);
-    })
-  }
-
-  protected settings(): FxSetting[] {
-    return [
-      new FxStringSetting({ key: 'accept', $title: 'Accept Text', value: 'Yes' }),
-      new FxStringSetting({ key: 'reject', $title: 'Reject Text', value: 'No' })
-    ];
-  }
-
-  protected validations(): FxValidation[] {
-    return [FxValidatorService.required];
-  }
-}

package/src/lib/components/toggle-button/toggle-button.component.css

@@ -1,22 +0,0 @@
-.custom-toggle-btn {
-    padding: 10px 20px;
-    font-size: 16px;
-    font-weight: bold;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    background-color: #ccc;
-    transition: background-color 0.3s;
-  }
-
-  .custom-toggle-btn.active {
-    background-color: #4caf50;
-  }
-
-  .custom-toggle-btn:hover {
-    opacity: 0.9;
-  }
-
-
-  

package/src/lib/components/toggle-button/toggle-button.component.html

@@ -1,10 +0,0 @@
-<fx-component [fxData]="fxData">
-    <button
-        class="custom-toggle-btn"
-        [class]="setting('classes') ? setting('classes'): ''"
-        [class.active]="toggleBtnControl.value"
-        (click)="toggle()"
-        >
-        {{ toggleBtnControl.value ? setting('active-text') : setting('inactive-text') }}
-    </button>
-</fx-component>

package/src/lib/components/toggle-button/toggle-button.component.ts

@@ -1,40 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormControl, FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
-import { FxBaseComponent, FxComponent, FxIconSetting, FxSetting, FxStringSetting, FxValidation, FxValidatorService } from '@instantsys-labs/fx';
-
-@Component({
-  selector: 'lib-toggle-button',
-  standalone: true,
-  imports: [CommonModule, FxComponent, ReactiveFormsModule, FormsModule],
-  templateUrl: './toggle-button.component.html',
-  styleUrl: './toggle-button.component.css'
-})
-export class ToggleButtonComponent extends FxBaseComponent { 
-  public toggleBtnControl = new UntypedFormControl(false);
-  public isToggled = false;
-
-  constructor(private cdr: ChangeDetectorRef) {
-    super(cdr);
-    this.onInit.subscribe((fxData)=>{
-      this._register(this.toggleBtnControl);
-    })
-  }
-
-  public toggle(): void {
-    this.isToggled = !this.toggleBtnControl.value;
-    this.toggleBtnControl.setValue(this.isToggled);
-  }
-
-  protected settings(): FxSetting[] {
-    return [
-      new FxStringSetting({ key: 'classes', $title: 'Classes', value: '' }),
-      new FxStringSetting({ key: 'active-text', $title: 'Active Text', value: 'On' }),
-      new FxStringSetting({ key: 'inactive-text', $title: 'Inactive Text', value: 'Off' }),
-    ];
-  }
-
-  protected validations(): FxValidation[] {
-    return [FxValidatorService.required];
-  }
-}

package/src/lib/components/uploader/uploader.component.css

@@ -1,49 +0,0 @@
-.custom-upload {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-  }
-  
-  .custom-upload button {
-    padding: 10px 20px;
-    font-size: 16px;
-    font-weight: bold;
-    color: white;
-    background-color: #007bff;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s;
-  }
-  
-  .custom-upload button:hover {
-    background-color: #0056b3;
-  }
-  
-  .custom-upload .file-list {
-    display: flex;
-    /* margin-top: 10px; */
-  }
-  
-  .custom-upload .file-list p {
-    margin: 0;
-    padding: 5px;
-    background-color: #f1f1f1;
-    border: 1px solid #ddd;
-    border-radius: 3px;
-    font-size: 14px;
-  }
-
-  .custom-upload .file-list > div {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .custom-upload .file-list .file-thumbnail {
-    width: 100px;
-    height: 100px;
-    object-fit: contain;
-  }
-  

package/src/lib/components/uploader/uploader.component.html

@@ -1,23 +0,0 @@
-<fx-component [fxData]="fxData">
-    <div class="custom-upload">
-        <button type="button" (click)="fileInput.click()">
-          {{setting('upload-text')}}
-        </button>
-        <input
-          #fileInput
-          type="file"
-          [multiple]="setting('multiple-upload')"
-          (change)="onFileSelected($event)"
-          [formControl]="uploadFileControl"
-          hidden
-        />
-        <div class="file-list">
-          <ng-container *ngIf="uploadedFiles?.length">
-            <div (click)="deleteFile(file?.id)" *ngFor="let file of uploadedFiles">
-              <img class="file-thumbnail" style="border-radius: 4px" [src]="file?.previewUrl" alt="">
-              <!-- <p>{{file?.name}}</p> -->
-            </div>
-          </ng-container>
-        </div>
-      </div>
-</fx-component>