@m4l/components 1.0.0 → 1.0.2

package/components/mui_extended/Popover/index.8e5ac765.js

@@ -0,0 +1,1041 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { u as useDynamicFilterStore, P as PopoverMenuStyled, a as PopoverMenuItemStyled, b as PopoverMenuItemIconStyled, c as PopoverMenuItemLabelStyled, f as fieldFactory, d as PopoverStyled, e as PopoverHeaderStyled, g as PopoverHeaderIconStyled, h as PopoverHeaderTitleStyled, i as PopoverContainerFieldsStyled, j as DataTypeComponent, k as PopoverHeaderActionsStyled } from "../../DynamicFilter/index.05e15fb8.js";
+import { useModuleDictionary, useEnvironment, useNetwork, useModulePrivileges } from "@m4l/core";
+import React__default, { useRef, useMemo, useCallback, useState, useEffect } from "react";
+import { R as RHFormProvider } from "../../../contexts/RHFormContext/index.e942a298.js";
+import { d as ActionCancel, e as ActionIntro, C as ColumnSetCheckFormatter, a as DataGrid } from "../../../vendor.3eadfa16.js";
+import { Popover as Popover$1, generateUtilityClasses, generateUtilityClass, styled as styled$1, Stack, MenuItem, Tooltip, FormControl, RadioGroup, FormControlLabel, Radio, useTheme } from "@mui/material";
+import { I as Image } from "../../Image/index.0d32558e.js";
+import { useLocales } from "@m4l/graphics";
+import { styled } from "@mui/material/styles";
+import { I as ImageButton } from "../Button/index.a7dc6ef0.js";
+import { unstable_composeClasses } from "@mui/base";
+import { T as TEST_PROP_ID } from "../../areas/constants.630a4f42.js";
+import { C as CircularProgress } from "../CircularProgress/index.967e70b7.js";
+import { M as MAP_DICCTIONARY } from "../../areas/dictionary.19b25583.js";
+import { M as MAP_ICONS } from "../../areas/icons.504ec098.js";
+import { shallow } from "zustand/shallow";
+import { I as Icon } from "../../Icon/index.2e8ec5a1.js";
+import { u as useMapStore, a as useDisableZoomEvents, m as mapClasses } from "../../maps/index.ba1ccfad.js";
+import { u as useStateRef } from "../../../hooks/useStateRef/index.538edb89.js";
+import clsx from "clsx";
+import { C as CheckBox } from "../CheckBox/index.c5c8721c.js";
+import { I as IconButton } from "../IconButton/index.87f4726c.js";
+const PopoverRoot = styled(Popover$1)(({ theme }) => ({
+  ...theme.components?.M4LPopover?.styleOverrides
+}));
+generateUtilityClasses("M4LPopover", [
+  "root",
+  "arrowStyle",
+  "noArrow",
+  "topLeft",
+  "topCenter",
+  "topRight",
+  "bottomLeft",
+  "bottomCenter",
+  "bottomRight",
+  "leftTop",
+  "leftCenter",
+  "leftBottom",
+  "rightTop",
+  "rightCenter",
+  "rightBottom"
+]);
+function getPopoverClassesUtilityClass(slot) {
+  return generateUtilityClass("M4LPopover", slot);
+}
+const useUtilityClasses$1 = (ownerState) => {
+  const slots = {
+    root: ["root"],
+    arrowStyle: [
+      "arrowStyle",
+      ownerState.arrowType === "top-left" && "topLeft",
+      ownerState.arrowType === "top-center" && "topCenter",
+      ownerState.arrowType === "top-right" && "topRight",
+      ownerState.arrowType === "bottom-left" && "bottomLeft",
+      ownerState.arrowType === "bottom-center" && "bottomCenter",
+      ownerState.arrowType === "bottom-right" && "bottomRight",
+      ownerState.arrowType === "left-top" && "leftTop",
+      ownerState.arrowType === "left-center" && "leftCenter",
+      ownerState.arrowType === "left-bottom" && "leftBottom",
+      ownerState.arrowType === "right-top" && "rightTop",
+      ownerState.arrowType === "right-center" && "rightCenter",
+      ownerState.arrowType === "right-bottom" && "rightBottom"
+    ]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPopoverClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const ArrowStyle = styled$1("span")(({ arrowType, theme }) => {
+  const SIZE = 12;
+  const POSITION = -(SIZE / 2);
+  const borderStyle = `solid 1px ${theme.vars.palette.state.borderDens}`;
+  const topStyle = {
+    borderRadius: "0 0 3px 0",
+    top: POSITION,
+    borderBottom: borderStyle,
+    borderRight: borderStyle
+  };
+  const bottomStyle = {
+    borderRadius: "3px 0 0 0",
+    bottom: POSITION,
+    borderTop: borderStyle,
+    borderLeft: borderStyle
+  };
+  const leftStyle = {
+    borderRadius: "0 3px 0 0",
+    left: POSITION,
+    borderTop: borderStyle,
+    borderRight: borderStyle
+  };
+  const rightStyle = {
+    borderRadius: "0 0 0 3px",
+    right: POSITION,
+    borderBottom: borderStyle,
+    borderLeft: borderStyle
+  };
+  return {
+    display: "none",
+    [theme.breakpoints.up("sm")]: {
+      width: SIZE,
+      height: SIZE,
+      content: "''",
+      position: "absolute",
+      display: "block",
+      transform: "rotate(-135deg)",
+      background: theme.vars.palette.background.default
+    },
+    ...arrowType === "top-left" && { ...topStyle, left: 20 },
+    ...arrowType === "top-center" && { ...topStyle, left: 0, right: 0, margin: "auto" },
+    ...arrowType === "top-right" && { ...topStyle, right: 20 },
+    ...arrowType === "bottom-left" && { ...bottomStyle, left: 20 },
+    ...arrowType === "bottom-center" && { ...bottomStyle, left: 0, right: 0, margin: "auto" },
+    ...arrowType === "bottom-right" && { ...bottomStyle, right: 20 },
+    ...arrowType === "left-top" && { ...leftStyle, top: 20 },
+    ...arrowType === "left-center" && { ...leftStyle, top: 0, bottom: 0, margin: "auto" },
+    ...arrowType === "left-bottom" && { ...leftStyle, bottom: 20 },
+    ...arrowType === "right-top" && { ...rightStyle, top: 20 },
+    ...arrowType === "right-center" && { ...rightStyle, top: 0, bottom: 0, margin: "auto" },
+    ...arrowType === "right-bottom" && { ...rightStyle, bottom: 20 }
+  };
+});
+const Popover = (props) => {
+  const { children, arrowType = "top-right", className, ...other } = props;
+  const ownerState = {
+    arrowType
+  };
+  const classes = useUtilityClasses$1(ownerState);
+  return /* @__PURE__ */ jsxs(
+    PopoverRoot,
+    {
+      className: clsx(classes.root, className),
+      "data-testid": "PopoverRoot",
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      transitionDuration: 0,
+      PaperProps: {
+        sx: {
+          p: 1,
+          overflow: "inherit"
+        }
+      },
+      ...other,
+      children: [
+        /* @__PURE__ */ jsx(
+          ArrowStyle,
+          {
+            className: classes.arrowStyle,
+            "data-testid": "ArrowStyle",
+            arrowType
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+function usePopoverMenuFields() {
+  const { getLabel } = useModuleDictionary();
+  const fnAnchorEl = useDynamicFilterStore((state) => state.fnAnchorEl);
+  const { showPopoverFilterForAdd, closePopoverMenuFields } = useDynamicFilterStore(
+    (state) => state.actions
+  );
+  function handleOpenPopUpClickItem(_event, field) {
+    if (fnAnchorEl) {
+      showPopoverFilterForAdd(fnAnchorEl(), field);
+    }
+  }
+  function handleClosePopover() {
+    closePopoverMenuFields(false);
+  }
+  function getItemLabel(field) {
+    return field.label ?? getLabel(field.dictionaryId);
+  }
+  return {
+    fnAnchorEl,
+    getItemLabel,
+    handleClosePopover,
+    handleOpenPopUpClickItem
+  };
+}
+function PopoverMenuFields(props) {
+  const { fields, selectFieldIndex } = props;
+  const { fnAnchorEl, handleOpenPopUpClickItem, handleClosePopover, getItemLabel } = usePopoverMenuFields();
+  return /* @__PURE__ */ jsx(
+    PopoverMenuStyled,
+    {
+      disableAutoFocus: true,
+      disableRestoreFocus: true,
+      arrowType: "top-left",
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      open: Boolean(fnAnchorEl),
+      onClose: handleClosePopover,
+      anchorEl: fnAnchorEl?.(),
+      ownerState: {},
+      children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */ jsxs(
+        PopoverMenuItemStyled,
+        {
+          dense: true,
+          selected: index === selectFieldIndex,
+          onClick: (event) => handleOpenPopUpClickItem(event, field),
+          ownerState: {},
+          children: [
+            /* @__PURE__ */ jsx(PopoverMenuItemIconStyled, { src: field.urlIcon, ownerState: {} }),
+            /* @__PURE__ */ jsx(PopoverMenuItemLabelStyled, { ownerState: {}, children: getItemLabel(field) })
+          ]
+        },
+        `menu_action_${getItemLabel(field)}`
+      ))
+    }
+  );
+}
+function usePopoverFilter() {
+  let anchorEl;
+  let field;
+  let formFilter;
+  let filterFormValue;
+  let popupValidationSchema;
+  const { getLabel } = useModuleDictionary();
+  const popoverFilterData = useDynamicFilterStore((state) => state.popoverFilterData);
+  const { hidePopoverFilter, addFilter, updateFilter, getNewId } = useDynamicFilterStore(
+    (state) => state.actions
+  );
+  const refPreviousPopoverFilterData = useRef(popoverFilterData);
+  const statusLoad = useMemo(() => {
+    let returnStatus;
+    if (popoverFilterData && refPreviousPopoverFilterData.current === void 0) {
+      returnStatus = "ready";
+    } else if (!popoverFilterData) {
+      returnStatus = "initial";
+    } else {
+      returnStatus = "reload_values_provider";
+    }
+    refPreviousPopoverFilterData.current = popoverFilterData;
+    return returnStatus;
+  }, [popoverFilterData]);
+  if (popoverFilterData?.openFor === "add") {
+    anchorEl = popoverFilterData?.fnAnchorEl();
+    field = popoverFilterData.field;
+    const helperField = fieldFactory(field.type);
+    popupValidationSchema = helperField.getSchema(getLabel);
+    filterFormValue = helperField.getFormValue(field, getLabel);
+    formFilter = {
+      field,
+      id: getNewId(),
+      isSet: true,
+      fixed: false,
+      ...filterFormValue
+    };
+  } else if (popoverFilterData) {
+    anchorEl = popoverFilterData?.fnAnchorEl();
+    field = popoverFilterData?.filter.field;
+    const helperField = fieldFactory(field.type);
+    popupValidationSchema = helperField.getSchema(getLabel);
+    filterFormValue = helperField.getFormValue(field, getLabel, popoverFilterData.filter);
+    formFilter = { ...popoverFilterData?.filter, ...filterFormValue };
+  } else {
+    filterFormValue = {};
+    field = {};
+    formFilter = {};
+    anchorEl = {};
+  }
+  const onClose = useCallback(() => {
+    hidePopoverFilter(false);
+  }, []);
+  const handleKeyDownPopper = useCallback((event) => {
+    if (event.key === "Escape") {
+      onClose();
+    }
+  }, []);
+  function handleClosePopover() {
+    hidePopoverFilter(false);
+  }
+  async function onSubmit(dataFieldValues) {
+    const filterField = { ...filterFormValue, ...dataFieldValues };
+    const newFilter = {
+      ...formFilter,
+      ...fieldFactory(filterField.fieldType).getFilterFromFormValue(filterField),
+      isSet: true
+    };
+    if (popoverFilterData?.openFor === "add") {
+      addFilter(newFilter);
+    } else {
+      updateFilter(newFilter);
+    }
+    hidePopoverFilter(false);
+  }
+  const labelField = field?.label ?? getLabel(field?.dictionaryId ?? "");
+  return {
+    field,
+    labelField,
+    canRender: Boolean(popoverFilterData),
+    anchorEl,
+    handleKeyDownPopper,
+    handleClosePopover,
+    onSubmit,
+    onClose,
+    filterFormValue,
+    formFilter,
+    popupValidationSchema,
+    statusLoad
+  };
+}
+function PopoverFilter() {
+  const {
+    field,
+    labelField,
+    anchorEl,
+    handleKeyDownPopper,
+    handleClosePopover,
+    onSubmit,
+    onClose,
+    filterFormValue,
+    formFilter,
+    popupValidationSchema,
+    statusLoad,
+    canRender
+  } = usePopoverFilter();
+  if (!canRender) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    PopoverStyled,
+    {
+      open: true,
+      disableRestoreFocus: true,
+      transitionDuration: 0,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      arrowType: "top-left",
+      anchorEl,
+      onKeyDown: handleKeyDownPopper,
+      onClose: handleClosePopover,
+      ownerState: {},
+      children: /* @__PURE__ */ jsxs(
+        RHFormProvider,
+        {
+          onSubmit,
+          values: filterFormValue,
+          validationSchema: popupValidationSchema,
+          statusLoad,
+          children: [
+            /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: {}, children: [
+              field.urlIcon && /* @__PURE__ */ jsx(PopoverHeaderIconStyled, { src: field.urlIcon, ownerState: {} }),
+              /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", ownerState: {}, children: labelField })
+            ] }),
+            /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(DataTypeComponent, { formFilter, statusLoad }) }),
+            /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { ownerState: {}, children: [
+              /* @__PURE__ */ jsx(ActionCancel, { onClick: onClose, skeletonWidth: "68px" }),
+              /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "64px" })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+const LanguagePopoverRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LanguagePopover?.styleOverrides
+}));
+const LabelItem = styled("div")(({ theme }) => ({
+  marginLeft: theme.spacing(1)
+}));
+const ContainerProgress = styled("div")(({ theme }) => ({
+  padding: theme.spacing(0.75, 0),
+  margin: theme.spacing(0, 1.25)
+}));
+const ContainerMenuItems = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column"
+}));
+const ContainerImage = styled("div")(() => ({
+  display: "flex",
+  gap: "4px",
+  width: "16px",
+  height: "16px"
+}));
+const componentName = "M4LanguagePopover";
+generateUtilityClasses(
+  componentName,
+  [
+    "root",
+    "containerItems",
+    "containerProgress",
+    "labelItem",
+    "imageButton"
+  ]
+);
+function getM4LanguagePopoverClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    containerItems: ["containerItems"],
+    containerProgress: ["containerProgress"],
+    labelItem: ["labelItem"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getM4LanguagePopoverClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const LANGUAGEPOPOVER_PREFIX = "LanguagePopover";
+const getNameDataTestId = (KEY) => {
+  return `${LANGUAGEPOPOVER_PREFIX}-${KEY}`;
+};
+function LanguagePopover(props) {
+  const { testingProps } = props;
+  const { currentLocale, onChangeLocale } = useLocales();
+  const { domain_token } = useEnvironment();
+  const { networkOperation } = useNetwork();
+  const [open, setOpen] = useState(testingProps?.open || null);
+  const [loading, setLoading] = useState(testingProps?.loading || false);
+  const [allLocales, setAllLocales] = useState(
+    testingProps?.allLocales || []
+  );
+  const handleOpen = (event) => {
+    setOpen(event.currentTarget);
+  };
+  const handleClose = () => {
+    setOpen(null);
+  };
+  useEffect(() => {
+    let mounted = true;
+    if (open === null || loading || allLocales.length > 0) {
+      return;
+    }
+    setLoading(true);
+    networkOperation({
+      method: "GET",
+      endPoint: `na/locales`,
+      parms: { domain_token }
+    }).then((response) => {
+      if (mounted) {
+        !testingProps && setAllLocales(response.data);
+      }
+    }).finally(() => {
+      setLoading(false);
+    });
+    return function cleanUp() {
+      mounted = false;
+    };
+  }, [open]);
+  const classes = useUtilityClasses();
+  return /* @__PURE__ */ jsxs(
+    LanguagePopoverRoot,
+    {
+      className: classes.root,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
+      children: [
+        /* @__PURE__ */ jsx(
+          ImageButton,
+          {
+            className: classes.imageButton,
+            onClick: handleOpen,
+            sx: {
+              width: 28,
+              height: 28,
+              ...open && { bgcolor: "action.selected" }
+            },
+            src: currentLocale?.url_icon || "",
+            alt: currentLocale?.name,
+            width: "24px",
+            height: "24px",
+            ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("imageButton") } : {}
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            arrowType: "top-right",
+            open: Boolean(open),
+            anchorEl: open,
+            anchorOrigin: { vertical: "bottom", horizontal: "right" },
+            onClose: handleClose,
+            sx: {
+              mt: 1.5,
+              ml: 0.75,
+              width: 180,
+              rowGap: "100px",
+              "& .MuiMenuItem-root": { px: 1, typography: "body2", borderRadius: 0.75 }
+            },
+            children: /* @__PURE__ */ jsxs(
+              ContainerMenuItems,
+              {
+                className: classes.containerItems,
+                ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("containerItems") } : {},
+                children: [
+                  allLocales.length === 0 && /* @__PURE__ */ jsx(
+                    ContainerProgress,
+                    {
+                      className: classes.containerProgress,
+                      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("containerProgress") } : {},
+                      children: /* @__PURE__ */ jsx(CircularProgress, { size: "20px" })
+                    }
+                  ),
+                  allLocales.length > 0 && /* @__PURE__ */ jsx(Stack, { spacing: 0.75, children: allLocales.map((option) => /* @__PURE__ */ jsxs(
+                    MenuItem,
+                    {
+                      selected: option.lang === currentLocale?.lang && option?.script === currentLocale?.script && option?.region === currentLocale?.region,
+                      onClick: () => {
+                        onChangeLocale(option);
+                        handleClose();
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(ContainerImage, { children: /* @__PURE__ */ jsx(Image, { alt: option.name, src: option.url_icon, ratio: "1:1" }) }),
+                        /* @__PURE__ */ jsx(
+                          LabelItem,
+                          {
+                            className: classes.labelItem,
+                            ...process.env.NODE_ENV !== "production" ? {
+                              [TEST_PROP_ID]: getNameDataTestId("labelItem")
+                            } : {},
+                            children: option.name
+                          }
+                        )
+                      ]
+                    },
+                    option.lang || option.script || option.region
+                  )) })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+const TILE_LAYER_OSM = {
+  id: "osm_roadmap",
+  sourceType: "OSM",
+  iconUrl: MAP_ICONS.MAP_SOURCE_OSM,
+  mapTypeTile: "roadmap",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_OSM,
+  urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+  options: {
+    minZoom: 0,
+    maxZoom: 19,
+    subdomains: ["a", "b", "c"],
+    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>',
+    tms: false
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  }
+};
+const TILE_LAYER_GOOGLE = {
+  id: "google_rodmap",
+  sourceType: "Google",
+  iconUrl: MAP_ICONS.MAP_SOURCE_GOOGLE_ROADS,
+  mapTypeTile: "roadmap",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_GOOGLE,
+  urlTemplate: "http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=AIzaSyDfhTK9us4kuqPTeFIm89yB3uvk2_G5AMw",
+  hasBicyclingLayer: true,
+  hasTrafficLayer: true,
+  hasTransitLayer: true,
+  options: {
+    minZoom: 0,
+    maxZoom: 22,
+    subdomains: ["mt0", "mt1", "mt2", "mt3"],
+    attribution: "Map data \xA9 Google",
+    tms: false
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  }
+};
+const TILE_LAYER_GOOGLE_SATELLITE = {
+  id: "google_satellite",
+  sourceType: "Google",
+  iconUrl: MAP_ICONS.MAP_SOURCE_GOOGLE_SATELLITE,
+  mapTypeTile: "satellite",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_GOOGLE_SATELLITE,
+  urlTemplate: "http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&key=AIzaSyDfhTK9us4kuqPTeFIm89yB3uvk2_G5AMw",
+  options: {
+    minZoom: 0,
+    maxZoom: 22,
+    subdomains: ["mt0", "mt1", "mt2", "mt3"],
+    attribution: "Map data \xA9 Google",
+    tms: false
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  }
+};
+const TILE_LAYER_GOOGLE_HYBRID = {
+  id: "google_hybrid",
+  sourceType: "Google",
+  iconUrl: MAP_ICONS.MAP_SOURCE_GOOGLE_HYBRID,
+  mapTypeTile: "hybrid",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_GOOGLE_HYBRID,
+  urlTemplate: "http://{s}.google.com/vt/lyrs=y&x={x}&y={y}&z={z}&key=AIzaSyDfhTK9us4kuqPTeFIm89yB3uvk2_G5AMw",
+  hasBicyclingLayer: true,
+  hasTrafficLayer: true,
+  hasTransitLayer: true,
+  options: {
+    minZoom: 0,
+    maxZoom: 22,
+    subdomains: ["mt0", "mt1", "mt2", "mt3"],
+    attribution: "Map data \xA9 Google",
+    tms: false
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  }
+};
+function toQuadKey(x, y, z) {
+  let quadKey = "";
+  for (let i = z; i > 0; i--) {
+    let digit = 0;
+    const mask = 1 << i - 1;
+    if ((x & mask) !== 0) {
+      digit++;
+    }
+    if ((y & mask) !== 0) {
+      digit++;
+      digit++;
+    }
+    quadKey += digit.toString();
+  }
+  return quadKey;
+}
+const BING_URL_TEMPLATE = "https://{s}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/|QK|?mkt=en-us&it=G,VE,BX,L,LA&shading=hill&og=22&n=z";
+const BING_SUB_DOMAINS = ["t2", "t3"];
+const TILE_LAYER_BING = {
+  id: "bing_rodmap",
+  sourceType: "Bing",
+  mapTypeTile: "roadmap",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_BING,
+  iconUrl: MAP_ICONS.MAP_SOURCE_BING,
+  urlTemplate: BING_URL_TEMPLATE,
+  options: {
+    minZoom: 0,
+    maxZoom: 21,
+    subdomains: BING_SUB_DOMAINS,
+    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>',
+    tms: true
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  },
+  getTileUrl: (tileCoord) => {
+    const i = Math.abs(tileCoord.x + tileCoord.y) % BING_SUB_DOMAINS.length;
+    const z = tileCoord.z;
+    const x = tileCoord.x;
+    const y = tileCoord.y;
+    const gk = toQuadKey(x, y, z);
+    return BING_URL_TEMPLATE.replace("|QK|", gk).replace("{s}", BING_SUB_DOMAINS[i]);
+  }
+};
+function useColumns(props) {
+  const {
+    rowKeyGetter,
+    visibleLayers,
+    setVisibleLayers,
+    autoFocusLayers,
+    setAutoFocusLayers,
+    clusterLayers,
+    setClusterLayers
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const useHook = useCallback(
+    (field) => {
+      if (field === "visible") {
+        return [visibleLayers, setVisibleLayers];
+      } else if (field === "autoFocus") {
+        return [autoFocusLayers, setAutoFocusLayers];
+      } else {
+        return [clusterLayers, setClusterLayers];
+      }
+    },
+    [visibleLayers, autoFocusLayers, clusterLayers]
+  );
+  const columns = useMemo(
+    () => [
+      {
+        key: "name",
+        name: getLabel(MAP_DICCTIONARY.LABEL_NAME),
+        type: "string",
+        width: 150,
+        frozen: true
+      },
+      {
+        key: "visible",
+        name: getLabel(MAP_DICCTIONARY.LABEL_LAYER_VISIBLE),
+        width: 50,
+        minWidth: 20,
+        type: "boolean",
+        formatter: ColumnSetCheckFormatter({
+          field: "visible",
+          rowKeyGetter,
+          useHook
+        }),
+        cellClass: "rdg-cell-align-center",
+        headerRenderer: (_p) => /* @__PURE__ */ jsx(Tooltip, { title: getLabel(MAP_DICCTIONARY.LABEL_LAYER_VISIBLE), children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: "medium",
+            src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_VISIBLE}`
+          }
+        ) })
+      },
+      {
+        key: "autoFocus",
+        name: getLabel(MAP_DICCTIONARY.LABEL_LAYER_AUTOFOCUS),
+        minWidth: 20,
+        width: 50,
+        type: "boolean",
+        formatter: ColumnSetCheckFormatter({
+          field: "autoFocus",
+          rowKeyGetter,
+          useHook
+        }),
+        cellClass: "rdg-cell-align-center",
+        headerRenderer: (_p) => /* @__PURE__ */ jsx(Tooltip, { title: getLabel(MAP_DICCTIONARY.LABEL_LAYER_AUTOFOCUS), children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: "medium",
+            src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_AUTOFOCUS}`
+          }
+        ) })
+      },
+      {
+        key: "cluster",
+        name: getLabel(MAP_DICCTIONARY.LABEL_LAYER_CLUSTER),
+        minWidth: 20,
+        width: 50,
+        type: "boolean",
+        formatter: ColumnSetCheckFormatter({
+          field: "cluster",
+          disabledGetter: (row) => !row.clusterAble,
+          rowKeyGetter,
+          useHook
+        }),
+        cellClass: "rdg-cell-align-center",
+        headerRenderer: (_p) => /* @__PURE__ */ jsx(Tooltip, { title: getLabel(MAP_DICCTIONARY.LABEL_LAYER_CLUSTER), children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: "medium",
+            src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_CLUSTER}`
+          }
+        ) })
+      }
+    ],
+    [getLabel, useHook]
+  );
+  return { columns };
+}
+function useCheckedLayers(checkedNameSet) {
+  const [checkedLayers, setCheckedLayers] = useMapStore(
+    (state) => [
+      state[`${checkedNameSet}CheckedLayers`],
+      (newSet) => {
+        state.mapActions.setCheckedLayers(checkedNameSet, newSet);
+      }
+    ],
+    shallow
+  );
+  return [checkedLayers, setCheckedLayers];
+}
+function useRowActionsGetter() {
+  const { getLabel } = useModuleDictionary();
+  const { hasPrivilege } = useModulePrivileges();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { removeLayer } = useMapStore((state) => state.mapActions, shallow);
+  const [urlIconDelete] = useState(
+    `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_DELETE}`
+  );
+  const onDelete = useCallback(
+    (row) => {
+      removeLayer(row.id);
+    },
+    [getLabel]
+  );
+  const rowActionsGetter = useCallback(
+    (row) => {
+      const conditionalItems = [];
+      conditionalItems.push({
+        urlIcon: urlIconDelete,
+        dictionaryId: MAP_DICCTIONARY.ROW_ACTION_LAYER_DELETE,
+        onClick: () => {
+          onDelete(row);
+        },
+        disabled: !row.deleteAble
+      });
+      return conditionalItems;
+    },
+    [hasPrivilege, onDelete, urlIconDelete]
+  );
+  return { rowActionsGetter };
+}
+function useMaster() {
+  const [hashLayers, layersIds] = useMapStore(
+    (state) => [state.hashLayers, state.layersIds],
+    shallow
+  );
+  const rowKeyGetter = useCallback((row) => row.id, []);
+  const [visibleLayers, setVisibleLayers] = useCheckedLayers("visible");
+  const [autoFocusLayers, setAutoFocusLayers] = useCheckedLayers("autoFocus");
+  const [clusterLayers, setClusterLayers] = useCheckedLayers("cluster");
+  const rows = useMemo(() => {
+    const rows2 = [];
+    layersIds.forEach((layerId) => {
+      if (hashLayers[layerId]) {
+        rows2.push({
+          id: layerId,
+          name: hashLayers[layerId].name || `*${layerId}`,
+          active: hashLayers[layerId].visible,
+          clusterAble: hashLayers[layerId].clusterAble || false,
+          deleteAble: hashLayers[layerId].deleteAble || false
+        });
+      }
+    });
+    return rows2;
+  }, [hashLayers, layersIds]);
+  const { rowActionsGetter } = useRowActionsGetter();
+  const { columns } = useColumns({
+    rowKeyGetter,
+    visibleLayers,
+    setVisibleLayers,
+    autoFocusLayers,
+    setAutoFocusLayers,
+    clusterLayers,
+    setClusterLayers
+  });
+  return {
+    rowKeyGetter,
+    columns,
+    rows,
+    checkedRows: visibleLayers,
+    onCheckedRowsChange: setVisibleLayers,
+    rowActionsGetter
+  };
+}
+function LayersTool() {
+  const { columns, rows, rowKeyGetter, rowActionsGetter } = useMaster();
+  const [divRef, setDivRef] = useStateRef(null);
+  useDisableZoomEvents(divRef);
+  return /* @__PURE__ */ jsx("div", { ref: setDivRef, style: { position: "relative", height: "100%" }, children: /* @__PURE__ */ jsx(
+    DataGrid,
+    {
+      id: "layers",
+      columns,
+      rows,
+      rowActionsGetter,
+      rowKeyGetter,
+      withActions: true,
+      actionsProps: {
+        withRowsCount: false,
+        withSettings: false,
+        withPager: false,
+        withLocalFilters: false
+      }
+    }
+  ) });
+}
+function MapSourcesTool() {
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const currentMapSourceId = useMapStore((state) => state.currentMapSourceId, shallow);
+  const mapSources = useMapStore((state) => {
+    return state.mapSourcesIds.map((id) => ({
+      id,
+      dictionaryId: state.hashMapSources[id].dictionaryId,
+      iconUrl: state.hashMapSources[id].iconUrl,
+      hasBicyclingLayer: state.hashMapSources[id].hasBicyclingLayer,
+      hasTrafficLayer: state.hashMapSources[id].hasTrafficLayer,
+      hasTransitLayer: state.hashMapSources[id].hasTransitLayer,
+      roadSeletedOptions: state.hashMapSources[id].roadSelectedOptions
+    }));
+  }, shallow);
+  const { setCurrentMapSource, setMapSourceRoadOptions: setMapSourceRoadMapOptions } = useMapStore(
+    (state) => state.mapActions,
+    shallow
+  );
+  const [divRef, setDivRef] = useStateRef(null);
+  useDisableZoomEvents(divRef);
+  const handleChange = (event) => {
+    setCurrentMapSource(event.target.value);
+  };
+  return /* @__PURE__ */ jsx("div", { className: mapClasses.mapSourcesRoot, ref: setDivRef, children: /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      "aria-labelledby": "demo-controlled-radio-buttons-group",
+      name: "controlled-radio-buttons-group",
+      value: currentMapSourceId,
+      onChange: handleChange,
+      children: mapSources.map((mapSourceOption) => /* @__PURE__ */ jsxs("div", { className: mapClasses.mapSourcesOption, children: [
+        /* @__PURE__ */ jsx(
+          FormControlLabel,
+          {
+            className: "",
+            value: mapSourceOption.id,
+            control: /* @__PURE__ */ jsx(Radio, {}),
+            label: /* @__PURE__ */ jsxs("div", { className: mapClasses.mapSourcesOptionIconLabel, children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${mapSourceOption.iconUrl}`
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: getLabel(mapSourceOption.dictionaryId) })
+            ] })
+          }
+        ),
+        (mapSourceOption.hasBicyclingLayer || mapSourceOption.hasTrafficLayer || mapSourceOption.hasTransitLayer) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(
+              mapClasses.mapSourcesOptionRoadOptions,
+              currentMapSourceId !== mapSourceOption.id ? mapClasses.disabled : mapClasses.active
+            ),
+            children: [
+              mapSourceOption.hasTrafficLayer && /* @__PURE__ */ jsxs("div", { className: mapClasses.mapSourcesOptionRoadOptionsCheck, children: [
+                /* @__PURE__ */ jsx(
+                  CheckBox,
+                  {
+                    disabled: currentMapSourceId !== mapSourceOption.id,
+                    checked: mapSourceOption.roadSeletedOptions?.trafficLayer || false,
+                    onChange: (_e, checked) => {
+                      setMapSourceRoadMapOptions({ trafficLayer: checked });
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_SOURCE_ROAD_TRAFFIC}`
+                  }
+                )
+              ] }),
+              mapSourceOption.hasTransitLayer && /* @__PURE__ */ jsxs("div", { className: mapClasses.mapSourcesOptionRoadOptionsCheck, children: [
+                /* @__PURE__ */ jsx(
+                  CheckBox,
+                  {
+                    disabled: currentMapSourceId !== mapSourceOption.id,
+                    checked: mapSourceOption.roadSeletedOptions?.transitLayer || false,
+                    onChange: (_e, checked) => {
+                      setMapSourceRoadMapOptions({ transitLayer: checked });
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_SOURCE_ROAD_TRANSIT}`
+                  }
+                )
+              ] }),
+              mapSourceOption.hasBicyclingLayer && /* @__PURE__ */ jsxs("div", { className: mapClasses.mapSourcesOptionRoadOptionsCheck, children: [
+                /* @__PURE__ */ jsx(
+                  CheckBox,
+                  {
+                    disabled: currentMapSourceId !== mapSourceOption.id,
+                    checked: mapSourceOption.roadSeletedOptions?.bicyclingLayer || false,
+                    label: "Bycicle",
+                    onChange: (_e, checked) => {
+                      setMapSourceRoadMapOptions({ bicyclingLayer: checked });
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_SOURCE_ROAD_BICYCLING}`
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] }, mapSourceOption.dictionaryId))
+    }
+  ) }) });
+}
+function LayersButton(props) {
+  const { type } = props;
+  const [open, setOpen] = useState(null);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const theme = useTheme();
+  const handleOpen = (event) => {
+    setOpen(event.currentTarget);
+  };
+  const handleClose = () => {
+    setOpen(null);
+  };
+  return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: handleOpen,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${type === "MapSources" ? MAP_ICONS.MAP_SOURCES_TOOL : MAP_ICONS.MAP_LAYERS_TOOL}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        className: type === "MapSources" ? mapClasses.mapSourcesPopoverRoot : mapClasses.layersPopoverRoot,
+        arrowType: "no-arrow",
+        open: Boolean(open),
+        anchorEl: open,
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        onClose: handleClose,
+        sx: {
+          ...type === "MapSources" ? theme.components?.M4LMapMapSources?.styleOverrides : theme.components?.M4LMapLayers?.styleOverrides
+        },
+        disableAutoFocus: true,
+        disableRestoreFocus: true,
+        disableEnforceFocus: true,
+        children: type === "MapSources" ? /* @__PURE__ */ jsx(MapSourcesTool, {}) : /* @__PURE__ */ jsx(LayersTool, {})
+      }
+    )
+  ] });
+}
+export {
+  LayersButton as L,
+  Popover as P,
+  TILE_LAYER_OSM as T,
+  PopoverMenuFields as a,
+  PopoverFilter as b,
+  TILE_LAYER_GOOGLE as c,
+  TILE_LAYER_GOOGLE_SATELLITE as d,
+  TILE_LAYER_GOOGLE_HYBRID as e,
+  TILE_LAYER_BING as f,
+  LanguagePopover as g
+};