@m4l/gclick 0.0.2

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/index.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { R as RHFormProviderStyled } from "./styles.js";
+import { useFormAddEdit, Stack, TabProvider } from "@m4l/components";
+import { M as MyActions } from "./subcomponents/MyActions/index.js";
+import { M as MyTabs } from "./subcomponents/MyTabs/index.js";
+import { f as formatDataEnpoint } from "./helpers.js";
+import { u as useValidation } from "./hooks/useValidation.js";
+import { u as useSubmit } from "./hooks/useSubmit.js";
+import { i as initialValues } from "./constants.js";
+import { a as ENDPOINT_GEOFENCE_GET } from "../constants.js";
+import { g as gpsToolsClasses } from "../../../../classes/index.js";
+import { u as useGpsMapToolsStore } from "../../../../hooks/useGpsMapToolsStore/index.js";
+function GeofenceAddEdit(props) {
+  const { geofenceId } = props;
+  const [finalInitalValues, omitCallEnpoint] = useGpsMapToolsStore((state) => {
+    if (geofenceId === void 0) {
+      return [initialValues, false];
+    }
+    const geofence = state.geofenceState.hashGeofences[geofenceId];
+    if (geofence?.geometry) {
+      const emulateResponse = {
+        data: {
+          type: geofence.type,
+          name: geofence.name,
+          id: geofence.id,
+          active: false,
+          geometry: geofence.geometry,
+          properties: geofence.properties,
+          countCrossingFeatures: geofence.countCrossingFeatures,
+          countInternalFeatures: geofence.countInternalFeatures,
+          createdAt: geofence.createdAt,
+          updatedAt: geofence.updatedAt,
+          timeMinInSeconds: geofence.timeMinInSeconds,
+          timeMinOutSeconds: geofence.timeMinOutSeconds,
+          alias: geofence.alias,
+          customerId: geofence.customerId
+        }
+      };
+      return [formatDataEnpoint(emulateResponse), true];
+    } else {
+      return [initialValues, false];
+    }
+  });
+  const { formValues, statusLoad } = useFormAddEdit({
+    objectId: geofenceId,
+    formatDataEnpoint,
+    initialValues: finalInitalValues,
+    endPoint: ENDPOINT_GEOFENCE_GET,
+    isRemote: false,
+    omitCallEnpoint
+  });
+  const { validationSchema } = useValidation();
+  const { onSubmit } = useSubmit({ objectId: geofenceId });
+  return /* @__PURE__ */ jsx(
+    RHFormProviderStyled,
+    {
+      statusLoad,
+      onSubmit,
+      values: formValues,
+      validationSchema,
+      className: gpsToolsClasses.gpsToolsGeofencesAddEdit,
+      children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "8px", children: [
+        /* @__PURE__ */ jsx(TabProvider, { initialValue: "general", children: /* @__PURE__ */ jsx(MyTabs, {}) }),
+        /* @__PURE__ */ jsx(MyActions, { ...props })
+      ] })
+    }
+  );
+}
+export {
+  GeofenceAddEdit as G
+};

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/styles.d.ts

@@ -0,0 +1 @@
+export declare const RHFormProviderStyled: import('@emotion/styled').StyledComponent<import('@m4l/components/src/components/hook-form/RHFormContext/types').FormProviderProps & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, {}, {}>;

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/styles.js

@@ -0,0 +1,8 @@
+import { styled } from "@mui/material/styles";
+import { RHFormProvider } from "@m4l/components";
+const RHFormProviderStyled = styled(RHFormProvider)`
+  
+`;
+export {
+  RHFormProviderStyled as R
+};

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/ConfigData/index.d.ts

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

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/ConfigData/index.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { PaperForm, RHFTextField } from "@m4l/components";
+import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../../../dictionary.js";
+import { M as MAP_GPSTOOLS_ICONS } from "../../../../../../icons.js";
+function ConfigData() {
+  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.CONFIG}`;
+  return /* @__PURE__ */ jsxs(PaperForm, { urlIcon, title: getLabel(MAP_GPSTOOLS_DICCTIONARY.PAPER_CONFIG), children: [
+    /* @__PURE__ */ jsx(
+      RHFTextField,
+      {
+        name: "alias",
+        disabled: false,
+        type: "text",
+        label: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_ALIAS}`)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RHFTextField,
+      {
+        name: "customerId",
+        disabled: false,
+        type: "text",
+        label: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_CUSTOMER_ID}`)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RHFTextField,
+      {
+        name: "timeMinInSeconds",
+        disabled: false,
+        type: "number",
+        label: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_TIME_MIN_IN_SECONDS}`)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RHFTextField,
+      {
+        name: "timeMinOutSeconds",
+        disabled: false,
+        type: "number",
+        label: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_TIME_MIN_OUT_SECONDS}`)
+      }
+    )
+  ] });
+}
+export {
+  ConfigData as C
+};

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/ConfigData/types.d.ts

@@ -0,0 +1,6 @@
+export interface FormConfigDataValues {
+    alias: string | null;
+    customerId: string | null;
+    timeMinInSeconds: number;
+    timeMinOutSeconds: number;
+}

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/ConfigData/validations.d.ts

@@ -0,0 +1,8 @@
+import { GetLabelType } from '@m4l/core';
+/**
+ * TODO: Documentar
+ */
+export declare function ConfigDataValidation(getLabel: GetLabelType): {
+    timeMinInSeconds: import('yup/lib/number').RequiredNumberSchema<number | null | undefined, import('yup/lib/types').AnyObject>;
+    timeMinOutSeconds: import('yup/lib/number').RequiredNumberSchema<number | null | undefined, import('yup/lib/types').AnyObject>;
+};

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/ConfigData/validations.js

@@ -0,0 +1,11 @@
+import * as Yup from "yup";
+import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../../../dictionary.js";
+function ConfigDataValidation(getLabel) {
+  return {
+    timeMinInSeconds: Yup.number().nullable().required(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_REQUIRED)).typeError(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_TYPE_NUMBER_ERROR)).min(0, getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_MIN_NUMBER_ERROR)),
+    timeMinOutSeconds: Yup.number().nullable().required(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_REQUIRED)).typeError(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_TYPE_NUMBER_ERROR)).min(0, getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_MIN_NUMBER_ERROR))
+  };
+}
+export {
+  ConfigDataValidation as C
+};

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/index.d.ts

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

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/index.js

@@ -0,0 +1,128 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { PaperForm, RHFTextField, Stack, RHFAutocomplete, IconButton } from "@m4l/components";
+import { u as useDrawing } from "../../hooks/useDrawing.js";
+import { u as useSumbitErrorsFocus } from "../../hooks/useSumbitErrorsFocus.js";
+import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../../../dictionary.js";
+import { M as MAP_GPSTOOLS_ICONS } from "../../../../../../icons.js";
+import { g as gpsToolsClasses } from "../../../../../../classes/index.js";
+function GeneralData() {
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { inEdition, handleDraw, handleFinish, geometrTypeIdCached } = useDrawing();
+  useSumbitErrorsFocus();
+  const urlIcon = `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GENERAL}`;
+  const geofencesTypes = useMemo(() => {
+    return [
+      {
+        id: "gt_circle",
+        name: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_GEOMETRY_CIRCLE),
+        url: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_TYPE_CIRCLE}`
+      },
+      {
+        id: "gt_polygon",
+        name: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_GEOMETRY_POLYGON),
+        url: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_TYPE_POLYGON}`
+      },
+      {
+        id: "gt_rectangle",
+        name: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_GEOMETRY_RECTANGLE),
+        url: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_TYPE_RECTANGLE}`
+      }
+    ];
+  }, [getLabel]);
+  return /* @__PURE__ */ jsxs(PaperForm, { urlIcon, title: getLabel(MAP_GPSTOOLS_DICCTIONARY.PAPER_GENERAL), children: [
+    /* @__PURE__ */ jsx(
+      RHFTextField,
+      {
+        name: "name",
+        disabled: false,
+        type: "text",
+        label: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_NAME}`)
+      }
+    ),
+    /* @__PURE__ */ jsxs(Stack, { direction: "column", spacing: 1, alignItems: "center", children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(
+          RHFAutocomplete,
+          {
+            type: "image",
+            name: "geofenceType",
+            autoComplete: "off",
+            options: geofencesTypes,
+            getOptionLabel: (option) => option.name,
+            isOptionEqualToValue: (option, value) => option.id === value.id,
+            getOptionUrlImage: (option) => option.url,
+            label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_GEOMETRY_TYPE)
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            className: gpsToolsClasses.gpsToolsGeofencesAddEditDrawFinishContainer,
+            direction: "row",
+            gap: 1,
+            alignItems: "center",
+            children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  src: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_DRAW}`,
+                  onClick: handleDraw,
+                  disabled: inEdition || !geometrTypeIdCached,
+                  tooltip: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_DRAW)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  src: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_FINISH}`,
+                  onClick: handleFinish,
+                  disabled: !inEdition,
+                  tooltip: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH)
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      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/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/types.d.ts

@@ -0,0 +1,7 @@
+import { GeofenceTypeItem } from '../../../../../../types';
+import { GeofenceGeometry } from '../../../model';
+export interface FormGeneralDataValues {
+    name: string;
+    geometry: GeofenceGeometry | null;
+    geofenceType: GeofenceTypeItem | null;
+}

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/validations.d.ts

@@ -0,0 +1,9 @@
+import { GetLabelType } from '@m4l/core';
+/**
+ * TODO: Documentar
+ */
+export declare function GeneralDataValidation(getLabel: GetLabelType): {
+    name: import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+    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>;
+};

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/validations.js

@@ -0,0 +1,12 @@
+import * as Yup from "yup";
+import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../../../dictionary.js";
+function GeneralDataValidation(getLabel) {
+  return {
+    name: Yup.string().required(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_REQUIRED)),
+    geometry: Yup.object().nullable().required(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_GEOMETRY_REQUIRED)),
+    geofenceType: Yup.object().nullable().required(getLabel(MAP_GPSTOOLS_DICCTIONARY.VALIDATION_FIELD_REQUIRED))
+  };
+}
+export {
+  GeneralDataValidation as G
+};

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/MyActions/index.d.ts

@@ -0,0 +1,5 @@
+import { MyActionsProps } from './types';
+/**
+ * TODO: Documentar
+ */
+export declare function MyActions(props: MyActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/MyActions/index.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useFormContext, useWatch, useFormState } from "react-hook-form";
+import { useModuleDictionary } from "@m4l/core";
+import { useModal, usePopupsStore, WindowConfirm, ActionsContainer, RHFHelperError, Button, ActionFormIntro } from "@m4l/components";
+import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../../../dictionary.js";
+import { u as useGpsMapToolsStore } from "../../../../../../hooks/useGpsMapToolsStore/index.js";
+function MyActions(props) {
+  const { geofenceId } = props;
+  const { control } = useFormContext();
+  const { getLabel } = useModuleDictionary();
+  const { openModal } = useModal();
+  const inEdition = useWatch({
+    control,
+    name: "inEdition"
+  });
+  const { isDirty } = useFormState({
+    control
+  });
+  const { close, show } = usePopupsStore((state) => state.popupActions);
+  const { addCheckedGeofence } = useGpsMapToolsStore((state) => state.geofenceActions);
+  const onClickCancelLocal = useCallback(() => {
+    if (isDirty) {
+      openModal({
+        window: /* @__PURE__ */ jsx(
+          WindowConfirm,
+          {
+            variant: "warning",
+            title: getLabel("common_actions.confirm_quit_title"),
+            msg: getLabel("common_actions.confirm_quit_msg"),
+            onClickIntro: onConfirmQuit
+          }
+        ),
+        variant: "warning"
+      });
+    } else {
+      onConfirmQuit();
+    }
+  }, [getLabel, isDirty, openModal]);
+  const onConfirmQuit = () => {
+    close("geofencesAddEdit");
+    if (geofenceId !== void 0) {
+      addCheckedGeofence(geofenceId);
+    }
+    show("gpsTools");
+  };
+  return /* @__PURE__ */ jsxs(ActionsContainer, { children: [
+    /* @__PURE__ */ jsx(RHFHelperError, { name: "geometry" }),
+    /* @__PURE__ */ jsx(Button, { onClick: onClickCancelLocal, disabled: inEdition, label: getLabel(MAP_GPSTOOLS_DICCTIONARY.ACTION_CANCEL) }),
+    /* @__PURE__ */ jsx(ActionFormIntro, { label: "", disabled: inEdition })
+  ] });
+}
+export {
+  MyActions as M
+};

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/MyActions/types.d.ts

@@ -0,0 +1,2 @@
+import { GeofenceAddEditProps } from '../../types';
+export type MyActionsProps = GeofenceAddEditProps;

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/MyTabs/index.d.ts

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

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/MyTabs/index.js

@@ -0,0 +1,76 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import clsx from "clsx";
+import { useTab, Tabs, Tab, Icon, TabContent } from "@m4l/components";
+import { G as GeneralData } from "../GeneralData/index.js";
+import { C as ConfigData } from "../ConfigData/index.js";
+import { S as StyleData } from "../StyleData/index.js";
+import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../../../dictionary.js";
+import { g as gpsToolsClasses } from "../../../../../../classes/index.js";
+import { M as MAP_GPSTOOLS_ICONS } from "../../../../../../icons.js";
+function MyTabs() {
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { currentTab, handleChange } = useTab();
+  const geofenceAddEditTabs = useMemo(() => {
+    return [
+      {
+        id: "general",
+        iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.DATA}`,
+        component: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(GeneralData, {}),
+          /* @__PURE__ */ jsx(ConfigData, {})
+        ] }),
+        label: getLabel(MAP_GPSTOOLS_DICCTIONARY.TAB_GENERAL_CONFIG_TOOLTIP),
+        className: gpsToolsClasses.toolGeofencesAddEditGeneral
+      },
+      {
+        id: "style",
+        iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.STYLE}`,
+        component: /* @__PURE__ */ jsx(StyleData, {}),
+        label: getLabel(MAP_GPSTOOLS_DICCTIONARY.TAB_STYLE_CONFIG_TOOLTIP),
+        className: gpsToolsClasses.toolGeofencesAddEditStyle
+      }
+    ];
+  }, [getLabel]);
+  return /* @__PURE__ */ jsxs("div", { className: gpsToolsClasses.gpsToolsGeofencesAddEditContent, children: [
+    /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        value: currentTab,
+        scrollButtons: "auto",
+        variant: "scrollable",
+        allowScrollButtonsMobile: true,
+        onChange: (_e, newValue) => handleChange(_e, newValue),
+        children: geofenceAddEditTabs.map((tab) => /* @__PURE__ */ jsx(
+          Tab,
+          {
+            value: tab.id,
+            icon: /* @__PURE__ */ jsx(Icon, { src: tab.iconUrl }),
+            label: ""
+          },
+          tab.id
+        ))
+      }
+    ),
+    geofenceAddEditTabs.map((tab) => {
+      const isMatched = tab.id === currentTab;
+      return /* @__PURE__ */ jsx(
+        TabContent,
+        {
+          className: clsx(
+            gpsToolsClasses.gpsToolsTabContent,
+            tab.className,
+            isMatched ? gpsToolsClasses.visible : gpsToolsClasses.hidden
+          ),
+          children: tab.component
+        },
+        tab.id
+      );
+    })
+  ] });
+}
+export {
+  MyTabs as M
+};

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/MyTabs/types.d.ts

@@ -0,0 +1,7 @@
+export interface TabAction {
+    id: string;
+    iconUrl: string;
+    component: React.ReactNode;
+    label: string;
+    className?: string;
+}

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/StyleData/index.d.ts

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

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/StyleData/index.js

@@ -0,0 +1,12 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+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, {})
+  ] });
+}
+export {
+  StyleData as S
+};

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/StyleData/subcomponents/FillData/index.d.ts

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

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/StyleData/subcomponents/FillData/index.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { PaperForm, PropertyValue, RHFColorPicker, RHFAutocomplete } 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";
+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: [
+    /* @__PURE__ */ jsx(
+      PropertyValue,
+      {
+        property: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_COLOR}`),
+        isForm: true,
+        propertyWidth: 150,
+        value: /* @__PURE__ */ jsx(RHFColorPicker, { name: "properties.fillColor" })
+      },
+      "properties.fillColor"
+    ),
+    /* @__PURE__ */ jsx(
+      PropertyValue,
+      {
+        property: getLabel(`${MAP_GPSTOOLS_DICCTIONARY.LABEL_OPACITY}`),
+        isForm: true,
+        propertyWidth: 150,
+        value: /* @__PURE__ */ jsx(
+          RHFAutocomplete,
+          {
+            type: "text",
+            name: "properties.fillOpacity",
+            autoComplete: "off",
+            options: STYLE_OPACITIES,
+            getOptionLabel: (option) => option.label,
+            isOptionEqualToValue: (option, value) => option.value === value.value
+          }
+        )
+      },
+      "properties.fillOpacity"
+    )
+  ] });
+}
+export {
+  FillData as F
+};

package/components/maps/components/GpsMapTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/StyleData/subcomponents/StrokeData/index.d.ts

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