@m4l/components 9.1.46 → 9.1.48

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 (29) hide show
  1. package/@types/types.d.ts +36 -27
  2. package/components/Label/Label.styles.js +10 -12
  3. package/components/PropertyValue/PropertyValue.d.ts +5 -1
  4. package/components/PropertyValue/PropertyValue.js +53 -166
  5. package/components/PropertyValue/PropertyValue.styles.d.ts +2 -0
  6. package/components/PropertyValue/PropertyValue.styles.js +99 -0
  7. package/components/PropertyValue/constants.d.ts +1 -0
  8. package/components/PropertyValue/constants.js +2 -0
  9. package/components/PropertyValue/slots/PropertyValueEnum.d.ts +5 -0
  10. package/components/PropertyValue/slots/PropertyValueEnum.js +9 -0
  11. package/components/PropertyValue/slots/PropertyValueSlots.d.ts +9 -0
  12. package/components/PropertyValue/slots/PropertyValueSlots.js +21 -0
  13. package/components/PropertyValue/slots/index.d.ts +2 -0
  14. package/components/PropertyValue/tests/PropertyValue.test.d.ts +1 -0
  15. package/components/PropertyValue/types.d.ts +77 -3
  16. package/components/WindowConfirm/WindowConfirm.styles.js +18 -33
  17. package/components/mui_extended/Button/Button.js +1 -1
  18. package/components/mui_extended/TextField/TextField.js +1 -1
  19. package/components/mui_extended/TextField/TextField.styles.js +169 -172
  20. package/components/mui_extended/TextField/types.d.ts +1 -1
  21. package/package.json +1 -1
  22. package/components/PropertyValue/classes/constants.d.ts +0 -1
  23. package/components/PropertyValue/classes/constants.js +0 -4
  24. package/components/PropertyValue/classes/index.d.ts +0 -13
  25. package/components/PropertyValue/classes/index.js +0 -40
  26. package/components/PropertyValue/classes/types.d.ts +0 -12
  27. package/components/PropertyValue/styles.js +0 -7
  28. package/components/PropertyValue/tests/constants.d.ts +0 -1
  29. package/components/PropertyValue/tests/utils.d.ts +0 -5
package/components/PropertyValue/types.d.ts CHANGED
@@ -1,23 +1,97 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { LabelProps } from '../Label/types';
3
+ import { PROPERTY_VALUE_KEY_COMPONENT } from './constants';
4
+ import { Theme } from '@mui/material';
5
+ import { OverridesStyleRules } from '@mui/material/styles/overrides';
6
+ import { PropertyValueSlots } from './slots/PropertyValueEnum';
7
+ /**
8
+ * Tipos de valores posibles para los componentes dentro de `PropertyValue`.
9
+ */
10
+ export type PropertyValueType = keyof typeof PropertyValueSlots;
11
+ /**
12
+ * Propiedades relacionadas con la configuración de la propiedad (`property`) en el componente `PropertyValue`.
13
+ */
3
14
  export interface PropertyProps {
15
+ /**
16
+ * Ancho del contenedor de la propiedad, en píxeles.
17
+ */
4
18
  propertyWidth?: number;
5
- iconProperty?: string;
19
+ /**
20
+ * Icono que se muestra junto a la propiedad.
21
+ */
22
+ startAdornment?: ReactNode;
6
23
  }
24
+ /**
25
+ * Propiedades relacionadas con la configuración del valor (`value`) en el componente `PropertyValue`.
26
+ */
7
27
  export interface ValueProps {
28
+ /**
29
+ * Altura del contenedor del valor, en píxeles o como cadena (e.g., `'auto'`).
30
+ */
8
31
  valueHeight?: number | string;
32
+ /**
33
+ * @deprecated Esta propiedad está obsoleta y será eliminada en futuras versiones.
34
+ * Utiliza `semanticWidth` o `valueWidthMobile` en su lugar.
35
+ *
36
+ * Ancho del contenedor del valor como porcentaje para escritorios.
37
+ */
9
38
  valueWidth?: number;
39
+ /**
40
+ * Ancho del contenedor del valor como porcentaje para dispositivos móviles.
41
+ */
10
42
  valueWidthMobile?: number;
11
43
  }
44
+ /**
45
+ * Valores posibles para la propiedad semanticWidth
46
+ */
47
+ export type SemanticWidthOptions = 'email' | 'shortName' | 'mediumName' | 'bigName' | 'shortId' | 'mediumId' | 'bigId' | 'shortDescription' | 'mediumDescription' | 'bigDescription' | 'shortNumber' | 'mediumNumber' | 'bigNumber' | 'percentNumber' | 'fullWidth';
48
+ /**
49
+ * Propiedades principales para el componente `PropertyValue`.
50
+ */
12
51
  export interface PropertyValueProps extends PropertyProps, ValueProps, Omit<LabelProps, 'label'> {
52
+ /**
53
+ * Nombre de la propiedad que se muestra.
54
+ */
13
55
  property: string;
56
+ /**
57
+ * Valor asociado a la propiedad. Puede ser un número, una cadena o un nodo React.
58
+ */
14
59
  value: number | string | ReactNode;
60
+ /**
61
+ * Indica si el componente debe mostrarse como parte de un formulario.
62
+ */
15
63
  isForm?: boolean;
64
+ /**
65
+ * Clase CSS personalizada para el componente.
66
+ */
16
67
  className?: string;
68
+ /**
69
+ * Identificador de prueba utilizado para pruebas automatizadas.
70
+ */
17
71
  dataTestId?: string;
72
+ /**
73
+ * Indica si el componente está deshabilitado.
74
+ */
18
75
  disabled?: boolean;
76
+ /**
77
+ * Define el ancho semántico del componente según el contenido.
78
+ */
79
+ semanticWidth?: SemanticWidthOptions;
19
80
  }
20
- export interface OwnerState extends Pick<PropertyValueProps, 'disabled'> {
81
+ /**
82
+ * Estado del propietario para el componente `PropertyValue`, utilizado para personalizar estilos y comportamientos.
83
+ */
84
+ export interface PropertyVaLueOwnerState extends Pick<PropertyValueProps, 'disabled' | 'semanticWidth'> {
85
+ /**
86
+ * Indica si el componente está en modo formulario.
87
+ */
21
88
  isForm: boolean;
22
- isMobile: boolean;
89
+ /**
90
+ * Propiedades adicionales para estilos o comportamientos personalizados.
91
+ */
92
+ [key: string]: unknown;
23
93
  }
94
+ /**
95
+ * Definición de estilos para el componente `PropertyValue`.
96
+ */
97
+ export type PropertyValueStyles = OverridesStyleRules<PropertyValueType, typeof PROPERTY_VALUE_KEY_COMPONENT, Theme>;
package/components/WindowConfirm/WindowConfirm.styles.js CHANGED
@@ -3,8 +3,8 @@ const windowConfirmStyles = {
3
3
  * Wrapper Window Confirm Styles
4
4
  * @author cesar - automatic
5
5
  * @createdAt 2024-11-21 08:55:01 - automatic
6
- * @updatedAt 2024-12-30 14:36:09 - automatic
7
- * @updatedUser Andrés Quintero - automatic
6
+ * @updatedAt 2024-12-20 12:09:44 - automatic
7
+ * @updatedUser cesar - automatic
8
8
  */
9
9
  wrapperWindowConfirm: ({ theme, ownerState }) => ({
10
10
  display: "flex",
@@ -36,10 +36,10 @@ const windowConfirmStyles = {
36
36
  * Wrapper Window Confirm Content Styles
37
37
  * @author cesar - automatic
38
38
  * @createdAt 2024-11-22 10:58:23 - automatic
39
- * @updatedAt 2024-12-30 14:36:09 - automatic
40
- * @updatedUser Andrés Quintero - automatic
39
+ * @updatedAt 2024-12-20 12:09:44 - automatic
40
+ * @updatedUser cesar - automatic
41
41
  */
42
- windowConfirmContent: ({ theme, ownerState }) => ({
42
+ windowConfirmContent: ({ theme }) => ({
43
43
  display: "flex",
44
44
  padding: theme.vars.size.baseSpacings.sp0,
45
45
  width: "100%",
@@ -48,29 +48,14 @@ const windowConfirmStyles = {
48
48
  alignItems: "center",
49
49
  gap: theme.vars.size.baseSpacings.sp3,
50
50
  alignSelf: "stretch",
51
- borderRadius: theme.vars.size.borderRadius.r0,
52
- ...theme.generalSettings.isMobile ? {
53
- ...ownerState.windowBaseSize === "small" && {
54
- height: theme.vars.size.mobile.small.container
55
- },
56
- ...ownerState.windowBaseSize === "medium" && {
57
- height: theme.vars.size.mobile.medium.container
58
- }
59
- } : {
60
- ...ownerState.windowBaseSize === "small" && {
61
- height: theme.vars.size.desktop.small.container
62
- },
63
- ...ownerState.windowBaseSize === "medium" && {
64
- height: theme.vars.size.desktop.medium.container
65
- }
66
- }
51
+ borderRadius: theme.vars.size.borderRadius.r0
67
52
  }),
68
53
  /**
69
54
  * Container Illustration Styles
70
55
  * @author cesar - automatic
71
56
  * @createdAt 2024-11-19 11:57:37 - automatic
72
- * @updatedAt 2024-12-30 14:36:09 - automatic
73
- * @updatedUser Andrés Quintero - automatic
57
+ * @updatedAt 2024-12-20 12:09:44 - automatic
58
+ * @updatedUser cesar - automatic
74
59
  */
75
60
  illustrationContainer: ({ theme }) => ({
76
61
  display: "flex",
@@ -85,8 +70,8 @@ const windowConfirmStyles = {
85
70
  * Icon Illustration Styles
86
71
  * @author cesar - automatic
87
72
  * @createdAt 2024-11-19 11:57:37 - automatic
88
- * @updatedAt 2024-12-30 14:36:09 - automatic
89
- * @updatedUser Andrés Quintero - automatic
73
+ * @updatedAt 2024-12-20 12:09:44 - automatic
74
+ * @updatedUser cesar - automatic
90
75
  */
91
76
  illustrationIcon: () => ({
92
77
  width: "auto !important",
@@ -99,8 +84,8 @@ const windowConfirmStyles = {
99
84
  * Text Content Styles
100
85
  * @author cesar - automatic
101
86
  * @createdAt 2024-11-19 11:57:37 - automatic
102
- * @updatedAt 2024-12-30 14:36:09 - automatic
103
- * @updatedUser Andrés Quintero - automatic
87
+ * @updatedAt 2024-12-20 12:09:44 - automatic
88
+ * @updatedUser cesar - automatic
104
89
  */
105
90
  textContent: ({ theme }) => ({
106
91
  display: "flex",
@@ -113,8 +98,8 @@ const windowConfirmStyles = {
113
98
  * Title Illustration Styles
114
99
  * @author cesar - automatic
115
100
  * @createdAt 2024-11-19 11:57:37 - automatic
116
- * @updatedAt 2024-12-30 14:36:09 - automatic
117
- * @updatedUser Andrés Quintero - automatic
101
+ * @updatedAt 2024-12-20 12:09:44 - automatic
102
+ * @updatedUser cesar - automatic
118
103
  */
119
104
  title: ({ theme }) => ({
120
105
  color: theme.vars.palette.text.primary,
@@ -125,8 +110,8 @@ const windowConfirmStyles = {
125
110
  * Message Illustration Styles
126
111
  * @author cesar - automatic
127
112
  * @createdAt 2024-11-21 08:55:01 - automatic
128
- * @updatedAt 2024-12-30 14:36:09 - automatic
129
- * @updatedUser Andrés Quintero - automatic
113
+ * @updatedAt 2024-12-20 12:09:44 - automatic
114
+ * @updatedUser cesar - automatic
130
115
  */
131
116
  message: ({ theme }) => ({
132
117
  textAlign: "center",
@@ -136,8 +121,8 @@ const windowConfirmStyles = {
136
121
  * Actions Container Styles
137
122
  * @author cesar - automatic
138
123
  * @createdAt 2024-11-19 11:57:37 - automatic
139
- * @updatedAt 2024-12-30 14:36:09 - automatic
140
- * @updatedUser Andrés Quintero - automatic
124
+ * @updatedAt 2024-12-20 12:09:44 - automatic
125
+ * @updatedUser cesar - automatic
141
126
  */
142
127
  actionsContainer: ({ theme }) => ({
143
128
  padding: theme.vars.size.baseSpacings.sp3
package/components/mui_extended/Button/Button.js CHANGED
@@ -78,7 +78,7 @@ const Button = forwardRef((props, ref) => {
78
78
  ref,
79
79
  ...others,
80
80
  children: [
81
- /* @__PURE__ */ jsx(TextButtonStyled, { ownerState: { ...ownerState }, color: adjustedColor, children: label }),
81
+ /* @__PURE__ */ jsx(TextButtonStyled, { ownerState: { ...ownerState }, color: adjustedColor, size: adjustedSize, children: label }),
82
82
  props.children
83
83
  ]
84
84
  }
package/components/mui_extended/TextField/TextField.js CHANGED
@@ -29,7 +29,7 @@ const TextField = (props) => {
29
29
  theme.palette.default
30
30
  );
31
31
  const ownerState = {
32
- textFieldSizes: adjustedSize,
32
+ size: adjustedSize,
33
33
  textFieldDisabled: disabled,
34
34
  textFieldPaletteColor: paletteColor,
35
35
  textFieldVariant: variant,
package/components/mui_extended/TextField/TextField.styles.js CHANGED
@@ -1,4 +1,3 @@
1
- import { a as TEXT_FIELD_CLASSES } from "./constants.js";
2
1
  const textFieldStyles = {
3
2
  /**
4
3
  * Estilos personalizados para el componente TextField.
@@ -8,152 +7,161 @@ const textFieldStyles = {
8
7
  * @updatedUser Andrés Quintero - automatic
9
8
  */
10
9
  root: ({ ownerState, theme }) => ({
11
- [`&.${TEXT_FIELD_CLASSES.root}`]: {
12
- width: "100%",
13
- padding: 0,
14
- borderRadius: theme.vars.size.borderRadius.r1,
15
- display: "flex",
16
- // Estilos específicos para el tamaño small
17
- ...ownerState.size === "small" && {
18
- ...theme.generalSettings.isMobile ? {
19
- height: theme.vars.size.mobile.small.action,
20
- minHeight: theme.vars.size.mobile.small.action
21
- } : {
22
- height: theme.vars.size.desktop.small.action,
23
- minHeight: theme.vars.size.desktop.small.action
24
- }
25
- },
26
- // Estilos específicos para el tamaño medium
27
- ...ownerState.size === "medium" && {
28
- ...theme.generalSettings.isMobile ? {
29
- height: theme.vars.size.mobile.medium.action,
30
- minHeight: theme.vars.size.mobile.medium.action
31
- } : {
32
- height: theme.vars.size.desktop.medium.action,
33
- minHeight: theme.vars.size.desktop.medium.action
34
- }
35
- },
36
- // Variant Outlined TextField
37
- ...ownerState.textFieldVariant === "outlined" && {
38
- "& .MuiInputBase-root": {
39
- padding: 0,
10
+ width: "100%",
11
+ padding: 0,
12
+ borderRadius: theme.vars.size.borderRadius.r1,
13
+ display: "flex",
14
+ // Estilos específicos para el tamaño small
15
+ ...ownerState.size === "small" && {
16
+ ...theme.generalSettings.isMobile ? {
17
+ height: theme.vars.size.mobile.small.action,
18
+ minHeight: theme.vars.size.mobile.small.action
19
+ } : {
20
+ height: theme.vars.size.desktop.small.action,
21
+ minHeight: theme.vars.size.desktop.small.action
22
+ }
23
+ },
24
+ // Estilos específicos para el tamaño medium
25
+ ...ownerState.size === "medium" && {
26
+ ...theme.generalSettings.isMobile ? {
27
+ height: theme.vars.size.mobile.medium.action,
28
+ minHeight: theme.vars.size.mobile.medium.action
29
+ } : {
30
+ height: theme.vars.size.desktop.medium.action,
31
+ minHeight: theme.vars.size.desktop.medium.action
32
+ }
33
+ },
34
+ // Variant Outlined TextField
35
+ ...ownerState.textFieldVariant === "outlined" && {
36
+ "& .MuiInputBase-root": {
37
+ padding: 0,
38
+ minHeight: 0,
39
+ height: "inherit",
40
+ paddingLeft: theme.vars.size.baseSpacings.sp1,
41
+ borderRadius: theme.vars.size.borderRadius.r1,
42
+ '.MuiIconButton-root [class*="M4LIcon-icon"]': {
43
+ backgroundColor: theme.vars.palette.text.primary
44
+ },
45
+ '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
46
+ backgroundColor: theme.vars.palette.text.primary
47
+ },
48
+ "& .MuiOutlinedInput-notchedOutline": {
40
49
  minHeight: 0,
41
- height: "inherit",
42
- paddingLeft: theme.vars.size.baseSpacings.sp1,
43
- borderRadius: theme.vars.size.borderRadius.r1,
44
- '.MuiIconButton-root [class*="M4LIcon-icon"]': {
50
+ border: theme.vars.size.borderStroke.actionInput,
51
+ borderColor: ownerState.textFieldError ? ownerState.textFieldPaletteColor?.main : theme.vars.palette.border.default
52
+ },
53
+ //Estilo Hover para primary para el Icono e IconButton
54
+ "&:hover": {
55
+ backgroundColor: ownerState.textFieldError ? "inherit" : theme.palette.primary.hoverOpacity
56
+ },
57
+ //Estilo Focus para primary para el Icono e IconButton
58
+ ":focus-within": {
59
+ borderColor: theme.palette.border.main,
60
+ '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
45
61
  backgroundColor: theme.vars.palette.text.primary
46
62
  },
47
- '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
63
+ '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
48
64
  backgroundColor: theme.vars.palette.text.primary
49
- },
50
- "& .MuiOutlinedInput-notchedOutline": {
51
- minHeight: 0,
52
- border: theme.vars.size.borderStroke.actionInput,
53
- borderColor: ownerState.textFieldError ? ownerState.textFieldPaletteColor?.main : theme.vars.palette.border.default
54
- },
55
- //Estilo Hover para primary para el Icono e IconButton
56
- "&:hover": {
57
- backgroundColor: ownerState.textFieldError ? "inherit" : theme.palette.primary.hoverOpacity
58
- },
59
- //Estilo Focus para primary para el Icono e IconButton
65
+ }
66
+ },
67
+ //Estilo Active para primary para el Icono e IconButton
68
+ "&:active": {
60
69
  ":focus-within": {
61
- borderColor: theme.palette.border.main,
62
70
  '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
63
71
  backgroundColor: theme.vars.palette.text.primary
64
72
  },
65
73
  '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
66
74
  backgroundColor: theme.vars.palette.text.primary
67
75
  }
68
- },
69
- //Estilo Active para primary para el Icono e IconButton
70
- "&:active": {
71
- ":focus-within": {
72
- '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
73
- backgroundColor: theme.vars.palette.text.primary
74
- },
75
- '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
76
- backgroundColor: theme.vars.palette.text.primary
77
- }
76
+ }
77
+ },
78
+ //Estilos del InputBase
79
+ "& .MuiInputBase-input": {
80
+ padding: "0px",
81
+ paddingRight: theme.vars.size.baseSpacings.sp1,
82
+ paddingLeft: theme.vars.size.baseSpacings.sp1,
83
+ height: "inherit",
84
+ //Estilos del InputBase en hover
85
+ "&:hover ~ .MuiOutlinedInput-notchedOutline": {
86
+ ...ownerState.textFieldError && {
87
+ borderColor: ownerState.textFieldError ? theme.vars.palette.border.error : theme.vars.palette.border.default
78
88
  }
79
89
  },
80
- //Estilos del InputBase
81
- "& .MuiInputBase-input": {
82
- padding: "0px",
83
- paddingRight: theme.vars.size.baseSpacings.sp1,
84
- paddingLeft: theme.vars.size.baseSpacings.sp1,
85
- height: "inherit",
86
- //Estilos del InputBase en hover
87
- "&:hover ~ .MuiOutlinedInput-notchedOutline": {
88
- ...ownerState.textFieldError && {
89
- borderColor: ownerState.textFieldError ? theme.vars.palette.border.error : theme.vars.palette.border.default
90
- }
91
- },
92
- // Estilos del InputBase en Focus
93
- "&:focus ~ .MuiOutlinedInput-notchedOutline": {
94
- borderColor: ownerState.textFieldError ? theme.vars.palette.border.error : ownerState.textFieldPaletteColor?.selected
95
- },
96
- //Estilos del InputBase en placeholder default
97
- "&::placeholder": {
98
- color: theme.palette.text.disabled
99
- }
90
+ // Estilos del InputBase en Focus
91
+ "&:focus ~ .MuiOutlinedInput-notchedOutline": {
92
+ borderColor: ownerState.textFieldError ? theme.vars.palette.border.error : ownerState.textFieldPaletteColor?.selected
100
93
  },
101
- //Este estilo se asegura de que los campos de entrada que han sido autocompletados por el navegador no tengan ningún relleno adicional
102
- "& .MuiOutlinedInput-input:-webkit-autofill": {
103
- padding: 0
94
+ //Estilos del InputBase en placeholder default
95
+ "&::placeholder": {
96
+ color: theme.palette.text.disabled
97
+ }
98
+ },
99
+ //Este estilo se asegura de que los campos de entrada que han sido autocompletados por el navegador no tengan ningún relleno adicional
100
+ "& .MuiOutlinedInput-input:-webkit-autofill": {
101
+ padding: 0
102
+ },
103
+ // Historia Disabled para Outlined
104
+ ...ownerState.textFieldDisabled && {
105
+ borderColor: theme.palette.border.disabled,
106
+ pointerEvents: ownerState.textFieldDisabled ? "none" : "auto",
107
+ "&:hover": {
108
+ pointerEvents: ownerState.textFieldDisabled ? "none" : "auto"
104
109
  },
105
- // Historia Disabled para Outlined
106
- ...ownerState.textFieldDisabled && {
107
- borderColor: theme.palette.border.disabled,
108
- pointerEvents: ownerState.textFieldDisabled ? "none" : "auto",
109
- "&:hover": {
110
- pointerEvents: ownerState.textFieldDisabled ? "none" : "auto"
111
- },
112
- "& .MuiInputBase-input::placeholder": {
113
- color: theme.palette.text.disabled
114
- },
115
- '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
116
- backgroundColor: theme.vars.palette.text.disabled
117
- },
118
- '.MuiIconButton-root [class*="M4LIcon-icon"]': {
119
- backgroundColor: theme.vars.palette.text.disabled
120
- }
110
+ "& .MuiInputBase-input::placeholder": {
111
+ color: theme.palette.text.disabled
112
+ },
113
+ '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
114
+ backgroundColor: theme.vars.palette.text.disabled
115
+ },
116
+ '.MuiIconButton-root [class*="M4LIcon-icon"]': {
117
+ backgroundColor: theme.vars.palette.text.disabled
121
118
  }
122
119
  }
123
- },
124
- // Variant Text TextField
125
- ...ownerState.textFieldVariant === "text" && {
120
+ }
121
+ },
122
+ // Variant Text TextField
123
+ ...ownerState.textFieldVariant === "text" && {
124
+ borderColor: "transparent",
125
+ "& .MuiInputBase-root": {
126
+ padding: 0,
127
+ minHeight: 0,
128
+ height: "inherit",
126
129
  borderColor: "transparent",
127
- "& .MuiInputBase-root": {
128
- padding: 0,
130
+ paddingLeft: theme.vars.size.baseSpacings.sp1,
131
+ borderRadius: theme.vars.size.borderRadius.r1,
132
+ '.MuiIconButton-root [class*="M4LIcon-icon"]': {
133
+ backgroundColor: theme.vars.palette.text.primary
134
+ },
135
+ '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
136
+ backgroundColor: theme.vars.palette.text.primary
137
+ },
138
+ //Estilos para los bordes del campo de texto
139
+ "& .MuiOutlinedInput-notchedOutline": {
129
140
  minHeight: 0,
130
- height: "inherit",
131
- borderColor: "transparent",
132
- paddingLeft: theme.vars.size.baseSpacings.sp1,
133
- borderRadius: theme.vars.size.borderRadius.r1,
141
+ border: theme.vars.size.borderStroke.actionInput,
142
+ borderColor: ownerState.textFieldError ? ownerState.textFieldPaletteColor?.main : theme.vars.palette.border.default,
143
+ borderLeft: "transparent",
144
+ borderTop: "transparent",
145
+ borderRight: "transparent"
146
+ },
147
+ //Estilo Hover para primary para el Icono e IconButton
148
+ "&:hover": {
149
+ backgroundColor: ownerState.textFieldError ? "inherit" : theme.palette.primary.hoverOpacity,
134
150
  '.MuiIconButton-root [class*="M4LIcon-icon"]': {
135
151
  backgroundColor: theme.vars.palette.text.primary
136
- },
137
- '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
152
+ }
153
+ },
154
+ //Estilo Focus para primary para el Icono e IconButton
155
+ ":focus-within": {
156
+ '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
138
157
  backgroundColor: theme.vars.palette.text.primary
139
158
  },
140
- //Estilos para los bordes del campo de texto
141
- "& .MuiOutlinedInput-notchedOutline": {
142
- minHeight: 0,
143
- border: theme.vars.size.borderStroke.actionInput,
144
- borderColor: ownerState.textFieldError ? ownerState.textFieldPaletteColor?.main : theme.vars.palette.border.default,
145
- borderLeft: "transparent",
146
- borderTop: "transparent",
147
- borderRight: "transparent"
148
- },
149
- //Estilo Hover para primary para el Icono e IconButton
150
- "&:hover": {
151
- backgroundColor: ownerState.textFieldError ? "inherit" : theme.palette.primary.hoverOpacity,
152
- '.MuiIconButton-root [class*="M4LIcon-icon"]': {
153
- backgroundColor: theme.vars.palette.text.primary
154
- }
155
- },
156
- //Estilo Focus para primary para el Icono e IconButton
159
+ '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
160
+ backgroundColor: theme.vars.palette.text.primary
161
+ }
162
+ },
163
+ //Estilo Active para primary para el Icono e IconButton
164
+ "&:active": {
157
165
  ":focus-within": {
158
166
  '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
159
167
  backgroundColor: theme.vars.palette.text.primary
@@ -161,58 +169,47 @@ const textFieldStyles = {
161
169
  '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
162
170
  backgroundColor: theme.vars.palette.text.primary
163
171
  }
172
+ }
173
+ },
174
+ //Estilos del InputBase
175
+ "& .MuiInputBase-input": {
176
+ padding: "0px",
177
+ paddingRight: theme.vars.size.baseSpacings.sp1,
178
+ paddingLeft: theme.vars.size.baseSpacings.sp1,
179
+ height: "inherit",
180
+ //Estilo Focus del InputBase
181
+ "&:focus ~ .MuiOutlinedInput-notchedOutline": {
182
+ borderColor: ownerState.textFieldError ? theme.vars.palette.border.error : ownerState.textFieldPaletteColor?.selected
164
183
  },
165
- //Estilo Active para primary para el Icono e IconButton
166
- "&:active": {
167
- ":focus-within": {
168
- '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
169
- backgroundColor: theme.vars.palette.text.primary
170
- },
171
- '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
172
- backgroundColor: theme.vars.palette.text.primary
173
- }
174
- }
184
+ // Estilos del InputBase en placeholder default
185
+ "&::placeholder": {
186
+ color: theme.palette.text.disabled
187
+ }
188
+ },
189
+ //Este estilo se asegura de que los campos de entrada que han sido autocompletados por el navegador no tengan ningún relleno adicional
190
+ "& .MuiOutlinedInput-input:-webkit-autofill": {
191
+ padding: 0
192
+ },
193
+ // Historia Disabled
194
+ ...ownerState.textFieldDisabled && {
195
+ "& .MuiOutlinedInput-notchedOutline": {
196
+ borderColor: theme.palette.border.disabled,
197
+ borderTop: theme.palette.border.disabled,
198
+ borderLeft: "transparent",
199
+ borderRight: "transparent"
175
200
  },
176
- //Estilos del InputBase
177
- "& .MuiInputBase-input": {
178
- padding: "0px",
179
- paddingRight: theme.vars.size.baseSpacings.sp1,
180
- paddingLeft: theme.vars.size.baseSpacings.sp1,
181
- height: "inherit",
182
- //Estilo Focus del InputBase
183
- "&:focus ~ .MuiOutlinedInput-notchedOutline": {
184
- borderColor: ownerState.textFieldError ? theme.vars.palette.border.error : ownerState.textFieldPaletteColor?.selected
185
- },
186
- // Estilos del InputBase en placeholder default
187
- "&::placeholder": {
188
- color: theme.palette.text.disabled
189
- }
201
+ pointerEvents: ownerState.textFieldDisabled ? "none" : "auto",
202
+ "&:hover": {
203
+ pointerEvents: ownerState.textFieldDisabled ? "none" : "auto"
190
204
  },
191
- //Este estilo se asegura de que los campos de entrada que han sido autocompletados por el navegador no tengan ningún relleno adicional
192
- "& .MuiOutlinedInput-input:-webkit-autofill": {
193
- padding: 0
205
+ "& .MuiInputBase-input::placeholder": {
206
+ color: theme.palette.text.disabled
194
207
  },
195
- // Historia Disabled
196
- ...ownerState.textFieldDisabled && {
197
- "& .MuiOutlinedInput-notchedOutline": {
198
- borderColor: theme.palette.border.disabled,
199
- borderTop: theme.palette.border.disabled,
200
- borderLeft: "transparent",
201
- borderRight: "transparent"
202
- },
203
- pointerEvents: ownerState.textFieldDisabled ? "none" : "auto",
204
- "&:hover": {
205
- pointerEvents: ownerState.textFieldDisabled ? "none" : "auto"
206
- },
207
- "& .MuiInputBase-input::placeholder": {
208
- color: theme.palette.text.disabled
209
- },
210
- '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
211
- backgroundColor: theme.vars.palette.text.disabled
212
- },
213
- '.MuiIconButton-root [class*="M4LIcon-icon"]': {
214
- backgroundColor: theme.vars.palette.text.disabled
215
- }
208
+ '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
209
+ backgroundColor: theme.vars.palette.text.disabled
210
+ },
211
+ '.MuiIconButton-root [class*="M4LIcon-icon"]': {
212
+ backgroundColor: theme.vars.palette.text.disabled
216
213
  }
217
214
  }
218
215
  }
package/components/mui_extended/TextField/types.d.ts CHANGED
@@ -65,7 +65,7 @@ export interface TextFieldOwnerState {
65
65
  /**
66
66
  * Tamaño del campo de texto.
67
67
  */
68
- textFieldSizes: Extract<Sizes, 'small' | 'medium'>;
68
+ size: Extract<Sizes, 'small' | 'medium'>;
69
69
  /**
70
70
  * Indica si el campo de texto es error.
71
71
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.1.46",
3
+ "version": "9.1.48",
4
4
  "license": "UNLICENSED",
5
5
  "lint-staged": {
6
6
  "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
package/components/PropertyValue/classes/constants.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const componentName = "M4LPropertyValue";
package/components/PropertyValue/classes/constants.js DELETED
@@ -1,4 +0,0 @@
1
- const componentName = "M4LPropertyValue";
2
- export {
3
- componentName as c
4
- };