@m4l/components 0.1.76 → 0.1.77

package/components/areas/components/AreasViewer/{index.bf4191ea.js → index.9c2aaaeb.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.3406a6cb.js";
+import { useModuleDictionary, useEnvironment, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.fc5b7c2d.js";
+import "../../../mui_extended/Accordion/index.12b1339a.js";
+import { I as Icon } from "../../../Icon/index.ecb63e65.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 } from "../../../mui_extended/MenuActions/index.f5b1c022.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/Pager/index.435af0df.js";
 import "../../../mui_extended/Tab/index.9e2f6e34.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.dee85a61.js";
+import "../../../../contexts/RHFormContext/index.fe175bab.js";
+import "../../../GridLayout/index.4ba3767a.js";
+import { R as Responsive } from "../../../GridLayout/Responsive/index.a12a8cec.js";
+import { W as WidthProvider } from "../../../GridLayout/WidthProvider/index.8ff65909.js";
+import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.c8147e8e.js";
+import "../../../animate/index.1f8eadd4.js";
+import "framer-motion";
+import "../../../animate/LoadingScreen/index.1d0c4307.js";
+import "../../../animate/PropagateLoader/index.7fab43c8.js";
+import "../AreasAdmin/index.cc4cbf56.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.ac2b1fae.js";
+import "../../../HelperText/index.ef31df1f.js";
+import "../../../hook-form/RHFAutocompleteAsync/index.8b4ccc8d.js";
+import "../../../hook-form/RHFCheckbox/index.acef119c.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.5b080342.js";
+import "../../../hook-form/RHFTextField/index.e751dca7.js";
+import "../../../hook-form/RHFPeriod/index.5304e3bd.js";
+import "../../../Period/index.711db043.js";
+import "../../../CommonActions/components/Actions/index.3eba9d91.js";
+import { c as cjs } from "../../../../react-draggable.7abb5d0a.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index.9a9c79a4.js";
+import "../../../modal/index.a0978193.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../../../hook-form/RHFUpload/index.17e7f9eb.js";
-import "../../../DataGrid/index.ffaf000e.js";
+import "../../../hook-form/RHFUpload/index.25db0511.js";
+import "../../../DataGrid/index.545b492f.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import "../../../DynamicFilter/index.d7c03a61.js";
+import "../../../DynamicFilter/index.d7be0f37.js";
 import "yup";
-import "../../../../contexts/RHFormContext/index.fe175bab.js";
-import "../../../LanguagePopover/index.938c6675.js";
-import "../../../NavLink/index.21c8fd90.js";
+import "lodash";
+import "../../../LanguagePopover/index.0023d069.js";
+import "../../../NavLink/index.cd92eceb.js";
 import "../../../NoItemSelected/index.23dfc897.js";
-import "../../../ObjectLogs/index.a2709fc2.js";
+import "../../../ObjectLogs/index.f174c542.js";
 import "../../../../react-json-view.57125fcf.js";
-import "../../../PaperForm/index.5e1bc99f.js";
+import "../../../PaperForm/index.1bd86ee5.js";
 import "../../../Page/index.4237c241.js";
 import "../../../PropertyValue/index.8a1adf3e.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.c5ce0bad.js";
+import "../../../AppBar/index.71b38ee9.js";
+import "../../../AccountPopover/index.3a79c395.js";
 const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "root",
   "areaRoot",
@@ -102,6 +103,7 @@ const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "areaGridLayoutPanelContainer",
   "areaGridLayout",
   "areaGridLayoutPopupsContainer",
+  "areasWindowPopUpList",
   "windowRoot",
   "windowHeader",
   "windowHeaderContent",
@@ -125,6 +127,7 @@ const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "panelWindowsButtonContainer",
   "containerLinearProgress",
   "selected",
+  "colapsed",
   "selectedWindow",
   "isMobile",
   "loading",
@@ -148,6 +151,7 @@ const useAreasViewerUtilityClasses = (ownerState) => {
     areaGridLayoutPanelContainer: ["areaGridLayoutPanelContainer"],
     areaGridLayout: ["areaGridLayout"],
     areaGridLayoutPopupsContainer: ["areaGridLayoutPopupsContainer"],
+    areasWindowPopUpList: ["areasWindowPopUpList"],
     windowRoot: ["windowRoot"],
     windowRootContainer: ["windowRootContainer"],
     windowHeader: ["windowHeader"],
@@ -620,7 +624,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 +633,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);
@@ -678,23 +682,85 @@ function MainActions(props) {
     })
   });
 }
+const WindowPopUpsList = (props) => {
+  const {
+    areaId,
+    windowId
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const windowsPopUps = useAreasStore((state2) => state2.hashAreas[areaId].hashLayoutItems.filter((li) => state2.hashWindows[li].parentLayoutId === windowId && state2.hashWindows[li].emergeType === "popup").map((lim) => {
+    const w = state2.hashWindows[lim];
+    return {
+      i: w.windowId,
+      url_icon: w.url_icon,
+      title: w.title
+    };
+  }), shallow);
+  const state = useAreasStore((state2) => state2);
+  const theme = useTheme();
+  const {
+    maximizeLayout
+  } = useAreasStore((state2) => state2.areaActions);
+  const onTouched = (layoutId) => {
+    maximizeLayout(areaId, layoutId);
+  };
+  console.log("windowsPopUps", windowsPopUps);
+  console.log("areaId", areaId);
+  console.log("state", state);
+  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, colapsed] = 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, window2.colapsed];
   }, shallow);
   const {
     saveModuleCookies,
     resetModuleCookies
   } = useAreasStore((state) => state.windowActions, shallow);
+  const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId, shallow);
   const {
     maximizeLayout,
-    normalizeLayouts
+    normalizeLayouts,
+    colapseLayoutItem,
+    unColapseLayoutItem
   } = useAreasStore((state) => state.areaActions, shallow);
   const {
     host_static_assets,
@@ -702,6 +768,7 @@ function Header(props) {
   } = useEnvironment();
   const isDesktop = useResponsiveDesktop();
   const isSkeleton = useModuleSkeleton();
+  useModuleDictionary();
   const urlPrefix = `${host_static_assets}/${environment_assets}`;
   const menuActions = useMemo(() => {
     return getMenuActions({
@@ -719,12 +786,20 @@ function Header(props) {
     onClose && onClose(windowId);
   };
   const maxNormalize = () => {
-    if (singleId) {
+    if (maximizedId === windowId) {
       normalizeLayouts(areaId);
     } else {
       maximizeLayout(areaId, windowId);
     }
   };
+  const colapedToggle = () => {
+    console.log("Toggle", colapsed);
+    if (!colapsed) {
+      colapseLayoutItem(areaId, windowId);
+    } else {
+      unColapseLayoutItem(areaId, windowId);
+    }
+  };
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(SKTModuleHeader, {});
   }
@@ -741,11 +816,10 @@ function Header(props) {
         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, {
+      }), emergeType === "layout" ? /* @__PURE__ */ jsx(WindowPopUpsList, {
+        areaId,
+        windowId
+      }) : null, menuActions.length > 0 && /* @__PURE__ */ jsx(MenuActions, {
         arrowType: "no-arrow",
         marginTop: "12px!important",
         marginLeft: "14px!important",
@@ -758,6 +832,15 @@ function Header(props) {
           horizontal: "right"
         },
         menuActions
+      }), !colapsed && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(IconButton, {
+        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, {
+        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, {
         onClick: onCloseLocal,
         "aria-label": "click",
@@ -823,7 +906,7 @@ class ObservableLoaderMF {
     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");
@@ -922,22 +1005,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))
       })]
     })
   });
@@ -1097,8 +1180,7 @@ const Component = (props) => {
 };
 React__default.memo(Component);
 const WindowRoot = styled("div")`
-
-    inset:0;
+    inset: 0;
     position: absolute;
     display: flex;
     flex-direction: column;
@@ -1137,13 +1219,16 @@ const WindowRoot = styled("div")`
         gap: 4px;
     }
 
-    
     // windowHeaderMainActions
     & .${areasViewerClasses.windowContent} {
         flex-grow: 1;
         position: relative;
     }
 
+    & .${areasViewerClasses.windowContent}.${areasViewerClasses.colapsed} {
+        display: none !important;
+        prop1: juan;
+    }
     // windowModalRoot
     & .${areasViewerClasses.windowModalRoot} {
         padding: 16px;
@@ -1160,37 +1245,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 {
@@ -1259,15 +1336,21 @@ 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 colapsed = useAreasStore((state) => state.hashWindows[windowId]?.colapsed, shallow);
+  const dynamicMFStore = useAreasStore((state) => state.hashWindows[windowId]?.dynamicMFStore, shallow);
   const {
     setActions,
     getCookie,
@@ -1279,19 +1362,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 +1390,22 @@ const Window = (props) => {
     }
   }), []);
   useEffect(() => {
-    if (viewMode === "multiple" && wd.status === "init") {
+    if (status === "init") {
       loadCookiesFromApi(windowId);
     }
-    if (viewMode === "single" && wd.status === "init" && singleId === windowId) {
-      loadCookiesFromApi(windowId);
-    }
-  }, [wd, viewMode, singleId]);
+  }, [status]);
+  console.log(
+    `Window Render***#,selected:${selected}`,
+    moduleId,
+    status,
+    loading
+  );
+  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),
     onMouseDown: onTouch,
     children: /* @__PURE__ */ jsxs("div", {
       className: areasViewerClasses.windowRootContainer,
@@ -1331,100 +1415,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, colapsed ? areasViewerClasses.colapsed : null),
+        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].hashLayoutItems, shallow);
+  const layouts = useAreasStore((state) => state.hashAreas[areaId].layouts, shallow);
+  const colapsedItems = useAreasStore((state) => state.hashAreas[areaId].colapsedItems, 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(
+  console.debug("Window***", hashLayoutItems, layouts);
+  return /* @__PURE__ */ jsx(
     ResponsiveGridLayout,
     {
       autoSize: false,
@@ -1432,54 +1459,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),
+      layoutItemRender: (p) => {
+        console.debug("layoutItemRender window", hashLayoutItems, p.i, p.type);
+        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"
+          });
+        }
+        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],
+      containerMargin: [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
+      containerPadding: [PADDING_GRIDLAYOUT, PADDING_GRIDLAYOUT],
       draggableHandle: ".m4l_draggable_handle",
-      onWidthChange: () => {
-        console.log("onWidthChange", areaId);
+      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,
+      colapsedItems
     }
   );
 };
@@ -1488,10 +1498,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].hashLayoutItems.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 +1511,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 +1536,22 @@ const InnerForHooks = (props) => {
   const {
     areaId
   } = props;
+  const isDesktop = useResponsiveDesktop();
   const status = useAreasStore((state) => state.hashAreas[areaId].status);
+  console.debug("Area InnerForHooks***", 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 +1562,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 +1660,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 +1679,5 @@ function AreasViewer() {
 }
 export {
   AreasViewer as A,
-  areasViewerClasses as a,
   useAreasViewerUtilityClasses as u
 };