@m4l/components 9.1.63 → 9.1.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/components/Color/Color.js +136 -38
  2. package/components/Color/Color.styles.d.ts +0 -4
  3. package/components/Color/Color.styles.js +107 -54
  4. package/components/Color/constants.d.ts +0 -1
  5. package/components/Color/constants.js +1 -3
  6. package/components/Color/slots/ColorEnum.d.ts +3 -2
  7. package/components/Color/slots/ColorEnum.js +2 -1
  8. package/components/Color/slots/ColorSlots.d.ts +14 -10
  9. package/components/Color/slots/ColorSlots.js +16 -10
  10. package/components/Color/types.d.ts +14 -25
  11. package/components/DataGrid/index.js +1 -1
  12. package/components/DynamicFilter/subcomponents/DynamicFilterBase/DynamicFilterBase.js +1 -1
  13. package/components/Icon/Icon.js +1 -1
  14. package/components/Image/Image.js +1 -1
  15. package/components/Image/subcomponents/IntersectComponent/index.js +1 -1
  16. package/components/LanguagePopover/LanguagePopover.js +1 -1
  17. package/components/PropertyValue/PropertyValue.js +1 -1
  18. package/components/ToastContainer/ToastContainer.js +1 -1
  19. package/components/WindowBase/WindowBase.js +1 -1
  20. package/components/WindowConfirm/WindowConfirm.js +1 -1
  21. package/components/areas/components/AreasViewer/index.js +1 -1
  22. package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/index.js +1 -1
  23. package/components/commercial/TopBar/TopBar.js +1 -1
  24. package/components/commercial/TopBar/component/ConteinItem/index.js +1 -1
  25. package/components/commercial/TopBar/component/ConteinItem/subcomponets/NavItem/index.js +1 -1
  26. package/components/formatters/BooleanFormatter/BooleanFormatter.js +1 -1
  27. package/components/formatters/PeriodFormatter/PeriodFormatter.js +1 -1
  28. package/components/formatters/PointsFormatter/PointsFormatter.js +1 -1
  29. package/components/hook-form/RHFColorPicker/RFHColorPicker.js +11 -89
  30. package/components/hook-form/RHFColorPicker/RHFColorPicker.styles.js +0 -99
  31. package/components/hook-form/RHFColorPicker/constants.d.ts +0 -1
  32. package/components/hook-form/RHFColorPicker/constants.js +1 -3
  33. package/components/hook-form/RHFColorPicker/slots/RHFColorPickerEnum.d.ts +1 -3
  34. package/components/hook-form/RHFColorPicker/slots/RHFColorPickerEnum.js +0 -2
  35. package/components/hook-form/RHFColorPicker/slots/RHFColorPickerSlots.d.ts +1 -19
  36. package/components/hook-form/RHFColorPicker/slots/RHFColorPickerSlots.js +3 -15
  37. package/components/hook-form/RHFPeriod/RHFPeriod.js +1 -1
  38. package/components/hook-form/RHFTextField/RHFTextField.js +1 -1
  39. package/components/maps/components/Map/popups/MapPopupMyGps/MapPopupMyGps.js +1 -1
  40. package/components/mui_extended/Accordion/Accordion.js +1 -1
  41. package/components/mui_extended/Avatar/Avatar.js +1 -1
  42. package/components/mui_extended/Avatar/subcomponents/SkeletonAvatar/index.js +1 -1
  43. package/components/mui_extended/Badge/Badge.js +1 -1
  44. package/components/mui_extended/CircularProgress/CircularProgress.js +1 -1
  45. package/components/mui_extended/Dialog/Dialog.js +1 -1
  46. package/components/mui_extended/IconButton/IconButton.js +57 -58
  47. package/components/mui_extended/IconButton/IconButton.styles.js +0 -12
  48. package/components/mui_extended/IconButton/slots/IconButtonEnum.d.ts +0 -1
  49. package/components/mui_extended/IconButton/slots/IconButtonEnum.js +0 -1
  50. package/components/mui_extended/IconButton/slots/IconButtonSlots.d.ts +0 -3
  51. package/components/mui_extended/IconButton/slots/IconButtonSlots.js +2 -6
  52. package/components/mui_extended/ImageButton/ImageButton.js +1 -1
  53. package/components/mui_extended/Popover/Popover.js +1 -1
  54. package/components/mui_extended/TextField/TextField.js +1 -1
  55. package/components/mui_extended/ToggleButton/ToggleButton.js +1 -1
  56. package/components/mui_extended/ToggleIconButton/ToggleIconButton.js +1 -1
  57. package/components/mui_extended/Typography/Typography.js +1 -1
  58. package/index.d.ts +4 -0
  59. package/package.json +1 -1
  60. package/patchLibErrors/defaultPropsError.d.ts +2 -0
  61. package/patchLibErrors/defaultPropsError.js +1 -0
  62. package/patchLibErrors/index.d.ts +1 -0
  63. package/patchLibErrors/index.js +1 -0
  64. package/test/getNameDataTestId.js +2 -2
@@ -3,7 +3,7 @@ import { useModuleSkeleton } from "@m4l/core";
3
3
  import { useMemo } from "react";
4
4
  import { L as LazyLoadComponent } from "./subcomponents/LazyLoadComponent/index.js";
5
5
  import { D as DivContainerSkeletonStyled, I as ImgSkeleton, a as ImgStyled } from "./slots/ImageSlots.js";
6
- import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
6
+ import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
7
7
  import { s as svgDataUriSkeleton, I as IMAGE_KEY_COMPONENT } from "./constant.js";
8
8
  import { I as ImageSlots } from "./slots/ImageEnum.js";
9
9
  function Image(props) {
@@ -1,7 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { forwardRef, useState, useRef, useImperativeHandle, useEffect } from "react";
3
3
  import { b as IntersectComponentStyled } from "../../slots/ImageSlots.js";
4
- import { a as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
4
+ import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
5
5
  import { I as IMAGE_KEY_COMPONENT } from "../../constant.js";
6
6
  import { I as ImageSlots } from "../../slots/ImageEnum.js";
7
7
  const checkIntersections = (entries) => {
@@ -9,7 +9,7 @@ import { useEnvironment, useNetwork } from "@m4l/core";
9
9
  import { g as getUtilityClasses } from "./classes/index.js";
10
10
  import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
11
11
  import { L as LANGUAGEPOPOVER_KEY_COMPONENT } from "./tests/constants.js";
12
- import { g as getNameDataTestId } from "../../test/getNameDataTestId.js";
12
+ import { a as getNameDataTestId } from "../../test/getNameDataTestId.js";
13
13
  import { P as Popover } from "../mui_extended/Popover/Popover.js";
14
14
  import { C as CircularProgress } from "../mui_extended/CircularProgress/CircularProgress.js";
15
15
  function LanguagePopover(props) {
@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import clsx from "clsx";
3
3
  import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
4
4
  import { T as TEST_PROPS_DATA, P as PROPERTY_VALUE_KEY_COMPONENT, C as COMPONENT_PREFIX } from "./constants.js";
5
- import { a as getPropDataTestId, g as getNameDataTestId } from "../../test/getNameDataTestId.js";
5
+ import { g as getPropDataTestId, a as getNameDataTestId } from "../../test/getNameDataTestId.js";
6
6
  import { P as PropertyValueRootStyled, a as PropertyStyled, V as ValueStyled } from "./slots/PropertyValueSlots.js";
7
7
  import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
8
8
  import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
@@ -1,7 +1,7 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { ToastContainer as ToastContainer$1 } from "react-toastify";
3
3
  import { T as TOAST_KEY_COMPONENT, D as DEFAULT_CLOSE_TIME } from "./constants.js";
4
- import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
4
+ import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
5
5
  import "react-toastify/dist/ReactToastify.min.css";
6
6
  import { A as AppearanceComponentProvider } from "../../contexts/AppearanceComponentContext/AppearanceComponentContext.js";
7
7
  import { R as RootStyled } from "./slots/toastContainerSlots.js";
@@ -1,7 +1,7 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
3
3
  import { A as AppearanceComponentProvider } from "../../contexts/AppearanceComponentContext/AppearanceComponentContext.js";
4
- import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
4
+ import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
5
5
  import { W as WINDOW_BASE_KEY_COMPONENT } from "./constants.js";
6
6
  import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
7
7
  import clsx from "clsx";
@@ -3,7 +3,7 @@ import { u as useModal } from "../../hooks/useModal/index.js";
3
3
  import { m as modalUtilityClasses } from "../modal/classes/index.js";
4
4
  import { useModuleDictionary, useEnvironment } from "@m4l/core";
5
5
  import { A as AppearanceComponentProvider } from "../../contexts/AppearanceComponentContext/AppearanceComponentContext.js";
6
- import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
6
+ import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
7
7
  import { W as WINDOW_CONFIRM_KEY_COMPONENT } from "./constants.js";
8
8
  import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
9
9
  import clsx from "clsx";
@@ -5,7 +5,7 @@ import { u as useAreasStore } from "../../hooks/useAreas/index.js";
5
5
  import { M as MemonizedWindowModal } from "./subcomponents/Area/subcomponents/WindowModal/index.js";
6
6
  import { shallow } from "zustand/shallow";
7
7
  import { L as LoadingError } from "../../../LoadingError/LoadingError.js";
8
- import { g as getNameDataTestId } from "../../../../test/getNameDataTestId.js";
8
+ import { a as getNameDataTestId } from "../../../../test/getNameDataTestId.js";
9
9
  import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.js";
10
10
  import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
11
11
  function AreasViewer() {
@@ -9,7 +9,7 @@ import { M as MemonizedMicroFrontend } from "./subcomponents/MicroFrontend/index
9
9
  import { C as Component } from "./subcomponents/Component/index.js";
10
10
  import { W as WindowRoot } from "./styles.js";
11
11
  import { T as TEST_PROP_ID } from "../../../../../../../../test/constants_no_mock.js";
12
- import { g as getNameDataTestId } from "../../../../../../../../test/getNameDataTestId.js";
12
+ import { a as getNameDataTestId } from "../../../../../../../../test/getNameDataTestId.js";
13
13
  import { a as AREAS_VIEWER_CLASS_NAME } from "../../../../../../constants.js";
14
14
  import { c as createToaster } from "../../../../../../../ToastContainer/helpers/toaster.js";
15
15
  import { T as ToastContainer } from "../../../../../../../ToastContainer/ToastContainer.js";
@@ -4,7 +4,7 @@ import { g as getTopBarClassesUtilityClass } from "./classes/index.js";
4
4
  import { C as ConteinItem } from "./component/ConteinItem/index.js";
5
5
  import { T as TopBarProvider } from "./context/index.js";
6
6
  import { T as TopBarRoot } from "./style.js";
7
- import { g as getNameDataTestId } from "../../../test/getNameDataTestId.js";
7
+ import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
8
8
  import { c as componentName } from "./classes/constants.js";
9
9
  const TopBar = (props) => {
10
10
  const { dataMenu: DataMenu, dataTestId } = props;
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { u as useTopBar } from "../../hook/topBarContext/index.js";
3
3
  import { N as NavItemRoot } from "./subcomponets/NavItem/index.js";
4
4
  import { T as TEST_PROP_ID } from "../../../../../test/constants_no_mock.js";
5
- import { g as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
5
+ import { a as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
6
6
  import { c as componentName } from "../../classes/constants.js";
7
7
  const ConteinItem = () => {
8
8
  const { dataMenu: DataMenu, classes, dataTestId } = useTopBar();
@@ -7,7 +7,7 @@ import clsx from "clsx";
7
7
  import { i as isActive } from "../../../../utils/isActive/index.js";
8
8
  import { T as TopBarClasses } from "../../../../classes/index.js";
9
9
  import { T as TEST_PROP_ID } from "../../../../../../../test/constants_no_mock.js";
10
- import { g as getNameDataTestId } from "../../../../../../../test/getNameDataTestId.js";
10
+ import { a as getNameDataTestId } from "../../../../../../../test/getNameDataTestId.js";
11
11
  import { c as componentName } from "../../../../classes/constants.js";
12
12
  import { A as Accordion } from "../../../../../../mui_extended/Accordion/Accordion.js";
13
13
  import { B as Button } from "../../../../../../mui_extended/Button/Button.js";
@@ -5,7 +5,7 @@ import { L as LABEL_BOOLEAN_YES, a as LABEL_BOOLEAN_NO, b as LABEL_BOOLEAN_TRUE,
5
5
  import clsx from "clsx";
6
6
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
7
7
  import { B as BOOLEAN_FORMATTER_KEY_COMPONENT } from "./constants.js";
8
- import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
8
+ import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
9
9
  import { B as BooleanFormatterIconStyled, a as BooleanFormatterRootStyled } from "./slots/BooleanFormatterSlots.js";
10
10
  import { B as BooleanFormatterSlots } from "./slots/BooleanFormatterEnum.js";
11
11
  function BooleanFormatter(props) {
@@ -4,7 +4,7 @@ import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
4
4
  import { P as PERIOD_FORMATTER_KEY_COMPONENT } from "./constants.js";
5
5
  import clsx from "clsx";
6
6
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
7
- import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
7
+ import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
8
8
  import { d as dictionary } from "./dictionary.js";
9
9
  import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
10
10
  import { P as PeriodFormatterSkeletonStyled, a as PeriodFormatterRootStyled } from "./slots/PeriodFormatterSlots.js";
@@ -3,7 +3,7 @@ import { getPropertyByString } from "@m4l/core";
3
3
  import React, { useMemo } from "react";
4
4
  import { P as PointsFormatterRootStyled } from "./slots/ointsFormatterSlots.js";
5
5
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
6
- import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
6
+ import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
7
7
  import clsx from "clsx";
8
8
  import { P as POINTS_FORMATTER_KEY_COMPONENT } from "./constants.js";
9
9
  import { P as PointsFormatterSlots } from "./slots/PointsFormatterEnum.js";
@@ -1,21 +1,16 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { useState } from "react";
3
- import { useFormContext, useWatch, Controller } from "react-hook-form";
2
+ import { useFormContext, Controller } from "react-hook-form";
4
3
  import { clsx } from "clsx";
5
4
  import { useModuleSkeleton } from "@m4l/core";
6
- import { useTheme } from "@mui/material";
7
- import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
8
- import { R as RHFCOLORPICKER_PREFIX, a as RHFCOLOR_PICKER_KEY_COMPONENT } from "./constants.js";
9
- import { R as RHFColorPickerSlots } from "./slots/RHFColorPickerEnum.js";
10
- import { R as RootStyled, P as PopoverStyled, S as SketchPickerStyled } from "./slots/RHFColorPickerSlots.js";
5
+ import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
11
6
  import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
7
+ import { R as RHFCOLOR_PICKER_KEY_COMPONENT } from "./constants.js";
8
+ import { R as RHFColorPickerSlots } from "./slots/RHFColorPickerEnum.js";
9
+ import { R as RootStyled } from "./slots/RHFColorPickerSlots.js";
12
10
  import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
13
11
  import { L as Label } from "../../Label/Label.js";
14
12
  import { C as Color } from "../../Color/Color.js";
15
13
  import { H as HelperError } from "../../HelperError/HelperError.js";
16
- import { A as ActionsContainer } from "../../CommonActions/components/ActionsContainer/ActionsContainer.js";
17
- import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/ActionCancel.js";
18
- import { A as ActionIntro } from "../../CommonActions/components/ActionIntro/ActionIntro.js";
19
14
  const RHFColorPicker = (props) => {
20
15
  const {
21
16
  name,
@@ -28,34 +23,19 @@ const RHFColorPicker = (props) => {
28
23
  disabled,
29
24
  className
30
25
  } = props;
31
- const { control, setValue, formState: { isSubmitted } } = useFormContext();
32
- const theme = useTheme();
26
+ const { control } = useFormContext();
33
27
  const isSkeleton = useModuleSkeleton();
34
28
  const { currentSize } = useComponentSize(size);
35
29
  const ownerState = {
36
30
  size: currentSize
37
31
  };
38
- const currentColor = useWatch({
39
- name,
40
- control
41
- });
42
- const [tempColor, setTempColor] = useState(() => currentColor || "#ffffff");
43
- const [anchorEl, setAnchorEl] = useState(null);
44
- const handleColorChange = (color) => {
45
- setTempColor(color.hex);
46
- };
47
- const handleApprove = () => {
48
- setAnchorEl(null);
49
- if (tempColor !== currentColor) {
50
- setValue(name, tempColor, { shouldValidate: isSubmitted });
51
- }
52
- };
53
32
  const classes = getComponentClasses(RHFCOLOR_PICKER_KEY_COMPONENT, RHFColorPickerSlots);
54
33
  return /* @__PURE__ */ jsx(
55
34
  RootStyled,
56
35
  {
36
+ className: clsx(className, classes.root),
57
37
  role: isSkeleton ? "presentation" : void 0,
58
- ...getPropDataTestId(RHFCOLORPICKER_PREFIX, RHFColorPickerSlots.root, instaceDataTestId),
38
+ ...getPropDataTestId(RHFCOLOR_PICKER_KEY_COMPONENT, RHFColorPickerSlots.root, instaceDataTestId),
59
39
  ownerState: { ownerState },
60
40
  children: /* @__PURE__ */ jsx(
61
41
  Controller,
@@ -63,7 +43,7 @@ const RHFColorPicker = (props) => {
63
43
  name,
64
44
  control,
65
45
  defaultValue: "",
66
- render: ({ field: { value }, fieldState: { error } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
46
+ render: ({ field: { value, onChange }, fieldState: { error } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
67
47
  label && /* @__PURE__ */ jsx(
68
48
  Label,
69
49
  {
@@ -77,18 +57,10 @@ const RHFColorPicker = (props) => {
77
57
  /* @__PURE__ */ jsx(
78
58
  Color,
79
59
  {
80
- "aria-errormessage": error?.message || void 0,
81
60
  size,
82
- onClick: (event) => setAnchorEl(event.currentTarget),
61
+ onChange,
83
62
  value,
84
- role: "button",
85
- tabIndex: 0,
86
- onKeyDown: (event) => {
87
- if (event.key === "Enter" || event.key === " ") {
88
- setAnchorEl(event.currentTarget);
89
- }
90
- },
91
- color: error?.message ? "error" : "default",
63
+ error: !!error,
92
64
  disabled: isSkeleton ? true : disabled
93
65
  }
94
66
  ),
@@ -98,56 +70,6 @@ const RHFColorPicker = (props) => {
98
70
  size,
99
71
  message: error?.message + ""
100
72
  }
101
- ),
102
- /* @__PURE__ */ jsxs(
103
- PopoverStyled,
104
- {
105
- className: clsx(classes.popover, className),
106
- size,
107
- ownerState: { error: !!error, size: currentSize },
108
- open: Boolean(anchorEl),
109
- arrowType: "no-arrow",
110
- anchorEl,
111
- onClose: () => setAnchorEl(null),
112
- anchorOrigin: {
113
- vertical: "bottom",
114
- horizontal: "left"
115
- },
116
- transformOrigin: {
117
- vertical: "top",
118
- horizontal: "left"
119
- },
120
- sx: {
121
- mt: error?.message ? theme.vars.size.baseSpacings.sp7 : 0
122
- },
123
- children: [
124
- /* @__PURE__ */ jsx(
125
- SketchPickerStyled,
126
- {
127
- ownerState: { ownerState },
128
- color: tempColor,
129
- onChange: handleColorChange,
130
- disableAlpha: true
131
- }
132
- ),
133
- /* @__PURE__ */ jsxs(ActionsContainer, { children: [
134
- /* @__PURE__ */ jsx(
135
- ActionCancel,
136
- {
137
- onClick: () => setAnchorEl(null),
138
- size
139
- }
140
- ),
141
- /* @__PURE__ */ jsx(
142
- ActionIntro,
143
- {
144
- onClick: handleApprove,
145
- size
146
- }
147
- )
148
- ] })
149
- ]
150
- }
151
73
  )
152
74
  ] })
153
75
  }
@@ -11,105 +11,6 @@ const rhfcolorPickerStyles = {
11
11
  display: "flex",
12
12
  flexDirection: "column",
13
13
  gap: theme.vars.size.baseSpacings.sp1
14
- }),
15
- /**
16
- * Estilos para el `Popover` dentro del `RHFColorPicker`.
17
- * Define la apariencia del `Popover`, como el borde, el padding y el estilo de los botones dentro del `Popover`.
18
- * @author Andrés Quintero - automatic
19
- * @createdAt 2025-01-08 10:36:40 - automatic
20
- * @updatedAt 2025-01-08 10:36:41 - automatic
21
- * @updatedUser Andrés Quintero - automatic
22
- */
23
- popover: ({ theme, ownerState }) => {
24
- return {
25
- "& .MuiPaper-root": {
26
- padding: 0,
27
- border: theme.vars.size.borderStroke.container,
28
- borderColor: ownerState.error ? theme.vars.palette.border.error : theme.vars.palette.border.default,
29
- borderRadius: theme.vars.size.borderRadius.r1,
30
- "& .MuiButtonBase-root": {
31
- // Ajuste específico de estilo para el contenido de los botones
32
- justifyContent: "center"
33
- }
34
- }
35
- };
36
- },
37
- /**
38
- * Estilos para el `SketchPicker`, que es el selector de colores dentro del `RHFColorPicker`.
39
- * Define el layout y la apariencia de las cajas de color, ajustando el diseño y el estilo de los elementos dentro del selector.
40
- * @author Andrés Quintero - automatic
41
- * @createdAt 2025-01-08 10:36:40 - automatic
42
- * @updatedAt 2025-01-08 10:36:41 - automatic
43
- * @updatedUser Andrés Quintero - automatic
44
- */
45
- sketchPicker: ({ theme }) => ({
46
- display: "flex",
47
- flexDirection: "column",
48
- gap: theme.vars.size.baseSpacings.sp3,
49
- boxShadow: "none !important",
50
- "& > div": {
51
- // Caja de selección de color
52
- "&:nth-of-type(1)": {
53
- borderRadius: theme.vars.size.borderRadius.r1
54
- },
55
- // Caja de selección horizontal de color
56
- "&:nth-of-type(2)": {
57
- display: "flex !important",
58
- justifyContent: "center !important",
59
- alignItems: "center !important",
60
- gap: theme.vars.size.baseSpacings.sp3,
61
- "& > div:nth-of-type(1)": {
62
- padding: "0px !important",
63
- "& > div:nth-of-type(1)": {
64
- height: `${theme.vars.size.baseSpacings.sp3}!important`,
65
- borderRadius: `${theme.vars.size.borderRadius["r0-5"]} !important`,
66
- "& > div > div > div > div": {
67
- height: "10px !important"
68
- }
69
- }
70
- },
71
- "& > div:nth-of-type(2)": {
72
- margin: "0px !important",
73
- borderRadius: `${theme.vars.size.borderRadius.r1} !important`,
74
- height: `${theme.vars.size.desktop.medium.base} !important`,
75
- width: `${theme.vars.size.desktop.medium.base} !important`,
76
- "& div": {
77
- borderRadius: `${theme.vars.size.borderRadius.r1} !important`,
78
- boxShadow: "none !important"
79
- }
80
- }
81
- },
82
- // Inputs para el cambio de color mediante a texto( hexadecimal o rgb )
83
- "&:nth-of-type(3)": {
84
- padding: "0px !important",
85
- "& > div": {
86
- // Estilos compartidos para las cajas de color
87
- "&:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)": {
88
- padding: "0px !important",
89
- "& div": {
90
- display: "flex !important",
91
- flexDirection: "column-reverse !important",
92
- "& label": {
93
- textAlign: "left !important",
94
- color: `${theme.vars.palette.text.secondary} !important`,
95
- textTransform: "uppercase !important",
96
- padding: "0px !important"
97
- },
98
- "& input": {
99
- borderRadius: theme.vars.size.borderRadius.r1
100
- }
101
- }
102
- }
103
- }
104
- },
105
- //Colores en grid varios del componente de react-color
106
- "&:nth-of-type(4)": {
107
- paddingTop: "0px !important"
108
- }
109
- },
110
- "& .flexbox-fix": {
111
- border: "0px !important"
112
- }
113
14
  })
114
15
  };
115
16
  export {
@@ -2,4 +2,3 @@
2
2
  * Nombre de clase que se usa para dar identidad a los slots del componente.
3
3
  */
4
4
  export declare const RHFCOLOR_PICKER_KEY_COMPONENT = "M4LRHFColorPicker";
5
- export declare const RHFCOLORPICKER_PREFIX = "RHFColorPicker";
@@ -1,6 +1,4 @@
1
1
  const RHFCOLOR_PICKER_KEY_COMPONENT = "M4LRHFColorPicker";
2
- const RHFCOLORPICKER_PREFIX = "RHFColorPicker";
3
2
  export {
4
- RHFCOLORPICKER_PREFIX as R,
5
- RHFCOLOR_PICKER_KEY_COMPONENT as a
3
+ RHFCOLOR_PICKER_KEY_COMPONENT as R
6
4
  };
@@ -1,5 +1,3 @@
1
1
  export declare enum RHFColorPickerSlots {
2
- root = "root",
3
- popover = "popover",
4
- sketchPicker = "sketchPicker"
2
+ root = "root"
5
3
  }
@@ -1,7 +1,5 @@
1
1
  var RHFColorPickerSlots = /* @__PURE__ */ ((RHFColorPickerSlots2) => {
2
2
  RHFColorPickerSlots2["root"] = "root";
3
- RHFColorPickerSlots2["popover"] = "popover";
4
- RHFColorPickerSlots2["sketchPicker"] = "sketchPicker";
5
3
  return RHFColorPickerSlots2;
6
4
  })(RHFColorPickerSlots || {});
7
5
  export {
@@ -1,24 +1,6 @@
1
- import { SketchPicker } from 'react-color';
2
1
  /**
3
- * Styled component que representa el contenedor raíz del `RHFColorPicker`.
4
- * Aplica los estilos definidos en `rhfcolorPickerStyles.root` al envoltorio `div`.
2
+ * Componente que es un envoltorio `div` que representa el contenedor raíz del `RHFColorPicker`.
5
3
  */
6
4
  export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown> & {
7
5
  ownerState: Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown>;
8
6
  }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
9
- /**
10
- * Styled component para el `Popover` dentro del `RHFColorPicker`.
11
- * Aplica los estilos definidos en `rhfcolorPickerStyles.popover` al componente `Popover`.
12
- */
13
- export declare const PopoverStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Popover/types').PopoverProps, keyof import('../../../mui_extended/Popover/types').PopoverProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown> & {
14
- ownerState: Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown>;
15
- }, {}, {}>;
16
- /**
17
- * Styled component para el componente `SketchPicker` de `react-color` dentro del `RHFColorPicker`.
18
- * Aplica los estilos definidos en `rhfcolorPickerStyles.sketchPicker` al componente `SketchPicker`.
19
- */
20
- export declare const SketchPickerStyled: import('@emotion/styled').StyledComponent<Pick<import('react-color').SketchPickerProps, keyof import('react-color').SketchPickerProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown> & {
21
- ownerState: Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown>;
22
- }, {}, {
23
- ref?: import('react').Ref<SketchPicker> | undefined;
24
- }>;
@@ -1,23 +1,11 @@
1
- import { SketchPicker } from "react-color";
2
1
  import { styled } from "@mui/material";
3
- import { R as RHFColorPickerSlots } from "./RHFColorPickerEnum.js";
4
- import { a as RHFCOLOR_PICKER_KEY_COMPONENT } from "../constants.js";
2
+ import { R as RHFCOLOR_PICKER_KEY_COMPONENT } from "../constants.js";
5
3
  import { r as rhfcolorPickerStyles } from "../RHFColorPicker.styles.js";
6
- import { P as Popover } from "../../../mui_extended/Popover/Popover.js";
4
+ import { R as RHFColorPickerSlots } from "./RHFColorPickerEnum.js";
7
5
  const RootStyled = styled("div", {
8
6
  name: RHFCOLOR_PICKER_KEY_COMPONENT,
9
7
  slot: RHFColorPickerSlots.root
10
8
  })(rhfcolorPickerStyles?.root);
11
- const PopoverStyled = styled(Popover, {
12
- name: RHFCOLOR_PICKER_KEY_COMPONENT,
13
- slot: RHFColorPickerSlots.popover
14
- })(rhfcolorPickerStyles?.popover);
15
- const SketchPickerStyled = styled(SketchPicker, {
16
- name: RHFCOLOR_PICKER_KEY_COMPONENT,
17
- slot: RHFColorPickerSlots.sketchPicker
18
- })(rhfcolorPickerStyles?.sketchPicker);
19
9
  export {
20
- PopoverStyled as P,
21
- RootStyled as R,
22
- SketchPickerStyled as S
10
+ RootStyled as R
23
11
  };
@@ -7,7 +7,7 @@ import { R as RHFPeriodRootStyled } from "./slots/RHFPeriodSlots.js";
7
7
  import { P as Period } from "./subcomponents/Period/Period.js";
8
8
  import { R as RHF_PERIOD_KEY_COMPONENT } from "./constants.js";
9
9
  import clsx from "clsx";
10
- import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
10
+ import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
11
11
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
12
12
  import { R as RHFPeriodSlots } from "./slots/RHFPeriodEnum.js";
13
13
  import { H as HelperError } from "../../HelperError/HelperError.js";
@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import { forwardRef, useId } from "react";
3
3
  import { useFormContext, Controller } from "react-hook-form";
4
4
  import { InputAdornment } from "@mui/material";
5
- import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
5
+ import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
6
6
  import { R as RHF_TEXT_FIELD_KEY_COMPONENT } from "./constant.js";
7
7
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
8
8
  import clsx from "clsx";
@@ -8,9 +8,9 @@ import { useCallback } from "react";
8
8
  import { D as DistanceToNowFormatter } from "../../../../../formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
9
9
  import { L as LAT_LON_FIXED_DIGITS } from "./constants.js";
10
10
  import { M as MyDevice } from "../../../../../gclick/MyDevice/MyDevice.js";
11
- import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
12
11
  import { M as MyDeviceStatus } from "../../../../../gclick/MyDeviceStatus/MyDeviceStatus.js";
13
12
  import { C as CourseFormatter } from "../../../../../formatters/CourseFormatter/CourseFormatter.js";
13
+ import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
14
14
  const MapPopupMyGps = (props) => {
15
15
  const { properties, isOpen, popupOptions } = props;
16
16
  const { keepInView = true, autoPan = true, ...others } = popupOptions || {};
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
3
- import { g as getNameDataTestId } from "../../../test/getNameDataTestId.js";
3
+ import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
4
4
  import { P as PATH_EXPANDED_ICON, A as ACCORDION_KEY } from "./constants.js";
5
5
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
6
6
  import { A as AccordionRootStyled, a as AccordionSummaryStyled, I as IconExpandedStyled, b as IconLabelStyled, L as LabelStyled, c as AccordionDetailsStyled } from "./slots/AccordionSlots.js";
@@ -3,7 +3,7 @@ import { forwardRef } from "react";
3
3
  import { useModuleSkeleton } from "@m4l/core";
4
4
  import { S as SkeletonAvatar } from "./subcomponents/SkeletonAvatar/index.js";
5
5
  import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
6
- import { g as getNameDataTestId } from "../../../test/getNameDataTestId.js";
6
+ import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
7
7
  import { A as AvatarRootStyled } from "./slots/AvatarSlots.js";
8
8
  import { A as AVATAR_KEY } from "./constants.js";
9
9
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
@@ -1,6 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { T as TEST_PROP_ID } from "../../../../../test/constants_no_mock.js";
3
- import { g as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
3
+ import { a as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
4
4
  import { A as AVATAR_KEY } from "../../constants.js";
5
5
  import { S as Skeleton } from "../../../Skeleton/Skeleton.js";
6
6
  const SkeletonAvatar = (props) => {
@@ -3,7 +3,7 @@ import { B as BadgeRootStyled } from "./slots/BadgeSlots.js";
3
3
  import clsx from "clsx";
4
4
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
5
5
  import { B as BADGE_LABEL_KEY_COMPONENT } from "./constants.js";
6
- import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
6
+ import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
7
7
  import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
8
8
  import { B as BadgeSlots } from "./slots/BadgeEnum.js";
9
9
  const Badge = (props) => {
@@ -1,6 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { useModuleSkeleton } from "@m4l/core";
3
- import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
3
+ import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
4
4
  import { S as SkeletonStyled, R as RootStyled } from "./slots/CircularProgressSlots.js";
5
5
  import { C as CircularProgressSlots } from "./slots/CircularProgressEnum.js";
6
6
  import { C as CIRCULAR_PROGRESS_PREFIX } from "./constants.js";
@@ -1,6 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { forwardRef } from "react";
3
- import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
3
+ import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
4
4
  import { D as DIALOG_KEY_COMPONENT } from "./constants.js";
5
5
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
6
6
  import clsx from "clsx";