fx-form-builder-wrapper 0.0.49 → 0.0.53

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>

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/form-builder.css

@@ -0,0 +1,9 @@
+
+/* @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

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

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

@@ -0,0 +1,154 @@
+/* .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;
+}
+
+
+
+