@m4l/components 0.1.64 → 0.1.66

package/components/areas/components/Window/index.416a874f.js

@@ -1,855 +0,0 @@
-import React__default, { useMemo, useState, useRef, useCallback, useEffect } from "react";
-import { I as Icon } from "../../../Icon/index.0f9b360e.js";
-import { m } from "framer-motion";
-import { Skeleton, Typography, styled as styled$1, Dialog, Paper } from "@mui/material";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { styled } from "@mui/material/styles";
-import "react-router-dom";
-import "../../../animate/LoadingScreen/index.1d0c4307.js";
-import "../../../animate/PropagateLoader/index.be5b02c3.js";
-import "../index.eace295a.js";
-import "../AreasAdmin/index.51e28f63.js";
-import { useEnvironment, useModuleSkeleton, useModuleDictionary, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.be9c2ce5.js";
-import "zustand";
-import "../../contexts/AreasContext/index.0792a8d1.js";
-import { shallow } from "zustand/shallow";
-import "../AreasContainer/index.1e5e6e91.js";
-import "react-grid-layout/css/styles.css";
-import "../../../../react-resizable.e86cb01e.js";
-import { W as WindowToolsMFProvider, a as WindowMFProvider } from "../../contexts/index.2a915acf.js";
-import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.c19cb8cc.js";
-import "react-hook-form";
-import "../../../hook-form/RHFAutocomplete/index.083e23c1.js";
-import { I as Image } from "../../../Image/index.1a9c0327.js";
-import "../../../mui_extended/Typography/index.41b60a6b.js";
-import "clsx";
-import "../../../mui_extended/Accordion/index.b7487e37.js";
-import "../../../mui_extended/Avatar/index.fe06afd7.js";
-import "@mui/material/Button";
-import { B as Button } from "../../../mui_extended/Button/index.d9e0ae2e.js";
-import "@mui/lab";
-import "../../../mui_extended/Popover/index.260aae81.js";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.ec654122.js";
-import "../../../mui_extended/Pager/index.9e123670.js";
-import "../../../mui_extended/Tab/index.e0653a0a.js";
-import "../../../HelperText/index.3c07ca2a.js";
-import debounce from "lodash/debounce";
-import "../../../hook-form/RHFAutocompleteAsync/index.ba751be9.js";
-import "../../../hook-form/RHFCheckbox/index.c19393b1.js";
-import "@mui/x-date-pickers";
-import "../../../hook-form/RHFDateTime/index.6c129ce4.js";
-import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
-import "../../../hook-form/RHFTextField/index.97485ff2.js";
-import "../../../hook-form/RHFPeriod/index.c0a80aeb.js";
-import "../../../Period/index.99feb99e.js";
-import "../../../CommonActions/components/Actions/index.433cd345.js";
-import "../../../../contexts/ModalContext/index.ae8041f3.js";
-import { c as cjs } from "../../../../react-draggable.1aa81436.js";
-import "../../../ModalDialog/index.3efe049b.js";
-import { R as ResizeableWindow } from "../../../Resizeable/index.b5d42efb.js";
-import "../../../modal/WindowConfirm.c1339cf8.js";
-import "../../../modal/WindowBase.59f50553.js";
-import "lodash/isString";
-import "react-dropzone";
-import "../../../hook-form/RHFUpload/index.798eb11d.js";
-import "../../../DataGrid/index.42521a55.js";
-import "react-dnd";
-import "react-dnd-html5-backend";
-import "../../../DynamicFilter/index.442bda79.js";
-import "../../../ScrollBar/index.bbe48f4d.js";
-import "yup";
-import "@hookform/resolvers/yup";
-import "../../../../contexts/RHFormContext/index.a7511399.js";
-import "../../../LanguagePopover/index.68de7176.js";
-import "../../../NavLink/index.ae9f1cc9.js";
-import "../../../NoItemSelected/index.7cfd7613.js";
-import "../../../ObjectLogs/index.b50726fb.js";
-import "../../../../react-json-view.57125fcf.js";
-import "../../../PaperForm/index.44bf4469.js";
-import "../../../Page/index.4237c241.js";
-import "../../../PropertyValue/index.dfcfe1ba.js";
-import "../../../../react-splitter-layout.8b1655c8.js";
-import "../../../SplitLayout/index.5a8355d8.js";
-import "../../../SideBar/index.011880b6.js";
-import "../../../../vendor.a15d263e.js";
-import { a as useAreaStore } from "../../hooks/useArea/index.d6263051.js";
-import { a as useWindow, b as useWindowStore } from "../../hooks/index.f4d78492.js";
-import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
-import { v as varBounce } from "../../../animate/variants/bounce.784aaaaa.js";
-const WrapperWindow = styled("div", {
-  shouldForwardProp: (props) => props !== "selected"
-})(({ theme, selected }) => ({
-  display: "flex",
-  flexDirection: "column",
-  height: "100%",
-  width: "100%",
-  overflow: "hidden",
-  border: "1px solid gray",
-  borderTop: selected ? "1px solid red" : "1px solid gray",
-  backgroundColor: theme.palette.background.paper,
-  padding: theme.spacing(0),
-  "&.m4l_selected": {
-    borderTop: "1px solid green"
-  }
-}));
-const WrapperContent = styled("div")(() => ({
-  flexGrow: 1,
-  position: "relative"
-}));
-const Component = (props) => {
-  const {
-    component
-  } = props;
-  const store = useWindow();
-  const dynamicMFStore = useWindowStore((state) => state.dynamicMFStore);
-  const actions = useWindowStore((state) => state.actions, shallow);
-  return /* @__PURE__ */ jsx(WindowToolsMFProvider, {
-    ...actions,
-    children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
-      store: dynamicMFStore,
-      children: typeof component === "function" ? component(store) : component
-    })
-  });
-};
-React__default.memo(Component);
-const StyledHeader = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  alignItems: "center",
-  position: "relative",
-  justifyContent: "space-between",
-  minHeight: theme.spacing(5),
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  overflow: "hidden",
-  cursor: "move",
-  height: "60px",
-  " > span": {
-    marginRight: "12px"
-  },
-  "& > h5": {
-    paddingRight: theme.spacing(3),
-    borderRight: `1px solid ${theme.palette.divider}`
-  },
-  " > nav": {
-    marginRight: "12px",
-    flexGrow: 1
-  },
-  "& .splitactions.Mui-disabled": {
-    color: theme.palette.primary.main
-  },
-  "& svg ": {
-    width: "20px",
-    height: "20px"
-  }
-}));
-styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  alignItems: "center",
-  position: "relative",
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  height: "60px",
-  minHeight: "60px",
-  " > span": {
-    marginRight: "12px"
-  },
-  "& > h5": {
-    paddingRight: theme.spacing(3),
-    borderRight: `1px solid ${theme.palette.divider}`
-  },
-  " > nav": {
-    marginRight: "12px",
-    flexGrow: 1
-  },
-  "& .splitactions.Mui-disabled": {
-    color: theme.palette.primary.main
-  },
-  "& svg ": {
-    width: "20px",
-    height: "20px"
-  }
-}));
-const Wrapper = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  padding: `0 0`,
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  minHeight: "60px"
-}));
-const ModuleTitleContent = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: "auto",
-  gridGap: theme.spacing(1.75),
-  alignItems: "center",
-  width: "auto",
-  height: "auto",
-  [theme.breakpoints.up("sm")]: {
-    gridTemplateColumns: "repeat(3, auto)"
-  }
-}));
-const ModuleTitle = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: `${theme.spacing(3)} auto`,
-  gridGap: theme.spacing(2),
-  alignItems: "center",
-  width: "auto",
-  height: "auto"
-}));
-const Separator = styled("div")(({
-  theme
-}) => ({
-  display: "none",
-  alignItems: "center",
-  width: "1px",
-  background: theme.palette.divider,
-  height: "100%",
-  margin: `0 ${theme.spacing(2)}`,
-  [theme.breakpoints.up("sm")]: {
-    display: "flex"
-  }
-}));
-const Breadcrumbs = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  alignItems: "center",
-  gridTemplateColumns: `repeat(3, auto)`,
-  gridGap: theme.spacing(2)
-}));
-const ModuleActions = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: "auto",
-  alignItems: "center",
-  width: "auto",
-  height: "auto",
-  [theme.breakpoints.up("sm")]: {
-    gridTemplateColumns: `repeat(3, ${theme.spacing(3)})`,
-    gridGap: theme.spacing(2)
-  }
-}));
-function SKTModuleHeader() {
-  const isDesktop = useResponsiveDesktop();
-  return /* @__PURE__ */ jsxs(Wrapper, {
-    id: "HeaderSkeleton",
-    children: [/* @__PURE__ */ jsxs(ModuleTitleContent, {
-      children: [/* @__PURE__ */ jsxs(ModuleTitle, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 120,
-          height: 14
-        })]
-      }), /* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs(Breadcrumbs, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 68,
-          height: 14
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 4,
-          height: 4
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 68,
-          height: 14
-        })]
-      })]
-    }), /* @__PURE__ */ jsx(ModuleActions, {
-      children: isDesktop ? /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        })]
-      }) : /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 24,
-        height: 24
-      })
-    })]
-  });
-}
-const icons = {
-  CLOSE: "close.svg"
-};
-function getMenuActions(isDesktop, moduleActions) {
-  let menuActions = [...moduleActions.filter((action) => action.visibility !== "allways")];
-  if (isDesktop !== void 0 && isDesktop) {
-    menuActions = menuActions.filter((action) => action.visibility === "normal");
-  }
-  return menuActions;
-}
-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 Header() {
-  const [url_icon, title, moduleActions, onClose, container_id] = useWindowStore((state) => [state.url_icon, state.title, state.moduleActions, state.onClose, state.windowId], shallow);
-  const {
-    saveModuleCookies
-  } = useWindowStore((state) => state.internalActions);
-  const maximizedId = useAreaStore((state) => state.singleId);
-  const {
-    maximizeLayout,
-    normalizeLayouts
-  } = useAreaStore((state) => state.actions, shallow);
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const menuActions = useMemo(() => getMenuActions(isDesktop, moduleActions), [moduleActions, isDesktop]);
-  const mainActions = useMemo(() => {
-    return getMainActions(isDesktop, moduleActions);
-  }, [moduleActions, isDesktop]);
-  const onCloseLocal = () => {
-    onClose && onClose(container_id);
-  };
-  const maxNormalize = () => {
-    if (maximizedId) {
-      normalizeLayouts();
-    } else {
-      maximizeLayout(container_id);
-    }
-  };
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTModuleHeader, {});
-  }
-  return /* @__PURE__ */ jsxs(StyledHeader, {
-    id: "Header",
-    className: "m4l_draggable_handle",
-    children: [/* @__PURE__ */ jsx(Icon, {
-      src: url_icon
-    }), /* @__PURE__ */ jsx(Typography, {
-      variant: "h5",
-      sx: {
-        maxWidth: 260,
-        overflow: "hidden",
-        whiteSpace: "nowrap",
-        color: "text.primary",
-        marginLeft: "12px",
-        marginRight: "24px",
-        textOverflow: "ellipsis"
-      },
-      children: `${container_id.substring(container_id.length - 3)} - ${title}`
-    }), mainActions.map((mainAction, index) => {
-      if (!mainAction.component) {
-        return /* @__PURE__ */ jsx(IconButton, {
-          src: mainAction.urlIcon,
-          className: mainAction.className,
-          onClick: mainAction.onClick,
-          "aria-label": mainAction.label,
-          disabled: mainAction.disabled
-        }, `main_action_${index}`);
-      }
-      return /* @__PURE__ */ jsx(mainAction.component, {
-        description: mainAction.label,
-        onClick: mainAction.onClick
-      }, `main_action_${index}`);
-    }), menuActions.length > 0 && /* @__PURE__ */ jsx(MenuActions, {
-      arrowType: "right-top",
-      marginTop: "11px",
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      menuActions
-    }), onClose && /* @__PURE__ */ jsx(IconButton, {
-      onClick: onCloseLocal,
-      "aria-label": "click",
-      src: `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/${icons.CLOSE}`
-    }), isDesktop && /* @__PURE__ */ jsx(Button, {
-      onClick: maxNormalize,
-      "aria-label": "click",
-      children: maximizedId ? "Norm" : "Max"
-    }), /* @__PURE__ */ jsx(Button, {
-      onClick: saveModuleCookies,
-      "aria-label": "click",
-      children: "Grabar Props"
-    })]
-  });
-}
-const WrapperLinearProgress = styled$1("div")(() => ({
-  width: "70%",
-  margin: "auto auto"
-}));
-const WrapperFallBackNotFound = styled$1("div")(({
-  theme
-}) => ({
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  alignItems: "center",
-  gap: theme.spacing(3)
-}));
-function FallBackNotFound(props) {
-  const {
-    setNetworkRefresh
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const handlerClick = () => {
-    setNetworkRefresh((prop) => !prop);
-  };
-  return /* @__PURE__ */ jsxs(WrapperFallBackNotFound, {
-    children: [/* @__PURE__ */ jsx(m.div, {
-      variants: varBounce().in,
-      children: /* @__PURE__ */ jsx(Typography, {
-        variant: "h3",
-        paragraph: true,
-        children: getLabel("loading_mf_title")
-      })
-    }), /* @__PURE__ */ jsx(Typography, {
-      sx: {
-        color: "text.secondary"
-      },
-      children: getLabel("loading_mf_description")
-    }), /* @__PURE__ */ jsx(m.div, {
-      variants: varBounce().in,
-      children: /* @__PURE__ */ jsx(Image, {
-        src: `${host_static_assets}/${environment_assets}/frontend/domain/host/commons/assets/img/illustration_noauth.png`,
-        ratio: "1:1"
-      })
-    }), /* @__PURE__ */ jsx(Button, {
-      size: "medium",
-      variant: "contained",
-      onClick: handlerClick,
-      children: getLabel("loading_mf_intro")
-    })]
-  });
-}
-const LoadingMF = (props) => {
-  const {
-    loadingProgress,
-    setNetworkRefresh
-  } = props;
-  if (loadingProgress !== -1) {
-    return /* @__PURE__ */ jsx(WrapperLinearProgress, {
-      id: "WrapperLinearProgress",
-      children: /* @__PURE__ */ jsx(LinearProgress, {
-        variant: "determinate",
-        value: loadingProgress
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(FallBackNotFound, {
-    setNetworkRefresh
-  });
-};
-function getDivScritId(prefix, moduleId) {
-  const rotational_id = `${Math.round(new Date().getTime() / 1e3)}_rnd_${Math.round(Math.random() * 1e3)}`;
-  return {
-    divContainerId: `container_${prefix}_${moduleId}_${rotational_id}`,
-    scriptId: `script_${moduleId}_${rotational_id}`,
-    moduleId
-  };
-}
-function MFLoader(props) {
-  const {
-    prefix,
-    moduleId,
-    cache = true,
-    debug_port,
-    dynamicMFStore,
-    windowTools
-  } = props;
-  const {
-    hostThemeOptions,
-    fnComponentsOverrides
-  } = useHostTheme();
-  const {
-    networkOperation
-  } = useNetwork();
-  const environment = useEnvironment();
-  const hostTools = useHostTools();
-  const formatter = useFormatter();
-  const [isLoading, setIsLoading] = useState(true);
-  const [networkProgress, setNetworkProgress] = useState(-1);
-  const [_networkRefresh, setNetworkRefresh] = useState(false);
-  const {
-    currentLocale
-  } = useLocales();
-  const [divScript, setDivScript] = useState(getDivScritId(prefix, moduleId));
-  const refTime = useRef(0);
-  const isFirstRender = useFirstRender([moduleId]);
-  const final_host = environment.isLocalhost ? `https://localhost:${debug_port}` : `https://${window.location.host}/mf/${moduleId}`;
-  function cleanUp(dScript) {
-    try {
-      if (window[`unmount_${prefix}_${dScript.moduleId}`]) {
-        window[`unmount_${prefix}_${dScript.moduleId}`](dScript.divContainerId);
-      }
-    } catch (error) {
-    }
-    if (!cache) {
-      const script = document.getElementById(dScript.scriptId);
-      if (script) {
-        try {
-          document.head.removeChild(script);
-          delete window[`render_${prefix}_${dScript.moduleId}`];
-          delete window[`unmount_${prefix}_${dScript.moduleId}`];
-        } catch (error) {
-        }
-      }
-    }
-  }
-  const renderMicroFrontend = useCallback((newDScript) => {
-    try {
-      setIsLoading(false);
-      window[`render_${prefix}_${newDScript.moduleId}`](newDScript.divContainerId, environment, hostTools, currentLocale, {
-        hostThemeOptions,
-        fnComponentsOverrides
-      }, axiosOperation, formatter, dynamicMFStore, windowTools);
-    } catch (error) {
-    }
-  }, [hostThemeOptions, currentLocale, formatter]);
-  const debouncedSetDivScript = useCallback(debounce((newName) => {
-    const newDivScript = getDivScritId(prefix, newName);
-    if (newName !== divScript.moduleId) {
-      setDivScript({
-        ...newDivScript
-      });
-    }
-  }, 200), [divScript]);
-  useEffect(() => {
-    if (!isFirstRender) {
-      debouncedSetDivScript(moduleId + "");
-      if (moduleId !== divScript.moduleId)
-        ;
-    }
-    return () => {
-    };
-  }, [moduleId]);
-  useEffect(() => {
-    setIsLoading(true);
-    let mounted = true;
-    const controller = new AbortController();
-    const dsScript = {
-      ...divScript
-    };
-    const loadIfNotLoaded = async () => {
-      if (!window[`render_${prefix}_${moduleId}`]) {
-        let urlFile = "";
-        setNetworkProgress(0);
-        const manifest = await fetch(`${final_host}/manifest.json?rnd=${Math.random()}`).then((res) => res.json()).catch(() => {
-          console.debug("Error fetching manifest", `${final_host}/manifest.json`);
-          return void 0;
-        });
-        if (!manifest) {
-          return;
-        }
-        setNetworkProgress(10);
-        if (mounted) {
-          urlFile = `${final_host}/${manifest["src/index.tsx"]["file"]}?rnd=${Math.random()}`;
-          refTime.current = 0;
-          await networkOperation({
-            method: "GET",
-            endPoint: urlFile,
-            isRemote: !environment.isLocalhost,
-            headers: {
-              "Content-Type": "application/json"
-            },
-            onDownloadProgress: (progressEvent) => {
-              let percentCompleted = 0;
-              try {
-                if (progressEvent.lengthComputable) {
-                  percentCompleted = 10 + Math.round(progressEvent.loaded * 90 / progressEvent.total);
-                } else {
-                  if (refTime.current === 0) {
-                    refTime.current = new Date().getTime();
-                  }
-                  percentCompleted = 10 + progressEvent.loaded / 15e5 * 90;
-                  if (percentCompleted > 95)
-                    percentCompleted = 95;
-                }
-              } catch (error) {
-              }
-              if (mounted) {
-                setNetworkProgress(percentCompleted);
-              }
-            },
-            isExternalUrl: true,
-            responseType: "text",
-            signal: controller.signal
-          }).then(() => {
-            if (mounted) {
-              setNetworkProgress(100);
-            }
-          }).catch(() => {
-          });
-          if (mounted) {
-            const script = document.createElement("script");
-            script.id = divScript.scriptId;
-            script.crossOrigin = "";
-            script.type = "module";
-            script.src = urlFile || "";
-            script.onload = () => {
-              if (mounted) {
-                console.debug("Script loaded", new Date().getTime());
-                setNetworkProgress(100);
-                renderMicroFrontend(dsScript);
-              }
-            };
-            document.head.appendChild(script);
-            console.debug("Script appened", new Date().getTime());
-          }
-        }
-      } else {
-        if (mounted) {
-          renderMicroFrontend(dsScript);
-        }
-      }
-    };
-    loadIfNotLoaded();
-    return () => {
-      mounted = false;
-      controller.abort();
-      cleanUp(dsScript);
-    };
-  }, [divScript]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx("div", {
-      id: divScript.divContainerId
-    }), isLoading ? /* @__PURE__ */ jsx(LoadingMF, {
-      loadingProgress: networkProgress,
-      setNetworkRefresh
-    }) : null]
-  });
-}
-MFLoader.defaultProps = {
-  document,
-  window
-};
-const MicroFrontend = (props) => {
-  const dynamicMFStore = useWindowStore((state) => state.dynamicMFStore, shallow);
-  const moduleId = useWindowStore((state) => state.moduleId, shallow);
-  const actions = useWindowStore((state) => state.actions, shallow);
-  return /* @__PURE__ */ jsx(MFLoader, {
-    ...props,
-    moduleId,
-    dynamicMFStore,
-    windowTools: {
-      ...actions
-    }
-  });
-};
-React__default.memo(MicroFrontend);
-const InnerForHooks = (props) => {
-  const {
-    winType
-  } = props;
-  const status = useWindowStore((state) => state.status);
-  if (status !== "loaded") {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsx(WrapperContent, {
-      children: winType === "microfrontend" ? /* @__PURE__ */ jsx(MicroFrontend, {
-        ...props.mfProps
-      }) : /* @__PURE__ */ jsx(Component, {
-        component: props.component
-      })
-    })]
-  });
-};
-React__default.memo(InnerForHooks);
-const Window = (props) => {
-  const {
-    emergeType
-  } = props;
-  const selected = useAreaStore((state) => emergeType === "layout" ? state.currentLayoutId : state.currentPopUpId) === props.windowId;
-  const {
-    selectWindowPopUp,
-    selectWindowLayout
-  } = useAreaStore((state) => state.actions);
-  const onTouch = () => {
-    if (!selected) {
-      if (emergeType === "popup") {
-        selectWindowPopUp(props.windowId);
-      } else if (emergeType === "layout") {
-        selectWindowLayout(props.windowId);
-      }
-    }
-  };
-  return /* @__PURE__ */ jsx(WrapperWindow, {
-    id: "WrapperWindow",
-    selected,
-    onMouseDown: onTouch,
-    children: /* @__PURE__ */ jsx(WindowMFProvider, {
-      ...props,
-      children: /* @__PURE__ */ jsx(InnerForHooks, {
-        ...props
-      })
-    })
-  });
-};
-const MemonizedWindow = React__default.memo(Window);
-const Container = styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  height: "100%",
-  overflow: "hidden",
-  padding: theme.spacing(3)
-}));
-const WrapperWindowModal = styled(Dialog)(() => ({
-  height: "100%",
-  "&.m4l_selected": {
-    borderTop: "1px solid green"
-  }
-}));
-const DragabblePaperComponent = (props) => {
-  return /* @__PURE__ */ jsx(cjs.exports, {
-    handle: ".m4l_draggable_handle",
-    cancel: '[class*="MuiDialogContent-root"]',
-    children: /* @__PURE__ */ jsx(Paper, {
-      sx: {
-        maxHeight: "unset",
-        maxWidth: "unset"
-      },
-      ...props
-    })
-  });
-};
-function PaperComponent(props) {
-  return /* @__PURE__ */ jsx(Paper, {
-    sx: {
-      maxHeight: "unset",
-      maxWidth: "unset",
-      height: "100%"
-    },
-    ...props
-  });
-}
-const WindowModal = (props) => {
-  const {
-    closeWindowModal
-  } = useAreaStore((state) => state.actions);
-  const isDesktop = useResponsiveDesktop();
-  const onClose = () => {
-    closeWindowModal();
-  };
-  const contentComnponent = /* @__PURE__ */ jsx(Container, {
-    id: "Container",
-    children: /* @__PURE__ */ jsx(Window, {
-      ...props,
-      onClose
-    })
-  });
-  return /* @__PURE__ */ jsxs(WrapperWindowModal, {
-    open: true,
-    "aria-labelledby": "child-modal-title",
-    "aria-describedby": "child-modal-description",
-    PaperComponent: isDesktop ? DragabblePaperComponent : PaperComponent,
-    maxWidth: false,
-    fullWidth: !isDesktop,
-    fullScreen: false,
-    disableEnforceFocus: true,
-    children: [isDesktop && /* @__PURE__ */ jsx(
-      ResizeableWindow,
-      {
-        children: contentComnponent
-      }
-    ), !isDesktop && contentComnponent]
-  });
-};
-const MemonizedWindowModal = React__default.memo(WindowModal);
-const WrapperWindowsPanel = styled("div", {
-  shouldForwardProp: (props) => props !== "isDesktop"
-})(({
-  isDesktop
-}) => ({
-  display: "flex",
-  flexDirection: isDesktop ? "column" : "row",
-  height: isDesktop ? "40px" : "unset",
-  maxWidth: isDesktop ? "40px" : "unset",
-  flexGrow: "1",
-  position: "relative"
-}));
-const WrapperWindowPanel = styled("div", {
-  shouldForwardProp: (props) => props !== "selected"
-})(({
-  selected
-}) => ({
-  flexDirection: "column",
-  flexGrow: "1",
-  position: "relative",
-  width: "40px",
-  height: "40px",
-  border: selected ? "1px solid red" : "1px solid black"
-}));
-const WindowsPanel = () => {
-  const status = useAreaStore((state) => state.status);
-  const mode = useAreaStore((state) => state.viewMode);
-  const singleId = useAreaStore((state) => state.singleId);
-  const gridLayouts = useAreaStore((state) => state.gridLayouts, shallow);
-  const hashWindowsLayouts = useAreaStore((state) => state.hashWindowsLayouts, shallow);
-  const {
-    maximizeLayout
-  } = useAreaStore((state) => state.actions);
-  const isDesktop = useAreaStore((state) => state.isDesktop);
-  const onTouched = (layoutId) => {
-    maximizeLayout(layoutId);
-  };
-  if (status === "loaded") {
-    if (mode !== "single" || gridLayouts.length < 2) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(WrapperWindowsPanel, {
-      isDesktop,
-      children: gridLayouts.map((l) => {
-        return /* @__PURE__ */ jsx(WrapperWindowPanel, {
-          onClick: () => onTouched(l.i),
-          selected: singleId === l.i,
-          children: /* @__PURE__ */ jsx(Icon, {
-            src: hashWindowsLayouts[l.i].url_icon
-          })
-        }, l.i);
-      })
-    });
-  } else {
-    return null;
-  }
-};
-export {
-  MemonizedWindow as M,
-  Window as W,
-  MemonizedWindowModal as a,
-  WindowsPanel as b
-};