fx-form-builder-wrapper 1.0.2 → 1.0.3

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

@@ -406,7 +406,9 @@ class DynamicTableComponent extends FxBaseComponent {
     generalValues;
     selectedAction;
     selectedRow;
+    selectedRowIndex;
     displayConfirmationDialog = false;
+    apiDataToDrawTable = [];
     tableFormControl = new FormControl();
     smartDropdownOptions = {};
     http = inject(HttpClient);
@@ -621,6 +623,7 @@ class DynamicTableComponent extends FxBaseComponent {
         let rows;
         this.http.get(event.api).subscribe((res) => {
             if (res) {
+                this.apiDataToDrawTable = res;
                 rows = res.map((item) => {
                     const newObj = {};
                     columns.forEach((col) => {
@@ -746,18 +749,19 @@ class DynamicTableComponent extends FxBaseComponent {
         });
         return tableData;
     }
-    handleAction(row, action) {
+    handleAction(row, action, rowIndex) {
         if (action.isConfirmationRequired) {
             this.selectedAction = action;
             this.selectedRow = row;
+            this.selectedRowIndex = rowIndex;
             this.displayConfirmationDialog = true;
         }
         else {
-            this.executeAction(row, action);
+            this.executeAction(row, action, rowIndex);
         }
     }
     confirmAction() {
-        this.executeAction(this.selectedRow, this.selectedAction);
+        this.executeAction(this.selectedRow, this.selectedAction, this.selectedRowIndex);
         this.displayConfirmationDialog = false;
     }
     cancelAction() {
@@ -841,11 +845,11 @@ class DynamicTableComponent extends FxBaseComponent {
     //     this.executeAction(row, action);
     //   }
     // }
-    executeAction(row, action) {
+    executeAction(row, action, rowIndex) {
         const payload = {};
         action.payloadOptions.forEach((option) => {
             const key = option.payloadOptionName;
-            const value = option.payloadOptionValue ?? row[option.payloadOptionName];
+            const value = option.payloadOptionValue ?? this.apiDataToDrawTable[rowIndex][key];
             if (key) {
                 payload[key] = value;
             }
@@ -897,11 +901,11 @@ class DynamicTableComponent extends FxBaseComponent {
         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 }, { token: i2$1.MessageService }, { token: i2$1.ConfirmationService }], 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" }, providers: [MessageService, ConfirmationService], usesInheritance: true, ngImport: i0, template: "<fx-settings-panel [fxData]=\"fxData\" [tableData]=\"fxData\" (configuration)=\"onChangeConfiguration($event)\">\r\n  <div *ngIf=\"fxData\">\r\n    <table style=\"width: 100%;\" class=\"formBuilder_dynamic_table\">\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 *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'\" type=\"text\" [placeholder]=\"column?.placeholder\"\r\n                                [(ngModel)]=\"row[column.header]\" /> -->\r\n\r\n              <ng-container *ngSwitchCase=\"'input-text'\">\r\n                <input [class]=\"column?.className\" type=\"text\" [placeholder]=\"column?.placeholder\"\r\n                  [(ngModel)]=\"row[column.header]\" [required]=\"column?.isRequired\" #model=\"ngModel\" />\r\n\r\n                <div *ngIf=\"column?.isRequired && model.invalid && model.touched\" class=\"text-red-500 text-sm mt-1\">\r\n                  {{ column?.errorMessage }}\r\n                </div>\r\n              </ng-container>\r\n\r\n\r\n\r\n              <input [class]=\"column?.className\" *ngSwitchCase=\"'input-number'\" type=\"number\"\r\n                [placeholder]=\"column?.placeholder\" [(ngModel)]=\"row[column.header]\" />\r\n\r\n              <select [class]=\"column?.className\" *ngSwitchCase=\"'dropdown'\" [(ngModel)]=\"row[column.header]\">\r\n\r\n                <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\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 value=\"\">Select {{column.header}}</option>\r\n                                <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\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              <!-- <p-multiSelect [options]=\"smartDropdownOptions[column.header]\" [(ngModel)]=\"row[column.header]\" optionLabel=\"name\" optionValue=\"value\" placeholder=\"Select Cities\" *ngSwitchCase=\"'smart-dropdown'\"/> -->\r\n\r\n              <!-- smart-dropdown handling -->\r\n              <ng-container *ngSwitchCase=\"'smart-dropdown'\">\r\n\r\n                <!-- Regular dropdown if isMultiselect is false or not set -->\r\n                <select *ngIf=\"!column?.isMultiselect\" [class]=\"column?.className\" style=\"width: 60%;\"\r\n                  [(ngModel)]=\"row[column.header]\">\r\n                  <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\r\n                  <option *ngFor=\"let option of smartDropdownOptions[column.header]\" [value]=\"option?.value\">\r\n                    {{ option?.name }}\r\n                  </option>\r\n                  <option value=\"__other__\">Other</option>\r\n\r\n                </select>\r\n                <input *ngIf=\"row[column.header] === '__other__'\" type=\"text\" class=\"mt-2 p-inputtext-sm\"\r\n                  [placeholder]=\"'Enter other ' + column.header\" [(ngModel)]=\"row[column.header + '_other']\" />\r\n\r\n                <!-- PrimeNG multiselect if isMultiselect is true -->\r\n                <p-multiSelect *ngIf=\"column?.isMultiselect\" [options]=\"smartDropdownOptions[column.header]\"\r\n                  [(ngModel)]=\"row[column.header]\" [class]=\"column?.className\" optionLabel=\"name\" optionValue=\"value\"\r\n                  [placeholder]=\"column.placeholder || ('Select ' + column.header)\">\r\n                  <ng-template pTemplate=\"dropdownicon\">\r\n                    <div class=\"flex align-items-center dd_down_icon\">\r\n                      <span class=\"pi pi-angle-down text-xl\"></span>\r\n                    </div>\r\n                  </ng-template>\r\n                </p-multiSelect>\r\n\r\n              </ng-container>\r\n\r\n\r\n              <!-- <input [class]=\"column?.className\" *ngSwitchCase=\"'checkbox'\" type=\"checkbox\"\r\n                                [(ngModel)]=\"row[column.header]\" /> -->\r\n              <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                <label [class]=\"column?.className\" class=\"inline-flex items-center gap-2\">\r\n                  <input type=\"checkbox\" [checked]=\"row[column.header] === column.checkedValue\"\r\n                    (change)=\"onCheckboxChange($event, row, column)\" />\r\n                  {{ column?.checkBoxLabel || '' }}\r\n                </label>\r\n              </ng-container>\r\n              <p-toast></p-toast>\r\n              <p-confirmDialog></p-confirmDialog>\r\n              <ng-container *ngSwitchCase=\"'action'\">\r\n                <div class=\"flex flex-row gap-6 justify-start items-start\">\r\n                  <div *ngFor=\"let action of column?.action\" class=\"flex flex-col items-center w-20 cursor-pointer\"\r\n                    (click)=\"handleAction(row, action)\">\r\n                    <img [src]=\"action?.actionIconPath\" alt=\"icon\" class=\"w-6 h-6 mb-1\" />\r\n                    <span class=\"text-xs text-center break-words\">\r\n                      {{ action?.actionName }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n\r\n\r\n\r\n\r\n\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                               \r\n\r\n                                  <div class=\"flex flex-col items-end justify-end relative\">\r\n                                    <div class=\"flex gap-2 flex-wrap\">\r\n                                      <div \r\n                                        class=\"relative\" \r\n                                        *ngFor=\"let image of uploadedImages?.[rowIndex]; let i = index\"\r\n                                      >\r\n                                        <img  \r\n                                          width=\"100\" \r\n                                          [src]=\"image?.result\"\r\n                                          alt=\"Uploaded Image\"\r\n                                          class=\"rounded shadow\"\r\n                                        />\r\n                                        <button \r\n                                          (click)=\"deleteFile(rowIndex, i)\" \r\n                                          class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center shadow-lg hover:bg-red-600\"\r\n                                        >\r\n                                          \u274C\r\n                                        </button>\r\n                                      </div>\r\n                                    </div>\r\n                                  \r\n                                    <input \r\n                                      [class]=\"column?.className\" \r\n                                      type=\"file\" \r\n                                      name=\"file\" \r\n                                      #uploadFile  \r\n                                      hidden \r\n                                      multiple\r\n                                      (change)=\"uploadImage($event, rowIndex)\" \r\n                                    />\r\n                                  \r\n                                    <button \r\n                                      (click)=\"uploadFile.click()\" \r\n                                      class=\"mt-2 bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600\"\r\n                                    >\r\n                                      Upload\r\n                                    </button>\r\n                                  </div>\r\n                                  \r\n                                  \r\n                            </ng-container> -->\r\n\r\n              <ng-container *ngSwitchCase=\"'file-upload'\">\r\n                <div class=\"flex items-center justify-end relative gap-4 flex-wrap\">\r\n                  <div class=\"flex gap-2 flex-wrap\">\r\n                    <div class=\"relative\" *ngFor=\"let image of uploadedImages?.[rowIndex]; let i = index\">\r\n                      <img width=\"100\" height=\"80\" [src]=\"image?.result\" alt=\"Uploaded Image\"\r\n                        class=\"rounded shadow orientation\" />\r\n                      <a (click)=\"deleteFile(rowIndex, i)\"\r\n                        class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center cursor-pointer\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_6837_29683)\">\r\n                            <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"#F3A041\" />\r\n                            <mask id=\"mask0_6837_29683\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"4\" y=\"4\"\r\n                              width=\"24\" height=\"24\">\r\n                              <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" fill=\"#D9D9D9\" />\r\n                            </mask>\r\n                            <g mask=\"url(#mask0_6837_29683)\">\r\n                              <path\r\n                                d=\"M8.2045 8.99815L5.81802 6.61167L6.61351 5.81617L9 8.20266L11.3865 5.81617L12.182 6.61167L9.7955 8.99815L12.182 11.3846L11.3865 12.1801L9 9.79365L6.61351 12.1801L5.81802 11.3846L8.2045 8.99815Z\"\r\n                                fill=\"white\" />\r\n                            </g>\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_6837_29683\">\r\n                              <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </a>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <input [class]=\"column?.className\" type=\"file\" name=\"file\" #uploadFile hidden multiple\r\n                    (change)=\"uploadImage($event, rowIndex)\" />\r\n                  <div class=\"flex flex-col justify-center items-center cursor-pointer\" (click)=\"uploadFile.click()\">\r\n                    <div>\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\">\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                          d=\"M14.001 3.00195C11.5322 3.00195 9.16722 3.86956 7.23641 5.38414L7.23598 4.59695C7.23598 4.52473 7.22175 4.45321 7.19411 4.38648C7.16647 4.31975 7.12596 4.25912 7.07489 4.20804C7.02381 4.15697 6.96318 4.11646 6.89645 4.08882C6.82972 4.06118 6.7582 4.04695 6.68598 4.04695C6.61375 4.04695 6.54223 4.06118 6.4755 4.08882C6.40877 4.11646 6.34814 4.15697 6.29707 4.20804C6.24599 4.25912 6.20548 4.31975 6.17784 4.38648C6.1502 4.45321 6.13598 4.52473 6.13598 4.59695L6.13642 6.68652C6.13643 6.83239 6.19438 6.97228 6.29752 7.07542C6.40067 7.17856 6.54055 7.23651 6.68642 7.23652H8.77598C8.8482 7.23652 8.91972 7.2223 8.98645 7.19466C9.05318 7.16702 9.11381 7.12651 9.16489 7.07543C9.21596 7.02436 9.25647 6.96373 9.28411 6.897C9.31175 6.83027 9.32598 6.75875 9.32598 6.68652C9.32598 6.6143 9.31175 6.54278 9.28411 6.47605C9.25647 6.40932 9.21596 6.34869 9.16489 6.29761C9.11381 6.24654 9.05318 6.20603 8.98645 6.17839C8.91972 6.15075 8.8482 6.13652 8.77598 6.13652H8.0584C9.7702 4.84387 11.8399 4.10195 14.001 4.10195C19.4751 4.10195 23.901 8.52782 23.901 14.002C23.901 19.4761 19.4751 23.902 14.001 23.902C8.52684 23.902 4.10098 19.4761 4.10098 14.002C4.10098 12.6381 4.38263 11.2888 4.92855 10.0389C4.98691 9.90532 4.98982 9.75399 4.93665 9.61822C4.88347 9.48246 4.77855 9.37336 4.64496 9.31492C4.57877 9.28596 4.50753 9.27032 4.4353 9.2689C4.36306 9.26747 4.29126 9.2803 4.22398 9.30663C4.15671 9.33297 4.09528 9.3723 4.04321 9.42238C3.99114 9.47247 3.94944 9.53232 3.92051 9.59852C3.31393 10.9872 3.00098 12.4866 3.00098 14.002C3.00098 20.0706 7.93236 25.002 14.001 25.002C20.0696 25.002 25.001 20.0706 25.001 14.002C25.001 7.93334 20.0696 3.00195 14.001 3.00195Z\"\r\n                          fill=\"#F3A041\" />\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                          d=\"M13.9988 6.13965C9.6616 6.13965 6.13379 9.66746 6.13379 14.0046C6.13379 18.3418 9.6616 21.8696 13.9988 21.8696C18.336 21.8696 21.8638 18.3418 21.8638 14.0046C21.8638 9.66746 18.336 6.13965 13.9988 6.13965ZM13.9988 8.22965C14.1447 8.22965 14.2846 8.28759 14.3877 8.39074C14.4908 8.49388 14.5488 8.63378 14.5488 8.77965V13.7769L17.5227 16.7508C17.6258 16.8539 17.6837 16.9938 17.6837 17.1396C17.6837 17.2855 17.6258 17.4254 17.5227 17.5285C17.4195 17.6316 17.2796 17.6896 17.1338 17.6896C16.9879 17.6896 16.8481 17.6316 16.7449 17.5285L13.6099 14.3935C13.5068 14.2904 13.4488 14.1505 13.4488 14.0046V8.77965C13.4488 8.63378 13.5067 8.49388 13.6099 8.39074C13.713 8.28759 13.8529 8.22965 13.9988 8.22965Z\"\r\n                          fill=\"#F3A041\" />\r\n                        <rect width=\"28.56\" height=\"28\" rx=\"1.51479\" fill=\"#F3A041\" />\r\n                        <path\r\n                          d=\"M15.068 22.7391V17.6708H18.4968L14.2108 12.6025L9.9248 17.6708H13.3536V22.7391H9.06759V22.6969C8.92358 22.7053 8.78643 22.7391 8.63899 22.7391C6.93391 22.7391 5.29866 22.0717 4.09298 20.8835C2.8873 19.6954 2.20996 18.084 2.20996 16.4037C2.20996 13.1532 4.70443 10.5042 7.90523 10.141C8.18585 8.6953 8.96892 7.39118 10.1197 6.45292C11.2706 5.51465 12.7172 5.00089 14.2108 5C15.7047 5.00082 17.1515 5.51452 18.3026 6.45277C19.4537 7.39101 20.2371 8.69516 20.5181 10.141C23.7189 10.5042 26.21 13.1532 26.21 16.4037C26.21 18.084 25.5326 19.6954 24.3269 20.8835C23.1213 22.0717 21.486 22.7391 19.7809 22.7391C19.6369 22.7391 19.4981 22.7053 19.3523 22.6969V22.7391H15.068Z\"\r\n                          fill=\"white\" />\r\n                      </svg>\r\n                    </div>\r\n                    <a type=\"button\" (click)=\"uploadFile.click()\" class=\"text-base cursor-pointer\">\r\n                      {{ 'Upload' }}\r\n                    </a>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea [class]=\"column?.className\" name=\"\" id=\"\" cols=\"30\" rows=\"2\"\r\n                  [placeholder]=\"column?.placeholder\"></textarea>\r\n              </ng-container>\r\n            </ng-container>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n    <!-- Your main template -->\r\n<p-dialog header=\"Confirmation\"\r\n[(visible)]=\"displayConfirmationDialog\"\r\nmodal=\"true\"\r\n[closable]=\"false\"\r\n[responsive]=\"true\"\r\nstyleClass=\"confirmation-dialog\"\r\n[style]=\"{width: '400px'}\">\r\n\r\n<div class=\"p-d-flex p-ai-center\">\r\n<i class=\"pi pi-exclamation-triangle p-mr-2\" style=\"font-size: 2rem; color: #f39c12\"></i>\r\n<span>Are you sure you want to perform \"<strong>{{ selectedAction?.actionName }}</strong>\"?</span>\r\n</div>\r\n\r\n<ng-template pTemplate=\"footer\">\r\n<button pButton label=\"Yes\" icon=\"pi pi-check\" (click)=\"confirmAction()\" class=\"p-button-text\" autofocus></button>\r\n<button pButton label=\"No\" icon=\"pi pi-times\" (click)=\"cancelAction()\" class=\"p-button-text\"></button>\r\n</ng-template>\r\n</p-dialog>\r\n\r\n  </div>\r\n</fx-settings-panel>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.formBuilder_dynamic_table{border:.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;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A    <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A    <path d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:host::ng-deep .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:host::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:host::ng-deep .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:host::ng-deep .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}\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: "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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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", inputs: ["tableData"], outputs: ["configuration"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i7.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { 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"] }] });
+    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" }, providers: [MessageService, ConfirmationService], usesInheritance: true, ngImport: i0, template: "<fx-settings-panel [fxData]=\"fxData\" [tableData]=\"fxData\" (configuration)=\"onChangeConfiguration($event)\">\r\n  <div *ngIf=\"fxData\">\r\n    <table style=\"width: 100%;\" class=\"formBuilder_dynamic_table\">\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 *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'\" type=\"text\" [placeholder]=\"column?.placeholder\"\r\n                                [(ngModel)]=\"row[column.header]\" /> -->\r\n\r\n              <ng-container *ngSwitchCase=\"'input-text'\">\r\n                <input [class]=\"column?.className\" type=\"text\" [placeholder]=\"column?.placeholder\"\r\n                  [(ngModel)]=\"row[column.header]\" [required]=\"column?.isRequired\" #model=\"ngModel\" />\r\n\r\n                <div *ngIf=\"column?.isRequired && model.invalid && model.touched\" class=\"text-red-500 text-sm mt-1\">\r\n                  {{ column?.errorMessage }}\r\n                </div>\r\n              </ng-container>\r\n\r\n\r\n\r\n              <input [class]=\"column?.className\" *ngSwitchCase=\"'input-number'\" type=\"number\"\r\n                [placeholder]=\"column?.placeholder\" [(ngModel)]=\"row[column.header]\" />\r\n\r\n              <select [class]=\"column?.className\" *ngSwitchCase=\"'dropdown'\" [(ngModel)]=\"row[column.header]\">\r\n\r\n                <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\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 value=\"\">Select {{column.header}}</option>\r\n                                <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\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              <!-- <p-multiSelect [options]=\"smartDropdownOptions[column.header]\" [(ngModel)]=\"row[column.header]\" optionLabel=\"name\" optionValue=\"value\" placeholder=\"Select Cities\" *ngSwitchCase=\"'smart-dropdown'\"/> -->\r\n\r\n              <!-- smart-dropdown handling -->\r\n              <ng-container *ngSwitchCase=\"'smart-dropdown'\">\r\n\r\n                <!-- Regular dropdown if isMultiselect is false or not set -->\r\n                <select *ngIf=\"!column?.isMultiselect\" [class]=\"column?.className\" style=\"width: 60%;\"\r\n                  [(ngModel)]=\"row[column.header]\">\r\n                  <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\r\n                  <option *ngFor=\"let option of smartDropdownOptions[column.header]\" [value]=\"option?.value\">\r\n                    {{ option?.name }}\r\n                  </option>\r\n                  <option value=\"__other__\">Other</option>\r\n\r\n                </select>\r\n                <input *ngIf=\"row[column.header] === '__other__'\" type=\"text\" class=\"mt-2 p-inputtext-sm\"\r\n                  [placeholder]=\"'Enter other ' + column.header\" [(ngModel)]=\"row[column.header + '_other']\" />\r\n\r\n                <!-- PrimeNG multiselect if isMultiselect is true -->\r\n                <p-multiSelect *ngIf=\"column?.isMultiselect\" [options]=\"smartDropdownOptions[column.header]\"\r\n                  [(ngModel)]=\"row[column.header]\" [class]=\"column?.className\" optionLabel=\"name\" optionValue=\"value\"\r\n                  [placeholder]=\"column.placeholder || ('Select ' + column.header)\">\r\n                  <ng-template pTemplate=\"dropdownicon\">\r\n                    <div class=\"flex align-items-center dd_down_icon\">\r\n                      <span class=\"pi pi-angle-down text-xl\"></span>\r\n                    </div>\r\n                  </ng-template>\r\n                </p-multiSelect>\r\n\r\n              </ng-container>\r\n\r\n\r\n              <!-- <input [class]=\"column?.className\" *ngSwitchCase=\"'checkbox'\" type=\"checkbox\"\r\n                                [(ngModel)]=\"row[column.header]\" /> -->\r\n              <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                <label [class]=\"column?.className\" class=\"inline-flex items-center gap-2\">\r\n                  <input type=\"checkbox\" [checked]=\"row[column.header] === column.checkedValue\"\r\n                    (change)=\"onCheckboxChange($event, row, column)\" />\r\n                  {{ column?.checkBoxLabel || '' }}\r\n                </label>\r\n              </ng-container>\r\n              <p-toast></p-toast>\r\n              <p-confirmDialog></p-confirmDialog>\r\n              <ng-container *ngSwitchCase=\"'action'\">\r\n                <div class=\"flex flex-row gap-6 justify-start items-start\">\r\n                  <div *ngFor=\"let action of column?.action\" class=\"flex flex-col items-center w-20 cursor-pointer\"\r\n                    (click)=\"handleAction(row, action,rowIndex)\">\r\n                    <img [src]=\"action?.actionIconPath\" alt=\"icon\" class=\"w-6 h-6 mb-1\" />\r\n                    <span class=\"text-xs text-center break-words\">\r\n                      {{ action?.actionName }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n\r\n\r\n\r\n\r\n\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                               \r\n\r\n                                  <div class=\"flex flex-col items-end justify-end relative\">\r\n                                    <div class=\"flex gap-2 flex-wrap\">\r\n                                      <div \r\n                                        class=\"relative\" \r\n                                        *ngFor=\"let image of uploadedImages?.[rowIndex]; let i = index\"\r\n                                      >\r\n                                        <img  \r\n                                          width=\"100\" \r\n                                          [src]=\"image?.result\"\r\n                                          alt=\"Uploaded Image\"\r\n                                          class=\"rounded shadow\"\r\n                                        />\r\n                                        <button \r\n                                          (click)=\"deleteFile(rowIndex, i)\" \r\n                                          class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center shadow-lg hover:bg-red-600\"\r\n                                        >\r\n                                          \u274C\r\n                                        </button>\r\n                                      </div>\r\n                                    </div>\r\n                                  \r\n                                    <input \r\n                                      [class]=\"column?.className\" \r\n                                      type=\"file\" \r\n                                      name=\"file\" \r\n                                      #uploadFile  \r\n                                      hidden \r\n                                      multiple\r\n                                      (change)=\"uploadImage($event, rowIndex)\" \r\n                                    />\r\n                                  \r\n                                    <button \r\n                                      (click)=\"uploadFile.click()\" \r\n                                      class=\"mt-2 bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600\"\r\n                                    >\r\n                                      Upload\r\n                                    </button>\r\n                                  </div>\r\n                                  \r\n                                  \r\n                            </ng-container> -->\r\n\r\n              <ng-container *ngSwitchCase=\"'file-upload'\">\r\n                <div class=\"flex items-center justify-end relative gap-4 flex-wrap\">\r\n                  <div class=\"flex gap-2 flex-wrap\">\r\n                    <div class=\"relative\" *ngFor=\"let image of uploadedImages?.[rowIndex]; let i = index\">\r\n                      <img width=\"100\" height=\"80\" [src]=\"image?.result\" alt=\"Uploaded Image\"\r\n                        class=\"rounded shadow orientation\" />\r\n                      <a (click)=\"deleteFile(rowIndex, i)\"\r\n                        class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center cursor-pointer\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_6837_29683)\">\r\n                            <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"#F3A041\" />\r\n                            <mask id=\"mask0_6837_29683\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"4\" y=\"4\"\r\n                              width=\"24\" height=\"24\">\r\n                              <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" fill=\"#D9D9D9\" />\r\n                            </mask>\r\n                            <g mask=\"url(#mask0_6837_29683)\">\r\n                              <path\r\n                                d=\"M8.2045 8.99815L5.81802 6.61167L6.61351 5.81617L9 8.20266L11.3865 5.81617L12.182 6.61167L9.7955 8.99815L12.182 11.3846L11.3865 12.1801L9 9.79365L6.61351 12.1801L5.81802 11.3846L8.2045 8.99815Z\"\r\n                                fill=\"white\" />\r\n                            </g>\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_6837_29683\">\r\n                              <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </a>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <input [class]=\"column?.className\" type=\"file\" name=\"file\" #uploadFile hidden multiple\r\n                    (change)=\"uploadImage($event, rowIndex)\" />\r\n                  <div class=\"flex flex-col justify-center items-center cursor-pointer\" (click)=\"uploadFile.click()\">\r\n                    <div>\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\">\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                          d=\"M14.001 3.00195C11.5322 3.00195 9.16722 3.86956 7.23641 5.38414L7.23598 4.59695C7.23598 4.52473 7.22175 4.45321 7.19411 4.38648C7.16647 4.31975 7.12596 4.25912 7.07489 4.20804C7.02381 4.15697 6.96318 4.11646 6.89645 4.08882C6.82972 4.06118 6.7582 4.04695 6.68598 4.04695C6.61375 4.04695 6.54223 4.06118 6.4755 4.08882C6.40877 4.11646 6.34814 4.15697 6.29707 4.20804C6.24599 4.25912 6.20548 4.31975 6.17784 4.38648C6.1502 4.45321 6.13598 4.52473 6.13598 4.59695L6.13642 6.68652C6.13643 6.83239 6.19438 6.97228 6.29752 7.07542C6.40067 7.17856 6.54055 7.23651 6.68642 7.23652H8.77598C8.8482 7.23652 8.91972 7.2223 8.98645 7.19466C9.05318 7.16702 9.11381 7.12651 9.16489 7.07543C9.21596 7.02436 9.25647 6.96373 9.28411 6.897C9.31175 6.83027 9.32598 6.75875 9.32598 6.68652C9.32598 6.6143 9.31175 6.54278 9.28411 6.47605C9.25647 6.40932 9.21596 6.34869 9.16489 6.29761C9.11381 6.24654 9.05318 6.20603 8.98645 6.17839C8.91972 6.15075 8.8482 6.13652 8.77598 6.13652H8.0584C9.7702 4.84387 11.8399 4.10195 14.001 4.10195C19.4751 4.10195 23.901 8.52782 23.901 14.002C23.901 19.4761 19.4751 23.902 14.001 23.902C8.52684 23.902 4.10098 19.4761 4.10098 14.002C4.10098 12.6381 4.38263 11.2888 4.92855 10.0389C4.98691 9.90532 4.98982 9.75399 4.93665 9.61822C4.88347 9.48246 4.77855 9.37336 4.64496 9.31492C4.57877 9.28596 4.50753 9.27032 4.4353 9.2689C4.36306 9.26747 4.29126 9.2803 4.22398 9.30663C4.15671 9.33297 4.09528 9.3723 4.04321 9.42238C3.99114 9.47247 3.94944 9.53232 3.92051 9.59852C3.31393 10.9872 3.00098 12.4866 3.00098 14.002C3.00098 20.0706 7.93236 25.002 14.001 25.002C20.0696 25.002 25.001 20.0706 25.001 14.002C25.001 7.93334 20.0696 3.00195 14.001 3.00195Z\"\r\n                          fill=\"#F3A041\" />\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                          d=\"M13.9988 6.13965C9.6616 6.13965 6.13379 9.66746 6.13379 14.0046C6.13379 18.3418 9.6616 21.8696 13.9988 21.8696C18.336 21.8696 21.8638 18.3418 21.8638 14.0046C21.8638 9.66746 18.336 6.13965 13.9988 6.13965ZM13.9988 8.22965C14.1447 8.22965 14.2846 8.28759 14.3877 8.39074C14.4908 8.49388 14.5488 8.63378 14.5488 8.77965V13.7769L17.5227 16.7508C17.6258 16.8539 17.6837 16.9938 17.6837 17.1396C17.6837 17.2855 17.6258 17.4254 17.5227 17.5285C17.4195 17.6316 17.2796 17.6896 17.1338 17.6896C16.9879 17.6896 16.8481 17.6316 16.7449 17.5285L13.6099 14.3935C13.5068 14.2904 13.4488 14.1505 13.4488 14.0046V8.77965C13.4488 8.63378 13.5067 8.49388 13.6099 8.39074C13.713 8.28759 13.8529 8.22965 13.9988 8.22965Z\"\r\n                          fill=\"#F3A041\" />\r\n                        <rect width=\"28.56\" height=\"28\" rx=\"1.51479\" fill=\"#F3A041\" />\r\n                        <path\r\n                          d=\"M15.068 22.7391V17.6708H18.4968L14.2108 12.6025L9.9248 17.6708H13.3536V22.7391H9.06759V22.6969C8.92358 22.7053 8.78643 22.7391 8.63899 22.7391C6.93391 22.7391 5.29866 22.0717 4.09298 20.8835C2.8873 19.6954 2.20996 18.084 2.20996 16.4037C2.20996 13.1532 4.70443 10.5042 7.90523 10.141C8.18585 8.6953 8.96892 7.39118 10.1197 6.45292C11.2706 5.51465 12.7172 5.00089 14.2108 5C15.7047 5.00082 17.1515 5.51452 18.3026 6.45277C19.4537 7.39101 20.2371 8.69516 20.5181 10.141C23.7189 10.5042 26.21 13.1532 26.21 16.4037C26.21 18.084 25.5326 19.6954 24.3269 20.8835C23.1213 22.0717 21.486 22.7391 19.7809 22.7391C19.6369 22.7391 19.4981 22.7053 19.3523 22.6969V22.7391H15.068Z\"\r\n                          fill=\"white\" />\r\n                      </svg>\r\n                    </div>\r\n                    <a type=\"button\" (click)=\"uploadFile.click()\" class=\"text-base cursor-pointer\">\r\n                      {{ 'Upload' }}\r\n                    </a>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea [class]=\"column?.className\" name=\"\" id=\"\" cols=\"30\" rows=\"2\"\r\n                  [placeholder]=\"column?.placeholder\"></textarea>\r\n              </ng-container>\r\n            </ng-container>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n    <!-- Your main template -->\r\n<p-dialog header=\"Confirmation\"\r\n[(visible)]=\"displayConfirmationDialog\"\r\nmodal=\"true\"\r\n[closable]=\"false\"\r\n[responsive]=\"true\"\r\nstyleClass=\"confirmation-dialog\"\r\n[style]=\"{width: '400px'}\">\r\n\r\n<div class=\"p-d-flex p-ai-center\">\r\n<i class=\"pi pi-exclamation-triangle p-mr-2\" style=\"font-size: 2rem; color: #f39c12\"></i>\r\n<span>Are you sure you want to perform \"<strong>{{ selectedAction?.actionName }}</strong>\"?</span>\r\n</div>\r\n\r\n<ng-template pTemplate=\"footer\">\r\n<button pButton label=\"Yes\" icon=\"pi pi-check\" (click)=\"confirmAction()\" class=\"p-button-text\" autofocus></button>\r\n<button pButton label=\"No\" icon=\"pi pi-times\" (click)=\"cancelAction()\" class=\"p-button-text\"></button>\r\n</ng-template>\r\n</p-dialog>\r\n\r\n  </div>\r\n</fx-settings-panel>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.formBuilder_dynamic_table{border:.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;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A    <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A    <path d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:host::ng-deep .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:host::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:host::ng-deep .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:host::ng-deep .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}\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: "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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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", inputs: ["tableData"], outputs: ["configuration"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i7.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { 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"] }] });
 }
 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, MultiSelectModule, InputNumberModule, InputTextModule, DropdownModule, ToastModule, ConfirmDialogModule, DialogModule], providers: [MessageService, ConfirmationService], template: "<fx-settings-panel [fxData]=\"fxData\" [tableData]=\"fxData\" (configuration)=\"onChangeConfiguration($event)\">\r\n  <div *ngIf=\"fxData\">\r\n    <table style=\"width: 100%;\" class=\"formBuilder_dynamic_table\">\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 *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'\" type=\"text\" [placeholder]=\"column?.placeholder\"\r\n                                [(ngModel)]=\"row[column.header]\" /> -->\r\n\r\n              <ng-container *ngSwitchCase=\"'input-text'\">\r\n                <input [class]=\"column?.className\" type=\"text\" [placeholder]=\"column?.placeholder\"\r\n                  [(ngModel)]=\"row[column.header]\" [required]=\"column?.isRequired\" #model=\"ngModel\" />\r\n\r\n                <div *ngIf=\"column?.isRequired && model.invalid && model.touched\" class=\"text-red-500 text-sm mt-1\">\r\n                  {{ column?.errorMessage }}\r\n                </div>\r\n              </ng-container>\r\n\r\n\r\n\r\n              <input [class]=\"column?.className\" *ngSwitchCase=\"'input-number'\" type=\"number\"\r\n                [placeholder]=\"column?.placeholder\" [(ngModel)]=\"row[column.header]\" />\r\n\r\n              <select [class]=\"column?.className\" *ngSwitchCase=\"'dropdown'\" [(ngModel)]=\"row[column.header]\">\r\n\r\n                <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\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 value=\"\">Select {{column.header}}</option>\r\n                                <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\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              <!-- <p-multiSelect [options]=\"smartDropdownOptions[column.header]\" [(ngModel)]=\"row[column.header]\" optionLabel=\"name\" optionValue=\"value\" placeholder=\"Select Cities\" *ngSwitchCase=\"'smart-dropdown'\"/> -->\r\n\r\n              <!-- smart-dropdown handling -->\r\n              <ng-container *ngSwitchCase=\"'smart-dropdown'\">\r\n\r\n                <!-- Regular dropdown if isMultiselect is false or not set -->\r\n                <select *ngIf=\"!column?.isMultiselect\" [class]=\"column?.className\" style=\"width: 60%;\"\r\n                  [(ngModel)]=\"row[column.header]\">\r\n                  <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\r\n                  <option *ngFor=\"let option of smartDropdownOptions[column.header]\" [value]=\"option?.value\">\r\n                    {{ option?.name }}\r\n                  </option>\r\n                  <option value=\"__other__\">Other</option>\r\n\r\n                </select>\r\n                <input *ngIf=\"row[column.header] === '__other__'\" type=\"text\" class=\"mt-2 p-inputtext-sm\"\r\n                  [placeholder]=\"'Enter other ' + column.header\" [(ngModel)]=\"row[column.header + '_other']\" />\r\n\r\n                <!-- PrimeNG multiselect if isMultiselect is true -->\r\n                <p-multiSelect *ngIf=\"column?.isMultiselect\" [options]=\"smartDropdownOptions[column.header]\"\r\n                  [(ngModel)]=\"row[column.header]\" [class]=\"column?.className\" optionLabel=\"name\" optionValue=\"value\"\r\n                  [placeholder]=\"column.placeholder || ('Select ' + column.header)\">\r\n                  <ng-template pTemplate=\"dropdownicon\">\r\n                    <div class=\"flex align-items-center dd_down_icon\">\r\n                      <span class=\"pi pi-angle-down text-xl\"></span>\r\n                    </div>\r\n                  </ng-template>\r\n                </p-multiSelect>\r\n\r\n              </ng-container>\r\n\r\n\r\n              <!-- <input [class]=\"column?.className\" *ngSwitchCase=\"'checkbox'\" type=\"checkbox\"\r\n                                [(ngModel)]=\"row[column.header]\" /> -->\r\n              <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                <label [class]=\"column?.className\" class=\"inline-flex items-center gap-2\">\r\n                  <input type=\"checkbox\" [checked]=\"row[column.header] === column.checkedValue\"\r\n                    (change)=\"onCheckboxChange($event, row, column)\" />\r\n                  {{ column?.checkBoxLabel || '' }}\r\n                </label>\r\n              </ng-container>\r\n              <p-toast></p-toast>\r\n              <p-confirmDialog></p-confirmDialog>\r\n              <ng-container *ngSwitchCase=\"'action'\">\r\n                <div class=\"flex flex-row gap-6 justify-start items-start\">\r\n                  <div *ngFor=\"let action of column?.action\" class=\"flex flex-col items-center w-20 cursor-pointer\"\r\n                    (click)=\"handleAction(row, action)\">\r\n                    <img [src]=\"action?.actionIconPath\" alt=\"icon\" class=\"w-6 h-6 mb-1\" />\r\n                    <span class=\"text-xs text-center break-words\">\r\n                      {{ action?.actionName }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n\r\n\r\n\r\n\r\n\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                               \r\n\r\n                                  <div class=\"flex flex-col items-end justify-end relative\">\r\n                                    <div class=\"flex gap-2 flex-wrap\">\r\n                                      <div \r\n                                        class=\"relative\" \r\n                                        *ngFor=\"let image of uploadedImages?.[rowIndex]; let i = index\"\r\n                                      >\r\n                                        <img  \r\n                                          width=\"100\" \r\n                                          [src]=\"image?.result\"\r\n                                          alt=\"Uploaded Image\"\r\n                                          class=\"rounded shadow\"\r\n                                        />\r\n                                        <button \r\n                                          (click)=\"deleteFile(rowIndex, i)\" \r\n                                          class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center shadow-lg hover:bg-red-600\"\r\n                                        >\r\n                                          \u274C\r\n                                        </button>\r\n                                      </div>\r\n                                    </div>\r\n                                  \r\n                                    <input \r\n                                      [class]=\"column?.className\" \r\n                                      type=\"file\" \r\n                                      name=\"file\" \r\n                                      #uploadFile  \r\n                                      hidden \r\n                                      multiple\r\n                                      (change)=\"uploadImage($event, rowIndex)\" \r\n                                    />\r\n                                  \r\n                                    <button \r\n                                      (click)=\"uploadFile.click()\" \r\n                                      class=\"mt-2 bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600\"\r\n                                    >\r\n                                      Upload\r\n                                    </button>\r\n                                  </div>\r\n                                  \r\n                                  \r\n                            </ng-container> -->\r\n\r\n              <ng-container *ngSwitchCase=\"'file-upload'\">\r\n                <div class=\"flex items-center justify-end relative gap-4 flex-wrap\">\r\n                  <div class=\"flex gap-2 flex-wrap\">\r\n                    <div class=\"relative\" *ngFor=\"let image of uploadedImages?.[rowIndex]; let i = index\">\r\n                      <img width=\"100\" height=\"80\" [src]=\"image?.result\" alt=\"Uploaded Image\"\r\n                        class=\"rounded shadow orientation\" />\r\n                      <a (click)=\"deleteFile(rowIndex, i)\"\r\n                        class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center cursor-pointer\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_6837_29683)\">\r\n                            <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"#F3A041\" />\r\n                            <mask id=\"mask0_6837_29683\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"4\" y=\"4\"\r\n                              width=\"24\" height=\"24\">\r\n                              <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" fill=\"#D9D9D9\" />\r\n                            </mask>\r\n                            <g mask=\"url(#mask0_6837_29683)\">\r\n                              <path\r\n                                d=\"M8.2045 8.99815L5.81802 6.61167L6.61351 5.81617L9 8.20266L11.3865 5.81617L12.182 6.61167L9.7955 8.99815L12.182 11.3846L11.3865 12.1801L9 9.79365L6.61351 12.1801L5.81802 11.3846L8.2045 8.99815Z\"\r\n                                fill=\"white\" />\r\n                            </g>\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_6837_29683\">\r\n                              <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </a>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <input [class]=\"column?.className\" type=\"file\" name=\"file\" #uploadFile hidden multiple\r\n                    (change)=\"uploadImage($event, rowIndex)\" />\r\n                  <div class=\"flex flex-col justify-center items-center cursor-pointer\" (click)=\"uploadFile.click()\">\r\n                    <div>\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\">\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                          d=\"M14.001 3.00195C11.5322 3.00195 9.16722 3.86956 7.23641 5.38414L7.23598 4.59695C7.23598 4.52473 7.22175 4.45321 7.19411 4.38648C7.16647 4.31975 7.12596 4.25912 7.07489 4.20804C7.02381 4.15697 6.96318 4.11646 6.89645 4.08882C6.82972 4.06118 6.7582 4.04695 6.68598 4.04695C6.61375 4.04695 6.54223 4.06118 6.4755 4.08882C6.40877 4.11646 6.34814 4.15697 6.29707 4.20804C6.24599 4.25912 6.20548 4.31975 6.17784 4.38648C6.1502 4.45321 6.13598 4.52473 6.13598 4.59695L6.13642 6.68652C6.13643 6.83239 6.19438 6.97228 6.29752 7.07542C6.40067 7.17856 6.54055 7.23651 6.68642 7.23652H8.77598C8.8482 7.23652 8.91972 7.2223 8.98645 7.19466C9.05318 7.16702 9.11381 7.12651 9.16489 7.07543C9.21596 7.02436 9.25647 6.96373 9.28411 6.897C9.31175 6.83027 9.32598 6.75875 9.32598 6.68652C9.32598 6.6143 9.31175 6.54278 9.28411 6.47605C9.25647 6.40932 9.21596 6.34869 9.16489 6.29761C9.11381 6.24654 9.05318 6.20603 8.98645 6.17839C8.91972 6.15075 8.8482 6.13652 8.77598 6.13652H8.0584C9.7702 4.84387 11.8399 4.10195 14.001 4.10195C19.4751 4.10195 23.901 8.52782 23.901 14.002C23.901 19.4761 19.4751 23.902 14.001 23.902C8.52684 23.902 4.10098 19.4761 4.10098 14.002C4.10098 12.6381 4.38263 11.2888 4.92855 10.0389C4.98691 9.90532 4.98982 9.75399 4.93665 9.61822C4.88347 9.48246 4.77855 9.37336 4.64496 9.31492C4.57877 9.28596 4.50753 9.27032 4.4353 9.2689C4.36306 9.26747 4.29126 9.2803 4.22398 9.30663C4.15671 9.33297 4.09528 9.3723 4.04321 9.42238C3.99114 9.47247 3.94944 9.53232 3.92051 9.59852C3.31393 10.9872 3.00098 12.4866 3.00098 14.002C3.00098 20.0706 7.93236 25.002 14.001 25.002C20.0696 25.002 25.001 20.0706 25.001 14.002C25.001 7.93334 20.0696 3.00195 14.001 3.00195Z\"\r\n                          fill=\"#F3A041\" />\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                          d=\"M13.9988 6.13965C9.6616 6.13965 6.13379 9.66746 6.13379 14.0046C6.13379 18.3418 9.6616 21.8696 13.9988 21.8696C18.336 21.8696 21.8638 18.3418 21.8638 14.0046C21.8638 9.66746 18.336 6.13965 13.9988 6.13965ZM13.9988 8.22965C14.1447 8.22965 14.2846 8.28759 14.3877 8.39074C14.4908 8.49388 14.5488 8.63378 14.5488 8.77965V13.7769L17.5227 16.7508C17.6258 16.8539 17.6837 16.9938 17.6837 17.1396C17.6837 17.2855 17.6258 17.4254 17.5227 17.5285C17.4195 17.6316 17.2796 17.6896 17.1338 17.6896C16.9879 17.6896 16.8481 17.6316 16.7449 17.5285L13.6099 14.3935C13.5068 14.2904 13.4488 14.1505 13.4488 14.0046V8.77965C13.4488 8.63378 13.5067 8.49388 13.6099 8.39074C13.713 8.28759 13.8529 8.22965 13.9988 8.22965Z\"\r\n                          fill=\"#F3A041\" />\r\n                        <rect width=\"28.56\" height=\"28\" rx=\"1.51479\" fill=\"#F3A041\" />\r\n                        <path\r\n                          d=\"M15.068 22.7391V17.6708H18.4968L14.2108 12.6025L9.9248 17.6708H13.3536V22.7391H9.06759V22.6969C8.92358 22.7053 8.78643 22.7391 8.63899 22.7391C6.93391 22.7391 5.29866 22.0717 4.09298 20.8835C2.8873 19.6954 2.20996 18.084 2.20996 16.4037C2.20996 13.1532 4.70443 10.5042 7.90523 10.141C8.18585 8.6953 8.96892 7.39118 10.1197 6.45292C11.2706 5.51465 12.7172 5.00089 14.2108 5C15.7047 5.00082 17.1515 5.51452 18.3026 6.45277C19.4537 7.39101 20.2371 8.69516 20.5181 10.141C23.7189 10.5042 26.21 13.1532 26.21 16.4037C26.21 18.084 25.5326 19.6954 24.3269 20.8835C23.1213 22.0717 21.486 22.7391 19.7809 22.7391C19.6369 22.7391 19.4981 22.7053 19.3523 22.6969V22.7391H15.068Z\"\r\n                          fill=\"white\" />\r\n                      </svg>\r\n                    </div>\r\n                    <a type=\"button\" (click)=\"uploadFile.click()\" class=\"text-base cursor-pointer\">\r\n                      {{ 'Upload' }}\r\n                    </a>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea [class]=\"column?.className\" name=\"\" id=\"\" cols=\"30\" rows=\"2\"\r\n                  [placeholder]=\"column?.placeholder\"></textarea>\r\n              </ng-container>\r\n            </ng-container>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n    <!-- Your main template -->\r\n<p-dialog header=\"Confirmation\"\r\n[(visible)]=\"displayConfirmationDialog\"\r\nmodal=\"true\"\r\n[closable]=\"false\"\r\n[responsive]=\"true\"\r\nstyleClass=\"confirmation-dialog\"\r\n[style]=\"{width: '400px'}\">\r\n\r\n<div class=\"p-d-flex p-ai-center\">\r\n<i class=\"pi pi-exclamation-triangle p-mr-2\" style=\"font-size: 2rem; color: #f39c12\"></i>\r\n<span>Are you sure you want to perform \"<strong>{{ selectedAction?.actionName }}</strong>\"?</span>\r\n</div>\r\n\r\n<ng-template pTemplate=\"footer\">\r\n<button pButton label=\"Yes\" icon=\"pi pi-check\" (click)=\"confirmAction()\" class=\"p-button-text\" autofocus></button>\r\n<button pButton label=\"No\" icon=\"pi pi-times\" (click)=\"cancelAction()\" class=\"p-button-text\"></button>\r\n</ng-template>\r\n</p-dialog>\r\n\r\n  </div>\r\n</fx-settings-panel>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.formBuilder_dynamic_table{border:.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;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A    <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A    <path d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:host::ng-deep .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:host::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:host::ng-deep .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:host::ng-deep .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}\n"] }]
+            args: [{ selector: 'fx-dynamic-table', standalone: true, imports: [CommonModule, FormsModule, SettingsPanelComponent, ReactiveFormsModule, MultiSelectModule, InputNumberModule, InputTextModule, DropdownModule, ToastModule, ConfirmDialogModule, DialogModule], providers: [MessageService, ConfirmationService], template: "<fx-settings-panel [fxData]=\"fxData\" [tableData]=\"fxData\" (configuration)=\"onChangeConfiguration($event)\">\r\n  <div *ngIf=\"fxData\">\r\n    <table style=\"width: 100%;\" class=\"formBuilder_dynamic_table\">\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 *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'\" type=\"text\" [placeholder]=\"column?.placeholder\"\r\n                                [(ngModel)]=\"row[column.header]\" /> -->\r\n\r\n              <ng-container *ngSwitchCase=\"'input-text'\">\r\n                <input [class]=\"column?.className\" type=\"text\" [placeholder]=\"column?.placeholder\"\r\n                  [(ngModel)]=\"row[column.header]\" [required]=\"column?.isRequired\" #model=\"ngModel\" />\r\n\r\n                <div *ngIf=\"column?.isRequired && model.invalid && model.touched\" class=\"text-red-500 text-sm mt-1\">\r\n                  {{ column?.errorMessage }}\r\n                </div>\r\n              </ng-container>\r\n\r\n\r\n\r\n              <input [class]=\"column?.className\" *ngSwitchCase=\"'input-number'\" type=\"number\"\r\n                [placeholder]=\"column?.placeholder\" [(ngModel)]=\"row[column.header]\" />\r\n\r\n              <select [class]=\"column?.className\" *ngSwitchCase=\"'dropdown'\" [(ngModel)]=\"row[column.header]\">\r\n\r\n                <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\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 value=\"\">Select {{column.header}}</option>\r\n                                <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\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              <!-- <p-multiSelect [options]=\"smartDropdownOptions[column.header]\" [(ngModel)]=\"row[column.header]\" optionLabel=\"name\" optionValue=\"value\" placeholder=\"Select Cities\" *ngSwitchCase=\"'smart-dropdown'\"/> -->\r\n\r\n              <!-- smart-dropdown handling -->\r\n              <ng-container *ngSwitchCase=\"'smart-dropdown'\">\r\n\r\n                <!-- Regular dropdown if isMultiselect is false or not set -->\r\n                <select *ngIf=\"!column?.isMultiselect\" [class]=\"column?.className\" style=\"width: 60%;\"\r\n                  [(ngModel)]=\"row[column.header]\">\r\n                  <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\r\n                  <option *ngFor=\"let option of smartDropdownOptions[column.header]\" [value]=\"option?.value\">\r\n                    {{ option?.name }}\r\n                  </option>\r\n                  <option value=\"__other__\">Other</option>\r\n\r\n                </select>\r\n                <input *ngIf=\"row[column.header] === '__other__'\" type=\"text\" class=\"mt-2 p-inputtext-sm\"\r\n                  [placeholder]=\"'Enter other ' + column.header\" [(ngModel)]=\"row[column.header + '_other']\" />\r\n\r\n                <!-- PrimeNG multiselect if isMultiselect is true -->\r\n                <p-multiSelect *ngIf=\"column?.isMultiselect\" [options]=\"smartDropdownOptions[column.header]\"\r\n                  [(ngModel)]=\"row[column.header]\" [class]=\"column?.className\" optionLabel=\"name\" optionValue=\"value\"\r\n                  [placeholder]=\"column.placeholder || ('Select ' + column.header)\">\r\n                  <ng-template pTemplate=\"dropdownicon\">\r\n                    <div class=\"flex align-items-center dd_down_icon\">\r\n                      <span class=\"pi pi-angle-down text-xl\"></span>\r\n                    </div>\r\n                  </ng-template>\r\n                </p-multiSelect>\r\n\r\n              </ng-container>\r\n\r\n\r\n              <!-- <input [class]=\"column?.className\" *ngSwitchCase=\"'checkbox'\" type=\"checkbox\"\r\n                                [(ngModel)]=\"row[column.header]\" /> -->\r\n              <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                <label [class]=\"column?.className\" class=\"inline-flex items-center gap-2\">\r\n                  <input type=\"checkbox\" [checked]=\"row[column.header] === column.checkedValue\"\r\n                    (change)=\"onCheckboxChange($event, row, column)\" />\r\n                  {{ column?.checkBoxLabel || '' }}\r\n                </label>\r\n              </ng-container>\r\n              <p-toast></p-toast>\r\n              <p-confirmDialog></p-confirmDialog>\r\n              <ng-container *ngSwitchCase=\"'action'\">\r\n                <div class=\"flex flex-row gap-6 justify-start items-start\">\r\n                  <div *ngFor=\"let action of column?.action\" class=\"flex flex-col items-center w-20 cursor-pointer\"\r\n                    (click)=\"handleAction(row, action,rowIndex)\">\r\n                    <img [src]=\"action?.actionIconPath\" alt=\"icon\" class=\"w-6 h-6 mb-1\" />\r\n                    <span class=\"text-xs text-center break-words\">\r\n                      {{ action?.actionName }}\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n\r\n\r\n\r\n\r\n\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                               \r\n\r\n                                  <div class=\"flex flex-col items-end justify-end relative\">\r\n                                    <div class=\"flex gap-2 flex-wrap\">\r\n                                      <div \r\n                                        class=\"relative\" \r\n                                        *ngFor=\"let image of uploadedImages?.[rowIndex]; let i = index\"\r\n                                      >\r\n                                        <img  \r\n                                          width=\"100\" \r\n                                          [src]=\"image?.result\"\r\n                                          alt=\"Uploaded Image\"\r\n                                          class=\"rounded shadow\"\r\n                                        />\r\n                                        <button \r\n                                          (click)=\"deleteFile(rowIndex, i)\" \r\n                                          class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center shadow-lg hover:bg-red-600\"\r\n                                        >\r\n                                          \u274C\r\n                                        </button>\r\n                                      </div>\r\n                                    </div>\r\n                                  \r\n                                    <input \r\n                                      [class]=\"column?.className\" \r\n                                      type=\"file\" \r\n                                      name=\"file\" \r\n                                      #uploadFile  \r\n                                      hidden \r\n                                      multiple\r\n                                      (change)=\"uploadImage($event, rowIndex)\" \r\n                                    />\r\n                                  \r\n                                    <button \r\n                                      (click)=\"uploadFile.click()\" \r\n                                      class=\"mt-2 bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600\"\r\n                                    >\r\n                                      Upload\r\n                                    </button>\r\n                                  </div>\r\n                                  \r\n                                  \r\n                            </ng-container> -->\r\n\r\n              <ng-container *ngSwitchCase=\"'file-upload'\">\r\n                <div class=\"flex items-center justify-end relative gap-4 flex-wrap\">\r\n                  <div class=\"flex gap-2 flex-wrap\">\r\n                    <div class=\"relative\" *ngFor=\"let image of uploadedImages?.[rowIndex]; let i = index\">\r\n                      <img width=\"100\" height=\"80\" [src]=\"image?.result\" alt=\"Uploaded Image\"\r\n                        class=\"rounded shadow orientation\" />\r\n                      <a (click)=\"deleteFile(rowIndex, i)\"\r\n                        class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center cursor-pointer\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                          <g clip-path=\"url(#clip0_6837_29683)\">\r\n                            <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"#F3A041\" />\r\n                            <mask id=\"mask0_6837_29683\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"4\" y=\"4\"\r\n                              width=\"24\" height=\"24\">\r\n                              <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" fill=\"#D9D9D9\" />\r\n                            </mask>\r\n                            <g mask=\"url(#mask0_6837_29683)\">\r\n                              <path\r\n                                d=\"M8.2045 8.99815L5.81802 6.61167L6.61351 5.81617L9 8.20266L11.3865 5.81617L12.182 6.61167L9.7955 8.99815L12.182 11.3846L11.3865 12.1801L9 9.79365L6.61351 12.1801L5.81802 11.3846L8.2045 8.99815Z\"\r\n                                fill=\"white\" />\r\n                            </g>\r\n                          </g>\r\n                          <defs>\r\n                            <clipPath id=\"clip0_6837_29683\">\r\n                              <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"white\" />\r\n                            </clipPath>\r\n                          </defs>\r\n                        </svg>\r\n                      </a>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <input [class]=\"column?.className\" type=\"file\" name=\"file\" #uploadFile hidden multiple\r\n                    (change)=\"uploadImage($event, rowIndex)\" />\r\n                  <div class=\"flex flex-col justify-center items-center cursor-pointer\" (click)=\"uploadFile.click()\">\r\n                    <div>\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\">\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                          d=\"M14.001 3.00195C11.5322 3.00195 9.16722 3.86956 7.23641 5.38414L7.23598 4.59695C7.23598 4.52473 7.22175 4.45321 7.19411 4.38648C7.16647 4.31975 7.12596 4.25912 7.07489 4.20804C7.02381 4.15697 6.96318 4.11646 6.89645 4.08882C6.82972 4.06118 6.7582 4.04695 6.68598 4.04695C6.61375 4.04695 6.54223 4.06118 6.4755 4.08882C6.40877 4.11646 6.34814 4.15697 6.29707 4.20804C6.24599 4.25912 6.20548 4.31975 6.17784 4.38648C6.1502 4.45321 6.13598 4.52473 6.13598 4.59695L6.13642 6.68652C6.13643 6.83239 6.19438 6.97228 6.29752 7.07542C6.40067 7.17856 6.54055 7.23651 6.68642 7.23652H8.77598C8.8482 7.23652 8.91972 7.2223 8.98645 7.19466C9.05318 7.16702 9.11381 7.12651 9.16489 7.07543C9.21596 7.02436 9.25647 6.96373 9.28411 6.897C9.31175 6.83027 9.32598 6.75875 9.32598 6.68652C9.32598 6.6143 9.31175 6.54278 9.28411 6.47605C9.25647 6.40932 9.21596 6.34869 9.16489 6.29761C9.11381 6.24654 9.05318 6.20603 8.98645 6.17839C8.91972 6.15075 8.8482 6.13652 8.77598 6.13652H8.0584C9.7702 4.84387 11.8399 4.10195 14.001 4.10195C19.4751 4.10195 23.901 8.52782 23.901 14.002C23.901 19.4761 19.4751 23.902 14.001 23.902C8.52684 23.902 4.10098 19.4761 4.10098 14.002C4.10098 12.6381 4.38263 11.2888 4.92855 10.0389C4.98691 9.90532 4.98982 9.75399 4.93665 9.61822C4.88347 9.48246 4.77855 9.37336 4.64496 9.31492C4.57877 9.28596 4.50753 9.27032 4.4353 9.2689C4.36306 9.26747 4.29126 9.2803 4.22398 9.30663C4.15671 9.33297 4.09528 9.3723 4.04321 9.42238C3.99114 9.47247 3.94944 9.53232 3.92051 9.59852C3.31393 10.9872 3.00098 12.4866 3.00098 14.002C3.00098 20.0706 7.93236 25.002 14.001 25.002C20.0696 25.002 25.001 20.0706 25.001 14.002C25.001 7.93334 20.0696 3.00195 14.001 3.00195Z\"\r\n                          fill=\"#F3A041\" />\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                          d=\"M13.9988 6.13965C9.6616 6.13965 6.13379 9.66746 6.13379 14.0046C6.13379 18.3418 9.6616 21.8696 13.9988 21.8696C18.336 21.8696 21.8638 18.3418 21.8638 14.0046C21.8638 9.66746 18.336 6.13965 13.9988 6.13965ZM13.9988 8.22965C14.1447 8.22965 14.2846 8.28759 14.3877 8.39074C14.4908 8.49388 14.5488 8.63378 14.5488 8.77965V13.7769L17.5227 16.7508C17.6258 16.8539 17.6837 16.9938 17.6837 17.1396C17.6837 17.2855 17.6258 17.4254 17.5227 17.5285C17.4195 17.6316 17.2796 17.6896 17.1338 17.6896C16.9879 17.6896 16.8481 17.6316 16.7449 17.5285L13.6099 14.3935C13.5068 14.2904 13.4488 14.1505 13.4488 14.0046V8.77965C13.4488 8.63378 13.5067 8.49388 13.6099 8.39074C13.713 8.28759 13.8529 8.22965 13.9988 8.22965Z\"\r\n                          fill=\"#F3A041\" />\r\n                        <rect width=\"28.56\" height=\"28\" rx=\"1.51479\" fill=\"#F3A041\" />\r\n                        <path\r\n                          d=\"M15.068 22.7391V17.6708H18.4968L14.2108 12.6025L9.9248 17.6708H13.3536V22.7391H9.06759V22.6969C8.92358 22.7053 8.78643 22.7391 8.63899 22.7391C6.93391 22.7391 5.29866 22.0717 4.09298 20.8835C2.8873 19.6954 2.20996 18.084 2.20996 16.4037C2.20996 13.1532 4.70443 10.5042 7.90523 10.141C8.18585 8.6953 8.96892 7.39118 10.1197 6.45292C11.2706 5.51465 12.7172 5.00089 14.2108 5C15.7047 5.00082 17.1515 5.51452 18.3026 6.45277C19.4537 7.39101 20.2371 8.69516 20.5181 10.141C23.7189 10.5042 26.21 13.1532 26.21 16.4037C26.21 18.084 25.5326 19.6954 24.3269 20.8835C23.1213 22.0717 21.486 22.7391 19.7809 22.7391C19.6369 22.7391 19.4981 22.7053 19.3523 22.6969V22.7391H15.068Z\"\r\n                          fill=\"white\" />\r\n                      </svg>\r\n                    </div>\r\n                    <a type=\"button\" (click)=\"uploadFile.click()\" class=\"text-base cursor-pointer\">\r\n                      {{ 'Upload' }}\r\n                    </a>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea [class]=\"column?.className\" name=\"\" id=\"\" cols=\"30\" rows=\"2\"\r\n                  [placeholder]=\"column?.placeholder\"></textarea>\r\n              </ng-container>\r\n            </ng-container>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n    <!-- Your main template -->\r\n<p-dialog header=\"Confirmation\"\r\n[(visible)]=\"displayConfirmationDialog\"\r\nmodal=\"true\"\r\n[closable]=\"false\"\r\n[responsive]=\"true\"\r\nstyleClass=\"confirmation-dialog\"\r\n[style]=\"{width: '400px'}\">\r\n\r\n<div class=\"p-d-flex p-ai-center\">\r\n<i class=\"pi pi-exclamation-triangle p-mr-2\" style=\"font-size: 2rem; color: #f39c12\"></i>\r\n<span>Are you sure you want to perform \"<strong>{{ selectedAction?.actionName }}</strong>\"?</span>\r\n</div>\r\n\r\n<ng-template pTemplate=\"footer\">\r\n<button pButton label=\"Yes\" icon=\"pi pi-check\" (click)=\"confirmAction()\" class=\"p-button-text\" autofocus></button>\r\n<button pButton label=\"No\" icon=\"pi pi-times\" (click)=\"cancelAction()\" class=\"p-button-text\"></button>\r\n</ng-template>\r\n</p-dialog>\r\n\r\n  </div>\r\n</fx-settings-panel>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.formBuilder_dynamic_table{border:.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;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A    <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A    <path d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:host::ng-deep .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:host::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:host::ng-deep .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:host::ng-deep .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FxBuilderWrapperService }, { type: i2$1.MessageService }, { type: i2$1.ConfirmationService }], propDecorators: { tableRows: [{
                 type: Input
             }], previewType: [{