@solidxai/core-ui 0.1.12-beta.7 → 0.1.12-beta.9

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

@@ -71,6 +71,7 @@ import { ERROR_MESSAGES } from "../../../constants/error-messages";
 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";
+import "./FieldMetaDataForm.css";
 var SolidFieldType;
 (function (SolidFieldType) {
     // numeric types
@@ -319,11 +320,14 @@ var fieldBasedPayloadFormating = function (values, currentFields, fieldMetaData)
     return transformedPayload;
 };
 function fetchCurrentFields(solidFieldType, fieldDefaultMetaData) {
-    var _a;
+    var _a, _b;
+    var fieldTypes = Array.isArray((_a = fieldDefaultMetaData === null || fieldDefaultMetaData === void 0 ? void 0 : fieldDefaultMetaData.data) === null || _a === void 0 ? void 0 : _a.fieldTypes)
+        ? fieldDefaultMetaData.data.fieldTypes
+        : [];
     if (solidFieldType) {
-        var allowedFields = (_a = fieldDefaultMetaData === null || fieldDefaultMetaData === void 0 ? void 0 : fieldDefaultMetaData.data) === null || _a === void 0 ? void 0 : _a.fieldTypes.filter(function (e) { return e.fieldType === solidFieldType; });
+        var allowedFields = fieldTypes.filter(function (e) { return e.fieldType === solidFieldType; });
         if (allowedFields.length > 0) {
-            return allowedFields[0].fields;
+            return (_b = allowedFields[0].fields) !== null && _b !== void 0 ? _b : [];
         }
     }
     return [
@@ -560,8 +564,8 @@ var createValidationSchema = function (currentFields, selectedType, allFields, f
 };
 var FieldMetaDataForm = function (_a) {
     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, _83;
-    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, onDraftSubmit = _a.onDraftSubmit, onClose = _a.onClose, availableFieldTypes = _a.availableFieldTypes, _84 = _a.forceShowTypeSelector, forceShowTypeSelector = _84 === void 0 ? false : _84, _85 = _a.selectorRequireContinue, selectorRequireContinue = _85 === void 0 ? false : _85, _86 = _a.selectorContinueLabel, selectorContinueLabel = _86 === void 0 ? "Next" : _86, _87 = _a.selectorInitialFieldType, selectorInitialFieldType = _87 === void 0 ? null : _87, _88 = _a.disableIdentityEditingForExisting, disableIdentityEditingForExisting = _88 === void 0 ? true : _88, _89 = _a.submitLabel, submitLabel = _89 === void 0 ? "Finish" : _89;
+    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, _83, _84, _85, _86;
+    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, onDraftSubmit = _a.onDraftSubmit, onClose = _a.onClose, availableFieldTypes = _a.availableFieldTypes, _87 = _a.forceShowTypeSelector, forceShowTypeSelector = _87 === void 0 ? false : _87, _88 = _a.selectorRequireContinue, selectorRequireContinue = _88 === void 0 ? false : _88, _89 = _a.selectorContinueLabel, selectorContinueLabel = _89 === void 0 ? "Next" : _89, _90 = _a.selectorInitialFieldType, selectorInitialFieldType = _90 === void 0 ? null : _90, _91 = _a.disableIdentityEditingForExisting, disableIdentityEditingForExisting = _91 === void 0 ? true : _91, _92 = _a.submitLabel, submitLabel = _92 === void 0 ? "Finish" : _92;
     var booleanOptions = ["false", "true"];
     var booleanSegmentedOptions = booleanOptions.map(function (value) { return ({
         label: capitalize(value),
@@ -570,44 +574,45 @@ var FieldMetaDataForm = function (_a) {
     var resolveBooleanOptionValue = function (value) {
         return typeof value === "string" ? value : value ? "true" : "false";
     };
-    var _90 = useState(false), isBackPopupVisible = _90[0], setIsBackPopupVisible = _90[1];
-    var _91 = useState(false), showColumnName = _91[0], setShowColumnName = _91[1];
+    var _93 = useState(false), isBackPopupVisible = _93[0], setIsBackPopupVisible = _93[1];
+    var _94 = useState(false), showColumnName = _94[0], setShowColumnName = _94[1];
     var pathname = usePathname();
-    var _92 = useGetFieldDefaultMetaDataQuery(null), fieldDefaultMetaData = _92.data, isLoading = _92.isLoading, error = _92.error, refetch = _92.refetch;
-    var _93 = useState(fetchCurrentFields(fieldMetaData && fieldMetaData.type, fieldDefaultMetaData)), currentFields = _93[0], setCurrentFields = _93[1];
-    var _94 = useLazyGetMediaStorageProvidersQuery(), triggerGetMediaStorageProvider = _94[0], _95 = _94[1], MediaStorageProviderData = _95.data, isMediaStorageProviderFetching = _95.isFetching, MediaStorageProviderError = _95.error;
-    var _96 = useLazyGetmodulesQuery(), triggerGetModules = _96[0], _97 = _96[1], moduleData = _97.data, isModuleFetching = _97.isFetching, moduleError = _97.error;
-    var _98 = useLazyGetModelsQuery(), triggerGetModels = _98[0], _99 = _98[1], modelData = _99.data, ismodelFetching = _99.isFetching, modelError = _99.error;
-    var _100 = useUpdateUserKeyMutation(), updateUserKey = _100[0], _101 = _100[1], isUpdateUserKeyLoading = _101.isLoading, isUpdateUserKeySuccess = _101.isSuccess, isUpdateUserKeyError = _101.isError, UpdateUserKeyError = _101.error, newModel = _101.data;
-    var _102 = useState(), markdownText = _102[0], setMarkdownText = _102[1];
-    var _103 = useState(Boolean(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.encrypt)), encryptState = _103[0], setEncryptState = _103[1];
-    var _104 = useState(forceShowTypeSelector || !fieldMetaData), showTypeFilter = _104[0], setShowTypeFilter = _104[1];
-    var _105 = useState((fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.type)
+    var _95 = useGetFieldDefaultMetaDataQuery(null), fieldDefaultMetaData = _95.data, isLoading = _95.isLoading, error = _95.error, refetch = _95.refetch;
+    var _96 = useState(fetchCurrentFields(fieldMetaData && fieldMetaData.type, fieldDefaultMetaData)), currentFields = _96[0], setCurrentFields = _96[1];
+    var _97 = useLazyGetMediaStorageProvidersQuery(), triggerGetMediaStorageProvider = _97[0], _98 = _97[1], MediaStorageProviderData = _98.data, isMediaStorageProviderFetching = _98.isFetching, MediaStorageProviderError = _98.error;
+    var _99 = useLazyGetmodulesQuery(), triggerGetModules = _99[0], _100 = _99[1], moduleData = _100.data, isModuleFetching = _100.isFetching, moduleError = _100.error;
+    var _101 = useLazyGetModelsQuery(), triggerGetModels = _101[0], _102 = _101[1], modelData = _102.data, ismodelFetching = _102.isFetching, modelError = _102.error;
+    var _103 = useUpdateUserKeyMutation(), updateUserKey = _103[0], _104 = _103[1], isUpdateUserKeyLoading = _104.isLoading, isUpdateUserKeySuccess = _104.isSuccess, isUpdateUserKeyError = _104.isError, UpdateUserKeyError = _104.error, newModel = _104.data;
+    var _105 = useState(), markdownText = _105[0], setMarkdownText = _105[1];
+    var _106 = useState(Boolean(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.encrypt)), encryptState = _106[0], setEncryptState = _106[1];
+    var _107 = useState(forceShowTypeSelector || !fieldMetaData), showTypeFilter = _107[0], setShowTypeFilter = _107[1];
+    var _108 = useState((fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.type)
         ? { label: fieldMetaData.type, value: fieldMetaData.type }
         : selectorInitialFieldType
             ? { label: selectorInitialFieldType, value: selectorInitialFieldType }
-            : null), selectedType = _105[0], setSelectedType = _105[1];
+            : null), selectedType = _108[0], setSelectedType = _108[1];
     var selectedTypeValue = (selectedType === null || selectedType === void 0 ? void 0 : selectedType.value) || "";
-    var _106 = useState((fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.computedFieldValueType) && { label: fieldMetaData.computedFieldValueType, value: fieldMetaData.computedFieldValueType }), selectedComputedFieldValueType = _106[0], setSelectedComputedFieldValueType = _106[1];
-    var _107 = useState((fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.selectionDynamicProvider) && { label: fieldMetaData.selectionDynamicProvider, value: fieldMetaData.selectionDynamicProvider }), selectionDynamicProvider = _107[0], setSelectionDynamicProvider = _107[1];
+    var _109 = useState((fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.computedFieldValueType) && { label: fieldMetaData.computedFieldValueType, value: fieldMetaData.computedFieldValueType }), selectedComputedFieldValueType = _109[0], setSelectedComputedFieldValueType = _109[1];
+    var _110 = useState((fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.selectionDynamicProvider) && { label: fieldMetaData.selectionDynamicProvider, value: fieldMetaData.selectionDynamicProvider }), selectionDynamicProvider = _110[0], setSelectionDynamicProvider = _110[1];
     // const [externalIdProvider, setExternalIdProvider] = useState(fieldMetaData?.externalIdProvider && { label: fieldMetaData.externalIdProvider, value: fieldMetaData.externalIdProvider });
-    var _108 = useState([]), filteredComputedFieldValueTypes = _108[0], setFilteredComputedFieldValueTypes = _108[1];
-    var _109 = useState([]), filteredSelectionDynamicProvider = _109[0], setFilteredSelectionDynamicProvider = _109[1];
-    var _110 = useState([]), ormTypeOptions = _110[0], setOrmTypeOptions = _110[1];
-    var _111 = useState(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.ormType), selectedOrmType = _111[0], setSelectedOrmType = _111[1];
-    var _112 = useState(false), askForUserKeyField = _112[0], setAskForUserKeyField = _112[1];
-    var _113 = useState([]), userKeyFieldData = _113[0], setUserKeyFieldData = _113[1];
-    var _114 = useState([]), filteredExternalIdProvider = _114[0], setFilteredExternalIdProvider = _114[1];
-    var _115 = useState([]), filteredSelectionEncryptionType = _115[0], setFilteredSelectionEncryptionType = _115[1];
-    var _116 = useState([]), filteredSelectionDecryptWhen = _116[0], setFilteredSelectionDecryptWhen = _116[1];
+    var _111 = useState([]), filteredComputedFieldValueTypes = _111[0], setFilteredComputedFieldValueTypes = _111[1];
+    var _112 = useState([]), filteredSelectionDynamicProvider = _112[0], setFilteredSelectionDynamicProvider = _112[1];
+    var _113 = useState([]), ormTypeOptions = _113[0], setOrmTypeOptions = _113[1];
+    var _114 = useState(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.ormType), selectedOrmType = _114[0], setSelectedOrmType = _114[1];
+    var _115 = useState(false), askForUserKeyField = _115[0], setAskForUserKeyField = _115[1];
+    var _116 = useState([]), userKeyFieldData = _116[0], setUserKeyFieldData = _116[1];
+    var _117 = useState([]), filteredExternalIdProvider = _117[0], setFilteredExternalIdProvider = _117[1];
+    var _118 = useState([]), filteredSelectionEncryptionType = _118[0], setFilteredSelectionEncryptionType = _118[1];
+    var _119 = useState([]), filteredSelectionDecryptWhen = _119[0], setFilteredSelectionDecryptWhen = _119[1];
     var validationSchema = React.useMemo(function () { return createValidationSchema(currentFields, selectedType, allFields, fieldMetaData, encryptState); }, [currentFields, encryptState]);
-    var _117 = useState(false), typeSelected = _117[0], setTypeSelected = _117[1];
+    var _120 = useState(false), typeSelected = _120[0], setTypeSelected = _120[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 isExistingFieldReadOnly = disableIdentityEditingForExisting && Boolean(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.id);
+    var fieldTypeLabel = capitalize(String((_o = (_m = selectedType === null || selectedType === void 0 ? void 0 : selectedType.label) !== null && _m !== void 0 ? _m : selectedTypeValue) !== null && _o !== void 0 ? _o : "field"));
     var closeForm = useCallback(function () {
         if (typeof onClose === "function") {
             onClose();
@@ -984,7 +989,7 @@ var FieldMetaDataForm = function (_a) {
         { label: "False", value: "false" },
     ];
     var defaultPasswordPolicy = fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.regexPattern;
-    var _118 = useState(defaultPasswordPolicy), selectedPasswordPolicy = _118[0], setSelectedPasswordPolicy = _118[1];
+    var _121 = useState(defaultPasswordPolicy), selectedPasswordPolicy = _121[0], setSelectedPasswordPolicy = _121[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).*$' },
@@ -997,8 +1002,8 @@ 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 _119 = useState(resolvedMediaTypeOptions), filteredMediaTypes = _119[0], setFilteredMediaTypes = _119[1];
+    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; }, [(_p = fieldDefaultMetaData === null || fieldDefaultMetaData === void 0 ? void 0 : fieldDefaultMetaData.data) === null || _p === void 0 ? void 0 : _p.mediaTypes]);
+    var _122 = useState(resolvedMediaTypeOptions), filteredMediaTypes = _122[0], setFilteredMediaTypes = _122[1];
     useEffect(function () {
         setFilteredMediaTypes(resolvedMediaTypeOptions);
     }, [resolvedMediaTypeOptions]);
@@ -1047,9 +1052,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: (_o = fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.mediaTypes) !== null && _o !== void 0 ? _o : [],
+        mediaTypes: (_q = fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.mediaTypes) !== null && _q !== void 0 ? _q : [],
         mediaMaxSizeKb: fieldMetaData ? fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.mediaMaxSizeKb : null,
-        mediaStorageProviderId: fieldMetaData ? (_p = fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.mediaStorageProvider) === null || _p === void 0 ? void 0 : _p.id : null,
+        mediaStorageProviderId: fieldMetaData ? (_r = fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.mediaStorageProvider) === null || _r === void 0 ? void 0 : _r.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,
@@ -1087,7 +1092,7 @@ var FieldMetaDataForm = function (_a) {
             var newFieldData, formtatedFieldPayload_1, data;
             return __generator(this, function (_a) {
                 try {
-                    newFieldData = __assign(__assign({}, values), { isSystem: values.isSystem == true ? true : '' });
+                    newFieldData = __assign(__assign({}, values), { isSystem: values.isSystem === true });
                     formtatedFieldPayload_1 = fieldBasedPayloadFormating(newFieldData, currentFields, fieldMetaData);
                     if (typeof onDraftSubmit === "function") {
                         onDraftSubmit(formtatedFieldPayload_1);
@@ -1127,6 +1132,9 @@ var FieldMetaDataForm = function (_a) {
         }); },
         validateOnBlur: false // Disable validation on blur
     });
+    var fieldEditorTitle = fieldMetaData
+        ? "Edit ".concat(((_s = formik === null || formik === void 0 ? void 0 : formik.values) === null || _s === void 0 ? void 0 : _s.displayName) || fieldTypeLabel, " Field")
+        : "Add ".concat(fieldTypeLabel, " Field");
     var mediaTypeSelectedItems = useMemo(function () {
         if (!Array.isArray(formik.values.mediaTypes))
             return [];
@@ -1209,6 +1217,7 @@ var FieldMetaDataForm = function (_a) {
         }
     }, [isUpdateUserKeySuccess, isUpdateUserKeyError]);
     var handleTypeSelect = function (e, label) {
+        var _a, _b, _c, _d, _e;
         if (!fieldMetaData) {
             resetFormStateForTypeSelection({ keepSelectedType: true });
         }
@@ -1221,16 +1230,18 @@ var FieldMetaDataForm = function (_a) {
         else {
             formik.setFieldValue("regexPattern", "");
         }
-        var ormType = fieldDefaultMetaData.data.ormType[modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.dataSourceType];
-        var availableOrmTypes = ormType[e];
+        var ormTypeByDataSource = (_b = (_a = fieldDefaultMetaData === null || fieldDefaultMetaData === void 0 ? void 0 : fieldDefaultMetaData.data) === null || _a === void 0 ? void 0 : _a.ormType) === null || _b === void 0 ? void 0 : _b[modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.dataSourceType];
+        var availableOrmTypes = ormTypeByDataSource === null || ormTypeByDataSource === void 0 ? void 0 : ormTypeByDataSource[e];
         // setFilteredOrmTypes(availableOrmTypes.ormTypes.map((e: any) => ({
         //   label: e,
         //   value: e,
         // })));
         // setSelectedOrmType({ label: availableOrmTypes.ormTypes[0], value: availableOrmTypes.ormTypes[0] });
-        setOrmTypeOptions(availableOrmTypes.ormTypes);
-        formik.setFieldValue("ormType", availableOrmTypes.ormTypes[0].label);
-        setSelectedOrmType(availableOrmTypes.ormTypes[0].label);
+        var nextOrmTypes = (_c = availableOrmTypes === null || availableOrmTypes === void 0 ? void 0 : availableOrmTypes.ormTypes) !== null && _c !== void 0 ? _c : [];
+        var nextOrmTypeLabel = (_e = (_d = nextOrmTypes[0]) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : null;
+        setOrmTypeOptions(nextOrmTypes);
+        formik.setFieldValue("ormType", nextOrmTypeLabel);
+        setSelectedOrmType(nextOrmTypeLabel);
         setCurrentFields(fetchCurrentFields(e, fieldDefaultMetaData));
         // setTypeSelected(true);
     };
@@ -1421,211 +1432,211 @@ var FieldMetaDataForm = function (_a) {
         searchData: searchSelectionDecryptWhen,
         existingData: decryptWhenExisting,
     });
-    return (_jsxs("div", { children: [_jsx("div", { children: _jsx("form", { onSubmit: formik.handleSubmit, onReset: function (event) {
+    return (_jsxs("div", { className: "solid-field-form-shell", children: [_jsx("div", { children: _jsx("form", { onSubmit: formik.handleSubmit, onReset: function (event) {
                         event.preventDefault();
                         resetFormStateForTypeSelection();
                     }, children: showTypeFilter === true ?
-                        _jsx(FieldSelector, { handleTypeSelect: handleTypeSelect, modelMetaData: modelMetaData, availableFieldTypes: availableFieldTypes, initialSelectedValue: (_q = selectedType === null || selectedType === void 0 ? void 0 : selectedType.value) !== null && _q !== void 0 ? _q : selectorInitialFieldType, requireExplicitContinue: selectorRequireContinue, continueLabel: selectorContinueLabel })
+                        _jsx("div", { className: "solid-field-form-scroll", children: _jsx(FieldSelector, { handleTypeSelect: handleTypeSelect, modelMetaData: modelMetaData, availableFieldTypes: availableFieldTypes, initialSelectedValue: (_t = selectedType === null || selectedType === void 0 ? void 0 : selectedType.value) !== null && _t !== void 0 ? _t : selectorInitialFieldType, requireExplicitContinue: selectorRequireContinue, continueLabel: selectorContinueLabel }) })
                         :
-                            _jsx("div", { className: "p-3", style: { maxHeight: '80vh', overflowY: 'auto', overflowX: 'hidden' }, children: _jsx("div", { className: "flex justify-center creat-field-for form-dem", children: _jsxs("div", { className: "solid-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: "flex flex-wrap -mx-2 -mt-2", children: [currentFields.includes("displayName") && (_jsxs("div", { className: "field mt-2 w-full px-2 pt-2 md:w-1/2", children: [_jsx("label", { htmlFor: "displayName", className: classNames("form-field-label", styles.fieldLabel), children: "Display Name" }), _jsx(SolidInput, { type: "text", disabled: isExistingFieldReadOnly, 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;
-                                                                                formik.setFieldValue("name", toCamelCase);
-                                                                                if (showColumnName) {
-                                                                                    formik.setFieldValue("columnName", toSnakeCase);
-                                                                                }
-                                                                            }, value: formik.values.displayName, className: classNames(styles.fieldInput, {
-                                                                                "p-invalid": isFormFieldValid(formik, "displayName"),
-                                                                            }) }), isFormFieldValid(formik, "displayName") && (_jsx("p", { className: styles.fieldError, children: (_s = (_r = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _r === void 0 ? void 0 : _r.displayName) === null || _s === void 0 ? void 0 : _s.toString() }))] })), currentFields.includes("name") && (_jsxs("div", { className: "field mt-1 w-full px-2 pt-2 md:mt-0 md:w-1/2", children: [_jsx("label", { htmlFor: "name", className: classNames("form-field-label", styles.fieldLabel), children: "Name" }), _jsx(SolidInput, { disabled: isExistingFieldReadOnly, 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("p", { className: styles.fieldError, children: (_u = (_t = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _t === void 0 ? void 0 : _t.name) === null || _u === void 0 ? void 0 : _u.toString() }))] })), currentFields.includes("description") && (_jsxs("div", { className: "field mt-1 w-full px-2 pt-2 md:mt-2 md:w-1/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("p", { className: styles.fieldError, children: (_w = (_v = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _v === void 0 ? void 0 : _v.description) === null || _w === void 0 ? void 0 : _w.toString() }))] })), currentFields.includes("columnName") && (_jsxs("div", { className: "field mt-2 w-full px-2 pt-2 md:w-1/2", children: [_jsxs("div", { className: "flex 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);
+                            _jsx("div", { className: "solid-field-form-scroll", children: _jsx("div", { className: "flex justify-center creat-field-form form-demo", children: _jsxs("div", { className: "solid-fluid solid-field-form-frame", children: [_jsxs("div", { className: "solid-field-form-header", children: [_jsx("p", { className: "form-wrapper-title m-0", children: fieldEditorTitle }), _jsx("p", { className: "solid-field-form-subtitle", children: "Review the basic info and advanced configuration for this field." })] }), _jsx("div", { className: "solid-field-form-tabs", 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: "flex flex-wrap -mx-2 -mt-2", children: [currentFields.includes("displayName") && (_jsxs("div", { className: "field mt-2 w-full px-2 pt-2 md:w-1/2", children: [_jsx("label", { htmlFor: "displayName", className: classNames("form-field-label", styles.fieldLabel), children: "Display Name" }), _jsx(SolidInput, { type: "text", disabled: isExistingFieldReadOnly, 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;
+                                                                                    formik.setFieldValue("name", toCamelCase);
+                                                                                    if (showColumnName) {
+                                                                                        formik.setFieldValue("columnName", toSnakeCase);
+                                                                                    }
+                                                                                }, value: formik.values.displayName, className: classNames(styles.fieldInput, {
+                                                                                    "p-invalid": isFormFieldValid(formik, "displayName"),
+                                                                                }) }), isFormFieldValid(formik, "displayName") && (_jsx("p", { className: styles.fieldError, children: (_v = (_u = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _u === void 0 ? void 0 : _u.displayName) === null || _v === void 0 ? void 0 : _v.toString() }))] })), currentFields.includes("name") && (_jsxs("div", { className: "field mt-1 w-full px-2 pt-2 md:mt-0 md:w-1/2", children: [_jsx("label", { htmlFor: "name", className: classNames("form-field-label", styles.fieldLabel), children: "Name" }), _jsx(SolidInput, { disabled: isExistingFieldReadOnly, 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("p", { className: styles.fieldError, children: (_x = (_w = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _w === void 0 ? void 0 : _w.name) === null || _x === void 0 ? void 0 : _x.toString() }))] })), currentFields.includes("description") && (_jsxs("div", { className: "field mt-1 w-full px-2 pt-2 md:mt-2 md:w-1/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, className: classNames(styles.fieldTextarea, {
+                                                                                    "p-invalid": isFormFieldValid(formik, "description"),
+                                                                                }) }), isFormFieldValid(formik, "description") && (_jsx("p", { className: styles.fieldError, children: (_z = (_y = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _y === void 0 ? void 0 : _y.description) === null || _z === void 0 ? void 0 : _z.toString() }))] })), currentFields.includes("columnName") && (_jsxs("div", { className: "field mt-2 w-full px-2 pt-2 md:w-1/2", children: [_jsxs("div", { className: "flex 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);
+                                                                                                }
                                                                                             }
-                                                                                        }
-                                                                                        else {
-                                                                                            formik.setFieldValue("columnName", null);
-                                                                                        }
-                                                                                    }, checked: showColumnName, disabled: isExistingFieldReadOnly }), _jsx("label", { htmlFor: "ingredient1", className: "form-field-label", children: "Set Column Name" })] }), showColumnName && (_jsxs("div", { className: "field mt-4 w-full gap-2", children: [_jsx("label", { htmlFor: "columnName", className: classNames("form-field-label", styles.fieldLabel), children: "Column Name" }), _jsx(SolidInput, { disabled: isExistingFieldReadOnly, 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: (_y = (_x = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _x === void 0 ? void 0 : _x.columnName) === null || _y === void 0 ? void 0 : _y.toString() }))] }))] }))] }) }), _jsxs(TabPanel, { header: "Advanced Config", children: [((_0 = (_z = formik === null || formik === void 0 ? void 0 : formik.values) === null || _z === void 0 ? void 0 : _z.type) === null || _0 === void 0 ? void 0 : _0.length) > 0 && (_jsxs("div", { className: "flex flex-wrap -mx-2 -mt-2", children: [currentFields.includes("length") && (_jsxs("div", { className: "field flex w-1/2 flex-col gap-2 px-2 pt-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: (_2 = (_1 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _1 === void 0 ? void 0 : _1.length) === null || _2 === void 0 ? void 0 : _2.toString() }))] })), currentFields.includes("defaultValue") && selectedTypeValue === "boolean" &&
-                                                                        _jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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"),
-                                                                                    }) })] }), currentFields.includes("defaultValue") && selectedTypeValue !== "boolean" && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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"),
-                                                                                    }) }), (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({
+                                                                                            else {
+                                                                                                formik.setFieldValue("columnName", null);
+                                                                                            }
+                                                                                        }, checked: showColumnName, disabled: isExistingFieldReadOnly }), _jsx("label", { htmlFor: "ingredient1", className: "form-field-label", children: "Set Column Name" })] }), showColumnName && (_jsxs("div", { className: "field mt-4 w-full gap-2", children: [_jsx("label", { htmlFor: "columnName", className: classNames("form-field-label", styles.fieldLabel), children: "Column Name" }), _jsx(SolidInput, { disabled: isExistingFieldReadOnly, 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: (_1 = (_0 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _0 === void 0 ? void 0 : _0.columnName) === null || _1 === void 0 ? void 0 : _1.toString() }))] }))] }))] }) }), _jsxs(TabPanel, { header: "Advanced Config", children: [((_3 = (_2 = formik === null || formik === void 0 ? void 0 : formik.values) === null || _2 === void 0 ? void 0 : _2.type) === null || _3 === void 0 ? void 0 : _3.length) > 0 && (_jsxs("div", { className: "flex flex-wrap -mx-2 -mt-2", children: [currentFields.includes("length") && (_jsxs("div", { className: "field flex w-1/2 flex-col gap-2 px-2 pt-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: (_5 = (_4 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _4 === void 0 ? void 0 : _4.length) === null || _5 === void 0 ? void 0 : _5.toString() }))] })), currentFields.includes("defaultValue") && selectedTypeValue === "boolean" &&
+                                                                            _jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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"),
+                                                                                        }) })] }), currentFields.includes("defaultValue") && selectedTypeValue !== "boolean" && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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"),
-                                                                                        }) }) }), (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({
+                                                                                        }) }), (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"),
-                                                                                        }) }) }), (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"),
-                                                                                    }) }));
-                                                                            })(), isFormFieldValid(formik, "defaultValue") && (_jsx("p", { className: styles.fieldError, children: (_4 = (_3 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _3 === void 0 ? void 0 : _3.defaultValue) === null || _4 === void 0 ? void 0 : _4.toString() }))] })), currentFields.includes("mediaTypes") && (_jsxs("div", { className: "field flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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) {
+                                                                                        }) }));
+                                                                                })(), isFormFieldValid(formik, "defaultValue") && (_jsx("p", { className: styles.fieldError, children: (_7 = (_6 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _6 === void 0 ? void 0 : _6.defaultValue) === null || _7 === void 0 ? void 0 : _7.toString() }))] })), currentFields.includes("mediaTypes") && (_jsxs("div", { className: "field flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: (_9 = (_8 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _8 === void 0 ? void 0 : _8.mediaTypes) === null || _9 === void 0 ? void 0 : _9.toString() }))] })), currentFields.includes("mediaMaxSizeKb") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:mt-0 md:w-1/2", 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: (_11 = (_10 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _10 === void 0 ? void 0 : _10.mediaMaxSizeKb) === null || _11 === void 0 ? void 0 : _11.toString() }))] })), currentFields.includes("mediaStorageProviderId") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: (_13 = (_12 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _12 === void 0 ? void 0 : _12.mediaStorageProviderId) === null || _13 === void 0 ? void 0 : _13.toString() }))] })), currentFields.includes("mediaEmbedded") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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("p", { className: styles.fieldError, children: (_15 = (_14 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _14 === void 0 ? void 0 : _14.mediaEmbedded) === null || _15 === void 0 ? void 0 : _15.toString() }))] })), currentFields.includes("relationType") && (_jsxs("div", { className: "field mt-1 flex w-full items-center gap-2 px-2 pt-2", 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"),
+                                                                                    }) }), isFormFieldValid(formik, "relationType") && (_jsx("p", { className: styles.fieldError, children: (_17 = (_16 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _16 === void 0 ? void 0 : _16.relationType) === null || _17 === void 0 ? void 0 : _17.toString() }))] })), currentFields.includes("relationType") && (formik.values.relationType === "many-to-one" || formik.values.relationType === "one-to-many") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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;
-                                                                                        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: (_6 = (_5 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _5 === void 0 ? void 0 : _5.mediaTypes) === null || _6 === void 0 ? void 0 : _6.toString() }))] })), currentFields.includes("mediaMaxSizeKb") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:mt-0 md:w-1/2", 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: (_8 = (_7 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _7 === void 0 ? void 0 : _7.mediaMaxSizeKb) === null || _8 === void 0 ? void 0 : _8.toString() }))] })), currentFields.includes("mediaStorageProviderId") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: (_10 = (_9 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _9 === void 0 ? void 0 : _9.mediaStorageProviderId) === null || _10 === void 0 ? void 0 : _10.toString() }))] })), currentFields.includes("mediaEmbedded") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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("p", { className: styles.fieldError, children: (_12 = (_11 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _11 === void 0 ? void 0 : _11.mediaEmbedded) === null || _12 === void 0 ? void 0 : _12.toString() }))] })), currentFields.includes("relationType") && (_jsxs("div", { className: "field mt-1 flex w-full items-center gap-2 px-2 pt-2", 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"),
-                                                                                }) }), isFormFieldValid(formik, "relationType") && (_jsx("p", { className: styles.fieldError, children: (_14 = (_13 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _13 === void 0 ? void 0 : _13.relationType) === null || _14 === void 0 ? void 0 : _14.toString() }))] })), currentFields.includes("relationType") && (formik.values.relationType === "many-to-one" || formik.values.relationType === "one-to-many") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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("p", { className: styles.fieldError, children: (_16 = (_15 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _15 === void 0 ? void 0 : _15.relationCascade) === null || _16 === void 0 ? void 0 : _16.toString() }))] })), currentFields.includes("relationModelModuleName") && (_jsxs("div", { className: "field mt-1 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/2", 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: (_18 = (_17 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _17 === void 0 ? void 0 : _17.relationModelModuleName) === null || _18 === void 0 ? void 0 : _18.toString() }))] })), currentFields.includes("relationCoModelSingularName") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: (_20 = (_19 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _19 === void 0 ? void 0 : _19.relationCoModelSingularName) === null || _20 === void 0 ? void 0 : _20.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 mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: isExistingFieldReadOnly, value: formik.values.relationCoModelColumnName, className: classNames(styles.fieldInput, {
-                                                                                    "p-invalid": isFormFieldValid(formik, "relationCoModelColumnName"),
-                                                                                }) }), isFormFieldValid(formik, "relationCoModelColumnName") && (_jsx("p", { className: styles.fieldError, children: (_22 = (_21 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _21 === void 0 ? void 0 : _21.relationCoModelColumnName) === null || _22 === void 0 ? void 0 : _22.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 mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: (_24 = (_23 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _23 === void 0 ? void 0 : _23.userKey) === null || _24 === void 0 ? void 0 : _24.toString() }))] })), currentFields.includes("relationFieldFixedFilter") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-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("p", { className: styles.fieldError, children: (_26 = (_25 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _25 === void 0 ? void 0 : _25.relationFieldFixedFilter) === null || _26 === void 0 ? void 0 : _26.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 mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/2", children: [_jsx("label", { htmlFor: "relationCreateInverse", className: classNames("form-field-label", styles.fieldLabel), children: "Relation Create Inverse" }), _jsxs("div", { className: "flex 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: (_28 = (_27 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _27 === void 0 ? void 0 : _27.relationCreateInverse) === null || _28 === void 0 ? void 0 : _28.toString() }))] })), currentFields.includes("relationCoModelFieldName") && formik.values.relationCreateInverse && !formik.values.relationCoModelSingularName && (_jsx("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/2", children: _jsx(SolidMessage, { text: "Please select Co-model" }) })), currentFields.includes("relationCoModelFieldName") && formik.values.relationCreateInverse && formik.values.relationCoModelSingularName && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: isExistingFieldReadOnly, 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: (_29 = formik.values.relationCoModelFieldName) !== null && _29 !== void 0 ? _29 : 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: (_30 = formik.values.relationCoModelFieldName) !== null && _30 !== void 0 ? _30 : "".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: (_31 = formik.values.relationCoModelSingularName) !== null && _31 !== void 0 ? _31 : '{{}}' }), " when setting create inverse true."] }), isFormFieldValid(formik, "relationCoModelFieldName") && (_jsx("p", { className: styles.fieldError, children: (_33 = (_32 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _32 === void 0 ? void 0 : _32.relationCoModelFieldName) === null || _33 === void 0 ? void 0 : _33.toString() }))] })), currentFields.includes("relationJoinTableName") && formik.values.relationType === "many-to-many" && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: isExistingFieldReadOnly, value: formik.values.relationJoinTableName, className: classNames(styles.fieldInput, {
-                                                                                    "p-invalid": isFormFieldValid(formik, "relationJoinTableName"),
-                                                                                }) }), isFormFieldValid(formik, "relationJoinTableName") && (_jsx("p", { className: styles.fieldError, children: (_35 = (_34 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _34 === void 0 ? void 0 : _34.relationJoinTableName) === null || _35 === void 0 ? void 0 : _35.toString() }))] })), currentFields.includes("selectionDynamicProvider") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: (_37 = (_36 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _36 === void 0 ? void 0 : _36.selectionDynamicProvider) === null || _37 === void 0 ? void 0 : _37.toString() }))] })), currentFields.includes("selectionValueType") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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("p", { className: styles.fieldError, children: (_39 = (_38 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _38 === void 0 ? void 0 : _38.selectionValueType) === null || _39 === void 0 ? void 0 : _39.toString() }))] })), currentFields.includes("selectionStaticValues") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: (_41 = (_40 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _40 === void 0 ? void 0 : _40.selectionStaticValues) === null || _41 === void 0 ? void 0 : _41.toString() }))] })), currentFields.includes("computedFieldValueType") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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("p", { className: styles.fieldError, children: (_43 = (_42 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _42 === void 0 ? void 0 : _42.computedFieldValueType) === null || _43 === void 0 ? void 0 : _43.toString() }))] })), currentFields.includes("computedFieldValueProvider") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: (_45 = (_44 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _44 === void 0 ? void 0 : _44.computedFieldValueProvider) === null || _45 === void 0 ? void 0 : _45.toString() }))] })), currentFields.includes("computedFieldTriggerConfig") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2", children: [(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.computedFieldTriggerConfig) === null
-                                                                                &&
-                                                                                    _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 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("p", { className: styles.fieldError, children: formik.errors.computedFieldTriggerConfig }))] })), currentFields.includes("selectionDynamicProviderCtxt") && (_jsxs("div", { className: "field mt-4 flex w-full flex-col gap-2 px-2 pt-2", children: [_jsx("label", { htmlFor: "selectionDynamicProviderCtxt", className: classNames("form-field-label", styles.fieldLabel), children: "Selection Dynamic Provider Context" }), _jsx(SolidCodeEditor, { value: (_46 = formik.values.selectionDynamicProviderCtxt) !== null && _46 !== void 0 ? _46 : "", 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: (_48 = (_47 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _47 === void 0 ? void 0 : _47.selectionDynamicProviderCtxt) === null || _48 === void 0 ? void 0 : _48.toString() }))] })), currentFields.includes("computedFieldValueProviderCtxt") && (_jsxs("div", { className: "field mt-4 flex w-full flex-col gap-2 px-2 pt-2", children: [_jsx("label", { htmlFor: "computedFieldValueProviderCtxt", className: classNames("form-field-label", styles.fieldLabel), children: "Computed Field Value Provider Context" }), _jsx(SolidCodeEditor, { value: (_49 = formik.values.computedFieldValueProviderCtxt) !== null && _49 !== void 0 ? _49 : "", 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: (_51 = (_50 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _50 === void 0 ? void 0 : _50.computedFieldValueProviderCtxt) === null || _51 === void 0 ? void 0 : _51.toString() }))] }))] })), showValidationSection && (_jsxs(_Fragment, { children: [_jsx("p", { className: "form-wrapper-heading", children: "Validations" }), _jsxs("div", { className: "flex flex-wrap -mx-2 -mt-2", children: [(showRegexFields && selectedTypeValue === "password") &&
-                                                                                _jsx(_Fragment, { children: _jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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);
+                                                                                        return formik.setFieldValue("relationCascade", value);
+                                                                                    }, placeholder: "Cascade", className: classNames("w-full", {
+                                                                                        "p-invalid": isFormFieldValid(formik, "relationCascade"),
+                                                                                    }) }), isFormFieldValid(formik, "relationCascade") && (_jsx("p", { className: styles.fieldError, children: (_19 = (_18 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _18 === void 0 ? void 0 : _18.relationCascade) === null || _19 === void 0 ? void 0 : _19.toString() }))] })), currentFields.includes("relationModelModuleName") && (_jsxs("div", { className: "field mt-1 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/2", 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: (_21 = (_20 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _20 === void 0 ? void 0 : _20.relationModelModuleName) === null || _21 === void 0 ? void 0 : _21.toString() }))] })), currentFields.includes("relationCoModelSingularName") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: (_23 = (_22 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _22 === void 0 ? void 0 : _22.relationCoModelSingularName) === null || _23 === void 0 ? void 0 : _23.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 mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: isExistingFieldReadOnly, value: formik.values.relationCoModelColumnName, className: classNames(styles.fieldInput, {
+                                                                                        "p-invalid": isFormFieldValid(formik, "relationCoModelColumnName"),
+                                                                                    }) }), isFormFieldValid(formik, "relationCoModelColumnName") && (_jsx("p", { className: styles.fieldError, children: (_25 = (_24 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _24 === void 0 ? void 0 : _24.relationCoModelColumnName) === null || _25 === void 0 ? void 0 : _25.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 mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: (_27 = (_26 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _26 === void 0 ? void 0 : _26.userKey) === null || _27 === void 0 ? void 0 : _27.toString() }))] })), currentFields.includes("relationFieldFixedFilter") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-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, className: classNames(styles.fieldTextarea, {
+                                                                                        "p-invalid": isFormFieldValid(formik, "relationFieldFixedFilter"),
+                                                                                    }) }), isFormFieldValid(formik, "relationFieldFixedFilter") && (_jsx("p", { className: styles.fieldError, children: (_29 = (_28 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _28 === void 0 ? void 0 : _28.relationFieldFixedFilter) === null || _29 === void 0 ? void 0 : _29.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 mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/2", children: [_jsx("label", { htmlFor: "relationCreateInverse", className: classNames("form-field-label", styles.fieldLabel), children: "Relation Create Inverse" }), _jsxs("div", { className: "flex 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: (_31 = (_30 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _30 === void 0 ? void 0 : _30.relationCreateInverse) === null || _31 === void 0 ? void 0 : _31.toString() }))] })), currentFields.includes("relationCoModelFieldName") && formik.values.relationCreateInverse && !formik.values.relationCoModelSingularName && (_jsx("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/2", children: _jsx(SolidMessage, { text: "Please select Co-model" }) })), currentFields.includes("relationCoModelFieldName") && formik.values.relationCreateInverse && formik.values.relationCoModelSingularName && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: isExistingFieldReadOnly, 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: (_32 = formik.values.relationCoModelFieldName) !== null && _32 !== void 0 ? _32 : 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: (_33 = formik.values.relationCoModelFieldName) !== null && _33 !== void 0 ? _33 : "".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: (_34 = formik.values.relationCoModelSingularName) !== null && _34 !== void 0 ? _34 : '{{}}' }), " when setting create inverse true."] }), isFormFieldValid(formik, "relationCoModelFieldName") && (_jsx("p", { className: styles.fieldError, children: (_36 = (_35 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _35 === void 0 ? void 0 : _35.relationCoModelFieldName) === null || _36 === void 0 ? void 0 : _36.toString() }))] })), currentFields.includes("relationJoinTableName") && formik.values.relationType === "many-to-many" && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: isExistingFieldReadOnly, value: formik.values.relationJoinTableName, className: classNames(styles.fieldInput, {
+                                                                                        "p-invalid": isFormFieldValid(formik, "relationJoinTableName"),
+                                                                                    }) }), isFormFieldValid(formik, "relationJoinTableName") && (_jsx("p", { className: styles.fieldError, children: (_38 = (_37 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _37 === void 0 ? void 0 : _37.relationJoinTableName) === null || _38 === void 0 ? void 0 : _38.toString() }))] })), currentFields.includes("selectionDynamicProvider") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: (_40 = (_39 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _39 === void 0 ? void 0 : _39.selectionDynamicProvider) === null || _40 === void 0 ? void 0 : _40.toString() }))] })), currentFields.includes("selectionValueType") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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("p", { className: styles.fieldError, children: (_42 = (_41 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _41 === void 0 ? void 0 : _41.selectionValueType) === null || _42 === void 0 ? void 0 : _42.toString() }))] })), currentFields.includes("selectionStaticValues") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: (_44 = (_43 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _43 === void 0 ? void 0 : _43.selectionStaticValues) === null || _44 === void 0 ? void 0 : _44.toString() }))] })), currentFields.includes("computedFieldValueType") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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("p", { className: styles.fieldError, children: (_46 = (_45 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _45 === void 0 ? void 0 : _45.computedFieldValueType) === null || _46 === void 0 ? void 0 : _46.toString() }))] })), currentFields.includes("computedFieldValueProvider") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: (_48 = (_47 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _47 === void 0 ? void 0 : _47.computedFieldValueProvider) === null || _48 === void 0 ? void 0 : _48.toString() }))] })), currentFields.includes("computedFieldTriggerConfig") && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2", children: [(fieldMetaData === null || fieldMetaData === void 0 ? void 0 : fieldMetaData.computedFieldTriggerConfig) === null
+                                                                                    &&
+                                                                                        _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 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("p", { className: styles.fieldError, children: formik.errors.computedFieldTriggerConfig }))] })), currentFields.includes("selectionDynamicProviderCtxt") && (_jsxs("div", { className: "field mt-4 flex w-full flex-col gap-2 px-2 pt-2", children: [_jsx("label", { htmlFor: "selectionDynamicProviderCtxt", className: classNames("form-field-label", styles.fieldLabel), children: "Selection Dynamic Provider Context" }), _jsx(SolidCodeEditor, { value: (_49 = formik.values.selectionDynamicProviderCtxt) !== null && _49 !== void 0 ? _49 : "", 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: (_51 = (_50 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _50 === void 0 ? void 0 : _50.selectionDynamicProviderCtxt) === null || _51 === void 0 ? void 0 : _51.toString() }))] })), currentFields.includes("computedFieldValueProviderCtxt") && (_jsxs("div", { className: "field mt-4 flex w-full flex-col gap-2 px-2 pt-2", children: [_jsx("label", { htmlFor: "computedFieldValueProviderCtxt", className: classNames("form-field-label", styles.fieldLabel), children: "Computed Field Value Provider Context" }), _jsx(SolidCodeEditor, { value: (_52 = formik.values.computedFieldValueProviderCtxt) !== null && _52 !== void 0 ? _52 : "", 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: (_54 = (_53 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _53 === void 0 ? void 0 : _53.computedFieldValueProviderCtxt) === null || _54 === void 0 ? void 0 : _54.toString() }))] }))] })), showValidationSection && (_jsxs(_Fragment, { children: [_jsx("p", { className: "form-wrapper-heading", children: "Validations" }), _jsxs("div", { className: "flex flex-wrap -mx-2 -mt-2", children: [(showRegexFields && selectedTypeValue === "password") &&
+                                                                                    _jsx(_Fragment, { children: _jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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 mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: (_56 = (_55 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _55 === void 0 ? void 0 : _55.regexPattern) === null || _56 === void 0 ? void 0 : _56.toString() }))] }), showRegexFields && (_jsxs("div", { className: "field mt-2 mb-3 flex w-full flex-col gap-2 px-2 pt-2 md:mb-3 md:w-1/2", 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: (_58 = (_57 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _57 === void 0 ? void 0 : _57.regexPatternNotMatchingErrorMsg) === null || _58 === void 0 ? void 0 : _58.toString() }))] }))] })), (showMinFields || showMaxFields) &&
+                                                                                    _jsxs(_Fragment, { children: [showMinFields && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: isExistingFieldReadOnly }) }), isFormFieldValid(formik, "min") && (_jsx("p", { className: styles.fieldError, children: (_60 = (_59 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _59 === void 0 ? void 0 : _59.min) === null || _60 === void 0 ? void 0 : _60.toString() }))] })), showMaxFields && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: isExistingFieldReadOnly }) }), isFormFieldValid(formik, "max") && (_jsx("p", { className: styles.fieldError, children: (_62 = (_61 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _61 === void 0 ? void 0 : _61.max) === null || _62 === void 0 ? void 0 : _62.toString() }))] }))] }), showOrmOptions && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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-4 items-center" }), isFormFieldValid(formik, "ormType") && (_jsx("p", { className: styles.fieldError, children: (_64 = (_63 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _63 === void 0 ? void 0 : _63.ormType) === null || _64 === void 0 ? void 0 : _64.toString() }))] }))] })] })), (formik.values.relationType !== "many-to-many" && formik.values.relationType !== "one-to-many") && _jsx("p", { className: "form-wrapper-heading", children: "Settings" }), _jsxs("div", { className: "mt-1 flex flex-wrap -mx-2 -mt-2 md:mt-0", children: [currentFields.includes("required") && (formik.values.relationType !== "many-to-many" && formik.values.relationType !== "one-to-many") && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(SolidCheckbox, { id: "required", name: "required", onChange: function (event) {
+                                                                                                if (!formik.values.isPrimaryKey && !formik.values.unique) {
+                                                                                                    formik.setFieldValue("required", event.currentTarget.checked);
+                                                                                                }
+                                                                                            }, 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: (_66 = (_65 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _65 === void 0 ? void 0 : _65.required) === null || _66 === void 0 ? void 0 : _66.toString() }))] })), currentFields.includes("unique") && selectedTypeValue !== 'relation' && (_jsxs("div", { className: "field flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(SolidCheckbox, { id: "unique", name: "unique", onChange: function (event) {
+                                                                                                // Prevent unchecking if isPrimaryKey is true
+                                                                                                if (!formik.values.isPrimaryKey) {
+                                                                                                    var nextValue = event.currentTarget.checked;
+                                                                                                    formik.setFieldValue("unique", nextValue);
+                                                                                                    formik.setFieldValue("isUserKey", false);
+                                                                                                    // Auto-enable required when unique is checked
+                                                                                                    if (nextValue) {
+                                                                                                        formik.setFieldValue("required", true);
+                                                                                                    }
+                                                                                                    else {
+                                                                                                        formik.setFieldValue("required", false);
                                                                                                     }
-                                                                                                }, placeholder: "Select a Password Policy", className: "w-full" })] }) }), showRegexFields && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: (_53 = (_52 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _52 === void 0 ? void 0 : _52.regexPattern) === null || _53 === void 0 ? void 0 : _53.toString() }))] }), showRegexFields && (_jsxs("div", { className: "field mt-2 mb-3 flex w-full flex-col gap-2 px-2 pt-2 md:mb-3 md:w-1/2", 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: (_55 = (_54 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _54 === void 0 ? void 0 : _54.regexPatternNotMatchingErrorMsg) === null || _55 === void 0 ? void 0 : _55.toString() }))] }))] })), (showMinFields || showMaxFields) &&
-                                                                                _jsxs(_Fragment, { children: [showMinFields && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: isExistingFieldReadOnly }) }), isFormFieldValid(formik, "min") && (_jsx("p", { className: styles.fieldError, children: (_57 = (_56 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _56 === void 0 ? void 0 : _56.min) === null || _57 === void 0 ? void 0 : _57.toString() }))] })), showMaxFields && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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: isExistingFieldReadOnly }) }), isFormFieldValid(formik, "max") && (_jsx("p", { className: styles.fieldError, children: (_59 = (_58 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _58 === void 0 ? void 0 : _58.max) === null || _59 === void 0 ? void 0 : _59.toString() }))] }))] }), showOrmOptions && (_jsxs("div", { className: "field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/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-4 items-center" }), isFormFieldValid(formik, "ormType") && (_jsx("p", { className: styles.fieldError, children: (_61 = (_60 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _60 === void 0 ? void 0 : _60.ormType) === null || _61 === void 0 ? void 0 : _61.toString() }))] }))] })] })), (formik.values.relationType !== "many-to-many" && formik.values.relationType !== "one-to-many") && _jsx("p", { className: "form-wrapper-heading", children: "Settings" }), _jsxs("div", { className: "mt-1 flex flex-wrap -mx-2 -mt-2 md:mt-0", children: [currentFields.includes("required") && (formik.values.relationType !== "many-to-many" && formik.values.relationType !== "one-to-many") && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(SolidCheckbox, { id: "required", name: "required", onChange: function (event) {
-                                                                                            if (!formik.values.isPrimaryKey && !formik.values.unique) {
-                                                                                                formik.setFieldValue("required", event.currentTarget.checked);
-                                                                                            }
-                                                                                        }, 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: (_63 = (_62 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _62 === void 0 ? void 0 : _62.required) === null || _63 === void 0 ? void 0 : _63.toString() }))] })), currentFields.includes("unique") && selectedTypeValue !== 'relation' && (_jsxs("div", { className: "field flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(SolidCheckbox, { id: "unique", name: "unique", onChange: function (event) {
-                                                                                            // Prevent unchecking if isPrimaryKey is true
-                                                                                            if (!formik.values.isPrimaryKey) {
-                                                                                                var nextValue = event.currentTarget.checked;
-                                                                                                formik.setFieldValue("unique", nextValue);
-                                                                                                formik.setFieldValue("isUserKey", false);
-                                                                                                // Auto-enable required when unique is checked
-                                                                                                if (nextValue) {
-                                                                                                    formik.setFieldValue("required", true);
                                                                                                 }
-                                                                                                else {
-                                                                                                    formik.setFieldValue("required", false);
+                                                                                            }, 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: (_68 = (_67 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _67 === void 0 ? void 0 : _67.unique) === null || _68 === void 0 ? void 0 : _68.toString() }))] })), currentFields.includes("index") && selectedTypeValue !== 'relation' && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex 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: (_70 = (_69 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _69 === void 0 ? void 0 : _69.index) === null || _70 === void 0 ? void 0 : _70.toString() }))] })), currentFields.includes("private") && selectedTypeValue !== 'relation' && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex 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: (_72 = (_71 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _71 === void 0 ? void 0 : _71.private) === null || _72 === void 0 ? void 0 : _72.toString() }))] })), currentFields.includes("encrypt") && selectedTypeValue !== 'relation' && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex 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: (_74 = (_73 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _73 === void 0 ? void 0 : _73.encrypt) === null || _74 === void 0 ? void 0 : _74.toString() }))] })), currentFields.includes("isMultiSelect") && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex 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: (_76 = (_75 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _75 === void 0 ? void 0 : _75.isMultiSelect) === null || _76 === void 0 ? void 0 : _76.toString() }))] })), currentFields.includes("enableAuditTracking") && formik.values.relationType !== "one-to-many" && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex 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: (_78 = (_77 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _77 === void 0 ? void 0 : _77.enableAuditTracking) === null || _78 === void 0 ? void 0 : _78.toString() }))] })), currentFields.includes("isUserKey") && formik.values.unique && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex 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: (_80 = (_79 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _79 === void 0 ? void 0 : _79.isUserKey) === null || _80 === void 0 ? void 0 : _80.toString() }))] })), currentFields.includes("isPrimaryKey") && (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.isLegacyTable) && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex 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 (checked) {
+                                                                                                    formik.setFieldValue("required", true);
+                                                                                                    formik.setFieldValue("unique", true);
                                                                                                 }
-                                                                                            }
-                                                                                        }, 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: (_65 = (_64 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _64 === void 0 ? void 0 : _64.unique) === null || _65 === void 0 ? void 0 : _65.toString() }))] })), currentFields.includes("index") && selectedTypeValue !== 'relation' && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex 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: (_67 = (_66 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _66 === void 0 ? void 0 : _66.index) === null || _67 === void 0 ? void 0 : _67.toString() }))] })), currentFields.includes("private") && selectedTypeValue !== 'relation' && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex 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: (_69 = (_68 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _68 === void 0 ? void 0 : _68.private) === null || _69 === void 0 ? void 0 : _69.toString() }))] })), currentFields.includes("encrypt") && selectedTypeValue !== 'relation' && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex 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: (_71 = (_70 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _70 === void 0 ? void 0 : _70.encrypt) === null || _71 === void 0 ? void 0 : _71.toString() }))] })), currentFields.includes("isMultiSelect") && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex 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: (_73 = (_72 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _72 === void 0 ? void 0 : _72.isMultiSelect) === null || _73 === void 0 ? void 0 : _73.toString() }))] })), currentFields.includes("enableAuditTracking") && formik.values.relationType !== "one-to-many" && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex 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: (_75 = (_74 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _74 === void 0 ? void 0 : _74.enableAuditTracking) === null || _75 === void 0 ? void 0 : _75.toString() }))] })), currentFields.includes("isUserKey") && formik.values.unique && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex 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: (_77 = (_76 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _76 === void 0 ? void 0 : _76.isUserKey) === null || _77 === void 0 ? void 0 : _77.toString() }))] })), currentFields.includes("isPrimaryKey") && (modelMetaData === null || modelMetaData === void 0 ? void 0 : modelMetaData.isLegacyTable) && (_jsxs("div", { className: "field mt-2 flex w-1/2 flex-col gap-2 px-2 pt-2", children: [_jsxs("div", { className: "flex 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 (checked) {
-                                                                                                formik.setFieldValue("required", true);
-                                                                                                formik.setFieldValue("unique", true);
-                                                                                            }
-                                                                                        }, 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: (_79 = (_78 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _78 === void 0 ? void 0 : _78.isPrimaryKey) === null || _79 === void 0 ? void 0 : _79.toString() }))] }))] }), formik.values.encrypt === true && (_jsxs("div", { className: "mt-2 flex flex-wrap -mx-2 -mt-2", children: [_jsx("div", { className: "w-full px-2 pt-2 md:w-1/2", children: _jsxs("div", { className: "field flex w-full flex-col 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: (_81 = (_80 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _80 === void 0 ? void 0 : _80.encryptionType) === null || _81 === void 0 ? void 0 : _81.toString() }))] }) }), _jsx("div", { className: "w-full px-2 pt-2 md:w-1/2", children: _jsxs("div", { className: "field flex w-full flex-col 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: (_83 = (_82 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _82 === void 0 ? void 0 : _82.decryptWhen) === null || _83 === void 0 ? void 0 : _83.toString() }))] }) })] }))] })] }), _jsxs("div", { className: "mt-4 flex gap-4", children: [_jsx("div", { children: _jsx(SolidButton, { label: submitLabel, size: "small", onClick: function () { return showError(); }, type: "submit" }) }), _jsx("div", { children: _jsx(SolidButton, { label: "Cancel", size: "small", severity: "secondary", type: "reset", onClick: closeForm, outlined: true }) })] })] }) }) }) }) }), _jsx(SolidDialog, { open: isBackPopupVisible, onOpenChange: function (next) {
+                                                                                            }, 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: (_82 = (_81 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _81 === void 0 ? void 0 : _81.isPrimaryKey) === null || _82 === void 0 ? void 0 : _82.toString() }))] }))] }), formik.values.encrypt === true && (_jsxs("div", { className: "mt-2 flex flex-wrap -mx-2 -mt-2", children: [_jsx("div", { className: "w-full px-2 pt-2 md:w-1/2", children: _jsxs("div", { className: "field flex w-full flex-col 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: (_84 = (_83 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _83 === void 0 ? void 0 : _83.encryptionType) === null || _84 === void 0 ? void 0 : _84.toString() }))] }) }), _jsx("div", { className: "w-full px-2 pt-2 md:w-1/2", children: _jsxs("div", { className: "field flex w-full flex-col 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: (_86 = (_85 = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _85 === void 0 ? void 0 : _85.decryptWhen) === null || _86 === void 0 ? void 0 : _86.toString() }))] }) })] }))] })] }) }), _jsxs("div", { className: "solid-field-form-actions", children: [_jsx(SolidButton, { label: submitLabel, size: "small", onClick: function () { return showError(); }, type: "submit" }), _jsx(SolidButton, { label: "Cancel", size: "small", severity: "secondary", type: "reset", onClick: closeForm, outlined: true })] })] }) }) }) }) }), _jsx(SolidDialog, { open: isBackPopupVisible, onOpenChange: function (next) {
                     if (!next) {
                         setIsBackPopupVisible(false);
                     }