@m4l/components 0.2.34 → 0.2.36

package/components/areas/components/AreasAdmin/index.820a00ab.js

@@ -1,737 +0,0 @@
-import { u as useAreasStore } from "../../hooks/useAreas/index.caa92660.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.6469f148.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 { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.90f53670.js";
-import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.7b2a8723.js";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.1bfa601f.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index.fa7ab18c.js";
-import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.416cbf9b.js";
-import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.094290fd.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.f8a3021b.js";
-import { P as Popover } from "../../../mui_extended/Popover/index.d85de73b.js";
-import { T as Typography } from "../../../mui_extended/Typography/index.379dd374.js";
-import { S as ScrollBar } from "../../../ScrollBar/index.7dfc2f29.js";
-import TouchRipple from "@mui/material/ButtonBase/TouchRipple";
-import { B as Button } from "../../../mui_extended/Button/index.c3084916.js";
-import { I as Icon } from "../../../Icon/index.ad330e78.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 /* @__PURE__ */ jsx(Fragment, {
-    children: 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 isUpSm = useResponsiveContainerStore((state) => state.isUpSm, shallow);
-  console.log("host isUpSm", isUpSm);
-  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
-};