@m4l/components 3.0.0 → 3.0.2

package/components/areas/components/AreasViewer/{index.d45bfcd2.js → index-DfcpQwSl.js}

@@ -1,38 +1,39 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { a8 as WindowRoot, a9 as WrapperWindowModal, aa as AreasViewerRoot } from "../../../../styles/index.db9e7ddb.js";
+import { a8 as WindowRoot, a9 as WrapperWindowModal, aa as AreasViewerRoot } from "../../../../styles/index-C-MsxWtr.js";
 import { shallow } from "zustand/shallow";
 import React__default, { useMemo, useEffect } from "react";
 import clsx from "clsx";
-import { u as useAreasStore } from "../../hooks/useAreas/index.5a57ab76.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index-D6DaWBIP.js";
 import { generateUtilityClasses, Skeleton } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index.f77cc2ab.js";
-import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.66529246.js";
+import { g as getComponentUtilityClass } from "../../../../utils/index-DiMrtgIu.js";
+import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants-rqODZNZe.js";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.11d777bb.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { I as ICONS } from "../../icons.01fa3bcc.js";
-import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.7b6c1ee3.js";
-import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index.ca78fd37.js";
-import { I as Icon } from "../../../Icon/index.c06685f4.js";
-import { T as Typography } from "../../../mui_extended/Typography/index.8c0801e4.js";
-import { M as MFLoader } from "../../../MFLoader/index.6af7729c.js";
-import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.992ae7a3.js";
-import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.3d9ad0ad.js";
-import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../../../test/getNameDataTestId.0faeade8.js";
-import { c as createToaster, T as ToastContainer } from "../../../ToastContainer/index.c1657bde.js";
-import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.9edd84c3.js";
-import { w as withSizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index.2f762118.js";
-import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.24857a52.js";
+import { I as ICONS } from "../../icons-CwFr-alN.js";
+import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary-YUsP9beq.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index-OMq0pPK0.js";
+import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index-CTlvokQp.js";
+import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index-De7dpdBH.js";
+import { I as Icon } from "../../../Icon/index-CueLDD9j.js";
+import { T as Typography } from "../../../mui_extended/Typography/index-W88rbpsJ.js";
+import { M as MFLoader } from "../../../MFLoader/index-CCtU6zwR.js";
+import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index-DkE30fhm.js";
+import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index-22c6E7vK.js";
+import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock-CF-669v-.js";
+import { g as getNameDataTestId } from "../../../../test/getNameDataTestId-BaBTWhBr.js";
+import { c as createToaster, T as ToastContainer } from "../../../ToastContainer/index-DN3ZHpBT.js";
+import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index-spCQnOlk.js";
+import { w as withSizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index-BsKaLKRl.js";
+import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index-B7v5X9un.js";
 import { useLocation } from "react-router-dom";
-import { L as LoadingError } from "../../../LoadingError/index.765ff885.js";
-import { c as cjs } from "../../../../react-draggable.079122b0.js";
-import { R as ResizeableWindow } from "../../../Resizeable/index.df2f3bb8.js";
+import { L as LoadingError } from "../../../LoadingError/index-CXVOiscg.js";
+import { a as Draggable } from "../../../../react-draggable-DsCPdgQP.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index-BwQ6EKCK.js";
 const areasViewerClasses = generateUtilityClasses(
   AREAS_VIEWER_CLASS_NAME,
   [
+    /* elements */
     "root",
     "areaRoot",
     "areaGridLayoutPanelContainer",
@@ -58,6 +59,8 @@ const areasViewerClasses = generateUtilityClasses(
     "resizeHandle",
     "loaderContainer",
     "containerComponent",
+    /* states or variants of elements */
+    // 'active',
     "selected",
     "colapsed",
     "selectedWindow",
@@ -192,6 +195,7 @@ function getMenuActions(options) {
       onClick: () => saveModuleCookies(windowId),
       disabled: false,
       visibility: "normal",
+      /* dictionaryId: getAreasDictionary(DICCTIONARY.label_persist_module_cookies), */
       label: getLabel(getAreasDictionary(DICCTIONARY.label_persist_module_cookies)),
       key: "save_cookies"
     };
@@ -202,6 +206,7 @@ function getMenuActions(options) {
       disabled: false,
       visibility: "normal",
       label: getLabel(getAreasDictionary(DICCTIONARY.label_reset_module_cookies)),
+      /* dictionaryId: getAreasDictionary(DICCTIONARY.label_reset_module_cookies), */
       key: "reset_cookes"
     };
     menuActions.push(resetCookiesAction);
@@ -270,7 +275,7 @@ function Header(props) {
     shallow
   );
   const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId, shallow);
-  const colapsed = useAreasStore((state) => {
+  const collapsed = useAreasStore((state) => {
     const currentBreakpoint = state.hashAreas[areaId].currentBreakpoint;
     if (currentBreakpoint) {
       return state.hashAreas[areaId].layouts[currentBreakpoint].find((li) => li.i === windowId)?.colapsed;
@@ -308,8 +313,8 @@ function Header(props) {
     }
     e.stopPropagation();
   };
-  const colapedToggle = (e) => {
-    if (!colapsed) {
+  const collapsedToggle = (e) => {
+    if (!collapsed) {
       colapseLayoutItem(areaId, windowId);
     } else {
       unColapseLayoutItem(areaId, windowId);
@@ -323,10 +328,10 @@ function Header(props) {
     /* @__PURE__ */ jsx(LinearProgressIndeterminate, {}),
     /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowHeaderContent, children: [
       /* @__PURE__ */ jsx(Icon, { src: url_icon, size: "medium" }),
-      /* @__PURE__ */ jsx(Typography, { className: areasViewerClasses.windowHeaderTitle, variant: "h5", children: `${title}` }),
+      /* @__PURE__ */ jsx(Typography, { className: areasViewerClasses.windowHeaderTitle, variant: "h5", children: title }),
       /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowHeaderCancelHandle, children: [
-        !colapsed && /* @__PURE__ */ jsx(MainActions, { windowId }),
-        !colapsed && menuActions.length > 0 && /* @__PURE__ */ jsx(
+        !collapsed && /* @__PURE__ */ jsx(MainActions, { windowId }),
+        !collapsed && menuActions.length > 0 && /* @__PURE__ */ jsx(
           MemonizedMenuActions,
           {
             arrowType: "no-arrow",
@@ -338,7 +343,7 @@ function Header(props) {
             toolTip: getLabel(getAreasDictionary(DICCTIONARY.label_module_actions))
           }
         ),
-        !colapsed && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(
+        !collapsed && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(
           IconButton,
           {
             className: "m4l_draggableCancel",
@@ -356,12 +361,12 @@ function Header(props) {
           IconButton,
           {
             className: "m4l_draggableCancel",
-            onClick: colapedToggle,
+            onClick: collapsedToggle,
             "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}`,
+            src: !collapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.COLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.UNCOLPASE}`,
             tooltip: getLabel(
               getAreasDictionary(
-                !colapsed ? DICCTIONARY.label_collapse_window : DICCTIONARY.label_uncollapse_window
+                !collapsed ? DICCTIONARY.label_collapse_window : DICCTIONARY.label_uncollapse_window
               )
             )
           }
@@ -420,7 +425,8 @@ const Window = (props) => {
     close,
     startProgress,
     stopProgress,
-    setFnQueryClose
+    setFnQueryClose,
+    setWindowTitle
   } = useAreasStore((state) => state.windowActions, shallow);
   const { selectLayout } = useAreasStore((state) => state.areaActions, shallow);
   const { loadCookiesFromApi } = useAreasStore((state) => state.windowActions, shallow);
@@ -446,7 +452,8 @@ const Window = (props) => {
       setFnQueryClose: (fnQueryClose) => {
         setFnQueryClose(windowId, fnQueryClose);
       },
-      toast: createToaster(windowId)
+      toast: createToaster(windowId),
+      setWindowTitle: (title) => setWindowTitle(windowId, title)
     }),
     []
   );
@@ -480,34 +487,30 @@ const Window = (props) => {
       children: /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowRootContainer, children: [
         /* @__PURE__ */ jsx(Header, { areaId, windowId, emergeType }),
         /* @__PURE__ */ jsx(ToastContainer, { fixed: false, position: "top-center", containerId: windowId }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(
-              areasViewerClasses.windowContent
-            ),
-            children: [
-              status === "init" ? /* @__PURE__ */ jsx(Fragment, { children: "Cargando..." }) : null,
-              status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(
-                MemonizedMicroFrontend,
-                {
-                  moduleId,
-                  dynamicMFStore,
-                  windowTools,
-                  ...mfProps
-                }
-              ) : /* @__PURE__ */ jsx(
-                Component,
-                {
-                  moduleId,
-                  dynamicMFStore,
-                  windowTools,
-                  component
-                }
-              ) : null
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: clsx(areasViewerClasses.windowContent), children: [
+          status === "init" ? (
+            /* validar uso */
+            /* Todo: Validar agregar nuevo componente de carga. */
+            /* @__PURE__ */ jsx(Fragment, { children: "Cargando..." })
+          ) : null,
+          status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(
+            MemonizedMicroFrontend,
+            {
+              moduleId,
+              dynamicMFStore,
+              windowTools,
+              ...mfProps
+            }
+          ) : /* @__PURE__ */ jsx(
+            Component,
+            {
+              moduleId,
+              dynamicMFStore,
+              windowTools,
+              component
+            }
+          ) : null
+        ] })
       ] })
     }
   );
@@ -715,7 +718,7 @@ const WindowModal = (props) => {
   const isDesktop = useResponsiveDesktop();
   const DragabblePaperComponent = (_props) => {
     return /* @__PURE__ */ jsx(
-      cjs.exports,
+      Draggable,
       {
         handle: ".m4l_draggable_handle",
         bounds: "parent",

package/components/areas/contexts/AreasContext/{index.9edd84c3.js → index-spCQnOlk.js}

@@ -6,13 +6,13 @@ import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
 import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, EmitEvents } from "@m4l/core";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.d45bfcd2.js";
-import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.b232384d.js";
-import { c as createDynamicMFStore } from "../DynamicMFParmsContext/index.3d9ad0ad.js";
-import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
-import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints, c as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/index.24857a52.js";
+import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index-DfcpQwSl.js";
+import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index-Y6S0Q7TN.js";
+import { c as createDynamicMFStore } from "../DynamicMFParmsContext/index-22c6E7vK.js";
+import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary-YUsP9beq.js";
+import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints, c as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/index-B7v5X9un.js";
 import { debounce, cloneDeep } from "lodash";
-import { A as isEqualLayouts } from "../../../GridLayout/index.dd291886.js";
+import { z as isEqualLayouts } from "../../../GridLayout/index-DUfp2sP_.js";
 const PADDING_GRIDLAYOUT = 11;
 const MARGIN_GRIDLAYOUT = 11;
 const DEBOUCED_SAVE_TIME = 500;
@@ -33,6 +33,8 @@ const DEFAULT_AREA = {
   status: "init",
   zPopUpIndex: 0,
   layouts: DEFAULT_LAYOUTS,
+  // colapsedItems: {},
+  // windowsLayoutIds: [],
   layoutItemsIds: [],
   currentLayoutId: "",
   currentPopUpId: "",
@@ -41,7 +43,7 @@ const DEFAULT_AREA = {
   loadWindows: false
 };
 const addArea = (state) => {
-  const areaId = `area_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
+  const areaId = `area_${(/* @__PURE__ */ new Date()).getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
   const labelNewArea = state.getLabel(getAreasDictionary(DICCTIONARY.label_new_area));
   let isFree;
   let name = `${labelNewArea} 1`;
@@ -139,7 +141,9 @@ function getDataFromResponse(data, state, areaId) {
   if (windows) {
     for (const key in windows) {
       const element = windows[key];
-      if (element && element["mfProps"] && element["emergeType"] === "layout" && element["winType"] === "microfrontend") {
+      if (element && // element['layoutProps'] && //Garantizar que venga con los LayoutProps de la venta
+      element["mfProps"] && //Garantizar que venga con los mfProps de la venta
+      element["emergeType"] === "layout" && element["winType"] === "microfrontend") {
         newWindowsLayoutsIds.push(key);
         const onClose = state.areaActions.closeLayout;
         state.hashWindows[key] = {
@@ -181,6 +185,7 @@ function getDataFromResponse(data, state, areaId) {
   return {
     newBreakPointsLayouts,
     newHashLayoutItems
+    // baseResponsiveLayoutItems,
   };
 }
 function getCookiesContainer(data, containerId) {
@@ -244,6 +249,7 @@ const createAreasStore = (initProps) => {
                       ...DEFAULT_AREA,
                       ...response.data[i],
                       loadWindows: true
+                      //Se indica que si se carguen las ventas debido a que viene de la API
                     };
                     state.hashAreas[newArea.id] = newArea;
                     state.areasIds.push(newArea.id);
@@ -338,8 +344,7 @@ const createAreasStore = (initProps) => {
                 });
               }
             }
-            if (get().hashAreas[areaId].maximizedId !== void 0)
-              ;
+            if (get().hashAreas[areaId].maximizedId !== void 0) ;
           },
           setHandlerGetLabel: (newHandler) => {
             set((state) => {
@@ -355,7 +360,7 @@ const createAreasStore = (initProps) => {
         },
         areaActions: {
           addWindow: (newWindowProps) => {
-            const windowId = `${get().currentAreaId}_window_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
+            const windowId = `${get().currentAreaId}_window_${(/* @__PURE__ */ new Date()).getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
             if (newWindowProps.emergeType === "layout" || newWindowProps.emergeType === "popup") {
               get().areaActions.addLayout(get().currentAreaId, windowId, newWindowProps);
             } else if (newWindowProps.emergeType === "modal") {
@@ -364,7 +369,7 @@ const createAreasStore = (initProps) => {
           },
           addLayout: (areaId, windowId, newWindowProps) => {
             let previousId = windowId;
-            const freeMove = newWindowProps.emergeType === "popup" ? true : false;
+            const freeMove = newWindowProps.emergeType === "popup";
             const newLayoutItem = {
               ...newWindowProps.layoutProps,
               i: windowId,
@@ -472,6 +477,7 @@ const createAreasStore = (initProps) => {
                   title: true,
                   url_icon: true,
                   windowOptions: true,
+                  // layoutProps: false,
                   moduleId: true,
                   windowId: true,
                   mfProps: true
@@ -626,8 +632,7 @@ const createAreasStore = (initProps) => {
           maximizeLayout: (areaId, layoutId) => {
             set((state) => {
               const area = state.hashAreas[areaId];
-              if (!area)
-                return;
+              if (!area) return;
               area.maximizedId = layoutId;
               const index = area.layouts["xxs"]?.findIndex((li) => li.i === area.maximizedId);
               if (index !== void 0 && index > -1 && layoutId && state.hashWindows[layoutId].emergeType === "popup") {
@@ -642,8 +647,7 @@ const createAreasStore = (initProps) => {
           normalizeLayouts: (areaId) => {
             set((state) => {
               const area = state.hashAreas[areaId];
-              if (!area)
-                return;
+              if (!area) return;
               if (area.maximizedId) {
                 const index = area.layouts["xxs"]?.findIndex((li) => li.i === area.maximizedId);
                 if (index !== void 0 && index > -1 && state.hashWindows[area.maximizedId].emergeType === "popup") {
@@ -676,6 +680,7 @@ const createAreasStore = (initProps) => {
               parms: { f: [{ n: "container_id", o: "e", o1: areaId }] },
               toastSuccess: false,
               toastError: false
+              // isRemote: false
             }).then((response) => {
               const area2 = get().hashAreas[areaId];
               if (!area2) {
@@ -698,6 +703,158 @@ const createAreasStore = (initProps) => {
               });
             });
           }
+          // addWindowLayoutPendiente: (
+          //     areaId: string,
+          //     windowId: string,
+          //     newWindow: NewLayoutMagnetizableProps,
+          // ) => {
+          //     const newLayoutItem: WinLayoutItem = {
+          //         ...newWindow.layoutProps,
+          //         i: windowId,
+          //         isDraggable: true,
+          //         isResizable: true,
+          //         winType: newWindow.winType,
+          //         freeMove: false,
+          //     };
+          //     set(state => {
+          //         const area = state.hashAreas[areaId];
+          //         if (!area) {
+          //             return;
+          //         }
+          //         const dynamicMFStore = createDynamicMFStore({
+          //             dynamicMFParameters: newWindow.dynamicParams,
+          //             windowId,
+          //         });
+          //         area.windowsLayouts.push(newLayoutItem);
+          //         area.hashWindowsLayouts[windowId] = {
+          //             ...newWindow,
+          //             areaId,
+          //             windowId,
+          //             emergeType: 'layout',
+          //             onClose: (removeLayoutId: string) => {
+          //                 get().areaActions.closeWindowLayout(areaId, removeLayoutId);
+          //             },
+          //             ...DEFAULT_WINDOW,
+          //             dynamicMFStore,
+          //         };
+          //         area.baseResponsivelayoutItems.push({ i: windowId });
+          //         //Agregar la ventana al hash general de todas las ventanas
+          //         state.hashWindows[windowId] = area.hashWindowsLayouts[windowId];
+          //         setAddBreakPoints(area, newLayoutItem);
+          //     });
+          //     get().areaActions.selectLayout(areaId, windowId);
+          //     if (
+          //         get().hashAreas[areaId].viewMode === 'single' ||
+          //         newWindow?.openType === 'maximized'
+          //     ) {
+          //         get().areaActions.maximizeLayout(areaId, windowId);
+          //     }
+          //     get().areaActions.saveLayouts(areaId);
+          //     get().areaActions.bouncedSaveBreakpointsLayouts(areaId);
+          // },
+          // closeLayout: (areaId: string, removePopUpId: string) => {
+          //     set(state => {
+          //         const area = state.hashAreas[areaId];
+          //         if (!area) {
+          //             return;
+          //         }
+          //         const removeIndex = area.windowsPopUps.findIndex(
+          //             wpId => wpId === removePopUpId,
+          //         );
+          //         if (removeIndex > -1) {
+          //             area.windowsPopUps.splice(removeIndex, 1);
+          //         }
+          //         delete area.hashWindowsPopups[removePopUpId];
+          //         delete state.hashWindows[removePopUpId];
+          //     });
+          // },
+          // selectWindowPopUp: (areaId: string, popUpId: string) => {
+          //     set(state => {
+          //         state.hashAreas[areaId].zPopUpIndex++;
+          //         state.hashAreas[areaId].currentPopUpId = popUpId;
+          //         state.hashAreas[areaId].zPopUpIndex++;
+          //         state.hashAreas[areaId].currentPopUpId = popUpId;
+          //         state.hashAreas[areaId].hashWindowsPopups[popUpId].zIndex =
+          //             state.hashAreas[areaId].zPopUpIndex;
+          //         //Seleccionar el layout padre si lo tiene
+          //         if (
+          //             state.hashAreas[areaId].hashWindowsPopups[popUpId].parentLayoutId &&
+          //             state.hashAreas[areaId].hashWindowsPopups[popUpId]
+          //                 .parentLayoutId !== ''
+          //         ) {
+          //             state.hashAreas[areaId].currentLayoutId =
+          //                 state.hashAreas[areaId].hashWindowsPopups[
+          //                     popUpId
+          //                 ].parentLayoutId;
+          //         } else {
+          //             state.hashAreas[areaId].currentLayoutId = '';
+          //         }
+          //     });
+          //     //Enfocar el componente despues de la renderización.
+          //     setTimeout(() => {
+          //         //Asegurar visibilidad si es un reemplazo
+          //         const container = document.getElementsByClassName(
+          //             `${areasViewerClasses.areaGridLayoutPanelContainer}-${areaId}`,
+          //         )[0];
+          //         const element = document.getElementsByClassName(
+          //             `${areasViewerClasses.windowPopupRoot}-${popUpId}`,
+          //         )[0]; //`M4L_WindowPopUp_${popUpId}`,
+          //         //TODO: Proteeccion de los vectores
+          //         if (element && container) {
+          //             const { top, left } = element.getBoundingClientRect();
+          //             const { top: containerTop, left: containerLeft } =
+          //                 container.getBoundingClientRect();
+          //             container.scrollTop = container.scrollTop + top - containerTop;
+          //             container.scrollLeft = container.scrollLeft + left - containerLeft;
+          //         }
+          //     }, 100);
+          //     // windowsPopUps.findIndex(wp => wp.container_id === lookForThisId) > -1) {
+          //     // setSelectedWindow(newSeletectedId);
+          // },
+          // resizeMaximixedLayout: (areaId: string) => {
+          //     set(state => {
+          //         const area = state.hashAreas[areaId];
+          //         if (!area) return;
+          //         if (areaId !== state.currentAreaId) {
+          //             return;
+          //         }
+          //         if (area.viewMode === 'single' && area.currentLayoutId !== '') {
+          //             console.log('Rezigning', areaId);
+          //             const layoutsBreakPoints = area.layouts;
+          //             const container = document.getElementsByClassName(
+          //                 `${areasViewerClasses.areaGridLayout}-${area.id}`,
+          //             )[0];
+          //             window.dispatchEvent(new Event('resize'));
+          //             for (const key in layoutsBreakPoints) {
+          //                 const layoutBreakpoint = layoutsBreakPoints[key];
+          //                 if (layoutBreakpoint) {
+          //                     const clientHeight = container.clientHeight;
+          //                     //Formula que sale de despejar de acuerdo al grid layout en el codigo fuente: heigthpx = colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx
+          //                     const heigthUnits =
+          //                         (clientHeight +
+          //                             MARGIN_GRIDLAYOUT -
+          //                             2 * PADDING_GRIDLAYOUT) /
+          //                         (ROW_HEIGTH_GRIDLAYOUT + MARGIN_GRIDLAYOUT);
+          //                     for (
+          //                         let index = 0;
+          //                         index < layoutBreakpoint.length;
+          //                         index++
+          //                     ) {
+          //                         const l = layoutBreakpoint[index];
+          //                         if (l.i === area.currentLayoutId) {
+          //                             l.h = heigthUnits;
+          //                             l.maxH = heigthUnits;
+          //                         }
+          //                     }
+          //                 }
+          //             }
+          //         }
+          //         //TODO: Corregir cuando arranca en celular,
+          //         // no se han cargado las ventanas y no se puede encontrar
+          //         // Adicionalmente no se ha posicionado el panelWindows, y calcula
+          //         // state.cols = MAXIMIZED_COLS;
+          //     });
+          // },
         },
         windowActions: {
           setActions: (windowId, newActions, version) => {
@@ -786,6 +943,7 @@ const createAreasStore = (initProps) => {
                   },
                   toastSuccess: false,
                   toastError: false
+                  // isRemote: false
                 }).then((response) => {
                   set((state) => {
                     const hWs = state.hashWindows[windowId];
@@ -849,6 +1007,11 @@ const createAreasStore = (initProps) => {
             set((state) => {
               state.hashWindows[windowId].fnQueryClose = fnQueryClose;
             });
+          },
+          setWindowTitle: (windowId, title) => {
+            set((state) => {
+              state.hashWindows[windowId].title = title;
+            });
           }
         },
         areaAdminActions: {
@@ -886,6 +1049,7 @@ function AreasProvider(props) {
         isSkeleton,
         focus: false
       }
+      // onLoad,
     });
     areasStoreRef.current?.getState().areasActions.init();
   }

package/components/areas/contexts/AreasContext/types.d.ts

@@ -205,6 +205,7 @@ export interface AreasStateWithActions extends AreasState {
         saveModuleCookies: (windowId: string) => void;
         resetModuleCookies: (windowId: string) => void;
         setFnQueryClose: (windowId: string, fnQueryClose: () => void) => void;
+        setWindowTitle: (windowId: string, title: string) => void;
     };
     areaAdminActions: {
         setFocus: (value: boolean) => void;

package/components/areas/contexts/WindowToolsMFContext/types.d.ts

@@ -57,6 +57,11 @@ export interface WindowToolsMF {
      * @param fnQueryClose La función de consulta de cierre de la ventana que se desea establecer.
      */
     setFnQueryClose: (fnQueryClose: () => void) => void;
+    /**
+     * Método para setear el titulo de la ventana y que pueda cambiar de idioma
+     * @param {string} title Titulo que se visulizará en la ventana del módulo
+     */
+    setWindowTitle: (title: string) => void;
 }
 /**
  * Props del componente WindowToolsMFProvider que incluyen las herramientas de ventana proporcionadas por la interfaz WindowToolsMF.

package/components/areas/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { useDynamicMFParametersStore } from './useDynamicMFParameters';
 export { useWindowToolsMF } from './useWindowToolsMF';
+export { useSetWindowsTitle } from './useSetWindowsTitle';

package/components/areas/hooks/useAreas/{index.5a57ab76.js → index-D6DaWBIP.js}

@@ -1,10 +1,9 @@
 import { useContext } from "react";
 import { useStore } from "zustand";
-import { b as AreasContext } from "../../contexts/AreasContext/index.9edd84c3.js";
+import { b as AreasContext } from "../../contexts/AreasContext/index-spCQnOlk.js";
 function useAreasStore(selector, equalityFn) {
   const context = useContext(AreasContext);
-  if (!context)
-    throw new Error("useAreasStore context must be use inside AreasContext");
+  if (!context) throw new Error("useAreasStore context must be use inside AreasContext");
   return useStore(context, selector, equalityFn);
 }
 export {

package/components/areas/hooks/useDynamicMFParameters/{index.9e09e1e3.js → index-DhbcZPs9.js}

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { useStore } from "zustand";
-import { a as DynamicMFParmsContext } from "../../contexts/DynamicMFParmsContext/index.3d9ad0ad.js";
+import { a as DynamicMFParmsContext } from "../../contexts/DynamicMFParmsContext/index-22c6E7vK.js";
 function useDynamicMFParametersStore(selector, equalityFn) {
   const store = useContext(DynamicMFParmsContext);
   if (!store)

package/components/areas/hooks/useSetWindowsTitle/index.d.ts

@@ -0,0 +1 @@
+export * from './useSetWindowsTitle';

package/components/areas/hooks/useSetWindowsTitle/useSetWindowsTitle-BzPD-miW.js

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { shallow } from "zustand/shallow";
+import { useFlagsPresent, CommonFlags, useModuleDictionary } from "@m4l/core";
+import { u as useWindowToolsMF } from "../useWindowToolsMF/index-BECQfhbC.js";
+import { u as useDynamicMFParametersStore } from "../useDynamicMFParameters/index-DhbcZPs9.js";
+const titleLabels = {
+  moduleName: "module_name",
+  moduleNameAdd: "module_name_add",
+  moduleNameEdit: "module_name_edit"
+};
+function useSetWindowsTitle({
+  isAddEditModule = false
+} = {}) {
+  const isFlagPresent = useFlagsPresent([CommonFlags.FLAG_DICTIONARY_LOADED]);
+  const { getLabel } = useModuleDictionary();
+  const { setWindowTitle } = useWindowToolsMF();
+  const id = useDynamicMFParametersStore(
+    // objectId or id  puede ser el nombre del parametro del con el Id que se está editando en los modulos add/edit
+    (state) => state.dynamicMFParameters?.objectId || state.dynamicMFParameters?.id,
+    shallow
+  );
+  useEffect(() => {
+    if (isFlagPresent) {
+      const labelKey = isAddEditModule ? id ? titleLabels.moduleNameEdit : titleLabels.moduleNameAdd : titleLabels.moduleName;
+      setWindowTitle(getLabel(labelKey));
+    }
+  }, [getLabel, isFlagPresent]);
+}
+export {
+  useSetWindowsTitle as u
+};

package/components/areas/hooks/useSetWindowsTitle/useSetWindowsTitle.d.ts

@@ -0,0 +1,3 @@
+export declare function useSetWindowsTitle({ isAddEditModule, }?: {
+    isAddEditModule?: boolean;
+}): void;

package/components/areas/hooks/useWindowToolsMF/{index.2fbae9dc.js → index-BECQfhbC.js}

@@ -1,9 +1,8 @@
 import { useContext } from "react";
-import { a as WindowToolsMFContext } from "../../contexts/WindowToolsMFContext/index.992ae7a3.js";
+import { a as WindowToolsMFContext } from "../../contexts/WindowToolsMFContext/index-DkE30fhm.js";
 const useWindowToolsMF = () => {
   const context = useContext(WindowToolsMFContext);
-  if (!context)
-    throw new Error("useWindowToolsMF context must be use inside WindowToolsMFContext");
+  if (!context) throw new Error("useWindowToolsMF context must be use inside WindowToolsMFContext");
   return context;
 };
 export {