@m4l/gclick 0.1.0 → 0.2.0-JAEBeta.0

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

@@ -0,0 +1,9 @@
+import { ButtonToolProps } from './types';
+/**
+ * Boton de herramienta, se encarga de renderizar el boton de herramienta y gestionar el popup asociado.
+ *  - Boton de herramientas de GPS (Opcional)
+ *  - Boton de herramientas de medición
+ * @param props
+ * @returns
+ */
+export declare function ButtonTool(props: ButtonToolProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { useEnvironment } from "@m4l/core";
+import { ToggleIconButton } from "@m4l/components";
+import { u as useTool } from "../../hooks/useTool.js";
+function ButtonTool(props) {
+  const { ToolComponent, iconId } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { onToolClick, isDisabled, isToggled } = useTool(props);
+  if (!ToolComponent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    ToggleIconButton,
+    {
+      isToggled,
+      disabled: isDisabled,
+      onToggle: onToolClick,
+      icon: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${iconId}`
+    }
+  );
+}
+export {
+  ButtonTool as B
+};

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

@@ -0,0 +1,2 @@
+import { useToolProps } from '../../hooks/types';
+export type ButtonToolProps = useToolProps;

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

@@ -0,0 +1,4 @@
+/**
+ * TODO: Documentar
+ */
+export declare function MapLayersTool(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { u as useMapLayersTool } from "./hooks/useMapLayersTool.js";
+import { u as useDisableMapEventsOnMouseOver } from "../../../../../../hooks/useDisableMapEventsOnMouseOver/index.js";
+import { useRef } from "react";
+import { G as GpsMapLayersToolRootStyled } from "./slots/styled.js";
+import { M as MapLayerRow } from "./subcomponents/MapLayerRow.js";
+function MapLayersTool() {
+  const { layers, setCheckedLayers, removeLayer } = useMapLayersTool();
+  const divRef = useRef(null);
+  useDisableMapEventsOnMouseOver(divRef.current);
+  return /* @__PURE__ */ jsx(GpsMapLayersToolRootStyled, { ref: divRef, children: layers.map((layer) => /* @__PURE__ */ jsx(
+    MapLayerRow,
+    {
+      id: layer.id,
+      name: layer.name,
+      autoFocusAble: layer.autoFocusAble,
+      clusterAble: layer.clusterAble,
+      deleteAble: layer.deleteAble,
+      visible: layer.visible,
+      cluster: layer.cluster,
+      autoFocus: layer.autoFocus,
+      setCheckedLayers,
+      removeLayer
+    },
+    layer.id
+  )) });
+}
+export {
+  MapLayersTool as M
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/MapLayersTool.styles.d.ts

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

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/MapLayersTool.styles.js

@@ -0,0 +1,45 @@
+const mapLayersToolStyles = {
+  /**
+   * Estilos del componente MapSourcesTool
+   */
+  mapLayersToolRoot: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp3,
+    position: "absolute",
+    left: "-16px",
+    top: "-16px",
+    right: "-16px",
+    bottom: "-16px",
+    overflowX: "hidden",
+    overflowY: "auto",
+    margin: theme.vars.size.baseSpacings.sp3
+  }),
+  /**
+   * Estilos del componente MapLayersToolHeader
+   */
+  mapLayersToolRowContainer: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Estilos del componente MapLayersToolRowCheckBoxNameContainer
+   */
+  mapLayersToolRowCheckBoxNameContainer: () => ({
+    display: "flex",
+    alignItems: "center",
+    flexGrow: 1
+  }),
+  /**
+   * Estilos del componente MapLayersToolRowOptionsContainer
+   */
+  mapLayersToolRowOptionsContainer: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp2
+  })
+};
+export {
+  mapLayersToolStyles as m
+};

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

@@ -0,0 +1,11 @@
+import { LayerStore } from '../../../../../../../contexts/MapContext/types';
+export type LayerId = string;
+/**
+ * Modelo de datos proveniente del endpoint get de geocercas
+ */
+export interface LayersListModel extends Pick<LayerStore, 'name' | 'clusterAble' | 'autoFocusAble' | 'deleteAble' | 'visible' | 'autoFocus' | 'cluster'> {
+    /**
+     * id de la geocerca
+     */
+    id: LayerId;
+}

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

@@ -0,0 +1,9 @@
+import { LayersListModel } from './types';
+/**
+ * Hook que contiene la logica de la tabla de capas
+ */
+export declare function useMapLayersTool(): {
+    layers: LayersListModel[];
+    setCheckedLayers: (layerId: string, checkedNameProp: import('../../../../../../../contexts/MapContext/types').CheckedNameProp, newValue: boolean) => void;
+    removeLayer: (layerId: string) => void;
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/hooks/useMapLayersTool.js

@@ -0,0 +1,37 @@
+import { u as useMapStore } from "../../../../../../../hooks/useMapStore/index.js";
+import { deepShallow } from "@m4l/components";
+function useMapLayersTool() {
+  const { layers, setCheckedLayers, removeLayer } = useMapStore(
+    (state) => {
+      const arrLayers = [];
+      state.layersIds.forEach((layerId) => {
+        if (state.hashLayers[layerId]) {
+          arrLayers.push({
+            id: layerId,
+            name: state.hashLayers[layerId].name || `*${layerId}`,
+            clusterAble: state.hashLayers[layerId].clusterAble || false,
+            deleteAble: state.hashLayers[layerId].deleteAble || false,
+            autoFocusAble: state.hashLayers[layerId].autoFocusAble || false,
+            visible: state.hashLayers[layerId].visible || false,
+            autoFocus: state.hashLayers[layerId].autoFocus || false,
+            cluster: state.hashLayers[layerId].cluster || false
+          });
+        }
+      });
+      return {
+        layers: arrLayers,
+        setCheckedLayers: state.mapActions.setCheckedLayers,
+        removeLayer: state.mapActions.removeLayer
+      };
+    },
+    deepShallow
+  );
+  return {
+    layers,
+    setCheckedLayers,
+    removeLayer
+  };
+}
+export {
+  useMapLayersTool as u
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/slots/slots.d.ts

@@ -0,0 +1,6 @@
+export declare enum MapSlotsLayersTool {
+    mapLayersToolRoot = "mapLayersToolRoot",
+    mapLayersToolRowContainer = "mapLayersToolRowContainer",
+    mapLayersToolRowCheckBoxNameContainer = "mapLayersToolRowCheckBoxNameContainer",
+    mapLayersToolRowOptionsContainer = "mapLayersToolRowOptionsContainer"
+}

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/slots/slots.js

@@ -0,0 +1,10 @@
+var MapSlotsLayersTool = /* @__PURE__ */ ((MapSlotsLayersTool2) => {
+  MapSlotsLayersTool2["mapLayersToolRoot"] = "mapLayersToolRoot";
+  MapSlotsLayersTool2["mapLayersToolRowContainer"] = "mapLayersToolRowContainer";
+  MapSlotsLayersTool2["mapLayersToolRowCheckBoxNameContainer"] = "mapLayersToolRowCheckBoxNameContainer";
+  MapSlotsLayersTool2["mapLayersToolRowOptionsContainer"] = "mapLayersToolRowOptionsContainer";
+  return MapSlotsLayersTool2;
+})(MapSlotsLayersTool || {});
+export {
+  MapSlotsLayersTool as M
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/slots/styled.d.ts

@@ -0,0 +1,12 @@
+export declare const GpsMapLayersToolRootStyled: 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 GpsMapLayersToolRowContainerStyled: 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 GpsMapLayersToolRowCheckBoxNameContainerStyled: 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 GpsMapLayersToolRowOptionsContainerStyled: 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>>, {}>;

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/slots/styled.js

@@ -0,0 +1,26 @@
+import { styled } from "@mui/material/styles";
+import { M as MAP_COMPONET_KEY_COMPONENT } from "../../../../../../../constants.js";
+import { m as mapLayersToolStyles } from "../MapLayersTool.styles.js";
+import { M as MapSlotsLayersTool } from "./slots.js";
+const GpsMapLayersToolRootStyled = styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsLayersTool.mapLayersToolRoot
+})(mapLayersToolStyles?.mapLayersToolRoot);
+const GpsMapLayersToolRowContainerStyled = styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsLayersTool.mapLayersToolRowContainer
+})(mapLayersToolStyles?.mapLayersToolRowContainer);
+const GpsMapLayersToolRowCheckBoxNameContainerStyled = styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsLayersTool.mapLayersToolRowCheckBoxNameContainer
+})(mapLayersToolStyles?.mapLayersToolRowCheckBoxNameContainer);
+const GpsMapLayersToolRowOptionsContainerStyled = styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsLayersTool.mapLayersToolRowOptionsContainer
+})(mapLayersToolStyles?.mapLayersToolRowOptionsContainer);
+export {
+  GpsMapLayersToolRootStyled as G,
+  GpsMapLayersToolRowContainerStyled as a,
+  GpsMapLayersToolRowCheckBoxNameContainerStyled as b,
+  GpsMapLayersToolRowOptionsContainerStyled as c
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/subcomponents/MapLayerRow.d.ts

@@ -0,0 +1,5 @@
+import { MapLayerRowProps } from './types';
+/**
+ * MapLayerRow componente para mostrar una fila de capa
+ */
+export declare function MapLayerRow(props: MapLayerRowProps): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/subcomponents/MapLayerRow.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CheckBox, Typography, ToggleIconButton, IconButton } from "@m4l/components";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { M as MAP_ICONS } from "../../../../../../../icons.js";
+import { M as MAP_DICCTIONARY } from "../../../../../../../dictionary.js";
+import { a as GpsMapLayersToolRowContainerStyled, b as GpsMapLayersToolRowCheckBoxNameContainerStyled, c as GpsMapLayersToolRowOptionsContainerStyled } from "../slots/styled.js";
+function MapLayerRow(props) {
+  const {
+    id,
+    name,
+    autoFocusAble,
+    clusterAble,
+    deleteAble,
+    visible,
+    cluster,
+    autoFocus,
+    setCheckedLayers,
+    removeLayer
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  return /* @__PURE__ */ jsxs(GpsMapLayersToolRowContainerStyled, { children: [
+    /* @__PURE__ */ jsxs(GpsMapLayersToolRowCheckBoxNameContainerStyled, { children: [
+      /* @__PURE__ */ jsx(CheckBox, { checked: visible, onClick: () => {
+        setCheckedLayers(id, "visible", !visible);
+      } }),
+      /* @__PURE__ */ jsx(Typography, { children: name })
+    ] }),
+    /* @__PURE__ */ jsxs(GpsMapLayersToolRowOptionsContainerStyled, { children: [
+      /* @__PURE__ */ jsx(
+        ToggleIconButton,
+        {
+          disabled: !clusterAble,
+          isToggled: cluster,
+          onToggle: () => {
+            setCheckedLayers(id, "cluster", !cluster);
+          },
+          tooltip: getLabel(MAP_DICCTIONARY.LABEL_LAYER_CLUSTER),
+          src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_CLUSTER}`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToggleIconButton,
+        {
+          disabled: !autoFocusAble,
+          isToggled: autoFocus,
+          onToggle: () => {
+            setCheckedLayers(id, "autoFocus", !autoFocus);
+          },
+          tooltip: getLabel(MAP_DICCTIONARY.LABEL_LAYER_AUTOFOCUS),
+          src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_AUTOFOCUS}`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          disabled: !deleteAble,
+          color: "error",
+          onClick: () => {
+            removeLayer(id);
+          },
+          tooltip: getLabel(MAP_DICCTIONARY.LABEL_LAYER_DELETE),
+          src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_DELETE}`
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  MapLayerRow as M
+};

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

@@ -0,0 +1,6 @@
+import { CheckedNameProp, LayerStore } from '../../../../../../../contexts/MapContext/types';
+export interface MapLayerRowProps extends Pick<LayerStore, 'name' | 'clusterAble' | 'autoFocusAble' | 'deleteAble' | 'visible' | 'autoFocus' | 'cluster'> {
+    id: string;
+    setCheckedLayers: (layerId: string, checkedNameSet: CheckedNameProp, newValue: boolean) => void;
+    removeLayer: (layerId: string) => void;
+}

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

@@ -0,0 +1,9 @@
+import { Theme } from '@mui/material/styles';
+import { MAP_COMPONET_KEY_COMPONENT } from '../../../../../../constants';
+import { M4LOverridesStyleRules } from '@m4l/components';
+import { MapSlotsLayersTool } from './slots/slots';
+export type MapLayersToolOwnerState = {
+    visible: boolean;
+};
+export type MapLayersToolSlotsType = keyof typeof MapSlotsLayersTool;
+export type MapLayersToolStyles = M4LOverridesStyleRules<MapLayersToolSlotsType, typeof MAP_COMPONET_KEY_COMPONENT, Theme>;

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/{TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/index.d.ts → TopRigthTools/subcomponents/MapSourcesTool/MapSourcesTool.d.ts}

@@ -1,4 +1,4 @@
 /**
- * TODO: Documentar
+ * MapSourcesTool componente encargado de renderizar la herramienta de fuentes de mapas
  */
 export declare function MapSourcesTool(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Image, Typography } from "@m4l/components";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { G as GpsMapSourcesToolRootStyled, a as GpsMapSourcesToolContentGroupStyled, b as GpsMapSourcesToolContentGroupHeaderStyled } from "./slots/styled.js";
+import { u as useMapSourcesTool } from "./hooks/useMapSourcesTool.js";
+import { M as MapSourceCard } from "./subcomponents/MapSourceCard.js";
+function MapSourcesTool() {
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { currentMapSourceLayer, mapSources, setCurrentMapSourceLayer, setMapSourceLayerRoadOptions } = useMapSourcesTool();
+  return /* @__PURE__ */ jsx(GpsMapSourcesToolRootStyled, { children: mapSources.map((source, index) => /* @__PURE__ */ jsxs(
+    GpsMapSourcesToolContentGroupStyled,
+    {
+      ownerState: { isLast: index === mapSources.length - 1 },
+      children: [
+        /* @__PURE__ */ jsxs(GpsMapSourcesToolContentGroupHeaderStyled, { children: [
+          /* @__PURE__ */ jsx(Image, { src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/images/${source.imageId}`, height: 16, width: 16 }),
+          /* @__PURE__ */ jsx(Typography, { ellipsis: true, color: "text.secondary", children: getLabel(source.dictionaryId) })
+        ] }),
+        source.layers.map((layer) => /* @__PURE__ */ jsx(
+          MapSourceCard,
+          {
+            mapSourceId: source.id,
+            selected: source.id === currentMapSourceLayer.mapSourceId && layer.id === currentMapSourceLayer.mapSourceLayerId,
+            setCurrentMapSourceLayer,
+            setMapSourceLayerRoadOptions,
+            ...layer
+          },
+          layer.id
+        ))
+      ]
+    },
+    source.id
+  )) });
+}
+export {
+  MapSourcesTool as M
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/MapSourcesTool.styles.d.ts

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

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/MapSourcesTool.styles.js

@@ -0,0 +1,87 @@
+import { getSizeStyles } from "@m4l/components";
+const mapSourcesToolStyles = {
+  /**
+   * Estilos del componente MapSourcesTool
+   */
+  mapSourcesToolRoot: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp2,
+    position: "absolute",
+    left: "-16px",
+    top: "-16px",
+    right: "-16px",
+    bottom: "-16px",
+    overflowX: "hidden",
+    overflowY: "auto",
+    margin: theme.vars.size.baseSpacings.sp3
+  }),
+  /**
+   * Estilos del componente MapSourcesToolHeader
+   */
+  mapSourcesToolHeader: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Estilos del componente MapSourcesToolGroup
+   */
+  mapSourcesToolGroup: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: theme.vars.size.baseSpacings.sp2,
+    // paddingBottom: theme.vars.size.baseSpacings.sp4,
+    // Solo aplicar borderBottom si no es el último elemento
+    ...ownerState?.isLast === false && {
+      borderBottom: `1px solid ${theme.vars.palette.border.secondary}`
+    }
+  }),
+  /**
+   * Estilos del componente MapSourcesToolGroupHeader
+   */
+  mapSourcesToolGroupHeader: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp2,
+    paddingBottom: theme.vars.size.baseSpacings.sp2,
+    overflow: "hidden"
+  }),
+  /**
+   * Estilos del contenedor de la etiqueta y el icono
+   */
+  mapSourceToolCardIconTitleContainer: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp2,
+    flexGrow: 1,
+    overflow: "hidden"
+  }),
+  /**
+   * Estilos del icono
+   */
+  mapSourceToolCardIcon: ({ theme }) => ({
+    ...getSizeStyles(
+      theme,
+      "medium",
+      "case",
+      (size) => ({
+        width: size,
+        height: size
+      })
+    )
+  }),
+  /**
+   * Estilos del contenedor de las opciones de carretera
+   */
+  mapSourceToolCardRoadOptionsContainer: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    paddingLeft: theme.vars.size.baseSpacings.sp2,
+    gap: theme.vars.size.baseSpacings.sp2,
+    borderLeft: `1px solid ${theme.vars.palette.border.secondary}`
+  })
+};
+export {
+  mapSourcesToolStyles as m
+};

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

@@ -0,0 +1,12 @@
+/**
+ * TODO: Documentar
+ */
+export declare function useMapSourcesTool(): {
+    setCurrentMapSourceLayer: (mapSourceType: import('../../../../../../../contexts/MapContext/types').MapTileSourceId, newId: import('../../../../../../../contexts/MapContext/types').MapTileSourceLayerId) => void;
+    setMapSourceLayerRoadOptions: (mapSourceType: import('../../../../../../../contexts/MapContext/types').MapTileSourceId, mapSourceLayerId: import('../../../../../../../contexts/MapContext/types').MapTileSourceLayerId, partialRoadOptions: Partial<import('../../../../../../../contexts/MapContext/types').MapSourceLayerRoadOptionsType>) => void;
+    mapSources: import('../../../../../../../contexts/MapContext/types').MapTileSource[];
+    currentMapSourceLayer: {
+        mapSourceId: import('../../../../../../../contexts/MapContext/types').MapTileSourceId;
+        mapSourceLayerId: import('../../../../../../../contexts/MapContext/types').MapTileSourceLayerId;
+    };
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/hooks/useMapSourcesTool.js

@@ -0,0 +1,22 @@
+import { shallow } from "zustand/shallow";
+import { u as useMapStore } from "../../../../../../../hooks/useMapStore/index.js";
+import { deepShallow } from "@m4l/components";
+function useMapSourcesTool() {
+  const { mapSources, currentMapSourceLayer } = useMapStore((state) => {
+    return { mapSources: state.mapSources, currentMapSourceLayer: state.currentMapSourceLayer };
+  }, deepShallow);
+  const { setCurrentMapSourceLayer, setMapSourceLayerRoadOptions } = useMapStore(
+    (state) => state.mapActions,
+    shallow
+  );
+  return {
+    setCurrentMapSourceLayer,
+    setMapSourceLayerRoadOptions,
+    mapSources,
+    // Retornar grupos en lugar de fuentes individuales
+    currentMapSourceLayer
+  };
+}
+export {
+  useMapSourcesTool as u
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/slots/slots.d.ts

@@ -0,0 +1,9 @@
+export declare enum MapSlotsSourcesTool {
+    mapSourcesToolRoot = "mapSourcesToolRoot",
+    mapSourcesToolHeader = "mapSourcesToolHeader",
+    mapSourcesToolGroup = "mapSourcesToolGroup",
+    mapSourcesToolGroupHeader = "mapSourcesToolGroupHeader",
+    mapSourceToolCardIconTitleContainer = "mapSourceToolCardIconTitleContainer",
+    mapSourceToolCardIcon = "mapSourceToolCardIcon",
+    mapSourceToolCardRoadOptionsContainer = "mapSourceToolCardRoadOptionsContainer"
+}

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/slots/slots.js

@@ -0,0 +1,13 @@
+var MapSlotsSourcesTool = /* @__PURE__ */ ((MapSlotsSourcesTool2) => {
+  MapSlotsSourcesTool2["mapSourcesToolRoot"] = "mapSourcesToolRoot";
+  MapSlotsSourcesTool2["mapSourcesToolHeader"] = "mapSourcesToolHeader";
+  MapSlotsSourcesTool2["mapSourcesToolGroup"] = "mapSourcesToolGroup";
+  MapSlotsSourcesTool2["mapSourcesToolGroupHeader"] = "mapSourcesToolGroupHeader";
+  MapSlotsSourcesTool2["mapSourceToolCardIconTitleContainer"] = "mapSourceToolCardIconTitleContainer";
+  MapSlotsSourcesTool2["mapSourceToolCardIcon"] = "mapSourceToolCardIcon";
+  MapSlotsSourcesTool2["mapSourceToolCardRoadOptionsContainer"] = "mapSourceToolCardRoadOptionsContainer";
+  return MapSlotsSourcesTool2;
+})(MapSlotsSourcesTool || {});
+export {
+  MapSlotsSourcesTool as M
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/slots/styled.d.ts

@@ -0,0 +1,21 @@
+export declare const GpsMapSourcesToolRootStyled: 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 GpsMapSourcesToolHeaderStyled: 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 GpsMapSourcesToolContentGroupStyled: 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 GpsMapSourcesToolContentGroupHeaderStyled: 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 GpsMapSourceToolCardIconTitleContainerStyled: 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 GpsMapSourceToolCardIconStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components').IconProps, keyof import('@m4l/components').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../../../../../../../types').MapOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const GpsMapSourceToolCardRoadOptionsContainerStyled: 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>>, {}>;

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/slots/styled.js

@@ -0,0 +1,41 @@
+import { styled } from "@mui/material/styles";
+import { M as MAP_COMPONET_KEY_COMPONENT } from "../../../../../../../constants.js";
+import { m as mapSourcesToolStyles } from "../MapSourcesTool.styles.js";
+import { M as MapSlotsSourcesTool } from "./slots.js";
+import { Icon } from "@m4l/components";
+const GpsMapSourcesToolRootStyled = styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsSourcesTool.mapSourcesToolRoot
+})(mapSourcesToolStyles?.mapSourcesToolRoot);
+styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsSourcesTool.mapSourcesToolHeader
+})(mapSourcesToolStyles?.mapSourcesToolHeader);
+const GpsMapSourcesToolContentGroupStyled = styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsSourcesTool.mapSourcesToolGroup
+})(mapSourcesToolStyles?.mapSourcesToolGroup);
+const GpsMapSourcesToolContentGroupHeaderStyled = styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsSourcesTool.mapSourcesToolGroupHeader
+})(mapSourcesToolStyles?.mapSourcesToolGroupHeader);
+const GpsMapSourceToolCardIconTitleContainerStyled = styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsSourcesTool.mapSourceToolCardIconTitleContainer
+})(mapSourcesToolStyles?.mapSourceToolCardIconTitleContainer);
+const GpsMapSourceToolCardIconStyled = styled(Icon, {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsSourcesTool.mapSourceToolCardIcon
+})(mapSourcesToolStyles?.mapSourceToolCardIcon);
+const GpsMapSourceToolCardRoadOptionsContainerStyled = styled("div", {
+  name: MAP_COMPONET_KEY_COMPONENT,
+  slot: MapSlotsSourcesTool.mapSourceToolCardRoadOptionsContainer
+})(mapSourcesToolStyles?.mapSourceToolCardRoadOptionsContainer);
+export {
+  GpsMapSourcesToolRootStyled as G,
+  GpsMapSourcesToolContentGroupStyled as a,
+  GpsMapSourcesToolContentGroupHeaderStyled as b,
+  GpsMapSourceToolCardIconTitleContainerStyled as c,
+  GpsMapSourceToolCardIconStyled as d,
+  GpsMapSourceToolCardRoadOptionsContainerStyled as e
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/sourceTypes/bing.d.ts

@@ -0,0 +1,2 @@
+import { MapTileSource } from '../../../../../../../contexts/MapContext/types';
+export declare const TILE_LAYER_BING: MapTileSource;