fx-form-builder-wrapper 0.0.49 → 0.0.53

package/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/fx-builder-wrapper",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": ["src/styles"]  
+  },
+  "assets": ["src/styles"]
+}

package/package.json

@@ -1,29 +1,16 @@
-{
-  "name": "fx-form-builder-wrapper",
-  "version": "0.0.49",
-  "peerDependencies": {
-    "@angular/common": "^18.2.0",
-    "@angular/core": "^18.2.0",
-    "@instantsys-labs/fx": "2.0.2",
-    "uuid": "^11.0.5",
-    "primeng": "^17.18.10",
-    "tailwindcss-primeui": "^0.4.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/fx-form-builder-wrapper.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/fx-form-builder-wrapper.mjs",
-      "esm": "./esm2022/fx-form-builder-wrapper.mjs",
-      "default": "./fesm2022/fx-form-builder-wrapper.mjs"
-    }
-  }
-}
+{
+  "name": "fx-form-builder-wrapper",
+  "version": "0.0.53",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0",
+    "@instantsys-labs/fx": "2.0.2",
+    "uuid": "^11.0.5",
+    "primeng": "^17.18.10",
+    "tailwindcss-primeui": "^0.4.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/components/button/button.component.html

@@ -0,0 +1 @@
+<p>button works!</p>

package/src/lib/components/button/button.component.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component } from '@angular/core';
+import { FxBaseComponent, FxSetting, FxStringSetting, FxValidation, FxValidatorService } from '@instantsys-labs/fx';
+
+@Component({
+  selector: 'lib-button',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.css'
+})
+export class ButtonComponent extends FxBaseComponent {
+  constructor(private cdr: ChangeDetectorRef) {
+    super(cdr)
+  }
+
+  protected settings(): FxSetting[] {
+    return [new FxStringSetting({ key: 'heading-text', $title: 'Heading Text', value: 'My Default Value' })];
+  }
+
+  protected validations(): FxValidation[] {
+    return [FxValidatorService.required];
+  }
+}

package/src/lib/components/dynamic-table/dynamic-table.component.css

@@ -0,0 +1,31 @@
+.formBuilder_dynamic_table{
+    border: 0.6px solid #ccc;
+}
+.formBuilder_dynamic_table>thead>tr {
+    background-color: #4682b4;
+    color: #fff;
+}
+
+.formBuilder_dynamic_table>thead>tr>th {
+    font-weight: 400 !important;
+    padding: .25rem .55rem;
+    font-size: .875rem;
+}
+
+.formBuilder_dynamic_table>tbody>tr:nth-child(odd) {
+    background-color: #fff;
+}
+
+.formBuilder_dynamic_table>tbody>tr:nth-child(even) {
+    background-color: #f6f6f6;
+}
+
+.formBuilder_dynamic_table>tbody>tr>td {
+    text-align: center;
+    padding: 0.25rem 0.55rem;
+}
+
+
+select:not([size]) {
+    width: 186px !important;
+}

package/src/lib/components/dynamic-table/dynamic-table.component.html

@@ -0,0 +1,69 @@
+<fx-settings-panel [fxData]="fxData" (configuration)="onChangeConfiguration($event)">
+    <div *ngIf="fxData">
+        <table style="width: 100%;" class="formBuilder_dynamic_table">
+            <thead>
+                <tr>
+                    <th *ngFor="let column of tableConfig.columns">{{ column.header }}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let row of tableConfig.rows; let rowIndex = index">
+                    <td *ngFor="let column of tableConfig.columns">
+                        <ng-container [ngSwitch]="column.cellType">
+                            <span [class]="column?.className" *ngSwitchCase="'text'">{{row[column.header]}}</span>
+    
+                            <input [class]="column?.className" *ngSwitchCase="'input-text'" type="text"
+                                [(ngModel)]="row[column.header]" />
+    
+                            <input [class]="column?.className" *ngSwitchCase="'input-number'" type="number"
+                                [(ngModel)]="row[column.header]" />
+    
+                            <select [class]="column?.className" *ngSwitchCase="'dropdown'"
+                                [(ngModel)]="row[column.header]">
+                                <option *ngFor="let option of column?.options" [value]="option?.optionValue">     
+                                    {{ option?.optionName }}
+                                </option>
+                            </select>
+    
+                            <select [class]="column?.className" style="width: 60%;" *ngSwitchCase="'smart-dropdown'"
+                                [(ngModel)]="row[column.header]">
+                                <option *ngFor="let option of smartDropdownOptions[column.header]" [value]="option?.value">
+                                    {{option?.name }}
+                                </option>
+                            </select>
+    
+                            <input [class]="column?.className" *ngSwitchCase="'checkbox'" type="checkbox"
+                                [(ngModel)]="row[column.header]" />
+    
+                            <input name="radio-{{rowIndex}}" [class]="column?.className" *ngSwitchCase="'radio'" type="radio"
+                                [(ngModel)]="row[column.header]" />
+    
+                            <div [class]="column?.className" style="display: flex; justify-content: center; gap: 10px;"
+                                *ngSwitchCase="'radio-group'">
+                                <label *ngFor="let option of column.options">
+                                    <input name="radio-group-{{rowIndex}}" type="radio" [value]="option?.optionName"
+                                        [(ngModel)]="row[column.header]" />
+                                    {{ option?.optionName }}
+                                </label>
+                            </div>
+    
+                            <ng-container *ngSwitchCase="'file-upload'">
+                                <div style="display: flex; flex-direction: column; align-items: end;justify-content: end;">
+                                    <img  width="100" *ngIf="uploadedImages?.[rowIndex]?.['result']" [src]="uploadedImages[rowIndex]?.['result']"
+                                    alt="Uploaded Image" (click)="deleteFile(uploadedImages[rowIndex], rowIndex)"/>
+                                    <input [class]="column?.className" type="file" name="file" #uploadFile  hidden multiple
+                                        (change)="uploadImage($event, rowIndex)" />
+                                    <button (click)="uploadFile.click()">Upload</button>
+                                </div>
+                            </ng-container>
+    
+                            <ng-container *ngSwitchCase="'textarea'">
+                                <textarea [class]="column?.className" name="" id="" cols="30" rows="2"></textarea>
+                            </ng-container>
+                        </ng-container>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</fx-settings-panel>

package/src/lib/components/dynamic-table/dynamic-table.component.ts

@@ -0,0 +1,258 @@
+import { AfterViewInit, ChangeDetectorRef, Component, inject, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { FxBaseComponent, FxMode, FxSetting, FxStringSetting, FxValidation, FxValidatorService } from '@instantsys-labs/fx';
+import { SettingsPanelComponent } from '../../panel/settings-panel/settings-panel.component';
+import { FxBuilderWrapperService } from '../../fx-builder-wrapper.service';
+import {Subject, takeUntil } from 'rxjs';
+
+export interface TableColumnConfig {
+  header: string;
+  cellType: 'text' | 'input-text' | 'input-number' | 'dropdown' | 'smart-dropdown' | 'checkbox' | 'radio' | 'radio-group' | 'file-upload' | 'textarea';
+  placeholder?: string;
+  options?: string[];
+  apiUrl?: string;
+  valueKey?: string;
+  labelKey?: string;
+  className?: string;
+}
+export interface TableConfig {
+  columns: TableColumnConfig[];
+  rows: any[];
+}
+@Component({
+  selector: 'fx-dynamic-table',
+  standalone: true,
+  imports: [CommonModule, FormsModule, SettingsPanelComponent, ReactiveFormsModule],
+  templateUrl: './dynamic-table.component.html',
+  styleUrl: './dynamic-table.component.css',
+})
+
+export class DynamicTableComponent extends FxBaseComponent implements OnInit, AfterViewInit, OnDestroy {
+  @Input() tableRows: Array<any> = [];
+  @Input() previewType: FxMode = FxMode.VIEW;
+  @Input() tableConfig: any = {
+    columns: [
+      { header: 'Column 1', cellType: 'text' },
+      { header: 'Column 2', cellType: 'text' },
+      { header: 'Column 3', cellType: 'text' },
+      { header: 'Column 4', cellType: 'text' },
+      { header: 'Column 5', cellType: 'text' },
+    ],
+};
+
+  private destroy$ = new Subject<Boolean>();
+  public uploadedImages: Array<Record<string, string | File | null> | null> = [];
+
+  public tableFormControl = new FormControl();
+  public smartDropdownOptions: { [key: string]: Array<{ name: string, value: string }> } = {};
+  private http = inject(HttpClient);
+  constructor(private cdr: ChangeDetectorRef, private fxBuilderWrapperService: FxBuilderWrapperService) {
+    super(cdr);
+    this.onInit.subscribe((fxData)=>{
+      this._register(this.tableFormControl);
+    })
+  }
+
+  public ngOnInit(): void {
+    this.fxBuilderWrapperService.variables$.pipe(
+      takeUntil(this.destroy$)).subscribe((variables: any) => {
+        if (variables) {
+          let dynamicTableValues: any;
+          for (const [key, value] of Object.entries(variables)) {
+            if (key.includes('dynamic-table')) {
+              dynamicTableValues = value;
+            }
+          }
+          if (Object.keys(dynamicTableValues).length) {
+            // const fileHeaderName = dynamicTableValues?.columns.find((f: any) => f.cellType === 'file-upload')?.header;
+            const fileHeaderName = dynamicTableValues?.columns.find((f: any) => f.cellType === 'file-upload')?.header;
+            dynamicTableValues?.rows?.forEach((item: any, index: number) => {
+              // // this.uploadedImages[index] = item[fileHeaderName] ? item[fileHeaderName]: null;
+              // const fileUrl = item[fileHeaderName]; // Get the file URL
+
+              // this.uploadedImages[index] = fileUrl
+              //   ? { result: fileUrl, file: null } // Store the URL as 'result'
+              //   : null;
+              
+              if (item[fileHeaderName]) {
+                this.parseUrls(item[fileHeaderName], index);
+              }
+            })
+            console.log("uploadedImages", this.uploadedImages);
+            console.log("dynamictable", dynamicTableValues);
+            this.tableConfig = dynamicTableValues;
+            this.fxData.value = this.tableConfig;
+            // this.tableFormControl.reset();
+            // this.tableFormControl.setValue(this.tableConfig);
+            this.tableFormControl = new FormControl();
+            setTimeout(() => {  // Delay to ensure proper patching
+              this.tableFormControl.patchValue(this.tableConfig, { emitEvent: true });
+              console.log("tableFormControl",this.tableFormControl);
+              this.cdr.detectChanges();
+            }, 50);
+          }
+        }
+      })
+  }
+
+  public ngAfterViewInit(): void {
+    setTimeout(() => {
+      if(this.fxData?.value && Object.keys(this.fxData?.value)?.length != 0) {
+        this.tableConfig = this.fxData.value;
+        this.fetchSmartDropdownData();
+      }
+    }, 100)
+  }
+  
+  protected fetchSmartDropdownData(): void {
+    this.tableConfig.columns
+      .filter((column: TableColumnConfig) => column.cellType === 'smart-dropdown' && column?.apiUrl)
+      .forEach((column: TableColumnConfig) => {
+        this.http.get<any>(column.apiUrl!).subscribe((response: any) => {
+          this.smartDropdownOptions[column.header] = response.map((item: any) => ({
+            value: item[column.valueKey!],
+            name: item[column.labelKey!],
+          }));
+        });
+      });
+  }
+
+  public uploadImage(event: Event, rowIndex: number): void {
+    const file = (event.target as HTMLInputElement).files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        this.uploadedImages[rowIndex] = {
+          result: reader.result as string,
+          file: file
+        }
+        this.tableConfig.rows[rowIndex][this.tableConfig.columns.find((f: any) => f.cellType === 'file-upload')?.header] = file;
+        console.log("tableConfig", this.tableConfig);
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+
+  protected settings(): FxSetting[] {
+    return [
+      new FxStringSetting({ key: 'column-size', $title: 'No. of columns', value: 1 }),
+      new FxStringSetting({ key: 'table-config', $title: 'Table Configuration', value: {} }),
+    ];
+  }
+
+  protected validations(): FxValidation[] {
+    return [FxValidatorService.required];
+  }
+
+  public getArray(count: number): number[] {
+    return Array.from({ length: count });
+  }
+
+  public onChangeConfiguration(event: any): void { 
+    const columns = event.columns.map((col: any) => {
+      return {
+        header: col?.header,
+        cellType: col?.cellType,
+        placeholder: col?.placeholder,
+        options: col?.options,
+        apiUrl: col?.apiUrl,
+        valueKey: col?.valueKey,
+        labelKey: col?.labelKey,
+        className: col?.className,
+        apiKey: col?.apiKey
+      }
+    });
+    if(!event?.enableAPI) {
+      this.tableConfig.columns = columns;
+      // this.tableConfig.rows = Array.from({ length: +event?.rows }, (e, index) => ({ name: `SKU-${index + 1}`, age: index % 2 !== 0, gender: 'male' }))
+      // this.tableConfig.rows = Array.from({ length: +event?.rows }, (e, index) => {
+      //   const rows = columns.map((c: any) => {
+      //     return {
+      //       c?.header: null
+      //     }
+      //   })
+      //   return rows
+      // })
+      this.tableConfig.rows = Array.from({ length: +event?.rows }, (_, index) => {
+        return columns.reduce((acc: any, c: any) => {
+          acc[c?.header] = ''; // Initialize each column key with null
+          return acc;
+        }, {});
+      });
+      
+      this.fetchSmartDropdownData();
+    }
+    if(event?.enableAPI) {
+      this.drawTable(event, columns)
+      this.tableConfig = {
+        columns: columns,
+        rows: []
+      };
+    }
+
+    this.fxData.value = this.tableConfig;
+    this.tableFormControl.reset();
+    this.tableFormControl.setValue(this.tableConfig);
+  }
+
+  private updateSettings(): void{
+    if(this.fxData.settings){
+      for(let setting of this.fxData.settings){
+      if(setting.key === 'table-config'){
+        setting.value = this.tableConfig;
+        }
+      }
+    }
+  }
+
+  public drawTable(event: any, columns: any): void {
+    let rows;
+    this.http.get(event.api).subscribe((res: any) => {
+      if(res) {
+        rows = res.map((item: any) => {
+          const newObj: Record<string, any> = {};
+          columns.forEach((col: any) => {
+            newObj[col.header] = item[col.apiKey];
+          });
+          return newObj;
+        });
+        this.tableConfig = {
+          columns,
+          rows
+        }
+        this.fxData.value = this.tableConfig;
+        this.tableFormControl.reset();
+        this.tableFormControl.setValue(this.tableConfig);
+      }
+    })
+  }
+
+  public deleteFile(file: any, index: number): void {
+    this.uploadedImages.splice(index, 1, null);
+    this.tableConfig.rows[index][this.tableConfig.columns.find((f: any) => f.cellType === 'file-upload')?.header] = null;
+    console.log("tableConfig", this.tableConfig);
+    this.tableFormControl.setValue(this.tableConfig);
+  }
+
+  public parseUrls(url: string, index: number): void {
+    this.http.get(url, { responseType: 'blob' }).subscribe({
+      next: (imageBlob: Blob) => {
+        const imageURL = URL.createObjectURL(imageBlob);
+        this.uploadedImages[index] = {
+          result: imageURL,
+          file: null
+        };
+      },
+      error: (error) => {
+        console.error('Error fetching image:', error);
+      }
+    });
+  }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+}

package/src/lib/components/fx-form-component/fx-form-component.component.ts

@@ -0,0 +1,86 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { FxForm, FxFormComponent } 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 '../dynamic-table/dynamic-table.component';
+import { ToggleButtonComponent } from '../toggle-button/toggle-button.component';
+import { UploaderComponent } from '../uploader/uploader.component';
+import { ToggleComponent } from '../toggle/toggle.component';
+
+@Component({
+  selector: 'fx-form-component',
+  standalone: true,
+  imports: [CommonModule, FxFormComponent],
+  template: `
+    <fx-form 
+      [fxForm]="fxForm" 
+      [value]="variables" 
+      (onSubmit)="onSubmit($event)" 
+      #form
+    >
+    </fx-form>
+  `,
+})
+export class FxFormWrapperComponent implements OnChanges, OnInit {
+  @ViewChild('form') form!: FxFormComponent;
+  @Input() fxForm!: FxForm;
+  @Input() variables: any;
+  @Output() fxFormSubmit = new EventEmitter<any>();
+
+  constructor(private fxWrapperService: FxBuilderWrapperService) {
+    this.registerCustomComponents();
+   }
+
+  public ngOnChanges(changes: SimpleChanges): void { 
+    // if('variables' in changes && !changes['fxForm']) {
+    //   this.fxWrapperService.variables$.next(this.variables);
+    // }
+    if ('variables' in changes) {
+      this.fxWrapperService.variables$.next(this.variables);
+    }
+  }
+
+  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);
+    // }
+  }
+
+
+  private registerCustomComponents(): void {
+    const components = [
+      { name: 'Dispatch To Clinic', key: 'dispatch-to-clinic', component: DispatchToClinicComponent },
+      { name: 'Dynamic Table', key: 'dynamic-table', component: DynamicTableComponent },
+      { name: 'Toggle Button', key: 'toggle-button', component: ToggleButtonComponent },
+      { name: 'Uploader', key: 'uploader', component: UploaderComponent },
+      { name: 'Toggle', key: 'toggle', component: ToggleComponent }
+    ];
+    
+    components.forEach(({ name, key, component }) => {
+      if (!this.fxWrapperService.getComponent(key)) {
+        this.fxWrapperService.registerCustomComponent(name, key, component);
+      }
+    });
+  }
+
+  public onSubmit(event: any): void {
+    this.fxFormSubmit.emit(event);
+  }
+
+  public submit(): void {
+    this.form.submit();
+  }
+}

package/src/lib/components/toggle/toggle.component.css

@@ -0,0 +1,51 @@
+label {
+    position: relative;
+    white-space: nowrap;
+    border-radius: 0;
+    border: 0 solid #999999;
+    margin: 0 14px 0 0;
+    width: 120px;
+    height: auto;
+    padding: 0;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .form-radio {
+    background-color: #DAE6F0;
+    color: white;
+    box-shadow: none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border: 1px solid #DEDEDE;
+    padding: 9px 10px;
+    margin: 0;
+    white-space: nowrap;
+    width: 100%;
+    height: 38px;
+    background-image: none;
+    border-radius: 4px;
+  }
+
+  .form-radio:checked {
+    background-color: #ADD8E6;
+    border-color: #9BBBD6;
+  }
+
+  .form-radio:focus {
+    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black;
+    background-color: #ADD8E6;
+  }
+
+  .form-radio:hover {
+    border-color: #4682B4;
+  }
+
+  span {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 8px;
+    bottom: 0;
+    margin: 0;
+    padding: 0;
+  }

package/src/lib/components/toggle/toggle.component.html

@@ -0,0 +1,12 @@
+<fx-component [fxData]="fxData">
+    <div style="display: flex;">
+        <label>
+            <input [formControl]="toggleControl" type="radio" name="radio_grp" class="form-radio mr-3" value="true">
+            <span class="mt-1">{{setting('accept')}}</span>
+        </label>
+        <label>
+            <input [formControl]="toggleControl" type="radio" name="radio_grp" class="form-radio mr-3" value="false">
+            <span class="mt-1">{{setting('reject')}}</span>
+        </label>
+    </div>
+</fx-component>

package/src/lib/components/toggle/toggle.component.ts

@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, inject } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FxBaseComponent, FxComponent, FxSetting, FxStringSetting, FxValidation, FxValidatorService } from '@instantsys-labs/fx';
+
+@Component({
+  selector: 'fx-toggle',
+  standalone: true,
+  imports: [CommonModule, FxComponent, FormsModule, ReactiveFormsModule],
+  templateUrl: './toggle.component.html',
+  styleUrl: './toggle.component.css'
+})
+export class ToggleComponent extends FxBaseComponent {
+  public toggleControl = new FormControl<boolean>(false)
+
+  constructor(private cdr: ChangeDetectorRef) {
+    super(cdr)
+    this.onInit.subscribe((fxData)=>{
+      this._register(this.toggleControl);
+    })
+  }
+
+  protected settings(): FxSetting[] {
+    return [
+      new FxStringSetting({ key: 'accept', $title: 'Accept Text', value: 'Yes' }),
+      new FxStringSetting({ key: 'reject', $title: 'Reject Text', value: 'No' })
+    ];
+  }
+
+  protected validations(): FxValidation[] {
+    return [FxValidatorService.required];
+  }
+}

package/src/lib/components/toggle-button/toggle-button.component.css

@@ -0,0 +1,22 @@
+.custom-toggle-btn {
+    padding: 10px 20px;
+    font-size: 16px;
+    font-weight: bold;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    background-color: #ccc;
+    transition: background-color 0.3s;
+  }
+
+  .custom-toggle-btn.active {
+    background-color: #4caf50;
+  }
+
+  .custom-toggle-btn:hover {
+    opacity: 0.9;
+  }
+
+
+  

package/src/lib/components/toggle-button/toggle-button.component.html

@@ -0,0 +1,10 @@
+<fx-component [fxData]="fxData">
+    <button
+        class="custom-toggle-btn"
+        [class]="setting('classes') ? setting('classes'): ''"
+        [class.active]="toggleBtnControl.value"
+        (click)="toggle()"
+        >
+        {{ toggleBtnControl.value ? setting('active-text') : setting('inactive-text') }}
+    </button>
+</fx-component>