@m4l/components 0.2.5 → 0.2.7

package/components/maps/components/GpsTools/index.c94fd76f.js

@@ -1,2306 +0,0 @@
-import { createContext, useRef, useEffect, useState, useMemo, useCallback } from "react";
-import { createStore, useStore } from "zustand";
-import { shallow } from "zustand/shallow";
-import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
-import { useModuleDictionary, useModuleSkeleton, useEnvironment, useNetwork, useModulePrivileges, useHostTools, usePaginate } from "@m4l/core";
-import { devtools } from "zustand/middleware";
-import { immer } from "zustand/middleware/immer";
-import { enableMapSet } from "immer";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { D as DynamicFilter } from "../../../DynamicFilter/index.df9dee43.js";
-import { S as SelectCellFormatter } from "../../../../react-data-grid.c5377916.js";
-import { e as columnDateFormatter, c as DataGrid } from "../../../DataGrid/index.7e5b3989.js";
-import { u as useMapToolsStore, a as useMapStore, m as mapClasses, M as MAP_ZINDEX_DEFAULT, b as MAP_ZINDEX_OVER_MAP } from "../Map/index.5171d0de.js";
-import { u as useModal } from "../../../../hooks/useModal/index.abdc0962.js";
-import { W as WindowConfirm } from "../../../modal/WindowConfirm.19ddbd5d.js";
-import { generateUtilityClasses } from "@mui/material";
-import "@mui/base";
-import { S as Stack } from "../../../mui_extended/Stack/index.0e53197c.js";
-import { B as Button } from "../../../mui_extended/Button/index.570fd3a4.js";
-import { useFormContext, useWatch } from "react-hook-form";
-import { H as HelperError } from "../../../hook-form/HelperError/index.66bbcac3.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index.2f6286eb.js";
-import { A as ActionFormIntro } from "../../../CommonActions/components/ActionFormIntro/index.5a719043.js";
-import { useMap, Polyline, Polygon, Popup, Circle } from "react-leaflet";
-import { u as useFormReadyForUpdate } from "../../../../hooks/useFormReadyForUpdate/index.f60f500e.js";
-import * as L from "leaflet";
-import L__default from "leaflet";
-import { u as useTab } from "../../../../hooks/useTab/index.f39d479c.js";
-import { P as PaperForm } from "../../../PaperForm/index.7ea3883f.js";
-import { R as RHFAutocomplete } from "../../../hook-form/RHFAutocomplete/index.0ce87ac3.js";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.80cc07e0.js";
-import { P as PropertyValue } from "../../../PropertyValue/index.ac4269e2.js";
-import { R as RHFColorPicker } from "../../../hook-form/RHFColorPicker/index.d00a2b53.js";
-import clsx from "clsx";
-import { T as Tabs, a as Tab, b as TabContent, c as TabProvider } from "../../../mui_extended/Tab/index.c6b81776.js";
-import { T as Tooltip } from "../../../mui_extended/Tooltip/index.24a2bc3f.js";
-import * as Yup from "yup";
-import { u as useFormAddEdit } from "../../../../hooks/useFormAddEdit/index.32aa4f64.js";
-import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.7769076a.js";
-import { R as RHFAutocompleteAsync } from "../../../hook-form/RHFAutocompleteAsync/index.57789d3a.js";
-import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
-import "@geoman-io/leaflet-geoman-free";
-import { styled } from "@mui/material/styles";
-import { createPortal } from "react-dom";
-enableMapSet();
-const createMapToolsStore = (initProps) => {
-  const startProps = {
-    currentTabTool: "measure",
-    geofenceState: {
-      currentGeofenceTool: "add_edit",
-      rows: [],
-      checkedGeofences: /* @__PURE__ */ new Set(),
-      checkedCrossingFeatures: /* @__PURE__ */ new Set(),
-      checkedInternalFeatures: /* @__PURE__ */ new Set(),
-      hashGeofences: {}
-    },
-    ...initProps
-  };
-  return createStore(
-    devtools(
-      immer((set, _get) => ({
-        ...startProps,
-        mapToolsActions: {
-          init: () => {
-            set((state) => {
-              state.ownerState.status = "ready";
-            });
-          },
-          setMapToolsState: (status) => {
-            set((state) => {
-              state.ownerState.status = status;
-            });
-          },
-          setHandlerGetLabel: (newHandler) => {
-            set((state) => {
-              state.getLabel = newHandler;
-            });
-          },
-          setExternalState: (newExternalState) => {
-            set((state) => {
-              state.ownerState = { ...state.ownerState, ...newExternalState };
-            });
-          },
-          setCurrentTabTool: (newTabTool) => {
-            set((state) => {
-              state.currentTabTool = newTabTool;
-            });
-          }
-        },
-        geofenceActions: {
-          goToAddEdit: (geofenceId) => {
-            set((state) => {
-              state.geofenceState.currentGeofenceTool = "add_edit";
-              state.geofenceState.geofenceId = geofenceId;
-            });
-          },
-          goToList: (geofenceId) => {
-            set((state) => {
-              state.geofenceState.currentGeofenceTool = "list";
-              state.geofenceState.geofenceId = geofenceId;
-            });
-          },
-          addGeofence: (geofenceId, geofence) => {
-            set((state) => {
-              state.geofenceState.hashGeofences[geofenceId] = geofence;
-            });
-          },
-          updatePartialGeofence: (geofenceId, geofence) => {
-            set((state) => {
-              state.geofenceState.hashGeofences[geofenceId] = { ...state.geofenceState.hashGeofences[geofenceId], ...geofence };
-            });
-          },
-          updateRows: (newRows) => {
-            set((state) => {
-              state.geofenceState.rows = newRows;
-            });
-          },
-          setCheckedGeofences: (newGeofences) => {
-            set((state) => {
-              state.geofenceState.checkedGeofences = new Set(newGeofences);
-            });
-          },
-          setCheckedCrossingFeatures: (newFeatures) => {
-            set((state) => {
-              state.geofenceState.checkedCrossingFeatures = new Set(newFeatures);
-            });
-          },
-          setCheckedInternalFeatures: (newFeatures) => {
-            set((state) => {
-              state.geofenceState.checkedInternalFeatures = new Set(newFeatures);
-            });
-          }
-        }
-      })),
-      { name: `Map Tools Store` }
-    )
-  );
-};
-const GpsToolsContext = createContext(null);
-function GpsToolsProvider(props) {
-  const {
-    children
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const isFirstRender = useFirstRender([getLabel]);
-  const mapStoreRef = useRef();
-  if (!mapStoreRef.current) {
-    mapStoreRef.current = createMapToolsStore({
-      getLabel,
-      ownerState: {
-        status: "init",
-        isMobile: !isDesktop,
-        isSkeleton,
-        focus: false
-      }
-    });
-  }
-  const {
-    setHandlerGetLabel,
-    setExternalState
-  } = useStore(mapStoreRef.current, (state) => state.mapToolsActions, shallow);
-  useEffect(() => {
-    if (!isFirstRender) {
-      setHandlerGetLabel(getLabel);
-    }
-  }, [getLabel]);
-  useEffect(() => {
-    if (isFirstRender) {
-      return;
-    }
-    setExternalState({
-      isMobile: !isDesktop,
-      isSkeleton
-    });
-  }, [isDesktop, isSkeleton]);
-  return /* @__PURE__ */ jsx(GpsToolsContext.Provider, {
-    value: mapStoreRef.current,
-    children
-  });
-}
-const DICCTIONARY = {
-  LABEL_TAB_GEO: "label_tab_geo",
-  TAB_GENERAL_CONFIG_TOOLTIP: "tab_general_config_tooltip",
-  PAPER_GENERAL: "paper_general",
-  LABEL_ID: "label_id",
-  LABEL_NAME: "label_name",
-  LABEL_GEOMETRY_TYPE: "label_geometry_type",
-  LABEL_GEOMETRY_CIRCLE: "label_geometry_circle",
-  LABEL_GEOMETRY_RECTANGLE: "label_geometry_rectangle",
-  LABEL_GEOMETRY_POLYGON: "label_geometry_polygon",
-  LABEL_DRAW: "label_draw",
-  LABEL_FINISH: "label_finish",
-  PAPER_CONFIG: "paper_config",
-  LABEL_ALIAS: "label_alias",
-  LABEL_CUSTOMER_ID: "label_customer_id",
-  LABEL_TIME_MIN_IN_SECONDS: "label_time_min_in_seconds",
-  LABEL_TIME_MIN_OUT_SECONDS: "label_time_min_out_seconds",
-  TAB_STYLE_CONFIG_TOOLTIP: "tab_style_tooltip",
-  PAPER_STROKE: "paper_stroke",
-  LABEL_COLOR: "label_color",
-  LABEL_OPACITY: "label_opacity",
-  LABEL_WEIGHT: "label_weight",
-  LABEL_DASH_ARRAY: "label_dash_array",
-  LABEL_DASH_OFFSET: "label_dash_offset",
-  LABEL_RADIUS: "label_radius",
-  LABEL_LAT: "label_lat",
-  LABEL_LON: "label_lon",
-  LABEL_PLACE_MARKER: "label_place_marker",
-  LABEL_FIRST_VERTEX: "label_first_vertex",
-  LABEL_CONTINUE_LINE: "label_continue_line",
-  LABEL_FINISH_LINE: "label_finish_line",
-  LABEL_FINISH_POLY: "label_finish_poly",
-  LABEL_FINISH_RECT: "label_finish_rect",
-  LABEL_START_CIRCLE: "label_start_circle",
-  LABEL_FINISH_CIRCLE: "label_finish_circle",
-  LABEL_PLACE_CIRCLE_MARKER: "label_place_circle_marker",
-  VALIDATION_GEOMETRY_REQUIRED: "validation_geometry_required",
-  VALIDATION_FIELD_REQUIRED: "validation_field_required",
-  VALIDATION_FIELD_TYPE_NUMBER_ERROR: "validation_field_type_number_error",
-  LABEL_VIEW_TRANSIT_FEATURES: "label_view_crossing_features",
-  LABEL_VIEW_INTERNAL_FEATURES: "label_view_internal_features",
-  LABEL_CREATED_AT: "label_created_at",
-  LABEL_UPDATED_AT: "label_updated_at",
-  MODAL_DELETE_GEO_TITLE: "modal_delete_geo_title",
-  MODAL_DELETE_GEO_MESSAGE: "modal_delete_geo_message",
-  MODAL_DISABLE_GEO_TITLE: "modal_disable_geo_title",
-  MODAL_DISABLE_MESSAGE: "modal_disable_geo_message",
-  ROW_ACTION_GEO_EDIT: "row_action_geo_edit",
-  ROW_ACTION_GEO_ENABLE: "row_action_geo_enable",
-  ROW_ACTION_GEO_DISABLE: "row_action_geo_disable",
-  ROW_ACTION_GEO_DELETE: "row_action_geo_delete",
-  LABEL_TAB_MEASURE: "label_tab_measure",
-  PAPER_MEASURE: "paper_measure",
-  LABEL_MEASURE_START: "label_measure_start",
-  LABEL_MEASURE_RESTART: "label_measure_restart",
-  LABEL_MEASURE_DISTANCE: "label_measure_distance",
-  LABEL_MEASURE_AREA: "label_measure_area",
-  LABEL_MEASURE_UNIT: "label_measure_unit",
-  LABEL_MEASURE_UNIT_BASE_KILOMETERS: "label_measure_unit_base_kilometers",
-  LABEL_MEASURE_REMOVE_POINT: "label_measure_remove_point"
-};
-const COMPONENT_CLASS_NAME = "M4LGpsTools";
-const COMPONENT_MAP_TOOLS_ID = "gps_tools";
-const STYLE_OPACITIES = [
-  {
-    value: 0,
-    label: "0%"
-  },
-  {
-    value: 0.1,
-    label: "10%"
-  },
-  {
-    value: 0.2,
-    label: "20%"
-  },
-  {
-    value: 0.3,
-    label: "30%"
-  },
-  {
-    value: 0.4,
-    label: "40%"
-  },
-  {
-    value: 0.5,
-    label: "50%"
-  },
-  {
-    value: 1,
-    label: "100%"
-  }
-];
-const STYLE_WHEIGHTS = [
-  {
-    value: 0,
-    label: "0px"
-  },
-  {
-    value: 1,
-    label: "1px"
-  },
-  {
-    value: 2,
-    label: "2px"
-  },
-  {
-    value: 3,
-    label: "3px"
-  },
-  {
-    value: 4,
-    label: "4px"
-  }
-];
-const STYLE_PATTERNS = [
-  {
-    value: "",
-    label: "------"
-  },
-  {
-    value: "4 1 2",
-    label: "-- - - --"
-  }
-];
-const icons = {
-  GEOMETRY_CIRCLE: "geometry_circle.svg",
-  GEOMETRY_RECTANGLE: "geometry_rectangle.svg",
-  GEOMETRY_POLYGON: "geometry_polygon.svg",
-  ADD: "add.svg",
-  MEASURE: "measure.svg",
-  GENERAL: "general.svg",
-  CONFIG: "config.svg",
-  STROKE: "stroke.svg",
-  FILL: "fill.svg",
-  EDIT: "edit.svg",
-  DELETE: "delete.svg",
-  ACTIVE: "active.svg",
-  NAME: "name.svg"
-};
-function Filter(props) {
-  const {
-    refresh,
-    setBackendQueryParams
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const [initialFilter] = useState(() => {
-    return [];
-  });
-  const onChangeFilter = (_initialFilters, rawFilters) => {
-    setBackendQueryParams({
-      f: rawFilters
-    });
-    refresh();
-  };
-  return /* @__PURE__ */ jsx(DynamicFilter, {
-    withAllField: true,
-    onChangeFilters: onChangeFilter,
-    fields: [{
-      name: "id",
-      dictionaryId: DICCTIONARY.LABEL_ID,
-      type: "number",
-      multiple: true,
-      presence: "optional",
-      urlIcon: `${host_static_assets}/${environment_assets}/components/${COMPONENT_MAP_TOOLS_ID}/assets/icons/${icons.ACTIVE}`,
-      defaultOperand1: true
-    }, {
-      name: "name",
-      dictionaryId: DICCTIONARY.LABEL_NAME,
-      type: "string",
-      multiple: true,
-      presence: "optional",
-      urlIcon: `${host_static_assets}/${environment_assets}/components/${COMPONENT_MAP_TOOLS_ID}/assets/icons/${icons.NAME}`
-    }],
-    initialApplyedFilters: initialFilter
-  });
-}
-function ColumnSetCheckFormatter(parameters) {
-  const {
-    field,
-    rowKeyGetter,
-    useHook
-  } = parameters;
-  const formatter = (props) => {
-    const {
-      row
-    } = props;
-    const [checkedRows, setCheckedRows] = useHook(field);
-    const onChange = (checked, _isShiftClick) => {
-      const newCheckedRows = new Set(checkedRows);
-      if (checked) {
-        newCheckedRows.add(rowKeyGetter(props.row));
-      } else {
-        newCheckedRows.delete(rowKeyGetter(props.row));
-      }
-      setCheckedRows(newCheckedRows);
-    };
-    return /* @__PURE__ */ jsx(SelectCellFormatter, {
-      value: checkedRows.has(rowKeyGetter(row)) || false,
-      isCellSelected: props.isCellSelected,
-      onChange,
-      "aria-label": "Select"
-    });
-  };
-  return formatter;
-}
-function useColumns(props) {
-  const {
-    rowKeyGetter
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const useHook = (field) => {
-    return useMapToolsStore((state) => {
-      return field === "CrossingFeatures" ? [state.geofenceState.checkedCrossingFeatures, state.geofenceActions.setCheckedCrossingFeatures] : [state.geofenceState.checkedInternalFeatures, state.geofenceActions.setCheckedInternalFeatures];
-    }, shallow);
-  };
-  const columns = useMemo(() => [{
-    key: "id",
-    name: getLabel(DICCTIONARY.LABEL_ID),
-    type: "number",
-    width: 40,
-    visible: false
-  }, {
-    key: "name",
-    name: getLabel(DICCTIONARY.LABEL_NAME),
-    type: "string",
-    width: 300
-  }, {
-    key: "checkedCrossingFeatures",
-    name: getLabel(DICCTIONARY.LABEL_VIEW_TRANSIT_FEATURES),
-    width: 80,
-    type: "boolean",
-    formatter: ColumnSetCheckFormatter({
-      field: "CrossingFeatures",
-      rowKeyGetter,
-      useHook
-    }),
-    cellClass: "rdg-cell-align-center"
-  }, {
-    key: "checkedInternalFeatures",
-    name: getLabel(DICCTIONARY.LABEL_VIEW_INTERNAL_FEATURES),
-    width: 80,
-    type: "boolean",
-    formatter: ColumnSetCheckFormatter({
-      field: "InternalFeatures",
-      rowKeyGetter,
-      useHook
-    }),
-    cellClass: "rdg-cell-align-center"
-  }, {
-    key: "created_at",
-    name: getLabel(DICCTIONARY.LABEL_CREATED_AT),
-    type: "date",
-    formatter: columnDateFormatter({
-      presentationType: "datetime",
-      fieldValue: "row.created_at"
-    })
-  }, {
-    key: "updated_at",
-    name: getLabel(DICCTIONARY.LABEL_UPDATED_AT),
-    type: "date",
-    formatter: columnDateFormatter({
-      presentationType: "datetime",
-      fieldValue: "row.updated_at"
-    })
-  }], [getLabel]);
-  return {
-    columns
-  };
-}
-const ENDPOINT_GEOFENCE_GET = "geofences";
-const ENDPOINT_GEOFENCE_NEW_EDIT = "geofences";
-var GeofencesFeaturesLayers = /* @__PURE__ */ ((GeofencesFeaturesLayers2) => {
-  GeofencesFeaturesLayers2["LAYER_GEOFENCES"] = "geofences";
-  GeofencesFeaturesLayers2["LAYER_GEOFENCES_TRANSIT_FEATURES"] = "geofencesCrossingFeatures";
-  GeofencesFeaturesLayers2["LAYER_GEOFENCES_INTERNAL_FEATURES"] = "geofencesInternalFeatures";
-  return GeofencesFeaturesLayers2;
-})(GeofencesFeaturesLayers || {});
-function useRowActionsGetter(props) {
-  const {
-    fullRefresh
-  } = props;
-  const {
-    networkOperation
-  } = useNetwork();
-  const {
-    openModal,
-    closeModal
-  } = useModal();
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    hasPrivilege
-  } = useModulePrivileges();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    goToAddEdit
-  } = useMapToolsStore((state) => state.geofenceActions, shallow);
-  const {
-    removeFeature
-  } = useMapStore((state) => state.mapActions, shallow);
-  const {
-    toast
-  } = useHostTools();
-  const isDesktop = useResponsiveDesktop();
-  const [urlIconEdit] = useState(`${host_static_assets}/${environment_assets}/frontend/components/maptools/assets/icons/${icons.EDIT}`);
-  const [urlIconDelete] = useState(`${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/maptools/assets/icons/${icons.DELETE}`);
-  const goEdit = useCallback((objectId) => {
-    goToAddEdit(objectId);
-    removeFeature(GeofencesFeaturesLayers.LAYER_GEOFENCES, objectId);
-  }, [getLabel]);
-  const onDelete = useCallback((row) => {
-    openModal({
-      window: /* @__PURE__ */ jsx(WindowConfirm, {
-        title: getLabel(DICCTIONARY.MODAL_DELETE_GEO_TITLE),
-        msg: getLabel(DICCTIONARY.MODAL_DELETE_GEO_MESSAGE),
-        onClickIntro: () => onConfirmDelete(row)
-      }),
-      variant: "delete",
-      initialWidth: 300,
-      initialHeigth: 350
-    });
-  }, [getLabel]);
-  const onConfirmDelete = useCallback((row) => {
-    networkOperation({
-      method: "DELETE",
-      endPoint: `geofences/${row.id}`
-    }).then((response) => {
-      toast(response.message, {
-        type: "success"
-      });
-      fullRefresh();
-    });
-    closeModal();
-  }, []);
-  const rowActionsGetter = useCallback((row) => {
-    const conditionalItems = [];
-    conditionalItems.push({
-      urlIcon: urlIconEdit,
-      dictionaryId: DICCTIONARY.ROW_ACTION_GEO_EDIT,
-      onClick: () => {
-        goEdit(row.id);
-      },
-      disabled: !row.authUserOptions.edit
-    });
-    return conditionalItems;
-  }, [hasPrivilege, goEdit, onDelete, urlIconDelete, urlIconEdit, isDesktop]);
-  return {
-    rowActionsGetter
-  };
-}
-function useCheckedGeofences() {
-  const [checkedGeofences, hashGeofences] = useMapToolsStore((state) => [state.geofenceState.checkedGeofences, state.geofenceState.hashGeofences], shallow);
-  const {
-    setCheckedGeofences,
-    updatePartialGeofence
-  } = useMapToolsStore((state) => state.geofenceActions, shallow);
-  const {
-    setFeatureData,
-    removeFeature,
-    getFeatureIds
-  } = useMapStore((state) => state.mapActions, shallow);
-  const {
-    networkOperation
-  } = useNetwork();
-  useEffect(() => {
-    const mapFeatureIds = getFeatureIds(GeofencesFeaturesLayers.LAYER_GEOFENCES);
-    checkedGeofences.forEach((chkRow) => {
-      const geofence = hashGeofences[chkRow];
-      if (!geofence) {
-        return;
-      }
-      if (!mapFeatureIds.includes(chkRow) || !geofence.hasRenderizedGeofence) {
-        if (!geofence.geometry) {
-          networkOperation({
-            method: "GET",
-            endPoint: `geofences/${geofence.id}`,
-            isRemote: false,
-            responseToCamelCase: true
-          }).then((response) => {
-            console.log("onCheckedRowsChange response:", response.data);
-            const geoLoaded = {
-              geometry: response.data.geometry,
-              properties: response.data.properties,
-              countCrossingFeatures: response.data.countCrossingFeatures,
-              hasRenderizedGeofence: false
-            };
-            if (geoLoaded.geometry) {
-              if (checkedGeofences.has(geofence.id)) {
-                setFeatureData("geofences", chkRow, geoLoaded.geometry, geoLoaded.properties);
-                geoLoaded.hasRenderizedGeofence = true;
-              }
-            }
-            updatePartialGeofence(geofence.id, geoLoaded);
-          });
-        } else {
-          setFeatureData(GeofencesFeaturesLayers.LAYER_GEOFENCES, chkRow, geofence.geometry, geofence.properties);
-          updatePartialGeofence(geofence.id, {
-            hasRenderizedGeofence: true
-          });
-        }
-      }
-    });
-    mapFeatureIds.forEach((mapFeatureId) => {
-      if (!checkedGeofences.has(Number(mapFeatureId))) {
-        removeFeature(GeofencesFeaturesLayers.LAYER_GEOFENCES, mapFeatureId);
-      }
-    });
-    return () => {
-    };
-  }, [checkedGeofences]);
-  return {
-    checkedGeofences,
-    setCheckedGeofences
-  };
-}
-function useCheckedFeatures(layerId, featuresType, endpoint) {
-  const [checkedFeatures, setCheckedFeatures, hashGeofences] = useMapToolsStore((state) => {
-    return featuresType === "CrossingFeatures" ? [state.geofenceState.checkedCrossingFeatures, state.geofenceActions.setCheckedCrossingFeatures, state.geofenceState.hashGeofences] : [state.geofenceState.checkedInternalFeatures, state.geofenceActions.setCheckedInternalFeatures, state.geofenceState.hashGeofences];
-  }, shallow);
-  const {
-    setFeatureData,
-    removeFeature,
-    getFeatureIds
-  } = useMapStore((state) => state.mapActions, shallow);
-  const {
-    networkOperation
-  } = useNetwork();
-  useEffect(() => {
-    const mapFeatureIds = getFeatureIds(layerId);
-    checkedFeatures.forEach((chkRow) => {
-      const geofence = hashGeofences[chkRow];
-      if (!geofence) {
-        return;
-      }
-      if (!mapFeatureIds.find((fId) => fId.toString().includes(`geo_${geofence.id}_fid`)) || !geofence[`hasRenderized${featuresType}`]) {
-        const currentGeofenceLoadedFeatures = geofence[`loaded${featuresType}`];
-        if (!currentGeofenceLoadedFeatures) {
-          networkOperation({
-            method: "GET",
-            endPoint: `geofences/${geofence.id}/${endpoint}`,
-            isRemote: false,
-            responseToCamelCase: true
-          }).then((response) => {
-            console.log("onCheckedGeometriesChange response:", response.data);
-            geofence[`loaded${featuresType}`] = response.data;
-            const newGeofenceLoadedFeatures = geofence[`loaded${featuresType}`];
-            if (newGeofenceLoadedFeatures && Array.isArray(geofence[`loaded${featuresType}`])) {
-              if (checkedFeatures.has(geofence.id)) {
-                newGeofenceLoadedFeatures.forEach((feature) => {
-                  setFeatureData(layerId, `geo_${geofence.id}_fid_${feature.id}`, feature.geometry, feature.properties);
-                });
-                geofence[`hasRenderized${featuresType}`] = true;
-              }
-            }
-          }).catch(() => {
-          });
-        } else {
-          currentGeofenceLoadedFeatures.forEach((feature) => {
-            setFeatureData(layerId, `geo_${geofence.id}_fid_${feature.id}`, feature.geometry, feature.properties);
-          });
-          geofence[`hasRenderized${featuresType}`] = true;
-        }
-      }
-    });
-    mapFeatureIds.forEach((mapFeatureId) => {
-      const featureId = Number(mapFeatureId.toString().split("_")[1]);
-      if (!checkedFeatures.has(featureId)) {
-        removeFeature(layerId, mapFeatureId);
-      }
-    });
-    return () => {
-    };
-  }, [checkedFeatures]);
-  return [checkedFeatures, setCheckedFeatures];
-}
-function useMaster() {
-  const {
-    goToAddEdit
-  } = useMapToolsStore((state) => state.geofenceActions, shallow);
-  const [checkedGeofences, hashGeofences, initialRows] = useMapToolsStore((state) => [state.geofenceState.checkedGeofences, state.geofenceState.hashGeofences, state.geofenceState.rows], shallow);
-  const {
-    setCheckedGeofences,
-    addGeofence,
-    updatePartialGeofence,
-    updateRows
-  } = useMapToolsStore((state) => state.geofenceActions, shallow);
-  useCheckedGeofences();
-  const [checkedCrossingFeatures, setCheckedCrossingFeatures] = useCheckedFeatures(GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES, "CrossingFeatures", "crossing_features");
-  const [checkedInternalFeatures, setCheckedInternalFeatures] = useCheckedFeatures(GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES, "InternalFeatures", "internal_features");
-  const rowKeyGetter = useCallback((row) => row.id, []);
-  const [selectedRows, setSelectedRows] = useState(/* @__PURE__ */ new Set());
-  const [backendQueryParams, setBackendQueryParams] = useState({});
-  const {
-    columns
-  } = useColumns({
-    rowKeyGetter
-  });
-  const {
-    pagerState,
-    rows,
-    onPageChange,
-    onRowsPerPageChange,
-    Refresh,
-    setRows
-  } = usePaginate({
-    endPoint: "geofences",
-    fireOnChangeParms: false,
-    fireOnFirstLoad: false,
-    queryParams: backendQueryParams,
-    isRemote: false,
-    responseToCamelCase: true,
-    initialRows
-  });
-  const onSelectedRowsChange = (newRowsSelectSet) => {
-    setSelectedRows(newRowsSelectSet);
-  };
-  const fullRefresh = useCallback((_id) => {
-    Refresh();
-  }, []);
-  useEffect(() => {
-    const newCheckedGeofences = new Set(checkedGeofences);
-    const newCheckedCrossingFeatures = new Set(checkedCrossingFeatures);
-    const newCheckedInternalFeatures = new Set(checkedInternalFeatures);
-    let updatedCheckedGeofences = false;
-    let updatedCheckedCrossingFeatures = false;
-    let updatedCheckedInternalFeatures = false;
-    newCheckedGeofences.forEach((chkRow) => {
-      if (rows.findIndex((row) => row.id === chkRow) === -1) {
-        newCheckedGeofences.delete(chkRow);
-      }
-    });
-    newCheckedCrossingFeatures.forEach((chkTF) => {
-      if (rows.findIndex((row) => row.id === chkTF) === -1) {
-        newCheckedCrossingFeatures.delete(chkTF);
-      }
-    });
-    newCheckedInternalFeatures.forEach((chkIF) => {
-      if (rows.findIndex((row) => row.id === chkIF) === -1) {
-        newCheckedInternalFeatures.delete(chkIF);
-      }
-    });
-    rows.forEach((row) => {
-      let hasGeo = hashGeofences[row.id];
-      if (!hasGeo) {
-        hasGeo = {
-          ...row,
-          hasRenderizedGeofence: false,
-          loadedCrossingFeatures: null,
-          loadedInternalFeatures: null,
-          hasRenderizedCrossingFeatures: false,
-          hasRenderizedInternalFeatures: false,
-          createdAt: row.createdAt
-        };
-        addGeofence(row.id, hasGeo);
-        return;
-      }
-      if (row.updatedAt && row.updatedAt !== hasGeo.updatedAt) {
-        updatePartialGeofence(row.id, {
-          updatedAt: row.updatedAt,
-          geometry: null,
-          hasRenderizedGeofence: false,
-          hasRenderizedCrossingFeatures: false,
-          hasRenderizedInternalFeatures: false,
-          loadedCrossingFeatures: null,
-          loadedInternalFeatures: null
-        });
-        updatedCheckedGeofences = true;
-        updatedCheckedCrossingFeatures = true;
-        updatedCheckedInternalFeatures = true;
-      }
-    });
-    if (newCheckedGeofences.size !== checkedGeofences.size || updatedCheckedGeofences) {
-      setCheckedGeofences(newCheckedGeofences);
-    }
-    if (newCheckedCrossingFeatures.size !== checkedCrossingFeatures.size || updatedCheckedCrossingFeatures) {
-      setCheckedCrossingFeatures(newCheckedCrossingFeatures);
-    }
-    if (newCheckedInternalFeatures.size !== checkedInternalFeatures.size || updatedCheckedInternalFeatures) {
-      setCheckedInternalFeatures(newCheckedInternalFeatures);
-    }
-    onSelectedRowsChange(selectedRows);
-    updateRows(rows);
-  }, [rows]);
-  const {
-    rowActionsGetter
-  } = useRowActionsGetter({
-    fullRefresh
-  });
-  return {
-    rowKeyGetter,
-    columns,
-    refresh: Refresh,
-    setBackendQueryParams,
-    pagerState,
-    rows,
-    onPageChange,
-    onRowsPerPageChange,
-    rowActionsGetter,
-    selectedRows,
-    onSelectedRowsChange,
-    checkedRows: checkedGeofences,
-    onCheckedRowsChange: setCheckedGeofences,
-    setRows,
-    goToAddEdit
-  };
-}
-const mapToolsClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
-  "root",
-  "tabToolsRoot",
-  "tabContentRoot",
-  "toolGeofences",
-  "toolGeofencesList",
-  "toolGeofencesAddEdit",
-  "toolGeofencesAddEditGeneral",
-  "toolGeofencesAddEditStyle",
-  "toolMeasureFormValue",
-  "toolMeasureFormValueDistance",
-  "toolMeasureFormValueSymbol",
-  "toolMeasure",
-  "toolMeausureLabel",
-  "toolMeausureLabelDistance",
-  "toolMeausureLabelSymbol",
-  "visible",
-  "hidden"
-]);
-function GeofencesList() {
-  const {
-    refresh,
-    setBackendQueryParams,
-    columns,
-    rows,
-    rowActionsGetter,
-    selectedRows,
-    onSelectedRowsChange,
-    pagerState,
-    onPageChange,
-    onRowsPerPageChange,
-    checkedRows,
-    onCheckedRowsChange,
-    setRows,
-    rowKeyGetter,
-    goToAddEdit
-  } = useMaster();
-  return /* @__PURE__ */ jsxs(Stack, {
-    direction: "column",
-    gap: "4px",
-    className: mapToolsClasses.toolGeofencesList,
-    children: [/* @__PURE__ */ jsx(Button, {
-      onClick: () => goToAddEdit(),
-      children: "Agregar geocerca"
-    }), /* @__PURE__ */ jsx(Filter, {
-      refresh,
-      setBackendQueryParams
-    }), /* @__PURE__ */ jsx(DataGrid, {
-      id: "geofences",
-      columns,
-      rows,
-      onRowsChange: setRows,
-      checkedRows,
-      onCheckedRowsChange,
-      rowActionsGetter,
-      rowKeyGetter,
-      selectedRows,
-      onSelectedRowsChange,
-      withActions: true,
-      actionsProps: {
-        withPager: true,
-        withLocalFilters: true,
-        pagerOptions: {
-          records: rows.length,
-          totalRecords: pagerState.totalRecords,
-          rowsPerPageOptions: [1, 2, 3, 4, 5, 10, 25],
-          page: pagerState.page,
-          rowsPerPage: pagerState.rowsPerPage,
-          onPageChange,
-          onRowsPerPageChange
-        }
-      }
-    }, "list")]
-  });
-}
-function MyActions$1() {
-  const {
-    control
-  } = useFormContext();
-  const inEdition = useWatch({
-    control,
-    name: "inEdition"
-  });
-  const {
-    goToList
-  } = useMapToolsStore((state) => state.geofenceActions);
-  return /* @__PURE__ */ jsxs(Actions, {
-    children: [/* @__PURE__ */ jsx(HelperError, {
-      name: "geometry"
-    }), /* @__PURE__ */ jsx(Button, {
-      onClick: () => {
-        goToList();
-      },
-      disabled: inEdition,
-      children: "Cancelar"
-    }), /* @__PURE__ */ jsx(ActionFormIntro, {
-      disabled: inEdition
-    })]
-  });
-}
-const STROKE_COLOR_DEFAULT = "#aaccaa";
-const STROKE_OPACITY_DEFAULT = { value: 1, label: "100%" };
-const STROKE_WHEIGTH_DEFAULT = { value: 1, label: "1 px" };
-const STROKE_DASH_ARRAY_DEFAULT = { value: "", label: "-----" };
-const FILL_COLOR_DEFAULT = "#aa3000";
-const FILL_OPACITY_DEFAULT = { value: 0.2, label: "20%" };
-const initialValues = {
-  name: "",
-  geofenceType: null,
-  alias: null,
-  customerId: null,
-  timeMinInSeconds: 5,
-  timeMinOutSeconds: 5,
-  inEdition: false,
-  geometry: null,
-  lat: null,
-  lng: null,
-  properties: {
-    radius: null,
-    strokeColor: STROKE_COLOR_DEFAULT,
-    strokeOpacity: STROKE_OPACITY_DEFAULT,
-    strokeWeight: STROKE_WHEIGTH_DEFAULT,
-    strokeDashArray: STROKE_DASH_ARRAY_DEFAULT,
-    fillColor: FILL_COLOR_DEFAULT,
-    fillOpacity: FILL_OPACITY_DEFAULT
-  }
-};
-const formatDataEnpoint = (response) => {
-  try {
-    const { data } = response;
-    const obRet = {
-      ...initialValues,
-      inEdition: false,
-      name: data.name,
-      geometry: data.geometry,
-      geofenceType: { id: data.type.id, name: data.type.name, url: "" },
-      properties: {
-        strokeColor: data.properties.strokeColor || STROKE_COLOR_DEFAULT,
-        strokeOpacity: data.properties.strokeOpacity || STROKE_OPACITY_DEFAULT,
-        strokeWeight: data.properties.strokeWeight || STROKE_WHEIGTH_DEFAULT,
-        strokeDashArray: data.properties.strokeDashArray || STROKE_DASH_ARRAY_DEFAULT,
-        fillColor: data.properties.fillColor || FILL_COLOR_DEFAULT,
-        fillOpacity: data.properties.fillOpacity || FILL_OPACITY_DEFAULT
-      }
-    };
-    if (obRet.geofenceType?.id === "gt_circle") {
-      if (data.properties.radius) {
-        obRet.properties.radius = data.properties.radius;
-      }
-      if (data.geometry && data.geometry.type === "Point") {
-        obRet.lng = data.geometry.coordinates[0];
-        obRet.lat = data.geometry.coordinates[1];
-      }
-    }
-    return obRet;
-  } catch (error) {
-    return { ...initialValues };
-  }
-};
-const getLayerFromGeometry = (geometry, geofenceTypeId, radius) => {
-  if (geometry) {
-    if (geofenceTypeId === "gt_circle" && geometry.type === "Point") {
-      return L.circle([geometry.coordinates[1], geometry.coordinates[0]], radius || 0);
-    } else if (geofenceTypeId === "gt_polygon" && geometry.type === "Polygon") {
-      const coordinates = geometry.coordinates.map(
-        (ring) => ring.map((position) => [position[1], position[0]])
-      );
-      return L.polygon(coordinates);
-    } else if (geofenceTypeId === "gt_rectangle" && geometry.type === "Polygon") {
-      const latLngs = geometry.coordinates[0].map((coord) => [coord[1], coord[0]]);
-      const lats = latLngs.map((coord) => coord);
-      const lngs = latLngs.map((coord) => coord);
-      const southWest = [Math.min(...lats), Math.min(...lngs)];
-      const northEast = [Math.max(...lats), Math.max(...lngs)];
-      return L.rectangle([southWest, northEast]);
-    }
-  }
-  return null;
-};
-function useDrawing() {
-  const { getLabel } = useModuleDictionary();
-  const readyToUpdate = useFormReadyForUpdate();
-  const map = useMap();
-  const { control, setValue } = useFormContext();
-  const fieldsWatch = useWatch({
-    control,
-    name: [
-      "geofenceType",
-      "inEdition",
-      "properties.strokeColor",
-      "properties.strokeOpacity",
-      "properties.strokeWeight",
-      "properties.strokeDashArray",
-      "properties.fillColor",
-      "properties.fillOpacity",
-      "geometry",
-      "properties.radius"
-    ]
-  });
-  const geofenceTypeId = fieldsWatch[0]?.id;
-  const inEdition = fieldsWatch[1];
-  const strokeColor = fieldsWatch[2];
-  const strokeOpacity = fieldsWatch[3].value;
-  const strokeWeight = fieldsWatch[4].value;
-  const strokeDashArray = fieldsWatch[5].value;
-  const fillColor = fieldsWatch[6];
-  const fillOpacity = fieldsWatch[7].value;
-  const geometry = fieldsWatch[8];
-  const radius = fieldsWatch[9];
-  const [drawing, setDrawing] = useState(false);
-  const currentLayer = useRef(null);
-  const [geometrTypeIdCached, setgeofenceTypeIdCached] = useState(geofenceTypeId);
-  useEffect(() => {
-    if (geometry) {
-      currentLayer.current = getLayerFromGeometry(geometry, geofenceTypeId, radius);
-      if (currentLayer.current) {
-        map.addLayer(currentLayer.current);
-      }
-    }
-    return () => {
-      if (currentLayer.current) {
-        currentLayer.current.remove();
-      }
-    };
-  }, [map]);
-  useEffect(() => {
-    if (currentLayer.current) {
-      currentLayer.current.setStyle({
-        color: strokeColor,
-        opacity: strokeOpacity,
-        weight: strokeWeight,
-        dashArray: strokeDashArray,
-        fillColor,
-        fillOpacity
-      });
-    }
-  }, [strokeColor, strokeOpacity, strokeWeight, strokeDashArray, fillColor, fillOpacity]);
-  useEffect(() => {
-    map.pm.setLang("en", {
-      tooltips: {
-        placeMarker: void 0,
-        firstVertex: getLabel(DICCTIONARY.LABEL_FIRST_VERTEX),
-        continueLine: getLabel(DICCTIONARY.LABEL_CONTINUE_LINE),
-        finishLine: getLabel(DICCTIONARY.LABEL_FINISH_LINE),
-        finishPoly: getLabel(DICCTIONARY.LABEL_FINISH_POLY),
-        finishRect: getLabel(DICCTIONARY.LABEL_FINISH_RECT),
-        startCircle: getLabel(DICCTIONARY.LABEL_START_CIRCLE),
-        finishCircle: getLabel(DICCTIONARY.LABEL_FINISH_CIRCLE),
-        placeCircleMarker: getLabel(DICCTIONARY.LABEL_PLACE_CIRCLE_MARKER)
-      }
-    });
-  }, [map, getLabel]);
-  useEffect(() => {
-    if (map) {
-      let shape = "Circle";
-      if (geometrTypeIdCached === "gt_polygon") {
-        shape = "Polygon";
-      } else if (geometrTypeIdCached === "gt_rectangle") {
-        shape = "Rectangle";
-      }
-      if (drawing) {
-        if (!currentLayer.current) {
-          setValue("inEdition", true);
-          if (shape === "Circle") {
-            map.on("pm:drawstart", ({ workingLayer }) => {
-              workingLayer.on("pm:centerplaced", (e) => {
-                var layer = e.workingLayer;
-                layer.setStyle(
-                  {
-                    color: strokeColor,
-                    opacity: strokeOpacity,
-                    weight: strokeWeight,
-                    dashArray: strokeDashArray,
-                    fillColor,
-                    fillOpacity
-                  }
-                );
-                setValue("lat", layer.getLatLng().lat);
-                setValue("lng", layer.getLatLng().lng);
-                layer.on("pm:change", (_e) => {
-                  setValue("properties.radius", layer.getRadius());
-                });
-              });
-            });
-            setValue("properties.subType", shape);
-          } else if (shape === "Polygon") {
-            map.on("pm:drawstart", ({ workingLayer }) => {
-              workingLayer.on("pm:vertexadded", (e) => {
-                var layer = e.workingLayer;
-                layer.setStyle(
-                  {
-                    color: strokeColor,
-                    opacity: strokeOpacity,
-                    weight: strokeWeight,
-                    dashArray: strokeDashArray,
-                    fillColor,
-                    fillOpacity
-                  }
-                );
-              });
-            });
-          }
-          map.pm.enableDraw(shape);
-          map.pm.setPathOptions(
-            {
-              color: strokeColor,
-              opacity: strokeOpacity,
-              weight: strokeWeight,
-              dashArray: strokeDashArray,
-              fillColor,
-              fillOpacity
-            }
-          );
-          map.on("pm:create", (e) => {
-            currentLayer.current = e.layer;
-            setValue("geometry", currentLayer.current.toGeoJSON()?.geometry, {
-              shouldTouch: false,
-              shouldValidate: true
-            });
-            setValue("inEdition", false);
-            setDrawing(false);
-          });
-        } else {
-          currentLayer.current.pm.enable();
-          setValue("inEdition", true);
-          currentLayer.current.on("pm:disable", (e) => {
-            currentLayer.current = e.layer;
-            console.log("Geometr\xEDa editada **", currentLayer.current.toGeoJSON());
-            setValue("geometry", currentLayer.current.toGeoJSON()?.geometry, {
-              shouldTouch: false,
-              shouldValidate: true
-            });
-            setValue("inEdition", false);
-            setDrawing(false);
-          });
-          if (shape === "Circle") {
-            currentLayer.current.on("pm:change", (e) => {
-              currentLayer.current = e.layer;
-              setValue("properties.radius", currentLayer.current.getRadius());
-            });
-          }
-        }
-      } else {
-        map.pm.disableDraw("Polygon");
-        map.off("pm:create");
-        map.off("pm:edit");
-        map.off("pm:drawstart");
-      }
-    }
-  }, [map, drawing]);
-  const handleDraw = useCallback(() => {
-    setDrawing(true);
-  }, []);
-  const handleFinish = useCallback(() => {
-    if (currentLayer.current) {
-      currentLayer.current.pm.disable();
-      currentLayer.current.setStyle({ color: "#ff0000", fillColor: "#ff0000" });
-    }
-  }, []);
-  useEffect(() => {
-    if (!readyToUpdate)
-      return;
-    if (geofenceTypeId) {
-      if (geofenceTypeId !== geometrTypeIdCached) {
-        setgeofenceTypeIdCached(geofenceTypeId);
-        if (geometrTypeIdCached !== "gt_circle") {
-          setValue("properties.radius", null);
-          setValue("lat", null);
-          setValue("lng", null);
-        }
-        setValue("geometry", null);
-        if (currentLayer.current) {
-          currentLayer.current.remove();
-          currentLayer.current = null;
-        }
-      }
-    }
-  }, [geofenceTypeId]);
-  return { inEdition, handleDraw, handleFinish, geometrTypeIdCached };
-}
-function useSumbitErrorsFocus() {
-  const {
-    setFocus,
-    formState: { isSubmitted, errors }
-  } = useFormContext();
-  const { handleChange } = useTab();
-  useEffect(() => {
-    if (isSubmitted) {
-      const firstError = Object.keys(errors).reduce((field, a) => {
-        const fieldKey = field;
-        return !!errors[fieldKey] ? fieldKey : a;
-      }, null);
-      if (firstError) {
-        let found = ["name", "geometry", "geofenceType", "timeMinInSeconds", "timeMinOutSeconds"].some((field) => field.includes(firstError));
-        if (found) {
-          handleChange(null, "general");
-        }
-        if (firstError) {
-          setFocus(firstError);
-        }
-      }
-    }
-  }, [isSubmitted, errors]);
-}
-function GeneralData() {
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    inEdition,
-    handleDraw,
-    handleFinish,
-    geometrTypeIdCached
-  } = useDrawing();
-  useSumbitErrorsFocus();
-  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.GENERAL}`;
-  const geofencesTypes = useMemo(() => {
-    return [{
-      id: "gt_circle",
-      name: getLabel(DICCTIONARY.LABEL_GEOMETRY_CIRCLE),
-      url: `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.GEOMETRY_CIRCLE}`
-    }, {
-      id: "gt_polygon",
-      name: getLabel(DICCTIONARY.LABEL_GEOMETRY_POLYGON),
-      url: `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.GEOMETRY_POLYGON}`
-    }, {
-      id: "gt_rectangle",
-      name: getLabel(DICCTIONARY.LABEL_GEOMETRY_RECTANGLE),
-      url: `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.GEOMETRY_RECTANGLE}`
-    }];
-  }, [getLabel]);
-  return /* @__PURE__ */ jsxs(PaperForm, {
-    urlIcon,
-    title: getLabel(DICCTIONARY.PAPER_GENERAL),
-    children: [/* @__PURE__ */ jsx(RHFTextField, {
-      name: "name",
-      disabled: false,
-      type: "text",
-      label: getLabel(`${DICCTIONARY.LABEL_NAME}`)
-    }), /* @__PURE__ */ jsxs(Stack, {
-      direction: "column",
-      spacing: 1,
-      alignItems: "center",
-      children: [/* @__PURE__ */ jsxs(Stack, {
-        direction: "row",
-        spacing: 1,
-        alignItems: "center",
-        children: [/* @__PURE__ */ jsx(RHFAutocomplete, {
-          name: "geofenceType",
-          autoComplete: "off",
-          options: geofencesTypes,
-          getOptionLabel: (option) => option.name,
-          isOptionEqualToValue: (option, value) => option.id === value.id,
-          getOptionUrlImage: (option) => option.url,
-          imageHeight: "12px",
-          imageWidth: "12px",
-          label: getLabel(DICCTIONARY.LABEL_GEOMETRY_TYPE)
-        }), /* @__PURE__ */ jsx(Button, {
-          onClick: handleDraw,
-          disabled: inEdition || !geometrTypeIdCached,
-          children: getLabel(DICCTIONARY.LABEL_DRAW)
-        }), /* @__PURE__ */ jsx(Button, {
-          onClick: handleFinish,
-          disabled: !inEdition,
-          children: getLabel(DICCTIONARY.LABEL_FINISH)
-        })]
-      }), geometrTypeIdCached && geometrTypeIdCached === "gt_circle" && /* @__PURE__ */ jsxs(Stack, {
-        direction: "row",
-        spacing: 1,
-        alignItems: "center",
-        children: [/* @__PURE__ */ jsx(RHFTextField, {
-          name: "properties.radius",
-          label: getLabel(DICCTIONARY.LABEL_RADIUS),
-          autoComplete: "on",
-          skeletonWidth: "70%",
-          skeletonHeight: "18px",
-          disabled: true,
-          size: "medium"
-        }), /* @__PURE__ */ jsx(RHFTextField, {
-          name: "lat",
-          label: getLabel(DICCTIONARY.LABEL_LAT),
-          autoComplete: "on",
-          skeletonWidth: "70%",
-          skeletonHeight: "18px",
-          disabled: true,
-          size: "medium"
-        }), /* @__PURE__ */ jsx(RHFTextField, {
-          name: "lng",
-          label: getLabel(DICCTIONARY.LABEL_LON),
-          autoComplete: "on",
-          skeletonWidth: "70%",
-          skeletonHeight: "18px",
-          disabled: true,
-          size: "medium"
-        })]
-      })]
-    })]
-  });
-}
-function ConfigData() {
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.CONFIG}`;
-  return /* @__PURE__ */ jsxs(PaperForm, {
-    urlIcon,
-    title: getLabel(DICCTIONARY.PAPER_CONFIG),
-    children: [/* @__PURE__ */ jsx(RHFTextField, {
-      name: "alias",
-      disabled: false,
-      type: "text",
-      label: getLabel(`${DICCTIONARY.LABEL_ALIAS}`)
-    }), /* @__PURE__ */ jsx(RHFTextField, {
-      name: "customerId",
-      disabled: false,
-      type: "text",
-      label: getLabel(`${DICCTIONARY.LABEL_CUSTOMER_ID}`)
-    }), /* @__PURE__ */ jsx(RHFTextField, {
-      name: "timeMinInSeconds",
-      disabled: false,
-      type: "number",
-      label: getLabel(`${DICCTIONARY.LABEL_TIME_MIN_IN_SECONDS}`)
-    }), /* @__PURE__ */ jsx(RHFTextField, {
-      name: "timeMinOutSeconds",
-      disabled: false,
-      type: "number",
-      label: getLabel(`${DICCTIONARY.LABEL_TIME_MIN_OUT_SECONDS}`)
-    })]
-  });
-}
-function FillData() {
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.FILL}`;
-  return /* @__PURE__ */ jsxs(PaperForm, {
-    urlIcon,
-    title: getLabel(DICCTIONARY.PAPER_STROKE),
-    children: [/* @__PURE__ */ jsx(PropertyValue, {
-      property: getLabel(`${DICCTIONARY.LABEL_COLOR}`),
-      isForm: true,
-      propertyWidth: 150,
-      value: /* @__PURE__ */ jsx(RHFColorPicker, {
-        name: "properties.fillColor"
-      })
-    }, "properties.fillColor"), /* @__PURE__ */ jsx(PropertyValue, {
-      property: getLabel(`${DICCTIONARY.LABEL_OPACITY}`),
-      isForm: true,
-      propertyWidth: 150,
-      value: /* @__PURE__ */ jsx(RHFAutocomplete, {
-        name: "properties.fillOpacity",
-        autoComplete: "off",
-        options: STYLE_OPACITIES,
-        getOptionLabel: (option) => option.label,
-        isOptionEqualToValue: (option, value) => option.value === value.value,
-        label: "ssss"
-      })
-    }, "properties.fillOpacity")]
-  });
-}
-function StrokeData() {
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.STROKE}`;
-  return /* @__PURE__ */ jsxs(PaperForm, {
-    urlIcon,
-    title: getLabel(DICCTIONARY.PAPER_STROKE),
-    children: [/* @__PURE__ */ jsx(PropertyValue, {
-      property: getLabel(`${DICCTIONARY.LABEL_COLOR}`),
-      isForm: true,
-      propertyWidth: 150,
-      value: /* @__PURE__ */ jsx(RHFColorPicker, {
-        name: "properties.strokeColor"
-      })
-    }, "properties.strokeColor"), /* @__PURE__ */ jsx(PropertyValue, {
-      property: getLabel(`${DICCTIONARY.LABEL_OPACITY}`),
-      isForm: true,
-      propertyWidth: 150,
-      value: /* @__PURE__ */ jsx(RHFAutocomplete, {
-        name: "properties.strokeOpacity",
-        autoComplete: "off",
-        options: STYLE_OPACITIES,
-        getOptionLabel: (option) => option.label,
-        isOptionEqualToValue: (option, value) => option.value === value.value,
-        label: "ssss"
-      })
-    }, "properties.strokeOpacity"), /* @__PURE__ */ jsx(PropertyValue, {
-      property: getLabel(`${DICCTIONARY.LABEL_WEIGHT}`),
-      isForm: true,
-      propertyWidth: 150,
-      value: /* @__PURE__ */ jsx(RHFAutocomplete, {
-        name: "properties.strokeWeight",
-        autoComplete: "off",
-        options: STYLE_WHEIGHTS,
-        getOptionLabel: (option) => option.label,
-        isOptionEqualToValue: (option, value) => option.value === value.value,
-        label: "ssss"
-      })
-    }, "properties.strokeWeight"), /* @__PURE__ */ jsx(PropertyValue, {
-      property: getLabel(`${DICCTIONARY.LABEL_DASH_ARRAY}`),
-      isForm: true,
-      propertyWidth: 150,
-      value: /* @__PURE__ */ jsx(RHFAutocomplete, {
-        name: "properties.strokeDashArray",
-        autoComplete: "off",
-        options: STYLE_PATTERNS,
-        getOptionLabel: (option) => option.label,
-        isOptionEqualToValue: (option, value) => option.value === value.value,
-        label: "ssss"
-      })
-    }, "properties.strokeDashArray")]
-  });
-}
-function StyleData() {
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(StrokeData, {}), /* @__PURE__ */ jsx(FillData, {})]
-  });
-}
-function MyTabs() {
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    currentTab,
-    handleChange
-  } = useTab();
-  const geofenceAddEditTabs = useMemo(() => {
-    return [{
-      value: "general",
-      icon: void 0,
-      components: /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(GeneralData, {}), /* @__PURE__ */ jsx(ConfigData, {})]
-      }),
-      toolTip: getLabel(DICCTIONARY.TAB_GENERAL_CONFIG_TOOLTIP),
-      className: mapToolsClasses.toolGeofencesAddEditGeneral
-    }, {
-      value: "style",
-      icon: void 0,
-      components: /* @__PURE__ */ jsx(StyleData, {}),
-      toolTip: getLabel(DICCTIONARY.TAB_STYLE_CONFIG_TOOLTIP),
-      className: mapToolsClasses.toolGeofencesAddEditStyle
-    }];
-  }, [getLabel]);
-  console.log("MyTabs", currentTab);
-  return /* @__PURE__ */ jsxs(Stack, {
-    direction: "column",
-    children: [/* @__PURE__ */ jsx(Tabs, {
-      value: currentTab,
-      scrollButtons: "auto",
-      variant: "scrollable",
-      allowScrollButtonsMobile: true,
-      onChange: (_e, newValue) => handleChange(_e, newValue),
-      children: geofenceAddEditTabs.map((tab) => /* @__PURE__ */ jsx(Tab, {
-        value: tab.value,
-        icon: tab.icon,
-        label: /* @__PURE__ */ jsx(Tooltip, {
-          title: tab.toolTip,
-          children: /* @__PURE__ */ jsx("span", {
-            children: tab.toolTip
-          })
-        }),
-        SKTWidth: "100px",
-        SKTHeight: "14px"
-      }, tab.value))
-    }), geofenceAddEditTabs.map((tab) => {
-      const isMatched = tab.value === currentTab;
-      return /* @__PURE__ */ jsx(TabContent, {
-        className: clsx(mapToolsClasses.tabContentRoot, tab.className, isMatched ? mapToolsClasses.visible : mapToolsClasses.hidden),
-        children: tab.components
-      }, tab.value);
-    })]
-  });
-}
-function GeneralDataValidation(getLabel) {
-  return {
-    name: Yup.string().required(getLabel(DICCTIONARY.VALIDATION_FIELD_REQUIRED)),
-    geometry: Yup.object().nullable().required(getLabel(DICCTIONARY.VALIDATION_GEOMETRY_REQUIRED)),
-    geofenceType: Yup.object().nullable().required(getLabel(DICCTIONARY.VALIDATION_FIELD_REQUIRED))
-  };
-}
-function ConfigDataValidation(getLabel) {
-  return {
-    timeMinInSeconds: Yup.number().required(getLabel(DICCTIONARY.VALIDATION_FIELD_REQUIRED)).typeError(getLabel(DICCTIONARY.VALIDATION_FIELD_TYPE_NUMBER_ERROR)),
-    timeMinOutSeconds: Yup.number().required(getLabel(DICCTIONARY.VALIDATION_FIELD_REQUIRED)).typeError(getLabel(DICCTIONARY.VALIDATION_FIELD_TYPE_NUMBER_ERROR))
-  };
-}
-function useValidation$1() {
-  const { getLabel } = useModuleDictionary();
-  const validationSchema = useMemo(
-    () => Yup.object().shape({
-      ...GeneralDataValidation(getLabel),
-      ...ConfigDataValidation(getLabel)
-    }),
-    [getLabel]
-  );
-  return { validationSchema };
-}
-const getSummitData = (values, geofenceId) => {
-  const newEditObj = {
-    name: values.name,
-    typeId: values.geofenceType.id,
-    geometry: values.geometry,
-    properties: {
-      strokeColor: values.properties.fillColor,
-      strokeOpacity: values.properties.strokeOpacity.value,
-      strokeWeight: values.properties.strokeWeight.value,
-      strokeDashArray: values.properties.strokeDashArray.value,
-      fillColor: values.properties.fillColor,
-      fillOpacity: values.properties.fillOpacity.value
-    },
-    timeMinInSeconds: values.timeMinInSeconds,
-    timeMinOutSeconds: values.timeMinOutSeconds,
-    alias: values.alias,
-    customerId: values.customerId,
-    ...geofenceId ? { geofenceId } : {}
-  };
-  if (values.geofenceType.id === "gt_circle") {
-    newEditObj.properties.radius = values.properties.radius;
-  }
-  return newEditObj;
-};
-function useSubmit(props) {
-  const { objectId } = props;
-  const { toast } = useHostTools();
-  const { goToList } = useMapToolsStore((state) => state.geofenceActions);
-  const { networkOperation } = useNetwork();
-  const onSubmit = async (data) => {
-    await networkOperation({
-      method: objectId ? "PUT" : "POST",
-      endPoint: `${ENDPOINT_GEOFENCE_NEW_EDIT}${objectId ? `/${objectId}` : ""}`,
-      data: getSummitData(data, objectId),
-      toastError: true,
-      toastSuccess: false,
-      bodyToSnakeCase: true,
-      isRemote: false
-    }).then((response) => {
-      toast(
-        response.message,
-        { type: "success" }
-      );
-      goToList();
-    }).catch((_error) => {
-    });
-  };
-  return { onSubmit };
-}
-function GeofenceAddEdit() {
-  const [geofenceId, finalInitalValues, omitCallEnpoint] = useMapToolsStore((state) => {
-    if (state.geofenceState.geofenceId === void 0) {
-      return [void 0, initialValues, false];
-    }
-    const geofence = state.geofenceState.hashGeofences[state.geofenceState.geofenceId];
-    if (geofence?.geometry) {
-      const emulateResponse = {
-        data: {
-          type: geofence.type,
-          name: geofence.name,
-          id: geofence.id,
-          active: false,
-          geometry: geofence.geometry,
-          properties: geofence.properties,
-          countCrossingFeatures: geofence.countCrossingFeatures,
-          countInternalFeatures: geofence.countInternalFeatures,
-          createdAt: geofence.createdAt,
-          updatedAt: geofence.updatedAt,
-          timeMinInSeconds: geofence.timeMinInSeconds,
-          timeMinOutSeconds: geofence.timeMinOutSeconds,
-          alias: geofence.alias,
-          customerId: geofence.customerId
-        }
-      };
-      return [state.geofenceState.geofenceId, formatDataEnpoint(emulateResponse), true];
-    } else {
-      return [state.geofenceState.geofenceId, initialValues, false];
-    }
-  });
-  const {
-    formValues,
-    statusLoad
-  } = useFormAddEdit({
-    objectId: geofenceId,
-    formatDataEnpoint,
-    initialValues: finalInitalValues,
-    endPoint: ENDPOINT_GEOFENCE_GET,
-    isRemote: false,
-    omitCallEnpoint
-  });
-  const {
-    validationSchema
-  } = useValidation$1();
-  const {
-    onSubmit
-  } = useSubmit({
-    objectId: geofenceId
-  });
-  return /* @__PURE__ */ jsxs(RHFormProvider, {
-    statusLoad,
-    onSubmit,
-    values: formValues,
-    validationSchema,
-    className: mapToolsClasses.toolGeofencesAddEditGeneral,
-    children: [/* @__PURE__ */ jsx(Stack, {
-      direction: "column",
-      children: /* @__PURE__ */ jsx(TabProvider, {
-        initialValue: "general",
-        children: /* @__PURE__ */ jsx(MyTabs, {})
-      })
-    }), /* @__PURE__ */ jsx(MyActions$1, {})]
-  });
-}
-function GeofencesTool() {
-  const currentGeofenceTool = useMapToolsStore((state) => state.geofenceState.currentGeofenceTool, shallow);
-  return /* @__PURE__ */ jsxs(Stack, {
-    direction: "column",
-    gap: "4px",
-    className: mapToolsClasses.toolGeofences,
-    children: [currentGeofenceTool === "list" && /* @__PURE__ */ jsx(GeofencesList, {}), currentGeofenceTool === "add_edit" && /* @__PURE__ */ jsx(GeofenceAddEdit, {})]
-  });
-}
-function MyActions() {
-  const {
-    control,
-    setValue
-  } = useFormContext();
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const fieldsWatch = useWatch({
-    control,
-    name: ["statusEdition", "reInits"]
-  });
-  const statusEdition = fieldsWatch[0];
-  const reInits = fieldsWatch[1];
-  const initDraw = () => {
-    if (statusEdition === "initial") {
-      setValue("statusEdition", "draw");
-    } else if (statusEdition === "draw") {
-      setValue("reInits", reInits + 1);
-    }
-  };
-  return /* @__PURE__ */ jsx(Actions, {
-    children: /* @__PURE__ */ jsx(Button, {
-      onClick: initDraw,
-      children: statusEdition === "initial" ? getLabel(DICCTIONARY.LABEL_MEASURE_START) : getLabel(DICCTIONARY.LABEL_MEASURE_RESTART)
-    })
-  });
-}
-function MeasureDataValidation(_getLabel) {
-  return {};
-}
-function useValidation() {
-  const { getLabel } = useModuleDictionary();
-  const validationSchema = useMemo(
-    () => Yup.object().shape({
-      ...MeasureDataValidation()
-    }),
-    [getLabel]
-  );
-  return { validationSchema };
-}
-const INITIAL_FORM_VALUES = {
-  statusLoad: "ready",
-  reInits: 0,
-  value: "0",
-  measureTypeId: "distance",
-  magnitudFactor: { id: "m_kilometers", name: "Kilometers", symbol: "k", factor_x0: 0, factor_x1: 1, factor_x2: 0 },
-  unitArea: null,
-  statusEdition: "initial"
-};
-const STYLE_MEASURE_OPTIONS = {
-  strokeLineColor: "#1E96DC",
-  strokeLineWeight: 5,
-  markerHeight: 37,
-  markerWidth: 26,
-  labelMarkerHeight: 0,
-  labelMarkerWidth: 0,
-  labelMarkerAnchorY: 0,
-  labelMarkerAnchorX: 0
-};
-function useMeasure() {
-  const { getLabel } = useModuleDictionary();
-  const readyToUpdate = useFormReadyForUpdate();
-  const map = useMap();
-  const { control, setValue } = useFormContext();
-  const fieldsWatch = useWatch({
-    control,
-    name: [
-      "statusEdition",
-      "value",
-      "magnitudFactor",
-      "reInits"
-    ]
-  });
-  const statusEdition = fieldsWatch[0];
-  const value = fieldsWatch[1];
-  const magnitudFactor = fieldsWatch[2];
-  const reInits = fieldsWatch[3];
-  const [magnitudFactorCached, setMagnitudFactorCached] = useState(magnitudFactor);
-  const currentMeasure = useRef({ measurePoints: [], addMarker: false, magnitudFactor, dragging: false });
-  const clearMeasure = useCallback(() => {
-    currentMeasure.current.measurePoints.forEach((measurePoint) => {
-      measurePoint.marker.remove();
-      measurePoint.labelMarker.remove();
-    });
-    currentMeasure.current.measurePoints = [];
-    setValue("value", measureDistante());
-  }, []);
-  const getFormatFactorDistance = useCallback((distance, withSymbol = false) => {
-    if (distance === void 0) {
-      return void 0;
-    }
-    const cMagnitudeFactor = currentMeasure.current.magnitudFactor;
-    return (cMagnitudeFactor.factor_x0 + distance * cMagnitudeFactor.factor_x1 + (distance ^ 2 * cMagnitudeFactor.factor_x2)).toFixed(2) + (withSymbol ? ` ${cMagnitudeFactor.symbol}` : "");
-  }, []);
-  const measureDistante = useCallback(() => {
-    var totalDistance = 0;
-    const measurePoints = currentMeasure.current.measurePoints;
-    if (currentMeasure.current.layerLine) {
-      if (measurePoints.length < 2) {
-        currentMeasure.current.layerLine.remove();
-        currentMeasure.current.layerLine = void 0;
-      } else {
-        currentMeasure.current.layerLine.setLatLngs(measurePoints.map((measurePoint) => measurePoint.marker.getLatLng()));
-      }
-    } else {
-      if (measurePoints.length > 1) {
-        currentMeasure.current.layerLine = L.polyline(
-          measurePoints.map((measurePoint) => measurePoint.marker.getLatLng()),
-          {
-            color: STYLE_MEASURE_OPTIONS.strokeLineColor,
-            weight: STYLE_MEASURE_OPTIONS.strokeLineWeight,
-            interactive: false
-          }
-        ).addTo(map);
-      }
-    }
-    for (let i = 0; i < measurePoints.length - 1; i++) {
-      totalDistance += measurePoints[i].marker.getLatLng().distanceTo(measurePoints[i + 1].marker.getLatLng());
-    }
-    if (measurePoints.length > 0 && measurePoints[0].formatDistanceFromPrevious !== void 0) {
-      measurePoints[0].formatDistanceFromPrevious = void 0;
-    }
-    for (let i = 1; i < measurePoints.length; i++) {
-      const formatDistanceFromPrevious = getFormatFactorDistance(measurePoints[i - 1].marker.getLatLng().distanceTo(measurePoints[i].marker.getLatLng()), true);
-      if (measurePoints[i].formatDistanceFromPrevious !== formatDistanceFromPrevious) {
-        measurePoints[i].formatDistanceFromPrevious = formatDistanceFromPrevious;
-        measurePoints[i].labelMarker.setIcon(getLabelMarkerPointIcon(formatDistanceFromPrevious));
-        addClickListenerForRemove(measurePoints[i].labelMarker);
-      }
-    }
-    return getFormatFactorDistance(totalDistance);
-  }, [map]);
-  const getMarkerPointIcon = useCallback((position) => {
-    return L.divIcon({
-      className: mapClasses.measureMarkerRoot,
-      html: `<div  class="${mapClasses.measureMarkerContainer}">
-                <div  class="${mapClasses.measureMarkerContainerRhomb}">
-                </div>
-                <div  class="${mapClasses.measureMarkerContainerSlot}">
-                    <div  class="${mapClasses.measureMarkerContainerSlotNumber}">
-                        ${position}
-                    </div>
-                </div>
-            </div>
-            `,
-      iconSize: [STYLE_MEASURE_OPTIONS.markerWidth, STYLE_MEASURE_OPTIONS.markerHeight],
-      iconAnchor: [STYLE_MEASURE_OPTIONS.markerWidth / 2, STYLE_MEASURE_OPTIONS.markerHeight]
-    });
-  }, []);
-  const getLabelMarkerPointIcon = useCallback((distance) => {
-    return L.divIcon({
-      className: mapClasses.measureLabelMarkerRoot,
-      html: `<div  class="${mapClasses.measureLabelMarkerContainer}">
-            ${distance ? `<span class="${mapClasses.measureLabelMarkerDistance}">${distance}</span>` : ""}
-            <div class="${mapClasses.measureLabelMarkerRemove}">${getLabel(DICCTIONARY.LABEL_MEASURE_REMOVE_POINT)}</div>
-            </div>`,
-      iconSize: [STYLE_MEASURE_OPTIONS.labelMarkerWidth, STYLE_MEASURE_OPTIONS.labelMarkerHeight],
-      iconAnchor: [STYLE_MEASURE_OPTIONS.labelMarkerAnchorX, STYLE_MEASURE_OPTIONS.labelMarkerAnchorY]
-    });
-  }, [getLabel]);
-  const onClickRemovePoint = useCallback((labelMarker) => {
-    return (e) => {
-      e.stopPropagation();
-      if (!currentMeasure.current.dragging) {
-        var markIndex = currentMeasure.current.measurePoints.findIndex((searchElement) => {
-          return searchElement.labelMarker === labelMarker;
-        });
-        if (markIndex !== -1) {
-          var measurePoint = currentMeasure.current.measurePoints[markIndex];
-          measurePoint.marker.remove();
-          measurePoint.labelMarker.remove();
-          currentMeasure.current.measurePoints.splice(markIndex, 1);
-          setValue("value", measureDistante());
-          currentMeasure.current.addMarker = true;
-        }
-        currentMeasure.current.measurePoints.forEach((measurePoint2, index) => {
-          measurePoint2.marker.setIcon(getMarkerPointIcon(index + 1));
-        });
-      }
-    };
-  }, []);
-  const addClickListenerForRemove = useCallback((labelMarker) => {
-    var element = labelMarker.getElement();
-    if (element) {
-      var elements = element.getElementsByClassName("M4L-MapTool-MeasureToolTip-Remove");
-      element = elements[0];
-      if (element) {
-        element.addEventListener("click", onClickRemovePoint(labelMarker));
-      }
-    }
-  }, []);
-  const onClickMap = useCallback((e) => {
-    var lat = e.latlng.lat;
-    var lng = e.latlng.lng;
-    var formatDistanceFromPrevious = void 0;
-    if (currentMeasure.current.addMarker === false) {
-      return;
-    }
-    if (currentMeasure.current.measurePoints.length > 0) {
-      formatDistanceFromPrevious = getFormatFactorDistance(currentMeasure.current.measurePoints[currentMeasure.current.measurePoints.length - 1].marker.getLatLng().distanceTo(e.latlng));
-    }
-    var marker = L.marker([lat, lng], {
-      draggable: true,
-      riseOnHover: true,
-      autoPan: true,
-      icon: getMarkerPointIcon(currentMeasure.current.measurePoints.length + 1),
-      zIndexOffset: MAP_ZINDEX_DEFAULT
-    }).addTo(map);
-    marker.on("moveend", function(_e) {
-      var latlng = marker.getLatLng();
-      labelMarker.setLatLng(latlng);
-      setValue("value", measureDistante());
-    });
-    marker.on("mouseover", function(_e) {
-      currentMeasure.current.addMarker = false;
-    });
-    marker.on("mouseout", function(_e) {
-      currentMeasure.current.addMarker = true;
-    });
-    var labelMarker = L.marker([lat, lng], {
-      draggable: true,
-      riseOnHover: true,
-      icon: getLabelMarkerPointIcon(formatDistanceFromPrevious),
-      zIndexOffset: MAP_ZINDEX_DEFAULT
-    }).addTo(map);
-    labelMarker.on("moveend", function(_e) {
-      var latlng = labelMarker.getLatLng();
-      marker.setLatLng(latlng);
-      setValue("value", measureDistante());
-    });
-    labelMarker.on("mouseover", function(_e) {
-      currentMeasure.current.addMarker = false;
-    });
-    labelMarker.on("mouseout", function(_e) {
-      currentMeasure.current.addMarker = true;
-    });
-    labelMarker.on("dragstart", function(_e) {
-      currentMeasure.current.dragging = true;
-    });
-    labelMarker.on("dragend", function(_e) {
-      setTimeout(function() {
-        currentMeasure.current.dragging = false;
-      }, 10);
-    });
-    addClickListenerForRemove(labelMarker);
-    currentMeasure.current.measurePoints.push({
-      marker,
-      labelMarker,
-      formatDistanceFromPrevious
-    });
-    setValue("value", measureDistante());
-  }, [map, measureDistante, setValue]);
-  const onMouseMoveMap = useCallback(() => {
-    map.getContainer().style.cursor = "crosshair";
-  }, [map]);
-  const onMouseOutMap = useCallback(() => {
-    map.getContainer().style.cursor = "default";
-  }, [map]);
-  useEffect(() => {
-    if (map) {
-      if (statusEdition === "initial") {
-        return;
-      } else {
-        currentMeasure.current.addMarker = true;
-        map.on("mousemove", onMouseMoveMap);
-        map.on("mouseout", onMouseOutMap);
-        map.on("click", onClickMap);
-      }
-    }
-  }, [map, statusEdition]);
-  useEffect(() => {
-    console.log("useEffect magnitudFactor", readyToUpdate, magnitudFactor);
-    if (!readyToUpdate)
-      return;
-    if (magnitudFactor.id !== magnitudFactorCached.id) {
-      console.log("useEffect magnitudFactor CAMBIO");
-      setMagnitudFactorCached({ ...magnitudFactor });
-      currentMeasure.current.magnitudFactor = magnitudFactor;
-      setValue("value", measureDistante());
-    }
-  }, [magnitudFactor]);
-  useEffect(() => {
-    console.log("useEffect reInits", readyToUpdate, reInits);
-    if (!readyToUpdate)
-      return;
-    clearMeasure();
-  }, [reInits]);
-  useEffect(() => {
-    return () => {
-      map.off("mousemove", onMouseMoveMap);
-      map.off("mouseout", onMouseOutMap);
-      map.off("click", onClickMap);
-      map.getContainer().style.cursor = "default";
-      clearMeasure();
-      console.debug("DESMONTAJES MARCAS Y EVENTOS");
-    };
-  }, []);
-  return { statusEdition, magnitudFactor, value };
-}
-function MeasureData() {
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    value,
-    magnitudFactor
-  } = useMeasure();
-  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.MEASURE}`;
-  return /* @__PURE__ */ jsxs(PaperForm, {
-    urlIcon,
-    title: getLabel(DICCTIONARY.PAPER_MEASURE),
-    children: [/* @__PURE__ */ jsx(RHFAutocompleteAsync, {
-      endPoint: "magnitudes/factors?origin_unit_reference_id=m_kilometers",
-      name: "magnitudFactor",
-      autoComplete: "off",
-      getOptionLabel: (option) => option.name,
-      isOptionEqualToValue: (option, value2) => option.id === value2.id,
-      label: getLabel(DICCTIONARY.LABEL_MEASURE_UNIT),
-      isRemote: false
-    }), /* @__PURE__ */ jsxs(Stack, {
-      direction: "row",
-      spacing: 2,
-      className: mapToolsClasses.toolMeasureFormValue,
-      children: [/* @__PURE__ */ jsx("span", {
-        className: mapToolsClasses.toolMeasureFormValueDistance,
-        children: value
-      }), /* @__PURE__ */ jsx("span", {
-        className: mapToolsClasses.toolMeasureFormValueSymbol,
-        children: magnitudFactor.symbol
-      })]
-    })]
-  });
-}
-function MeasureTool() {
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const finalInitalValues = {
-    ...INITIAL_FORM_VALUES
-  };
-  if (finalInitalValues?.magnitudFactor?.name) {
-    finalInitalValues.magnitudFactor.name = getLabel(DICCTIONARY.LABEL_MEASURE_UNIT_BASE_KILOMETERS);
-  }
-  const {
-    validationSchema
-  } = useValidation();
-  const onSubmit = () => {
-  };
-  return /* @__PURE__ */ jsxs(RHFormProvider, {
-    statusLoad: INITIAL_FORM_VALUES.statusLoad,
-    onSubmit,
-    values: finalInitalValues,
-    validationSchema,
-    children: [/* @__PURE__ */ jsx(Stack, {
-      direction: "column",
-      children: /* @__PURE__ */ jsx(MeasureData, {})
-    }), /* @__PURE__ */ jsx(MyActions, {})]
-  });
-}
-const PolylineWithArrows = ({
-  positions,
-  enableEdit,
-  ...other
-}) => {
-  const map = useMap();
-  const polylineRef = useRef(null);
-  const decoratorRef = useRef(null);
-  useEffect(() => {
-    if (polylineRef.current) {
-      const decorator = L__default.polylineDecorator(polylineRef.current, {
-        patterns: [{
-          repeat: 50,
-          symbol: L__default.Symbol.arrowHead({
-            pixelSize: 4,
-            polygon: false,
-            pathOptions: {
-              stroke: true,
-              color: "#ffffff",
-              weight: 2
-            }
-          })
-        }]
-      }).addTo(map);
-      decoratorRef.current = decorator;
-      if (enableEdit) {
-        polylineRef.current.pm.enable();
-      } else {
-        polylineRef.current.pm.disable();
-      }
-      polylineRef.current.on("pm:change", () => {
-        if (decoratorRef.current) {
-          map.removeLayer(decoratorRef.current);
-        }
-        if (polylineRef.current) {
-          decoratorRef.current = L__default.polylineDecorator(polylineRef.current, {
-            patterns: [{
-              repeat: 40,
-              symbol: L__default.Symbol.arrowHead({
-                pixelSize: 4,
-                polygon: false,
-                pathOptions: {
-                  stroke: true,
-                  color: "#cc0000",
-                  weight: 2
-                }
-              })
-            }]
-          }).addTo(map);
-        }
-      });
-      return () => {
-        if (decoratorRef.current) {
-          map.removeLayer(decoratorRef.current);
-        }
-      };
-    }
-  }, [map, enableEdit]);
-  return /* @__PURE__ */ jsx(Polyline, {
-    positions,
-    ref: polylineRef,
-    ...other
-  });
-};
-const PolylineWithArrows$1 = PolylineWithArrows;
-function useLayers() {
-  const {
-    addLayer,
-    removeLayer
-  } = useMapStore((state) => state.mapActions, shallow);
-  const {
-    init
-  } = useMapToolsStore((state) => state.mapToolsActions, shallow);
-  const renderByEachFeature = useCallback((props) => {
-    const {
-      id,
-      layerId
-    } = props;
-    const feature = useMapStore((state) => {
-      const gObject = state.hashLayers[layerId].geoJsonObject;
-      if (!gObject) {
-        return null;
-      }
-      if (gObject.object.type === "Feature") {
-        return {
-          geometry: gObject.object.geometry,
-          properties: gObject.object.properties
-        };
-      } else {
-        const feat = gObject.object.features.find((f) => f.id === id);
-        if (feat) {
-          return {
-            geometry: feat.geometry,
-            properties: feat.properties
-          };
-        }
-        return null;
-      }
-    }, shallow);
-    const refFeature = useRef(null);
-    if (!feature) {
-      return null;
-    }
-    useEffect(() => {
-      if (refFeature.current)
-        ;
-    }, [refFeature.current]);
-    console.log(`renderByEachFeature *** ${feature.geometry?.type}: ${id}`);
-    if (feature.geometry?.type === "LineString") {
-      const polylinePositions = feature.geometry.coordinates.map((coord) => [coord[1], coord[0]]);
-      return /* @__PURE__ */ jsx(
-        PolylineWithArrows$1,
-        {
-          positions: polylinePositions,
-          stroke: true,
-          weight: 10,
-          ...feature.properties,
-          dashArray: "20 30"
-        },
-        Math.random()
-      );
-    }
-    if (feature.geometry?.type === "Polygon") {
-      const polygonPositions = feature.geometry.coordinates.map((ring) => ring.map(([lng, lat]) => [lat, lng]));
-      return /* @__PURE__ */ jsx(
-        Polygon,
-        {
-          ref: refFeature,
-          positions: polygonPositions,
-          opacity: 1,
-          ...feature.properties,
-          children: /* @__PURE__ */ jsx(Popup, {})
-        },
-        Math.random()
-      );
-    }
-    if (feature.geometry?.type === "Point") {
-      if (feature.properties?.subType === "Circle" && feature.properties?.radius) {
-        const {
-          subType,
-          radius,
-          ...styleProperties
-        } = feature.properties;
-        const [lng, lat] = feature.geometry.coordinates;
-        return /* @__PURE__ */ jsx(Circle, {
-          center: {
-            lat,
-            lng
-          },
-          radius: feature.properties?.radius,
-          ...styleProperties
-        }, Math.random());
-      }
-    }
-    return null;
-  }, []);
-  useEffect(() => {
-    addLayer({
-      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES,
-      description: "Geocercas",
-      renderFeature: renderByEachFeature,
-      geoJsonObject: {
-        object: {
-          type: "FeatureCollection",
-          features: []
-        }
-      }
-    });
-    addLayer({
-      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES,
-      description: "Geometr\xEDas de tr\xE1nsito",
-      renderFeature: renderByEachFeature,
-      geoJsonObject: {
-        object: {
-          type: "FeatureCollection",
-          features: []
-        }
-      }
-    });
-    addLayer({
-      layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES,
-      description: "Geometr\xEDas internas",
-      renderFeature: renderByEachFeature,
-      geoJsonObject: {
-        object: {
-          type: "FeatureCollection",
-          features: []
-        }
-      }
-    });
-    init();
-    return () => {
-      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES);
-      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES);
-      removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES);
-    };
-  }, []);
-}
-const TabToolsRoot = styled("div")`
-    display:flex;
-    flex-direction:column;
-    right:10px;
-    width:600px;
-    top:10px;
-    bottom:10px;
-    position:absolute;
-    height:unset;
-    z-index:${MAP_ZINDEX_OVER_MAP};
-
-
-    .${mapToolsClasses.tabContentRoot}.${mapToolsClasses.hidden} {
-        height:0px;
-        width:0px;
-        overflow:hidden;
-        opacity:0;
-        visibility:hidden;
-    }
-
-
-    .${mapToolsClasses.toolMeasureFormValue} {
-        justify-content: center;
-    }
-
-    .${mapToolsClasses.toolMeasureFormValueDistance} {
-        border: 1px solid white;
-        
-        margin: 0 5px;
-    }
-    .${mapToolsClasses.toolMeasureFormValueSymbol} {
-        border: 1px solid white;
-        
-        margin: 0 5px;
-    }
-
-    ${(props) => props.theme.components?.M4LGpsTools?.styleOverrides}
-`;
-function TabTools() {
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const status = useMapToolsStore((state) => state.ownerState.status, shallow);
-  const currentTabTool = useMapToolsStore((state) => state.currentTabTool, shallow);
-  const {
-    setCurrentTabTool
-  } = useMapToolsStore((state) => state.mapToolsActions, shallow);
-  const toolTabs = useMemo(() => {
-    return [
-      {
-        id: "geofences",
-        icon: void 0,
-        component: /* @__PURE__ */ jsx(GeofencesTool, {}),
-        label: getLabel(DICCTIONARY.LABEL_TAB_GEO),
-        className: mapToolsClasses.toolGeofences
-      },
-      {
-        id: "measure",
-        icon: void 0,
-        component: /* @__PURE__ */ jsx(MeasureTool, {}),
-        label: getLabel(DICCTIONARY.LABEL_TAB_MEASURE),
-        className: mapToolsClasses.toolMeasure
-      }
-    ];
-  }, [getLabel]);
-  useLayers();
-  if (status !== "ready") {
-    return null;
-  }
-  return createPortal(/* @__PURE__ */ jsxs(
-    TabToolsRoot,
-    {
-      children: [/* @__PURE__ */ jsx(Tabs, {
-        value: currentTabTool,
-        scrollButtons: "auto",
-        variant: "scrollable",
-        allowScrollButtonsMobile: true,
-        onChange: (_e, value) => setCurrentTabTool(value),
-        children: toolTabs.map((tab) => /* @__PURE__ */ jsx(Tab, {
-          value: tab.id,
-          icon: tab.icon,
-          label: tab.label,
-          SKTWidth: "100px",
-          SKTHeight: "14px"
-        }, tab.id))
-      }), toolTabs.map((tab) => {
-        const isMatched = tab.id === currentTabTool;
-        if (!isMatched && tab.id === "measure") {
-          return null;
-        }
-        return /* @__PURE__ */ jsx(TabContent, {
-          className: clsx(mapToolsClasses.tabContentRoot, tab.className, isMatched ? mapToolsClasses.visible : mapToolsClasses.hidden),
-          children: tab.component
-        }, tab.id);
-      })]
-    }
-  ), document.body);
-}
-function GpsTools() {
-  const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsx(GpsToolsProvider, {
-    children: !isSkeleton && /* @__PURE__ */ jsx(TabTools, {})
-  });
-}
-export {
-  GpsToolsContext as G,
-  GpsTools as a
-};