@m4l/gclick 0.0.2

package/components/maps/components/GpsMap/pluginLayers/PolylineWithArrows/index.js

@@ -0,0 +1,74 @@
+import { jsx } from "react/jsx-runtime";
+import L__default from "leaflet";
+import "leaflet-polylinedecorator";
+import { useRef, useEffect } from "react";
+import { useMap, Polyline } from "react-leaflet";
+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: [
+          {
+            // offset: '20%',
+            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: [
+              {
+                // offset: '20%',
+                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 });
+};
+export {
+  PolylineWithArrows as P
+};

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

@@ -0,0 +1 @@
+export { PolylineWithArrows } from './PolylineWithArrows';

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,7 @@
+import { MapPopupProps } from '../types';
+/**
+ * "MapPopupDevice" componente encargado de visualizar la información de un dispositivo
+ * dentro de un popup.
+ *
+ */
+export declare const MapPopupDevice: (props: MapPopupProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { P as PopupRootStyled, M as MapPopupDeviceRootStyled } from "./slots/MapPopupDeviceSlots.js";
+import { AppearanceComponentProvider } from "@m4l/components";
+import { G as GpsDeviceContent } from "./subcomponents/Content/GpsDeviceContent.js";
+import { G as GpsDeviceHeader } from "./subcomponents/Header/GpsDeviceHeader.js";
+const MapPopupDevice = (props) => {
+  const { isOpen, popupOptions } = props;
+  const { keepInView = true, autoPan = true, closeOnEscapeKey = true, ...others } = popupOptions || {};
+  return /* @__PURE__ */ jsx(
+    PopupRootStyled,
+    {
+      ownerState: {},
+      closeButton: false,
+      keepInView,
+      autoPan,
+      autoPanPaddingTopLeft: [40, 40],
+      autoPanPaddingBottomRight: [40, 40],
+      closeOnEscapeKey,
+      offset: [0, -5],
+      ...others,
+      children: isOpen && /* @__PURE__ */ jsx(AppearanceComponentProvider, { defaultSize: "medium", children: /* @__PURE__ */ jsxs(MapPopupDeviceRootStyled, { ownerState: {}, children: [
+        /* @__PURE__ */ jsx(GpsDeviceHeader, { ...props }),
+        /* @__PURE__ */ jsx(GpsDeviceContent, { ...props })
+      ] }) })
+    }
+  );
+};
+export {
+  MapPopupDevice as M
+};

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

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

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

@@ -0,0 +1,146 @@
+import { g as getHeightSizeStyles } from "../../../../../../utils/getSizeStyles/getSizeStyles.js";
+import { g as getTypographyStyles } from "../../../../../../utils/getTypographyStyles.js";
+const mapPopupDeviceStyles = {
+  /**
+   * leafletRoot
+   */
+  leafletRoot: ({ theme }) => ({
+    boxShadow: theme.vars.customShadows.z4,
+    "& .leaflet-popup-content-wrapper": {
+      // '::before': {
+      //   content: '""',
+      //   position: 'absolute',
+      //   top: 0,
+      //   left: 0,
+      //   right: 0,
+      //   height: '5px', // Ancho del borde superior
+      //   background: `linear-gradient(to top, ${ownerState?.bgColor || '#FFFFFF'})`, // Degradado
+      // },
+      // borderTop: `2px solid ${ownerState?.bgColor || '#FFFFFF'}CC`,
+      borderRadius: theme.vars.size.borderRadius.r2
+    },
+    "& .leaflet-popup-content": {
+      padding: 0,
+      margin: 0,
+      width: "unset !important"
+    },
+    "& .leaflet-popup-tip": {
+      borderRadius: theme.vars.size.borderRadius.r1
+    }
+  }),
+  /**
+   * TODO: Documentar
+   */
+  root: () => ({
+    minWidth: "400px",
+    //Cambiar
+    display: "flex",
+    flexDirection: "column",
+    boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)"
+  }),
+  /**
+   * TODO: Documentar
+   */
+  header: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    padding: `${theme.vars.size.baseSpacings["sp0-5"]} ${theme.vars.size.baseSpacings.sp1}`,
+    borderBottom: `1px solid ${theme.vars.palette.border.disabled}`,
+    "> h6": {
+      flexGrow: 1
+    }
+    // zIndex: ownerState.baseZindex || 0,
+  }),
+  /**
+   * Slot device
+   */
+  device: () => ({
+    // marginLeft: theme.vars.size.baseSpacings.sp3,
+    flexGrow: 1
+  }),
+  /**
+   * TODO: Documentar
+   */
+  content: ({ theme }) => ({
+    flexGrow: 1,
+    display: "flex",
+    flexDirection: "column",
+    overflowY: "auto",
+    overflowX: "hidden",
+    padding: `${theme.vars.size.baseSpacings.sp3} ${theme.vars.size.baseSpacings.sp4} `,
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+    // zIndex: ownerState.baseZindex || 0,
+  }),
+  /**
+   * Slot propertyValue
+   */
+  propertyValue: () => ({
+    borderBottom: "unset"
+  }),
+  /**
+   * Slot statusAndTime
+   */
+  statusAndTime: ({ theme }) => ({
+    display: "flex",
+    gap: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Slot address
+   */
+  address: ({ theme }) => ({
+    marginTop: theme.vars.size.baseSpacings["sp0-5"],
+    padding: `${theme.vars.size.baseSpacings.sp2} ${theme.vars.size.baseSpacings.sp4}`,
+    backgroundColor: theme.vars.palette.primary.opacity,
+    borderRadius: theme.vars.size.borderRadius.r1
+  }),
+  /**
+   * Slot groupAndViewMore
+   */
+  groupAndViewMore: ({ theme, ownerState }) => ({
+    display: "flex",
+    justifyContent: "space-between",
+    gap: theme.vars.size.baseSpacings.sp3,
+    alignItems: "center",
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState?.size || "medium",
+      "action",
+      (height) => ({ lineHeight: height })
+    )
+  }),
+  /**
+   * Slot group
+   */
+  group: ({ theme, ownerState }) => {
+    const size = ownerState?.size || "medium";
+    return {
+      display: "inline-block",
+      paddingLeft: theme.vars.size.baseSpacings.sp1,
+      paddingRight: theme.vars.size.baseSpacings.sp1,
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      borderRadius: theme.vars.size.borderRadius["r0-5"],
+      //TODO: Mejorar el tipado
+      color: `${ownerState.color} !important`,
+      backgroundColor: `${ownerState.bgColor} !important`,
+      ...getTypographyStyles(
+        theme.generalSettings.isMobile,
+        size,
+        "body"
+      ),
+      ...getHeightSizeStyles(
+        theme.generalSettings.isMobile,
+        size,
+        "base",
+        (height) => ({ lineHeight: height })
+      )
+    };
+  },
+  viewMore: () => ({
+    whiteSpace: "nowrap"
+  })
+};
+export {
+  mapPopupDeviceStyles as m
+};

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

@@ -0,0 +1,5 @@
+export declare const COMPONENT_TEST_ID = "M4LMapPopupDevice";
+export declare const COMPONET_KEY_COMPONENT = "M4LMapPopupDevice";
+export declare const LAT_LON_FIXED_DIGITS = 8;
+export declare const DELAY_REPORT_TIME = 1000;
+export declare const DELAY_REPORT_STATUS = 1000;

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

@@ -0,0 +1,8 @@
+const COMPONET_KEY_COMPONENT = "M4LMapPopupDevice";
+const LAT_LON_FIXED_DIGITS = 8;
+const DELAY_REPORT_TIME = 1e3;
+export {
+  COMPONET_KEY_COMPONENT as C,
+  DELAY_REPORT_TIME as D,
+  LAT_LON_FIXED_DIGITS as L
+};

package/components/maps/components/GpsMap/popups/MapPopupDevice/dictionary.d.ts

@@ -0,0 +1,16 @@
+/**
+ * TODO: Documentar
+ */
+export declare function getMapPopupDeviceComponentsDictionary(): string[];
+export declare const MAP_POPUP_GPS_DEVICE_DICCTIONARY: {
+    readonly LABEL_MAP_POPUP_MYGPS_ADDRESS: "map_popup_my_gps.label_address";
+    readonly LABEL_MAP_POPUP_MYGPS_LAST_REPORT: "map_popup_my_gps.label_last_report";
+    readonly LABEL_MAP_POPUP_MYGPS_STATUS: "map_popup_my_gps.label_status";
+    readonly LABEL_MAP_POPUP_MYGPS_TIME_IN_STATUS: "map_popup_my_gps.label_time_in_status";
+    readonly LABEL_MAP_POPUP_MYGPS_SPEED: "map_popup_my_gps.label_speed";
+    readonly LABEL_MAP_POPUP_MYGPS_COURSE: "map_popup_my_gps.label_course";
+    readonly LABEL_MAP_POPUP_MYGPS_LOCATION: "map_popup_my_gps.label_location";
+    readonly LABEL_MAP_POPUP_MYGPS_DRIVER: "map_popup_my_gps.label_driver";
+    readonly LABEL_MAP_POPUP_MYGPS_VIEW_MORE: "map_popup_my_gps.label_view_more";
+};
+export type TypeDictionary = typeof MAP_POPUP_GPS_DEVICE_DICCTIONARY;

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

@@ -0,0 +1,20 @@
+import { getDistanceToNowFormatterComponentsDictionary } from "@m4l/components";
+import { g as getCourseFormatterComponentsDictionary } from "../../../../../../formatters/CourseFormatter/dictionary.js";
+import { g as getDeviceStatusComponentsDictionary } from "../../../../../DeviceStatus/dictionary.js";
+const MAP_POPUP_GPS_DEVICE_DICCTIONARY_ID = "map_popup_my_gps";
+function getMapPopupDeviceComponentsDictionary() {
+  return [MAP_POPUP_GPS_DEVICE_DICCTIONARY_ID].concat(getDistanceToNowFormatterComponentsDictionary()).concat(getCourseFormatterComponentsDictionary()).concat(getDeviceStatusComponentsDictionary());
+}
+const MAP_POPUP_GPS_DEVICE_DICCTIONARY = {
+  LABEL_MAP_POPUP_MYGPS_ADDRESS: `${MAP_POPUP_GPS_DEVICE_DICCTIONARY_ID}.label_address`,
+  LABEL_MAP_POPUP_MYGPS_LAST_REPORT: `${MAP_POPUP_GPS_DEVICE_DICCTIONARY_ID}.label_last_report`,
+  LABEL_MAP_POPUP_MYGPS_STATUS: `${MAP_POPUP_GPS_DEVICE_DICCTIONARY_ID}.label_status`,
+  LABEL_MAP_POPUP_MYGPS_SPEED: `${MAP_POPUP_GPS_DEVICE_DICCTIONARY_ID}.label_speed`,
+  LABEL_MAP_POPUP_MYGPS_COURSE: `${MAP_POPUP_GPS_DEVICE_DICCTIONARY_ID}.label_course`,
+  LABEL_MAP_POPUP_MYGPS_LOCATION: `${MAP_POPUP_GPS_DEVICE_DICCTIONARY_ID}.label_location`,
+  LABEL_MAP_POPUP_MYGPS_VIEW_MORE: `${MAP_POPUP_GPS_DEVICE_DICCTIONARY_ID}.label_view_more`
+};
+export {
+  MAP_POPUP_GPS_DEVICE_DICCTIONARY as M,
+  getMapPopupDeviceComponentsDictionary as g
+};

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

@@ -0,0 +1,2 @@
+export * from './MapPopupDevice';
+export { getMapPopupDeviceComponentsDictionary } from './dictionary';

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

@@ -0,0 +1 @@
+

package/components/maps/components/GpsMap/popups/MapPopupDevice/slots/MapPopupDeviceSlots.d.ts

@@ -0,0 +1,33 @@
+export declare const PopupRootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-leaflet').PopupProps & import('react').RefAttributes<import('leaflet').Popup>, keyof import('react-leaflet').PopupProps | keyof import('react').RefAttributes<import('leaflet').Popup>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').MapPopupDeviceGpsOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const MapPopupDeviceRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').MapPopupDeviceGpsOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const HeaderStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').MapPopupDeviceGpsOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DeviceLabelStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../../../../DeviceLabel/types').DeviceProps, keyof import('../../../../../../DeviceLabel/types').DeviceProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').MapPopupDeviceGpsOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const ContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').MapPopupDeviceGpsOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PropertyValueStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components').PropertyValueProps, keyof import('@m4l/components').PropertyValueProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').MapPopupDeviceGpsOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const StatusAndTimeStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').MapPopupDeviceGpsOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const AddressStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps, keyof import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').MapPopupDeviceGpsOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const GroupAndViewMoreStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').MapPopupDeviceGpsOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const GroupStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').MapPopupDeviceGpsOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ViewMoreLinkStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps, keyof import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').MapPopupDeviceGpsOwnerState> & Record<string, unknown>;
+}, {}, {}>;

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

@@ -0,0 +1,63 @@
+import { styled } from "@mui/material/styles";
+import { C as COMPONET_KEY_COMPONENT } from "../constants.js";
+import { m as mapPopupDeviceStyles } from "../MapPopupDevice.styles.js";
+import { M as MapPopupDeviceSlots } from "./slots.js";
+import { Popup } from "react-leaflet";
+import { PropertyValue, Typography } from "@m4l/components";
+import { D as DeviceLabel } from "../../../../../../DeviceLabel/DeviceLabel.js";
+const PopupRootStyled = styled(Popup, {
+  name: COMPONET_KEY_COMPONENT,
+  slot: MapPopupDeviceSlots.leafletRoot
+})(mapPopupDeviceStyles?.leafletRoot);
+const MapPopupDeviceRootStyled = styled("div", {
+  name: COMPONET_KEY_COMPONENT,
+  slot: MapPopupDeviceSlots.root
+})(mapPopupDeviceStyles?.root);
+const HeaderStyled = styled("div", {
+  name: COMPONET_KEY_COMPONENT,
+  slot: MapPopupDeviceSlots.header
+})(mapPopupDeviceStyles?.header);
+const DeviceLabelStyled = styled(DeviceLabel, {
+  name: COMPONET_KEY_COMPONENT,
+  slot: MapPopupDeviceSlots.device
+})(mapPopupDeviceStyles?.device);
+const ContentStyled = styled("div", {
+  name: COMPONET_KEY_COMPONENT,
+  slot: MapPopupDeviceSlots.content
+})(mapPopupDeviceStyles?.content);
+const PropertyValueStyled = styled(PropertyValue, {
+  name: COMPONET_KEY_COMPONENT,
+  slot: MapPopupDeviceSlots.propertyValue
+})(mapPopupDeviceStyles?.propertyValue);
+const StatusAndTimeStyled = styled("div", {
+  name: COMPONET_KEY_COMPONENT,
+  slot: MapPopupDeviceSlots.statusAndTime
+})(mapPopupDeviceStyles?.statusAndTime);
+const AddressStyled = styled(Typography, {
+  name: COMPONET_KEY_COMPONENT,
+  slot: MapPopupDeviceSlots.address
+})(mapPopupDeviceStyles?.address);
+const GroupAndViewMoreStyled = styled("div", {
+  name: COMPONET_KEY_COMPONENT,
+  slot: MapPopupDeviceSlots.groupAndViewMore
+})(mapPopupDeviceStyles?.groupAndViewMore);
+styled("div", {
+  name: COMPONET_KEY_COMPONENT,
+  slot: MapPopupDeviceSlots.group
+})(mapPopupDeviceStyles?.group);
+const ViewMoreLinkStyled = styled(Typography, {
+  name: COMPONET_KEY_COMPONENT,
+  slot: MapPopupDeviceSlots.viewMore
+})(mapPopupDeviceStyles?.viewMore);
+export {
+  AddressStyled as A,
+  ContentStyled as C,
+  DeviceLabelStyled as D,
+  GroupAndViewMoreStyled as G,
+  HeaderStyled as H,
+  MapPopupDeviceRootStyled as M,
+  PopupRootStyled as P,
+  StatusAndTimeStyled as S,
+  ViewMoreLinkStyled as V,
+  PropertyValueStyled as a
+};

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

@@ -0,0 +1,13 @@
+export declare enum MapPopupDeviceSlots {
+    leafletRoot = "leafletRoot",
+    root = "root",
+    header = "header",
+    device = "device",
+    content = "content",
+    propertyValue = "propertyValue",
+    statusAndTime = "statusAndTime",
+    address = "address",
+    groupAndViewMore = "groupAndViewMore",
+    group = "group",
+    viewMore = "viewMore"
+}

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

@@ -0,0 +1,17 @@
+var MapPopupDeviceSlots = /* @__PURE__ */ ((MapPopupDeviceSlots2) => {
+  MapPopupDeviceSlots2["leafletRoot"] = "leafletRoot";
+  MapPopupDeviceSlots2["root"] = "root";
+  MapPopupDeviceSlots2["header"] = "header";
+  MapPopupDeviceSlots2["device"] = "device";
+  MapPopupDeviceSlots2["content"] = "content";
+  MapPopupDeviceSlots2["propertyValue"] = "propertyValue";
+  MapPopupDeviceSlots2["statusAndTime"] = "statusAndTime";
+  MapPopupDeviceSlots2["address"] = "address";
+  MapPopupDeviceSlots2["groupAndViewMore"] = "groupAndViewMore";
+  MapPopupDeviceSlots2["group"] = "group";
+  MapPopupDeviceSlots2["viewMore"] = "viewMore";
+  return MapPopupDeviceSlots2;
+})(MapPopupDeviceSlots || {});
+export {
+  MapPopupDeviceSlots as M
+};

package/components/maps/components/GpsMap/popups/MapPopupDevice/subcomponents/Content/GpsDeviceContent.d.ts

@@ -0,0 +1,6 @@
+import { MapPopupProps } from '../../../types';
+/**
+ * "GpsDeviceContent"
+ *
+ */
+export declare const GpsDeviceContent: (props: MapPopupProps) => import("react/jsx-runtime").JSX.Element;

package/components/maps/components/GpsMap/popups/MapPopupDevice/subcomponents/Content/GpsDeviceContent.js

@@ -0,0 +1,122 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { Chip, Icon, DistanceToNowFormatter } from "@m4l/components";
+import { C as ContentStyled, a as PropertyValueStyled, S as StatusAndTimeStyled, A as AddressStyled, G as GroupAndViewMoreStyled, V as ViewMoreLinkStyled } from "../../slots/MapPopupDeviceSlots.js";
+import { M as MAP_POPUP_GPS_DEVICE_DICCTIONARY } from "../../dictionary.js";
+import { D as DELAY_REPORT_TIME, L as LAT_LON_FIXED_DIGITS } from "../../constants.js";
+import { C as CourseFormatter } from "../../../../../../../../formatters/CourseFormatter/CourseFormatter.js";
+const GpsDeviceContent = (props) => {
+  const { properties } = props;
+  const { deviceData, statusLabel, statusPalletColor, reportTime, reportStatus, speed, iconKey } = properties;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const generalStatusIconUrl = `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/general/gps/i_common_general_gps_status.svg`;
+  const statusIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/device_status/assets/icons/${iconKey}.svg`;
+  const statusTimeIconUrl = `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/general/gps/i_common_general_gps_status_time.svg`;
+  const lastReportIconUrl = `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/general/gps/i_common_general_gps_report_time.svg`;
+  const speedIconUrl = `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/general/gps/i_common_general_gps_speed.svg`;
+  const courseIconUrl = `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/general/gps/i_common_general_gps_course.svg`;
+  const positionIconUrl = `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/general/gps/i_common_general_gps_position.svg`;
+  const course = deviceData?.current?.vpts?.vptGnss?.course;
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(ContentStyled, { ownerState: {}, children: [
+    /* @__PURE__ */ jsx(
+      PropertyValueStyled,
+      {
+        ownerState: {},
+        startAdornment: generalStatusIconUrl,
+        property: getLabel(MAP_POPUP_GPS_DEVICE_DICCTIONARY.LABEL_MAP_POPUP_MYGPS_STATUS),
+        propertyWidth: 120,
+        value: /* @__PURE__ */ jsxs(StatusAndTimeStyled, { ownerState: {}, children: [
+          /* @__PURE__ */ jsx(
+            Chip,
+            {
+              label: statusLabel,
+              opacity: true,
+              color: statusPalletColor,
+              startIcon: statusIconUrl
+            }
+          ),
+          /* @__PURE__ */ jsx(Icon, { src: statusTimeIconUrl, color: "info.main", tooltipContent: /* @__PURE__ */ jsx(
+            DistanceToNowFormatter,
+            {
+              presentationTime: "past",
+              date: reportStatus,
+              delay: DELAY_REPORT_TIME
+            }
+          ) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PropertyValueStyled,
+      {
+        ownerState: {},
+        startAdornment: lastReportIconUrl,
+        property: getLabel(MAP_POPUP_GPS_DEVICE_DICCTIONARY.LABEL_MAP_POPUP_MYGPS_LAST_REPORT),
+        propertyWidth: 120,
+        value: /* @__PURE__ */ jsx(
+          DistanceToNowFormatter,
+          {
+            presentationTime: "present",
+            date: reportTime,
+            delay: DELAY_REPORT_TIME
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PropertyValueStyled,
+      {
+        ownerState: {},
+        startAdornment: speedIconUrl,
+        property: getLabel(MAP_POPUP_GPS_DEVICE_DICCTIONARY.LABEL_MAP_POPUP_MYGPS_SPEED),
+        propertyWidth: 120,
+        value: `${speed} Km/h`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PropertyValueStyled,
+      {
+        ownerState: {},
+        startAdornment: courseIconUrl,
+        property: getLabel(MAP_POPUP_GPS_DEVICE_DICCTIONARY.LABEL_MAP_POPUP_MYGPS_COURSE),
+        propertyWidth: 120,
+        value: /* @__PURE__ */ jsx(
+          CourseFormatter,
+          {
+            course
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PropertyValueStyled,
+      {
+        ownerState: {},
+        startAdornment: positionIconUrl,
+        property: getLabel(MAP_POPUP_GPS_DEVICE_DICCTIONARY.LABEL_MAP_POPUP_MYGPS_LOCATION),
+        propertyWidth: 120,
+        value: `${Number(deviceData?.current?.vpts?.vptGnss?.lon).toFixed(
+          LAT_LON_FIXED_DIGITS
+        )},${Number(deviceData?.current?.vpts?.vptGnss?.lat).toFixed(
+          LAT_LON_FIXED_DIGITS
+        )}`
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      AddressStyled,
+      {
+        ownerState: {},
+        property: getLabel(MAP_POPUP_GPS_DEVICE_DICCTIONARY.LABEL_MAP_POPUP_MYGPS_ADDRESS),
+        children: [
+          `${deviceData?.current?.vpts?.vptGnss?.address}`,
+          " "
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(GroupAndViewMoreStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(ViewMoreLinkStyled, { ownerState: {}, children: getLabel(MAP_POPUP_GPS_DEVICE_DICCTIONARY.LABEL_MAP_POPUP_MYGPS_VIEW_MORE) }) })
+  ] });
+};
+export {
+  GpsDeviceContent as G
+};

package/components/maps/components/GpsMap/popups/MapPopupDevice/subcomponents/Header/GpsDeviceHeader.d.ts

@@ -0,0 +1,5 @@
+import { MapPopupProps } from '../../../types';
+/**
+ * "GpsDeviceHeader"
+ */
+export declare const GpsDeviceHeader: (props: MapPopupProps) => import("react/jsx-runtime").JSX.Element;

package/components/maps/components/GpsMap/popups/MapPopupDevice/subcomponents/Header/GpsDeviceHeader.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useMap } from "react-leaflet";
+import { useEnvironment } from "@m4l/core";
+import { IconButton } from "@m4l/components";
+import { H as HeaderStyled, D as DeviceLabelStyled } from "../../slots/MapPopupDeviceSlots.js";
+const GpsDeviceHeader = (props) => {
+  const { properties } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const closeIconUrl = `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/close.svg`;
+  const map = useMap();
+  const onClose = useCallback(() => {
+    map.closePopup();
+  }, [map]);
+  return /* @__PURE__ */ jsxs(HeaderStyled, { ownerState: {}, children: [
+    /* @__PURE__ */ jsx(DeviceLabelStyled, { ownerState: {}, withImage: true, deviceData: { ...properties?.deviceData } }),
+    /* @__PURE__ */ jsx(IconButton, { icon: closeIconUrl, onClick: onClose })
+  ] });
+};
+export {
+  GpsDeviceHeader as G
+};

package/components/maps/components/GpsMap/popups/MapPopupDevice/subcomponents/PropertyValue/index.d.ts

@@ -0,0 +1,5 @@
+import { GpsDevicePropertyValueProps } from './types';
+/**
+ * TODO: Documentar
+ */
+export declare const PropertyValue: (props: GpsDevicePropertyValueProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/maps/components/GpsMap/popups/MapPopupDevice/subcomponents/PropertyValue/types.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type GpsDevicePropertyValueProps = {
+    icon?: ReactNode;
+    property: string;
+    value: ReactNode;
+};

package/components/maps/components/GpsMap/popups/MapPopupDevice/types.d.ts

@@ -0,0 +1,10 @@
+import { COMPONET_KEY_COMPONENT } from './constants';
+import { MapPopupDeviceSlots } from './slots/slots';
+import { Theme } from '@mui/material/styles';
+import { M4LOverridesStyleRules } from '../../../../../../@types/augmentations';
+export type MapPopupDeviceGpsSlotsType = keyof typeof MapPopupDeviceSlots;
+export type MapPopupDeviceGpsOwnerState = {
+    bgColor: string;
+    color: string;
+};
+export type MapPopupDeviceGpsStyles = M4LOverridesStyleRules<MapPopupDeviceGpsSlotsType, typeof COMPONET_KEY_COMPONENT, Theme>;