@m4l/components 9.1.13 → 9.1.15

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 (40) hide show
  1. package/@types/types.d.ts +8 -0
  2. package/components/CommonActions/components/ActionFormIntro/index.d.ts +2 -2
  3. package/components/CommonActions/components/ActionFormIntro/index.js +4 -3
  4. package/components/ModalDialog/ModalDialog.d.ts +1 -18
  5. package/components/WindowBase/WindowBase.styles.js +16 -13
  6. package/components/hook-form/RHFAutocomplete/subcomponents/ComponentTypeImage/index.js +1 -1
  7. package/components/mui_extended/CircularProgress/slots/CircularProgressSlots.js +1 -1
  8. package/components/mui_extended/Dialog/Dialog.styles.js +3 -2
  9. package/components/mui_extended/LoadingButton/LoadingButton.d.ts +5 -0
  10. package/components/mui_extended/LoadingButton/LoadingButton.js +93 -0
  11. package/components/mui_extended/LoadingButton/LoadingButton.styles.d.ts +5 -0
  12. package/components/mui_extended/LoadingButton/LoadingButton.styles.js +200 -0
  13. package/components/mui_extended/LoadingButton/constants.d.ts +8 -0
  14. package/components/mui_extended/LoadingButton/constants.js +4 -0
  15. package/components/mui_extended/LoadingButton/index.d.ts +1 -9
  16. package/components/mui_extended/LoadingButton/slots/LoadingButtonEnum.d.ts +7 -0
  17. package/components/mui_extended/LoadingButton/slots/LoadingButtonEnum.js +11 -0
  18. package/components/mui_extended/LoadingButton/slots/LoadingButtonSlots.d.ts +38 -0
  19. package/components/mui_extended/LoadingButton/slots/LoadingButtonSlots.js +36 -0
  20. package/components/mui_extended/LoadingButton/types.d.ts +13 -7
  21. package/components/mui_extended/index.d.ts +1 -1
  22. package/index.js +1 -1
  23. package/package.json +1 -1
  24. package/storybook/components/ModalDialog/subcomponent/WithExtendedContainer.d.ts +2 -2
  25. package/storybook/components/extended/mui/LoadingButton/LoadingButton.stories.d.ts +42 -0
  26. package/components/LanguagePopover/tests/index.test.d.ts +0 -2
  27. package/components/hook-form/RHFAutocomplete/test/index.test.d.ts +0 -5
  28. package/components/mui_extended/LoadingButton/classes/constants.d.ts +0 -1
  29. package/components/mui_extended/LoadingButton/classes/constants.js +0 -4
  30. package/components/mui_extended/LoadingButton/classes/index.d.ts +0 -11
  31. package/components/mui_extended/LoadingButton/classes/index.js +0 -42
  32. package/components/mui_extended/LoadingButton/classes/types.d.ts +0 -11
  33. package/components/mui_extended/LoadingButton/index.js +0 -47
  34. package/components/mui_extended/LoadingButton/styles.d.ts +0 -1
  35. package/components/mui_extended/LoadingButton/styles.js +0 -8
  36. package/components/mui_extended/LoadingButton/tests/constants.d.ts +0 -1
  37. package/components/mui_extended/LoadingButton/tests/constants.js +0 -4
  38. package/components/mui_extended/LoadingButton/tests/utils.d.ts +0 -2
  39. package/components/mui_extended/LoadingButton/tests/utils.js +0 -7
  40. /package/components/mui_extended/{CircularProgress/CircularProgress.test.d.ts → LoadingButton/LoadingButton.test.d.ts} +0 -0
package/@types/types.d.ts CHANGED
@@ -133,6 +133,7 @@ import { WindowBaseOwnerState, WindowBaseType } from '../components/WindowBase';
133
133
  import { OwnerStateWindowConfirm, WindowConfirmType } from '../components/WindowConfirm';
134
134
  import { AppBarSlotsType, AppBarOwnerState } from '../components/AppBar/types';
135
135
  import { DialogOwnerState, DialogType } from '../components/mui_extended/Dialog/types';
136
+ import { LoadingButtonOwnerState, LoadingButtonSlotsType } from '../components/mui_extended/LoadingButton/types';
136
137
 
137
138
 
138
139
  declare module '@mui/material/styles' {
@@ -173,6 +174,7 @@ declare module '@mui/material/styles' {
173
174
  M4LWindowConfirm: WindowConfirmType;
174
175
  M4LAppBar: AppBarSlotsType;
175
176
  M4LWiDialog: DialogType;
177
+ M4LLoadingButton: LoadingButtonSlotsType;
176
178
  }
177
179
 
178
180
  interface ComponentsPropsList {
@@ -212,6 +214,7 @@ declare module '@mui/material/styles' {
212
214
  M4LWindowConfirm: Partial<OwnerStateWindowConfirm>;
213
215
  M4LAppBar: Partial<AppBarOwnerState>;
214
216
  M4LWiDialog: Partial<DialogOwnerState>;
217
+ M4LLoadingButton: Partial<LoadingButtonOwnerState>;
215
218
  }
216
219
 
217
220
  interface Components {
@@ -485,5 +488,10 @@ declare module '@mui/material/styles' {
485
488
  styleOverrides?: ComponentsOverrides<Theme>['M4LWiDialog'];
486
489
  variants?: ComponentsVariants['M4LWiDialog'];
487
490
  };
491
+ M4LLoadingButton?: {
492
+ defaultProps?: ComponentsPropsList['M4LLoadingButton'];
493
+ styleOverrides?: ComponentsOverrides<Theme>['M4LLoadingButton'];
494
+ variants?: ComponentsVariants['M4LLoadingButton'];
495
+ };
488
496
  }
489
497
  }
@@ -1,5 +1,5 @@
1
- import { MuiLabLoadingButtonProps } from '../../../mui_extended/LoadingButton/types';
1
+ import { LoadingButtonProps } from '../../../mui_extended/LoadingButton/types';
2
2
  /**
3
3
  * TODO: Documentar
4
4
  */
5
- export declare function ActionFormIntro(props: MuiLabLoadingButtonProps): import("react/jsx-runtime").JSX.Element;
5
+ export declare function ActionFormIntro(props: LoadingButtonProps): import("react/jsx-runtime").JSX.Element;
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { useFormContext, useFormState } from "react-hook-form";
3
3
  import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
4
4
  import { Skeleton } from "@mui/material";
5
- import { L as LoadingButton } from "../../../mui_extended/LoadingButton/index.js";
5
+ import { L as LoadingButton } from "../../../mui_extended/LoadingButton/LoadingButton.js";
6
6
  import { u as useCommonActionsUtilityClasses } from "../../classes/index.js";
7
7
  function ActionFormIntro(props) {
8
8
  const { getLabel } = useModuleDictionary();
@@ -11,6 +11,7 @@ function ActionFormIntro(props) {
11
11
  const { isSubmitting } = useFormState({
12
12
  control
13
13
  });
14
+ const { variant = "contained", color = "primary" } = props;
14
15
  const classes = useCommonActionsUtilityClasses();
15
16
  if (isSkeleton) {
16
17
  return /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 57, height: 30 });
@@ -18,9 +19,9 @@ function ActionFormIntro(props) {
18
19
  return /* @__PURE__ */ jsx(
19
20
  LoadingButton,
20
21
  {
21
- variant: "contained",
22
+ variant,
22
23
  type: "submit",
23
- color: "primary",
24
+ color,
24
25
  loading: isSubmitting,
25
26
  className: classes.actionFormIntro,
26
27
  ...props,
@@ -32,26 +32,9 @@
32
32
  * - Selects `PaperComponent` for fullscreen and mobile views.
33
33
  * - Selects `DraggablePaperComponent` for non-mobile, non-fullscreen views.
34
34
  * - Dynamically updates the fullscreen mode when the `fullScreen` prop changes.
35
- *
36
- * ### Example Usage:
37
- * ```tsx
38
- * import { ModalDialog } from './ModalDialog';
39
- * import { useModal } from './hooks/useModal';
40
- *
41
- * const App = () => {
42
- * const { openModal } = useModal();
43
- *
44
- * return (
45
- * <div>
46
- * <button onClick={() => openModal({ fullScreen: false })}>Open Modal</button>
47
- * <ModalDialog />
48
- * </div>
49
- * );
50
- * };
51
- * ```
52
35
  * @author cesar - automatic
53
36
  * @createdAt 2024-11-28 08:35:15 - automatic
54
- * @updatedAt 2024-12-02 17:50:36 - automatic
37
+ * @updatedAt 2024-12-06 11:53:51 - automatic
55
38
  * @updatedUser cesar - automatic
56
39
  */
57
40
  export declare const ModalDialog: () => import("react/jsx-runtime").JSX.Element;
@@ -3,12 +3,14 @@ const windowBaseStyles = {
3
3
  * Styles for the window base wrapper component.
4
4
  * @author cesar - automatic
5
5
  * @createdAt 2024-11-15 18:08:44 - automatic
6
- * @updatedAt 2024-12-05 07:49:28 - automatic
6
+ * @updatedAt 2024-12-06 14:42:54 - automatic
7
7
  * @updatedUser cesar - automatic
8
8
  */
9
9
  wrapperWindowBase: ({ theme, ownerState }) => ({
10
10
  height: "100%",
11
11
  width: "100%",
12
+ display: "flex",
13
+ flexDirection: "column",
12
14
  borderRadius: theme.vars.size.borderRadius.r1,
13
15
  ...ownerState?.windowBaseVariant === "outlined" && {
14
16
  border: theme.vars.size.borderStroke.container,
@@ -25,17 +27,18 @@ const windowBaseStyles = {
25
27
  * Styles for the content of the window base component.
26
28
  * @author cesar - automatic
27
29
  * @createdAt 2024-11-15 18:08:44 - automatic
28
- * @updatedAt 2024-12-05 07:49:28 - automatic
30
+ * @updatedAt 2024-12-06 14:42:54 - automatic
29
31
  * @updatedUser cesar - automatic
30
32
  */
31
33
  contentWindowBase: ({ theme }) => ({
32
- padding: theme.vars.size.baseSpacings.sp3
34
+ padding: theme.vars.size.baseSpacings.sp3,
35
+ overflow: "auto"
33
36
  }),
34
37
  /**
35
38
  * Styles for the header of the window base component.
36
39
  * @author cesar - automatic
37
40
  * @createdAt 2024-11-15 18:08:44 - automatic
38
- * @updatedAt 2024-12-05 07:49:28 - automatic
41
+ * @updatedAt 2024-12-06 14:42:54 - automatic
39
42
  * @updatedUser cesar - automatic
40
43
  */
41
44
  headerWindowComponent: ({ theme, ownerState }) => ({
@@ -71,7 +74,7 @@ const windowBaseStyles = {
71
74
  * Styles for the content of the header of the window base component.
72
75
  * @author cesar - automatic
73
76
  * @createdAt 2024-11-15 18:08:44 - automatic
74
- * @updatedAt 2024-12-05 07:49:28 - automatic
77
+ * @updatedAt 2024-12-06 14:42:54 - automatic
75
78
  * @updatedUser cesar - automatic
76
79
  */
77
80
  headerContentWindowBase: ({ theme }) => ({
@@ -86,7 +89,7 @@ const windowBaseStyles = {
86
89
  * Styles for the title of the header of the window base component.
87
90
  * @author cesar - automatic
88
91
  * @createdAt 2024-11-15 18:08:44 - automatic
89
- * @updatedAt 2024-12-05 07:49:28 - automatic
92
+ * @updatedAt 2024-12-06 14:42:54 - automatic
90
93
  * @updatedUser cesar - automatic
91
94
  */
92
95
  headerTitleWindowBase: ({ theme }) => ({
@@ -98,7 +101,7 @@ const windowBaseStyles = {
98
101
  * Styles for the subtitle container of the header of the window base component.
99
102
  * @author cesar - automatic
100
103
  * @createdAt 2024-11-15 18:08:44 - automatic
101
- * @updatedAt 2024-12-05 07:49:28 - automatic
104
+ * @updatedAt 2024-12-06 14:42:54 - automatic
102
105
  * @updatedUser cesar - automatic
103
106
  */
104
107
  subtitleContainer: ({ theme }) => ({
@@ -113,7 +116,7 @@ const windowBaseStyles = {
113
116
  * @returns An object containing the styles for the dot window base component.
114
117
  * @author cesar - automatic
115
118
  * @createdAt 2024-11-22 19:40:23 - automatic
116
- * @updatedAt 2024-12-05 07:49:28 - automatic
119
+ * @updatedAt 2024-12-06 14:42:54 - automatic
117
120
  * @updatedUser cesar - automatic
118
121
  */
119
122
  pointWindowBase: ({ theme, ownerState }) => ({
@@ -140,7 +143,7 @@ const windowBaseStyles = {
140
143
  * Styles for the subtitle of the header of the window base component.
141
144
  * @author cesar - automatic
142
145
  * @createdAt 2024-11-15 18:08:44 - automatic
143
- * @updatedAt 2024-12-05 07:49:28 - automatic
146
+ * @updatedAt 2024-12-06 14:42:54 - automatic
144
147
  * @updatedUser cesar - automatic
145
148
  */
146
149
  headerSubTitleWindowBase: ({ theme }) => ({
@@ -152,7 +155,7 @@ const windowBaseStyles = {
152
155
  * Styles for the icon of the header of the window base component.
153
156
  * @author cesar - automatic
154
157
  * @createdAt 2024-11-18 08:11:19 - automatic
155
- * @updatedAt 2024-12-05 07:49:28 - automatic
158
+ * @updatedAt 2024-12-06 14:42:54 - automatic
156
159
  * @updatedUser cesar - automatic
157
160
  */
158
161
  headerIconWindowBase: ({ theme }) => ({
@@ -166,7 +169,7 @@ const windowBaseStyles = {
166
169
  * Styles for the icons wrapper of the window base component.
167
170
  * @author cesar - automatic
168
171
  * @createdAt 2024-11-18 08:11:19 - automatic
169
- * @updatedAt 2024-12-05 07:49:28 - automatic
172
+ * @updatedAt 2024-12-06 14:42:54 - automatic
170
173
  * @updatedUser cesar - automatic
171
174
  */
172
175
  iconsWrapperWindowBase: () => ({
@@ -177,7 +180,7 @@ const windowBaseStyles = {
177
180
  * Styles for the dot icon of the window base component.
178
181
  * @author cesar - automatic
179
182
  * @createdAt 2024-11-22 19:40:23 - automatic
180
- * @updatedAt 2024-12-05 07:49:28 - automatic
183
+ * @updatedAt 2024-12-06 14:42:54 - automatic
181
184
  * @updatedUser cesar - automatic
182
185
  */
183
186
  pointIcon: ({ theme, ownerState }) => ({
@@ -202,7 +205,7 @@ const windowBaseStyles = {
202
205
  * Styles for the menu actions of the window base component.
203
206
  * @author cesar - automatic
204
207
  * @createdAt 2024-12-05 07:49:27 - automatic
205
- * @updatedAt 2024-12-05 07:49:28 - automatic
208
+ * @updatedAt 2024-12-06 14:42:54 - automatic
206
209
  * @updatedUser cesar - automatic
207
210
  */
208
211
  menuActionsWindowBase: () => ({
@@ -13,10 +13,10 @@ import { w as withRenderOption } from "../RenderOption/index.js";
13
13
  import { S as SkeletonRHFAutocomplete } from "../Skeleton/index.js";
14
14
  import { L as Label } from "../../../../Label/Label.js";
15
15
  import { T as Typography } from "../../../../mui_extended/Typography/Typography.js";
16
- import { C as CircularProgress } from "../../../../mui_extended/CircularProgress/CircularProgress.js";
17
16
  import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
18
17
  import { H as HelperError } from "../../../../HelperError/HelperError.js";
19
18
  import { I as Image } from "../../../../Image/Image.js";
19
+ import { C as CircularProgress } from "../../../../mui_extended/CircularProgress/CircularProgress.js";
20
20
  function ComponentTypeImage(props) {
21
21
  const {
22
22
  name: nameRHF,
@@ -1,8 +1,8 @@
1
1
  import { styled, CircularProgress } from "@mui/material";
2
+ import { S as Skeleton } from "../../Skeleton/Skeleton.js";
2
3
  import { c as circularProgressStyles } from "../CircularProgress.styles.js";
3
4
  import { a as CIRCULAR_PROGRESS_KEY_COMPONENT } from "../constants.js";
4
5
  import { C as CircularProgressSlots } from "./CircularProgressEnum.js";
5
- import { S as Skeleton } from "../../Skeleton/Skeleton.js";
6
6
  const RootStyled = styled(CircularProgress, {
7
7
  name: CIRCULAR_PROGRESS_KEY_COMPONENT,
8
8
  slot: CircularProgressSlots.root
@@ -3,7 +3,7 @@ const dialogStyles = {
3
3
  * Dialog Root style
4
4
  * @author cesar - automatic
5
5
  * @createdAt 2024-11-24 15:58:24 - automatic
6
- * @updatedAt 2024-12-02 17:50:36 - automatic
6
+ * @updatedAt 2024-12-05 17:01:44 - automatic
7
7
  * @updatedUser cesar - automatic
8
8
  */
9
9
  dialogRoot: ({ theme }) => ({
@@ -17,7 +17,8 @@ const dialogStyles = {
17
17
  margin: 0,
18
18
  display: "flex",
19
19
  alignItems: "center",
20
- justifyContent: "center"
20
+ justifyContent: "center",
21
+ overflow: "unset"
21
22
  }
22
23
  })
23
24
  };
@@ -0,0 +1,5 @@
1
+ import { LoadingButtonProps } from './types';
2
+ /**
3
+ * Componente LoadingButton que extiende las props de Button
4
+ */
5
+ export declare const LoadingButton: import('react').ForwardRefExoticComponent<Omit<LoadingButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,93 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import clsx from "clsx";
3
+ import { forwardRef } from "react";
4
+ import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
5
+ import { useTheme } from "@mui/material";
6
+ import { S as SkeletonLoadingButtonStyled, L as LoadingButtonRootStyled, T as TextLoadingButtonStyled, C as CircularProgressStyled, a as LoadingButtonIconStyled } from "./slots/LoadingButtonSlots.js";
7
+ import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
8
+ const LoadingButton = forwardRef((props, ref) => {
9
+ const {
10
+ className,
11
+ endIcon,
12
+ label,
13
+ startIcon,
14
+ color = "default",
15
+ disabled = false,
16
+ size = "small",
17
+ variant = "contained",
18
+ skeletonWidth = "100%",
19
+ loading = false,
20
+ ...others
21
+ } = props;
22
+ const { currentSize } = useComponentSize(size);
23
+ const isSkeleton = useModuleSkeleton();
24
+ const theme = useTheme();
25
+ const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
26
+ const paletteColor = getPropertyByString(
27
+ theme.vars.palette,
28
+ disabled ? "default" : color || "default",
29
+ theme.vars.palette.default
30
+ );
31
+ const ownerState = {
32
+ size,
33
+ variant,
34
+ disabled,
35
+ paletteColor,
36
+ color,
37
+ loading
38
+ };
39
+ if (isSkeleton) {
40
+ return /* @__PURE__ */ jsx(SkeletonLoadingButtonStyled, { "data-testid": "SkeletonButton", width: skeletonWidth, ownerState: { ...ownerState } });
41
+ }
42
+ const getAdjustedColor = (btnColor, btnVariant) => {
43
+ return btnVariant === "contained" ? `${btnColor}.contrastText` : `${btnColor}.main`;
44
+ };
45
+ const adjustedColor = getAdjustedColor(color, variant);
46
+ const renderIcon = (icon, instaceDataTestId) => {
47
+ if (!icon) {
48
+ return null;
49
+ }
50
+ if (typeof icon !== "string") {
51
+ return icon;
52
+ } else {
53
+ return /* @__PURE__ */ jsx(
54
+ LoadingButtonIconStyled,
55
+ {
56
+ color: adjustedColor,
57
+ ownerState: { ...ownerState },
58
+ src: icon,
59
+ alt: "icon",
60
+ size: adjustedSize,
61
+ disabled: loading || disabled,
62
+ instaceDataTestId,
63
+ className: clsx(className)
64
+ }
65
+ );
66
+ }
67
+ };
68
+ return /* @__PURE__ */ jsxs(
69
+ LoadingButtonRootStyled,
70
+ {
71
+ "aria-disabled": disabled,
72
+ role: "button",
73
+ startIcon: renderIcon(startIcon, "LoadingButtonStartIcon"),
74
+ endIcon: renderIcon(endIcon, "LoadingButtonEndIcon"),
75
+ className: clsx(className),
76
+ variant,
77
+ size,
78
+ disabled: loading || disabled,
79
+ disableRipple: true,
80
+ ownerState: { ...ownerState },
81
+ ref,
82
+ ...others,
83
+ children: [
84
+ /* @__PURE__ */ jsx(TextLoadingButtonStyled, { ownerState: { ...ownerState }, color: adjustedColor, children: label }),
85
+ loading === true && /* @__PURE__ */ jsx(CircularProgressStyled, { ownerState: { ...ownerState }, size: adjustedSize })
86
+ ]
87
+ }
88
+ );
89
+ });
90
+ LoadingButton.displayName = "LoadingButton";
91
+ export {
92
+ LoadingButton as L
93
+ };
@@ -0,0 +1,5 @@
1
+ import { LoadingButtonStyles } from './types';
2
+ /**
3
+ * Objeto que contiene todos los estilos para el componente LoadingButton.
4
+ */
5
+ export declare const loadingButtonStyles: LoadingButtonStyles;
@@ -0,0 +1,200 @@
1
+ const loadingButtonStyles = {
2
+ /**
3
+ * Estilos para el elemento raíz del componente LoadingButton.
4
+ * Incluye el diseño, los espaciados y los estados para los diferentes variantes de botón: 'text', 'outlined', y 'contained'.
5
+ * Maneja los estados de enfoque, hover, activo y deshabilitado, incluyendo colores específicos y comportamientos de fondo.
6
+ */
7
+ loadingButtonRoot: ({ theme, ownerState }) => ({
8
+ display: "flex",
9
+ alignItems: "center",
10
+ gap: theme.vars.size.baseSpacings.sp1,
11
+ padding: `0px ${theme.vars.size.baseSpacings.sp2}`,
12
+ boxShadow: "none",
13
+ borderRadius: theme.vars.size.borderRadius.r1,
14
+ // Estilos para la variante 'text'
15
+ ...ownerState.variant === "text" && {
16
+ color: ownerState.paletteColor?.semanticText,
17
+ '& [class*="M4LIcon-icon"]': {
18
+ backgroundColor: ownerState.paletteColor?.semanticText
19
+ },
20
+ "&:disabled": {
21
+ color: theme.vars.palette.text.disabled
22
+ },
23
+ backgroundColor: "transparent",
24
+ ...ownerState.color === "default" && {
25
+ color: theme.vars.palette.text.primary,
26
+ '& [class*="M4LIcon-icon"]': {
27
+ backgroundColor: theme.vars.palette.text.primary
28
+ }
29
+ },
30
+ ...ownerState.color === "primary" && {
31
+ color: ownerState.paletteColor?.enabled,
32
+ '& [class*="M4LIcon-icon"]': {
33
+ backgroundColor: ownerState.paletteColor?.enabled
34
+ }
35
+ },
36
+ "&:hover": {
37
+ backgroundColor: ownerState.paletteColor?.hoverOpacity
38
+ },
39
+ "&:active": {
40
+ backgroundColor: ownerState.paletteColor?.activeOpacity
41
+ },
42
+ "&:focus-visible": {
43
+ boxShadow: "none",
44
+ outline: theme.vars.size.borderStroke.container,
45
+ outlineColor: ownerState.paletteColor?.focusVisible,
46
+ outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
47
+ backgroundColor: ownerState.paletteColor?.activeOpacity
48
+ }
49
+ },
50
+ // Estilos para la variante 'outlined'
51
+ ...ownerState.variant === "outlined" && {
52
+ borderColor: ownerState.paletteColor?.enabled,
53
+ color: ownerState.paletteColor?.semanticText,
54
+ '& [class*="M4LIcon-icon"]': {
55
+ backgroundColor: ownerState.paletteColor?.semanticText
56
+ },
57
+ backgroundColor: "transparent",
58
+ ...ownerState.color === "default" && {
59
+ color: theme.vars.palette.text.primary,
60
+ borderColor: ownerState.paletteColor?.enabled,
61
+ '& [class*="M4LIcon-icon"]': {
62
+ backgroundColor: theme.vars.palette.text.primary
63
+ }
64
+ },
65
+ ...ownerState.color === "primary" && {
66
+ color: ownerState.paletteColor?.enabled,
67
+ '& [class*="M4LIcon-icon"]': {
68
+ backgroundColor: ownerState.paletteColor?.enabled
69
+ }
70
+ },
71
+ "&:hover": {
72
+ borderColor: ownerState.paletteColor?.hover,
73
+ backgroundColor: ownerState.paletteColor?.hoverOpacity
74
+ },
75
+ "&:active": {
76
+ backgroundColor: ownerState.paletteColor?.activeOpacity,
77
+ borderColor: ownerState.paletteColor?.active
78
+ },
79
+ "&:focus-visible": {
80
+ boxShadow: "none",
81
+ outline: theme.vars.size.borderStroke.container,
82
+ outlineColor: ownerState.paletteColor?.focusVisible,
83
+ outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
84
+ backgroundColor: ownerState.paletteColor?.activeOpacity,
85
+ borderColor: ownerState.paletteColor?.active
86
+ }
87
+ },
88
+ // Estilos para la variante 'contained'
89
+ ...ownerState.variant === "contained" && {
90
+ backgroundColor: ownerState.paletteColor?.enabled,
91
+ color: ownerState.paletteColor?.contrastText,
92
+ ...ownerState.color === "default" && {
93
+ color: theme.vars.palette.text.primary
94
+ },
95
+ "&:hover": {
96
+ backgroundColor: ownerState.paletteColor?.hover
97
+ },
98
+ "&:active": {
99
+ backgroundColor: ownerState.paletteColor?.active
100
+ },
101
+ "&:focus-visible": {
102
+ boxShadow: "none",
103
+ outline: theme.vars.size.borderStroke.container,
104
+ outlineColor: theme.vars.palette.border.main,
105
+ outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
106
+ backgroundColor: ownerState.paletteColor?.active
107
+ }
108
+ },
109
+ // Estilo para el texto dentro del botón
110
+ "& span": {
111
+ margin: "0px"
112
+ },
113
+ // Styles for small button size
114
+ ...ownerState.size === "small" && {
115
+ ...theme.generalSettings.isMobile ? {
116
+ height: theme.vars.size.mobile.small.action,
117
+ minHeight: theme.vars.size.mobile.small.action
118
+ } : {
119
+ height: theme.vars.size.desktop.small.action,
120
+ minHeight: theme.vars.size.desktop.small.action
121
+ }
122
+ },
123
+ // Styles for medium button size
124
+ ...ownerState.size === "medium" && {
125
+ ...theme.generalSettings.isMobile ? {
126
+ height: theme.vars.size.mobile.medium.action,
127
+ minHeight: theme.vars.size.mobile.medium.action
128
+ } : {
129
+ height: theme.vars.size.desktop.medium.action,
130
+ minHeight: theme.vars.size.desktop.medium.action
131
+ }
132
+ }
133
+ }),
134
+ /**
135
+ * Estilos para el ícono dentro del botón.
136
+ * Ajusta la visibilidad para los estados de carga y deshabilitado.
137
+ */
138
+ loadingButtonIcon: ({ theme, ownerState }) => ({
139
+ ...ownerState.loading === true && {
140
+ visibility: "hidden"
141
+ },
142
+ ...ownerState.disabled === true && {
143
+ '& [class*="M4LIcon-icon"]': {
144
+ backgroundColor: theme.vars.palette.text.disabled
145
+ }
146
+ }
147
+ }),
148
+ /**
149
+ * Estilos para el texto del botón.
150
+ * Incluye ajustes para los estados de carga y deshabilitado.
151
+ */
152
+ textLoadingButton: ({ theme, ownerState }) => ({
153
+ ...theme.typography.bodyDens,
154
+ ...ownerState.loading === true && {
155
+ visibility: "hidden"
156
+ },
157
+ ...ownerState.disabled === true && {
158
+ color: theme.vars.palette.text.disabled
159
+ }
160
+ }),
161
+ /**
162
+ * Estilos para la versión esquelética del botón.
163
+ * Incluye tamaños responsivos para diferentes anchos de pantalla y tamaños de botón.
164
+ */
165
+ skeletonLoadingButton: ({ theme, ownerState }) => ({
166
+ width: "100%",
167
+ background: theme.vars.palette.skeleton.transition,
168
+ // Styles for small size skeleton
169
+ ...ownerState.size === "small" && {
170
+ ...theme.generalSettings.isMobile ? {
171
+ height: theme.vars.size.mobile.small.action,
172
+ minHeight: theme.vars.size.mobile.small.action
173
+ } : {
174
+ height: theme.vars.size.desktop.small.action,
175
+ minHeight: theme.vars.size.desktop.small.action
176
+ }
177
+ },
178
+ // Styles for medium size skeleton
179
+ ...ownerState.size === "medium" && {
180
+ ...theme.generalSettings.isMobile ? {
181
+ height: theme.vars.size.mobile.medium.action,
182
+ minHeight: theme.vars.size.mobile.medium.action
183
+ } : {
184
+ height: theme.vars.size.desktop.medium.action,
185
+ minHeight: theme.vars.size.desktop.medium.action
186
+ }
187
+ }
188
+ }),
189
+ /**
190
+ * Estilos para el componente CircularProgress.
191
+ * Posiciona el cargador dentro del botón y aplica un color consistente.
192
+ */
193
+ circularProgress: ({ theme }) => ({
194
+ position: "absolute",
195
+ color: theme.vars.palette.text.disabled
196
+ })
197
+ };
198
+ export {
199
+ loadingButtonStyles as l
200
+ };
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Clave de identificación del componente LoadingButton dentro del sistema.
3
+ *
4
+ * Esta constante se utiliza como identificador único para asociar y personalizar estilos y configuraciones
5
+ * relacionadas con el componente `LoadingButton` dentro del sistema de temas y estilos.
6
+ * @default 'M4LLoadingButton'
7
+ */
8
+ export declare const LOADING_BUTTON_KEY_COMPONENT = "M4LLoadingButton";
@@ -0,0 +1,4 @@
1
+ const LOADING_BUTTON_KEY_COMPONENT = "M4LLoadingButton";
2
+ export {
3
+ LOADING_BUTTON_KEY_COMPONENT as L
4
+ };
@@ -1,9 +1 @@
1
- import { MuiLabLoadingButtonProps } from './types';
2
- /**
3
- * TODO: Documentar
4
- * @author Bruce Escobar - automatic
5
- * @createdAt 2024-10-22 09:41:31 - automatic
6
- * @updatedAt 2024-10-22 19:27:23 - automatic
7
- * @updatedUser Bruce Escobar - automatic
8
- */
9
- export declare const LoadingButton: (props: MuiLabLoadingButtonProps) => import("react/jsx-runtime").JSX.Element;
1
+ export * from './LoadingButton';
@@ -0,0 +1,7 @@
1
+ export declare enum LoadingButtonSlots {
2
+ loadingButtonRoot = "loadingButtonRoot",
3
+ skeletonLoadingButton = "skeletonLoadingButton",
4
+ loadingButtonIcon = "loadingButtonIcon",
5
+ textLoadingButton = "textLoadingButton",
6
+ circularProgress = "circularProgress"
7
+ }
@@ -0,0 +1,11 @@
1
+ var LoadingButtonSlots = /* @__PURE__ */ ((LoadingButtonSlots2) => {
2
+ LoadingButtonSlots2["loadingButtonRoot"] = "loadingButtonRoot";
3
+ LoadingButtonSlots2["skeletonLoadingButton"] = "skeletonLoadingButton";
4
+ LoadingButtonSlots2["loadingButtonIcon"] = "loadingButtonIcon";
5
+ LoadingButtonSlots2["textLoadingButton"] = "textLoadingButton";
6
+ LoadingButtonSlots2["circularProgress"] = "circularProgress";
7
+ return LoadingButtonSlots2;
8
+ })(LoadingButtonSlots || {});
9
+ export {
10
+ LoadingButtonSlots as L
11
+ };
@@ -0,0 +1,38 @@
1
+ /**
2
+ * `LoadingButtonRootStyled`
3
+ * Componente raíz del botón que usa el componente `Button` de material UI.
4
+ */
5
+ declare const LoadingButtonRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').ButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
6
+ ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
7
+ }, "children" | "size" | "action" | "color" | "style" | "disabled" | "variant" | "className" | "classes" | "sx" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon">, "children" | "value" | "ref" | "title" | "size" | "name" | "id" | "type" | "action" | "hidden" | "color" | "content" | "style" | "disabled" | "variant" | "className" | "classes" | "onChange" | "sx" | "translate" | "form" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "fullWidth" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown> & {
8
+ ownerState: Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown>;
9
+ }, {}, {}>;
10
+ /**
11
+ * `SkeletonLoadingButtonStyled`
12
+ * Esqueleto de carga del botón que usa el componente `Skeleton` de M4L.
13
+ */
14
+ declare const SkeletonLoadingButtonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Skeleton/types').SkeletonProps, keyof import('../../Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown> & {
15
+ ownerState: Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown>;
16
+ }, {}, {}>;
17
+ /**
18
+ * `LoadingButtonIconStyled`
19
+ * Ícono estilizado del botón (inicio o fin) que usa el componente `Icon` de M4L.
20
+ */
21
+ declare const LoadingButtonIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown> & {
22
+ ownerState: Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown>;
23
+ }, {}, {}>;
24
+ /**
25
+ * `TextLoadingButtonStyled`
26
+ * Texto estilizado del botón del componente `Typography` de M4L.
27
+ */
28
+ declare const TextLoadingButtonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown> & {
29
+ ownerState: Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown>;
30
+ }, {}, {}>;
31
+ /**
32
+ * `CircularProgressStyled`
33
+ * Indicador de progreso circular estilizado del componente `CircularProgress` de M4L.
34
+ */
35
+ declare const CircularProgressStyled: import('@emotion/styled').StyledComponent<Pick<import('../../CircularProgress/types').CircularProgressProps, keyof import('../../CircularProgress/types').CircularProgressProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown> & {
36
+ ownerState: Partial<import('../types').LoadingButtonOwnerState> & Record<string, unknown>;
37
+ }, {}, {}>;
38
+ export { LoadingButtonRootStyled, SkeletonLoadingButtonStyled, LoadingButtonIconStyled, TextLoadingButtonStyled, CircularProgressStyled, };
@@ -0,0 +1,36 @@
1
+ import { Button } from "@mui/material";
2
+ import { styled } from "@mui/material/styles";
3
+ import { l as loadingButtonStyles } from "../LoadingButton.styles.js";
4
+ import { L as LOADING_BUTTON_KEY_COMPONENT } from "../constants.js";
5
+ import { L as LoadingButtonSlots } from "./LoadingButtonEnum.js";
6
+ import { S as Skeleton } from "../../Skeleton/Skeleton.js";
7
+ import { T as Typography } from "../../Typography/Typography.js";
8
+ import { C as CircularProgress } from "../../CircularProgress/CircularProgress.js";
9
+ import { I as Icon } from "../../../Icon/Icon.js";
10
+ const LoadingButtonRootStyled = styled(Button, {
11
+ name: LOADING_BUTTON_KEY_COMPONENT,
12
+ slot: LoadingButtonSlots.loadingButtonRoot
13
+ })(loadingButtonStyles?.loadingButtonRoot);
14
+ const SkeletonLoadingButtonStyled = styled(Skeleton, {
15
+ name: LOADING_BUTTON_KEY_COMPONENT,
16
+ slot: LoadingButtonSlots.skeletonLoadingButton
17
+ })(loadingButtonStyles?.skeletonLoadingButton);
18
+ const LoadingButtonIconStyled = styled(Icon, {
19
+ name: LOADING_BUTTON_KEY_COMPONENT,
20
+ slot: LoadingButtonSlots.loadingButtonIcon
21
+ })(loadingButtonStyles?.loadingButtonIcon);
22
+ const TextLoadingButtonStyled = styled(Typography, {
23
+ name: LOADING_BUTTON_KEY_COMPONENT,
24
+ slot: LoadingButtonSlots.textLoadingButton
25
+ })(loadingButtonStyles?.textLoadingButton);
26
+ const CircularProgressStyled = styled(CircularProgress, {
27
+ name: LOADING_BUTTON_KEY_COMPONENT,
28
+ slot: LoadingButtonSlots.circularProgress
29
+ })(loadingButtonStyles?.circularProgress);
30
+ export {
31
+ CircularProgressStyled as C,
32
+ LoadingButtonRootStyled as L,
33
+ SkeletonLoadingButtonStyled as S,
34
+ TextLoadingButtonStyled as T,
35
+ LoadingButtonIconStyled as a
36
+ };
@@ -1,9 +1,15 @@
1
- import { LoadingButtonProps } from '@mui/lab';
2
- export interface MuiLabLoadingButtonProps extends LoadingButtonProps {
3
- children?: string;
4
- size?: 'small' | 'medium';
5
- skeletonWidth?: string | number;
1
+ import { OverridesStyleRules } from '@mui/material/styles/overrides';
2
+ import { PaletteColor, Theme } from '@mui/material';
3
+ import { LOADING_BUTTON_KEY_COMPONENT } from './constants';
4
+ import { LoadingButtonSlots } from './slots/LoadingButtonEnum';
5
+ import { ButtonProps } from '../Button';
6
+ export interface LoadingButtonProps extends Omit<ButtonProps, 'label'> {
7
+ label?: string;
8
+ loading?: boolean;
6
9
  }
7
- export interface OwnerState extends Pick<MuiLabLoadingButtonProps, 'size' | 'variant'> {
8
- isDisabled?: boolean;
10
+ export interface LoadingButtonOwnerState extends Pick<LoadingButtonProps, 'size' | 'variant' | 'color' | 'disabled' | 'loading'> {
11
+ disabled?: boolean;
12
+ paletteColor: PaletteColor;
9
13
  }
14
+ export type LoadingButtonSlotsType = keyof typeof LoadingButtonSlots;
15
+ export type LoadingButtonStyles = Partial<OverridesStyleRules<LoadingButtonSlotsType, typeof LOADING_BUTTON_KEY_COMPONENT, Theme> | undefined> | undefined;
@@ -14,7 +14,7 @@ export { Badge } from './Badge';
14
14
  export * from './ImageButton/ImageButton';
15
15
  export { LinearProgress } from './LinearProgress';
16
16
  export { LinkWithRoute } from './LinkWithRoute';
17
- export { LoadingButton } from './LoadingButton';
17
+ export { LoadingButton } from './LoadingButton/LoadingButton';
18
18
  export type { MenuAction, ComponentActionProps } from './MenuActions/types';
19
19
  export * from './Popover';
20
20
  export * from './Skeleton';
package/index.js CHANGED
@@ -154,7 +154,7 @@ import { C as C13 } from "./components/mui_extended/CircularProgress/CircularPro
154
154
  import { B as B5 } from "./components/mui_extended/Badge/Badge.js";
155
155
  import { L as L8 } from "./components/mui_extended/LinearProgress/index.js";
156
156
  import { L as L9 } from "./components/mui_extended/LinkWithRoute/index.js";
157
- import { L as L10 } from "./components/mui_extended/LoadingButton/index.js";
157
+ import { L as L10 } from "./components/mui_extended/LoadingButton/LoadingButton.js";
158
158
  import { P as P14 } from "./components/mui_extended/Pager/index.js";
159
159
  import { g as g26 } from "./components/mui_extended/Pager/dicctionary.js";
160
160
  import { T as T6 } from "./components/mui_extended/Tab/Tab.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.1.13",
3
+ "version": "9.1.15",
4
4
  "license": "UNLICENSED",
5
5
  "lint-staged": {
6
6
  "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
@@ -31,7 +31,7 @@ import { StoryFn, StoryContext } from '@storybook/react';
31
31
  * @returns JSX.Element - The decorated story with modal integration.
32
32
  * @author cesar - automatic
33
33
  * @createdAt 2024-11-26 12:39:40 - automatic
34
- * @updatedAt 2024-12-02 17:50:36 - automatic
34
+ * @updatedAt 2024-12-06 11:53:51 - automatic
35
35
  * @updatedUser cesar - automatic
36
36
  */
37
- export declare const WithExtendedContainer: (MyStory: StoryFn, context: StoryContext) => import("react/jsx-runtime").JSX.Element;
37
+ export declare const WithExtendedContainer: (_: StoryFn, context: StoryContext) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,42 @@
1
+ import { Meta, StoryObj } from '@storybook/react/*';
2
+ import { LoadingButton } from '../../../../../src/components/mui_extended/LoadingButton';
3
+ declare const meta: Meta<typeof LoadingButton>;
4
+ type Story = StoryObj<typeof LoadingButton>;
5
+ /**
6
+ * Base story for `Button` in standard mode.
7
+ */
8
+ export declare const Default: Story;
9
+ /**
10
+ * Base story for `Button` with start icon.
11
+ */
12
+ export declare const WithStartIcon: Story;
13
+ /**
14
+ * Base story for `Button` with end icon.
15
+ */
16
+ export declare const WithEndIcon: Story;
17
+ /**
18
+ * Base story for `Button` with start and end icon.
19
+ */
20
+ export declare const WithStartAndEndIcon: Story;
21
+ /**
22
+ * Base story for `Button` with disabled state.
23
+ */
24
+ export declare const Disabled: Story;
25
+ /**
26
+ * Base story for `Button` with disabled state.
27
+ */
28
+ export declare const Loading: Story;
29
+ /**
30
+ * Prueba 1
31
+ */
32
+ export declare const TextLoadingButton: Story;
33
+ /**
34
+ * Prueba 2
35
+ */
36
+ export declare const OutlinedLoadingButton: Story;
37
+ /**
38
+ * Prueba 3
39
+ */
40
+ export declare const ContainedLoadingButton: Story;
41
+ export declare const Skeleton: Story;
42
+ export default meta;
@@ -1,2 +0,0 @@
1
- import { BaseDataForTesting } from '../../../test/types';
2
- export declare const baseDataForTesting: BaseDataForTesting;
@@ -1,5 +0,0 @@
1
- export type OptionsTest = {
2
- id: number;
3
- name: string;
4
- url: string;
5
- };
@@ -1 +0,0 @@
1
- export declare const componentName = "M4LLoadingButton";
@@ -1,4 +0,0 @@
1
- const componentName = "M4LLoadingButton";
2
- export {
3
- componentName as c
4
- };
@@ -1,11 +0,0 @@
1
- import { LoadingButtonClassesType } from './types';
2
- import { OwnerState } from '../types';
3
- export declare const loadingButtonClasses: LoadingButtonClassesType;
4
- export declare function getLoadingButtonUtilityClass(slot: string): string;
5
- /**
6
- * TODO: Documentar
7
- */
8
- export declare const useUtilityClasses: (onwerState: OwnerState) => {
9
- skeleton: string;
10
- root: string;
11
- };
@@ -1,42 +0,0 @@
1
- import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
2
- import { unstable_composeClasses } from "@mui/base";
3
- import { c as componentName } from "./constants.js";
4
- generateUtilityClasses(
5
- componentName,
6
- [
7
- /* elements */
8
- "root",
9
- "skeleton",
10
- /* states or variants of elements */
11
- "sizeSmall",
12
- "sizeMedium",
13
- "variantOutlined",
14
- "variantContained",
15
- "variantText",
16
- "isDisabled"
17
- ]
18
- );
19
- function getLoadingButtonUtilityClass(slot) {
20
- return generateUtilityClass(componentName, slot);
21
- }
22
- const useUtilityClasses = (onwerState) => {
23
- const slots = {
24
- root: [
25
- "root",
26
- onwerState.size === "small" && "sizeSmall",
27
- onwerState.size === "medium" && "sizeMedium",
28
- onwerState.variant === "outlined" && "variantOutlined",
29
- onwerState.variant === "contained" && "variantContained",
30
- onwerState.variant === "text" && "variantText",
31
- onwerState.isDisabled && "isDisabled"
32
- ],
33
- skeleton: ["skeleton"]
34
- };
35
- const composedClasses = unstable_composeClasses(slots, getLoadingButtonUtilityClass, {});
36
- return {
37
- ...composedClasses
38
- };
39
- };
40
- export {
41
- useUtilityClasses as u
42
- };
@@ -1,11 +0,0 @@
1
- export interface LoadingButtonClassesType {
2
- root: string;
3
- skeleton: string;
4
- sizeSmall: string;
5
- sizeMedium: string;
6
- variantOutlined: string;
7
- variantContained: string;
8
- variantText: string;
9
- isDisabled: string;
10
- }
11
- export type LoadingbuttonClassesKey = keyof LoadingButtonClassesType;
@@ -1,47 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { LoadingButton as LoadingButton$1 } from "@mui/lab";
3
- import { useModuleSkeleton } from "@m4l/core";
4
- import { Skeleton } from "@mui/material";
5
- import { u as useUtilityClasses } from "./classes/index.js";
6
- import { L as LoadingButtonRoot } from "./styles.js";
7
- import { T as Typography } from "../Typography/Typography.js";
8
- import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
9
- import { g as getNameDataTestId } from "./tests/utils.js";
10
- import clsx from "clsx";
11
- const LoadingButton = (props) => {
12
- const {
13
- children,
14
- skeletonWidth = "100%",
15
- size = "small",
16
- variant = "contained",
17
- disabled,
18
- className,
19
- ...other
20
- } = props;
21
- const isSkeleton = useModuleSkeleton();
22
- const ownerState = {
23
- size,
24
- variant,
25
- isDisabled: disabled
26
- };
27
- const classes = useUtilityClasses(ownerState);
28
- return /* @__PURE__ */ jsx(
29
- LoadingButtonRoot,
30
- {
31
- className: clsx(classes.root, className),
32
- ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
33
- children: !isSkeleton ? /* @__PURE__ */ jsx(LoadingButton$1, { ...other, variant, size, children: /* @__PURE__ */ jsx(Typography, { variant: "body", children }) }) : /* @__PURE__ */ jsx(
34
- Skeleton,
35
- {
36
- className: classes.skeleton,
37
- ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("skeleton") } : {},
38
- variant: "rectangular",
39
- width: skeletonWidth
40
- }
41
- )
42
- }
43
- );
44
- };
45
- export {
46
- LoadingButton as L
47
- };
@@ -1 +0,0 @@
1
- export declare const LoadingButtonRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -1,8 +0,0 @@
1
- import { styled } from "@mui/material";
2
- const LoadingButtonRoot = styled("div")(({ theme }) => ({
3
- /* Styles overrides of m4l_styles */
4
- ...theme.components?.M4LLoadingButton?.styleOverrides || {}
5
- }));
6
- export {
7
- LoadingButtonRoot as L
8
- };
@@ -1 +0,0 @@
1
- export declare const LOADINGBUTTON_PREFIX = "M4LoadingButton";
@@ -1,4 +0,0 @@
1
- const LOADINGBUTTON_PREFIX = "M4LoadingButton";
2
- export {
3
- LOADINGBUTTON_PREFIX as L
4
- };
@@ -1,2 +0,0 @@
1
- import { LoadingbuttonClassesKey } from '../classes/types';
2
- export declare const getNameDataTestId: (KEY: LoadingbuttonClassesKey) => string;
@@ -1,7 +0,0 @@
1
- import { L as LOADINGBUTTON_PREFIX } from "./constants.js";
2
- const getNameDataTestId = (KEY) => {
3
- return `${LOADINGBUTTON_PREFIX}-${KEY}`;
4
- };
5
- export {
6
- getNameDataTestId as g
7
- };