fx-form-builder-wrapper 0.0.53 → 0.0.55

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

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

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

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"
-  ]
-}