fx-form-builder-wrapper 0.0.49 → 0.0.53

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

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

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

@@ -0,0 +1,120 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { DialogModule } from 'primeng/dialog';
+import { InputTextModule } from 'primeng/inputtext';
+import { DropdownModule } from 'primeng/dropdown';
+import { FormArray, FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'fx-configuration-panel',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, ButtonModule, DialogModule, InputTextModule, FormsModule, DropdownModule, ButtonModule],
+  templateUrl: './configuration-panel.component.html',
+  styleUrl: './configuration-panel.component.css',
+})
+export class ConfigurationPanelComponent implements OnInit{
+  @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([])
+    });
+  }
+  ngOnInit(): void {
+    this.addColumn();
+  }
+
+  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);
+  }
+
+ 
+  public removeColumn(index: number): void {
+    if (this.columns.length > 1) {
+      this.columns.removeAt(index);
+    }
+  }
+
+  // **🔹 Duplicate Column**
+  public duplicateColumn(index: number): void {
+    const currentColumn = this.columns.at(index).value;
+    const duplicateColumn = this.fb.group({
+      header: [currentColumn.header, Validators.required],
+      cellType: [currentColumn.cellType, Validators.required],
+      placeholder: [currentColumn.placeholder],
+      apiUrl: [currentColumn.apiUrl],
+      valueKey: [currentColumn.valueKey],
+      labelKey: [currentColumn.labelKey],
+      className: [currentColumn.className],
+      apiKey: [currentColumn.apiKey],
+      options: this.fb.array(
+        currentColumn.options.map((option: any) => this.fb.group({
+          optionName: [option.optionName, Validators.required],
+          optionValue: [option.optionValue, Validators.required]
+        }))
+      )
+    });
+    this.columns.insert(index + 1, duplicateColumn);
+  }
+
+  // **🔹 Add Options Dynamically**
+  public addOption(columnIndex: number): void {
+    const optionGroup = this.fb.group({
+      optionName: ['', Validators.required],
+      optionValue: ['', Validators.required]
+    });
+
+    this.getOptions(columnIndex).push(optionGroup);
+  }
+
+  // **🔹 Get Options FormArray for a Specific Column**
+  public getOptions(columnIndex: number): FormArray {
+    return this.columns.at(columnIndex).get('options') as FormArray;
+  }
+
+  // **🔹 Close Dialog**
+  public closeDialog(): void {
+    this.isVisible.emit(false);
+  }
+
+  // **🔹 Save Configuration**
+  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,8 @@
+/*
+ * 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/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"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,13 @@
+/* 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",
+    "enableIvy": true,
+    "fullTemplateTypeCheck": true
+  }
+}

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

package/esm2022/fx-form-builder-wrapper.mjs

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './public-api';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZngtZm9ybS1idWlsZGVyLXdyYXBwZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9meC1idWlsZGVyLXdyYXBwZXIvc3JjL2Z4LWZvcm0tYnVpbGRlci13cmFwcGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljLWFwaSc7XG4iXX0=