@m4l/components 0.1.68 → 0.1.70

package/components/areas/components/index.359c2b18.js

@@ -0,0 +1,1514 @@
+import { I as IconButton } from "../../mui_extended/IconButton/index.57824447.js";
+import { u as useAreasStore } from "../hooks/useArea/index.2adbe001.js";
+import { useEnvironment, useModuleDictionary, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
+import { shallow } from "zustand/shallow";
+import { A as AREAS_VIEWER_CLASS_NAME, a as AREAS_ADMIN_CLASS_NAME, I as ICONS, g as getAreasDictionary } from "../index.8a58bcbf.js";
+import { I as Icon } from "../../Icon/index.caaed284.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React__default, { useMemo, useState, useRef, useCallback, useEffect } from "react";
+import { generateUtilityClasses, Skeleton, styled as styled$1, Typography as Typography$1, Dialog } from "@mui/material";
+import clsx from "clsx";
+import "zustand";
+import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, C as CONTAINER_PADDING_GRIDLAYOUT, T as THROTTLE_RESIZE_TIME } from "../contexts/AreasContext/index.de8b4e78.js";
+import "../../mui_extended/Accordion/index.437bb3f8.js";
+import "../../mui_extended/Avatar/index.fe06afd7.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import { B as Button } from "../../mui_extended/Button/index.f8ce9ccd.js";
+import { I as Image } from "../../Image/index.82a6cd46.js";
+import "@mui/lab";
+import { T as Typography } from "../../mui_extended/Typography/index.b3c6e71c.js";
+import "../../mui_extended/Popover/index.226f247e.js";
+import { M as MenuActions } from "../../mui_extended/MenuActions/index.37043326.js";
+import "../../mui_extended/Pager/index.eeed3bd5.js";
+import "../../mui_extended/Tab/index.e0653a0a.js";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../../utils/index.a2312a73.js";
+import { styled } from "@mui/material/styles";
+import { r as react_resizable_css } from "../../../react-resizable.8307e056.js";
+import { WidthProvider, Responsive } from "react-grid-layout";
+import { m } from "framer-motion";
+import "../../animate/LoadingScreen/index.1d0c4307.js";
+import "../../animate/PropagateLoader/index.be5b02c3.js";
+import { W as WindowToolsMFProvider } from "../contexts/WindowToolsMFContext/index.8f3e2a04.js";
+import { D as DynamicMFParmsProvider } from "../contexts/DynamicMFParmsContext/index.1607c78e.js";
+import "react-hook-form";
+import "../../hook-form/RHFAutocomplete/index.09c400c3.js";
+import "../../HelperText/index.a69e9509.js";
+import debounce from "lodash/debounce";
+import "../../hook-form/RHFAutocompleteAsync/index.e8acff04.js";
+import "../../hook-form/RHFCheckbox/index.70310f35.js";
+import "@mui/x-date-pickers";
+import "../../hook-form/RHFDateTime/index.7b815072.js";
+import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender, useResizeObserver } from "@m4l/graphics";
+import "../../hook-form/RHFTextField/index.d4c39859.js";
+import "../../hook-form/RHFPeriod/index.3c7d393c.js";
+import "../../Period/index.fbf074d3.js";
+import "../../CommonActions/components/Actions/index.154d7cb6.js";
+import "../../../contexts/ModalContext/index.8e3cd7a8.js";
+import { c as cjs } from "../../../react-draggable.0d64c8b1.js";
+import "../../ModalDialog/index.cdfd1ae8.js";
+import { R as ResizeableWindow } from "../../Resizeable/index.aafda79e.js";
+import "../../modal/WindowConfirm.e21763cb.js";
+import "../../modal/WindowBase.6a40a945.js";
+import "lodash/isString";
+import "react-dropzone";
+import "../../hook-form/RHFUpload/index.31044674.js";
+import "../../DataGrid/index.2f4a0e64.js";
+import "react-dnd";
+import "react-dnd-html5-backend";
+import "../../DynamicFilter/index.789ab474.js";
+import "../../ScrollBar/index.bbe48f4d.js";
+import "yup";
+import "@hookform/resolvers/yup";
+import "../../../contexts/RHFormContext/index.a7511399.js";
+import "../../LanguagePopover/index.5af28b9e.js";
+import "../../NavLink/index.251fcf0d.js";
+import "../../NoItemSelected/index.3b9d16e3.js";
+import "../../ObjectLogs/index.57ea68b3.js";
+import "../../../react-json-view.57125fcf.js";
+import "../../PaperForm/index.d2d492ea.js";
+import "../../Page/index.4237c241.js";
+import "../../PropertyValue/index.dfcfe1ba.js";
+import "../../../react-splitter-layout.8b1655c8.js";
+import "../../SplitLayout/index.5a8355d8.js";
+import "../../SideBar/index.3bc6a634.js";
+import { D as DraggableWindow } from "../../../vendor.8edaef93.js";
+import { L as LinearProgress } from "../../mui_extended/LinearProgress/index.c92b9ba9.js";
+import { v as varBounce } from "../../animate/variants/bounce.784aaaaa.js";
+import { throttle } from "lodash";
+const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
+  "root",
+  "areaRoot",
+  "areaGridLayoutPanelContainer",
+  "areaGridLayout",
+  "areaGridLayoutPopupsContainer",
+  "windowRoot",
+  "windowHeader",
+  "windowHeaderTitle",
+  "windowHeaderMainActions",
+  "windowContent",
+  "windowPopupRoot",
+  "windowModalRoot",
+  "panelWindowsRoot",
+  "panelWindowsButtonContainer",
+  "selected",
+  "isMobile",
+  "loading"
+], AREAS_VIEWER_CLASS_NAME);
+const useAreasViewerUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.status, ownerState.isMobile && "isMobile", ownerState.isSkeleton && "isSkeleton"],
+    areaRoot: ["areaRoot"],
+    areaGridLayoutPanelContainer: ["areaGridLayoutPanelContainer"],
+    areaGridLayout: ["areaGridLayout"],
+    areaGridLayoutPopupsContainer: ["areaGridLayoutPopupsContainer"],
+    windowRoot: ["windowRoot"],
+    windowHeader: ["windowHeader"],
+    windowHeaderTitle: ["windowHeaderTitle"],
+    windowHeaderMainActions: ["windowHeaderMainActions"],
+    windowContent: ["windowContent"],
+    windowPopupRoot: ["windowPopupRoot"],
+    windowModalRoot: ["windowModalRoot"],
+    panelWindowsRoot: ["panelWindowsRoot"],
+    panelWindowsButtonContainer: ["panelWindowsButtonContainer"]
+  };
+  return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_VIEWER_CLASS_NAME), {});
+};
+const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
+  "root",
+  "areaChipRoot",
+  "areaChipTitle",
+  "areaChipDeleteButton",
+  "areaChipEditButton",
+  "areasAddButton",
+  "areaContainerChips",
+  "areaIconLayer",
+  "selected",
+  "isMobile",
+  "disabled"
+], AREAS_ADMIN_CLASS_NAME);
+const useAreasAdminUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.status, ownerState.isMobile && "isMobile", ownerState.isSkeleton && "isSkeleton"],
+    areaChipRoot: ["areaChipRoot"],
+    areaIconLayer: ["areaIconLayer"],
+    areaContainerChips: ["areaContainerChips"],
+    areaChipTitle: ["areaChipTitle"],
+    areaChipDeleteButton: ["areaChipDeleteButton"],
+    areaChipEditButton: ["areaChipEditButton"],
+    areasAddButton: ["areasAddButton"]
+  };
+  return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_ADMIN_CLASS_NAME), {});
+};
+const AreaChip = (props) => {
+  const {
+    areaId,
+    selected,
+    areaName,
+    disabled
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    deleteArea,
+    selectArea
+  } = useAreasStore((state) => state.areasActions);
+  const onClickDeleteArea = (e) => {
+    e.stopPropagation();
+    deleteArea(areaId);
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    role: "presentation",
+    className: clsx(areasAdminClasses.areaChipRoot, selected ? areasAdminClasses.selected : null, disabled ? areasAdminClasses.disabled : null),
+    onClick: () => {
+      selectArea(areaId);
+    },
+    children: [/* @__PURE__ */ jsx("span", {
+      className: areasAdminClasses.areaChipTitle,
+      children: areaName
+    }), /* @__PURE__ */ jsx(IconButton, {
+      className: areasAdminClasses.areaChipDeleteButton,
+      src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
+      size: "small",
+      disabled,
+      onClick: onClickDeleteArea
+    })]
+  });
+};
+AreaChip.displayName = "AreaButtons";
+const AreasAdminRoot = styled("div")`
+    display: flex;
+    position: relative;
+
+    //areaRoot
+    & .${areasAdminClasses.areaChipRoot} {
+        display: flex;
+    }
+
+    & .${areasAdminClasses.areaChipRoot}.${areasAdminClasses.selected}::before {
+        content: "";
+        background-color: ${(props) => props.theme.palette.primary.main};
+        height: 100%;
+        width: 8px;
+    }
+
+    ${(props) => props.theme.components?.M4LAreasAdmin?.styleOverrides}
+
+ 
+`;
+function AreasAdmin() {
+  const areas = useAreasStore((state) => state.areas, shallow);
+  const currentArea = useAreasStore((state) => state.currentAreaId, shallow);
+  const status = useAreasStore((state) => state.ownerState.status);
+  const classesRoot = useAreasStore((state) => state.adminClasses.root);
+  const areasLength = useAreasStore((state) => state.areas.length);
+  const {
+    addArea
+  } = useAreasStore((state) => state.areasActions, shallow);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  console.log("Render AreasAdmin", areas);
+  if (status !== "loaded") {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(AreasAdminRoot, {
+    className: classesRoot,
+    children: [/* @__PURE__ */ jsx("div", {
+      className: areasAdminClasses.areaIconLayer,
+      children: /* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.LAYERS}`
+      })
+    }), /* @__PURE__ */ jsx("div", {
+      className: areasAdminClasses.areaContainerChips,
+      children: areas.map((area) => /* @__PURE__ */ jsx(AreaChip, {
+        areaId: area.id,
+        selected: area.id === currentArea,
+        areaName: area.name,
+        disabled: areasLength === 1
+      }, area.id))
+    }), /* @__PURE__ */ jsx(IconButton, {
+      className: areasAdminClasses.areasAddButton,
+      src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`,
+      size: "small",
+      onClick: addArea
+    })]
+  });
+}
+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;
+    }
+    & .${areasViewerClasses.panelWindowsButtonContainer}.${areasViewerClasses.selected} {
+        border: 1px solid red;
+    }
+
+    // windowRoot
+
+    // windowModalRoot
+    & .${areasViewerClasses.windowModalRoot} {
+        padding: 16px;
+    }
+
+    .react-grid-layout {
+        position: relative;
+        transition: height 200ms ease;
+    }
+    .react-grid-item {
+        transition: all 200ms ease;
+        transition-property: left, top;
+    }
+    .react-grid-item img {
+        pointer-events: none;
+        user-select: none;
+    }
+    .react-grid-item.cssTransforms {
+        transition-property: transform;
+    }
+    .react-grid-item.resizing {
+        z-index: 1;
+        will-change: width, height;
+    }
+
+    .react-grid-item.react-draggable-dragging {
+        transition: none;
+        z-index: 3;
+        will-change: transform;
+    }
+
+    .react-grid-item.dropping {
+        visibility: hidden;
+    }
+
+    .react-grid-item.react-grid-placeholder {
+        background: green;
+        opacity: 0.2;
+        transition-duration: 100ms;
+        z-index: 2;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -o-user-select: none;
+        user-select: none;
+    }
+
+    .react-grid-item > .react-resizable-handle {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+    }
+
+    .react-grid-item > .react-resizable-handle::after {
+        content: '';
+        position: absolute;
+        right: 3px;
+        bottom: 3px;
+        width: 5px;
+        height: 5px;
+        border-right: 2px solid rgba(0, 0, 0, 0.4);
+        border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+    }
+
+    .react-resizable-hide > .react-resizable-handle {
+        display: none;
+    }
+
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
+        bottom: 0;
+        left: 0;
+        cursor: sw-resize;
+        transform: rotate(90deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+        bottom: 0;
+        right: 0;
+        cursor: se-resize;
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
+        top: 0;
+        left: 0;
+        cursor: nw-resize;
+        transform: rotate(180deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
+        top: 0;
+        right: 0;
+        cursor: ne-resize;
+        transform: rotate(270deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-w,
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+        top: 50%;
+        margin-top: -10px;
+        cursor: ew-resize;
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-w {
+        left: 0;
+        transform: rotate(135deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+        right: 0;
+        transform: rotate(315deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-n,
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+        left: 50%;
+        margin-left: -10px;
+        cursor: ns-resize;
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-n {
+        top: 0;
+        transform: rotate(225deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+        bottom: 0;
+        transform: rotate(45deg);
+    }
+
+    ${react_resizable_css}
+
+    ${(props) => props.theme.components?.M4LAreasViewer?.styleOverrides}
+`;
+styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  position: "relative",
+  justifyContent: "space-between",
+  minHeight: theme.spacing(5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  overflow: "hidden",
+  cursor: "move",
+  height: "60px",
+  " > span": {
+    marginRight: "12px"
+  },
+  "& > h5": {
+    paddingRight: theme.spacing(3),
+    borderRight: `1px solid ${theme.palette.divider}`
+  },
+  " > nav": {
+    marginRight: "12px",
+    flexGrow: 1
+  },
+  "& .splitactions.Mui-disabled": {
+    color: theme.palette.primary.main
+  },
+  "& svg ": {
+    width: "20px",
+    height: "20px"
+  }
+}));
+styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  position: "relative",
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  height: "60px",
+  minHeight: "60px",
+  " > span": {
+    marginRight: "12px"
+  },
+  "& > h5": {
+    paddingRight: theme.spacing(3),
+    borderRight: `1px solid ${theme.palette.divider}`
+  },
+  " > nav": {
+    marginRight: "12px",
+    flexGrow: 1
+  },
+  "& .splitactions.Mui-disabled": {
+    color: theme.palette.primary.main
+  },
+  "& svg ": {
+    width: "20px",
+    height: "20px"
+  }
+}));
+const Wrapper = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  padding: `0 0`,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  minHeight: "60px"
+}));
+const ModuleTitleContent = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: "auto",
+  gridGap: theme.spacing(1.75),
+  alignItems: "center",
+  width: "auto",
+  height: "auto",
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: "repeat(3, auto)"
+  }
+}));
+const ModuleTitle = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: `${theme.spacing(3)} auto`,
+  gridGap: theme.spacing(2),
+  alignItems: "center",
+  width: "auto",
+  height: "auto"
+}));
+const Separator = styled("div")(({
+  theme
+}) => ({
+  display: "none",
+  alignItems: "center",
+  width: "1px",
+  background: theme.palette.divider,
+  height: "100%",
+  margin: `0 ${theme.spacing(2)}`,
+  [theme.breakpoints.up("sm")]: {
+    display: "flex"
+  }
+}));
+const Breadcrumbs = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  alignItems: "center",
+  gridTemplateColumns: `repeat(3, auto)`,
+  gridGap: theme.spacing(2)
+}));
+const ModuleActions = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: "auto",
+  alignItems: "center",
+  width: "auto",
+  height: "auto",
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: `repeat(3, ${theme.spacing(3)})`,
+    gridGap: theme.spacing(2)
+  }
+}));
+function SKTModuleHeader() {
+  const isDesktop = useResponsiveDesktop();
+  return /* @__PURE__ */ jsxs(Wrapper, {
+    id: "HeaderSkeleton",
+    children: [/* @__PURE__ */ jsxs(ModuleTitleContent, {
+      children: [/* @__PURE__ */ jsxs(ModuleTitle, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: 120,
+          height: 14
+        })]
+      }), /* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs(Breadcrumbs, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: 68,
+          height: 14
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 4,
+          height: 4
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: 68,
+          height: 14
+        })]
+      })]
+    }), /* @__PURE__ */ jsx(ModuleActions, {
+      children: isDesktop ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        })]
+      }) : /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 24,
+        height: 24
+      })
+    })]
+  });
+}
+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(windowId, isDesktop, moduleActions, urlPrefix, saveModuleCookies, resetModuleCookies, version) {
+  let menuActions = [...moduleActions.filter((action) => action.visibility !== "allways")];
+  if (isDesktop !== void 0 && isDesktop) {
+    menuActions = menuActions.filter((action) => action.visibility === "normal");
+  }
+  const saveCookiesAction = {
+    urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.SAVE_COOKIES}`,
+    onClick: () => saveModuleCookies(windowId),
+    disabled: false,
+    visibility: "normal",
+    dictionaryId: getAreasDictionary("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",
+    dictionaryId: getAreasDictionary("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 window2 = state.hashWindows[windowId];
+    return window2?.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 || "");
+      return /* @__PURE__ */ jsx(IconButton, {
+        src: mainAction.urlIcon,
+        className: mainAction.className,
+        onClick: mainAction.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, singleId] = useAreasStore((state) => {
+    const window2 = state.hashWindows[windowId];
+    return [window2.url_icon, window2.title, window2.moduleActions, window2.onClose, window2.version, state.hashAreas[areaId].singleId];
+  }, shallow);
+  const {
+    saveModuleCookies,
+    resetModuleCookies
+  } = useAreasStore((state) => state.windowActions, shallow);
+  const {
+    maximizeLayout,
+    normalizeLayouts
+  } = useAreasStore((state) => state.areaActions, shallow);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const urlPrefix = `${host_static_assets}/${environment_assets}`;
+  const menuActions = useMemo(() => {
+    return getMenuActions(windowId, isDesktop, moduleActions, urlPrefix, saveModuleCookies, resetModuleCookies, version);
+  }, [moduleActions, isDesktop]);
+  const onCloseLocal = () => {
+    onClose && onClose(windowId);
+  };
+  const maxNormalize = () => {
+    if (singleId) {
+      normalizeLayouts(areaId);
+    } else {
+      maximizeLayout(areaId, windowId);
+    }
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTModuleHeader, {});
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(areasViewerClasses.windowHeader, "m4l_draggable_handle"),
+    children: [/* @__PURE__ */ jsx(Icon, {
+      src: url_icon,
+      size: "medium"
+    }), /* @__PURE__ */ jsx(Typography, {
+      className: areasViewerClasses.windowHeaderTitle,
+      variant: "h5",
+      children: `${title}`
+    }), /* @__PURE__ */ jsx(MainActions, {
+      windowId
+    }), isDesktop && emergeType === "layout" && /* @__PURE__ */ jsx(IconButton, {
+      onClick: maxNormalize,
+      "aria-label": "click",
+      src: singleId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`
+    }), menuActions.length > 0 && /* @__PURE__ */ jsx(MenuActions, {
+      arrowType: "no-arrow",
+      marginTop: "12px!important",
+      marginLeft: "14px!important",
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      menuActions
+    }), onClose && /* @__PURE__ */ jsx(IconButton, {
+      onClick: onCloseLocal,
+      "aria-label": "click",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CLOSE}`
+    })]
+  });
+}
+const WrapperLinearProgress = styled$1("div")(() => ({
+  width: "70%",
+  margin: "auto auto"
+}));
+const WrapperFallBackNotFound = styled$1("div")(({
+  theme
+}) => ({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: theme.spacing(3)
+}));
+function FallBackNotFound(props) {
+  const {
+    setNetworkRefresh
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const handlerClick = () => {
+    setNetworkRefresh((prop) => !prop);
+  };
+  return /* @__PURE__ */ jsxs(WrapperFallBackNotFound, {
+    children: [/* @__PURE__ */ jsx(m.div, {
+      variants: varBounce().in,
+      children: /* @__PURE__ */ jsx(Typography$1, {
+        variant: "h3",
+        paragraph: true,
+        children: getLabel("loading_mf_title")
+      })
+    }), /* @__PURE__ */ jsx(Typography$1, {
+      sx: {
+        color: "text.secondary"
+      },
+      children: getLabel("loading_mf_description")
+    }), /* @__PURE__ */ jsx(m.div, {
+      variants: varBounce().in,
+      children: /* @__PURE__ */ jsx(Image, {
+        src: `${host_static_assets}/${environment_assets}/frontend/domain/host/commons/assets/img/illustration_noauth.png`,
+        ratio: "1:1"
+      })
+    }), /* @__PURE__ */ jsx(Button, {
+      size: "medium",
+      variant: "contained",
+      onClick: handlerClick,
+      children: getLabel("loading_mf_intro")
+    })]
+  });
+}
+const LoadingMF = (props) => {
+  const {
+    loadingProgress,
+    setNetworkRefresh
+  } = props;
+  if (loadingProgress !== -1) {
+    return /* @__PURE__ */ jsx(WrapperLinearProgress, {
+      id: "WrapperLinearProgress",
+      children: /* @__PURE__ */ jsx(LinearProgress, {
+        variant: "determinate",
+        value: loadingProgress
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(FallBackNotFound, {
+    setNetworkRefresh
+  });
+};
+function getDivScritId(prefix, moduleId) {
+  const rotational_id = `${Math.round(new Date().getTime() / 1e3)}_rnd_${Math.round(Math.random() * 1e3)}`;
+  return {
+    divContainerId: `container_${prefix}_${moduleId}_${rotational_id}`,
+    scriptId: `script_${moduleId}_${rotational_id}`,
+    moduleId
+  };
+}
+function MFLoader(props) {
+  const {
+    prefix,
+    moduleId,
+    cache = true,
+    debug_port,
+    dynamicMFStore,
+    windowTools
+  } = props;
+  const {
+    hostThemeOptions,
+    fnComponentsOverrides
+  } = useHostTheme();
+  const {
+    networkOperation
+  } = useNetwork();
+  const environment = useEnvironment();
+  const hostTools = useHostTools();
+  const formatter = useFormatter();
+  const [isLoading, setIsLoading] = useState(true);
+  const [networkProgress, setNetworkProgress] = useState(-1);
+  const [_networkRefresh, setNetworkRefresh] = useState(false);
+  const {
+    currentLocale
+  } = useLocales();
+  const [divScript, setDivScript] = useState(getDivScritId(prefix, moduleId));
+  const refTime = useRef(0);
+  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 {
+      setIsLoading(false);
+      window[`render_${prefix}_${newDScript.moduleId}`](newDScript.divContainerId, environment, hostTools, currentLocale, {
+        hostThemeOptions,
+        fnComponentsOverrides
+      }, axiosOperation, formatter, dynamicMFStore, windowTools);
+    } catch (error) {
+    }
+  }, [hostThemeOptions, currentLocale, formatter]);
+  const debouncedSetDivScript = useCallback(debounce((newName) => {
+    const newDivScript = getDivScritId(prefix, newName);
+    if (newName !== divScript.moduleId) {
+      setDivScript({
+        ...newDivScript
+      });
+    }
+  }, 200), [divScript]);
+  useEffect(() => {
+    if (!isFirstRender) {
+      debouncedSetDivScript(moduleId + "");
+      if (moduleId !== divScript.moduleId)
+        ;
+    }
+    return () => {
+    };
+  }, [moduleId]);
+  useEffect(() => {
+    setIsLoading(true);
+    let mounted = true;
+    const controller = new AbortController();
+    const dsScript = {
+      ...divScript
+    };
+    const loadIfNotLoaded = async () => {
+      if (!window[`render_${prefix}_${moduleId}`]) {
+        let urlFile = "";
+        setNetworkProgress(0);
+        const manifest = await fetch(`${final_host}/manifest.json?rnd=${Math.random()}`).then((res) => res.json()).catch(() => {
+          console.debug("Error fetching manifest", `${final_host}/manifest.json`);
+          return void 0;
+        });
+        if (!manifest) {
+          return;
+        }
+        setNetworkProgress(10);
+        if (mounted) {
+          urlFile = `${final_host}/${manifest["src/index.tsx"]["file"]}?rnd=${Math.random()}`;
+          refTime.current = 0;
+          await networkOperation({
+            method: "GET",
+            endPoint: urlFile,
+            isRemote: !environment.isLocalhost,
+            headers: {
+              "Content-Type": "application/json"
+            },
+            onDownloadProgress: (progressEvent) => {
+              let percentCompleted = 0;
+              try {
+                if (progressEvent.lengthComputable) {
+                  percentCompleted = 10 + Math.round(progressEvent.loaded * 90 / progressEvent.total);
+                } else {
+                  if (refTime.current === 0) {
+                    refTime.current = new Date().getTime();
+                  }
+                  percentCompleted = 10 + progressEvent.loaded / 15e5 * 90;
+                  if (percentCompleted > 95)
+                    percentCompleted = 95;
+                }
+              } catch (error) {
+              }
+              if (mounted) {
+                setNetworkProgress(percentCompleted);
+              }
+            },
+            isExternalUrl: true,
+            responseType: "text",
+            signal: controller.signal
+          }).then(() => {
+            if (mounted) {
+              setNetworkProgress(100);
+            }
+          }).catch(() => {
+          });
+          if (mounted) {
+            const script = document.createElement("script");
+            script.id = divScript.scriptId;
+            script.crossOrigin = "";
+            script.type = "module";
+            script.src = urlFile || "";
+            script.onload = () => {
+              if (mounted) {
+                console.debug("Script loaded", new Date().getTime());
+                setNetworkProgress(100);
+                renderMicroFrontend(dsScript);
+              }
+            };
+            document.head.appendChild(script);
+            console.debug("Script appened", new Date().getTime());
+          }
+        }
+      } else {
+        if (mounted) {
+          renderMicroFrontend(dsScript);
+        }
+      }
+    };
+    loadIfNotLoaded();
+    return () => {
+      mounted = false;
+      controller.abort();
+      cleanUp(dsScript);
+    };
+  }, [divScript]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      id: divScript.divContainerId,
+      style: {
+        width: "100%",
+        height: "100%"
+      }
+    }), isLoading ? /* @__PURE__ */ jsx(LoadingMF, {
+      loadingProgress: networkProgress,
+      setNetworkRefresh
+    }) : null]
+  });
+}
+MFLoader.defaultProps = {
+  document,
+  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: typeof component === "function" ? component() : 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;
+    }
+    &.${areasViewerClasses.loading} {
+        border-left: 2px solid red;
+    }
+    // windowHeader
+    & .${areasViewerClasses.windowHeader} {
+        display: flex;
+        gap: 4px;
+        
+        align-items: center;
+        position: relative;
+
+        padding: 8px;
+        justify-content: end;
+        min-height: ${(props) => props.theme.spacing(5)} ;
+
+        border-bottom: 1px solid ${(props) => props.theme.palette.divider},
+        overflow: hidden;
+        cursor: move;
+        height: 60px;
+
+
+
+        > span: {
+            margin-right: 12px;
+        }
+    }
+    // windowHeaderTitle
+    & .${areasViewerClasses.windowHeaderTitle} {
+        width: 100%;
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        color: ${(props) => props.theme.palette.text.primary};
+        margin-left: 12px;
+        margin-right: 24px;
+        text-overflow: ellipsis;
+    }
+    // windowHeaderMainActions
+    & .${areasViewerClasses.windowHeaderMainActions} {
+        display: flex;
+
+        gap: 4px;
+    }
+
+    
+    // windowHeaderMainActions
+    & .${areasViewerClasses.windowContent} {
+        flex-grow: 1;
+        position: relative;
+    }
+
+    // windowModalRoot
+    & .${areasViewerClasses.windowModalRoot} {
+        padding: 16px;
+    }
+
+    ${(props) => props.theme.components?.M4LAreasViewerWindow?.styleOverrides}
+
+    
+`;
+const Window = (props) => {
+  const {
+    emergeType,
+    windowId,
+    moduleId,
+    areaId
+  } = props;
+  const selected = useAreasStore((state) => emergeType === "layout" ? state.hashAreas[areaId].currentLayoutId : state.hashAreas[areaId].currentPopUpId) === windowId;
+  const wd = useAreasStore((state) => state.hashWindows[windowId], shallow);
+  const {
+    setActions,
+    getCookie,
+    getCookies,
+    setCookie,
+    close,
+    setLoading
+  } = useAreasStore((state) => state.windowActions, shallow);
+  const {
+    selectWindowPopUp,
+    selectWindowLayout
+  } = useAreasStore((state) => state.areaActions);
+  const {
+    loadCookiesFromApi
+  } = useAreasStore((state) => state.windowActions);
+  const onTouch = () => {
+    if (!selected) {
+      if (emergeType === "popup") {
+        selectWindowPopUp(areaId, props.windowId);
+      } else if (emergeType === "layout") {
+        selectWindowLayout(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),
+    setLoading: (isLoading) => {
+      setLoading(windowId, isLoading);
+    }
+  }), []);
+  useEffect(() => {
+    loadCookiesFromApi(windowId);
+  }, []);
+  return /* @__PURE__ */ jsxs(WindowRoot, {
+    role: "presentation",
+    className: clsx(areasViewerClasses.windowRoot, selected ? areasViewerClasses.selected : null, wd.loading ? areasViewerClasses.loading : null),
+    onMouseDown: onTouch,
+    children: [/* @__PURE__ */ jsx(Header, {
+      areaId,
+      windowId,
+      emergeType
+    }), /* @__PURE__ */ jsx("div", {
+      className: areasViewerClasses.windowContent,
+      children: wd.status === "init" ? /* @__PURE__ */ jsx("div", {
+        children: "BRUCE cargando"
+      }) : wd.winType === "microfrontend" ? /* @__PURE__ */ jsx(MemonizedMicroFrontend, {
+        moduleId,
+        dynamicMFStore: wd.dynamicMFStore,
+        windowTools,
+        ...wd.mfProps
+      }) : /* @__PURE__ */ jsx(Component, {
+        moduleId,
+        dynamicMFStore: wd.dynamicMFStore,
+        windowTools,
+        component: wd.component
+      })
+    })]
+  });
+};
+const MemonizedWindow = React__default.memo(Window);
+const WindowPopUp = (props) => {
+  const {
+    areaId,
+    windowProps,
+    windowId
+  } = props;
+  const {
+    selectWindowPopUp
+  } = useAreasStore((store) => store.areaActions);
+  const selectedPopUpId = useAreasStore((store) => store.hashAreas[areaId].currentPopUpId);
+  const zIndex = useAreasStore((store) => store.hashAreas[areaId].hashWindowsPopups[props.windowId].zIndex);
+  const isSelected = props.windowId === selectedPopUpId;
+  const onTouch = () => {
+    if (!isSelected) {
+      selectWindowPopUp(areaId, props.windowId);
+    }
+  };
+  return /* @__PURE__ */ jsx(DraggableWindow, {
+    handle: ".m4l_draggable_handle",
+    cancel: "",
+    defaultPosition: windowProps,
+    children: /* @__PURE__ */ jsx(ResizeableWindow, {
+      className: clsx(areasViewerClasses.windowPopupRoot, `${areasViewerClasses.windowPopupRoot}-${windowId}`),
+      width: windowProps.width,
+      height: windowProps.height,
+      style: {
+        zIndex,
+        position: "absolute"
+      },
+      onResizeStart: () => {
+        onTouch();
+      },
+      children: /* @__PURE__ */ jsx(Window, {
+        ...props
+      })
+    })
+  });
+};
+const MemonizedWindowPopUp = React__default.memo(WindowPopUp);
+const ResponsiveGridLayout = WidthProvider(Responsive);
+const GridLayout = (props) => {
+  const {
+    areaId
+  } = props;
+  const windowsLayouts = useAreasStore((state) => state.hashAreas[areaId].windowsLayouts, shallow);
+  const hashWindowsPopups = useAreasStore((state) => state.hashAreas[areaId].hashWindowsPopups, shallow);
+  const hashWindowsLayouts = useAreasStore((state) => state.hashAreas[areaId].hashWindowsLayouts, shallow);
+  const breakPointsLayouts = useAreasStore((state) => state.hashAreas[areaId].breakPointsLayouts, shallow);
+  const windowsPopUps = useAreasStore((state) => state.hashAreas[areaId].windowsPopUps, shallow);
+  const breakpoints = useAreasStore((state) => state.hashAreas[areaId].breakpoints, shallow);
+  const viewMode = useAreasStore((state) => state.hashAreas[areaId].viewMode, shallow);
+  const cols = useAreasStore((state) => state.hashAreas[areaId].cols, shallow);
+  const {
+    onBreakpointsLayoutsChange
+  } = useAreasStore((state) => state.areaActions, shallow);
+  function onBreakpointChange(_newBreakpoint, _newCols) {
+  }
+  useEffect(() => {
+    setTimeout(() => {
+      window.dispatchEvent(new Event("resize"));
+    }, 100);
+  }, [viewMode, windowsLayouts]);
+  return /* @__PURE__ */ jsxs(
+    ResponsiveGridLayout,
+    {
+      autoSize: false,
+      compactType: "vertical",
+      measureBeforeMount: true,
+      resizeHandles: ["nw", "se"],
+      className: clsx(areasViewerClasses.areaGridLayout, `${areasViewerClasses.areaGridLayout}-${areaId}`),
+      layouts: breakPointsLayouts,
+      onLayoutChange: (currentLayouts, newAllLayouts) => onBreakpointsLayoutsChange(areaId, currentLayouts, newAllLayouts),
+      onBreakpointChange,
+      breakpoints,
+      cols,
+      rowHeight: ROW_HEIGTH_GRIDLAYOUT,
+      margin: [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
+      containerPadding: [CONTAINER_PADDING_GRIDLAYOUT, CONTAINER_PADDING_GRIDLAYOUT],
+      draggableHandle: ".m4l_draggable_handle",
+      onWidthChange: () => {
+        console.log("onWidthChange", areaId);
+      },
+      preventCollision: false,
+      verticalCompact: true,
+      children: [/* @__PURE__ */ jsx("div", {
+        className: areasViewerClasses.areaGridLayoutPopupsContainer,
+        "data-grid": {
+          i: "none",
+          x: 0,
+          y: 0,
+          w: 0,
+          h: 0,
+          maxW: 0,
+          maxH: 0,
+          minW: 0,
+          minH: 0,
+          static: true,
+          isDraggable: false,
+          isResizable: false
+        },
+        children: windowsPopUps.map((wp) => {
+          if (hashWindowsPopups[wp]) {
+            return /* @__PURE__ */ jsx(MemonizedWindowPopUp, {
+              ...hashWindowsPopups[wp]
+            }, hashWindowsPopups[wp].windowId);
+          }
+          return null;
+        })
+      }, "none"), windowsLayouts.map((l) => {
+        if (hashWindowsLayouts[l.i]) {
+          return /* @__PURE__ */ jsx("div", {
+            children: /* @__PURE__ */ jsx(MemonizedWindow, {
+              ...hashWindowsLayouts[l.i]
+            })
+          }, l.i);
+        }
+        return null;
+      })]
+    }
+  );
+};
+const PanelWindows = (props) => {
+  const {
+    areaId
+  } = props;
+  const status = useAreasStore((state) => state.hashAreas[areaId].status);
+  const mode = useAreasStore((state) => state.hashAreas[areaId].viewMode);
+  const singleId = useAreasStore((state) => state.hashAreas[areaId].singleId);
+  const windowsLayouts = useAreasStore((state) => state.hashAreas[areaId].windowsLayouts, shallow);
+  const hashWindowsLayouts = useAreasStore((state) => state.hashAreas[areaId].hashWindowsLayouts, shallow);
+  const {
+    maximizeLayout
+  } = useAreasStore((state) => state.areaActions);
+  const onTouched = (layoutId) => {
+    maximizeLayout(areaId, layoutId);
+  };
+  if (status === "loaded") {
+    if (mode !== "single" || windowsLayouts.length < 2) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", {
+      className: areasViewerClasses.panelWindowsRoot,
+      children: windowsLayouts.map((l) => {
+        return /* @__PURE__ */ jsx("div", {
+          className: clsx(areasViewerClasses.panelWindowsButtonContainer, singleId === l.i ? areasViewerClasses.selected : null),
+          children: /* @__PURE__ */ jsx(IconButton, {
+            src: hashWindowsLayouts[l.i].url_icon,
+            size: "small",
+            onClick: () => onTouched(l.i)
+          })
+        }, l.i);
+      })
+    });
+  } else {
+    return null;
+  }
+};
+const InnerForHooks = (props) => {
+  const {
+    areaId
+  } = props;
+  const status = useAreasStore((state) => state.hashAreas[areaId].status);
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(areasViewerClasses.areaGridLayoutPanelContainer, `${areasViewerClasses.areaGridLayoutPanelContainer}-${areaId}`),
+    children: [
+      status === "loaded" ? /* @__PURE__ */ jsx(GridLayout, {
+        areaId
+      }) : /* @__PURE__ */ jsx("div", {
+        children: "Loading.. Intentar si falla."
+      }),
+      /* @__PURE__ */ jsx(PanelWindows, {
+        areaId
+      })
+    ]
+  });
+};
+const Area = (props) => {
+  const {
+    selected,
+    areaId
+  } = props;
+  const classesAreaRoot = useAreasStore((state) => state.viwerClasses.areaRoot);
+  const status = useAreasStore((state) => state.hashAreas[areaId].status);
+  const {
+    resizeMaximixedLayout
+  } = useAreasStore((state) => state.areaActions, shallow);
+  const throttleResizeMaximixedLayout = throttle(() => {
+    console.log("throttleResizeMaximixedLayout", areaId);
+    resizeMaximixedLayout(areaId);
+  }, THROTTLE_RESIZE_TIME, {
+    leading: false
+  });
+  const onResize = useCallback((_target) => {
+    throttleResizeMaximixedLayout();
+  }, []);
+  const ref = useResizeObserver(onResize);
+  if (status === "init") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", {
+    className: clsx(classesAreaRoot, selected ? areasViewerClasses.selected : null, status === "loading" ? areasViewerClasses.loading : null),
+    ref,
+    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 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,
+        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.areas, 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);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(AreasViewerRoot, {
+      className: classesRoot,
+      children: status === "loaded" ? areas.map((area) => {
+        return /* @__PURE__ */ jsx(Area, {
+          areaId: area.id,
+          selected: currentArea === area.id
+        }, area.id);
+      }) : /* @__PURE__ */ jsx(Fragment, {
+        children: "Bruce cargando"
+      })
+    }), windowsModals.map((wm) => {
+      if (hashWindowsModals[wm]) {
+        return /* @__PURE__ */ jsx(MemonizedWindowModal, {
+          ...hashWindowsModals[wm]
+        }, wm);
+      }
+      return null;
+    })]
+  });
+}
+export {
+  AreasAdmin as A,
+  useAreasAdminUtilityClasses as a,
+  areasViewerClasses as b,
+  AreasViewer as c,
+  useAreasViewerUtilityClasses as u
+};