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

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

@@ -1,7 +1,7 @@
 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 { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 import { useFormik } from "formik";
@@ -80,6 +80,107 @@ interface ErrorResponseData {
     error: string;
 }
 
+const LAYOUT_CLASSNAME_MAPPER: Record<string, string> = {
+    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",
+};
+
+const PRIMEFLEX_BREAKPOINT_TO_TAILWIND: Record<string, string> = {
+    sm: "sm",
+    md: "md",
+    lg: "lg",
+    xl: "xl",
+};
+
+const mapLayoutToken = (token: string) => {
+    const directMatch = LAYOUT_CLASSNAME_MAPPER[token];
+    if (directMatch) return directMatch;
+
+    const responsiveColumnMatch = token.match(/^col-(sm|md|lg|xl)-(\d{1,2})$/);
+    if (responsiveColumnMatch) {
+        const [, breakpoint, columnSize] = responsiveColumnMatch;
+        const widthClass = LAYOUT_CLASSNAME_MAPPER[`col-${columnSize}`];
+
+        if (widthClass) {
+            return `${PRIMEFLEX_BREAKPOINT_TO_TAILWIND[breakpoint]}:${widthClass}`;
+        }
+    }
+
+    return token;
+};
+
+const normalizeLayoutClassName = (className?: string) => {
+    if (!className) return className;
+
+    return className
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((token) => {
+            const parts = token.split(":");
+            const baseToken = parts[parts.length - 1];
+            const responsivePrefix = parts.length > 1 ? `${parts.slice(0, -1).join(":")}:` : "";
+            const mappedToken = mapLayoutToken(baseToken);
+
+            return mappedToken ? `${responsivePrefix}${mappedToken}` : token;
+        })
+        .join(" ");
+};
+
+const normalizeLayoutAttrs = (attrs: any = {}) => {
+    if (!attrs?.className) return attrs;
+
+    return {
+        ...attrs,
+        className: normalizeLayoutClassName(attrs.className),
+    };
+};
+
 const getLayoutFields = (node: any): any => {
     let fields = [];
 
@@ -211,32 +312,42 @@ const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidForm
 };
 
 const SolidGroup = ({ children, attrs }: any) => {
-    const className = ["solid-form-layout-group", attrs.label ? "solid-form-layout-group--labeled" : "", attrs.className]
+    const className = [
+        "solid-form-layout-group",
+        "px-2",
+        "pt-2",
+        attrs.label ? "solid-form-layout-group--labeled" : "",
+        attrs.className,
+    ]
         .filter(Boolean)
         .join(" ");
 
     return (
         <div className={className}>
             {attrs.label && <p className="solid-form-layout-label">{attrs.label}</p>}
-            <div className="grid">{children}</div>
+            <div className="flex flex-wrap -mx-2 -mt-2">{children}</div>
         </div>
         // <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>
     );
 };
 
 const SolidRow = ({ children, attrs }: any) => {
-    const className = ["row", "solid-form-layout-row", attrs.label ? "solid-form-layout-row--labeled" : "", attrs.className]
+    const className = [
+        "row",
+        "solid-form-layout-row",
+        "px-2",
+        "pt-2",
+        attrs.label ? "solid-form-layout-row--labeled" : "",
+        attrs.className,
+    ]
         .filter(Boolean)
         .join(" ");
 
@@ -246,34 +357,41 @@ const SolidRow = ({ children, attrs }: any) => {
         //     <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={className}>
             {attrs.label && <p className="solid-form-layout-label">{attrs.label}</p>}
-            <div className="grid">{children}</div>
+            <div className="flex flex-wrap -mx-2 -mt-2">{children}</div>
         </div>
         // <div>{children}</div>
     );
 };
 
 const SolidColumn = ({ children, attrs }: any) => {
-    const className = ["solid-form-layout-column", attrs.label ? "solid-form-layout-column--labeled" : "", attrs.className]
+    const 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 (
         <div className={className}>
             {attrs.label && <p className="solid-form-layout-label">{attrs.label}</p>}
-            <div className="grid">{children}</div>
+            <div className="flex flex-wrap -mx-2 -mt-2">{children}</div>
         </div>
     );
 };
 
 const SolidSheet = ({ children }: any) => (
-    <div className="p-fluid p-grid">
+    <div className="solid-fluid flex flex-wrap -mx-2 mt-1">
         {children}
     </div>
 );
@@ -398,7 +516,7 @@ const SolidPage = ({ attrs, children, key, formik, fields }: any) => {
 
     return (
         <SolidPageTab key={key} label={label} tabKey={key} hasError={errorCount > 0}>
-            <div className="p-fluid">{children}</div>
+            <div className="solid-fluid">{children}</div>
         </SolidPageTab>
     );
 };
@@ -411,7 +529,6 @@ const SolidPage = ({ attrs, children, key, formik, fields }: any) => {
 //             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);
@@ -713,6 +830,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
         data: solidFormViewMetaData,
         isLoading: solidFormViewMetaDataIsLoading
     } = useGetSolidViewLayoutQuery(formViewMetaDataQs);
+    const [triggerGetSolidViewLayout] = useLazyGetSolidViewLayoutQuery();
     const entityDisplayName =
         solidFormViewMetaData?.data?.solidView?.model?.displayName || params.modelName;
     const [refreshChatterMessage, setRefreshChatterMessage] = useState<boolean>(true);
@@ -1291,12 +1409,12 @@ const SolidFormView = (params: SolidFormViewProps) => {
         return (
             <div className={`solid-form-wrapper ${viewMode=="edit"?"solid-form-edit":"solid-form-view"}`} ref={solidFormWrapperRef}>
                 <div className="solid-form-section">
-                    <div className="page-header solid-list-toolbar flex-column lg:flex-row">
-                        <div className="flex justify-content-between w-full solid-form-toolbar-row">
-                            <div className="flex gap-3 align-items-center solid-form-toolbar-left">
+                    <div className="page-header solid-list-toolbar flex-col lg:flex-row">
+                        <div className="flex justify-between w-full solid-form-toolbar-row">
+                            <div className="flex gap-4 items-center solid-form-toolbar-left">
                                 <p className="m-0 view-title solid-text-wrapper">Loading form</p>
                             </div>
-                            <div className="flex align-items-center solid-header-buttons-wrapper solid-form-toolbar-actions">
+                            <div className="flex items-center solid-header-buttons-wrapper solid-form-toolbar-actions">
                                 <SolidHeaderRequestStatus label="Loading..." />
                             </div>
                         </div>
@@ -1450,16 +1568,18 @@ const SolidFormView = (params: SolidFormViewProps) => {
         // Now render the form dynamically...
         const renderFormElementDynamically: any = (element: any, recursiveFVMD: any, path = "root") => {
             let { type, attrs, body, children } = element;
+            const normalizedAttrs = normalizeLayoutAttrs(attrs);
+            const normalizedElement = normalizedAttrs === attrs ? element : { ...element, attrs: normalizedAttrs };
 
             // const key = attrs?.name ?? generateRandomKey();
-            const key = attrs?.key ?? attrs?.name ?? attrs?.label ?? `${type}-${path}`;
-            let visible = attrs?.visible;
+            const key = normalizedAttrs?.key ?? normalizedAttrs?.name ?? normalizedAttrs?.label ?? `${type}-${path}`;
+            let visible = 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);
-            const visibleToRole = attrs?.roles || [];
+            const visibleToRole = normalizedAttrs?.roles || [];
 
             if (visibleToRole.length > 0) {
                 if (!hasAnyRole(user?.roles, visibleToRole)) {
@@ -1475,48 +1595,48 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 case "div":
                     if (!children)
                         children = [];
-                    return <div key={key} {...attrs}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</div>
+                    return <div key={key} {...normalizedAttrs}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</div>
                 case "span":
-                    return <span key={key} {...attrs}>{body}</span>
+                    return <span key={key} {...normalizedAttrs}>{body}</span>
                 case "p":
-                    return <p key={key} className={attrs?.className} {...attrs}>{body}</p>
+                    return <p key={key} className={normalizedAttrs?.className} {...normalizedAttrs}>{body}</p>
                 case "h1":
-                    return <h1 key={key} {...attrs}>{body}</h1>
+                    return <h1 key={key} {...normalizedAttrs}>{body}</h1>
                 case "h2":
-                    return <h2 key={key} {...attrs}>{body}</h2>
+                    return <h2 key={key} {...normalizedAttrs}>{body}</h2>
                 case "ul":
                     if (!children)
                         children = [];
-                    return <ul key={key} {...attrs}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</ul>
+                    return <ul key={key} {...normalizedAttrs}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</ul>
                 case "li":
-                    return <li key={key} {...attrs}>{body}</li>
+                    return <li key={key} {...normalizedAttrs}>{body}</li>
                 case "sheet":
                     return <SolidSheet key={key}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</SolidSheet>;
                 case "group":
                     if (visible === true) {
-                        return <SolidGroup key={key} attrs={attrs}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</SolidGroup>;
+                        return <SolidGroup key={key} attrs={normalizedAttrs}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</SolidGroup>;
                     }
                     break;
                 case "row":
                     if (visible === true) {
-                        return <SolidRow key={key} attrs={attrs}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</SolidRow>;
+                        return <SolidRow key={key} attrs={normalizedAttrs}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</SolidRow>;
                     }
                     break;
                 case "column":
                     if (visible === true) {
-                        return <SolidColumn key={key} attrs={attrs}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</SolidColumn>;
+                        return <SolidColumn key={key} attrs={normalizedAttrs}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</SolidColumn>;
                     }
                     break;
                 case "field":
                     if (visible === true) {
 
                         // const fieldMetadata = solidFieldsMetadata[attrs.name];
-                        const fieldMetadata = recursiveFVMD.data.solidFieldsMetadata[attrs.name];
+                        const fieldMetadata = recursiveFVMD.data.solidFieldsMetadata[normalizedAttrs.name];
                         // Read only permission if there is no update permission on model and router doesnt contains new
                         const readOnlyPermission = !actionsAllowed.includes(`${permissionExpression(params.modelName, 'update')}`) && params.id !== "new";
                         return <SolidField
-                            key={attrs.name}
-                            field={element}
+                            key={normalizedAttrs.name}
+                            field={normalizedElement}
                             formik={formik}
                             fieldMetadata={fieldMetadata}
                             initialEntityData={solidFormViewData ? solidFormViewData.data : {}}
@@ -1638,20 +1758,47 @@ const SolidFormView = (params: SolidFormViewProps) => {
         };
 
         //en 4 null
-        const handleLocaleChangeRedirect = (
+        const handleLocaleChangeRedirect = async (
             locale: string,
             defaultEntityLocaleId: string,
             viewMode: string,
         ) => {
             let newViewMode = viewMode;
             const defaultApplicableLocales = solidFormViewMetaData?.data?.applicableLocales || [];
-            //fr 4
-            const matchingLocale = defaultApplicableLocales.find(
+            let matchingLocale = defaultApplicableLocales.find(
                 (loc: any) =>
                     loc.defaultEntityLocaleId &&
                     loc.entityId &&
                     loc.locale === locale
             );
+
+            if (!matchingLocale) {
+                const resolvedDefaultEntityLocaleId =
+                    defaultEntityLocaleId || params.id;
+
+                const freshQuery = qs.stringify(
+                    {
+                        ...params,
+                        viewType: 'form',
+                        defaultEntityLocaleId: resolvedDefaultEntityLocaleId,
+                    },
+                    { encodeValuesOnly: true },
+                );
+
+                try {
+                    const freshResponse: any = await triggerGetSolidViewLayout(freshQuery).unwrap();
+                    const freshApplicableLocales = freshResponse?.data?.applicableLocales || [];
+                    matchingLocale = freshApplicableLocales.find(
+                        (loc: any) =>
+                            loc.defaultEntityLocaleId &&
+                            loc.entityId &&
+                            loc.locale === locale
+                    );
+                } catch {
+                    // Fall back to the existing locale metadata if the refresh fails.
+                }
+            }
+
             // Extract the base path from the current pathname, removing query params if any
             const basePath = pathname.split('?')[0];
 
@@ -1765,7 +1912,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             handleDraftPublishWorkFlow={handleDraftPublishWorkFlow}
                             onStepperUpdate={() => setRefreshChatterMessage(true)}
                             isSubmitting={isSubmitting}
-                            headerRequestStatusLabel={isSubmitting ? "Saving..." : null}
+                            // headerRequestStatusLabel={isSubmitting ? "Saving..." : null}
                             showMobileOpenChatter={isMobileViewport && !isShowChatter && params.embeded !== true}
                             onMobileOpenChatter={() => setShowChatter(true)}
                         />
@@ -1810,7 +1957,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             />
                         }
                         {isShowChatter === false ?
-                            <div className="flex flex-column gap-2 justify-content-center p-1">
+                            <div className="flex flex-col gap-2 justify-center p-1">
                                 {/*if solidview Internationalisation is enabled then show the locale tab */}
                                 {solidFormViewMetaData?.data?.solidView?.model?.draftPublishWorkflow &&
                                     <div className="chatter-collapsed-content" onClick={() => handleChatterExpandClick('info')}>
@@ -1874,7 +2021,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                         <SolidDialogClose />
                     </SolidDialogHeader>
                     <SolidDialogSeparator />
-                    <SolidDialogBody className="p-3 pt-0 lg:p-4">
+                    <SolidDialogBody className="p-4 pt-0 lg:p-6">
                         <SolidFormUserViewLayout solidFormViewMetaData={solidFormViewMetaData} setLayoutDialogVisible={setLayoutDialogVisible} />
                     </SolidDialogBody>
                 </SolidDialog>

package/dist/components/core/form/SolidFormViewContextMenuHeaderButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidFormViewContextMenuHeaderButton.d.ts","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewContextMenuHeaderButton.tsx"],"names":[],"mappings":"AAKA,UAAU,yCAAyC;IAC/C,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,qBAAqB,EAAE,GAAG,CAAC;IAC3B,uBAAuB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,GAAG,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAChC;AAED,wBAAgB,oCAAoC,CAAC,EACjD,MAAM,EACN,MAAM,EACN,MAAM,EACN,qBAAqB,EACrB,uBAAuB,EACvB,QAAQ,EACR,gBAAgB,EAChB,OAAmB,EACtB,EAAE,yCAAyC,kDA6D3C"}
+{"version":3,"file":"SolidFormViewContextMenuHeaderButton.d.ts","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewContextMenuHeaderButton.tsx"],"names":[],"mappings":"AAKA,UAAU,yCAAyC;IAC/C,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,qBAAqB,EAAE,GAAG,CAAC;IAC3B,uBAAuB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,GAAG,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAChC;AAED,wBAAgB,oCAAoC,CAAC,EACjD,MAAM,EACN,MAAM,EACN,MAAM,EACN,qBAAqB,EACrB,uBAAuB,EACvB,QAAQ,EACR,gBAAgB,EAChB,OAAmB,EACtB,EAAE,yCAAyC,kDAiE3C"}

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

@@ -36,6 +36,10 @@ export function SolidFormViewContextMenuHeaderButton(_a) {
     if (variant === "menu") {
         return (_jsxs("button", { type: "button", className: "solid-row-action-button ".concat(presentation.buttonClassName ? presentation.buttonClassName : ''), onClick: handleClick, title: presentation.tooltip, "aria-label": presentation.isIconOnly ? ((_h = (_f = presentation.tooltip) !== null && _f !== void 0 ? _f : (_g = button === null || button === void 0 ? void 0 : button.attrs) === null || _g === void 0 ? void 0 : _g.action) !== null && _h !== void 0 ? _h : "Action") : undefined, children: [presentation.iconPos === "left" ? iconNode : null, presentation.showLabel ? _jsx("span", { className: "solid-row-action-button-label", children: presentation.label }) : null, presentation.iconPos === "right" ? iconNode : null] }));
     }
-    return (_jsx("div", { children: _jsx(SolidButton, { text: true, type: "button", className: "w-full text-left gap-2 ".concat(presentation.buttonClassName ? presentation.buttonClassName : ''), label: presentation.label, size: "sm", icon: presentation.icon, iconPos: presentation.iconPos, tooltip: presentation.tooltip, "aria-label": presentation.isIconOnly ? ((_l = (_j = presentation.tooltip) !== null && _j !== void 0 ? _j : (_k = button === null || button === void 0 ? void 0 : button.attrs) === null || _k === void 0 ? void 0 : _k.action) !== null && _l !== void 0 ? _l : "Action") : undefined, onClick: handleClick }) }));
+    return (_jsx("div", { children: _jsx(SolidButton, { text: true, type: "button", className: [
+                "w-full text-left gap-2",
+                presentation.isIconOnly ? "solid-icon-button" : "",
+                presentation.buttonClassName ? presentation.buttonClassName : ""
+            ].filter(Boolean).join(" "), label: presentation.label, size: "sm", icon: presentation.icon, iconPos: presentation.iconPos, tooltip: presentation.tooltip, "aria-label": presentation.isIconOnly ? ((_l = (_j = presentation.tooltip) !== null && _j !== void 0 ? _j : (_k = button === null || button === void 0 ? void 0 : button.attrs) === null || _k === void 0 ? void 0 : _k.action) !== null && _l !== void 0 ? _l : "Action") : undefined, onClick: handleClick }) }));
 }
 //# sourceMappingURL=SolidFormViewContextMenuHeaderButton.js.map

package/dist/components/core/form/SolidFormViewContextMenuHeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidFormViewContextMenuHeaderButton.js","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewContextMenuHeaderButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { hasAnyRole } from \"../../../helpers/rolesHelper\";\nimport { resolveButtonPresentation } from \"../../../helpers/buttonPresentation\";\nimport { useSession } from \"../../../hooks/useSession\";\nimport { SolidButton, SolidIcon, parseSolidIconMeta } from \"../../shad-cn-ui\";\n\ninterface SolidFormViewContextMenuHeaderButtonProps {\n    button: any;\n    params: any;\n    formik: any;\n    solidFormViewMetaData: any;\n    handleCustomButtonClick: (attrs: any, event: any) => void;\n    formData: any;\n    onActionComplete?: () => void;\n    variant?: \"default\" | \"menu\";\n}\n\nexport function SolidFormViewContextMenuHeaderButton({\n    button,\n    params,\n    formik,\n    solidFormViewMetaData,\n    handleCustomButtonClick,\n    formData,\n    onActionComplete,\n    variant = \"default\"\n}: SolidFormViewContextMenuHeaderButtonProps) {\n\n    const { data: session, status } = useSession();\n    const user = session?.user;\n\n    const hasRole = !button.attrs?.roles || button?.attrs?.roles.length === 0 ? true : hasAnyRole(user?.roles, button?.attrs?.roles);\n    const presentation = resolveButtonPresentation(button?.attrs);\n\n    if (!hasRole) return null;\n    if (button.attrs?.visible == false) return null\n    if (!presentation.showIcon && !presentation.showLabel) return null;\n    const iconMeta = presentation.icon ? parseSolidIconMeta(presentation.icon) : undefined;\n    const iconNode = presentation.showIcon\n        ? (iconMeta\n            ? <SolidIcon name={iconMeta.name} spin={iconMeta.spin} className=\"solid-row-action-button-icon\" aria-hidden />\n            : <i className={`${presentation.icon} solid-row-action-button-icon`} aria-hidden />)\n        : null;\n    const handleClick = () => {\n        const event = {\n            action: button.attrs.action,\n            params,\n            formik,\n            solidFormViewMetaData: solidFormViewMetaData.data,\n            formData\n        };\n        handleCustomButtonClick(button.attrs, event);\n        onActionComplete?.();\n    };\n\n    if (variant === \"menu\") {\n        return (\n            <button\n                type=\"button\"\n                className={`solid-row-action-button ${presentation.buttonClassName ? presentation.buttonClassName : ''}`}\n                onClick={handleClick}\n                title={presentation.tooltip}\n                aria-label={presentation.isIconOnly ? (presentation.tooltip ?? button?.attrs?.action ?? \"Action\") : undefined}\n            >\n                {presentation.iconPos === \"left\" ? iconNode : null}\n                {presentation.showLabel ? <span className=\"solid-row-action-button-label\">{presentation.label}</span> : null}\n                {presentation.iconPos === \"right\" ? iconNode : null}\n            </button>\n        );\n    }\n\n    return (\n        <div>\n            <SolidButton\n                text\n                type=\"button\"\n                className={`w-full text-left gap-2 ${presentation.buttonClassName ? presentation.buttonClassName : ''}`}\n                label={presentation.label}\n                size=\"sm\"\n                icon={presentation.icon}\n                iconPos={presentation.iconPos}\n                tooltip={presentation.tooltip}\n                aria-label={presentation.isIconOnly ? (presentation.tooltip ?? button?.attrs?.action ?? \"Action\") : undefined}\n                onClick={handleClick}\n            />\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"SolidFormViewContextMenuHeaderButton.js","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewContextMenuHeaderButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { hasAnyRole } from \"../../../helpers/rolesHelper\";\nimport { resolveButtonPresentation } from \"../../../helpers/buttonPresentation\";\nimport { useSession } from \"../../../hooks/useSession\";\nimport { SolidButton, SolidIcon, parseSolidIconMeta } from \"../../shad-cn-ui\";\n\ninterface SolidFormViewContextMenuHeaderButtonProps {\n    button: any;\n    params: any;\n    formik: any;\n    solidFormViewMetaData: any;\n    handleCustomButtonClick: (attrs: any, event: any) => void;\n    formData: any;\n    onActionComplete?: () => void;\n    variant?: \"default\" | \"menu\";\n}\n\nexport function SolidFormViewContextMenuHeaderButton({\n    button,\n    params,\n    formik,\n    solidFormViewMetaData,\n    handleCustomButtonClick,\n    formData,\n    onActionComplete,\n    variant = \"default\"\n}: SolidFormViewContextMenuHeaderButtonProps) {\n\n    const { data: session, status } = useSession();\n    const user = session?.user;\n\n    const hasRole = !button.attrs?.roles || button?.attrs?.roles.length === 0 ? true : hasAnyRole(user?.roles, button?.attrs?.roles);\n    const presentation = resolveButtonPresentation(button?.attrs);\n\n    if (!hasRole) return null;\n    if (button.attrs?.visible == false) return null\n    if (!presentation.showIcon && !presentation.showLabel) return null;\n    const iconMeta = presentation.icon ? parseSolidIconMeta(presentation.icon) : undefined;\n    const iconNode = presentation.showIcon\n        ? (iconMeta\n            ? <SolidIcon name={iconMeta.name} spin={iconMeta.spin} className=\"solid-row-action-button-icon\" aria-hidden />\n            : <i className={`${presentation.icon} solid-row-action-button-icon`} aria-hidden />)\n        : null;\n    const handleClick = () => {\n        const event = {\n            action: button.attrs.action,\n            params,\n            formik,\n            solidFormViewMetaData: solidFormViewMetaData.data,\n            formData\n        };\n        handleCustomButtonClick(button.attrs, event);\n        onActionComplete?.();\n    };\n\n    if (variant === \"menu\") {\n        return (\n            <button\n                type=\"button\"\n                className={`solid-row-action-button ${presentation.buttonClassName ? presentation.buttonClassName : ''}`}\n                onClick={handleClick}\n                title={presentation.tooltip}\n                aria-label={presentation.isIconOnly ? (presentation.tooltip ?? button?.attrs?.action ?? \"Action\") : undefined}\n            >\n                {presentation.iconPos === \"left\" ? iconNode : null}\n                {presentation.showLabel ? <span className=\"solid-row-action-button-label\">{presentation.label}</span> : null}\n                {presentation.iconPos === \"right\" ? iconNode : null}\n            </button>\n        );\n    }\n\n    return (\n        <div>\n            <SolidButton\n                text\n                type=\"button\"\n                className={[\n                    \"w-full text-left gap-2\",\n                    presentation.isIconOnly ? \"solid-icon-button\" : \"\",\n                    presentation.buttonClassName ? presentation.buttonClassName : \"\"\n                ].filter(Boolean).join(\" \")}\n                label={presentation.label}\n                size=\"sm\"\n                icon={presentation.icon}\n                iconPos={presentation.iconPos}\n                tooltip={presentation.tooltip}\n                aria-label={presentation.isIconOnly ? (presentation.tooltip ?? button?.attrs?.action ?? \"Action\") : undefined}\n                onClick={handleClick}\n            />\n        </div>\n    );\n}\n"]}

package/dist/components/core/form/SolidFormViewContextMenuHeaderButton.tsx

@@ -73,7 +73,11 @@ export function SolidFormViewContextMenuHeaderButton({
             <SolidButton
                 text
                 type="button"
-                className={`w-full text-left gap-2 ${presentation.buttonClassName ? presentation.buttonClassName : ''}`}
+                className={[
+                    "w-full text-left gap-2",
+                    presentation.isIconOnly ? "solid-icon-button" : "",
+                    presentation.buttonClassName ? presentation.buttonClassName : ""
+                ].filter(Boolean).join(" ")}
                 label={presentation.label}
                 size="sm"
                 icon={presentation.icon}

package/dist/components/core/form/SolidFormViewNormalHeaderButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidFormViewNormalHeaderButton.d.ts","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewNormalHeaderButton.tsx"],"names":[],"mappings":"AAMA,UAAU,oCAAoC;IAC1C,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,qBAAqB,EAAE,GAAG,CAAC;IAC3B,uBAAuB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,GAAG,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAChC;AAED,wBAAgB,+BAA+B,CAAC,EAC5C,MAAM,EACN,MAAM,EACN,MAAM,EACN,qBAAqB,EACrB,uBAAuB,EACvB,QAAQ,EACR,gBAAgB,EAChB,OAAmB,EACtB,EAAE,oCAAoC,kDA6DtC"}
+{"version":3,"file":"SolidFormViewNormalHeaderButton.d.ts","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewNormalHeaderButton.tsx"],"names":[],"mappings":"AAMA,UAAU,oCAAoC;IAC1C,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,qBAAqB,EAAE,GAAG,CAAC;IAC3B,uBAAuB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,GAAG,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAChC;AAED,wBAAgB,+BAA+B,CAAC,EAC5C,MAAM,EACN,MAAM,EACN,MAAM,EACN,qBAAqB,EACrB,uBAAuB,EACvB,QAAQ,EACR,gBAAgB,EAChB,OAAmB,EACtB,EAAE,oCAAoC,kDAiEtC"}

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

@@ -48,6 +48,10 @@ export function SolidFormViewNormalHeaderButton(_a) {
             : null;
         return (_jsxs("button", { type: "button", className: "solid-row-action-button ".concat(presentation.buttonClassName ? presentation.buttonClassName : ''), onClick: handleClick, title: presentation.tooltip, "aria-label": presentation.isIconOnly ? ((_h = (_f = presentation.tooltip) !== null && _f !== void 0 ? _f : (_g = button === null || button === void 0 ? void 0 : button.attrs) === null || _g === void 0 ? void 0 : _g.action) !== null && _h !== void 0 ? _h : "Action") : undefined, children: [presentation.iconPos === "left" ? iconNode : null, presentation.showLabel ? _jsx("span", { className: "solid-row-action-button-label", children: presentation.label }) : null, presentation.iconPos === "right" ? iconNode : null] }));
     }
-    return (_jsx("div", { children: _jsx(SolidButton, __assign({ type: "button", className: "w-full text-left gap-2 solid-icon-button ".concat(presentation.buttonClassName ? presentation.buttonClassName : '') }, button.attrs, { label: presentation.label, size: "sm", iconPos: presentation.iconPos, icon: presentation.icon, tooltip: presentation.tooltip, "aria-label": presentation.isIconOnly ? ((_l = (_j = presentation.tooltip) !== null && _j !== void 0 ? _j : (_k = button === null || button === void 0 ? void 0 : button.attrs) === null || _k === void 0 ? void 0 : _k.action) !== null && _l !== void 0 ? _l : "Action") : undefined, onClick: handleClick })) }));
+    return (_jsx("div", { children: _jsx(SolidButton, __assign({ type: "button", className: [
+                "w-full text-left gap-2",
+                presentation.isIconOnly ? "solid-icon-button" : "",
+                presentation.buttonClassName ? presentation.buttonClassName : ""
+            ].filter(Boolean).join(" ") }, button.attrs, { label: presentation.label, size: "sm", iconPos: presentation.iconPos, icon: presentation.icon, tooltip: presentation.tooltip, "aria-label": presentation.isIconOnly ? ((_l = (_j = presentation.tooltip) !== null && _j !== void 0 ? _j : (_k = button === null || button === void 0 ? void 0 : button.attrs) === null || _k === void 0 ? void 0 : _k.action) !== null && _l !== void 0 ? _l : "Action") : undefined, onClick: handleClick })) }));
 }
 //# sourceMappingURL=SolidFormViewNormalHeaderButton.js.map

package/dist/components/core/form/SolidFormViewNormalHeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidFormViewNormalHeaderButton.js","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewNormalHeaderButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { hasAnyRole } from '../../../helpers/rolesHelper';\nimport { useSession } from \"../../../hooks/useSession\";\nimport { resolveButtonPresentation } from '../../../helpers/buttonPresentation';\nimport { SolidButton } from '../../shad-cn-ui';\nimport { SolidIcon, parseSolidIconMeta } from \"../../shad-cn-ui/SolidIcon\";\n\ninterface SolidFormViewNormalHeaderButtonProps {\n    button: any;\n    params: any;\n    formik: any;\n    solidFormViewMetaData: any;\n    handleCustomButtonClick: (attrs: any, event: any) => void;\n    formData: any;\n    onActionComplete?: () => void;\n    variant?: \"default\" | \"menu\";\n}\n\nexport function SolidFormViewNormalHeaderButton({\n    button,\n    params,\n    formik,\n    solidFormViewMetaData,\n    handleCustomButtonClick,\n    formData,\n    onActionComplete,\n    variant = \"default\"\n}: SolidFormViewNormalHeaderButtonProps) {\n\n    const { data: session, status } = useSession();\n    const user = session?.user;\n\n    const hasRole = !button?.attrs?.roles || button?.attrs?.roles.length === 0 ? true : hasAnyRole(user?.roles, button?.attrs?.roles);\n    const presentation = resolveButtonPresentation(button?.attrs);\n\n    if (!hasRole) return null;\n    if (button?.attrs?.visible == false) return null\n    if (!presentation.showIcon && !presentation.showLabel) return null;\n    const handleClick = () => {\n        const event = {\n            action: button.attrs.action,\n            params,\n            formik,\n            solidFormViewMetaData: solidFormViewMetaData.data,\n            formData\n        };\n        handleCustomButtonClick(button.attrs, event);\n        onActionComplete?.();\n    };\n\n    if (variant === \"menu\") {\n        const iconMeta = presentation.icon ? parseSolidIconMeta(presentation.icon) : undefined;\n        const iconNode = presentation.showIcon\n            ? (iconMeta\n                ? <SolidIcon name={iconMeta.name} spin={iconMeta.spin} className=\"solid-row-action-button-icon\" />\n                : <i className={`${presentation.icon} solid-row-action-button-icon`} />)\n            : null;\n        return (\n            <button\n                type=\"button\"\n                className={`solid-row-action-button ${presentation.buttonClassName ? presentation.buttonClassName : ''}`}\n                onClick={handleClick}\n                title={presentation.tooltip}\n                aria-label={presentation.isIconOnly ? (presentation.tooltip ?? button?.attrs?.action ?? \"Action\") : undefined}\n            >\n                {presentation.iconPos === \"left\" ? iconNode : null}\n                {presentation.showLabel ? <span className=\"solid-row-action-button-label\">{presentation.label}</span> : null}\n                {presentation.iconPos === \"right\" ? iconNode : null}\n            </button>\n        );\n    }\n\n    return (\n        <div>\n            <SolidButton\n                type=\"button\"\n                className={`w-full text-left gap-2 solid-icon-button ${presentation.buttonClassName ? presentation.buttonClassName : ''}`}\n                {...button.attrs}\n                label={presentation.label}\n                size=\"sm\"\n                iconPos={presentation.iconPos}\n                icon={presentation.icon}\n                tooltip={presentation.tooltip}\n                aria-label={presentation.isIconOnly ? (presentation.tooltip ?? button?.attrs?.action ?? \"Action\") : undefined}\n                onClick={handleClick}\n            />\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"SolidFormViewNormalHeaderButton.js","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewNormalHeaderButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { hasAnyRole } from '../../../helpers/rolesHelper';\nimport { useSession } from \"../../../hooks/useSession\";\nimport { resolveButtonPresentation } from '../../../helpers/buttonPresentation';\nimport { SolidButton } from '../../shad-cn-ui';\nimport { SolidIcon, parseSolidIconMeta } from \"../../shad-cn-ui/SolidIcon\";\n\ninterface SolidFormViewNormalHeaderButtonProps {\n    button: any;\n    params: any;\n    formik: any;\n    solidFormViewMetaData: any;\n    handleCustomButtonClick: (attrs: any, event: any) => void;\n    formData: any;\n    onActionComplete?: () => void;\n    variant?: \"default\" | \"menu\";\n}\n\nexport function SolidFormViewNormalHeaderButton({\n    button,\n    params,\n    formik,\n    solidFormViewMetaData,\n    handleCustomButtonClick,\n    formData,\n    onActionComplete,\n    variant = \"default\"\n}: SolidFormViewNormalHeaderButtonProps) {\n\n    const { data: session, status } = useSession();\n    const user = session?.user;\n\n    const hasRole = !button?.attrs?.roles || button?.attrs?.roles.length === 0 ? true : hasAnyRole(user?.roles, button?.attrs?.roles);\n    const presentation = resolveButtonPresentation(button?.attrs);\n\n    if (!hasRole) return null;\n    if (button?.attrs?.visible == false) return null\n    if (!presentation.showIcon && !presentation.showLabel) return null;\n    const handleClick = () => {\n        const event = {\n            action: button.attrs.action,\n            params,\n            formik,\n            solidFormViewMetaData: solidFormViewMetaData.data,\n            formData\n        };\n        handleCustomButtonClick(button.attrs, event);\n        onActionComplete?.();\n    };\n\n    if (variant === \"menu\") {\n        const iconMeta = presentation.icon ? parseSolidIconMeta(presentation.icon) : undefined;\n        const iconNode = presentation.showIcon\n            ? (iconMeta\n                ? <SolidIcon name={iconMeta.name} spin={iconMeta.spin} className=\"solid-row-action-button-icon\" />\n                : <i className={`${presentation.icon} solid-row-action-button-icon`} />)\n            : null;\n        return (\n            <button\n                type=\"button\"\n                className={`solid-row-action-button ${presentation.buttonClassName ? presentation.buttonClassName : ''}`}\n                onClick={handleClick}\n                title={presentation.tooltip}\n                aria-label={presentation.isIconOnly ? (presentation.tooltip ?? button?.attrs?.action ?? \"Action\") : undefined}\n            >\n                {presentation.iconPos === \"left\" ? iconNode : null}\n                {presentation.showLabel ? <span className=\"solid-row-action-button-label\">{presentation.label}</span> : null}\n                {presentation.iconPos === \"right\" ? iconNode : null}\n            </button>\n        );\n    }\n\n    return (\n        <div>\n            <SolidButton\n                type=\"button\"\n                className={[\n                    \"w-full text-left gap-2\",\n                    presentation.isIconOnly ? \"solid-icon-button\" : \"\",\n                    presentation.buttonClassName ? presentation.buttonClassName : \"\"\n                ].filter(Boolean).join(\" \")}\n                {...button.attrs}\n                label={presentation.label}\n                size=\"sm\"\n                iconPos={presentation.iconPos}\n                icon={presentation.icon}\n                tooltip={presentation.tooltip}\n                aria-label={presentation.isIconOnly ? (presentation.tooltip ?? button?.attrs?.action ?? \"Action\") : undefined}\n                onClick={handleClick}\n            />\n        </div>\n    );\n}\n"]}

package/dist/components/core/form/SolidFormViewNormalHeaderButton.tsx

@@ -73,7 +73,11 @@ export function SolidFormViewNormalHeaderButton({
         <div>
             <SolidButton
                 type="button"
-                className={`w-full text-left gap-2 solid-icon-button ${presentation.buttonClassName ? presentation.buttonClassName : ''}`}
+                className={[
+                    "w-full text-left gap-2",
+                    presentation.isIconOnly ? "solid-icon-button" : "",
+                    presentation.buttonClassName ? presentation.buttonClassName : ""
+                ].filter(Boolean).join(" ")}
                 {...button.attrs}
                 label={presentation.label}
                 size="sm"

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

@@ -5,6 +5,6 @@ var SkeletonBlock = function (_a) {
     return (_jsx("div", { className: "solid-skeleton ".concat(className !== null && className !== void 0 ? className : ""), style: { width: width, height: height } }));
 };
 export var SolidFormViewShimmerLoading = function () {
-    return (_jsxs("div", { className: 'h-screen surface-0', children: [_jsxs("div", { className: "page-header pl-2 ", children: [_jsxs("div", { className: 'flex align-items-center gap-3', children: [_jsx(SkeletonBlock, { width: "50px", height: '1.4rem', className: 'md:h-1.3rem  border-round-lg ' }), _jsx(SkeletonBlock, { width: "300px", className: 'border-round-lg hidden md:flex' })] }), _jsxs("div", { className: 'flex align-items-center gap-3', children: [_jsx(SkeletonBlock, { width: "2.7rem", height: "1.6rem", className: "md:w-4rem md:h-2rem" }), _jsx(SkeletonBlock, { width: "2.7rem", height: "1.6rem", className: "md:w-4rem md:h-2rem" }), _jsx(SkeletonBlock, { width: "2.7rem", height: "1.6rem", className: "md:w-4rem md:h-2rem flex md:hidden" })] })] }), _jsx("div", { className: "page-header", style: { borderTop: '1px solid var(--primary-light-color)' }, children: _jsx("div", { className: 'w-full flex align-items-center justify-content-end', children: _jsx(SkeletonBlock, { width: "30%", height: "2rem" }) }) }), _jsxs("div", { className: styles.solidFormViewShimmerLoadingWrapper, children: [_jsxs("div", { className: 'p-4', children: [_jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'field col-6', children: _jsxs("div", { className: 'flex align-items-center gap-2', children: [_jsx(SkeletonBlock, { width: "2rem", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "2rem", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "2rem", className: 'border-round-lg' })] }) }) }), _jsxs("div", { className: 'formgrid grid mt-4', children: [_jsxs("div", { className: 'field col-6 flex flex-column gap-4', children: [_jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] })] }), _jsxs("div", { className: 'field col-6 flex flex-column gap-4', children: [_jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] })] })] })] }), _jsx("div", { style: { borderTop: '1px solid var(--primary-light-color)' } }), _jsxs("div", { className: 'p-4', children: [_jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'field col-6', children: _jsx("div", { className: 'flex align-items-center gap-2', children: _jsx(SkeletonBlock, { width: "8rem", height: '1.5rem', className: 'border-round-lg' }) }) }) }), _jsxs("div", { className: 'formgrid grid mt-4', children: [_jsxs("div", { className: 'field col-6 flex flex-column gap-4', children: [_jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] })] }), _jsxs("div", { className: 'field col-6 flex flex-column gap-4', children: [_jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] })] })] })] })] })] }));
+    return (_jsxs("div", { className: 'h-screen bg-[var(--surface-0)]', children: [_jsxs("div", { className: "page-header pl-2 ", children: [_jsxs("div", { className: 'flex items-center gap-4', children: [_jsx(SkeletonBlock, { width: "50px", height: '1.4rem', className: 'rounded-lg md:h-1.3rem' }), _jsx(SkeletonBlock, { width: "300px", className: 'hidden rounded-lg md:flex' })] }), _jsxs("div", { className: 'flex items-center gap-4', children: [_jsx(SkeletonBlock, { width: "2.7rem", height: "1.6rem", className: "md:w-4rem md:h-2rem" }), _jsx(SkeletonBlock, { width: "2.7rem", height: "1.6rem", className: "md:w-4rem md:h-2rem" }), _jsx(SkeletonBlock, { width: "2.7rem", height: "1.6rem", className: "md:w-4rem md:h-2rem flex md:hidden" })] })] }), _jsx("div", { className: "page-header", style: { borderTop: '1px solid var(--primary-light-color)' }, children: _jsx("div", { className: 'w-full flex items-center justify-end', children: _jsx(SkeletonBlock, { width: "30%", height: "2rem" }) }) }), _jsxs("div", { className: styles.solidFormViewShimmerLoadingWrapper, children: [_jsxs("div", { className: 'p-4', children: [_jsx("div", { className: 'flex flex-wrap -mx-2 -mt-2', children: _jsx("div", { className: 'field w-1/2 px-2 pt-2', children: _jsxs("div", { className: 'flex items-center gap-2', children: [_jsx(SkeletonBlock, { width: "2rem", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "2rem", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "2rem", className: 'rounded-lg' })] }) }) }), _jsxs("div", { className: 'flex flex-wrap -mx-2 -mt-2 mt-6', children: [_jsxs("div", { className: 'field w-1/2 px-2 pt-2 flex flex-col gap-6', children: [_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] })] }), _jsxs("div", { className: 'field w-1/2 px-2 pt-2 flex flex-col gap-6', children: [_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] })] })] })] }), _jsx("div", { style: { borderTop: '1px solid var(--primary-light-color)' } }), _jsxs("div", { className: 'p-4', children: [_jsx("div", { className: 'flex flex-wrap -mx-2 -mt-2', children: _jsx("div", { className: 'field w-1/2 px-2 pt-2', children: _jsx("div", { className: 'flex items-center gap-2', children: _jsx(SkeletonBlock, { width: "8rem", height: '1.5rem', className: 'rounded-lg' }) }) }) }), _jsxs("div", { className: 'flex flex-wrap -mx-2 -mt-2 mt-6', children: [_jsxs("div", { className: 'field w-1/2 px-2 pt-2 flex flex-col gap-6', children: [_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] })] }), _jsxs("div", { className: 'field w-1/2 px-2 pt-2 flex flex-col gap-6', children: [_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] })] })] })] })] })] }));
 };
 //# sourceMappingURL=SolidFormViewShimmerLoading.js.map