@solidxai/core-ui 0.1.9-beta.2 → 0.1.9-beta.21

package/dist/components/core/form/SolidFormView.js

@@ -49,7 +49,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useSession } from '../../../hooks/useSession';
 import { permissionExpression } from "../../../helpers/permissions";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
-import { useGetSolidViewLayoutQuery } from "../../../redux/api/solidViewApi";
+import { useGetSolidViewLayoutQuery, useLazyGetSolidViewLayoutQuery } from "../../../redux/api/solidViewApi";
 import { useLazyCheckIfPermissionExistsQuery } from "../../../redux/api/userApi";
 import { useFormik } from "formik";
 import { usePathname } from "../../../hooks/usePathname";
@@ -93,6 +93,97 @@ import { useDispatch } from "react-redux";
 import { SolidButton, SolidConfirmDialog } from "../../shad-cn-ui";
 import { SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle } from "../../shad-cn-ui/SolidDialog";
 import { SolidHeaderRequestStatus } from "../../common/SolidHeaderRequestStatus";
+var LAYOUT_CLASSNAME_MAPPER = {
+    grid: "flex flex-wrap",
+    formgrid: "flex-wrap",
+    "col-12": "w-full",
+    "col-11": "w-[91.666667%]",
+    "col-10": "w-[83.333333%]",
+    "col-9": "w-3/4",
+    "col-8": "w-[66.666667%]",
+    "col-7": "w-[58.333333%]",
+    "col-6": "w-1/2",
+    "col-5": "w-[41.666667%]",
+    "col-4": "w-1/3",
+    "col-3": "w-1/4",
+    "col-2": "w-[16.666667%]",
+    "col-1": "w-[8.333333%]",
+    "flex-column": "flex-col",
+    "flex-row": "flex-row",
+    "flex-wrap": "flex-wrap",
+    "align-items-start": "items-start",
+    "align-items-center": "items-center",
+    "align-items-end": "items-end",
+    "justify-content-start": "justify-start",
+    "justify-content-center": "justify-center",
+    "justify-content-end": "justify-end",
+    "justify-content-between": "justify-between",
+    "m-0": "m-0",
+    "mt-0": "mt-0",
+    "mt-1": "mt-1",
+    "mt-2": "mt-2",
+    "mt-3": "mt-3",
+    "mt-4": "mt-4",
+    "mb-0": "mb-0",
+    "mb-2": "mb-2",
+    "mb-3": "mb-3",
+    "my-4": "my-4",
+    "mx-auto": "mx-auto",
+    "px-0": "px-0",
+    "px-2": "px-2",
+    "px-3": "px-3",
+    "px-4": "px-4",
+    "py-2": "py-2",
+    "py-3": "py-3",
+    "pt-0": "pt-0",
+    "pt-2": "pt-2",
+    "pb-0": "pb-0",
+    "pb-2": "pb-2",
+    "pb-3": "pb-3",
+    "w-full": "w-full",
+    "h-full": "h-full",
+};
+var PRIMEFLEX_BREAKPOINT_TO_TAILWIND = {
+    sm: "sm",
+    md: "md",
+    lg: "lg",
+    xl: "xl",
+};
+var mapLayoutToken = function (token) {
+    var directMatch = LAYOUT_CLASSNAME_MAPPER[token];
+    if (directMatch)
+        return directMatch;
+    var responsiveColumnMatch = token.match(/^col-(sm|md|lg|xl)-(\d{1,2})$/);
+    if (responsiveColumnMatch) {
+        var breakpoint = responsiveColumnMatch[1], columnSize = responsiveColumnMatch[2];
+        var widthClass = LAYOUT_CLASSNAME_MAPPER["col-".concat(columnSize)];
+        if (widthClass) {
+            return "".concat(PRIMEFLEX_BREAKPOINT_TO_TAILWIND[breakpoint], ":").concat(widthClass);
+        }
+    }
+    return token;
+};
+var normalizeLayoutClassName = function (className) {
+    if (!className)
+        return className;
+    return className
+        .split(/\s+/)
+        .filter(Boolean)
+        .map(function (token) {
+        var parts = token.split(":");
+        var baseToken = parts[parts.length - 1];
+        var responsivePrefix = parts.length > 1 ? "".concat(parts.slice(0, -1).join(":"), ":") : "";
+        var mappedToken = mapLayoutToken(baseToken);
+        return mappedToken ? "".concat(responsivePrefix).concat(mappedToken) : token;
+    })
+        .join(" ");
+};
+var normalizeLayoutAttrs = function (attrs) {
+    if (attrs === void 0) { attrs = {}; }
+    if (!(attrs === null || attrs === void 0 ? void 0 : attrs.className))
+        return attrs;
+    return __assign(__assign({}, attrs), { className: normalizeLayoutClassName(attrs.className) });
+};
 var getLayoutFields = function (node) {
     var fields = [];
     if (node.type === "field") {
@@ -216,26 +307,36 @@ var SolidField = function (_a) {
 };
 var SolidGroup = function (_a) {
     var children = _a.children, attrs = _a.attrs;
-    var className = ["solid-form-layout-group", attrs.label ? "solid-form-layout-group--labeled" : "", attrs.className]
+    var className = [
+        "solid-form-layout-group",
+        "px-2",
+        "pt-2",
+        attrs.label ? "solid-form-layout-group--labeled" : "",
+        attrs.className,
+    ]
         .filter(Boolean)
         .join(" ");
-    return (_jsxs("div", { className: className, children: [attrs.label && _jsx("p", { className: "solid-form-layout-label", children: attrs.label }), _jsx("div", { className: "grid", children: children })] })
+    return (_jsxs("div", { className: className, children: [attrs.label && _jsx("p", { className: "solid-form-layout-label", children: attrs.label }), _jsx("div", { className: "flex flex-wrap -mx-2 -mt-2", children: children })] })
     // <div className={className}>
     //     <div className="s_group">
     //         <fieldset>
     //             {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
-    //             <div className="grid">{children}</div>
+    //             <div className="flex flex-wrap -mx-2 -mt-2">{children}</div>
     //         </fieldset>
     //     </div>
     // </div>
-    // <div className="formgrid grid">
-    //     {children}
-    // </div>
     );
 };
 var SolidRow = function (_a) {
     var children = _a.children, attrs = _a.attrs;
-    var className = ["row", "solid-form-layout-row", attrs.label ? "solid-form-layout-row--labeled" : "", attrs.className]
+    var className = [
+        "row",
+        "solid-form-layout-row",
+        "px-2",
+        "pt-2",
+        attrs.label ? "solid-form-layout-row--labeled" : "",
+        attrs.className,
+    ]
         .filter(Boolean)
         .join(" ");
     return (
@@ -243,24 +344,31 @@ var SolidRow = function (_a) {
     //     <div className="s_group">
     //         <fieldset>
     //             {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
-    //             <div className="grid">{children}</div>
+    //             <div className="flex flex-wrap -mx-2 -mt-2">{children}</div>
     //         </fieldset>
     //     </div>
     // </div>
-    _jsxs("div", { className: className, children: [attrs.label && _jsx("p", { className: "solid-form-layout-label", children: attrs.label }), _jsx("div", { className: "grid", children: children })] })
+    _jsxs("div", { className: className, children: [attrs.label && _jsx("p", { className: "solid-form-layout-label", children: attrs.label }), _jsx("div", { className: "flex flex-wrap -mx-2 -mt-2", children: children })] })
     // <div>{children}</div>
     );
 };
 var SolidColumn = function (_a) {
     var children = _a.children, attrs = _a.attrs;
-    var className = ["solid-form-layout-column", attrs.label ? "solid-form-layout-column--labeled" : "", attrs.className]
+    var className = [
+        "solid-form-layout-column",
+        "px-2",
+        "pt-2",
+        "min-w-0",
+        attrs.label ? "solid-form-layout-column--labeled" : "",
+        attrs.className,
+    ]
         .filter(Boolean)
         .join(" ");
-    return (_jsxs("div", { className: className, children: [attrs.label && _jsx("p", { className: "solid-form-layout-label", children: attrs.label }), _jsx("div", { className: "grid", children: children })] }));
+    return (_jsxs("div", { className: className, children: [attrs.label && _jsx("p", { className: "solid-form-layout-label", children: attrs.label }), _jsx("div", { className: "flex flex-wrap -mx-2 -mt-2", children: children })] }));
 };
 var SolidSheet = function (_a) {
     var children = _a.children;
-    return (_jsx("div", { className: "p-fluid p-grid", children: children }));
+    return (_jsx("div", { className: "solid-fluid flex flex-wrap -mx-2 mt-1", children: children }));
 };
 // Internal tab data carrier — SolidNotebook reads props from this
 var SolidPageTab = function (_a) {
@@ -362,7 +470,7 @@ var SolidPage = function (_a) {
     var fieldsName = fields.map(function (f) { return f.attrs.name; });
     var errorCount = formik.submitCount > 0 ? fieldsName.filter(function (name) { return !!formik.errors[name]; }).length : 0;
     var label = "".concat(attrs.label).concat(errorCount > 0 ? " (".concat(errorCount, ")") : '');
-    return (_jsx(SolidPageTab, { label: label, tabKey: key, hasError: errorCount > 0, children: _jsx("div", { className: "p-fluid", children: children }) }, key));
+    return (_jsx(SolidPageTab, { label: label, tabKey: key, hasError: errorCount > 0, children: _jsx("div", { className: "solid-fluid", children: children }) }, key));
 };
 // Original code...
 // const addLevelToGroups = (layout: any, level = 1) => {
@@ -372,7 +480,6 @@ var SolidPage = function (_a) {
 //             element.attrs = {
 //                 ...element.attrs,
 //                 level: level,  // Add level information to the attrs
-//                 // className: level === 1 ? 'col-12' : 'col-6',  // Assign className based on level
 //             };
 //         } else {
 //             element.children = addLevelToGroups(element.children, level);
@@ -628,6 +735,7 @@ var SolidFormView = function (params) {
     var _30 = useState({}), formViewMetaData = _30[0], setFormViewMetaData = _30[1];
     var _31 = useState(null), formViewLayout = _31[0], setFormViewLayout = _31[1];
     var _32 = useGetSolidViewLayoutQuery(formViewMetaDataQs), solidFormViewMetaData = _32.data, solidFormViewMetaDataIsLoading = _32.isLoading;
+    var triggerGetSolidViewLayout = useLazyGetSolidViewLayoutQuery()[0];
     var entityDisplayName = ((_c = (_b = (_a = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.displayName) || params.modelName;
     var _33 = useState(true), refreshChatterMessage = _33[0], setRefreshChatterMessage = _33[1];
     useEffect(function () {
@@ -797,7 +905,7 @@ var SolidFormView = function (params) {
                         baseFormPath = normalizeSolidFormActionPath(pathname, "form");
                         queryParams = new URLSearchParams(searchParams.toString());
                         queryParams.set("viewMode", "view");
-                        router.push("".concat(baseFormPath, "/").concat((_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.id, "?").concat(queryParams.toString()));
+                        router.replace("".concat(baseFormPath, "/").concat((_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.id, "?").concat(queryParams.toString()));
                         setViewMode("view");
                     }
                     return [2 /*return*/, result];
@@ -1049,7 +1157,7 @@ var SolidFormView = function (params) {
     // }, [solidFormViewMetaData, solidFormViewData]);
     useEffect(function () {
         var runFormEvents = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var workingLayout, workingFormData, baseEvent, onFormLayoutLoadFn, fn, result, e_1, onFormDataLoadFn, fn, result, e_2, onFormLoadFn, fn, result, e_3;
+            var workingLayout, workingFormData, solidFieldsMetadata, baseEvent, onFormLayoutLoadFn, fn, result, e_1, onFormDataLoadFn, fn, result, e_2, onFormLoadFn, fn, result, e_3;
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
             return __generator(this, function (_p) {
                 switch (_p.label) {
@@ -1058,9 +1166,10 @@ var SolidFormView = function (params) {
                             return [2 /*return*/];
                         workingLayout = (_a = params.customLayout) !== null && _a !== void 0 ? _a : (_c = (_b = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _b === void 0 ? void 0 : _b.solidView) === null || _c === void 0 ? void 0 : _c.layout;
                         workingFormData = solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data;
+                        solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
                         baseEvent = {
                             parentData: params === null || params === void 0 ? void 0 : params.parentData,
-                            fieldsMetadata: solidFormViewMetaData,
+                            fieldsMetadata: solidFieldsMetadata,
                             viewMetadata: (_d = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _d === void 0 ? void 0 : _d.solidView,
                             queryParams: {
                                 actionName: actionName,
@@ -1157,7 +1266,7 @@ var SolidFormView = function (params) {
             enableReinitialize: true,
             onSubmit: onFormikSubmit,
         });
-        return (_jsx("div", { className: "solid-form-wrapper", ref: solidFormWrapperRef, children: _jsxs("div", { className: "solid-form-section", children: [_jsx("div", { className: "page-header solid-list-toolbar flex-column lg:flex-row", children: _jsxs("div", { className: "flex justify-content-between w-full solid-form-toolbar-row", children: [_jsx("div", { className: "flex gap-3 align-items-center solid-form-toolbar-left", children: _jsx("p", { className: "m-0 view-title solid-text-wrapper", children: "Loading form" }) }), _jsx("div", { className: "flex align-items-center solid-header-buttons-wrapper solid-form-toolbar-actions", children: _jsx(SolidHeaderRequestStatus, { label: "Loading..." }) })] }) }), _jsx("div", { className: "solid-view-loading-body-spacer flex-1 min-h-0" })] }) }));
+        return (_jsx("div", { className: "solid-form-wrapper ".concat(viewMode == "edit" ? "solid-form-edit" : "solid-form-view"), ref: solidFormWrapperRef, children: _jsxs("div", { className: "solid-form-section", children: [_jsx("div", { className: "page-header solid-list-toolbar flex-col lg:flex-row", children: _jsxs("div", { className: "flex justify-between w-full solid-form-toolbar-row", children: [_jsx("div", { className: "flex gap-4 items-center solid-form-toolbar-left", children: _jsx("p", { className: "m-0 view-title solid-text-wrapper", children: "Loading form" }) }), _jsx("div", { className: "flex items-center solid-header-buttons-wrapper solid-form-toolbar-actions", children: _jsx(SolidHeaderRequestStatus, { label: "Loading..." }) })] }) }), _jsx("div", { className: "solid-view-loading-body-spacer flex-1 min-h-0" })] }) }));
     }
     // At this point everything required to render the form is loaded, so we go ahead and start rendering things dynamically...
     else {
@@ -1179,6 +1288,9 @@ var SolidFormView = function (params) {
             if (params.parentData) {
                 fieldContext.parentData = params.parentData;
             }
+            if (params.parentFieldName) {
+                fieldContext.parentFieldName = params.parentFieldName;
+            }
             var solidField = fieldFactory(fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type, fieldContext);
             if (!(fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type)) {
                 var errorMessage = ((_g = formLayoutField === null || formLayoutField === void 0 ? void 0 : formLayoutField.attrs) === null || _g === void 0 ? void 0 : _g.label) ? (_h = formLayoutField === null || formLayoutField === void 0 ? void 0 : formLayoutField.attrs) === null || _h === void 0 ? void 0 : _h.label : formLayoutField.attrs.name;
@@ -1200,7 +1312,7 @@ var SolidFormView = function (params) {
             onSubmit: onFormikSubmit,
         });
         var formFieldOnXXX_1 = function (event, eventType) { return __awaiter(void 0, void 0, void 0, function () {
-            var _a, fieldName, value, type, checked, changeHandler, dynamicChangeHandler, event_1, updatedFormInfo;
+            var _a, fieldName, value, changeHandler, dynamicChangeHandler, event_1, updatedFormInfo;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
@@ -1208,11 +1320,12 @@ var SolidFormView = function (params) {
                         // Invoke the formik change
                         if (eventType === 'onFieldChange') {
                             formik.handleChange(event);
+                            formik.setFieldTouched(event.target.name, true, false);
                         }
                         else if (eventType === 'onFieldBlur') {
                             formik.handleBlur(event);
                         }
-                        _a = event.target, fieldName = _a.name, value = _a.value, type = _a.type, checked = _a.checked;
+                        _a = event.target, fieldName = _a.name, value = _a.value;
                         changeHandler = solidView_1.layout.attrs[eventType];
                         if (!changeHandler) {
                             changeHandler = solidView_1.layout[eventType];
@@ -1287,15 +1400,17 @@ var SolidFormView = function (params) {
             var _a, _b, _c;
             if (path === void 0) { path = "root"; }
             var type = element.type, attrs = element.attrs, body = element.body, children = element.children;
+            var normalizedAttrs = normalizeLayoutAttrs(attrs);
+            var normalizedElement = normalizedAttrs === attrs ? element : __assign(__assign({}, element), { attrs: normalizedAttrs });
             // const key = attrs?.name ?? generateRandomKey();
-            var key = (_c = (_b = (_a = attrs === null || attrs === void 0 ? void 0 : attrs.key) !== null && _a !== void 0 ? _a : attrs === null || attrs === void 0 ? void 0 : attrs.name) !== null && _b !== void 0 ? _b : attrs === null || attrs === void 0 ? void 0 : attrs.label) !== null && _c !== void 0 ? _c : "".concat(type, "-").concat(path);
-            var visible = attrs === null || attrs === void 0 ? void 0 : attrs.visible;
+            var key = (_c = (_b = (_a = normalizedAttrs === null || normalizedAttrs === void 0 ? void 0 : normalizedAttrs.key) !== null && _a !== void 0 ? _a : normalizedAttrs === null || normalizedAttrs === void 0 ? void 0 : normalizedAttrs.name) !== null && _b !== void 0 ? _b : normalizedAttrs === null || normalizedAttrs === void 0 ? void 0 : normalizedAttrs.label) !== null && _c !== void 0 ? _c : "".concat(type, "-").concat(path);
+            var visible = normalizedAttrs === null || normalizedAttrs === void 0 ? void 0 : normalizedAttrs.visible;
             if (visible === undefined || visible === null) {
                 visible = true;
             }
             // console.log(`Resolved visibility of form element ${ key } to ${ visible } `);
             // console.log(`Form element ${ key }: `, attrs);
-            var visibleToRole = (attrs === null || attrs === void 0 ? void 0 : attrs.roles) || [];
+            var visibleToRole = (normalizedAttrs === null || normalizedAttrs === void 0 ? void 0 : normalizedAttrs.roles) || [];
             if (visibleToRole.length > 0) {
                 if (!hasAnyRole(user === null || user === void 0 ? void 0 : user.roles, visibleToRole)) {
                     return _jsx(_Fragment, {});
@@ -1309,45 +1424,45 @@ var SolidFormView = function (params) {
                 case "div":
                     if (!children)
                         children = [];
-                    return _jsx("div", __assign({}, attrs, { children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }), key);
+                    return _jsx("div", __assign({}, normalizedAttrs, { children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }), key);
                 case "span":
-                    return _jsx("span", __assign({}, attrs, { children: body }), key);
+                    return _jsx("span", __assign({}, normalizedAttrs, { children: body }), key);
                 case "p":
-                    return _jsx("p", __assign({ className: attrs === null || attrs === void 0 ? void 0 : attrs.className }, attrs, { children: body }), key);
+                    return _jsx("p", __assign({ className: normalizedAttrs === null || normalizedAttrs === void 0 ? void 0 : normalizedAttrs.className }, normalizedAttrs, { children: body }), key);
                 case "h1":
-                    return _jsx("h1", __assign({}, attrs, { children: body }), key);
+                    return _jsx("h1", __assign({}, normalizedAttrs, { children: body }), key);
                 case "h2":
-                    return _jsx("h2", __assign({}, attrs, { children: body }), key);
+                    return _jsx("h2", __assign({}, normalizedAttrs, { children: body }), key);
                 case "ul":
                     if (!children)
                         children = [];
-                    return _jsx("ul", __assign({}, attrs, { children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }), key);
+                    return _jsx("ul", __assign({}, normalizedAttrs, { children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }), key);
                 case "li":
-                    return _jsx("li", __assign({}, attrs, { children: body }), key);
+                    return _jsx("li", __assign({}, normalizedAttrs, { children: body }), key);
                 case "sheet":
                     return _jsx(SolidSheet, { children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }, key);
                 case "group":
                     if (visible === true) {
-                        return _jsx(SolidGroup, { attrs: attrs, children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }, key);
+                        return _jsx(SolidGroup, { attrs: normalizedAttrs, children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }, key);
                     }
                     break;
                 case "row":
                     if (visible === true) {
-                        return _jsx(SolidRow, { attrs: attrs, children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }, key);
+                        return _jsx(SolidRow, { attrs: normalizedAttrs, children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }, key);
                     }
                     break;
                 case "column":
                     if (visible === true) {
-                        return _jsx(SolidColumn, { attrs: attrs, children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }, key);
+                        return _jsx(SolidColumn, { attrs: normalizedAttrs, children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }, key);
                     }
                     break;
                 case "field":
                     if (visible === true) {
                         // const fieldMetadata = solidFieldsMetadata[attrs.name];
-                        var fieldMetadata = recursiveFVMD.data.solidFieldsMetadata[attrs.name];
+                        var fieldMetadata = recursiveFVMD.data.solidFieldsMetadata[normalizedAttrs.name];
                         // Read only permission if there is no update permission on model and router doesnt contains new
                         var readOnlyPermission = !actionsAllowed.includes("".concat(permissionExpression(params.modelName, 'update'))) && params.id !== "new";
-                        return _jsx(SolidField, { field: element, formik: formik, fieldMetadata: fieldMetadata, initialEntityData: solidFormViewData ? solidFormViewData.data : {}, solidFormViewMetaData: recursiveFVMD, modelName: params.modelName, readOnly: readOnlyPermission, viewMode: viewMode, onChange: formFieldOnXXX_1, onBlur: formFieldOnXXX_1, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox, parentFieldName: params.parentFieldName, parentData: params.parentData, onEmbeddedFormSave: function () { return setRefreshChatterMessage(true); } }, attrs.name);
+                        return _jsx(SolidField, { field: normalizedElement, formik: formik, fieldMetadata: fieldMetadata, initialEntityData: solidFormViewData ? solidFormViewData.data : {}, solidFormViewMetaData: recursiveFVMD, modelName: params.modelName, readOnly: readOnlyPermission, viewMode: viewMode, onChange: formFieldOnXXX_1, onBlur: formFieldOnXXX_1, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox, parentFieldName: params.parentFieldName, parentData: params.parentData, onEmbeddedFormSave: function () { return setRefreshChatterMessage(true); } }, normalizedAttrs.name);
                     }
                     break;
                 case "notebook":
@@ -1439,38 +1554,61 @@ var SolidFormView = function (params) {
             }
         };
         //en 4 null
-        var handleLocaleChangeRedirect = function (locale, defaultEntityLocaleId, viewMode) {
-            var _a, _b;
-            var newViewMode = viewMode;
-            var defaultApplicableLocales = ((_a = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _a === void 0 ? void 0 : _a.applicableLocales) || [];
-            //fr 4
-            var matchingLocale = defaultApplicableLocales.find(function (loc) {
-                return loc.defaultEntityLocaleId &&
-                    loc.entityId &&
-                    loc.locale === locale;
-            });
-            // Extract the base path from the current pathname, removing query params if any
-            var basePath = pathname.split('?')[0];
-            // Determine entity part of the path (new or existing entityId)
-            var entityPart = (_b = matchingLocale === null || matchingLocale === void 0 ? void 0 : matchingLocale.entityId) !== null && _b !== void 0 ? _b : 'new';
-            if (entityPart === 'new' && viewMode === 'view') {
-                newViewMode = 'edit';
-            }
-            else if (entityPart !== 'new' && viewMode === 'view') {
-                newViewMode = 'view';
-            }
-            else {
-                newViewMode = 'edit';
-            }
-            // Construct new pathname using existing basePath and replacing entity segment
-            var updatedPath = basePath.replace(/\/form\/[^/]+/, "/form/".concat(entityPart));
-            var queryParams = new URLSearchParams({
-                viewMode: newViewMode,
-                locale: locale,
-                defaultEntityLocaleId: defaultEntityLocaleId,
+        var handleLocaleChangeRedirect = function (locale, defaultEntityLocaleId, viewMode) { return __awaiter(void 0, void 0, void 0, function () {
+            var newViewMode, defaultApplicableLocales, matchingLocale, resolvedDefaultEntityLocaleId, freshQuery, freshResponse, freshApplicableLocales, _a, basePath, entityPart, updatedPath, queryParams;
+            var _b, _c, _d;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        newViewMode = viewMode;
+                        defaultApplicableLocales = ((_b = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _b === void 0 ? void 0 : _b.applicableLocales) || [];
+                        matchingLocale = defaultApplicableLocales.find(function (loc) {
+                            return loc.defaultEntityLocaleId &&
+                                loc.entityId &&
+                                loc.locale === locale;
+                        });
+                        if (!!matchingLocale) return [3 /*break*/, 4];
+                        resolvedDefaultEntityLocaleId = defaultEntityLocaleId || params.id;
+                        freshQuery = qs.stringify(__assign(__assign({}, params), { viewType: 'form', defaultEntityLocaleId: resolvedDefaultEntityLocaleId }), { encodeValuesOnly: true });
+                        _e.label = 1;
+                    case 1:
+                        _e.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, triggerGetSolidViewLayout(freshQuery).unwrap()];
+                    case 2:
+                        freshResponse = _e.sent();
+                        freshApplicableLocales = ((_c = freshResponse === null || freshResponse === void 0 ? void 0 : freshResponse.data) === null || _c === void 0 ? void 0 : _c.applicableLocales) || [];
+                        matchingLocale = freshApplicableLocales.find(function (loc) {
+                            return loc.defaultEntityLocaleId &&
+                                loc.entityId &&
+                                loc.locale === locale;
+                        });
+                        return [3 /*break*/, 4];
+                    case 3:
+                        _a = _e.sent();
+                        return [3 /*break*/, 4];
+                    case 4:
+                        basePath = pathname.split('?')[0];
+                        entityPart = (_d = matchingLocale === null || matchingLocale === void 0 ? void 0 : matchingLocale.entityId) !== null && _d !== void 0 ? _d : 'new';
+                        if (entityPart === 'new' && viewMode === 'view') {
+                            newViewMode = 'edit';
+                        }
+                        else if (entityPart !== 'new' && viewMode === 'view') {
+                            newViewMode = 'view';
+                        }
+                        else {
+                            newViewMode = 'edit';
+                        }
+                        updatedPath = basePath.replace(/\/form\/[^/]+/, "/form/".concat(entityPart));
+                        queryParams = new URLSearchParams({
+                            viewMode: newViewMode,
+                            locale: locale,
+                            defaultEntityLocaleId: defaultEntityLocaleId,
+                        });
+                        router.push("".concat(updatedPath, "?").concat(queryParams.toString()));
+                        return [2 /*return*/];
+                }
             });
-            router.push("".concat(updatedPath, "?").concat(queryParams.toString()));
-        };
+        }); };
         var handleConfirmAccept = function () {
             var _a;
             (_a = confirmResolveRef.current) === null || _a === void 0 ? void 0 : _a.call(confirmResolveRef, true);
@@ -1524,7 +1662,9 @@ var SolidFormView = function (params) {
             return slide;
         })
             .filter(function (slide) { return !!slide; });
-        return (_jsxs("div", { className: "solid-form-wrapper", ref: solidFormWrapperRef, children: [_jsxs("div", { className: "solid-form-section", children: [_jsxs("form", { style: { width: '100%' }, onSubmit: formik.handleSubmit, children: [_jsx(FormikSubmitWatcher, { formik: formik, tabFieldsRef: tabFieldsRef, embeded: params.embeded, searchParams: searchParams, setRequestedTab: setRequestedTab, setRequestedTabVersion: setRequestedTabVersion }), _jsx(SolidFormActionHeader, { formik: formik, formData: solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data, params: params, actionsAllowed: actionsAllowed, formViewLayout: formViewLayout, solidView: solidView_1, solidFormViewMetaData: solidFormViewMetaData, initialEntityData: solidFormViewData ? solidFormViewData.data : {}, setDeleteDialogVisible: setDeleteDialogVisible, setLayoutDialogVisible: setLayoutDialogVisible, setRedirectToList: setRedirectToList, viewMode: viewMode, setViewMode: setViewMode, solidWorkflowFieldValue: solidWorkflowFieldValue, setSolidWorkflowFieldValue: setSolidWorkflowFieldValue, draftEnabled: (_m = (_l = (_k = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _k === void 0 ? void 0 : _k.solidView) === null || _l === void 0 ? void 0 : _l.model) === null || _m === void 0 ? void 0 : _m.draftPublishWorkflow, publish: published, internationalisationEnabled: (_q = (_p = (_o = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _o === void 0 ? void 0 : _o.solidView) === null || _p === void 0 ? void 0 : _p.model) === null || _q === void 0 ? void 0 : _q.internationalisation, handleDraftPublishWorkFlow: handleDraftPublishWorkFlow, onStepperUpdate: function () { return setRefreshChatterMessage(true); }, isSubmitting: isSubmitting, headerRequestStatusLabel: isSubmitting ? "Saving..." : null, showMobileOpenChatter: isMobileViewport && !isShowChatter && params.embeded !== true, onMobileOpenChatter: function () { return setShowChatter(true); } }), _jsxs("div", { className: "px-4 py-3 md:p-4 solid-form-content md:pt-1 ".concat(createMode ? 'solid-create-mode-form-content' : '', " ").concat(params.embeded === true ? 'h-auto' : ''), style: { maxHeight: params.embeded === true ? '80vh' : '', overflowY: 'auto' }, children: [DynamicHeaderComponent && _jsx(DynamicHeaderComponent, {}), params.id === 'new' && DynamicFormComponentNew ? (_jsx(DynamicFormComponentNew, { params: params })) : params.id !== 'new' && DynamicFormComponentEdit ? (_jsx(DynamicFormComponentEdit, { params: params })) : (renderFormDynamically(formViewMetaData, formViewLayout))] })] }), _jsx(SolidFormFooter, { params: params })] }), params.embeded !== true &&
+        return (_jsxs("div", { className: "solid-form-wrapper", ref: solidFormWrapperRef, children: [_jsxs("div", { className: "solid-form-section", children: [_jsxs("form", { style: { width: '100%' }, onSubmit: formik.handleSubmit, children: [_jsx(FormikSubmitWatcher, { formik: formik, tabFieldsRef: tabFieldsRef, embeded: params.embeded, searchParams: searchParams, setRequestedTab: setRequestedTab, setRequestedTabVersion: setRequestedTabVersion }), _jsx(SolidFormActionHeader, { formik: formik, formData: solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data, params: params, actionsAllowed: actionsAllowed, formViewLayout: formViewLayout, solidView: solidView_1, solidFormViewMetaData: solidFormViewMetaData, initialEntityData: solidFormViewData ? solidFormViewData.data : {}, setDeleteDialogVisible: setDeleteDialogVisible, setLayoutDialogVisible: setLayoutDialogVisible, setRedirectToList: setRedirectToList, viewMode: viewMode, setViewMode: setViewMode, solidWorkflowFieldValue: solidWorkflowFieldValue, setSolidWorkflowFieldValue: setSolidWorkflowFieldValue, draftEnabled: (_m = (_l = (_k = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _k === void 0 ? void 0 : _k.solidView) === null || _l === void 0 ? void 0 : _l.model) === null || _m === void 0 ? void 0 : _m.draftPublishWorkflow, publish: published, internationalisationEnabled: (_q = (_p = (_o = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _o === void 0 ? void 0 : _o.solidView) === null || _p === void 0 ? void 0 : _p.model) === null || _q === void 0 ? void 0 : _q.internationalisation, handleDraftPublishWorkFlow: handleDraftPublishWorkFlow, onStepperUpdate: function () { return setRefreshChatterMessage(true); }, isSubmitting: isSubmitting, 
+                                    // headerRequestStatusLabel={isSubmitting ? "Saving..." : null}
+                                    showMobileOpenChatter: isMobileViewport && !isShowChatter && params.embeded !== true, onMobileOpenChatter: function () { return setShowChatter(true); } }), _jsxs("div", { className: "px-3 py-3 md:p-4 solid-form-content md:pt-1 ".concat(createMode ? 'solid-create-mode-form-content' : 'solid-edit-mode-form-content', " ").concat(params.embeded === true ? 'h-auto' : ''), children: [DynamicHeaderComponent && _jsx(DynamicHeaderComponent, {}), params.id === 'new' && DynamicFormComponentNew ? (_jsx(DynamicFormComponentNew, { params: params })) : params.id !== 'new' && DynamicFormComponentEdit ? (_jsx(DynamicFormComponentEdit, { params: params })) : (renderFormDynamically(formViewMetaData, formViewLayout))] })] }), _jsx(SolidFormFooter, { params: params })] }), params.embeded !== true &&
                     _jsxs("div", { className: "chatter-section ".concat(isShowChatter === false ? 'collapsed' : 'open'), style: { width: chatterLocaleWidth }, children: [isShowChatter && (_jsx("div", { style: {
                                     width: 5,
                                     cursor: 'col-resize',
@@ -1535,10 +1675,10 @@ var SolidFormView = function (params) {
                                     zIndex: 9,
                                 }, onMouseDown: function () { return setIsResizingChatterLocale(true); } })), isShowChatter === true &&
                                 _jsx(SolidButton, { icon: "si si-angle-double-right", size: "sm", text: true, className: "chatter-collapse-btn", style: { width: 26, height: 26, aspectRatio: '1/1' }, onClick: function () { return setShowChatter(false); } }), isShowChatter === false ?
-                                _jsxs("div", { className: "flex flex-column gap-2 justify-content-center p-1", children: [((_t = (_s = (_r = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _r === void 0 ? void 0 : _r.solidView) === null || _s === void 0 ? void 0 : _s.model) === null || _t === void 0 ? void 0 : _t.draftPublishWorkflow) &&
+                                _jsxs("div", { className: "flex flex-col gap-2 justify-center p-1", children: [((_t = (_s = (_r = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _r === void 0 ? void 0 : _r.solidView) === null || _s === void 0 ? void 0 : _s.model) === null || _t === void 0 ? void 0 : _t.draftPublishWorkflow) &&
                                             _jsx("div", { className: "chatter-collapsed-content", onClick: function () { return handleChatterExpandClick_1('info'); }, children: "Info" }), _jsx("div", { className: "chatter-collapsed-content", onClick: function () { return handleChatterExpandClick_1('chatter'); }, children: "Audit Trail" }), _jsx(SolidButton, { icon: "si si-chevron-left", size: "sm", className: "px-0", style: { width: 30 }, onClick: function () { return handleChatterExpandClick_1('chatter'); } })] })
                                 :
-                                    _jsx(SolidChatterLocaleTabView, { createMode: createMode, setSelectedLocale: setSelectedLocale, selectedLocale: selectedLocale, solidFormViewMetaData: solidFormViewMetaData, id: params.id, refreshChatterMessage: refreshChatterMessage, setRefreshChatterMessage: setRefreshChatterMessage, activeTab: defaultTabViewOptionIndex, viewMode: viewMode, defaultEntityLocaleId: defaultEntityLocaleId, handleLocaleChangeRedirect: handleLocaleChangeRedirect, solidFormViewData: solidFormViewData, published: published, actionsAllowed: actionsAllowed, mcpUrl: mcpUrl })] }), _jsx(SolidConfirmDialog, { open: isDeleteDialogVisible, onCancel: onDeleteClose, onConfirm: function () { return handleDeleteEntity_1(); }, className: "solid-shadcn-confirm-dialog solid-delete-confirm-dialog", headerClassName: "solid-shadcn-dialog-head", bodyClassName: "solid-shadcn-dialog-body", footerClassName: "solid-shadcn-dialog-actions", separatorClassName: "solid-shadcn-dialog-sep", showSeparator: true, title: "Delete ".concat(entityDisplayName), message: _jsx("p", { className: "solid-shadcn-dialog-text", children: "Are you sure you want to delete this ".concat(entityDisplayName, "?") }), confirmLabel: "Delete", cancelLabel: "Cancel" }), _jsxs(SolidDialog, { open: isLayoutDialogVisible, onOpenChange: setLayoutDialogVisible, className: "solid-form-layout-dialog", children: [_jsxs(SolidDialogHeader, { className: "solid-shadcn-dialog-head", children: [_jsx(SolidDialogTitle, { children: "Change Form Layout" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogSeparator, {}), _jsx(SolidDialogBody, { className: "p-3 pt-0 lg:p-4", children: _jsx(SolidFormUserViewLayout, { solidFormViewMetaData: solidFormViewMetaData, setLayoutDialogVisible: setLayoutDialogVisible }) })] }), openLightbox && (_jsx(SolidLightbox, { open: openLightbox, slides: lightboxSlides, onClose: function () { return setOpenLightbox(false); } })), _jsx(SolidConfirmDialog, { open: confirmVisible, title: "Confirmation", confirmLabel: "Yes, confirm", cancelLabel: "No, cancel", onConfirm: handleConfirmAccept, onCancel: handleConfirmReject, message: _jsx("div", { className: "flex flex-col items-center justify-center text-center space-y-3", children: _jsxs("p", { className: "text-gray-800 text-base", children: ["Are you sure you want to ", published !== null ? 'unpublish' : 'publish', "?"] }) }) })] }));
+                                    _jsx(SolidChatterLocaleTabView, { createMode: createMode, setSelectedLocale: setSelectedLocale, selectedLocale: selectedLocale, solidFormViewMetaData: solidFormViewMetaData, id: params.id, refreshChatterMessage: refreshChatterMessage, setRefreshChatterMessage: setRefreshChatterMessage, activeTab: defaultTabViewOptionIndex, viewMode: viewMode, defaultEntityLocaleId: defaultEntityLocaleId, handleLocaleChangeRedirect: handleLocaleChangeRedirect, solidFormViewData: solidFormViewData, published: published, actionsAllowed: actionsAllowed, mcpUrl: mcpUrl })] }), _jsx(SolidConfirmDialog, { open: isDeleteDialogVisible, onCancel: onDeleteClose, onConfirm: function () { return handleDeleteEntity_1(); }, className: "solid-shadcn-confirm-dialog solid-delete-confirm-dialog", headerClassName: "solid-shadcn-dialog-head", bodyClassName: "solid-shadcn-dialog-body", footerClassName: "solid-shadcn-dialog-actions", separatorClassName: "solid-shadcn-dialog-sep", showSeparator: true, title: "Delete ".concat(entityDisplayName), message: _jsx("p", { className: "solid-shadcn-dialog-text", children: "Are you sure you want to delete this ".concat(entityDisplayName, "?") }), confirmLabel: "Delete", cancelLabel: "Cancel" }), _jsxs(SolidDialog, { open: isLayoutDialogVisible, onOpenChange: setLayoutDialogVisible, className: "solid-form-layout-dialog", children: [_jsxs(SolidDialogHeader, { className: "solid-shadcn-dialog-head", children: [_jsx(SolidDialogTitle, { children: "Change Form Layout" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogSeparator, {}), _jsx(SolidDialogBody, { className: "p-4 pt-0 lg:p-6", children: _jsx(SolidFormUserViewLayout, { solidFormViewMetaData: solidFormViewMetaData, setLayoutDialogVisible: setLayoutDialogVisible }) })] }), openLightbox && (_jsx(SolidLightbox, { open: openLightbox, slides: lightboxSlides, onClose: function () { return setOpenLightbox(false); } })), _jsx(SolidConfirmDialog, { open: confirmVisible, title: "Confirmation", confirmLabel: "Yes, confirm", cancelLabel: "No, cancel", onConfirm: handleConfirmAccept, onCancel: handleConfirmReject, message: _jsx("div", { className: "flex flex-col items-center justify-center text-center space-y-3", children: _jsxs("p", { className: "text-gray-800 text-base", children: ["Are you sure you want to ", published !== null ? 'unpublish' : 'publish', "?"] }) }) })] }));
     }
 };
 export default SolidFormView;