fx-form-builder-wrapper 0.0.53 → 0.0.55

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>

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

@@ -1,44 +0,0 @@
-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/form-builder.css

@@ -1,9 +0,0 @@
-
-/* @import "../../../../node_modules/@instantsys-labs/fx/css/styles.css";
-@import "../../../../node_modules/@instantsys-labs/icons/fonts/css/all.css"; */
-
-
-/* @import "../../node_modules/@instantsys-labs/fx/css/styles.css";
-@import "../../node_modules/@instantsys-labs/icons/fonts/css/all.css"; */
-
-

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

@@ -1,68 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit, ViewChild, ViewEncapsulation } 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>
-  `,
-  styleUrl: './form-builder.css',
-})
-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();
-  }
-
-  public getInitializedFxForm(): FxForm {
-    return FxUtils.createNewForm(); 
-  }
-}
-
-

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

@@ -1,38 +0,0 @@
-import { Injectable, Type } from '@angular/core';
-import { FxBaseComponent, FxComponentRegistryService, FxForm, FxUtils } 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);
-  }
-
-   public getInitializedFxForm(): FxForm {
-      return FxUtils.createNewForm(); 
-    }
-}

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

@@ -1,154 +0,0 @@
-/* .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;
-} */
-@import "../../../../../../node_modules/primeng//resources/primeng.min.css";
-
-
-/* :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;
-  }
-} */
-
-.customDialogClass .p-dialog {
-  height: auto;
-}
-.customDialogClass .p-dialog-header {
-  padding: 0.8rem 0.55rem !important;
-  background-color: white !important;
-}
-.customDialogClass .p-dialog-header-close-icon {
-  color: black !important;
-}
-.customDialogClass .p-dialog-content {
-  border-top-left-radius: 0%;
-  padding: 0px;
-}
-
-
-.p-dialog .p-dialog-header {
-  background-color: white !important; 
-  border-bottom: 2px solid #e5e7eb; 
-  padding: 12px 16px;
-  font-weight: bold;
-  font-size: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-
-.p-dialog-mask {
-  background: rgba(0, 0, 0, 0.5) !important; 
-}
-
-.p-dialog .p-dialog-content {
-  background-color: white;
-  padding: 16px;
-}
-
-.p-dialog .p-dialog-footer {
-  background-color: #f3f4f6;
-  padding: 12px 16px;
-  border-top: 2px solid #e5e7eb;
-}
-
-.p-dialog .p-dialog-content::-webkit-scrollbar {
-  width: 8px;
-}
-
-.p-dialog .p-dialog-content::-webkit-scrollbar-track {
-  background-color: #f1f1f1;
-}
-
-.p-dialog .p-dialog-content::-webkit-scrollbar-thumb {
-  background-color: #FAA762;
-  border-radius: 10px;
-}
-
-.p-dialog .p-dialog-content::-webkit-scrollbar-thumb:hover {
-  background-color: #FAA762;
-}
-
-.custom-save-button {
-  background-color: #FAA762 !important;
-  color: white !important;
-  border: 1px solid #FAA762 !important;
-}
-
-.custom-save-button:hover {
-  background-color: #e59550 !important; 
-  border-color: #e59550 !important;
-}
-
-
-.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;
-}
-
-
-.card-width{
-  width:295px !important;
-  flex-shrink: 0;
-
-}
-
-.justify-end{
-  justify-content: end;
-}
-
-
-
-

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

@@ -1,162 +0,0 @@
-<p-dialog header="Edit Configurations"  [modal]="true" [draggable]="false" [(visible)]="visible" [style]="{width: '70rem'}" class="customDialogClass">
-  <!-- <ng-template pTemplate="header">
-    <div class="flex p-2 bg-white border-2">
-        <p class="text-base">Edit Configurations</p>
-    </div>
-  </ng-template> -->
-            <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 w-full">
-                  <div class="w-1/3">
-                    <label for="rows" class="font-semibold w-24">Rows</label>
-                    <input type="text" [disabled]="enableAPI" [(ngModel)]="rows" placeholder="rows" class="form__input" id="name" autocomplete="rows" />
-                  </div>
-                  <div class="w-1/3">
-                    <label for="enableAPI" class="font-semibold w-24">Enable API</label>
-                    <input type="checkbox" [(ngModel)]="enableAPI" placeholder="API Url" id="enableAPI"  autocomplete="enableAPI" />
-                  </div>
-                  <div class="w-1/3">
-                    @if (enableAPI) {
-                    <ng-container>
-                    <label for="api" class="font-semibold w-24">API</label>
-                    <input type="text" [(ngModel)]="api" placeholder="Enter API Url" id="api" class="form__input" autocomplete="api" />
-                  </ng-container>
-                }
-                  </div> 
-                    
-                </div>
-                <!-- <div class="flex items-center gap-4 mb-8">
-                  <div class="w-1/2">
-                    
-                  </div>
-                  <div class="w-1/2">
-                    
-                    
-                  </div>
-                    
-                   
-                </div>
-                
-                  <div class="flex items-center gap-4 mb-8">
-                    <div class="w-1/2">
-                      
-                    </div>
-                    <div class="w-1/2">
-                      
-                    </div>
-                      
-                      
-                  </div> -->
-                
-                <div class="flex flex-wrap gap-4 mb-8">
-                  
-                  <div class="w-full flex items-center justify-between">
-                      <p class="text-sm font-semibold">Columns:</p>
-                      <!-- <button type="button" (click)="addColumn()" class="custom-save-button">Add Column</button> -->
-                  </div>
-              
-                  <div class="w-full overflow-x-auto">
-                    <form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
-                        <!-- Flex container with nowrap to keep all columns in a single row -->
-                        <div formArrayName="columns" class="flex gap-4 flex-nowrap whitespace-nowrap">
-                            <div *ngFor="let column of columns.controls; let i = index" [formGroupName]="i" 
-                                 class="border p-4 rounded-lg min-w-[20rem] flex-shrink-0 card-width">
-                                 <div class="top-2 right-2 flex gap-2 justify-end">
-                                  <button type="button" (click)="duplicateColumn(i)" 
-                                          class="bg-green-500 text-white px-3 py-1 rounded-md hover:bg-green-600">
-                                      ➕
-                                  </button>
-                                  <button type="button" (click)="removeColumn(i)" 
-                                          class="text-white px-3 py-1 rounded-md hover:bg-red-600" *ngIf="columns.length>1">
-                                      ❌
-                                  </button>
-                              </div>
-                                <!-- Columns in a Single Row -->
-                                <div class="grid grid-cols-1 gap-4 items-center mb-2">
-                                    <div class="col-span-3">
-                                        <label class="font-semibold">Column Name:</label>
-                                        <input formControlName="header" placeholder="Enter Column Name" 
-                                               class="w-full border rounded-md px-3 py-2 focus:ring focus:ring-blue-200" />
-                                    </div>
-                                    <div class="col-span-3">
-                                        <label class="font-semibold">Column Type:</label>
-                                        <select formControlName="cellType" class="w-full border rounded-md px-3 py-2">
-                                            <option *ngFor="let type of columnTypes" [value]="type">{{ type }}</option>
-                                        </select>
-                                    </div>
-                                    @if (enableAPI) {
-                                        <div class="col-span-3">
-                                            <label class="font-semibold">API Value Key:</label>
-                                            <input formControlName="apiKey" placeholder="Enter Value Key" 
-                                                   class="w-full border rounded-md px-3 py-2 focus:ring focus:ring-blue-200" />
-                                        </div>
-                                    }
-                              
-                                </div>
-                                <div *ngIf="['radio-group', 'dropdown'].includes(column.value.cellType)" class="mt-2">
-
-                                    <label class="font-semibold">Options:</label>
-                                    
-                                    <div formArrayName="options">
-                                        <div *ngFor="let option of getOptions(i).controls; let j = index" [formGroupName]="j" 
-                                             class="grid grid-cols-1 gap-4 items-center mt-2">
-                                            <input formControlName="optionName" placeholder="Enter Option Name" 
-                                                   class="col-span-4 border rounded-md px-3 py-2 focus:ring focus:ring-blue-200" />
-                                            <input formControlName="optionValue" placeholder="Enter Option Value" 
-                                                   class="col-span-4 border rounded-md px-3 py-2 focus:ring focus:ring-blue-200" />
-                                            <button type="button" (click)="getOptions(i).removeAt(j)" 
-                                                    class="col-span-2 bg-red-500 text-white px-2 py-1 rounded-md hover:bg-red-600">
-                                                Remove
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <button type="button" (click)="addOption(i)" class="custom-save-button justify-end">Add Option</button>
-                                </div>
-                
-                                
-                                <div *ngIf="['smart-dropdown'].includes(column.value.cellType)" class="grid grid-cols-1 gap-4 mt-4">
-                                    <div class="col-span-4">
-                                        <label class="font-semibold">API Url:</label>
-                                        <input formControlName="apiUrl" placeholder="Enter API URL" 
-                                               class="w-full border rounded-md px-3 py-2 focus:ring focus:ring-blue-200" />
-                                    </div>
-                                    <div class="col-span-4">
-                                        <label class="font-semibold">Value Key:</label>
-                                        <input formControlName="valueKey" placeholder="Enter Value Key" 
-                                               class="w-full border rounded-md px-3 py-2 focus:ring focus:ring-blue-200" />
-                                    </div>
-                                    <div class="col-span-4">
-                                        <label class="font-semibold">Label Key:</label>
-                                        <input formControlName="labelKey" placeholder="Enter Label Key" 
-                                               class="w-full border rounded-md px-3 py-2 focus:ring focus:ring-blue-200" />
-                                    </div>
-                                </div>
-                
-                            </div>
-                        </div>
-                    </form>
-                </div>
-                
-                
-                
-                
-              </div>
-              
-            </div>
-
-
-
-        <ng-template  pTemplate="footer">
-          <!-- <hr class="mt-3 mx-2 mb-0 opacity-10"> -->
-            <!-- <div class="flex justify-end  gap-4 w-full">
-                <p-button label="Cancel" severity="secondary" (click)="closeDialog()" />
-                <p-button styleClass="border border-indigo-600" label="Save" (click)="saveConfiguration()" />
-            </div> -->
-            <div class="flex justify-center my-3">
-              <p-button label="Cancel" severity="secondary" (click)="closeDialog()"
-                styleClass="border-gray-400" />
-              <p-button label="Attach" label="Save" (click)="saveConfiguration()" 
-                styleClass="cta_buttons text-medium button_text_white secondary-color border-1 stroke_secondary no_hightlight no_hightlight_stroke h-max mr-2 w-6rem custom-save-button"
-                 />
-            </div>
-        </ng-template>
-</p-dialog>