@m4l/components 3.1.7 → 3.1.8

package/components/MFLoader/index-BI8vQZSH.js

@@ -1,299 +0,0 @@
-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);
-import { jsx, jsxs } from "react/jsx-runtime";
-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 } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { L as LinearProgress } from "../mui_extended/LinearProgress/index-CGgW8jq2.js";
-import { L as LoadingError } from "../LoadingError/index-Cf0oGUrL.js";
-import { M as MFLoaderRoot } from "../../styles/index-DKj6m8SL.js";
-const componentName = "M4LMFLoader";
-const mfLoaderClasses = generateUtilityClasses(componentName, [
-  /* elements */
-  "root",
-  "containerLinearProgress"
-  /* states or variants of elements */
-]);
-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");
-    // private prefix: string;
-    // private moduleId: string;
-    __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();
-      });
-    }
-  }
-  //Metodo para arrancar la ejecución
-  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" },
-      // 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;
-          }
-        } 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 = (/* @__PURE__ */ 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);
-    }
-  }
-  // 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) => {
-      setTimeout(() => subscriber(newEvent, progress), 1);
-    });
-  }
-}
-function getDivScritId(prefix, moduleId) {
-  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
-  };
-}
-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();
-  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) => {
-      try {
-        window[`render_${prefix}_${newDScript.moduleId}`](
-          newDScript.divContainerId,
-          { ...environment, isMicroFrontend: true, mfProps: { moduleId, debugPort: debug_port } },
-          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 }) : (
-      // <div>{networkProgress}</div>
-      null
-    ),
-    statusLoader === "error" ? /* @__PURE__ */ jsx(LoadingError, { status: statusLoader, action: tryAgainOnError }) : (
-      // <div>{networkProgress}</div>
-      null
-    )
-  ] });
-}
-function getMFLoaderComponentsDictionary() {
-  return ["mf_loader"];
-}
-export {
-  MFLoader as M,
-  getMFLoaderComponentsDictionary as g
-};

package/components/ModalDialog/index-CEVQBQ7W.js

@@ -1,77 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useTheme, Dialog, Paper } from "@mui/material";
-import { a as Draggable } from "../../react-draggable-DsCPdgQP.js";
-import { u as useModal } from "../../hooks/useModal/index-BJSQOX3U.js";
-import { R as ResizeableWindow } from "../Resizeable/index-DdP1xfE9.js";
-import { useIsMobile } from "@m4l/graphics";
-import { m as modalUtilityClasses } from "../modal/index-CydPIpKZ.js";
-import { useState, useEffect } from "react";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index-CuG1pnXW.js";
-const DragabblePaperComponent = (props) => {
-  return /* @__PURE__ */ jsx(Draggable, { handle: ".m4l_draggable_handle", cancel: '[class*="MuiDialogContent-root"]', children: /* @__PURE__ */ jsx(Paper, { sx: { maxHeight: "unset", maxWidth: "unset" }, ...props }) });
-};
-function PaperComponent(props) {
-  return /* @__PURE__ */ jsx(Paper, { sx: { maxHeight: "unset", maxWidth: "unset", height: "100%" }, ...props });
-}
-const ModalDialog = () => {
-  const {
-    open,
-    initialWidth = 600,
-    initialHeigth = 400,
-    maxWidth,
-    maxHeigth,
-    window,
-    fullScreen,
-    variant
-  } = useModal();
-  const isMobile = useIsMobile();
-  const [fullScreenState, setFullScreenState] = useState(fullScreen);
-  useEffect(() => {
-    setFullScreenState(isMobile);
-  }, [isMobile]);
-  const theme = useTheme();
-  const classes = modalUtilityClasses({ variant });
-  const contentComnponent = /* @__PURE__ */ jsx("div", { className: classes.containerWindow, children: typeof window === "function" ? window() : window });
-  return /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      open,
-      className: classes.root,
-      sx: { ...theme.components?.M4LModalDialog?.styleOverrides },
-      "aria-labelledby": "child-modal-title",
-      "aria-describedby": "child-modal-description",
-      PaperComponent: !isMobile ? DragabblePaperComponent : PaperComponent,
-      fullScreen: fullScreenState,
-      disableEnforceFocus: true,
-      children: !isMobile ? /* @__PURE__ */ jsx(
-        ResizeableWindow,
-        {
-          width: initialWidth,
-          height: initialHeigth,
-          maxWidth,
-          maxHeigth,
-          handle: (resizeHandle, ref) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref,
-              className: `custom-handle custom-handle-${resizeHandle}`
-            },
-            resizeHandle
-          ),
-          children: contentComnponent
-        }
-      ) : contentComnponent
-    }
-  );
-};
-function getModalDialogComponentsDictionary() {
-  return ["modal_dialog"].concat(getCommonActionsDictionary());
-}
-const defaultModalDialogDictionary = {
-  modal_dialog: {}
-};
-export {
-  ModalDialog as M,
-  defaultModalDialogDictionary as d,
-  getModalDialogComponentsDictionary as g
-};

package/components/NavLink/index-D1S_vtFO.js

@@ -1,55 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { NavLink as NavLink$1 } from "react-router-dom";
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { N as NavLinkRoot } from "../../styles/index-DKj6m8SL.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock-CF-669v-.js";
-import { T as Typography } from "../mui_extended/Typography/index-Cf_4Zw8f.js";
-const componentName = "M4LNavLink";
-generateUtilityClasses(componentName, [
-  /* elements */
-  "root"
-  /* states or variants of elements */
-]);
-function getNavLinkClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getNavLinkClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const NAVLINK_PREFIX = "Navlink";
-const getNameDataTestId = (KEY) => {
-  return `${NAVLINK_PREFIX}-${KEY}`;
-};
-const NavLink = (props) => {
-  const { children, text, skeletonWidth, skeletongHeight, ...others } = props;
-  const classes = useUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    NavLinkRoot,
-    {
-      className: classes.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-      children: /* @__PURE__ */ jsx(NavLink$1, { ...others, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "action",
-            skeletonWidth,
-            skeletongHeight,
-            children: text
-          }
-        ),
-        children
-      ] }) })
-    }
-  );
-};
-export {
-  NavLink as N
-};

package/components/NoItemSelected/index-B9oM26AX.js

@@ -1,54 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { n as WrapperNoItemSelected, o as Label, p as Img, q as WrapperSKTNoItemSelected } from "../../styles/index-DKj6m8SL.js";
-import { generateUtilityClasses, generateUtilityClass, Skeleton } from "@mui/material";
-import { useMemo } from "react";
-import { unstable_composeClasses } from "@mui/base";
-const componentName = "M4LNoItemSelected";
-generateUtilityClasses(
-  componentName,
-  [
-    /* elements */
-    "root"
-    /* states or variants of elements */
-  ]
-);
-function getNoItemSelectedUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useNoItemSelectedUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getNoItemSelectedUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-function NoItemSelected(props) {
-  const { image, message } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  const defaultImage = useMemo(() => {
-    return `${host_static_assets}/${environment_assets}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
-  }, []);
-  const classes = useNoItemSelectedUtilityClasses();
-  return /* @__PURE__ */ jsx(WrapperNoItemSelected, { className: classes.root, children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    !message ? /* @__PURE__ */ jsx(Label, { children: getLabel("no_item_selected.message") }) : /* @__PURE__ */ jsx(Label, { children: message }),
-    !image ? /* @__PURE__ */ jsx(Img, { src: defaultImage }) : /* @__PURE__ */ jsx(Img, { src: image })
-  ] }) : /* @__PURE__ */ jsx(WrapperSKTNoItemSelected, { id: "WrapperSKTNoItemSelected", children: /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: "100%" }) }) });
-}
-function getNoItemSelectedComponentsDictionary() {
-  return ["no_item_selected"];
-}
-const defaultNoItemSelectedDictionary = {
-  no_item_selected: {
-    message: "Please select a item to show detail"
-  }
-};
-export {
-  NoItemSelected as N,
-  defaultNoItemSelectedDictionary as d,
-  getNoItemSelectedComponentsDictionary as g
-};