@m4l/layouts 0.1.39 → 0.1.40

package/layouts/NoAuthModuleLayout/index.eabf38c1.js

@@ -1,25 +1,26 @@
-import { useResponsiveDesktop as I, useLocales as $ } from "@m4l/graphics";
-import { LanguagePopover as h, Image as x, Typography as a, ScrollBar as m, HelmetPage as W } from "@m4l/components";
-import { styled as t, alpha as d } from "@mui/material/styles";
-import { useBase as u, useModuleDictionary as g, useDomain as y, useEnvironment as H, BaseProvider as N, FlagsProvider as R, ModuleDictionaryProvider as U, ModuleSkeletonProvider as F } from "@m4l/core";
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-const P = t("div")(({
-  theme: o
+import { useResponsiveDesktop, useLocales } from "@m4l/graphics";
+import { LanguagePopover, Image, Typography, ScrollBar, HelmetPage } from "@m4l/components";
+import { styled, alpha } from "@mui/material/styles";
+import { useBase, useModuleDictionary, useDomain, useEnvironment, BaseProvider, FlagsProvider, ModuleDictionaryProvider, ModuleSkeletonProvider } from "@m4l/core";
+import { jsxs, jsx } from "react/jsx-runtime";
+const InnerModuleRoot = styled("div")(({
+  theme
 }) => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
   height: "100vh",
   padding: "20px",
-  backgroundColor: o.palette.background.background,
-  [o.breakpoints.down("md")]: {
+  backgroundColor: theme.palette.background.background,
+  [theme.breakpoints.down("md")]: {
     padding: "0px"
   }
-})), j = t("div")(({ theme: o }) => ({
+}));
+const DesktopContentRoot = styled("div")(({ theme }) => ({
   display: "flex",
   borderRadius: "16px",
-  backgroundColor: o.palette.background.neutral,
-  boxShadow: o.customShadows?.z4,
+  backgroundColor: theme.palette.background.neutral,
+  boxShadow: theme.customShadows?.z4,
   padding: "20px 0 20px 20px",
   width: "100%",
   height: "100%",
@@ -33,7 +34,8 @@ const P = t("div")(({
     right: "20px",
     zIndex: 1
   }
-})), T = t("div")(({ theme: o }) => ({
+}));
+const DesktopBanner = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   justifyContent: "center",
@@ -42,140 +44,151 @@ const P = t("div")(({
   width: "100%",
   maxWidth: "400px",
   height: "100%",
-  backgroundColor: o.palette.state?.focus,
-  boxShadow: o.customShadows?.z4,
+  backgroundColor: theme.palette.state?.focus,
+  boxShadow: theme.customShadows?.z4,
   padding: "0 60px",
   gap: "40px",
   overflow: "hidden",
   "& .MuiTypography-root": {
-    color: o.palette.patronus?.marbleLight[10],
+    color: theme.palette.patronus?.marbleLight[10],
     display: "flex",
     justifyContent: "center",
     textAlign: "center",
     textTransform: "uppercase"
   },
   "& .M4LTypography-root .MuiSkeleton-root": {
-    backgroundColor: d(`${o.palette.patronus?.marbleLight[10]}`, 0.24),
+    backgroundColor: alpha(`${theme.palette.patronus?.marbleLight[10]}`, 0.24),
     margin: "auto"
   }
-})), A = t("div")(({ theme: o }) => ({
+}));
+const ContainerLogo$1 = styled("div")(({ theme }) => ({
   display: "flex",
   width: "84px",
   height: "84px",
   borderRadius: "6px",
-  backgroundColor: o.palette.state?.active,
+  backgroundColor: theme.palette.state?.active,
   justifyContent: "center",
   alignItems: "center",
-  boxShadow: `0px 4px 8px  ${d(o.palette.patronus?.coolGrey[70] || "", 0.16)}`,
+  boxShadow: `0px 4px 8px  ${alpha(theme.palette.patronus?.coolGrey[70] || "", 0.16)}`,
   "& .M4LImage-root": {
-    backgroundColor: o.palette.patronus?.marbleLight[10],
+    backgroundColor: theme.palette.patronus?.marbleLight[10],
     borderRadius: "6px"
   }
-})), B = t("div")(() => ({
+}));
+const CompanyName$1 = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
   gap: "5px",
   width: "100%"
-})), z = t("div")(() => ({
+}));
+const CompanyLeyend = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
   gap: "5px",
   width: "100%"
-})), G = t("div")(() => ({
+}));
+const FormContent$1 = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
   padding: "0 60px 0 80px",
   margin: "auto 0",
   width: "100%",
   gap: "20px"
-})), E = t("div")(() => ({
+}));
+const WrapperFormContent$1 = styled("div")(() => ({
   display: "flex",
   width: "100%",
   height: "100%"
-})), q = t("div")(() => ({
+}));
+const ContainerModuleName$1 = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
   width: "100%",
   gap: "4px"
-})), J = () => {
+}));
+const DesktopContent = () => {
+  const {
+    children,
+    companyLogoSmallUrl
+  } = useBase();
   const {
-    children: o,
-    companyLogoSmallUrl: l
-  } = u(), {
-    getLabel: n
-  } = g(), {
-    name: r
-  } = y();
-  return /* @__PURE__ */ i(j, {
-    children: [/* @__PURE__ */ e(h, {}), /* @__PURE__ */ i(T, {
-      children: [/* @__PURE__ */ e(A, {
-        children: /* @__PURE__ */ e(x, {
-          src: l,
+    getLabel
+  } = useModuleDictionary();
+  const {
+    name
+  } = useDomain();
+  return /* @__PURE__ */ jsxs(DesktopContentRoot, {
+    children: [/* @__PURE__ */ jsx(LanguagePopover, {}), /* @__PURE__ */ jsxs(DesktopBanner, {
+      children: [/* @__PURE__ */ jsx(ContainerLogo$1, {
+        children: /* @__PURE__ */ jsx(Image, {
+          src: companyLogoSmallUrl,
           ratio: "1:1",
           width: "64px",
           height: "64px"
         })
-      }), /* @__PURE__ */ i(B, {
-        children: [/* @__PURE__ */ e(a, {
+      }), /* @__PURE__ */ jsxs(CompanyName$1, {
+        children: [/* @__PURE__ */ jsx(Typography, {
           variant: "subtitleDens",
           skeletonWidth: "70%",
           skeletongHeight: "24px",
-          children: r
-        }), /* @__PURE__ */ e(a, {
+          children: name
+        }), /* @__PURE__ */ jsx(Typography, {
           variant: "paragraph",
           skeletonWidth: "40%",
           skeletongHeight: "20px",
-          children: n("company_name_subtitle")
+          children: getLabel("company_name_subtitle")
         })]
-      }), /* @__PURE__ */ i(z, {
-        children: [/* @__PURE__ */ e(a, {
+      }), /* @__PURE__ */ jsxs(CompanyLeyend, {
+        children: [/* @__PURE__ */ jsx(Typography, {
           variant: "h5",
           skeletonWidth: "50%",
           skeletongHeight: "36px",
-          children: n("module_leyend")
-        }), /* @__PURE__ */ e(a, {
+          children: getLabel("module_leyend")
+        }), /* @__PURE__ */ jsx(Typography, {
           variant: "subtitle",
           skeletonWidth: "80%",
           skeletongHeight: "24px",
           children: "slogan"
         })]
       })]
-    }), /* @__PURE__ */ e(E, {
-      children: /* @__PURE__ */ e(m, {
-        children: /* @__PURE__ */ i(G, {
-          children: [/* @__PURE__ */ i(q, {
-            children: [/* @__PURE__ */ e(a, {
+    }), /* @__PURE__ */ jsx(WrapperFormContent$1, {
+      children: /* @__PURE__ */ jsx(ScrollBar, {
+        children: /* @__PURE__ */ jsxs(FormContent$1, {
+          children: [/* @__PURE__ */ jsxs(ContainerModuleName$1, {
+            children: [/* @__PURE__ */ jsx(Typography, {
               variant: "h5",
               skeletonWidth: "20%",
               skeletongHeight: "36px",
-              children: n("module_name")
-            }), /* @__PURE__ */ e(a, {
+              children: getLabel("module_name")
+            }), /* @__PURE__ */ jsx(Typography, {
               variant: "paragraph",
               skeletonWidth: "40%",
               skeletongHeight: "20px",
-              children: n("module_description")
+              children: getLabel("module_description")
             })]
-          }), o]
+          }), children]
         })
       })
     })]
   });
-}, K = t("div")(({ theme: o }) => ({
+};
+const MobileContentRoot = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   width: "100%",
   height: "100%",
-  backgroundColor: o.palette.background.neutral,
+  backgroundColor: theme.palette.background.neutral,
   padding: "12px",
   gap: "32px"
-})), O = t("div")(({ theme: o }) => ({
+}));
+const MobileBanner = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   padding: "12px",
   gap: "20px",
   width: "100%",
-  backgroundColor: o.palette.state?.focus,
-  boxShadow: o.customShadows?.z4,
+  backgroundColor: theme.palette.state?.focus,
+  boxShadow: theme.customShadows?.z4,
   position: "relative",
   borderRadius: "8px",
   "& .M4LanguagePopover-root": {
@@ -184,162 +197,182 @@ const P = t("div")(({
     right: "12px"
   },
   "& .MuiTypography-root": {
-    color: o.palette.patronus?.marbleLight[10],
+    color: theme.palette.patronus?.marbleLight[10],
     display: "flex",
     textTransform: "uppercase"
   },
   "& .MuiSkeleton-root": {
-    backgroundColor: d(`${o.palette.patronus?.marbleLight[10]}`, 0.24),
+    backgroundColor: alpha(`${theme.palette.patronus?.marbleLight[10]}`, 0.24),
     margin: "auto"
   }
 }));
-t("div")(() => ({
+styled("div")(() => ({
   display: "flex"
 }));
-const Q = t("div")(({ theme: o }) => ({
+const ContainerLogo = styled("div")(({ theme }) => ({
   display: "flex",
   width: "52px",
   height: "52px",
   borderRadius: "6px",
-  backgroundColor: o.palette.state?.active,
+  backgroundColor: theme.palette.state?.active,
   justifyContent: "center",
   alignItems: "center",
-  boxShadow: `0px 4px 8px  ${d(o.palette.patronus?.coolGrey[70] || "", 0.16)}`,
+  boxShadow: `0px 4px 8px  ${alpha(theme.palette.patronus?.coolGrey[70] || "", 0.16)}`,
   "& .M4LImage-root": {
-    backgroundColor: o.palette.patronus?.marbleLight[10],
+    backgroundColor: theme.palette.patronus?.marbleLight[10],
     borderRadius: "6px"
   }
-})), V = t("div")(() => ({
+}));
+const CompanyName = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
   width: "100%"
-})), X = t("div")(() => ({
+}));
+const FormContent = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
   padding: "12px",
   margin: "auto 0",
   width: "100%",
   gap: "20px"
-})), Y = t("div")(() => ({
+}));
+const WrapperFormContent = styled("div")(() => ({
   display: "flex",
   width: "100%",
   height: "100%",
   overflow: "hidden"
-})), Z = t("div")(() => ({
+}));
+const ContainerModuleName = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
   width: "100%",
   gap: "4px"
-})), oo = () => {
+}));
+const MobileContent = () => {
+  const {
+    children,
+    companyLogoSmallUrl
+  } = useBase();
   const {
-    children: o,
-    companyLogoSmallUrl: l
-  } = u(), {
-    getLabel: n
-  } = g(), {
-    name: r
-  } = y();
-  return /* @__PURE__ */ i(K, {
-    children: [/* @__PURE__ */ i(O, {
-      children: [/* @__PURE__ */ e(Q, {
-        children: /* @__PURE__ */ e(x, {
-          src: l,
+    getLabel
+  } = useModuleDictionary();
+  const {
+    name
+  } = useDomain();
+  return /* @__PURE__ */ jsxs(MobileContentRoot, {
+    children: [/* @__PURE__ */ jsxs(MobileBanner, {
+      children: [/* @__PURE__ */ jsx(ContainerLogo, {
+        children: /* @__PURE__ */ jsx(Image, {
+          src: companyLogoSmallUrl,
           ratio: "1:1",
           width: "44px",
           height: "44px"
         })
-      }), /* @__PURE__ */ i(V, {
-        children: [/* @__PURE__ */ e(a, {
+      }), /* @__PURE__ */ jsxs(CompanyName, {
+        children: [/* @__PURE__ */ jsx(Typography, {
           variant: "subtitleDens",
           skeletonWidth: "70%",
           skeletongHeight: "24px",
-          children: r
-        }), /* @__PURE__ */ e(a, {
+          children: name
+        }), /* @__PURE__ */ jsx(Typography, {
           variant: "paragraph",
           skeletonWidth: "40%",
           skeletongHeight: "20px",
-          children: n("company_name_subtitle")
+          children: getLabel("company_name_subtitle")
         })]
-      }), /* @__PURE__ */ e(h, {})]
-    }), /* @__PURE__ */ e(Y, {
-      children: /* @__PURE__ */ e(m, {
-        children: /* @__PURE__ */ i(X, {
-          children: [/* @__PURE__ */ i(Z, {
-            children: [/* @__PURE__ */ e(a, {
+      }), /* @__PURE__ */ jsx(LanguagePopover, {})]
+    }), /* @__PURE__ */ jsx(WrapperFormContent, {
+      children: /* @__PURE__ */ jsx(ScrollBar, {
+        children: /* @__PURE__ */ jsxs(FormContent, {
+          children: [/* @__PURE__ */ jsxs(ContainerModuleName, {
+            children: [/* @__PURE__ */ jsx(Typography, {
               variant: "h5",
               skeletonWidth: "20%",
               skeletongHeight: "36px",
-              children: n("module_name")
-            }), /* @__PURE__ */ e(a, {
+              children: getLabel("module_name")
+            }), /* @__PURE__ */ jsx(Typography, {
               variant: "paragraph",
               skeletonWidth: "40%",
               skeletongHeight: "20px",
-              children: n("module_description")
+              children: getLabel("module_description")
             })]
-          }), o]
+          }), children]
         })
       })
     })]
   });
-}, eo = () => {
+};
+const InnerModule = () => {
+  const {
+    getModuleLabel
+  } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
   const {
-    getModuleLabel: o
-  } = g(), l = I(), {
-    subtitle: n
-  } = u();
-  return /* @__PURE__ */ e(W, {
-    title: o(),
-    subtitle: n,
-    children: /* @__PURE__ */ e(P, {
-      children: l ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ e(oo, {})
+    subtitle
+  } = useBase();
+  return /* @__PURE__ */ jsx(HelmetPage, {
+    title: getModuleLabel(),
+    subtitle,
+    children: /* @__PURE__ */ jsx(InnerModuleRoot, {
+      children: isDesktop ? /* @__PURE__ */ jsx(DesktopContent, {}) : /* @__PURE__ */ jsx(MobileContent, {})
     })
   });
-}, ro = (o) => {
+};
+const NoAuthModuleLayout = (props) => {
+  const {
+    moduleId,
+    moduleNameField,
+    children,
+    componentsDictionary,
+    skeletonFlags,
+    subtitle,
+    companyLogoSmallUrl,
+    companyLogoNormalUrl,
+    moduleIlustrationUrl
+  } = props;
   const {
-    moduleId: l,
-    moduleNameField: n,
-    children: r,
-    componentsDictionary: f,
-    skeletonFlags: b,
-    subtitle: v,
-    companyLogoSmallUrl: k,
-    companyLogoNormalUrl: C,
-    moduleIlustrationUrl: L
-  } = o, {
-    host_static_assets: s,
-    environment_assets: p
-  } = H(), w = $().currentLocale?.localeString, D = C || `${s}/${p}/frontend/commons/assets/icons/logotipo_m4l.svg`, M = k || `${s}/${p}/frontend/commons/assets/icons/isotipo_m4l.svg`, _ = L || `${s}/${p}/frontend/domain/host/commons/assets/img/illustration_noauth.png`, c = b;
-  return c.findIndex((S) => S === "dictionary_loaded") < 0 && c.push("dictionary_loaded"), /* @__PURE__ */ e(N, {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const localeString = useLocales().currentLocale?.localeString;
+  const finalCompanyLogoNormalUrl = companyLogoNormalUrl || `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/logotipo_m4l.svg`;
+  const finalCompanyLogoSmallUrl = companyLogoSmallUrl || `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/isotipo_m4l.svg`;
+  const finalIllustrationUrl = moduleIlustrationUrl || `${host_static_assets}/${environment_assets}/frontend/domain/host/commons/assets/img/illustration_noauth.png`;
+  const finalSkeletonFlags = skeletonFlags;
+  if (finalSkeletonFlags.findIndex((f) => f === "dictionary_loaded") < 0) {
+    finalSkeletonFlags.push("dictionary_loaded");
+  }
+  return /* @__PURE__ */ jsx(BaseProvider, {
     value: {
-      subtitle: v,
-      companyLogoSmallUrl: M,
-      companyLogoNormalUrl: D,
-      moduleIlustrationUrl: _,
-      children: r
+      subtitle,
+      companyLogoSmallUrl: finalCompanyLogoSmallUrl,
+      companyLogoNormalUrl: finalCompanyLogoNormalUrl,
+      moduleIlustrationUrl: finalIllustrationUrl,
+      children
     },
-    children: /* @__PURE__ */ e(R, {
-      children: /* @__PURE__ */ e(U, {
-        isAuth: !1,
-        moduleId: l,
-        moduleNameField: n,
-        componentsDictionary: f,
-        currentLang: w,
-        children: /* @__PURE__ */ e(F, {
-          flags: c,
-          children: /* @__PURE__ */ e(eo, {})
+    children: /* @__PURE__ */ jsx(FlagsProvider, {
+      children: /* @__PURE__ */ jsx(ModuleDictionaryProvider, {
+        isAuth: false,
+        moduleId,
+        moduleNameField,
+        componentsDictionary,
+        currentLang: localeString,
+        children: /* @__PURE__ */ jsx(ModuleSkeletonProvider, {
+          flags: finalSkeletonFlags,
+          children: /* @__PURE__ */ jsx(InnerModule, {})
         })
       })
     })
   });
 };
-function so() {
+function getNoAuthModuleLayoutComponentsDictionary() {
   return ["no_auth_module_layout"];
 }
-const po = {
+const defaultNoAuthModuleLayoutDictionary = {
   no_auth_module_layout: {}
 };
 export {
-  ro as N,
-  po as d,
-  so as g
+  NoAuthModuleLayout as N,
+  defaultNoAuthModuleLayoutDictionary as d,
+  getNoAuthModuleLayoutComponentsDictionary as g
 };

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@m4l/layouts",
-  "version": "0.1.39",
+  "version": "0.1.40",
   "license": "UNLICENSED",
   "dependencies": {
+    "@mui/material": "5.10.4",
     "@m4l/components": "*",
     "@m4l/core": "*",
     "@m4l/graphics": "*",