@m4l/components 0.1.69 → 0.1.70

package/components/areas/contexts/AreasContext/index.de8b4e78.js

@@ -0,0 +1,1015 @@
+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, a as useAreasAdminUtilityClasses, b as areasViewerClasses } from "../../components/index.359c2b18.js";
+import { g as getAreasDictionary } from "../../index.8a58bcbf.js";
+import { c as createDynamicMFStore } from "../DynamicMFParmsContext/index.1607c78e.js";
+import { debounce, cloneDeep } from "lodash";
+import { jsx } from "react/jsx-runtime";
+const ROW_HEIGTH_GRIDLAYOUT = 20;
+const CONTAINER_PADDING_GRIDLAYOUT = 3;
+const MARGIN_GRIDLAYOUT = 5;
+const DEBOUCED_SAVE_TIME = 500;
+const THROTTLE_RESIZE_TIME = 300;
+const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";
+const COOKIE_WINDOWS = "windows";
+const BREAKPOINT_SIZES = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };
+const NORMALIZED_COLS = { lg: 24, md: 20, sm: 12, xs: 8, xxs: 1 };
+const MAXIMIZED_COLS = { lg: 24, md: 20, sm: 12, xs: 8, xxs: 1 };
+const DEFAULT_AREA = {
+  status: "init",
+  zPopUpIndex: 0,
+  breakPointsLayouts: {},
+  beforeMaximizebreakpointsLayouts: {},
+  windowsLayouts: [],
+  windowsPopUps: [],
+  hashWindowsPopups: {},
+  hashWindowsLayouts: {},
+  currentLayoutId: "",
+  currentPopUpId: "",
+  breakpoints: BREAKPOINT_SIZES,
+  cols: NORMALIZED_COLS
+};
+const addArea = (state) => {
+  const areaId = `area_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
+  const name = `${state.getLabel(getAreasDictionary("label_new_area"))} ${state.areas.length + 1}`;
+  const newArea = {
+    id: areaId,
+    name,
+    loadWindows: false,
+    viewMode: state.ownerState.isMobile ? "single" : "multiple",
+    ...DEFAULT_AREA
+  };
+  state.areas.push(newArea);
+  state.hashAreas[areaId] = newArea;
+  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 setAddBreakPoints(state, newLayout) {
+  const layoutsBreakPoints = state.breakPointsLayouts;
+  const beforeMaximizebreakpointsLayouts = state.beforeMaximizebreakpointsLayouts;
+  for (const key in layoutsBreakPoints) {
+    const layoutBreakpoint = layoutsBreakPoints[key];
+    layoutBreakpoint.unshift(newLayout);
+  }
+  if (state.viewMode === "single") {
+    for (const key in beforeMaximizebreakpointsLayouts) {
+      const beforeLayoutBreakpoint = beforeMaximizebreakpointsLayouts[key];
+      beforeLayoutBreakpoint.push(newLayout);
+    }
+  }
+  return layoutsBreakPoints;
+}
+function deleteLayoutFromBreakPoints(state, layoutId) {
+  const layoutsBreakPoints = state.breakPointsLayouts;
+  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 setBreakPointsMaximized(state, layoutId) {
+  const layoutsBreakPoints = state.breakPointsLayouts;
+  const container = document.getElementsByClassName(
+    `${areasViewerClasses.areaGridLayout}-${state.id}`
+  )[0];
+  console.log("setBreakPointsMaximized", container);
+  if (container) {
+    const clientHeight = container.clientHeight;
+    for (const key in layoutsBreakPoints) {
+      const layoutBreakpoint = layoutsBreakPoints[key];
+      const cols = key in MAXIMIZED_COLS ? MAXIMIZED_COLS[key] : 1;
+      const heigthUnits = (clientHeight + MARGIN_GRIDLAYOUT - 2 * CONTAINER_PADDING_GRIDLAYOUT) / (ROW_HEIGTH_GRIDLAYOUT + MARGIN_GRIDLAYOUT);
+      for (let index = 0; index < layoutBreakpoint.length; index++) {
+        const l = layoutBreakpoint[index];
+        if (l.i === layoutId) {
+          l.x = 0;
+          l.y = 0;
+          l.h = heigthUnits;
+          l.w = cols;
+          l.minW = 0;
+          l.maxW = cols;
+          l.minH = 0;
+          l.maxH = heigthUnits;
+          l.isResizable = false;
+          l.isDraggable = false;
+        } else {
+          l.x = 0;
+          l.y = 1;
+          l.h = 0;
+          l.w = 0;
+          l.minW = 0;
+          l.maxW = 0;
+          l.minH = 0;
+          l.maxH = 0;
+        }
+        l.isResizable = false;
+        l.isDraggable = false;
+      }
+    }
+  }
+  return layoutsBreakPoints;
+}
+function getDataFromResponse(data, state, areaId) {
+  const newBreakPointsLayouts = getParmsFromValue(COOKIE_BREAKPOINT_LAYOUTS, data);
+  const windows = getParmsFromValue(COOKIE_WINDOWS, data);
+  const newWindowsLayouts = [];
+  const newHashWindowLayouts = {};
+  if (windows) {
+    for (const key in windows) {
+      const element = windows[key];
+      if (element && element["layoutProps"] && element["mfProps"] && element["emergeType"] === "layout" && element["winType"] === "microfrontend") {
+        element["layoutProps"].i = key;
+        newWindowsLayouts.push(element["layoutProps"]);
+        const onClose = state.areaActions.closeWindowLayout;
+        newHashWindowLayouts[key] = {
+          ...element,
+          windowId: key,
+          emergeType: "layout",
+          areaId,
+          dynamicMFStore: createDynamicMFStore({
+            dynamicMFParameters: element.dynamicParams,
+            windowId: key
+          }),
+          onClose: () => onClose(areaId, key),
+          status: "init",
+          moduleActions: [],
+          cookies: { moduleCookies: {}, windowCookies: {} },
+          loading: false
+        };
+        state.hashWindows[key] = newHashWindowLayouts[key];
+      }
+    }
+  }
+  return {
+    newBreakPointsLayouts,
+    newWindowsLayouts,
+    newHashWindowLayouts
+  };
+}
+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: "",
+    areas: [],
+    hashAreas: {},
+    hashWindows: {},
+    hashWindowsModals: {},
+    windowsModals: [],
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, get) => ({
+        ...startProps,
+        areasActions: {
+          init: () => {
+            if (get().ownerState.status === "init") {
+              if (!get().loadAreasFromNetwork) {
+                get().areasActions.addArea();
+                set((state) => {
+                  state.ownerState.status = "loaded";
+                  updateOwnerStateClasses(state);
+                });
+              } else {
+                set((state) => {
+                  state.ownerState.status = "loading";
+                  updateOwnerStateClasses(state);
+                  state.networkOperation({
+                    method: "GET",
+                    endPoint: `areas`,
+                    parms: {},
+                    toastSuccess: false
+                  }).then((response) => {
+                    set((otherState) => {
+                      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,
+                            viewMode: otherState.ownerState.isMobile ? "single" : "multiple"
+                          };
+                          otherState.areas.push(newArea);
+                          otherState.hashAreas[newArea.id] = newArea;
+                        }
+                      } else {
+                        addArea(otherState);
+                      }
+                    });
+                  }).finally(() => {
+                    set((state2) => {
+                      state2.ownerState.status = "loaded";
+                      updateOwnerStateClasses(state2);
+                    });
+                    if (get().areas.length > 0) {
+                      get().areasActions.selectArea(get().areas[0].id);
+                    }
+                  });
+                });
+              }
+            }
+          },
+          addArea: () => {
+            let newId = "";
+            set((state) => {
+              newId = addArea(state);
+            });
+            get().areasActions.selectArea(newId);
+            return newId;
+          },
+          deleteArea: (areaId) => {
+            let selectNewAreaId = "";
+            set((state) => {
+              const removeIndex = state.areas.findIndex((area) => area.id === areaId);
+              if (removeIndex > -1) {
+                for (const key in state.hashWindows) {
+                  if (state.hashWindows[key].areaId === areaId) {
+                    delete state.hashWindows[key];
+                  }
+                }
+                state.areas.splice(removeIndex, 1);
+                delete state.hashAreas[areaId];
+              }
+              if (state.currentAreaId === areaId) {
+                if (state.areas.length > 0) {
+                  selectNewAreaId = state.areas[0].id;
+                } else {
+                  state.currentAreaId = "";
+                }
+              }
+              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].singleId !== void 0) {
+              get().areaActions.resizeMaximixedLayout(areaId);
+            }
+          },
+          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_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
+            if (newWindowProps.emergeType === "layout") {
+              get().areaActions.addWindowLayout(
+                get().currentAreaId,
+                windowId,
+                newWindowProps
+              );
+            } else if (newWindowProps.emergeType === "popup") {
+              get().areaActions.addWindowPopUp(
+                get().currentAreaId,
+                windowId,
+                newWindowProps
+              );
+            } else if (newWindowProps.emergeType === "modal") {
+              get().areaActions.addWindowModal(
+                get().currentAreaId,
+                windowId,
+                newWindowProps
+              );
+            }
+          },
+          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,
+                status: "init",
+                moduleActions: [],
+                cookies: { moduleCookies: {}, windowCookies: {} },
+                loading: false,
+                onClose: get().areaActions.closeWindowModal,
+                dynamicMFStore
+              };
+              state.hashWindows[windowId] = state.hashWindowsModals[windowId];
+            });
+          },
+          closeWindowPopUp: (areaId, removePopUpId) => {
+            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, popUpId) => {
+            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;
+              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 = "";
+              }
+            });
+            setTimeout(() => {
+              const container = document.getElementsByClassName(
+                `${areasViewerClasses.areaGridLayoutPanelContainer}-${areaId}`
+              )[0];
+              const element = document.getElementsByClassName(
+                `${areasViewerClasses.windowPopupRoot}-${popUpId}`
+              )[0];
+              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);
+          },
+          addWindowPopUp: (areaId, windowId, newWindowPopupProps) => {
+            let popUpId = windowId;
+            set((state) => {
+              const area = state.hashAreas[areaId];
+              if (!area) {
+                return;
+              }
+              if (newWindowPopupProps.replaceMeId) {
+                for (const key in area.hashWindowsPopups) {
+                  const WindoPopUp = area.hashWindowsPopups[key];
+                  if (WindoPopUp.replaceMeId === newWindowPopupProps.replaceMeId) {
+                    popUpId = key;
+                    area.hashWindowsPopups[key].dynamicMFStore.getState().actions.changeData(newWindowPopupProps.dynamicParams);
+                    break;
+                  }
+                }
+              }
+              if (popUpId === windowId) {
+                const dynamicMFStore = createDynamicMFStore({
+                  dynamicMFParameters: newWindowPopupProps.dynamicParams,
+                  windowId
+                });
+                area.windowsPopUps.push(windowId);
+                area.hashWindowsPopups[windowId] = {
+                  ...newWindowPopupProps,
+                  emergeType: "popup",
+                  windowId,
+                  areaId,
+                  onClose: (removePopUpId) => get().areaActions.closeWindowPopUp(areaId, removePopUpId),
+                  zIndex: area.zPopUpIndex,
+                  status: "init",
+                  moduleActions: [],
+                  cookies: { moduleCookies: {}, windowCookies: {} },
+                  loading: false,
+                  dynamicMFStore
+                };
+                state.hashWindows[windowId] = area.hashWindowsPopups[windowId];
+                area.currentPopUpId = windowId;
+              }
+            });
+            get().areaActions.selectWindowPopUp(areaId, popUpId);
+          },
+          closeWindowLayout: (areaId, removeLayoutId) => {
+            set((state) => {
+              const area = state.hashAreas[areaId];
+              if (!area) {
+                return;
+              }
+              const removeIndex = area.windowsLayouts.findIndex(
+                (gl) => gl.i === removeLayoutId
+              );
+              if (removeIndex > -1) {
+                area.windowsLayouts.splice(removeIndex, 1);
+              }
+              deleteLayoutFromBreakPoints(area, removeLayoutId);
+              delete state.hashWindows[removeLayoutId];
+              delete area.hashWindowsLayouts[removeLayoutId];
+            });
+            get().areaActions.saveLayouts(areaId);
+            if (get().hashAreas[areaId].singleId === removeLayoutId) {
+              get().areaActions.maximizeLayout(areaId);
+            }
+          },
+          addWindowLayout: (areaId, windowId, newWindow) => {
+            const newLayout = {
+              ...newWindow.layoutProps,
+              i: windowId,
+              isDraggable: true,
+              isResizable: true,
+              winType: newWindow.winType
+            };
+            set((state) => {
+              const area = state.hashAreas[areaId];
+              if (!area) {
+                return;
+              }
+              const dynamicMFStore = createDynamicMFStore({
+                dynamicMFParameters: newWindow.dynamicParams,
+                windowId
+              });
+              area.windowsLayouts.push(newLayout);
+              area.hashWindowsLayouts[windowId] = {
+                ...newWindow,
+                areaId,
+                windowId,
+                emergeType: "layout",
+                onClose: (removeLayoutId) => {
+                  get().areaActions.closeWindowLayout(areaId, removeLayoutId);
+                },
+                status: "init",
+                moduleActions: [],
+                cookies: { moduleCookies: {}, windowCookies: {} },
+                loading: false,
+                dynamicMFStore
+              };
+              state.hashWindows[windowId] = area.hashWindowsLayouts[windowId];
+              setAddBreakPoints(area, newLayout);
+            });
+            get().areaActions.selectWindowLayout(areaId, windowId);
+            if (get().hashAreas[areaId].viewMode === "single" || newWindow?.openType === "maximized") {
+              get().areaActions.maximizeLayout(areaId, windowId);
+            }
+            get().areaActions.saveLayouts(areaId);
+            get().areaActions.bouncedSaveBreakpointsLayouts(areaId);
+          },
+          saveLayouts: (areaId) => {
+            let nrKeys = 0;
+            const area = get().hashAreas[areaId];
+            if (!area) {
+              return;
+            }
+            const saveObjetc = {};
+            for (const key in area.hashWindowsLayouts) {
+              const element = area.hashWindowsLayouts[key];
+              if (element.winType === "microfrontend") {
+                const newElement = { ...element };
+                delete newElement.onClose;
+                delete newElement.devCookies;
+                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
+              });
+            }
+          },
+          bouncedSaveBreakpointsLayouts: debounce(
+            (areaId) => {
+              const purgedLayouts = {
+                ...get().hashAreas[areaId].viewMode === "multiple" ? get().hashAreas[areaId].breakPointsLayouts : get().hashAreas[areaId].beforeMaximizebreakpointsLayouts
+              };
+              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].hashWindowsLayouts[l.i]) {
+                    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
+          ),
+          onBreakpointsLayoutsChange: (areaId, _currentLayouts, newAllLayouts) => {
+            set((state) => {
+              state.hashAreas[areaId].breakPointsLayouts = newAllLayouts;
+            });
+            if (!get().hashAreas[areaId].singleId) {
+              get().areaActions.bouncedSaveBreakpointsLayouts(areaId);
+            }
+          },
+          selectWindowLayout: (areaId, layoutId) => {
+            set((state) => {
+              const area = state.hashAreas[areaId];
+              area.currentLayoutId = layoutId;
+              state.currentModuleId = state.hashWindows[layoutId].moduleId;
+              if (area.currentPopUpId !== "" && area.hashWindowsPopups[area.currentPopUpId]) {
+                const windowPopup = area.hashWindowsPopups[area.currentPopUpId];
+                if (windowPopup.parentLayoutId !== layoutId) {
+                  area.currentPopUpId = "";
+                }
+              }
+            });
+          },
+          maximizeLayout: (areaId, layoutId) => {
+            let finalLayoutId = layoutId;
+            set((state) => {
+              const area = state.hashAreas[areaId];
+              if (!area)
+                return;
+              if (area.viewMode === "multiple") {
+                area.beforeMaximizebreakpointsLayouts = cloneDeep(
+                  area.breakPointsLayouts
+                );
+              }
+              if (!finalLayoutId) {
+                if (area.windowsLayouts.length > 0) {
+                  finalLayoutId = area.windowsLayouts[0].i;
+                }
+              }
+              area.viewMode = "single";
+              area.singleId = finalLayoutId;
+              setTimeout(() => {
+                set((state2) => {
+                  setBreakPointsMaximized(
+                    state2.hashAreas[areaId],
+                    finalLayoutId
+                  );
+                });
+              }, 100);
+            });
+            if (finalLayoutId) {
+              get().areaActions.selectWindowLayout(areaId, finalLayoutId);
+            }
+          },
+          resizeMaximixedLayout: (areaId) => {
+            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.breakPointsLayouts;
+                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;
+                    const heigthUnits = (clientHeight + MARGIN_GRIDLAYOUT - 2 * CONTAINER_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;
+                      }
+                    }
+                  }
+                }
+              }
+            });
+          },
+          normalizeLayouts: (areaId) => {
+            set((state) => {
+              if (state.ownerState.isMobile)
+                return;
+              if (!state.ownerState.isMobile && state.hashAreas[areaId].viewMode === "single") {
+                state.hashAreas[areaId].viewMode = "multiple";
+                state.hashAreas[areaId].singleId = void 0;
+                state.hashAreas[areaId].breakPointsLayouts = state.hashAreas[areaId].beforeMaximizebreakpointsLayouts;
+              }
+            });
+          },
+          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
+            }).then((response) => {
+              const area2 = get().hashAreas[areaId];
+              if (!area2) {
+                return;
+              }
+              set((state) => {
+                const area3 = state.hashAreas[areaId];
+                const {
+                  newBreakPointsLayouts,
+                  newWindowsLayouts,
+                  newHashWindowLayouts
+                } = getDataFromResponse(response.data, state, areaId);
+                area3.breakPointsLayouts = newBreakPointsLayouts;
+                if (area.viewMode === "single") {
+                  area3.beforeMaximizebreakpointsLayouts = newBreakPointsLayouts;
+                }
+                area3.windowsLayouts = newWindowsLayouts;
+                area3.hashWindowsLayouts = newHashWindowLayouts;
+                area3.status = "loaded";
+              });
+              if (get().hashAreas[areaId].windowsLayouts.length > 0) {
+                get().areaActions.selectWindowLayout(
+                  areaId,
+                  get().hashAreas[areaId].windowsLayouts[0].i
+                );
+              }
+              console.log("loadWindowsFromApi", area2.viewMode);
+              if (area2.viewMode === "single") {
+                get().areaActions.maximizeLayout(area2.id);
+              }
+            }).catch((_response) => {
+              set((state) => {
+                state.hashAreas[areaId].status = "loaded";
+              });
+            });
+          }
+        },
+        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);
+              }
+            }
+          },
+          setLoading: (windowId, isLoading) => {
+            set((state) => {
+              if (state.hashWindows[windowId]) {
+                state.hashWindows[windowId].loading = isLoading;
+              }
+            });
+          },
+          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
+                }).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
+              });
+            }
+          }
+        }
+      })),
+      { 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
+      }
+    });
+    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 currentArea = areasStoreRef.current?.getState().currentAreaId;
+    const areas = areasStoreRef.current?.getState().areas;
+    if (currentArea && 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 {
+  AreasContext as A,
+  CONTAINER_PADDING_GRIDLAYOUT as C,
+  MARGIN_GRIDLAYOUT as M,
+  ROW_HEIGTH_GRIDLAYOUT as R,
+  THROTTLE_RESIZE_TIME as T,
+  AreasProvider as a
+};