@m4l/components 3.1.7 → 3.1.8

package/components/areas/components/AreasViewer/index-DQ0aPioP.js

@@ -1,805 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { a8 as WindowRoot, a9 as WrapperWindowModal, aa as AreasViewerRoot } from "../../../../styles/index-DKj6m8SL.js";
-import { shallow } from "zustand/shallow";
-import React__default, { useMemo, useEffect } from "react";
-import clsx from "clsx";
-import { u as useAreasStore } from "../../hooks/useAreas/index-BSbwbJLS.js";
-import { generateUtilityClasses, Skeleton } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index-DiMrtgIu.js";
-import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants-rqODZNZe.js";
-import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { I as ICONS } from "../../icons-CwFr-alN.js";
-import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary-YUsP9beq.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index-CusYFjie.js";
-import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index-BwI756Mb.js";
-import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/MenuActions-C6CjSU6C.js";
-import { I as Icon } from "../../../Icon/index-C89MAkeH.js";
-import { T as Typography } from "../../../mui_extended/Typography/index-Cf_4Zw8f.js";
-import { M as MFLoader } from "../../../MFLoader/index-BI8vQZSH.js";
-import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index-DkE30fhm.js";
-import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index-22c6E7vK.js";
-import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock-CF-669v-.js";
-import { g as getNameDataTestId } from "../../../../test/getNameDataTestId-BaBTWhBr.js";
-import { c as createToaster, T as ToastContainer } from "../../../ToastContainer/index-DK1d8NNd.js";
-import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index-BqRlA7JA.js";
-import { w as withSizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index-1aJ-e_54.js";
-import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index-BKcU2OnF.js";
-import { useLocation } from "react-router-dom";
-import { L as LoadingError } from "../../../LoadingError/index-Cf0oGUrL.js";
-import { a as Draggable } from "../../../../react-draggable-DsCPdgQP.js";
-import { R as ResizeableWindow } from "../../../Resizeable/index-DdP1xfE9.js";
-const areasViewerClasses = generateUtilityClasses(
-  AREAS_VIEWER_CLASS_NAME,
-  [
-    /* elements */
-    "root",
-    "areaRoot",
-    "areaGridLayoutPanelContainer",
-    "areaGridLayout",
-    "areaGridLayoutPopupsContainer",
-    "areasWindowPopUpList",
-    "windowRoot",
-    "windowHeader",
-    "windowHeaderContent",
-    "windowHeaderTitle",
-    "windowHeaderMainActions",
-    "windowHeaderCancelHandle",
-    "windowContent",
-    "windowPopupRoot",
-    "windowModalRoot",
-    "windowLinearProgressRoot",
-    "windowLinearProgressBar",
-    "windowRootContainer",
-    "panelWindowsRoot",
-    "panelWindowsButtonContainer",
-    "panelWindowsSeparator",
-    "containerLinearProgress",
-    "resizeHandle",
-    "loaderContainer",
-    "containerComponent",
-    /* states or variants of elements */
-    // 'active',
-    "selected",
-    "colapsed",
-    "selectedWindow",
-    "isMobile",
-    "loading",
-    "pinIn",
-    "success",
-    "info",
-    "warning",
-    "error"
-  ],
-  AREAS_VIEWER_CLASS_NAME
-);
-const useAreasViewerUtilityClasses = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.status,
-      ownerState.isMobile && "isMobile",
-      ownerState.isSkeleton && "isSkeleton"
-    ],
-    areaRoot: ["areaRoot"],
-    areasLoadingErrorRoot: ["areasLoadingErrorRoot"],
-    areasLoadingErrorLoading: ["areasLoadingErrorLoading"],
-    areasLoadingError: ["areasLoadingError"],
-    areasLoadingErrorIcon: ["areasLoadingErrorIcon"],
-    areasLoadingErrorTitle: ["areasLoadingErrorTitle"],
-    areasLoadingErrorDescription: ["areasLoadingErrorDescription"],
-    areasLoadingErrorDivider: ["areasLoadingErrorDivider"],
-    areaGridLayoutPanelContainer: ["areaGridLayoutPanelContainer"],
-    areaGridLayout: ["areaGridLayout"],
-    areaGridLayoutPopupsContainer: ["areaGridLayoutPopupsContainer"],
-    areasWindowPopUpList: ["areasWindowPopUpList"],
-    windowRoot: ["windowRoot"],
-    windowRootContainer: ["windowRootContainer"],
-    windowHeader: ["windowHeader"],
-    windowHeaderTitle: ["windowHeaderTitle"],
-    windowHeaderMainActions: ["windowHeaderMainActions"],
-    windowHeaderCancelHandle: ["windowHeaderCancelHandle"],
-    windowContent: ["windowContent"],
-    windowLinearProgressRoot: ["windowLinearProgressRoot"],
-    windowLinearProgressBar: ["windowLinearProgressBar"],
-    windowPopupRoot: ["windowPopupRoot"],
-    windowModalRoot: ["windowModalRoot"],
-    selectedWindow: ["selectedWindow"],
-    panelWindowsRoot: ["panelWindowsRoot"],
-    panelWindowsButtonContainer: ["panelWindowsButtonContainer"],
-    panelWindowsSeparator: ["panelWindowsSeparator"],
-    resizeHandle: ["resizeHandle"],
-    loaderContainer: ["loaderContainer"],
-    containerComponent: ["containerComponent"]
-  };
-  return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_VIEWER_CLASS_NAME), {});
-};
-function WindowHeaderSkeleton(props) {
-  const { colapsed } = props;
-  return /* @__PURE__ */ jsx("div", { className: clsx(areasViewerClasses.windowHeader), children: /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowHeaderContent, children: [
-    /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        variant: "circular",
-        sx: { margin: "0 5px", minWidth: "18px", minHeight: "18px" }
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 80, height: 16 }) }),
-    /* @__PURE__ */ jsx("div", { className: areasViewerClasses.windowHeaderCancelHandle, children: !colapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Skeleton,
-        {
-          variant: "circular",
-          sx: { margin: "0 5px", minWidth: "16px", minHeight: "16px" }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Skeleton,
-        {
-          variant: "circular",
-          sx: { margin: "0 5px", minWidth: "16px", minHeight: "16px" }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Skeleton,
-        {
-          variant: "circular",
-          sx: { margin: "0 5px", minWidth: "16px", minHeight: "16px" }
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        variant: "circular",
-        sx: { margin: "0 5px", minWidth: "16px", minHeight: "16px" }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        variant: "circular",
-        sx: { margin: "0 5px", minWidth: "16px", minHeight: "16px" }
-      }
-    )
-  ] }) });
-}
-function getMainActions(isDesktop, moduleActions) {
-  let mainActions = [];
-  if (isDesktop !== void 0 && isDesktop) {
-    mainActions = mainActions.concat(moduleActions.filter((action) => action.visibility === "main"));
-  }
-  mainActions = mainActions.concat(moduleActions.filter((action) => action.visibility === "allways"));
-  return mainActions;
-}
-function getMenuActions(options) {
-  const {
-    windowId,
-    isDesktop,
-    moduleActions,
-    urlPrefix,
-    saveModuleCookies,
-    resetModuleCookies,
-    version,
-    windowOptions = { allowPersistCookies: false },
-    getLabel
-  } = options;
-  let menuActions = [...moduleActions.filter((action) => action.visibility !== "allways")];
-  if (isDesktop !== void 0 && isDesktop) {
-    menuActions = menuActions.filter((action) => action.visibility === "normal");
-  }
-  if (windowOptions.allowPersistCookies) {
-    const saveCookiesAction = {
-      urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.SAVE_COOKIES}`,
-      onClick: () => saveModuleCookies(windowId),
-      disabled: false,
-      visibility: "normal",
-      /* dictionaryId: getAreasDictionary(DICCTIONARY.label_persist_module_cookies), */
-      label: getLabel(getAreasDictionary(DICCTIONARY.label_persist_module_cookies)),
-      key: "save_cookies"
-    };
-    menuActions.push(saveCookiesAction);
-    const resetCookiesAction = {
-      urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.RESET_COOKIES}`,
-      onClick: () => resetModuleCookies(windowId),
-      disabled: false,
-      visibility: "normal",
-      label: getLabel(getAreasDictionary(DICCTIONARY.label_reset_module_cookies)),
-      /* dictionaryId: getAreasDictionary(DICCTIONARY.label_reset_module_cookies), */
-      key: "reset_cookes"
-    };
-    menuActions.push(resetCookiesAction);
-  }
-  if (version) {
-    const versionAction = {
-      urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.VERSION}`,
-      onClick: () => {
-      },
-      disabled: true,
-      visibility: "normal",
-      label: version,
-      key: "version"
-    };
-    menuActions.push(versionAction);
-  }
-  return menuActions;
-}
-function MainActions(props) {
-  const { windowId } = props;
-  const moduleActions = useAreasStore((state) => {
-    const window = state.hashWindows[windowId];
-    return window?.moduleActions || [];
-  }, shallow);
-  const { getLabel } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const mainActions = useMemo(() => {
-    return getMainActions(isDesktop, moduleActions);
-  }, [moduleActions, isDesktop]);
-  return /* @__PURE__ */ jsx("div", { className: areasViewerClasses.windowHeaderMainActions, children: mainActions.map((mainAction) => {
-    const tooltip = mainAction.label !== void 0 ? mainAction.label : getLabel(mainAction.dictionaryId || "");
-    const onClick = (e) => {
-      mainAction.onClick(e);
-      e.stopPropagation();
-    };
-    return /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        src: mainAction.urlIcon || "",
-        className: clsx(mainAction.className, "m4l_draggableCancel"),
-        onClick,
-        "aria-label": mainAction.label,
-        disabled: mainAction.disabled,
-        tooltip
-      },
-      mainAction.key
-    );
-  }) });
-}
-function Header(props) {
-  const { areaId, windowId, emergeType } = props;
-  const [url_icon, title, moduleActions, onClose, version, windowOptions, fnQueryClose] = useAreasStore((state) => {
-    const window = state.hashWindows[windowId];
-    return [
-      window.url_icon,
-      window.title,
-      window.moduleActions,
-      window.onClose,
-      window.version,
-      window.windowOptions,
-      window.fnQueryClose
-    ];
-  }, shallow);
-  const { saveModuleCookies, resetModuleCookies } = useAreasStore(
-    (state) => state.windowActions,
-    shallow
-  );
-  const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId, shallow);
-  const collapsed = useAreasStore((state) => {
-    const currentBreakpoint = state.hashAreas[areaId].currentBreakpoint;
-    if (currentBreakpoint) {
-      return state.hashAreas[areaId].layouts[currentBreakpoint].find((li) => li.i === windowId)?.colapsed;
-    }
-    return false;
-  }, shallow);
-  const { maximizeLayout, normalizeLayouts, colapseLayoutItem, unColapseLayoutItem } = useAreasStore((state) => state.areaActions, shallow);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const { getLabel } = useModuleDictionary();
-  const urlPrefix = `${host_static_assets}/${environment_assets}`;
-  const menuActions = useMemo(() => {
-    return getMenuActions({
-      windowId,
-      isDesktop,
-      moduleActions,
-      urlPrefix,
-      saveModuleCookies,
-      resetModuleCookies,
-      version,
-      windowOptions,
-      getLabel
-    });
-  }, [moduleActions, isDesktop]);
-  const onCloseLocal = () => {
-    const fnClose = fnQueryClose || onClose;
-    fnClose && fnClose(windowId);
-  };
-  const maxNormalize = (e) => {
-    if (maximizedId === windowId) {
-      normalizeLayouts(areaId);
-    } else {
-      maximizeLayout(areaId, windowId);
-    }
-    e.stopPropagation();
-  };
-  const collapsedToggle = (e) => {
-    if (!collapsed) {
-      colapseLayoutItem(areaId, windowId);
-    } else {
-      unColapseLayoutItem(areaId, windowId);
-    }
-    e.stopPropagation();
-  };
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(WindowHeaderSkeleton, {});
-  }
-  return /* @__PURE__ */ jsxs("div", { className: clsx(areasViewerClasses.windowHeader, "m4l_draggable_handle"), children: [
-    /* @__PURE__ */ jsx(LinearProgressIndeterminate, {}),
-    /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowHeaderContent, children: [
-      /* @__PURE__ */ jsx(Icon, { src: url_icon, size: "medium" }),
-      /* @__PURE__ */ jsx(Typography, { className: areasViewerClasses.windowHeaderTitle, variant: "h5", children: title }),
-      /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowHeaderCancelHandle, children: [
-        !collapsed && /* @__PURE__ */ jsx(MainActions, { windowId }),
-        !collapsed && menuActions.length > 0 && /* @__PURE__ */ jsx(
-          MemonizedMenuActions,
-          {
-            arrowType: "no-arrow",
-            marginTop: "12px!important",
-            marginLeft: "14px!important",
-            anchorOrigin: { vertical: "bottom", horizontal: "right" },
-            transformOrigin: { vertical: "top", horizontal: "right" },
-            menuActions,
-            toolTip: getLabel(getAreasDictionary(DICCTIONARY.label_module_actions))
-          }
-        ),
-        !collapsed && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            className: "m4l_draggableCancel",
-            onClick: maxNormalize,
-            "aria-label": "click",
-            src: maximizedId === windowId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`,
-            tooltip: getLabel(
-              getAreasDictionary(
-                maximizedId === windowId ? DICCTIONARY.label_minimize_window : DICCTIONARY.label_maximize_window
-              )
-            )
-          }
-        ),
-        !maximizedId && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            className: "m4l_draggableCancel",
-            onClick: collapsedToggle,
-            "aria-label": "click",
-            src: !collapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.COLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.UNCOLPASE}`,
-            tooltip: getLabel(
-              getAreasDictionary(
-                !collapsed ? DICCTIONARY.label_collapse_window : DICCTIONARY.label_uncollapse_window
-              )
-            )
-          }
-        ),
-        onClose && /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            className: "m4l_draggableCancel",
-            onPointerDown: onCloseLocal,
-            "aria-label": "click",
-            src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CLOSE}`,
-            tooltip: getLabel(getAreasDictionary(DICCTIONARY.label_close_window))
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-const MicroFrontend = (props) => {
-  return /* @__PURE__ */ jsx(MFLoader, { ...props });
-};
-const MemonizedMicroFrontend = React__default.memo(MicroFrontend);
-const Component = (props) => {
-  const { component, dynamicMFStore, windowTools } = props;
-  return /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx("div", { className: areasViewerClasses.containerComponent, children: typeof component === "function" ? component({ windowTools, dynamicMFStore }) : component }) }) });
-};
-React__default.memo(Component);
-const Window = (props) => {
-  const { areaId, windowId } = props;
-  const [emergeType, moduleId, winType] = useAreasStore((state) => {
-    return [
-      state.hashWindows[windowId]?.emergeType,
-      state.hashWindows[windowId]?.moduleId,
-      state.hashWindows[windowId]?.winType
-    ];
-  }, shallow);
-  const selected = useAreasStore((state) => {
-    return emergeType === "layout" ? state.hashAreas[areaId]?.currentLayoutId : state.hashAreas[areaId]?.currentPopUpId;
-  }) === windowId;
-  const mfProps = useAreasStore((state) => state.hashWindows[windowId]?.mfProps, shallow);
-  const component = useAreasStore(
-    (state) => state.hashWindows[windowId]?.component,
-    shallow
-  );
-  const loading = useAreasStore((state) => state.hashWindows[windowId]?.loading, shallow);
-  const status = useAreasStore((state) => state.hashWindows[windowId]?.status, shallow);
-  const dynamicMFStore = useAreasStore(
-    (state) => state.hashWindows[windowId]?.dynamicMFStore,
-    shallow
-  );
-  const {
-    setActions,
-    getCookie,
-    getCookies,
-    setCookie,
-    close,
-    startProgress,
-    stopProgress,
-    setFnQueryClose,
-    setWindowTitle
-  } = useAreasStore((state) => state.windowActions, shallow);
-  const { selectLayout } = useAreasStore((state) => state.areaActions, shallow);
-  const { loadCookiesFromApi } = useAreasStore((state) => state.windowActions, shallow);
-  const onTouch = () => {
-    if (!selected) {
-      selectLayout(areaId, props.windowId);
-    }
-  };
-  const windowTools = useMemo(
-    () => ({
-      getWindowId: () => windowId,
-      setActions: (newActions, version) => {
-        setActions(windowId, newActions, version);
-      },
-      getCookie: (id) => getCookie(windowId, id),
-      getCookies: (type) => getCookies(windowId, type),
-      setCookie: (id, type, cookie) => {
-        setCookie(windowId, id, type, cookie);
-      },
-      close: () => close(windowId),
-      startProgress: () => startProgress(windowId),
-      stopProgress: () => stopProgress(windowId),
-      setFnQueryClose: (fnQueryClose) => {
-        setFnQueryClose(windowId, fnQueryClose);
-      },
-      toast: createToaster(windowId),
-      setWindowTitle: (title) => setWindowTitle(windowId, title)
-    }),
-    []
-  );
-  useEffect(() => {
-    if (status === "init") {
-      loadCookiesFromApi(windowId);
-    }
-  }, [status]);
-  if (status === void 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    WindowRoot,
-    {
-      role: "presentation",
-      className: clsx(
-        areasViewerClasses.windowRoot,
-        selected ? areasViewerClasses.selectedWindow : null,
-        loading ? areasViewerClasses.loading : null,
-        emergeType === "popup" ? areasViewerClasses.windowPopupRoot : null,
-        emergeType === "modal" ? areasViewerClasses.windowModalRoot : null
-      ),
-      onMouseDown: onTouch,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId(
-          AREAS_VIEWER_CLASS_NAME,
-          "windowRoot",
-          `${emergeType}`
-        )
-      } : {},
-      children: /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowRootContainer, children: [
-        /* @__PURE__ */ jsx(Header, { areaId, windowId, emergeType }),
-        /* @__PURE__ */ jsx(ToastContainer, { fixed: false, position: "top-center", containerId: windowId }),
-        /* @__PURE__ */ jsxs("div", { className: clsx(areasViewerClasses.windowContent), children: [
-          status === "init" ? (
-            /* validar uso */
-            /* Todo: Validar agregar nuevo componente de carga. */
-            /* @__PURE__ */ jsx(Fragment, { children: "Cargando..." })
-          ) : null,
-          status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(
-            MemonizedMicroFrontend,
-            {
-              moduleId,
-              dynamicMFStore,
-              windowTools,
-              ...mfProps
-            }
-          ) : /* @__PURE__ */ jsx(
-            Component,
-            {
-              moduleId,
-              dynamicMFStore,
-              windowTools,
-              component
-            }
-          ) : null
-        ] })
-      ] })
-    }
-  );
-};
-React__default.memo(Window);
-const ResizeHandle = React__default.forwardRef(
-  (props, ref) => {
-    const { handleAxis, ...restProps } = props;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: clsx(
-          `react-resizable-handle react-resizable-handle-${handleAxis}`,
-          areasViewerClasses.resizeHandle
-        ),
-        ...restProps
-      }
-    );
-  }
-);
-const ResponsiveGridLayout = withSizeProvider(Responsive);
-const AreaGridLayout = (props) => {
-  const { areaId } = props;
-  const hashLayoutItems = useAreasStore((state) => state.hashAreas[areaId].layoutItemsIds, shallow);
-  const layouts = useAreasStore((state) => state.hashAreas[areaId].layouts, shallow);
-  const breakpoints = useAreasStore((state) => state.hashAreas[areaId].breakpoints, shallow);
-  const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId, shallow);
-  const cols = useAreasStore((state) => state.hashAreas[areaId].cols, shallow);
-  const { onBreakpointsLayoutsChange, onContainerChange } = useAreasStore(
-    (state) => state.areaActions,
-    shallow
-  );
-  return /* @__PURE__ */ jsx(
-    ResponsiveGridLayout,
-    {
-      autoSize: false,
-      compactType: "vertical",
-      measureBeforeMount: true,
-      resizeHandles: ["nw", "se"],
-      className: clsx(
-        areasViewerClasses.areaGridLayout,
-        `${areasViewerClasses.areaGridLayout}-${areaId}`
-      ),
-      layouts,
-      onLayoutChange: (layout, newLayouts) => onBreakpointsLayoutsChange(areaId, layout, newLayouts),
-      draggableHandle: ".m4l_draggable_handle",
-      draggableCancel: `.${areasViewerClasses.windowHeaderCancelHandle}`,
-      layoutItemRender: (p) => {
-        if (hashLayoutItems.indexOf(p.i) === -1) {
-          return /* @__PURE__ */ jsx(Fragment, {});
-        }
-        if (p.type === "placeholder") {
-          return /* @__PURE__ */ jsx("div", {});
-        }
-        return /* @__PURE__ */ jsx(Window, { windowId: p.i, areaId });
-      },
-      breakpoints,
-      colapsedHeight: RESPONSIVE_COLAPSED_HEIGHTS,
-      rowHeight: RESPONSIVE_ROW_HEIGHTS,
-      cols,
-      containerMargin: [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
-      containerPadding: [PADDING_GRIDLAYOUT, PADDING_GRIDLAYOUT],
-      onContainerChange: (e) => {
-        onContainerChange(areaId, e);
-      },
-      preventCollision: false,
-      maximizeId: maximizedId,
-      resizeHandle: /* @__PURE__ */ jsx(ResizeHandle, {})
-    }
-  );
-};
-const PanelWindows = (props) => {
-  const { areaId } = props;
-  const status = useAreasStore((state) => state.hashAreas[areaId].status);
-  const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId);
-  const maximizedIdParent = useAreasStore(
-    (state) => state.hashWindows[maximizedId || ""]?.parentLayoutId || void 0
-  );
-  const hashLayoutItems = useAreasStore(
-    (state) => state.hashAreas[areaId].layoutItemsIds.filter((itemId) => state.hashWindows[itemId].emergeType === "layout").map((key) => ({
-      i: key,
-      url_icon: state.hashWindows[key].url_icon,
-      title: state.hashWindows[key].title,
-      moduleId: state.hashWindows[key].moduleId,
-      emergeType: state.hashWindows[key].emergeType,
-      windowId: state.hashWindows[key].windowId
-    })),
-    shallow
-  );
-  const hashPopuosItems = useAreasStore(
-    (state) => state.hashAreas[areaId].layoutItemsIds.filter((itemId) => state.hashWindows[itemId].emergeType === "popup").map((key) => ({
-      i: key,
-      url_icon: state.hashWindows[key].url_icon,
-      title: state.hashWindows[key].title,
-      moduleId: state.hashWindows[key].moduleId,
-      emergeType: state.hashWindows[key].emergeType,
-      windowId: state.hashWindows[key].windowId
-    })),
-    shallow
-  );
-  const { maximizeLayout } = useAreasStore((state) => state.areaActions);
-  const onTouched = (layoutId) => {
-    maximizeLayout(areaId, layoutId);
-  };
-  const location = useLocation();
-  const searchParams = new URLSearchParams(location.search);
-  const currentParam = searchParams.get("module");
-  if (status === "loaded") {
-    if (!maximizedId || hashLayoutItems.length < 2) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.panelWindowsRoot, children: [
-      hashLayoutItems.map((kl) => {
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx(
-              areasViewerClasses.panelWindowsButtonContainer,
-              maximizedId === kl.i && kl.emergeType !== "popup" || maximizedIdParent === kl.windowId && kl.moduleId === currentParam ? areasViewerClasses.selected : null
-            ),
-            children: /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                src: kl.url_icon,
-                size: "small",
-                onClick: () => onTouched(kl.i),
-                tooltip: maximizedId !== kl.i ? kl.title : void 0
-              }
-            )
-          },
-          kl.i
-        );
-      }),
-      hashPopuosItems.length > 0 && /* @__PURE__ */ jsx("div", { className: areasViewerClasses.panelWindowsSeparator }),
-      hashPopuosItems.map((kl) => {
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx(
-              areasViewerClasses.panelWindowsButtonContainer,
-              maximizedId === kl.i && kl.emergeType !== "popup" || maximizedIdParent === kl.windowId && kl.moduleId === currentParam ? areasViewerClasses.selected : null
-            ),
-            children: /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                src: kl.url_icon,
-                size: "small",
-                onClick: () => onTouched(kl.i),
-                tooltip: maximizedId !== kl.i ? kl.title : void 0
-              }
-            )
-          },
-          kl.i
-        );
-      })
-    ] });
-  } else {
-    return null;
-  }
-};
-const InnerForHooks = (props) => {
-  const { areaId } = props;
-  const isDesktop = useResponsiveDesktop();
-  const status = useAreasStore((state) => state.hashAreas[areaId].status);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(
-        areasViewerClasses.areaGridLayoutPanelContainer,
-        `${areasViewerClasses.areaGridLayoutPanelContainer}-${areaId}`
-      ),
-      children: [
-        status === "loaded" ? /* @__PURE__ */ jsx(AreaGridLayout, { areaId }) : /* @__PURE__ */ jsx(LoadingError, { status, action: () => {
-        } }),
-        isDesktop ? /* @__PURE__ */ jsx(PanelWindows, { areaId }) : null
-      ]
-    }
-  );
-};
-const Area = (props) => {
-  const { selected, areaId } = props;
-  const classesAreaRoot = useAreasStore((state) => state.viwerClasses.areaRoot);
-  const status = useAreasStore((state) => state.hashAreas[areaId].status);
-  if (status === "init") {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(
-        classesAreaRoot,
-        selected ? areasViewerClasses.selected : null,
-        status === "loading" ? areasViewerClasses.loading : null
-      ),
-      children: /* @__PURE__ */ jsx(InnerForHooks, { areaId })
-    }
-  );
-};
-Area.displayName = "Area";
-const WindowModal = (props) => {
-  const { windowId } = props;
-  const { onClose } = useAreasStore((state) => state.hashWindowsModals[windowId]);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const isDesktop = useResponsiveDesktop();
-  const DragabblePaperComponent = (_props) => {
-    return /* @__PURE__ */ jsx(
-      Draggable,
-      {
-        handle: ".m4l_draggable_handle",
-        bounds: "parent",
-        children: /* @__PURE__ */ jsx(
-          ResizeableWindow,
-          {
-            width: props.windowProps?.width || 400,
-            height: props.windowProps?.height || 300,
-            handle: (resizeHandle, ref) => /* @__PURE__ */ jsx("div", { ref, children: /* @__PURE__ */ jsx(
-              Icon,
-              {
-                src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.RESIZE}`,
-                className: `custom-handle custom-handle-${resizeHandle}`
-              }
-            ) }, resizeHandle),
-            children: /* @__PURE__ */ jsx(Window, { ...props })
-          }
-        )
-      }
-    );
-  };
-  function PaperComponent(_props) {
-    return /* @__PURE__ */ jsx(Window, { ...props });
-  }
-  return /* @__PURE__ */ jsx(
-    WrapperWindowModal,
-    {
-      className: areasViewerClasses.windowModalRoot,
-      open: true,
-      scroll: "paper",
-      onKeyDown: (event) => {
-        if (event.key === "Escape") {
-          onClose && onClose(windowId);
-        }
-      },
-      "aria-labelledby": "child-modal-title",
-      "aria-describedby": "child-modal-description",
-      PaperComponent: isDesktop ? DragabblePaperComponent : PaperComponent,
-      maxWidth: false,
-      fullWidth: !isDesktop,
-      fullScreen: false,
-      disableEnforceFocus: true
-    }
-  );
-};
-const MemonizedWindowModal = React__default.memo(WindowModal);
-function AreasViewer() {
-  const areas = useAreasStore((state) => state.areasIds, shallow);
-  const windowsModals = useAreasStore((state) => state.windowsModals);
-  const hashWindowsModals = useAreasStore((state) => state.hashWindowsModals);
-  const currentArea = useAreasStore((state) => state.currentAreaId);
-  const status = useAreasStore((state) => state.ownerState.status);
-  const classesRoot = useAreasStore((state) => state.viwerClasses.root);
-  const { init } = useAreasStore((state) => state.areasActions);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      AreasViewerRoot,
-      {
-        className: classesRoot,
-        ...process.env.NODE_ENV !== "production" ? {
-          [TEST_PROP_ID]: getNameDataTestId(
-            AREAS_VIEWER_CLASS_NAME,
-            "root",
-            ""
-          )
-        } : {},
-        children: status === "loaded" ? areas.map((area) => {
-          return /* @__PURE__ */ jsx(Area, { areaId: area, selected: currentArea === area }, area);
-        }) : /* @__PURE__ */ jsx(LoadingError, { status, action: () => init() })
-      }
-    ),
-    windowsModals.map((wm) => {
-      if (hashWindowsModals[wm]) {
-        return /* @__PURE__ */ jsx(MemonizedWindowModal, { ...hashWindowsModals[wm] }, wm);
-      }
-      return null;
-    })
-  ] });
-}
-export {
-  AreasViewer as A,
-  areasViewerClasses as a,
-  useAreasViewerUtilityClasses as u
-};