@m4l/components 0.1.83 → 0.1.84

package/components/areas/components/AreasAdmin/index.8ab71eb9.js

@@ -0,0 +1,718 @@
+import { I as IconButton } from "../../../mui_extended/IconButton/index.62aea582.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.b8449343.js";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { useState, useRef, useMemo } from "react";
+import * as Yup from "yup";
+import { generateUtilityClasses, useTheme } from "@mui/material";
+import "../../../mui_extended/Accordion/index.46771196.js";
+import { I as Icon } from "../../../Icon/index.d1402200.js";
+import clsx from "clsx";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { T as Typography } from "../../../mui_extended/Typography/index.443590d6.js";
+import "../../../mui_extended/Avatar/index.75e6ed57.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import { B as Button } from "../../../mui_extended/Button/index.40af964e.js";
+import "../../../mui_extended/CheckBox.38abccd8.js";
+import "../../../mui_extended/Badge/index.cad260fe.js";
+import "../../../Image/index.c18ebf5a.js";
+import "@mui/lab";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.2493b1b1.js";
+import { P as Popover } from "../../../mui_extended/Popover/index.9f35d0eb.js";
+import "../../../mui_extended/Pager/index.a7f87c96.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import "../../../mui_extended/Tab/index.756fe693.js";
+import "../../../mui_extended/Tooltip/index.5a795dcd.js";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../../../utils/index.c43a95f4.js";
+import { A as AREAS_ADMIN_CLASS_NAME } from "../../constants.66529246.js";
+import { I as ICONS } from "../../icons.8266ccc8.js";
+import "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
+import "../../../../contexts/ModalContext/index.51da83de.js";
+import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.b9266262.js";
+import "react-hook-form";
+import "../../../hook-form/RHFAutocomplete/index.d5afb409.js";
+import "../../../HelperText/index.a47ff233.js";
+import "lodash/debounce";
+import "../../../hook-form/RHFAutocompleteAsync/index.a4f00088.js";
+import "../../../hook-form/RHFCheckbox/index.9bf6edb0.js";
+import "@mui/x-date-pickers";
+import "../../../hook-form/RHFDateTime/index.a2c1ed2c.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.5a0fa776.js";
+import "../../../hook-form/RHFPeriod/index.b5204ce2.js";
+import "../../../Period/index.e129cdec.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.e70e8779.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.29517521.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.a9420126.js";
+import "../../../../react-draggable.7abb5d0a.js";
+import "../../../Resizeable/index.9a9c79a4.js";
+import "../../../modal/index.6f281ef8.js";
+import { shallow } from "zustand/shallow";
+import { styled } from "@mui/material/styles";
+import { S as ScrollBar } from "../../../ScrollBar/index.d4410cb5.js";
+import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.afb7e3d9.js";
+import TouchRipple from "@mui/material/ButtonBase/TouchRipple";
+import "../AreasViewer/index.933e506b.js";
+import "../../../LinearProgressIndeterminate/index.60dabc06.js";
+import "../../contexts/AreasContext/index.230d1584.js";
+import "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
+import "zustand";
+import "lodash/isString";
+import "react-dropzone";
+import "../../../hook-form/RHFUpload/index.b36539d6.js";
+import { u as useOnClickOutside } from "../../index.32db4fa7.js";
+const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
+  "root",
+  "areaChipRoot",
+  "areaChipTitle",
+  "areaChipDeleteButton",
+  "areasAddButton",
+  "areaContainerChipEditButton",
+  "areaContainerChips",
+  "areaContainerContentChips",
+  "areaContainerChipsIcon",
+  "areaEditPopover",
+  "areaChipMobileRoot",
+  "areaChipMobileIconContainer",
+  "areaIconLayer",
+  "areaIconLayerContent",
+  "areaChipEditButton",
+  "areasPopoverMobileOptions",
+  "areasPopoverListWindows",
+  "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"],
+    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"]
+  };
+  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.areas, 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.areas, shallow);
+  const [open, setOpen] = useState(false);
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const anchorRef = useRef(null);
+  const theme = useTheme();
+  const onClickDeleteArea = (e) => {
+    console.log("listAreas", listAreas);
+    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) => {
+    console.log("evento de handlerOnClick");
+    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: "extraSmall",
+          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: "extraSmall",
+          onClick: (e) => {
+            onClickDeleteArea(e);
+          }
+        })]
+      }) : /* @__PURE__ */ jsx(ChipActionsMobile, {
+        areaId,
+        handlerOpenPopoverEditArea
+      })]
+    }), /* @__PURE__ */ jsx("div", {
+      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(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.areas, shallow);
+  const [open, setOpen] = useState(false);
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const anchorRef = useRef(null);
+  const theme = useTheme();
+  const onClickDeleteArea = (e) => {
+    console.log("listAreas", listAreas);
+    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) => {
+    console.log("evento de handlerOnClick");
+    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: "extraSmall",
+        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: "extraSmall",
+        onClick: (e) => {
+          onClickDeleteArea(e);
+        }
+      })]
+    }) : /* @__PURE__ */ jsx(ChipActionsMobile, {
+      areaId,
+      handlerOpenPopoverEditArea
+    }), /* @__PURE__ */ jsx("div", {
+      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(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.areas.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);
+  console.log("anchorMenuAreas change", anchorMenuAreas);
+  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);
+  };
+  console.log("menuActions areas", menuActions);
+  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]
+    })
+  });
+};
+function AreasAdmin() {
+  const areas = useAreasStore((state) => state.areas, 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.areas.length);
+  const isDesktop = useResponsiveDesktop();
+  const {
+    addArea
+  } = useAreasStore((state) => state.areasActions, shallow);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  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("div", {
+    ref: divRefOut,
+    style: {
+      width: "100%",
+      height: "100%",
+      position: "static"
+    },
+    onMouseDown: onRippleStart,
+    onMouseUp: onRippleStop,
+    children: /* @__PURE__ */ jsxs(AreasAdminRoot, {
+      ref: divRef,
+      className: classesRoot,
+      onClick: () => setFocus(true),
+      children: [/* @__PURE__ */ jsxs("div", {
+        className: areasAdminClasses.areaContainerChipsIcon,
+        children: [isDesktop ? /* @__PURE__ */ jsx("div", {
+          className: areasAdminClasses.areaIconLayer,
+          children: /* @__PURE__ */ jsx("div", {
+            className: areasAdminClasses.areaIconLayerContent,
+            children: /* @__PURE__ */ jsx(Icon, {
+              src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.LAYERS}`
+            })
+          })
+        }) : null, /* @__PURE__ */ jsx("div", {
+          className: areasAdminClasses.areaContainerChips,
+          children: /* @__PURE__ */ jsx("div", {
+            className: areasAdminClasses.areaContainerContentChips,
+            children: isDesktop ? /* @__PURE__ */ jsx(ScrollBar, {
+              children: /* @__PURE__ */ jsx(Fragment, {
+                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
+      }) : null]
+    })
+  });
+}
+export {
+  AreasAdmin as A,
+  useAreasAdminUtilityClasses as u
+};