fx-form-builder-wrapper 0.0.11 → 0.0.13

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/fx-builder-wrapper.component.ts

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

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

@@ -1,65 +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;
-} */
-
-: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

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

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

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

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

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

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

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

@@ -1,15 +0,0 @@
-/* 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"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,11 +0,0 @@
-/* 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.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,15 +0,0 @@
-/* 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/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}