@m4l/layouts 0.1.35 → 0.1.38

package/layouts/NoAuthModuleLayout/index.eabf38c1.js

@@ -0,0 +1,345 @@
+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
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  height: "100vh",
+  padding: "20px",
+  backgroundColor: o.palette.background.background,
+  [o.breakpoints.down("md")]: {
+    padding: "0px"
+  }
+})), j = t("div")(({ theme: o }) => ({
+  display: "flex",
+  borderRadius: "16px",
+  backgroundColor: o.palette.background.neutral,
+  boxShadow: o.customShadows?.z4,
+  padding: "20px 0 20px 20px",
+  width: "100%",
+  height: "100%",
+  maxWidth: "965px",
+  maxHeight: "900px",
+  position: "relative",
+  overflow: "auto",
+  "& .M4LanguagePopover-root": {
+    position: "absolute",
+    top: "20px",
+    right: "20px",
+    zIndex: 1
+  }
+})), T = t("div")(({ theme: o }) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: "16px",
+  width: "100%",
+  maxWidth: "400px",
+  height: "100%",
+  backgroundColor: o.palette.state?.focus,
+  boxShadow: o.customShadows?.z4,
+  padding: "0 60px",
+  gap: "40px",
+  overflow: "hidden",
+  "& .MuiTypography-root": {
+    color: o.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),
+    margin: "auto"
+  }
+})), A = t("div")(({ theme: o }) => ({
+  display: "flex",
+  width: "84px",
+  height: "84px",
+  borderRadius: "6px",
+  backgroundColor: o.palette.state?.active,
+  justifyContent: "center",
+  alignItems: "center",
+  boxShadow: `0px 4px 8px  ${d(o.palette.patronus?.coolGrey[70] || "", 0.16)}`,
+  "& .M4LImage-root": {
+    backgroundColor: o.palette.patronus?.marbleLight[10],
+    borderRadius: "6px"
+  }
+})), B = t("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "5px",
+  width: "100%"
+})), z = t("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "5px",
+  width: "100%"
+})), G = t("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  padding: "0 60px 0 80px",
+  margin: "auto 0",
+  width: "100%",
+  gap: "20px"
+})), E = t("div")(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%"
+})), q = t("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  gap: "4px"
+})), J = () => {
+  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,
+          ratio: "1:1",
+          width: "64px",
+          height: "64px"
+        })
+      }), /* @__PURE__ */ i(B, {
+        children: [/* @__PURE__ */ e(a, {
+          variant: "subtitleDens",
+          skeletonWidth: "70%",
+          skeletongHeight: "24px",
+          children: r
+        }), /* @__PURE__ */ e(a, {
+          variant: "paragraph",
+          skeletonWidth: "40%",
+          skeletongHeight: "20px",
+          children: n("company_name_subtitle")
+        })]
+      }), /* @__PURE__ */ i(z, {
+        children: [/* @__PURE__ */ e(a, {
+          variant: "h5",
+          skeletonWidth: "50%",
+          skeletongHeight: "36px",
+          children: n("module_leyend")
+        }), /* @__PURE__ */ e(a, {
+          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, {
+              variant: "h5",
+              skeletonWidth: "20%",
+              skeletongHeight: "36px",
+              children: n("module_name")
+            }), /* @__PURE__ */ e(a, {
+              variant: "paragraph",
+              skeletonWidth: "40%",
+              skeletongHeight: "20px",
+              children: n("module_description")
+            })]
+          }), o]
+        })
+      })
+    })]
+  });
+}, K = t("div")(({ theme: o }) => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  height: "100%",
+  backgroundColor: o.palette.background.neutral,
+  padding: "12px",
+  gap: "32px"
+})), O = t("div")(({ theme: o }) => ({
+  display: "flex",
+  flexDirection: "column",
+  padding: "12px",
+  gap: "20px",
+  width: "100%",
+  backgroundColor: o.palette.state?.focus,
+  boxShadow: o.customShadows?.z4,
+  position: "relative",
+  borderRadius: "8px",
+  "& .M4LanguagePopover-root": {
+    position: "absolute",
+    top: "12px",
+    right: "12px"
+  },
+  "& .MuiTypography-root": {
+    color: o.palette.patronus?.marbleLight[10],
+    display: "flex",
+    textTransform: "uppercase"
+  },
+  "& .MuiSkeleton-root": {
+    backgroundColor: d(`${o.palette.patronus?.marbleLight[10]}`, 0.24),
+    margin: "auto"
+  }
+}));
+t("div")(() => ({
+  display: "flex"
+}));
+const Q = t("div")(({ theme: o }) => ({
+  display: "flex",
+  width: "52px",
+  height: "52px",
+  borderRadius: "6px",
+  backgroundColor: o.palette.state?.active,
+  justifyContent: "center",
+  alignItems: "center",
+  boxShadow: `0px 4px 8px  ${d(o.palette.patronus?.coolGrey[70] || "", 0.16)}`,
+  "& .M4LImage-root": {
+    backgroundColor: o.palette.patronus?.marbleLight[10],
+    borderRadius: "6px"
+  }
+})), V = t("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%"
+})), X = t("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  padding: "12px",
+  margin: "auto 0",
+  width: "100%",
+  gap: "20px"
+})), Y = t("div")(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  overflow: "hidden"
+})), Z = t("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  gap: "4px"
+})), oo = () => {
+  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,
+          ratio: "1:1",
+          width: "44px",
+          height: "44px"
+        })
+      }), /* @__PURE__ */ i(V, {
+        children: [/* @__PURE__ */ e(a, {
+          variant: "subtitleDens",
+          skeletonWidth: "70%",
+          skeletongHeight: "24px",
+          children: r
+        }), /* @__PURE__ */ e(a, {
+          variant: "paragraph",
+          skeletonWidth: "40%",
+          skeletongHeight: "20px",
+          children: n("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, {
+              variant: "h5",
+              skeletonWidth: "20%",
+              skeletongHeight: "36px",
+              children: n("module_name")
+            }), /* @__PURE__ */ e(a, {
+              variant: "paragraph",
+              skeletonWidth: "40%",
+              skeletongHeight: "20px",
+              children: n("module_description")
+            })]
+          }), o]
+        })
+      })
+    })]
+  });
+}, eo = () => {
+  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, {})
+    })
+  });
+}, ro = (o) => {
+  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, {
+    value: {
+      subtitle: v,
+      companyLogoSmallUrl: M,
+      companyLogoNormalUrl: D,
+      moduleIlustrationUrl: _,
+      children: r
+    },
+    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, {})
+        })
+      })
+    })
+  });
+};
+function so() {
+  return ["no_auth_module_layout"];
+}
+const po = {
+  no_auth_module_layout: {}
+};
+export {
+  ro as N,
+  po as d,
+  so as g
+};

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/index.d.ts

@@ -1,3 +1 @@
-/// <reference types="react" />
-import { ModuleProps } from './types';
-export declare const InnerModule: (props: ModuleProps) => JSX.Element;
+export declare const InnerModule: () => JSX.Element;

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/DesktopContent/index.d.ts

@@ -0,0 +1 @@
+export declare const DesktopContent: () => JSX.Element;

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/MobileContent/index.d.ts

@@ -0,0 +1 @@
+export declare const MobileContent: () => JSX.Element;

package/layouts/NoAuthModuleLayout/types.d.ts

@@ -8,11 +8,11 @@ export declare interface NoAuthBaseProviderProps {
     companyLogoSmallUrl: string;
     companyLogoNormalUrl: string;
     moduleIlustrationUrl?: string;
+    children: ReactNode;
 }
 export interface NoAuthModuleLayoutProps extends NoAuthBaseProviderProps {
     moduleId: string;
     moduleNameField?: string;
     componentsDictionary: string[];
     skeletonFlags: string[];
-    children: ReactNode;
 }

package/layouts/index.3e2d546f.js

@@ -0,0 +1,8 @@
+import "./ModuleLayout/index.90b4dc8e.js";
+import "@m4l/components";
+import "react";
+import "@m4l/core";
+import "./MasterDetailLayout/index.2c363c7a.js";
+import "@m4l/graphics";
+import "react/jsx-runtime";
+import "./NoAuthModuleLayout/index.eabf38c1.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/layouts",
-  "version": "0.1.35",
+  "version": "0.1.38",
   "license": "UNLICENSED",
   "dependencies": {
     "@m4l/components": "*",

package/components/MFIsolationApp/index.fb96bc5d.js

@@ -1,150 +0,0 @@
-import { useEffect as x, useMemo as _, useCallback as f } from "react";
-import { unstable_HistoryRouter as C } from "react-router-dom";
-import { ToastContainer as D, toast as N } from "react-toastify";
-import { HostThemeProvider as H, FormatterProvider as O, LocalesProvider as B, getLocaleFromNetwork as I } from "@m4l/graphics";
-import { A as j } from "../../contexts/AuthContext/index.6f966215.js";
-import { DomainCountryProvider as S, EnvironmentProvider as U, HostToolsProvider as z, NetworkProvider as R, axiosOperation as q } from "@m4l/core";
-import { createBrowserHistory as G } from "history";
-import J from "eventemitter3";
-import { format as K } from "date-fns";
-import { defaultThemeOptions as Q, fnComponentsOverrides as V } from "@m4l/styles";
-import { u as W } from "../../hooks/useAuth/index.cb6a3420.js";
-import { jsx as o, jsxs as X } from "react/jsx-runtime";
-import h from "nprogress";
-import { B as Y } from "../BaseModule/index.6309486a.js";
-import { AreasProvider as Z } from "@m4l/components";
-function $(m) {
-  const {
-    children: a,
-    user: d,
-    pwd: l
-  } = m, {
-    isAuthenticated: s,
-    isInitialized: c,
-    login: u,
-    user: e
-  } = W();
-  if (x(() => {
-    c && s === !1 && u(d, l, !1);
-  }, [c, s]), !s)
-    return /* @__PURE__ */ o("div", {
-      children: "Pendiente x atenticar"
-    });
-  const r = {
-    id: 1,
-    currency: "USD",
-    currency_decimal_digits: 2,
-    decimal_symbol: ".",
-    thousands_symbol: ","
-  };
-  return e?.domain_country && (r.id = e?.domain_country.id ?? r.id, r.currency = e?.domain_country.currency ?? r.currency, r.currency_decimal_digits = e?.domain_country.currency_decimal_digits ?? r.currency_decimal_digits, r.decimal_symbol = e?.domain_country.decimal_symbol ?? r.decimal_symbol, r.thousands_symbol = e?.domain_country?.thousands_symbol ?? r.thousands_symbol), /* @__PURE__ */ X(H, {
-    hostThemeOptions: Q,
-    fnComponentsOverrides: V,
-    isMicroFrontEnd: !0,
-    children: [/* @__PURE__ */ o(D, {}), /* @__PURE__ */ o(S, {
-      ...r,
-      isMicroFrontEnd: !1,
-      children: /* @__PURE__ */ o(O, {
-        isMicroFrontEnd: !1,
-        dateFormatter: {
-          formatDate: K
-        },
-        currencyFormatter: {
-          code: r.currency,
-          decimalDigits: r.currency_decimal_digits
-        },
-        children: a
-      })
-    })]
-  });
-}
-const p = G({
-  window
-});
-function hr(m) {
-  const {
-    children: a,
-    user: d,
-    pwd: l,
-    host_api_local: s,
-    host_api_remote: c,
-    host_static_assets: u,
-    environment_assets: e,
-    moduleId: r,
-    skeletonFlags: y,
-    moduleNameField: v,
-    privileges: g,
-    componentsDictionary: F,
-    onLoad: P,
-    activeAreasNetwork: b = !1
-  } = m, t = _(() => new J(), []), w = f((i, n) => {
-    t.on(i, n);
-  }, [t]), A = f((i, n) => {
-    if (n === null) {
-      t.removeListener(i);
-      return;
-    }
-    t.removeListener(i, n);
-  }, [t]), E = f((i, n) => {
-    t.emit(i, n);
-  }, [t]), M = () => {
-    h.configure({
-      showSpinner: !0
-    }), h.start();
-  }, k = () => {
-    h.done();
-  }, L = _(() => ({
-    host: "",
-    isLocalhost: !0,
-    domain_token: "lab1",
-    host_api_local: s,
-    host_api_remote: c,
-    host_static_assets: u,
-    environment_assets: e
-  }), []), T = _(() => ({
-    history: p,
-    toast: N,
-    startProgress: M,
-    stopProgress: k,
-    events_add_listener: w,
-    events_remove_listener: A,
-    events_emit: E
-  }), []);
-  return /* @__PURE__ */ o(U, {
-    ...L,
-    children: /* @__PURE__ */ o(z, {
-      ...T,
-      children: /* @__PURE__ */ o(R, {
-        axiosOperation: q,
-        children: /* @__PURE__ */ o(C, {
-          history: p,
-          children: /* @__PURE__ */ o(B, {
-            isMicroFrontEnd: !1,
-            getLocaleFromNetwork: I,
-            children: /* @__PURE__ */ o(j, {
-              children: /* @__PURE__ */ o($, {
-                user: d,
-                pwd: l,
-                children: /* @__PURE__ */ o(Y, {
-                  moduleId: r,
-                  privileges: g,
-                  skeletonFlags: y,
-                  componentsDictionary: F,
-                  moduleNameField: v,
-                  children: /* @__PURE__ */ o(Z, {
-                    onLoad: P,
-                    loadAreasFromNetwork: b,
-                    children: a
-                  })
-                })
-              })
-            })
-          })
-        })
-      })
-    })
-  });
-}
-export {
-  hr as M
-};

package/hooks/index.43202c4e.js

@@ -1,4 +0,0 @@
-import "react";
-import "../layouts/MasterDetailLayout/index.793884be.js";
-import "../contexts/AuthContext/index.6f966215.js";
-import "../layouts/ModuleLayout/index.c673a65f.js";

package/layouts/MasterDetailLayout/index.793884be.js

@@ -1,106 +0,0 @@
-import { createContext as $, useState as y, useRef as k, useMemo as p, useCallback as g } from "react";
-import { voidFunction as w, useEnvironment as P } from "@m4l/core";
-import { SplitLayout as z } from "@m4l/components";
-import { a as I, g as L } from "../ModuleLayout/index.c673a65f.js";
-import { jsx as c } from "react/jsx-runtime";
-import { useResponsiveDesktop as F } from "@m4l/graphics";
-const N = {
-  masterSelection: void 0,
-  onChangeMasterSelection: w
-}, x = $(N);
-function R(o) {
-  const {
-    children: e
-  } = o, [n, t] = y(void 0);
-  return /* @__PURE__ */ c(x.Provider, {
-    value: {
-      masterSelection: n,
-      onChangeMasterSelection: t
-    },
-    children: e
-  });
-}
-function V(o, e = [], n, t) {
-  let i = t !== void 0 && t ? [...o] : [n];
-  return i = e.concat(i), i;
-}
-function H(o) {
-  const {
-    moduleId: e,
-    masterComponent: n,
-    detailComponent: t,
-    moduleActions: i
-  } = o, {
-    host_static_assets: r,
-    environment_assets: s
-  } = P(), [C, h] = y("vertical"), d = F(), M = k(null), S = p(() => [{
-    urlIcon: `${r}/${s}/frontend/components/masterdetaillayout/assets/icons/split_vertical.svg`,
-    onClick: () => u("vertical"),
-    disabled: !0,
-    visibility: "main",
-    dictionaryField: "master_detail_layout.split_vertical",
-    tag: "vertical",
-    className: "splitactions"
-  }, {
-    urlIcon: `${r}/${s}/frontend/components/masterdetaillayout/assets/icons/split_horizontal.svg`,
-    onClick: () => u("horizontal"),
-    disabled: !1,
-    visibility: "main",
-    dictionaryField: "master_detail_layout.split_horizontal",
-    tag: "horizontal",
-    className: "splitactions"
-  }, {
-    urlIcon: `${r}/${s}/frontend/components/masterdetaillayout/assets/icons/no_split.svg`,
-    onClick: () => u("none"),
-    disabled: !1,
-    visibility: "main",
-    dictionaryField: "master_detail_layout.no_split",
-    tag: "none",
-    className: "splitactions"
-  }], []), [v, b] = y(S), u = g((m) => {
-    b((A) => {
-      const a = [...A];
-      for (let l = 0; l < a.length; l++)
-        a[l].disabled = !1, a[l].tag === m && (a[l].disabled = !0);
-      return a;
-    }), h(m);
-  }, []), _ = g(() => {
-  }, [t]), f = p(() => ({
-    urlIcon: `${r}/${s}/frontend/components/masterdetaillayout/assets/icons/view_detail.svg`,
-    onClick: _,
-    disabled: !1,
-    visibility: "allways",
-    dictionaryField: "master_detail_layout.view_detail",
-    tag: "none",
-    className: ""
-  }), [s, _]), D = p(() => V(v, i, f, d), [v, i, d, f]);
-  return /* @__PURE__ */ c(R, {
-    children: /* @__PURE__ */ c(I, {
-      ref: M,
-      moduleId: e,
-      moduleActions: D,
-      children: /* @__PURE__ */ c(z, {
-        splitPosition: d ? C : "none",
-        firstPart: n,
-        secondPart: t
-      })
-    })
-  });
-}
-function J() {
-  return ["master_detail_layout"].concat(L());
-}
-const K = {
-  master_detail_layout: {
-    split_vertical: "Split vertically",
-    split_horizontal: "Split horizontally",
-    no_split: "No split",
-    view_detail: "View detail"
-  }
-};
-export {
-  x as M,
-  H as a,
-  K as d,
-  J as g
-};