fx-form-builder-wrapper 0.0.11

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

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

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

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

@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, inject } from '@angular/core';
+import { FormGroup, ReactiveFormsModule, Validators, FormBuilder, FormsModule } from '@angular/forms';
+import { FxBaseComponent, FxComponent, FxSetting, FxStringSetting, FxValidation, FxValidatorService } from '@instantsys-labs/fx';
+import { BehaviorSubject, take } from 'rxjs';
+
+@Component({
+  selector: 'lib-dispatch-to-clinic',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent],
+  templateUrl: './dispatch-to-clinic.component.html'
+})
+export class DispatchToClinicComponent extends FxBaseComponent {
+  private fb = inject(FormBuilder);
+
+  public clinicAddress$: BehaviorSubject<any> = new BehaviorSubject<any>({});
+
+  public dispatchForm: FormGroup = this.fb.group({
+    courierName: ['', Validators.required],
+    trackingNumber: ['', Validators.required],
+    trackingUrl: ['', [Validators.required, Validators.pattern('https?://.+')]],
+    notes: ['', Validators.required]
+  })
+
+  constructor(private cdr: ChangeDetectorRef) {
+    super(cdr);
+
+    this.onInit.subscribe(() => {
+      this._register(this.dispatchForm);
+    });
+  }
+
+  protected settings(): FxSetting[] {
+    return [new FxStringSetting({ key: 'heading-text', $title: 'Heading Text', value: 'My Default Value' })];
+  }
+
+  protected validations(): FxValidation[] {
+    return [FxValidatorService.required];
+  }
+
+  public copyToClipboard(address: any): void {
+    navigator.clipboard.writeText(address);
+  }
+}

package/src/lib/fx-builder-wrapper.component.ts

@@ -0,0 +1,64 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { FxBuilderConfiguration, FxComponentBuilder, FxForm, FxMode, FxScope, FxUtils } 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 './components/dynamic-table/dynamic-table.component';
+import { ToggleButtonComponent } from './components/toggle-button/toggle-button.component';
+import { UploaderComponent } from './components/uploader/uploader.component';
+import { ToggleComponent } from './components/toggle/toggle.component';
+
+@Component({
+  selector: 'fx-builder-wrapper',
+  standalone: true,
+  imports: [CommonModule, FxComponentBuilder],
+  template: `
+    <fx-component-builder 
+        #componentBuilder 
+        [fx-form]="fxForm" 
+        [configuration]="fxConfiguration" 
+        [scope]="FxScope.BUILDER"
+        >
+    </fx-component-builder>
+  `,
+  styles: ``
+})
+export class FxBuilderWrapperComponent implements OnInit {
+  @ViewChild('componentBuilder') componentBuilder!: FxComponentBuilder;
+  @Input({ alias: 'fx-form', required: true }) fxForm: FxForm = FxUtils.createNewForm();
+  public fxMode: FxMode = FxMode.EDIT;
+  public fxConfiguration: FxBuilderConfiguration = {
+    settings: true,
+    logics: true,
+    customControls: true,
+  }
+
+  protected readonly FxScope = FxScope;
+  protected readonly FxMode = FxMode;
+
+  constructor(private fxWrapperService: FxBuilderWrapperService) { }
+
+  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 getParsedForm(): FxForm {
+    return this.componentBuilder.getParsedForm();
+  }
+}
+
+

package/src/lib/fx-builder-wrapper.service.ts

@@ -0,0 +1,34 @@
+import { Injectable, Type } from '@angular/core';
+import { FxBaseComponent, FxComponentRegistryService } from '@instantsys-labs/fx';
+import { BehaviorSubject, Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FxBuilderWrapperService {
+  public variables$ = new BehaviorSubject<any | null>(null);
+  constructor(private fxComponentRegistry: FxComponentRegistryService) { }
+
+  public registerCustomComponent(title: string, selector: string, component: Type<FxBaseComponent>
+  ): void {
+    this.fxComponentRegistry.registerComponent(selector, component, {
+      registeringAs: "CUSTOM",
+      libraryItem: {
+        title,
+        icon: 'fa-eye',
+        fxData: {
+          id: null,
+          name: selector,
+          value: "",
+          selector: selector,
+          elements: [],
+          events: []
+        }
+      },
+    })
+  }
+
+  public getComponent(selector: string): Type<FxBaseComponent> | undefined {
+    return this.fxComponentRegistry.getComponent(selector);
+  }
+}

package/src/lib/panel/configuration-panel/configuration-panel.component.css

@@ -0,0 +1,65 @@
+/* .form__input {
+    width: clamp(120px, 50vw, 420px);
+    width: 100%;
+    height: 2.5rem;
+    padding: 0 1.25rem;
+    border: 1px solid black;
+    border-radius: 2px;
+    margin: 0.625rem auto;
+    transition: all 250ms;
+} */
+
+:host ::ng-deep .p-dialog {
+  .p-dialog-content {
+    padding: 1.5rem;
+  }
+
+  .p-dialog-header {
+    background: white;
+    padding: 1rem;
+    font-size: 1.25rem;
+    font-weight: bold;
+  }
+}
+
+.form__input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+label {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+
+.button-group {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding-top: 1rem;
+}
+
+button {
+  padding: 8px 12px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.cancel {
+  background: #ccc;
+  color: black;
+}
+
+.save {
+  background: #007bff;
+  color: white;
+}
+
+button:hover {
+  opacity: 0.8;
+}

package/src/lib/panel/configuration-panel/configuration-panel.component.html

@@ -0,0 +1,96 @@
+<p-dialog [modal]="true" [draggable]="false" [(visible)]="visible" [style]="{ width: '35rem' }">
+        <ng-content #header>
+            <div class="flex p-2 bg-white border-2">
+                <p class="text-base">Edit Configuration</p>
+            </div>
+        </ng-content>
+
+        <ng-template #content>
+            <div class="flex flex-col gap-4 bg-white p-2 border-2 border-gray-200">
+                <div class="flex items-center gap-4 mb-8">
+                    <label for="rows" class="font-semibold w-24">Rows</label>
+                    <input type="text" [readonly]="enableAPI" [(ngModel)]="rows" placeholder="rows" class="form__input" id="name" autocomplete="rows" />
+                </div>
+                <div class="flex items-center gap-4 mb-8">
+                    <label for="enableAPI" class="font-semibold w-24">Enable API</label>
+                    <input type="checkbox" [(ngModel)]="enableAPI" placeholder="API Url" id="enableAPI" autocomplete="enableAPI" />
+                </div>
+                @if (enableAPI) {
+                  <div class="flex items-center gap-4 mb-8">
+                      <label for="api" class="font-semibold w-24">API</label>
+                      <input type="text" [(ngModel)]="api" placeholder="Enter API Url" id="api" autocomplete="api" />
+                  </div>
+                }
+                <div class="flex items-center gap-4 mb-8">
+                    <div class="grid grid-nogutter">
+                        <div class="col-2 mb-3 flex items-center gap-3">
+                            <p class="text-sm font-semibold">Columns:</p>
+                            <button type="button" (click)="addColumn()">Add Column</button>
+                        </div>
+                        <div class="col-10">
+                            <form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
+                                <div formArrayName="columns">
+                                  <div *ngFor="let column of columns.controls; let i = index" [formGroupName]="i">
+                                    <div class="flex gap-4 mb-2">
+                                      <label class="white-space-nowrap">Column Name:</label>
+                                      <input formControlName="header" placeholder="Enter Column Name" class="form__input" />
+                                    </div>
+                                    <div class="flex gap-4">
+                                      <label>Column Type:</label>
+                                      <select formControlName="cellType">
+                                        <option *ngFor="let type of columnTypes" [value]="type">{{type}}</option>
+                                      </select>
+                                    </div>
+                                    @if (enableAPI) {
+                                      <div class="flex gap-4 mt-2">
+                                        <label>API Value Key:</label>
+                                        <input formControlName="apiKey" placeholder="Enter Value Key" class="form__input" />
+                                      </div>
+                                    }
+                              
+                                    <!-- Show options if columnType is 'radio-group' or 'dropdown' -->
+                                    <div *ngIf="['radio-group', 'dropdown'].includes(column.value.cellType)">
+                                      <div formArrayName="options">
+                                        <div *ngFor="let option of getOptions(i).controls; let j = index" [formGroupName]="j">
+                                          <label>Option {{ j + 1 }}:</label>
+                                          <input formControlName="optionName" placeholder="Enter option name" class="form__input" />
+                                          <input formControlName="optionValue" placeholder="Enter option value" class="form__input" />
+                                          <button type="button" (click)="getOptions(i).removeAt(j)">Remove Option</button>
+                                        </div>
+                                      </div>
+                                      <button type="button" (click)="addOption(i)">Add Option</button>
+                                    </div>
+
+                                    <!-- Show apiUrl if columnType is 'smart-dropdown' -->
+                                     <div *ngIf="['smart-dropdown'].includes(column.value.cellType)" class="flex gap-2">
+                                         <div>
+                                             <label>API Url</label>
+                                             <input formControlName="apiUrl" placeholder="Enter api url" class="form__input" />
+                                           </div>
+                                         <div>
+                                             <label>Value Key</label>
+                                             <input formControlName="valueKey" placeholder="Enter Value Key" class="form__input" />
+                                           </div>
+                                         <div>
+                                             <label>Label Key</label>
+                                             <input formControlName="labelKey" placeholder="Enter Label Key" class="form__input" />
+                                           </div>
+                                     </div>
+                              
+                                    <button type="button" (click)="columns.removeAt(i)">Remove Column</button>
+                                  </div>
+                                </div>
+                              </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ng-template>
+
+        <ng-template #footer>
+            <div class="flex justify-end bg-blue-500 gap-4 w-full">
+                <p-button label="Cancel" severity="secondary" (click)="closeDialog()" />
+                <p-button styleClass="border border-indigo-600" label="Save" (click)="saveConfiguration()" />
+            </div>
+        </ng-template>
+</p-dialog>

package/src/lib/panel/configuration-panel/configuration-panel.component.ts

@@ -0,0 +1,90 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { Dialog } from 'primeng/dialog';
+import { InputTextModule } from 'primeng/inputtext';
+import { Card } from 'primeng/card';
+import { FormArray, FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'fx-configuration-panel',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, ButtonModule, Dialog, InputTextModule, FormsModule],
+  templateUrl: './configuration-panel.component.html',
+  styleUrl: './configuration-panel.component.css'
+})
+export class ConfigurationPanelComponent {
+  @Input() visible: boolean = false;
+  @Output() isVisible = new EventEmitter<boolean>();
+  @Output() configuration = new EventEmitter<any>();
+
+  public rows: number = 1;
+  public enableAPI: boolean = false;
+  public api: string = '';
+
+  public dynamicForm: FormGroup;
+
+  public columnTypes: string[] = ['text', 'input-text', 'input-number', 'dropdown', 'smart-dropdown', 'checkbox', 'radio', 'radio-group', 'file-upload', 'textarea'];
+
+  constructor(private fb: FormBuilder) {
+    this.dynamicForm = this.fb.group({
+      columns: this.fb.array([])
+    });
+  }
+
+  get columns(): FormArray {
+    return this.dynamicForm.get('columns') as FormArray;
+  }
+
+  // Add Column Dynamically
+  public addColumn(): void {
+    const columnFormGroup = this.fb.group({
+      header: ['', Validators.required],
+      cellType: ['', Validators.required],
+      placeholder: '',
+      options: this.fb.array([]),
+      apiUrl: '',
+      valueKey: '',
+      labelKey: '',
+      className: '',
+      apiKey: ''
+    })
+    this.columns.push(columnFormGroup);
+  }
+
+  // Remove Column
+  public removeColumn(index: number): void {
+    this.columns.removeAt(index);
+  }
+
+  // Add Options Dynamically
+  public addOption(columnIndex: number) {
+    const optionGroup = this.fb.group({
+      optionName: ['', Validators.required],
+      optionValue: ['', Validators.required]
+    });
+
+    const column = this.columns.at(columnIndex) as FormGroup;
+    const options = column.get('options') as FormArray;
+    options.push(optionGroup);
+  }
+
+  // Get options FormArray for a specific column
+  public getOptions(columnIndex: number) {
+    const column = this.columns.at(columnIndex) as FormGroup;
+    return column.get('options') as FormArray;
+  }
+
+  public closeDialog(): void {
+    this.isVisible.emit(false);
+  }
+
+  public saveConfiguration(): void {
+    this.configuration.emit({ rows: this.rows, columns: this.dynamicForm.value?.columns, enableAPI: this.enableAPI, api: this.api });
+    this.isVisible.emit(false);
+  }
+
+  public onSubmit(): void {
+    console.log("Value columns formArray", this.dynamicForm.value);
+  }
+}

package/src/lib/panel/settings-panel/settings-panel.component.css

@@ -0,0 +1,30 @@
+    .fx-element {
+        position: relative;
+    }
+
+  .fx-element .fx-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.1); /* Light gray with 0.5 transparency */
+      z-index: -1; /* Place it below the content by default */
+      pointer-events: none; /* Allow interaction with the underlying content */
+      opacity: 0; /* Initially hidden */
+  }
+
+  .fx-element:hover .fx-overlay {
+    z-index: 1; /* Bring the overlay above content */
+    opacity: 1; /* Make the overlay visible */
+    pointer-events: auto; /* Allow interaction with the overlay */
+  }
+
+  .fx-element:hover .fx-overlay .fx-actions{
+    position: absolute;
+    margin-top: -26px;
+    height: 25px;
+    border-top-right-radius: 10px;
+    width: 100%;
+    border-top-left-radius: 10px;
+  }

package/src/lib/panel/settings-panel/settings-panel.component.html

@@ -0,0 +1,28 @@
+<fx-configuration-panel [visible]="visible" (isVisible)="visible = $event" (configuration)="configuration.emit($event)"></fx-configuration-panel>
+
+<div class="fx-element">
+    <ng-content></ng-content>
+    <ng-container *ngIf="fxData.$fxForm?.$mode !== FxMode.VIEW">
+        <div class="fx-overlay border-gray-400 border rounded cursor-pointer" (click)="onElementSelect(fxData)"
+            (dblclick)="openSettingDialog()">
+        <div class="fx-actions flex justify-between">
+
+            <div class="bg-gray-700 text-gray-300 px-2 rounded-t ml-2 text-xs flex justify-center items-center">
+            <div>#{{ fxData.name }}-<span class="text-xs italic">{{ fxData.id }}</span></div>
+            </div>
+
+            <div class="flex justify-around items-end mr-2">
+            <div class="cursor-pointer bg-secondary text-white w-8 mr-1 text-center rounded-t" title="Settings"
+                (click)="fxSettingService.openSetting(fxData)">
+                <i class="fa fa-cog text-xs"></i>
+            </div>
+            <div (click)="deleteElement(fxData)"
+                class="cursor-pointer bg-red-600 text-white w-8 mr-1 text-center rounded-t" title="Delete">
+                <i class="fa fa-times  text-xs"></i>
+            </div>
+            </div>
+        </div>
+        </div>
+        <ng-container #dynamicComponentContainer></ng-container>
+  </ng-container>
+</div>

package/src/lib/panel/settings-panel/settings-panel.component.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, EventEmitter, inject, Input, OnInit, Output, ViewChild, ViewContainerRef } from '@angular/core';
+import { FxComponent, FxData, FxMode, FxSettingComponent, FxSettingsService, FxUtils } from '@instantsys-labs/fx';
+import { Dialog } from 'primeng/dialog';
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { ConfigurationPanelComponent } from '../configuration-panel/configuration-panel.component';
+
+@Component({
+  selector: 'fx-settings-panel',
+  standalone: true,
+  imports: [CommonModule, ButtonModule, InputTextModule, ConfigurationPanelComponent],
+  templateUrl: './settings-panel.component.html',
+  styleUrl: './settings-panel.component.css'
+})
+export class SettingsPanelComponent extends FxComponent implements OnInit {
+    @Output() configuration = new EventEmitter<any>();
+    public visible: boolean = false;
+
+    public openSettingDialog(): void {
+      this.visible = true;
+    }
+}

package/src/public-api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of fx-builder-wrapper
+ */
+
+export * from './lib/fx-builder-wrapper.service';
+export * from './lib/fx-builder-wrapper.component'; // builder // admin
+export * from './lib/components/fx-form-component/fx-form-component.component'; // form preview

package/src/styles/styles.css

@@ -0,0 +1,22 @@
+@import "../node_modules/ckeditor5/dist/ckeditor5.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base{
+  :root {
+    --color-primary: 21 83 165;
+    --color-secondary: 245 150 14;
+  }
+
+  .card {
+    @apply p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100;
+  }
+
+  .ck-powered-by-balloon{
+    display: none !important;
+  }
+
+}
+

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}