@m4l/gclick 0.2.0 → 0.2.3-beta.1

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/GeneralData.js

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useModuleDictionary } from "@m4l/core";
+import { PaperForm, RHFTextField, Stack, RHFSelect, Button, RHFHelperError } from "@m4l/components";
+import { u as useDrawing } from "../../hooks/useDrawing.js";
+import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../../../dictionary.js";
+import { u as useGeneral } from "./hooks/useGeneral.js";
+function GeneralData() {
+  const { getLabel } = useModuleDictionary();
+  const { inEdition, handleDraw, handleFinish, geometrTypeIdCached } = useDrawing();
+  const { urlIcon, geofencesTypes } = useGeneral();
+  return /* @__PURE__ */ jsxs(PaperForm, { urlIcon, title: getLabel(MAP_GPSTOOLS_DICCTIONARY.PAPER_GENERAL), variant: "text", isForm: true, children: [
+    /* @__PURE__ */ jsx(
+      RHFTextField,
+      {
+        name: "name",
+        type: "text",
+        label: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_NAME}`)
+      }
+    ),
+    /* @__PURE__ */ jsxs(Stack, { direction: "column", spacing: 1, alignItems: "flex-start", children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(
+          RHFSelect,
+          {
+            name: "geofenceTypeId",
+            options: geofencesTypes
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: inEdition ? handleFinish : handleDraw,
+            disabled: !geometrTypeIdCached,
+            label: inEdition ? getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH) : getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_DRAW)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(RHFHelperError, { name: "geometry" }, "geometry"),
+      /* @__PURE__ */ jsx(RHFHelperError, { name: "inEdition" }, "inEdition"),
+      geometrTypeIdCached && geometrTypeIdCached === "gt_circle" && // <HelperText variant='info' message={'undefined'} />
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(
+          RHFTextField,
+          {
+            name: "properties.radius",
+            label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_RADIUS),
+            autoComplete: "off",
+            disabled: true,
+            size: "small"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          RHFTextField,
+          {
+            name: "lat",
+            label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_LAT),
+            autoComplete: "off",
+            disabled: true,
+            size: "small"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          RHFTextField,
+          {
+            name: "lng",
+            label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_LON),
+            autoComplete: "off",
+            disabled: true,
+            size: "small"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  GeneralData as G
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/hooks/useGeneral.d.ts

@@ -0,0 +1,8 @@
+import { GeofenceTypeItem } from '../../../types';
+/**
+ * TODO: Documentar
+ */
+export declare function useGeneral(): {
+    geofencesTypes: GeofenceTypeItem[];
+    urlIcon: string;
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/hooks/useGeneral.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { Icon } from "@m4l/components";
+import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../../../../dictionary.js";
+import { M as MAP_GPSTOOLS_ICONS } from "../../../../../../../icons.js";
+import { G as GPS_TOOLS_COMPONENT_PATH_ID } from "../../../../../../../constants.js";
+function useGeneral() {
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES_GENERAL}`;
+  const geofencesTypes = useMemo(() => {
+    return [
+      {
+        id: "gt_circle",
+        label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_GEOMETRY_CIRCLE),
+        startAdornment: /* @__PURE__ */ jsx(Icon, { src: `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES_TYPE_CIRCLE}` })
+      },
+      {
+        id: "gt_polygon",
+        label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_GEOMETRY_POLYGON),
+        startAdornment: /* @__PURE__ */ jsx(Icon, { src: `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES_TYPE_POLYGON}` })
+      },
+      {
+        id: "gt_multipolygon",
+        label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_GEOMETRY_MULTIPOLYGON),
+        startAdornment: /* @__PURE__ */ jsx(Icon, { src: `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES_TYPE_MULTIPOLYGON}` })
+      },
+      {
+        id: "gt_rectangle",
+        label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_GEOMETRY_RECTANGLE),
+        startAdornment: /* @__PURE__ */ jsx(Icon, { src: `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES_TYPE_RECTANGLE}` })
+      }
+    ];
+  }, [getLabel]);
+  return {
+    geofencesTypes,
+    urlIcon
+  };
+}
+export {
+  useGeneral as u
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/types.d.ts

@@ -0,0 +1,6 @@
+import { GeofenceGeometry, GeofenceTypeId } from '../../../../model';
+export interface FormGeneralDataValues {
+    name: string;
+    geometry: GeofenceGeometry | null;
+    geofenceTypeId: GeofenceTypeId | null;
+}

package/components/maps/components/GpsMapTools/subcomponents/{TabsGpsTools → GeofencesTool}/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/validations.d.ts

@@ -1,9 +1,11 @@
 import { GetLabelType } from '@m4l/core';
+import * as Yup from 'yup';
 /**
  * TODO: Documentar
  */
 export declare function GeneralDataValidation(getLabel: GetLabelType): {
     name: import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+    inEdition: Yup.BooleanSchema<boolean | undefined, import('yup/lib/types').AnyObject, boolean | undefined>;
     geometry: import('yup/lib/object').RequiredObjectSchema<import('yup/lib/object').ObjectShape, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').ObjectShape> | null>;
-    geofenceType: import('yup/lib/object').RequiredObjectSchema<import('yup/lib/object').ObjectShape, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').ObjectShape> | null>;
+    geofenceTypeId: import('yup/lib/string').RequiredStringSchema<string | null | undefined, import('yup/lib/types').AnyObject>;
 };

package/components/maps/components/GpsMapTools/subcomponents/{TabsGpsTools → GeofencesTool}/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/validations.js

@@ -3,8 +3,13 @@ import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../../../dictionary.js";
 function GeneralDataValidation(getLabel) {
   return {
     name: Yup.string().required(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_REQUIRED)),
+    inEdition: Yup.boolean().test(
+      "is-in-edition",
+      getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_IS_IN_EDITION),
+      (value) => !(value === true)
+    ),
     geometry: Yup.object().nullable().required(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_GEOMETRY_REQUIRED)),
-    geofenceType: Yup.object().nullable().required(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_REQUIRED))
+    geofenceTypeId: Yup.string().nullable().required(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_REQUIRED))
   };
 }
 export {

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/MyActionFormCancel/MyActionFormCancel.d.ts

@@ -0,0 +1,5 @@
+import { MyActionsProps } from './types';
+/**
+ * Actions del formulario de edición de geocerca
+ */
+export declare function MyActionFormCancel(props: MyActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/MyActionFormCancel/MyActionFormCancel.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { usePopupsStore, StepperCancelButton } from "@m4l/components";
+import { u as useGpsMapToolsStore } from "../../../../../../hooks/useGpsMapToolsStore/index.js";
+import { c as GEOFENCES_TOOL_LIST_POPUP_ID } from "../../../../constants.js";
+function MyActionFormCancel(props) {
+  const { geofenceId } = props;
+  const { show } = usePopupsStore((state) => state.popupActions);
+  const { addCheckedGeofence } = useGpsMapToolsStore((state) => state.geofenceActions);
+  const onClose = () => {
+    if (geofenceId !== void 0) {
+      addCheckedGeofence(geofenceId);
+    }
+    show(GEOFENCES_TOOL_LIST_POPUP_ID);
+  };
+  return /* @__PURE__ */ jsx(StepperCancelButton, { onClose, linkToCloseWindow: true });
+}
+export {
+  MyActionFormCancel as M
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/StyleData/constants.d.ts

@@ -0,0 +1,9 @@
+import { StyleOpacity, StyleWheight } from '../../types';
+export declare const FILL_COLOR_DEFAULT = "#3D8CDD";
+export declare const FILL_OPACITY_DEFAULT = 0.2;
+export declare const STROKE_COLOR_DEFAULT = "#7D0B90";
+export declare const STROKE_OPACITY_DEFAULT = 0.4;
+export declare const STROKE_WHEIGTH_DEFAULT = 2;
+export declare const STROKE_DASH_ARRAY_DEFAULT = "solid";
+export declare const STYLE_OPACITIES: StyleOpacity[];
+export declare const STYLE_WHEIGHTS: StyleWheight[];

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/StyleData/constants.js

@@ -0,0 +1,64 @@
+import { M as MAP_GPSTOOLS_ICONS } from "../../../../../../icons.js";
+const FILL_COLOR_DEFAULT = "#3D8CDD";
+const FILL_OPACITY_DEFAULT = 0.2;
+const STROKE_COLOR_DEFAULT = "#7D0B90";
+const STROKE_OPACITY_DEFAULT = 0.4;
+const STROKE_WHEIGTH_DEFAULT = 2;
+const STROKE_DASH_ARRAY_DEFAULT = "solid";
+const STYLE_OPACITIES = [
+  {
+    id: 0,
+    label: "0%"
+  },
+  {
+    id: 0.1,
+    label: "10%"
+  },
+  {
+    id: 0.2,
+    label: "20%"
+  },
+  {
+    id: 0.3,
+    label: "30%"
+  },
+  {
+    id: 0.4,
+    label: "40%"
+  },
+  {
+    id: 0.5,
+    label: "50%"
+  },
+  {
+    id: 1,
+    label: "100%"
+  }
+];
+const STYLE_WHEIGHTS = [
+  {
+    id: 1,
+    label: "1px",
+    iconId: MAP_GPSTOOLS_ICONS.GEOFENCES_STROKE_WEIGHT_1
+  },
+  {
+    id: 2,
+    label: "2px",
+    iconId: MAP_GPSTOOLS_ICONS.GEOFENCES_STROKE_WEIGHT_2
+  },
+  {
+    id: 4,
+    label: "4px",
+    iconId: MAP_GPSTOOLS_ICONS.GEOFENCES_STROKE_WEIGHT_4
+  }
+];
+export {
+  FILL_OPACITY_DEFAULT as F,
+  STROKE_DASH_ARRAY_DEFAULT as S,
+  STROKE_WHEIGTH_DEFAULT as a,
+  STROKE_OPACITY_DEFAULT as b,
+  STROKE_COLOR_DEFAULT as c,
+  FILL_COLOR_DEFAULT as d,
+  STYLE_OPACITIES as e,
+  STYLE_WHEIGHTS as f
+};

package/components/maps/components/GpsMapTools/subcomponents/{TabsGpsTools → GeofencesTool}/subcomponents/GeofenceAddEdit/subcomponents/StyleData/index.js

@@ -3,8 +3,8 @@ import { F as FillData } from "./subcomponents/FillData/index.js";
 import { S as StrokeData } from "./subcomponents/StrokeData/index.js";
 function StyleData() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(StrokeData, {}),
-    /* @__PURE__ */ jsx(FillData, {})
+    /* @__PURE__ */ jsx(FillData, {}),
+    /* @__PURE__ */ jsx(StrokeData, {})
   ] });
 }
 export {

package/components/maps/components/GpsMapTools/subcomponents/{TabsGpsTools → GeofencesTool}/subcomponents/GeofenceAddEdit/subcomponents/StyleData/subcomponents/FillData/index.js

@@ -1,14 +1,15 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { PaperForm, PropertyValue, RHFColorPicker, RHFAutocomplete } from "@m4l/components";
+import { PaperForm, PropertyValue, RHFColorPicker, RHFSelect } from "@m4l/components";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../../../../../dictionary.js";
 import { M as MAP_GPSTOOLS_ICONS } from "../../../../../../../../icons.js";
-import { S as STYLE_OPACITIES } from "../../../../../../../../constants.js";
+import { G as GPS_TOOLS_COMPONENT_PATH_ID } from "../../../../../../../../constants.js";
+import { e as STYLE_OPACITIES } from "../../constants.js";
 function FillData() {
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
-  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.FILL}`;
-  return /* @__PURE__ */ jsxs(PaperForm, { urlIcon, title: getLabel(MAP_GPSTOOLS_DICCTIONARY.PAPER_FILL), children: [
+  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES_FILL}`;
+  return /* @__PURE__ */ jsxs(PaperForm, { urlIcon, title: getLabel(MAP_GPSTOOLS_DICCTIONARY.PAPER_FILL), isForm: true, variant: "text", children: [
     /* @__PURE__ */ jsx(
       PropertyValue,
       {
@@ -26,14 +27,10 @@ function FillData() {
         isForm: true,
         propertyWidth: 150,
         value: /* @__PURE__ */ jsx(
-          RHFAutocomplete,
+          RHFSelect,
           {
-            type: "text",
             name: "properties.fillOpacity",
-            autoComplete: "off",
-            options: STYLE_OPACITIES,
-            getOptionLabel: (option) => option.label,
-            isOptionEqualToValue: (option, value) => option.value === value.value
+            options: STYLE_OPACITIES
           }
         )
       },

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/StyleData/subcomponents/StrokeData/hooks/useStrokePatternOptions.d.ts

@@ -0,0 +1,11 @@
+/**
+ * TODO: Documentar
+ */
+export declare function useStrokePatternOptions(): {
+    label: string;
+    startAdornment: import("react/jsx-runtime").JSX.Element;
+    id: string;
+    dictionaryId: string;
+    iconId: string;
+    style: string;
+}[];

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/StyleData/subcomponents/StrokeData/hooks/useStrokePatternOptions.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { Icon } from "@m4l/components";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { G as GPS_TOOLS_COMPONENT_PATH_ID } from "../../../../../../../../../constants.js";
+import { useMemo } from "react";
+import { S as STYLE_PATTERNS } from "../../../../../../../constants.js";
+function useStrokePatternOptions() {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const styleWeightsOptions = useMemo(() => STYLE_PATTERNS.map((item) => ({
+    ...item,
+    label: getLabel(item.dictionaryId),
+    startAdornment: /* @__PURE__ */ jsx(Icon, { src: `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${item.iconId}` })
+  })), [getLabel, host_static_assets, environment_assets]);
+  return styleWeightsOptions;
+}
+export {
+  useStrokePatternOptions as u
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/StyleData/subcomponents/StrokeData/hooks/useStrokeWeightsOptions.d.ts

@@ -0,0 +1,9 @@
+/**
+ * TODO: Documentar
+ */
+export declare function useStrokeWeightsOptions(): {
+    startAdornment: import("react/jsx-runtime").JSX.Element;
+    id: number;
+    label: string;
+    iconId: string;
+}[];

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/StyleData/subcomponents/StrokeData/hooks/useStrokeWeightsOptions.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Icon } from "@m4l/components";
+import { useEnvironment } from "@m4l/core";
+import { G as GPS_TOOLS_COMPONENT_PATH_ID } from "../../../../../../../../../constants.js";
+import { f as STYLE_WHEIGHTS } from "../../../constants.js";
+import { useMemo } from "react";
+function useStrokeWeightsOptions() {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const styleWeightsOptions = useMemo(() => STYLE_WHEIGHTS.map((item) => ({
+    ...item,
+    startAdornment: /* @__PURE__ */ jsx(Icon, { src: `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${item.iconId}` })
+  })), [host_static_assets, environment_assets]);
+  return styleWeightsOptions;
+}
+export {
+  useStrokeWeightsOptions as u
+};

package/components/maps/components/GpsMapTools/subcomponents/{TabsGpsTools → GeofencesTool}/subcomponents/GeofenceAddEdit/subcomponents/StyleData/subcomponents/StrokeData/index.js

@@ -1,14 +1,19 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { PaperForm, PropertyValue, RHFColorPicker, RHFAutocomplete } from "@m4l/components";
+import { PaperForm, PropertyValue, RHFColorPicker, RHFSelect } from "@m4l/components";
 import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../../../../../dictionary.js";
 import { M as MAP_GPSTOOLS_ICONS } from "../../../../../../../../icons.js";
-import { S as STYLE_OPACITIES, a as STYLE_WHEIGHTS, b as STYLE_PATTERNS } from "../../../../../../../../constants.js";
+import { G as GPS_TOOLS_COMPONENT_PATH_ID } from "../../../../../../../../constants.js";
+import { u as useStrokeWeightsOptions } from "./hooks/useStrokeWeightsOptions.js";
+import { u as useStrokePatternOptions } from "./hooks/useStrokePatternOptions.js";
+import { e as STYLE_OPACITIES } from "../../constants.js";
 function StrokeData() {
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
-  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.STROKE}`;
-  return /* @__PURE__ */ jsxs(PaperForm, { urlIcon, title: getLabel(MAP_GPSTOOLS_DICCTIONARY.PAPER_STROKE), children: [
+  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES_STROKE}`;
+  const styleWeightsOptions = useStrokeWeightsOptions();
+  const stylePatternOptions = useStrokePatternOptions();
+  return /* @__PURE__ */ jsxs(PaperForm, { urlIcon, title: getLabel(MAP_GPSTOOLS_DICCTIONARY.PAPER_STROKE), isForm: true, variant: "text", children: [
     /* @__PURE__ */ jsx(
       PropertyValue,
       {
@@ -26,14 +31,10 @@ function StrokeData() {
         isForm: true,
         propertyWidth: 150,
         value: /* @__PURE__ */ jsx(
-          RHFAutocomplete,
+          RHFSelect,
           {
-            type: "text",
             name: "properties.strokeOpacity",
-            autoComplete: "off",
-            options: STYLE_OPACITIES,
-            getOptionLabel: (option) => option.label,
-            isOptionEqualToValue: (option, value) => option.value === value.value
+            options: STYLE_OPACITIES
           }
         )
       },
@@ -46,14 +47,10 @@ function StrokeData() {
         isForm: true,
         propertyWidth: 150,
         value: /* @__PURE__ */ jsx(
-          RHFAutocomplete,
+          RHFSelect,
           {
-            type: "text",
             name: "properties.strokeWeight",
-            autoComplete: "off",
-            options: STYLE_WHEIGHTS,
-            getOptionLabel: (option) => option.label,
-            isOptionEqualToValue: (option, value) => option.value === value.value
+            options: styleWeightsOptions
           }
         )
       },
@@ -66,14 +63,10 @@ function StrokeData() {
         isForm: true,
         propertyWidth: 150,
         value: /* @__PURE__ */ jsx(
-          RHFAutocomplete,
+          RHFSelect,
           {
-            type: "text",
             name: "properties.strokeDashArray",
-            autoComplete: "off",
-            options: STYLE_PATTERNS,
-            getOptionLabel: (option) => option.label,
-            isOptionEqualToValue: (option, value) => option.value === value.value
+            options: stylePatternOptions
           }
         )
       },

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/StyleData/types.d.ts

@@ -0,0 +1,9 @@
+import { Maybe } from '@m4l/core';
+export interface FormStyleDataValues {
+    strokeColor?: string;
+    strokeOpacity?: Maybe<number>;
+    strokeWeight?: Maybe<number>;
+    strokeDashArray?: Maybe<string>;
+    fillColor?: string;
+    fillOpacity?: Maybe<number>;
+}

package/components/maps/components/GpsMapTools/subcomponents/{TabsGpsTools → GeofencesTool}/subcomponents/GeofenceAddEdit/types.d.ts

@@ -1,8 +1,21 @@
-import { StyleOpacity, StyleDashArray, StyleWheight } from '../../../../types';
-import { GeofenceGetModel } from '../model';
+import { GeofenceGetModel, GeofenceStyleProperties, GeofenceTypeId } from '../../model';
 import { FormConfigDataValues } from './subcomponents/ConfigData/types';
 import { FormGeneralDataValues } from './subcomponents/GeneralData/types';
 import { FormStyleDataValues } from './subcomponents/StyleData/types';
+export interface GeofenceTypeItem {
+    id: GeofenceTypeId;
+    label: string;
+    startAdornment: React.ReactNode;
+}
+export interface StyleOpacity {
+    id: number;
+    label: string;
+}
+export interface StyleWheight {
+    id: number;
+    label: string;
+    iconId: string;
+}
 export type ResponseGet = {
     data: GeofenceGetModel;
 };
@@ -10,15 +23,8 @@ export type FormAddEditValues = FormGeneralDataValues & FormConfigDataValues & F
     inEdition: boolean;
     lat?: number | null;
     lng?: number | null;
-    properties: {
-        radius?: number | null;
-        strokeColor: string;
-        strokeOpacity: StyleOpacity;
-        strokeWeight: StyleWheight;
-        strokeDashArray: StyleDashArray;
-        fillColor: string;
-        fillOpacity: StyleOpacity;
-    };
+    properties: GeofenceStyleProperties;
+    createdAt?: string;
 };
 export interface GeofenceAddEditProps {
     geofenceId?: number;

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceFeatureRender/GeofenceFeatureRender.d.ts

@@ -0,0 +1,5 @@
+import { ComponentRenderPropFeature } from '../../../../../GpsMap/contexts/MapContext';
+/**
+ * "GeofenceFeatureRender" es la función encargada de renderizada las geocercas
+ */
+export declare const GeofenceFeatureRender: ComponentRenderPropFeature;