@m4l/components 0.2.35 → 0.2.36

package/components/areas/components/AreasAdmin/index.f239c717.js

@@ -0,0 +1,733 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { u as useAreasStore } from "../../hooks/useAreas/index.cedd30ee.js";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { useState, useRef, useMemo } from "react";
+import * as Yup from "yup";
+import clsx from "clsx";
+import { generateUtilityClasses, styled, useTheme } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../../../utils/index.0718eeac.js";
+import { A as AREAS_ADMIN_CLASS_NAME } from "../../constants.66529246.js";
+import { I as ICONS } from "../../icons.8266ccc8.js";
+import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
+import { useResponsiveDesktop, useResponsiveContainerStore } from "@m4l/graphics";
+import { shallow } from "zustand/shallow";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.d92ed0d6.js";
+import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.bf3a2812.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.fa97889a.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.273645af.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.46f636e9.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.7406bd47.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.b0ee4965.js";
+import { P as Popover } from "../../../mui_extended/Popover/index.4e7340b4.js";
+import { T as Typography } from "../../../mui_extended/Typography/index.a1e774a2.js";
+import { S as ScrollBar } from "../../../ScrollBar/index.4b965665.js";
+import TouchRipple from "@mui/material/ButtonBase/TouchRipple";
+import { B as Button } from "../../../mui_extended/Button/index.5395d101.js";
+import { I as Icon } from "../../../Icon/index.ee7b85c9.js";
+import { u as useOnClickOutside } from "../../index.4cc6a221.js";
+const areasAdminClasses = generateUtilityClasses(
+  AREAS_ADMIN_CLASS_NAME,
+  [
+    "root",
+    "rootContent",
+    "areaChipRoot",
+    "areaChipTitle",
+    "areaChipDeleteButton",
+    "areasAddButton",
+    "areaContainerChipEditButton",
+    "areaContainerChips",
+    "areaContainerContentChips",
+    "areaContainerChipsIcon",
+    "areaEditPopover",
+    "areaChipMobileRoot",
+    "areaChipMobileIconContainer",
+    "areaIconLayer",
+    "areaIconLayerContent",
+    "areaChipEditButton",
+    "areasPopoverMobileOptions",
+    "areasPopoverListWindows",
+    "areasPopoverListWindowsIcon",
+    "areaContentChips",
+    "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), {});
+};
+styled("div")(() => ({
+  display: "flex",
+  flexDirection: "row",
+  border: "1px solid gray",
+  "&.active": {
+    border: "1px solid red"
+  }
+}));
+styled("div")(({ theme }) => ({
+  height: "100%",
+  width: theme.spacing(1),
+  backgroundColor: theme.palette.background.default,
+  "&.active": {
+    backgroundColor: theme.palette.primary.main
+  }
+}));
+const EditAreaHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  width: "100%",
+  height: "25px",
+  borderBottom: "1px solid",
+  borderColor: theme.palette.state.default,
+  justifyContent: "space-between",
+  alignItems: "center"
+}));
+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 AreasAdminRoot = styled("div")`
+  display: flex;
+  position: relative;
+  background-color: transparent;
+
+  //areaRoot
+  & .${areasAdminClasses.areaChipRoot} {
+    display: flex;
+  }
+
+  ${(props) => props.theme.components?.M4LAreasAdmin?.styleOverrides}
+`;
+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();
+  useResponsiveContainerStore((state) => state.isUpSm, shallow);
+  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,
+  useAreasAdminUtilityClasses as u
+};