@m4l/layouts 3.1.3 → 4.0.0

package/components/MFHostApp/index-Bz3RUvvY.js

@@ -0,0 +1,90 @@
+import { unstable_HistoryRouter } from "react-router-dom";
+import { EnvironmentProvider, HostToolsProvider, NetworkProvider, DomainCountryProvider } from "@m4l/core";
+import { LocalesProvider, HostThemeProvider, ResponsiveContainerProvider, FormatterProvider } from "@m4l/graphics";
+import { BaseModule, WindowToolsMFProvider, DynamicMFParmsProvider, AppearanceComponentProvider } from "@m4l/components";
+import { useTheme } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { M as MFWindowsTitle } from "../index-uQ5qk7MJ.js";
+function MFHostApp(props) {
+  const {
+    children,
+    currentLocale,
+    hostTheme,
+    environment,
+    hostTools,
+    axiosOperation,
+    formatters,
+    isAuth = true,
+    moduleId,
+    moduleNameField,
+    skeletonFlags,
+    privileges,
+    componentsDictionary,
+    dynamicMFStore,
+    windowTools,
+    observedDivRef,
+    isAddEditModule = false
+  } = props;
+  const {
+    generalSettings
+  } = useTheme();
+  return /* @__PURE__ */ jsx(EnvironmentProvider, {
+    ...environment,
+    children: /* @__PURE__ */ jsx(HostToolsProvider, {
+      ...hostTools,
+      children: /* @__PURE__ */ jsx(NetworkProvider, {
+        axiosOperation,
+        children: /* @__PURE__ */ jsx(LocalesProvider, {
+          isMicroFrontEnd: true,
+          localeHost: currentLocale,
+          children: /* @__PURE__ */ jsx(HostThemeProvider, {
+            isMicroFrontEnd: true,
+            ...hostTheme,
+            isMobile: generalSettings?.isMobile,
+            children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, {
+              observedDivRef,
+              children: /* @__PURE__ */ jsx(unstable_HistoryRouter, {
+                history: hostTools.history,
+                children: /* @__PURE__ */ jsx(DomainCountryProvider, {
+                  isMicroFrontEnd: true,
+                  id: dynamicMFStore?.getState().dynamicMFParameters?.id || 1,
+                  currency: formatters.currencyFormatter.code,
+                  currency_decimal_digits: formatters.currencyFormatter.decimalDigits,
+                  decimal_symbol: formatters.numberFormatter.decimalSymbol,
+                  thousands_symbol: formatters.numberFormatter.thousandsSymbol,
+                  children: /* @__PURE__ */ jsx(BaseModule, {
+                    isAuth,
+                    moduleId,
+                    moduleNameField,
+                    componentsDictionary,
+                    skeletonFlags,
+                    privileges,
+                    children: /* @__PURE__ */ jsx(FormatterProvider, {
+                      isMicroFrontEnd: true,
+                      ...formatters,
+                      children: /* @__PURE__ */ jsx(WindowToolsMFProvider, {
+                        ...windowTools,
+                        children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
+                          store: dynamicMFStore,
+                          children: /* @__PURE__ */ jsx(MFWindowsTitle, {
+                            isAddEditModule,
+                            children: /* @__PURE__ */ jsx(AppearanceComponentProvider, {
+                              children
+                            })
+                          })
+                        })
+                      })
+                    })
+                  })
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+}
+export {
+  MFHostApp as M
+};

package/components/{index-JO7pb6aB.js → index-uQ5qk7MJ.js}

@@ -1,7 +1,7 @@
-import { jsx } from "react/jsx-runtime";
 import { DomainCountryProvider } from "@m4l/core";
 import { FormatterProvider, ResponsiveContainerProvider } from "@m4l/graphics";
 import { BaseModule, useSetWindowsTitle } from "@m4l/components";
+import { jsx } from "react/jsx-runtime";
 import { Fragment } from "react";
 function MFNoAuthApp(props) {
   const {
@@ -22,22 +22,37 @@ function MFNoAuthApp(props) {
     decimal_symbol: ".",
     thousands_symbol: ","
   };
-  return /* @__PURE__ */ jsx(DomainCountryProvider, { isMicroFrontEnd: true, ...domianCountry, children: /* @__PURE__ */ jsx(
-    BaseModule,
-    {
+  return /* @__PURE__ */ jsx(DomainCountryProvider, {
+    isMicroFrontEnd: true,
+    ...domianCountry,
+    children: /* @__PURE__ */ jsx(BaseModule, {
       isAuth,
       moduleId,
       moduleNameField,
       componentsDictionary,
       skeletonFlags,
       privileges,
-      children: /* @__PURE__ */ jsx(FormatterProvider, { isMicroFrontEnd: true, ...formatters, children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, { observedDivRef, children }) })
-    }
-  ) });
+      children: /* @__PURE__ */ jsx(FormatterProvider, {
+        isMicroFrontEnd: true,
+        ...formatters,
+        children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, {
+          observedDivRef,
+          children
+        })
+      })
+    })
+  });
 }
-function MFWindowsTitle({ isAddEditModule = false, children }) {
-  useSetWindowsTitle({ isAddEditModule });
-  return /* @__PURE__ */ jsx(Fragment, { children });
+function MFWindowsTitle({
+  isAddEditModule = false,
+  children
+}) {
+  useSetWindowsTitle({
+    isAddEditModule
+  });
+  return /* @__PURE__ */ jsx(Fragment, {
+    children
+  });
 }
 export {
   MFWindowsTitle as M,

package/contexts/AuthContext/index-DARkRRM4.js

@@ -0,0 +1,161 @@
+import { createContext, useReducer, useEffect } from "react";
+import { useHostTools, useNetwork, useEnvironment, useLocalStorageWithListener, EmitEvents, getLocalStorage, setLocalStorage } from "@m4l/core";
+import { jsx } from "react/jsx-runtime";
+var EnumTypes = /* @__PURE__ */ ((EnumTypes2) => {
+  EnumTypes2["Initial"] = "INITIALIZE";
+  EnumTypes2["Login"] = "LOGIN";
+  EnumTypes2["Logout"] = "LOGOUT";
+  return EnumTypes2;
+})(EnumTypes || {});
+const initialState = {
+  isAuthenticated: false,
+  isInitialized: false,
+  user: null
+};
+const JWTReducer = (state, action) => {
+  switch (action.type) {
+    case "INITIALIZE":
+      return {
+        isAuthenticated: action.payload.isAuthenticated,
+        isInitialized: true,
+        user: action.payload.user
+      };
+    case "LOGIN":
+      return {
+        ...state,
+        isAuthenticated: true,
+        user: action.payload.user
+      };
+    case "LOGOUT":
+      return {
+        ...state,
+        isAuthenticated: false,
+        user: null
+      };
+    default:
+      return state;
+  }
+};
+const AuthContext = createContext(null);
+function dispatchInitial(dispatch) {
+  dispatch({
+    type: EnumTypes.Initial,
+    payload: {
+      isAuthenticated: false,
+      user: null
+    }
+  });
+}
+function AuthProvider(props) {
+  const {
+    children
+  } = props;
+  const [state, dispatch] = useReducer(JWTReducer, initialState);
+  const {
+    events_add_listener
+  } = useHostTools();
+  const {
+    networkOperation
+  } = useNetwork();
+  const {
+    domain_token
+  } = useEnvironment();
+  const [nextValSession, setNextValSession] = useLocalStorageWithListener(
+    //Variable para saber si ha cambiado la session en otro navegador
+    "vSession",
+    (/* @__PURE__ */ new Date()).getTime() + ""
+  );
+  useEffect(() => {
+    const initialize = async () => {
+      networkOperation({
+        method: "GET",
+        endPoint: `auth/login`,
+        parms: {
+          user_data: true
+        },
+        checkUnAuthorized: false
+      }).then((response) => {
+        dispatch({
+          type: EnumTypes.Initial,
+          payload: {
+            isAuthenticated: true,
+            user: response.user
+          }
+        });
+        const useSaved = getLocalStorage("userData", {
+          email: response.user.email,
+          remember: true
+        });
+        if (useSaved?.email !== response.user.email) {
+          setLocalStorage("userData", {
+            email: response.user.email
+          }, true);
+        }
+      }).catch(() => {
+        dispatchInitial(dispatch);
+      });
+    };
+    initialize();
+  }, [nextValSession]);
+  const login = async (email, password, remember) => {
+    await networkOperation({
+      endPoint: `auth/login`,
+      method: "POST",
+      data: {
+        email,
+        password,
+        domain_token
+      }
+    }).then((response) => {
+      const user = response.data;
+      if (remember) {
+        setLocalStorage("userData", {
+          email,
+          remember
+        });
+      } else {
+        setLocalStorage("userData", {
+          email: "",
+          remember
+        });
+      }
+      dispatch({
+        type: EnumTypes.Login,
+        payload: {
+          user
+        }
+      });
+      setNextValSession((/* @__PURE__ */ new Date()).getTime() + "");
+    });
+  };
+  const logout = async (isAuthenticated) => {
+    if (isAuthenticated) {
+      await networkOperation({
+        endPoint: `auth/logout`,
+        method: "POST"
+      });
+    }
+    dispatch({
+      type: EnumTypes.Logout
+    });
+    setNextValSession((/* @__PURE__ */ new Date()).getTime() + "");
+  };
+  const onNetserviceUnautorized = () => {
+    logout(false);
+  };
+  useEffect(() => {
+    events_add_listener(EmitEvents.EMMIT_EVENT_NET_SERVICE_UNAUTHORIZED, onNetserviceUnautorized);
+  }, []);
+  return /* @__PURE__ */ jsx(AuthContext.Provider, {
+    value: {
+      ...state,
+      login,
+      logout
+    },
+    children
+  });
+}
+export {
+  AuthContext as A,
+  AuthProvider as a
+};

package/contexts/AuthContext/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { AuthProviderProps, SessionContextType } from './types';
+declare const AuthContext: import("react").Context<SessionContextType | null>;
+declare function AuthProvider(props: AuthProviderProps): import("react").JSX.Element;
+export { AuthContext, AuthProvider };

package/contexts/AuthContext/types.d.ts

@@ -0,0 +1,51 @@
+import { DomainCountry, Maybe } from '@m4l/core';
+import { ReactNode } from 'react';
+export declare enum EnumTypes {
+    Initial = "INITIALIZE",
+    Login = "LOGIN",
+    Logout = "LOGOUT"
+}
+export declare type AuthProviderProps = {
+    children: ReactNode;
+};
+export declare type ActionMap<M extends {
+    [index: string]: any;
+}> = {
+    [Key in keyof M]: M[Key] extends undefined ? {
+        type: Key;
+    } : {
+        type: Key;
+        payload: M[Key];
+    };
+};
+export declare type SessionAuthPayload = {
+    [EnumTypes.Initial]: {
+        isAuthenticated: boolean;
+        user: AuthUser;
+    };
+    [EnumTypes.Login]: {
+        user: AuthUser;
+    };
+    [EnumTypes.Logout]: undefined;
+};
+export declare type SessionActions = ActionMap<SessionAuthPayload>[keyof ActionMap<SessionAuthPayload>];
+export interface User {
+    email: string;
+    id: number;
+    first_name: string;
+    last_name: string;
+    account_id: number;
+    domain_country: DomainCountry;
+    avatar_url?: Maybe<string>;
+    user_type_id?: number;
+}
+export declare type AuthUser = Maybe<User>;
+export declare type AuthState = {
+    isAuthenticated: boolean;
+    isInitialized: boolean;
+    user: AuthUser;
+};
+export interface SessionContextType extends AuthState {
+    login: (email: string, password: string, remember: boolean) => object | undefined;
+    logout: (isAuthenticated: boolean) => Promise<void>;
+}

package/contexts/index-l0sNRNKZ.js

@@ -0,0 +1 @@
+

package/contexts/index.d.ts

@@ -0,0 +1 @@
+export * from './AuthContext';

package/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useMasterDetail';
+export * from './useAuth';
 export * from './useModule';

package/hooks/useAuth/index-8hAi3guc.js

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { A as AuthContext } from "../../contexts/AuthContext/index-DARkRRM4.js";
+const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) throw new Error("Auth context must be use inside AuthProvider");
+  return context;
+};
+export {
+  useAuth as u
+};

package/hooks/useAuth/index.d.ts

@@ -0,0 +1,2 @@
+export declare const useAuth: () => import("../../contexts/AuthContext/types").SessionContextType;
+export default useAuth;

package/hooks/useMasterDetail/{index-B5SssPwx.js → index-D4QUQYYc.js}

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { M as MasterDetailContext } from "../../layouts/MasterDetailLayout/index-1ni-37-Z.js";
+import { M as MasterDetailContext } from "../../layouts/MasterDetailLayout/index-DeC4RoBs.js";
 const useMasterDetail = () => useContext(MasterDetailContext);
 export {
   useMasterDetail as u

package/hooks/useModule/{index-DN7ElPTv.js → index-FY5nsBmE.js}

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { M as ModuleContext } from "../../layouts/ModuleLayout/index-r2ZbMqju.js";
+import { M as ModuleContext } from "../../layouts/ModuleLayout/index-DAtDuh6s.js";
 const useModule = () => {
   const context = useContext(ModuleContext);
   if (!context) throw new Error("useModule context must be use inside ModuleContext");

package/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './contexts';
 export * from './layouts';
 export * from './hooks';

package/index.js

@@ -1,15 +1,19 @@
-import { a } from "./components/index-JO7pb6aB.js";
-import { M } from "./components/MFHostApp/index-DDl942hP.js";
-import { a as a2, d, g } from "./layouts/ModuleLayout/index-r2ZbMqju.js";
-import { a as a3, d as d2, g as g2 } from "./layouts/MasterDetailLayout/index-1ni-37-Z.js";
-import { N, d as d3, g as g3 } from "./layouts/NoAuthModuleLayout/index-DZtmX8iq.js";
-import { u } from "./hooks/useMasterDetail/index-B5SssPwx.js";
-import { u as u2 } from "./hooks/useModule/index-DN7ElPTv.js";
+import { a } from "./components/index-uQ5qk7MJ.js";
+import { M } from "./components/MFHostApp/index-Bz3RUvvY.js";
+import { A, a as a2 } from "./contexts/AuthContext/index-DARkRRM4.js";
+import { a as a3, d, g } from "./layouts/ModuleLayout/index-DAtDuh6s.js";
+import { a as a4, d as d2, g as g2 } from "./layouts/MasterDetailLayout/index-DeC4RoBs.js";
+import { N, d as d3, g as g3 } from "./layouts/NoAuthModuleLayout/index-C_NBiUuH.js";
+import { u } from "./hooks/useMasterDetail/index-D4QUQYYc.js";
+import { u as u2 } from "./hooks/useAuth/index-8hAi3guc.js";
+import { u as u3 } from "./hooks/useModule/index-FY5nsBmE.js";
 export {
+  A as AuthContext,
+  a2 as AuthProvider,
   M as MFHostApp,
   a as MFNoAuthApp,
-  a3 as MasterDetailLayout,
-  a2 as ModuleLayout,
+  a4 as MasterDetailLayout,
+  a3 as ModuleLayout,
   N as NoAuthModuleLayout,
   d2 as defaultMasterDetailDictionary,
   d as defaultModuleLayoutDictionary,
@@ -17,6 +21,7 @@ export {
   g2 as getMasterDetailLayoutComponentsDictionary,
   g as getModuleLayoutComponentsDictionary,
   g3 as getNoAuthModuleLayoutComponentsDictionary,
+  u2 as useAuth,
   u as useMasterDetail,
-  u2 as useModule
+  u3 as useModule
 };

package/layouts/MasterDetailLayout/{index-1ni-37-Z.js → index-DeC4RoBs.js}

@@ -1,8 +1,8 @@
-import { jsx } from "react/jsx-runtime";
 import { createContext, useState, useRef, useMemo, useCallback } from "react";
 import { voidFunction, useEnvironment, useModuleDictionary } from "@m4l/core";
 import { WindowBase, SplitLayout } from "@m4l/components";
-import { a as ModuleLayout, g as getModuleLayoutComponentsDictionary } from "../ModuleLayout/index-r2ZbMqju.js";
+import { a as ModuleLayout, g as getModuleLayoutComponentsDictionary } from "../ModuleLayout/index-DAtDuh6s.js";
+import { jsx } from "react/jsx-runtime";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
@@ -13,19 +13,19 @@ const initialState = {
 };
 const MasterDetailContext = createContext(initialState);
 function MasterDetailProvider(props) {
-  const { children, onClickViewDetail } = props;
+  const {
+    children,
+    onClickViewDetail
+  } = props;
   const [masterSelection, setMasterSelection] = useState(void 0);
-  return /* @__PURE__ */ jsx(
-    MasterDetailContext.Provider,
-    {
-      value: {
-        masterSelection,
-        onChangeMasterSelection: setMasterSelection,
-        onClickViewDetail
-      },
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(MasterDetailContext.Provider, {
+    value: {
+      masterSelection,
+      onChangeMasterSelection: setMasterSelection,
+      onClickViewDetail
+    },
+    children
+  });
 }
 const componentName = "M4LMasterDetailLayout";
 generateUtilityClasses(componentName, [
@@ -62,46 +62,44 @@ function MasterDetailLayout(props) {
     version
     // defaultDictionary,
   } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
   const [splitPosition, setSplitPosition] = useState("vertical");
   const isDesktop = useResponsiveDesktop();
   const moduleLayoutRef = useRef(null);
-  const { getLabel } = useModuleDictionary();
-  const splitActions = useMemo(
-    () => [
-      {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_vertical.svg`,
-        onClick: () => onChangePostionInternal("vertical"),
-        visibility: "main",
-        label: getLabel("master_detail_layout.split_vertical"),
-        tag: "vertical",
-        className: "splitactions",
-        disabled: splitPosition === "vertical",
-        key: "vertical"
-      },
-      {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_horizontal.svg`,
-        onClick: () => onChangePostionInternal("horizontal"),
-        visibility: "main",
-        label: getLabel("master_detail_layout.split_horizontal"),
-        tag: "horizontal",
-        className: "splitactions",
-        disabled: splitPosition === "horizontal",
-        key: "horizontal"
-      },
-      {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/no_split.svg`,
-        onClick: () => onChangePostionInternal("none"),
-        visibility: "main",
-        label: getLabel("master_detail_layout.no_split"),
-        tag: "none",
-        className: "splitactions",
-        disabled: splitPosition === "none",
-        key: "none"
-      }
-    ],
-    [getLabel, splitPosition]
-  );
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const splitActions = useMemo(() => [{
+    urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_vertical.svg`,
+    onClick: () => onChangePostionInternal("vertical"),
+    visibility: "main",
+    label: getLabel("master_detail_layout.split_vertical"),
+    tag: "vertical",
+    className: "splitactions",
+    disabled: splitPosition === "vertical",
+    key: "vertical"
+  }, {
+    urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_horizontal.svg`,
+    onClick: () => onChangePostionInternal("horizontal"),
+    visibility: "main",
+    label: getLabel("master_detail_layout.split_horizontal"),
+    tag: "horizontal",
+    className: "splitactions",
+    disabled: splitPosition === "horizontal",
+    key: "horizontal"
+  }, {
+    urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/no_split.svg`,
+    onClick: () => onChangePostionInternal("none"),
+    visibility: "main",
+    label: getLabel("master_detail_layout.no_split"),
+    tag: "none",
+    className: "splitactions",
+    disabled: splitPosition === "none",
+    key: "none"
+  }], [getLabel, splitPosition]);
   const onChangePostionInternal = useCallback((newPostion) => {
     setSplitPosition(newPostion);
   }, []);
@@ -120,30 +118,27 @@ function MasterDetailLayout(props) {
     });
   }, [detailComponent, getLabel]);
   const finalModuleActions = useMemo(() => {
-    const actions = getTotalModuleActions(
-      splitActions,
-      moduleActions
-    );
+    const actions = getTotalModuleActions(splitActions, moduleActions);
     return actions;
   }, [splitActions, moduleActions]);
   const classes = useMasterDetailLayoutUtilityClasses();
-  return /* @__PURE__ */ jsx(MasterDetailProvider, { onClickViewDetail, children: /* @__PURE__ */ jsx(MasterDetailLayoutRoot, { className: classes.root, children: /* @__PURE__ */ jsx(
-    ModuleLayout,
-    {
-      ref: moduleLayoutRef,
-      moduleId,
-      moduleActions: finalModuleActions,
-      version,
-      children: /* @__PURE__ */ jsx(
-        SplitLayout,
-        {
+  return /* @__PURE__ */ jsx(MasterDetailProvider, {
+    onClickViewDetail,
+    children: /* @__PURE__ */ jsx(MasterDetailLayoutRoot, {
+      className: classes.root,
+      children: /* @__PURE__ */ jsx(ModuleLayout, {
+        ref: moduleLayoutRef,
+        moduleId,
+        moduleActions: finalModuleActions,
+        version,
+        children: /* @__PURE__ */ jsx(SplitLayout, {
           splitPosition: isDesktop ? splitPosition : "none",
           firstPart: masterComponent,
           secondPart: detailComponent
-        }
-      )
-    }
-  ) }) });
+        })
+      })
+    })
+  });
 }
 function getMasterDetailLayoutComponentsDictionary() {
   return ["master_detail_layout"].concat(getModuleLayoutComponentsDictionary());

package/layouts/ModuleLayout/{index-r2ZbMqju.js → index-DAtDuh6s.js}

@@ -1,10 +1,12 @@
-import { jsx } from "react/jsx-runtime";
 import { useModal, useWindowToolsMF, ModalProvider, getModalDialogComponentsDictionary } from "@m4l/components";
 import { forwardRef, useRef, useImperativeHandle, createContext, useState, useMemo, useEffect } from "react";
 import { styled } from "@mui/material/styles";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-const InnerModuleRoot = styled("div")(({ theme }) => ({
+import { jsx } from "react/jsx-runtime";
+const InnerModuleRoot = styled("div")(({
+  theme
+}) => ({
   ...theme.components?.M4LModuleLayout?.styleOverrides
 }));
 const componentName = "M4LModuleLayout";
@@ -28,25 +30,43 @@ const useModuleLayoutUtilityClasses = () => {
   };
 };
 const InnerModule = forwardRef((props, ref) => {
-  const { children } = props;
-  const { openModal } = useModal();
+  const {
+    children
+  } = props;
+  const {
+    openModal
+  } = useModal();
   const divRef = useRef(null);
   useImperativeHandle(ref, () => ({
     openModal,
     current: divRef.current
   }));
   const classes = useModuleLayoutUtilityClasses();
-  return /* @__PURE__ */ jsx(InnerModuleRoot, { className: classes.root, ref: divRef, children: /* @__PURE__ */ jsx("div", { className: classes.moduleContent, children }) });
+  return /* @__PURE__ */ jsx(InnerModuleRoot, {
+    className: classes.root,
+    ref: divRef,
+    children: /* @__PURE__ */ jsx("div", {
+      className: classes.moduleContent,
+      children
+    })
+  });
 });
 InnerModule.displayName = "InnerModule";
 const ModuleContext = createContext(null);
 function ModuleProvider(props) {
-  const { children, moduleActions, moduleId, version } = props;
+  const {
+    children,
+    moduleActions,
+    moduleId,
+    version
+  } = props;
   const [configOptions] = useState(() => ({
     moduleId,
     dictionary: void 0
   }));
-  const { setActions } = useWindowToolsMF();
+  const {
+    setActions
+  } = useWindowToolsMF();
   const [dynamicActions, setDynamicActions] = useState([]);
   const finalModuleActions = useMemo(() => {
     return (moduleActions || []).concat(dynamicActions);
@@ -54,24 +74,26 @@ function ModuleProvider(props) {
   useEffect(() => {
     setActions(finalModuleActions, version);
   }, [finalModuleActions]);
-  return /* @__PURE__ */ jsx(
-    ModuleContext.Provider,
-    {
-      value: {
-        // moduleActions: finalModuleActions,
-        // dynamicActions,
-        setDynamicActions,
-        moduleId: configOptions.moduleId
-        // moduleNameField: configOptions.moduleNameField,
-        // urlIcon: configOptions.urlIcon,
-        // breadcrumbLinks: configOptions.breadcrumbLinks,
-      },
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(ModuleContext.Provider, {
+    value: {
+      // moduleActions: finalModuleActions,
+      // dynamicActions,
+      setDynamicActions,
+      moduleId: configOptions.moduleId
+      // moduleNameField: configOptions.moduleNameField,
+      // urlIcon: configOptions.urlIcon,
+      // breadcrumbLinks: configOptions.breadcrumbLinks,
+    },
+    children
+  });
 }
 const ModuleLayout = forwardRef((props, ref) => {
-  const { moduleId, moduleActions, version, children } = props;
+  const {
+    moduleId,
+    moduleActions,
+    version,
+    children
+  } = props;
   const moduleRef = useRef(null);
   const openModal = (modalOpenProps) => {
     moduleRef.current?.openModal(modalOpenProps);
@@ -80,7 +102,17 @@ const ModuleLayout = forwardRef((props, ref) => {
     openModal,
     current: moduleRef.current
   }));
-  return /* @__PURE__ */ jsx(ModuleProvider, { moduleId, moduleActions, version, children: /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(InnerModule, { ref: moduleRef, children }) }) });
+  return /* @__PURE__ */ jsx(ModuleProvider, {
+    moduleId,
+    moduleActions,
+    version,
+    children: /* @__PURE__ */ jsx(ModalProvider, {
+      children: /* @__PURE__ */ jsx(InnerModule, {
+        ref: moduleRef,
+        children
+      })
+    })
+  });
 });
 ModuleLayout.displayName = "ModuleLayout";
 function getModuleLayoutComponentsDictionary() {

package/layouts/NoAuthModuleLayout/{index-DZtmX8iq.js → index-C_NBiUuH.js}

@@ -1,10 +1,12 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useResponsiveDesktop, useLocales, ResponsiveContainerProvider } from "@m4l/graphics";
 import { LanguagePopover, Image, Typography, Stack, ScrollBar, HelmetPage } from "@m4l/components";
 import { styled } from "@mui/material";
 import { useBase, useModuleDictionary, useDomain, useEnvironment, BaseProvider, FlagsProvider, ModuleDictionaryProvider, ModuleSkeletonProvider } from "@m4l/core";
 import { styled as styled$1, alpha } from "@mui/material/styles";
-const InnerModuleRoot = styled("div")(({ theme }) => ({
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+const InnerModuleRoot = styled("div")(({
+  theme
+}) => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
@@ -120,46 +122,77 @@ styled$1("div")(() => ({
   alignItems: "center"
 }));
 const DesktopContent = () => {
-  const { children, companyLogoSmallUrl } = useBase();
-  const { getLabel } = useModuleDictionary();
-  const { name, slogan } = 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__ */ jsxs(CompanyName$1, { children: [
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "subtitleDens",
-            skeletonWidth: "70%",
-            skeletongHeight: "24px",
-            children: name
-          }
-        ),
-        /* @__PURE__ */ jsx(Typography, { variant: "paragraph", skeletonWidth: "40%", skeletongHeight: "20px", children: getLabel("company_name_subtitle") })
-      ] }),
-      /* @__PURE__ */ jsxs(CompanyLeyend, { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "h5", skeletonWidth: "50%", skeletongHeight: "36px", children: getLabel("module_leyend") }),
-        /* @__PURE__ */ jsx(Typography, { variant: "subtitle", skeletonWidth: "80%", skeletongHeight: "24px", children: slogan })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(WrapperFormContent$1, { children: /* @__PURE__ */ jsxs(FormContent$1, { children: [
-      /* @__PURE__ */ jsxs(ContainerModuleName$1, { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "h5", skeletonWidth: "20%", skeletongHeight: "36px", children: getLabel("module_name") }),
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
+  const {
+    children,
+    companyLogoSmallUrl
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    name,
+    slogan
+  } = 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__ */ jsxs(CompanyName$1, {
+        children: [/* @__PURE__ */ jsx(Typography, {
+          variant: "subtitleDens",
+          skeletonWidth: "70%",
+          skeletonHeight: "24px",
+          children: name
+        }), /* @__PURE__ */ jsx(Typography, {
+          variant: "paragraph",
+          skeletonWidth: "40%",
+          skeletonHeight: "20px",
+          children: getLabel("company_name_subtitle")
+        })]
+      }), /* @__PURE__ */ jsxs(CompanyLeyend, {
+        children: [/* @__PURE__ */ jsx(Typography, {
+          variant: "h5",
+          skeletonWidth: "50%",
+          skeletonHeight: "36px",
+          children: getLabel("module_leyend")
+        }), /* @__PURE__ */ jsx(Typography, {
+          variant: "subtitle",
+          skeletonWidth: "80%",
+          skeletonHeight: "24px",
+          children: slogan
+        })]
+      })]
+    }), /* @__PURE__ */ jsx(WrapperFormContent$1, {
+      children: /* @__PURE__ */ jsxs(FormContent$1, {
+        children: [/* @__PURE__ */ jsxs(ContainerModuleName$1, {
+          children: [/* @__PURE__ */ jsx(Typography, {
+            variant: "h5",
+            skeletonWidth: "20%",
+            skeletonHeight: "36px",
+            children: getLabel("module_name")
+          }), /* @__PURE__ */ jsx(Typography, {
             variant: "paragraph",
             skeletonWidth: "40%",
-            skeletongHeight: "20px",
+            skeletonHeight: "20px",
             children: getLabel("module_description")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(Stack, { direction: "column", height: "auto", children: /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsx(Fragment, { children }) }) })
-    ] }) })
-  ] });
+          })]
+        }), /* @__PURE__ */ jsx(Stack, {
+          direction: "column",
+          height: "auto",
+          children: /* @__PURE__ */ jsx(ScrollBar, {
+            children: /* @__PURE__ */ jsx(Fragment, {
+              children
+            })
+          })
+        })]
+      })
+    })]
+  });
 };
 const MobileContentRoot = styled$1("div")(({ theme }) => ({
   display: "flex",
@@ -248,48 +281,77 @@ const ContainerModuleName = styled$1("div")(() => ({
   gap: "4px"
 }));
 const MobileContent = () => {
-  const { children, companyLogoSmallUrl } = useBase();
-  const { 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__ */ jsxs(CompanyName, { children: [
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "subtitleDens",
-            skeletonWidth: "70%",
-            skeletongHeight: "24px",
-            children: name
-          }
-        ),
-        /* @__PURE__ */ jsx(Typography, { variant: "paragraph", skeletonWidth: "40%", skeletongHeight: "20px", children: getLabel("company_name_subtitle") })
-      ] }),
-      /* @__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: getLabel("module_name") }),
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "paragraph",
-            skeletonWidth: "40%",
-            skeletongHeight: "20px",
-            children: getLabel("module_description")
-          }
-        )
-      ] }),
-      children
-    ] }) }) })
-  ] });
+  const {
+    children,
+    companyLogoSmallUrl
+  } = useBase();
+  const {
+    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__ */ jsxs(CompanyName, {
+        children: [/* @__PURE__ */ jsx(Typography, {
+          variant: "subtitleDens",
+          skeletonWidth: "70%",
+          skeletonHeight: "24px",
+          children: name
+        }), /* @__PURE__ */ jsx(Typography, {
+          variant: "paragraph",
+          skeletonWidth: "40%",
+          skeletonHeight: "20px",
+          children: getLabel("company_name_subtitle")
+        })]
+      }), /* @__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%",
+              skeletonHeight: "36px",
+              children: getLabel("module_name")
+            }), /* @__PURE__ */ jsx(Typography, {
+              variant: "paragraph",
+              skeletonWidth: "40%",
+              skeletonHeight: "20px",
+              children: getLabel("module_description")
+            })]
+          }), children]
+        })
+      })
+    })]
+  });
 };
 const InnerModule = () => {
-  const { getModuleLabel } = useModuleDictionary();
+  const {
+    getModuleLabel
+  } = useModuleDictionary();
   const isDesktop = useResponsiveDesktop();
-  const { subtitle } = useBase();
-  return /* @__PURE__ */ jsx(HelmetPage, { title: getModuleLabel(), subtitle, children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InnerModuleRoot, { id: "modulerootnouth", children: isDesktop ? /* @__PURE__ */ jsx(DesktopContent, {}) : /* @__PURE__ */ jsx(MobileContent, {}) }) }) });
+  const {
+    subtitle
+  } = useBase();
+  return /* @__PURE__ */ jsx(HelmetPage, {
+    title: getModuleLabel(),
+    subtitle,
+    children: /* @__PURE__ */ jsx(Fragment, {
+      children: /* @__PURE__ */ jsx(InnerModuleRoot, {
+        id: "modulerootnouth",
+        children: isDesktop ? /* @__PURE__ */ jsx(DesktopContent, {}) : /* @__PURE__ */ jsx(MobileContent, {})
+      })
+    })
+  });
 };
 const NoAuthModuleLayout = (props) => {
   const {
@@ -305,7 +367,10 @@ const NoAuthModuleLayout = (props) => {
     handleSetting,
     observedDivRef
   } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
+  const {
+    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`;
@@ -314,30 +379,32 @@ const NoAuthModuleLayout = (props) => {
   if (finalSkeletonFlags.findIndex((f) => f === "dictionary_loaded") < 0) {
     finalSkeletonFlags.push("dictionary_loaded");
   }
-  return /* @__PURE__ */ jsx(
-    BaseProvider,
-    {
-      value: {
-        subtitle,
-        companyLogoSmallUrl: finalCompanyLogoSmallUrl,
-        companyLogoNormalUrl: finalCompanyLogoNormalUrl,
-        moduleIlustrationUrl: finalIllustrationUrl,
-        children,
-        handleSetting
-      },
-      children: /* @__PURE__ */ jsx(FlagsProvider, { children: /* @__PURE__ */ jsx(
-        ModuleDictionaryProvider,
-        {
-          isAuth: false,
-          moduleId,
-          moduleNameField,
-          componentsDictionary,
-          currentLang: localeString,
-          children: /* @__PURE__ */ jsx(ModuleSkeletonProvider, { flags: finalSkeletonFlags, children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, { observedDivRef, children: /* @__PURE__ */ jsx(InnerModule, {}) }) })
-        }
-      ) })
-    }
-  );
+  return /* @__PURE__ */ jsx(BaseProvider, {
+    value: {
+      subtitle,
+      companyLogoSmallUrl: finalCompanyLogoSmallUrl,
+      companyLogoNormalUrl: finalCompanyLogoNormalUrl,
+      moduleIlustrationUrl: finalIllustrationUrl,
+      children,
+      handleSetting
+    },
+    children: /* @__PURE__ */ jsx(FlagsProvider, {
+      children: /* @__PURE__ */ jsx(ModuleDictionaryProvider, {
+        isAuth: false,
+        moduleId,
+        moduleNameField,
+        componentsDictionary,
+        currentLang: localeString,
+        children: /* @__PURE__ */ jsx(ModuleSkeletonProvider, {
+          flags: finalSkeletonFlags,
+          children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, {
+            observedDivRef,
+            children: /* @__PURE__ */ jsx(InnerModule, {})
+          })
+        })
+      })
+    })
+  });
 };
 function getNoAuthModuleLayoutComponentsDictionary() {
   return ["no_auth_module_layout"];

package/m4l_layouts/types.d.ts

@@ -0,0 +1 @@
+

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@m4l/layouts",
-  "version": "3.1.3",
+  "version": "4.0.0",
   "license": "UNLICENSED",
   "author": "M4L Team",
   "private": false,
   "dependencies": {
-    "@mui/material": "5.15.19",
-    "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "^3.0.0",
-    "@m4l/styles": "^3.0.0"
+    "@mui/material": "5.15.19"
   },
   "peerDependencies": {
-    "@m4l/components": "^4.0.0",
+    "@m4l/core": "^2.0.0",
+    "@m4l/graphics": "^3.0.0",
+    "@m4l/styles": "^3.0.0",
+    "@m4l/components": "^5.0.0",
     "@types/react": "^17.0.0 || ^18.0.0",
     "@types/react-dom": "^17.0.0 || ^18.0.0",
     "eventemitter3": "^4.0.7",

package/vite-env.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="vite/client" />
-/// <reference types="vitest" />
-/// <reference types="vitest/importMeta" />
+/// <reference types="vite/client" />
+/// <reference types="vitest" />
+/// <reference types="vitest/importMeta" />

package/components/MFHostApp/index-DDl942hP.js

@@ -1,63 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { unstable_HistoryRouter } from "react-router-dom";
-import { EnvironmentProvider, HostToolsProvider, NetworkProvider, DomainCountryProvider } from "@m4l/core";
-import { LocalesProvider, HostThemeProvider, ResponsiveContainerProvider, FormatterProvider } from "@m4l/graphics";
-import { BaseModule, WindowToolsMFProvider, DynamicMFParmsProvider, AppearanceComponentProvider } from "@m4l/components";
-import { useTheme } from "@mui/material";
-import { M as MFWindowsTitle } from "../index-JO7pb6aB.js";
-function MFHostApp(props) {
-  const {
-    children,
-    currentLocale,
-    hostTheme,
-    environment,
-    hostTools,
-    axiosOperation,
-    formatters,
-    isAuth = true,
-    moduleId,
-    moduleNameField,
-    skeletonFlags,
-    privileges,
-    componentsDictionary,
-    dynamicMFStore,
-    windowTools,
-    observedDivRef,
-    isAddEditModule = false
-  } = props;
-  const { generalSettings } = useTheme();
-  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: true, localeHost: currentLocale, children: /* @__PURE__ */ jsx(
-    HostThemeProvider,
-    {
-      isMicroFrontEnd: true,
-      ...hostTheme,
-      isMobile: generalSettings?.isMobile,
-      children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, { observedDivRef, children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history: hostTools.history, children: /* @__PURE__ */ jsx(
-        DomainCountryProvider,
-        {
-          isMicroFrontEnd: true,
-          id: dynamicMFStore?.getState().dynamicMFParameters?.id || 1,
-          currency: formatters.currencyFormatter.code,
-          currency_decimal_digits: formatters.currencyFormatter.decimalDigits,
-          decimal_symbol: formatters.numberFormatter.decimalSymbol,
-          thousands_symbol: formatters.numberFormatter.thousandsSymbol,
-          children: /* @__PURE__ */ jsx(
-            BaseModule,
-            {
-              isAuth,
-              moduleId,
-              moduleNameField,
-              componentsDictionary,
-              skeletonFlags,
-              privileges,
-              children: /* @__PURE__ */ jsx(FormatterProvider, { isMicroFrontEnd: true, ...formatters, children: /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(MFWindowsTitle, { isAddEditModule, children: /* @__PURE__ */ jsx(AppearanceComponentProvider, { children }) }) }) }) })
-            }
-          )
-        }
-      ) }) })
-    }
-  ) }) }) }) });
-}
-export {
-  MFHostApp as M
-};