@m4l/layouts 7.0.0 → 7.0.1

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 (84) hide show
  1. package/@types/index.d.ts +7 -0
  2. package/components/MFHostApp/index.d.ts +9 -3
  3. package/components/MFHostApp/index.js +60 -0
  4. package/components/MFHostApp/types.d.ts +3 -4
  5. package/components/MFNoAuthApp/index.d.ts +8 -2
  6. package/components/MFNoAuthApp/index.js +39 -0
  7. package/components/MFWindowsTitle/MFWindowsTitle.d.ts +9 -3
  8. package/components/MFWindowsTitle/MFWindowsTitle.js +10 -0
  9. package/contexts/AuthContext/index.d.ts +10 -4
  10. package/contexts/AuthContext/{index-DARkRRM4.js → index.js} +26 -45
  11. package/contexts/AuthContext/types.d.ts +6 -6
  12. package/contexts/AuthContext/types.js +9 -0
  13. package/{m4l_layouts/types.d.ts → hooks/index.js} +1 -1
  14. package/hooks/useAuth/index.d.ts +8 -1
  15. package/hooks/useAuth/{index-8hAi3guc.js → index.js} +4 -2
  16. package/hooks/useMasterDetail/index.d.ts +1 -1
  17. package/hooks/useMasterDetail/{index-D4QUQYYc.js → index.js} +1 -1
  18. package/hooks/useModule/index.d.ts +8 -1
  19. package/hooks/useModule/index.js +12 -0
  20. package/index.js +17 -14
  21. package/layouts/MasterDetailLayout/MasterDetailLayout.d.ts +9 -3
  22. package/layouts/MasterDetailLayout/MasterDetailLayout.js +110 -0
  23. package/layouts/MasterDetailLayout/classes/constants.js +4 -0
  24. package/layouts/MasterDetailLayout/classes/index.d.ts +8 -1
  25. package/layouts/MasterDetailLayout/classes/index.js +23 -0
  26. package/layouts/MasterDetailLayout/classes/types.d.ts +3 -3
  27. package/layouts/MasterDetailLayout/components/ButtonDetail/index.d.ts +9 -0
  28. package/layouts/MasterDetailLayout/contexts/MasterDetailContext/index.d.ts +9 -3
  29. package/layouts/MasterDetailLayout/contexts/MasterDetailContext/index.js +28 -0
  30. package/layouts/MasterDetailLayout/contexts/MasterDetailContext/types.d.ts +1 -1
  31. package/layouts/MasterDetailLayout/dicctionary.d.ts +1 -1
  32. package/layouts/MasterDetailLayout/dicctionary.js +17 -0
  33. package/layouts/MasterDetailLayout/index.d.ts +2 -0
  34. package/layouts/MasterDetailLayout/styles.d.ts +1 -2
  35. package/layouts/MasterDetailLayout/styles.js +7 -0
  36. package/layouts/ModuleLayout/ModuleLayout.d.ts +2 -3
  37. package/layouts/ModuleLayout/ModuleLayout.js +21 -0
  38. package/layouts/ModuleLayout/classes/constants.js +4 -0
  39. package/layouts/ModuleLayout/classes/index.d.ts +7 -0
  40. package/layouts/ModuleLayout/classes/index.js +25 -0
  41. package/layouts/ModuleLayout/classes/types.d.ts +3 -3
  42. package/layouts/ModuleLayout/contexts/ModuleContext/index.d.ts +9 -3
  43. package/layouts/ModuleLayout/contexts/ModuleContext/index.js +38 -0
  44. package/layouts/ModuleLayout/contexts/ModuleContext/types.d.ts +1 -1
  45. package/layouts/ModuleLayout/dicctionary.d.ts +1 -1
  46. package/layouts/ModuleLayout/dicctionary.js +11 -0
  47. package/layouts/ModuleLayout/index.d.ts +2 -0
  48. package/layouts/ModuleLayout/subcomponents/InnerModule/index.d.ts +1 -2
  49. package/layouts/ModuleLayout/subcomponents/InnerModule/index.js +20 -0
  50. package/layouts/ModuleLayout/subcomponents/InnerModule/styles.d.ts +1 -2
  51. package/layouts/ModuleLayout/subcomponents/InnerModule/styles.js +7 -0
  52. package/layouts/ModuleLayout/subcomponents/InnerModule/types.d.ts +1 -1
  53. package/layouts/ModuleLayout/types.d.ts +4 -4
  54. package/layouts/NoAuthModuleLayout/dicctionary.d.ts +1 -1
  55. package/layouts/NoAuthModuleLayout/dicctionary.js +10 -0
  56. package/layouts/NoAuthModuleLayout/index.d.ts +8 -2
  57. package/layouts/NoAuthModuleLayout/index.js +55 -0
  58. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/index.d.ts +8 -2
  59. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/index.js +16 -0
  60. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/styles.d.ts +1 -2
  61. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/styles.js +15 -0
  62. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/DesktopContent/index.d.ts +8 -2
  63. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/DesktopContent/index.js +49 -0
  64. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/DesktopContent/styles.d.ts +9 -10
  65. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/DesktopContent/styles.js +115 -0
  66. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/MobileContent/index.d.ts +8 -2
  67. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/MobileContent/index.js +45 -0
  68. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/MobileContent/styles.d.ts +8 -9
  69. package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/MobileContent/styles.js +96 -0
  70. package/layouts/NoAuthModuleLayout/types.d.ts +1 -1
  71. package/layouts/index.js +1 -0
  72. package/package.json +33 -14
  73. package/test/setup.d.ts +0 -0
  74. package/test/utils.d.ts +12 -0
  75. package/vite-env.d.ts +3 -3
  76. package/components/MFHostApp/index-Bz3RUvvY.js +0 -90
  77. package/components/index-uQ5qk7MJ.js +0 -60
  78. package/hooks/useModule/index-FY5nsBmE.js +0 -10
  79. package/layouts/MasterDetailLayout/index-DeC4RoBs.js +0 -160
  80. package/layouts/ModuleLayout/index-DAtDuh6s.js +0 -129
  81. package/layouts/NoAuthModuleLayout/index-txgn4T5B.js +0 -419
  82. /package/{contexts/index-l0sNRNKZ.js → components/MFWindowsTitle/index.js} +0 -0
  83. /package/{hooks/index-l0sNRNKZ.js → components/index.js} +0 -0
  84. /package/{layouts/index-l0sNRNKZ.js → contexts/index.js} +0 -0
@@ -1,160 +0,0 @@
1
- import { createContext, useState, useRef, useMemo, useCallback } from "react";
2
- import { voidFunction, useEnvironment, useModuleDictionary } from "@m4l/core";
3
- import { WindowBase, SplitLayout } from "@m4l/components";
4
- import { a as ModuleLayout, g as getModuleLayoutComponentsDictionary } from "../ModuleLayout/index-DAtDuh6s.js";
5
- import { jsx } from "react/jsx-runtime";
6
- import { useResponsiveDesktop } from "@m4l/graphics";
7
- import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
8
- import { unstable_composeClasses } from "@mui/base";
9
- const initialState = {
10
- masterSelection: void 0,
11
- onChangeMasterSelection: voidFunction,
12
- onClickViewDetail: voidFunction
13
- };
14
- const MasterDetailContext = createContext(initialState);
15
- function MasterDetailProvider(props) {
16
- const {
17
- children,
18
- onClickViewDetail
19
- } = props;
20
- const [masterSelection, setMasterSelection] = useState(void 0);
21
- return /* @__PURE__ */ jsx(MasterDetailContext.Provider, {
22
- value: {
23
- masterSelection,
24
- onChangeMasterSelection: setMasterSelection,
25
- onClickViewDetail
26
- },
27
- children
28
- });
29
- }
30
- const componentName = "M4LMasterDetailLayout";
31
- generateUtilityClasses(componentName, [
32
- /* elements */
33
- "root"
34
- /* states or variants of elements */
35
- ]);
36
- function getMasterDetailLayoutUtilityClass(slot) {
37
- return generateUtilityClass(componentName, slot);
38
- }
39
- const useMasterDetailLayoutUtilityClasses = () => {
40
- const slots = {
41
- root: ["root"]
42
- };
43
- const composedClasses = unstable_composeClasses(slots, getMasterDetailLayoutUtilityClass, {});
44
- return {
45
- ...composedClasses
46
- };
47
- };
48
- const MasterDetailLayoutRoot = styled("div")(({ theme }) => ({
49
- ...theme.components?.M4LMasterDetailLayout?.styleOverrides
50
- }));
51
- function getTotalModuleActions(splitActions, moduleActions = []) {
52
- let totalActions = [...splitActions];
53
- totalActions = moduleActions.concat(totalActions);
54
- return totalActions;
55
- }
56
- function MasterDetailLayout(props) {
57
- const {
58
- moduleId,
59
- masterComponent,
60
- detailComponent,
61
- moduleActions,
62
- version
63
- // defaultDictionary,
64
- } = props;
65
- const {
66
- host_static_assets,
67
- environment_assets
68
- } = useEnvironment();
69
- const [splitPosition, setSplitPosition] = useState("vertical");
70
- const isDesktop = useResponsiveDesktop();
71
- const moduleLayoutRef = useRef(null);
72
- const {
73
- getLabel
74
- } = useModuleDictionary();
75
- const splitActions = useMemo(() => [{
76
- urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_vertical.svg`,
77
- onClick: () => onChangePostionInternal("vertical"),
78
- visibility: "main",
79
- label: getLabel("master_detail_layout.split_vertical"),
80
- tag: "vertical",
81
- className: "splitactions",
82
- disabled: splitPosition === "vertical",
83
- key: "vertical"
84
- }, {
85
- urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_horizontal.svg`,
86
- onClick: () => onChangePostionInternal("horizontal"),
87
- visibility: "main",
88
- label: getLabel("master_detail_layout.split_horizontal"),
89
- tag: "horizontal",
90
- className: "splitactions",
91
- disabled: splitPosition === "horizontal",
92
- key: "horizontal"
93
- }, {
94
- urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/no_split.svg`,
95
- onClick: () => onChangePostionInternal("none"),
96
- visibility: "main",
97
- label: getLabel("master_detail_layout.no_split"),
98
- tag: "none",
99
- className: "splitactions",
100
- disabled: splitPosition === "none",
101
- key: "none"
102
- }], [getLabel, splitPosition]);
103
- const onChangePostionInternal = useCallback((newPostion) => {
104
- setSplitPosition(newPostion);
105
- }, []);
106
- const onClickViewDetail = useCallback(() => {
107
- moduleLayoutRef.current?.openModal({
108
- initialWidth: 500,
109
- initialHeigth: 680,
110
- window: /* @__PURE__ */ jsx(
111
- WindowBase,
112
- {
113
- title: getLabel("master_detail_layout.view_detail"),
114
- children: typeof detailComponent === "function" ? detailComponent({}) : detailComponent
115
- }
116
- )
117
- // actions: undefined,
118
- });
119
- }, [detailComponent, getLabel]);
120
- const finalModuleActions = useMemo(() => {
121
- const actions = getTotalModuleActions(splitActions, moduleActions);
122
- return actions;
123
- }, [splitActions, moduleActions]);
124
- const classes = useMasterDetailLayoutUtilityClasses();
125
- return /* @__PURE__ */ jsx(MasterDetailProvider, {
126
- onClickViewDetail,
127
- children: /* @__PURE__ */ jsx(MasterDetailLayoutRoot, {
128
- className: classes.root,
129
- children: /* @__PURE__ */ jsx(ModuleLayout, {
130
- ref: moduleLayoutRef,
131
- moduleId,
132
- moduleActions: finalModuleActions,
133
- version,
134
- children: /* @__PURE__ */ jsx(SplitLayout, {
135
- splitPosition: isDesktop ? splitPosition : "none",
136
- firstPart: masterComponent,
137
- secondPart: detailComponent
138
- })
139
- })
140
- })
141
- });
142
- }
143
- function getMasterDetailLayoutComponentsDictionary() {
144
- return ["master_detail_layout"].concat(getModuleLayoutComponentsDictionary());
145
- }
146
- const defaultMasterDetailDictionary = {
147
- master_detail_layout: {
148
- split_vertical: "Split vertically",
149
- split_horizontal: "Split horizontally",
150
- no_split: "No split",
151
- view_detail: "View detail"
152
- }
153
- //...defaultModuleLayoutDictionary,
154
- };
155
- export {
156
- MasterDetailContext as M,
157
- MasterDetailLayout as a,
158
- defaultMasterDetailDictionary as d,
159
- getMasterDetailLayoutComponentsDictionary as g
160
- };
@@ -1,129 +0,0 @@
1
- import { useModal, useWindowToolsMF, ModalProvider, getModalDialogComponentsDictionary } from "@m4l/components";
2
- import { forwardRef, useRef, useImperativeHandle, createContext, useState, useMemo, useEffect } from "react";
3
- import { styled } from "@mui/material/styles";
4
- import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
5
- import { unstable_composeClasses } from "@mui/base";
6
- import { jsx } from "react/jsx-runtime";
7
- const InnerModuleRoot = styled("div")(({
8
- theme
9
- }) => ({
10
- ...theme.components?.M4LModuleLayout?.styleOverrides
11
- }));
12
- const componentName = "M4LModuleLayout";
13
- generateUtilityClasses(componentName, [
14
- /* elements */
15
- "root",
16
- "moduleContent"
17
- /* states or variants of elements */
18
- ]);
19
- function getModuleLayoutUtilityClass(slot) {
20
- return generateUtilityClass(componentName, slot);
21
- }
22
- const useModuleLayoutUtilityClasses = () => {
23
- const slots = {
24
- root: ["root"],
25
- moduleContent: ["moduleContent"]
26
- };
27
- const composedClasses = unstable_composeClasses(slots, getModuleLayoutUtilityClass, {});
28
- return {
29
- ...composedClasses
30
- };
31
- };
32
- const InnerModule = forwardRef((props, ref) => {
33
- const {
34
- children
35
- } = props;
36
- const {
37
- openModal
38
- } = useModal();
39
- const divRef = useRef(null);
40
- useImperativeHandle(ref, () => ({
41
- openModal,
42
- current: divRef.current
43
- }));
44
- const classes = useModuleLayoutUtilityClasses();
45
- return /* @__PURE__ */ jsx(InnerModuleRoot, {
46
- className: classes.root,
47
- ref: divRef,
48
- children: /* @__PURE__ */ jsx("div", {
49
- className: classes.moduleContent,
50
- children
51
- })
52
- });
53
- });
54
- InnerModule.displayName = "InnerModule";
55
- const ModuleContext = createContext(null);
56
- function ModuleProvider(props) {
57
- const {
58
- children,
59
- moduleActions,
60
- moduleId,
61
- version
62
- } = props;
63
- const [configOptions] = useState(() => ({
64
- moduleId,
65
- dictionary: void 0
66
- }));
67
- const {
68
- setActions
69
- } = useWindowToolsMF();
70
- const [dynamicActions, setDynamicActions] = useState([]);
71
- const finalModuleActions = useMemo(() => {
72
- return (moduleActions || []).concat(dynamicActions);
73
- }, [moduleActions, dynamicActions]);
74
- useEffect(() => {
75
- setActions(finalModuleActions, version);
76
- }, [finalModuleActions]);
77
- return /* @__PURE__ */ jsx(ModuleContext.Provider, {
78
- value: {
79
- // moduleActions: finalModuleActions,
80
- // dynamicActions,
81
- setDynamicActions,
82
- moduleId: configOptions.moduleId
83
- // moduleNameField: configOptions.moduleNameField,
84
- // urlIcon: configOptions.urlIcon,
85
- // breadcrumbLinks: configOptions.breadcrumbLinks,
86
- },
87
- children
88
- });
89
- }
90
- const ModuleLayout = forwardRef((props, ref) => {
91
- const {
92
- moduleId,
93
- moduleActions,
94
- version,
95
- children
96
- } = props;
97
- const moduleRef = useRef(null);
98
- const openModal = (modalOpenProps) => {
99
- moduleRef.current?.openModal(modalOpenProps);
100
- };
101
- useImperativeHandle(ref, () => ({
102
- openModal,
103
- current: moduleRef.current
104
- }));
105
- return /* @__PURE__ */ jsx(ModuleProvider, {
106
- moduleId,
107
- moduleActions,
108
- version,
109
- children: /* @__PURE__ */ jsx(ModalProvider, {
110
- children: /* @__PURE__ */ jsx(InnerModule, {
111
- ref: moduleRef,
112
- children
113
- })
114
- })
115
- });
116
- });
117
- ModuleLayout.displayName = "ModuleLayout";
118
- function getModuleLayoutComponentsDictionary() {
119
- return ["module_layout"].concat(getModalDialogComponentsDictionary());
120
- }
121
- const defaultModuleLayoutDictionary = {
122
- module_layout: {}
123
- };
124
- export {
125
- ModuleContext as M,
126
- ModuleLayout as a,
127
- defaultModuleLayoutDictionary as d,
128
- getModuleLayoutComponentsDictionary as g
129
- };
@@ -1,419 +0,0 @@
1
- import { useResponsiveDesktop, useLocales, ResponsiveContainerProvider } from "@m4l/graphics";
2
- import { LanguagePopover, Image, Typography, Stack, ScrollBar, HelmetPage } from "@m4l/components";
3
- import { styled } from "@mui/material";
4
- import { useBase, useModuleDictionary, useDomain, useEnvironment, BaseProvider, FlagsProvider, ModuleDictionaryProvider, ModuleSkeletonProvider } from "@m4l/core";
5
- import { styled as styled$1, alpha } from "@mui/material/styles";
6
- import { jsxs, jsx, Fragment } from "react/jsx-runtime";
7
- const InnerModuleRoot = styled("div")(({
8
- theme
9
- }) => ({
10
- display: "flex",
11
- justifyContent: "center",
12
- alignItems: "center",
13
- height: "100vh",
14
- padding: "20px",
15
- backgroundColor: theme.vars.palette.background.neutral,
16
- [theme.breakpoints.down("md")]: {
17
- padding: "0px"
18
- }
19
- }));
20
- const DesktopContentRoot = styled$1("div")(({ theme }) => ({
21
- display: "flex",
22
- borderRadius: "16px",
23
- backgroundColor: theme.vars.palette.background.surface,
24
- boxShadow: theme.vars.customShadows?.z4,
25
- padding: "20px 0 20px 20px",
26
- width: "100%",
27
- height: "100%",
28
- maxWidth: "965px",
29
- maxHeight: "900px",
30
- position: "relative",
31
- overflow: "auto",
32
- "& .M4LanguagePopover-root": {
33
- position: "absolute",
34
- top: "20px",
35
- right: "20px",
36
- zIndex: 1
37
- },
38
- "& .M4LIconButton-root.config-icon": {
39
- position: "absolute",
40
- top: "25px",
41
- right: "56px",
42
- zIndex: 1
43
- }
44
- }));
45
- const DesktopBanner = styled$1("div")(({ theme }) => ({
46
- display: "flex",
47
- flexDirection: "column",
48
- justifyContent: "center",
49
- alignItems: "center",
50
- borderRadius: "12px",
51
- width: "100%",
52
- maxWidth: "400px",
53
- height: "100%",
54
- backgroundColor: theme.vars.palette.primary.focusActive,
55
- boxShadow: theme.vars.customShadows?.z4,
56
- padding: "0 60px",
57
- gap: "40px",
58
- overflow: "hidden",
59
- "& .MuiTypography-root": {
60
- color: theme.palette.common?.white,
61
- display: "flex",
62
- justifyContent: "center",
63
- textAlign: "center",
64
- textTransform: "uppercase"
65
- },
66
- "& .M4LTypography-root .MuiSkeleton-root": {
67
- backgroundColor: alpha(`${theme.colorSchemes.finalTheme.palette.common.white}`, 0.24),
68
- margin: "auto"
69
- }
70
- }));
71
- const ContainerLogo$1 = styled$1("div")(({ theme }) => ({
72
- display: "flex",
73
- width: "84px",
74
- height: "84px",
75
- borderRadius: "6px",
76
- backgroundColor: theme.vars.palette.primary?.focusActive,
77
- justifyContent: "center",
78
- alignItems: "center",
79
- boxShadow: `0px 4px 8px ${alpha(theme.colorSchemes.finalTheme.palette.grey["700"] || "", 0.16)}`,
80
- "& .M4LImage-root": {
81
- backgroundColor: theme.vars.palette.common?.white,
82
- borderRadius: "6px"
83
- }
84
- }));
85
- const CompanyName$1 = styled$1("div")(() => ({
86
- display: "flex",
87
- flexDirection: "column",
88
- gap: "5px",
89
- width: "100%"
90
- }));
91
- const CompanyLeyend = styled$1("div")(() => ({
92
- display: "flex",
93
- flexDirection: "column",
94
- gap: "5px",
95
- width: "100%"
96
- }));
97
- const FormContent$1 = styled$1("div")(() => ({
98
- display: "flex",
99
- flexDirection: "column",
100
- padding: "0 60px 0 80px",
101
- margin: "auto 0",
102
- width: "100%",
103
- height: "auto",
104
- gap: "20px"
105
- }));
106
- const WrapperFormContent$1 = styled$1("div")(() => ({
107
- display: "flex",
108
- width: "100%",
109
- height: "100%"
110
- }));
111
- const ContainerModuleName$1 = styled$1("div")(() => ({
112
- display: "flex",
113
- flexDirection: "column",
114
- width: "100%",
115
- gap: "4px"
116
- }));
117
- styled$1("div")(() => ({
118
- display: "flex",
119
- width: "100%",
120
- height: "100%",
121
- justifyContent: "center",
122
- alignItems: "center"
123
- }));
124
- const DesktopContent = () => {
125
- const {
126
- children,
127
- companyLogoSmallUrl
128
- } = useBase();
129
- const {
130
- getLabel
131
- } = useModuleDictionary();
132
- const {
133
- name,
134
- slogan
135
- } = useDomain();
136
- return /* @__PURE__ */ jsxs(DesktopContentRoot, {
137
- children: [/* @__PURE__ */ jsx(LanguagePopover, {}), /* @__PURE__ */ jsxs(DesktopBanner, {
138
- children: [/* @__PURE__ */ jsx(ContainerLogo$1, {
139
- children: /* @__PURE__ */ jsx(Image, {
140
- src: companyLogoSmallUrl,
141
- ratio: "1:1",
142
- width: "64px",
143
- height: "64px"
144
- })
145
- }), /* @__PURE__ */ jsxs(CompanyName$1, {
146
- children: [/* @__PURE__ */ jsx(Typography, {
147
- variant: "subtitleDens",
148
- skeletonWidth: "70%",
149
- skeletonHeight: "24px",
150
- children: name
151
- }), /* @__PURE__ */ jsx(Typography, {
152
- variant: "paragraph",
153
- skeletonWidth: "40%",
154
- skeletonHeight: "20px",
155
- children: getLabel("company_name_subtitle")
156
- })]
157
- }), /* @__PURE__ */ jsxs(CompanyLeyend, {
158
- children: [/* @__PURE__ */ jsx(Typography, {
159
- variant: "h5",
160
- skeletonWidth: "50%",
161
- skeletonHeight: "36px",
162
- children: getLabel("module_leyend")
163
- }), /* @__PURE__ */ jsx(Typography, {
164
- variant: "subtitle",
165
- skeletonWidth: "80%",
166
- skeletonHeight: "24px",
167
- children: slogan
168
- })]
169
- })]
170
- }), /* @__PURE__ */ jsx(WrapperFormContent$1, {
171
- children: /* @__PURE__ */ jsxs(FormContent$1, {
172
- children: [/* @__PURE__ */ jsxs(ContainerModuleName$1, {
173
- children: [/* @__PURE__ */ jsx(Typography, {
174
- variant: "h5",
175
- skeletonWidth: "20%",
176
- skeletonHeight: "36px",
177
- children: getLabel("module_name")
178
- }), /* @__PURE__ */ jsx(Typography, {
179
- variant: "paragraph",
180
- skeletonWidth: "40%",
181
- skeletonHeight: "20px",
182
- children: getLabel("module_description")
183
- })]
184
- }), /* @__PURE__ */ jsx(Stack, {
185
- direction: "column",
186
- height: "auto",
187
- children: /* @__PURE__ */ jsx(ScrollBar, {
188
- children: /* @__PURE__ */ jsx(Fragment, {
189
- children
190
- })
191
- })
192
- })]
193
- })
194
- })]
195
- });
196
- };
197
- const MobileContentRoot = styled$1("div")(({ theme }) => ({
198
- display: "flex",
199
- flexDirection: "column",
200
- width: "100%",
201
- height: "100%",
202
- backgroundColor: theme.vars.palette.background.surface,
203
- padding: "12px",
204
- gap: "32px"
205
- }));
206
- const MobileBanner = styled$1("div")(({ theme }) => ({
207
- display: "flex",
208
- flexDirection: "column",
209
- padding: "12px",
210
- gap: "20px",
211
- width: "100%",
212
- backgroundColor: theme.vars.palette.primary.focusActive,
213
- boxShadow: theme.customShadows?.z4,
214
- position: "relative",
215
- borderRadius: "8px",
216
- "& .M4LanguagePopover-root": {
217
- position: "absolute",
218
- top: "12px",
219
- right: "12px",
220
- zIndex: 1
221
- },
222
- "& .M4LIconButton-root.config-icon": {
223
- position: "absolute",
224
- top: "13px",
225
- right: "40px",
226
- zIndex: 1,
227
- "& .M4LIcon-root .M4LIcon-icon": {
228
- backgroundColor: theme.vars.palette.common?.white
229
- }
230
- },
231
- "& .MuiTypography-root": {
232
- color: theme.vars.palette.common?.white,
233
- display: "flex",
234
- textTransform: "uppercase"
235
- },
236
- "& .MuiSkeleton-root": {
237
- backgroundColor: alpha(`${theme.colorSchemes.finalTheme.palette.common.white}`, 0.24),
238
- margin: "auto"
239
- }
240
- }));
241
- styled$1("div")(() => ({
242
- display: "flex"
243
- }));
244
- const ContainerLogo = styled$1("div")(({ theme }) => ({
245
- display: "flex",
246
- width: "52px",
247
- height: "52px",
248
- borderRadius: "6px",
249
- backgroundColor: theme.vars.palette.primary?.focusActive,
250
- justifyContent: "center",
251
- alignItems: "center",
252
- boxShadow: `0px 4px 8px ${alpha(theme.colorSchemes.finalTheme.palette.grey["700"] || "", 0.16)}`,
253
- "& .M4LImage-root": {
254
- backgroundColor: theme.vars.palette.common?.white,
255
- borderRadius: "6px"
256
- }
257
- }));
258
- const CompanyName = styled$1("div")(() => ({
259
- display: "flex",
260
- flexDirection: "column",
261
- width: "100%"
262
- }));
263
- const FormContent = styled$1("div")(() => ({
264
- display: "flex",
265
- flexDirection: "column",
266
- padding: "12px",
267
- margin: "auto 0",
268
- width: "100%",
269
- gap: "20px"
270
- }));
271
- const WrapperFormContent = styled$1("div")(() => ({
272
- display: "flex",
273
- width: "100%",
274
- height: "100%",
275
- overflow: "hidden"
276
- }));
277
- const ContainerModuleName = styled$1("div")(() => ({
278
- display: "flex",
279
- flexDirection: "column",
280
- width: "100%",
281
- gap: "4px"
282
- }));
283
- const MobileContent = () => {
284
- const {
285
- children,
286
- companyLogoSmallUrl
287
- } = useBase();
288
- const {
289
- getLabel
290
- } = useModuleDictionary();
291
- const {
292
- name
293
- } = useDomain();
294
- return /* @__PURE__ */ jsxs(MobileContentRoot, {
295
- children: [/* @__PURE__ */ jsxs(MobileBanner, {
296
- children: [/* @__PURE__ */ jsx(ContainerLogo, {
297
- children: /* @__PURE__ */ jsx(Image, {
298
- src: companyLogoSmallUrl,
299
- ratio: "1:1",
300
- width: "44px",
301
- height: "44px"
302
- })
303
- }), /* @__PURE__ */ jsxs(CompanyName, {
304
- children: [/* @__PURE__ */ jsx(Typography, {
305
- variant: "subtitleDens",
306
- skeletonWidth: "70%",
307
- skeletonHeight: "24px",
308
- children: name
309
- }), /* @__PURE__ */ jsx(Typography, {
310
- variant: "paragraph",
311
- skeletonWidth: "40%",
312
- skeletonHeight: "20px",
313
- children: getLabel("company_name_subtitle")
314
- })]
315
- }), /* @__PURE__ */ jsx(LanguagePopover, {})]
316
- }), /* @__PURE__ */ jsx(WrapperFormContent, {
317
- children: /* @__PURE__ */ jsx(ScrollBar, {
318
- children: /* @__PURE__ */ jsxs(FormContent, {
319
- children: [/* @__PURE__ */ jsxs(ContainerModuleName, {
320
- children: [/* @__PURE__ */ jsx(Typography, {
321
- variant: "h5",
322
- skeletonWidth: "20%",
323
- skeletonHeight: "36px",
324
- children: getLabel("module_name")
325
- }), /* @__PURE__ */ jsx(Typography, {
326
- variant: "paragraph",
327
- skeletonWidth: "40%",
328
- skeletonHeight: "20px",
329
- children: getLabel("module_description")
330
- })]
331
- }), children]
332
- })
333
- })
334
- })]
335
- });
336
- };
337
- const InnerModule = () => {
338
- const {
339
- getModuleLabel
340
- } = useModuleDictionary();
341
- const isDesktop = useResponsiveDesktop();
342
- const {
343
- subtitle
344
- } = useBase();
345
- return /* @__PURE__ */ jsx(HelmetPage, {
346
- title: getModuleLabel(),
347
- subtitle,
348
- children: /* @__PURE__ */ jsx(Fragment, {
349
- children: /* @__PURE__ */ jsx(InnerModuleRoot, {
350
- id: "modulerootnouth",
351
- children: isDesktop ? /* @__PURE__ */ jsx(DesktopContent, {}) : /* @__PURE__ */ jsx(MobileContent, {})
352
- })
353
- })
354
- });
355
- };
356
- const NoAuthModuleLayout = (props) => {
357
- const {
358
- moduleId,
359
- moduleNameField,
360
- children,
361
- componentsDictionary,
362
- skeletonFlags,
363
- subtitle,
364
- companyLogoSmallUrl,
365
- companyLogoNormalUrl,
366
- moduleIlustrationUrl,
367
- handleSetting,
368
- observedDivRef
369
- } = props;
370
- const {
371
- host_static_assets,
372
- environment_assets
373
- } = useEnvironment();
374
- const localeString = useLocales().currentLocale?.localeString;
375
- const finalCompanyLogoNormalUrl = companyLogoNormalUrl || `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/logotipo_m4l.svg`;
376
- const finalCompanyLogoSmallUrl = companyLogoSmallUrl || `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/isotipo_m4l.svg`;
377
- const finalIllustrationUrl = moduleIlustrationUrl || `${host_static_assets}/${environment_assets}/frontend/domain/host/commons/assets/img/illustration_noauth.png`;
378
- const finalSkeletonFlags = skeletonFlags;
379
- if (finalSkeletonFlags.findIndex((f) => f === "dictionary_loaded") < 0) {
380
- finalSkeletonFlags.push("dictionary_loaded");
381
- }
382
- return /* @__PURE__ */ jsx(BaseProvider, {
383
- value: {
384
- subtitle,
385
- companyLogoSmallUrl: finalCompanyLogoSmallUrl,
386
- companyLogoNormalUrl: finalCompanyLogoNormalUrl,
387
- moduleIlustrationUrl: finalIllustrationUrl,
388
- children,
389
- handleSetting
390
- },
391
- children: /* @__PURE__ */ jsx(FlagsProvider, {
392
- children: /* @__PURE__ */ jsx(ModuleDictionaryProvider, {
393
- isAuth: false,
394
- moduleId,
395
- moduleNameField,
396
- componentsDictionary,
397
- currentLang: localeString,
398
- children: /* @__PURE__ */ jsx(ModuleSkeletonProvider, {
399
- flags: finalSkeletonFlags,
400
- children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, {
401
- observedDivRef,
402
- children: /* @__PURE__ */ jsx(InnerModule, {})
403
- })
404
- })
405
- })
406
- })
407
- });
408
- };
409
- function getNoAuthModuleLayoutComponentsDictionary() {
410
- return ["no_auth_module_layout"];
411
- }
412
- const defaultNoAuthModuleLayoutDictionary = {
413
- no_auth_module_layout: {}
414
- };
415
- export {
416
- NoAuthModuleLayout as N,
417
- defaultNoAuthModuleLayoutDictionary as d,
418
- getNoAuthModuleLayoutComponentsDictionary as g
419
- };