@m4l/components 0.1.90 → 0.1.93

package/components/Image/{index.c18ebf5a.js → index.611cd930.js}

@@ -1,10 +1,11 @@
-import { useBase, useModuleSkeleton, BaseProvider } from "@m4l/core";
+import { useBase, useModuleSkeleton, BaseProvider, useEnvironment } from "@m4l/core";
 import { forwardRef, useState, useRef, useImperativeHandle, useEffect, useMemo } from "react";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { styled, Skeleton as Skeleton$1, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import clsx from "clsx";
 import { unstable_composeClasses } from "@mui/base";
+import clsx from "clsx";
+import { g as getEvalValue, c as classes, a as getSize } from "../PrintingSystem/index.e18a2fa8.js";
 function isIntersectionObserverAvailable() {
   return typeof window !== "undefined" && "IntersectionObserver" in window && "IntersectionObserverEntry" in window;
 }
@@ -34,7 +35,7 @@ const BasicIntersectComponent = forwardRef((props, ref) => {
     threshold
   } = props;
   const {
-    classes
+    classes: classes2
   } = useBase();
   const [observer] = useState(getObserver(threshold));
   const intersectComponentRef = useRef(null);
@@ -61,7 +62,7 @@ const BasicIntersectComponent = forwardRef((props, ref) => {
     styleProp.minHeight = height;
   }
   return /* @__PURE__ */ jsx("span", {
-    className: classes.span,
+    className: classes2.span,
     ref: intersectComponentRef,
     style: styleProp,
     ...process.env.NODE_ENV !== "production" ? {
@@ -80,10 +81,10 @@ function LazyLoadComponent(props) {
   } = props;
   const [isVisible, setIsVisible] = useState(testingProps?.isVisible || !(useIntersectionObserver && isIntersectionObserverAvailable()));
   const {
-    classes
+    classes: classes2
   } = useBase();
   return /* @__PURE__ */ jsx(WrapperLazyLoadComponent, {
-    className: classes.lazyLoad,
+    className: classes2.lazyLoad,
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("lazyLoad")
     } : {},
@@ -117,10 +118,10 @@ const Skeleton = (props) => {
     height
   } = props;
   const {
-    classes
+    classes: classes2
   } = useBase();
   return skeletonVariant === "image" ? /* @__PURE__ */ jsx(WrapperSkeletonImage, {
-    className: classes.skeletonImage,
+    className: classes2.skeletonImage,
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("skeletonImage")
     } : {},
@@ -137,7 +138,7 @@ const Skeleton = (props) => {
     variant: "circular",
     width: "100%",
     height: "100%",
-    className: classes.skeletonCircle,
+    className: classes2.skeletonCircle,
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("skeletonCircle")
     } : {}
@@ -267,10 +268,10 @@ function Image(props) {
   const ownerState = {
     isImageLoaded
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes2 = useUtilityClasses(ownerState);
   const lazyLoadComponent = useMemo(() => {
     return /* @__PURE__ */ jsx(ImageRoot, {
-      className: clsx(classes.root, className),
+      className: clsx(classes2.root, className),
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId("root")
       } : {},
@@ -299,7 +300,7 @@ function Image(props) {
           alt,
           src,
           onLoad,
-          className: classes.img,
+          className: classes2.img,
           width: !width ? "100%" : ratioImage.width,
           height: !height ? "100%" : ratioImage.height,
           ...process.env.NODE_ENV !== "production" ? {
@@ -311,11 +312,39 @@ function Image(props) {
   }, [statusLoad, isSKeleton, src]);
   return /* @__PURE__ */ jsx(BaseProvider, {
     value: {
-      classes
+      classes: classes2
     },
     children: lazyLoadComponent
   });
 }
+const ImageNode = (props) => {
+  const {
+    className,
+    style,
+    src,
+    width = "100%",
+    height = "100%"
+  } = props;
+  const {
+    unitSize,
+    sourceData
+  } = useBase();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const resourceImg = getEvalValue(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
+    }
+  });
+};
 export {
-  Image as I
+  Image as I,
+  ImageNode as a
 };

package/components/LanguagePopover/{index.c9876e63.js → index.b6dc03d0.js}

@@ -1,30 +1,14 @@
 import { useState, useEffect } from "react";
 import { styled, generateUtilityClasses, generateUtilityClass, Stack, MenuItem } from "@mui/material";
-import { I as Image } from "../Image/index.c18ebf5a.js";
+import { I as Image } from "../Image/index.611cd930.js";
 import { useLocales } from "@m4l/graphics";
+import { I as ImageButton } from "../mui_extended/Button/index.94fec33c.js";
 import { useEnvironment, useNetwork } from "@m4l/core";
-import "../Icon/index.a70c4729.js";
+import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
-import "../mui_extended/IconButton/index.76624519.js";
-import "../mui_extended/Accordion/index.a706b12f.js";
-import "../mui_extended/Typography/index.443590d6.js";
-import "../mui_extended/Avatar/index.75e6ed57.js";
-import "react-router-dom";
-import "@mui/material/Button";
-import { I as ImageButton } from "../mui_extended/Button/index.f79eb74e.js";
-import "../mui_extended/CheckBox.38abccd8.js";
 import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
-import "../mui_extended/Badge/index.b09524fe.js";
-import "@mui/lab";
-import "../mui_extended/MenuActions/index.570fbae0.js";
-import { P as Popover } from "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/Stack/index.0e53197c.js";
-import "../mui_extended/Tab/index.d0302c81.js";
-import "../mui_extended/Pager/index.ac2a21f0.js";
-import "../mui_extended/Tooltip/index.5a795dcd.js";
-import { unstable_composeClasses } from "@mui/base";
+import { P as Popover } from "../mui_extended/Popover/index.b3eca6b1.js";
 const LanguagePopoverRoot = styled("div")(({
   theme
 }) => ({

package/components/LinearProgressIndeterminate/{index.60dabc06.js → index.c46da124.js}

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { generateUtilityClasses, styled } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.c43a95f4.js";
+import { g as getComponentUtilityClass } from "../../utils/index.6469f148.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { jsx } from "react/jsx-runtime";
 const LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME = "M4LinearProgressIndeterminate";

package/components/LoadingError/LoadingError.d.ts

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

package/components/LoadingError/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LoadingError";

package/components/LoadingError/classes/index.d.ts

@@ -0,0 +1,14 @@
+import { LoadingErrorClassesType } from './types';
+export declare const loadingErrorClasses: LoadingErrorClassesType;
+export declare function getLoadingErrorUtilityClass(slot: string): string;
+export declare const loadingErrorUtilityClasses: () => {
+    root: string;
+    loadingErrorLoading: string;
+    loadingError: string;
+    loadingErrorIcon: string;
+    loadingErrorTitle: string;
+    loadingErrorDescription: string;
+    loadingErrorDivider: string;
+    loadingErrorTextAction: string;
+    titleDescription: string;
+};

package/components/LoadingError/classes/types.d.ts

@@ -0,0 +1,14 @@
+import { loadingErrorUtilityClasses } from ".";
+export interface LoadingErrorClassesType {
+    root: string;
+    loadingErrorLoading: string;
+    loadingError: string;
+    loadingErrorIcon: string;
+    loadingErrorTitle: string;
+    loadingErrorDescription: string;
+    loadingErrorDivider: string;
+    loadingErrorTextAction: string;
+    titleDescription: string;
+}
+export declare type MFLoaderClassesKey = keyof LoadingErrorClassesType;
+export declare type Classes = ReturnType<typeof loadingErrorUtilityClasses>;

package/components/LoadingError/dictionary.d.ts

@@ -0,0 +1 @@
+export declare const getLoadingErrorComponentsDictionary: () => string[];

package/components/LoadingError/index.96bdc803.js

@@ -0,0 +1,106 @@
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { I as ICONS } from "../areas/icons.8266ccc8.js";
+import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { L as LinearProgressIndeterminate } from "../LinearProgressIndeterminate/index.c46da124.js";
+import { I as Icon } from "../Icon/index.3211023d.js";
+import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
+import { B as Button } from "../mui_extended/Button/index.94fec33c.js";
+const componentName = "M4LoadingError";
+generateUtilityClasses(componentName, [
+  "root",
+  "loadingErrorLoading",
+  "loadingError",
+  "loadingErrorIcon",
+  "loadingErrorTitle",
+  "loadingErrorDescription",
+  "loadingErrorDivider",
+  "loadingErrorTextAction",
+  "titleDescription"
+]);
+function getLoadingErrorUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const loadingErrorUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    loadingErrorLoading: ["loadingErrorLoading"],
+    loadingError: ["loadingError"],
+    loadingErrorIcon: ["loadingErrorIcon"],
+    loadingErrorTitle: ["loadingErrorTitle"],
+    loadingErrorDescription: ["loadingErrorDescription"],
+    loadingErrorDivider: ["loadingErrorDivider"],
+    loadingErrorTextAction: ["loadingErrorTextAction"],
+    titleDescription: ["titleDescription"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getLoadingErrorUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const LoadingErrorRoot = styled("div")(({ theme }) => ({
+  ...theme?.components?.M4LoadingError?.styleOverrides
+}));
+const LoadingError = (props) => {
+  const {
+    status,
+    action,
+    title,
+    description,
+    recommendation,
+    introMessage,
+    errorIcon
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const classes = loadingErrorUtilityClasses();
+  return /* @__PURE__ */ jsx(LoadingErrorRoot, {
+    className: classes.root,
+    children: status !== "error" ? /* @__PURE__ */ jsx("div", {
+      className: classes.loadingErrorLoading,
+      children: /* @__PURE__ */ jsx(LinearProgressIndeterminate, {})
+    }) : /* @__PURE__ */ jsxs("div", {
+      className: classes.loadingError,
+      children: [/* @__PURE__ */ jsx(Icon, {
+        className: classes.loadingErrorIcon,
+        src: errorIcon ? errorIcon : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NAVIGATE_ERROR}`
+      }), /* @__PURE__ */ jsxs("div", {
+        className: classes.titleDescription,
+        children: [/* @__PURE__ */ jsx(Typography, {
+          variant: "h3",
+          skeletonWidth: "100px",
+          className: classes.loadingErrorTitle,
+          children: title ? title : getLabel("loading_error.label_error_title")
+        }), /* @__PURE__ */ jsx(Typography, {
+          variant: "subtitle",
+          skeletonWidth: "100px",
+          className: classes.loadingErrorDescription,
+          children: description ? description : getLabel("loading_error.label_error_description")
+        })]
+      }), /* @__PURE__ */ jsx("div", {
+        className: classes.loadingErrorDivider
+      }), /* @__PURE__ */ jsx(Typography, {
+        variant: "paragraph",
+        skeletonWidth: "100px",
+        className: classes.loadingErrorTextAction,
+        children: recommendation ? recommendation : getLabel("loading_error.label_error_recommendation")
+      }), /* @__PURE__ */ jsx(Button, {
+        onClick: action,
+        children: introMessage ? introMessage : getLabel("loading_error.label_error_intro")
+      })]
+    })
+  });
+};
+const getLoadingErrorComponentsDictionary = () => {
+  return ["loading_error"];
+};
+export {
+  LoadingError as L,
+  getLoadingErrorComponentsDictionary as g
+};

package/components/LoadingError/index.d.ts

@@ -0,0 +1,2 @@
+export { LoadingError } from './LoadingError';
+export { getLoadingErrorComponentsDictionary } from './dictionary';

package/components/LoadingError/types.d.ts

@@ -0,0 +1,10 @@
+import { AreaStatus, AreasStatus } from "../areas/contexts/AreasContext/types";
+export interface AreasLoadingErrorProps {
+    status: AreasStatus | AreaStatus;
+    action: () => void;
+    title?: string;
+    description?: string;
+    recommendation?: string;
+    introMessage?: string;
+    errorIcon?: string;
+}

package/components/MFLoader/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LMFLoader";

package/components/MFLoader/classes/index.d.ts

@@ -0,0 +1,7 @@
+import { MFLoaderClassesType } from './types';
+export declare const mfLoaderClasses: MFLoaderClassesType;
+export declare function getMFLoaderUtilityClass(slot: string): string;
+export declare const mfLoaderUtilityClasses: () => {
+    root: string;
+    containerLinearProgress: string;
+};

package/components/MFLoader/classes/types.d.ts

@@ -0,0 +1,7 @@
+import { mfLoaderUtilityClasses } from ".";
+export interface MFLoaderClassesType {
+    root: string;
+    containerLinearProgress: string;
+}
+export declare type MFLoaderClassesKey = keyof MFLoaderClassesType;
+export declare type Classes = ReturnType<typeof mfLoaderUtilityClasses>;

package/components/MFLoader/dictionary.d.ts

@@ -0,0 +1 @@
+export declare function getMFLoaderComponentsDictionary(): string[];

package/components/MFLoader/index.caee87dd.js

@@ -0,0 +1,296 @@
+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;
+};
+import { useState, useCallback, useEffect } from "react";
+import { useNetwork, useEnvironment, useHostTools, axiosOperation } from "@m4l/core";
+import { useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
+import debounce from "lodash/debounce";
+import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { L as LinearProgress } from "../mui_extended/LinearProgress/index.c92b9ba9.js";
+import { L as LoadingError } from "../LoadingError/index.96bdc803.js";
+const componentName = "M4LMFLoader";
+const mfLoaderClasses = generateUtilityClasses(componentName, [
+  "root",
+  "containerLinearProgress"
+]);
+function getMFLoaderUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const mfLoaderUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    containerLinearProgress: ["containerLinearProgress"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getMFLoaderUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const ProggessLoadingMF = (props) => {
+  try {
+    const {
+      loadingProgress
+    } = props;
+    if (loadingProgress >= 0 && loadingProgress <= 100) {
+      return /* @__PURE__ */ jsx("div", {
+        className: mfLoaderClasses.containerLinearProgress,
+        children: /* @__PURE__ */ jsx(LinearProgress, {
+          variant: "determinate",
+          value: loadingProgress
+        })
+      });
+    }
+  } catch (error) {
+  }
+  return null;
+};
+class ObservableLoaderMF {
+  constructor(host, scriptId, networkOperation, isRemote) {
+    __publicField(this, "host");
+    __publicField(this, "isRemote");
+    __publicField(this, "eventStatus");
+    __publicField(this, "scriptId");
+    __publicField(this, "networkOperation");
+    __publicField(this, "subscribers");
+    this.host = host;
+    this.subscribers = [];
+    this.scriptId = scriptId;
+    this.networkOperation = networkOperation;
+    this.isRemote = isRemote;
+    this.eventStatus = "progress";
+    this.start = this.start.bind(this);
+    this.subscribe = this.subscribe.bind(this);
+    this.unsubscribe = this.unsubscribe.bind(this);
+    this.notify = this.notify.bind(this);
+    this.tryAgain = this.tryAgain.bind(this);
+    setTimeout(this.start, 100);
+  }
+  tryAgain() {
+    if (this.eventStatus === "error") {
+      setTimeout(this.start, 100);
+      new Promise((resolve) => {
+        resolve("ok");
+      }).then(() => {
+        this.start();
+      });
+    }
+  }
+  async start() {
+    let percentCompleted = 0;
+    this.notify("progress", percentCompleted);
+    const manifest = await fetch(`${this.host}/manifest.json?rnd=${Math.random()}`).then((res) => res.json()).catch(() => {
+      setTimeout(() => this.notify("error", 0), 300);
+      return void 0;
+    });
+    if (!manifest) {
+      return;
+    }
+    percentCompleted = 10;
+    this.notify("progress", percentCompleted);
+    const urlFile = `${this.host}/${manifest["src/index.tsx"]["file"]}?rnd=${Math.random()}`;
+    const controller = new AbortController();
+    const ret = await this.networkOperation({
+      method: "GET",
+      endPoint: urlFile,
+      isRemote: this.isRemote,
+      headers: { "Content-Type": "application/json" },
+      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;
+          }
+        } catch (error) {
+        }
+        this.notify("progress", percentCompleted);
+      },
+      isExternalUrl: true,
+      responseType: "text",
+      signal: controller.signal
+    }).then(() => {
+      return "ok";
+    }).catch(() => {
+      this.notify("error", 0);
+      return "error";
+    });
+    if (ret == "ok") {
+      const script = document.createElement("script");
+      const startTime = new Date().getTime();
+      script.id = this.scriptId;
+      script.crossOrigin = "";
+      script.type = "module";
+      script.src = urlFile || "";
+      script.onload = () => {
+        this.notify("complete", 100);
+      };
+      document.head.appendChild(script);
+      console.debug("Script appened", startTime);
+    }
+  }
+  subscribe(subscriber) {
+    this.subscribers.push(subscriber);
+    this.tryAgain();
+  }
+  unsubscribe(subscriber) {
+    console.log("unsubscribe", subscriber);
+    const index = this.subscribers.indexOf(subscriber);
+    if (index !== -1) {
+      this.subscribers.splice(index, 1);
+    }
+  }
+  notify(newEvent, progress) {
+    this.eventStatus = newEvent;
+    this.subscribers.forEach((subscriber) => {
+      setTimeout(() => subscriber(newEvent, progress), 1);
+    });
+  }
+}
+const MFLoaderRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LMFLoader?.styleOverrides
+}));
+function getDivScritId(prefix, moduleId) {
+  const rotational_id = `${Math.round(new Date().getTime() / 1e3)}_rnd_${Math.round(Math.random() * 1e3)}`;
+  return {
+    divContainerId: `container_${prefix}_${moduleId}_${rotational_id}`,
+    scriptId: `script_${moduleId}_${rotational_id}`,
+    moduleId
+  };
+}
+function MFLoader(props) {
+  const {
+    prefix,
+    moduleId,
+    cache = true,
+    debug_port,
+    dynamicMFStore,
+    windowTools
+  } = props;
+  const {
+    hostThemeOptions,
+    fnComponentsOverrides
+  } = useHostTheme();
+  const {
+    networkOperation
+  } = useNetwork();
+  const environment = useEnvironment();
+  const hostTools = useHostTools();
+  const formatter = useFormatter();
+  const [statusLoader, setStatusLoader] = useState("progress");
+  const [loadingProgress, setLoadingProgress] = useState(-1);
+  const [divScript, setDivScript] = useState(getDivScritId(prefix, moduleId));
+  const {
+    currentLocale
+  } = useLocales();
+  console.log("divScript", divScript);
+  const classes = mfLoaderUtilityClasses();
+  const isFirstRender = useFirstRender([moduleId]);
+  const final_host = environment.isLocalhost ? `https://localhost:${debug_port}` : `https://${window.location.host}/mf/${moduleId}`;
+  function cleanUp(dScript) {
+    try {
+      if (window[`unmount_${prefix}_${dScript.moduleId}`]) {
+        window[`unmount_${prefix}_${dScript.moduleId}`](dScript.divContainerId);
+      }
+    } catch (error) {
+    }
+    if (!cache) {
+      const script = document.getElementById(dScript.scriptId);
+      if (script) {
+        try {
+          document.head.removeChild(script);
+          delete window[`render_${prefix}_${dScript.moduleId}`];
+          delete window[`unmount_${prefix}_${dScript.moduleId}`];
+        } catch (error) {
+        }
+      }
+    }
+  }
+  const renderMicroFrontend = useCallback((newDScript) => {
+    console.log("`render_${prefix}_${newDScript.moduleId}`", `render_${prefix}_${newDScript.moduleId}`);
+    try {
+      window[`render_${prefix}_${newDScript.moduleId}`](newDScript.divContainerId, environment, hostTools, currentLocale, {
+        hostThemeOptions,
+        fnComponentsOverrides
+      }, axiosOperation, formatter, dynamicMFStore, windowTools);
+    } catch (error) {
+    }
+  }, [hostThemeOptions, currentLocale, formatter]);
+  const debouncedSetDivScript = useCallback(debounce((newName) => {
+    const newDivScript = getDivScritId(prefix, newName);
+    if (newName !== divScript.moduleId) {
+      setDivScript({
+        ...newDivScript
+      });
+    }
+  }, 200), [divScript]);
+  useEffect(() => {
+    if (!isFirstRender) {
+      debouncedSetDivScript(moduleId + "");
+      if (moduleId !== divScript.moduleId)
+        ;
+    }
+    return () => {
+    };
+  }, [moduleId]);
+  const tryAgainOnError = useCallback(() => {
+    window[`observable_${prefix}_${moduleId}`]?.tryAgain();
+  }, []);
+  useEffect(() => {
+    const dsNowScript = {
+      ...divScript
+    };
+    const observableDownload = (event, progress) => {
+      setLoadingProgress(progress);
+      setStatusLoader(event);
+    };
+    if (!window[`render_${prefix}_${moduleId}`]) {
+      let observableLoaderMF;
+      if (!window[`observable_${prefix}_${moduleId}`]) {
+        observableLoaderMF = new ObservableLoaderMF(final_host, dsNowScript.scriptId, networkOperation, !environment.isLocalhost);
+        window[`observable_${prefix}_${moduleId}`] = observableLoaderMF;
+      } else {
+        observableLoaderMF = window[`observable_${prefix}_${moduleId}`];
+      }
+      observableLoaderMF.subscribe(observableDownload);
+    } else {
+      setStatusLoader("complete");
+    }
+    return () => {
+      window[`observable_${prefix}_${moduleId}`].unsubscribe(observableDownload);
+      cleanUp(dsNowScript);
+    };
+  }, [divScript]);
+  useEffect(() => {
+    if (statusLoader === "complete") {
+      renderMicroFrontend(divScript);
+    }
+  }, [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]
+  });
+}
+MFLoader.defaultProps = {
+  document,
+  window
+};
+function getMFLoaderComponentsDictionary() {
+  return ["mf_loader"];
+}
+export {
+  MFLoader as M,
+  getMFLoaderComponentsDictionary as g
+};

package/components/MFLoader/index.d.ts

@@ -0,0 +1,2 @@
+export { MFLoader } from './MFLoader';
+export { getMFLoaderComponentsDictionary } from './dictionary';

package/components/MFLoader/types.d.ts

@@ -0,0 +1,7 @@
+import { DynamicMFStore, WindowToolsMF } from "../areas";
+import { MFBaseProps } from "../areas/types";
+export interface MFLoaderProps extends MFBaseProps {
+    moduleId: string;
+    dynamicMFStore?: DynamicMFStore;
+    windowTools: WindowToolsMF;
+}