@m4l/components 3.1.6 → 3.1.8

package/components/areas/components/AreasAdmin/index-BU9AX60_.js

@@ -1,699 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { u as useAreasStore } from "../../hooks/useAreas/index-DBXtbtIu.js";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { useState, useRef, useMemo } from "react";
-import * as Yup from "yup";
-import clsx from "clsx";
-import { generateUtilityClasses, useTheme } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index-DiMrtgIu.js";
-import { A as AREAS_ADMIN_CLASS_NAME } from "../../constants-rqODZNZe.js";
-import { I as ICONS } from "../../icons-CwFr-alN.js";
-import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary-YUsP9beq.js";
-import { a6 as EditAreaHeader, a7 as AreasAdminRoot } from "../../../../styles/index-CqpubQQr.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { shallow } from "zustand/shallow";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/MenuActions-DA_aS7o5.js";
-import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index-BQ0XWrpK.js";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index-BgsElxUF.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index-90JsZTzb.js";
-import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index-DSVEMl41.js";
-import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index-BNIG3KAH.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index-B8lOMybH.js";
-import { P as Popover } from "../../../mui_extended/Popover/index-Dl1PwIS2.js";
-import { T as Typography } from "../../../mui_extended/Typography/index-DXq1fG8k.js";
-import { S as ScrollBar } from "../../../ScrollBar/index-BYMy_qJE.js";
-import TouchRipple from "@mui/material/ButtonBase/TouchRipple";
-import { B as Button } from "../../../mui_extended/Button/index-CgvCim_g.js";
-import { I as Icon } from "../../../Icon/index-BJF_0F6d.js";
-import { u as useOnClickOutside } from "../../index-B_Odny9h.js";
-const areasAdminClasses = generateUtilityClasses(
-  AREAS_ADMIN_CLASS_NAME,
-  [
-    /* elements */
-    "root",
-    "rootContent",
-    "areaChipRoot",
-    "areaChipTitle",
-    "areaChipDeleteButton",
-    "areasAddButton",
-    "areaContainerChipEditButton",
-    "areaContainerChips",
-    "areaContainerContentChips",
-    "areaContainerChipsIcon",
-    "areaEditPopover",
-    "areaChipMobileRoot",
-    "areaChipMobileIconContainer",
-    "areaIconLayer",
-    "areaIconLayerContent",
-    "areaChipEditButton",
-    "areasPopoverMobileOptions",
-    "areasPopoverListWindows",
-    "areasPopoverListWindowsIcon",
-    "areaContentChips",
-    /* states or variants of elements */
-    "selected",
-    "isMobile",
-    "disabled",
-    "isFocus"
-  ],
-  AREAS_ADMIN_CLASS_NAME
-);
-const useAreasAdminUtilityClasses = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.status,
-      ownerState.isMobile && "isMobile",
-      ownerState.isSkeleton && "isSkeleton",
-      ownerState.focus && "isFocus"
-    ],
-    rootContent: ["rootContent"],
-    areaChipRoot: ["areaChipRoot"],
-    areaIconLayer: ["areaIconLayer"],
-    areaContainerChipsIcon: ["areaContainerChipsIcon"],
-    areaContainerChips: ["areaContainerChips"],
-    areaContainerContentChips: ["areaContainerContentChips"],
-    areaEditPopover: ["areaEditPopover"],
-    areaChipMobileRoot: ["areaChipMobileRoot"],
-    areaChipMobileIconContainer: ["areaChipMobileIconContainer"],
-    areaChipTitle: ["areaChipTitle"],
-    areaContainerChipEditButton: ["areaContainerChipEditButton"],
-    areaChipDeleteButton: ["areaChipDeleteButton"],
-    areaChipEditButton: ["areaChipEditButton"],
-    areasAddButton: ["areasAddButton"],
-    areasPopoverMobileOptions: ["areasPopoverMobileOptions"],
-    areasPopoverListWindows: ["areasPopoverListWindows"],
-    areasPopoverListWindowsIcon: ["areasPopoverListWindowsIcon"],
-    areaContentChips: ["areaContentChips"]
-  };
-  return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_ADMIN_CLASS_NAME), {});
-};
-const ChipActionsMobile = (props) => {
-  const { handlerOpenPopoverEditArea, areaId } = props;
-  const { deleteArea } = useAreasStore((state) => state.areasActions);
-  const { setFocus } = useAreasStore((state) => state.areaAdminActions, shallow);
-  const listAreas = useAreasStore((state) => state.areasIds, shallow);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const menuActions = [
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.EDIT_AREA}`,
-      onClick: handlerOpenPopoverEditArea,
-      label: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area))
-    }
-  ];
-  if (listAreas.length > 1) {
-    menuActions.push({
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
-      onClick: () => {
-        deleteArea(areaId);
-        setFocus(false);
-      },
-      label: getLabel(getAreasDictionary(DICCTIONARY.label_delete_area))
-    });
-  }
-  return /* @__PURE__ */ jsx(
-    MenuActions,
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.SHOW_OPTIONS}`,
-      arrowType: "no-arrow",
-      marginTop: "12px",
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: "right" },
-      menuActions,
-      externalClose: () => setFocus(false)
-    }
-  );
-};
-const AreaChip = (props) => {
-  const { areaId, selected, disabled, setAnchorMenuAreas } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { deleteArea, selectArea, editArea } = useAreasStore((state) => state.areasActions);
-  const { setFocus } = useAreasStore((state) => state.areaAdminActions);
-  const areaName = useAreasStore((state) => state.hashAreas[areaId].name, shallow);
-  const listAreas = useAreasStore((state) => state.areasIds, shallow);
-  const [open, setOpen] = useState(false);
-  const { getLabel } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const anchorRef = useRef(null);
-  const theme = useTheme();
-  const onClickDeleteArea = (e) => {
-    if (listAreas.length > 1) {
-      e.stopPropagation();
-      setFocus(true);
-      deleteArea(areaId);
-    }
-  };
-  const onSubmit = (data) => {
-    editArea(areaId, data.inputEditArea);
-    setOpen(false);
-    setFocus(false);
-  };
-  const handlerOpenPopoverEditArea = (e) => {
-    e?.stopPropagation();
-    setFocus(true);
-    setOpen(true);
-  };
-  const initialValues = {
-    inputEditArea: areaName
-  };
-  const validationSchema = useMemo(
-    () => Yup.object().shape({
-      inputEditArea: Yup.string().required(
-        getLabel(getAreasDictionary(DICCTIONARY.validation_edit_area))
-      )
-    }),
-    [getLabel]
-  );
-  const handlerOnClick = (e) => {
-    setAnchorMenuAreas && setAnchorMenuAreas(e.currentTarget);
-    selectArea(areaId);
-  };
-  const rippleRef = useRef(null);
-  const onRippleStart = (e) => {
-    if (rippleRef.current) {
-      rippleRef.current.start(e);
-    }
-  };
-  const onRippleStop = (e) => {
-    if (rippleRef.current) {
-      rippleRef.current.stop(e);
-    }
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "presentation",
-        ref: anchorRef,
-        onMouseDown: onRippleStart,
-        onMouseUp: onRippleStop,
-        className: clsx(
-          areasAdminClasses.areaChipRoot,
-          selected ? areasAdminClasses.selected : null,
-          disabled ? areasAdminClasses.disabled : null
-        ),
-        onClick: (e) => {
-          handlerOnClick(e);
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaChipTitle, children: areaName }),
-          isDesktop ? /* @__PURE__ */ jsxs("div", { className: areasAdminClasses.areaContainerChipEditButton, children: [
-            /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                className: areasAdminClasses.areaChipEditButton,
-                src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.EDIT_AREA}`,
-                size: "small",
-                onClick: (e) => {
-                  handlerOpenPopoverEditArea(e);
-                },
-                tooltip: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area))
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                className: areasAdminClasses.areaChipDeleteButton,
-                src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
-                size: "small",
-                onClick: (e) => {
-                  onClickDeleteArea(e);
-                },
-                tooltip: getLabel(getAreasDictionary(DICCTIONARY.label_delete_area))
-              }
-            )
-          ] }) : /* @__PURE__ */ jsx(
-            ChipActionsMobile,
-            {
-              areaId,
-              handlerOpenPopoverEditArea
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "presentation",
-        onClick: (e) => {
-          e.stopPropagation();
-        },
-        children: /* @__PURE__ */ jsx(
-          Popover,
-          {
-            arrowType: "top-center",
-            open,
-            className: areasAdminClasses.areaEditPopover,
-            anchorEl: anchorRef.current,
-            anchorOrigin: { vertical: "bottom", horizontal: "center" },
-            transformOrigin: { vertical: "top", horizontal: "center" },
-            onClose: () => {
-              setFocus(false);
-              setOpen(false);
-            },
-            sx: {
-              mt: "10px",
-              ...theme.components?.M4LAreasAdminEditPopover?.styleOverrides
-            },
-            children: /* @__PURE__ */ jsxs(
-              RHFormProvider,
-              {
-                onSubmit,
-                values: initialValues,
-                validationSchema,
-                children: [
-                  /* @__PURE__ */ jsxs(EditAreaHeader, { children: [
-                    /* @__PURE__ */ jsx(Typography, { children: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area)) }),
-                    /* @__PURE__ */ jsx(
-                      IconButton,
-                      {
-                        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CLOSE}`,
-                        size: "small",
-                        onClick: () => {
-                          setFocus(false);
-                          setOpen(false);
-                        }
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    RHFTextField,
-                    {
-                      name: "inputEditArea",
-                      skeletonWidth: "70%",
-                      skeletonHeight: "18px",
-                      sx: { mt: "20px" }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(Actions, { children: [
-                    /* @__PURE__ */ jsx(
-                      ActionCancel,
-                      {
-                        onClick: () => {
-                          setOpen(false);
-                          setFocus(false);
-                        },
-                        variant: "outlined",
-                        skeletonWidth: "100%"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "100%" })
-                  ] })
-                ]
-              }
-            )
-          }
-        )
-      }
-    )
-  ] });
-};
-AreaChip.displayName = "AreaButtons";
-const ChipMobile = (props) => {
-  const { areaId, selected, disabled, setAnchorMenuAreas } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { deleteArea, selectArea, editArea } = useAreasStore((state) => state.areasActions);
-  const { setFocus } = useAreasStore((state) => state.areaAdminActions);
-  const areaName = useAreasStore((state) => state.hashAreas[areaId].name, shallow);
-  const listAreas = useAreasStore((state) => state.areasIds, shallow);
-  const [open, setOpen] = useState(false);
-  const { getLabel } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const anchorRef = useRef(null);
-  const theme = useTheme();
-  const onClickDeleteArea = (e) => {
-    if (listAreas.length > 1) {
-      e.stopPropagation();
-      setFocus(true);
-      deleteArea(areaId);
-    }
-  };
-  const onSubmit = (data) => {
-    editArea(areaId, data.inputEditArea);
-    setOpen(false);
-    setFocus(false);
-  };
-  const handlerOpenPopoverEditArea = (e) => {
-    e?.stopPropagation();
-    setFocus(true);
-    setOpen(true);
-  };
-  const initialValues = {
-    inputEditArea: areaName
-  };
-  const validationSchema = useMemo(
-    () => Yup.object().shape({
-      inputEditArea: Yup.string().required(
-        getLabel(getAreasDictionary(DICCTIONARY.validation_edit_area))
-      )
-    }),
-    [getLabel]
-  );
-  const handlerOnClick = (e) => {
-    setAnchorMenuAreas && setAnchorMenuAreas(e.currentTarget);
-    selectArea(areaId);
-  };
-  const rippleRef = useRef(null);
-  const onRippleStart = (e) => {
-    if (rippleRef.current) {
-      rippleRef.current.start(e);
-    }
-  };
-  const onRippleStop = (e) => {
-    if (rippleRef.current) {
-      rippleRef.current.stop(e);
-    }
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "presentation",
-        ref: anchorRef,
-        onMouseDown: onRippleStart,
-        onMouseUp: onRippleStop,
-        className: clsx(
-          areasAdminClasses.areaChipRoot,
-          selected ? areasAdminClasses.selected : null,
-          disabled ? areasAdminClasses.disabled : null
-        ),
-        onClick: (e) => {
-          handlerOnClick(e);
-        },
-        children: [
-          /* @__PURE__ */ jsx(TouchRipple, { ref: rippleRef, center: false, style: { position: "absolute", inset: "0" } }),
-          /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaChipTitle, children: areaName })
-        ]
-      }
-    ),
-    isDesktop ? /* @__PURE__ */ jsxs("div", { className: areasAdminClasses.areaContainerChipEditButton, children: [
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          className: areasAdminClasses.areaChipEditButton,
-          src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.EDIT_AREA}`,
-          size: "small",
-          onClick: (e) => {
-            handlerOpenPopoverEditArea(e);
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          className: areasAdminClasses.areaChipDeleteButton,
-          src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
-          size: "small",
-          onClick: (e) => {
-            onClickDeleteArea(e);
-          }
-        }
-      )
-    ] }) : /* @__PURE__ */ jsx(
-      ChipActionsMobile,
-      {
-        areaId,
-        handlerOpenPopoverEditArea
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "presentation",
-        onClick: (e) => {
-          e.stopPropagation();
-        },
-        children: /* @__PURE__ */ jsx(
-          Popover,
-          {
-            arrowType: "top-center",
-            open,
-            className: areasAdminClasses.areaEditPopover,
-            anchorEl: anchorRef.current,
-            anchorOrigin: { vertical: "bottom", horizontal: "center" },
-            transformOrigin: { vertical: "top", horizontal: "center" },
-            onClose: () => {
-              setFocus(false);
-              setOpen(false);
-            },
-            sx: {
-              mt: "10px",
-              ...theme.components?.M4LAreasAdminEditPopover?.styleOverrides
-            },
-            children: /* @__PURE__ */ jsxs(
-              RHFormProvider,
-              {
-                onSubmit,
-                values: initialValues,
-                validationSchema,
-                children: [
-                  /* @__PURE__ */ jsxs(EditAreaHeader, { children: [
-                    /* @__PURE__ */ jsx(Typography, { children: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area)) }),
-                    /* @__PURE__ */ jsx(
-                      IconButton,
-                      {
-                        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CLOSE}`,
-                        size: "small",
-                        onClick: () => {
-                          setFocus(false);
-                          setOpen(false);
-                        }
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    RHFTextField,
-                    {
-                      name: "inputEditArea",
-                      skeletonWidth: "70%",
-                      skeletonHeight: "18px",
-                      sx: { mt: "20px" }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(Actions, { children: [
-                    /* @__PURE__ */ jsx(
-                      ActionCancel,
-                      {
-                        onClick: () => {
-                          setOpen(false);
-                          setFocus(false);
-                        },
-                        variant: "outlined",
-                        skeletonWidth: "100%"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "100%" })
-                  ] })
-                ]
-              }
-            )
-          }
-        )
-      }
-    )
-  ] });
-};
-ChipMobile.displayName = "AreaButtons";
-const AreaChipMobile = () => {
-  const areas = useAreasStore(
-    (state) => state.areasIds.map((a) => ({ id: a, name: state.hashAreas[a].name })),
-    shallow
-  );
-  const { selectArea } = useAreasStore((state) => state.areasActions);
-  const currentAreaId = useAreasStore((state) => state.currentAreaId, shallow);
-  const { addArea } = useAreasStore((state) => state.areasActions, shallow);
-  const { setFocus } = useAreasStore((state) => state.areaAdminActions, shallow);
-  const [anchorMenuAreas, setAnchorMenuAreas] = useState(null);
-  const { getLabel } = useModuleDictionary();
-  const theme = useTheme();
-  const currentArea = areas.find((area) => area.id === currentAreaId);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const menuActions = useMemo(
-    () => areas.filter((area) => area.id !== currentAreaId).map((area) => {
-      return {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.LAYERS}`,
-        onClick: () => {
-          selectArea(area.id);
-          setFocus(false);
-        },
-        label: area.name
-      };
-    }),
-    [areas, currentAreaId]
-  );
-  const handlerSetAnchorMenuAreas = (element) => {
-    setFocus(false);
-    setAnchorMenuAreas(element);
-  };
-  return /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaChipMobileRoot, children: /* @__PURE__ */ jsxs("div", { className: areasAdminClasses.areaContainerContentChips, children: [
-    currentArea ? /* @__PURE__ */ jsx(
-      ChipMobile,
-      {
-        areaId: currentArea.id,
-        selected: true,
-        disabled: true,
-        setAnchorMenuAreas
-      },
-      currentArea.id
-    ) : null,
-    menuActions.length >= 0 ? /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaChipMobileIconContainer, children: /* @__PURE__ */ jsx(
-      MenuActions,
-      {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CHEVRON_DOWN}`,
-        arrowType: "no-arrow",
-        marginTop: "12px!important",
-        marginLeft: "14px!important",
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
-        menuActions,
-        externalOpen: anchorMenuAreas,
-        externalClose: handlerSetAnchorMenuAreas,
-        className: areasAdminClasses.areasPopoverMobileOptions,
-        menuActionSx: theme.components?.M4LAreasAdminMobilePopoverOptions?.styleOverrides,
-        endListElement: /* @__PURE__ */ jsx(
-          Button,
-          {
-            onClick: () => {
-              addArea();
-              setAnchorMenuAreas(null);
-            },
-            variant: "outlined",
-            startIcon: /* @__PURE__ */ jsx(
-              Icon,
-              {
-                src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`
-              }
-            ),
-            children: getLabel(getAreasDictionary(DICCTIONARY.area_add_new))
-          }
-        )
-      }
-    ) }) : null
-  ] }) });
-};
-const PanelWindowPopUp = (props) => {
-  const { currentAreaId } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const windowsLayouts = useAreasStore(
-    (state) => state.hashAreas[currentAreaId].layoutItemsIds.filter((li) => state.hashWindows[li].emergeType === "layout").map((lim) => {
-      const w = state.hashWindows[lim];
-      return {
-        i: w.windowId,
-        url_icon: w.url_icon,
-        title: w.title
-      };
-    }),
-    shallow
-  );
-  const theme = useTheme();
-  const { maximizeLayout } = useAreasStore((state) => state.areaActions);
-  const onTouched = (layoutId) => {
-    maximizeLayout(currentAreaId, layoutId);
-  };
-  const menuActions = windowsLayouts.map((element) => {
-    return {
-      onClick: () => onTouched(element.i),
-      label: element.title,
-      urlIcon: element.url_icon
-    };
-  });
-  return menuActions.length > 0 ? /* @__PURE__ */ jsx(
-    MenuActions,
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.LAYERS}`,
-      arrowType: "no-arrow",
-      marginTop: "12px!important",
-      marginLeft: "14px!important",
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: "right" },
-      menuActions,
-      className: areasAdminClasses.areasPopoverListWindows,
-      iconButtonClassName: areasAdminClasses.areasPopoverListWindowsIcon,
-      menuActionSx: theme.components?.M4LAreasAdminMobilePopoverOptions?.styleOverrides
-    }
-  ) : null;
-};
-function AreasAdmin() {
-  const areas = useAreasStore((state) => state.areasIds, shallow);
-  const currentArea = useAreasStore((state) => state.currentAreaId, shallow);
-  const status = useAreasStore((state) => state.ownerState.status);
-  const { setFocus } = useAreasStore((state) => state.areaAdminActions, shallow);
-  const classesRoot = useAreasStore((state) => state.adminClasses.root);
-  const areasLength = useAreasStore((state) => state.areasIds.length);
-  const isDesktop = useResponsiveDesktop();
-  const { addArea } = useAreasStore((state) => state.areasActions, shallow);
-  const maximizedId = useAreasStore(
-    (state) => state.hashAreas[currentArea] ? state.hashAreas[currentArea].maximizedId : false,
-    shallow
-  );
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const divRef = useRef(null);
-  const divRefOut = useRef(null);
-  const handleClickOutsideFn = () => {
-    setFocus(false);
-  };
-  useOnClickOutside(divRef, handleClickOutsideFn, divRefOut);
-  const rippleRef = useRef(null);
-  const onRippleStart = (e) => {
-    if (rippleRef.current) {
-      rippleRef.current.start(e);
-    }
-  };
-  const onRippleStop = (e) => {
-    if (rippleRef.current) {
-      rippleRef.current.stop(e);
-    }
-  };
-  if (status !== "loaded") {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    AreasAdminRoot,
-    {
-      ref: divRefOut,
-      onMouseDown: onRippleStart,
-      onMouseUp: onRippleStop,
-      className: classesRoot,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          role: "presentation",
-          ref: divRef,
-          className: areasAdminClasses.rootContent,
-          onClick: () => setFocus(true),
-          children: [
-            /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaContainerChipsIcon, children: /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaContainerChips, children: /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaContainerContentChips, children: isDesktop ? /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaContentChips, children: areas.map((area) => /* @__PURE__ */ jsx(
-              AreaChip,
-              {
-                areaId: area,
-                selected: area === currentArea,
-                disabled: areasLength === 1
-              },
-              area
-            )) }) }) : /* @__PURE__ */ jsx(AreaChipMobile, {}) }) }) }),
-            isDesktop ? /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                className: areasAdminClasses.areasAddButton,
-                src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`,
-                size: "small",
-                onClick: addArea,
-                tooltip: getLabel(getAreasDictionary(DICCTIONARY.area_add_new))
-              }
-            ) : null,
-            !isDesktop && maximizedId ? /* @__PURE__ */ jsx(PanelWindowPopUp, { currentAreaId: currentArea }) : null
-          ]
-        }
-      )
-    }
-  );
-}
-export {
-  AreasAdmin as A,
-  areasAdminClasses as a,
-  useAreasAdminUtilityClasses as u
-};