fx-form-builder-wrapper 0.0.11 → 0.0.13

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

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

@@ -1,64 +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) { }
-
-  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

@@ -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>

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

@@ -1,59 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectorRef, Component } from '@angular/core';
-import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
-import { FxBaseComponent, FxComponent, FxSelectSetting, FxSetting, FxStringSetting, FxValidation, FxValidatorService } from '@instantsys-labs/fx';
-import { v4 as uuidv4} from 'uuid';
-
-@Component({
-  selector: 'fx-uploader',
-  standalone: true,
-  imports: [CommonModule, FxComponent, FormsModule, ReactiveFormsModule],
-  templateUrl: './uploader.component.html',
-  styleUrl: './uploader.component.css'
-})
-export class UploaderComponent extends FxBaseComponent {
-  public uploadFileControl = new UntypedFormControl();
-  public uploadedFiles: Array<any> = [];
-
-  constructor(private cdr: ChangeDetectorRef) {
-    super(cdr)
-    this.onInit.subscribe((fxData)=>{
-      this._register(this.uploadFileControl);
-    })
-  }
-
-  public onFileSelected(event: Event) {
-    const input = event.target as HTMLInputElement;
-    if (input.files) {
-      for(let i = 0; i < input?.files?.length; i++) {
-        const file = input.files[i];
-        const reader = new FileReader();
-        reader.onload = e => {
-          this.uploadedFiles.push({
-            file: file,
-            previewUrl: e.target?.result,
-            name: file?.name,
-            id: uuidv4()
-          })
-          this.uploadFileControl.setValue(this.uploadedFiles)
-        }
-        reader.readAsDataURL(file);
-      }
-    }
-  }
-
-  public deleteFile(id: string): void {
-    this.uploadedFiles = this.uploadedFiles.filter(file => file?.id !== id);
-  }
-
-  protected settings(): FxSetting[] {
-    return [
-      new FxStringSetting({ key: 'upload-text', $title: 'Upload Text', value: 'Upload File'}),
-      new FxSelectSetting({key: 'multiple-upload', $title: 'Multiple Upload', value: false}, [{option: 'Enable', value: true}, {option: 'Disable', value: false}])
-    ];
-  }
-
-  protected validations(): FxValidation[] {
-    return [FxValidatorService.required];
-  }
-}

package/src/lib/custom-controls/dispatch-to-clinic/dispatch-to-clinic.component.html

@@ -1,78 +0,0 @@
-<fx-component [fxData]="fxData">
-    <section
-        class="justify-content-around lg:justify-content-between w-full white-color border-1 border-solid stroke_light_grey p-3 mb-3 mt-3">
-        <form [formGroup]="dispatchForm">
-            <div class="grid">
-                <!-- Courier Name -->
-                <div class="col-12 sm:col-6 md:col-3 input-container">
-                    <label for="courierName" class="input-title">Courier Name</label>
-                    <input autocomplete="off" formControlName="courierName" type="text" id="courierName"
-                        name="courierName" class="p-inputtext p-component p-element input-field border-1 w-full"
-                        placeholder="enter courier name" />
-
-                    <!-- validation -->
-                    <small *ngIf="dispatchForm.get('courierName')?.invalid && dispatchForm.get('courierName')?.touched"
-                        class="text-danger-color block mt-1">
-                        Courier Name is required.
-                    </small>
-                    <!-- validation -->
-                </div>
-                <!-- Courier Name -->
-
-                <!-- Tracking Number -->
-                <div class="col-12 sm:col-6 md:col-3 input-container">
-                    <label for="trackingNumber" class="input-title">Tracking Number</label>
-                    <input autocomplete="off" formControlName="trackingNumber" type="text" id="trackingNumber"
-                        name="trackingNumber" class="p-inputtext p-component p-element input-field border-1 w-full"
-                        placeholder="enter tracking number" />
-                    <small
-                        *ngIf="dispatchForm.get('trackingNumber')?.invalid && dispatchForm.get('trackingNumber')?.touched"
-                        class="text-danger-color block mt-1">
-                        Tracking Number is required.
-                    </small>
-                </div>
-                <!-- Tracking Number -->
-
-                <!-- Tracking URL -->
-                <div class="col-12 sm:col-6 md:col-3 input-container">
-                    <label for="trackingUrl" class="input-title">Tracking URL</label>
-                    <input autocomplete="off" formControlName="trackingUrl" type="text" id="trackingUrl"
-                        name="trackingUrl" class="p-inputtext p-component p-element input-field border-1 w-full"
-                        placeholder="enter tracking url" />
-                    <small *ngIf="dispatchForm.get('trackingUrl')?.invalid && dispatchForm.get('trackingUrl')?.touched"
-                        class="text-danger-color block mt-1">
-                        <span *ngIf="dispatchForm.get('trackingUrl')?.errors?.['required']">Tracking URL is
-                            required.</span>
-                        <span *ngIf="dispatchForm.get('trackingUrl')?.errors?.['pattern']">Invalid URL format.</span>
-                    </small>
-                </div>
-                <!-- Tracking URL -->
-
-                <!-- Notes -->
-                <div class="col-12 md:col-6 input-container">
-                    <label for="notes" class="input-title">Notes</label>
-                    <textarea autocomplete="off" formControlName="notes" rows="5" id="notes" name="notes"
-                        class="p-inputtext p-component p-element input-field border-1 w-full"
-                        placeholder="enter notes"></textarea>
-                    <small *ngIf="dispatchForm.get('notes')?.invalid && dispatchForm.get('notes')?.touched"
-                        class="text-danger-color block mt-1">
-                        Notes are required.
-                    </small>
-                </div>
-                <!-- Notes -->
-
-                <!-- Address with Copy Icon -->
-                <div class="col-12 md:col-6 pt-0">
-                    <div class="mb-1">Address</div>
-                    <ng-container *ngIf="(clinicAddress$ | async) as address">
-                        <address #completeAddress>{{address?.street}}, {{address?.state}}, {{address?.postalCode}}
-                            <i class="pi pi-copy cursor-pointer text-xl text-secondary-color"
-                                (click)="copyToClipboard(completeAddress.textContent)"></i>
-                        </address>
-                    </ng-container>
-                </div>
-                <!-- Address with Copy Icon -->
-            </div>
-        </form>
-    </section>
-</fx-component>