@m4l/components 1.0.11 → 1.0.13

package/components/mui_extended/Popover/index.146ded9e.js

@@ -1,1044 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { P as PopoverMenuStyled, p as PopoverMenuItemStyled, q as PopoverMenuItemIconStyled, r as PopoverMenuItemLabelStyled, s as PopoverStyled, t as PopoverHeaderStyled, u as PopoverHeaderIconStyled, v as PopoverHeaderTitleStyled, w as PopoverContainerFieldsStyled, x as PopoverHeaderActionsStyled } from "../../DynamicFilter/slots/index.00b68384.js";
-import { useModuleDictionary, useEnvironment, useNetwork, useModulePrivileges } from "@m4l/core";
-import { u as useDynamicFilterStore } from "../../DynamicFilter/store/index.85a2812f.js";
-import React__default, { useRef, useMemo, useCallback, useState, useEffect } from "react";
-import { f as fieldFactory, c as DataTypeComponent } from "../../DynamicFilter/subcomponents/index.86c6fda2.js";
-import { R as RHFormProvider } from "../../../contexts/RHFormContext/index.95ebabc9.js";
-import { a as ActionCancel, b as ActionIntro } from "../../CommonActions/index.19f39dca.js";
-import { Popover as Popover$1, generateUtilityClasses, generateUtilityClass, Stack, MenuItem, Tooltip, FormControl, RadioGroup, FormControlLabel, Radio, useTheme } from "@mui/material";
-import { I as Image } from "../../Image/index.4a822ede.js";
-import { useLocales } from "@m4l/graphics";
-import { styled } from "@mui/material/styles";
-import { I as ImageButton } from "../Button/index.52852c42.js";
-import { unstable_composeClasses } from "@mui/base";
-import { T as TEST_PROP_ID } from "../../areas/constants.0d3ba950.js";
-import { C as CircularProgress } from "../CircularProgress/index.967e70b7.js";
-import { M as MAP_DICCTIONARY } from "../../areas/dictionary.6168209a.js";
-import { M as MAP_ICONS } from "../../areas/icons.504ec098.js";
-import { C as ColumnSetCheckFormatter, a as DataGrid } from "../../../vendor.5b266106.js";
-import { shallow } from "zustand/shallow";
-import { I as Icon } from "../../Icon/index.8ecfb193.js";
-import { u as useMapStore, a as useDisableZoomEvents, m as mapClasses } from "../../maps/index.a1bf63f2.js";
-import { u as useStateRef } from "../../../hooks/useStateRef/index.538edb89.js";
-import clsx from "clsx";
-import { C as CheckBox } from "../CheckBox/index.01218423.js";
-import { I as IconButton } from "../IconButton/index.d5b273e6.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("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
-};