@m4l/components 1.0.0 → 1.0.2

package/components/maps/{index.8ec46ce4.js → index.ba1ccfad.js}

@@ -1,26 +1,28 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { createContext, useRef, useEffect, useContext, useMemo, useState, useCallback } from "react";
 import { useMap, LayerGroup, MapContainer, Marker, Polyline, Circle, Polygon } from "react-leaflet";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { shallow } from "zustand/shallow";
-import React__default, { createContext, useRef, useEffect, useContext, useMemo, useState, useCallback } from "react";
 import * as L from "leaflet";
 import L__default from "leaflet";
 import { Loader } from "@googlemaps/js-api-loader";
 import { createPortal } from "react-dom";
-import { useModuleDictionary, useModuleSkeleton, useEnvironment, useModulePrivileges } from "@m4l/core";
+import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
 import clsx from "clsx";
 import { useFormContext, useWatch } from "react-hook-form";
-import { M as MAP_DICCTIONARY } from "../areas/dictionary.7e74022a.js";
-import { d as Actions, B as Button, c as RHFAutocompleteAsync, S as Stack, r as ColumnSetCheckFormatter, g as DataGrid, s as CheckBox, P as Popover } from "../../vendor.a1ce6777.js";
+import { M as MAP_DICCTIONARY } from "../areas/dictionary.19b25583.js";
+import { A as Actions } from "../../vendor.3eadfa16.js";
+import { B as Button, Z as ZoomButtons } from "../mui_extended/Button/index.a7dc6ef0.js";
 import * as Yup from "yup";
-import { ao as COMPONENT_CLASS_NAME, ap as STYLE_MEASURE_OPTIONS, aq as MAP_ZINDEX_DEFAULT, ar as INITIAL_FORM_VALUES, as as GPS_TOOLS_POPUP_DEFAULT_POSITION, at as MESURE_POPUP_DEFAULT_POSITION, au as TIME_DOUBLE_CLICK, av as MARKER_COLOR_DEFAULT, L as LABEL_BK_COLOR_DEFAULT, u as LABEL_COLOR_DEFAULT, aw as SVG_ICON_DEFAULT } from "../areas/constants.5387d83e.js";
+import { $ as COMPONENT_CLASS_NAME, a0 as STYLE_MEASURE_OPTIONS, a1 as MAP_ZINDEX_DEFAULT, a2 as INITIAL_FORM_VALUES, a3 as GPS_TOOLS_POPUP_DEFAULT_POSITION, a4 as MESURE_POPUP_DEFAULT_POSITION, a5 as TIME_DOUBLE_CLICK, a6 as MARKER_COLOR_DEFAULT, L as LABEL_BK_COLOR_DEFAULT, t as LABEL_COLOR_DEFAULT, a7 as SVG_ICON_DEFAULT } from "../areas/constants.630a4f42.js";
 import { u as useFormReadyForUpdate } from "../../hooks/useFormReadyForUpdate/index.f60f500e.js";
-import { R as RHFormProvider } from "../../contexts/RHFormContext/index.dc955a09.js";
+import { R as RHFAutocompleteAsync } from "../hook-form/RHFAutocompleteAsync/index.ea3ba7a7.js";
+import { S as Stack } from "../mui_extended/Stack/index.fe363ca5.js";
+import { R as RHFormProvider } from "../../contexts/RHFormContext/index.e942a298.js";
 import { M as MAP_ICONS } from "../areas/icons.504ec098.js";
-import { a as IconButton, T as ToggleIconButton, I as Icon, M as MarkerIconLabel } from "../Icon/index.d5fed418.js";
-import { u as usePopupsStore, P as PopupsProvider } from "../popups/PopupsProvider/index.18669fb4.js";
-import { generateUtilityClasses, Tooltip, FormControl, RadioGroup, FormControlLabel, Radio, useTheme } from "@mui/material";
-import { u as useStateRef } from "../../hooks/useStateRef/index.538edb89.js";
-import { P as PopupsViewer } from "../popups/PopupsViewer/index.ba354267.js";
+import { u as usePopupsStore, P as PopupsProvider } from "../popups/PopupsProvider/index.3b43e55f.js";
+import { T as ToggleIconButton } from "../mui_extended/ToggleIconButton/index.7fbece74.js";
+import { T as TILE_LAYER_OSM, c as TILE_LAYER_GOOGLE, d as TILE_LAYER_GOOGLE_SATELLITE, e as TILE_LAYER_GOOGLE_HYBRID, f as TILE_LAYER_BING, L as LayersButton } from "../mui_extended/Popover/index.8e5ac765.js";
+import { P as PopupsViewer } from "../popups/PopupsViewer/index.fb3f0c48.js";
 import { createPathComponent } from "@react-leaflet/core";
 import "leaflet.markercluster";
 import { cloneDeep, throttle } from "lodash";
@@ -30,8 +32,10 @@ import { createStore, useStore } from "zustand";
 import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
+import { generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.9ee4c99a.js";
+import { g as getComponentUtilityClass } from "../../utils/index.0660ee9c.js";
+import { M as MarkerIconLabel } from "../Icon/index.2e8ec5a1.js";
 import "leaflet-polylinedecorator";
 const updateOwnerStateClasses = (_state) => {
 };
@@ -110,138 +114,6 @@ const useMapUtilityClasses = (_ownerState) => {
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(COMPONENT_CLASS_NAME), {});
 };
-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]);
-  }
-};
 const createMapStore = (initProps) => {
   const startProps = {
     classes: useMapUtilityClasses(initProps.ownerState),
@@ -1010,48 +882,6 @@ function MeasureTool() {
     }
   );
 }
-function ZoomButtons() {
-  const map = useMap();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const [, setZoomInDisabled] = useState(false);
-  const [, setZoomOutDisabled] = useState(false);
-  useEffect(() => {
-    const updateButtonState = () => {
-      const currentZoom = map.getZoom();
-      const maxZoom = map.getMaxZoom();
-      const minZoom = map.getMinZoom();
-      setZoomInDisabled(currentZoom === maxZoom);
-      setZoomOutDisabled(currentZoom === minZoom);
-    };
-    map.on("zoomend", updateButtonState);
-    updateButtonState();
-    return () => {
-      map.off("zoomend", updateButtonState);
-    };
-  }, [map]);
-  const handleZoomIn = () => {
-    map.zoomIn();
-  };
-  const handleZoomOut = () => {
-    map.zoomOut();
-  };
-  return /* @__PURE__ */ jsxs("div", { className: mapClasses.zoomButtons, children: [
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        onClick: handleZoomIn,
-        src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_ZOOM_IN}`
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        onClick: handleZoomOut,
-        src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_ZOOM_OUT}`
-      }
-    )
-  ] });
-}
 function TopRightTools(props) {
   const { gpsTools } = props;
   const { addPopup, closePopup } = usePopupsStore((state) => state.popupsActions);
@@ -1137,191 +967,6 @@ function TopRightTools(props) {
     /* @__PURE__ */ jsx(ZoomButtons, {})
   ] });
 }
-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 useDisableZoomEvents(node) {
   const map = useMap();
   useEffect(() => {
@@ -1337,186 +982,6 @@ function useDisableZoomEvents(node) {
     });
   }, [map, node]);
 }
-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, {})
-      }
-    )
-  ] });
-}
 function TopLeftTools() {
   return /* @__PURE__ */ jsxs(Control, { position: "topleft", prepend: true, className: mapClasses.topLeftToolsRoot, children: [
     /* @__PURE__ */ jsx(LayersButton, { type: "MapSources" }),
@@ -2164,9 +1629,10 @@ const CommonFeatureRender = (props) => {
 export {
   CommonFeatureRender as C,
   Map$1 as M,
-  MapProvider as a,
-  MapContext as b,
-  MarkerFeatureRender as c,
+  useDisableZoomEvents as a,
+  MapProvider as b,
+  MapContext as c,
+  MarkerFeatureRender as d,
   mapClasses as m,
   useMapStore as u
 };

package/components/modal/{WindowBase.a3ac7adc.js → WindowBase.c1e879e4.js}

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { m as modalUtilityClasses } from "./index.a0e30c8b.js";
+import { m as modalUtilityClasses } from "./index.7ca17f55.js";
 import { useEnvironment } from "@m4l/core";
 import clsx from "clsx";
-import { I as Icon, a as IconButton } from "../Icon/index.d5fed418.js";
-import { u as useModal } from "../../hooks/useModal/index.ef54bcf2.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.87f4726c.js";
+import { I as Icon } from "../Icon/index.2e8ec5a1.js";
+import { u as useModal } from "../../hooks/useModal/index.9fe41bde.js";
 const Header = (props) => {
   const { title, onClickCancel, urlIcon, classes } = props;
   const { host_static_assets, environment_assets } = useEnvironment();

package/components/modal/{WindowConfirm.e35da619.js → WindowConfirm.1a123368.js}

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { d as Actions, e as ActionCancel, f as ActionIntro } from "../../vendor.a1ce6777.js";
+import { A as Actions, d as ActionCancel, e as ActionIntro } from "../../vendor.3eadfa16.js";
 import { Typography } from "@mui/material";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { e as dictionary } from "../areas/dictionary.7e74022a.js";
-import { u as useModal } from "../../hooks/useModal/index.ef54bcf2.js";
-import { I as Image } from "../Image/index.36a3d440.js";
-import { m as modalUtilityClasses } from "./index.a0e30c8b.js";
-import { W as WindowBase } from "./WindowBase.a3ac7adc.js";
+import { f as dictionary } from "../areas/dictionary.19b25583.js";
+import { u as useModal } from "../../hooks/useModal/index.9fe41bde.js";
+import { I as Image } from "../Image/index.0d32558e.js";
+import { m as modalUtilityClasses } from "./index.7ca17f55.js";
+import { W as WindowBase } from "./WindowBase.c1e879e4.js";
 const MessageIlustration = (props) => {
   const { getLabel } = useModuleDictionary();
   const { variant } = useModal();

package/components/modal/{index.a0e30c8b.js → index.7ca17f55.js}

@@ -1,6 +1,6 @@
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { ax as componentName } from "../areas/constants.5387d83e.js";
+import { a8 as componentName } from "../areas/constants.630a4f42.js";
 generateUtilityClasses(componentName, [
   "root",
   "windowBaseRoot",