@m4l/layouts 0.1.40 → 0.1.41

package/hooks/index.33191825.js

@@ -0,0 +1,4 @@
+import "react";
+import "../layouts/MasterDetailLayout/index.fe6ac47b.js";
+import "../contexts/AuthContext/index.6f966215.js";
+import "../layouts/ModuleLayout/index.e7218171.js";

package/hooks/useMasterDetail/{index.927c0c26.js → index.be4908d9.js}

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { M as MasterDetailContext } from "../../layouts/MasterDetailLayout/index.bca0fce5.js";
+import { M as MasterDetailContext } from "../../layouts/MasterDetailLayout/index.fe6ac47b.js";
 const useMasterDetail = () => useContext(MasterDetailContext);
 export {
   useMasterDetail as u

package/hooks/useModule/{index.edcd7b28.js → index.b5f598b1.js}

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { M as ModuleContext } from "../../layouts/ModuleLayout/index.850f7dcf.js";
+import { M as ModuleContext } from "../../layouts/ModuleLayout/index.e7218171.js";
 const useModule = () => {
   const context = useContext(ModuleContext);
   if (!context)

package/index.js

@@ -2,12 +2,12 @@ import { M } from "./components/MFIsolationApp/index.e36cf308.js";
 import { M as M2 } from "./components/MFHostApp/index.420c2626.js";
 import { B } from "./components/BaseModule/index.6309486a.js";
 import { a, A } from "./contexts/AuthContext/index.6f966215.js";
-import { a as a2, d, g } from "./layouts/ModuleLayout/index.850f7dcf.js";
-import { a as a3, d as d2, g as g2 } from "./layouts/MasterDetailLayout/index.bca0fce5.js";
-import { N, d as d3, g as g3 } from "./layouts/NoAuthModuleLayout/index.eabf38c1.js";
-import { u } from "./hooks/useMasterDetail/index.927c0c26.js";
+import { a as a2, d, g } from "./layouts/ModuleLayout/index.e7218171.js";
+import { a as a3, d as d2, g as g2 } from "./layouts/MasterDetailLayout/index.fe6ac47b.js";
+import { N, d as d3, g as g3 } from "./layouts/NoAuthModuleLayout/index.2808fa44.js";
+import { u } from "./hooks/useMasterDetail/index.be4908d9.js";
 import { u as u2 } from "./hooks/useAuth/index.cb6a3420.js";
-import { u as u3 } from "./hooks/useModule/index.edcd7b28.js";
+import { u as u3 } from "./hooks/useModule/index.b5f598b1.js";
 import "react";
 import "react-router-dom";
 import "react-toastify";
@@ -21,6 +21,8 @@ import "react/jsx-runtime";
 import "nprogress";
 import "@m4l/components";
 import "@mui/material/styles";
+import "@mui/material";
+import "@mui/base";
 export {
   a as AuthContext,
   A as AuthProvider,

package/layouts/MasterDetailLayout/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LMasterDetailLayout";

package/layouts/MasterDetailLayout/classes/index.d.ts

@@ -0,0 +1,6 @@
+import { MasterDetailLayoutClassesType } from './types';
+export declare const masterDetailLayoutClasses: MasterDetailLayoutClassesType;
+export declare function getMasterDetailLayoutUtilityClass(slot: string): string;
+export declare const useMasterDetailLayoutUtilityClasses: () => {
+    root: string;
+};

package/layouts/MasterDetailLayout/classes/types.d.ts

@@ -0,0 +1,6 @@
+import { useMasterDetailLayoutUtilityClasses } from ".";
+export interface MasterDetailLayoutClassesType {
+    root: string;
+}
+export declare type MasterDetailLayoutClassesKey = keyof MasterDetailLayoutClassesType;
+export declare type Classes = ReturnType<typeof useMasterDetailLayoutUtilityClasses>;

package/layouts/MasterDetailLayout/{index.bca0fce5.js → index.fe6ac47b.js}

@@ -1,9 +1,11 @@
 import { createContext, useState, useRef, useMemo, useCallback } from "react";
 import { voidFunction, useEnvironment, useModuleDictionary } from "@m4l/core";
 import { WindowBase, SplitLayout } from "@m4l/components";
-import { a as ModuleLayout, g as getModuleLayoutComponentsDictionary } from "../ModuleLayout/index.850f7dcf.js";
+import { a as ModuleLayout, g as getModuleLayoutComponentsDictionary } from "../ModuleLayout/index.e7218171.js";
 import { jsx } from "react/jsx-runtime";
 import { useResponsiveDesktop } from "@m4l/graphics";
+import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
 const initialState = {
   masterSelection: void 0,
   onChangeMasterSelection: voidFunction
@@ -22,6 +24,25 @@ function MasterDetailProvider(props) {
     children
   });
 }
+const componentName = "M4LMasterDetailLayout";
+generateUtilityClasses(componentName, [
+  "root"
+]);
+function getMasterDetailLayoutUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useMasterDetailLayoutUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getMasterDetailLayoutUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const MasterDetailLayoutRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LMasterDetailLayout?.styleOverrides
+}));
 function getTotalModuleActions(splitActions, moduleActions = [], viewDetailAction, isDesktop) {
   let totalActions = isDesktop !== void 0 && isDesktop ? [...splitActions] : [viewDetailAction];
   totalActions = moduleActions.concat(totalActions);
@@ -80,11 +101,13 @@ function MasterDetailLayout(props) {
     moduleLayoutRef.current?.openModal({
       initialWidth: 500,
       initialHeigth: 680,
-      window: /* @__PURE__ */ jsx(WindowBase, {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/view_detail.svg`,
-        title: getLabel("master_detail_layout.view_detail"),
-        children: typeof detailComponent === "function" ? detailComponent({}) : detailComponent
-      })
+      window: /* @__PURE__ */ jsx(
+        WindowBase,
+        {
+          title: getLabel("master_detail_layout.view_detail"),
+          children: typeof detailComponent === "function" ? detailComponent({}) : detailComponent
+        }
+      )
     });
   }, [detailComponent, getLabel]);
   const viewDetailAction = useMemo(() => {
@@ -103,16 +126,20 @@ function MasterDetailLayout(props) {
     const actions = getTotalModuleActions(splitActions, moduleActions, viewDetailAction, isDesktop);
     return actions;
   }, [splitActions, moduleActions, isDesktop, viewDetailAction]);
+  const classes = useMasterDetailLayoutUtilityClasses();
   return /* @__PURE__ */ jsx(MasterDetailProvider, {
-    children: /* @__PURE__ */ jsx(ModuleLayout, {
-      ref: moduleLayoutRef,
-      moduleId,
-      moduleActions: finalModuleActions,
-      version,
-      children: /* @__PURE__ */ jsx(SplitLayout, {
-        splitPosition: isDesktop ? splitPosition : "none",
-        firstPart: masterComponent,
-        secondPart: detailComponent
+    children: /* @__PURE__ */ jsx(MasterDetailLayoutRoot, {
+      className: classes.root,
+      children: /* @__PURE__ */ jsx(ModuleLayout, {
+        ref: moduleLayoutRef,
+        moduleId,
+        moduleActions: finalModuleActions,
+        version,
+        children: /* @__PURE__ */ jsx(SplitLayout, {
+          splitPosition: isDesktop ? splitPosition : "none",
+          firstPart: masterComponent,
+          secondPart: detailComponent
+        })
       })
     })
   });

package/layouts/MasterDetailLayout/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MasterDetailLayoutRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/layouts/ModuleLayout/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LModuleLayout";

package/layouts/ModuleLayout/classes/index.d.ts

@@ -0,0 +1,7 @@
+import { ModuleLayoutClassesType } from './types';
+export declare const moduleLayoutClasses: ModuleLayoutClassesType;
+export declare function getModuleLayoutUtilityClass(slot: string): string;
+export declare const useModuleLayoutUtilityClasses: () => {
+    root: string;
+    moduleContent: string;
+};

package/layouts/ModuleLayout/classes/types.d.ts

@@ -0,0 +1,7 @@
+import { useModuleLayoutUtilityClasses } from ".";
+export interface ModuleLayoutClassesType {
+    root: string;
+    moduleContent: string;
+}
+export declare type ModuleLayoutClassesKey = keyof ModuleLayoutClassesType;
+export declare type Classes = ReturnType<typeof useModuleLayoutUtilityClasses>;

package/layouts/ModuleLayout/{index.850f7dcf.js → index.e7218171.js}

@@ -1,28 +1,32 @@
 import { useModal, useWindowToolsMF, ModalProvider, getModalDialogComponentsDictionary } from "@m4l/components";
 import { forwardRef, useRef, useImperativeHandle, createContext, useState, useMemo, useEffect } from "react";
 import { styled } from "@mui/material/styles";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
 import { jsx } from "react/jsx-runtime";
-const WrapperInnerModule = styled("div")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  position: "absolute",
-  margin: "0px 12px 12px 12px",
-  left: "0px",
-  right: "0px",
-  top: "0px",
-  bottom: "0px",
-  overflow: "hidden"
-}));
-const ModuleContent = styled("div")(({
+const InnerModuleRoot = styled("div")(({
   theme
 }) => ({
-  display: "flex",
-  position: "relative",
-  marginTop: theme.spacing(1),
-  justifyContent: "center",
-  flexGrow: "1",
-  overflow: "hidden"
+  ...theme.components?.M4LModuleLayout?.styleOverrides
 }));
+const componentName = "M4LModuleLayout";
+generateUtilityClasses(componentName, [
+  "root",
+  "moduleContent"
+]);
+function getModuleLayoutUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useModuleLayoutUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    moduleContent: ["moduleContent"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getModuleLayoutUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
 const InnerModule = forwardRef((props, ref) => {
   const {
     children
@@ -35,12 +39,12 @@ const InnerModule = forwardRef((props, ref) => {
     openModal,
     current: divRef.current
   }));
-  return /* @__PURE__ */ jsx(WrapperInnerModule, {
-    id: "WrapperInnerModule",
-    className: "m4l_module_layout",
+  const classes = useModuleLayoutUtilityClasses();
+  return /* @__PURE__ */ jsx(InnerModuleRoot, {
+    className: classes.root,
     ref: divRef,
-    children: /* @__PURE__ */ jsx(ModuleContent, {
-      id: "ModuleContent",
+    children: /* @__PURE__ */ jsx("div", {
+      className: classes.moduleContent,
       children
     })
   });

package/layouts/ModuleLayout/subcomponents/InnerModule/styles.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="react" />
-export declare const WrapperInnerModule: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ModuleContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+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>, {}>;

package/layouts/NoAuthModuleLayout/{index.eabf38c1.js → index.2808fa44.js}

@@ -115,7 +115,8 @@ const DesktopContent = () => {
     getLabel
   } = useModuleDictionary();
   const {
-    name
+    name,
+    slogan
   } = useDomain();
   return /* @__PURE__ */ jsxs(DesktopContentRoot, {
     children: [/* @__PURE__ */ jsx(LanguagePopover, {}), /* @__PURE__ */ jsxs(DesktopBanner, {
@@ -148,7 +149,7 @@ const DesktopContent = () => {
           variant: "subtitle",
           skeletonWidth: "80%",
           skeletongHeight: "24px",
-          children: "slogan"
+          children: slogan
         })]
       })]
     }), /* @__PURE__ */ jsx(WrapperFormContent$1, {

package/layouts/index.96a3745e.js

@@ -0,0 +1,8 @@
+import "./ModuleLayout/index.e7218171.js";
+import "@m4l/components";
+import "react";
+import "@m4l/core";
+import "./MasterDetailLayout/index.fe6ac47b.js";
+import "@m4l/graphics";
+import "react/jsx-runtime";
+import "./NoAuthModuleLayout/index.2808fa44.js";

package/layouts/index.d.ts

@@ -1,6 +1,6 @@
-export { ModuleLayout } from './ModuleLayout';
+export { ModuleLayout } from './ModuleLayout/ModuleLayout';
 export * from './ModuleLayout/dicctionary';
-export { MasterDetailLayout } from './MasterDetailLayout';
+export { MasterDetailLayout } from './MasterDetailLayout/MasterDetailLayout';
 export * from './MasterDetailLayout/dicctionary';
 export { NoAuthModuleLayout } from './NoAuthModuleLayout';
 export * from './NoAuthModuleLayout/dicctionary';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/layouts",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "license": "UNLICENSED",
   "dependencies": {
     "@mui/material": "5.10.4",

package/hooks/index.a0c767ed.js

@@ -1,4 +0,0 @@
-import "react";
-import "../layouts/MasterDetailLayout/index.bca0fce5.js";
-import "../contexts/AuthContext/index.6f966215.js";
-import "../layouts/ModuleLayout/index.850f7dcf.js";

package/layouts/index.07aacf57.js

@@ -1,8 +0,0 @@
-import "./ModuleLayout/index.850f7dcf.js";
-import "@m4l/components";
-import "react";
-import "@m4l/core";
-import "./MasterDetailLayout/index.bca0fce5.js";
-import "@m4l/graphics";
-import "react/jsx-runtime";
-import "./NoAuthModuleLayout/index.eabf38c1.js";