@m4l/gclick 0.1.0 → 0.2.0-JAEBeta.0

package/components/maps/components/GpsMap/hooks/{useDisableZoomEvents → useDisableMapEventsOnMouseOver}/index.js

@@ -1,21 +1,29 @@
 import { useEffect } from "react";
 import { useMap } from "react-leaflet";
-function useDisableZoomEvents(nodeElement) {
+function useDisableMapEventsOnMouseOver(nodeElement) {
   const map = useMap();
   useEffect(() => {
     if (!map || !nodeElement) {
       return;
     }
     nodeElement.addEventListener("mouseover", function() {
+      map.dragging.disable();
       map.doubleClickZoom.disable();
       map.scrollWheelZoom.disable();
+      map.touchZoom.disable();
+      map.boxZoom.disable();
+      map.keyboard.disable();
     });
     nodeElement.addEventListener("mouseleave", function() {
+      map.dragging.enable();
       map.scrollWheelZoom.enable();
       map.doubleClickZoom.enable();
+      map.touchZoom.enable();
+      map.boxZoom.enable();
+      map.keyboard.enable();
     });
   }, [map, nodeElement]);
 }
 export {
-  useDisableZoomEvents as u
+  useDisableMapEventsOnMouseOver as u
 };

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

@@ -8,17 +8,20 @@ export declare const MAP_ICONS: {
      * Map sources
      */
     MAP_SOURCES_TOOL: string;
-    MAP_SOURCE_OSM: string;
-    MAP_SOURCE_GOOGLE_ROADS: string;
-    MAP_SOURCE_GOOGLE_HYBRID: string;
-    MAP_SOURCE_GOOGLE_SATELLITE: string;
+    MAP_SOURCE_GOOGLE: string;
     MAP_SOURCE_BING: string;
+    MAP_SOURCE_OTHERS: string;
+    MAP_SOURCE_LAYER_STREETS: string;
+    MAP_SOURCE_LAYER_HYBRID: string;
+    MAP_SOURCE_LAYER_SATELLITE: string;
+    MAP_SOURCE_LAYER_TERRAIN: string;
+    MAP_SOURCE_LAYER_OTHERS_OSM: string;
     /**
      * Map sources road options+
      */
-    MAP_SOURCE_ROAD_TRAFFIC: string;
-    MAP_SOURCE_ROAD_TRANSIT: string;
-    MAP_SOURCE_ROAD_BICYCLING: string;
+    MAP_SOURCE_LAYER_ROAD_OPTION_TRAFFIC: string;
+    MAP_SOURCE_LAYER_ROAD_OPTION_TRANSIT: string;
+    MAP_SOURCE_LAYER_ROAD_OPTION_BICYCLING: string;
     /**
      * Layers
      */

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

@@ -2,31 +2,32 @@ const MAP_ICONS = {
   /**
    * Map en general
    */
-  MAP_ZOOM_IN: "cmp_map_zoom_in.svg",
-  MAP_ZOOM_OUT: "cmp_map_zoom_out.svg",
+  MAP_ZOOM_IN: "zoom_in.svg",
+  MAP_ZOOM_OUT: "zoom_out.svg",
   /**
    * Map sources
    */
-  MAP_SOURCES_TOOL: "cmp_map_mapsources_tool.svg",
-  MAP_SOURCE_OSM: "cmp_map_mapsources_osm.svg",
-  MAP_SOURCE_GOOGLE_ROADS: "cmp_map_mapsources_google.svg",
-  MAP_SOURCE_GOOGLE_HYBRID: "cmp_map_mapsources_googlehybrid.svg",
-  MAP_SOURCE_GOOGLE_SATELLITE: "cmp_map_mapsources_googlesatelite.svg",
-  MAP_SOURCE_BING: "cmp_map_mapsources_bing.svg",
+  MAP_SOURCES_TOOL: "map.svg",
+  MAP_SOURCE_GOOGLE: "google.svg",
+  MAP_SOURCE_BING: "bing.svg",
+  MAP_SOURCE_OTHERS: "others.svg",
+  MAP_SOURCE_LAYER_STREETS: "roads.svg",
+  MAP_SOURCE_LAYER_HYBRID: "satellite_hybrid.svg",
+  MAP_SOURCE_LAYER_SATELLITE: "satellite.svg",
+  MAP_SOURCE_LAYER_TERRAIN: "mount.svg",
   /**
    * Map sources road options+
    */
-  MAP_SOURCE_ROAD_TRAFFIC: "cmp_map_mapsources_layer-traffic.svg",
-  MAP_SOURCE_ROAD_TRANSIT: "cmp_map_mapsources_layer-transit.svg",
-  MAP_SOURCE_ROAD_BICYCLING: "cmp_map_mapsources_layer-bicycle.svg",
+  MAP_SOURCE_LAYER_ROAD_OPTION_TRAFFIC: "traffic.svg",
+  MAP_SOURCE_LAYER_ROAD_OPTION_TRANSIT: "transit.svg",
+  MAP_SOURCE_LAYER_ROAD_OPTION_BICYCLING: "bicycle.svg",
   /**
    * Layers
    */
-  MAP_LAYERS_TOOL: "cmp_map_layers_tool.svg",
-  MAP_LAYER_VISIBLE: "cmp_map_layers_view.svg",
-  MAP_LAYER_AUTOFOCUS: "cmp_map_layers_zoom_fit.svg",
-  MAP_LAYER_CLUSTER: "cmp_map_layers_cluster.svg",
-  MAP_LAYER_DELETE: "cmp_map_layers_delete.svg",
+  MAP_LAYERS_TOOL: "layers.svg",
+  MAP_LAYER_AUTOFOCUS: "autofocus.svg",
+  MAP_LAYER_CLUSTER: "cluster.svg",
+  MAP_LAYER_DELETE: "delete.svg",
   /**
    * Measure Tool *
    *

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

@@ -1,9 +1,10 @@
 export { GpsMap } from './GpsMap';
 export type { MapProps } from './types';
 export { MapProvider, MapContext } from './contexts/MapContext/MapContext';
-export { useMapStore } from './hooks/useMapStore';
 export * from './contexts/MapContext';
 export * from './featureRenders';
 export * from './popups';
 export { getMapComponentsDictionary } from './dictionary';
 export * from './pluginLayers';
+export { LAT_LON_FIXED_DIGITS } from './constants';
+export * from './hooks';

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

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react';
+/**
+ * Estilos de Leaflet convertidos a CSSProperties de TypeScript
+ * Estructura idéntica al CSS original para comparación línea por línea
+ */
+export declare const leafletAllStyles: Record<string, CSSProperties>;

package/components/maps/components/GpsMap/popups/MapPopupDevice/MapPopupDevice.js

@@ -3,17 +3,25 @@ import { P as PopupRootStyled, M as MapPopupDeviceRootStyled } from "./slots/Map
 import { AppearanceComponentProvider } from "@m4l/components";
 import { G as GpsDeviceContent } from "./subcomponents/Content/GpsDeviceContent.js";
 import { G as GpsDeviceHeader } from "./subcomponents/Header/GpsDeviceHeader.js";
+import { useRef, useMemo } from "react";
+import { u as useMapStore } from "../../hooks/useMapStore/index.js";
 const MapPopupDevice = (props) => {
   const { isOpen, popupOptions } = props;
   const { keepInView = true, autoPan = true, closeOnEscapeKey = true, ...others } = popupOptions || {};
+  const popupRef = useRef(null);
+  const isListOpen = useMapStore((state) => state.hasMapData?.isListOpen);
+  const autoPanPaddingTopLeft = useMemo(() => {
+    return isListOpen ? [400, 40] : [40, 40];
+  }, [isListOpen]);
   return /* @__PURE__ */ jsx(
     PopupRootStyled,
     {
+      ref: popupRef,
       ownerState: {},
       closeButton: false,
       keepInView,
       autoPan,
-      autoPanPaddingTopLeft: [40, 40],
+      autoPanPaddingTopLeft,
       autoPanPaddingBottomRight: [40, 40],
       closeOnEscapeKey,
       offset: [0, -5],

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

@@ -1 +1,2 @@
 export * from './MapPopupDevice';
+export type { MapPopupComponent, MapPopupProps } from './types';

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

@@ -1,6 +1,29 @@
-export declare enum MapSlots {
+import { MapSlotsLayersTool } from '../subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/slots/slots';
+import { MapSlotsSourcesTool } from '../subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/slots/slots';
+export declare enum MapBaseSlots {
     root = "root",
-    popupGpsDevice = "popupGpsDevice",
-    popupGpsDeviceHeader = "popupGpsDeviceHeader",
-    popupGpsDeviceContent = "popupGpsDeviceContent"
+    mapContainer = "mapContainer",
+    popupsViewer = "popupsViewer",
+    zoomButton = "zoomButton",
+    controlRightToolsRoot = "controlRightToolsRoot",
+    controlLeftToolsRoot = "controlLeftToolsRoot"
 }
+export declare const MapSlots: {
+    readonly mapLayersToolRoot: MapSlotsLayersTool.mapLayersToolRoot;
+    readonly mapLayersToolRowContainer: MapSlotsLayersTool.mapLayersToolRowContainer;
+    readonly mapLayersToolRowCheckBoxNameContainer: MapSlotsLayersTool.mapLayersToolRowCheckBoxNameContainer;
+    readonly mapLayersToolRowOptionsContainer: MapSlotsLayersTool.mapLayersToolRowOptionsContainer;
+    readonly mapSourcesToolRoot: MapSlotsSourcesTool.mapSourcesToolRoot;
+    readonly mapSourcesToolHeader: MapSlotsSourcesTool.mapSourcesToolHeader;
+    readonly mapSourcesToolGroup: MapSlotsSourcesTool.mapSourcesToolGroup;
+    readonly mapSourcesToolGroupHeader: MapSlotsSourcesTool.mapSourcesToolGroupHeader;
+    readonly mapSourceToolCardIconTitleContainer: MapSlotsSourcesTool.mapSourceToolCardIconTitleContainer;
+    readonly mapSourceToolCardIcon: MapSlotsSourcesTool.mapSourceToolCardIcon;
+    readonly mapSourceToolCardRoadOptionsContainer: MapSlotsSourcesTool.mapSourceToolCardRoadOptionsContainer;
+    readonly root: MapBaseSlots.root;
+    readonly mapContainer: MapBaseSlots.mapContainer;
+    readonly popupsViewer: MapBaseSlots.popupsViewer;
+    readonly zoomButton: MapBaseSlots.zoomButton;
+    readonly controlRightToolsRoot: MapBaseSlots.controlRightToolsRoot;
+    readonly controlLeftToolsRoot: MapBaseSlots.controlLeftToolsRoot;
+};

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

@@ -1,10 +1,19 @@
-var MapSlots = /* @__PURE__ */ ((MapSlots2) => {
-  MapSlots2["root"] = "root";
-  MapSlots2["popupGpsDevice"] = "popupGpsDevice";
-  MapSlots2["popupGpsDeviceHeader"] = "popupGpsDeviceHeader";
-  MapSlots2["popupGpsDeviceContent"] = "popupGpsDeviceContent";
-  return MapSlots2;
-})(MapSlots || {});
+import { M as MapSlotsLayersTool } from "../subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/slots/slots.js";
+import { M as MapSlotsSourcesTool } from "../subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/slots/slots.js";
+var MapBaseSlots = /* @__PURE__ */ ((MapBaseSlots2) => {
+  MapBaseSlots2["root"] = "root";
+  MapBaseSlots2["mapContainer"] = "mapContainer";
+  MapBaseSlots2["popupsViewer"] = "popupsViewer";
+  MapBaseSlots2["zoomButton"] = "zoomButton";
+  MapBaseSlots2["controlRightToolsRoot"] = "controlRightToolsRoot";
+  MapBaseSlots2["controlLeftToolsRoot"] = "controlLeftToolsRoot";
+  return MapBaseSlots2;
+})(MapBaseSlots || {});
+const MapSlots = {
+  ...MapBaseSlots,
+  ...MapSlotsSourcesTool,
+  ...MapSlotsLayersTool
+};
 export {
   MapSlots as M
 };

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

@@ -0,0 +1,18 @@
+export declare const GpsMapRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').MapOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const GpsMapContainerStyled: import('@emotion/styled').StyledComponent<Pick<import('react-leaflet').MapContainerProps & import('react').RefAttributes<import('leaflet').Map>, keyof import('react-leaflet').MapContainerProps | keyof import('react').RefAttributes<import('leaflet').Map>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').MapOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const RightToolsRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').MapOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const LeftToolsRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').MapOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ZoomButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('@m4l/components/src/components/mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "instaceDataTestId" | "placement" | "rotationAngle" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').MapOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const PopupsViewerStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components/src/components/popups/components/PopupsViewer/types').PopupsViewerProps, keyof import('@m4l/components/src/components/popups/components/PopupsViewer/types').PopupsViewerProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').MapOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/maps/components/GpsMap/slots/styled.js

@@ -0,0 +1,37 @@
+import { styled } from "@mui/material/styles";
+import { M as MAP_COMPONET_KEY_COMPONENT } from "../constants.js";
+import { m as mapStyles } from "../GpsMap.styles.js";
+import { M as MapSlots } from "./slots.js";
+import { MapContainer } from "react-leaflet";
+import { PopupsViewer, IconButton } from "@m4l/components";
+const GpsMapRootStyled = styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlots.root
+})(mapStyles?.root);
+const GpsMapContainerStyled = styled(MapContainer, {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlots.mapContainer
+})(mapStyles?.mapContainer);
+const RightToolsRootStyled = styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlots.controlRightToolsRoot
+})(mapStyles?.controlRightToolsRoot);
+styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlots.controlLeftToolsRoot
+})(mapStyles?.controlLeftToolsRoot);
+const ZoomButtonStyled = styled(IconButton, {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlots.zoomButton
+})(mapStyles?.zoomButton);
+const PopupsViewerStyled = styled(PopupsViewer, {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlots.popupsViewer
+})(mapStyles?.popupsViewer);
+export {
+  GpsMapRootStyled as G,
+  PopupsViewerStyled as P,
+  RightToolsRootStyled as R,
+  ZoomButtonStyled as Z,
+  GpsMapContainerStyled as a
+};

package/components/maps/components/GpsMap/subcomponents/Controls/index.js

@@ -3,12 +3,13 @@ import { useState, useEffect } from "react";
 import { createPortal } from "react-dom";
 import L__default from "leaflet";
 import { useMap } from "react-leaflet";
-import { PopupsProvider, PopupsViewer } from "@m4l/components";
+import { PopupsProvider } from "@m4l/components";
 import { T as TopRightTools } from "./subcomponents/TopRigthTools/index.js";
-import { T as TopLeftTools } from "./subcomponents/TopLeftTools/index.js";
-import { b as MAP_ZINDEX_OVER_MAP } from "../../constants.js";
+import { c as MAP_ZINDEX_OVER_MAP } from "../../constants.js";
+import { B as BottomRightTools } from "./subcomponents/BottomRigthTools/index.js";
+import { P as PopupsViewerStyled } from "../../slots/styled.js";
 function Controls(props) {
-  const { tools } = props;
+  const { GpsTools } = props;
   const map = useMap();
   const [controlContainer, setControlContainer] = useState(null);
   const [mapContainer, setMapContainer] = useState(void 0);
@@ -22,9 +23,9 @@ function Controls(props) {
     setMapContainer(map.getContainer());
   }, [map]);
   return /* @__PURE__ */ jsxs(PopupsProvider, { baseZindex: MAP_ZINDEX_OVER_MAP, children: [
-    /* @__PURE__ */ jsx(TopLeftTools, {}),
-    /* @__PURE__ */ jsx(TopRightTools, { tools }),
-    controlContainer && createPortal(/* @__PURE__ */ jsx(PopupsViewer, { containerElement: mapContainer }), controlContainer)
+    /* @__PURE__ */ jsx(TopRightTools, { GpsTools }),
+    /* @__PURE__ */ jsx(BottomRightTools, {}),
+    controlContainer && createPortal(/* @__PURE__ */ jsx(PopupsViewerStyled, { containerElement: mapContainer }), controlContainer)
   ] });
 }
 export {

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/BottomRigthTools/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Componente que contiene los botones de herramientas de la parte superior derecha del mapa
+ *  - Boton de herramientas de GPS (Opcional)
+ *  - Boton de herramientas de medición
+ *  - Botones de zoom In
+ *  - Botones de zoom Out
+ * @param props
+ * @returns
+ */
+export declare function BottomRightTools(): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/BottomRigthTools/index.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { M as MapControl } from "../../../../external/MapControl/index.js";
+import { Z as ZoomButtons } from "./subcomponents/ZoomButtons/index.js";
+import { R as RightToolsRootStyled } from "../../../../slots/styled.js";
+function BottomRightTools() {
+  return /* @__PURE__ */ jsx(MapControl, { position: "bottomright", prepend: true, ControlContainer: RightToolsRootStyled, children: /* @__PURE__ */ jsx(ZoomButtons, {}) });
+}
+export {
+  BottomRightTools as B
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/{TopRigthTools → BottomRigthTools}/subcomponents/ZoomButtons/index.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { useMap } from "react-leaflet";
-import { IconButton } from "@m4l/components";
 import { M as MAP_ICONS } from "../../../../../../icons.js";
 import { useEnvironment } from "@m4l/core";
 import { m as mapClasses } from "../../../../../../classes/index.js";
+import { Z as ZoomButtonStyled } from "../../../../../../slots/styled.js";
 function ZoomButtons() {
   const map = useMap();
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -32,14 +32,14 @@ function ZoomButtons() {
   };
   return /* @__PURE__ */ jsxs("div", { className: mapClasses.zoomButtons, children: [
     /* @__PURE__ */ jsx(
-      IconButton,
+      ZoomButtonStyled,
       {
         onClick: handleZoomIn,
         src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_ZOOM_IN}`
       }
     ),
     /* @__PURE__ */ jsx(
-      IconButton,
+      ZoomButtonStyled,
       {
         onClick: handleZoomOut,
         src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_ZOOM_OUT}`

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/BottomRigthTools/types.d.ts

@@ -0,0 +1,2 @@
+export interface BottomRigthToolsProps {
+}

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/hooks/types.d.ts

@@ -0,0 +1,8 @@
+import { JSX_REACT_NODE, RNDDefaultPosition } from '@m4l/components';
+export type useToolProps = {
+    popupId: string;
+    ToolComponent?: JSX_REACT_NODE;
+    iconId: string;
+    dictionaryId: string;
+    defaultPosition: RNDDefaultPosition;
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/hooks/useTool.d.ts

@@ -0,0 +1,13 @@
+import { useToolProps } from './types';
+/**
+ * hook que contiene las funciones y estado de los botones de herramientas de la parte superior derecha del mapa
+ *  - Boton de herramientas de GPS (Opcional)
+ *  - Boton de herramientas de medición
+ * @param props
+ * @returns
+ */
+export declare function useTool(props: useToolProps): {
+    onToolClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    isToggled: boolean;
+    isDisabled: boolean;
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/hooks/useTool.js

@@ -0,0 +1,64 @@
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { useMap } from "react-leaflet";
+import { usePopupsStore, deepShallow } from "@m4l/components";
+import { useCallback } from "react";
+function useTool(props) {
+  const { ToolComponent, popupId, iconId, dictionaryId, defaultPosition } = props;
+  const { addPopup } = usePopupsStore((state) => state.popupsActions);
+  const { close } = usePopupsStore((state) => state.popupActions);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const { isToggled, isDisabled } = usePopupsStore(
+    (state) => {
+      const openPopupsIds = state.popupsIds.filter((pId) => {
+        return state.hashPopups[pId].status === "init";
+      });
+      return {
+        isToggled: openPopupsIds.indexOf(popupId) > -1,
+        isDisabled: state.popupsIds.indexOf(popupId) > -1 && openPopupsIds.indexOf(popupId) === -1
+      };
+    },
+    deepShallow
+  );
+  const map = useMap();
+  const onMouseUp = useCallback((e) => {
+    map.dragging.enable();
+    e.stopPropagation();
+    document.removeEventListener("mouseup", onMouseUp);
+  }, [map]);
+  const onMouseDown = useCallback((e) => {
+    map.dragging.disable();
+    e.stopPropagation();
+    document.addEventListener("mouseup", onMouseUp);
+  }, [map.dragging, onMouseUp]);
+  const onToolClick = useCallback((e) => {
+    if (!ToolComponent) {
+      return;
+    }
+    if (!isToggled) {
+      addPopup(
+        {
+          winType: "component",
+          popupId,
+          title: getLabel(dictionaryId),
+          iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${iconId}`,
+          component: ToolComponent,
+          onMouseDown,
+          defaultPosition
+        },
+        { closeOthers: true }
+      );
+    } else {
+      close(popupId);
+    }
+    e.stopPropagation();
+  }, [ToolComponent, isToggled, addPopup, popupId, getLabel, dictionaryId, host_static_assets, environment_assets, iconId, onMouseDown, defaultPosition, close]);
+  return {
+    onToolClick,
+    isToggled,
+    isDisabled
+  };
+}
+export {
+  useTool as u
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/index.d.ts

@@ -3,8 +3,6 @@ import { TopRigthToolsProps } from './types';
  * Componente que contiene los botones de herramientas de la parte superior derecha del mapa
  *  - Boton de herramientas de GPS (Opcional)
  *  - Boton de herramientas de medición
- *  - Botones de zoom In
- *  - Botones de zoom Out
  * @param props
  * @returns
  */

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/index.js

@@ -1,101 +1,56 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { useMap } from "react-leaflet";
-import { shallow } from "zustand/shallow";
-import { C as Control } from "../../../../external/Control/index.js";
-import { usePopupsStore, ToggleIconButton } from "@m4l/components";
-import { M as MeasureTool } from "./subcomponents/MeasureTool/index.js";
-import { Z as ZoomButtons } from "./subcomponents/ZoomButtons/index.js";
+import { M as MapControl } from "../../../../external/MapControl/index.js";
 import { M as MAP_ICONS } from "../../../../icons.js";
+import { B as ButtonTool } from "./subcomponents/ButtonTool/index.js";
 import { M as MAP_DICCTIONARY } from "../../../../dictionary.js";
-import { m as mapClasses } from "../../../../classes/index.js";
-import { G as GPS_TOOLS_POPUP_DEFAULT_POSITION, c as GPS_TOOLS_POPUP_ID, d as MESURE_POPUP_DEFAULT_POSITION } from "../../../../constants.js";
+import { d as MAP_SOURCES_TOOL_POPUP_DEFAULT_POSITION, e as MAP_LAYERS_TOOL_POPUP_DEFAULT_POSITION, G as GPS_TOOLS_POPUP_DEFAULT_POSITION, f as MESURE_TOOL_POPUP_DEFAULT_POSITION } from "../../../../constants.js";
+import { M as MapLayersTool } from "./subcomponents/MapLayersTool/MapLayersTool.js";
+import { M as MeasureTool } from "./subcomponents/MeasureTool/MeasureTool.js";
+import { M as MapSourcesTool } from "./subcomponents/MapSourcesTool/MapSourcesTool.js";
+import { R as RightToolsRootStyled } from "../../../../slots/styled.js";
 function TopRightTools(props) {
-  const { tools } = props;
-  const { addPopup } = usePopupsStore((state) => state.popupsActions);
-  const { close } = usePopupsStore((state) => state.popupActions);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const openPopupsIds = usePopupsStore(
-    (state) => state.popupsIds.filter((pId) => {
-      return state.hashPopups[pId].status === "init";
-    }),
-    shallow
-  );
-  const popupsIds = usePopupsStore((state) => state.popupsIds, shallow);
-  const map = useMap();
-  const isToggledGpsTools = openPopupsIds.indexOf("gpsTools") > -1;
-  const isDisabledGpsTools = popupsIds.indexOf("gpsTools") > -1 && openPopupsIds.indexOf("gpsTools") === -1;
-  const isToggledMeasureTool = openPopupsIds.indexOf("measureTool") > -1;
-  const isDisabledMeasureTool = popupsIds.indexOf("measureTool") > -1 && openPopupsIds.indexOf("measureTool") === -1;
-  const onMouseDown = (e) => {
-    map.dragging.disable();
-    e.stopPropagation();
-    document.addEventListener("mouseup", onMouseUp);
-  };
-  const onMouseUp = (e) => {
-    map.dragging.enable();
-    e.stopPropagation();
-    document.removeEventListener("mouseup", onMouseUp);
-  };
-  const onGpsToolsClick = (e) => {
-    if (tools && !isToggledGpsTools) {
-      addPopup(
-        {
-          winType: "component",
-          popupId: GPS_TOOLS_POPUP_ID,
-          title: getLabel(MAP_DICCTIONARY.LABEL_GPSTOOLS_NAME),
-          iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_ICONS.MAP_GPS_TOOLS_TOOL}`,
-          component: tools,
-          onMouseDown,
-          defaultPosition: GPS_TOOLS_POPUP_DEFAULT_POSITION
-        },
-        { closeOthers: true }
-      );
-    } else {
-      close(GPS_TOOLS_POPUP_ID);
-    }
-    e.stopPropagation();
-  };
-  const onMeasureToolClick = (e) => {
-    if (!isToggledMeasureTool) {
-      addPopup(
-        {
-          winType: "component",
-          popupId: "measureTool",
-          iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_MEASURE_TOOL}`,
-          title: getLabel(MAP_DICCTIONARY.LABEL_POPUP_MEASURE),
-          component: MeasureTool,
-          onMouseDown,
-          defaultPosition: MESURE_POPUP_DEFAULT_POSITION
-        },
-        { closeOthers: true }
-      );
-    } else {
-      close("measureTool");
-    }
-    e.stopPropagation();
-  };
-  return /* @__PURE__ */ jsxs(Control, { position: "topright", prepend: true, className: mapClasses.topRigthToolsRoot, children: [
-    tools && /* @__PURE__ */ jsx(
-      ToggleIconButton,
+  const { GpsTools } = props;
+  return /* @__PURE__ */ jsxs(MapControl, { position: "topright", prepend: true, ControlContainer: RightToolsRootStyled, children: [
+    /* @__PURE__ */ jsx(
+      ButtonTool,
+      {
+        ToolComponent: MapSourcesTool,
+        iconId: MAP_ICONS.MAP_SOURCES_TOOL,
+        popupId: "sourcesTools",
+        dictionaryId: MAP_DICCTIONARY.LABEL_MAP_SOURCES,
+        defaultPosition: MAP_SOURCES_TOOL_POPUP_DEFAULT_POSITION
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ButtonTool,
       {
-        isToggled: isToggledGpsTools,
-        disabled: isDisabledGpsTools,
-        onToggle: onGpsToolsClick,
-        icon: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_ICONS.MAP_GPS_TOOLS_TOOL}`
+        ToolComponent: MapLayersTool,
+        iconId: MAP_ICONS.MAP_LAYERS_TOOL,
+        popupId: "layersTools",
+        dictionaryId: MAP_DICCTIONARY.LABEL_LAYERS,
+        defaultPosition: MAP_LAYERS_TOOL_POPUP_DEFAULT_POSITION
       }
     ),
     /* @__PURE__ */ jsx(
-      ToggleIconButton,
+      ButtonTool,
       {
-        isToggled: isToggledMeasureTool,
-        disabled: isDisabledMeasureTool,
-        onToggle: onMeasureToolClick,
-        icon: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_MEASURE_TOOL}`
+        ToolComponent: GpsTools,
+        iconId: MAP_ICONS.MAP_GPS_TOOLS_TOOL,
+        popupId: "gpsTools",
+        dictionaryId: MAP_DICCTIONARY.LABEL_GPSTOOLS_NAME,
+        defaultPosition: GPS_TOOLS_POPUP_DEFAULT_POSITION
       }
     ),
-    /* @__PURE__ */ jsx(ZoomButtons, {})
+    /* @__PURE__ */ jsx(
+      ButtonTool,
+      {
+        ToolComponent: MeasureTool,
+        iconId: MAP_ICONS.MAP_MEASURE_TOOL,
+        popupId: "measureTools",
+        dictionaryId: MAP_DICCTIONARY.LABEL_MEASURE,
+        defaultPosition: MESURE_TOOL_POPUP_DEFAULT_POSITION
+      }
+    )
   ] });
 }
 export {