@m4l/components 9.1.103 → 9.1.105

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 (30) hide show
  1. package/@types/types.d.ts +10 -0
  2. package/components/CommonActions/components/ActionFormIntro/ActionFormIntro.d.ts +9 -0
  3. package/components/CommonActions/components/ActionFormIntro/ActionFormIntro.js +34 -0
  4. package/components/CommonActions/components/ActionFormIntro/ActionFromIntro.styles.d.ts +2 -0
  5. package/components/CommonActions/components/ActionFormIntro/ActionFromIntro.styles.js +7 -0
  6. package/components/CommonActions/components/ActionFormIntro/constanst.d.ts +6 -0
  7. package/components/CommonActions/components/ActionFormIntro/constanst.js +7 -0
  8. package/components/CommonActions/components/ActionFormIntro/slots/ActionFormIntroEnum.d.ts +3 -0
  9. package/components/CommonActions/components/ActionFormIntro/slots/ActionFormIntroEnum.js +7 -0
  10. package/components/CommonActions/components/ActionFormIntro/slots/ActionFormIntroSlots.d.ts +3 -0
  11. package/components/CommonActions/components/ActionFormIntro/slots/ActionFormIntroSlots.js +12 -0
  12. package/components/CommonActions/components/ActionFormIntro/slots/index.d.ts +2 -0
  13. package/components/CommonActions/components/ActionFormIntro/slots/index.js +1 -0
  14. package/components/CommonActions/components/ActionFormIntro/test/ActionFormIntro.test.d.ts +1 -0
  15. package/components/CommonActions/components/ActionFormIntro/types.d.ts +14 -0
  16. package/components/CommonActions/dictionary.d.ts +3 -0
  17. package/components/CommonActions/dictionary.js +4 -0
  18. package/components/CommonActions/index.d.ts +1 -1
  19. package/components/MenuActions/types.d.ts +2 -2
  20. package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/MyActions/index.js +1 -1
  21. package/components/mui_extended/Autocomplete/renderOptions/index.d.ts +4 -0
  22. package/components/mui_extended/Autocomplete/renderOptions/index.js +1 -1
  23. package/components/mui_extended/MenuItem/MenuItem.d.ts +4 -0
  24. package/components/mui_extended/MenuItem/MenuItem.js +2 -10
  25. package/components/mui_extended/MenuItem/MenuItem.styles.js +77 -94
  26. package/components/mui_extended/MenuItem/types.d.ts +4 -8
  27. package/index.js +7 -6
  28. package/package.json +1 -1
  29. package/components/CommonActions/components/ActionFormIntro/index.d.ts +0 -5
  30. package/components/CommonActions/components/ActionFormIntro/index.js +0 -30
package/@types/types.d.ts CHANGED
@@ -133,6 +133,9 @@ import { RHFCheckBoxOwnerState, RHFCheckBoxSlotsType } from '../components/hook-
133
133
  import { AreasAdminOwnerState, AreasAdminType } from '../components/areas/components/AreasAdmin/types';
134
134
  import { DateTimePickerOwnerState, DateTimePickerSlotsType } from '../components/mui_extended/DateTimePicker/types';
135
135
  import { DividerOwnerState, DividerSlotsType } from '../components/mui_extended/Divider/types';
136
+ import { ActionFormIntroOwnerState, ActionFormIntroSlotsType } from '../components/CommonActions/components/ActionFormIntro/types';
137
+
138
+
136
139
  declare module '@mui/material/styles' {
137
140
  // Define the slots in the theme
138
141
  interface ComponentNameToClassKey {
@@ -197,6 +200,7 @@ declare module '@mui/material/styles' {
197
200
  M4LStack: StackSlotsType;
198
201
  M4LDateTimePicker: DateTimePickerSlotsType;
199
202
  M4LDivider: DividerSlotsType;
203
+ M4LActionFormIntro: ActionFormIntroSlotsType;
200
204
  }
201
205
  interface ComponentsPropsList {
202
206
  // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -261,6 +265,7 @@ declare module '@mui/material/styles' {
261
265
  M4LStack: Partial<StackOwnerState>;
262
266
  M4LDateTimePicker: Partial<DateTimePickerOwnerState>;
263
267
  M4LDivider: Partial<DividerOwnerState>;
268
+ M4LActionFormIntro : Partial<ActionFormIntroOwnerState>;
264
269
  }
265
270
  interface Components {
266
271
  M4LDynamicFilter?: {
@@ -562,6 +567,11 @@ declare module '@mui/material/styles' {
562
567
  styleOverrides?: ComponentsOverrides<Theme>['M4LDateTimePicker'];
563
568
  variants?: ComponentsVariants['M4LDateTimePicker'];
564
569
  };
570
+ M4LActionFormIntro?: {
571
+ defaultProps?: ComponentsPropsList['M4LActionFormIntro '];
572
+ styleOverrides?: ComponentsOverrides<Theme>['M4LActionFormIntro '];
573
+ variants?: ComponentsVariants['M4LActionFormIntro '];
574
+ };
565
575
  M4LDivider?: {
566
576
  defaultProps?: ComponentsPropsList['M4LDivider'];
567
577
  styleOverrides?: ComponentsOverrides<Theme>['M4LDivider'];
@@ -0,0 +1,9 @@
1
+ import { ActionsFormIntroProps } from './types';
2
+ /**
3
+ * Este componente es útil en formularios donde se necesita un botón de envío con
4
+ * funcionalidad de carga y soporte para internacionalización.
5
+ * @createdAt 2024-12-31 11:23:50 - automatic
6
+ * @updatedAt 2025-01-03 11:42:14 - automatic
7
+ * @updatedUser Andrés Quintero - automatic
8
+ */
9
+ export declare function ActionFormIntro(props: ActionsFormIntroProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,34 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useFormContext, useFormState } from "react-hook-form";
3
+ import { useModuleDictionary } from "@m4l/core";
4
+ import { c as classActoinFormIntroRoot } from "./constanst.js";
5
+ import { clsx } from "clsx";
6
+ import { D as DICTIONARY } from "../../dictionary.js";
7
+ import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
8
+ import { L as LoadingButtonActionFormIntroRootStyled } from "./slots/ActionFormIntroSlots.js";
9
+ function ActionFormIntro(props) {
10
+ const { variant = "contained", color = "primary", className, label, size = "medium", ...others } = props;
11
+ const { getLabel } = useModuleDictionary();
12
+ const finalLabel = label || getLabel(DICTIONARY.LABEL_INTRO);
13
+ const { control } = useFormContext();
14
+ const { isSubmitting } = useFormState({ control });
15
+ const { currentSize } = useComponentSize(size);
16
+ const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
17
+ return /* @__PURE__ */ jsx(
18
+ LoadingButtonActionFormIntroRootStyled,
19
+ {
20
+ ownerState: {},
21
+ variant,
22
+ type: "submit",
23
+ color,
24
+ loading: isSubmitting,
25
+ size: adjustedSize,
26
+ className: clsx(classActoinFormIntroRoot, className),
27
+ label: finalLabel,
28
+ ...others
29
+ }
30
+ );
31
+ }
32
+ export {
33
+ ActionFormIntro as A
34
+ };
@@ -0,0 +1,2 @@
1
+ import { ActionFormIntroStyles } from './types';
2
+ export declare const actionFormIntroStyles: ActionFormIntroStyles;
@@ -0,0 +1,7 @@
1
+ const actionFormIntroStyles = {
2
+ /** 🌳 Estilos para el componente raiz 🌳 */
3
+ root: () => ({})
4
+ };
5
+ export {
6
+ actionFormIntroStyles as a
7
+ };
@@ -0,0 +1,6 @@
1
+ export declare const ACTION_FORM_INTRO_KEY_COMPONENT = "M4LActionFormIntro";
2
+ /**
3
+ * Nombre de clase creado para aportar especificidad a los estilos del componente. Es usado para sobreescribir los estilos de MUI sin
4
+ * tener la necesidad de agregar valores en !important.
5
+ */
6
+ export declare const classActoinFormIntroRoot: string;
@@ -0,0 +1,7 @@
1
+ import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
2
+ const ACTION_FORM_INTRO_KEY_COMPONENT = "M4LActionFormIntro";
3
+ const classActoinFormIntroRoot = getComponentSlotRoot(ACTION_FORM_INTRO_KEY_COMPONENT);
4
+ export {
5
+ ACTION_FORM_INTRO_KEY_COMPONENT as A,
6
+ classActoinFormIntroRoot as c
7
+ };
@@ -0,0 +1,3 @@
1
+ export declare enum ActionFormIntroSlots {
2
+ root = "root"
3
+ }
@@ -0,0 +1,7 @@
1
+ var ActionFormIntroSlots = /* @__PURE__ */ ((ActionFormIntroSlots2) => {
2
+ ActionFormIntroSlots2["root"] = "root";
3
+ return ActionFormIntroSlots2;
4
+ })(ActionFormIntroSlots || {});
5
+ export {
6
+ ActionFormIntroSlots as A
7
+ };
@@ -0,0 +1,3 @@
1
+ export declare const LoadingButtonActionFormIntroRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../../mui_extended/LoadingButton/types').LoadingButtonProps, keyof import('../../../../mui_extended/LoadingButton/types').LoadingButtonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').ActionFormIntroOwnerState> & Record<string, unknown> & {
2
+ ownerState: Partial<import('../types').ActionFormIntroOwnerState> & Record<string, unknown>;
3
+ }, {}, {}>;
@@ -0,0 +1,12 @@
1
+ import { styled } from "@mui/material";
2
+ import { L as LoadingButton } from "../../../../mui_extended/LoadingButton/LoadingButton.js";
3
+ import { A as ACTION_FORM_INTRO_KEY_COMPONENT } from "../constanst.js";
4
+ import { A as ActionFormIntroSlots } from "./ActionFormIntroEnum.js";
5
+ import { a as actionFormIntroStyles } from "../ActionFromIntro.styles.js";
6
+ const LoadingButtonActionFormIntroRootStyled = styled(LoadingButton, {
7
+ name: ACTION_FORM_INTRO_KEY_COMPONENT,
8
+ slot: ActionFormIntroSlots.root
9
+ })(actionFormIntroStyles?.root);
10
+ export {
11
+ LoadingButtonActionFormIntroRootStyled as L
12
+ };
@@ -0,0 +1,2 @@
1
+ export * from './ActionFormIntroEnum';
2
+ export * from './ActionFormIntroSlots';
@@ -1,4 +1,18 @@
1
+ import { Sizes } from '@m4l/styles';
2
+ import { Theme } from '@mui/material';
3
+ import { OverridesStyleRules } from '@mui/material/styles/overrides';
1
4
  import { LoadingButtonProps } from '../../../mui_extended/LoadingButton/types';
5
+ import { ACTION_FORM_INTRO_KEY_COMPONENT } from './constanst';
6
+ import { ActionFormIntroSlots } from './slots/ActionFormIntroEnum';
2
7
  export interface ActionsFormIntroProps extends Omit<LoadingButtonProps, 'label'> {
3
8
  label?: string;
9
+ size?: Extract<Sizes, 'small' | 'medium'>;
10
+ className?: string;
11
+ skeletonWidth?: string;
12
+ dictionaryId?: string;
4
13
  }
14
+ export type OwnerState = Pick<LoadingButtonProps, 'size'>;
15
+ export interface ActionFormIntroOwnerState extends LoadingButtonProps, OwnerState {
16
+ }
17
+ export type ActionFormIntroType = keyof typeof ActionFormIntroSlots;
18
+ export type ActionFormIntroStyles = OverridesStyleRules<ActionFormIntroSlots, typeof ACTION_FORM_INTRO_KEY_COMPONENT, Theme>;
@@ -1,3 +1,6 @@
1
1
  import { Dictionary } from '@m4l/core';
2
2
  export declare function getCommonActionsDictionary(): string[];
3
3
  export declare const defaultCommonActionsDictionary: Dictionary;
4
+ export declare const DICTIONARY: {
5
+ readonly LABEL_INTRO: "common_actions.intro";
6
+ };
@@ -9,7 +9,11 @@ const defaultCommonActionsDictionary = {
9
9
  confirm_quit_msg: "Are your sure exit?"
10
10
  }
11
11
  };
12
+ const DICTIONARY = {
13
+ LABEL_INTRO: "common_actions.intro"
14
+ };
12
15
  export {
16
+ DICTIONARY as D,
13
17
  defaultCommonActionsDictionary as d,
14
18
  getCommonActionsDictionary as g
15
19
  };
@@ -2,6 +2,6 @@ export { ActionsContainer } from './components/ActionsContainer/ActionsContainer
2
2
  export { ActionCancel } from './components/ActionCancel';
3
3
  export { ActionIntro } from './components/ActionIntro';
4
4
  export { ActionFormCancel } from './components/ActionFormCancel';
5
- export { ActionFormIntro } from './components/ActionFormIntro';
5
+ export { ActionFormIntro } from './components/ActionFormIntro/ActionFormIntro';
6
6
  export { getCommonActionsDictionary } from './dictionary';
7
7
  export * from './dictionary';
@@ -20,7 +20,7 @@ export type MenuTypes = 'menuItem' | 'divider' | 'loader' | 'customNode';
20
20
  interface BaseMenuAction {
21
21
  type: MenuTypes;
22
22
  }
23
- interface MenuItemAction extends BaseMenuAction, Pick<MenuItemProps, 'startIcon' | 'endIcon' | 'label' | 'selected' | 'componentPaletteColor' | 'color' | 'disabled' | 'checkable' | 'checked'> {
23
+ interface MenuItemAction extends BaseMenuAction, Pick<MenuItemProps, 'startIcon' | 'endIcon' | 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked'> {
24
24
  type: 'menuItem';
25
25
  onClick?: (arg?: any) => void;
26
26
  customNode?: never;
@@ -52,7 +52,7 @@ interface CustomNodeAction extends BaseMenuAction {
52
52
  * [onClick] - Función opcional a ejecutar al hacer clic en la acción del menú.
53
53
  * [error] - Indicador de error en la acción del menú.
54
54
  */
55
- export type MenuAction = (MenuItemAction & Pick<MenuItemProps, 'startIcon' | 'endIcon' | 'label' | 'selected' | 'componentPaletteColor' | 'color' | 'disabled' | 'checkable' | 'checked'> & {
55
+ export type MenuAction = (MenuItemAction & Pick<MenuItemProps, 'startIcon' | 'endIcon' | 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked'> & {
56
56
  onClick?: (arg?: any) => void;
57
57
  error?: boolean;
58
58
  }) | DividerAction | LoaderAction | CustomNodeAction;
@@ -7,7 +7,7 @@ import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../../../dictionary.js";
7
7
  import { u as usePopupsStore } from "../../../../../../../../../popups/components/PopupsProvider/hooks/usePopupsStore/index.js";
8
8
  import { u as useMapGpsToolsStore } from "../../../../../../hooks/useMapGpsToolsStore/index.js";
9
9
  import { R as RHFHelperError } from "../../../../../../../../../hook-form/RHFHelperError/index.js";
10
- import { A as ActionFormIntro } from "../../../../../../../../../CommonActions/components/ActionFormIntro/index.js";
10
+ import { A as ActionFormIntro } from "../../../../../../../../../CommonActions/components/ActionFormIntro/ActionFormIntro.js";
11
11
  import { W as WindowConfirm } from "../../../../../../../../../WindowConfirm/WindowConfirm.js";
12
12
  import { A as ActionsContainer } from "../../../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
13
13
  import { B as Button } from "../../../../../../../../../mui_extended/Button/Button.js";
@@ -4,6 +4,10 @@ import { Sizes } from '@m4l/styles';
4
4
  * Higher-order function to generate a render option function for Autocomplete.
5
5
  * It supports rendering options with `startAd` and `endIcon`.
6
6
  * @param color - The color for the MenuItem.
7
+ * @author SebastianM - automatic
8
+ * @createdAt 2024-11-28 18:58:00 - automatic
9
+ * @updatedAt 2025-02-10 10:25:46 - automatic
10
+ * @updatedUser cesar - automatic
7
11
  */
8
12
  export declare function renderOption<T>(optionProps: HTMLAttributes<HTMLLIElement>, option: T & {
9
13
  label: string;
@@ -7,7 +7,7 @@ function renderOption(optionProps, option) {
7
7
  {
8
8
  ...otherOptionProps,
9
9
  selected: option.selected,
10
- color: "primary",
10
+ color: "default",
11
11
  key: option.id || option.label,
12
12
  label: option.label,
13
13
  disabled: option.disabled,
@@ -5,5 +5,9 @@ import { MenuItemProps } from './types';
5
5
  * If the module is in skeleton mode, it renders a skeleton menu item instead.
6
6
  * @param props
7
7
  * @returns
8
+ * @author Bruce Escobar - automatic
9
+ * @createdAt 2024-10-22 19:53:39 - automatic
10
+ * @updatedAt 2025-02-10 10:22:38 - automatic
11
+ * @updatedUser cesar - automatic
8
12
  */
9
13
  export declare const MenuItem: (props: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,6 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useModuleSkeleton, useEnvironment, getPropertyByString } from "@m4l/core";
3
- import { useTheme } from "@mui/material";
2
+ import { useModuleSkeleton, useEnvironment } from "@m4l/core";
4
3
  import clsx from "clsx";
5
4
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
6
5
  import { M as MENUITEM_CLASSES } from "./constants.js";
@@ -14,7 +13,7 @@ const MenuItem = (props) => {
14
13
  value,
15
14
  skeletonWidth = "100%",
16
15
  selected = false,
17
- color = "primary",
16
+ color = "default",
18
17
  disabled = false,
19
18
  size = "medium",
20
19
  checked = false,
@@ -24,19 +23,12 @@ const MenuItem = (props) => {
24
23
  } = props;
25
24
  const { currentSize } = useComponentSize(size);
26
25
  const isSkeleton = useModuleSkeleton();
27
- const theme = useTheme();
28
26
  const { host_static_assets, environment_assets } = useEnvironment();
29
27
  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
30
- const paletteColor = getPropertyByString(
31
- theme.vars.palette,
32
- disabled ? "default" : color,
33
- theme.vars.palette.default
34
- );
35
28
  const ownerState = {
36
29
  size: adjustedSize,
37
30
  disabled,
38
31
  selected,
39
- paletteColor,
40
32
  color,
41
33
  checkable,
42
34
  checked
@@ -1,115 +1,91 @@
1
1
  import { g as getHeightSizeStyles } from "../../../utils/getHeightSizeStyles.js";
2
2
  const menuItemStyles = {
3
3
  /**
4
- * Estilos para el contenedor de los items del menú
5
- * <<<<<<< HEAD
6
- * =======
7
- * >>>>>>> main
4
+ * Estilos para el contenedor de los items del menú contenedor
5
+ * @author cesar - automatic
6
+ * @createdAt 2025-02-10 10:22:37 - automatic
7
+ * @updatedAt 2025-02-10 16:37:32 - automatic
8
+ * @updatedUser cesar - automatic
8
9
  */
9
- root: ({ theme, ownerState }) => ({
10
- width: "100%",
11
- gap: theme.vars.size.baseSpacings.sp3,
12
- paddingTop: theme.vars.size.baseSpacings.sp2,
13
- paddingBottom: theme.vars.size.baseSpacings.sp2,
14
- paddingLeft: theme.vars.size.baseSpacings.sp4,
15
- paddingRight: theme.vars.size.baseSpacings.sp4,
16
- borderRadius: theme.vars.size.borderRadius.r0,
17
- "& .M4LTypography-root": {
18
- paddingLeft: theme.vars.size.baseSpacings.sp1
19
- },
20
- ...ownerState.selected && {
21
- borderLeft: theme.vars.size.borderStroke.container,
22
- borderColor: ownerState.paletteColor?.main,
10
+ root: ({ theme, ownerState }) => {
11
+ const mainColor = ownerState.selected ? ownerState.color === "error" ? ownerState.color : "primary" : ownerState.color;
12
+ const paletteColor = theme.vars.palette[mainColor ?? "default"];
13
+ const color = (token) => {
14
+ return ownerState.color === "default" && !ownerState.selected ? theme.vars.palette.text.primary : paletteColor[token];
15
+ };
16
+ return {
17
+ width: "100%",
18
+ gap: theme.vars.size.baseSpacings.sp4,
19
+ paddingTop: theme.vars.size.baseSpacings.sp1,
20
+ paddingBottom: theme.vars.size.baseSpacings.sp1,
21
+ paddingLeft: theme.vars.size.baseSpacings.sp4,
22
+ paddingRight: theme.vars.size.baseSpacings.sp4,
23
+ borderRadius: theme.vars.size.borderRadius.r0,
24
+ // Estilos base para el texto y el ícono
23
25
  "& .M4LTypography-root": {
24
- color: ownerState.paletteColor?.enabled
26
+ paddingLeft: theme.vars.size.baseSpacings.sp1,
27
+ color: color("enabled")
25
28
  },
26
29
  "& .M4LIcon-icon": {
27
- backgroundColor: ownerState.paletteColor?.enabled
30
+ backgroundColor: `${color("enabled")} !important`
28
31
  },
29
- "&:hover": {
30
- backgroundColor: ownerState.paletteColor?.hoverOpacity,
32
+ "&:active": {
33
+ backgroundColor: `${paletteColor.activeOpacity} !important`,
31
34
  "& .M4LIcon-icon": {
32
- backgroundColor: ownerState.paletteColor?.hover
33
- },
34
- "& .M4LTypography-root": {
35
- color: ownerState.paletteColor?.hover
35
+ backgroundColor: color("active")
36
36
  }
37
37
  },
38
- "&:active": {
39
- backgroundColor: ownerState.paletteColor?.activeOpacity,
40
- "& .M4LIcon-icon": {
41
- backgroundColor: ownerState.paletteColor?.active
42
- },
38
+ "&:hover": {
39
+ backgroundColor: paletteColor.hoverOpacity,
43
40
  "& .M4LTypography-root": {
44
- color: ownerState.paletteColor?.active
41
+ paddingLeft: theme.vars.size.baseSpacings.sp1,
42
+ color: color("hover")
43
+ },
44
+ "& .M4LIcon-icon": {
45
+ backgroundColor: color("hover")
45
46
  }
46
47
  },
47
48
  "&:focus-visible": {
48
- backgroundColor: ownerState.paletteColor?.activeOpacity,
49
49
  outline: theme.vars.size.borderStroke.container,
50
50
  outlineColor: theme.vars.palette.border.main,
51
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
52
- "& .M4LIcon-icon": {
53
- color: ownerState.paletteColor?.active
54
- }
55
- }
56
- },
57
- ...ownerState.color === "default" && {
58
- "& .M4LTypography-root": {
59
- color: theme.vars.palette.text.primary
51
+ outlineOffset: theme.vars.size.baseSpacings["sp0-5"]
60
52
  },
61
- "& .M4LIcon-icon": {
62
- backgroundColor: theme.vars.palette.text.primary
63
- },
64
- "&:hover": {
65
- backgroundColor: ownerState.paletteColor?.hoverOpacity
53
+ ...ownerState.selected && {
54
+ borderLeft: theme.vars.size.borderStroke.container,
55
+ borderLeftColor: paletteColor.enabled
66
56
  },
67
- "&:active": {
68
- backgroundColor: ownerState.paletteColor?.activeOpacity,
69
- "& .M4LIcon-icon": {
70
- backgroundColor: theme.vars.palette.text.primary
71
- }
72
- }
73
- },
74
- ...ownerState.disabled && {
75
- pointerEvents: "none",
76
- "& .M4LTypography-root": {
77
- color: theme.vars.palette.text.disabled
57
+ "& .M4LImage-root": {
58
+ ...getHeightSizeStyles(
59
+ theme.generalSettings.isMobile,
60
+ ownerState.size || "medium",
61
+ "base",
62
+ (val) => {
63
+ return {
64
+ height: val,
65
+ width: val
66
+ };
67
+ }
68
+ )
78
69
  },
79
- "& .M4LIcon-icon": {
80
- backgroundColor: theme.vars.palette.text.disabled
81
- }
82
- },
83
- "& .M4LImage-root": {
84
70
  ...getHeightSizeStyles(
85
71
  theme.generalSettings.isMobile,
86
72
  ownerState.size || "medium",
87
- "base",
88
- (val) => {
73
+ "action",
74
+ (height) => {
89
75
  return {
90
- height: val,
91
- width: val
76
+ //height: 'auto !important',
77
+ minHeight: `${height}!important`
92
78
  };
93
79
  }
94
80
  )
95
- },
96
- ...getHeightSizeStyles(
97
- theme.generalSettings.isMobile,
98
- ownerState.size || "medium",
99
- "action",
100
- (height) => {
101
- return {
102
- //height: 'auto !important',
103
- minHeight: `${height}!important`
104
- };
105
- }
106
- )
107
- }),
81
+ };
82
+ },
108
83
  /**
109
84
  * Estilos para el icono de los items del menú
110
- * <<<<<<< HEAD
111
- * =======
112
- * >>>>>>> main
85
+ * @author SebastianM - automatic
86
+ * @createdAt 2024-12-02 19:12:14 - automatic
87
+ * @updatedAt 2025-02-10 16:37:32 - automatic
88
+ * @updatedUser cesar - automatic
113
89
  */
114
90
  menuItemIcon: () => ({
115
91
  "&.MenuItemEndIcon-root": {
@@ -118,24 +94,26 @@ const menuItemStyles = {
118
94
  }),
119
95
  /**
120
96
  * Estilos para el icono de los items del menú cuando están seleccionados
121
- * <<<<<<< HEAD
122
- * =======
123
- * >>>>>>> main
97
+ * @author SebastianM - automatic
98
+ * @createdAt 2024-12-13 12:45:48 - automatic
99
+ * @updatedAt 2025-02-10 16:37:32 - automatic
100
+ * @updatedUser cesar - automatic
124
101
  */
125
- menuItemIconChecked: ({ ownerState }) => ({
102
+ menuItemIconChecked: ({ theme, ownerState }) => ({
126
103
  visibility: ownerState.checkable ? ownerState.checked ? "visible" : "hidden" : "hidden",
127
104
  ...ownerState.selected && {
128
105
  "& .M4LIcon-icon": {
129
- backgroundColor: ownerState.paletteColor?.main
106
+ backgroundColor: theme.vars.palette[ownerState.color ?? "default"].main
130
107
  }
131
108
  },
132
109
  variants: []
133
110
  }),
134
111
  /**
135
112
  * Estilos para la tipografía del menú item
136
- * <<<<<<< HEAD
137
- * =======
138
- * >>>>>>> main
113
+ * @author SebastianM - automatic
114
+ * @createdAt 2024-12-13 12:45:48 - automatic
115
+ * @updatedAt 2025-02-10 16:37:32 - automatic
116
+ * @updatedUser cesar - automatic
139
117
  */
140
118
  menuItemTypography: () => ({
141
119
  overflow: "hidden",
@@ -143,6 +121,10 @@ const menuItemStyles = {
143
121
  }),
144
122
  /**
145
123
  * Estilos para el contenedor de los items del menú contenedor
124
+ * @author cesar - automatic
125
+ * @createdAt 2025-01-20 15:51:18 - automatic
126
+ * @updatedAt 2025-02-10 16:37:32 - automatic
127
+ * @updatedUser cesar - automatic
146
128
  */
147
129
  menuItemContainer: ({ theme }) => ({
148
130
  display: "flex",
@@ -153,9 +135,10 @@ const menuItemStyles = {
153
135
  }),
154
136
  /**
155
137
  * Estilos para el contenedor de los items del menú en skeleton
156
- * <<<<<<< HEAD
157
- * =======
158
- * >>>>>>> main
138
+ * @author Bruce Escobar - automatic
139
+ * @createdAt 2024-10-22 10:38:00 - automatic
140
+ * @updatedAt 2025-02-10 16:37:32 - automatic
141
+ * @updatedUser cesar - automatic
159
142
  */
160
143
  skeletonMenuItem: ({ theme, ownerState }) => ({
161
144
  width: "100%",
@@ -1,4 +1,4 @@
1
- import { MenuItemProps as MUIMenuItemProps, Theme, PaletteColor } from '@mui/material';
1
+ import { MenuItemProps as MUIMenuItemProps, Theme } from '@mui/material';
2
2
  import { OverridesStyleRules } from '@mui/material/styles/overrides';
3
3
  import { Sizes, ComponentPalletColor } from '@m4l/styles';
4
4
  import { MenuItemSlots } from './slots';
@@ -27,11 +27,7 @@ export interface MenuItemProps extends Omit<MUIMenuItemProps, 'size' | 'color'>
27
27
  /**
28
28
  * Define el color del `MenuItem`
29
29
  */
30
- color?: Extract<ComponentPalletColor, 'primary' | 'default' | 'error'>;
31
- /**
32
- * Personalización del color de la paleta del componente
33
- */
34
- componentPaletteColor?: ComponentPalletColor;
30
+ color?: Extract<ComponentPalletColor, 'default' | 'error'>;
35
31
  /**
36
32
  * Indica si el `MenuItem` está deshabilitado
37
33
  */
@@ -58,8 +54,8 @@ export interface MenuItemProps extends Omit<MUIMenuItemProps, 'size' | 'color'>
58
54
  * Pick<MenuItemProps, 'size' | 'componentPaletteColor' | 'disabled' | 'selected'>
59
55
  * paletteColor - Define el color de la paleta aplicada al `MenuItem`.
60
56
  */
61
- export interface MenuItemOwnerState extends Pick<MenuItemProps, 'checked' | 'checkable' | 'size' | 'componentPaletteColor' | 'disabled' | 'selected' | 'color'> {
62
- paletteColor: PaletteColor;
57
+ export interface MenuItemOwnerState extends Pick<MenuItemProps, 'checked' | 'checkable' | 'size' | 'disabled' | 'selected'> {
58
+ color: Extract<ComponentPalletColor, 'default' | 'error' | 'primary'>;
63
59
  }
64
60
  /**
65
61
  * Define los tipos de Slots disponibles para el `MenuItem`.
package/index.js CHANGED
@@ -73,9 +73,9 @@ import { A as A6 } from "./components/CommonActions/components/ActionsContainer/
73
73
  import { A as A7 } from "./components/CommonActions/components/ActionCancel/ActionCancel.js";
74
74
  import { A as A8 } from "./components/CommonActions/components/ActionIntro/ActionIntro.js";
75
75
  import { A as A9 } from "./components/CommonActions/components/ActionFormCancel/index.js";
76
- import { A as A10 } from "./components/CommonActions/components/ActionFormIntro/index.js";
77
- import { d, g as g13 } from "./components/CommonActions/dictionary.js";
78
- import { D as D5 } from "./components/DragResizeWindow/DragResizeWindow.js";
76
+ import { A as A10 } from "./components/CommonActions/components/ActionFormIntro/ActionFormIntro.js";
77
+ import { D as D5, d, g as g13 } from "./components/CommonActions/dictionary.js";
78
+ import { D as D6 } from "./components/DragResizeWindow/DragResizeWindow.js";
79
79
  import { d as d2 } from "./components/DragResizeWindow/classes/index.js";
80
80
  import { G } from "./components/GridLayout/GridLayout.js";
81
81
  import { R as R18 } from "./components/GridLayout/subcomponents/Responsive/index.js";
@@ -185,7 +185,7 @@ import { T as T17 } from "./components/mui_extended/ToggleIconButton/ToggleIconB
185
185
  import { T as T18 } from "./components/mui_extended/ToggleIconButton/constants.js";
186
186
  import { T as T19 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonEnum.js";
187
187
  import { T as T20 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonSlots.js";
188
- import { a as a13, D as D6, M as M13 } from "./components/areas/contexts/DynamicMFParmsContext/index.js";
188
+ import { a as a13, D as D7, M as M13 } from "./components/areas/contexts/DynamicMFParmsContext/index.js";
189
189
  import { F, R as R21, u as u9 } from "./components/hook-form/RHFormContext/index.js";
190
190
  import { g as g26 } from "./components/hook-form/RHFormContext/dictionary.js";
191
191
  import { u as u10 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
@@ -239,13 +239,14 @@ export {
239
239
  C11 as CommonFeatureRender,
240
240
  C as ConcatenatedFormatter,
241
241
  C12 as ContentWindowStyled,
242
+ D5 as DICTIONARY,
242
243
  D as DataGrid,
243
244
  D2 as DateFormatter,
244
245
  D3 as DistanceToNowFormatter,
245
- D5 as DragResizeWindow,
246
+ D6 as DragResizeWindow,
246
247
  D4 as DynamicFilter,
247
248
  a13 as DynamicMFParmsContext,
248
- D6 as DynamicMFParmsProvider,
249
+ D7 as DynamicMFParmsProvider,
249
250
  F as FormProviderCustom,
250
251
  G as GridLayout,
251
252
  H5 as HamburgerMenu,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.1.103",
3
+ "version": "9.1.105",
4
4
  "license": "UNLICENSED",
5
5
  "lint-staged": {
6
6
  "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
@@ -1,5 +0,0 @@
1
- import { ActionsFormIntroProps } from './types';
2
- /**
3
- * TODO: Documentar
4
- */
5
- export declare function ActionFormIntro(props: ActionsFormIntroProps): import("react/jsx-runtime").JSX.Element;
@@ -1,30 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { useFormContext, useFormState } from "react-hook-form";
3
- import { useModuleDictionary } from "@m4l/core";
4
- import { L as LoadingButton } from "../../../mui_extended/LoadingButton/LoadingButton.js";
5
- import { u as useCommonActionsUtilityClasses } from "../../classes/index.js";
6
- function ActionFormIntro(props) {
7
- const { variant = "contained", color = "primary", label, ...others } = props;
8
- const { getLabel } = useModuleDictionary();
9
- const finalLabel = label || getLabel("common_actions.intro");
10
- const { control } = useFormContext();
11
- const { isSubmitting } = useFormState({
12
- control
13
- });
14
- const classes = useCommonActionsUtilityClasses();
15
- return /* @__PURE__ */ jsx(
16
- LoadingButton,
17
- {
18
- ...others,
19
- variant,
20
- type: "submit",
21
- color,
22
- loading: isSubmitting,
23
- className: classes.actionFormIntro,
24
- label: finalLabel
25
- }
26
- );
27
- }
28
- export {
29
- ActionFormIntro as A
30
- };