@m4l/components 0.2.35 → 0.2.36

package/components/areas/components/AreasViewer/index.61e0538b.js

@@ -0,0 +1,1071 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { generateUtilityClasses, styled, Skeleton, Dialog } from "@mui/material";
+import { r as react_resizable_css } from "../../../../react-resizable.af1f31c1.js";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../../../utils/index.0718eeac.js";
+import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.66529246.js";
+import { shallow } from "zustand/shallow";
+import React__default, { useMemo, useEffect } from "react";
+import clsx from "clsx";
+import { u as useAreasStore } from "../../hooks/useAreas/index.cedd30ee.js";
+import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";
+import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.d92ed0d6.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { I as ICONS } from "../../icons.8266ccc8.js";
+import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.b0ee4965.js";
+import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index.2ecd571e.js";
+import { I as Icon } from "../../../Icon/index.ee7b85c9.js";
+import { T as Typography } from "../../../mui_extended/Typography/index.a1e774a2.js";
+import { M as MFLoader } from "../../../MFLoader/index.40c419c0.js";
+import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.992ae7a3.js";
+import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.3d9ad0ad.js";
+import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.4092bb69.js";
+import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.86c553a9.js";
+import { g as getNameDataTestId } from "../../../../test/getNameDataTestId.0faeade8.js";
+import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.19c7b906.js";
+import { w as withSizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index.e1d2df80.js";
+import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.094c1d09.js";
+import { useLocation } from "react-router-dom";
+import { L as LoadingError } from "../../../LoadingError/index.7aaba1cf.js";
+import { c as cjs } from "../../../../react-draggable.79b4c69a.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index.5e8e48b1.js";
+const areasViewerClasses = generateUtilityClasses(
+  AREAS_VIEWER_CLASS_NAME,
+  [
+    "root",
+    "areaRoot",
+    "areaGridLayoutPanelContainer",
+    "areaGridLayout",
+    "areaGridLayoutPopupsContainer",
+    "areasWindowPopUpList",
+    "windowRoot",
+    "windowHeader",
+    "windowHeaderContent",
+    "windowHeaderTitle",
+    "windowHeaderMainActions",
+    "windowHeaderCancelHandle",
+    "windowContent",
+    "windowPopupRoot",
+    "windowModalRoot",
+    "windowLinearProgressRoot",
+    "windowLinearProgressBar",
+    "windowRootContainer",
+    "windowToastiesContainer",
+    "windowToastiesContainerTostys",
+    "windowToastyContainer",
+    "windowToastyMeesageButtonsContainer",
+    "windowToastyMessage",
+    "windowToastyButtonsContainer",
+    "windowToastyPin",
+    "windowToastyClose",
+    "panelWindowsRoot",
+    "panelWindowsButtonContainer",
+    "containerLinearProgress",
+    "resizeHandle",
+    "loaderContainer",
+    "containerComponent",
+    "selected",
+    "colapsed",
+    "selectedWindow",
+    "isMobile",
+    "loading",
+    "pinIn",
+    "success",
+    "info",
+    "warning",
+    "error"
+  ],
+  AREAS_VIEWER_CLASS_NAME
+);
+const useAreasViewerUtilityClasses = (ownerState) => {
+  const slots = {
+    root: [
+      "root",
+      ownerState.status,
+      ownerState.isMobile && "isMobile",
+      ownerState.isSkeleton && "isSkeleton"
+    ],
+    areaRoot: ["areaRoot"],
+    areasLoadingErrorRoot: ["areasLoadingErrorRoot"],
+    areasLoadingErrorLoading: ["areasLoadingErrorLoading"],
+    areasLoadingError: ["areasLoadingError"],
+    areasLoadingErrorIcon: ["areasLoadingErrorIcon"],
+    areasLoadingErrorTitle: ["areasLoadingErrorTitle"],
+    areasLoadingErrorDescription: ["areasLoadingErrorDescription"],
+    areasLoadingErrorDivider: ["areasLoadingErrorDivider"],
+    areaGridLayoutPanelContainer: ["areaGridLayoutPanelContainer"],
+    areaGridLayout: ["areaGridLayout"],
+    areaGridLayoutPopupsContainer: ["areaGridLayoutPopupsContainer"],
+    areasWindowPopUpList: ["areasWindowPopUpList"],
+    windowRoot: ["windowRoot"],
+    windowRootContainer: ["windowRootContainer"],
+    windowHeader: ["windowHeader"],
+    windowHeaderTitle: ["windowHeaderTitle"],
+    windowHeaderMainActions: ["windowHeaderMainActions"],
+    windowHeaderCancelHandle: ["windowHeaderCancelHandle"],
+    windowContent: ["windowContent"],
+    windowLinearProgressRoot: ["windowLinearProgressRoot"],
+    windowLinearProgressBar: ["windowLinearProgressBar"],
+    windowPopupRoot: ["windowPopupRoot"],
+    windowModalRoot: ["windowModalRoot"],
+    selectedWindow: ["selectedWindow"],
+    windowToastiesContainer: ["windowToastiesContainer"],
+    windowToastiesContainerTostys: ["windowToastiesContainerTostys"],
+    windowToastyContainer: ["windowToastiesContainer"],
+    windowToastyMeesageButtonsContainer: ["windowToastyMeesageButtonsContainer"],
+    windowToastyMessage: ["windowToastyMessage"],
+    windowToastyButtonsContainer: ["windowToastyButtonsContainer"],
+    windowToastyPin: ["windowToastyPin"],
+    windowToastyClose: ["windowToastyClose"],
+    panelWindowsRoot: ["panelWindowsRoot"],
+    panelWindowsButtonContainer: ["panelWindowsButtonContainer"],
+    resizeHandle: ["resizeHandle"],
+    loaderContainer: ["loaderContainer"],
+    containerComponent: ["containerComponent"]
+  };
+  return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_VIEWER_CLASS_NAME), {});
+};
+const AreasViewerRoot = styled("div")`
+  /* display: flex; */
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  /* flex-grow: 1; */
+  position: relative;
+
+  //areaRoot
+  & .${areasViewerClasses.areaRoot} {
+    display: none;
+    position: absolute;
+    /* flex-grow: 1; */
+    flex-direction: row;
+    inset: 0;
+    /* width: 100%; */
+    overflow: hidden;
+    justify-content: top;
+    align-items: flex-start;
+
+    visibility: hidden;
+  }
+
+  & .${areasViewerClasses.areaRoot}.${areasViewerClasses.selected} {
+    display: block;
+    visibility: visible;
+  }
+
+  &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaRoot} {
+  }
+
+  // areaGridLayoutPanelContainer
+  & .${areasViewerClasses.areaGridLayoutPanelContainer} {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+  }
+  &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaGridLayoutPanelContainer} {
+    flex-direction: column-reverse;
+  }
+  // areaGridLayout
+  & .${areasViewerClasses.areaGridLayout} {
+    height: 100% !important;
+    overflow: auto;
+    flex-grow: 1;
+  }
+  &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaGridLayout} {
+    flex-direction: column-reverse;
+    height: unset;
+    width: 100%;
+  }
+  // areaGridLayoutPopupsContainer
+  & .${areasViewerClasses.areaGridLayoutPopupsContainer} {
+    z-index: 1; //Garantizar q el contenedor de los popus este por encima de los layouts
+    //     // ' .react-draggable': {
+    //     //     position: 'absolute',
+    //     // },
+  }
+
+  // PanelWindowsRoot
+  & .${areasViewerClasses.panelWindowsRoot} {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+  &.${areasViewerClasses.isMobile} .${areasViewerClasses.panelWindowsRoot} {
+    flex-direction: row;
+  }
+
+  // windowRoot
+  & .${areasViewerClasses.windowRoot} {
+    inset: 0;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    /* height: 100%; */
+    /* width: 100%; */
+    overflow: hidden;
+    border: 1px solid gray;
+
+    background-color: ${(props) => props.theme.palette.background.default};
+    padding: ${(props) => props.theme.spacing(0)};
+  }
+
+  & .${areasViewerClasses.windowRoot}.${areasViewerClasses.selected} {
+    border-top: 1px solid green;
+  }
+  // windowHeaderTitle
+  & .${areasViewerClasses.windowHeaderTitle} {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    color: ${(props) => props.theme.palette.text.primary};
+    text-overflow: ellipsis;
+  }
+  // windowHeaderMainActions
+  & .${areasViewerClasses.windowHeaderMainActions} {
+    display: flex;
+
+    gap: 4px;
+  }
+
+  // windowHeaderMainActions
+  & .${areasViewerClasses.windowContent} {
+    flex-grow: 1;
+    position: relative;
+  }
+
+  // windowModalRoot
+  & .${areasViewerClasses.windowModalRoot} {
+    padding: 16px;
+  }
+
+  ${react_resizable_css}
+
+  ${(props) => props.theme.components?.M4LAreasViewer?.styleOverrides}
+`;
+function WindowHeaderSkeleton(props) {
+  const { colapsed } = props;
+  return /* @__PURE__ */ jsx("div", { className: clsx(areasViewerClasses.windowHeader), children: /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowHeaderContent, children: [
+    /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "circular",
+        sx: { margin: "0 5px", minWidth: "18px", minHeight: "18px" }
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 80, height: 16 }) }),
+    /* @__PURE__ */ jsx("div", { className: areasViewerClasses.windowHeaderCancelHandle, children: !colapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          variant: "circular",
+          sx: { margin: "0 5px", minWidth: "16px", minHeight: "16px" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          variant: "circular",
+          sx: { margin: "0 5px", minWidth: "16px", minHeight: "16px" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          variant: "circular",
+          sx: { margin: "0 5px", minWidth: "16px", minHeight: "16px" }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "circular",
+        sx: { margin: "0 5px", minWidth: "16px", minHeight: "16px" }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "circular",
+        sx: { margin: "0 5px", minWidth: "16px", minHeight: "16px" }
+      }
+    )
+  ] }) });
+}
+function getMainActions(isDesktop, moduleActions) {
+  let mainActions = [];
+  if (isDesktop !== void 0 && isDesktop) {
+    mainActions = mainActions.concat(moduleActions.filter((action) => action.visibility === "main"));
+  }
+  mainActions = mainActions.concat(moduleActions.filter((action) => action.visibility === "allways"));
+  return mainActions;
+}
+function getMenuActions(options) {
+  const {
+    windowId,
+    isDesktop,
+    moduleActions,
+    urlPrefix,
+    saveModuleCookies,
+    resetModuleCookies,
+    version,
+    windowOptions = { allowPersistCookies: false },
+    getLabel
+  } = options;
+  let menuActions = [...moduleActions.filter((action) => action.visibility !== "allways")];
+  if (isDesktop !== void 0 && isDesktop) {
+    menuActions = menuActions.filter((action) => action.visibility === "normal");
+  }
+  if (windowOptions.allowPersistCookies) {
+    const saveCookiesAction = {
+      urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.SAVE_COOKIES}`,
+      onClick: () => saveModuleCookies(windowId),
+      disabled: false,
+      visibility: "normal",
+      label: getLabel(getAreasDictionary(DICCTIONARY.label_persist_module_cookies)),
+      key: "save_cookies"
+    };
+    menuActions.push(saveCookiesAction);
+    const resetCookiesAction = {
+      urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.RESET_COOKIES}`,
+      onClick: () => resetModuleCookies(windowId),
+      disabled: false,
+      visibility: "normal",
+      label: getLabel(getAreasDictionary(DICCTIONARY.label_reset_module_cookies)),
+      key: "reset_cookes"
+    };
+    menuActions.push(resetCookiesAction);
+  }
+  if (version) {
+    const versionAction = {
+      urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.VERSION}`,
+      onClick: () => {
+      },
+      disabled: true,
+      visibility: "normal",
+      label: version,
+      key: "version"
+    };
+    menuActions.push(versionAction);
+  }
+  return menuActions;
+}
+function MainActions(props) {
+  const { windowId } = props;
+  const moduleActions = useAreasStore((state) => {
+    const window = state.hashWindows[windowId];
+    return window?.moduleActions || [];
+  }, shallow);
+  const { getLabel } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const mainActions = useMemo(() => {
+    return getMainActions(isDesktop, moduleActions);
+  }, [moduleActions, isDesktop]);
+  return /* @__PURE__ */ jsx("div", { className: areasViewerClasses.windowHeaderMainActions, children: mainActions.map((mainAction) => {
+    const tooltip = mainAction.label !== void 0 ? mainAction.label : getLabel(mainAction.dictionaryId || "");
+    const onClick = (e) => {
+      mainAction.onClick(e);
+      e.stopPropagation();
+    };
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        src: mainAction.urlIcon || "",
+        className: clsx(mainAction.className, "m4l_draggableCancel"),
+        onClick,
+        "aria-label": mainAction.label,
+        disabled: mainAction.disabled,
+        tooltip
+      },
+      mainAction.key
+    );
+  }) });
+}
+function Header(props) {
+  const { areaId, windowId, emergeType } = props;
+  const [url_icon, title, moduleActions, onClose, version, windowOptions, fnQueryClose] = useAreasStore((state) => {
+    const window = state.hashWindows[windowId];
+    return [
+      window.url_icon,
+      window.title,
+      window.moduleActions,
+      window.onClose,
+      window.version,
+      window.windowOptions,
+      window.fnQueryClose
+    ];
+  }, shallow);
+  const { saveModuleCookies, resetModuleCookies } = useAreasStore(
+    (state) => state.windowActions,
+    shallow
+  );
+  const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId, shallow);
+  const colapsed = useAreasStore((state) => {
+    const currentBreakpoint = state.hashAreas[areaId].currentBreakpoint;
+    if (currentBreakpoint) {
+      return state.hashAreas[areaId].layouts[currentBreakpoint].find((li) => li.i === windowId)?.colapsed;
+    }
+    return false;
+  }, shallow);
+  const { maximizeLayout, normalizeLayouts, colapseLayoutItem, unColapseLayoutItem } = useAreasStore((state) => state.areaActions, shallow);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const { getLabel } = useModuleDictionary();
+  const urlPrefix = `${host_static_assets}/${environment_assets}`;
+  const menuActions = useMemo(() => {
+    return getMenuActions({
+      windowId,
+      isDesktop,
+      moduleActions,
+      urlPrefix,
+      saveModuleCookies,
+      resetModuleCookies,
+      version,
+      windowOptions,
+      getLabel
+    });
+  }, [moduleActions, isDesktop]);
+  const onCloseLocal = () => {
+    const fnClose = fnQueryClose || onClose;
+    fnClose && fnClose(windowId);
+  };
+  const maxNormalize = (e) => {
+    if (maximizedId === windowId) {
+      normalizeLayouts(areaId);
+    } else {
+      maximizeLayout(areaId, windowId);
+    }
+    e.stopPropagation();
+  };
+  const colapedToggle = (e) => {
+    if (!colapsed) {
+      colapseLayoutItem(areaId, windowId);
+    } else {
+      unColapseLayoutItem(areaId, windowId);
+    }
+    e.stopPropagation();
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(WindowHeaderSkeleton, {});
+  }
+  return /* @__PURE__ */ jsxs("div", { className: clsx(areasViewerClasses.windowHeader, "m4l_draggable_handle"), children: [
+    /* @__PURE__ */ jsx(LinearProgressIndeterminate, {}),
+    /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowHeaderContent, children: [
+      /* @__PURE__ */ jsx(Icon, { src: url_icon, size: "medium" }),
+      /* @__PURE__ */ jsx(Typography, { className: areasViewerClasses.windowHeaderTitle, variant: "h5", children: `${title}` }),
+      /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowHeaderCancelHandle, children: [
+        !colapsed && /* @__PURE__ */ jsx(MainActions, { windowId }),
+        !colapsed && menuActions.length > 0 && /* @__PURE__ */ jsx(
+          MemonizedMenuActions,
+          {
+            arrowType: "no-arrow",
+            marginTop: "12px!important",
+            marginLeft: "14px!important",
+            anchorOrigin: { vertical: "bottom", horizontal: "right" },
+            transformOrigin: { vertical: "top", horizontal: "right" },
+            menuActions,
+            toolTip: getLabel(getAreasDictionary(DICCTIONARY.label_module_actions))
+          }
+        ),
+        !colapsed && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: "m4l_draggableCancel",
+            onClick: maxNormalize,
+            "aria-label": "click",
+            src: maximizedId === windowId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`,
+            tooltip: getLabel(
+              getAreasDictionary(
+                maximizedId === windowId ? DICCTIONARY.label_minimize_window : DICCTIONARY.label_maximize_window
+              )
+            )
+          }
+        ),
+        !maximizedId && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: "m4l_draggableCancel",
+            onClick: colapedToggle,
+            "aria-label": "click",
+            src: !colapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.COLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.UNCOLPASE}`,
+            tooltip: getLabel(
+              getAreasDictionary(
+                !colapsed ? DICCTIONARY.label_collapse_window : DICCTIONARY.label_uncollapse_window
+              )
+            )
+          }
+        ),
+        onClose && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: "m4l_draggableCancel",
+            onPointerDown: onCloseLocal,
+            "aria-label": "click",
+            src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CLOSE}`,
+            tooltip: getLabel(getAreasDictionary(DICCTIONARY.label_close_window))
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+const MicroFrontend = (props) => {
+  return /* @__PURE__ */ jsx(MFLoader, { ...props });
+};
+const MemonizedMicroFrontend = React__default.memo(MicroFrontend);
+const Component = (props) => {
+  const { component, dynamicMFStore, windowTools } = props;
+  return /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx("div", { className: areasViewerClasses.containerComponent, children: typeof component === "function" ? component({ windowTools, dynamicMFStore }) : component }) }) });
+};
+React__default.memo(Component);
+const WindowRoot = styled("div")`
+  inset: 0;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  /* height: 100%; */
+  /* width: 100%; */
+  overflow: hidden;
+  border: 1px solid gray;
+
+  background-color: ${(props) => props.theme.palette.background.default};
+  padding: ${(props) => props.theme.spacing(0)};
+  &.${areasViewerClasses.selected} {
+    border-top: 1px solid green;
+  }
+
+  // windowHeader
+  /* 
+    &.${areasViewerClasses.loading} .${areasViewerClasses.windowHeader} {
+        border-bottom: 2px solid red !important; 
+    }
+    */
+  // windowHeaderTitle
+  & .${areasViewerClasses.windowHeaderTitle} {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    color: ${(props) => props.theme.palette.text.primary};
+    text-overflow: ellipsis;
+  }
+
+  & .${areasViewerClasses.windowHeaderCancelHandle} {
+    display: flex;
+    cursor: default;
+  }
+
+  // windowHeaderMainActions
+  & .${areasViewerClasses.windowHeaderMainActions} {
+    display: flex;
+
+    gap: 4px;
+  }
+
+  // windowHeaderMainActions
+  & .${areasViewerClasses.windowContent} {
+    flex-grow: 1;
+    position: relative;
+  }
+
+  & .${areasViewerClasses.windowContent}.${areasViewerClasses.colapsed} {
+    display: none !important;
+  }
+  // windowModalRoot
+  & .${areasViewerClasses.windowModalRoot} {
+    padding: 16px;
+  }
+
+  // windowToastiesContainer
+  & .${areasViewerClasses.windowToastiesContainer} {
+    padding: 4px;
+  }
+
+  // windowToastyContainer
+  & .${areasViewerClasses.windowToastyContainer} {
+    display: flex;
+    flex-direction: column;
+  }
+  // windowToastyContainer
+  & .${areasViewerClasses.windowToastyContainer}.${areasViewerClasses.success} {
+    background-color: ${(props) => props.theme.palette.success.main};
+  }
+
+  // windowToastyMeesageButtonsContainer
+  & .${areasViewerClasses.windowToastyMeesageButtonsContainer} {
+    display: flex;
+  }
+  & .MuiLinearProgress-root {
+    width: 100%;
+  }
+
+  // windowToastyMessage
+  & .${areasViewerClasses.windowToastyMessage} {
+    flex-grow: 1;
+  }
+
+  // windowToastyContainer
+  & .${areasViewerClasses.windowToastyPin}.${areasViewerClasses.pinIn} {
+    border: 1px solid red;
+  }
+
+  ${(props) => props.theme.components?.M4LAreasViewerWindow?.styleOverrides}
+`;
+function Toasty(props) {
+  const { windowId, toastyId } = props;
+  const toasty = useAreasStore(
+    (state) => state.hashWindows[windowId].hashToasties[toastyId],
+    shallow
+  );
+  const { pinToast: pinToasty, closeToast: closeToasty } = useAreasStore(
+    (state) => state.windowActions,
+    shallow
+  );
+  const { host_static_assets, environment_assets } = useEnvironment();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(areasViewerClasses.windowToastyContainer, areasViewerClasses[toasty.type]),
+      children: /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowToastyMeesageButtonsContainer, children: [
+        /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowToastyMessage, children: [
+          toasty.timer ? /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: toasty.percentExecuted }) : null,
+          toasty.message
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowToastyButtonsContainer, children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: clsx(
+                areasViewerClasses.windowToastyPin,
+                toasty.timer ? null : areasViewerClasses.pinIn
+              ),
+              onClick: () => {
+                pinToasty(windowId, toastyId);
+              },
+              src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.TOASTY_PIN}`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: areasViewerClasses.windowToastyClose,
+              onClick: () => {
+                closeToasty(windowId, toastyId);
+              },
+              src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.TOASTY_CLOSE}`
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function Toasties(props) {
+  const { windowId } = props;
+  const tosties = useAreasStore((state) => state.hashWindows[windowId].toasties, shallow);
+  if (tosties.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: areasViewerClasses.windowToastiesContainer, children: /* @__PURE__ */ jsx("div", { className: areasViewerClasses.windowToastiesContainerTostys, children: tosties.map((t) => {
+    return /* @__PURE__ */ jsx(Toasty, { windowId, toastyId: t.id }, t.id);
+  }) }) });
+}
+const Window = (props) => {
+  const { areaId, windowId } = props;
+  const [emergeType, moduleId, winType] = useAreasStore((state) => {
+    return [
+      state.hashWindows[windowId]?.emergeType,
+      state.hashWindows[windowId]?.moduleId,
+      state.hashWindows[windowId]?.winType
+    ];
+  }, shallow);
+  const selected = useAreasStore((state) => {
+    return emergeType === "layout" ? state.hashAreas[areaId]?.currentLayoutId : state.hashAreas[areaId]?.currentPopUpId;
+  }) === windowId;
+  const mfProps = useAreasStore((state) => state.hashWindows[windowId]?.mfProps, shallow);
+  const component = useAreasStore(
+    (state) => state.hashWindows[windowId]?.component,
+    shallow
+  );
+  const loading = useAreasStore((state) => state.hashWindows[windowId]?.loading, shallow);
+  const status = useAreasStore((state) => state.hashWindows[windowId]?.status, shallow);
+  const dynamicMFStore = useAreasStore(
+    (state) => state.hashWindows[windowId]?.dynamicMFStore,
+    shallow
+  );
+  const {
+    setActions,
+    getCookie,
+    getCookies,
+    setCookie,
+    close,
+    startProgress,
+    stopProgress,
+    toast,
+    setFnQueryClose
+  } = useAreasStore((state) => state.windowActions, shallow);
+  const { selectLayout } = useAreasStore((state) => state.areaActions, shallow);
+  const { loadCookiesFromApi } = useAreasStore((state) => state.windowActions, shallow);
+  const onTouch = () => {
+    if (!selected) {
+      selectLayout(areaId, props.windowId);
+    }
+  };
+  const windowTools = useMemo(
+    () => ({
+      getWindowId: () => windowId,
+      setActions: (newActions, version) => {
+        setActions(windowId, newActions, version);
+      },
+      getCookie: (id) => getCookie(windowId, id),
+      getCookies: (type) => getCookies(windowId, type),
+      setCookie: (id, type, cookie) => {
+        setCookie(windowId, id, type, cookie);
+      },
+      close: () => close(windowId),
+      startProgress: () => startProgress(windowId),
+      stopProgress: () => stopProgress(windowId),
+      setFnQueryClose: (fnQueryClose) => {
+        setFnQueryClose(windowId, fnQueryClose);
+      },
+      toast: (toastyOptions) => {
+        toast(windowId, toastyOptions);
+      }
+    }),
+    []
+  );
+  useEffect(() => {
+    if (status === "init") {
+      loadCookiesFromApi(windowId);
+    }
+  }, [status]);
+  if (status === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    WindowRoot,
+    {
+      role: "presentation",
+      className: clsx(
+        areasViewerClasses.windowRoot,
+        selected ? areasViewerClasses.selectedWindow : null,
+        loading ? areasViewerClasses.loading : null,
+        emergeType === "popup" ? areasViewerClasses.windowPopupRoot : null,
+        emergeType === "modal" ? areasViewerClasses.windowModalRoot : null
+      ),
+      onMouseDown: onTouch,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId(
+          AREAS_VIEWER_CLASS_NAME,
+          "windowRoot",
+          `${emergeType}`
+        )
+      } : {},
+      children: /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowRootContainer, children: [
+        /* @__PURE__ */ jsx(Header, { areaId, windowId, emergeType }),
+        /* @__PURE__ */ jsx(Toasties, { windowId }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(
+              areasViewerClasses.windowContent
+            ),
+            children: [
+              status === "init" ? /* @__PURE__ */ jsx(Fragment, { children: "Cargando..." }) : null,
+              status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(
+                MemonizedMicroFrontend,
+                {
+                  moduleId,
+                  dynamicMFStore,
+                  windowTools,
+                  ...mfProps
+                }
+              ) : /* @__PURE__ */ jsx(
+                Component,
+                {
+                  moduleId,
+                  dynamicMFStore,
+                  windowTools,
+                  component
+                }
+              ) : null
+            ]
+          }
+        )
+      ] })
+    }
+  );
+};
+React__default.memo(Window);
+const ResizeHandle = React__default.forwardRef(
+  (props, ref) => {
+    const { handleAxis, ...restProps } = props;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx(
+          `react-resizable-handle react-resizable-handle-${handleAxis}`,
+          areasViewerClasses.resizeHandle
+        ),
+        ...restProps
+      }
+    );
+  }
+);
+const ResponsiveGridLayout = withSizeProvider(Responsive);
+const AreaGridLayout = (props) => {
+  const { areaId } = props;
+  const hashLayoutItems = useAreasStore((state) => state.hashAreas[areaId].layoutItemsIds, shallow);
+  const layouts = useAreasStore((state) => state.hashAreas[areaId].layouts, shallow);
+  const breakpoints = useAreasStore((state) => state.hashAreas[areaId].breakpoints, shallow);
+  const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId, shallow);
+  const cols = useAreasStore((state) => state.hashAreas[areaId].cols, shallow);
+  const { onBreakpointsLayoutsChange, onContainerChange } = useAreasStore(
+    (state) => state.areaActions,
+    shallow
+  );
+  return /* @__PURE__ */ jsx(
+    ResponsiveGridLayout,
+    {
+      autoSize: false,
+      compactType: "vertical",
+      measureBeforeMount: true,
+      resizeHandles: ["nw", "se"],
+      className: clsx(
+        areasViewerClasses.areaGridLayout,
+        `${areasViewerClasses.areaGridLayout}-${areaId}`
+      ),
+      layouts,
+      onLayoutChange: (layout, newLayouts) => onBreakpointsLayoutsChange(areaId, layout, newLayouts),
+      draggableHandle: ".m4l_draggable_handle",
+      draggableCancel: `.${areasViewerClasses.windowHeaderCancelHandle}`,
+      layoutItemRender: (p) => {
+        if (hashLayoutItems.indexOf(p.i) === -1) {
+          return /* @__PURE__ */ jsx(Fragment, {});
+        }
+        if (p.type === "placeholder") {
+          return /* @__PURE__ */ jsx("div", {});
+        }
+        return /* @__PURE__ */ jsx(Window, { windowId: p.i, areaId });
+      },
+      breakpoints,
+      colapsedHeight: RESPONSIVE_COLAPSED_HEIGHTS,
+      rowHeight: RESPONSIVE_ROW_HEIGHTS,
+      cols,
+      containerMargin: [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
+      containerPadding: [PADDING_GRIDLAYOUT, PADDING_GRIDLAYOUT],
+      onContainerChange: (e) => {
+        onContainerChange(areaId, e);
+      },
+      preventCollision: false,
+      maximizeId: maximizedId,
+      resizeHandle: /* @__PURE__ */ jsx(ResizeHandle, {})
+    }
+  );
+};
+const PanelWindows = (props) => {
+  const { areaId } = props;
+  const status = useAreasStore((state) => state.hashAreas[areaId].status);
+  const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId);
+  const maximizedIdParent = useAreasStore(
+    (state) => state.hashWindows[maximizedId || ""]?.parentLayoutId || void 0
+  );
+  const hashLayoutItems = useAreasStore(
+    (state) => state.hashAreas[areaId].layoutItemsIds.filter((itemId) => state.hashWindows[itemId].emergeType === "layout").map((key) => ({
+      i: key,
+      url_icon: state.hashWindows[key].url_icon,
+      title: state.hashWindows[key].title,
+      moduleId: state.hashWindows[key].moduleId,
+      emergeType: state.hashWindows[key].emergeType,
+      windowId: state.hashWindows[key].windowId
+    })),
+    shallow
+  );
+  const { maximizeLayout } = useAreasStore((state) => state.areaActions);
+  const onTouched = (layoutId) => {
+    maximizeLayout(areaId, layoutId);
+  };
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const currentParam = searchParams.get("module");
+  if (status === "loaded") {
+    if (!maximizedId || hashLayoutItems.length < 2) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: areasViewerClasses.panelWindowsRoot, children: hashLayoutItems.map((kl) => {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(
+            areasViewerClasses.panelWindowsButtonContainer,
+            maximizedId === kl.i && kl.emergeType !== "popup" || maximizedIdParent === kl.windowId && kl.moduleId === currentParam ? areasViewerClasses.selected : null
+          ),
+          children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              src: kl.url_icon,
+              size: "small",
+              onClick: () => onTouched(kl.i),
+              tooltip: maximizedId !== kl.i ? kl.title : void 0
+            }
+          )
+        },
+        kl.i
+      );
+    }) });
+  } else {
+    return null;
+  }
+};
+const InnerForHooks = (props) => {
+  const { areaId } = props;
+  const isDesktop = useResponsiveDesktop();
+  const status = useAreasStore((state) => state.hashAreas[areaId].status);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        areasViewerClasses.areaGridLayoutPanelContainer,
+        `${areasViewerClasses.areaGridLayoutPanelContainer}-${areaId}`
+      ),
+      children: [
+        status === "loaded" ? /* @__PURE__ */ jsx(AreaGridLayout, { areaId }) : /* @__PURE__ */ jsx(LoadingError, { status, action: () => {
+        } }),
+        isDesktop ? /* @__PURE__ */ jsx(PanelWindows, { areaId }) : null
+      ]
+    }
+  );
+};
+const Area = (props) => {
+  const { selected, areaId } = props;
+  const classesAreaRoot = useAreasStore((state) => state.viwerClasses.areaRoot);
+  const status = useAreasStore((state) => state.hashAreas[areaId].status);
+  if (status === "init") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        classesAreaRoot,
+        selected ? areasViewerClasses.selected : null,
+        status === "loading" ? areasViewerClasses.loading : null
+      ),
+      children: /* @__PURE__ */ jsx(InnerForHooks, { areaId })
+    }
+  );
+};
+Area.displayName = "Area";
+styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  overflow: "hidden",
+  padding: theme.spacing(3)
+}));
+const WrapperWindowModal = styled(Dialog)(({ theme }) => ({
+  hola: 1,
+  backgroundColor: theme.palette.background.paper,
+  "& .MuiDialog-container": {},
+  "&.m4l_selected": {
+    borderTop: "1px solid green"
+  },
+  ...theme.components?.M4LAreasViewerModal?.styleOverrides
+}));
+const WindowModal = (props) => {
+  const { windowId } = props;
+  const { onClose } = useAreasStore((state) => state.hashWindowsModals[windowId]);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isDesktop = useResponsiveDesktop();
+  const DragabblePaperComponent = (_props) => {
+    return /* @__PURE__ */ jsx(
+      cjs.exports,
+      {
+        handle: ".m4l_draggable_handle",
+        bounds: "parent",
+        children: /* @__PURE__ */ jsx(
+          ResizeableWindow,
+          {
+            width: props.windowProps?.width || 400,
+            height: props.windowProps?.height || 300,
+            handle: (resizeHandle, ref) => /* @__PURE__ */ jsx("div", { ref, children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.RESIZE}`,
+                className: `custom-handle custom-handle-${resizeHandle}`
+              }
+            ) }, resizeHandle),
+            children: /* @__PURE__ */ jsx(Window, { ...props })
+          }
+        )
+      }
+    );
+  };
+  function PaperComponent(_props) {
+    return /* @__PURE__ */ jsx(Window, { ...props });
+  }
+  return /* @__PURE__ */ jsx(
+    WrapperWindowModal,
+    {
+      className: areasViewerClasses.windowModalRoot,
+      open: true,
+      scroll: "paper",
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          onClose && onClose(windowId);
+        }
+      },
+      "aria-labelledby": "child-modal-title",
+      "aria-describedby": "child-modal-description",
+      PaperComponent: isDesktop ? DragabblePaperComponent : PaperComponent,
+      maxWidth: false,
+      fullWidth: !isDesktop,
+      fullScreen: false,
+      disableEnforceFocus: true
+    }
+  );
+};
+const MemonizedWindowModal = React__default.memo(WindowModal);
+function AreasViewer() {
+  const areas = useAreasStore((state) => state.areasIds, shallow);
+  const windowsModals = useAreasStore((state) => state.windowsModals);
+  const hashWindowsModals = useAreasStore((state) => state.hashWindowsModals);
+  const currentArea = useAreasStore((state) => state.currentAreaId);
+  const status = useAreasStore((state) => state.ownerState.status);
+  const classesRoot = useAreasStore((state) => state.viwerClasses.root);
+  const { init } = useAreasStore((state) => state.areasActions);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      AreasViewerRoot,
+      {
+        className: classesRoot,
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getNameDataTestId(
+            AREAS_VIEWER_CLASS_NAME,
+            "root",
+            ""
+          )
+        } : {},
+        children: status === "loaded" ? areas.map((area) => {
+          return /* @__PURE__ */ jsx(Area, { areaId: area, selected: currentArea === area }, area);
+        }) : /* @__PURE__ */ jsx(LoadingError, { status, action: () => init() })
+      }
+    ),
+    windowsModals.map((wm) => {
+      if (hashWindowsModals[wm]) {
+        return /* @__PURE__ */ jsx(MemonizedWindowModal, { ...hashWindowsModals[wm] }, wm);
+      }
+      return null;
+    })
+  ] });
+}
+export {
+  AreasViewer as A,
+  useAreasViewerUtilityClasses as u
+};