npm - fx-form-builder-wrapper - Versions diffs - 2.0.80 → 2.0.81 - Mend

fx-form-builder-wrapper 2.0.80 → 2.0.81

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/esm2022/lib/fx-builder-wrapper.component.mjs CHANGED Viewed

@@ -11,6 +11,7 @@ import { DatePickerComponent } from './components/date-picker/date-picker.compon
 import { DropdownWithOtherComponent } from './components/dropdown-with-other/dropdown-with-other.component';
 import { RadioGroupComponent } from './components/radio-group/radio-group.component';
 import { MultiselectDropdownComponent } from './components/multiselect-dropdown/multiselect-dropdown.component';
+import { MultiselectDropdownWithChildsComponent } from './components/multiselect-dropdown-with-childs/multiselect-dropdown-with-childs.component';
 import * as i0 from "@angular/core";
 import * as i1 from "./fx-builder-wrapper.service";
 export class FxBuilderWrapperComponent {
@@ -59,6 +60,9 @@ export class FxBuilderWrapperComponent {
         if (!Boolean(this.fxWrapperService.getComponent('lib-multiselect-dropdown'))) {
             this.fxWrapperService.registerCustomComponent('Multiselect Dropdown', 'lib-multiselect-dropdown', MultiselectDropdownComponent);
         }
+        if (!Boolean(this.fxWrapperService.getComponent('lib-multiselect-dropdown-with-childs'))) {
+            this.fxWrapperService.registerCustomComponent('Multiselect Dropdown with Childs', 'lib-multiselect-dropdown-with-childs', MultiselectDropdownWithChildsComponent);
+        }
     }
     ;
     getParsedForm() {
@@ -96,4 +100,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input,
                 args: [{ alias: 'fx-form', required: true }]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZngtYnVpbGRlci13cmFwcGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2Z4LWJ1aWxkZXItd3JhcHBlci9zcmMvbGliL2Z4LWJ1aWxkZXItd3JhcHBlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLFNBQVMsRUFBcUIsTUFBTSxlQUFlLENBQUM7QUFDdkYsT0FBTyxFQUEwQixrQkFBa0IsRUFBVSxNQUFNLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ25ILE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLG1FQUFtRSxDQUFDO0FBRTlHLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLG9EQUFvRCxDQUFDO0FBQzNGLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLG9EQUFvRCxDQUFDO0FBQzNGLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDBDQUEwQyxDQUFDO0FBQzdFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQUN2RSxPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSw0REFBNEQsQ0FBQztBQUN2RyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnREFBZ0QsQ0FBQztBQUNyRixPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSxnRUFBZ0UsQ0FBQztBQUM1RyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnREFBZ0QsQ0FBQztBQUNyRixPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSxrRUFBa0UsQ0FBQzs7O0FBaUJoSCxNQUFNLE9BQU8seUJBQXlCO0lBYWhCO0lBWlcsZ0JBQWdCLENBQXNCO0lBQ3hCLE1BQU0sR0FBVyxPQUFPLENBQUMsYUFBYSxFQUFF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UUFDckgsQ0FBQztRQUNBLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFlBQVksQ0FBQywwQkFBMEIsQ0FBQyxDQUFDLEVBQUUsQ0FBQztZQUM5RSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsdUJBQXVCLENBQUMsc0JBQXNCLEVBQUUsMEJBQTBCLEVBQUUsNEJBQTRCLENBQUMsQ0FBQztRQUNsSSxDQUFDO0lBQ0gsQ0FBQztJQUFBLENBQUM7SUFFSyxhQUFhO1FBQ2xCLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQy9DLENBQUM7SUFFTSxvQkFBb0I7UUFDekIsT0FBTyxPQUFPLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDakMsQ0FBQzt3R0F0RFUseUJBQXlCOzRGQUF6Qix5QkFBeUIsK09BWDFCOzs7Ozs7OztHQVFULHlFQVRTLFlBQVksK0JBQUUsa0JBQWtCOzs0RkFZL0IseUJBQXlCO2tCQWZyQyxTQUFTOytCQUNFLG9CQUFvQixjQUNsQixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsa0JBQWtCLENBQUMsWUFDakM7Ozs7Ozs7O0dBUVQ7NEZBSThCLGdCQUFnQjtzQkFBOUMsU0FBUzt1QkFBQyxrQkFBa0I7Z0JBQ2dCLE1BQU07c0JBQWxELEtBQUs7dUJBQUMsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQsIFZpZXdDaGlsZCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRnhCdWlsZGVyQ29uZmlndXJhdGlvbiwgRnhDb21wb25lbnRCdWlsZGVyLCBGeEZvcm0sIEZ4TW9kZSwgRnhTY29wZSwgRnhVdGlscyB9IGZyb20gJ0BpbnN0YW50c3lzLWxhYnMvZngnO1xyXG5pbXBvcnQgeyBEaXNwYXRjaFRvQ2xpbmljQ29tcG9uZW50IH0gZnJvbSAnLi9jdXN0b20tY29udHJvbHMvZGlzcGF0Y2gtdG8tY2xpbmljL2Rpc3BhdGNoLXRvLWNsaW5pYy5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBGeEJ1aWxkZXJXcmFwcGVyU2VydmljZSB9IGZyb20gJy4vZngtYnVpbGRlci13cmFwcGVyLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBEeW5hbWljVGFibGVDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvZHluYW1pYy10YWJsZS9keW5hbWljLXRhYmxlLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IFRvZ2dsZUJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy90b2dnbGUtYnV0dG9uL3RvZ2dsZS1idXR0b24uY29tcG9uZW50JztcclxuaW1wb3J0IHsgVXBsb2FkZXJDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvdXBsb2FkZXIvdXBsb2FkZXIuY29tcG9uZW50JztcclxuaW1wb3J0IHsgVG9nZ2xlQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL3RvZ2dsZS90b2dnbGUuY29tcG9uZW50JztcclxuaW1wb3J0IHsgVXBsb2FkZXJDaGVja2JveENvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy91cGxvYWRlci1jaGVja2JveC91cGxvYWRlci1jaGVja2JveC5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBEYXRlUGlja2VyQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2RhdGUtcGlja2VyL2RhdGUtcGlja2VyLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IERyb3Bkb3duV2l0aE90aGVyQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2Ryb3Bkb3duLXdpdGgtb3RoZXIvZHJvcGRvd24td2l0aC1vdGhlci5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBSYWRpb0dyb3VwQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL3JhZGlvLWdyb3VwL3JhZGlvLWdyb3VwLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IE11bHRpc2VsZWN0RHJvcGRvd25Db21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvbXVsdGlzZWxlY3QtZHJvcGRvd24vbXVsdGlzZWxlY3QtZHJvcGRvd24uY29tcG9uZW50JztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnZngtYnVpbGRlci13cmFwcGVyJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEZ4Q29tcG9uZW50QnVpbGRlcl0sXHJcbiAgdGVtcGxhdGU6IGBcclxuICAgIDxmeC1jb21wb25lbnQtYnVpbGRlciBcclxuICAgICAgICAjY29tcG9uZW50QnVpbGRlciBcclxuICAgICAgICBbZngtZm9ybV09XCJmeEZvcm1cIiBcclxuICAgICAgICBbY29uZmlndXJhdGlvbl09XCJmeENvbmZpZ3VyYXRpb25cIiBcclxuICAgICAgICBbc2NvcGVdPVwiRnhTY29wZS5CVUlMREVSXCJcclxuICAgICAgICA+XHJcbiAgICA8L2Z4LWNvbXBvbmVudC1idWlsZGVyPlxyXG4gIGAsXHJcbiAgc3R5bGVVcmw6ICcuL2Zvcm0tYnVpbGRlci5jc3MnLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgRnhCdWlsZGVyV3JhcHBlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQFZpZXdDaGlsZCgnY29tcG9uZW50QnVpbGRlcicpIGNvbXBvbmVudEJ1aWxkZXIhOiBGeENvbXBvbmVudEJ1aWxkZXI7XHJcbiAgQElucHV0KHsgYWxpYXM6ICdmeC1mb3JtJywgcmVxdWlyZWQ6IHRydWUgfSkgZnhGb3JtOiBGeEZvcm0gPSBGeFV0aWxzLmNyZWF0ZU5ld0Zvcm0oKTtcclxuICBwdWJsaWMgZnhNb2RlOiBGeE1vZGUgPSBGeE1vZGUuRURJVDtcclxuICBwdWJsaWMgZnhDb25maWd1cmF0aW9uOiBGeEJ1aWxkZXJDb25maWd1cmF0aW9uID0ge1xyXG4gICAgc2V0dGluZ3M6IHRydWUsXHJcbiAgICBsb2dpY3M6IHRydWUsXHJcbiAgICBjdXN0b21Db250cm9sczogdHJ1ZSxcclxuICB9XHJcblxyXG4gIHByb3RlY3RlZCByZWFkb25seSBGeFNjb3BlID0gRnhTY29wZTtcclxuICBwcm90ZWN0ZWQgcmVhZG9ubHkgRnhNb2RlID0gRnhNb2RlO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGZ4V3JhcHBlclNlcnZpY2U6IEZ4QnVpbGRlcldyYXBwZXJTZXJ2aWNlKSB7IH1cclxuXHJcbiAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgaWYgKCFCb29sZWFuKHRoaXMuZnhXcmFwcGVyU2VydmljZS5nZXRDb21wb25lbnQoJ2Rpc3BhdGNoLXRvLWNsaW5pYycpKSkge1xyXG4gICAgICB0aGlzLmZ4V3JhcHBlclNlcnZpY2UucmVnaXN0ZXJDdXN0b21Db21wb25lbnQoJ0Rpc3BhdGNoIFRvIENsaW5pYycsICdkaXNwYXRjaC10by1jbGluaWMnLCBEaXNwYXRjaFRvQ2xpbmljQ29tcG9uZW50KTtcclxuICAgIH1cclxuICAgIGlmICghQm9vbGVhbih0aGlzLmZ4V3JhcHBlclNlcnZpY2UuZ2V0Q29tcG9uZW50KCdkeW5hbWljLXRhYmxlJykpKSB7XHJcbiAgICAgIHRoaXMuZnhXcmFwcGVyU2VydmljZS5yZWdpc3RlckN1c3RvbUNvbXBvbmVudCgnRHluYW1pYyBUYWJsZScsICdkeW5hbWljLXRhYmxlJywgRHluYW1pY1RhYmxlQ29tcG9uZW50KTtcclxuICAgIH1cclxuICAgIGlmICghQm9vbGVhbih0aGlzLmZ4V3JhcHBlclNlcnZpY2UuZ2V0Q29tcG9uZW50KCd0b2dnbGUtYnV0dG9uJykpKSB7XHJcbiAgICAgIHRoaXMuZnhXcmFwcGVyU2VydmljZS5yZWdpc3RlckN1c3RvbUNvbXBvbmVudCgnVG9nZ2xlIEJ1dHRvbicsICd0b2dnbGUtYnV0dG9uJywgVG9nZ2xlQnV0dG9uQ29tcG9uZW50KTtcclxuICAgIH1cclxuICAgIGlmICghQm9vbGVhbih0aGlzLmZ4V3JhcHBlclNlcnZpY2UuZ2V0Q29tcG9uZW50KCd1cGxvYWRlcicpKSkge1xyXG4gICAgICB0aGlzLmZ4V3JhcHBlclNlcnZpY2UucmVnaXN0ZXJDdXN0b21Db21wb25lbnQoJ1VwbG9hZGVyJywgJ3VwbG9hZGVyJywgVXBsb2FkZXJDb21wb25lbnQpO1xyXG4gICAgfVxyXG4gICAgaWYgKCFCb29sZWFuKHRoaXMuZnhXcmFwcGVyU2VydmljZS5nZXRDb21wb25lbnQoJ3VwbG9hZGVyLWNoZWNrYm94JykpKSB7XHJcbiAgICAgIHRoaXMuZnhXcmFwcGVyU2VydmljZS5yZWdpc3RlckN1c3RvbUNvbXBvbmVudCgnVXBsb2FkZXIgd2l0aCBDaGVja2JveCcsICd1cGxvYWRlci1jaGVja2JveCcsIFVwbG9hZGVyQ2hlY2tib3hDb21wb25lbnQpO1xyXG4gICAgfVxyXG4gICAgaWYgKCFCb29sZWFuKHRoaXMuZnhXcmFwcGVyU2VydmljZS5nZXRDb21wb25lbnQoJ3RvZ2dsZScpKSkge1xyXG4gICAgICB0aGlzLmZ4V3JhcHBlclNlcnZpY2UucmVnaXN0ZXJDdXN0b21Db21wb25lbnQoJ1RvZ2dsZScsICd0b2dnbGUnLCBUb2dnbGVDb21wb25lbnQpO1xyXG4gICAgfVxyXG4gICAgaWYgKCFCb29sZWFuKHRoaXMuZnhXcmFwcGVyU2VydmljZS5nZXRDb21wb25lbnQoJ2xpYi1kYXRlLXBpY2tlcicpKSkge1xyXG4gICAgICB0aGlzLmZ4V3JhcHBlclNlcnZpY2UucmVnaXN0ZXJDdXN0b21Db21wb25lbnQoJ0RhdGUgUGlja2VyJywgJ2xpYi1kYXRlLXBpY2tlcicsIERhdGVQaWNrZXJDb21wb25lbnQpO1xyXG4gICAgfVxyXG4gICAgICAgIGlmICghQm9vbGVhbih0aGlzLmZ4V3JhcHBlclNlcnZpY2UuZ2V0Q29tcG9uZW50KCdkcm9wZG93bi13aXRoLW90aGVyJykpKSB7XHJcbiAgICAgIHRoaXMuZnhXcmFwcGVyU2VydmljZS5yZWdpc3RlckN1c3RvbUNvbXBvbmVudCgnU21hcnRsaXN0IHdpdGggT3RoZXInLCAnZHJvcGRvd24td2l0aC1vdGhlcicsIERyb3Bkb3duV2l0aE90aGVyQ29tcG9uZW50KTtcclxuICAgIH1cclxuICAgICAgIGlmICghQm9vbGVhbih0aGlzLmZ4V3JhcHBlclNlcnZpY2UuZ2V0Q29tcG9uZW50KCdyYWRpby1ncm91cC1jdXN0b20nKSkpIHtcclxuICAgICAgdGhpcy5meFdyYXBwZXJTZXJ2aWNlLnJlZ2lzdGVyQ3VzdG9tQ29tcG9uZW50KCdSYWRpbyBHcm91cCB3aXRoIE90aGVyJywgJ3JhZGlvLWdyb3VwLWN1c3RvbScsIFJhZGlvR3JvdXBDb21wb25lbnQpO1xyXG4gICAgfVxyXG4gICAgIGlmICghQm9vbGVhbih0aGlzLmZ4V3JhcHBlclNlcnZpY2UuZ2V0Q29tcG9uZW50KCdsaWItbXVsdGlzZWxlY3QtZHJvcGRvd24nKSkpIHtcclxuICAgICAgdGhpcy5meFdyYXBwZXJTZXJ2aWNlLnJlZ2lzdGVyQ3VzdG9tQ29tcG9uZW50KCdNdWx0aXNlbGVjdCBEcm9wZG93bicsICdsaWItbXVsdGlzZWxlY3QtZHJvcGRvd24nLCBNdWx0aXNlbGVjdERyb3Bkb3duQ29tcG9uZW50KTtcclxuICAgIH1cclxuICB9O1xyXG5cclxuICBwdWJsaWMgZ2V0UGFyc2VkRm9ybSgpOiBGeEZvcm0ge1xyXG4gICAgcmV0dXJuIHRoaXMuY29tcG9uZW50QnVpbGRlci5nZXRQYXJzZWRGb3JtKCk7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgZ2V0SW5pdGlhbGl6ZWRGeEZvcm0oKTogRnhGb3JtIHtcclxuICAgIHJldHVybiBGeFV0aWxzLmNyZWF0ZU5ld0Zvcm0oKTsgXHJcbiAgfVxyXG59XHJcblxyXG5cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZngtYnVpbGRlci13cmFwcGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2Z4LWJ1aWxkZXItd3JhcHBlci9zcmMvbGliL2Z4LWJ1aWxkZXItd3JhcHBlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLFNBQVMsRUFBcUIsTUFBTSxlQUFlLENBQUM7QUFDdkYsT0FBTyxFQUEwQixrQkFBa0IsRUFBVSxNQUFNLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ25ILE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLG1FQUFtRSxDQUFDO0FBRTlHLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLG9EQUFvRCxDQUFDO0FBQzNGLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLG9EQUFvRCxDQUFDO0FBQzNGLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDBDQUEwQyxDQUFDO0FBQzdFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQUN2RSxPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSw0REFBNEQsQ0FBQztBQUN2RyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnREFBZ0QsQ0FBQztBQUNyRixPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSxnRUFBZ0UsQ0FBQztBQUM1RyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnREFBZ0QsQ0FBQztBQUNyRixPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSxrRUFBa0UsQ0FBQztBQUNoSCxPQUFPLEVBQUUsc0NBQXNDLEVBQUUsTUFBTSwwRkFBMEYsQ0FBQzs7O0FBaUJsSixNQUFNLE9BQU8seUJBQXlCO0lBYWhCO0lBWlcsZ0JB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L2NvbW1vbic7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCwgVmlld0NoaWxkLCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBGeEJ1aWxkZXJDb25maWd1cmF0aW9uLCBGeENvbXBvbmVudEJ1aWxkZXIsIEZ4Rm9ybSwgRnhNb2RlLCBGeFNjb3BlLCBGeFV0aWxzIH0gZnJvbSAnQGluc3RhbnRzeXMtbGFicy9meCc7XHJcbmltcG9ydCB7IERpc3BhdGNoVG9DbGluaWNDb21wb25lbnQgfSBmcm9tICcuL2N1c3RvbS1jb250cm9scy9kaXNwYXRjaC10by1jbGluaWMvZGlzcGF0Y2gtdG8tY2xpbmljLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IEZ4QnVpbGRlcldyYXBwZXJTZXJ2aWNlIH0gZnJvbSAnLi9meC1idWlsZGVyLXdyYXBwZXIuc2VydmljZSc7XHJcbmltcG9ydCB7IER5bmFtaWNUYWJsZUNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9keW5hbWljLXRhYmxlL2R5bmFtaWMtdGFibGUuY29tcG9uZW50JztcclxuaW1wb3J0IHsgVG9nZ2xlQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL3RvZ2dsZS1idXR0b24vdG9nZ2xlLWJ1dHRvbi5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBVcGxvYWRlckNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy91cGxvYWRlci91cGxvYWRlci5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBUb2dnbGVDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvdG9nZ2xlL3RvZ2dsZS5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBVcGxvYWRlckNoZWNrYm94Q29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL3VwbG9hZGVyLWNoZWNrYm94L3VwbG9hZGVyLWNoZWNrYm94LmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IERhdGVQaWNrZXJDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvZGF0ZS1waWNrZXIvZGF0ZS1waWNrZXIuY29tcG9uZW50JztcclxuaW1wb3J0IHsgRHJvcGRvd25XaXRoT3RoZXJDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvZHJvcGRvd24td2l0aC1vdGhlci9kcm9wZG93bi13aXRoLW90aGVyLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IFJhZGlvR3JvdXBDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvcmFkaW8tZ3JvdXAvcmFkaW8tZ3JvdXAuY29tcG9uZW50JztcclxuaW1wb3J0IHsgTXVsdGlzZWxlY3REcm9wZG93bkNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9tdWx0aXNlbGVjdC1kcm9wZG93bi9tdWx0aXNlbGVjdC1kcm9wZG93bi5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBNdWx0aXNlbGVjdERyb3Bkb3duV2l0aENoaWxkc0NvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9tdWx0aXNlbGVjdC1kcm9wZG93bi13aXRoLWNoaWxkcy9tdWx0aXNlbGVjdC1kcm9wZG93bi13aXRoLWNoaWxkcy5jb21wb25lbnQnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdmeC1idWlsZGVyLXdyYXBwZXInLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgRnhDb21wb25lbnRCdWlsZGVyXSxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgPGZ4LWNvbXBvbmVudC1idWlsZGVyIFxyXG4gICAgICAgICNjb21wb25lbnRCdWlsZGVyIFxyXG4gICAgICAgIFtmeC1mb3JtXT1cImZ4Rm9ybVwiIFxyXG4gICAgICAgIFtjb25maWd1cmF0aW9uXT1cImZ4Q29uZmlndXJhdGlvblwiIFxyXG4gICAgICAgIFtzY29wZV09XCJGeFNjb3BlLkJVSUxERVJcIlxyXG4gICAgICAgID5cclxuICAgIDwvZngtY29tcG9uZW50LWJ1aWxkZXI+XHJcbiAgYCxcclxuICBzdHlsZVVybDogJy4vZm9ybS1idWlsZGVyLmNzcycsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBGeEJ1aWxkZXJXcmFwcGVyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICBAVmlld0NoaWxkKCdjb21wb25lbnRCdWlsZGVyJykgY29tcG9uZW50QnVpbGRlciE6IEZ4Q29tcG9uZW50QnVpbGRlcjtcclxuICBASW5wdXQoeyBhbGlhczogJ2Z4LWZvcm0nLCByZXF1aXJlZDogdHJ1ZSB9KSBmeEZvcm06IEZ4Rm9ybSA9IEZ4VXRpbHMuY3JlYXRlTmV3Rm9ybSgpO1xyXG4gIHB1YmxpYyBmeE1vZGU6IEZ4TW9kZSA9IEZ4TW9kZS5FRElUO1xyXG4gIHB1YmxpYyBmeENvbmZpZ3VyYXRpb246IEZ4QnVpbGRlckNvbmZpZ3VyYXRpb24gPSB7XHJcbiAgICBzZXR0aW5nczogdHJ1ZSxcclxuICAgIGxvZ2ljczogdHJ1ZSxcclxuICAgIGN1c3RvbUNvbnRyb2xzOiB0cnVlLFxyXG4gIH1cclxuXHJcbiAgcHJvdGVjdGVkIHJlYWRvbmx5IEZ4U2NvcGUgPSBGeFNjb3BlO1xyXG4gIHByb3RlY3RlZCByZWFkb25seSBGeE1vZGUgPSBGeE1vZGU7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZnhXcmFwcGVyU2VydmljZTogRnhCdWlsZGVyV3JhcHBlclNlcnZpY2UpIHsgfVxyXG5cclxuICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICBpZiAoIUJvb2xlYW4odGhpcy5meFdyYXBwZXJTZXJ2aWNlLmdldENvbXBvbmVudCgnZGlzcGF0Y2gtdG8tY2xpbmljJykpKSB7XHJcbiAgICAgIHRoaXMuZnhXcmFwcGVyU2VydmljZS5yZWdpc3RlckN1c3RvbUNvbXBvbmVudCgnRGlzcGF0Y2ggVG8gQ2xpbmljJywgJ2Rpc3BhdGNoLXRvLWNsaW5pYycsIERpc3BhdGNoVG9DbGluaWNDb21wb25lbnQpO1xyXG4gICAgfVxyXG4gICAgaWYgKCFCb29sZWFuKHRoaXMuZnhXcmFwcGVyU2VydmljZS5nZXRDb21wb25lbnQoJ2R5bmFtaWMtdGFibGUnKSkpIHtcclxuICAgICAgdGhpcy5meFdyYXBwZXJTZXJ2aWNlLnJlZ2lzdGVyQ3VzdG9tQ29tcG9uZW50KCdEeW5hbWljIFRhYmxlJywgJ2R5bmFtaWMtdGFibGUnLCBEeW5hbWljVGFibGVDb21wb25lbnQpO1xyXG4gICAgfVxyXG4gICAgaWYgKCFCb29sZWFuKHRoaXMuZnhXcmFwcGVyU2VydmljZS5nZXRDb21wb25lbnQoJ3RvZ2dsZS1idXR0b24nKSkpIHtcclxuICAgICAgdGhpcy5meFdyYXBwZXJTZXJ2aWNlLnJlZ2lzdGVyQ3VzdG9tQ29tcG9uZW50KCdUb2dnbGUgQnV0dG9uJywgJ3RvZ2dsZS1idXR0b24nLCBUb2dnbGVCdXR0b25Db21wb25lbnQpO1xyXG4gICAgfVxyXG4gICAgaWYgKCFCb29sZWFuKHRoaXMuZnhXcmFwcGVyU2VydmljZS5nZXRDb21wb25lbnQoJ3VwbG9hZGVyJykpKSB7XHJcbiAgICAgIHRoaXMuZnhXcmFwcGVyU2VydmljZS5yZWdpc3RlckN1c3RvbUNvbXBvbmVudCgnVXBsb2FkZXInLCAndXBsb2FkZXInLCBVcGxvYWRlckNvbXBvbmVudCk7XHJcbiAgICB9XHJcbiAgICBpZiAoIUJvb2xlYW4odGhpcy5meFdyYXBwZXJTZXJ2aWNlLmdldENvbXBvbmVudCgndXBsb2FkZXItY2hlY2tib3gnKSkpIHtcclxuICAgICAgdGhpcy5meFdyYXBwZXJTZXJ2aWNlLnJlZ2lzdGVyQ3VzdG9tQ29tcG9uZW50KCdVcGxvYWRlciB3aXRoIENoZWNrYm94JywgJ3VwbG9hZGVyLWNoZWNrYm94JywgVXBsb2FkZXJDaGVja2JveENvbXBvbmVudCk7XHJcbiAgICB9XHJcbiAgICBpZiAoIUJvb2xlYW4odGhpcy5meFdyYXBwZXJTZXJ2aWNlLmdldENvbXBvbmVudCgndG9nZ2xlJykpKSB7XHJcbiAgICAgIHRoaXMuZnhXcmFwcGVyU2VydmljZS5yZWdpc3RlckN1c3RvbUNvbXBvbmVudCgnVG9nZ2xlJywgJ3RvZ2dsZScsIFRvZ2dsZUNvbXBvbmVudCk7XHJcbiAgICB9XHJcbiAgICBpZiAoIUJvb2xlYW4odGhpcy5meFdyYXBwZXJTZXJ2aWNlLmdldENvbXBvbmVudCgnbGliLWRhdGUtcGlja2VyJykpKSB7XHJcbiAgICAgIHRoaXMuZnhXcmFwcGVyU2VydmljZS5yZWdpc3RlckN1c3RvbUNvbXBvbmVudCgnRGF0ZSBQaWNrZXInLCAnbGliLWRhdGUtcGlja2VyJywgRGF0ZVBpY2tlckNvbXBvbmVudCk7XHJcbiAgICB9XHJcbiAgICAgICAgaWYgKCFCb29sZWFuKHRoaXMuZnhXcmFwcGVyU2VydmljZS5nZXRDb21wb25lbnQoJ2Ryb3Bkb3duLXdpdGgtb3RoZXInKSkpIHtcclxuICAgICAgdGhpcy5meFdyYXBwZXJTZXJ2aWNlLnJlZ2lzdGVyQ3VzdG9tQ29tcG9uZW50KCdTbWFydGxpc3Qgd2l0aCBPdGhlcicsICdkcm9wZG93bi13aXRoLW90aGVyJywgRHJvcGRvd25XaXRoT3RoZXJDb21wb25lbnQpO1xyXG4gICAgfVxyXG4gICAgICAgaWYgKCFCb29sZWFuKHRoaXMuZnhXcmFwcGVyU2VydmljZS5nZXRDb21wb25lbnQoJ3JhZGlvLWdyb3VwLWN1c3RvbScpKSkge1xyXG4gICAgICB0aGlzLmZ4V3JhcHBlclNlcnZpY2UucmVnaXN0ZXJDdXN0b21Db21wb25lbnQoJ1JhZGlvIEdyb3VwIHdpdGggT3RoZXInLCAncmFkaW8tZ3JvdXAtY3VzdG9tJywgUmFkaW9Hcm91cENvbXBvbmVudCk7XHJcbiAgICB9XHJcbiAgICAgaWYgKCFCb29sZWFuKHRoaXMuZnhXcmFwcGVyU2VydmljZS5nZXRDb21wb25lbnQoJ2xpYi1tdWx0aXNlbGVjdC1kcm9wZG93bicpKSkge1xyXG4gICAgICB0aGlzLmZ4V3JhcHBlclNlcnZpY2UucmVnaXN0ZXJDdXN0b21Db21wb25lbnQoJ011bHRpc2VsZWN0IERyb3Bkb3duJywgJ2xpYi1tdWx0aXNlbGVjdC1kcm9wZG93bicsIE11bHRpc2VsZWN0RHJvcGRvd25Db21wb25lbnQpO1xyXG4gICAgfVxyXG4gICAgIGlmICghQm9vbGVhbih0aGlzLmZ4V3JhcHBlclNlcnZpY2UuZ2V0Q29tcG9uZW50KCdsaWItbXVsdGlzZWxlY3QtZHJvcGRvd24td2l0aC1jaGlsZHMnKSkpIHtcclxuICAgICAgdGhpcy5meFdyYXBwZXJTZXJ2aWNlLnJlZ2lzdGVyQ3VzdG9tQ29tcG9uZW50KCdNdWx0aXNlbGVjdCBEcm9wZG93biB3aXRoIENoaWxkcycsICdsaWItbXVsdGlzZWxlY3QtZHJvcGRvd24td2l0aC1jaGlsZHMnLCBNdWx0aXNlbGVjdERyb3Bkb3duV2l0aENoaWxkc0NvbXBvbmVudCk7XHJcbiAgICB9XHJcbiAgfTtcclxuXHJcbiBcclxuICBwdWJsaWMgZ2V0UGFyc2VkRm9ybSgpOiBGeEZvcm0ge1xyXG4gICAgcmV0dXJuIHRoaXMuY29tcG9uZW50QnVpbGRlci5nZXRQYXJzZWRGb3JtKCk7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgZ2V0SW5pdGlhbGl6ZWRGeEZvcm0oKTogRnhGb3JtIHtcclxuICAgIHJldHVybiBGeFV0aWxzLmNyZWF0ZU5ld0Zvcm0oKTsgXHJcbiAgfVxyXG59XHJcblxyXG5cclxuIl19

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

@@ -19,12 +19,12 @@ import { DialogModule } from 'primeng/dialog';
 import { DropdownModule } from 'primeng/dropdown';
 import * as i2 from 'primeng/api';
 import { MessageService, ConfirmationService } from 'primeng/api';
-import * as i5$2 from 'primeng/multiselect';
+import * as i7 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import { InputNumberModule } from 'primeng/inputnumber';
 import * as i6 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
-import * as i7 from 'primeng/confirmdialog';
+import * as i7$1 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { v4 } from 'uuid';
 import { FileUploadModule } from 'primeng/fileupload';
@@ -916,7 +916,7 @@ 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.MessageService }, { token: i2.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,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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.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$2.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.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$1.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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.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: i7.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.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$1.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$1.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,
@@ -2300,8 +2300,6 @@ class DropdownWithOtherComponent extends FxBaseComponent {
         this.fxApiService = fxApiService;
         this.onInit.subscribe(() => {
             this._register(this.dropDownForm);
-            console.log('Registered form:', this.dropDownForm);
-            console.log('fxDAta:', this.fxData);
         });
     }
     ngAfterViewInit() {
@@ -2358,9 +2356,9 @@ class DropdownWithOtherComponent extends FxBaseComponent {
             else {
                 otherControl?.disable();
                 otherControl?.reset();
-                otherControl?.clearValidators(); //
+                otherControl?.clearValidators();
             }
-            otherControl?.updateValueAndValidity(); //
+            otherControl?.updateValueAndValidity();
             otherControl?.markAsTouched();
         });
     }
@@ -2372,7 +2370,6 @@ class DropdownWithOtherComponent extends FxBaseComponent {
             new FxStringSetting({ key: 'other-label', $title: 'Other Label', value: '' }),
             new FxStringSetting({ key: 'other-placeholder', $title: 'Other Placeholder', value: '' }),
             new FxSelectSetting({ key: 'serviceName', $title: 'Service', value: '' }, [{ option: 'User Service', value: 'user_service' }, { option: 'Patient Service', value: 'patient_service' }, { option: 'Workflow Service', value: 'workflow_service' }]),
-            // new FxSelectSetting({key: 'service', $title: 'Service', value: 'local'}, [{option: 'Local', value: 'local'}, {option: 'QA', value: 'qa'},{option: 'UAT', value: 'uat'},{option: 'Production', value: 'prod'}]),
             new FxSelectSetting({ key: 'isRequired', $title: 'Required', value: 'true' }, [{ option: 'Yes', value: 'true' }, { option: 'No', value: 'false' }]),
             new FxStringSetting({ key: 'errorMessage', $title: 'Error Message', value: 'Please fill out the field' }),
             new FxStringSetting({ key: 'errorMessageOther', $title: 'Other Error Message', value: 'Other is required' }),
@@ -2647,11 +2644,146 @@ class MultiselectDropdownComponent extends FxBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }, { token: i3$2.ApiServiceRegistry }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultiselectDropdownComponent, isStandalone: true, selector: "lib-multiselect-dropdown", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n\r\n\r\n  <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMulti')\">\r\n    <form [formGroup]=\"multiselectDropDownForm\" class=\"flex gap-4 w-full\">\r\n      <div class=\"flex-1\">\r\n        <label class=\"input-label dark:text-gray-300\">\r\n          {{ setting('select-label-multi') }}\r\n        </label>\r\n        <p-multiSelect [options]=\"options\" formControlName=\"multipleSelectedOption\" [optionLabel]=\"setting('label-key')\"\r\n          [placeholder]=\"setting('placeholderMulti')\" class=\"multiselect\">\r\n\r\n          <!-- Custom Dropdown Icon -->\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        <small\r\n          *ngIf=\"multiselectDropDownForm.get('multipleSelectedOption')?.touched && multiselectDropDownForm.get('multipleSelectedOption')?.errors?.['required']\"\r\n          class=\"text-red-500\">\r\n          {{ setting('multiErrorMessage')}}\r\n        </small>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</fx-component>", 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\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5$2.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultiselectDropdownComponent, isStandalone: true, selector: "lib-multiselect-dropdown", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n  <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMulti')\">\r\n    <form [formGroup]=\"multiselectDropDownForm\" class=\"flex gap-4 w-full\">\r\n      <div class=\"flex-1\">\r\n        <label class=\"input-label dark:text-gray-300\">\r\n          {{ setting('select-label-multi') }}\r\n        </label>\r\n        <p-multiSelect [options]=\"options\" formControlName=\"multipleSelectedOption\" [optionLabel]=\"setting('label-key')\"\r\n          [placeholder]=\"setting('placeholderMulti')\" class=\"multiselect\">\r\n\r\n          <!-- Custom Dropdown Icon -->\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        <small\r\n          *ngIf=\"multiselectDropDownForm.get('multipleSelectedOption')?.touched && multiselectDropDownForm.get('multipleSelectedOption')?.errors?.['required']\"\r\n          class=\"text-red-500\">\r\n          {{ setting('multiErrorMessage')}}\r\n        </small>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</fx-component>", 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\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i7.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-multiselect-dropdown', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, MultiSelectModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n\r\n\r\n  <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMulti')\">\r\n    <form [formGroup]=\"multiselectDropDownForm\" class=\"flex gap-4 w-full\">\r\n      <div class=\"flex-1\">\r\n        <label class=\"input-label dark:text-gray-300\">\r\n          {{ setting('select-label-multi') }}\r\n        </label>\r\n        <p-multiSelect [options]=\"options\" formControlName=\"multipleSelectedOption\" [optionLabel]=\"setting('label-key')\"\r\n          [placeholder]=\"setting('placeholderMulti')\" class=\"multiselect\">\r\n\r\n          <!-- Custom Dropdown Icon -->\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        <small\r\n          *ngIf=\"multiselectDropDownForm.get('multipleSelectedOption')?.touched && multiselectDropDownForm.get('multipleSelectedOption')?.errors?.['required']\"\r\n          class=\"text-red-500\">\r\n          {{ setting('multiErrorMessage')}}\r\n        </small>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</fx-component>", 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\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"] }]
+            args: [{ selector: 'lib-multiselect-dropdown', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, MultiSelectModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n  <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMulti')\">\r\n    <form [formGroup]=\"multiselectDropDownForm\" class=\"flex gap-4 w-full\">\r\n      <div class=\"flex-1\">\r\n        <label class=\"input-label dark:text-gray-300\">\r\n          {{ setting('select-label-multi') }}\r\n        </label>\r\n        <p-multiSelect [options]=\"options\" formControlName=\"multipleSelectedOption\" [optionLabel]=\"setting('label-key')\"\r\n          [placeholder]=\"setting('placeholderMulti')\" class=\"multiselect\">\r\n\r\n          <!-- Custom Dropdown Icon -->\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        <small\r\n          *ngIf=\"multiselectDropDownForm.get('multipleSelectedOption')?.touched && multiselectDropDownForm.get('multipleSelectedOption')?.errors?.['required']\"\r\n          class=\"text-red-500\">\r\n          {{ setting('multiErrorMessage')}}\r\n        </small>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</fx-component>", 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\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
+                type: ViewChild,
+                args: ['fxComponent']
+            }] } });
+class MultiselectDropdownWithChildsComponent extends FxBaseComponent {
+    cdr;
+    http;
+    fxBuilderWrapperService;
+    fxApiService;
+    fb = inject(FormBuilder);
+    destroy$ = new Subject();
+    formObject = {};
+    multiChildDropdownMap = new Map();
+    fxComponent;
+    options = [];
+    multiChildDropDownForm = this.fb.group({
+        multipleChildSelectedOption: [[]],
+        child1: [''],
+        child2: [''],
+        child1Label: [''],
+        child2Label: [''],
+    });
+    constructor(cdr, http, fxBuilderWrapperService, fxApiService) {
+        super(cdr);
+        this.cdr = cdr;
+        this.http = http;
+        this.fxBuilderWrapperService = fxBuilderWrapperService;
+        this.fxApiService = fxApiService;
+        this.onInit.subscribe(() => {
+            this._register(this.multiChildDropDownForm);
+        });
+    }
+    ngAfterViewInit() {
+        if (!this.setting('multiChildOptionAPIURL')) {
+            this.options = this.fxComponent?.fxData?.settings?.find((s) => s.key === 'itemsChildOption')?.options || [];
+        }
+        const child1LabelControl = this.multiChildDropDownForm.get('child1Label');
+        const child2LabelControl = this.multiChildDropDownForm.get('child2Label');
+        child1LabelControl?.setValue(this.setting('child-1-label'));
+        child2LabelControl?.setValue(this.setting('child-2-label'));
+        child1LabelControl?.updateValueAndValidity();
+        child2LabelControl?.updateValueAndValidity();
+        setTimeout(() => {
+            const key = this.fxComponent?.fxData?.name;
+            if (key && this.multiChildDropdownMap.has(key)) {
+                this.multiChildDropDownForm.patchValue(this.multiChildDropdownMap.get(key));
+            }
+        }, 200);
+        setTimeout(() => {
+            const mainControl = this.multiChildDropDownForm.get('multipleChildSelectedOption');
+            const child1Control = this.multiChildDropDownForm.get('child1');
+            const child2Control = this.multiChildDropDownForm.get('child2');
+            if (this.setting('isMultiChildRequired') === 'true') {
+                mainControl?.setValidators([Validators.required]);
+                mainControl?.updateValueAndValidity();
+            }
+            if (this.setting('isChild1Required') === 'true') {
+                child1Control?.setValidators([Validators.required]);
+                child1Control?.updateValueAndValidity();
+            }
+            if (this.setting('isChild2Required') === 'true') {
+                child2Control?.setValidators([Validators.required]);
+                child2Control?.updateValueAndValidity();
+            }
+        }, 1000);
+    }
+    ngOnInit() {
+        this.fxBuilderWrapperService.variables$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((variables) => {
+            if (!variables)
+                return;
+            //  for (const [key, value] of Object.entries(variables) as [string, any][]) {
+            //    if (key.includes('dropdown-with-other')) {
+            //     this.formObject = value;
+            //    }
+            //  }
+            for (const [key, value] of Object.entries(variables)) {
+                if (value &&
+                    typeof value === 'object' &&
+                    'multipleChildSelectedOption' in value) {
+                    this.multiChildDropdownMap.set(key, value);
+                }
+            }
+        });
+        const serviceUrl = this.fxApiService.getServiceUrl(this.setting('serviceMultiName'));
+        this.getOptions(serviceUrl, this.setting('multiChildOptionAPIURL'));
+    }
+    settings() {
+        return [
+            new FxOptionSetting({ key: 'itemsChildOption', $title: 'Options', value: [{ option: 'Yes', value: 'yes' }, { option: 'No', value: 'no' }] }, [{ option: 'Yes', value: 'yes' }, { option: 'No', value: 'no' }]),
+            new FxStringSetting({ key: 'multiChildOptionAPIURL', $title: 'API Url', value: '' }),
+            new FxStringSetting({ key: 'customClassMultiChild', $title: 'Custom Class Name', value: '' }),
+            new FxStringSetting({ key: 'select-label-multi-child', $title: 'Label', value: '' }),
+            new FxStringSetting({ key: 'label-key-child', $title: 'Label Key', value: 'option' }),
+            new FxSelectSetting({ key: 'serviceMultiName', $title: 'Service', value: '' }, [{ option: 'User Service', value: 'user_service' }, { option: 'Patient Service', value: 'patient_service' }, { option: 'Workflow Service', value: 'workflow_service' }]),
+            new FxSelectSetting({ key: 'isMultiChildRequired', $title: 'Required', value: 'true' }, [{ option: 'Yes', value: 'true' }, { option: 'No', value: 'false' }]),
+            new FxStringSetting({ key: 'multiChildErrorMessage', $title: 'Error Message', value: 'Please select' }),
+            new FxStringSetting({ key: 'placeholderMultiChild', $title: 'Placeholder', value: 'Select' }),
+            new FxStringSetting({ key: 'child-1-label', $title: 'Child 1 Label', value: '' }),
+            new FxStringSetting({ key: 'child-1-placeholder', $title: 'Child 1 Placeholder', value: 'enter here' }),
+            new FxSelectSetting({ key: 'isChild1Required', $title: 'Required', value: 'true' }, [{ option: 'Yes', value: 'true' }, { option: 'No', value: 'false' }]),
+            new FxStringSetting({ key: 'child1ErrorMessage', $title: 'Error Message', value: 'Please fill out the field' }),
+            new FxStringSetting({ key: 'child-2-label', $title: 'Child 2 Label', value: '' }),
+            new FxStringSetting({ key: 'child-2-placeholder', $title: 'Child 2 Placeholder', value: 'enter here' }),
+            new FxSelectSetting({ key: 'isChild2Required', $title: 'Required', value: 'true' }, [{ option: 'Yes', value: 'true' }, { option: 'No', value: 'false' }]),
+            new FxStringSetting({ key: 'child2ErrorMessage', $title: 'Error Message', value: 'Please fill out the field' }),
+        ];
+    }
+    validations() {
+        return [];
+    }
+    getOptions(serviceUrl, url) {
+        if (url) {
+            const finalUrl = serviceUrl + url;
+            this.http.get(finalUrl).subscribe({
+                next: (response) => {
+                    this.options = response?.data;
+                },
+                error: (err) => {
+                    console.error('Error fetching options', err);
+                }
+            });
+        }
+        else {
+            this.options = this.fxComponent?.fxData?.settings?.find((s) => s.key === 'itemsChildOption')?.options || [];
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownWithChildsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }, { token: i3$2.ApiServiceRegistry }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultiselectDropdownWithChildsComponent, isStandalone: true, selector: "lib-multiselect-dropdown-with-childs", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMultiChild')\">\r\n  <form [formGroup]=\"multiChildDropDownForm\" class=\"flex gap-4 w-full\">\r\n    \r\n    <!-- Dropdown -->\r\n   <div class=\"flex-1\">\r\n        <label class=\"input-label dark:text-gray-300\">\r\n          {{ setting('select-label-multi-child') }}\r\n        </label>\r\n        <p-multiSelect [options]=\"options\" formControlName=\"multipleChildSelectedOption\" [optionLabel]=\"setting('label-key-child')\"\r\n          [placeholder]=\"setting('placeholderMultiChild')\" class=\"multiselect\">\r\n\r\n          <!-- Custom Dropdown Icon -->\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        <small\r\n          *ngIf=\"multiChildDropDownForm.get('multipleChildSelectedOption')?.touched && multiChildDropDownForm.get('multipleChildSelectedOption')?.errors?.['required']\"\r\n          class=\"text-red-500\">\r\n          {{ setting('multiChildErrorMessage')}}\r\n        </small>\r\n      </div>\r\n\r\n    <!-- Other input -->\r\n    <div class=\"flex-1\">\r\n      <label class=\"input-label dark:text-gray-300\">\r\n        {{ setting('child-1-label') }}\r\n      </label>\r\n      <input\r\n        type=\"text\"\r\n        formControlName=\"child1\"\r\n        placeholder=\"{{ setting('child-1-placeholder') }}\"\r\n        class=\"border p-2 rounded w-full\"\r\n        rows=\"2\"\r\n      >\r\n\r\n      <small\r\n        *ngIf=\"multiChildDropDownForm.get('child1')?.touched && multiChildDropDownForm.get('child1')?.errors?.['required']\"\r\n        class=\"text-red-500\"\r\n      >\r\n        {{ setting('child1ErrorMessage')}}\r\n      </small>\r\n    </div>\r\n\r\n    <div class=\"flex-1\">\r\n      <label class=\"input-label dark:text-gray-300\">\r\n        {{ setting('child-2-label') }}\r\n      </label>\r\n      <input\r\n        type=\"text\"\r\n        formControlName=\"child2\"\r\n        placeholder=\"{{ setting('child-2-placeholder') }}\"\r\n        class=\"border p-2 rounded w-full\"\r\n        rows=\"2\"\r\n      >\r\n\r\n      <small\r\n        *ngIf=\"multiChildDropDownForm.get('child2')?.touched && multiChildDropDownForm.get('child2')?.errors?.['required']\"\r\n        class=\"text-red-500\"\r\n      >\r\n        {{ setting('child2ErrorMessage')}}\r\n      </small>\r\n    </div>\r\n\r\n  </form>\r\n</div>\r\n</fx-component>", 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\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i7.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownWithChildsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-multiselect-dropdown-with-childs', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, MultiSelectModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMultiChild')\">\r\n  <form [formGroup]=\"multiChildDropDownForm\" class=\"flex gap-4 w-full\">\r\n    \r\n    <!-- Dropdown -->\r\n   <div class=\"flex-1\">\r\n        <label class=\"input-label dark:text-gray-300\">\r\n          {{ setting('select-label-multi-child') }}\r\n        </label>\r\n        <p-multiSelect [options]=\"options\" formControlName=\"multipleChildSelectedOption\" [optionLabel]=\"setting('label-key-child')\"\r\n          [placeholder]=\"setting('placeholderMultiChild')\" class=\"multiselect\">\r\n\r\n          <!-- Custom Dropdown Icon -->\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        <small\r\n          *ngIf=\"multiChildDropDownForm.get('multipleChildSelectedOption')?.touched && multiChildDropDownForm.get('multipleChildSelectedOption')?.errors?.['required']\"\r\n          class=\"text-red-500\">\r\n          {{ setting('multiChildErrorMessage')}}\r\n        </small>\r\n      </div>\r\n\r\n    <!-- Other input -->\r\n    <div class=\"flex-1\">\r\n      <label class=\"input-label dark:text-gray-300\">\r\n        {{ setting('child-1-label') }}\r\n      </label>\r\n      <input\r\n        type=\"text\"\r\n        formControlName=\"child1\"\r\n        placeholder=\"{{ setting('child-1-placeholder') }}\"\r\n        class=\"border p-2 rounded w-full\"\r\n        rows=\"2\"\r\n      >\r\n\r\n      <small\r\n        *ngIf=\"multiChildDropDownForm.get('child1')?.touched && multiChildDropDownForm.get('child1')?.errors?.['required']\"\r\n        class=\"text-red-500\"\r\n      >\r\n        {{ setting('child1ErrorMessage')}}\r\n      </small>\r\n    </div>\r\n\r\n    <div class=\"flex-1\">\r\n      <label class=\"input-label dark:text-gray-300\">\r\n        {{ setting('child-2-label') }}\r\n      </label>\r\n      <input\r\n        type=\"text\"\r\n        formControlName=\"child2\"\r\n        placeholder=\"{{ setting('child-2-placeholder') }}\"\r\n        class=\"border p-2 rounded w-full\"\r\n        rows=\"2\"\r\n      >\r\n\r\n      <small\r\n        *ngIf=\"multiChildDropDownForm.get('child2')?.touched && multiChildDropDownForm.get('child2')?.errors?.['required']\"\r\n        class=\"text-red-500\"\r\n      >\r\n        {{ setting('child2ErrorMessage')}}\r\n      </small>\r\n    </div>\r\n\r\n  </form>\r\n</div>\r\n</fx-component>", 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\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
                 type: ViewChild,
                 args: ['fxComponent']
@@ -2703,6 +2835,9 @@ class FxBuilderWrapperComponent {
         if (!Boolean(this.fxWrapperService.getComponent('lib-multiselect-dropdown'))) {
             this.fxWrapperService.registerCustomComponent('Multiselect Dropdown', 'lib-multiselect-dropdown', MultiselectDropdownComponent);
         }
+        if (!Boolean(this.fxWrapperService.getComponent('lib-multiselect-dropdown-with-childs'))) {
+            this.fxWrapperService.registerCustomComponent('Multiselect Dropdown with Childs', 'lib-multiselect-dropdown-with-childs', MultiselectDropdownWithChildsComponent);
+        }
     }
     ;
     getParsedForm() {
@@ -2788,6 +2923,7 @@ class FxFormWrapperComponent {
             { name: 'Smartlist with Other', key: 'dropdown-with-other', component: DropdownWithOtherComponent },
             { name: 'Radio Group with Other', key: 'radio-group-custom', component: RadioGroupComponent },
             { name: 'Multiselect Dropdown', key: 'lib-multiselect-dropdown', component: MultiselectDropdownComponent },
+            { name: 'Multiselect Dropdown with Childs', key: 'lib-multiselect-dropdown-with-childs', component: MultiselectDropdownWithChildsComponent },
         ];
         components.forEach(({ name, key, component }) => {
             if (!this.fxWrapperService.getComponent(key)) {