@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.4

package/dist/components/core/model/FieldMetaDataForm.js

@@ -55,8 +55,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import CodeEditor from "../../../components/common/CodeEditor";
-import { SingleSelectAutoCompleteField } from "../../../components/common/SingleSelectAutoCompleteField";
 import { getSingularAndPlural } from "../../../helpers/helpers";
 import { useGetFieldDefaultMetaDataQuery } from "../../../redux/api/fieldApi";
 import { useLazyGetMediaStorageProvidersQuery } from "../../../redux/api/mediaStorageProviderApi";
@@ -65,28 +63,14 @@ import { useLazyGetmodulesQuery } from "../../../redux/api/moduleApi";
 import { useFormik } from "formik";
 import { capitalize } from "lodash";
 import { usePathname } from "../../../hooks/usePathname";
-import { AutoComplete } from "primereact/autocomplete";
-import { Button } from "primereact/button";
-import { Calendar } from "primereact/calendar";
-import { Checkbox } from "primereact/checkbox";
-import { Dialog } from "primereact/dialog";
-import { Dropdown } from "primereact/dropdown";
-import { InputNumber } from "primereact/inputnumber";
-import { InputText } from "primereact/inputtext";
-import { InputTextarea } from "primereact/inputtextarea";
-import { Message } from "primereact/message";
-import { MultiSelect } from "primereact/multiselect";
-import { RadioButton } from "primereact/radiobutton";
-import { SelectButton } from "primereact/selectbutton";
-import { TabPanel, TabView } from "primereact/tabview";
-import { Toast } from "primereact/toast";
-import { classNames } from "primereact/utils";
 import qs from "qs";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import * as Yup from "yup";
 import FieldSelector from "./FieldSelector";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
-import { getVirtualScrollerOptions } from "../../../helpers/autoCompleteVirtualScroll";
+import { useSolidAutocompleteField } from "../../../hooks/useSolidAutocompleteField";
+import { SolidAutocomplete, SolidButton, SolidCheckbox, SolidDatePicker, SolidDialog, SolidDialogBody, SolidInput, SolidTextarea, SolidNumberInput, SolidSelect, SolidSegmentedControl, SolidRadioGroup, SolidTabGroup, SolidMessage, SolidCodeEditor, } from "../../shad-cn-ui";
+import styles from "../form/fields/solidFields.module.css";
 var SolidFieldType;
 (function (SolidFieldType) {
     // numeric types
@@ -119,6 +103,78 @@ var SolidFieldType;
     SolidFieldType["computed"] = "computed";
     SolidFieldType["uuid"] = "uuid";
 })(SolidFieldType || (SolidFieldType = {}));
+function classNames() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    var classes = [];
+    args.forEach(function (arg) {
+        if (!arg) {
+            return;
+        }
+        if (typeof arg === "string") {
+            if (arg.trim()) {
+                classes.push(arg);
+            }
+            return;
+        }
+        Object.entries(arg).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            if (value) {
+                classes.push(key);
+            }
+        });
+    });
+    return classes.join(" ");
+}
+function createSimpleAutocompleteValue(value) {
+    if (!value)
+        return null;
+    if (typeof value === "object")
+        return value;
+    return { label: value, value: value };
+}
+function createRelationAutocompleteValue(value, labelKey, valueKey) {
+    var _a;
+    if (valueKey === void 0) { valueKey = labelKey; }
+    if (!value)
+        return null;
+    if (typeof value === "object")
+        return value;
+    return _a = {}, _a[labelKey] = value, _a[valueKey] = value, _a;
+}
+function TabPanel(_props) {
+    return null;
+}
+function TabView(_a) {
+    var _b, _c;
+    var children = _a.children, panelContainerClassName = _a.panelContainerClassName;
+    var panels = React.Children.toArray(children).filter(function (child) {
+        return React.isValidElement(child) && child.type === TabPanel;
+    });
+    var firstValue = (_c = (_b = panels[0]) === null || _b === void 0 ? void 0 : _b.props.header) !== null && _c !== void 0 ? _c : "";
+    var _d = React.useState(firstValue), activeValue = _d[0], setActiveValue = _d[1];
+    React.useEffect(function () {
+        var _a, _b;
+        if (!panels.some(function (panel) { return panel.props.header === activeValue; })) {
+            setActiveValue((_b = (_a = panels[0]) === null || _a === void 0 ? void 0 : _a.props.header) !== null && _b !== void 0 ? _b : "");
+        }
+    }, [panels, activeValue]);
+    if (panels.length === 0) {
+        return null;
+    }
+    var tabs = panels.map(function (panel) {
+        var _a;
+        return ({
+            value: panel.props.header,
+            label: panel.props.header,
+            hasError: (_a = panel.props.className) === null || _a === void 0 ? void 0 : _a.includes("tab-error-heading"),
+            content: (_jsx("div", { className: panel.props.className, children: panel.props.children })),
+        });
+    });
+    return (_jsx(SolidTabGroup, { tabs: tabs, value: activeValue, onValueChange: setActiveValue, panelClassName: panelContainerClassName }));
+}
 var SelectionStaticValues = function (_a) {
     var enumValue = _a.enumValue, onUpdate = _a.onUpdate, onDelete = _a.onDelete, onAdd = _a.onAdd;
     var _b = enumValue.split(":"), value = _b[0], display = _b[1];
@@ -128,7 +184,7 @@ var SelectionStaticValues = function (_a) {
     var handleDisplayChange = function (newDisplay) {
         onUpdate("".concat(value || "", ":").concat(newDisplay));
     };
-    return (_jsxs("div", { className: "flex align-items-center gap-2 mt-2", children: [_jsx(InputText, { value: value || "", onChange: function (e) { return handleValueChange(e.target.value); }, placeholder: "Value", className: "w-full" }), _jsx(InputText, { value: display || "", onChange: function (e) { return handleDisplayChange(e.target.value); }, placeholder: "Display", className: "w-full" }), _jsx(Button, { icon: "pi pi-plus", size: "small", onClick: onAdd, type: "button" }), _jsx(Button, { icon: "pi pi-trash", size: "small", onClick: onDelete, outlined: true, severity: "danger", type: "button" })] }));
+    return (_jsxs("div", { className: "flex align-items-center gap-2 mt-2", children: [_jsx(SolidInput, { value: value || "", onChange: function (e) { return handleValueChange(e.target.value); }, placeholder: "Value", className: "w-full" }), _jsx(SolidInput, { value: display || "", onChange: function (e) { return handleDisplayChange(e.target.value); }, placeholder: "Display", className: "w-full" }), _jsx(SolidButton, { icon: "si si-plus", size: "small", onClick: onAdd, type: "button" }), _jsx(SolidButton, { icon: "si si-trash", size: "small", onClick: onDelete, outlined: true, severity: "danger", type: "button" })] }));
 };
 var triggerOperationOptions = [
     { label: "beforeInsert", value: "before-insert" },
@@ -145,9 +201,10 @@ var formatDisplayName = function (value) {
         .join(' ');
 };
 var SelectComputedFieldTriggerValues = function (_a) {
-    var _b, _c;
+    var _b, _c, _d;
+    var _e, _f;
     var index = _a.index, row = _a.row, onChange = _a.onChange, onDelete = _a.onDelete, disableDelete = _a.disableDelete, formik = _a.formik, isFormFieldValid = _a.isFormFieldValid, searchModuleName = _a.searchModuleName, searchModelName = _a.searchModelName, modelMetaData = _a.modelMetaData, errors = _a.errors, touched = _a.touched;
-    var _d = useState([]), filteredOperations = _d[0], setFilteredOperations = _d[1];
+    var _g = useState([]), filteredOperations = _g[0], setFilteredOperations = _g[1];
     useEffect(function () {
         var _a, _b;
         if (!row.moduleName && ((_a = modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.module) === null || _a === void 0 ? void 0 : _a.name)) {
@@ -156,36 +213,62 @@ var SelectComputedFieldTriggerValues = function (_a) {
         if (!row.modelName && (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.singularName)) {
             formik.setFieldValue("computedFieldTriggerConfig[".concat(index, "].modelName"), modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.singularName);
         }
-    }, [(_b = modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.module) === null || _b === void 0 ? void 0 : _b.name, modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.singularName]);
+    }, [(_e = modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.module) === null || _e === void 0 ? void 0 : _e.name, modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.singularName]);
     var searchOperations = function (event) {
         var query = event.query.toLowerCase();
         setFilteredOperations(triggerOperationOptions.filter(function (item) {
             return item.label.toLowerCase().includes(query);
         }));
     };
-    return (_jsxs("div", { className: "flex align-items-start gap-3 mt-2 flex-wrap md:flex-nowrap", children: [_jsxs("div", { className: "", children: [_jsx("label", { htmlFor: "moduleName", className: "form-field-label", children: "Module" }), _jsx("div", { className: "mt-2", children: _jsx(SingleSelectAutoCompleteField, { formik: formik, isFormFieldValid: isFormFieldValid, fieldName: "computedFieldTriggerConfig[".concat(index, "].moduleName"), fieldNameId: "computedFieldTriggerConfig[".concat(index, "].moduleName"), labelKey: "displayName", valueKey: "name", searchData: searchModuleName, existingData: row.moduleName
-                                ? {
-                                    name: row.moduleName,
-                                    displayName: row.displayName || formatDisplayName(row.moduleName),
-                                }
-                                : ((_c = modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.module) === null || _c === void 0 ? void 0 : _c.name)
-                                    ? {
-                                        name: modelMetaData.module.name,
-                                        displayName: modelMetaData.module.displayName || formatDisplayName(modelMetaData.module.name),
-                                    }
-                                    : null }, "moduleName-".concat(index)) }), (errors === null || errors === void 0 ? void 0 : errors.moduleName) && (_jsx(Message, { severity: "error", text: errors.moduleName }))] }), _jsxs("div", { className: "", children: [_jsx("label", { htmlFor: "modelName", className: "form-field-label", children: "Model" }), _jsx("div", { className: "mt-2", children: _jsx(SingleSelectAutoCompleteField, { formik: formik, isFormFieldValid: isFormFieldValid, fieldName: "computedFieldTriggerConfig[".concat(index, "].modelName"), fieldNameId: "computedFieldTriggerConfig[".concat(index, "].modelName"), labelKey: "displayName", valueKey: "singularName", searchData: searchModelName, existingData: row.modelName
-                                ? {
-                                    singularName: row.modelName,
-                                    displayName: row.displayName || formatDisplayName(row.modelName),
-                                }
-                                : (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.singularName)
-                                    ? {
-                                        singularName: modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.singularName,
-                                        displayName: (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.displayName) || formatDisplayName(modelMetaData.displayName),
-                                    }
-                                    : null }, "modelName-".concat(index)) }), (errors === null || errors === void 0 ? void 0 : errors.modelName) && (_jsx(Message, { severity: "error", text: errors.modelName }))] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "operations", className: "form-field-label", children: "Operations" }), _jsx("div", { className: "mt-2", children: _jsx(AutoComplete, { multiple: true, dropdown: true, value: triggerOperationOptions.filter(function (opt) { return (row.operations || []).includes(opt.value); }), suggestions: filteredOperations, completeMethod: searchOperations, field: "label", onChange: function (e) {
-                                return onChange(index, __assign(__assign({}, row), { operations: e.value.map(function (val) { return val.value; }) }));
-                            }, placeholder: "Select operations", className: "solid-standard-autocomplete max-w-16rem" }) }), (errors === null || errors === void 0 ? void 0 : errors.operations) && (_jsx(Message, { severity: "error", text: errors.operations }))] }), _jsx(Button, { icon: "pi pi-trash", size: "small", onClick: function () { return onDelete(index); }, disabled: disableDelete, outlined: true, severity: "danger", type: "button" })] }));
+    var triggerModuleField = useSolidAutocompleteField({
+        formik: formik,
+        fieldName: "computedFieldTriggerConfig[".concat(index, "].moduleName"),
+        fieldNameId: null,
+        labelKey: "displayName",
+        valueKey: "name",
+        searchData: searchModuleName,
+        existingData: row.moduleName
+            ? {
+                name: row.moduleName,
+                displayName: row.displayName || formatDisplayName(row.moduleName),
+            }
+            : ((_f = modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.module) === null || _f === void 0 ? void 0 : _f.name)
+                ? {
+                    name: modelMetaData.module.name,
+                    displayName: modelMetaData.module.displayName || formatDisplayName(modelMetaData.module.name),
+                }
+                : null,
+        relationField: true,
+    });
+    var triggerModelField = useSolidAutocompleteField({
+        formik: formik,
+        fieldName: "computedFieldTriggerConfig[".concat(index, "].modelName"),
+        fieldNameId: null,
+        labelKey: "displayName",
+        valueKey: "singularName",
+        searchData: searchModelName,
+        existingData: row.modelName
+            ? {
+                singularName: row.modelName,
+                displayName: row.displayName || formatDisplayName(row.modelName),
+            }
+            : (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.singularName)
+                ? {
+                    singularName: modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.singularName,
+                    displayName: (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.displayName) || formatDisplayName(modelMetaData.displayName),
+                }
+                : null,
+        relationField: true,
+    });
+    return (_jsxs("div", { className: "flex align-items-center gap-3 mt-2 flex-wrap md:flex-nowrap", children: [_jsxs("div", { className: "", children: [_jsx("label", { htmlFor: "moduleName", className: classNames("form-field-label", styles.fieldLabel), children: "Module" }), _jsx("div", { className: classNames("mt-2 solid-standard-autocomplete", (_b = {},
+                            _b[styles.fieldInvalidControl] = Boolean(errors === null || errors === void 0 ? void 0 : errors.moduleName),
+                            _b)), children: _jsx(SolidAutocomplete, { value: triggerModuleField.selectedItem, suggestions: triggerModuleField.filteredItems, completeMethod: triggerModuleField.searchItems, onChange: triggerModuleField.handleChange, dropdown: true, field: "displayName", className: "w-full" }) }), (errors === null || errors === void 0 ? void 0 : errors.moduleName) && (_jsx("p", { className: styles.fieldError, children: errors.moduleName }))] }), _jsxs("div", { className: "", children: [_jsx("label", { htmlFor: "modelName", className: classNames("form-field-label", styles.fieldLabel), children: "Model" }), _jsx("div", { className: classNames("mt-2 solid-standard-autocomplete", (_c = {},
+                            _c[styles.fieldInvalidControl] = Boolean(errors === null || errors === void 0 ? void 0 : errors.modelName),
+                            _c)), children: _jsx(SolidAutocomplete, { value: triggerModelField.selectedItem, suggestions: triggerModelField.filteredItems, completeMethod: triggerModelField.searchItems, onChange: triggerModelField.handleChange, dropdown: true, field: "displayName", className: "w-full" }) }), (errors === null || errors === void 0 ? void 0 : errors.modelName) && (_jsx("p", { className: styles.fieldError, children: errors.modelName }))] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "operations", className: classNames("form-field-label", styles.fieldLabel), children: "Operations" }), _jsx("div", { className: "mt-2", children: _jsx(SolidAutocomplete, { multiple: true, dropdown: true, value: triggerOperationOptions.filter(function (opt) { return (row.operations || []).includes(opt.value); }), suggestions: filteredOperations, completeMethod: searchOperations, field: "label", onChange: function (e) {
+                                return onChange(index, __assign(__assign({}, row), { operations: (e.value || []).map(function (val) { return val.value; }) }));
+                            }, placeholder: "Select operations", className: classNames("solid-standard-autocomplete max-w-16rem", (_d = {},
+                                _d[styles.fieldInvalidControl] = Boolean(errors === null || errors === void 0 ? void 0 : errors.operations),
+                                _d)) }) }), (errors === null || errors === void 0 ? void 0 : errors.operations) && (_jsx("p", { className: styles.fieldError, children: errors.operations }))] }), _jsx(SolidButton, { icon: "si si-trash", size: "small", onClick: function () { return onDelete(index); }, disabled: disableDelete, outlined: true, severity: "danger", type: "button" })] }));
 };
 var fieldBasedPayloadFormating = function (values, currentFields, fieldMetaData) {
     // const booleanFields: string | any[] = [
@@ -264,6 +347,7 @@ var createValidationSchema = function (currentFields, selectedType, allFields, f
     else {
         reservedNames = allFields.length > 0 ? allFields.map(function (f) { return f.name; }) : [];
     }
+    var selectedTypeValue = selectedType === null || selectedType === void 0 ? void 0 : selectedType.value;
     var schema = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ name: Yup.string()
             // .matches(/^[a-z]+(-[a-z]+)*$/,"Invalid format. Use lowercase letters and hyphens only")
             .notOneOf(reservedNames, ERROR_MESSAGES.FIELD_ALREADY_USE('Name', 'name'))
@@ -273,7 +357,7 @@ var createValidationSchema = function (currentFields, selectedType, allFields, f
         length: Yup.number().typeError(ERROR_MESSAGES.FIELD_MUST_BE_AN('Length', 'interger')).nullable(),
     })), (currentFields.includes("defaultValue") && {
         defaultValue: Yup.mixed().nullable().when("type", function (type) {
-            switch (selectedType.value) {
+            switch (selectedTypeValue) {
                 case "int":
                 case "bigint":
                     return Yup.number().nullable().typeError(ERROR_MESSAGES.FIELD_MUST_BE_AN('Default value', 'integer'))
@@ -314,7 +398,7 @@ var createValidationSchema = function (currentFields, selectedType, allFields, f
     })), (currentFields.includes("min") && {
         min: Yup.mixed().nullable()
             .when("type", function (type) {
-            switch (selectedType.value) {
+            switch (selectedTypeValue) {
                 case "int":
                     return Yup.number().nullable().typeError(ERROR_MESSAGES.FIELD_MUST_BE_AN('Min', 'interger'))
                         .integer(ERROR_MESSAGES.FIELD_MUST_BE_AN('Min', 'interger'));
@@ -331,7 +415,7 @@ var createValidationSchema = function (currentFields, selectedType, allFields, f
     })), (currentFields.includes("max") && {
         max: Yup.mixed()
             .when("type", function (type) {
-            switch (selectedType.value) {
+            switch (selectedTypeValue) {
                 case "int":
                     return Yup.number().nullable().typeError(ERROR_MESSAGES.FIELD_MUST_BE_AN('Max', 'interger'))
                         .integer(ERROR_MESSAGES.FIELD_MUST_BE_AN('Max', 'interger'))
@@ -368,7 +452,10 @@ var createValidationSchema = function (currentFields, selectedType, allFields, f
     })), (currentFields.includes("private") && {
         private: Yup.boolean(),
     })), (currentFields.includes("mediaTypes") && {
-        mediaTypes: Yup.mixed().required(ERROR_MESSAGES.FIELD_MUST_BE_AN('Media Types', 'Arrays')).required(ERROR_MESSAGES.FIELD_REUQIRED('Media Types')),
+        mediaTypes: Yup.array()
+            .of(Yup.string().required(ERROR_MESSAGES.FIELD_REUQIRED('Media Type')))
+            .min(1, ERROR_MESSAGES.FIELD_REUQIRED('Media Types'))
+            .required(ERROR_MESSAGES.FIELD_MUST_BE_AN('Media Types', 'array')),
     })), (currentFields.includes("mediaMaxSizeKb") && {
         mediaMaxSizeKb: Yup.number().required(ERROR_MESSAGES.FIELD_REUQIRED('Media Max Size')),
     })), (currentFields.includes("mediaStorageProviderId") && {
@@ -472,57 +559,50 @@ var createValidationSchema = function (currentFields, selectedType, allFields, f
     return Yup.object(schema);
 };
 var FieldMetaDataForm = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82;
     var setIsDirty = _a.setIsDirty, modelMetaData = _a.modelMetaData, fieldMetaData = _a.fieldMetaData, setFieldMetaData = _a.setFieldMetaData, allFields = _a.allFields, deleteModelFunction = _a.deleteModelFunction, setVisiblePopup = _a.setVisiblePopup, params = _a.params, setIsRequiredPopUp = _a.setIsRequiredPopUp, showToaster = _a.showToaster;
     var booleanOptions = ["false", "true"];
-    var _69 = useState(false), isBackPopupVisible = _69[0], setIsBackPopupVisible = _69[1];
-    var _70 = useState(false), showColumnName = _70[0], setShowColumnName = _70[1];
+    var booleanSegmentedOptions = booleanOptions.map(function (value) { return ({
+        label: capitalize(value),
+        value: value,
+    }); });
+    var resolveBooleanOptionValue = function (value) {
+        return typeof value === "string" ? value : value ? "true" : "false";
+    };
+    var _83 = useState(false), isBackPopupVisible = _83[0], setIsBackPopupVisible = _83[1];
+    var _84 = useState(false), showColumnName = _84[0], setShowColumnName = _84[1];
     var pathname = usePathname();
-    var toast = useRef(null);
-    var _71 = useGetFieldDefaultMetaDataQuery(null), fieldDefaultMetaData = _71.data, isLoading = _71.isLoading, error = _71.error, refetch = _71.refetch;
-    var _72 = useState(fetchCurrentFields(fieldMetaData && fieldMetaData.type, fieldDefaultMetaData)), currentFields = _72[0], setCurrentFields = _72[1];
-    var _73 = useLazyGetMediaStorageProvidersQuery(), triggerGetMediaStorageProvider = _73[0], _74 = _73[1], MediaStorageProviderData = _74.data, isMediaStorageProviderFetching = _74.isFetching, MediaStorageProviderError = _74.error;
-    var _75 = useLazyGetmodulesQuery(), triggerGetModules = _75[0], _76 = _75[1], moduleData = _76.data, isModuleFetching = _76.isFetching, moduleError = _76.error;
-    var _77 = useLazyGetModelsQuery(), triggerGetModels = _77[0], _78 = _77[1], modelData = _78.data, ismodelFetching = _78.isFetching, modelError = _78.error;
-    var _79 = useUpdateUserKeyMutation(), updateUserKey = _79[0], _80 = _79[1], isUpdateUserKeyLoading = _80.isLoading, isUpdateUserKeySuccess = _80.isSuccess, isUpdateUserKeyError = _80.isError, UpdateUserKeyError = _80.error, newModel = _80.data;
-    var _81 = useState(), markdownText = _81[0], setMarkdownText = _81[1];
-    var _82 = useState(false), encryptState = _82[0], setEncryptState = _82[1];
-    var _83 = useState(fieldMetaData ? false : true), showTypeFilter = _83[0], setShowTypeFilter = _83[1];
-    var _84 = useState((fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.type) && { label: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.type, value: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.type }), selectedType = _84[0], setSelectedType = _84[1];
-    var _85 = useState((fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.computedFieldValueType) && { label: fieldMetaData.computedFieldValueType, value: fieldMetaData.computedFieldValueType }), selectedComputedFieldValueType = _85[0], setSelectedComputedFieldValueType = _85[1];
-    var _86 = useState((fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.selectionDynamicProvider) && { label: fieldMetaData.selectionDynamicProvider, value: fieldMetaData.selectionDynamicProvider }), selectionDynamicProvider = _86[0], setSelectionDynamicProvider = _86[1];
+    var _85 = useGetFieldDefaultMetaDataQuery(null), fieldDefaultMetaData = _85.data, isLoading = _85.isLoading, error = _85.error, refetch = _85.refetch;
+    var _86 = useState(fetchCurrentFields(fieldMetaData && fieldMetaData.type, fieldDefaultMetaData)), currentFields = _86[0], setCurrentFields = _86[1];
+    var _87 = useLazyGetMediaStorageProvidersQuery(), triggerGetMediaStorageProvider = _87[0], _88 = _87[1], MediaStorageProviderData = _88.data, isMediaStorageProviderFetching = _88.isFetching, MediaStorageProviderError = _88.error;
+    var _89 = useLazyGetmodulesQuery(), triggerGetModules = _89[0], _90 = _89[1], moduleData = _90.data, isModuleFetching = _90.isFetching, moduleError = _90.error;
+    var _91 = useLazyGetModelsQuery(), triggerGetModels = _91[0], _92 = _91[1], modelData = _92.data, ismodelFetching = _92.isFetching, modelError = _92.error;
+    var _93 = useUpdateUserKeyMutation(), updateUserKey = _93[0], _94 = _93[1], isUpdateUserKeyLoading = _94.isLoading, isUpdateUserKeySuccess = _94.isSuccess, isUpdateUserKeyError = _94.isError, UpdateUserKeyError = _94.error, newModel = _94.data;
+    var _95 = useState(), markdownText = _95[0], setMarkdownText = _95[1];
+    var _96 = useState(Boolean(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.encrypt)), encryptState = _96[0], setEncryptState = _96[1];
+    var _97 = useState(fieldMetaData ? false : true), showTypeFilter = _97[0], setShowTypeFilter = _97[1];
+    var _98 = useState((fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.type) ? { label: fieldMetaData.type, value: fieldMetaData.type } : null), selectedType = _98[0], setSelectedType = _98[1];
+    var selectedTypeValue = (selectedType === null || selectedType === void 0 ? void 0 : selectedType.value) || "";
+    var _99 = useState((fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.computedFieldValueType) && { label: fieldMetaData.computedFieldValueType, value: fieldMetaData.computedFieldValueType }), selectedComputedFieldValueType = _99[0], setSelectedComputedFieldValueType = _99[1];
+    var _100 = useState((fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.selectionDynamicProvider) && { label: fieldMetaData.selectionDynamicProvider, value: fieldMetaData.selectionDynamicProvider }), selectionDynamicProvider = _100[0], setSelectionDynamicProvider = _100[1];
     // const [externalIdProvider, setExternalIdProvider] = useState(fieldMetaData?.externalIdProvider && { label: fieldMetaData.externalIdProvider, value: fieldMetaData.externalIdProvider });
-    var _87 = useState(fieldMetaData && fieldMetaData.selectionStaticValues && fieldMetaData.selectionStaticValues.length > 0 && (fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.selectionStaticValues.filter(function (line) { return line.trim() !== ""; }).join("\n"))), selectionStaticValues = _87[0], setSelectionStaticValues = _87[1];
-    var _88 = useState([]), filteredComputedFieldValueTypes = _88[0], setFilteredComputedFieldValueTypes = _88[1];
-    var _89 = useState([]), filteredSelectionDynamicProvider = _89[0], setFilteredSelectionDynamicProvider = _89[1];
-    var _90 = useState([]), ormTypeOptions = _90[0], setOrmTypeOptions = _90[1];
-    var _91 = useState(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.ormType), selectedOrmType = _91[0], setSelectedOrmType = _91[1];
-    var _92 = useState(false), askForUserKeyField = _92[0], setAskForUserKeyField = _92[1];
-    var _93 = useState([]), userKeyFieldData = _93[0], setUserKeyFieldData = _93[1];
-    var _94 = useState([]), filteredExternalIdProvider = _94[0], setFilteredExternalIdProvider = _94[1];
-    var _95 = useState([]), filteredSelectionEncryptionType = _95[0], setFilteredSelectionEncryptionType = _95[1];
-    var _96 = useState([]), filteredSelectionDecryptWhen = _96[0], setFilteredSelectionDecryptWhen = _96[1];
-    var items = Array.from({ length: 100000 }).map(function (_, i) { return ({
-        label: "Item #".concat(i),
-        value: i,
-    }); });
+    var _101 = useState([]), filteredComputedFieldValueTypes = _101[0], setFilteredComputedFieldValueTypes = _101[1];
+    var _102 = useState([]), filteredSelectionDynamicProvider = _102[0], setFilteredSelectionDynamicProvider = _102[1];
+    var _103 = useState([]), ormTypeOptions = _103[0], setOrmTypeOptions = _103[1];
+    var _104 = useState(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.ormType), selectedOrmType = _104[0], setSelectedOrmType = _104[1];
+    var _105 = useState(false), askForUserKeyField = _105[0], setAskForUserKeyField = _105[1];
+    var _106 = useState([]), userKeyFieldData = _106[0], setUserKeyFieldData = _106[1];
+    var _107 = useState([]), filteredExternalIdProvider = _107[0], setFilteredExternalIdProvider = _107[1];
+    var _108 = useState([]), filteredSelectionEncryptionType = _108[0], setFilteredSelectionEncryptionType = _108[1];
+    var _109 = useState([]), filteredSelectionDecryptWhen = _109[0], setFilteredSelectionDecryptWhen = _109[1];
     var validationSchema = React.useMemo(function () { return createValidationSchema(currentFields, selectedType, allFields, fieldMetaData, encryptState); }, [currentFields, encryptState]);
-    var _97 = useState(false), typeSelected = _97[0], setTypeSelected = _97[1];
-    var searchMediaTypes = function (event) { return __awaiter(void 0, void 0, void 0, function () {
-        var query, suggestionData;
-        return __generator(this, function (_a) {
-            query = event.query;
-            try {
-                suggestionData = fieldDefaultMetaData.data.mediaTypes.filter(function (t) { return t.label.toLowerCase().startsWith(query.toLowerCase()); });
-                return [2 /*return*/, suggestionData];
-            }
-            catch (error) {
-                console.error(ERROR_MESSAGES.FETCHING_ITEMS, error);
-                return [2 /*return*/, []];
-            }
-            return [2 /*return*/];
-        });
-    }); };
+    var _110 = useState(false), typeSelected = _110[0], setTypeSelected = _110[1];
+    var showRegexFields = currentFields.includes("regexPattern");
+    var showMinFields = currentFields.includes("min");
+    var showMaxFields = currentFields.includes("max");
+    var showOrmOptions = currentFields.includes("ormType") && Boolean(ormTypeOptions && ormTypeOptions.length);
+    var showValidationSection = selectedTypeValue !== "relation" && (showRegexFields || showMinFields || showMaxFields || showOrmOptions);
     var searchMediaStorageProvIderId = function (event) { return __awaiter(void 0, void 0, void 0, function () {
         var query, queryData, queryString, result, updatedSuggestion, error_1;
         return __generator(this, function (_a) {
@@ -889,7 +969,8 @@ var FieldMetaDataForm = function (_a) {
         { label: "True", value: "true" },
         { label: "False", value: "false" },
     ];
-    var _98 = useState(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.regexPattern), selectedPasswordPolicy = _98[0], setSelectedPasswordPolicy = _98[1];
+    var defaultPasswordPolicy = fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.regexPattern;
+    var _111 = useState(defaultPasswordPolicy), selectedPasswordPolicy = _111[0], setSelectedPasswordPolicy = _111[1];
     var passwordPolicyOptions = [
         { label: 'Lowercase and Uppercase Alphabets Required', value: '^(?=.*[a-z])(?=.*[A-Z]).*$' },
         { label: 'Lowercase and Uppercase Alphabets and Numbers Required', value: '^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).*$' },
@@ -902,6 +983,19 @@ var FieldMetaDataForm = function (_a) {
         { label: 'Video (Supports MP4, AVI, MKV, etc.)', value: 'video' },
         { label: 'File (Supports PDF, DOCX, TXT, etc.)', value: 'file' }
     ];
+    var resolvedMediaTypeOptions = useMemo(function () { var _a, _b; return (_b = (_a = fieldDefaultMetaData === null || fieldDefaultMetaData === void 0 ? void 0 : fieldDefaultMetaData.data) === null || _a === void 0 ? void 0 : _a.mediaTypes) !== null && _b !== void 0 ? _b : mediaTypesOptions; }, [(_m = fieldDefaultMetaData === null || fieldDefaultMetaData === void 0 ? void 0 : fieldDefaultMetaData.data) === null || _m === void 0 ? void 0 : _m.mediaTypes]);
+    var _112 = useState(resolvedMediaTypeOptions), filteredMediaTypes = _112[0], setFilteredMediaTypes = _112[1];
+    useEffect(function () {
+        setFilteredMediaTypes(resolvedMediaTypeOptions);
+    }, [resolvedMediaTypeOptions]);
+    var handleMediaTypesSearch = useCallback(function (event) {
+        var query = (event.query || "").toLowerCase();
+        if (!query) {
+            setFilteredMediaTypes(resolvedMediaTypeOptions);
+            return;
+        }
+        setFilteredMediaTypes(resolvedMediaTypeOptions.filter(function (option) { var _a, _b; return ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(query)) || ((_b = option.value) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(query)); }));
+    }, [resolvedMediaTypeOptions]);
     var parseComputedFieldTriggerConfig = function (input) {
         try {
             if (typeof input === "string") {
@@ -939,9 +1033,9 @@ var FieldMetaDataForm = function (_a) {
         min: fieldMetaData ? fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.min : null,
         max: fieldMetaData ? fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.max : null,
         private: fieldMetaData ? fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.private : false,
-        mediaTypes: fieldMetaData ? fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.mediaTypes : null,
+        mediaTypes: (_o = fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.mediaTypes) !== null && _o !== void 0 ? _o : [],
         mediaMaxSizeKb: fieldMetaData ? fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.mediaMaxSizeKb : null,
-        mediaStorageProviderId: fieldMetaData ? (_b = fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.mediaStorageProvider) === null || _b === void 0 ? void 0 : _b.id : null,
+        mediaStorageProviderId: fieldMetaData ? (_p = fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.mediaStorageProvider) === null || _p === void 0 ? void 0 : _p.id : null,
         mediaStorageProvider: fieldMetaData ? fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.mediaStorageProvider : null,
         mediaEmbedded: fieldMetaData ? ((fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.mediaEmbedded) && (fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.mediaEmbedded.toString())) : "true",
         relationType: fieldMetaData ? fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.relationType : null,
@@ -1016,24 +1110,73 @@ var FieldMetaDataForm = function (_a) {
         }); },
         validateOnBlur: false // Disable validation on blur
     });
+    var mediaTypeSelectedItems = useMemo(function () {
+        if (!Array.isArray(formik.values.mediaTypes))
+            return [];
+        return formik.values.mediaTypes.map(function (entry) {
+            if (entry && typeof entry === "object") {
+                if (entry.label && entry.value) {
+                    return entry;
+                }
+                if (entry.value) {
+                    var fromOptions_1 = resolvedMediaTypeOptions.find(function (option) { return option.value === entry.value; });
+                    return fromOptions_1 || { label: entry.value, value: entry.value };
+                }
+            }
+            var fromOptions = resolvedMediaTypeOptions.find(function (option) { return option.value === entry; });
+            return fromOptions || { label: String(entry), value: entry };
+        });
+    }, [formik.values.mediaTypes, resolvedMediaTypeOptions]);
+    var resetFormStateForTypeSelection = useCallback(function (options) {
+        formik.resetForm();
+        var baseValues = formik.initialValues;
+        setShowColumnName(Boolean(baseValues.columnName));
+        setEncryptState(Boolean(baseValues.encrypt));
+        setMarkdownText(undefined);
+        setSelectedComputedFieldValueType((baseValues === null || baseValues === void 0 ? void 0 : baseValues.computedFieldValueType)
+            ? { label: baseValues.computedFieldValueType, value: baseValues.computedFieldValueType }
+            : null);
+        setSelectedPasswordPolicy((baseValues === null || baseValues === void 0 ? void 0 : baseValues.regexPattern) || defaultPasswordPolicy || "");
+        setOrmTypeOptions([]);
+        setSelectedOrmType(baseValues === null || baseValues === void 0 ? void 0 : baseValues.ormType);
+        setAskForUserKeyField(false);
+        setUserKeyFieldData([]);
+        if (!(options === null || options === void 0 ? void 0 : options.keepSelectedType)) {
+            if (fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.type) {
+                setSelectedType({ label: fieldMetaData.type, value: fieldMetaData.type });
+            }
+            else {
+                setSelectedType(null);
+            }
+        }
+    }, [
+        defaultPasswordPolicy,
+        fieldMetaData,
+        formik,
+    ]);
     var showError = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var errors, errorMessages;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var errors, collectMessages, errorMessages;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0: return [4 /*yield*/, formik.validateForm()];
                 case 1:
-                    errors = _b.sent();
-                    errorMessages = Object.values(errors);
+                    errors = _a.sent();
+                    collectMessages = function (value) {
+                        if (!value)
+                            return [];
+                        if (typeof value === "string")
+                            return [value];
+                        if (Array.isArray(value)) {
+                            return value.flatMap(collectMessages);
+                        }
+                        if (typeof value === "object") {
+                            return Object.values(value).flatMap(collectMessages);
+                        }
+                        return [String(value)];
+                    };
+                    errorMessages = Object.values(errors).flatMap(collectMessages);
                     if (errorMessages.length > 0) {
-                        (_a = toast === null || toast === void 0 ? void 0 : toast.current) === null || _a === void 0 ? void 0 : _a.show({
-                            severity: "error",
-                            summary: ERROR_MESSAGES.SEND_REPORT,
-                            // sticky: true,
-                            life: 3000,
-                            //@ts-ignore
-                            content: function (props) { return (_jsx("div", { className: "flex flex-column align-items-left", style: { flex: "1" }, children: errorMessages.map(function (m, index) { return (_jsx("div", { className: "flex align-items-center gap-2", children: _jsx("span", { className: "font-bold text-900", children: String(m) }) }, index)); }) })); },
-                        });
+                        showToaster(errorMessages, "error");
                     }
                     return [2 /*return*/];
             }
@@ -1049,6 +1192,9 @@ var FieldMetaDataForm = function (_a) {
         }
     }, [isUpdateUserKeySuccess, isUpdateUserKeyError]);
     var handleTypeSelect = function (e, label) {
+        if (!fieldMetaData) {
+            resetFormStateForTypeSelection({ keepSelectedType: true });
+        }
         setShowTypeFilter(false);
         setSelectedType({ label: label, value: e });
         formik.setFieldValue("type", e);
@@ -1071,9 +1217,16 @@ var FieldMetaDataForm = function (_a) {
         setCurrentFields(fetchCurrentFields(e, fieldDefaultMetaData));
         // setTypeSelected(true);
     };
-    useEffect((function () {
-        setOrmTypeOptions(fieldDefaultMetaData && formik.values.type && fieldDefaultMetaData.data.ormType[modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.dataSourceType][formik.values.type].ormTypes);
-    }), [formik]);
+    useEffect(function () {
+        var _a, _b;
+        if (!fieldDefaultMetaData || !formik.values.type || !(modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.dataSourceType)) {
+            setOrmTypeOptions([]);
+            return;
+        }
+        var ormTypeBySource = (_a = fieldDefaultMetaData.data.ormType) === null || _a === void 0 ? void 0 : _a[modelMetaData.dataSourceType];
+        var typeConfig = ormTypeBySource === null || ormTypeBySource === void 0 ? void 0 : ormTypeBySource[formik.values.type];
+        setOrmTypeOptions((_b = typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.ormTypes) !== null && _b !== void 0 ? _b : []);
+    }, [fieldDefaultMetaData, formik.values.type, modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.dataSourceType]);
     useEffect(function () {
         if (fieldMetaData && fieldMetaData.columnName) {
             setShowColumnName(true);
@@ -1158,16 +1311,107 @@ var FieldMetaDataForm = function (_a) {
         var updatedRows = formik.values.computedFieldTriggerConfig.filter(function (_, i) { return i !== index; });
         formik.setFieldValue("computedFieldTriggerConfig", updatedRows.length > 0 ? updatedRows : [{ moduleName: '', modelName: '', operations: [] }]);
     };
-    console.log("formik.values.computedFieldTriggerConfig", formik.values.computedFieldTriggerConfig);
     var computedFieldSearchHandlers = useMemo(function () {
         return formik.values.computedFieldTriggerConfig.map(function (row) {
             return getSearchModelNameHandler(row.moduleName);
         });
     }, [formik.values.computedFieldTriggerConfig]);
-    return (_jsxs("div", { children: [_jsx(Toast, { ref: toast }), _jsx("div", { children: _jsxs("form", { onSubmit: formik.handleSubmit, children: [_jsx("div", { className: "solid-field-metadata-form-header", children: pathname.includes('create') ?
+    var mediaStorageProviderField = useSolidAutocompleteField({
+        formik: formik,
+        fieldName: "mediaStorageProvider",
+        fieldNameId: "mediaStorageProviderId",
+        labelKey: "name",
+        valueKey: "value",
+        searchData: searchMediaStorageProvIderId,
+        existingData: formik.values.mediaStorageProvider,
+        relationField: true,
+    });
+    var relationModelModuleExisting = useMemo(function () { return createRelationAutocompleteValue(formik.values.relationModelModuleName, "name", "name"); }, [formik.values.relationModelModuleName]);
+    var relationModelModuleField = useSolidAutocompleteField({
+        formik: formik,
+        fieldName: "relationModelModuleName",
+        fieldNameId: null,
+        labelKey: "name",
+        valueKey: "name",
+        searchData: searchRelationModelModuleNames,
+        existingData: relationModelModuleExisting,
+        relationField: true,
+        additionalAction: function () {
+            formik.setFieldValue("relationCoModelSingularName", "");
+            formik.setFieldValue("relationCoModelColumnName", "");
+            formik.setFieldValue("relationJoinTableName", "");
+        }
+    });
+    var relationCoModelExisting = useMemo(function () { return createRelationAutocompleteValue(formik.values.relationCoModelSingularName, "displayName", "singularName"); }, [formik.values.relationCoModelSingularName]);
+    var relationCoModelField = useSolidAutocompleteField({
+        formik: formik,
+        fieldName: "relationCoModelSingularName",
+        fieldNameId: null,
+        labelKey: "displayName",
+        valueKey: "singularName",
+        searchData: searchrelationCoModelSingularNames,
+        existingData: relationCoModelExisting,
+        relationField: true,
+    });
+    var userKeyExisting = useMemo(function () { return createRelationAutocompleteValue(formik.values.userKey, "displayName", "name"); }, [formik.values.userKey]);
+    var userKeyField = useSolidAutocompleteField({
+        formik: formik,
+        fieldName: "userKey",
+        fieldNameId: null,
+        labelKey: "displayName",
+        valueKey: "name",
+        searchData: searchUserKeyField,
+        existingData: userKeyExisting,
+        relationField: true,
+    });
+    var selectionDynamicProviderExisting = useMemo(function () { return createSimpleAutocompleteValue(formik.values.selectionDynamicProvider); }, [formik.values.selectionDynamicProvider]);
+    var selectionDynamicProviderField = useSolidAutocompleteField({
+        formik: formik,
+        fieldName: "selectionDynamicProvider",
+        labelKey: "label",
+        valueKey: "value",
+        searchData: searchSelectionDynamicProvider,
+        existingData: selectionDynamicProviderExisting,
+        additionalAction: function (e) { return setMarkdownText(e.target.value.help); },
+    });
+    var computedFieldValueProviderExisting = useMemo(function () { return createSimpleAutocompleteValue(formik.values.computedFieldValueProvider); }, [formik.values.computedFieldValueProvider]);
+    var computedFieldValueProviderField = useSolidAutocompleteField({
+        formik: formik,
+        fieldName: "computedFieldValueProvider",
+        labelKey: "label",
+        valueKey: "value",
+        searchData: searchComputedProvider,
+        existingData: computedFieldValueProviderExisting,
+        additionalAction: function (e) { return setMarkdownText(e.target.value.help); },
+    });
+    var encryptionTypeExisting = useMemo(function () { return createSimpleAutocompleteValue(formik.values.encryptionType); }, [formik.values.encryptionType]);
+    var decryptWhenExisting = useMemo(function () { return createSimpleAutocompleteValue(formik.values.decryptWhen); }, [formik.values.decryptWhen]);
+    var encryptionTypeField = useSolidAutocompleteField({
+        formik: formik,
+        fieldName: "encryptionType",
+        fieldNameId: "encryptionType",
+        labelKey: "label",
+        valueKey: "value",
+        searchData: searchSelectionEncryptionType,
+        existingData: encryptionTypeExisting,
+    });
+    var decryptWhenField = useSolidAutocompleteField({
+        formik: formik,
+        fieldName: "decryptWhen",
+        fieldNameId: "decryptWhen",
+        labelKey: "label",
+        valueKey: "value",
+        searchData: searchSelectionDecryptWhen,
+        existingData: decryptWhenExisting,
+    });
+    return (_jsxs("div", { children: [_jsx("div", { children: _jsxs("form", { onSubmit: formik.handleSubmit, onReset: function (event) {
+                        event.preventDefault();
+                        resetFormStateForTypeSelection();
+                    }, children: [_jsx("div", { className: "solid-field-metadata-form-header", children: pathname.includes('create') ?
                                 _jsxs(_Fragment, { children: [_jsx("div", { className: "flex align-items-center gap-3", children: showTypeFilter === false ?
-                                                _jsxs(_Fragment, { children: [_jsx(Button, { text: true, icon: 'pi pi-arrow-left', size: "small", type: "button", "aria-label": "Back", className: 'max-w-2rem bg-primary-reverse text-color solid-icon-button', onClick: function () {
+                                                _jsxs(_Fragment, { children: [_jsx(SolidButton, { text: true, icon: 'si si-arrow-left', size: "small", type: "button", "aria-label": "Back", className: 'max-w-2rem bg-primary-reverse text-color solid-icon-button', onClick: function () {
                                                                 if (!formik.values.displayName) {
+                                                                    resetFormStateForTypeSelection();
                                                                     setShowTypeFilter(true);
                                                                 }
                                                                 else {
@@ -1175,39 +1419,41 @@ var FieldMetaDataForm = function (_a) {
                                                                 }
                                                             } }), _jsx("div", { className: "form-wrapper-title solid-mobile-text-wrapper text-base", children: capitalize(modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.displayName) })] })
                                                 :
-                                                    _jsx("div", { className: "flex text-2xl font-bold align-items-center ml-4", style: { color: '#000' }, children: _jsxs("div", { className: "form-wrapper-title solid-mobile-text-wrapper text-base", children: ["Model - ", capitalize(modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.displayName)] }) }) }), _jsx("div", { className: "flex align-items-center gap-3 close-popup", children: _jsx(Button, { icon: "pi pi-times", rounded: true, text: true, "aria-label": "Cancel", type: "reset", size: "small", onClick: function () { return setVisiblePopup(false); }, className: 'max-w-2rem bg-primary-reverse text-color' }) })] })
+                                                    _jsx("div", { className: "flex text-2xl font-bold align-items-center ml-4", style: { color: '#000' }, children: _jsxs("div", { className: "form-wrapper-title solid-mobile-text-wrapper text-base", children: ["Model - ", capitalize(modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.displayName)] }) }) }), _jsx("div", { className: "flex align-items-center gap-3 close-popup", children: _jsx(SolidButton, { icon: "si si-times", rounded: true, text: true, "aria-label": "Cancel", type: "reset", size: "small", onClick: function () { return setVisiblePopup(false); }, className: 'max-w-2rem bg-primary-reverse text-color' }) })] })
                                 :
                                     _jsxs(_Fragment, { children: [_jsxs("div", { className: "flex align-items-center gap-3", children: [!(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id) &&
-                                                        _jsx(Button, { text: true, icon: 'pi pi-arrow-left', size: "small", type: "button", "aria-label": "Back", className: 'max-w-2rem bg-primary-reverse text-color solid-icon-button', onClick: function () {
+                                                        _jsx(SolidButton, { text: true, icon: 'si si-arrow-left', size: "small", type: "button", "aria-label": "Back", className: 'max-w-2rem bg-primary-reverse text-color solid-icon-button', onClick: function () {
                                                                 if (!formik.values.displayName) {
+                                                                    resetFormStateForTypeSelection();
                                                                     setShowTypeFilter(true);
                                                                 }
                                                                 else {
                                                                     setIsBackPopupVisible(true);
                                                                 }
                                                             } }), fieldMetaData ?
-                                                        _jsxs("div", { className: "form-wrapper-title solid-mobile-text-wrapper text-base", children: ["Edit ", capitalize(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.displayName)] })
+                                                        _jsxs("div", { className: "form-wrapper-title solid-mobile-text-wrapper", children: ["Edit ", capitalize(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.displayName)] })
                                                         :
-                                                            _jsxs("div", { className: "form-wrapper-title solid-mobile-text-wrapper text-base", children: ["Add New ", (selectedType === null || selectedType === void 0 ? void 0 : selectedType.label) && !showTypeFilter && capitalize(selectedType.label), " Field to ", capitalize(modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.displayName)] })] }), _jsx("div", { className: "flex align-items-center gap-3 close-popup", children: _jsx(Button, { icon: "pi pi-times", text: true, "aria-label": "Cancel", type: "reset", size: "small", onClick: function () { return setVisiblePopup(false); }, className: 'max-w-2rem bg-primary-reverse text-color' }) })] }) }), showTypeFilter === true ?
+                                                            _jsxs("div", { className: "form-wrapper-title solid-mobile-text-wrapper", children: ["Add New ", (selectedType === null || selectedType === void 0 ? void 0 : selectedType.label) && !showTypeFilter && capitalize(selectedType.label), " Field to ", capitalize(modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.displayName)] })] }), _jsx("div", { className: "flex align-items-center gap-3 close-popup", children: _jsx(SolidButton, { icon: "si si-times", text: true, "aria-label": "Cancel", type: "reset", size: "small", onClick: function () { return setVisiblePopup(false); }, className: 'max-w-2rem bg-primary-reverse text-color' }) })] }) }), showTypeFilter === true ?
                             _jsx(FieldSelector, { handleTypeSelect: handleTypeSelect, modelMetaData: modelMetaData })
                             :
-                                _jsx("div", { className: "p-4", style: { maxHeight: '80vh', overflowY: 'auto', overflowX: 'hidden' }, children: _jsx("div", { className: "p-d-flex p-jc-center creat-field-for form-dem", children: _jsxs("div", { className: "p-fluid", style: { position: 'relative' }, children: [_jsxs(TabView, { panelContainerClassName: "px-0", children: [_jsx(TabPanel, { header: "Basic Info", className: (formik.touched.hasOwnProperty("name") && formik.errors.hasOwnProperty("name")) || (formik.touched.hasOwnProperty("displayName") && formik.errors.hasOwnProperty("displayName")) || (formik.touched.hasOwnProperty("displayName") && formik.errors.hasOwnProperty("ormType")) ? "tab-error-heading" : "", children: _jsxs("div", { className: "formgrid grid", children: [currentFields.includes("displayName") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "displayName", className: "form-field-label", children: "Display Name" }), _jsx(InputText, { type: "text", disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id, id: "displayName", name: "displayName", onChange: function (e) {
+                                _jsx("div", { className: "p-3", style: { maxHeight: '80vh', overflowY: 'auto', overflowX: 'hidden' }, children: _jsx("div", { className: "p-d-flex p-jc-center creat-field-for form-dem", children: _jsxs("div", { className: "p-fluid", style: { position: 'relative' }, children: [_jsxs(TabView, { panelContainerClassName: "px-0", children: [_jsx(TabPanel, { header: "Basic Info", className: (formik.touched.hasOwnProperty("name") && formik.errors.hasOwnProperty("name")) || (formik.touched.hasOwnProperty("displayName") && formik.errors.hasOwnProperty("displayName")) || (formik.touched.hasOwnProperty("displayName") && formik.errors.hasOwnProperty("ormType")) ? "tab-error-heading" : "", children: _jsxs("div", { className: "formgrid grid", children: [currentFields.includes("displayName") && (_jsxs("div", { className: "field col-12 md:col-6 mt-2", children: [_jsx("label", { htmlFor: "displayName", className: classNames("form-field-label", styles.fieldLabel), children: "Display Name" }), _jsx(SolidInput, { type: "text", disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id, id: "displayName", name: "displayName", onChange: function (e) {
                                                                                     formik.setFieldValue("displayName", e.target.value);
-                                                                                    var _a = getSingularAndPlural(e.target.value), toCamelCase = _a.toCamelCase, toSnakeCase = _a.toSnakeCase, toPluralCamelCase = _a.toPluralCamelCase;
+                                                                                    var _a = getSingularAndPlural(e.target.value), toCamelCase = _a.toCamelCase, toSnakeCase = _a.toSnakeCase;
                                                                                     formik.setFieldValue("name", toCamelCase);
                                                                                     if (showColumnName) {
                                                                                         formik.setFieldValue("columnName", toSnakeCase);
                                                                                     }
-                                                                                }, value: formik.values.displayName, className: classNames("", {
+                                                                                }, value: formik.values.displayName, className: classNames(styles.fieldInput, {
                                                                                     "p-invalid": isFormFieldValid(formik, "displayName"),
-                                                                                }) }), isFormFieldValid(formik, "displayName") && (_jsx(Message, { severity: "error", text: (_d = (_c = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _c === void 0 ? void 0 : _c.displayName) === null || _d === void 0 ? void 0 : _d.toString() }))] })), currentFields.includes("name") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3 md:mt-0", children: [_jsx("label", { htmlFor: "name", className: "form-field-label", children: "Name" }), _jsx(InputText, { disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id, type: "text", id: "name", name: "name", onChange: formik.handleChange, value: formik.values.name, className: classNames("", {
+                                                                                }) }), isFormFieldValid(formik, "displayName") && (_jsx("p", { className: styles.fieldError, children: (_r = (_q = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _q === void 0 ? void 0 : _q.displayName) === null || _r === void 0 ? void 0 : _r.toString() }))] })), currentFields.includes("name") && (_jsxs("div", { className: "field col-12 md:col-6 mt-1 md:mt-0", children: [_jsx("label", { htmlFor: "name", className: classNames("form-field-label", styles.fieldLabel), children: "Name" }), _jsx(SolidInput, { disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id, type: "text", id: "name", name: "name", onChange: formik.handleChange, value: formik.values.name, className: classNames(styles.fieldInput, {
                                                                                     "p-invalid": isFormFieldValid(formik, "name"),
-                                                                                }) }), isFormFieldValid(formik, "name") && (_jsx(Message, { severity: "error", text: (_f = (_e = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _e === void 0 ? void 0 : _e.name) === null || _f === void 0 ? void 0 : _f.toString() }))] })), currentFields.includes("description") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3 md:mt-4", children: [_jsx("label", { htmlFor: "description", className: "form-field-label", children: "Description" }), _jsx(InputTextarea, { "aria-describedby": "Description of your field", id: "description", name: "description", onChange: formik.handleChange, value: formik.values.description, rows: 5, cols: 30, className: classNames("", {
+                                                                                }) }), isFormFieldValid(formik, "name") && (_jsx("p", { className: styles.fieldError, children: (_t = (_s = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _s === void 0 ? void 0 : _s.name) === null || _t === void 0 ? void 0 : _t.toString() }))] })), currentFields.includes("description") && (_jsxs("div", { className: "field col-12 md:col-6 mt-1 md:mt-2", children: [_jsx("label", { htmlFor: "description", className: classNames("form-field-label", styles.fieldLabel), children: "Description" }), _jsx(SolidTextarea, { "aria-describedby": "Description of your field", id: "description", name: "description", onChange: formik.handleChange, value: formik.values.description, rows: 5, cols: 30, className: classNames(styles.fieldTextarea, {
                                                                                     "p-invalid": isFormFieldValid(formik, "description"),
-                                                                                }) }), isFormFieldValid(formik, "description") && (_jsx(Message, { severity: "error", text: (_h = (_g = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _g === void 0 ? void 0 : _g.description) === null || _h === void 0 ? void 0 : _h.toString() }))] })), currentFields.includes("columnName") && (_jsxs("div", { className: "field col-12 md:col-6 mt-4", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(Checkbox, { onChange: function (e) {
-                                                                                            setShowColumnName(e.checked);
-                                                                                            if (e.checked === true) {
-                                                                                                var _a = getSingularAndPlural(formik.values.displayName), toCamelCase = _a.toCamelCase, toSnakeCase = _a.toSnakeCase, toPluralCamelCase = _a.toPluralCamelCase;
+                                                                                }) }), isFormFieldValid(formik, "description") && (_jsx("p", { className: styles.fieldError, children: (_v = (_u = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _u === void 0 ? void 0 : _u.description) === null || _v === void 0 ? void 0 : _v.toString() }))] })), currentFields.includes("columnName") && (_jsxs("div", { className: "field col-12 md:col-6 mt-2", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(SolidCheckbox, { onChange: function (event) {
+                                                                                            var checked = event.currentTarget.checked;
+                                                                                            setShowColumnName(checked);
+                                                                                            if (checked === true) {
+                                                                                                var toSnakeCase = getSingularAndPlural(formik.values.displayName).toSnakeCase;
                                                                                                 if (pathname.includes('create')) {
                                                                                                     formik.setFieldValue("columnName", toSnakeCase);
                                                                                                 }
@@ -1215,183 +1461,188 @@ var FieldMetaDataForm = function (_a) {
                                                                                             else {
                                                                                                 formik.setFieldValue("columnName", null);
                                                                                             }
-                                                                                        }, checked: showColumnName, disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id }), _jsx("label", { htmlFor: "ingredient1", className: "form-field-label", children: "Set Column Name" })] }), showColumnName &&
-                                                                                _jsxs("div", { className: "field col-12 flex-flex-column gap-2 mt-4", children: [_jsx("label", { htmlFor: "columnName", className: "form-field-label", children: "Column Name" }), _jsx(InputText, { disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id, type: "text", id: "columnName", name: "columnName", onChange: formik.handleChange, value: formik.values.columnName, className: classNames("", {
-                                                                                                "p-invalid": isFormFieldValid(formik, "columnName"),
-                                                                                            }) }), isFormFieldValid(formik, "columnName") && (_jsx(Message, { severity: "error", text: (_k = (_j = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _j === void 0 ? void 0 : _j.columnName) === null || _k === void 0 ? void 0 : _k.toString() }))] })] }))] }) }), _jsxs(TabPanel, { header: "Advanced Config", children: [((_m = (_l = formik === null || formik === void 0 ? void 0 : formik.values) === null || _l === void 0 ? void 0 : _l.type) === null || _m === void 0 ? void 0 : _m.length) > 0 && (_jsxs("div", { className: "formgrid grid", children: [currentFields.includes("length") && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2", children: [_jsx("label", { htmlFor: "length", className: "form-field-label", children: "Length" }), _jsx(InputNumber
-                                                                                // type="text"
-                                                                                , { 
-                                                                                    // type="text"
-                                                                                    id: "length", name: "length", onValueChange: formik.handleChange, value: formik.values.length, className: classNames("", {
-                                                                                        "p-invalid": isFormFieldValid(formik, "length"),
-                                                                                    }) }), isFormFieldValid(formik, "length") && (_jsx(Message, { severity: "error", text: (_p = (_o = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _o === void 0 ? void 0 : _o.length) === null || _p === void 0 ? void 0 : _p.toString() }))] })), currentFields.includes("defaultValue") && (_jsxs("div", { className: "field col-12  md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "defaultValue", className: "form-field-label", children: "Default Value" }), (selectedType.value === "shortText" || selectedType.value === "longText" || selectedType.value === "richText" || selectedType.value === "json" || selectedType.value === "password" || selectedType.value === "selectionStatic") &&
-                                                                                    _jsx(InputText, { type: "text", id: "defaultValue", name: "defaultValue", onChange: formik.handleChange, value: formik.values.defaultValue, className: classNames("", {
+                                                                                        }, checked: showColumnName, disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id }), _jsx("label", { htmlFor: "ingredient1", className: "form-field-label", children: "Set Column Name" })] }), showColumnName && (_jsxs("div", { className: "field col-12 gap-2 mt-4", children: [_jsx("label", { htmlFor: "columnName", className: classNames("form-field-label", styles.fieldLabel), children: "Column Name" }), _jsx(SolidInput, { disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id, type: "text", id: "columnName", name: "columnName", onChange: formik.handleChange, value: formik.values.columnName, className: classNames(styles.fieldInput, {
+                                                                                            "p-invalid": isFormFieldValid(formik, "columnName"),
+                                                                                        }) }), isFormFieldValid(formik, "columnName") && (_jsx("p", { className: styles.fieldError, children: (_x = (_w = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _w === void 0 ? void 0 : _w.columnName) === null || _x === void 0 ? void 0 : _x.toString() }))] }))] }))] }) }), _jsxs(TabPanel, { header: "Advanced Config", children: [((_z = (_y = formik === null || formik === void 0 ? void 0 : formik.values) === null || _y === void 0 ? void 0 : _y.type) === null || _z === void 0 ? void 0 : _z.length) > 0 && (_jsxs("div", { className: "formgrid grid", children: [currentFields.includes("length") && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2", children: [_jsx("label", { htmlFor: "length", className: classNames("form-field-label", styles.fieldLabel), children: "Length" }), _jsx("div", { className: styles.fieldNumberWrapper, children: _jsx(SolidNumberInput, { id: "length", name: "length", value: formik.values.length, onChange: function (event) { return formik.setFieldValue("length", event.value); }, className: classNames({
+                                                                                            "p-invalid": isFormFieldValid(formik, "length"),
+                                                                                        }) }) }), isFormFieldValid(formik, "length") && (_jsx("p", { className: styles.fieldError, children: (_1 = (_0 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _0 === void 0 ? void 0 : _0.length) === null || _1 === void 0 ? void 0 : _1.toString() }))] })), currentFields.includes("defaultValue") && selectedTypeValue === "boolean" &&
+                                                                            _jsxs("div", { className: "field col-12  md:col-6 flex flex-column gap-2 mt-2", children: [_jsx("label", { style: { marginBottom: "0px" }, htmlFor: "defaultValue", className: classNames("form-field-label", styles.fieldLabel), children: "Default Value" }), _jsx(SolidSegmentedControl, { value: resolveBooleanOptionValue(formik.values.defaultValue), onChange: function (value) { return formik.setFieldValue("defaultValue", value); }, options: booleanSegmentedOptions, className: classNames("", {
                                                                                             "p-invalid": isFormFieldValid(formik, "defaultValue"),
-                                                                                        }) }), (selectedType.value === "float" || selectedType.value === "decimal") &&
-                                                                                    _jsx(InputNumber, { id: "defaultValue", name: "defaultValue", minFractionDigits: 2, maxFractionDigits: 5, value: formik.values.defaultValue, onValueChange: function (e) { return formik.setFieldValue("defaultValue", e.value); }, className: classNames("", {
+                                                                                        }) })] }), currentFields.includes("defaultValue") && selectedTypeValue !== "boolean" && (_jsxs("div", { className: "field col-12  md:col-6 flex flex-column gap-2 mt-2", children: [_jsx("label", { style: { marginBottom: "0px" }, htmlFor: "defaultValue", className: classNames("form-field-label", styles.fieldLabel), children: "Default Value" }), (selectedTypeValue === "shortText" || selectedTypeValue === "longText" || selectedTypeValue === "richText" || selectedTypeValue === "json" || selectedTypeValue === "password" || selectedTypeValue === "selectionStatic") &&
+                                                                                    _jsx(SolidInput, { type: "text", id: "defaultValue", name: "defaultValue", onChange: formik.handleChange, value: formik.values.defaultValue, className: classNames(styles.fieldInput, {
                                                                                             "p-invalid": isFormFieldValid(formik, "defaultValue"),
-                                                                                        }) }), (selectedType.value === "int" || selectedType.value === "bigint") &&
-                                                                                    _jsx(InputNumber, { id: "defaultValue", name: "defaultValue", value: formik.values.defaultValue, onValueChange: function (e) { return formik.setFieldValue("defaultValue", e.value); }, className: classNames("", {
+                                                                                        }) }), (selectedTypeValue === "float" || selectedTypeValue === "decimal") &&
+                                                                                    _jsx("div", { className: styles.fieldNumberWrapper, children: _jsx(SolidNumberInput, { id: "defaultValue", name: "defaultValue", step: "0.00001", value: formik.values.defaultValue, onChange: function (event) { return formik.setFieldValue("defaultValue", event.value); }, className: classNames({
+                                                                                                "p-invalid": isFormFieldValid(formik, "defaultValue"),
+                                                                                            }) }) }), (selectedTypeValue === "int" || selectedTypeValue === "bigint") &&
+                                                                                    _jsx("div", { className: styles.fieldNumberWrapper, children: _jsx(SolidNumberInput, { id: "defaultValue", name: "defaultValue", step: "1", value: formik.values.defaultValue, onChange: function (event) { return formik.setFieldValue("defaultValue", event.value); }, className: classNames({
+                                                                                                "p-invalid": isFormFieldValid(formik, "defaultValue"),
+                                                                                            }) }) }), (selectedTypeValue === "date" || selectedTypeValue === "datetime" || selectedTypeValue === "time") && (function () {
+                                                                                    var showTimeSelect = selectedTypeValue === "datetime" || selectedTypeValue === "time";
+                                                                                    var timeOnly = selectedTypeValue === "time";
+                                                                                    var dateFormat = selectedTypeValue === "datetime"
+                                                                                        ? "yyyy-MM-dd HH:mm"
+                                                                                        : timeOnly
+                                                                                            ? "HH:mm"
+                                                                                            : "yyyy-MM-dd";
+                                                                                    var timeFormat = "HH:mm";
+                                                                                    return (_jsx(SolidDatePicker, { id: "defaultValue", selected: formik.values.defaultValue ? new Date(formik.values.defaultValue) : undefined, onChange: function (date) { return formik.setFieldValue("defaultValue", date); }, showTimeSelect: showTimeSelect, timeOnly: timeOnly, dateFormat: dateFormat, timeFormat: timeFormat, inputClassName: classNames({
                                                                                             "p-invalid": isFormFieldValid(formik, "defaultValue"),
-                                                                                        }) }), selectedType.value === "boolean" &&
-                                                                                    _jsx(SelectButton, { value: formik.values.defaultValue ? formik.values.defaultValue : "false", onChange: function (e) { return formik.setFieldValue("defaultValue", e.value); }, options: booleanOptions, className: classNames("", {
-                                                                                            "p-invalid": isFormFieldValid(formik, "defaultValue"),
-                                                                                        }) }), (selectedType.value === "date" || selectedType.value === "datetime" || selectedType.value === "time") &&
-                                                                                    _jsx(Calendar, { id: "defaultValue", name: "defaultValue", value: formik.values.defaultValue ? new Date(formik.values.defaultValue) : null, onChange: function (e) { return formik.setFieldValue("defaultValue", e.value); }, showTime: formik.values.type === "datetime", timeOnly: formik.values.type === "time", dateFormat: "yy-mm-dd", hourFormat: "24" // 24-hour format for time
-                                                                                        , className: classNames("", {
-                                                                                            "p-invalid": isFormFieldValid(formik, "defaultValue"),
-                                                                                        }) }), isFormFieldValid(formik, "defaultValue") && (_jsx(Message, { severity: "error", text: (_r = (_q = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _q === void 0 ? void 0 : _q.defaultValue) === null || _r === void 0 ? void 0 : _r.toString() }))] })), currentFields.includes("mediaTypes") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2", children: [_jsx("label", { htmlFor: "mediaTypes", className: "form-field-label", children: "Media Type" }), isFormFieldValid(formik, "mediaTypes") && (_jsx(Message, { severity: "error", text: (_t = (_s = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _s === void 0 ? void 0 : _s.mediaTypes) === null || _t === void 0 ? void 0 : _t.toString() })), _jsx(MultiSelect, { value: formik.values.mediaTypes, onChange: function (e) { return formik.setFieldValue("mediaTypes", e.value); }, options: mediaTypesOptions, optionLabel: "label", placeholder: "Select Media Types", maxSelectedLabels: 3, display: "chip", className: "" })] })), currentFields.includes("mediaMaxSizeKb") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3 md:mt-0", children: [_jsx("label", { htmlFor: "mediaMaxSizeKb", className: "form-field-label", children: "Media Max Size (Mb)" }), _jsx(InputNumber, { id: "mediaMaxSizeKb", name: "mediaMaxSizeKb", onValueChange: formik.handleChange, value: formik.values.mediaMaxSizeKb, className: classNames("", {
-                                                                                        "p-invalid": isFormFieldValid(formik, "mediaMaxSizeKb"),
-                                                                                    }) }), isFormFieldValid(formik, "mediaMaxSizeKb") && (_jsx(Message, { severity: "error", text: (_v = (_u = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _u === void 0 ? void 0 : _u.mediaMaxSizeKb) === null || _v === void 0 ? void 0 : _v.toString() }))] })), currentFields.includes("mediaStorageProviderId") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "mediaStorageProviderId", className: "form-field-label", children: "Media  Storage Provider" }), _jsx(SingleSelectAutoCompleteField, { formik: formik, isFormFieldValid: isFormFieldValid, relationField: true, fieldName: "mediaStorageProvider", fieldNameId: "mediaStorageProviderId", labelKey: "name", valueKey: "value", searchData: searchMediaStorageProvIderId, existingData: formik.values.mediaStorageProvider }, "mediaStorageProviderId"), isFormFieldValid(formik, "mediaStorageProvider") && (_jsx(Message, { severity: "error", text: (_x = (_w = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _w === void 0 ? void 0 : _w.mediaStorageProviderId) === null || _x === void 0 ? void 0 : _x.toString() }))] })), currentFields.includes("mediaEmbedded") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "mediaEmbedded", className: "form-field-label", children: "Media Embedded" }), _jsx(SelectButton, { value: formik.values.mediaEmbedded, 
-                                                                                    // onChange={formik.handleChange}
-                                                                                    onChange: function (e) {
-                                                                                        formik.setFieldValue("mediaEmbedded", e.value);
-                                                                                    }, options: booleanOptions, className: classNames("", {
+                                                                                        }) }));
+                                                                                })(), isFormFieldValid(formik, "defaultValue") && (_jsx("p", { className: styles.fieldError, children: (_3 = (_2 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _2 === void 0 ? void 0 : _2.defaultValue) === null || _3 === void 0 ? void 0 : _3.toString() }))] })), currentFields.includes("mediaTypes") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2", children: [_jsx("label", { htmlFor: "mediaTypes", className: classNames("form-field-label", styles.fieldLabel), children: "Media Type" }), _jsx("div", { className: classNames("solid-standard-autocomplete", (_b = {},
+                                                                                        _b[styles.fieldInvalidControl] = isFormFieldValid(formik, "mediaTypes"),
+                                                                                        _b)), children: _jsx(SolidAutocomplete, { multiple: true, dropdown: true, field: "label", value: mediaTypeSelectedItems, suggestions: filteredMediaTypes, completeMethod: handleMediaTypesSearch, maxVisibleChips: 3, onChange: function (_a) {
+                                                                                            var value = _a.value;
+                                                                                            var selection = Array.isArray(value) ? value : [];
+                                                                                            var normalizedValues = selection
+                                                                                                .map(function (item) {
+                                                                                                if (item && typeof item === "object") {
+                                                                                                    if (item.value)
+                                                                                                        return item.value;
+                                                                                                    if (item.label)
+                                                                                                        return item.label;
+                                                                                                }
+                                                                                                return item !== null && item !== void 0 ? item : null;
+                                                                                            })
+                                                                                                .filter(Boolean);
+                                                                                            formik.setFieldValue("mediaTypes", normalizedValues);
+                                                                                        }, placeholder: "Select media types", className: "w-full" }) }), isFormFieldValid(formik, "mediaTypes") && (_jsx("p", { className: styles.fieldError, children: (_5 = (_4 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _4 === void 0 ? void 0 : _4.mediaTypes) === null || _5 === void 0 ? void 0 : _5.toString() }))] })), currentFields.includes("mediaMaxSizeKb") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2 md:mt-0", children: [_jsx("label", { htmlFor: "mediaMaxSizeKb", className: classNames("form-field-label", styles.fieldLabel), children: "Media Max Size (Mb)" }), _jsx("div", { className: styles.fieldNumberWrapper, children: _jsx(SolidNumberInput, { id: "mediaMaxSizeKb", name: "mediaMaxSizeKb", value: formik.values.mediaMaxSizeKb, onChange: function (event) { return formik.setFieldValue("mediaMaxSizeKb", event.value); }, className: classNames({
+                                                                                            "p-invalid": isFormFieldValid(formik, "mediaMaxSizeKb"),
+                                                                                        }) }) }), isFormFieldValid(formik, "mediaMaxSizeKb") && (_jsx("p", { className: styles.fieldError, children: (_7 = (_6 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _6 === void 0 ? void 0 : _6.mediaMaxSizeKb) === null || _7 === void 0 ? void 0 : _7.toString() }))] })), currentFields.includes("mediaStorageProviderId") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "mediaStorageProviderId", className: classNames("form-field-label", styles.fieldLabel), children: "Media  Storage Provider" }), _jsx("div", { className: classNames("solid-standard-autocomplete", (_c = {},
+                                                                                        _c[styles.fieldInvalidControl] = isFormFieldValid(formik, "mediaStorageProvider"),
+                                                                                        _c)), children: _jsx(SolidAutocomplete, { value: mediaStorageProviderField.selectedItem, suggestions: mediaStorageProviderField.filteredItems, completeMethod: mediaStorageProviderField.searchItems, onChange: mediaStorageProviderField.handleChange, dropdown: true, field: "name", className: "w-full" }) }), isFormFieldValid(formik, "mediaStorageProvider") && (_jsx("p", { className: styles.fieldError, children: (_9 = (_8 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _8 === void 0 ? void 0 : _8.mediaStorageProviderId) === null || _9 === void 0 ? void 0 : _9.toString() }))] })), currentFields.includes("mediaEmbedded") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "mediaEmbedded", className: classNames("form-field-label", styles.fieldLabel), children: "Media Embedded" }), _jsx(SolidSegmentedControl, { value: resolveBooleanOptionValue(formik.values.mediaEmbedded), onChange: function (value) {
+                                                                                        formik.setFieldValue("mediaEmbedded", value);
+                                                                                    }, options: booleanSegmentedOptions, className: classNames("", {
                                                                                         "p-invalid": isFormFieldValid(formik, "mediaEmbedded"),
-                                                                                    }) }), isFormFieldValid(formik, "mediaEmbedded") && (_jsx(Message, { severity: "error", text: (_z = (_y = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _y === void 0 ? void 0 : _y.mediaEmbedded) === null || _z === void 0 ? void 0 : _z.toString() }))] })), currentFields.includes("relationType") && (_jsxs("div", { className: "field col-12 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "relationType", className: "form-field-label ", children: "Relation Type" }), _jsx(SelectButton, { value: formik.values.relationType, options: fieldDefaultMetaData.data.relationTypes, onChange: function (e) {
-                                                                                        formik.setFieldValue("relationType", e.value);
-                                                                                        if (e.value === "one-to-many") {
+                                                                                    }) }), isFormFieldValid(formik, "mediaEmbedded") && (_jsx("p", { className: styles.fieldError, children: (_11 = (_10 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _10 === void 0 ? void 0 : _10.mediaEmbedded) === null || _11 === void 0 ? void 0 : _11.toString() }))] })), currentFields.includes("relationType") && (_jsxs("div", { className: "field col-12 flex gap-2 mt-1 align-items-center", children: [_jsx("label", { style: { marginBottom: "0px" }, htmlFor: "relationType", className: classNames("form-field-label", styles.fieldLabel), children: "Relation Type" }), _jsx(SolidSegmentedControl, { value: formik.values.relationType, options: fieldDefaultMetaData.data.relationTypes, onChange: function (value) {
+                                                                                        formik.setFieldValue("relationType", value);
+                                                                                        if (value === "one-to-many") {
                                                                                             formik.setFieldValue("relationCreateInverse", true);
                                                                                         }
                                                                                     }, className: classNames("", {
                                                                                         "p-invalid": isFormFieldValid(formik, "relationType"),
-                                                                                    }), optionLabel: "label" }), isFormFieldValid(formik, "relationType") && (_jsx(Message, { severity: "error", text: (_1 = (_0 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _0 === void 0 ? void 0 : _0.relationType) === null || _1 === void 0 ? void 0 : _1.toString() }))] })), currentFields.includes("relationType") && (formik.values.relationType === "many-to-one" || formik.values.relationType === "one-to-many") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "relationCascade", className: "form-field-label", children: "Relation Cascade" }), _jsx(Dropdown, { id: "relationCascade", name: "relationCascade", value: formik.values.relationCascade, options: fieldDefaultMetaData.data.cascadeTypes, onChange: function (e) {
-                                                                                        return formik.setFieldValue("relationCascade", e.value);
+                                                                                    }) }), isFormFieldValid(formik, "relationType") && (_jsx("p", { className: styles.fieldError, children: (_13 = (_12 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _12 === void 0 ? void 0 : _12.relationType) === null || _13 === void 0 ? void 0 : _13.toString() }))] })), currentFields.includes("relationType") && (formik.values.relationType === "many-to-one" || formik.values.relationType === "one-to-many") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "relationCascade", className: classNames("form-field-label", styles.fieldLabel), children: "Relation Cascade" }), _jsx(SolidSelect, { value: formik.values.relationCascade, options: fieldDefaultMetaData.data.cascadeTypes, optionLabel: "label", optionValue: "value", onChange: function (_a) {
+                                                                                        var value = _a.value;
+                                                                                        return formik.setFieldValue("relationCascade", value);
                                                                                     }, placeholder: "Cascade", className: classNames("w-full", {
                                                                                         "p-invalid": isFormFieldValid(formik, "relationCascade"),
-                                                                                    }) }), isFormFieldValid(formik, "relationCascade") && (_jsx(Message, { severity: "error", text: (_3 = (_2 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _2 === void 0 ? void 0 : _2.relationCascade) === null || _3 === void 0 ? void 0 : _3.toString() }))] })), currentFields.includes("relationModelModuleName") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2  mt-3", children: [_jsx("label", { htmlFor: "relationModelModuleName", className: "form-field-label", children: "Co-Module Name" }), _jsx(SingleSelectAutoCompleteField, { formik: formik, isFormFieldValid: isFormFieldValid, fieldName: "relationModelModuleName", fieldNameId: "relationModelModuleName", labelKey: "name", valueKey: "name", searchData: searchRelationModelModuleNames, existingData: formik.values.relationModelModuleName, additionalAction: function (e) {
-                                                                                        formik.setFieldValue("relationCoModelSingularName", "");
-                                                                                        formik.setFieldValue("relationCoModelColumnName", "");
-                                                                                        formik.setFieldValue("relationJoinTableName", "");
-                                                                                    } }, "relationModelModuleName"), isFormFieldValid(formik, "relationModelModuleName") && (_jsx(Message, { severity: "error", text: (_5 = (_4 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _4 === void 0 ? void 0 : _4.relationModelModuleName) === null || _5 === void 0 ? void 0 : _5.toString() }))] })), currentFields.includes("relationCoModelSingularName") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "relationCoModelSingularName", className: "form-field-label", children: "Co-Model Name" }), _jsx(SingleSelectAutoCompleteField, { formik: formik, isFormFieldValid: isFormFieldValid, fieldName: "relationCoModelSingularName", fieldNameId: "relationCoModelSingularName", labelKey: "displayName", valueKey: "singularName", searchData: searchrelationCoModelSingularNames, existingData: formik.values.relationCoModelSingularName }, "relationCoModelSingularName"), isFormFieldValid(formik, "relationCoModelSingularName") && (_jsx(Message, { severity: "error", text: (_7 = (_6 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _6 === void 0 ? void 0 : _6.relationCoModelSingularName) === null || _7 === void 0 ? void 0 : _7.toString() })), formik.values.relationType === "one-to-many" &&
+                                                                                    }) }), isFormFieldValid(formik, "relationCascade") && (_jsx("p", { className: styles.fieldError, children: (_15 = (_14 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _14 === void 0 ? void 0 : _14.relationCascade) === null || _15 === void 0 ? void 0 : _15.toString() }))] })), currentFields.includes("relationModelModuleName") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2  mt-1", children: [_jsx("label", { htmlFor: "relationModelModuleName", className: classNames("form-field-label", styles.fieldLabel), children: "Co-Module Name" }), _jsx("div", { className: classNames("solid-standard-autocomplete", (_d = {},
+                                                                                        _d[styles.fieldInvalidControl] = isFormFieldValid(formik, "relationModelModuleName"),
+                                                                                        _d)), children: _jsx(SolidAutocomplete, { value: relationModelModuleField.selectedItem, suggestions: relationModelModuleField.filteredItems, completeMethod: relationModelModuleField.searchItems, onChange: relationModelModuleField.handleChange, dropdown: true, field: "name", className: "w-full" }) }), isFormFieldValid(formik, "relationModelModuleName") && (_jsx("p", { className: styles.fieldError, children: (_17 = (_16 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _16 === void 0 ? void 0 : _16.relationModelModuleName) === null || _17 === void 0 ? void 0 : _17.toString() }))] })), currentFields.includes("relationCoModelSingularName") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "relationCoModelSingularName", className: classNames("form-field-label", styles.fieldLabel), children: "Co-Model Name" }), _jsx("div", { className: classNames("solid-standard-autocomplete", (_e = {},
+                                                                                        _e[styles.fieldInvalidControl] = isFormFieldValid(formik, "relationCoModelSingularName"),
+                                                                                        _e)), children: _jsx(SolidAutocomplete, { value: relationCoModelField.selectedItem, suggestions: relationCoModelField.filteredItems, completeMethod: relationCoModelField.searchItems, onChange: relationCoModelField.handleChange, dropdown: true, field: "displayName", className: "w-full" }) }), isFormFieldValid(formik, "relationCoModelSingularName") && (_jsx("p", { className: styles.fieldError, children: (_19 = (_18 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _18 === void 0 ? void 0 : _18.relationCoModelSingularName) === null || _19 === void 0 ? void 0 : _19.toString() })), formik.values.relationType === "one-to-many" &&
                                                                                     _jsx("p", { className: "fieldSubTitle", children: "This is the child model." }), formik.values.relationType === "many-to-one" &&
-                                                                                    _jsx("p", { className: "fieldSubTitle", children: "This is the parent model." })] })), currentFields.includes("relationCoModelColumnName") && (formik.values.relationType === "many-to-many" || formik.values.relationType === "many-to-one") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "relationCoModelColumnName", className: "form-field-label", children: "Relation Co-Model Column Name" }), _jsx(InputText, { type: "text", id: "relationCoModelColumnName", name: "relationCoModelColumnName", onChange: formik.handleChange, disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id, value: formik.values.relationCoModelColumnName, className: classNames("", {
+                                                                                    _jsx("p", { className: "fieldSubTitle", children: "This is the parent model." })] })), currentFields.includes("relationCoModelColumnName") && (formik.values.relationType === "many-to-many" || formik.values.relationType === "many-to-one") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "relationCoModelColumnName", className: classNames("form-field-label", styles.fieldLabel), children: "Relation Co-Model Column Name" }), _jsx(SolidInput, { type: "text", id: "relationCoModelColumnName", name: "relationCoModelColumnName", onChange: formik.handleChange, disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id, value: formik.values.relationCoModelColumnName, className: classNames(styles.fieldInput, {
                                                                                         "p-invalid": isFormFieldValid(formik, "relationCoModelColumnName"),
-                                                                                    }) }), isFormFieldValid(formik, "relationCoModelColumnName") && (_jsx(Message, { severity: "error", text: (_9 = (_8 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _8 === void 0 ? void 0 : _8.relationCoModelColumnName) === null || _9 === void 0 ? void 0 : _9.toString() })), _jsx("p", { className: "fieldSubTitle", children: "Allows you to control the column name of the foreign key. Eg. when adding a country field to state model, by default foreign key column in the state table will be called country_id, use this field to create a foreign key with a different name. " })] })), askForUserKeyField && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "userKey", className: "form-field-label", children: "Set User Key" }), _jsx(SingleSelectAutoCompleteField, { formik: formik, isFormFieldValid: isFormFieldValid, fieldName: "userKey", fieldNameId: "userKey", labelKey: "displayName", valueKey: "name", searchData: searchUserKeyField, existingData: formik.values.userKey }, "userKey"), _jsx("p", { className: "fieldSubTitle", children: "The co-model you have selected does not have a user key specified. Use the above dropdown to choose from one of the \"unique\" fields in this co-model to be set as its userkey. User keys are required in co-models being used in many-to-one or one-to-many relations as in SolidX when a many-to-one field is rendered it uses an autocomplete dropdown, and the user key value is what is displayed as the label in the dropdown." }), isFormFieldValid(formik, "userKey") && (_jsx(Message, { severity: "error", text: (_11 = (_10 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _10 === void 0 ? void 0 : _10.userKey) === null || _11 === void 0 ? void 0 : _11.toString() }))] })), currentFields.includes("relationFieldFixedFilter") && (_jsxs("div", { className: "field col-12 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "relationFieldFixedFilter", className: "form-field-label", children: "Relation Field Fixed Filter" }), _jsx(InputTextarea, { "aria-describedby": "Fixed Filter", id: "relationFieldFixedFilter", name: "relationFieldFixedFilter", onChange: formik.handleChange, value: formik.values.relationFieldFixedFilter, rows: 5, cols: 30, className: classNames("", {
+                                                                                    }) }), isFormFieldValid(formik, "relationCoModelColumnName") && (_jsx("p", { className: styles.fieldError, children: (_21 = (_20 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _20 === void 0 ? void 0 : _20.relationCoModelColumnName) === null || _21 === void 0 ? void 0 : _21.toString() })), _jsx("p", { className: "fieldSubTitle", children: "Allows you to control the column name of the foreign key. Eg. when adding a country field to state model, by default foreign key column in the state table will be called country_id, use this field to create a foreign key with a different name. " })] })), askForUserKeyField && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "userKey", className: classNames("form-field-label", styles.fieldLabel), children: "Set User Key" }), _jsx("div", { className: classNames("solid-standard-autocomplete", (_f = {},
+                                                                                        _f[styles.fieldInvalidControl] = isFormFieldValid(formik, "userKey"),
+                                                                                        _f)), children: _jsx(SolidAutocomplete, { value: userKeyField.selectedItem, suggestions: userKeyField.filteredItems, completeMethod: userKeyField.searchItems, onChange: userKeyField.handleChange, dropdown: true, field: "displayName", className: "w-full" }) }), _jsx("p", { className: "fieldSubTitle", children: "The co-model you have selected does not have a user key specified. Use the above dropdown to choose from one of the \"unique\" fields in this co-model to be set as its userkey. User keys are required in co-models being used in many-to-one or one-to-many relations as in SolidX when a many-to-one field is rendered it uses an autocomplete dropdown, and the user key value is what is displayed as the label in the dropdown." }), isFormFieldValid(formik, "userKey") && (_jsx("p", { className: styles.fieldError, children: (_23 = (_22 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _22 === void 0 ? void 0 : _22.userKey) === null || _23 === void 0 ? void 0 : _23.toString() }))] })), currentFields.includes("relationFieldFixedFilter") && (_jsxs("div", { className: "field col-12 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "relationFieldFixedFilter", className: classNames("form-field-label", styles.fieldLabel), children: "Relation Field Fixed Filter" }), _jsx(SolidTextarea, { "aria-describedby": "Fixed Filter", id: "relationFieldFixedFilter", name: "relationFieldFixedFilter", onChange: formik.handleChange, value: formik.values.relationFieldFixedFilter, rows: 5, cols: 30, className: classNames(styles.fieldTextarea, {
                                                                                         "p-invalid": isFormFieldValid(formik, "relationFieldFixedFilter"),
-                                                                                    }) }), isFormFieldValid(formik, "relationFieldFixedFilter") && (_jsx(Message, { severity: "error", text: (_13 = (_12 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _12 === void 0 ? void 0 : _12.relationFieldFixedFilter) === null || _13 === void 0 ? void 0 : _13.toString() })), _jsx("p", { className: "fieldSubTitle", children: "Many to one fields are rendered as autocomplete dropdown on the SolidX ui. Use the fixed filter to load a pre-filtered set of records from the co-model. Please note user input entered in the autocomplete is used to apply a dynamic filter." })] })), currentFields.includes("relationCreateInverse") && (_jsxs("div", { className: "field col-12 md:col-6 flex flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "relationCreateInverse", className: "form-field-label", children: "Relation Create Inverse" }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(Checkbox, { inputId: "relationCreateInverse", name: "relationCreateInverse", checked: formik.values.relationCreateInverse, disabled: formik.values.relationType === "one-to-many" ? true : false, onChange: function (e) { return formik.setFieldValue("relationCreateInverse", e.checked); } }), _jsx("label", { htmlFor: "relationCreateInverse", className: "ml-2", children: "Create Inverse" })] }), isFormFieldValid(formik, "relationCreateInverse") && (_jsx(Message, { severity: "error", text: (_15 = (_14 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _14 === void 0 ? void 0 : _14.relationCreateInverse) === null || _15 === void 0 ? void 0 : _15.toString() }))] })), currentFields.includes("relationCoModelFieldName") && formik.values.relationCreateInverse && !formik.values.relationCoModelSingularName && (_jsx("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: _jsx(Message, { text: "Please select Co-model" }) })), currentFields.includes("relationCoModelFieldName") && formik.values.relationCreateInverse && formik.values.relationCoModelSingularName && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsxs("label", { htmlFor: "relationCoModelFieldName", className: "form-field-label", children: ["Field Name In ", formik.values.relationCoModelSingularName, " Model"] }), _jsx(InputText, { type: "text", id: "relationCoModelFieldName", name: "relationCoModelFieldName", onChange: formik.handleChange, disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id, value: formik.values.relationCoModelFieldName, className: classNames("", {
+                                                                                    }) }), isFormFieldValid(formik, "relationFieldFixedFilter") && (_jsx("p", { className: styles.fieldError, children: (_25 = (_24 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _24 === void 0 ? void 0 : _24.relationFieldFixedFilter) === null || _25 === void 0 ? void 0 : _25.toString() })), _jsx("p", { className: "fieldSubTitle", children: "Many to one fields are rendered as autocomplete dropdown on the SolidX ui. Use the fixed filter to load a pre-filtered set of records from the co-model. Please note user input entered in the autocomplete is used to apply a dynamic filter." })] })), currentFields.includes("relationCreateInverse") && (_jsxs("div", { className: "field col-12 md:col-6 flex flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "relationCreateInverse", className: classNames("form-field-label", styles.fieldLabel), children: "Relation Create Inverse" }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(SolidCheckbox, { id: "relationCreateInverse", name: "relationCreateInverse", checked: formik.values.relationCreateInverse, disabled: formik.values.relationType === "one-to-many", onChange: function (event) { return formik.setFieldValue("relationCreateInverse", event.currentTarget.checked); } }), _jsx("label", { htmlFor: "relationCreateInverse", className: classNames("ml-2", "form-field-label", styles.fieldLabel), children: "Create Inverse" })] }), isFormFieldValid(formik, "relationCreateInverse") && (_jsx("p", { className: styles.fieldError, children: (_27 = (_26 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _26 === void 0 ? void 0 : _26.relationCreateInverse) === null || _27 === void 0 ? void 0 : _27.toString() }))] })), currentFields.includes("relationCoModelFieldName") && formik.values.relationCreateInverse && !formik.values.relationCoModelSingularName && (_jsx("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: _jsx(SolidMessage, { text: "Please select Co-model" }) })), currentFields.includes("relationCoModelFieldName") && formik.values.relationCreateInverse && formik.values.relationCoModelSingularName && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsxs("label", { htmlFor: "relationCoModelFieldName", className: classNames("form-field-label", styles.fieldLabel), children: ["Field Name In ", formik.values.relationCoModelSingularName, " Model"] }), _jsx(SolidInput, { type: "text", id: "relationCoModelFieldName", name: "relationCoModelFieldName", onChange: formik.handleChange, disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id, value: formik.values.relationCoModelFieldName, className: classNames(styles.fieldInput, {
                                                                                         "p-invalid": isFormFieldValid(formik, "relationCoModelFieldName"),
                                                                                     }) }), formik.values.relationType === "one-to-many" &&
-                                                                                    _jsxs("p", { className: "fieldSubTitle", children: ["This is a field that is created in the child model. In this case a ", _jsx("span", { style: { fontWeight: "700" }, children: (_16 = formik.values.relationCoModelFieldName) !== null && _16 !== void 0 ? _16 : formik.values.relationCoModelSingularName }), " field will be created in the ", formik.values.relationCoModelSingularName, " when setting create inverse true."] }), formik.values.relationType === "many-to-one" &&
-                                                                                    _jsxs("p", { className: "fieldSubTitle", children: ["This is a field that is created in the parent model. In this case a ", _jsx("span", { style: { fontWeight: "700" }, children: (_17 = formik.values.relationCoModelFieldName) !== null && _17 !== void 0 ? _17 : "".concat(formik.values.relationCoModelSingularName, "s") }), " field will be created in the ", formik.values.relationCoModelSingularName, " when setting create inverse true."] }), formik.values.relationType === "many-to-many" &&
-                                                                                    _jsxs("p", { className: "fieldSubTitle", children: ["In this case a ", formik.values.relationCoModelFieldName, " field will be created in the ", _jsx("span", { style: { fontWeight: "700" }, children: (_18 = formik.values.relationCoModelSingularName) !== null && _18 !== void 0 ? _18 : '{{}}' }), " when setting create inverse true."] }), isFormFieldValid(formik, "relationCoModelFieldName") && (_jsx(Message, { severity: "error", text: (_20 = (_19 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _19 === void 0 ? void 0 : _19.relationCoModelFieldName) === null || _20 === void 0 ? void 0 : _20.toString() }))] })), currentFields.includes("relationJoinTableName") && formik.values.relationType === "many-to-many" && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "relationJoinTableName", className: "form-field-label", children: "Relation Join Table Name" }), _jsx(InputText, { type: "text", id: "relationJoinTableName", name: "relationJoinTableName", onChange: formik.handleChange, disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id, value: formik.values.relationJoinTableName, className: classNames("", {
+                                                                                    _jsxs("p", { className: "fieldSubTitle", children: ["This is a field that is created in the child model. In this case a ", _jsx("span", { style: { fontWeight: "700" }, children: (_28 = formik.values.relationCoModelFieldName) !== null && _28 !== void 0 ? _28 : formik.values.relationCoModelSingularName }), " field will be created in the ", formik.values.relationCoModelSingularName, " when setting create inverse true."] }), formik.values.relationType === "many-to-one" &&
+                                                                                    _jsxs("p", { className: "fieldSubTitle", children: ["This is a field that is created in the parent model. In this case a ", _jsx("span", { style: { fontWeight: "700" }, children: (_29 = formik.values.relationCoModelFieldName) !== null && _29 !== void 0 ? _29 : "".concat(formik.values.relationCoModelSingularName, "s") }), " field will be created in the ", formik.values.relationCoModelSingularName, " when setting create inverse true."] }), formik.values.relationType === "many-to-many" &&
+                                                                                    _jsxs("p", { className: "fieldSubTitle", children: ["In this case a ", formik.values.relationCoModelFieldName, " field will be created in the ", _jsx("span", { style: { fontWeight: "700" }, children: (_30 = formik.values.relationCoModelSingularName) !== null && _30 !== void 0 ? _30 : '{{}}' }), " when setting create inverse true."] }), isFormFieldValid(formik, "relationCoModelFieldName") && (_jsx("p", { className: styles.fieldError, children: (_32 = (_31 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _31 === void 0 ? void 0 : _31.relationCoModelFieldName) === null || _32 === void 0 ? void 0 : _32.toString() }))] })), currentFields.includes("relationJoinTableName") && formik.values.relationType === "many-to-many" && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "relationJoinTableName", className: classNames("form-field-label", styles.fieldLabel), children: "Relation Join Table Name" }), _jsx(SolidInput, { type: "text", id: "relationJoinTableName", name: "relationJoinTableName", onChange: formik.handleChange, disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id, value: formik.values.relationJoinTableName, className: classNames(styles.fieldInput, {
                                                                                         "p-invalid": isFormFieldValid(formik, "relationJoinTableName"),
-                                                                                    }) }), isFormFieldValid(formik, "relationJoinTableName") && (_jsx(Message, { severity: "error", text: (_22 = (_21 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _21 === void 0 ? void 0 : _21.relationJoinTableName) === null || _22 === void 0 ? void 0 : _22.toString() }))] })), currentFields.includes("selectionDynamicProvider") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "selectionDynamicProvider", className: "form-field-label", children: "Selection Dynamic Provider" }), _jsx(SingleSelectAutoCompleteField, { formik: formik, isFormFieldValid: isFormFieldValid, 
-                                                                                    // relationField={false}
-                                                                                    fieldName: "selectionDynamicProvider", fieldNameId: null, labelKey: "label", valueKey: "value", searchData: searchSelectionDynamicProvider, existingData: formik.values.selectionDynamicProvider, additionalAction: function (e) { return setMarkdownText(e.target.value.help); } }, "selectionDynamicProvider"), isFormFieldValid(formik, "selectionDynamicProvider") && (_jsx(Message, { severity: "error", text: (_24 = (_23 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _23 === void 0 ? void 0 : _23.selectionDynamicProvider) === null || _24 === void 0 ? void 0 : _24.toString() }))] })), currentFields.includes("selectionValueType") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "selectionValueType", className: "form-field-label", children: "Select Value Type" }), _jsx(Dropdown, { id: "selectionValueType", name: "selectionValueType", value: formik.values.selectionValueType, options: selctionValueTypes, onChange: function (e) {
-                                                                                        return formik.setFieldValue("selectionValueType", e.value);
-                                                                                    }, placeholder: "Select Value Type", className: classNames("", {
+                                                                                    }) }), isFormFieldValid(formik, "relationJoinTableName") && (_jsx("p", { className: styles.fieldError, children: (_34 = (_33 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _33 === void 0 ? void 0 : _33.relationJoinTableName) === null || _34 === void 0 ? void 0 : _34.toString() }))] })), currentFields.includes("selectionDynamicProvider") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "selectionDynamicProvider", className: classNames("form-field-label", styles.fieldLabel), children: "Selection Dynamic Provider" }), _jsx("div", { className: classNames("solid-standard-autocomplete", (_g = {},
+                                                                                        _g[styles.fieldInvalidControl] = isFormFieldValid(formik, "selectionDynamicProvider"),
+                                                                                        _g)), children: _jsx(SolidAutocomplete, { value: selectionDynamicProviderField.selectedItem, suggestions: selectionDynamicProviderField.filteredItems, completeMethod: selectionDynamicProviderField.searchItems, onChange: selectionDynamicProviderField.handleChange, dropdown: true, field: "label", className: "w-full" }) }), isFormFieldValid(formik, "selectionDynamicProvider") && (_jsx("p", { className: styles.fieldError, children: (_36 = (_35 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _35 === void 0 ? void 0 : _35.selectionDynamicProvider) === null || _36 === void 0 ? void 0 : _36.toString() }))] })), currentFields.includes("selectionValueType") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "selectionValueType", className: classNames("form-field-label", styles.fieldLabel), children: "Select Value Type" }), _jsx(SolidSelect, { value: formik.values.selectionValueType, options: selctionValueTypes, optionLabel: "label", optionValue: "value", onChange: function (_a) {
+                                                                                        var value = _a.value;
+                                                                                        return formik.setFieldValue("selectionValueType", value);
+                                                                                    }, placeholder: "Select Value Type", className: classNames("w-full", {
                                                                                         "p-invalid": isFormFieldValid(formik, "selectionValueType"),
-                                                                                    }) }), isFormFieldValid(formik, "selectionValueType") && (_jsx(Message, { severity: "error", text: (_26 = (_25 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _25 === void 0 ? void 0 : _25.selectionValueType) === null || _26 === void 0 ? void 0 : _26.toString() }))] })), currentFields.includes("selectionStaticValues") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "selectionStaticValues", className: "form-field-label", children: "Selection Static Values" }), formik.values.selectionStaticValues.map(function (enumValue, index) { return (_jsx(SelectionStaticValues, { enumValue: enumValue, onUpdate: function (updatedString) { return updateEnumValues(index, updatedString); }, onDelete: function () { return deleteEnumValue(index); }, onAdd: addEnumValue }, index)); }), isFormFieldValid(formik, "selectionStaticValues") && (_jsx(Message, { severity: "error", text: (_28 = (_27 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _27 === void 0 ? void 0 : _27.selectionStaticValues) === null || _28 === void 0 ? void 0 : _28.toString() }))] })), currentFields.includes("computedFieldValueType") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "computedFieldValueType", className: "form-field-label", children: "Computed Field Value Type" }), _jsx(AutoComplete, { value: selectedComputedFieldValueType, invalid: isFormFieldValid(formik, "computedFieldValueType"), suggestions: filteredComputedFieldValueTypes, completeMethod: searchComputedFieldValueType, 
-                                                                                    // virtualScrollerOptions={{ itemSize: 38 }}
-                                                                                    virtualScrollerOptions: getVirtualScrollerOptions({
-                                                                                        itemsLength: filteredComputedFieldValueTypes.length,
-                                                                                    }), field: "label", dropdown: true, className: "solid-standard-autocomplete", onChange: function (e) {
+                                                                                    }) }), isFormFieldValid(formik, "selectionValueType") && (_jsx("p", { className: styles.fieldError, children: (_38 = (_37 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _37 === void 0 ? void 0 : _37.selectionValueType) === null || _38 === void 0 ? void 0 : _38.toString() }))] })), currentFields.includes("selectionStaticValues") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "selectionStaticValues", className: classNames("form-field-label", styles.fieldLabel), children: "Selection Static Values" }), formik.values.selectionStaticValues.map(function (enumValue, index) { return (_jsx(SelectionStaticValues, { enumValue: enumValue, onUpdate: function (updatedString) { return updateEnumValues(index, updatedString); }, onDelete: function () { return deleteEnumValue(index); }, onAdd: addEnumValue }, index)); }), isFormFieldValid(formik, "selectionStaticValues") && (_jsx("p", { className: styles.fieldError, children: (_40 = (_39 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _39 === void 0 ? void 0 : _39.selectionStaticValues) === null || _40 === void 0 ? void 0 : _40.toString() }))] })), currentFields.includes("computedFieldValueType") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "computedFieldValueType", className: classNames("form-field-label", styles.fieldLabel), children: "Computed Field Value Type" }), _jsx(SolidAutocomplete, { value: selectedComputedFieldValueType, suggestions: filteredComputedFieldValueTypes, completeMethod: searchComputedFieldValueType, field: "label", dropdown: true, className: classNames("solid-standard-autocomplete", (_h = {},
+                                                                                        _h[styles.fieldInvalidControl] = isFormFieldValid(formik, "computedFieldValueType"),
+                                                                                        _h)), onChange: function (e) {
                                                                                         setSelectedComputedFieldValueType(e.value);
                                                                                         formik.setFieldValue("computedFieldValueType", e.value.value);
-                                                                                    } }), isFormFieldValid(formik, "computedFieldValueType") && (_jsx(Message, { severity: "error", text: (_30 = (_29 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _29 === void 0 ? void 0 : _29.computedFieldValueType) === null || _30 === void 0 ? void 0 : _30.toString() }))] })), currentFields.includes("computedFieldValueProvider") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "computedFieldValueProvider", className: "form-field-label", children: "Computed Field Provider" }), _jsx(SingleSelectAutoCompleteField, { formik: formik, isFormFieldValid: isFormFieldValid, 
-                                                                                    // relationField={false}
-                                                                                    fieldName: "computedFieldValueProvider", fieldNameId: null, labelKey: "label", valueKey: "value", searchData: searchComputedProvider, existingData: formik.values.computedFieldValueProvider, additionalAction: function (e) { return setMarkdownText(e.target.value.help); } }, "computedFieldValueProvider"), isFormFieldValid(formik, "computedFieldValueProvider") && (_jsx(Message, { severity: "error", text: (_32 = (_31 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _31 === void 0 ? void 0 : _31.computedFieldValueProvider) === null || _32 === void 0 ? void 0 : _32.toString() }))] })), currentFields.includes("computedFieldTriggerConfig") && (_jsxs("div", { className: "field col-12 flex-flex-column gap-2 mt-3", children: [(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.computedFieldTriggerConfig) === null
+                                                                                    } }), isFormFieldValid(formik, "computedFieldValueType") && (_jsx("p", { className: styles.fieldError, children: (_42 = (_41 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _41 === void 0 ? void 0 : _41.computedFieldValueType) === null || _42 === void 0 ? void 0 : _42.toString() }))] })), currentFields.includes("computedFieldValueProvider") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "computedFieldValueProvider", className: classNames("form-field-label", styles.fieldLabel), children: "Computed Field Provider" }), _jsx("div", { className: classNames("solid-standard-autocomplete", (_j = {},
+                                                                                        _j[styles.fieldInvalidControl] = isFormFieldValid(formik, "computedFieldValueProvider"),
+                                                                                        _j)), children: _jsx(SolidAutocomplete, { value: computedFieldValueProviderField.selectedItem, suggestions: computedFieldValueProviderField.filteredItems, completeMethod: computedFieldValueProviderField.searchItems, onChange: computedFieldValueProviderField.handleChange, dropdown: true, field: "label", className: "w-full" }) }), isFormFieldValid(formik, "computedFieldValueProvider") && (_jsx("p", { className: styles.fieldError, children: (_44 = (_43 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _43 === void 0 ? void 0 : _43.computedFieldValueProvider) === null || _44 === void 0 ? void 0 : _44.toString() }))] })), currentFields.includes("computedFieldTriggerConfig") && (_jsxs("div", { className: "field col-12 flex-flex-column gap-2 mt-2", children: [(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.computedFieldTriggerConfig) === null
                                                                                     &&
-                                                                                        _jsx("div", { className: "mb-3", children: _jsx(Message, { severity: "error", text: "You seem to be using an old configuration of ComputedFieldProvider. Please change your current computed field provider i.e ".concat(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.computedFieldValueProvider, " to implement IEntityComputedFieldProvider before continuing.") }) }), _jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx("label", { htmlFor: "computedFieldTriggerConfig", className: "form-field-label", children: "Computed Field Trigger Config" }), _jsx("div", { children: _jsx(Button, { icon: "pi pi-plus", size: "small", onClick: handleAdd, type: "button", className: "ml-2" }) })] }), formik.values.computedFieldTriggerConfig.map(function (row, index) {
+                                                                                        _jsx("div", { className: "mb-3", children: _jsx(SolidMessage, { severity: "error", text: "You seem to be using an old configuration of ComputedFieldProvider. Please change your current computed field provider i.e ".concat(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.computedFieldValueProvider, " to implement IEntityComputedFieldProvider before continuing.") }) }), _jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx("label", { htmlFor: "computedFieldTriggerConfig", className: classNames("form-field-label", styles.fieldLabel), children: "Computed Field Trigger Config" }), _jsx("div", { children: _jsx(SolidButton, { icon: "si si-plus", size: "small", onClick: handleAdd, type: "button", className: "ml-2" }) })] }), formik.values.computedFieldTriggerConfig.map(function (row, index) {
                                                                                     var _a;
                                                                                     return (_jsx(SelectComputedFieldTriggerValues, { index: index, row: row, onChange: handleChange, onDelete: handleDelete, isLastRow: index === formik.values.computedFieldTriggerConfig.length - 1, disableDelete: formik.values.computedFieldTriggerConfig.length === 1, formik: formik, isFormFieldValid: isFormFieldValid, searchModuleName: searchModuleName, searchModelName: computedFieldSearchHandlers[index], modelMetaData: modelMetaData, errors: (_a = formik.errors.computedFieldTriggerConfig) === null || _a === void 0 ? void 0 : _a[index] }, index));
-                                                                                }), typeof formik.errors.computedFieldTriggerConfig === 'string' && (_jsx(Message, { severity: "error", text: formik.errors.computedFieldTriggerConfig }))] })), currentFields.includes("selectionDynamicProviderCtxt") && (
-                                                                        // {/* {markdownText &&
-                                                                        //       <div className="md:col-12 sm:col-12">
-                                                                        //         <div className="field col-6 flex-flex-column gap-2">
-                                                                        //           <label htmlFor="name" className="form-field-label">
-                                                                        //             Markdown
-                                                                        //           </label>
-                                                                        //           <MarkdownViewer data={markdownText}></MarkdownViewer>
-                                                                        //         </div>
-                                                                        //       </div>
-                                                                        //     } */}
-                                                                        _jsxs("div", { className: "field col-12 flex-flex-column gap-2 mt-4", children: [_jsx("label", { htmlFor: "selectionDynamicProviderCtxt", className: "form-field-label", children: "Selection Dynamic Provider Context" }), _jsx(CodeEditor, { formik: formik, field: "selectionDynamicProviderCtxt" }), _jsx("div", { className: " form-field-label  mt-4", children: markdownText }), isFormFieldValid(formik, "selectionDynamicProviderCtxt") && (_jsx(Message, { severity: "error", text: (_34 = (_33 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _33 === void 0 ? void 0 : _33.selectionDynamicProviderCtxt) === null || _34 === void 0 ? void 0 : _34.toString() }))] })
-                                                                        // {/* {currentFields.includes("markdown") && ( */}
-                                                                        ), currentFields.includes("computedFieldValueProviderCtxt") && (_jsxs("div", { className: "field col-12 flex-flex-column gap-2 mt-4", children: [_jsx("label", { htmlFor: "computedFieldValueProviderCtxt", className: "form-field-label", children: "Computed Field Value Provider Context" }), _jsx(CodeEditor, { formik: formik, field: "computedFieldValueProviderCtxt" }), _jsx("div", { className: "form-field-label mt-4", children: markdownText }), isFormFieldValid(formik, "computedFieldValueProviderCtxt") && (_jsx(Message, { severity: "error", text: (_36 = (_35 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _35 === void 0 ? void 0 : _35.computedFieldValueProviderCtxt) === null || _36 === void 0 ? void 0 : _36.toString() }))] }))] })), (currentFields.includes("regexPattern") || currentFields.includes("min") || currentFields.includes("max") || currentFields.includes("ormType")) && ormTypeOptions && selectedType.value !== 'relation' &&
-                                                                    _jsxs(_Fragment, { children: [_jsx("p", { className: "form-wrapper-heading text-base mt-3", children: "Validations" }), _jsxs("div", { className: "formgrid grid", children: [(currentFields.includes("regexPattern") && selectedType.value === "password") &&
-                                                                                        _jsx(_Fragment, { children: _jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "regexPattern", className: "form-field-label", children: "Password Policy" }), _jsx(Dropdown, { value: selectedPasswordPolicy, onChange: function (e) {
-                                                                                                            setSelectedPasswordPolicy(e.value);
-                                                                                                            if (e.value !== "custom") {
-                                                                                                                formik.setFieldValue('regexPattern', e.value);
-                                                                                                            }
-                                                                                                        }, options: passwordPolicyOptions, optionLabel: "label", placeholder: "Select a Password Policy", 
-                                                                                                        // className="w-full md:w-14rem"
-                                                                                                        className: "", panelClassName: "password-policy-dropdown-panel", checkmark: true, highlightOnSelect: false })] }) }), currentFields.includes("regexPattern") && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "regexPattern", className: "form-field-label", children: "Regex Pattern" }), _jsx(InputText, { type: "text", id: "regexPattern", name: "regexPattern", onChange: formik.handleChange, value: formik.values.regexPattern, className: classNames("", {
-                                                                                                            "p-invalid": isFormFieldValid(formik, "regexPattern"),
-                                                                                                        }) }), isFormFieldValid(formik, "regexPattern") && (_jsx(Message, { severity: "error", text: (_38 = (_37 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _37 === void 0 ? void 0 : _37.regexPattern) === null || _38 === void 0 ? void 0 : _38.toString() }))] }), currentFields.includes("regexPattern") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3 mb-3 md:mb-3", children: [_jsx("label", { htmlFor: "regexPatternNotMatchingErrorMsg", className: "form-field-label", children: "Regex Pattern Not Matching Error Msg" }), _jsx(InputText, { type: "text", id: "regexPatternNotMatchingErrorMsg", name: "regexPatternNotMatchingErrorMsg", onChange: formik.handleChange, value: formik.values.regexPatternNotMatchingErrorMsg, className: classNames("", {
-                                                                                                            "p-invalid": isFormFieldValid(formik, "regexPatternNotMatchingErrorMsg"),
-                                                                                                        }) }), isFormFieldValid(formik, "regexPatternNotMatchingErrorMsg") && (_jsx(Message, { severity: "error", text: (_40 = (_39 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _39 === void 0 ? void 0 : _39.regexPatternNotMatchingErrorMsg) === null || _40 === void 0 ? void 0 : _40.toString() }))] }))] })), (currentFields.includes("min") || currentFields.includes("max")) &&
-                                                                                        _jsxs(_Fragment, { children: [currentFields.includes("min") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2 md:mt-3", children: [_jsxs("label", { htmlFor: "min", className: "form-field-label", children: ["Min ", (selectedType.value !== "int" && selectedType.value !== "decimal") && "(Characters Allowed)"] }), (selectedType.value === "int" ||
-                                                                                                            selectedType.value === "decimal" ||
-                                                                                                            selectedType.value === "shortText" ||
-                                                                                                            selectedType.value === "decimal" ||
-                                                                                                            selectedType.value === "longText" ||
-                                                                                                            selectedType.value === "richText" ||
-                                                                                                            selectedType.value === "password" ||
-                                                                                                            selectedType.value === "json") &&
-                                                                                                            _jsx(InputNumber, { id: "min", name: "min", onValueChange: formik.handleChange, value: formik.values.min, className: classNames("", {
-                                                                                                                    "p-invalid": isFormFieldValid(formik, "min"),
-                                                                                                                }), disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id }), isFormFieldValid(formik, "min") && (_jsx(Message, { severity: "error", text: (_42 = (_41 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _41 === void 0 ? void 0 : _41.min) === null || _42 === void 0 ? void 0 : _42.toString() }))] })), currentFields.includes("max") && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsxs("label", { htmlFor: "max", className: "form-field-label", children: ["Max ", (selectedType.value !== "int" &&
-                                                                                                                    selectedType.value !== "decimal") && "(Characters allowed)"] }), (selectedType.value === "int" ||
-                                                                                                            selectedType.value === "decimal" ||
-                                                                                                            selectedType.value === "shortText" ||
-                                                                                                            selectedType.value === "decimal" ||
-                                                                                                            selectedType.value === "longText" ||
-                                                                                                            selectedType.value === "richText" ||
-                                                                                                            selectedType.value === "password" ||
-                                                                                                            selectedType.value === "json") &&
-                                                                                                            _jsx(InputNumber, { id: "max", name: "max", onValueChange: formik.handleChange, value: formik.values.max, className: classNames("", {
-                                                                                                                    "p-invalid": isFormFieldValid(formik, "max"),
-                                                                                                                }), disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id }), isFormFieldValid(formik, "max") && (_jsx(Message, { severity: "error", text: (_44 = (_43 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _43 === void 0 ? void 0 : _43.max) === null || _44 === void 0 ? void 0 : _44.toString() }))] }))] }), currentFields.includes("ormType") && (_jsx("div", { className: "col-12", children: ormTypeOptions && ormTypeOptions.length > 1 &&
-                                                                                            _jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "ormType", className: "form-field-label", children: "Type" }), _jsx("div", { className: "ormTypeflex", children: ormTypeOptions && ormTypeOptions.map(function (ormType) {
-                                                                                                            return (_jsx(_Fragment, { children: _jsxs("div", { className: "mr-3 align-items-center", children: [_jsx(RadioButton, { inputId: ormType.label, name: "ormType", value: ormType.label, onChange: function (e) {
-                                                                                                                                formik.setFieldValue("ormType", e.value);
-                                                                                                                                setSelectedOrmType(e.value);
-                                                                                                                            }, checked: selectedOrmType === ormType.label }), _jsxs("label", { htmlFor: ormType.label, className: "ml-2", children: [ormType.label, _jsx("br", {}), _jsx("span", { className: "ml-4 fieldSubTitle", children: ormType.description })] })] }, ormType.key) }));
-                                                                                                        }) }), isFormFieldValid(formik, "ormType") && (_jsx(Message, { severity: "error", text: (_46 = (_45 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _45 === void 0 ? void 0 : _45.ormType) === null || _46 === void 0 ? void 0 : _46.toString() }))] }) }))] })] }), (formik.values.relationType !== "many-to-many" && formik.values.relationType !== "one-to-many") && _jsx("p", { className: "form-wrapper-heading text-base mt-3", children: "Settings" }), _jsxs("div", { className: "formgrid grid mt-3 md:mt-0", children: [currentFields.includes("required") && (formik.values.relationType !== "many-to-many" && formik.values.relationType !== "one-to-many") && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-3", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(Checkbox, { name: "required", onChange: function (e) {
+                                                                                }), typeof formik.errors.computedFieldTriggerConfig === 'string' && (_jsx("p", { className: styles.fieldError, children: formik.errors.computedFieldTriggerConfig }))] })), currentFields.includes("selectionDynamicProviderCtxt") && (_jsxs("div", { className: "field col-12 flex-flex-column gap-2 mt-4", children: [_jsx("label", { htmlFor: "selectionDynamicProviderCtxt", className: classNames("form-field-label", styles.fieldLabel), children: "Selection Dynamic Provider Context" }), _jsx(SolidCodeEditor, { value: (_45 = formik.values.selectionDynamicProviderCtxt) !== null && _45 !== void 0 ? _45 : "", onChange: function (value) {
+                                                                                        formik.setFieldValue("selectionDynamicProviderCtxt", value !== null && value !== void 0 ? value : "");
+                                                                                    }, language: "json", height: "300px" }), _jsx("div", { className: " form-field-label  mt-2", children: markdownText }), isFormFieldValid(formik, "selectionDynamicProviderCtxt") && (_jsx("p", { className: styles.fieldError, children: (_47 = (_46 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _46 === void 0 ? void 0 : _46.selectionDynamicProviderCtxt) === null || _47 === void 0 ? void 0 : _47.toString() }))] })), currentFields.includes("computedFieldValueProviderCtxt") && (_jsxs("div", { className: "field col-12 flex-flex-column gap-2 mt-4", children: [_jsx("label", { htmlFor: "computedFieldValueProviderCtxt", className: classNames("form-field-label", styles.fieldLabel), children: "Computed Field Value Provider Context" }), _jsx(SolidCodeEditor, { value: (_48 = formik.values.computedFieldValueProviderCtxt) !== null && _48 !== void 0 ? _48 : "", onChange: function (value) {
+                                                                                        formik.setFieldValue("computedFieldValueProviderCtxt", value !== null && value !== void 0 ? value : "");
+                                                                                    }, language: "json", height: "300px" }), _jsx("div", { className: "form-field-label mt-4", children: markdownText }), isFormFieldValid(formik, "computedFieldValueProviderCtxt") && (_jsx("p", { className: styles.fieldError, children: (_50 = (_49 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _49 === void 0 ? void 0 : _49.computedFieldValueProviderCtxt) === null || _50 === void 0 ? void 0 : _50.toString() }))] }))] })), showValidationSection && (_jsxs(_Fragment, { children: [_jsx("p", { className: "form-wrapper-heading", children: "Validations" }), _jsxs("div", { className: "formgrid grid", children: [(showRegexFields && selectedTypeValue === "password") &&
+                                                                                    _jsx(_Fragment, { children: _jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "regexPattern", className: classNames("form-field-label", styles.fieldLabel), children: "Password Policy" }), _jsx(SolidSelect, { value: selectedPasswordPolicy, options: passwordPolicyOptions, optionLabel: "label", optionValue: "value", onChange: function (_a) {
+                                                                                                        var value = _a.value;
+                                                                                                        setSelectedPasswordPolicy(value);
+                                                                                                        if (value !== "custom") {
+                                                                                                            formik.setFieldValue("regexPattern", value);
+                                                                                                        }
+                                                                                                    }, placeholder: "Select a Password Policy", className: "w-full" })] }) }), showRegexFields && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "regexPattern", className: classNames("form-field-label", styles.fieldLabel), children: "Regex Pattern" }), _jsx(SolidInput, { type: "text", id: "regexPattern", name: "regexPattern", onChange: formik.handleChange, value: formik.values.regexPattern, className: classNames(styles.fieldInput, {
+                                                                                                        "p-invalid": isFormFieldValid(formik, "regexPattern"),
+                                                                                                    }) }), isFormFieldValid(formik, "regexPattern") && (_jsx("p", { className: styles.fieldError, children: (_52 = (_51 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _51 === void 0 ? void 0 : _51.regexPattern) === null || _52 === void 0 ? void 0 : _52.toString() }))] }), showRegexFields && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2 mb-3 md:mb-3", children: [_jsx("label", { htmlFor: "regexPatternNotMatchingErrorMsg", className: classNames("form-field-label", styles.fieldLabel), children: "Regex Pattern Not Matching Error Msg" }), _jsx(SolidInput, { type: "text", id: "regexPatternNotMatchingErrorMsg", name: "regexPatternNotMatchingErrorMsg", onChange: formik.handleChange, value: formik.values.regexPatternNotMatchingErrorMsg, className: classNames(styles.fieldInput, {
+                                                                                                        "p-invalid": isFormFieldValid(formik, "regexPatternNotMatchingErrorMsg"),
+                                                                                                    }) }), isFormFieldValid(formik, "regexPatternNotMatchingErrorMsg") && (_jsx("p", { className: styles.fieldError, children: (_54 = (_53 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _53 === void 0 ? void 0 : _53.regexPatternNotMatchingErrorMsg) === null || _54 === void 0 ? void 0 : _54.toString() }))] }))] })), (showMinFields || showMaxFields) &&
+                                                                                    _jsxs(_Fragment, { children: [showMinFields && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsxs("label", { htmlFor: "min", className: classNames("form-field-label", styles.fieldLabel), children: ["Min ", (selectedTypeValue !== "int" && selectedTypeValue !== "decimal") && "(Characters Allowed)"] }), _jsx("div", { className: styles.fieldNumberWrapper, children: _jsx(SolidNumberInput, { id: "min", name: "min", step: "0.00001", value: formik.values.min, onChange: function (event) { return formik.setFieldValue("min", event.value); }, className: classNames({
+                                                                                                                "p-invalid": isFormFieldValid(formik, "min"),
+                                                                                                            }), disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id }) }), isFormFieldValid(formik, "min") && (_jsx("p", { className: styles.fieldError, children: (_56 = (_55 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _55 === void 0 ? void 0 : _55.min) === null || _56 === void 0 ? void 0 : _56.toString() }))] })), showMaxFields && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsxs("label", { htmlFor: "max", className: classNames("form-field-label", styles.fieldLabel), children: ["Max ", (selectedTypeValue !== "int" &&
+                                                                                                                selectedTypeValue !== "decimal") && "(Characters allowed)"] }), _jsx("div", { className: styles.fieldNumberWrapper, children: _jsx(SolidNumberInput, { id: "max", name: "max", step: "0.00001", value: formik.values.max, onChange: function (event) { return formik.setFieldValue("max", event.value); }, className: classNames({
+                                                                                                                "p-invalid": isFormFieldValid(formik, "max"),
+                                                                                                            }), disabled: fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id }) }), isFormFieldValid(formik, "max") && (_jsx("p", { className: styles.fieldError, children: (_58 = (_57 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _57 === void 0 ? void 0 : _57.max) === null || _58 === void 0 ? void 0 : _58.toString() }))] }))] }), showOrmOptions && (_jsxs("div", { className: "field col-12 md:col-6 flex-flex-column gap-2 mt-2", children: [_jsx("label", { htmlFor: "ormType", className: classNames("form-field-label", styles.fieldLabel), children: "Type" }), _jsx(SolidRadioGroup, { name: "ormType", value: selectedOrmType, onChange: function (value) {
+                                                                                                formik.setFieldValue("ormType", value);
+                                                                                                setSelectedOrmType(value);
+                                                                                            }, options: (ormTypeOptions || []).map(function (ormType) { return ({
+                                                                                                value: ormType.label,
+                                                                                                label: (_jsxs("span", { className: classNames("ml-2", "form-field-label"), children: [ormType.label, _jsx("br", {}), _jsx("span", { className: "fieldSubTitle mt-0", children: "(".concat(ormType.description, ")") })] })),
+                                                                                            }); }), className: "ormTypeflex", itemClassName: "mr-3 align-items-center" }), isFormFieldValid(formik, "ormType") && (_jsx("p", { className: styles.fieldError, children: (_60 = (_59 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _59 === void 0 ? void 0 : _59.ormType) === null || _60 === void 0 ? void 0 : _60.toString() }))] }))] })] })), (formik.values.relationType !== "many-to-many" && formik.values.relationType !== "one-to-many") && _jsx("p", { className: "form-wrapper-heading", children: "Settings" }), _jsxs("div", { className: "formgrid grid mt-1 md:mt-0", children: [currentFields.includes("required") && (formik.values.relationType !== "many-to-many" && formik.values.relationType !== "one-to-many") && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-2", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(SolidCheckbox, { id: "required", name: "required", onChange: function (event) {
                                                                                                 if (!formik.values.isPrimaryKey && !formik.values.unique) {
-                                                                                                    formik.setFieldValue("required", e.checked);
+                                                                                                    formik.setFieldValue("required", event.currentTarget.checked);
                                                                                                 }
-                                                                                            }, checked: formik.values.required, disabled: formik.values.isPrimaryKey || formik.values.unique }), _jsxs("label", { htmlFor: "ingredient1", className: "form-field-label ml-2", children: ["Required ", formik.values.isPrimaryKey && "(Auto-enabled for Primary Key)", !formik.values.isPrimaryKey && formik.values.unique && "(Auto-enabled for Unique)"] })] }), _jsx("p", { className: "text-xs mt-2", children: "You won't be able to create an entry if this field is empty" }), isFormFieldValid(formik, "required") && (_jsx(Message, { severity: "error", text: (_48 = (_47 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _47 === void 0 ? void 0 : _47.required) === null || _48 === void 0 ? void 0 : _48.toString() }))] })), currentFields.includes("unique") && selectedType.value !== 'relation' && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(Checkbox, { name: "unique", onChange: function (e) {
+                                                                                            }, checked: formik.values.required, disabled: formik.values.isPrimaryKey || formik.values.unique }), _jsxs("label", { htmlFor: "required", className: classNames("form-field-label", styles.fieldLabel, "ml-2"), children: ["Required ", formik.values.isPrimaryKey && "(Auto-enabled for Primary Key)", !formik.values.isPrimaryKey && formik.values.unique && "(Auto-enabled for Unique)"] })] }), _jsx("p", { className: "text-xs mt-2", children: "You won't be able to create an entry if this field is empty" }), isFormFieldValid(formik, "required") && (_jsx("p", { className: styles.fieldError, children: (_62 = (_61 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _61 === void 0 ? void 0 : _61.required) === null || _62 === void 0 ? void 0 : _62.toString() }))] })), currentFields.includes("unique") && selectedTypeValue !== 'relation' && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(SolidCheckbox, { id: "unique", name: "unique", onChange: function (event) {
                                                                                                 // Prevent unchecking if isPrimaryKey is true
                                                                                                 if (!formik.values.isPrimaryKey) {
-                                                                                                    formik.setFieldValue("unique", e.checked);
+                                                                                                    var nextValue = event.currentTarget.checked;
+                                                                                                    formik.setFieldValue("unique", nextValue);
                                                                                                     formik.setFieldValue("isUserKey", false);
                                                                                                     // Auto-enable required when unique is checked
-                                                                                                    if (e.checked) {
+                                                                                                    if (nextValue) {
                                                                                                         formik.setFieldValue("required", true);
                                                                                                     }
                                                                                                     else {
                                                                                                         formik.setFieldValue("required", false);
                                                                                                     }
                                                                                                 }
-                                                                                            }, checked: formik.values.unique, disabled: formik.values.isPrimaryKey }), _jsxs("label", { htmlFor: "ingredient1", className: "form-field-label ml-2", children: ["Unique ", formik.values.isPrimaryKey && "(Auto-enabled for Primary Key)"] })] }), _jsx("p", { className: "text-xs mt-2", children: "You won't be able to create an entry if there is an existing entry with identical content" }), isFormFieldValid(formik, "unique") && (_jsx(Message, { severity: "error", text: (_50 = (_49 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _49 === void 0 ? void 0 : _49.unique) === null || _50 === void 0 ? void 0 : _50.toString() }))] })), currentFields.includes("index") && selectedType.value !== 'relation' && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-3", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(Checkbox, { name: "index", onChange: function (e) {
-                                                                                                formik.setFieldValue("index", e.checked);
-                                                                                            }, checked: formik.values.index }), _jsx("label", { htmlFor: "ingredient1", className: "form-field-label ml-2", children: "Index" })] }), isFormFieldValid(formik, "index") && (_jsx(Message, { severity: "error", text: (_52 = (_51 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _51 === void 0 ? void 0 : _51.index) === null || _52 === void 0 ? void 0 : _52.toString() }))] })), currentFields.includes("private") && selectedType.value !== 'relation' && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-3", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(Checkbox, { name: "private", onChange: function (e) {
-                                                                                                formik.setFieldValue("private", e.checked);
-                                                                                            }, checked: formik.values.private }), _jsx("label", { htmlFor: "ingredient1", className: "form-field-label ml-2", children: "Private" })] }), _jsx("p", { className: "text-xs mt-2", children: "This field will not show up in the API response" }), isFormFieldValid(formik, "private") && (_jsx(Message, { severity: "error", text: (_54 = (_53 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _53 === void 0 ? void 0 : _53.private) === null || _54 === void 0 ? void 0 : _54.toString() }))] })), currentFields.includes("encrypt") && selectedType.value !== 'relation' && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-3", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(Checkbox, { name: "encrypt", onChange: function (e) {
-                                                                                                formik.setFieldValue("encrypt", e.checked);
-                                                                                                setEncryptState(e.checked);
-                                                                                            }, checked: formik.values.encrypt }), _jsx("label", { htmlFor: "ingredient1", className: "form-field-label", children: "Encrypt" })] }), isFormFieldValid(formik, "encrypt") && (_jsx(Message, { severity: "error", text: (_56 = (_55 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _55 === void 0 ? void 0 : _55.encrypt) === null || _56 === void 0 ? void 0 : _56.toString() }))] })), currentFields.includes("isMultiSelect") && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-3", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(Checkbox, { name: "isMultiSelect", onChange: function (e) {
-                                                                                                formik.setFieldValue("isMultiSelect", e.checked);
-                                                                                            }, checked: formik.values.isMultiSelect }), _jsx("label", { htmlFor: "ingredient1", className: "form-field-label ml-2", children: "Is MultiSelect" })] }), isFormFieldValid(formik, "isMultiSelect") && (_jsx(Message, { severity: "error", text: (_58 = (_57 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _57 === void 0 ? void 0 : _57.isMultiSelect) === null || _58 === void 0 ? void 0 : _58.toString() }))] })), currentFields.includes("enableAuditTracking") && formik.values.relationType !== "one-to-many" && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-3", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(Checkbox, { name: "enableAuditTracking", onChange: function (e) {
-                                                                                                formik.setFieldValue("enableAuditTracking", e.checked);
-                                                                                            }, checked: formik.values.enableAuditTracking }), _jsx("label", { htmlFor: "ingredient1", className: "form-field-label", children: "Enable Audit Tracking" })] }), _jsx("p", { className: "fieldSubTitle", children: "By selecting this option, you are setting audit trail for this field." }), isFormFieldValid(formik, "enableAuditTracking") && (_jsx(Message, { severity: "error", text: (_60 = (_59 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _59 === void 0 ? void 0 : _59.enableAuditTracking) === null || _60 === void 0 ? void 0 : _60.toString() }))] })), currentFields.includes("isUserKey") && formik.values.unique && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-3", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(Checkbox, { name: "isUserKey", onChange: function (e) {
-                                                                                                formik.setFieldValue("isUserKey", e.checked);
-                                                                                            }, checked: formik.values.isUserKey }), _jsx("label", { htmlFor: "ingredient1", className: "form-field-label", children: "Is Userkey" })] }), _jsx("p", { className: "fieldSubTitle", children: "By selecting this option, you are setting this field as the model's user key. Any existing user key configuration will be overwritten" }), isFormFieldValid(formik, "isUserKey") && (_jsx(Message, { severity: "error", text: (_62 = (_61 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _61 === void 0 ? void 0 : _61.isUserKey) === null || _62 === void 0 ? void 0 : _62.toString() }))] })), currentFields.includes("isPrimaryKey") && ((modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.isLegacyTable) || (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.isLegacyTableWithId)) && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-3", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(Checkbox, { name: "isPrimaryKey", onChange: function (e) {
-                                                                                                formik.setFieldValue("isPrimaryKey", e.checked);
+                                                                                            }, checked: formik.values.unique, disabled: formik.values.isPrimaryKey }), _jsxs("label", { htmlFor: "unique", className: classNames("form-field-label", styles.fieldLabel, "ml-2"), children: ["Unique ", formik.values.isPrimaryKey && "(Auto-enabled for Primary Key)"] })] }), _jsx("p", { className: "text-xs mt-2", children: "You won't be able to create an entry if there is an existing entry with identical content" }), isFormFieldValid(formik, "unique") && (_jsx("p", { className: styles.fieldError, children: (_64 = (_63 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _63 === void 0 ? void 0 : _63.unique) === null || _64 === void 0 ? void 0 : _64.toString() }))] })), currentFields.includes("index") && selectedTypeValue !== 'relation' && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-2", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(SolidCheckbox, { id: "index", name: "index", onChange: function (event) {
+                                                                                                formik.setFieldValue("index", event.currentTarget.checked);
+                                                                                            }, checked: formik.values.index }), _jsx("label", { htmlFor: "index", className: classNames("form-field-label", styles.fieldLabel, "ml-2"), children: "Index" })] }), isFormFieldValid(formik, "index") && (_jsx("p", { className: styles.fieldError, children: (_66 = (_65 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _65 === void 0 ? void 0 : _65.index) === null || _66 === void 0 ? void 0 : _66.toString() }))] })), currentFields.includes("private") && selectedTypeValue !== 'relation' && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-2", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(SolidCheckbox, { id: "private", name: "private", onChange: function (event) {
+                                                                                                formik.setFieldValue("private", event.currentTarget.checked);
+                                                                                            }, checked: formik.values.private }), _jsx("label", { htmlFor: "private", className: classNames("form-field-label", styles.fieldLabel, "ml-2"), children: "Private" })] }), _jsx("p", { className: "text-xs mt-2", children: "This field will not show up in the API response" }), isFormFieldValid(formik, "private") && (_jsx("p", { className: styles.fieldError, children: (_68 = (_67 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _67 === void 0 ? void 0 : _67.private) === null || _68 === void 0 ? void 0 : _68.toString() }))] })), currentFields.includes("encrypt") && selectedTypeValue !== 'relation' && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-2", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(SolidCheckbox, { id: "encrypt", name: "encrypt", onChange: function (event) {
+                                                                                                formik.setFieldValue("encrypt", event.currentTarget.checked);
+                                                                                                setEncryptState(event.currentTarget.checked);
+                                                                                            }, checked: formik.values.encrypt }), _jsx("label", { htmlFor: "encrypt", className: classNames("form-field-label", styles.fieldLabel), children: "Encrypt" })] }), isFormFieldValid(formik, "encrypt") && (_jsx("p", { className: styles.fieldError, children: (_70 = (_69 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _69 === void 0 ? void 0 : _69.encrypt) === null || _70 === void 0 ? void 0 : _70.toString() }))] })), currentFields.includes("isMultiSelect") && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-2", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(SolidCheckbox, { id: "isMultiSelect", name: "isMultiSelect", onChange: function (event) {
+                                                                                                formik.setFieldValue("isMultiSelect", event.currentTarget.checked);
+                                                                                            }, checked: formik.values.isMultiSelect }), _jsx("label", { htmlFor: "isMultiSelect", className: classNames("form-field-label", styles.fieldLabel, "ml-2"), children: "Is MultiSelect" })] }), isFormFieldValid(formik, "isMultiSelect") && (_jsx("p", { className: styles.fieldError, children: (_72 = (_71 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _71 === void 0 ? void 0 : _71.isMultiSelect) === null || _72 === void 0 ? void 0 : _72.toString() }))] })), currentFields.includes("enableAuditTracking") && formik.values.relationType !== "one-to-many" && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-2", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(SolidCheckbox, { id: "enableAuditTracking", name: "enableAuditTracking", onChange: function (event) {
+                                                                                                formik.setFieldValue("enableAuditTracking", event.currentTarget.checked);
+                                                                                            }, checked: formik.values.enableAuditTracking }), _jsx("label", { htmlFor: "enableAuditTracking", className: classNames("form-field-label", styles.fieldLabel), children: "Enable Audit Tracking" })] }), _jsx("p", { className: "fieldSubTitle", children: "By selecting this option, you are setting audit trail for this field." }), isFormFieldValid(formik, "enableAuditTracking") && (_jsx("p", { className: styles.fieldError, children: (_74 = (_73 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _73 === void 0 ? void 0 : _73.enableAuditTracking) === null || _74 === void 0 ? void 0 : _74.toString() }))] })), currentFields.includes("isUserKey") && formik.values.unique && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-2", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(SolidCheckbox, { id: "isUserKey", name: "isUserKey", onChange: function (event) {
+                                                                                                formik.setFieldValue("isUserKey", event.currentTarget.checked);
+                                                                                            }, checked: formik.values.isUserKey }), _jsx("label", { htmlFor: "isUserKey", className: classNames("form-field-label", styles.fieldLabel), children: "Is Userkey" })] }), _jsx("p", { className: "fieldSubTitle", children: "By selecting this option, you are setting this field as the model's user key. Any existing user key configuration will be overwritten" }), isFormFieldValid(formik, "isUserKey") && (_jsx("p", { className: styles.fieldError, children: (_76 = (_75 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _75 === void 0 ? void 0 : _75.isUserKey) === null || _76 === void 0 ? void 0 : _76.toString() }))] })), currentFields.includes("isPrimaryKey") && ((modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.isLegacyTable) || (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.isLegacyTableWithId)) && (_jsxs("div", { className: "field col-6 flex-flex-column gap-2 mt-2", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(SolidCheckbox, { id: "isPrimaryKey", name: "isPrimaryKey", onChange: function (event) {
+                                                                                                var checked = event.currentTarget.checked;
+                                                                                                formik.setFieldValue("isPrimaryKey", checked);
                                                                                                 // Auto-set required and unique when isPrimaryKey is checked
-                                                                                                if (e.checked) {
+                                                                                                if (checked) {
                                                                                                     formik.setFieldValue("required", true);
                                                                                                     formik.setFieldValue("unique", true);
                                                                                                 }
-                                                                                            }, checked: formik.values.isPrimaryKey }), _jsx("label", { htmlFor: "ingredient1", className: "form-field-label", children: "Is Primary Key" })] }), _jsx("p", { className: "fieldSubTitle", children: "By selecting this option, you are setting this field as the primary key for this legacy table." }), isFormFieldValid(formik, "isPrimaryKey") && (_jsx(Message, { severity: "error", text: (_64 = (_63 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _63 === void 0 ? void 0 : _63.isPrimaryKey) === null || _64 === void 0 ? void 0 : _64.toString() }))] }))] }), formik.values.encrypt === true && (_jsxs("div", { className: "formgrid grid mt-2", children: [_jsx("div", { className: "md:col-6 sm:col-12", children: _jsxs("div", { className: "field col-6 flex-flex-column gap-2", children: [_jsx("label", { htmlFor: "encryptionType", className: "form-field-label", children: "Encryption Type" }), _jsx(SingleSelectAutoCompleteField, { formik: formik, isFormFieldValid: isFormFieldValid, fieldName: "encryptionType", fieldNameId: "encryptionType", labelKey: "label", valueKey: "value", searchData: searchSelectionEncryptionType, existingData: formik.values.encryptionType }, "encryptionType"), isFormFieldValid(formik, "encryptionType") && (_jsx(Message, { severity: "error", text: (_66 = (_65 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _65 === void 0 ? void 0 : _65.encryptionType) === null || _66 === void 0 ? void 0 : _66.toString() }))] }) }), _jsx("div", { className: "md:col-6 sm:col-12", children: _jsxs("div", { className: "field col-6 flex-flex-column gap-2", children: [_jsx("label", { htmlFor: "decryptWhen", className: "form-field-label", children: "Decrypt When" }), _jsx(SingleSelectAutoCompleteField, { formik: formik, isFormFieldValid: isFormFieldValid, fieldName: "decryptWhen", fieldNameId: "decryptWhen", labelKey: "label", valueKey: "value", searchData: searchSelectionDecryptWhen, existingData: formik.values.decryptWhen }, "decryptWhen"), isFormFieldValid(formik, "decryptWhen") && (_jsx(Message, { severity: "error", text: (_68 = (_67 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _67 === void 0 ? void 0 : _67.decryptWhen) === null || _68 === void 0 ? void 0 : _68.toString() }))] }) })] }))] })] }), _jsxs("div", { className: "flex gap-3", children: [_jsx("div", { children: _jsx(Button, { label: "Finish", size: "small", onClick: function () { return showError(); }, type: "submit" }) }), _jsx("div", { children: _jsx(Button, { label: "Cancel", size: "small", severity: "secondary", type: "reset", onClick: function () { return setVisiblePopup(false); }, outlined: true }) })] })] }) }) })] }) }), _jsx(Dialog, { visible: isBackPopupVisible, header: "Select Type", headerClassName: "text-center", modal: true, className: "solid-confirm-dialog", footer: function () { return (_jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { label: "Yes", icon: "pi pi-check", size: "small", type: "reset", severity: "danger", autoFocus: true, onClick: function () {
-                                formik.resetForm();
+                                                                                            }, checked: formik.values.isPrimaryKey }), _jsx("label", { htmlFor: "isPrimaryKey", className: classNames("form-field-label", styles.fieldLabel), children: "Is Primary Key" })] }), _jsx("p", { className: "fieldSubTitle", children: "By selecting this option, you are setting this field as the primary key for this legacy table." }), isFormFieldValid(formik, "isPrimaryKey") && (_jsx("p", { className: styles.fieldError, children: (_78 = (_77 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _77 === void 0 ? void 0 : _77.isPrimaryKey) === null || _78 === void 0 ? void 0 : _78.toString() }))] }))] }), formik.values.encrypt === true && (_jsxs("div", { className: "formgrid grid mt-2", children: [_jsx("div", { className: "md:col-6 sm:col-12", children: _jsxs("div", { className: "field col-6 flex-flex-column gap-2", children: [_jsx("label", { htmlFor: "encryptionType", className: classNames("form-field-label", styles.fieldLabel), children: "Encryption Type" }), _jsx("div", { className: classNames("solid-standard-autocomplete", (_k = {},
+                                                                                            _k[styles.fieldInvalidControl] = isFormFieldValid(formik, "encryptionType"),
+                                                                                            _k)), children: _jsx(SolidAutocomplete, { value: encryptionTypeField.selectedItem, suggestions: encryptionTypeField.filteredItems, completeMethod: encryptionTypeField.searchItems, onChange: encryptionTypeField.handleChange, dropdown: true, field: "label", className: "w-full" }) }), isFormFieldValid(formik, "encryptionType") && (_jsx("p", { className: styles.fieldError, children: (_80 = (_79 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _79 === void 0 ? void 0 : _79.encryptionType) === null || _80 === void 0 ? void 0 : _80.toString() }))] }) }), _jsx("div", { className: "md:col-6 sm:col-12", children: _jsxs("div", { className: "field col-6 flex-flex-column gap-2", children: [_jsx("label", { htmlFor: "decryptWhen", className: classNames("form-field-label", styles.fieldLabel), children: "Decrypt When" }), _jsx("div", { className: classNames("solid-standard-autocomplete", (_l = {},
+                                                                                            _l[styles.fieldInvalidControl] = isFormFieldValid(formik, "decryptWhen"),
+                                                                                            _l)), children: _jsx(SolidAutocomplete, { value: decryptWhenField.selectedItem, suggestions: decryptWhenField.filteredItems, completeMethod: decryptWhenField.searchItems, onChange: decryptWhenField.handleChange, dropdown: true, field: "label", className: "w-full" }) }), isFormFieldValid(formik, "decryptWhen") && (_jsx("p", { className: styles.fieldError, children: (_82 = (_81 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _81 === void 0 ? void 0 : _81.decryptWhen) === null || _82 === void 0 ? void 0 : _82.toString() }))] }) })] }))] })] }), _jsxs("div", { className: "flex gap-3 mt-3", children: [_jsx("div", { children: _jsx(SolidButton, { label: "Finish", size: "small", onClick: function () { return showError(); }, type: "submit" }) }), _jsx("div", { children: _jsx(SolidButton, { label: "Cancel", size: "small", severity: "secondary", type: "reset", onClick: function () { return setVisiblePopup(false); }, outlined: true }) })] })] }) }) })] }) }), _jsx(SolidDialog, { open: isBackPopupVisible, onOpenChange: function (next) {
+                    if (!next) {
+                        setIsBackPopupVisible(false);
+                    }
+                }, dismissible: false, header: "Unsaved Changes", headerClassName: "solid-field-confirm-header", modal: true, className: "solid-confirm-dialog solid-field-confirm-dialog", footer: _jsxs("div", { className: "solid-field-confirm-actions", children: [_jsx(SolidButton, { label: "Yes", icon: "si si-check", size: "small", type: "reset", severity: "danger", autoFocus: true, onClick: function () {
+                                resetFormStateForTypeSelection();
                                 setIsBackPopupVisible(false);
                                 setShowTypeFilter(true);
-                            } }), _jsx(Button, { label: "No", icon: "pi pi-times", size: "small", onClick: function () { return setIsBackPopupVisible(false); } })] })); }, onHide: function () { return setIsBackPopupVisible(false); }, children: _jsx("p", { children: "You have some unsaved data are you sure  you want to go back?" }) })] }));
+                            } }), _jsx(SolidButton, { label: "No", icon: "si si-times", size: "small", onClick: function () { return setIsBackPopupVisible(false); } })] }), children: _jsx(SolidDialogBody, { className: "solid-field-confirm-dialog-body", children: _jsx("p", { className: "solid-field-confirm-message", children: "You have unsaved changes. Are you sure you want to go back?" }) }) })] }));
 };
 export default FieldMetaDataForm;
 //# sourceMappingURL=FieldMetaDataForm.js.map