@m4l/components 9.1.5 → 9.1.6

package/components/Icon/types.d.ts

@@ -8,7 +8,7 @@ import { TooltipProps } from '../mui_extended';
 /**
  * Define la lista de posibles colores que se pueden aplicar al componente icono.
  */
-export type IconColors = 'primary.main' | 'text.primary' | 'primary.contrastText' | 'info.main' | 'success.main' | 'error.main' | 'warning.main';
+export type IconColors = 'primary.main' | 'text.primary' | 'primary.contrastText' | 'info.main' | 'success.main' | 'error.main' | 'warning.main' | string;
 export interface IconProps extends Pick<TooltipProps, 'placement'> {
     /**
      * URL o ruta de la imagen que se va a mostrar.

package/components/LoadingError/LoadingError.d.ts

@@ -10,8 +10,13 @@ import { AreasLoadingErrorProps } from './types';
  * @param {string} props.introMessage -  Es una cadena de texto que proporciona un mensaje introductorio adicional. Este mensaje se mostrará en el componente antes de mostrar el título, la descripción y la recomendación del error.
  * @param {string} props.errorIcon - Es una cadena de texto que representa la ruta o el identificador del ícono que se mostrará junto al mensaje de error.
  * @returns {JSX.Element} Elemento JSX que representa el componente.
+ * @createdAt 2024-11-06 09:00:05 - automatic
  */
 /**
  * TODO: Documentar
+ * @author SebastianM - automatic
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * @updatedAt 2024-11-06 09:00:05 - automatic
+ * @updatedUser SebastianM - automatic
  */
 export declare const LoadingError: (props: AreasLoadingErrorProps) => import("react/jsx-runtime").JSX.Element;

package/components/LoadingError/LoadingError.js

@@ -42,7 +42,13 @@ const LoadingError = (props) => {
         children: recommendation ? recommendation : getLabel("loading_error.label_error_recommendation")
       }
     ),
-    /* @__PURE__ */ jsx(Button, { onClick: action, children: introMessage ? introMessage : getLabel("loading_error.label_error_intro") })
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: action,
+        label: introMessage ? introMessage : getLabel("loading_error.label_error_intro")
+      }
+    )
   ] }) });
 };
 export {

package/components/PDFViewer/PDFViewer.d.ts

@@ -1,5 +1,9 @@
 import { PDFViewerPros } from './types';
 /**
  * TODO: Documentar
+ * @author SebastianM - automatic
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * @updatedAt 2024-11-06 09:00:05 - automatic
+ * @updatedUser SebastianM - automatic
  */
 export declare const PDFViewer: (props: PDFViewerPros) => import("react/jsx-runtime").JSX.Element;

package/components/PDFViewer/PDFViewer.js

@@ -22,7 +22,7 @@ const PDFViewer = (props) => {
   const classes = pdfviewerUtilityClasses();
   return /* @__PURE__ */ jsxs(PDFVeiwerRoot, { className: classes.root, children: [
     /* @__PURE__ */ jsx("embed", { src: pdfUrl, type: "application/pdf", width: "100%", height: "100%" }),
-    /* @__PURE__ */ jsx(Button, { onClick: handleDownload, variant: "contained", children: "Descargar PDF" })
+    /* @__PURE__ */ jsx(Button, { onClick: handleDownload, variant: "contained", label: "Descargar PDF" })
   ] });
 };
 export {

package/components/ToastContainer/ToastContainer.stories.d.ts

@@ -37,6 +37,10 @@ import { ToastContainer } from './ToastContainer';
  * }
  *
  * ```
+ * @author SebastianM - automatic
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * @updatedAt 2024-11-06 09:00:05 - automatic
+ * @updatedUser SebastianM - automatic
  */
 declare const meta: Meta<typeof ToastContainer>;
 export default meta;

package/components/areas/components/AreasAdmin/subcomponents/AreaChip/index.d.ts

@@ -1,13 +1,55 @@
 import { AreaChipProps } from './types';
 /**
+ * <<<<<<< HEAD
  * Componente de chip de área.
+ * <<<<<<< HEAD
  * @createdAt 2024-11-01 12:34:48 - automatic
+ * =======
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * >>>>>>> 2cb88276 (refactor(PGK-552): refactor button)
+ * =======
+ * AreaChip component for rendering a chip with area details.
+ *
+ * Props:
+ * - areaId: string - The ID of the area.
+ * - selected: boolean - Indicates if the chip is selected.
+ * - disabled: boolean - Indicates if the chip is disabled.
+ * - setAnchorMenuAreas: (element: HTMLElement) => void - Function to set the anchor element for the menu.
+ *
+ * Constants:
+ * - host_static_assets: string - The host for static assets.
+ * - environment_assets: string - The environment-specific assets.
+ * - deleteArea: (areaId: string) => void - Function to delete an area.
+ * - selectArea: (areaId: string) => void - Function to select an area.
+ * - editArea: (areaId: string, data: any) => void - Function to edit an area.
+ * - setFocus: (focus: boolean) => void - Function to set focus.
+ * - areaName: string - The name of the area.
+ * - listAreas: string[] - List of area IDs.
+ * - open: boolean - State to control the open/close state of the popover.
+ * - getLabel: (key: string) => string - Function to get a label from the dictionary.
+ * - isDesktop: boolean - Indicates if the current view is desktop.
+ * - anchorRef: React.RefObject<null> - Reference to the anchor element.
+ * - theme: Theme - The current theme.
+ * - initialValues: { inputEditArea: string } - Initial values for the form.
+ * - validationSchema: Yup.ObjectSchema - Validation schema for the form.
+ * - rippleRef: React.RefObject<any> - Reference to the ripple effect.
+ * @createdAt 2024-11-06 11:07:59 - automatic
+ * >>>>>>> 32caab70 (refactor(PGK-552): resolve TODO documentar and styles to slots)
  */
 /**
- * TODO: Documentar
+ * Propiedades del componente de chip de área.
  * @author SebastianM - automatic
+ * <<<<<<< HEAD
+ * <<<<<<< HEAD
  * @createdAt 2024-11-01 12:34:48 - automatic
  * @updatedAt 2024-11-01 12:34:49 - automatic
+ * =======
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * @updatedAt 2024-11-06 10:39:53 - automatic
+ * =======
+ * @createdAt 2024-11-06 11:07:59 - automatic
+ * @updatedAt 2024-11-06 11:07:59 - automatic
+ * >>>>>>> 32caab70 (refactor(PGK-552): resolve TODO documentar and styles to slots)
  * @updatedUser SebastianM - automatic
  */
 export declare const AreaChip: {

package/components/areas/components/AreasAdmin/subcomponents/AreaChip/index.js

@@ -17,9 +17,9 @@ import { R as RHFormProvider } from "../../../../../hook-form/RHFormContext/inde
 import { T as Typography } from "../../../../../mui_extended/Typography/Typography.js";
 import { R as RHFTextField } from "../../../../../hook-form/RHFTextField/RHFTextField.js";
 import { A as ActionsContainer } from "../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
-import { A as ActionCancel } from "../../../../../CommonActions/components/ActionCancel/index.js";
-import { A as ActionIntro } from "../../../../../CommonActions/components/ActionIntro/index.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
+import { A as ActionCancel } from "../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
+import { A as ActionIntro } from "../../../../../CommonActions/components/ActionIntro/ActionIntro.js";
 const AreaChip = (props) => {
   const { areaId, selected, disabled, setAnchorMenuAreas } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -190,11 +190,10 @@ const AreaChip = (props) => {
                           setOpen(false);
                           setFocus(false);
                         },
-                        variant: "outlined",
-                        skeletonWidth: "100%"
+                        variant: "outlined"
                       }
                     ),
-                    /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "100%" })
+                    /* @__PURE__ */ jsx(ActionIntro, {})
                   ] })
                 ]
               }

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/index.d.ts

@@ -1,4 +1,8 @@
 /**
  * TODO: Documentar
+ * @author SebastianM - automatic
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * @updatedAt 2024-11-06 17:18:27 - automatic
+ * @updatedUser SebastianM - automatic
  */
 export declare const AreaChipMobile: () => import("react/jsx-runtime").JSX.Element;

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/index.js

@@ -10,7 +10,6 @@ import { useTheme } from "@mui/material";
 import { C as ChipMobile } from "./subcomponents/ChipMobile/ChipMobile.js";
 import { M as MenuActions } from "../../../../../mui_extended/MenuActions/MenuActions.js";
 import { B as Button } from "../../../../../mui_extended/Button/Button.js";
-import { I as Icon } from "../../../../../Icon/Icon.js";
 const AreaChipMobile = () => {
   const areas = useAreasStore(
     (state) => state.areasIds.map((a) => ({ id: a, name: state.hashAreas[a].name })),
@@ -31,6 +30,10 @@ const AreaChipMobile = () => {
         urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.LAYERS}`,
         /**
          * OnClick
+         * @author SebastianM - automatic
+         * @createdAt 2024-11-06 09:00:05 - automatic
+         * @updatedAt 2024-11-06 17:18:27 - automatic
+         * @updatedUser SebastianM - automatic
          */
         onClick: () => {
           selectArea(area.id);
@@ -79,13 +82,8 @@ const AreaChipMobile = () => {
               setAnchorMenuAreas(null);
             },
             variant: "outlined",
-            startIcon: /* @__PURE__ */ jsx(
-              Icon,
-              {
-                src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`
-              }
-            ),
-            children: getLabel(getAreasDictionary(AREAS_DICCTIONARY.area_add_new))
+            startIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`,
+            label: getLabel(getAreasDictionary(AREAS_DICCTIONARY.area_add_new))
           }
         )
       }

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/ChipMobile/ChipMobile.d.ts

@@ -1,9 +1,33 @@
 import { AreaChipProps } from '../../../AreaChip/types';
 /**
- * TODO: Documentar
+ * ChipMobile component for rendering a mobile-friendly chip with area details.
+ *
+ * Props:
+ * - areaId: string - The ID of the area.
+ * - selected: boolean - Indicates if the chip is selected.
+ * - disabled: boolean - Indicates if the chip is disabled.
+ * - setAnchorMenuAreas: (element: HTMLElement) => void - Function to set the anchor element for the menu.
+ *
+ * Constants:
+ * - host_static_assets: string - The host for static assets.
+ * - environment_assets: string - The environment-specific assets.
+ * - deleteArea: (areaId: string) => void - Function to delete an area.
+ * - selectArea: (areaId: string) => void - Function to select an area.
+ * - editArea: (areaId: string, data: any) => void - Function to edit an area.
+ * - setFocus: (focus: boolean) => void - Function to set focus.
+ * - areaName: string - The name of the area.
+ * - listAreas: string[] - List of area IDs.
+ * - open: boolean - State to control the open/close state of the popover.
+ * - getLabel: (key: string) => string - Function to get a label from the dictionary.
+ * - isDesktop: boolean - Indicates if the current view is desktop.
+ * - anchorRef: React.RefObject<null> - Reference to the anchor element.
+ * - theme: Theme - The current theme.
+ * - initialValues: { inputEditArea: string } - Initial values for the form.
+ * - validationSchema: Yup.ObjectSchema - Validation schema for the form.
+ * - rippleRef: React.RefObject<any> - Reference to the ripple effect.
  * @author SebastianM - automatic
- * @createdAt 2024-11-01 12:34:48 - automatic
- * @updatedAt 2024-11-01 12:34:49 - automatic
+ * @createdAt 2024-11-06 11:07:59 - automatic
+ * @updatedAt 2024-11-06 11:07:59 - automatic
  * @updatedUser SebastianM - automatic
  */
 export declare const ChipMobile: {

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/ChipMobile/ChipMobile.js

@@ -17,10 +17,10 @@ import { I as IconButton } from "../../../../../../../mui_extended/IconButton/Ic
 import { R as RHFormProvider } from "../../../../../../../hook-form/RHFormContext/index.js";
 import { T as Typography } from "../../../../../../../mui_extended/Typography/Typography.js";
 import { A as ActionsContainer } from "../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
-import { A as ActionCancel } from "../../../../../../../CommonActions/components/ActionCancel/index.js";
-import { A as ActionIntro } from "../../../../../../../CommonActions/components/ActionIntro/index.js";
 import { P as Popover } from "../../../../../../../mui_extended/Popover/Popover.js";
 import { R as RHFTextField } from "../../../../../../../hook-form/RHFTextField/RHFTextField.js";
+import { A as ActionCancel } from "../../../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
+import { A as ActionIntro } from "../../../../../../../CommonActions/components/ActionIntro/ActionIntro.js";
 const ChipMobile = (props) => {
   const { areaId, selected, disabled, setAnchorMenuAreas } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -190,11 +190,10 @@ const ChipMobile = (props) => {
                           setOpen(false);
                           setFocus(false);
                         },
-                        variant: "outlined",
-                        skeletonWidth: "100%"
+                        variant: "outlined"
                       }
                     ),
-                    /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "100%" })
+                    /* @__PURE__ */ jsx(ActionIntro, {})
                   ] })
                 ]
               }

package/components/commercial/TopBar/component/ConteinItem/subcomponets/NavItem/index.d.ts

@@ -5,5 +5,9 @@ import { NavItemRootProps } from './types';
  * @param {TopBarMenuDataType} props.itemRootData - Array de tipo TopBarMenuDataType
  * @returns Boton con o sin accordion
  * @example <NavItemRoot key={group.id} itemRootData={group} />
+ * @author SebastianM - automatic
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * @updatedAt 2024-11-06 17:18:27 - automatic
+ * @updatedUser SebastianM - automatic
  */
 export declare const NavItemRoot: (props: NavItemRootProps) => import("react/jsx-runtime").JSX.Element;

package/components/commercial/TopBar/component/ConteinItem/subcomponets/NavItem/index.js

@@ -36,7 +36,7 @@ const NavItemRoot = (props) => {
           item.path === window.location.pathname ? TopBarClasses.IsActive : null
         ),
         ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId(componentName, "ItemSelect", dataTestId) } : {},
-        children: /* @__PURE__ */ jsx(Button, { variant: "text", href: item.path, fullWidth: true, children: item.title })
+        children: /* @__PURE__ */ jsx(Button, { variant: "text", href: item.path, fullWidth: true, label: item.title })
       }
     ) }, index));
   };
@@ -77,14 +77,15 @@ const NavItemRoot = (props) => {
             )
           } : {},
           children: [
-            /* @__PURE__ */ jsx(Button, { size: "medium", variant: "text", href: itemRootData.path, children: title }),
+            /* @__PURE__ */ jsx(Button, { size: "medium", variant: "text", href: itemRootData.path, label: title }),
             /* @__PURE__ */ jsx(
               Button,
               {
                 variant: "text",
                 id: module_id,
                 onClick: (e) => handleClick(e, module_id),
-                endIcon: /* @__PURE__ */ jsx(ArrowIcon, { openState: openedPopoverId === module_id ? true : false })
+                endIcon: /* @__PURE__ */ jsx(ArrowIcon, { openState: openedPopoverId === module_id ? true : false }),
+                label: ""
               }
             ),
             renderPopover()
@@ -103,11 +104,11 @@ const NavItemRoot = (props) => {
               Button,
               {
                 "aria-describedby": module_id,
+                label: title,
                 variant: "text",
                 size: "medium",
                 onClick: (e) => handleClick(e, itemRootData.module_id),
-                endIcon: /* @__PURE__ */ jsx(ArrowIcon, { openState: openedPopoverId === module_id ? true : false }),
-                children: title
+                endIcon: /* @__PURE__ */ jsx(ArrowIcon, { openState: openedPopoverId === module_id ? true : false })
               }
             ),
             renderPopover()
@@ -116,7 +117,7 @@ const NavItemRoot = (props) => {
       );
     }
     if (itemRootData.path) {
-      return /* @__PURE__ */ jsx(Button, { variant: "text", size: "medium", href: itemRootData.path, "aria-describedby": module_id, children: /* @__PURE__ */ jsx("div", { children: title }) });
+      return /* @__PURE__ */ jsx(Button, { variant: "text", size: "medium", href: itemRootData.path, "aria-describedby": module_id, label: title });
     }
   };
   return /* @__PURE__ */ jsx(

package/components/hook-form/RHFColorPicker/RFHColorPicker.d.ts

@@ -3,5 +3,9 @@ import { RHFColorPickerProps } from './types';
  * Componente RHFColorPicker para seleccionar colores con React Hook Form.
  * @param {RHFColorPickerProps} props - Propiedades del componente.
  * @returns {JSX.Element} - Elemento JSX que representa el componente.
+ * @author SebastianM - automatic
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * @updatedAt 2024-11-06 09:00:06 - automatic
+ * @updatedUser SebastianM - automatic
  */
 export declare const RHFColorPicker: (props: RHFColorPickerProps) => import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFColorPicker/RFHColorPicker.js

@@ -123,7 +123,7 @@ const RHFColorPicker = (props) => {
                 },
                 children: /* @__PURE__ */ jsxs("div", { className: classes.containerPicker, children: [
                   /* @__PURE__ */ jsx(SketchPicker, { color: tempColor, onChange: handleColorChange, disableAlpha: true }),
-                  /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleApprove, children: getLabel("rhfcolorpicker.accept") })
+                  /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleApprove, label: getLabel("rhfcolorpicker.accept") })
                 ] })
               }
             )

package/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/index.d.ts

@@ -2,8 +2,8 @@ import { UploadImageProps } from './types';
 /**
  * TODO: Documentar
  * @author Juan Escobar - automatic
- * @updatedAt 2024-10-22 19:27:23 - automatic
- * @updatedUser Bruce Escobar - automatic
+ * @updatedAt 2024-11-06 09:00:06 - automatic
+ * @updatedUser SebastianM - automatic
  * @createdAt 2024-10-15 17:33:28 - automatic
  */
 export default function UploadImage({ error, file, helperText, sx, ...other }: UploadImageProps): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/index.js

@@ -124,7 +124,7 @@ function UploadImage({ error, file, helperText, sx, ...other }) {
                                   ),
                                   /* @__PURE__ */ jsx(Typography, { className: classes.containerDescription, variant: "body", children: getLabel("upload_image.description") }),
                                   /* @__PURE__ */ jsx(Typography, { className: classes.containerConditions, variant: "body", children: getLabel("upload_image.conditions") }),
-                                  /* @__PURE__ */ jsx(Button, { onClick: open, children: getLabel("upload_image.label_button") })
+                                  /* @__PURE__ */ jsx(Button, { onClick: open, label: getLabel("upload_image.label_button") })
                                 ]
                               }
                             )

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/subcomponents/MyActions/index.d.ts

@@ -1,8 +1,8 @@
 /**
  * TODO: Documentar
  * @author SebastianM - automatic
- * @createdAt 2024-11-01 12:34:48 - automatic
- * @updatedAt 2024-11-01 12:34:49 - automatic
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * @updatedAt 2024-11-06 09:00:06 - automatic
  * @updatedUser SebastianM - automatic
  */
 export declare function MyActions(): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/subcomponents/MyActions/index.js

@@ -19,7 +19,13 @@ function MyActions() {
       setValue("statusEdition", "initial");
     }
   };
-  return /* @__PURE__ */ jsx(ActionsContainer, { children: /* @__PURE__ */ jsx(Button, { onClick: initCancelDraw, children: statusEdition === "initial" ? getLabel(MAP_DICCTIONARY.LABEL_MEASURE_START) : getLabel(MAP_DICCTIONARY.LABEL_MEASURE_CANCEL) }) });
+  return /* @__PURE__ */ jsx(ActionsContainer, { children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: initCancelDraw,
+      label: statusEdition === "initial" ? getLabel(MAP_DICCTIONARY.LABEL_MEASURE_START) : getLabel(MAP_DICCTIONARY.LABEL_MEASURE_CANCEL)
+    }
+  ) });
 }
 export {
   MyActions as M

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

@@ -2,8 +2,8 @@ import { MyActionsProps } from './types';
 /**
  * TODO: Documentar
  * @author SebastianM - automatic
- * @createdAt 2024-11-01 12:34:48 - automatic
- * @updatedAt 2024-11-01 12:34:49 - automatic
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * @updatedAt 2024-11-06 09:00:06 - automatic
  * @updatedUser SebastianM - automatic
  */
 export declare function MyActions(props: MyActionsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -52,7 +52,7 @@ function MyActions(props) {
   };
   return /* @__PURE__ */ jsxs(ActionsContainer, { children: [
     /* @__PURE__ */ jsx(RHFHelperError, { name: "geometry" }),
-    /* @__PURE__ */ jsx(Button, { onClick: onClickCancelLocal, disabled: inEdition, children: getLabel(MAP_GPSTOOLS_DICCTIONARY.ACTION_CANCEL) }),
+    /* @__PURE__ */ jsx(Button, { onClick: onClickCancelLocal, disabled: inEdition, label: getLabel(MAP_GPSTOOLS_DICCTIONARY.ACTION_CANCEL) }),
     /* @__PURE__ */ jsx(ActionFormIntro, { disabled: inEdition })
   ] });
 }

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofencesList/index.d.ts

@@ -1,8 +1,8 @@
 /**
  * TODO: Documentar
  * @author SebastianM - automatic
- * @createdAt 2024-11-01 12:34:48 - automatic
- * @updatedAt 2024-11-01 12:34:49 - automatic
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * @updatedAt 2024-11-06 09:00:06 - automatic
  * @updatedUser SebastianM - automatic
  */
 export declare function GeofencesList(): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofencesList/index.js

@@ -65,7 +65,7 @@ function GeofencesList() {
           },
           "list"
         ),
-        /* @__PURE__ */ jsx(ActionsContainer, { children: /* @__PURE__ */ jsx(Button, { onClick: () => goToAdd(), children: getLabel(MAP_GPSTOOLS_DICCTIONARY.MODULE_NAME_GEOFENCE_ADD) }) })
+        /* @__PURE__ */ jsx(ActionsContainer, { children: /* @__PURE__ */ jsx(Button, { onClick: () => goToAdd(), label: getLabel(MAP_GPSTOOLS_DICCTIONARY.MODULE_NAME_GEOFENCE_ADD) }) })
       ]
     }
   );

package/components/modal/WindowConfirm/index.d.ts

@@ -4,13 +4,13 @@ import { WindowConfirmProps } from './types';
  * Este componente muestra una ventana modal de confirmación con un mensaje y opciones de acción.
  * Utiliza hooks como useModal, useModuleDictionary y useEnvironment de @m4l/core.
  * También importa componentes y clases necesarios de CommonActions, subcomponents y classes.
- * @createdAt 2024-11-01 09:11:42 - automatic
+ * @createdAt 2024-11-06 09:00:05 - automatic
  */
 /**
  * TODO: Documentar
  * @author SebastianM - automatic
- * @createdAt 2024-11-01 09:11:42 - automatic
- * @updatedAt 2024-11-01 12:34:50 - automatic
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * @updatedAt 2024-11-06 10:39:53 - automatic
  * @updatedUser SebastianM - automatic
  */
 export declare const WindowConfirm: (props: WindowConfirmProps) => import("react/jsx-runtime").JSX.Element;

package/components/modal/WindowConfirm/index.js

@@ -5,8 +5,8 @@ import { M as MessageIlustration } from "./subcomponents/MessageIlustration/inde
 import { m as modalUtilityClasses } from "../classes/index.js";
 import { W as WindowBase } from "../WindowBase/index.js";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/index.js";
-import { A as ActionIntro } from "../../CommonActions/components/ActionIntro/index.js";
+import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/ActionCancel.js";
+import { A as ActionIntro } from "../../CommonActions/components/ActionIntro/ActionIntro.js";
 const WindowConfirm = (props) => {
   const { variant, title, onClickCancel, onClickIntro, msg } = props;
   const { closeModal } = useModal();

package/components/mui_extended/Button/Button.d.ts

@@ -1,11 +1,13 @@
 import { ButtonProps } from './types';
 /**
- * Provee un botón para que los clientes ejecuten acciones en la plataforma web.
- * Aporta su versión provisional de carga en red.
+ * The Button component renders a button with an optional icon and label.
+ * It supports different sizes, colors, and states such as disabled.
+ * If the module is in skeleton mode, it renders a skeleton button instead.
  * @param props
  * @returns
+ * @author SebastianM - automatic
+ * @createdAt 2024-11-06 07:42:00 - automatic
+ * @updatedAt 2024-11-12 11:36:04 - automatic
+ * @updatedUser SebastianM - automatic
  */
-/**
- * TODO: Documentar
- */
-export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/components/mui_extended/Button/Button.integration.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/mui_extended/Button/Button.js

@@ -1,52 +1,88 @@
 import { jsx } from "react/jsx-runtime";
-import { useModuleSkeleton } from "@m4l/core";
-import { Skeleton } from "@mui/material";
-import MuiButton from "@mui/material/Button";
-import { B as ButtonRoot } from "./styles.js";
-import { u as useUtilityClasses } from "./classes/index.js";
+import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
+import { useTheme } from "@mui/material";
 import clsx from "clsx";
-const Button = (props) => {
+import { forwardRef } from "react";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+import { S as SkeletonButtonStyled, B as ButtonRootStyled, T as TextButtonStyled, a as ButtonIconStyled } from "./slots/ButtonSlots.js";
+const Button = forwardRef((props, ref) => {
   const {
+    className,
+    endIcon,
+    label,
+    startIcon,
+    color = "default",
+    disabled = false,
     size = "small",
     variant = "contained",
-    className,
-    disabled,
-    skeletonWidth = "100px",
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    skeletonHeight = "28px",
-    colorState,
+    skeletonWidth = "100%",
     ...others
   } = props;
+  const { currentSize } = useComponentSize(size);
   const isSkeleton = useModuleSkeleton();
+  const theme = useTheme();
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const paletteColor = getPropertyByString(
+    theme.vars.palette,
+    disabled ? "default" : color || "default",
+    theme.vars.palette.default
+  );
   const ownerState = {
     size,
     variant,
-    isDisabled: disabled,
-    colorState
+    disabled,
+    paletteColor,
+    color
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonButtonStyled, { "data-testid": "SkeletonButton", width: skeletonWidth, ownerState: { ...ownerState } });
+  }
+  const getAdjustedColor = (btnColor, btnVariant) => {
+    return btnVariant === "contained" ? `${btnColor}.contrastText` : `${btnColor}.main`;
   };
-  const classes = useUtilityClasses(ownerState);
-  return (
-    /* ButtonRoot: Contenedor principal del componente, es usado para aplicar los estilos css de los overrides que
-        provienen del objeto del tema. Se usa para garantizar de que estos estilos no se propaguen a
-        otros componentes de la plataforna web. */
-    /* @__PURE__ */ jsx(ButtonRoot, { className: clsx(classes.root, className), "data-testid": "ButtonRoot", children: !isSkeleton ? (
-      /* MuiButton: Componente botón proporcionado por la librería externa material ui. */
-      /* @__PURE__ */ jsx(MuiButton, { ...others, variant, size, disableRipple: true, disabled })
-    ) : (
-      /* MuiSkeleton: Componente extendido de mui que se usa para mostrar la versión provisional de elementos en
-              la plataforma web. */
-      /* @__PURE__ */ jsx(
-        Skeleton,
+  const adjustedColor = getAdjustedColor(color, variant);
+  const renderIcon = (icon, instaceDataTestId) => {
+    if (!icon) {
+      return null;
+    }
+    if (typeof icon !== "string") {
+      return icon;
+    } else {
+      return /* @__PURE__ */ jsx(
+        ButtonIconStyled,
         {
-          className: classes.skeleton,
-          "data-testid": "MuiSkeleton",
-          variant: "rectangular",
-          width: skeletonWidth
+          color: adjustedColor,
+          ownerState: { ...ownerState },
+          src: icon,
+          alt: "icon",
+          size: adjustedSize,
+          disabled,
+          instaceDataTestId,
+          className: clsx(className)
         }
-      )
-    ) })
+      );
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ButtonRootStyled,
+    {
+      "aria-disabled": disabled,
+      role: "button",
+      startIcon: renderIcon(startIcon, "ButtonStartIcon"),
+      endIcon: renderIcon(endIcon, "ButtonEndIcon"),
+      className: clsx(className),
+      variant,
+      size,
+      disabled,
+      disableRipple: true,
+      ownerState: { ...ownerState },
+      ref,
+      ...others,
+      children: /* @__PURE__ */ jsx(TextButtonStyled, { ownerState: { ...ownerState }, color: adjustedColor, children: label })
+    }
   );
-};
+});
+Button.displayName = "Button";
 export {
   Button as B
 };

package/components/mui_extended/Button/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/mui_extended/Button/ButtonStyles.d.ts

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