@m4l/components 0.1.76 → 0.1.78

package/components/areas/components/AreasViewer/{index.bf4191ea.js → index.14e62059.js}

@@ -5,89 +5,90 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { styled } from "@mui/material/styles";
-import { r as react_resizable_css } from "../../../../react-resizable.b6f8e04a.js";
-import { generateUtilityClasses, Skeleton, Dialog } from "@mui/material";
+import { r as react_resizable_css } from "../../../../react-resizable.ba08699a.js";
+import { generateUtilityClasses, Skeleton, useTheme, Dialog } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index.008b4c2a.js";
+import { g as getComponentUtilityClass } from "../../../../utils/index.c43a95f4.js";
 import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.66529246.js";
-import React__default, { useMemo, useState, useCallback, useEffect } from "react";
-import { WidthProvider, Responsive } from "react-grid-layout";
 import { shallow } from "zustand/shallow";
-import "../../../animate/index.1f8eadd4.js";
-import "framer-motion";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import "react-router-dom";
-import "../../../animate/LoadingScreen/index.1d0c4307.js";
-import "../../../animate/PropagateLoader/index.7fab43c8.js";
-import { useModuleDictionary, useEnvironment, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
-import { I as Icon } from "../../../Icon/index.9dae8337.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.1a9d4fa5.js";
+import React__default, { useMemo, useState, useCallback, useEffect } from "react";
 import clsx from "clsx";
-import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender, useResizeObserver } from "@m4l/graphics";
-import { u as useAreasStore } from "../../hooks/useAreas/index.40917e99.js";
-import "../AreasAdmin/index.946eebb9.js";
-import { I as ICONS } from "../../icons.19cde4b4.js";
-import "../../../ScrollBar/index.bbe48f4d.js";
-import "../../../mui_extended/Accordion/index.3faafd8b.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.85e4b2e2.js";
+import { useModuleDictionary, useEnvironment, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.12f1a3c3.js";
+import "../../../mui_extended/Accordion/index.9877f7bf.js";
+import { I as Icon } from "../../../Icon/index.9fcd1476.js";
 import { T as Typography } from "../../../mui_extended/Typography/index.443590d6.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import "../../../mui_extended/Avatar/index.75e6ed57.js";
+import "react-router-dom";
 import "@mui/material/Button";
-import { B as Button } from "../../../mui_extended/Button/index.fdb5dcbd.js";
+import { B as Button } from "../../../mui_extended/Button/index.4288f9fc.js";
+import "../../../mui_extended/Badge/index.8c2b8b66.js";
 import "../../../Image/index.c18ebf5a.js";
 import "@mui/lab";
+import { M as MenuActions, a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.43a2e1ae.js";
 import "../../../mui_extended/Popover/index.9f35d0eb.js";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.ba1da3b3.js";
-import "../../../mui_extended/Pager/index.67bda2c5.js";
-import "../../../mui_extended/Tab/index.9e2f6e34.js";
+import "../../../mui_extended/Pager/index.2f6d6d7d.js";
+import "../../../mui_extended/Tab/index.7c82e43d.js";
 import "../../../mui_extended/Tooltip/index.5a795dcd.js";
-import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index.d34d398f.js";
-import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, C as CONTAINER_PADDING_GRIDLAYOUT, T as THROTTLE_RESIZE_TIME } from "../../contexts/AreasContext/index.f0397b7c.js";
+import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
+import { I as ICONS } from "../../icons.8266ccc8.js";
+import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.afb7e3d9.js";
+import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index.60dabc06.js";
+import debounce from "lodash/debounce";
+import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
 import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
-import "zustand";
 import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
+import "../../../../contexts/ModalContext/index.e9a7ba4a.js";
+import "../../../../contexts/RHFormContext/index.fe175bab.js";
+import "../../../GridLayout/index.da6fd387.js";
+import { R as Responsive } from "../../../GridLayout/Responsive/index.0905a698.js";
+import { W as WidthProvider } from "../../../GridLayout/WidthProvider/index.9a26dfe4.js";
+import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.02c4e7be.js";
+import "../../../animate/index.1f8eadd4.js";
+import "framer-motion";
+import "../../../animate/LoadingScreen/index.1d0c4307.js";
+import "../../../animate/PropagateLoader/index.7fab43c8.js";
+import "../AreasAdmin/index.43ecd998.js";
+import "../../../ScrollBar/index.bbe48f4d.js";
+import "zustand";
 import "react-hook-form";
-import "../../../hook-form/RHFAutocomplete/index.a063dc44.js";
-import "../../../HelperText/index.9864f773.js";
-import debounce from "lodash/debounce";
-import "../../../hook-form/RHFAutocompleteAsync/index.ddfd9cc9.js";
-import "../../../hook-form/RHFCheckbox/index.7e7f220b.js";
+import "../../../hook-form/RHFAutocomplete/index.6aa51705.js";
+import "../../../HelperText/index.a019742c.js";
+import "../../../hook-form/RHFAutocompleteAsync/index.1a3dfe5f.js";
+import "../../../hook-form/RHFCheckbox/index.a08a65b3.js";
 import "@mui/x-date-pickers";
-import "../../../hook-form/RHFDateTime/index.d330709b.js";
-import "../../../hook-form/RHFTextField/index.e5336d09.js";
-import "../../../hook-form/RHFPeriod/index.e2b1293b.js";
-import "../../../Period/index.526791a3.js";
-import "../../../CommonActions/components/Actions/index.e376a68e.js";
-import "../../../../contexts/ModalContext/index.699f95fa.js";
-import { c as cjs } from "../../../../react-draggable.6d7949a3.js";
-import "../../../ModalDialog/index.d9c5d400.js";
-import { R as ResizeableWindow } from "../../../Resizeable/index.f6e48e56.js";
-import "../../../modal/index.1b25b61d.js";
+import "../../../hook-form/RHFDateTime/index.4d671108.js";
+import "../../../hook-form/RHFTextField/index.9004e898.js";
+import "../../../hook-form/RHFPeriod/index.39b4be49.js";
+import "../../../Period/index.7b94c418.js";
+import "../../../CommonActions/components/Actions/index.52125041.js";
+import { c as cjs } from "../../../../react-draggable.7abb5d0a.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index.9a9c79a4.js";
+import "../../../modal/index.00efea85.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../../../hook-form/RHFUpload/index.17e7f9eb.js";
-import "../../../DataGrid/index.ffaf000e.js";
+import "../../../hook-form/RHFUpload/index.bed8573e.js";
+import "../../../DataGrid/index.9fb3e6a1.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import "../../../DynamicFilter/index.d7c03a61.js";
+import "../../../DynamicFilter/index.d1a2e2d1.js";
 import "yup";
-import "../../../../contexts/RHFormContext/index.fe175bab.js";
-import "../../../LanguagePopover/index.938c6675.js";
-import "../../../NavLink/index.21c8fd90.js";
+import "lodash";
+import "../../../LanguagePopover/index.98b63dcb.js";
+import "../../../NavLink/index.a5dea6d3.js";
 import "../../../NoItemSelected/index.23dfc897.js";
-import "../../../ObjectLogs/index.a2709fc2.js";
+import "../../../ObjectLogs/index.d9d20b9d.js";
 import "../../../../react-json-view.57125fcf.js";
-import "../../../PaperForm/index.5e1bc99f.js";
+import "../../../PaperForm/index.ba38a0bd.js";
 import "../../../Page/index.4237c241.js";
-import "../../../PropertyValue/index.8a1adf3e.js";
+import "../../../PropertyValue/index.45c73161.js";
 import "../../../SplitLayout/index.9ef430f6.js";
 import "../../../../react-splitter-layout.8b1655c8.js";
-import "../../../SideBar/index.9e1a5b96.js";
-import "../../../AppBar/index.f04f5e45.js";
-import "../../../AccountPopover/index.47cf6c43.js";
-import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.3fabae50.js";
-import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
-import { D as DraggableWindow } from "../../../DraggableWindow/index.b08af1dc.js";
-import { throttle } from "lodash";
+import "../../../SideBar/index.2f497e6c.js";
+import "../../../AppBar/index.06858422.js";
+import "../../../AccountPopover/index.7e76dbb7.js";
 const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "root",
   "areaRoot",
@@ -102,11 +103,13 @@ const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "areaGridLayoutPanelContainer",
   "areaGridLayout",
   "areaGridLayoutPopupsContainer",
+  "areasWindowPopUpList",
   "windowRoot",
   "windowHeader",
   "windowHeaderContent",
   "windowHeaderTitle",
   "windowHeaderMainActions",
+  "windowHeaderCancelHandle",
   "windowContent",
   "windowPopupRoot",
   "windowModalRoot",
@@ -125,6 +128,7 @@ const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "panelWindowsButtonContainer",
   "containerLinearProgress",
   "selected",
+  "colapsed",
   "selectedWindow",
   "isMobile",
   "loading",
@@ -148,11 +152,13 @@ const useAreasViewerUtilityClasses = (ownerState) => {
     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"],
@@ -409,37 +415,6 @@ const AreasViewerRoot = styled("div")`
 
     ${(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
 }) => ({
@@ -620,7 +595,7 @@ function getMenuActions(options) {
       onClick: () => saveModuleCookies(windowId),
       disabled: false,
       visibility: "normal",
-      dictionaryId: getAreasDictionary("label_persist_module_cookies"),
+      dictionaryId: getAreasDictionary(DICCTIONARY.label_persist_module_cookies),
       key: "save_cookies"
     };
     menuActions.push(saveCookiesAction);
@@ -629,7 +604,7 @@ function getMenuActions(options) {
       onClick: () => resetModuleCookies(windowId),
       disabled: false,
       visibility: "normal",
-      dictionaryId: getAreasDictionary("label_reset_module_cookies"),
+      dictionaryId: getAreasDictionary(DICCTIONARY.label_reset_module_cookies),
       key: "reset_cookes"
     };
     menuActions.push(resetCookiesAction);
@@ -667,10 +642,15 @@ function MainActions(props) {
     className: areasViewerClasses.windowHeaderMainActions,
     children: mainActions.map((mainAction) => {
       const tooltip = mainAction.label !== void 0 ? mainAction.label : getLabel(mainAction.dictionaryId || "");
+      const onClick = (e) => {
+        console.log("onClick MainActions");
+        mainAction.onClick(e);
+        e.stopPropagation();
+      };
       return /* @__PURE__ */ jsx(IconButton, {
         src: mainAction.urlIcon || "",
-        className: mainAction.className,
-        onClick: mainAction.onClick,
+        className: clsx(mainAction.className, "m4l_draggableCancel"),
+        onClick,
         "aria-label": mainAction.label,
         disabled: mainAction.disabled,
         tooltip
@@ -678,23 +658,95 @@ function MainActions(props) {
     })
   });
 }
+const WindowPopUpsList = (props) => {
+  const {
+    areaId,
+    windowId
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const windowsPopUps = useAreasStore((state) => state.hashAreas[areaId].layoutItemsIds.filter((li) => state.hashWindows[li].parentLayoutId === windowId && state.hashWindows[li].emergeType === "popup").map((lim) => {
+    const w = state.hashWindows[lim];
+    return {
+      i: w.windowId,
+      url_icon: w.url_icon,
+      title: w.title
+    };
+  }), shallow);
+  const theme = useTheme();
+  const {
+    maximizeLayout
+  } = useAreasStore((state) => state.areaActions);
+  const onTouched = (layoutId) => {
+    maximizeLayout(areaId, layoutId);
+  };
+  const menuActions = windowsPopUps ? windowsPopUps.map((element) => {
+    return {
+      onClick: () => onTouched(element.i),
+      label: element.title,
+      urlIcon: element.url_icon
+    };
+  }) : null;
+  if (menuActions && menuActions.length > 0) {
+    return /* @__PURE__ */ jsx(MenuActions, {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.POPUP}`,
+      arrowType: "no-arrow",
+      marginTop: "12px!important",
+      marginLeft: "14px!important",
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      menuActions,
+      className: areasViewerClasses.areasWindowPopUpList,
+      menuActionSx: theme.components?.M4LAreasViewerWindowPopUpList?.styleOverrides,
+      withBadge: true,
+      badgeContent: menuActions.length.toString()
+    });
+  } else {
+    return null;
+  }
+};
 function Header(props) {
   const {
     areaId,
     windowId,
     emergeType
   } = props;
-  const [url_icon, title, moduleActions, onClose, version, windowOptions, singleId] = useAreasStore((state) => {
+  const [url_icon, title, moduleActions, onClose, version, windowOptions] = useAreasStore((state) => {
     const window2 = state.hashWindows[windowId];
-    return [window2.url_icon, window2.title, window2.moduleActions, window2.onClose, window2.version, window2.windowOptions, state.hashAreas[areaId].singleId];
+    return [
+      window2.url_icon,
+      window2.title,
+      window2.moduleActions,
+      window2.onClose,
+      window2.version,
+      window2.windowOptions
+    ];
   }, 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
+    normalizeLayouts,
+    colapseLayoutItem,
+    unColapseLayoutItem
   } = useAreasStore((state) => state.areaActions, shallow);
   const {
     host_static_assets,
@@ -718,12 +770,21 @@ function Header(props) {
   const onCloseLocal = () => {
     onClose && onClose(windowId);
   };
-  const maxNormalize = () => {
-    if (singleId) {
+  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(SKTModuleHeader, {});
@@ -739,47 +800,63 @@ function Header(props) {
         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}`
+      }), /* @__PURE__ */ jsxs("div", {
+        className: areasViewerClasses.windowHeaderCancelHandle,
+        children: [/* @__PURE__ */ jsx(MainActions, {
+          windowId
+        }), emergeType === "layout" ? /* @__PURE__ */ jsx(WindowPopUpsList, {
+          areaId,
+          windowId
+        }) : null, 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
+        }), !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}`
+        }), !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}`,
+          dictionaryTooltipId: "pendiente"
+        }), 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}`
+        })]
       })]
     })]
   });
 }
 const ProggessLoadingMF = (props) => {
-  const {
-    loadingProgress
-  } = props;
-  if (loadingProgress >= 0 && loadingProgress <= 100) {
-    return /* @__PURE__ */ jsx("div", {
-      className: areasViewerClasses.containerLinearProgress,
-      children: /* @__PURE__ */ jsx(LinearProgress, {
-        variant: "determinate",
-        value: loadingProgress
-      })
-    });
-  } else {
-    console.log("LoadingMF***************************************", loadingProgress);
+  try {
+    const {
+      loadingProgress
+    } = props;
+    if (loadingProgress >= 0 && loadingProgress <= 100) {
+      return /* @__PURE__ */ jsx("div", {
+        className: areasViewerClasses.containerLinearProgress,
+        children: /* @__PURE__ */ jsx(LinearProgress, {
+          variant: "determinate",
+          value: loadingProgress
+        })
+      });
+    } else {
+    }
+  } catch (error) {
   }
   return null;
 };
@@ -797,7 +874,6 @@ class ObservableLoaderMF {
     this.networkOperation = networkOperation;
     this.isRemote = isRemote;
     this.eventStatus = "progress";
-    console.log("ObservableLoaderMF constructor", this.host, scriptId);
     this.start = this.start.bind(this);
     this.subscribe = this.subscribe.bind(this);
     this.unsubscribe = this.unsubscribe.bind(this);
@@ -806,7 +882,6 @@ class ObservableLoaderMF {
     setTimeout(this.start, 100);
   }
   tryAgain() {
-    console.log("start tryAgain");
     if (this.eventStatus === "error") {
       setTimeout(this.start, 100);
       new Promise((resolve) => {
@@ -815,25 +890,20 @@ class ObservableLoaderMF {
         this.start();
       });
     }
-    console.log("end tryAgain");
   }
   async start() {
     let percentCompleted = 0;
     this.notify("progress", percentCompleted);
-    console.log("ObservableLoaderMF start", this.host);
     const manifest = await fetch(`${this.host}/manifest.json?rnd=${Math.random()}`).then((res) => res.json()).catch(() => {
-      console.debug("Error fetching manifest", `${this.host}/manifest.json`);
-      this.notify("error", 0);
+      setTimeout(() => this.notify("error", 0), 300);
       return void 0;
     });
-    console.log("ObservableLoaderMF cargado de manifest");
     if (!manifest) {
       return;
     }
     percentCompleted = 10;
     this.notify("progress", percentCompleted);
     const urlFile = `${this.host}/${manifest["src/index.tsx"]["file"]}?rnd=${Math.random()}`;
-    console.log("ObservableLoaderMF file", urlFile);
     const controller = new AbortController();
     const ret = await this.networkOperation({
       method: "GET",
@@ -870,7 +940,6 @@ class ObservableLoaderMF {
       script.type = "module";
       script.src = urlFile || "";
       script.onload = () => {
-        console.debug("Completed", new Date().getTime(), new Date().getTime() - startTime);
         this.notify("complete", 100);
       };
       document.head.appendChild(script);
@@ -891,7 +960,7 @@ class ObservableLoaderMF {
   notify(newEvent, progress) {
     this.eventStatus = newEvent;
     this.subscribers.forEach((subscriber) => {
-      subscriber(newEvent, progress);
+      setTimeout(() => subscriber(newEvent, progress), 1);
     });
   }
 }
@@ -907,7 +976,6 @@ const AreasLoadingError = (props) => {
   const {
     getLabel
   } = useModuleDictionary();
-  console.log("test status view", status);
   return /* @__PURE__ */ jsx("div", {
     className: areasViewerClasses.areasLoadingErrorRoot,
     children: status !== "error" ? /* @__PURE__ */ jsx("div", {
@@ -922,22 +990,22 @@ const AreasLoadingError = (props) => {
         variant: "h3",
         skeletonWidth: "100px",
         className: areasViewerClasses.areasLoadingErrorTitle,
-        children: getLabel(DICCTIONARY.area_error_title)
+        children: getLabel(getAreasDictionary(DICCTIONARY.area_error_title))
       }), /* @__PURE__ */ jsx(Typography, {
         variant: "subtitle",
         skeletonWidth: "100px",
         className: areasViewerClasses.areasLoadingErrorDescription,
-        children: getLabel(DICCTIONARY.area_error_description)
+        children: getLabel(getAreasDictionary(DICCTIONARY.area_error_description))
       }), /* @__PURE__ */ jsx("div", {
         className: areasViewerClasses.areasLoadingErrorDivider
       }), /* @__PURE__ */ jsx(Typography, {
         variant: "paragraph",
         skeletonWidth: "100px",
         className: areasViewerClasses.areasLoadingErrorTextAction,
-        children: getLabel(DICCTIONARY.area_error_recommendation)
+        children: getLabel(getAreasDictionary(DICCTIONARY.area_error_recommendation))
       }), /* @__PURE__ */ jsx(Button, {
         onClick: action,
-        children: getLabel(DICCTIONARY.area_error_intro)
+        children: getLabel(getAreasDictionary(DICCTIONARY.area_error_intro))
       })]
     })
   });
@@ -1026,20 +1094,17 @@ function MFLoader(props) {
     window[`observable_${prefix}_${moduleId}`]?.tryAgain();
   }, []);
   useEffect(() => {
-    const dsScript = {
+    const dsNowScript = {
       ...divScript
     };
     const observableDownload = (event, progress) => {
       setLoadingProgress(progress);
       setStatusLoader(event);
-      if (event === "complete") {
-        renderMicroFrontend(dsScript);
-      }
     };
     if (!window[`render_${prefix}_${moduleId}`]) {
       let observableLoaderMF;
       if (!window[`observable_${prefix}_${moduleId}`]) {
-        observableLoaderMF = new ObservableLoaderMF(final_host, dsScript.scriptId, networkOperation, !environment.isLocalhost);
+        observableLoaderMF = new ObservableLoaderMF(final_host, dsNowScript.scriptId, networkOperation, !environment.isLocalhost);
         window[`observable_${prefix}_${moduleId}`] = observableLoaderMF;
       } else {
         observableLoaderMF = window[`observable_${prefix}_${moduleId}`];
@@ -1047,13 +1112,17 @@ function MFLoader(props) {
       observableLoaderMF.subscribe(observableDownload);
     } else {
       setStatusLoader("complete");
-      renderMicroFrontend(dsScript);
     }
     return () => {
       window[`observable_${prefix}_${moduleId}`].unsubscribe(observableDownload);
-      cleanUp(dsScript);
+      cleanUp(dsNowScript);
     };
   }, [divScript]);
+  useEffect(() => {
+    if (statusLoader === "complete") {
+      renderMicroFrontend(divScript);
+    }
+  }, [statusLoader]);
   return /* @__PURE__ */ jsxs("div", {
     id: divScript.divContainerId,
     style: {
@@ -1097,8 +1166,7 @@ const Component = (props) => {
 };
 React__default.memo(Component);
 const WindowRoot = styled("div")`
-
-    inset:0;
+    inset: 0;
     position: absolute;
     display: flex;
     flex-direction: column;
@@ -1130,6 +1198,12 @@ const WindowRoot = styled("div")`
         margin-right: 24px;
         text-overflow: ellipsis;
     }
+
+    & .${areasViewerClasses.windowHeaderCancelHandle} {
+        display: flex;
+        cursor: default;
+    }
+
     // windowHeaderMainActions
     & .${areasViewerClasses.windowHeaderMainActions} {
         display: flex;
@@ -1137,13 +1211,15 @@ const WindowRoot = styled("div")`
         gap: 4px;
     }
 
-    
     // windowHeaderMainActions
     & .${areasViewerClasses.windowContent} {
         flex-grow: 1;
         position: relative;
     }
 
+    & .${areasViewerClasses.windowContent}.${areasViewerClasses.colapsed} {
+        display: none !important;
+    }
     // windowModalRoot
     & .${areasViewerClasses.windowModalRoot} {
         padding: 16px;
@@ -1160,37 +1236,29 @@ const WindowRoot = styled("div")`
         flex-direction: column;
     }
     // windowToastyContainer
-    & .${areasViewerClasses.windowToastyContainer}.${areasViewerClasses.success}  {
-    background-color: ${(props) => props.theme.palette.success.main}
+    & .${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
+    // windowToastyContainer
     & .${areasViewerClasses.windowToastyPin}.${areasViewerClasses.pinIn} {
         border: 1px solid red;
     }
 
-
-
     ${(props) => props.theme.components?.M4LAreasViewerWindow?.styleOverrides}
-
-    
 `;
 function Toasty(props) {
   const {
@@ -1198,7 +1266,6 @@ function Toasty(props) {
     toastyId
   } = props;
   const toasty = useAreasStore((state) => state.hashWindows[windowId].hashToasties[toastyId], shallow);
-  console.log("percentExecuted", toasty.percentExecuted, toasty.timer);
   const {
     pinToast: pinToasty,
     closeToast: closeToasty
@@ -1259,15 +1326,20 @@ function Toasties(props) {
 }
 const Window = (props) => {
   const {
-    emergeType,
-    windowId,
-    moduleId,
-    areaId
+    areaId,
+    windowId
   } = props;
-  const selected = useAreasStore((state) => emergeType === "layout" ? state.hashAreas[areaId].currentLayoutId : state.hashAreas[areaId].currentPopUpId) === windowId;
-  const viewMode = useAreasStore((state) => state.hashAreas[areaId].viewMode, shallow);
-  const singleId = useAreasStore((state) => state.hashAreas[areaId].singleId, shallow);
-  const wd = useAreasStore((state) => state.hashWindows[windowId], shallow);
+  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,
@@ -1279,19 +1351,14 @@ const Window = (props) => {
     toast
   } = useAreasStore((state) => state.windowActions, shallow);
   const {
-    selectWindowPopUp,
-    selectWindowLayout
-  } = useAreasStore((state) => state.areaActions);
+    selectLayout
+  } = useAreasStore((state) => state.areaActions, shallow);
   const {
     loadCookiesFromApi
-  } = useAreasStore((state) => state.windowActions);
+  } = useAreasStore((state) => state.windowActions, shallow);
   const onTouch = () => {
     if (!selected) {
-      if (emergeType === "popup") {
-        selectWindowPopUp(areaId, props.windowId);
-      } else if (emergeType === "layout") {
-        selectWindowLayout(areaId, props.windowId);
-      }
+      selectLayout(areaId, props.windowId);
     }
   };
   const windowTools = useMemo(() => ({
@@ -1312,16 +1379,16 @@ const Window = (props) => {
     }
   }), []);
   useEffect(() => {
-    if (viewMode === "multiple" && wd.status === "init") {
-      loadCookiesFromApi(windowId);
-    }
-    if (viewMode === "single" && wd.status === "init" && singleId === windowId) {
+    if (status === "init") {
       loadCookiesFromApi(windowId);
     }
-  }, [wd, viewMode, singleId]);
+  }, [status]);
+  if (status === void 0) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(WindowRoot, {
     role: "presentation",
-    className: clsx(areasViewerClasses.windowRoot, selected ? areasViewerClasses.selectedWindow : null, wd.loading ? areasViewerClasses.loading : null),
+    className: clsx(areasViewerClasses.windowRoot, selected ? areasViewerClasses.selectedWindow : null, loading ? areasViewerClasses.loading : null, emergeType === "popup" ? areasViewerClasses.windowPopupRoot : null, emergeType === "modal" ? areasViewerClasses.windowModalRoot : null),
     onMouseDown: onTouch,
     children: /* @__PURE__ */ jsxs("div", {
       className: areasViewerClasses.windowRootContainer,
@@ -1331,100 +1398,43 @@ const Window = (props) => {
         emergeType
       }), /* @__PURE__ */ jsx(Toasties, {
         windowId
-      }), /* @__PURE__ */ jsx("div", {
-        className: areasViewerClasses.windowContent,
-        children: wd.status === "init" ? /* @__PURE__ */ jsx(Fragment, {
-          children: "...Componente de carga"
-        }) : wd.winType === "microfrontend" ? /* @__PURE__ */ jsx(MemonizedMicroFrontend, {
+      }), /* @__PURE__ */ jsxs("div", {
+        className: clsx(
+          areasViewerClasses.windowContent
+        ),
+        children: [status === "init" ? /* @__PURE__ */ jsx(Fragment, {
+          children: "...Brucee porr analizar Componente de carga"
+        }) : null, status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(MemonizedMicroFrontend, {
           moduleId,
-          dynamicMFStore: wd.dynamicMFStore,
+          dynamicMFStore,
           windowTools,
-          ...wd.mfProps
+          ...mfProps
         }) : /* @__PURE__ */ jsx(Component, {
           moduleId,
-          dynamicMFStore: wd.dynamicMFStore,
+          dynamicMFStore,
           windowTools,
-          component: wd.component
-        })
+          component
+        }) : null]
       })]
     })
   });
 };
-const MemonizedWindow = React__default.memo(Window);
-const WindowPopUp = (props) => {
-  const {
-    areaId,
-    windowProps,
-    windowId
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  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();
-      },
-      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
-      })
-    })
-  });
-};
-const MemonizedWindowPopUp = React__default.memo(WindowPopUp);
+React__default.memo(Window);
 const ResponsiveGridLayout = WidthProvider(Responsive);
-const GridLayout = (props) => {
+const AreaGridLayout = (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 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 viewMode = useAreasStore((state) => state.hashAreas[areaId].viewMode, shallow);
+  const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId, shallow);
   const cols = useAreasStore((state) => state.hashAreas[areaId].cols, shallow);
   const {
-    onBreakpointsLayoutsChange
+    onBreakpointsLayoutsChange,
+    onContainerChange
   } = useAreasStore((state) => state.areaActions, shallow);
-  function onBreakpointChange(_newBreakpoint, _newCols) {
-  }
-  useEffect(() => {
-    setTimeout(() => {
-      window.dispatchEvent(new Event("resize"));
-    }, 100);
-  }, [viewMode, windowsLayouts]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     ResponsiveGridLayout,
     {
       autoSize: false,
@@ -1432,54 +1442,37 @@ const GridLayout = (props) => {
       measureBeforeMount: true,
       resizeHandles: ["nw", "se"],
       className: clsx(areasViewerClasses.areaGridLayout, `${areasViewerClasses.areaGridLayout}-${areaId}`),
-      layouts: breakPointsLayouts,
-      onLayoutChange: (currentLayouts, newAllLayouts) => onBreakpointsLayoutsChange(areaId, currentLayouts, newAllLayouts),
-      onBreakpointChange,
+      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", {
+            children: "Place holder"
+          });
+        }
+        console.debug("layoutItemRender window", hashLayoutItems, p.i, p.type);
+        return /* @__PURE__ */ jsx(Window, {
+          windowId: p.i,
+          areaId
+        });
+      },
       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);
+      containerMargin: [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
+      containerPadding: [PADDING_GRIDLAYOUT, PADDING_GRIDLAYOUT],
+      onContainerChange: (e) => {
+        onContainerChange(areaId, e);
       },
       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;
-      })]
+      maximizeId: maximizedId
     }
   );
 };
@@ -1488,10 +1481,12 @@ const PanelWindows = (props) => {
     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 maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId);
+  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
+  })), shallow);
   const {
     maximizeLayout
   } = useAreasStore((state) => state.areaActions);
@@ -1499,21 +1494,21 @@ const PanelWindows = (props) => {
     maximizeLayout(areaId, layoutId);
   };
   if (status === "loaded") {
-    if (mode !== "single" || windowsLayouts.length < 2) {
+    if (!maximizedId || hashLayoutItems.length < 2) {
       return null;
     }
     return /* @__PURE__ */ jsx("div", {
       className: areasViewerClasses.panelWindowsRoot,
-      children: windowsLayouts.map((l) => {
+      children: hashLayoutItems.map((kl) => {
         return /* @__PURE__ */ jsx("div", {
-          className: clsx(areasViewerClasses.panelWindowsButtonContainer, singleId === l.i ? areasViewerClasses.selected : null),
+          className: clsx(areasViewerClasses.panelWindowsButtonContainer, maximizedId === kl.i ? areasViewerClasses.selected : null),
           children: /* @__PURE__ */ jsx(IconButton, {
-            src: hashWindowsLayouts[l.i].url_icon,
+            src: kl.url_icon,
             size: "small",
-            onClick: () => onTouched(l.i),
-            tooltip: singleId !== l.i ? hashWindowsLayouts[l.i].title : void 0
+            onClick: () => onTouched(kl.i),
+            tooltip: maximizedId !== kl.i ? kl.title : void 0
           })
-        }, l.i);
+        }, kl.i);
       })
     });
   } else {
@@ -1524,20 +1519,21 @@ 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(GridLayout, {
+      status === "loaded" ? /* @__PURE__ */ jsx(AreaGridLayout, {
         areaId
       }) : /* @__PURE__ */ jsx(AreasLoadingError, {
         status,
         action: () => {
         }
       }),
-      /* @__PURE__ */ jsx(PanelWindows, {
+      isDesktop ? /* @__PURE__ */ jsx(PanelWindows, {
         areaId
-      })
+      }) : null
     ]
   });
 };
@@ -1548,25 +1544,11 @@ const Area = (props) => {
   } = 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
     })
@@ -1660,9 +1642,9 @@ function AreasViewer() {
       className: classesRoot,
       children: status === "loaded" ? areas.map((area) => {
         return /* @__PURE__ */ jsx(Area, {
-          areaId: area.id,
-          selected: currentArea === area.id
-        }, area.id);
+          areaId: area,
+          selected: currentArea === area
+        }, area);
       }) : /* @__PURE__ */ jsx(AreasLoadingError, {
         status,
         action: () => init()
@@ -1679,6 +1661,5 @@ function AreasViewer() {
 }
 export {
   AreasViewer as A,
-  areasViewerClasses as a,
   useAreasViewerUtilityClasses as u
 };