fx-form-builder-wrapper 0.0.11

package/README.md

@@ -0,0 +1,24 @@
+# FxBuilderWrapper
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project fx-builder-wrapper` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project fx-builder-wrapper`.
+> Note: Don't forget to add `--project fx-builder-wrapper` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build fx-builder-wrapper` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build fx-builder-wrapper`, go to the dist folder `cd dist/fx-builder-wrapper` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test fx-builder-wrapper` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/fx-builder-wrapper",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "fx-form-builder-wrapper",
+  "version": "0.0.11",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0",
+    "@instantsys-labs/fx": "2.0.2",
+    "uuid": "^11.0.5",
+    "primeng": "^18.0.2",
+    "tailwindcss-primeui": "^0.4.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

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

@@ -0,0 +1 @@
+<p>button works!</p>

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

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component } from '@angular/core';
+import { FxBaseComponent, FxSetting, FxStringSetting, FxValidation, FxValidatorService } from '@instantsys-labs/fx';
+
+@Component({
+  selector: 'lib-button',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.css'
+})
+export class ButtonComponent extends FxBaseComponent {
+  constructor(private cdr: ChangeDetectorRef) {
+    super(cdr)
+  }
+
+  protected settings(): FxSetting[] {
+    return [new FxStringSetting({ key: 'heading-text', $title: 'Heading Text', value: 'My Default Value' })];
+  }
+
+  protected validations(): FxValidation[] {
+    return [FxValidatorService.required];
+  }
+}

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

@@ -0,0 +1,69 @@
+<fx-settings-panel [fxData]="fxData" (configuration)="onChangeConfiguration($event)">
+    <div style="padding: 0 1.5rem;" *ngIf="fxData">
+        <table style="width: 100%;">
+            <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 style="text-align: center;" *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'"
+                                [(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: center;">
+                                    <img  width="100" *ngIf="uploadedImages[rowIndex]" [src]="uploadedImages[rowIndex]"
+                                        alt="Uploaded Image" (click)="deleteFile(uploadedImages[rowIndex], rowIndex)"/>
+                                    <input [class]="column?.className" type="file" name="file" #uploadFile [(ngModel)]="row[column.header]" 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

@@ -0,0 +1,201 @@
+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<string | 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;
+              dynamicTableValues?.rows?.forEach((item: any, index: number) => {
+                this.uploadedImages[index] = item[fileHeaderName] ? item[fileHeaderName]: null;
+              })
+              this.tableConfig = dynamicTableValues;
+              this.fxData.value = this.tableConfig;
+              this.tableFormControl.reset();
+              this.tableFormControl.setValue(this.tableConfig);
+            }
+          }
+    })
+  }
+
+  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] = reader.result as string;
+      };
+      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.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);
+  }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+}

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

@@ -0,0 +1,64 @@
+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) { }
+
+  public ngOnChanges(changes: SimpleChanges): void { 
+    if('variables' in changes && !changes['fxForm']) {
+      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);
+    }
+  }
+
+  public onSubmit(event: any): void {
+    this.fxFormSubmit.emit(event);
+  }
+
+  public submit(): void {
+    this.form.submit();
+  }
+}

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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,12 @@
+<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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,22 @@
+.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

@@ -0,0 +1,10 @@
+<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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,49 @@
+.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

@@ -0,0 +1,23 @@
+<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>