@m4l/components 0.2.35 → 0.2.36

package/components/areas/components/AreasViewer/index.6d7194e2.js

@@ -1,1086 +0,0 @@
-import { generateUtilityClasses, styled, Skeleton, Dialog } from "@mui/material";
-import { r as react_resizable_css } from "../../../../react-resizable.c07d63fb.js";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index.6469f148.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.caa92660.js";
-import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.90f53670.js";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-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.f8a3021b.js";
-import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index.c46da124.js";
-import { I as Icon } from "../../../Icon/index.ad330e78.js";
-import { T as Typography } from "../../../mui_extended/Typography/index.379dd374.js";
-import { M as MFLoader } from "../../../MFLoader/index.3a37407c.js";
-import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
-import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
-import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
-import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../../../test/getNameDataTestId.14875ec7.js";
-import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.c5a3b322.js";
-import { w as withSizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index.0328ad0a.js";
-import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.5b3e0521.js";
-import { useLocation } from "react-router-dom";
-import { L as LoadingError } from "../../../LoadingError/index.ee29dd48.js";
-import { c as cjs } from "../../../../react-draggable.e4725f3a.js";
-import { R as ResizeableWindow } from "../../../Resizeable/index.cb5aad75.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) {
-          console.debug("NO EXISTE window", hashLayoutItems, p.i);
-          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
-};