@m4l/components 3.1.7 → 3.1.8

package/components/areas/contexts/AreasContext/index-BqRlA7JA.js

@@ -1,1110 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { createContext, useRef, useCallback, useEffect } from "react";
-import { createStore, useStore } from "zustand";
-import { shallow } from "zustand/shallow";
-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-DQ0aPioP.js";
-import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index-OxQU3P8Y.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-BKcU2OnF.js";
-import { debounce, cloneDeep } from "lodash";
-import { z as isEqualLayouts } from "../../../GridLayout/index-C4HyxNYX.js";
-const PADDING_GRIDLAYOUT = 11;
-const MARGIN_GRIDLAYOUT = 11;
-const DEBOUCED_SAVE_TIME = 500;
-const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";
-const COOKIE_WINDOWS = "windows";
-const BREAKPOINT_SIZES = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 1 };
-const NORMALIZED_COLS = { lg: 64, md: 48, sm: 32, xs: 24, xxs: 1 };
-const DEFAULT_LAYOUTS = { lg: [], md: [], sm: [], xs: [], xxs: [] };
-const RESPONSIVE_COLAPSED_HEIGHTS = { xxs: 48, xs: 48, sm: 40, md: 40, lg: 40 };
-const RESPONSIVE_ROW_HEIGHTS = { xxs: 48, xs: 48, sm: 48, md: 40, lg: 40 };
-const DEFAULT_WINDOW = {
-  status: "init",
-  moduleActions: [],
-  cookies: { moduleCookies: {}, windowCookies: {} },
-  loading: false
-};
-const DEFAULT_AREA = {
-  status: "init",
-  zPopUpIndex: 0,
-  layouts: DEFAULT_LAYOUTS,
-  // colapsedItems: {},
-  // windowsLayoutIds: [],
-  layoutItemsIds: [],
-  currentLayoutId: "",
-  currentPopUpId: "",
-  breakpoints: BREAKPOINT_SIZES,
-  cols: NORMALIZED_COLS,
-  loadWindows: false
-};
-const addArea = (state) => {
-  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`;
-  for (let indexNames = 1; indexNames <= state.areasIds.length + 1; indexNames++) {
-    name = `${labelNewArea} ${indexNames + state.areasIds.length}`;
-    isFree = true;
-    for (let index = 0; index < state.areasIds.length; index++) {
-      if (state.hashAreas[state.areasIds[index]].name === name) {
-        isFree = false;
-        break;
-      }
-    }
-    if (isFree) {
-      break;
-    }
-  }
-  const newArea = {
-    id: areaId,
-    name,
-    ...DEFAULT_AREA
-  };
-  state.areasIds.push(areaId);
-  state.hashAreas[areaId] = newArea;
-  state.currentModuleId = "";
-  if (state.loadAreasFromNetwork) {
-    state.networkOperation({
-      method: "POST",
-      endPoint: `areas`,
-      data: { id: areaId, name },
-      toastSuccess: false,
-      toastError: false
-    });
-  }
-  return areaId;
-};
-const updateOwnerStateClasses = (state) => {
-  state.viwerClasses = useAreasViewerUtilityClasses(state.ownerState);
-  state.adminClasses = useAreasAdminUtilityClasses(state.ownerState);
-};
-const getParmsFromValue = (key, data) => {
-  try {
-    if (Array.isArray(data)) {
-      let ob = data.find((f) => f.id === key);
-      if (ob) {
-        ob = JSON.parse(ob.value);
-      }
-      return ob;
-    }
-  } catch (error) {
-  }
-  return void 0;
-};
-function setColapsedLayoutBreakPoints(state, layoutId, colapsed) {
-  const layoutsBreakPoints = state.layouts;
-  for (const key in layoutsBreakPoints) {
-    const layoutBreakpoint = layoutsBreakPoints[key];
-    const index = layoutBreakpoint.findIndex((lb) => lb.i === layoutId);
-    if (index > -1) {
-      if (key !== "xxs") {
-        layoutBreakpoint[index].colapsed = colapsed;
-      } else {
-        if (!layoutBreakpoint[index].freeMove) {
-          layoutBreakpoint[index].colapsed = colapsed;
-        }
-      }
-    }
-  }
-}
-function deleteLayoutFromBreakPoints(state, layoutId) {
-  const layoutsBreakPoints = state.layouts;
-  for (const key in layoutsBreakPoints) {
-    const layoutBreakpoint = layoutsBreakPoints[key];
-    for (let index = 0; index < layoutBreakpoint.length; index++) {
-      const l = layoutBreakpoint[index];
-      if (l.i === layoutId) {
-        layoutBreakpoint.splice(index, 1);
-        break;
-      }
-    }
-  }
-}
-function getDataFromResponse(data, state, areaId) {
-  let newBreakPointsLayouts = getParmsFromValue(COOKIE_BREAKPOINT_LAYOUTS, data);
-  const windows = getParmsFromValue(COOKIE_WINDOWS, data);
-  const newWindowsLayoutsIds = [];
-  const newHashLayoutItems = [];
-  if (!newBreakPointsLayouts) {
-    newBreakPointsLayouts = {};
-  }
-  for (const breakPoint in BREAKPOINT_SIZES) {
-    if (!newBreakPointsLayouts[breakPoint]) {
-      newBreakPointsLayouts[breakPoint] = [];
-    }
-  }
-  if (windows) {
-    for (const key in windows) {
-      const element = windows[key];
-      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] = {
-          ...DEFAULT_WINDOW,
-          ...element,
-          windowId: key,
-          emergeType: "layout",
-          areaId,
-          dynamicMFStore: createDynamicMFStore({
-            dynamicMFParameters: element.dynamicParams,
-            windowId: key
-          }),
-          onClose: () => onClose(areaId, key)
-        };
-        newHashLayoutItems.push(key);
-        for (const breakPoint in BREAKPOINT_SIZES) {
-          addLayoutItemToBreakPointIfNoExists(
-            newBreakPointsLayouts,
-            breakPoint,
-            { i: element.windowId, x: 0, y: 0, w: 5, h: 5 },
-            NORMALIZED_COLS,
-            [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
-            [PADDING_GRIDLAYOUT, PADDING_GRIDLAYOUT],
-            RESPONSIVE_ROW_HEIGHTS
-          );
-        }
-      }
-    }
-    for (const breakPoint in BREAKPOINT_SIZES) {
-      newBreakPointsLayouts[breakPoint] = newBreakPointsLayouts[breakPoint].filter((li) => {
-        return newWindowsLayoutsIds.indexOf(li.i) > -1;
-      });
-    }
-  } else {
-    for (const breakPoint in BREAKPOINT_SIZES) {
-      newBreakPointsLayouts[breakPoint] = [];
-    }
-  }
-  return {
-    newBreakPointsLayouts,
-    newHashLayoutItems
-    // baseResponsiveLayoutItems,
-  };
-}
-function getCookiesContainer(data, containerId) {
-  const cookies = {};
-  try {
-    if (Array.isArray(data)) {
-      for (let i = 0; i < data.length; i++) {
-        if (data[i]?.container_id === containerId && data[i]?.id) {
-          cookies[data[i]?.id] = JSON.parse(data[i].value);
-        }
-      }
-    }
-  } catch (error) {
-  }
-  return cookies;
-}
-const createAreasStore = (initProps) => {
-  const startProps = {
-    viwerClasses: useAreasViewerUtilityClasses(initProps.ownerState),
-    adminClasses: useAreasAdminUtilityClasses(initProps.ownerState),
-    currentAreaId: "",
-    currentModuleId: "",
-    areasIds: [],
-    hashAreas: {},
-    hashWindows: {},
-    hashWindowsModals: {},
-    windowsModals: [],
-    ...initProps
-  };
-  return createStore(
-    devtools(
-      immer((set, get) => ({
-        ...startProps,
-        areasActions: {
-          init: () => {
-            if (get().ownerState.status !== "init") {
-              return;
-            }
-            if (!get().loadAreasFromNetwork) {
-              get().areasActions.addArea();
-              set((state) => {
-                state.ownerState.status = "loaded";
-                updateOwnerStateClasses(state);
-              });
-              return;
-            }
-            set((state) => {
-              state.ownerState.status = "loading";
-              updateOwnerStateClasses(state);
-            });
-            get().networkOperation({
-              method: "GET",
-              endPoint: `areas`,
-              parms: {},
-              toastSuccess: false
-            }).then((response) => {
-              set((state) => {
-                if (response?.data && Array.isArray(response.data) && response.data.length > 0) {
-                  for (let i = 0; i < response.data.length; i++) {
-                    const newArea = {
-                      ...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);
-                  }
-                } else {
-                  addArea(state);
-                }
-              });
-            }).finally(() => {
-              set((state) => {
-                state.ownerState.status = "loaded";
-                updateOwnerStateClasses(state);
-              });
-              if (get().areasIds.length > 0 && get().currentAreaId === "") {
-                get().areasActions.selectArea(get().areasIds[0]);
-              }
-            });
-          },
-          addArea: () => {
-            let newId = "";
-            set((state) => {
-              newId = addArea(state);
-            });
-            get().areasActions.selectArea(newId);
-            return newId;
-          },
-          editArea: (areaId, newName) => {
-            set((state) => {
-              if (state.hashAreas[areaId]) {
-                state.hashAreas[areaId].name = newName;
-                if (state.loadAreasFromNetwork) {
-                  state.networkOperation({
-                    method: "PATCH",
-                    endPoint: `areas/${areaId}`,
-                    data: { name: newName },
-                    toastSuccess: false,
-                    toastError: false
-                  });
-                }
-              }
-            });
-          },
-          deleteArea: (areaId) => {
-            let selectNewAreaId = "";
-            set((state) => {
-              const ha = state.hashAreas[areaId];
-              if (!ha || state.areasIds.length < 2) {
-                return;
-              }
-              const removeIndex = state.areasIds.indexOf(areaId);
-              if (removeIndex > -1) {
-                for (const key in state.hashWindows) {
-                  if (state.hashWindows[key].areaId === areaId) {
-                    delete state.hashWindows[key];
-                  }
-                }
-                state.areasIds.splice(removeIndex, 1);
-                delete state.hashAreas[areaId];
-              }
-              if (state.currentAreaId === areaId) {
-                selectNewAreaId = state.areasIds[0];
-              }
-              if (state.loadAreasFromNetwork) {
-                state.networkOperation({
-                  method: "DELETE",
-                  endPoint: `areas/${areaId}`,
-                  parms: {},
-                  toastSuccess: false,
-                  toastError: false
-                });
-              }
-            });
-            if (selectNewAreaId) {
-              get().areasActions.selectArea(selectNewAreaId);
-            }
-          },
-          selectArea: (areaId) => {
-            set((state) => {
-              state.currentAreaId = areaId;
-              if (state.hashAreas[areaId].currentLayoutId) {
-                state.currentModuleId = state.hashWindows[state.hashAreas[areaId].currentLayoutId].moduleId;
-              } else {
-                state.currentModuleId = "";
-              }
-            });
-            if (get().hashAreas[areaId].status === "init") {
-              if (get().hashAreas[areaId].loadWindows) {
-                get().areaActions.loadWindowsFromApi(areaId);
-              } else {
-                set((state) => {
-                  state.hashAreas[areaId].status = "loaded";
-                });
-              }
-            }
-            if (get().hashAreas[areaId].maximizedId !== void 0) ;
-          },
-          setHandlerGetLabel: (newHandler) => {
-            set((state) => {
-              state.getLabel = newHandler;
-            });
-          },
-          setExternalState: (newExternalState) => {
-            set((state) => {
-              state.ownerState = { ...state.ownerState, ...newExternalState };
-              updateOwnerStateClasses(state);
-            });
-          }
-        },
-        areaActions: {
-          addWindow: (newWindowProps) => {
-            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") {
-              get().areaActions.addWindowModal(get().currentAreaId, windowId, newWindowProps);
-            }
-          },
-          addLayout: (areaId, windowId, newWindowProps) => {
-            let previousId = windowId;
-            const freeMove = newWindowProps.emergeType === "popup";
-            const newLayoutItem = {
-              ...newWindowProps.layoutProps,
-              i: windowId,
-              isDraggable: true,
-              isResizable: true,
-              freeMove
-            };
-            set((state) => {
-              const area = state.hashAreas[areaId];
-              if (!area) {
-                return;
-              }
-              if (newWindowProps.replaceMeId) {
-                for (let index = 0; index < area.layoutItemsIds.length; index++) {
-                  const key = area.layoutItemsIds[index];
-                  const WindoPopUp = state.hashWindows[key];
-                  if (WindoPopUp.replaceMeId === newWindowProps.replaceMeId) {
-                    previousId = key;
-                    WindoPopUp.dynamicMFStore.getState().actions.changeData(newWindowProps.dynamicParams);
-                    break;
-                  }
-                }
-              }
-              if (previousId === windowId) {
-                const dynamicMFStore = createDynamicMFStore({
-                  dynamicMFParameters: newWindowProps.dynamicParams,
-                  windowId
-                });
-                state.hashWindows[windowId] = {
-                  ...newWindowProps,
-                  areaId,
-                  windowId,
-                  onClose: (removeLayoutId) => {
-                    get().areaActions.closeLayout(areaId, removeLayoutId);
-                  },
-                  ...DEFAULT_WINDOW,
-                  dynamicMFStore
-                };
-                area.layoutItemsIds.push(windowId);
-                if (newWindowProps.emergeType === "layout") {
-                  area.currentLayoutId = windowId;
-                } else {
-                  area.currentPopUpId = windowId;
-                }
-                if (area.maximizedId) {
-                  area.maximizedId = windowId;
-                }
-                area.layouts = addLayoutItemToBreakPoints(
-                  area.layouts,
-                  newLayoutItem,
-                  NORMALIZED_COLS,
-                  [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
-                  [PADDING_GRIDLAYOUT, PADDING_GRIDLAYOUT],
-                  RESPONSIVE_ROW_HEIGHTS,
-                  area.containerHeight,
-                  area.currentBreakpoint
-                );
-                if (area.currentBreakpoint === "xxs") {
-                  area.maximizedId = windowId;
-                }
-              }
-            });
-            get().areaActions.saveLayouts(areaId);
-            get().areaActions.bouncedSaveBreakpointsLayouts(areaId);
-          },
-          closeLayout: (areaId, removeLayoutId) => {
-            set((state) => {
-              const area = state.hashAreas[areaId];
-              if (!area) {
-                return;
-              }
-              const removeIndex = area.layoutItemsIds.indexOf(removeLayoutId);
-              if (removeIndex > -1) {
-                area.layoutItemsIds.splice(removeIndex, 1);
-              }
-              deleteLayoutFromBreakPoints(area, removeLayoutId);
-              delete state.hashWindows[removeLayoutId];
-            });
-            get().areaActions.saveLayouts(areaId);
-            if (get().hashAreas[areaId].maximizedId === removeLayoutId) {
-              get().areaActions.maximizeLayout(areaId);
-            }
-            for (let index = 0; index < get().hashAreas[areaId].layoutItemsIds.length; index++) {
-              const layoutItemId = get().hashAreas[areaId].layoutItemsIds[index];
-              const layoutItem = get().hashWindows[layoutItemId];
-              if (layoutItem.parentLayoutId === removeLayoutId) {
-                get().areaActions.closeLayout(areaId, layoutItem.windowId);
-              }
-            }
-          },
-          saveLayouts: (areaId) => {
-            let nrKeys = 0;
-            const area = get().hashAreas[areaId];
-            if (!area) {
-              return;
-            }
-            const saveObjetc = {};
-            for (let index = 0; index < area.layoutItemsIds.length; index++) {
-              const key = area.layoutItemsIds[index];
-              if (get().hashWindows[key] && get().hashWindows[key].winType === "microfrontend") {
-                const element = get().hashWindows[key];
-                const hasPropsToSave = {
-                  winType: true,
-                  emergeType: true,
-                  title: true,
-                  url_icon: true,
-                  windowOptions: true,
-                  // layoutProps: false,
-                  moduleId: true,
-                  windowId: true,
-                  mfProps: true
-                };
-                const newElement = {};
-                for (const keyToSave in hasPropsToSave) {
-                  newElement[keyToSave] = element[keyToSave];
-                }
-                saveObjetc[key] = newElement;
-                nrKeys++;
-              }
-            }
-            if (nrKeys > 0) {
-              get().networkOperation({
-                method: "PUT",
-                endPoint: `cookies/${area.id}/${COOKIE_WINDOWS}`,
-                data: {
-                  value: JSON.stringify(saveObjetc)
-                },
-                toastSuccess: false,
-                toastError: false
-              });
-            } else {
-              get().networkOperation({
-                method: "DELETE",
-                endPoint: `cookies`,
-                data: { f: [{ n: "container_id", o: "c", o1: area.id }] },
-                toastSuccess: false,
-                toastError: false
-              });
-            }
-          },
-          closeWindowModal: (removeModalId) => {
-            set((state) => {
-              const removeIndex = state.windowsModals.findIndex((w) => w === removeModalId);
-              if (removeIndex > -1) {
-                state.windowsModals.splice(removeIndex, 1);
-              }
-              delete state.hashWindows[removeModalId];
-              delete state.hashWindowsModals[removeModalId];
-            });
-          },
-          addWindowModal: (areaId, windowId, newWindowModalProps) => {
-            set((state) => {
-              const dynamicMFStore = createDynamicMFStore({
-                dynamicMFParameters: newWindowModalProps.dynamicParams,
-                windowId
-              });
-              state.windowsModals.push(windowId);
-              state.hashWindowsModals[windowId] = {
-                ...newWindowModalProps,
-                areaId,
-                windowId,
-                ...DEFAULT_WINDOW,
-                onClose: get().areaActions.closeWindowModal,
-                dynamicMFStore
-              };
-              state.hashWindows[windowId] = state.hashWindowsModals[windowId];
-            });
-          },
-          bouncedSaveBreakpointsLayouts: debounce(
-            (areaId) => {
-              const purgedLayouts = {
-                ...get().hashAreas[areaId].layouts
-              };
-              const finalLayouts = {};
-              for (const key in purgedLayouts) {
-                const element = purgedLayouts[key];
-                purgedLayouts[key] = element.filter((l) => {
-                  if (l.i === "none") {
-                    return false;
-                  }
-                  if (get().hashAreas[areaId].layoutItemsIds.indexOf(l.i) > -1) {
-                    return true;
-                  }
-                  return false;
-                });
-                if (purgedLayouts[key].length > 0) {
-                  finalLayouts[key] = purgedLayouts[key];
-                }
-              }
-              if (Object.keys(finalLayouts).length > 0) {
-                get().networkOperation({
-                  method: "PUT",
-                  endPoint: `cookies/${get().hashAreas[areaId].id}/${COOKIE_BREAKPOINT_LAYOUTS}`,
-                  data: {
-                    value: JSON.stringify(finalLayouts)
-                  },
-                  toastSuccess: false,
-                  toastError: false
-                });
-              }
-            },
-            DEBOUCED_SAVE_TIME,
-            {
-              leading: true,
-              trailing: true
-            }
-          ),
-          onBreakpointsLayoutsChange: (areaId, _currentLayout, newAllLayouts) => {
-            if (!isEqualLayouts(get().hashAreas[areaId].layouts, newAllLayouts)) {
-              set((state) => {
-                state.hashAreas[areaId].layouts = cloneLayouts(newAllLayouts);
-              });
-              if (!get().hashAreas[areaId].maximizedId) {
-                get().areaActions.bouncedSaveBreakpointsLayouts(areaId);
-              }
-            }
-          },
-          onContainerChange: (areaId, e) => {
-            set((state) => {
-              state.hashAreas[areaId].containerHeight = e.containerHeight;
-              state.hashAreas[areaId].currentBreakpoint = e.breakpoint;
-            });
-          },
-          selectLayout: (areaId, layoutId) => {
-            set((state) => {
-              const area = state.hashAreas[areaId];
-              if (state.hashWindows[layoutId].emergeType === "layout") {
-                area.currentLayoutId = layoutId;
-                state.currentModuleId = state.hashWindows[layoutId].moduleId;
-                if (area.currentPopUpId !== "" && state.hashWindows[area.currentPopUpId]) {
-                  if (state.hashWindows[area.currentPopUpId].parentLayoutId !== layoutId) {
-                    area.currentPopUpId = "";
-                  }
-                }
-              } else {
-                state.hashAreas[areaId].currentPopUpId = layoutId;
-                const parentLayoutId = state.hashWindows[layoutId]?.parentLayoutId;
-                if (parentLayoutId && state.hashWindows[parentLayoutId]) {
-                  area.currentLayoutId = parentLayoutId;
-                  state.currentModuleId = state.hashWindows[parentLayoutId].moduleId;
-                } else {
-                  area.currentLayoutId = "";
-                  state.currentModuleId = "";
-                }
-              }
-            });
-          },
-          unColapseLayoutItem: (areaId, layoutId) => {
-            set((state) => {
-              setColapsedLayoutBreakPoints(state.hashAreas[areaId], layoutId, false);
-            });
-          },
-          colapseLayoutItem: (areaId, layoutId) => {
-            if (!get().hashAreas[areaId].maximizedId && get().hashWindows[layoutId]) {
-              set((state) => {
-                setColapsedLayoutBreakPoints(state.hashAreas[areaId], layoutId, true);
-              });
-            }
-          },
-          maximizeLayout: (areaId, layoutId) => {
-            set((state) => {
-              const area = state.hashAreas[areaId];
-              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") {
-                area.layouts["xxs"][index].visible = true;
-                area.layouts["xxs"][index].colapsed = false;
-              }
-            });
-            if (layoutId) {
-              get().areaActions.selectLayout(areaId, layoutId);
-            }
-          },
-          normalizeLayouts: (areaId) => {
-            set((state) => {
-              const area = state.hashAreas[areaId];
-              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") {
-                  area.layouts["xxs"][index].visible = false;
-                }
-              }
-              area.maximizedId = void 0;
-            });
-          },
-          loadWindowsFromApi: (areaId) => {
-            const area = get().hashAreas[areaId];
-            if (!area) {
-              return;
-            }
-            if (area.status !== "init") {
-              return;
-            }
-            if (!get().loadAreasFromNetwork || !area.loadWindows) {
-              set((state) => {
-                state.hashAreas[areaId].status = "loaded";
-              });
-              return;
-            }
-            set((state) => {
-              state.hashAreas[areaId].status = "loading";
-            });
-            get().networkOperation({
-              method: "GET",
-              endPoint: `cookies`,
-              parms: { f: [{ n: "container_id", o: "e", o1: areaId }] },
-              toastSuccess: false,
-              toastError: false
-              // isRemote: false
-            }).then((response) => {
-              const area2 = get().hashAreas[areaId];
-              if (!area2) {
-                return;
-              }
-              set((state) => {
-                const area3 = state.hashAreas[areaId];
-                const { newBreakPointsLayouts, newHashLayoutItems } = getDataFromResponse(
-                  response.data,
-                  state,
-                  areaId
-                );
-                area3.layouts = newBreakPointsLayouts;
-                area3.layoutItemsIds = newHashLayoutItems;
-                area3.status = "loaded";
-              });
-            }).catch((_response) => {
-              set((state) => {
-                state.hashAreas[areaId].status = "loaded";
-              });
-            });
-          }
-          // 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) => {
-            set((state) => {
-              if (state.hashWindows[windowId]) {
-                state.hashWindows[windowId].moduleActions = cloneDeep(newActions);
-                state.hashWindows[windowId].version = version;
-              }
-            });
-          },
-          getCookie: (windowId, id) => {
-            if (get().hashWindows[windowId]) {
-              return get().hashWindows[windowId].cookies.windowCookies[id] || get().hashWindows[windowId].cookies.moduleCookies[id];
-            }
-            return {};
-          },
-          getCookies: (windowId, type) => {
-            if (get().hashWindows[windowId]) {
-              if (type === "window") {
-                return get().hashWindows[windowId].cookies.windowCookies;
-              } else {
-                return get().hashWindows[windowId].cookies.moduleCookies;
-              }
-            }
-            return {};
-          },
-          setCookie: (windowId, id, type, cookie) => {
-            set((state) => {
-              const hW = state.hashWindows[windowId];
-              if (hW) {
-                get().networkOperation({
-                  method: "PUT",
-                  endPoint: `cookies/${type === "module" ? hW.moduleId : windowId}/${id}`,
-                  data: {
-                    value: JSON.stringify(cookie)
-                  },
-                  toastSuccess: false,
-                  toastError: false
-                });
-                if (type === "window") {
-                  hW.cookies.windowCookies[id] = cookie;
-                } else {
-                  hW.cookies.moduleCookies[id] = cookie;
-                }
-              }
-            });
-          },
-          close: (windowId) => {
-            const hW = get().hashWindows[windowId];
-            if (hW) {
-              const onClose = hW.onClose;
-              if (onClose) {
-                onClose(hW.windowId);
-              }
-            }
-          },
-          startProgress: (windowId) => {
-            set((state) => {
-              if (state.hashWindows[windowId]) {
-                state.hashWindows[windowId].loading = true;
-              }
-            });
-          },
-          stopProgress: (windowId) => {
-            set((state) => {
-              if (state.hashWindows[windowId]) {
-                state.hashWindows[windowId].loading = false;
-              }
-            });
-          },
-          loadCookiesFromApi: (windowId) => {
-            const hW = get().hashWindows[windowId];
-            if (hW) {
-              if (hW.status === "init") {
-                set((state) => {
-                  state.hashWindows[windowId].status = "loading";
-                });
-                get().networkOperation({
-                  method: "GET",
-                  endPoint: `cookies`,
-                  parms: {
-                    f: [
-                      { n: "container_id", o: "e", o1: hW.windowId },
-                      { n: "container_id", o: "e", o1: hW.moduleId }
-                    ]
-                  },
-                  toastSuccess: false,
-                  toastError: false
-                  // isRemote: false
-                }).then((response) => {
-                  set((state) => {
-                    const hWs = state.hashWindows[windowId];
-                    if (hWs) {
-                      hWs.cookies.moduleCookies = getCookiesContainer(
-                        response.data,
-                        hWs.moduleId
-                      );
-                      hWs.cookies.windowCookies = getCookiesContainer(response.data, windowId);
-                      hWs.status = "loaded";
-                    }
-                  });
-                }).catch((_response) => {
-                  set((state) => {
-                    if (state.hashWindows[windowId]) {
-                      state.hashWindows[windowId].status = "loaded";
-                    }
-                  });
-                });
-              }
-            }
-          },
-          saveModuleCookies: (windowId) => {
-            const hW = get().hashWindows[windowId];
-            if (hW) {
-              for (const key in hW.cookies.windowCookies) {
-                const cookie = hW.cookies.windowCookies[key];
-                get().networkOperation({
-                  method: "PUT",
-                  endPoint: `cookies/${hW.moduleId}/${key}`,
-                  data: {
-                    value: JSON.stringify(cookie)
-                  },
-                  toastSuccess: false,
-                  toastError: false
-                });
-              }
-            }
-          },
-          resetModuleCookies: (windowId) => {
-            const hW = get().hashWindows[windowId];
-            if (hW) {
-              get().networkOperation({
-                method: "DELETE",
-                endPoint: `cookies`,
-                data: {
-                  f: [
-                    {
-                      n: "id",
-                      o: "c",
-                      o1: hW.moduleId
-                    }
-                  ]
-                },
-                toastSuccess: false,
-                toastError: false
-              });
-            }
-          },
-          setFnQueryClose: (windowId, fnQueryClose) => {
-            set((state) => {
-              state.hashWindows[windowId].fnQueryClose = fnQueryClose;
-            });
-          },
-          setWindowTitle: (windowId, title) => {
-            set((state) => {
-              state.hashWindows[windowId].title = title;
-            });
-          }
-        },
-        areaAdminActions: {
-          setFocus: (newValue) => {
-            set((state) => {
-              state.ownerState = { ...state.ownerState, focus: newValue };
-              updateOwnerStateClasses(state);
-            });
-          }
-        }
-      })),
-      { name: `Areas store` }
-    )
-  );
-};
-const AreasContext = createContext(null);
-function AreasProvider(props) {
-  const { children, loadAreasFromNetwork, loadCookiesFromNetwork, onLoad, onSelectLayout } = props;
-  const { events_add_listener, events_remove_listener } = useHostTools();
-  const { getLabel } = useModuleDictionary();
-  const { networkOperation } = useNetwork();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const isFirstRender = useFirstRender([getLabel]);
-  const areasStoreRef = useRef();
-  if (!areasStoreRef.current) {
-    areasStoreRef.current = createAreasStore({
-      getLabel,
-      loadAreasFromNetwork,
-      loadCookiesFromNetwork,
-      networkOperation,
-      ownerState: {
-        status: "init",
-        isMobile: !isDesktop,
-        isSkeleton,
-        focus: false
-      }
-      // onLoad,
-    });
-    areasStoreRef.current?.getState().areasActions.init();
-  }
-  const status = useStore(areasStoreRef.current, (state) => state.ownerState.status, shallow);
-  const currentModuleId = useStore(areasStoreRef.current, (state) => state.currentModuleId);
-  const refCurrentModuleId = useRef("");
-  const { setHandlerGetLabel, setExternalState } = useStore(
-    areasStoreRef.current,
-    (state) => state.areasActions,
-    shallow
-  );
-  const addWindow = useCallback((newWindow) => {
-    const currentAreaId = areasStoreRef.current?.getState().currentAreaId;
-    const areas = areasStoreRef.current?.getState().areasIds;
-    if (currentAreaId && areas) {
-      areasStoreRef.current?.getState().areaActions.addWindow(newWindow);
-    }
-  }, []);
-  useEffect(() => {
-    if (status === "loaded") {
-      onLoad && onLoad();
-    }
-  }, [status]);
-  useEffect(() => {
-    if (status === "loaded") {
-      if (currentModuleId !== refCurrentModuleId.current) {
-        onSelectLayout && onSelectLayout(currentModuleId);
-        refCurrentModuleId.current = currentModuleId;
-      }
-    }
-  }, [currentModuleId, status]);
-  useEffect(() => {
-    if (!isFirstRender) {
-      setHandlerGetLabel(getLabel);
-    }
-  }, [getLabel]);
-  useEffect(() => {
-    events_add_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
-    return () => {
-      events_remove_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
-    };
-  }, []);
-  useEffect(() => {
-    if (isFirstRender) {
-      return;
-    }
-    setExternalState({ isMobile: !isDesktop, isSkeleton });
-  }, [isDesktop, isSkeleton]);
-  return /* @__PURE__ */ jsx(AreasContext.Provider, { value: areasStoreRef.current, children });
-}
-export {
-  AreasProvider as A,
-  MARGIN_GRIDLAYOUT as M,
-  PADDING_GRIDLAYOUT as P,
-  RESPONSIVE_COLAPSED_HEIGHTS as R,
-  RESPONSIVE_ROW_HEIGHTS as a,
-  AreasContext as b
-};