@m4l/gclick 0.0.2

package/components/indicators/IndicatorCSQ/types.d.ts

@@ -0,0 +1,21 @@
+import { M4LOverridesStyleRules } from '@m4l/components';
+import { IndicatorCSQSlots } from './slots/IndicatorCSQEnum';
+import { CSQ_SIGNAL_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+import { Sizes } from '@m4l/styles';
+export interface IndicatorCSQProps {
+    /**
+     * Signal value
+     */
+    value?: number;
+    /**
+     * Size of the indicator
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}
+export type IndicatorCSQSlotsType = keyof typeof IndicatorCSQSlots;
+export type IndicatorCSQOwnerState = {
+    percentage: number;
+    size: IndicatorCSQProps['size'];
+};
+export type IndicatorCSQStyles = M4LOverridesStyleRules<IndicatorCSQSlotsType, typeof CSQ_SIGNAL_KEY_COMPONENT, Theme>;

package/components/maps/components/GpsMap/GpsMap.d.ts

@@ -0,0 +1,8 @@
+import { MapProps } from './types';
+/**
+ * "Map" componente encargado de renderizar las diferentes capas y brindar diferentes herramientas de usabilidad al usuario.
+ * Se utiliza MapRootContainer que es el estilado del contenedor principal del mapa.
+ * @param props.gpsTools Herrameitas para gestionar las herramientas de guardian.click
+ * @link https://react-leaflet.js.org/
+ */
+export declare function GpsMap(props: MapProps): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/GpsMap/GpsMap.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { T as TileLayers } from "./subcomponents/TileLayers/index.js";
+import { C as Controls } from "./subcomponents/Controls/index.js";
+import { L as LayersContainer } from "./subcomponents/LayersContainer/index.js";
+import { m as mapClasses } from "./classes/index.js";
+import { G as GpsMapRootStyled } from "./slots/GpsMapSlots.js";
+function GpsMap(props) {
+  const {
+    tools,
+    center = [6.215749485905093, -75.58622905191254],
+    initalZoom = 16,
+    maxZoom = 22
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    GpsMapRootStyled,
+    {
+      className: mapClasses.root,
+      center,
+      zoom: initalZoom,
+      maxZoom,
+      boxZoom: true,
+      preferCanvas: true,
+      zoomControl: false,
+      children: [
+        /* @__PURE__ */ jsx(TileLayers, {}),
+        /* @__PURE__ */ jsx(LayersContainer, {}),
+        /* @__PURE__ */ jsx(Controls, { tools })
+      ]
+    }
+  );
+}
+export {
+  GpsMap as G
+};

package/components/maps/components/GpsMap/GpsMap.styles.d.ts

@@ -0,0 +1,2 @@
+import { MapStyles } from './types';
+export declare const mapStyles: MapStyles;

package/components/maps/components/GpsMap/GpsMap.styles.js

@@ -0,0 +1,228 @@
+import "leaflet/dist/leaflet.css";
+const mapStyles = {
+  /**
+   * TODO: Documentar
+   */
+  root: () => ({
+    //leaflet_css,
+    width: "100%",
+    height: "100%",
+    flexGrow: "1",
+    overflow: "hidden",
+    position: "relative",
+    /*
+     * Control superior izquierdo
+     */
+    "& .M4LMap-topLeftToolsRoot": {
+      display: "flex",
+      backgroundColor: "blue"
+      //Por cambiar
+    },
+    /**
+     * Control superior derecho
+     */
+    "& .M4LMap-topRigthToolsRoot": {
+      backgroundColor: "blue",
+      //Por cambiar
+      display: "flex",
+      right: 0,
+      position: "absolute",
+      /**
+       * Zoom buttons
+       */
+      "& .M4LMap-zoomButtons": {
+        display: "flex"
+      }
+    },
+    /**
+     * Marcas
+     */
+    "& .M4LMap-markerLayerRoot": {},
+    "& .M4LMap-markerLayerIcon": {
+      transformOrigin: "center center",
+      justifyContent: "center",
+      top: 0,
+      left: 0,
+      filter: "drop-shadow(0px 0px 3px rgba(0,0,0,.4))",
+      display: "flex",
+      alignItems: "center",
+      " > img ": {
+        height: "38px"
+      }
+    },
+    "& .M4LMap-featureLabel": {
+      position: "absolute",
+      display: "flex",
+      transformOrigin: "left center",
+      fontSize: "11px",
+      borderRadius: "4px",
+      maxWidth: "300px",
+      fontWeight: "bolder",
+      padding: "2px 8px",
+      opacity: ".85",
+      filter: "drop-shadow(0px 0px 3px rgba(0,0,0,.3))",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    },
+    //Herramienta de medición Formulario
+    "& .M4LMap-meaureToolRoot": {
+      backgroundColor: "green",
+      //Por cambiar
+      height: "100%",
+      width: "100%"
+    },
+    "& .M4LMap-measureToolFormValue": {
+      justifyContent: "center"
+    },
+    "& .M4LMap-measureToolFormValueDistance": {
+      border: "1px solid white",
+      margin: "0 5px",
+      fontWeight: 800,
+      //Por cambiar
+      fontSize: "large"
+      //Por cambiar
+    },
+    //Marker measure Point Icon
+    "& .M4LMap-measureMarkerRoot": {
+      "--color": "green"
+    },
+    "& .M4LMap-measureMarkerContainer": {
+      position: "relative",
+      cursor: "pointer"
+    },
+    "& .M4LMap-measureMarkerContainerRhomb": {
+      position: "absolute",
+      filter: "drop-shadow(0px 0px 3px rgba(0,0,0,.4))",
+      width: "31px",
+      height: "31px",
+      borderRadius: "50% 50% 50% 0",
+      border: "4px solid var(--color)",
+      backgroundColor: "var(--color)",
+      transform: "rotate(-45deg)"
+    },
+    "& .M4LMap-measureMarkerContainerSlot": {
+      position: "absolute",
+      background: "#fff",
+      borderRadius: "50%",
+      overflow: "hidden",
+      top: "3px",
+      left: "3px",
+      width: "25px",
+      height: "24px"
+    },
+    "& .M4LMap-measureMarkerContainerSlotNumber": {
+      fontSize: "14px",
+      fontWeight: "600",
+      textAlign: "center",
+      marginTop: "1px",
+      color: "black"
+    },
+    //Marker Point Label
+    "& .M4LMap-measureLabelMarkerRoot": {
+      "--color": "yellow"
+    },
+    "& .M4LMap-measureLabelMarkerContainer": {
+      backgroundColor: "var(--color)",
+      border: "1px solid gray",
+      color: "#fff",
+      width: "80px",
+      marginLeft: "15px",
+      marginTop: "15px"
+    },
+    "& .M4LMap-measureLabelMarkerDistance": {
+      color: "gray"
+    },
+    "& .M4LMap-measureLabelMarkerRemove": {
+      color: "blue"
+    },
+    //Cluster Markers
+    //Animacion
+    "& .leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow": {
+      // '-webkit-transition': '-webkit-transform 0.3s ease-out, opacity 0.3s ease-in',
+      // '-moz-transition': '-moz-transform 0.3s ease-out, opacity 0.3s ease-in',
+      // '-o-transition': '-o-transform 0.3s ease-out, opacity 0.3s ease-in',
+      transition: "transform 0.3s ease-out, opacity 0.3s ease-in"
+    },
+    //Spider
+    "& .leaflet-cluster-spider-leg": {
+      // '-webkit-transition':
+      //   '-webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in',
+      // '-moz-transition': '-moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in',
+      // '-o-transition': '-o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in',
+      transition: "stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in"
+    },
+    //Colores de los clusters dependiendo de la cantidad de las marcas
+    "& .marker-cluster-small": {
+      backgroundColor: "rgba(181, 226, 140, 0.6)"
+    },
+    "& .marker-cluster-small div": {
+      backgroundColor: "rgba(110, 204, 57, 0.6)"
+    },
+    "& .marker-cluster-medium": {
+      backgroundColor: "rgba(241, 211, 87, 0.6)"
+    },
+    "& .marker-cluster-medium div": {
+      backgroundColor: "rgba(240, 194, 12, 0.6)"
+    },
+    "& .marker-cluster-large": {
+      backgroundColor: "rgba(253, 156, 115, 0.6)"
+    },
+    "& .marker-cluster-large div": {
+      backgroundColor: "rgba(241, 128, 23, 0.6)"
+    },
+    /* IE 6-8 fallback colors */
+    "& .leaflet-oldie .marker-cluster-small": {
+      backgroundColor: "rgb(181, 226, 140)"
+    },
+    "& .leaflet-oldie .marker-cluster-small div": {
+      backgroundColor: "rgb(110, 204, 57)"
+    },
+    "& .leaflet-oldie .marker-cluster-medium": {
+      backgroundColor: "rgb(241, 211, 87)"
+    },
+    "& .leaflet-oldie .marker-cluster-medium div": {
+      backgroundColor: "rgb(240, 194, 12)"
+    },
+    "& .leaflet-oldie .marker-cluster-large": {
+      backgroundColor: "rgb(253, 156, 115)"
+    },
+    "& .leaflet-oldie .marker-cluster-large div": {
+      backgroundColor: "rgb(241, 128, 23)"
+    },
+    //Cluster Markers
+    "& .marker-cluster": {
+      backgroundClip: "padding-box",
+      borderRadius: "20px"
+    },
+    "& .marker-cluster div": {
+      width: "30px",
+      height: "30px",
+      marginLeft: "5px",
+      marginTop: "5px",
+      textAlign: "center",
+      borderRadius: "15px",
+      font: '12px "Helvetica Neue", Arial, Helvetica, sans-serif'
+    },
+    //Cluster Markers
+    "& .marker-cluster span": {
+      lineHeight: "30px"
+    },
+    // '& .xxxxx': {
+    //   // color: theme.vars.palette.state.error.normal,
+    //   '& .M4LIcon-root .M4LIcon-icon': {
+    //     backgroundColor: theme.vars.palette.state.error.normal,
+    //   },
+    // },
+    "& .leaflet-control-scale-line": {
+      color: "red"
+      //Ejemplo de como estilar el control de scala
+    }
+  }),
+  popupGpsDevice: () => ({}),
+  popupGpsDeviceHeader: () => ({}),
+  popupGpsDeviceContent: () => ({})
+};
+export {
+  mapStyles as m
+};

package/components/maps/components/GpsMap/classes/index.d.ts

@@ -0,0 +1,8 @@
+import { MapClasses } from './types';
+import { OwnerState } from '../contexts/MapContext/types';
+export declare const mapClasses: MapClasses;
+/**
+ * TODO: Documentar
+ */
+export declare const useMapUtilityClasses: (_ownerState: OwnerState) => Record<"root" | "active" | "disabled" | "topLeftToolsRoot" | "topRigthToolsRoot" | "zoomButtons" | "markerLayerRoot" | "markerLayerIcon" | "markerLayerLabel" | "featureLabel" | "meaureToolRoot" | "measureToolFormValue" | "measureToolFormValueDistance" | "measureToolFormValueSymbol" | "measureToolLabel" | "meausureToolLabelDistance" | "meausureToolLabelSymbol" | "measureMarkerRoot" | "measureMarkerContainer" | "measureMarkerContainerRhomb" | "measureMarkerContainerSlot" | "measureMarkerContainerSlotNumber" | "measureLabelMarkerRoot" | "measureLabelMarkerContainer" | "measureLabelMarkerDistance" | "measureLabelMarkerRemove" | "mapSourcesPopoverRoot" | "mapSourcesRoot" | "mapSourcesOption" | "mapSourcesOptionIconLabel" | "mapSourcesOptionRoadOptions" | "mapSourcesOptionRoadOptionsCheck" | "layersPopoverRoot" | "markerLayerLabelInner", string>;
+export type Classes = ReturnType<typeof useMapUtilityClasses>;

package/components/maps/components/GpsMap/classes/index.js

@@ -0,0 +1,110 @@
+import { generateUtilityClasses } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { C as COMPONET_KEY_COMPONENT } from "../constants.js";
+import { g as getComponentUtilityClass } from "../../../../../utils/getComponentUtilityClass.js";
+const mapClasses = generateUtilityClasses(COMPONET_KEY_COMPONENT, [
+  /* elements */
+  "root",
+  //Control tools
+  "topLeftToolsRoot",
+  "topRigthToolsRoot",
+  "zoomButtons",
+  //Tipos de capas de los features
+  "markerLayerRoot",
+  "markerLayerIcon",
+  "markerLayerLabel",
+  "markerLayerLabelInner",
+  //Etiqueta de los features
+  "featureLabel",
+  //Measure tool
+  "meaureToolRoot",
+  "measureToolFormValue",
+  "measureToolFormValueDistance",
+  "measureToolFormValueSymbol",
+  "measureToolLabel",
+  "meausureToolLabelDistance",
+  "meausureToolLabelSymbol",
+  //Meauser Marcas
+  "measureMarkerRoot",
+  "measureMarkerContainer",
+  "measureMarkerContainerRhomb",
+  "measureMarkerContainerSlot",
+  "measureMarkerContainerSlotNumber",
+  "measureLabelMarkerRoot",
+  "measureLabelMarkerContainer",
+  "measureLabelMarkerDistance",
+  "measureLabelMarkerRemove",
+  /**
+   * Map sources
+   */
+  "mapSourcesPopoverRoot",
+  "mapSourcesRoot",
+  "mapSourcesOption",
+  "mapSourcesOptionIconLabel",
+  "mapSourcesOptionRoadOptions",
+  "mapSourcesOptionRoadOptionsCheck",
+  /**
+   * Layers
+   */
+  "layersPopoverRoot",
+  /* states or variants of elements */
+  "active",
+  "disabled"
+]);
+const useMapUtilityClasses = (_ownerState) => {
+  const slots = {
+    root: ["root"],
+    //Control tools
+    topLeftToolsRoot: ["topLeftToolsRoot"],
+    topRigthToolsRoot: ["topRigthToolsRoot"],
+    zoomButtons: ["zoomButtons"],
+    markerLayerRoot: ["markerLayerRoot"],
+    markerLayerIcon: ["markerLayerIcon"],
+    markerLayerLabel: ["markerLayerLabel"],
+    markerLayerLabelInner: ["markerLayerLabelInner"],
+    //Etiqueta de los features
+    featureLabel: ["featureLabel"],
+    /**
+     * Measure Tool
+     */
+    //Measure form
+    meaureToolRoot: ["meaureToolRoot"],
+    measureToolFormValue: ["measureToolFormValue"],
+    measureToolFormValueDistance: ["measureToolFormValueDistance"],
+    measureToolFormValueSymbol: ["measureToolFormValueSymbol"],
+    measureToolLabel: ["measureToolLabel"],
+    meausureToolLabelDistance: ["meausureToolLabelDistance"],
+    meausureToolLabelSymbol: ["meausureToolLabelSymbol"],
+    //Meauser Marcas
+    measureMarkerRoot: ["measureMarkerRoot"],
+    measureMarkerContainer: ["measureMarkerContainer"],
+    measureMarkerContainerRhomb: ["measureMarkerContainerRhomb"],
+    measureMarkerContainerSlot: ["measureMarkerContainerSlot"],
+    measureMarkerContainerSlotNumber: ["measureMarkerContainerSlotNumber"],
+    measureLabelMarkerRoot: ["measureLabelMarkerRoot"],
+    measureLabelMarkerContainer: ["measureLabelMarkerContainer"],
+    measureLabelMarkerDistance: ["measureLabelMarkerDistance"],
+    measureLabelMarkerRemove: ["measureLabelMarkerRemove"],
+    /**
+     * Map sources
+     */
+    mapSourcesPopoverRoot: ["mapSourcesPopoverRoot"],
+    mapSourcesRoot: ["mapSourcesToolRoot"],
+    mapSourcesOption: ["mapSourcesToolOption"],
+    mapSourcesOptionIconLabel: ["mapSourcesToolOptionIconLabel"],
+    mapSourcesOptionRoadOptions: ["mapSourcesToolOptionRoadOptions"],
+    mapSourcesOptionRoadOptionsCheck: ["mapSourcesToolOptionRoadOptionsCheck"],
+    /**
+     * Layers
+     */
+    layersPopoverRoot: ["layersPopoverRoot"],
+    /* states or variants of elements */
+    active: ["active"],
+    disabled: ["disabled"]
+  };
+  return unstable_composeClasses(slots, getComponentUtilityClass(COMPONET_KEY_COMPONENT), {});
+};
+export {
+  mapClasses as m,
+  useMapUtilityClasses as u
+};

package/components/maps/components/GpsMap/classes/types.d.ts

@@ -0,0 +1,69 @@
+export interface MapClasses {
+    root: string;
+    /**
+     * Root element for the top left tools
+     */
+    topLeftToolsRoot: string;
+    /**
+     * Root element for the top right tools
+     */
+    topRigthToolsRoot: string;
+    /**
+     * Container de zoom buttons
+     */
+    zoomButtons: string;
+    /**
+     * Root element de las marcas creadas con L.divIcon, esta al mimsmo nivel de leaflet-marker-icon
+     */
+    markerLayerRoot: string;
+    /**
+     * Icono de la marca, sobre este elemento se rota y se escala el contendio de la marca
+     */
+    markerLayerIcon: string;
+    /**
+     * Contenedor de la etiqueta de la marca
+     */
+    markerLayerLabel: string;
+    /**
+     * Contenedor de las etiquetas de las marcas, poligonoes, etc, en general de los features
+     */
+    featureLabel: string;
+    meaureToolRoot: string;
+    measureToolFormValue: string;
+    measureToolFormValueDistance: string;
+    measureToolFormValueSymbol: string;
+    measureToolLabel: string;
+    meausureToolLabelDistance: string;
+    meausureToolLabelSymbol: string;
+    /**
+     * Root element de la marca cread con L.divIcon, esta al mismo nivel de leaflet-marker-icon para denotar las marcas de medición
+     */
+    measureMarkerRoot: string;
+    /**
+     * Contenedor de la marca de medición, que indica el numero y forma el forma el rombo de la marca
+     */
+    measureMarkerContainer: string;
+    measureMarkerContainerRhomb: string;
+    measureMarkerContainerSlot: string;
+    measureMarkerContainerSlotNumber: string;
+    measureLabelMarkerRoot: string;
+    measureLabelMarkerContainer: string;
+    measureLabelMarkerDistance: string;
+    measureLabelMarkerRemove: string;
+    /**
+     * Map sources
+     */
+    mapSourcesPopoverRoot: string;
+    mapSourcesRoot: string;
+    mapSourcesOption: string;
+    mapSourcesOptionIconLabel: string;
+    mapSourcesOptionRoadOptions: string;
+    mapSourcesOptionRoadOptionsCheck: string;
+    /**
+     * Layers
+     */
+    layersPopoverRoot: string;
+    active: string;
+    disabled: string;
+}
+export type MapClassesKey = keyof MapClasses;

package/components/maps/components/GpsMap/constants.d.ts

@@ -0,0 +1,36 @@
+export declare const COMPONENT_TEST_ID = "M4LMap";
+export declare const COMPONET_KEY_COMPONENT = "M4LMap";
+export declare const EARTH_RADIO = 6378137;
+export declare const DN = 500;
+export declare const DE = 500;
+export declare const DLAT: number;
+export declare const THROTTLE_RENDER_MAP_TIMEOUT = 50;
+export declare const MAP_ZINDEX_DEFAULT = 0;
+export declare const MAP_ZINDEX_OVER_LAYERS = 1000;
+export declare const MAP_ZINDEX_OVER_MAP = 1100;
+export declare const TIME_DOUBLE_CLICK = 250;
+export declare const MARKER_COLOR_DEFAULT = "#1E96DC";
+export declare const LABEL_BK_COLOR_DEFAULT = "#1E96DC";
+export declare const LABEL_COLOR_DEFAULT = "#FFFFFF";
+export declare const GPS_TOOLS_POPUP_ID = "gpsTools";
+export declare const GPS_TOOLS_POPUP_DEFAULT_POSITION: {
+    vertical: {
+        top: number;
+        bottom: number;
+    };
+    horizontal: {
+        right: number;
+        width: number;
+    };
+};
+export declare const MESURE_POPUP_DEFAULT_POSITION: {
+    vertical: {
+        top: number;
+        height: number;
+    };
+    horizontal: {
+        right: number;
+        width: number;
+    };
+};
+export declare const SVG_ICON_DEFAULT = "<svg viewBox=\"0 0 640 640\" height=\"32\" width=\"32\" xmlns=\"http://www.w3.org/2000/svg\">\n<g>\n    <circle\n        cx=\"320\"\n        cy=\"320\"\n        r=\"280\"\n        fill=\"#1E96DC\"\n    />\n    <text\n        x=\"320\"\n        y=\"320\"\n        font-size=\"320\"\n        font-family=\"sans-serif\"\n        fill=\"#FFFFFF\"\n        text-anchor=\"middle\"\n        alignment-baseline=\"central\"\n        dominant-baseline=\"central\"\n    >P</text>\n</g>\n</svg>";

package/components/maps/components/GpsMap/constants.js

@@ -0,0 +1,49 @@
+const COMPONET_KEY_COMPONENT = "M4LMap";
+const MAP_ZINDEX_DEFAULT = 0;
+const MAP_ZINDEX_OVER_MAP = 1100;
+const TIME_DOUBLE_CLICK = 250;
+const MARKER_COLOR_DEFAULT = "#1E96DC";
+const LABEL_BK_COLOR_DEFAULT = "#1E96DC";
+const LABEL_COLOR_DEFAULT = "#FFFFFF";
+const GPS_TOOLS_POPUP_ID = "gpsTools";
+const GPS_TOOLS_POPUP_DEFAULT_POSITION = {
+  vertical: { top: 50, bottom: 50 },
+  horizontal: { right: 50, width: 380 }
+};
+const MESURE_POPUP_DEFAULT_POSITION = {
+  vertical: { top: 50, height: 250 },
+  horizontal: { right: 50, width: 300 }
+};
+const SVG_ICON_DEFAULT = `<svg viewBox="0 0 640 640" height="32" width="32" xmlns="http://www.w3.org/2000/svg">
+<g>
+    <circle
+        cx="320"
+        cy="320"
+        r="280"
+        fill="#1E96DC"
+    />
+    <text
+        x="320"
+        y="320"
+        font-size="320"
+        font-family="sans-serif"
+        fill="#FFFFFF"
+        text-anchor="middle"
+        alignment-baseline="central"
+        dominant-baseline="central"
+    >P</text>
+</g>
+</svg>`;
+export {
+  COMPONET_KEY_COMPONENT as C,
+  GPS_TOOLS_POPUP_DEFAULT_POSITION as G,
+  LABEL_BK_COLOR_DEFAULT as L,
+  MARKER_COLOR_DEFAULT as M,
+  SVG_ICON_DEFAULT as S,
+  TIME_DOUBLE_CLICK as T,
+  LABEL_COLOR_DEFAULT as a,
+  MAP_ZINDEX_OVER_MAP as b,
+  GPS_TOOLS_POPUP_ID as c,
+  MESURE_POPUP_DEFAULT_POSITION as d,
+  MAP_ZINDEX_DEFAULT as e
+};

package/components/maps/components/GpsMap/contexts/MapContext/MapContext.d.ts

@@ -0,0 +1,13 @@
+import { MapProviderProps } from './types';
+declare const MapContext: import('react').Context<import('zustand').StoreApi<import('./types').MapStateWithActions> | null>;
+/**
+ * Provedor del contexto de los mapas
+ * Expone el store (MapStore) encargado de gestionar la creación, modificación y borrado de capas.
+ * @param props
+ * @returns
+ */
+/**
+ * TODO: Documentar
+ */
+declare function MapProvider(props: MapProviderProps): import("react/jsx-runtime").JSX.Element;
+export { MapProvider, MapContext };

package/components/maps/components/GpsMap/contexts/MapContext/MapContext.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useRef, useEffect } from "react";
+import { useStore } from "zustand";
+import { shallow } from "zustand/shallow";
+import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { c as createMapStore } from "./store.js";
+const MapContext = createContext(null);
+function MapProvider(props) {
+  const {
+    children,
+    initialLayers,
+    googleMapsApiKey: apiKey,
+    googleMapVersion = "weekly",
+    storeId,
+    storeDevtoolsEnabled = false
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const isFirstRender = useFirstRender([getLabel]);
+  const mapStoreRef = useRef();
+  if (!mapStoreRef.current) {
+    mapStoreRef.current = createMapStore({
+      storeId,
+      getLabel,
+      ownerState: {
+        status: "init",
+        isMobile: !isDesktop,
+        isSkeleton,
+        focus: false
+      },
+      googleMapsApiKey: apiKey,
+      googleMapVersion
+    }, storeDevtoolsEnabled);
+    mapStoreRef.current?.getState().mapActions.init(initialLayers || []);
+  }
+  const { setHandlerGetLabel, setExternalState } = useStore(
+    mapStoreRef.current,
+    (state) => state.mapActions,
+    shallow
+  );
+  useEffect(() => {
+    if (!isFirstRender) {
+      setHandlerGetLabel(getLabel);
+    }
+  }, [getLabel]);
+  useEffect(() => {
+    if (isFirstRender) {
+      return;
+    }
+    setExternalState({ isMobile: !isDesktop, isSkeleton });
+  }, [isDesktop, isSkeleton]);
+  return /* @__PURE__ */ jsx(MapContext.Provider, { value: mapStoreRef.current, children });
+}
+export {
+  MapContext as M,
+  MapProvider as a
+};

package/components/maps/components/GpsMap/contexts/MapContext/helper.d.ts

@@ -0,0 +1,8 @@
+import { WritableDraft } from 'immer/dist/internal';
+import { MapStateWithActions, LayerStore } from './types';
+export declare const DEFAULT_LAYER: Partial<LayerStore>;
+/**
+ * Actualiza la clases basado en owner state
+ * @param state immer State
+ */
+export declare const updateOwnerStateClasses: (_state: WritableDraft<MapStateWithActions>) => void;

package/components/maps/components/GpsMap/contexts/MapContext/helper.js

@@ -0,0 +1 @@
+

package/components/maps/components/GpsMap/contexts/MapContext/index.d.ts

@@ -0,0 +1,2 @@
+export { MapProvider, MapContext } from './MapContext';
+export type { RendePropFeatureArgs, ComponentRenderPropFeature, FeatureId, FeatureCollection, Feature, Geometry, Point as GeometryPoint, GeoJsonProperties, } from './types';

package/components/maps/components/GpsMap/contexts/MapContext/index.js

@@ -0,0 +1 @@
+

package/components/maps/components/GpsMap/contexts/MapContext/store.d.ts

@@ -0,0 +1,6 @@
+import { MapStateWithActions, InitialMapStoreProps } from './types';
+/**
+ * TODO: Documentar
+ */
+export declare const createMapStore: (initProps: InitialMapStoreProps, storeDevtoolsEnabled?: boolean) => import('zustand').StoreApi<MapStateWithActions>;
+export type MapStore = ReturnType<typeof createMapStore>;