@m4l/components 2.0.7 → 3.0.1

package/components/Image/{index.32b58ce4.js → index-B7FhR9uF.js}

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { g as ImageRoot } from "../../styles/index.ccd8acc4.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { g as ImageRoot } from "../../styles/index-Cc9p_h7i.js";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock-CF-669v-.js";
 import clsx from "clsx";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { useBase, useEnvironment, evaluateWithContext } from "@m4l/core";
-import { c as classes, g as getSize } from "../PrintingSystem/index.47e0ce83.js";
+import { c as classes, g as getSize } from "../PrintingSystem/index-sSZkZbrr.js";
 import QRCode from "qrcode.react";
 const ratioOptions = {
   "1.168:1": {
@@ -74,8 +74,10 @@ const getNameDataTestId = (KEY) => {
 };
 const componentName = "M4LImage";
 generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "img"
+  /* states or variants of elements */
 ]);
 function getImagenClassesUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
@@ -94,24 +96,28 @@ function Image(props) {
   const { src, alt, width, height, ratio = "1:1", className } = props;
   const ratioImage = getRatioValues(ratio);
   const classes2 = useUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    ImageRoot,
-    {
-      className: clsx(classes2.root, className),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-      style: width && height ? { minWidth: width, minHeight: height, width, height } : { width: "100%", height: "100%" },
-      children: /* @__PURE__ */ jsx(
-        "img",
-        {
-          alt,
-          src,
-          className: classes2.img,
-          width: !width ? "100%" : ratioImage.width,
-          height: !height ? "100%" : ratioImage.height,
-          ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("img") } : {}
-        }
-      )
-    }
+  return (
+    /* BaseProvider: Es el contexto de valores propio del componente, se usa para propagar información dentro de su estructura evitando así implementar
+        una asignación por propiedades. */
+    /* @__PURE__ */ jsx(
+      ImageRoot,
+      {
+        className: clsx(classes2.root, className),
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
+        style: width && height ? { minWidth: width, minHeight: height, width, height } : { width: "100%", height: "100%" },
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt,
+            src,
+            className: classes2.img,
+            width: !width ? "100%" : ratioImage.width,
+            height: !height ? "100%" : ratioImage.height,
+            ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("img") } : {}
+          }
+        )
+      }
+    )
   );
 }
 const ImageNode = (props) => {
@@ -119,17 +125,20 @@ const ImageNode = (props) => {
   const { unitSize, sourceData } = useBase();
   const { host_static_assets, environment_assets } = useEnvironment();
   const resourceImg = evaluateWithContext(sourceData, src);
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: `${host_static_assets}/${environment_assets}/${resourceImg}`,
-      className: clsx(classes.imageNodeRoot, className),
-      style: {
-        width: getSize(width, unitSize),
-        height: getSize(height, unitSize),
-        ...style
+  return (
+    // eslint-disable-next-line jsx-a11y/alt-text
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: `${host_static_assets}/${environment_assets}/${resourceImg}`,
+        className: clsx(classes.imageNodeRoot, className),
+        style: {
+          width: getSize(width, unitSize),
+          height: getSize(height, unitSize),
+          ...style
+        }
       }
-    }
+    )
   );
 };
 const convertToPx = (size, magnitud) => {

package/components/LanguagePopover/index-4kPWKmxk.js

@@ -0,0 +1,179 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { generateUtilityClasses, generateUtilityClass, Stack, MenuItem } from "@mui/material";
+import { I as Image } from "../Image/index-B7FhR9uF.js";
+import { useLocales } from "@m4l/graphics";
+import { L as LanguagePopoverRoot, h as ContainerMenuItems, i as ContainerProgress, j as ContainerImage, k as LabelItem } from "../../styles/index-Cc9p_h7i.js";
+import { I as ImageButton } from "../mui_extended/Button/index-DlzpoczE.js";
+import { useEnvironment, useNetwork } from "@m4l/core";
+import { unstable_composeClasses } from "@mui/base";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock-CF-669v-.js";
+import { C as CircularProgress } from "../mui_extended/CircularProgress/index-Bnnti_G6.js";
+import { P as Popover } from "../mui_extended/Popover/index-C6_2t4L1.js";
+const componentName = "M4LanguagePopover";
+generateUtilityClasses(
+  componentName,
+  [
+    /* elements */
+    "root",
+    "containerItems",
+    "containerProgress",
+    "labelItem",
+    "imageButton"
+    /* states or variants of elements */
+  ]
+);
+function getM4LanguagePopoverClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    containerItems: ["containerItems"],
+    containerProgress: ["containerProgress"],
+    labelItem: ["labelItem"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getM4LanguagePopoverClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const LANGUAGEPOPOVER_PREFIX = "LanguagePopover";
+const getNameDataTestId = (KEY) => {
+  return `${LANGUAGEPOPOVER_PREFIX}-${KEY}`;
+};
+function LanguagePopover(props) {
+  const { testingProps } = props;
+  const { currentLocale, onChangeLocale } = useLocales();
+  const { domain_token } = useEnvironment();
+  const { networkOperation } = useNetwork();
+  const [open, setOpen] = useState(testingProps?.open || null);
+  const [loading, setLoading] = useState(testingProps?.loading || false);
+  const [allLocales, setAllLocales] = useState(
+    testingProps?.allLocales || []
+  );
+  const handleOpen = (event) => {
+    setOpen(event.currentTarget);
+  };
+  const handleClose = () => {
+    setOpen(null);
+  };
+  useEffect(() => {
+    let mounted = true;
+    if (open === null || loading || allLocales.length > 0) {
+      return;
+    }
+    setLoading(true);
+    networkOperation({
+      method: "GET",
+      endPoint: `na/locales`,
+      parms: { domain_token }
+    }).then((response) => {
+      if (mounted) {
+        !testingProps && setAllLocales(response.data);
+      }
+    }).finally(() => {
+      setLoading(false);
+    });
+    return function cleanUp() {
+      mounted = false;
+    };
+  }, [open]);
+  const classes = useUtilityClasses();
+  return (
+    /* LanguagePopoverRoot: Contenedor principal del componente, es usado para aplicar los estilos css de los overrides que
+        provienen del objeto del tema. Se usa para garantizar de que estos estilos no se propaguen a otros componentes
+        de la plataforna web. */
+    /* @__PURE__ */ jsxs(
+      LanguagePopoverRoot,
+      {
+        className: classes.root,
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
+        children: [
+          /* @__PURE__ */ jsx(
+            ImageButton,
+            {
+              className: classes.imageButton,
+              onClick: handleOpen,
+              sx: {
+                width: 28,
+                height: 28,
+                ...open && { bgcolor: "action.selected" }
+              },
+              src: currentLocale?.url_icon || "",
+              alt: currentLocale?.name,
+              width: "24px",
+              height: "24px",
+              ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("imageButton") } : {}
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Popover,
+            {
+              arrowType: "top-right",
+              open: Boolean(open),
+              anchorEl: open,
+              anchorOrigin: { vertical: "bottom", horizontal: "right" },
+              onClose: handleClose,
+              sx: {
+                mt: 1.5,
+                ml: 0.75,
+                width: 180,
+                rowGap: "100px",
+                "& .MuiMenuItem-root": { px: 1, typography: "body2", borderRadius: 0.75 }
+              },
+              children: /* @__PURE__ */ jsxs(
+                ContainerMenuItems,
+                {
+                  className: classes.containerItems,
+                  ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("containerItems") } : {},
+                  children: [
+                    allLocales.length === 0 && /* CircularProgress: Componente extendido que proporciona una animación de carga circular, el cual
+                    será visible hasta que se complete la operación de red asociada a la lista de idiomas disponibles. */
+                    /* @__PURE__ */ jsx(
+                      ContainerProgress,
+                      {
+                        className: classes.containerProgress,
+                        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("containerProgress") } : {},
+                        children: /* @__PURE__ */ jsx(CircularProgress, { size: "20px" })
+                      }
+                    ),
+                    allLocales.length > 0 && /* Stack, MenuItem, Image, LabelItem: El grupo de componentes conforma las opciones del menú de idioma,
+                    se replica dependiendo de la cantidad de elementos que existan en la lista allLocales */
+                    /* @__PURE__ */ jsx(Stack, { spacing: 0.75, children: allLocales.map((option) => /* @__PURE__ */ jsxs(
+                      MenuItem,
+                      {
+                        selected: option.lang === currentLocale?.lang && option?.script === currentLocale?.script && option?.region === currentLocale?.region,
+                        onClick: () => {
+                          onChangeLocale(option);
+                          handleClose();
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(ContainerImage, { children: /* @__PURE__ */ jsx(Image, { alt: option.name, src: option.url_icon, ratio: "1:1" }) }),
+                          /* @__PURE__ */ jsx(
+                            LabelItem,
+                            {
+                              className: classes.labelItem,
+                              ...process.env.NODE_ENV !== "production" ? {
+                                [TEST_PROP_ID]: getNameDataTestId("labelItem")
+                              } : {},
+                              children: option.name
+                            }
+                          )
+                        ]
+                      },
+                      option.lang || option.script || option.region
+                    )) })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+export {
+  LanguagePopover as L
+};

package/components/LinearProgressIndeterminate/{index.6d1605ff.js → index-Do7CKcow.js}

@@ -2,15 +2,17 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.ebfbb70f.js";
-import { l as LinearProgressIndeterminateRoot } from "../../styles/index.ccd8acc4.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { g as getComponentUtilityClass } from "../../utils/index-DiMrtgIu.js";
+import { l as LinearProgressIndeterminateRoot } from "../../styles/index-Cc9p_h7i.js";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock-CF-669v-.js";
 const LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME = "M4LinearProgressIndeterminate";
 generateUtilityClasses(
   LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME,
   [
+    /* elements */
     "root",
     "windowLinearProgressBar"
+    /* states or variants of elements */
   ],
   LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME
 );

package/components/Loadable/{index.e83cdb4e.js → index-BMbi9ISF.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Suspense } from "react";
-import { P as PropagateLoader } from "../animate/PropagateLoader/index.a9da8d00.js";
+import { P as PropagateLoader } from "../animate/PropagateLoader/index-Bkq8V2SN.js";
 const Loadable = (Component) => function EmbededLoadable(props) {
   return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(PropagateLoader, {}), children: /* @__PURE__ */ jsx(Component, { ...props }) });
 };

package/components/LoadingError/{index.c5a70390.js → index-CNh7b1ew.js}

@@ -1,15 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { I as ICONS } from "../areas/icons.8266ccc8.js";
+import { I as ICONS } from "../areas/icons-CwFr-alN.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { m as LoadingErrorRoot } from "../../styles/index.ccd8acc4.js";
-import { L as LinearProgressIndeterminate } from "../LinearProgressIndeterminate/index.6d1605ff.js";
-import { I as Icon } from "../Icon/index.0f315ccd.js";
-import { T as Typography } from "../mui_extended/Typography/index.61dd3fc6.js";
-import { B as Button } from "../mui_extended/Button/index.ca15c36e.js";
+import { m as LoadingErrorRoot } from "../../styles/index-Cc9p_h7i.js";
+import { L as LinearProgressIndeterminate } from "../LinearProgressIndeterminate/index-Do7CKcow.js";
+import { I as Icon } from "../Icon/index-CedboS6y.js";
+import { T as Typography } from "../mui_extended/Typography/index-DKPqV11f.js";
+import { B as Button } from "../mui_extended/Button/index-DlzpoczE.js";
 const componentName = "M4LoadingError";
 generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "loadingErrorLoading",
   "loadingError",
@@ -19,6 +20,7 @@ generateUtilityClasses(componentName, [
   "loadingErrorDivider",
   "loadingErrorTextAction",
   "titleDescription"
+  /* states or variants of elements */
 ]);
 function getLoadingErrorUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);

package/components/MFIsolationApp/constants.d.ts

@@ -0,0 +1 @@
+export declare const TOAST_CONTAINER_ID = "toast-host";

package/components/MFIsolationApp/{index.56a12cde.js → index-DJ-MUHoQ.js}

@@ -1,16 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useCallback } from "react";
 import { unstable_HistoryRouter } from "react-router-dom";
-import { ToastContainer, toast } from "react-toastify";
 import { createBrowserHistory } from "history";
 import EventEmitter from "eventemitter3";
 import NProgress from "nprogress";
 import { HostThemeProvider, FormatterProvider, LocalesProvider, getLocaleFromNetwork, ResponsiveContainerProvider } from "@m4l/graphics";
 import { useAuth, DomainCountryProvider, EnvironmentProvider, HostToolsProvider, NetworkProvider, axiosOperation, AuthProvider } from "@m4l/core";
+import { c as createToaster, T as ToastContainer } from "../ToastContainer/index-B5VGIn45.js";
 import { format } from "date-fns";
 import { defaultThemeOptions, fnComponentsOverrides } from "@m4l/styles";
-import { B as BaseModule } from "../BaseModule/index.3f266927.js";
-import { A as AreasProvider } from "../areas/contexts/AreasContext/index.1a5c5df1.js";
+import { B as BaseModule } from "../BaseModule/index-Bl0GPyrz.js";
+import { A as AreasProvider } from "../areas/contexts/AreasContext/index-Dyj8tCdG.js";
 function MFAuthApp(props) {
   const { children, user, pwd } = props;
   const { isAuthenticated, isInitialized, login, user: authUser } = useAuth();
@@ -19,8 +19,7 @@ function MFAuthApp(props) {
       login(user, pwd, false);
     }
   }, [isInitialized, isAuthenticated]);
-  if (!isAuthenticated)
-    return /* @__PURE__ */ jsx("div", { children: "Pendiente por autenticarse" });
+  if (!isAuthenticated) return /* @__PURE__ */ jsx("div", { children: "Pendiente por autenticarse" });
   const domianCountry = {
     id: 1,
     currency: "USD",
@@ -35,32 +34,30 @@ function MFAuthApp(props) {
     domianCountry.decimal_symbol = authUser?.domain_country.decimal_symbol ?? domianCountry.decimal_symbol;
     domianCountry.thousands_symbol = authUser?.domain_country?.thousands_symbol ?? domianCountry.thousands_symbol;
   }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     HostThemeProvider,
     {
       hostThemeOptions: defaultThemeOptions,
       fnComponentsOverrides,
       isMicroFrontEnd: true,
-      children: [
-        /* @__PURE__ */ jsx(ToastContainer, {}),
-        /* @__PURE__ */ jsx(DomainCountryProvider, { ...domianCountry, isMicroFrontEnd: false, children: /* @__PURE__ */ jsx(
-          FormatterProvider,
-          {
-            isMicroFrontEnd: false,
-            dateFormatter: {
-              formatDate: format
-            },
-            currencyFormatter: {
-              code: domianCountry.currency,
-              decimalDigits: domianCountry.currency_decimal_digits
-            },
-            children
-          }
-        ) })
-      ]
+      children: /* @__PURE__ */ jsx(DomainCountryProvider, { ...domianCountry, isMicroFrontEnd: false, children: /* @__PURE__ */ jsx(
+        FormatterProvider,
+        {
+          isMicroFrontEnd: false,
+          dateFormatter: {
+            formatDate: format
+          },
+          currencyFormatter: {
+            code: domianCountry.currency,
+            decimalDigits: domianCountry.currency_decimal_digits
+          },
+          children
+        }
+      ) })
     }
   );
 }
+const TOAST_CONTAINER_ID = "toast-host";
 const history = createBrowserHistory({ window });
 function MFIsolationApp(props) {
   const {
@@ -68,6 +65,7 @@ function MFIsolationApp(props) {
     user,
     pwd,
     database = "domain",
+    // 'domain
     host_api_local,
     host_api_remote,
     host_static_assets,
@@ -127,10 +125,11 @@ function MFIsolationApp(props) {
     }),
     []
   );
+  const toaster = createToaster(TOAST_CONTAINER_ID);
   const hostTools = useMemo(
     () => ({
       history,
-      toast,
+      toast: toaster,
       startProgress,
       stopProgress,
       events_add_listener,
@@ -139,28 +138,31 @@ function MFIsolationApp(props) {
     }),
     []
   );
-  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history, children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: false, getLocaleFromNetwork, children: /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsx(MFAuthApp, { user, pwd, children: /* @__PURE__ */ jsx(
-    BaseModule,
-    {
-      moduleId,
-      privileges,
-      skeletonFlags,
-      componentsDictionary,
-      moduleNameField,
-      children: /* @__PURE__ */ jsx(
-        AreasProvider,
-        {
-          onLoad,
-          loadAreasFromNetwork: activeAreasNetwork,
-          loadCookiesFromNetwork: activeCookiesFromNetwork,
-          onSelectLayout: (modId) => {
-            console.log("onSelectLayout", modId);
-          },
-          children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, { observedDivRef, children })
-        }
-      )
-    }
-  ) }) }) }) }) }) }) });
+  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history, children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: false, getLocaleFromNetwork, children: /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsxs(MFAuthApp, { user, pwd, children: [
+    /* @__PURE__ */ jsx(ToastContainer, { containerId: TOAST_CONTAINER_ID }),
+    /* @__PURE__ */ jsx(
+      BaseModule,
+      {
+        moduleId,
+        privileges,
+        skeletonFlags,
+        componentsDictionary,
+        moduleNameField,
+        children: /* @__PURE__ */ jsx(
+          AreasProvider,
+          {
+            onLoad,
+            loadAreasFromNetwork: activeAreasNetwork,
+            loadCookiesFromNetwork: activeCookiesFromNetwork,
+            onSelectLayout: (modId) => {
+              console.log("onSelectLayout", modId);
+            },
+            children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, { observedDivRef, children })
+          }
+        )
+      }
+    )
+  ] }) }) }) }) }) }) });
 }
 export {
   MFIsolationApp as M

package/components/MFLoader/{index.cc350d72.js → index-Bcg9TXnJ.js}

@@ -1,9 +1,6 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useEffect } from "react";
 import { useNetwork, useEnvironment, useHostTools, axiosOperation } from "@m4l/core";
@@ -11,13 +8,15 @@ import { useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/gra
 import debounce from "lodash/debounce";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { L as LinearProgress } from "../mui_extended/LinearProgress/index.4092bb69.js";
-import { L as LoadingError } from "../LoadingError/index.c5a70390.js";
-import { M as MFLoaderRoot } from "../../styles/index.ccd8acc4.js";
+import { L as LinearProgress } from "../mui_extended/LinearProgress/index-CGgW8jq2.js";
+import { L as LoadingError } from "../LoadingError/index-CNh7b1ew.js";
+import { M as MFLoaderRoot } from "../../styles/index-Cc9p_h7i.js";
 const componentName = "M4LMFLoader";
 const mfLoaderClasses = generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "containerLinearProgress"
+  /* states or variants of elements */
 ]);
 function getMFLoaderUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
@@ -47,6 +46,8 @@ class ObservableLoaderMF {
     __publicField(this, "host");
     __publicField(this, "isRemote");
     __publicField(this, "eventStatus");
+    // private prefix: string;
+    // private moduleId: string;
     __publicField(this, "scriptId");
     __publicField(this, "networkOperation");
     __publicField(this, "subscribers");
@@ -73,6 +74,7 @@ class ObservableLoaderMF {
       });
     }
   }
+  //Metodo para arrancar la ejecución
   async start() {
     let percentCompleted = 0;
     this.notify("progress", percentCompleted);
@@ -92,14 +94,14 @@ class ObservableLoaderMF {
       endPoint: urlFile,
       isRemote: this.isRemote,
       headers: { "Content-Type": "application/json" },
+      // La propiedad es un método nativo de axios usado para conocer el estado descarga para una solicitud de red.
       onDownloadProgress: (progressEvent) => {
         try {
           if (progressEvent.lengthComputable) {
             percentCompleted = 10 + Math.round(progressEvent.loaded * 90 / progressEvent.total);
           } else {
             percentCompleted = 10 + progressEvent.loaded / 15e5 * 90;
-            if (percentCompleted > 95)
-              percentCompleted = 95;
+            if (percentCompleted > 95) percentCompleted = 95;
           }
         } catch (error) {
         }
@@ -116,7 +118,7 @@ class ObservableLoaderMF {
     });
     if (ret == "ok") {
       const script = document.createElement("script");
-      const startTime = new Date().getTime();
+      const startTime = (/* @__PURE__ */ new Date()).getTime();
       script.id = this.scriptId;
       script.crossOrigin = "";
       script.type = "module";
@@ -128,16 +130,19 @@ class ObservableLoaderMF {
       console.debug("Script appened", startTime);
     }
   }
+  // Método para suscribirse al objeto observable
   subscribe(subscriber) {
     this.subscribers.push(subscriber);
     this.tryAgain();
   }
+  // Método para cancelar la suscripción a objeto observable
   unsubscribe(subscriber) {
     const index = this.subscribers.indexOf(subscriber);
     if (index !== -1) {
       this.subscribers.splice(index, 1);
     }
   }
+  // Método para notificar a los suscriptores cuando algo cambie
   notify(newEvent, progress) {
     this.eventStatus = newEvent;
     this.subscribers.forEach((subscriber) => {
@@ -146,12 +151,23 @@ class ObservableLoaderMF {
   }
 }
 function getDivScritId(prefix, moduleId) {
-  const rotational_id = `${Math.round(new Date().getTime() / 1e3)}_rnd_${Math.round(
+  const rotational_id = `${Math.round((/* @__PURE__ */ new Date()).getTime() / 1e3)}_rnd_${Math.round(
     Math.random() * 1e3
   )}`;
   return {
+    // Esta propiedad es usada para asociarse al elemento div que retorna el componente MFLoader.
+    // Nota: este valor es importante porque cuando se requiera cargar el microfrontend, se utilizará la referencia id del elemento para crear un react render de la aplicación foranea.
+    /**
+     * Identificador único del contenedor HTML donde se renderizará el microfrontend.
+     */
     divContainerId: `container_${prefix}_${moduleId}_${rotational_id}`,
+    /**
+     * Identificador único del script HTML asociado al microfrontend.
+     */
     scriptId: `script_${moduleId}_${rotational_id}`,
+    /**
+     * Identificador único del módulo del microfrontend.
+     */
     moduleId
   };
 }
@@ -222,8 +238,7 @@ function MFLoader(props) {
   useEffect(() => {
     if (!isFirstRender) {
       debouncedSetDivScript(moduleId + "");
-      if (moduleId !== divScript.moduleId)
-        ;
+      if (moduleId !== divScript.moduleId) ;
     }
     return () => {
     };
@@ -265,8 +280,14 @@ function MFLoader(props) {
     }
   }, [statusLoader]);
   return /* @__PURE__ */ jsxs(MFLoaderRoot, { id: divScript.divContainerId, className: classes.root, children: [
-    statusLoader === "progress" ? /* @__PURE__ */ jsx(ProggessLoadingMF, { loadingProgress }) : null,
-    statusLoader === "error" ? /* @__PURE__ */ jsx(LoadingError, { status: statusLoader, action: tryAgainOnError }) : null
+    statusLoader === "progress" ? /* @__PURE__ */ jsx(ProggessLoadingMF, { loadingProgress }) : (
+      // <div>{networkProgress}</div>
+      null
+    ),
+    statusLoader === "error" ? /* @__PURE__ */ jsx(LoadingError, { status: statusLoader, action: tryAgainOnError }) : (
+      // <div>{networkProgress}</div>
+      null
+    )
   ] });
 }
 function getMFLoaderComponentsDictionary() {