fx-form-builder-wrapper 0.0.11 → 0.0.13

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

@@ -0,0 +1,615 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
+import * as i1 from '@instantsys-labs/fx';
+import { FxBaseComponent, FxStringSetting, FxValidatorService, FxComponent, FxMode, FxSelectSetting, FxUtils, FxScope, FxComponentBuilder, FxFormComponent } from '@instantsys-labs/fx';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule, FormsModule, FormControl, UntypedFormControl } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import * as i3 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i5 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import * as i4 from 'primeng/api';
+import { v4 } from 'uuid';
+
+class FxBuilderWrapperService {
+    fxComponentRegistry;
+    variables$ = new BehaviorSubject(null);
+    constructor(fxComponentRegistry) {
+        this.fxComponentRegistry = fxComponentRegistry;
+    }
+    registerCustomComponent(title, selector, component) {
+        this.fxComponentRegistry.registerComponent(selector, component, {
+            registeringAs: "CUSTOM",
+            libraryItem: {
+                title,
+                icon: 'fa-eye',
+                fxData: {
+                    id: null,
+                    name: selector,
+                    value: "",
+                    selector: selector,
+                    elements: [],
+                    events: []
+                }
+            },
+        });
+    }
+    getComponent(selector) {
+        return this.fxComponentRegistry.getComponent(selector);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FxBuilderWrapperService, deps: [{ token: i1.FxComponentRegistryService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FxBuilderWrapperService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FxBuilderWrapperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.FxComponentRegistryService }] });
+
+class DispatchToClinicComponent extends FxBaseComponent {
+    cdr;
+    fb = inject(FormBuilder);
+    clinicAddress$ = new BehaviorSubject({});
+    dispatchForm = this.fb.group({
+        courierName: ['', Validators.required],
+        trackingNumber: ['', Validators.required],
+        trackingUrl: ['', [Validators.required, Validators.pattern('https?://.+')]],
+        notes: ['', Validators.required]
+    });
+    constructor(cdr) {
+        super(cdr);
+        this.cdr = cdr;
+        this.onInit.subscribe(() => {
+            this._register(this.dispatchForm);
+        });
+    }
+    settings() {
+        return [new FxStringSetting({ key: 'heading-text', $title: 'Heading Text', value: 'My Default Value' })];
+    }
+    validations() {
+        return [FxValidatorService.required];
+    }
+    copyToClipboard(address) {
+        navigator.clipboard.writeText(address);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DispatchToClinicComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DispatchToClinicComponent, isStandalone: true, selector: "lib-dispatch-to-clinic", usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\">\r\n    <section\r\n        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\">\r\n        <form [formGroup]=\"dispatchForm\">\r\n            <div class=\"grid\">\r\n                <!-- Courier Name -->\r\n                <div class=\"col-12 sm:col-6 md:col-3 input-container\">\r\n                    <label for=\"courierName\" class=\"input-title\">Courier Name</label>\r\n                    <input autocomplete=\"off\" formControlName=\"courierName\" type=\"text\" id=\"courierName\"\r\n                        name=\"courierName\" class=\"p-inputtext p-component p-element input-field border-1 w-full\"\r\n                        placeholder=\"enter courier name\" />\r\n\r\n                    <!-- validation -->\r\n                    <small *ngIf=\"dispatchForm.get('courierName')?.invalid && dispatchForm.get('courierName')?.touched\"\r\n                        class=\"text-danger-color block mt-1\">\r\n                        Courier Name is required.\r\n                    </small>\r\n                    <!-- validation -->\r\n                </div>\r\n                <!-- Courier Name -->\r\n\r\n                <!-- Tracking Number -->\r\n                <div class=\"col-12 sm:col-6 md:col-3 input-container\">\r\n                    <label for=\"trackingNumber\" class=\"input-title\">Tracking Number</label>\r\n                    <input autocomplete=\"off\" formControlName=\"trackingNumber\" type=\"text\" id=\"trackingNumber\"\r\n                        name=\"trackingNumber\" class=\"p-inputtext p-component p-element input-field border-1 w-full\"\r\n                        placeholder=\"enter tracking number\" />\r\n                    <small\r\n                        *ngIf=\"dispatchForm.get('trackingNumber')?.invalid && dispatchForm.get('trackingNumber')?.touched\"\r\n                        class=\"text-danger-color block mt-1\">\r\n                        Tracking Number is required.\r\n                    </small>\r\n                </div>\r\n                <!-- Tracking Number -->\r\n\r\n                <!-- Tracking URL -->\r\n                <div class=\"col-12 sm:col-6 md:col-3 input-container\">\r\n                    <label for=\"trackingUrl\" class=\"input-title\">Tracking URL</label>\r\n                    <input autocomplete=\"off\" formControlName=\"trackingUrl\" type=\"text\" id=\"trackingUrl\"\r\n                        name=\"trackingUrl\" class=\"p-inputtext p-component p-element input-field border-1 w-full\"\r\n                        placeholder=\"enter tracking url\" />\r\n                    <small *ngIf=\"dispatchForm.get('trackingUrl')?.invalid && dispatchForm.get('trackingUrl')?.touched\"\r\n                        class=\"text-danger-color block mt-1\">\r\n                        <span *ngIf=\"dispatchForm.get('trackingUrl')?.errors?.['required']\">Tracking URL is\r\n                            required.</span>\r\n                        <span *ngIf=\"dispatchForm.get('trackingUrl')?.errors?.['pattern']\">Invalid URL format.</span>\r\n                    </small>\r\n                </div>\r\n                <!-- Tracking URL -->\r\n\r\n                <!-- Notes -->\r\n                <div class=\"col-12 md:col-6 input-container\">\r\n                    <label for=\"notes\" class=\"input-title\">Notes</label>\r\n                    <textarea autocomplete=\"off\" formControlName=\"notes\" rows=\"5\" id=\"notes\" name=\"notes\"\r\n                        class=\"p-inputtext p-component p-element input-field border-1 w-full\"\r\n                        placeholder=\"enter notes\"></textarea>\r\n                    <small *ngIf=\"dispatchForm.get('notes')?.invalid && dispatchForm.get('notes')?.touched\"\r\n                        class=\"text-danger-color block mt-1\">\r\n                        Notes are required.\r\n                    </small>\r\n                </div>\r\n                <!-- Notes -->\r\n\r\n                <!-- Address with Copy Icon -->\r\n                <div class=\"col-12 md:col-6 pt-0\">\r\n                    <div class=\"mb-1\">Address</div>\r\n                    <ng-container *ngIf=\"(clinicAddress$ | async) as address\">\r\n                        <address #completeAddress>{{address?.street}}, {{address?.state}}, {{address?.postalCode}}\r\n                            <i class=\"pi pi-copy cursor-pointer text-xl text-secondary-color\"\r\n                                (click)=\"copyToClipboard(completeAddress.textContent)\"></i>\r\n                        </address>\r\n                    </ng-container>\r\n                </div>\r\n                <!-- Address with Copy Icon -->\r\n            </div>\r\n        </form>\r\n    </section>\r\n</fx-component>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DispatchToClinicComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-dispatch-to-clinic', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent], template: "<fx-component [fxData]=\"fxData\">\r\n    <section\r\n        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\">\r\n        <form [formGroup]=\"dispatchForm\">\r\n            <div class=\"grid\">\r\n                <!-- Courier Name -->\r\n                <div class=\"col-12 sm:col-6 md:col-3 input-container\">\r\n                    <label for=\"courierName\" class=\"input-title\">Courier Name</label>\r\n                    <input autocomplete=\"off\" formControlName=\"courierName\" type=\"text\" id=\"courierName\"\r\n                        name=\"courierName\" class=\"p-inputtext p-component p-element input-field border-1 w-full\"\r\n                        placeholder=\"enter courier name\" />\r\n\r\n                    <!-- validation -->\r\n                    <small *ngIf=\"dispatchForm.get('courierName')?.invalid && dispatchForm.get('courierName')?.touched\"\r\n                        class=\"text-danger-color block mt-1\">\r\n                        Courier Name is required.\r\n                    </small>\r\n                    <!-- validation -->\r\n                </div>\r\n                <!-- Courier Name -->\r\n\r\n                <!-- Tracking Number -->\r\n                <div class=\"col-12 sm:col-6 md:col-3 input-container\">\r\n                    <label for=\"trackingNumber\" class=\"input-title\">Tracking Number</label>\r\n                    <input autocomplete=\"off\" formControlName=\"trackingNumber\" type=\"text\" id=\"trackingNumber\"\r\n                        name=\"trackingNumber\" class=\"p-inputtext p-component p-element input-field border-1 w-full\"\r\n                        placeholder=\"enter tracking number\" />\r\n                    <small\r\n                        *ngIf=\"dispatchForm.get('trackingNumber')?.invalid && dispatchForm.get('trackingNumber')?.touched\"\r\n                        class=\"text-danger-color block mt-1\">\r\n                        Tracking Number is required.\r\n                    </small>\r\n                </div>\r\n                <!-- Tracking Number -->\r\n\r\n                <!-- Tracking URL -->\r\n                <div class=\"col-12 sm:col-6 md:col-3 input-container\">\r\n                    <label for=\"trackingUrl\" class=\"input-title\">Tracking URL</label>\r\n                    <input autocomplete=\"off\" formControlName=\"trackingUrl\" type=\"text\" id=\"trackingUrl\"\r\n                        name=\"trackingUrl\" class=\"p-inputtext p-component p-element input-field border-1 w-full\"\r\n                        placeholder=\"enter tracking url\" />\r\n                    <small *ngIf=\"dispatchForm.get('trackingUrl')?.invalid && dispatchForm.get('trackingUrl')?.touched\"\r\n                        class=\"text-danger-color block mt-1\">\r\n                        <span *ngIf=\"dispatchForm.get('trackingUrl')?.errors?.['required']\">Tracking URL is\r\n                            required.</span>\r\n                        <span *ngIf=\"dispatchForm.get('trackingUrl')?.errors?.['pattern']\">Invalid URL format.</span>\r\n                    </small>\r\n                </div>\r\n                <!-- Tracking URL -->\r\n\r\n                <!-- Notes -->\r\n                <div class=\"col-12 md:col-6 input-container\">\r\n                    <label for=\"notes\" class=\"input-title\">Notes</label>\r\n                    <textarea autocomplete=\"off\" formControlName=\"notes\" rows=\"5\" id=\"notes\" name=\"notes\"\r\n                        class=\"p-inputtext p-component p-element input-field border-1 w-full\"\r\n                        placeholder=\"enter notes\"></textarea>\r\n                    <small *ngIf=\"dispatchForm.get('notes')?.invalid && dispatchForm.get('notes')?.touched\"\r\n                        class=\"text-danger-color block mt-1\">\r\n                        Notes are required.\r\n                    </small>\r\n                </div>\r\n                <!-- Notes -->\r\n\r\n                <!-- Address with Copy Icon -->\r\n                <div class=\"col-12 md:col-6 pt-0\">\r\n                    <div class=\"mb-1\">Address</div>\r\n                    <ng-container *ngIf=\"(clinicAddress$ | async) as address\">\r\n                        <address #completeAddress>{{address?.street}}, {{address?.state}}, {{address?.postalCode}}\r\n                            <i class=\"pi pi-copy cursor-pointer text-xl text-secondary-color\"\r\n                                (click)=\"copyToClipboard(completeAddress.textContent)\"></i>\r\n                        </address>\r\n                    </ng-container>\r\n                </div>\r\n                <!-- Address with Copy Icon -->\r\n            </div>\r\n        </form>\r\n    </section>\r\n</fx-component>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+class ConfigurationPanelComponent {
+    fb;
+    visible = false;
+    isVisible = new EventEmitter();
+    configuration = new EventEmitter();
+    rows = 1;
+    enableAPI = false;
+    api = '';
+    dynamicForm;
+    columnTypes = ['text', 'input-text', 'input-number', 'dropdown', 'smart-dropdown', 'checkbox', 'radio', 'radio-group', 'file-upload', 'textarea'];
+    constructor(fb) {
+        this.fb = fb;
+        this.dynamicForm = this.fb.group({
+            columns: this.fb.array([])
+        });
+    }
+    get columns() {
+        return this.dynamicForm.get('columns');
+    }
+    // Add Column Dynamically
+    addColumn() {
+        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
+    removeColumn(index) {
+        this.columns.removeAt(index);
+    }
+    // Add Options Dynamically
+    addOption(columnIndex) {
+        const optionGroup = this.fb.group({
+            optionName: ['', Validators.required],
+            optionValue: ['', Validators.required]
+        });
+        const column = this.columns.at(columnIndex);
+        const options = column.get('options');
+        options.push(optionGroup);
+    }
+    // Get options FormArray for a specific column
+    getOptions(columnIndex) {
+        const column = this.columns.at(columnIndex);
+        return column.get('options');
+    }
+    closeDialog() {
+        this.isVisible.emit(false);
+    }
+    saveConfiguration() {
+        this.configuration.emit({ rows: this.rows, columns: this.dynamicForm.value?.columns, enableAPI: this.enableAPI, api: this.api });
+        this.isVisible.emit(false);
+    }
+    onSubmit() {
+        console.log("Value columns formArray", this.dynamicForm.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfigurationPanelComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ConfigurationPanelComponent, isStandalone: true, selector: "fx-configuration-panel", inputs: { visible: "visible" }, outputs: { isVisible: "isVisible", configuration: "configuration" }, ngImport: i0, template: "<p-dialog [modal]=\"true\" [draggable]=\"false\" [(visible)]=\"visible\" [style]=\"{ width: '35rem' }\">\r\n        <ng-content  pTemplate=\"header\">\r\n            <div class=\"flex p-2 bg-white border-2\">\r\n                <p class=\"text-base\">Edit Configuration</p>\r\n            </div>\r\n        </ng-content>\r\n\r\n        <ng-template  pTemplate=\"content\">\r\n            <div class=\"flex flex-col gap-4 bg-white p-2 border-2 border-gray-200\">\r\n                <div class=\"flex items-center gap-4 mb-8\">\r\n                    <label for=\"rows\" class=\"font-semibold w-24\">Rows</label>\r\n                    <input type=\"text\" [readonly]=\"enableAPI\" [(ngModel)]=\"rows\" placeholder=\"rows\" class=\"form__input\" id=\"name\" autocomplete=\"rows\" />\r\n                </div>\r\n                <div class=\"flex items-center gap-4 mb-8\">\r\n                    <label for=\"enableAPI\" class=\"font-semibold w-24\">Enable API</label>\r\n                    <input type=\"checkbox\" [(ngModel)]=\"enableAPI\" placeholder=\"API Url\" id=\"enableAPI\" autocomplete=\"enableAPI\" />\r\n                </div>\r\n                @if (enableAPI) {\r\n                  <div class=\"flex items-center gap-4 mb-8\">\r\n                      <label for=\"api\" class=\"font-semibold w-24\">API</label>\r\n                      <input type=\"text\" [(ngModel)]=\"api\" placeholder=\"Enter API Url\" id=\"api\" autocomplete=\"api\" />\r\n                  </div>\r\n                }\r\n                <div class=\"flex items-center gap-4 mb-8\">\r\n                    <div class=\"grid grid-nogutter\">\r\n                        <div class=\"col-2 mb-3 flex items-center gap-3\">\r\n                            <p class=\"text-sm font-semibold\">Columns:</p>\r\n                            <button type=\"button\" (click)=\"addColumn()\">Add Column</button>\r\n                        </div>\r\n                        <div class=\"col-10\">\r\n                            <form [formGroup]=\"dynamicForm\" (ngSubmit)=\"onSubmit()\">\r\n                                <div formArrayName=\"columns\">\r\n                                  <div *ngFor=\"let column of columns.controls; let i = index\" [formGroupName]=\"i\">\r\n                                    <div class=\"flex gap-4 mb-2\">\r\n                                      <label class=\"white-space-nowrap\">Column Name:</label>\r\n                                      <input formControlName=\"header\" placeholder=\"Enter Column Name\" class=\"form__input\" />\r\n                                    </div>\r\n                                    <div class=\"flex gap-4\">\r\n                                      <label>Column Type:</label>\r\n                                      <select formControlName=\"cellType\">\r\n                                        <option *ngFor=\"let type of columnTypes\" [value]=\"type\">{{type}}</option>\r\n                                      </select>\r\n                                    </div>\r\n                                    @if (enableAPI) {\r\n                                      <div class=\"flex gap-4 mt-2\">\r\n                                        <label>API Value Key:</label>\r\n                                        <input formControlName=\"apiKey\" placeholder=\"Enter Value Key\" class=\"form__input\" />\r\n                                      </div>\r\n                                    }\r\n                              \r\n                                    <!-- Show options if columnType is 'radio-group' or 'dropdown' -->\r\n                                    <div *ngIf=\"['radio-group', 'dropdown'].includes(column.value.cellType)\">\r\n                                      <div formArrayName=\"options\">\r\n                                        <div *ngFor=\"let option of getOptions(i).controls; let j = index\" [formGroupName]=\"j\">\r\n                                          <label>Option {{ j + 1 }}:</label>\r\n                                          <input formControlName=\"optionName\" placeholder=\"Enter option name\" class=\"form__input\" />\r\n                                          <input formControlName=\"optionValue\" placeholder=\"Enter option value\" class=\"form__input\" />\r\n                                          <button type=\"button\" (click)=\"getOptions(i).removeAt(j)\">Remove Option</button>\r\n                                        </div>\r\n                                      </div>\r\n                                      <button type=\"button\" (click)=\"addOption(i)\">Add Option</button>\r\n                                    </div>\r\n\r\n                                    <!-- Show apiUrl if columnType is 'smart-dropdown' -->\r\n                                     <div *ngIf=\"['smart-dropdown'].includes(column.value.cellType)\" class=\"flex gap-2\">\r\n                                         <div>\r\n                                             <label>API Url</label>\r\n                                             <input formControlName=\"apiUrl\" placeholder=\"Enter api url\" class=\"form__input\" />\r\n                                           </div>\r\n                                         <div>\r\n                                             <label>Value Key</label>\r\n                                             <input formControlName=\"valueKey\" placeholder=\"Enter Value Key\" class=\"form__input\" />\r\n                                           </div>\r\n                                         <div>\r\n                                             <label>Label Key</label>\r\n                                             <input formControlName=\"labelKey\" placeholder=\"Enter Label Key\" class=\"form__input\" />\r\n                                           </div>\r\n                                     </div>\r\n                              \r\n                                    <button type=\"button\" (click)=\"columns.removeAt(i)\">Remove Column</button>\r\n                                  </div>\r\n                                </div>\r\n                              </form>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <ng-template  pTemplate=\"footer\">\r\n            <div class=\"flex justify-end bg-blue-500 gap-4 w-full\">\r\n                <p-button label=\"Cancel\" severity=\"secondary\" (click)=\"closeDialog()\" />\r\n                <p-button styleClass=\"border border-indigo-600\" label=\"Save\" (click)=\"saveConfiguration()\" />\r\n            </div>\r\n        </ng-template>\r\n</p-dialog>", styles: [":is() .p-dialog-content{padding:1.5rem}:is() .p-dialog-header{background:#fff;padding:1rem;font-size:1.25rem;font-weight:700}.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:#000}.save{background:#007bff;color:#fff}button:hover{opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfigurationPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-configuration-panel', standalone: true, imports: [CommonModule, ReactiveFormsModule, ButtonModule, DialogModule, InputTextModule, FormsModule], template: "<p-dialog [modal]=\"true\" [draggable]=\"false\" [(visible)]=\"visible\" [style]=\"{ width: '35rem' }\">\r\n        <ng-content  pTemplate=\"header\">\r\n            <div class=\"flex p-2 bg-white border-2\">\r\n                <p class=\"text-base\">Edit Configuration</p>\r\n            </div>\r\n        </ng-content>\r\n\r\n        <ng-template  pTemplate=\"content\">\r\n            <div class=\"flex flex-col gap-4 bg-white p-2 border-2 border-gray-200\">\r\n                <div class=\"flex items-center gap-4 mb-8\">\r\n                    <label for=\"rows\" class=\"font-semibold w-24\">Rows</label>\r\n                    <input type=\"text\" [readonly]=\"enableAPI\" [(ngModel)]=\"rows\" placeholder=\"rows\" class=\"form__input\" id=\"name\" autocomplete=\"rows\" />\r\n                </div>\r\n                <div class=\"flex items-center gap-4 mb-8\">\r\n                    <label for=\"enableAPI\" class=\"font-semibold w-24\">Enable API</label>\r\n                    <input type=\"checkbox\" [(ngModel)]=\"enableAPI\" placeholder=\"API Url\" id=\"enableAPI\" autocomplete=\"enableAPI\" />\r\n                </div>\r\n                @if (enableAPI) {\r\n                  <div class=\"flex items-center gap-4 mb-8\">\r\n                      <label for=\"api\" class=\"font-semibold w-24\">API</label>\r\n                      <input type=\"text\" [(ngModel)]=\"api\" placeholder=\"Enter API Url\" id=\"api\" autocomplete=\"api\" />\r\n                  </div>\r\n                }\r\n                <div class=\"flex items-center gap-4 mb-8\">\r\n                    <div class=\"grid grid-nogutter\">\r\n                        <div class=\"col-2 mb-3 flex items-center gap-3\">\r\n                            <p class=\"text-sm font-semibold\">Columns:</p>\r\n                            <button type=\"button\" (click)=\"addColumn()\">Add Column</button>\r\n                        </div>\r\n                        <div class=\"col-10\">\r\n                            <form [formGroup]=\"dynamicForm\" (ngSubmit)=\"onSubmit()\">\r\n                                <div formArrayName=\"columns\">\r\n                                  <div *ngFor=\"let column of columns.controls; let i = index\" [formGroupName]=\"i\">\r\n                                    <div class=\"flex gap-4 mb-2\">\r\n                                      <label class=\"white-space-nowrap\">Column Name:</label>\r\n                                      <input formControlName=\"header\" placeholder=\"Enter Column Name\" class=\"form__input\" />\r\n                                    </div>\r\n                                    <div class=\"flex gap-4\">\r\n                                      <label>Column Type:</label>\r\n                                      <select formControlName=\"cellType\">\r\n                                        <option *ngFor=\"let type of columnTypes\" [value]=\"type\">{{type}}</option>\r\n                                      </select>\r\n                                    </div>\r\n                                    @if (enableAPI) {\r\n                                      <div class=\"flex gap-4 mt-2\">\r\n                                        <label>API Value Key:</label>\r\n                                        <input formControlName=\"apiKey\" placeholder=\"Enter Value Key\" class=\"form__input\" />\r\n                                      </div>\r\n                                    }\r\n                              \r\n                                    <!-- Show options if columnType is 'radio-group' or 'dropdown' -->\r\n                                    <div *ngIf=\"['radio-group', 'dropdown'].includes(column.value.cellType)\">\r\n                                      <div formArrayName=\"options\">\r\n                                        <div *ngFor=\"let option of getOptions(i).controls; let j = index\" [formGroupName]=\"j\">\r\n                                          <label>Option {{ j + 1 }}:</label>\r\n                                          <input formControlName=\"optionName\" placeholder=\"Enter option name\" class=\"form__input\" />\r\n                                          <input formControlName=\"optionValue\" placeholder=\"Enter option value\" class=\"form__input\" />\r\n                                          <button type=\"button\" (click)=\"getOptions(i).removeAt(j)\">Remove Option</button>\r\n                                        </div>\r\n                                      </div>\r\n                                      <button type=\"button\" (click)=\"addOption(i)\">Add Option</button>\r\n                                    </div>\r\n\r\n                                    <!-- Show apiUrl if columnType is 'smart-dropdown' -->\r\n                                     <div *ngIf=\"['smart-dropdown'].includes(column.value.cellType)\" class=\"flex gap-2\">\r\n                                         <div>\r\n                                             <label>API Url</label>\r\n                                             <input formControlName=\"apiUrl\" placeholder=\"Enter api url\" class=\"form__input\" />\r\n                                           </div>\r\n                                         <div>\r\n                                             <label>Value Key</label>\r\n                                             <input formControlName=\"valueKey\" placeholder=\"Enter Value Key\" class=\"form__input\" />\r\n                                           </div>\r\n                                         <div>\r\n                                             <label>Label Key</label>\r\n                                             <input formControlName=\"labelKey\" placeholder=\"Enter Label Key\" class=\"form__input\" />\r\n                                           </div>\r\n                                     </div>\r\n                              \r\n                                    <button type=\"button\" (click)=\"columns.removeAt(i)\">Remove Column</button>\r\n                                  </div>\r\n                                </div>\r\n                              </form>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <ng-template  pTemplate=\"footer\">\r\n            <div class=\"flex justify-end bg-blue-500 gap-4 w-full\">\r\n                <p-button label=\"Cancel\" severity=\"secondary\" (click)=\"closeDialog()\" />\r\n                <p-button styleClass=\"border border-indigo-600\" label=\"Save\" (click)=\"saveConfiguration()\" />\r\n            </div>\r\n        </ng-template>\r\n</p-dialog>", styles: [":is() .p-dialog-content{padding:1.5rem}:is() .p-dialog-header{background:#fff;padding:1rem;font-size:1.25rem;font-weight:700}.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:#000}.save{background:#007bff;color:#fff}button:hover{opacity:.8}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { visible: [{
+                type: Input
+            }], isVisible: [{
+                type: Output
+            }], configuration: [{
+                type: Output
+            }] } });
+
+class SettingsPanelComponent extends FxComponent {
+    configuration = new EventEmitter();
+    visible = false;
+    openSettingDialog() {
+        this.visible = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SettingsPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SettingsPanelComponent, isStandalone: true, selector: "fx-settings-panel", outputs: { configuration: "configuration" }, usesInheritance: true, ngImport: i0, template: "<fx-configuration-panel [visible]=\"visible\" (isVisible)=\"visible = $event\" (configuration)=\"configuration.emit($event)\"></fx-configuration-panel>\r\n\r\n<div class=\"fx-element\">\r\n    <ng-content></ng-content>\r\n    <ng-container *ngIf=\"fxData.$fxForm?.$mode !== FxMode.VIEW\">\r\n        <div class=\"fx-overlay border-gray-400 border rounded cursor-pointer\" (click)=\"onElementSelect(fxData)\"\r\n            (dblclick)=\"openSettingDialog()\">\r\n        <div class=\"fx-actions flex justify-between\">\r\n\r\n            <div class=\"bg-gray-700 text-gray-300 px-2 rounded-t ml-2 text-xs flex justify-center items-center\">\r\n            <div>#{{ fxData.name }}-<span class=\"text-xs italic\">{{ fxData.id }}</span></div>\r\n            </div>\r\n\r\n            <div class=\"flex justify-around items-end mr-2\">\r\n            <div class=\"cursor-pointer bg-secondary text-white w-8 mr-1 text-center rounded-t\" title=\"Settings\"\r\n                (click)=\"fxSettingService.openSetting(fxData)\">\r\n                <i class=\"fa fa-cog text-xs\"></i>\r\n            </div>\r\n            <div (click)=\"deleteElement(fxData)\"\r\n                class=\"cursor-pointer bg-red-600 text-white w-8 mr-1 text-center rounded-t\" title=\"Delete\">\r\n                <i class=\"fa fa-times  text-xs\"></i>\r\n            </div>\r\n            </div>\r\n        </div>\r\n        </div>\r\n        <ng-container #dynamicComponentContainer></ng-container>\r\n  </ng-container>\r\n</div>", styles: [".fx-element{position:relative}.fx-element .fx-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0000001a;z-index:-1;pointer-events:none;opacity:0}.fx-element:hover .fx-overlay{z-index:1;opacity:1;pointer-events:auto}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: ConfigurationPanelComponent, selector: "fx-configuration-panel", inputs: ["visible"], outputs: ["isVisible", "configuration"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SettingsPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-settings-panel', standalone: true, imports: [CommonModule, ButtonModule, InputTextModule, ConfigurationPanelComponent], template: "<fx-configuration-panel [visible]=\"visible\" (isVisible)=\"visible = $event\" (configuration)=\"configuration.emit($event)\"></fx-configuration-panel>\r\n\r\n<div class=\"fx-element\">\r\n    <ng-content></ng-content>\r\n    <ng-container *ngIf=\"fxData.$fxForm?.$mode !== FxMode.VIEW\">\r\n        <div class=\"fx-overlay border-gray-400 border rounded cursor-pointer\" (click)=\"onElementSelect(fxData)\"\r\n            (dblclick)=\"openSettingDialog()\">\r\n        <div class=\"fx-actions flex justify-between\">\r\n\r\n            <div class=\"bg-gray-700 text-gray-300 px-2 rounded-t ml-2 text-xs flex justify-center items-center\">\r\n            <div>#{{ fxData.name }}-<span class=\"text-xs italic\">{{ fxData.id }}</span></div>\r\n            </div>\r\n\r\n            <div class=\"flex justify-around items-end mr-2\">\r\n            <div class=\"cursor-pointer bg-secondary text-white w-8 mr-1 text-center rounded-t\" title=\"Settings\"\r\n                (click)=\"fxSettingService.openSetting(fxData)\">\r\n                <i class=\"fa fa-cog text-xs\"></i>\r\n            </div>\r\n            <div (click)=\"deleteElement(fxData)\"\r\n                class=\"cursor-pointer bg-red-600 text-white w-8 mr-1 text-center rounded-t\" title=\"Delete\">\r\n                <i class=\"fa fa-times  text-xs\"></i>\r\n            </div>\r\n            </div>\r\n        </div>\r\n        </div>\r\n        <ng-container #dynamicComponentContainer></ng-container>\r\n  </ng-container>\r\n</div>", styles: [".fx-element{position:relative}.fx-element .fx-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0000001a;z-index:-1;pointer-events:none;opacity:0}.fx-element:hover .fx-overlay{z-index:1;opacity:1;pointer-events:auto}.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}\n"] }]
+        }], propDecorators: { configuration: [{
+                type: Output
+            }] } });
+
+class DynamicTableComponent extends FxBaseComponent {
+    cdr;
+    fxBuilderWrapperService;
+    tableRows = [];
+    previewType = FxMode.VIEW;
+    tableConfig = {
+        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' },
+        ],
+    };
+    destroy$ = new Subject();
+    uploadedImages = [];
+    tableFormControl = new FormControl();
+    smartDropdownOptions = {};
+    http = inject(HttpClient);
+    constructor(cdr, fxBuilderWrapperService) {
+        super(cdr);
+        this.cdr = cdr;
+        this.fxBuilderWrapperService = fxBuilderWrapperService;
+        this.onInit.subscribe((fxData) => {
+            this._register(this.tableFormControl);
+        });
+    }
+    ngOnInit() {
+        this.fxBuilderWrapperService.variables$.pipe(takeUntil(this.destroy$)).subscribe((variables) => {
+            if (variables) {
+                let dynamicTableValues;
+                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) => f.cellType === 'file-upload')?.header;
+                    dynamicTableValues?.rows?.forEach((item, index) => {
+                        this.uploadedImages[index] = item[fileHeaderName] ? item[fileHeaderName] : null;
+                    });
+                    this.tableConfig = dynamicTableValues;
+                    this.fxData.value = this.tableConfig;
+                    this.tableFormControl.reset();
+                    this.tableFormControl.setValue(this.tableConfig);
+                }
+            }
+        });
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            if (this.fxData?.value && Object.keys(this.fxData?.value)?.length != 0) {
+                this.tableConfig = this.fxData.value;
+                this.fetchSmartDropdownData();
+            }
+        }, 100);
+    }
+    fetchSmartDropdownData() {
+        this.tableConfig.columns
+            .filter((column) => column.cellType === 'smart-dropdown' && column?.apiUrl)
+            .forEach((column) => {
+            this.http.get(column.apiUrl).subscribe((response) => {
+                this.smartDropdownOptions[column.header] = response.map((item) => ({
+                    value: item[column.valueKey],
+                    name: item[column.labelKey],
+                }));
+            });
+        });
+    }
+    uploadImage(event, rowIndex) {
+        const file = event.target.files?.[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = () => {
+                this.uploadedImages[rowIndex] = reader.result;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    settings() {
+        return [
+            new FxStringSetting({ key: 'column-size', $title: 'No. of columns', value: 1 }),
+            new FxStringSetting({ key: 'table-config', $title: 'Table Configuration', value: {} }),
+        ];
+    }
+    validations() {
+        return [FxValidatorService.required];
+    }
+    getArray(count) {
+        return Array.from({ length: count });
+    }
+    onChangeConfiguration(event) {
+        const columns = event.columns.map((col) => {
+            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.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);
+    }
+    updateSettings() {
+        if (this.fxData.settings) {
+            for (let setting of this.fxData.settings) {
+                if (setting.key === 'table-config') {
+                    setting.value = this.tableConfig;
+                }
+            }
+        }
+    }
+    drawTable(event, columns) {
+        let rows;
+        this.http.get(event.api).subscribe((res) => {
+            if (res) {
+                rows = res.map((item) => {
+                    const newObj = {};
+                    columns.forEach((col) => {
+                        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);
+            }
+        });
+    }
+    deleteFile(file, index) {
+        this.uploadedImages.splice(index, 1, null);
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FxBuilderWrapperService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DynamicTableComponent, isStandalone: true, selector: "fx-dynamic-table", inputs: { tableRows: "tableRows", previewType: "previewType", tableConfig: "tableConfig" }, usesInheritance: true, ngImport: i0, template: "<fx-settings-panel [fxData]=\"fxData\" (configuration)=\"onChangeConfiguration($event)\">\r\n    <div style=\"padding: 0 1.5rem;\" *ngIf=\"fxData\">\r\n        <table style=\"width: 100%;\">\r\n            <thead>\r\n                <tr>\r\n                    <th *ngFor=\"let column of tableConfig.columns\">{{ column.header }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr *ngFor=\"let row of tableConfig.rows; let rowIndex = index\">\r\n                    <td style=\"text-align: center;\" *ngFor=\"let column of tableConfig.columns\">\r\n                        <ng-container [ngSwitch]=\"column.cellType\">\r\n                            <span [class]=\"column?.className\" *ngSwitchCase=\"'text'\">{{row[column.header]}}</span>\r\n    \r\n                            <input [class]=\"column?.className\" *ngSwitchCase=\"'input-text'\"\r\n                                [(ngModel)]=\"row[column.header]\" />\r\n    \r\n                            <input [class]=\"column?.className\" *ngSwitchCase=\"'input-number'\" type=\"number\"\r\n                                [(ngModel)]=\"row[column.header]\" />\r\n    \r\n                            <select [class]=\"column?.className\" *ngSwitchCase=\"'dropdown'\"\r\n                                [(ngModel)]=\"row[column.header]\">\r\n                                <option *ngFor=\"let option of column?.options\" [value]=\"option?.optionValue\">     \r\n                                    {{ option?.optionName }}\r\n                                </option>\r\n                            </select>\r\n    \r\n                            <select [class]=\"column?.className\" style=\"width: 60%;\" *ngSwitchCase=\"'smart-dropdown'\"\r\n                                [(ngModel)]=\"row[column.header]\">\r\n                                <option *ngFor=\"let option of smartDropdownOptions[column.header]\" [value]=\"option?.value\">\r\n                                    {{option?.name }}\r\n                                </option>\r\n                            </select>\r\n    \r\n                            <input [class]=\"column?.className\" *ngSwitchCase=\"'checkbox'\" type=\"checkbox\"\r\n                                [(ngModel)]=\"row[column.header]\" />\r\n    \r\n                            <input name=\"radio-{{rowIndex}}\" [class]=\"column?.className\" *ngSwitchCase=\"'radio'\" type=\"radio\"\r\n                                [(ngModel)]=\"row[column.header]\" />\r\n    \r\n                            <div [class]=\"column?.className\" style=\"display: flex; justify-content: center; gap: 10px;\"\r\n                                *ngSwitchCase=\"'radio-group'\">\r\n                                <label *ngFor=\"let option of column.options\">\r\n                                    <input name=\"radio-group-{{rowIndex}}\" type=\"radio\" [value]=\"option?.optionName\"\r\n                                        [(ngModel)]=\"row[column.header]\" />\r\n                                    {{ option?.optionName }}\r\n                                </label>\r\n                            </div>\r\n    \r\n                            <ng-container *ngSwitchCase=\"'file-upload'\">\r\n                                <div style=\"display: flex; flex-direction: column; align-items: center;\">\r\n                                    <img  width=\"100\" *ngIf=\"uploadedImages[rowIndex]\" [src]=\"uploadedImages[rowIndex]\"\r\n                                        alt=\"Uploaded Image\" (click)=\"deleteFile(uploadedImages[rowIndex], rowIndex)\"/>\r\n                                    <input [class]=\"column?.className\" type=\"file\" name=\"file\" #uploadFile [(ngModel)]=\"row[column.header]\" hidden multiple\r\n                                        (change)=\"uploadImage($event, rowIndex)\" />\r\n                                    <button (click)=\"uploadFile.click()\">Upload</button>\r\n                                </div>\r\n                            </ng-container>\r\n    \r\n                            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                                <textarea [class]=\"column?.className\" name=\"\" id=\"\" cols=\"30\" rows=\"2\"></textarea>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n</fx-settings-panel>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SettingsPanelComponent, selector: "fx-settings-panel", outputs: ["configuration"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-dynamic-table', standalone: true, imports: [CommonModule, FormsModule, SettingsPanelComponent, ReactiveFormsModule], template: "<fx-settings-panel [fxData]=\"fxData\" (configuration)=\"onChangeConfiguration($event)\">\r\n    <div style=\"padding: 0 1.5rem;\" *ngIf=\"fxData\">\r\n        <table style=\"width: 100%;\">\r\n            <thead>\r\n                <tr>\r\n                    <th *ngFor=\"let column of tableConfig.columns\">{{ column.header }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr *ngFor=\"let row of tableConfig.rows; let rowIndex = index\">\r\n                    <td style=\"text-align: center;\" *ngFor=\"let column of tableConfig.columns\">\r\n                        <ng-container [ngSwitch]=\"column.cellType\">\r\n                            <span [class]=\"column?.className\" *ngSwitchCase=\"'text'\">{{row[column.header]}}</span>\r\n    \r\n                            <input [class]=\"column?.className\" *ngSwitchCase=\"'input-text'\"\r\n                                [(ngModel)]=\"row[column.header]\" />\r\n    \r\n                            <input [class]=\"column?.className\" *ngSwitchCase=\"'input-number'\" type=\"number\"\r\n                                [(ngModel)]=\"row[column.header]\" />\r\n    \r\n                            <select [class]=\"column?.className\" *ngSwitchCase=\"'dropdown'\"\r\n                                [(ngModel)]=\"row[column.header]\">\r\n                                <option *ngFor=\"let option of column?.options\" [value]=\"option?.optionValue\">     \r\n                                    {{ option?.optionName }}\r\n                                </option>\r\n                            </select>\r\n    \r\n                            <select [class]=\"column?.className\" style=\"width: 60%;\" *ngSwitchCase=\"'smart-dropdown'\"\r\n                                [(ngModel)]=\"row[column.header]\">\r\n                                <option *ngFor=\"let option of smartDropdownOptions[column.header]\" [value]=\"option?.value\">\r\n                                    {{option?.name }}\r\n                                </option>\r\n                            </select>\r\n    \r\n                            <input [class]=\"column?.className\" *ngSwitchCase=\"'checkbox'\" type=\"checkbox\"\r\n                                [(ngModel)]=\"row[column.header]\" />\r\n    \r\n                            <input name=\"radio-{{rowIndex}}\" [class]=\"column?.className\" *ngSwitchCase=\"'radio'\" type=\"radio\"\r\n                                [(ngModel)]=\"row[column.header]\" />\r\n    \r\n                            <div [class]=\"column?.className\" style=\"display: flex; justify-content: center; gap: 10px;\"\r\n                                *ngSwitchCase=\"'radio-group'\">\r\n                                <label *ngFor=\"let option of column.options\">\r\n                                    <input name=\"radio-group-{{rowIndex}}\" type=\"radio\" [value]=\"option?.optionName\"\r\n                                        [(ngModel)]=\"row[column.header]\" />\r\n                                    {{ option?.optionName }}\r\n                                </label>\r\n                            </div>\r\n    \r\n                            <ng-container *ngSwitchCase=\"'file-upload'\">\r\n                                <div style=\"display: flex; flex-direction: column; align-items: center;\">\r\n                                    <img  width=\"100\" *ngIf=\"uploadedImages[rowIndex]\" [src]=\"uploadedImages[rowIndex]\"\r\n                                        alt=\"Uploaded Image\" (click)=\"deleteFile(uploadedImages[rowIndex], rowIndex)\"/>\r\n                                    <input [class]=\"column?.className\" type=\"file\" name=\"file\" #uploadFile [(ngModel)]=\"row[column.header]\" hidden multiple\r\n                                        (change)=\"uploadImage($event, rowIndex)\" />\r\n                                    <button (click)=\"uploadFile.click()\">Upload</button>\r\n                                </div>\r\n                            </ng-container>\r\n    \r\n                            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                                <textarea [class]=\"column?.className\" name=\"\" id=\"\" cols=\"30\" rows=\"2\"></textarea>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n</fx-settings-panel>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FxBuilderWrapperService }], propDecorators: { tableRows: [{
+                type: Input
+            }], previewType: [{
+                type: Input
+            }], tableConfig: [{
+                type: Input
+            }] } });
+
+class ToggleButtonComponent extends FxBaseComponent {
+    cdr;
+    toggleBtnControl = new UntypedFormControl(false);
+    isToggled = false;
+    constructor(cdr) {
+        super(cdr);
+        this.cdr = cdr;
+        this.onInit.subscribe((fxData) => {
+            this._register(this.toggleBtnControl);
+        });
+    }
+    toggle() {
+        this.isToggled = !this.toggleBtnControl.value;
+        this.toggleBtnControl.setValue(this.isToggled);
+    }
+    settings() {
+        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' }),
+        ];
+    }
+    validations() {
+        return [FxValidatorService.required];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ToggleButtonComponent, isStandalone: true, selector: "lib-toggle-button", usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\">\r\n    <button\r\n        class=\"custom-toggle-btn\"\r\n        [class]=\"setting('classes') ? setting('classes'): ''\"\r\n        [class.active]=\"toggleBtnControl.value\"\r\n        (click)=\"toggle()\"\r\n        >\r\n        {{ toggleBtnControl.value ? setting('active-text') : setting('inactive-text') }}\r\n    </button>\r\n</fx-component>\r\n", styles: [".custom-toggle-btn{padding:10px 20px;font-size:16px;font-weight:700;color:#fff;border:none;border-radius:5px;cursor:pointer;background-color:#ccc;transition:background-color .3s}.custom-toggle-btn.active{background-color:#4caf50}.custom-toggle-btn:hover{opacity:.9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-toggle-button', standalone: true, imports: [CommonModule, FxComponent, ReactiveFormsModule, FormsModule], template: "<fx-component [fxData]=\"fxData\">\r\n    <button\r\n        class=\"custom-toggle-btn\"\r\n        [class]=\"setting('classes') ? setting('classes'): ''\"\r\n        [class.active]=\"toggleBtnControl.value\"\r\n        (click)=\"toggle()\"\r\n        >\r\n        {{ toggleBtnControl.value ? setting('active-text') : setting('inactive-text') }}\r\n    </button>\r\n</fx-component>\r\n", styles: [".custom-toggle-btn{padding:10px 20px;font-size:16px;font-weight:700;color:#fff;border:none;border-radius:5px;cursor:pointer;background-color:#ccc;transition:background-color .3s}.custom-toggle-btn.active{background-color:#4caf50}.custom-toggle-btn:hover{opacity:.9}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+class UploaderComponent extends FxBaseComponent {
+    cdr;
+    uploadFileControl = new UntypedFormControl();
+    uploadedFiles = [];
+    constructor(cdr) {
+        super(cdr);
+        this.cdr = cdr;
+        this.onInit.subscribe((fxData) => {
+            this._register(this.uploadFileControl);
+        });
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        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: v4()
+                    });
+                    this.uploadFileControl.setValue(this.uploadedFiles);
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+    }
+    deleteFile(id) {
+        this.uploadedFiles = this.uploadedFiles.filter(file => file?.id !== id);
+    }
+    settings() {
+        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 }])
+        ];
+    }
+    validations() {
+        return [FxValidatorService.required];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploaderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UploaderComponent, isStandalone: true, selector: "fx-uploader", usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\">\r\n    <div class=\"custom-upload\">\r\n        <button type=\"button\" (click)=\"fileInput.click()\">\r\n          {{setting('upload-text')}}\r\n        </button>\r\n        <input\r\n          #fileInput\r\n          type=\"file\"\r\n          [multiple]=\"setting('multiple-upload')\"\r\n          (change)=\"onFileSelected($event)\"\r\n          [formControl]=\"uploadFileControl\"\r\n          hidden\r\n        />\r\n        <div class=\"file-list\">\r\n          <ng-container *ngIf=\"uploadedFiles?.length\">\r\n            <div (click)=\"deleteFile(file?.id)\" *ngFor=\"let file of uploadedFiles\">\r\n              <img class=\"file-thumbnail\" style=\"border-radius: 4px\" [src]=\"file?.previewUrl\" alt=\"\">\r\n              <!-- <p>{{file?.name}}</p> -->\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n</fx-component>\r\n", styles: [".custom-upload{display:flex;flex-direction:row;align-items:flex-start}.custom-upload button{padding:10px 20px;font-size:16px;font-weight:700;color:#fff;background-color:#007bff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s}.custom-upload button:hover{background-color:#0056b3}.custom-upload .file-list{display:flex}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-uploader', standalone: true, imports: [CommonModule, FxComponent, FormsModule, ReactiveFormsModule], template: "<fx-component [fxData]=\"fxData\">\r\n    <div class=\"custom-upload\">\r\n        <button type=\"button\" (click)=\"fileInput.click()\">\r\n          {{setting('upload-text')}}\r\n        </button>\r\n        <input\r\n          #fileInput\r\n          type=\"file\"\r\n          [multiple]=\"setting('multiple-upload')\"\r\n          (change)=\"onFileSelected($event)\"\r\n          [formControl]=\"uploadFileControl\"\r\n          hidden\r\n        />\r\n        <div class=\"file-list\">\r\n          <ng-container *ngIf=\"uploadedFiles?.length\">\r\n            <div (click)=\"deleteFile(file?.id)\" *ngFor=\"let file of uploadedFiles\">\r\n              <img class=\"file-thumbnail\" style=\"border-radius: 4px\" [src]=\"file?.previewUrl\" alt=\"\">\r\n              <!-- <p>{{file?.name}}</p> -->\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n</fx-component>\r\n", styles: [".custom-upload{display:flex;flex-direction:row;align-items:flex-start}.custom-upload button{padding:10px 20px;font-size:16px;font-weight:700;color:#fff;background-color:#007bff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s}.custom-upload button:hover{background-color:#0056b3}.custom-upload .file-list{display:flex}.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}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+class ToggleComponent extends FxBaseComponent {
+    cdr;
+    toggleControl = new FormControl(false);
+    constructor(cdr) {
+        super(cdr);
+        this.cdr = cdr;
+        this.onInit.subscribe((fxData) => {
+            this._register(this.toggleControl);
+        });
+    }
+    settings() {
+        return [
+            new FxStringSetting({ key: 'accept', $title: 'Accept Text', value: 'Yes' }),
+            new FxStringSetting({ key: 'reject', $title: 'Reject Text', value: 'No' })
+        ];
+    }
+    validations() {
+        return [FxValidatorService.required];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ToggleComponent, isStandalone: true, selector: "fx-toggle", usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\">\r\n    <div style=\"display: flex;\">\r\n        <label>\r\n            <input [formControl]=\"toggleControl\" type=\"radio\" name=\"radio_grp\" class=\"form-radio mr-3\" value=\"true\">\r\n            <span class=\"mt-1\">{{setting('accept')}}</span>\r\n        </label>\r\n        <label>\r\n            <input [formControl]=\"toggleControl\" type=\"radio\" name=\"radio_grp\" class=\"form-radio mr-3\" value=\"false\">\r\n            <span class=\"mt-1\">{{setting('reject')}}</span>\r\n        </label>\r\n    </div>\r\n</fx-component>\r\n", styles: ["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:#fff;box-shadow:none;transition:background-color .2s,color .2s,border-color .2s,box-shadow .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 #000;background-color:#add8e6}.form-radio:hover{border-color:#4682b4}span{position:absolute;inset:8px 0 0;margin:0;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-toggle', standalone: true, imports: [CommonModule, FxComponent, FormsModule, ReactiveFormsModule], template: "<fx-component [fxData]=\"fxData\">\r\n    <div style=\"display: flex;\">\r\n        <label>\r\n            <input [formControl]=\"toggleControl\" type=\"radio\" name=\"radio_grp\" class=\"form-radio mr-3\" value=\"true\">\r\n            <span class=\"mt-1\">{{setting('accept')}}</span>\r\n        </label>\r\n        <label>\r\n            <input [formControl]=\"toggleControl\" type=\"radio\" name=\"radio_grp\" class=\"form-radio mr-3\" value=\"false\">\r\n            <span class=\"mt-1\">{{setting('reject')}}</span>\r\n        </label>\r\n    </div>\r\n</fx-component>\r\n", styles: ["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:#fff;box-shadow:none;transition:background-color .2s,color .2s,border-color .2s,box-shadow .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 #000;background-color:#add8e6}.form-radio:hover{border-color:#4682b4}span{position:absolute;inset:8px 0 0;margin:0;padding:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+class FxBuilderWrapperComponent {
+    fxWrapperService;
+    componentBuilder;
+    fxForm = FxUtils.createNewForm();
+    fxMode = FxMode.EDIT;
+    fxConfiguration = {
+        settings: true,
+        logics: true,
+        customControls: true,
+    };
+    FxScope = FxScope;
+    FxMode = FxMode;
+    constructor(fxWrapperService) {
+        this.fxWrapperService = fxWrapperService;
+    }
+    ngOnInit() {
+        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);
+        }
+    }
+    ;
+    getParsedForm() {
+        return this.componentBuilder.getParsedForm();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FxBuilderWrapperComponent, deps: [{ token: FxBuilderWrapperService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FxBuilderWrapperComponent, isStandalone: true, selector: "fx-builder-wrapper", inputs: { fxForm: ["fx-form", "fxForm"] }, viewQueries: [{ propertyName: "componentBuilder", first: true, predicate: ["componentBuilder"], descendants: true }], ngImport: i0, template: `
+    <fx-component-builder 
+        #componentBuilder 
+        [fx-form]="fxForm" 
+        [configuration]="fxConfiguration" 
+        [scope]="FxScope.BUILDER"
+        >
+    </fx-component-builder>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FxComponentBuilder, selector: "fx-component-builder", inputs: ["fx-form", "scope", "configuration"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FxBuilderWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  ` }]
+        }], ctorParameters: () => [{ type: FxBuilderWrapperService }], propDecorators: { componentBuilder: [{
+                type: ViewChild,
+                args: ['componentBuilder']
+            }], fxForm: [{
+                type: Input,
+                args: [{ alias: 'fx-form', required: true }]
+            }] } });
+
+class FxFormWrapperComponent {
+    fxWrapperService;
+    form;
+    fxForm;
+    variables;
+    fxFormSubmit = new EventEmitter();
+    constructor(fxWrapperService) {
+        this.fxWrapperService = fxWrapperService;
+    }
+    ngOnChanges(changes) {
+        if ('variables' in changes && !changes['fxForm']) {
+            this.fxWrapperService.variables$.next(this.variables);
+        }
+    }
+    ngOnInit() {
+        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);
+        }
+    }
+    onSubmit(event) {
+        this.fxFormSubmit.emit(event);
+    }
+    submit() {
+        this.form.submit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FxFormWrapperComponent, deps: [{ token: FxBuilderWrapperService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FxFormWrapperComponent, isStandalone: true, selector: "fx-form-component", inputs: { fxForm: "fxForm", variables: "variables" }, outputs: { fxFormSubmit: "fxFormSubmit" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <fx-form 
+      [fxForm]="fxForm" 
+      [value]="variables" 
+      (onSubmit)="onSubmit($event)" 
+      #form
+    >
+    </fx-form>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FxFormComponent, selector: "fx-form", inputs: ["formGroup", "fxForm", "value", "mode"], outputs: ["onSubmit"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FxFormWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fx-form-component',
+                    standalone: true,
+                    imports: [CommonModule, FxFormComponent],
+                    template: `
+    <fx-form 
+      [fxForm]="fxForm" 
+      [value]="variables" 
+      (onSubmit)="onSubmit($event)" 
+      #form
+    >
+    </fx-form>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: FxBuilderWrapperService }], propDecorators: { form: [{
+                type: ViewChild,
+                args: ['form']
+            }], fxForm: [{
+                type: Input
+            }], variables: [{
+                type: Input
+            }], fxFormSubmit: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of fx-builder-wrapper
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FxBuilderWrapperComponent, FxBuilderWrapperService, FxFormWrapperComponent };
+//# sourceMappingURL=fx-form-builder-wrapper.mjs.map