@solidxai/core-ui 0.1.9-beta.9 → 0.1.10

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);
@@ -884,7 +1002,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                         const baseFormPath = normalizeSolidFormActionPath(pathname, "form");
                         const queryParams = new URLSearchParams(searchParams.toString());
                         queryParams.set("viewMode", "view");
-                        router.push(`${baseFormPath}/${result?.data?.id}?${queryParams.toString()}`);
+                        router.replace(`${baseFormPath}/${result?.data?.id}?${queryParams.toString()}`);
                         setViewMode("view")
                     }
                     return result;
@@ -1160,9 +1278,11 @@ const SolidFormView = (params: SolidFormViewProps) => {
              * ----------------------------- */
             let workingLayout = params.customLayout ?? solidFormViewMetaData?.data?.solidView?.layout;
             let workingFormData = solidFormViewData?.data;
+            let solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
+
             const baseEvent = {
                 parentData: params?.parentData,
-                fieldsMetadata: solidFormViewMetaData,
+                fieldsMetadata: solidFieldsMetadata,
                 viewMetadata: solidFormViewMetaData?.data?.solidView,
                 queryParams: {
                     actionName,
@@ -1287,14 +1407,14 @@ const SolidFormView = (params: SolidFormViewProps) => {
         });
 
         return (
-            <div className="solid-form-wrapper" ref={solidFormWrapperRef}>
+            <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>
@@ -1327,6 +1447,9 @@ const SolidFormView = (params: SolidFormViewProps) => {
             if (params.parentData) {
                 fieldContext.parentData = params.parentData;
             }
+            if (params.parentFieldName) {
+                fieldContext.parentFieldName = params.parentFieldName;
+            }
             let solidField = fieldFactory(fieldMetadata?.type, fieldContext);
             if (!fieldMetadata?.type) {
                 const errorMessage = formLayoutField?.attrs?.label ? formLayoutField?.attrs?.label : formLayoutField.attrs.name;
@@ -1445,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)) {
@@ -1470,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 : {}}
@@ -1633,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];
 
@@ -1760,11 +1912,11 @@ 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)}
                         />
-                        <div className={`px-4 py-3 md:p-4 solid-form-content md:pt-1 ${createMode ? 'solid-create-mode-form-content' : ''} ${params.embeded === true ? 'h-auto' : ''}`} style={{ maxHeight: params.embeded === true ? '80vh' : '', overflowY: 'auto' }}>
+                        <div className={`px-3 py-3 md:p-4 solid-form-content md:pt-1 ${createMode ? 'solid-create-mode-form-content' : 'solid-edit-mode-form-content'} ${params.embeded === true ? 'h-auto' : ''}`}>
                             {DynamicHeaderComponent && <DynamicHeaderComponent />}
                             {params.id === 'new' && DynamicFormComponentNew ? (
                                 <DynamicFormComponentNew params={params} />
@@ -1805,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')}>
@@ -1869,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":"AAIA,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,kDAyD3C"}
+{"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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { hasAnyRole } from "../../../helpers/rolesHelper";
+import { resolveButtonPresentation } from "../../../helpers/buttonPresentation";
 import { useSession } from "../../../hooks/useSession";
 import { SolidButton, SolidIcon, parseSolidIconMeta } from "../../shad-cn-ui";
 export function SolidFormViewContextMenuHeaderButton(_a) {
@@ -8,11 +9,19 @@ export function SolidFormViewContextMenuHeaderButton(_a) {
     var _o = useSession(), session = _o.data, status = _o.status;
     var user = session === null || session === void 0 ? void 0 : session.user;
     var hasRole = !((_b = button.attrs) === null || _b === void 0 ? void 0 : _b.roles) || ((_c = button === null || button === void 0 ? void 0 : button.attrs) === null || _c === void 0 ? void 0 : _c.roles.length) === 0 ? true : hasAnyRole(user === null || user === void 0 ? void 0 : user.roles, (_d = button === null || button === void 0 ? void 0 : button.attrs) === null || _d === void 0 ? void 0 : _d.roles);
+    var presentation = resolveButtonPresentation(button === null || button === void 0 ? void 0 : button.attrs);
     if (!hasRole)
         return null;
     if (((_e = button.attrs) === null || _e === void 0 ? void 0 : _e.visible) == false)
         return null;
-    var iconMeta = parseSolidIconMeta((_g = (_f = button === null || button === void 0 ? void 0 : button.attrs) === null || _f === void 0 ? void 0 : _f.icon) !== null && _g !== void 0 ? _g : "si si-pencil");
+    if (!presentation.showIcon && !presentation.showLabel)
+        return null;
+    var iconMeta = presentation.icon ? parseSolidIconMeta(presentation.icon) : undefined;
+    var iconNode = presentation.showIcon
+        ? (iconMeta
+            ? _jsx(SolidIcon, { name: iconMeta.name, spin: iconMeta.spin, className: "solid-row-action-button-icon", "aria-hidden": true })
+            : _jsx("i", { className: "".concat(presentation.icon, " solid-row-action-button-icon"), "aria-hidden": true }))
+        : null;
     var handleClick = function () {
         var event = {
             action: button.attrs.action,
@@ -25,8 +34,12 @@ export function SolidFormViewContextMenuHeaderButton(_a) {
         onActionComplete === null || onActionComplete === void 0 ? void 0 : onActionComplete();
     };
     if (variant === "menu") {
-        return (_jsxs("button", { type: "button", className: "solid-row-action-button ".concat(((_h = button === null || button === void 0 ? void 0 : button.attrs) === null || _h === void 0 ? void 0 : _h.className) ? (_j = button === null || button === void 0 ? void 0 : button.attrs) === null || _j === void 0 ? void 0 : _j.className : ''), onClick: handleClick, children: [iconMeta ? (_jsx(SolidIcon, { name: iconMeta.name, spin: iconMeta.spin, className: "solid-row-action-button-icon", "aria-hidden": true })) : null, _jsx("span", { className: "solid-row-action-button-label", children: button.attrs.label })] }));
+        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(((_k = button === null || button === void 0 ? void 0 : button.attrs) === null || _k === void 0 ? void 0 : _k.className) ? (_l = button === null || button === void 0 ? void 0 : button.attrs) === null || _l === void 0 ? void 0 : _l.className : ''), label: button.attrs.label, size: "sm", leftIcon: iconMeta ? _jsx(SolidIcon, { name: iconMeta.name, spin: iconMeta.spin, "aria-hidden": true }) : 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 { 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\n    if (!hasRole) return null;\n    if (button.attrs?.visible == false) return null\n    const iconMeta = parseSolidIconMeta(button?.attrs?.icon ?? \"si si-pencil\");\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 ${button?.attrs?.className ? button?.attrs?.className : ''}`}\n                onClick={handleClick}\n            >\n                {iconMeta ? (\n                    <SolidIcon\n                        name={iconMeta.name}\n                        spin={iconMeta.spin}\n                        className=\"solid-row-action-button-icon\"\n                        aria-hidden\n                    />\n                ) : null}\n                <span className=\"solid-row-action-button-label\">{button.attrs.label}</span>\n            </button>\n        );\n    }\n\n    return (\n        <div>\n            <SolidButton\n                text\n                type=\"button\"\n                className={`w-full text-left gap-2 ${button?.attrs?.className ? button?.attrs?.className : ''}`}\n                label={button.attrs.label}\n                size=\"sm\"\n                leftIcon={\n                    iconMeta ? <SolidIcon name={iconMeta.name} spin={iconMeta.spin} aria-hidden /> : undefined\n                }\n                onClick={handleClick}\n            />\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"SolidFormViewContextMenuHeaderButton.js","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewContextMenuHeaderButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAa9E,MAAM,UAAU,oCAAoC,CAAC,EAST;;QARxC,MAAM,YAAA,EACN,MAAM,YAAA,EACN,MAAM,YAAA,EACN,qBAAqB,2BAAA,EACrB,uBAAuB,6BAAA,EACvB,QAAQ,cAAA,EACR,gBAAgB,sBAAA,EAChB,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA;IAGb,IAAA,KAA4B,UAAU,EAAE,EAAhC,OAAO,UAAA,EAAE,MAAM,YAAiB,CAAC;IAC/C,IAAM,IAAI,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC;IAE3B,IAAM,OAAO,GAAG,CAAC,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,KAAK,CAAA,IAAI,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,KAAK,CAAC,MAAM,MAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAE,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,KAAK,CAAC,CAAC;IACjI,IAAM,YAAY,GAAG,yBAAyB,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,CAAC;IAE9D,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAC1B,IAAI,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,OAAO,KAAI,KAAK;QAAE,OAAO,IAAI,CAAA;IAC/C,IAAI,CAAC,YAAY,CAAC,QAAQ,IAAI,CAAC,YAAY,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IACnE,IAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACvF,IAAM,QAAQ,GAAG,YAAY,CAAC,QAAQ;QAClC,CAAC,CAAC,CAAC,QAAQ;YACP,CAAC,CAAC,KAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,SAAS,EAAC,8BAA8B,wBAAe;YAC9G,CAAC,CAAC,YAAG,SAAS,EAAE,UAAG,YAAY,CAAC,IAAI,kCAA+B,wBAAgB,CAAC;QACxF,CAAC,CAAC,IAAI,CAAC;IACX,IAAM,WAAW,GAAG;QAChB,IAAM,KAAK,GAAG;YACV,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM;YAC3B,MAAM,QAAA;YACN,MAAM,QAAA;YACN,qBAAqB,EAAE,qBAAqB,CAAC,IAAI;YACjD,QAAQ,UAAA;SACX,CAAC;QACF,uBAAuB,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC7C,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,EAAI,CAAC;IACzB,CAAC,CAAC;IAEF,IAAI,OAAO,KAAK,MAAM,EAAE;QACpB,OAAO,CACH,kBACI,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,kCAA2B,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAE,EACxG,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,YAAY,CAAC,OAAO,gBACf,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,MAAA,MAAA,YAAY,CAAC,OAAO,mCAAI,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,MAAM,mCAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,aAE5G,YAAY,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACjD,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,+BAA+B,YAAE,YAAY,CAAC,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,EAC3G,YAAY,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAC9C,CACZ,CAAC;KACL;IAED,OAAO,CACH,wBACI,KAAC,WAAW,IACR,IAAI,QACJ,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE;gBACP,wBAAwB;gBACxB,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE;gBAClD,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;aACnE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3B,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,YAAY,CAAC,IAAI,EACvB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,OAAO,EAAE,YAAY,CAAC,OAAO,gBACjB,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,MAAA,MAAA,YAAY,CAAC,OAAO,mCAAI,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,MAAM,mCAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,EAC7G,OAAO,EAAE,WAAW,GACtB,GACA,CACT,CAAC;AACN,CAAC","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

@@ -1,4 +1,5 @@
 import { hasAnyRole } from "../../../helpers/rolesHelper";
+import { resolveButtonPresentation } from "../../../helpers/buttonPresentation";
 import { useSession } from "../../../hooks/useSession";
 import { SolidButton, SolidIcon, parseSolidIconMeta } from "../../shad-cn-ui";
 
@@ -28,10 +29,17 @@ export function SolidFormViewContextMenuHeaderButton({
     const user = session?.user;
 
     const hasRole = !button.attrs?.roles || button?.attrs?.roles.length === 0 ? true : hasAnyRole(user?.roles, button?.attrs?.roles);
+    const presentation = resolveButtonPresentation(button?.attrs);
 
     if (!hasRole) return null;
     if (button.attrs?.visible == false) return null
-    const iconMeta = parseSolidIconMeta(button?.attrs?.icon ?? "si si-pencil");
+    if (!presentation.showIcon && !presentation.showLabel) return null;
+    const iconMeta = presentation.icon ? parseSolidIconMeta(presentation.icon) : undefined;
+    const iconNode = presentation.showIcon
+        ? (iconMeta
+            ? <SolidIcon name={iconMeta.name} spin={iconMeta.spin} className="solid-row-action-button-icon" aria-hidden />
+            : <i className={`${presentation.icon} solid-row-action-button-icon`} aria-hidden />)
+        : null;
     const handleClick = () => {
         const event = {
             action: button.attrs.action,
@@ -48,18 +56,14 @@ export function SolidFormViewContextMenuHeaderButton({
         return (
             <button
                 type="button"
-                className={`solid-row-action-button ${button?.attrs?.className ? button?.attrs?.className : ''}`}
+                className={`solid-row-action-button ${presentation.buttonClassName ? presentation.buttonClassName : ''}`}
                 onClick={handleClick}
+                title={presentation.tooltip}
+                aria-label={presentation.isIconOnly ? (presentation.tooltip ?? button?.attrs?.action ?? "Action") : undefined}
             >
-                {iconMeta ? (
-                    <SolidIcon
-                        name={iconMeta.name}
-                        spin={iconMeta.spin}
-                        className="solid-row-action-button-icon"
-                        aria-hidden
-                    />
-                ) : null}
-                <span className="solid-row-action-button-label">{button.attrs.label}</span>
+                {presentation.iconPos === "left" ? iconNode : null}
+                {presentation.showLabel ? <span className="solid-row-action-button-label">{presentation.label}</span> : null}
+                {presentation.iconPos === "right" ? iconNode : null}
             </button>
         );
     }
@@ -69,12 +73,17 @@ export function SolidFormViewContextMenuHeaderButton({
             <SolidButton
                 text
                 type="button"
-                className={`w-full text-left gap-2 ${button?.attrs?.className ? button?.attrs?.className : ''}`}
-                label={button.attrs.label}
+                className={[
+                    "w-full text-left gap-2",
+                    presentation.isIconOnly ? "solid-icon-button" : "",
+                    presentation.buttonClassName ? presentation.buttonClassName : ""
+                ].filter(Boolean).join(" ")}
+                label={presentation.label}
                 size="sm"
-                leftIcon={
-                    iconMeta ? <SolidIcon name={iconMeta.name} spin={iconMeta.spin} aria-hidden /> : undefined
-                }
+                icon={presentation.icon}
+                iconPos={presentation.iconPos}
+                tooltip={presentation.tooltip}
+                aria-label={presentation.isIconOnly ? (presentation.tooltip ?? button?.attrs?.action ?? "Action") : undefined}
                 onClick={handleClick}
             />
         </div>

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":"AAKA,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,kDAkDtC"}
+{"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"}