@m4l/layouts 9.1.8 → 9.1.9

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 (75) hide show
  1. package/components/MFHostApp/index.d.ts +0 -4
  2. package/components/MFNoAuthApp/index.d.ts +0 -4
  3. package/components/MFWindowsTitle/MFWindowsTitle.d.ts +0 -4
  4. package/contexts/AuthContext/index.d.ts +0 -4
  5. package/hooks/useAuth/index.d.ts +0 -4
  6. package/hooks/useModule/index.d.ts +0 -4
  7. package/layouts/MasterDetailLayout/MasterDetailLayout.d.ts +0 -4
  8. package/layouts/MasterDetailLayout/classes/index.d.ts +0 -4
  9. package/layouts/MasterDetailLayout/components/ButtonDetail/index.d.ts +0 -4
  10. package/layouts/MasterDetailLayout/contexts/MasterDetailContext/index.d.ts +0 -4
  11. package/layouts/ModuleLayout/ModuleLayout.js +2 -3
  12. package/layouts/ModuleLayout/constants.d.ts +1 -0
  13. package/layouts/ModuleLayout/constants.js +4 -0
  14. package/layouts/ModuleLayout/contexts/ModuleContext/index.d.ts +0 -4
  15. package/layouts/ModuleLayout/contexts/ModuleContext/index.js +0 -5
  16. package/layouts/ModuleLayout/slots/ModuleLayoutEnum.d.ts +3 -0
  17. package/layouts/ModuleLayout/slots/ModuleLayoutEnum.js +7 -0
  18. package/layouts/ModuleLayout/slots/ModuleLayoutSlots.d.ts +1 -0
  19. package/layouts/ModuleLayout/slots/ModuleLayoutSlots.js +11 -0
  20. package/layouts/ModuleLayout/styles.d.ts +2 -0
  21. package/layouts/ModuleLayout/styles.js +16 -0
  22. package/layouts/ModuleLayout/subcomponents/BaseModuleLayout/index.d.ts +2 -0
  23. package/layouts/ModuleLayout/subcomponents/BaseModuleLayout/index.js +19 -0
  24. package/layouts/ModuleLayout/types.d.ts +7 -1
  25. package/layouts/NoAuthModuleLayout/constants.d.ts +1 -0
  26. package/layouts/NoAuthModuleLayout/constants.js +4 -0
  27. package/layouts/NoAuthModuleLayout/index.d.ts +4 -5
  28. package/layouts/NoAuthModuleLayout/index.js +4 -5
  29. package/layouts/NoAuthModuleLayout/slots/NoAuthModuleLayoutEnum.d.ts +25 -0
  30. package/layouts/NoAuthModuleLayout/slots/NoAuthModuleLayoutEnum.js +33 -0
  31. package/layouts/NoAuthModuleLayout/slots/NoAuthModuleLayoutSlots.d.ts +19 -0
  32. package/layouts/NoAuthModuleLayout/slots/NoAuthModuleLayoutSlots.js +100 -0
  33. package/layouts/NoAuthModuleLayout/styles.d.ts +2 -0
  34. package/layouts/NoAuthModuleLayout/styles.js +314 -0
  35. package/layouts/NoAuthModuleLayout/subcomponents/BaseNoAuthModuleLayout/index.d.ts +4 -0
  36. package/layouts/NoAuthModuleLayout/subcomponents/BaseNoAuthModuleLayout/index.js +16 -0
  37. package/layouts/NoAuthModuleLayout/subcomponents/BaseNoAuthModuleLayout/subcomponents/DesktopContent/index.d.ts +4 -0
  38. package/layouts/NoAuthModuleLayout/subcomponents/BaseNoAuthModuleLayout/subcomponents/DesktopContent/index.js +47 -0
  39. package/layouts/NoAuthModuleLayout/subcomponents/BaseNoAuthModuleLayout/subcomponents/MobileContent/index.d.ts +4 -0
  40. package/layouts/NoAuthModuleLayout/subcomponents/BaseNoAuthModuleLayout/subcomponents/MobileContent/index.js +43 -0
  41. package/layouts/NoAuthModuleLayout/tests/NoAuthModuleLayout.test.d.ts +1 -0
  42. package/layouts/NoAuthModuleLayout/types.d.ts +45 -0
  43. package/package.json +8 -3
  44. package/test/HostThemeProviderMock.d.ts +10 -0
  45. package/test/TestAppWrapper.d.ts +29 -0
  46. package/test/TestFormAutoValidation.d.ts +4 -0
  47. package/test/constants.d.ts +69 -0
  48. package/test/constants_no_mock.d.ts +1 -0
  49. package/test/getNameDataTestId.d.ts +15 -0
  50. package/test/index.d.ts +4 -0
  51. package/test/mocks.d.ts +24 -0
  52. package/test/types.d.ts +4 -0
  53. package/test/utils.d.ts +23 -10
  54. package/layouts/ModuleLayout/classes/constants.d.ts +0 -1
  55. package/layouts/ModuleLayout/classes/constants.js +0 -4
  56. package/layouts/ModuleLayout/classes/index.d.ts +0 -14
  57. package/layouts/ModuleLayout/classes/index.js +0 -25
  58. package/layouts/ModuleLayout/classes/types.d.ts +0 -7
  59. package/layouts/ModuleLayout/subcomponents/InnerModule/index.d.ts +0 -2
  60. package/layouts/ModuleLayout/subcomponents/InnerModule/index.js +0 -20
  61. package/layouts/ModuleLayout/subcomponents/InnerModule/styles.d.ts +0 -1
  62. package/layouts/ModuleLayout/subcomponents/InnerModule/styles.js +0 -7
  63. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/index.d.ts +0 -8
  64. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/index.js +0 -16
  65. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/styles.d.ts +0 -1
  66. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/styles.js +0 -15
  67. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/DesktopContent/index.d.ts +0 -8
  68. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/DesktopContent/index.js +0 -47
  69. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/DesktopContent/styles.d.ts +0 -9
  70. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/DesktopContent/styles.js +0 -115
  71. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/MobileContent/index.d.ts +0 -8
  72. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/MobileContent/index.js +0 -43
  73. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/MobileContent/styles.d.ts +0 -8
  74. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/MobileContent/styles.js +0 -96
  75. /package/layouts/ModuleLayout/subcomponents/{InnerModule → BaseModuleLayout}/types.d.ts +0 -0
@@ -0,0 +1,4 @@
1
+ export * from './constants';
2
+ export * from './types';
3
+ export * from './utils';
4
+ export * from './mocks';
@@ -0,0 +1,24 @@
1
+ import * as core from '@m4l/core';
2
+ import * as graphics from '@m4l/graphics';
3
+ export declare const mock_addFlag: import('vitest').Mock<(...args: any[]) => any>;
4
+ export declare const mock_networkOperation: import('vitest').Mock<(...args: any[]) => any>;
5
+ export declare const mock_useFormatter: import('vitest').Mock<(...args: any[]) => any>;
6
+ export declare const mock_events_add_listener: import('vitest').Mock<(...args: any[]) => any>;
7
+ export declare const mock_events_remove_listener: import('vitest').Mock<(...args: any[]) => any>;
8
+ export declare const mock_events_emit: import('vitest').Mock<(...args: any[]) => any>;
9
+ export declare const mock_startProgress: import('vitest').Mock<(...args: any[]) => any>;
10
+ export declare const mock_stopProgress: import('vitest').Mock<(...args: any[]) => any>;
11
+ export declare const mock_useModuleDictionary: import('vitest').Mock<(...args: any[]) => any>;
12
+ export declare const mock_useEnvironment: {
13
+ host_static_assets: string;
14
+ environment_assets: string;
15
+ domain_token: string;
16
+ };
17
+ export declare const mockedGraphics: {
18
+ useFormatter: import('vitest').MockInstance<() => graphics.Formatters>;
19
+ };
20
+ export declare function restoreGraphicsMocked(): void;
21
+ export declare const coreImplementation: typeof core;
22
+ export declare const graphicsImplementation: {
23
+ useFormatter: import('vitest').MockInstance<() => graphics.Formatters>;
24
+ };
@@ -0,0 +1,4 @@
1
+ export interface BaseDataForTesting {
2
+ a: string;
3
+ b: number;
4
+ }
package/test/utils.d.ts CHANGED
@@ -1,16 +1,29 @@
1
- import { RenderResult } from '@testing-library/react';
2
- import { default as userEvent } from '@testing-library/user-event';
1
+ import { act, cleanup, fireEvent, RenderResult, screen, waitFor, within } from '@testing-library/react';
2
+ import { renderHook } from '@testing-library/react-hooks';
3
+ import { default as userEvent, UserEvent } from '@testing-library/user-event';
3
4
  import { ReactElement } from 'react';
5
+ import { describe, expect } from 'vitest';
4
6
  /**
5
- * Custom render function to wrap providers
6
- * @author Juan Escobar - automatic
7
- * @createdAt 2024-10-09 19:56:26 - automatic
8
- * @updatedAt 2024-10-09 20:00:30 - automatic
9
- * @updatedUser Juan Escobar - automatic
7
+ * TODO: Documentar
10
8
  */
11
9
  declare const customRender: (ui: ReactElement, options?: {}) => RenderResult & {
12
10
  user: ReturnType<typeof userEvent.setup>;
13
11
  };
14
- export * from '@testing-library/react';
15
- export { default as userEvent } from '@testing-library/user-event';
16
- export { customRender as render };
12
+ /**
13
+ * This function is a wrapper around the render function from @testing-library/react.
14
+ * Render Material UI components with the TestAppWrapper context.
15
+ * TestAppWrapper is a React functional component that provides a consistent testing environment
16
+ * for components that rely on various context providers.
17
+ * It wraps the children components with the following contexts:
18
+ * ModuleSkeletonContext, HostThemeProviderMock, and AppearanceComponentProvider.
19
+ * @param ui - The component to render.
20
+ * @param options - Additional options to pass to the render function.
21
+ * @returns The rendered component and the user event object.
22
+ * @example
23
+ * // Usage example
24
+ * const { renderUI, user } = renderMaterialUI(<MyComponent />);
25
+ */
26
+ declare const renderMaterialUI: (ui: ReactElement, options?: {}) => RenderResult & {
27
+ user: UserEvent;
28
+ };
29
+ export { act, cleanup, describe, expect, fireEvent, customRender as render, renderHook, renderMaterialUI, screen, userEvent, waitFor, within, };
@@ -1 +0,0 @@
1
- export declare const componentName = "M4LModuleLayout";
@@ -1,4 +0,0 @@
1
- const componentName = "M4LModuleLayout";
2
- export {
3
- componentName as c
4
- };
@@ -1,14 +0,0 @@
1
- import { ModuleLayoutClassesType } from './types';
2
- export declare const moduleLayoutClasses: ModuleLayoutClassesType;
3
- export declare function getModuleLayoutUtilityClass(slot: string): string;
4
- /**
5
- * Hook para obtener las clases del componente ModuleLayout
6
- * @author Juan Escobar - automatic
7
- * @createdAt 2024-10-09 19:56:26 - automatic
8
- * @updatedAt 2024-10-09 20:00:30 - automatic
9
- * @updatedUser Juan Escobar - automatic
10
- */
11
- export declare const useModuleLayoutUtilityClasses: () => {
12
- root: string;
13
- moduleContent: string;
14
- };
@@ -1,25 +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(componentName, [
5
- /* elements */
6
- "root",
7
- "moduleContent"
8
- /* states or variants of elements */
9
- ]);
10
- function getModuleLayoutUtilityClass(slot) {
11
- return generateUtilityClass(componentName, slot);
12
- }
13
- const useModuleLayoutUtilityClasses = () => {
14
- const slots = {
15
- root: ["root"],
16
- moduleContent: ["moduleContent"]
17
- };
18
- const composedClasses = unstable_composeClasses(slots, getModuleLayoutUtilityClass, {});
19
- return {
20
- ...composedClasses
21
- };
22
- };
23
- export {
24
- useModuleLayoutUtilityClasses as u
25
- };
@@ -1,7 +0,0 @@
1
- import { useModuleLayoutUtilityClasses } from '.';
2
- export interface ModuleLayoutClassesType {
3
- root: string;
4
- moduleContent: string;
5
- }
6
- export type ModuleLayoutClassesKey = keyof ModuleLayoutClassesType;
7
- export type Classes = ReturnType<typeof useModuleLayoutUtilityClasses>;
@@ -1,2 +0,0 @@
1
- import { ModuleProps, ModuleRef } from './types';
2
- export declare const InnerModule: import('react').ForwardRefExoticComponent<ModuleProps & import('react').RefAttributes<ModuleRef>>;
@@ -1,20 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { forwardRef, useRef, useImperativeHandle } from "react";
3
- import { I as InnerModuleRoot } from "./styles.js";
4
- import { useModal } from "@m4l/components";
5
- import { u as useModuleLayoutUtilityClasses } from "../../classes/index.js";
6
- const InnerModule = forwardRef((props, ref) => {
7
- const { children } = props;
8
- const { openModal } = useModal();
9
- const divRef = useRef(null);
10
- useImperativeHandle(ref, () => ({
11
- openModal,
12
- current: divRef.current
13
- }));
14
- const classes = useModuleLayoutUtilityClasses();
15
- return /* @__PURE__ */ jsx(InnerModuleRoot, { className: classes.root, ref: divRef, children: /* @__PURE__ */ jsx("div", { className: classes.moduleContent, children }) });
16
- });
17
- InnerModule.displayName = "InnerModule";
18
- export {
19
- InnerModule as I
20
- };
@@ -1 +0,0 @@
1
- export declare const InnerModuleRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -1,7 +0,0 @@
1
- import { styled } from "@mui/material/styles";
2
- const InnerModuleRoot = styled("div")(({ theme }) => ({
3
- ...theme.components?.M4LModuleLayout?.styleOverrides
4
- }));
5
- export {
6
- InnerModuleRoot as I
7
- };
@@ -1,8 +0,0 @@
1
- /**
2
- * Componente que contiene el contenido de la vista de escritorio/ móvil
3
- * @author Juan Escobar - automatic
4
- * @createdAt 2024-10-09 19:56:26 - automatic
5
- * @updatedAt 2024-10-09 20:00:30 - automatic
6
- * @updatedUser Juan Escobar - automatic
7
- */
8
- export declare const InnerModule: () => import("react/jsx-runtime").JSX.Element;
@@ -1,16 +0,0 @@
1
- import { jsx, Fragment } from "react/jsx-runtime";
2
- import { useResponsiveDesktop } from "@m4l/graphics";
3
- import { HelmetPage } from "@m4l/components";
4
- import { I as InnerModuleRoot } from "./styles.js";
5
- import { useModuleDictionary, useBase } from "@m4l/core";
6
- import { D as DesktopContent } from "./subcomponents/DesktopContent/index.js";
7
- import { M as MobileContent } from "./subcomponents/MobileContent/index.js";
8
- const InnerModule = () => {
9
- const { getModuleLabel } = useModuleDictionary();
10
- const isDesktop = useResponsiveDesktop();
11
- const { subtitle } = useBase();
12
- return /* @__PURE__ */ jsx(HelmetPage, { title: getModuleLabel(), subtitle, children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InnerModuleRoot, { id: "modulerootnouth", children: isDesktop ? /* @__PURE__ */ jsx(DesktopContent, {}) : /* @__PURE__ */ jsx(MobileContent, {}) }) }) });
13
- };
14
- export {
15
- InnerModule as I
16
- };
@@ -1 +0,0 @@
1
- export declare const InnerModuleRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -1,15 +0,0 @@
1
- import { styled } from "@mui/material";
2
- const InnerModuleRoot = styled("div")(({ theme }) => ({
3
- display: "flex",
4
- justifyContent: "center",
5
- alignItems: "center",
6
- height: "100vh",
7
- padding: "20px",
8
- backgroundColor: theme.vars.palette.background.neutral,
9
- [theme.breakpoints.down("md")]: {
10
- padding: "0px"
11
- }
12
- }));
13
- export {
14
- InnerModuleRoot as I
15
- };
@@ -1,8 +0,0 @@
1
- /**
2
- * Componente que contiene el contenido de la vista de escritorio
3
- * @author Juan Escobar - automatic
4
- * @createdAt 2024-10-09 19:56:26 - automatic
5
- * @updatedAt 2024-10-09 20:00:30 - automatic
6
- * @updatedUser Juan Escobar - automatic
7
- */
8
- export declare const DesktopContent: () => import("react/jsx-runtime").JSX.Element;
@@ -1,47 +0,0 @@
1
- import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
- import { LanguagePopover, Image, Typography, Stack, ScrollBar } from "@m4l/components";
3
- import { D as DesktopContentRoot, a as DesktopBanner, C as ContainerLogo, b as CompanyName, c as CompanyLeyend, W as WrapperFormContent, F as FormContent, d as ContainerModuleName } from "./styles.js";
4
- import { useBase, useModuleDictionary, useDomain } from "@m4l/core";
5
- const DesktopContent = () => {
6
- const { children, companyLogoSmallUrl } = useBase();
7
- const { getLabel } = useModuleDictionary();
8
- const { name, slogan } = useDomain();
9
- return /* @__PURE__ */ jsxs(DesktopContentRoot, { children: [
10
- /* @__PURE__ */ jsx(LanguagePopover, {}),
11
- /* @__PURE__ */ jsxs(DesktopBanner, { children: [
12
- /* @__PURE__ */ jsx(ContainerLogo, { children: /* @__PURE__ */ jsx(Image, { src: companyLogoSmallUrl, width: "64px", height: "64px" }) }),
13
- /* @__PURE__ */ jsxs(CompanyName, { children: [
14
- /* @__PURE__ */ jsx(
15
- Typography,
16
- {
17
- variant: "subtitleDens",
18
- skeletonWidth: "70%",
19
- children: name
20
- }
21
- ),
22
- /* @__PURE__ */ jsx(Typography, { variant: "paragraph", skeletonWidth: "40%", children: getLabel("company_name_subtitle") })
23
- ] }),
24
- /* @__PURE__ */ jsxs(CompanyLeyend, { children: [
25
- /* @__PURE__ */ jsx(Typography, { variant: "h5", skeletonWidth: "50%", children: getLabel("module_leyend") }),
26
- /* @__PURE__ */ jsx(Typography, { variant: "subtitle", skeletonWidth: "80%", children: slogan })
27
- ] })
28
- ] }),
29
- /* @__PURE__ */ jsx(WrapperFormContent, { children: /* @__PURE__ */ jsxs(FormContent, { children: [
30
- /* @__PURE__ */ jsxs(ContainerModuleName, { children: [
31
- /* @__PURE__ */ jsx(Typography, { variant: "h5", skeletonWidth: "20%", children: getLabel("module_name") }),
32
- /* @__PURE__ */ jsx(
33
- Typography,
34
- {
35
- variant: "paragraph",
36
- skeletonWidth: "40%",
37
- children: getLabel("module_description")
38
- }
39
- )
40
- ] }),
41
- /* @__PURE__ */ jsx(Stack, { direction: "column", height: "auto", children: /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsx(Fragment, { children }) }) })
42
- ] }) })
43
- ] });
44
- };
45
- export {
46
- DesktopContent as D
47
- };
@@ -1,9 +0,0 @@
1
- export declare const DesktopContentRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
2
- export declare const DesktopBanner: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
3
- export declare const ContainerLogo: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
4
- export declare const CompanyName: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
5
- export declare const CompanyLeyend: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
6
- export declare const FormContent: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
7
- export declare const WrapperFormContent: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
8
- export declare const ContainerModuleName: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
9
- export declare const ContentForm: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -1,115 +0,0 @@
1
- import { styled, alpha } from "@mui/material/styles";
2
- const DesktopContentRoot = styled("div")(({ theme }) => ({
3
- display: "flex",
4
- borderRadius: "16px",
5
- backgroundColor: theme.vars.palette.background.surface,
6
- boxShadow: theme.vars.customShadows?.z4,
7
- padding: "20px 0 20px 20px",
8
- width: "100%",
9
- height: "100%",
10
- maxWidth: "965px",
11
- maxHeight: "900px",
12
- position: "relative",
13
- overflow: "auto",
14
- "& .M4LanguagePopover-root": {
15
- position: "absolute",
16
- top: "20px",
17
- right: "20px",
18
- zIndex: 1
19
- },
20
- "& .M4LIconButton-root.config-icon": {
21
- position: "absolute",
22
- top: "25px",
23
- right: "56px",
24
- zIndex: 1
25
- }
26
- }));
27
- const DesktopBanner = styled("div")(({ theme }) => ({
28
- display: "flex",
29
- flexDirection: "column",
30
- justifyContent: "center",
31
- alignItems: "center",
32
- borderRadius: "12px",
33
- width: "100%",
34
- maxWidth: "400px",
35
- height: "100%",
36
- backgroundColor: theme.vars.palette.primary.active,
37
- boxShadow: theme.vars.customShadows?.z4,
38
- padding: "0 60px",
39
- gap: "40px",
40
- overflow: "hidden",
41
- "& .MuiTypography-root": {
42
- color: theme.palette.common?.white,
43
- display: "flex",
44
- justifyContent: "center",
45
- textAlign: "center",
46
- textTransform: "uppercase"
47
- },
48
- "& .M4LTypography-root .MuiSkeleton-root": {
49
- backgroundColor: alpha(`${theme.colorSchemes.finalTheme.palette.common.white}`, 0.24),
50
- margin: "auto"
51
- }
52
- }));
53
- const ContainerLogo = styled("div")(({ theme }) => ({
54
- display: "flex",
55
- width: "84px",
56
- height: "84px",
57
- borderRadius: "6px",
58
- backgroundColor: theme.vars.palette.primary?.active,
59
- justifyContent: "center",
60
- alignItems: "center",
61
- boxShadow: `0px 4px 8px ${alpha(theme.colorSchemes.finalTheme.palette.grey["700"] || "", 0.16)}`,
62
- "& .M4LImage-root": {
63
- backgroundColor: theme.vars.palette.common?.white,
64
- borderRadius: "6px"
65
- }
66
- }));
67
- const CompanyName = styled("div")(() => ({
68
- display: "flex",
69
- flexDirection: "column",
70
- gap: "5px",
71
- width: "100%"
72
- }));
73
- const CompanyLeyend = styled("div")(() => ({
74
- display: "flex",
75
- flexDirection: "column",
76
- gap: "5px",
77
- width: "100%"
78
- }));
79
- const FormContent = styled("div")(() => ({
80
- display: "flex",
81
- flexDirection: "column",
82
- padding: "0 60px 0 80px",
83
- margin: "auto 0",
84
- width: "100%",
85
- height: "auto",
86
- gap: "20px"
87
- }));
88
- const WrapperFormContent = styled("div")(() => ({
89
- display: "flex",
90
- width: "100%",
91
- height: "100%"
92
- }));
93
- const ContainerModuleName = styled("div")(() => ({
94
- display: "flex",
95
- flexDirection: "column",
96
- width: "100%",
97
- gap: "4px"
98
- }));
99
- styled("div")(() => ({
100
- display: "flex",
101
- width: "100%",
102
- height: "100%",
103
- justifyContent: "center",
104
- alignItems: "center"
105
- }));
106
- export {
107
- ContainerLogo as C,
108
- DesktopContentRoot as D,
109
- FormContent as F,
110
- WrapperFormContent as W,
111
- DesktopBanner as a,
112
- CompanyName as b,
113
- CompanyLeyend as c,
114
- ContainerModuleName as d
115
- };
@@ -1,8 +0,0 @@
1
- /**
2
- * Contenido de la vista mobile
3
- * @author Juan Escobar - automatic
4
- * @createdAt 2024-10-09 19:56:26 - automatic
5
- * @updatedAt 2024-10-09 20:00:30 - automatic
6
- * @updatedUser Juan Escobar - automatic
7
- */
8
- export declare const MobileContent: () => import("react/jsx-runtime").JSX.Element;
@@ -1,43 +0,0 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
- import { Image, Typography, LanguagePopover, ScrollBar } from "@m4l/components";
3
- import { M as MobileContentRoot, a as MobileBanner, C as ContainerLogo, b as CompanyName, W as WrapperFormContent, F as FormContent, c as ContainerModuleName } from "./styles.js";
4
- import { useBase, useModuleDictionary, useDomain } from "@m4l/core";
5
- const MobileContent = () => {
6
- const { children, companyLogoSmallUrl } = useBase();
7
- const { getLabel } = useModuleDictionary();
8
- const { name } = useDomain();
9
- return /* @__PURE__ */ jsxs(MobileContentRoot, { children: [
10
- /* @__PURE__ */ jsxs(MobileBanner, { children: [
11
- /* @__PURE__ */ jsx(ContainerLogo, { children: /* @__PURE__ */ jsx(Image, { src: companyLogoSmallUrl, width: "44px", height: "44px" }) }),
12
- /* @__PURE__ */ jsxs(CompanyName, { children: [
13
- /* @__PURE__ */ jsx(
14
- Typography,
15
- {
16
- variant: "subtitleDens",
17
- skeletonWidth: "70%",
18
- children: name
19
- }
20
- ),
21
- /* @__PURE__ */ jsx(Typography, { variant: "paragraph", skeletonWidth: "40%", children: getLabel("company_name_subtitle") })
22
- ] }),
23
- /* @__PURE__ */ jsx(LanguagePopover, {})
24
- ] }),
25
- /* @__PURE__ */ jsx(WrapperFormContent, { children: /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsxs(FormContent, { children: [
26
- /* @__PURE__ */ jsxs(ContainerModuleName, { children: [
27
- /* @__PURE__ */ jsx(Typography, { variant: "h5", skeletonWidth: "20%", children: getLabel("module_name") }),
28
- /* @__PURE__ */ jsx(
29
- Typography,
30
- {
31
- variant: "paragraph",
32
- skeletonWidth: "40%",
33
- children: getLabel("module_description")
34
- }
35
- )
36
- ] }),
37
- children
38
- ] }) }) })
39
- ] });
40
- };
41
- export {
42
- MobileContent as M
43
- };
@@ -1,8 +0,0 @@
1
- export declare const MobileContentRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
2
- export declare const MobileBanner: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
3
- export declare const ContainerImageLanguage: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
4
- export declare const ContainerLogo: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
5
- export declare const CompanyName: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
6
- export declare const FormContent: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
7
- export declare const WrapperFormContent: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
8
- export declare const ContainerModuleName: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -1,96 +0,0 @@
1
- import { styled, alpha } from "@mui/material/styles";
2
- const MobileContentRoot = styled("div")(({ theme }) => ({
3
- display: "flex",
4
- flexDirection: "column",
5
- width: "100%",
6
- height: "100%",
7
- backgroundColor: theme.vars.palette.background.surface,
8
- padding: "12px",
9
- gap: "32px"
10
- }));
11
- const MobileBanner = styled("div")(({ theme }) => ({
12
- display: "flex",
13
- flexDirection: "column",
14
- padding: "12px",
15
- gap: "20px",
16
- width: "100%",
17
- backgroundColor: theme.vars.palette.primary.active,
18
- boxShadow: theme.customShadows?.z4,
19
- position: "relative",
20
- borderRadius: "8px",
21
- "& .M4LanguagePopover-root": {
22
- position: "absolute",
23
- top: "12px",
24
- right: "12px",
25
- zIndex: 1
26
- },
27
- "& .M4LIconButton-root.config-icon": {
28
- position: "absolute",
29
- top: "13px",
30
- right: "40px",
31
- zIndex: 1,
32
- "& .M4LIcon-root .M4LIcon-icon": {
33
- backgroundColor: theme.vars.palette.common?.white
34
- }
35
- },
36
- "& .MuiTypography-root": {
37
- color: theme.vars.palette.common?.white,
38
- display: "flex",
39
- textTransform: "uppercase"
40
- },
41
- "& .MuiSkeleton-root": {
42
- backgroundColor: alpha(`${theme.colorSchemes.finalTheme.palette.common.white}`, 0.24),
43
- margin: "auto"
44
- }
45
- }));
46
- styled("div")(() => ({
47
- display: "flex"
48
- }));
49
- const ContainerLogo = styled("div")(({ theme }) => ({
50
- display: "flex",
51
- width: "52px",
52
- height: "52px",
53
- borderRadius: "6px",
54
- backgroundColor: theme.vars.palette.primary?.active,
55
- justifyContent: "center",
56
- alignItems: "center",
57
- boxShadow: `0px 4px 8px ${alpha(theme.colorSchemes.finalTheme.palette.grey["700"] || "", 0.16)}`,
58
- "& .M4LImage-root": {
59
- backgroundColor: theme.vars.palette.common?.white,
60
- borderRadius: "6px"
61
- }
62
- }));
63
- const CompanyName = styled("div")(() => ({
64
- display: "flex",
65
- flexDirection: "column",
66
- width: "100%"
67
- }));
68
- const FormContent = styled("div")(() => ({
69
- display: "flex",
70
- flexDirection: "column",
71
- padding: "12px",
72
- margin: "auto 0",
73
- width: "100%",
74
- gap: "20px"
75
- }));
76
- const WrapperFormContent = styled("div")(() => ({
77
- display: "flex",
78
- width: "100%",
79
- height: "100%",
80
- overflow: "hidden"
81
- }));
82
- const ContainerModuleName = styled("div")(() => ({
83
- display: "flex",
84
- flexDirection: "column",
85
- width: "100%",
86
- gap: "4px"
87
- }));
88
- export {
89
- ContainerLogo as C,
90
- FormContent as F,
91
- MobileContentRoot as M,
92
- WrapperFormContent as W,
93
- MobileBanner as a,
94
- CompanyName as b,
95
- ContainerModuleName as c
96
- };