@m4l/components 0.1.77 → 0.1.78

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

@@ -13,11 +13,11 @@ import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.66529246.js";
 import { shallow } from "zustand/shallow";
 import React__default, { useMemo, useState, useCallback, useEffect } from "react";
 import clsx from "clsx";
-import { u as useAreasStore } from "../../hooks/useAreas/index.3406a6cb.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.fc5b7c2d.js";
-import "../../../mui_extended/Accordion/index.12b1339a.js";
-import { I as Icon } from "../../../Icon/index.ecb63e65.js";
+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";
@@ -27,10 +27,10 @@ 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 { M as MenuActions, a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.43a2e1ae.js";
 import "../../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../../mui_extended/Pager/index.435af0df.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 { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
 import { I as ICONS } from "../../icons.8266ccc8.js";
@@ -40,55 +40,55 @@ 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 { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
-import "../../../../contexts/ModalContext/index.dee85a61.js";
+import "../../../../contexts/ModalContext/index.e9a7ba4a.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 "../../../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.cc4cbf56.js";
+import "../AreasAdmin/index.43ecd998.js";
 import "../../../ScrollBar/index.bbe48f4d.js";
 import "zustand";
 import "react-hook-form";
-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 "../../../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.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 "../../../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.a0978193.js";
+import "../../../modal/index.00efea85.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../../../hook-form/RHFUpload/index.25db0511.js";
-import "../../../DataGrid/index.545b492f.js";
+import "../../../hook-form/RHFUpload/index.bed8573e.js";
+import "../../../DataGrid/index.9fb3e6a1.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import "../../../DynamicFilter/index.d7be0f37.js";
+import "../../../DynamicFilter/index.d1a2e2d1.js";
 import "yup";
 import "lodash";
-import "../../../LanguagePopover/index.0023d069.js";
-import "../../../NavLink/index.cd92eceb.js";
+import "../../../LanguagePopover/index.98b63dcb.js";
+import "../../../NavLink/index.a5dea6d3.js";
 import "../../../NoItemSelected/index.23dfc897.js";
-import "../../../ObjectLogs/index.f174c542.js";
+import "../../../ObjectLogs/index.d9d20b9d.js";
 import "../../../../react-json-view.57125fcf.js";
-import "../../../PaperForm/index.1bd86ee5.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.c5ce0bad.js";
-import "../../../AppBar/index.71b38ee9.js";
-import "../../../AccountPopover/index.3a79c395.js";
+import "../../../SideBar/index.2f497e6c.js";
+import "../../../AppBar/index.06858422.js";
+import "../../../AccountPopover/index.7e76dbb7.js";
 const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "root",
   "areaRoot",
@@ -109,6 +109,7 @@ const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "windowHeaderContent",
   "windowHeaderTitle",
   "windowHeaderMainActions",
+  "windowHeaderCancelHandle",
   "windowContent",
   "windowPopupRoot",
   "windowModalRoot",
@@ -157,6 +158,7 @@ const useAreasViewerUtilityClasses = (ownerState) => {
     windowHeader: ["windowHeader"],
     windowHeaderTitle: ["windowHeaderTitle"],
     windowHeaderMainActions: ["windowHeaderMainActions"],
+    windowHeaderCancelHandle: ["windowHeaderCancelHandle"],
     windowContent: ["windowContent"],
     windowLinearProgressRoot: ["windowLinearProgressRoot"],
     windowLinearProgressBar: ["windowLinearProgressBar"],
@@ -413,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
 }) => ({
@@ -671,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
@@ -691,25 +667,21 @@ const WindowPopUpsList = (props) => {
     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];
+  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 state = useAreasStore((state2) => state2);
   const theme = useTheme();
   const {
     maximizeLayout
-  } = useAreasStore((state2) => state2.areaActions);
+  } = useAreasStore((state) => state.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),
@@ -747,15 +719,29 @@ function Header(props) {
     windowId,
     emergeType
   } = props;
-  const [url_icon, title, moduleActions, onClose, version, windowOptions, colapsed] = 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, window2.colapsed];
+    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,
@@ -768,7 +754,6 @@ function Header(props) {
   } = useEnvironment();
   const isDesktop = useResponsiveDesktop();
   const isSkeleton = useModuleSkeleton();
-  useModuleDictionary();
   const urlPrefix = `${host_static_assets}/${environment_assets}`;
   const menuActions = useMemo(() => {
     return getMenuActions({
@@ -785,20 +770,21 @@ function Header(props) {
   const onCloseLocal = () => {
     onClose && onClose(windowId);
   };
-  const maxNormalize = () => {
+  const maxNormalize = (e) => {
     if (maximizedId === windowId) {
       normalizeLayouts(areaId);
     } else {
       maximizeLayout(areaId, windowId);
     }
+    e.stopPropagation();
   };
-  const colapedToggle = () => {
-    console.log("Toggle", colapsed);
+  const colapedToggle = (e) => {
     if (!colapsed) {
       colapseLayoutItem(areaId, windowId);
     } else {
       unColapseLayoutItem(areaId, windowId);
     }
+    e.stopPropagation();
   };
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(SKTModuleHeader, {});
@@ -814,55 +800,63 @@ function Header(props) {
         className: areasViewerClasses.windowHeaderTitle,
         variant: "h5",
         children: `${title}`
-      }), /* @__PURE__ */ jsx(MainActions, {
-        windowId
-      }), emergeType === "layout" ? /* @__PURE__ */ jsx(WindowPopUpsList, {
-        areaId,
-        windowId
-      }) : null, 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
-      }), !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",
-        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;
 };
@@ -880,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);
@@ -889,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) => {
@@ -898,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`);
       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",
@@ -953,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);
@@ -974,7 +960,7 @@ class ObservableLoaderMF {
   notify(newEvent, progress) {
     this.eventStatus = newEvent;
     this.subscribers.forEach((subscriber) => {
-      subscriber(newEvent, progress);
+      setTimeout(() => subscriber(newEvent, progress), 1);
     });
   }
 }
@@ -990,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", {
@@ -1109,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}`];
@@ -1130,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: {
@@ -1212,6 +1198,12 @@ const WindowRoot = styled("div")`
         margin-right: 24px;
         text-overflow: ellipsis;
     }
+
+    & .${areasViewerClasses.windowHeaderCancelHandle} {
+        display: flex;
+        cursor: default;
+    }
+
     // windowHeaderMainActions
     & .${areasViewerClasses.windowHeaderMainActions} {
         display: flex;
@@ -1227,7 +1219,6 @@ const WindowRoot = styled("div")`
 
     & .${areasViewerClasses.windowContent}.${areasViewerClasses.colapsed} {
         display: none !important;
-        prop1: juan;
     }
     // windowModalRoot
     & .${areasViewerClasses.windowModalRoot} {
@@ -1275,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
@@ -1349,7 +1339,6 @@ const Window = (props) => {
   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,
@@ -1394,18 +1383,12 @@ const Window = (props) => {
       loadCookiesFromApi(windowId);
     }
   }, [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, 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,
@@ -1416,7 +1399,9 @@ const Window = (props) => {
       }), /* @__PURE__ */ jsx(Toasties, {
         windowId
       }), /* @__PURE__ */ jsxs("div", {
-        className: clsx(areasViewerClasses.windowContent, colapsed ? areasViewerClasses.colapsed : null),
+        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, {
@@ -1440,9 +1425,8 @@ const AreaGridLayout = (props) => {
   const {
     areaId
   } = props;
-  const hashLayoutItems = useAreasStore((state) => state.hashAreas[areaId].hashLayoutItems, shallow);
+  const hashLayoutItems = useAreasStore((state) => state.hashAreas[areaId].layoutItemsIds, 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 maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId, shallow);
   const cols = useAreasStore((state) => state.hashAreas[areaId].cols, shallow);
@@ -1450,7 +1434,6 @@ const AreaGridLayout = (props) => {
     onBreakpointsLayoutsChange,
     onContainerChange
   } = useAreasStore((state) => state.areaActions, shallow);
-  console.debug("Window***", hashLayoutItems, layouts);
   return /* @__PURE__ */ jsx(
     ResponsiveGridLayout,
     {
@@ -1461,8 +1444,9 @@ const AreaGridLayout = (props) => {
       className: clsx(areasViewerClasses.areaGridLayout, `${areasViewerClasses.areaGridLayout}-${areaId}`),
       layouts,
       onLayoutChange: (layout, newLayouts) => onBreakpointsLayoutsChange(areaId, layout, newLayouts),
+      draggableHandle: ".m4l_draggable_handle",
+      draggableCancel: `.${areasViewerClasses.windowHeaderCancelHandle}`,
       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, {});
@@ -1472,6 +1456,7 @@ const AreaGridLayout = (props) => {
             children: "Place holder"
           });
         }
+        console.debug("layoutItemRender window", hashLayoutItems, p.i, p.type);
         return /* @__PURE__ */ jsx(Window, {
           windowId: p.i,
           areaId
@@ -1482,14 +1467,12 @@ const AreaGridLayout = (props) => {
       rowHeight: ROW_HEIGTH_GRIDLAYOUT,
       containerMargin: [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
       containerPadding: [PADDING_GRIDLAYOUT, PADDING_GRIDLAYOUT],
-      draggableHandle: ".m4l_draggable_handle",
       onContainerChange: (e) => {
         onContainerChange(areaId, e);
       },
       preventCollision: false,
       verticalCompact: true,
-      maximizeId: maximizedId,
-      colapsedItems
+      maximizeId: maximizedId
     }
   );
 };
@@ -1499,7 +1482,7 @@ const PanelWindows = (props) => {
   } = props;
   const status = useAreasStore((state) => state.hashAreas[areaId].status);
   const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId);
-  const hashLayoutItems = useAreasStore((state) => state.hashAreas[areaId].hashLayoutItems.map((key) => ({
+  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
@@ -1538,7 +1521,6 @@ const InnerForHooks = (props) => {
   } = 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: [