@m4l/components 4.0.0 → 4.1.1

package/components/areas/contexts/AreasContext/store-BiKwIQJY.js

@@ -1,832 +0,0 @@
-import { createStore } from "zustand";
-import { devtools } from "zustand/middleware";
-import { immer } from "zustand/middleware/immer";
-import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/classes/index-Kuh5obMP.js";
-import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/classes/index-CryauVAw.js";
-import { u as updateOwnerStateClasses, C as COOKIE_AREAS_ADMIN_CONTAINER_ID, b as COOKIE_AREAS_ADMIN_ID, D as DEFAULT_AREA, c as addArea, g as getSelectedAreaIdFromCookies, d as DEFAULT_WINDOW, a as RESPONSIVE_ROW_HEIGHTS, P as PADDING_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, N as NORMALIZED_COLS, e as deleteLayoutFromBreakPoints, f as COOKIE_WINDOWS, h as COOKIE_BREAKPOINT_LAYOUTS, i as DEBOUCED_SAVE_TIME, s as setColapsedLayoutBreakPoints, j as getDataFromResponse, k as getCookiesContainer } from "./helper-C7Cw4wso.js";
-import { c as createDynamicMFStore } from "../DynamicMFParmsContext/store-8_SPgo06.js";
-import { debounce, cloneDeep } from "lodash";
-import { g as getCookie, s as setCookie, d as deleteCookie } from "../../../../helpers/cookies/cookies-B61qmA_e.js";
-import { d as addLayoutItemToBreakPoints, e as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/responsiveUtils-Bn3nVJDm.js";
-import { k as isEqualLayouts } from "../../../GridLayout/utils-CF3BArf2.js";
-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);
-            });
-            const cookiePromise = getCookie({
-              networkOperation: get().networkOperation,
-              params: {
-                f: [
-                  { n: "container_id", o: "e", o1: COOKIE_AREAS_ADMIN_CONTAINER_ID },
-                  { n: "id", o: "e", o1: COOKIE_AREAS_ADMIN_ID }
-                ]
-              }
-            });
-            const areasPromise = get().networkOperation({
-              method: "GET",
-              endPoint: `areas`,
-              parms: {},
-              toastSuccess: false
-            });
-            let selectedAreaIdCookie;
-            Promise.allSettled([areasPromise, cookiePromise]).then(([areasResponse, cookieResponse]) => {
-              if (areasResponse?.status === "fulfilled") {
-                const areasData = areasResponse?.value?.data;
-                set((state) => {
-                  if (areasData && Array.isArray(areasData) && areasData.length > 0) {
-                    for (let i = 0; i < areasData.length; i++) {
-                      const newArea = {
-                        ...DEFAULT_AREA,
-                        ...areasData[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);
-                  }
-                });
-              }
-              if (cookieResponse.status === "fulfilled") {
-                selectedAreaIdCookie = getSelectedAreaIdFromCookies(cookieResponse?.value);
-              }
-            }).finally(() => {
-              set((state) => {
-                state.ownerState.status = "loaded";
-                updateOwnerStateClasses(state);
-              });
-              if (get().areasIds.length > 0 && get().currentAreaId === "") {
-                const selectedAreaId = selectedAreaIdCookie && get().areasIds?.includes?.(selectedAreaIdCookie) ? selectedAreaIdCookie : get().areasIds[0];
-                get().areasActions.selectArea(selectedAreaId);
-              }
-            });
-          },
-          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) ;
-            setCookie({
-              networkOperation: get().networkOperation,
-              endPoint: `${COOKIE_AREAS_ADMIN_CONTAINER_ID}/${COOKIE_AREAS_ADMIN_ID}`,
-              value: { selectedAreaId: 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_${(/* @__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) {
-              setCookie({
-                networkOperation: get().networkOperation,
-                endPoint: `${area.id}/${COOKIE_WINDOWS}`,
-                value: saveObjetc
-              });
-            } else {
-              deleteCookie({
-                networkOperation: get().networkOperation,
-                data: { f: [{ n: "container_id", o: "c", o1: area.id }] }
-              });
-            }
-          },
-          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) {
-                setCookie({
-                  networkOperation: get().networkOperation,
-                  endPoint: `${get().hashAreas[areaId].id}/${COOKIE_BREAKPOINT_LAYOUTS}`,
-                  value: finalLayouts
-                });
-              }
-            },
-            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";
-            });
-            getCookie({
-              networkOperation: get().networkOperation,
-              params: { f: [{ n: "container_id", o: "e", o1: areaId }] }
-            }).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) {
-                setCookie({
-                  networkOperation: get().networkOperation,
-                  endPoint: `${type === "module" ? hW.moduleId : windowId}/${id}`,
-                  value: cookie
-                });
-                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";
-                });
-                getCookie({
-                  networkOperation: get().networkOperation,
-                  params: {
-                    f: [
-                      { n: "container_id", o: "e", o1: hW.windowId },
-                      { n: "container_id", o: "e", o1: hW.moduleId }
-                    ]
-                  }
-                }).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];
-                setCookie({
-                  networkOperation: get().networkOperation,
-                  endPoint: `${hW.moduleId}/${key}`,
-                  value: cookie
-                });
-              }
-            }
-          },
-          resetModuleCookies: (windowId) => {
-            const hW = get().hashWindows[windowId];
-            if (hW) {
-              deleteCookie({
-                networkOperation: get().networkOperation,
-                data: {
-                  f: [
-                    {
-                      n: "id",
-                      o: "c",
-                      o1: hW.moduleId
-                    }
-                  ]
-                }
-              });
-            }
-          },
-          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` }
-    )
-  );
-};
-export {
-  createAreasStore as c
-};