@m4l/layouts 1.0.4

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useMasterDetail';
+export * from './useModule';

package/dist/hooks/useMasterDetail/index.d.ts

@@ -0,0 +1 @@
+export declare const useMasterDetail: () => import("../../layouts/MasterDetailLayout/contexts/MasterDetailContext/types").MasterDetailContextProps;

package/dist/hooks/useMasterDetail/index.js

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

package/dist/hooks/useModule/index.d.ts

@@ -0,0 +1,2 @@
+export declare const useModule: () => import("../../layouts/ModuleLayout/contexts/ModuleContext/types").ModuleLayoutContextProps;
+export default useModule;

package/dist/hooks/useModule/index.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { M as ModuleContext } from "../../layouts/ModuleLayout/index.js";
+const useModule = () => {
+  const context = useContext(ModuleContext);
+  if (!context)
+    throw new Error("useModule context must be use inside ModuleContext");
+  return context;
+};
+export { useModule as u };

package/dist/hooks/useResponsive.d.ts

@@ -0,0 +1,8 @@
+import { Breakpoint } from '@mui/material';
+declare type Query = 'up' | 'down' | 'between' | 'only';
+declare type Key = Breakpoint | number;
+declare type Start = Breakpoint | number;
+declare type End = Breakpoint | number;
+export declare function useResponsive(query: Query, key?: Key, start?: Start, end?: End): boolean | undefined;
+export declare function useResponsiveDesktop(): boolean | undefined;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './layouts';
+export * from './hooks';

package/dist/index.js

@@ -0,0 +1,12 @@
+export { a as MasterDetailLayout } from "./layouts/MasterDetailLayout/index.js";
+export { a as ModuleLayout } from "./layouts/ModuleLayout/index.js";
+export { u as useMasterDetail } from "./hooks/useMasterDetail/index.js";
+export { u as useModule } from "./hooks/useModule/index.js";
+import "react";
+import "@m4l/core";
+import "@m4l/components";
+import "react/jsx-runtime";
+import "./vendor.js";
+import "@mui/material/styles";
+import "@mui/material/useMediaQuery";
+import "@mui/material";

package/dist/layouts/MasterDetailLayout/components/ButtonDetail/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ComponentActionProps } from '@m4l/components';
+export declare function ButtonDetail(props: ComponentActionProps): JSX.Element;

package/dist/layouts/MasterDetailLayout/contexts/MasterDetailContext/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { MasterDetailContextProps, MasterDetailProviderProps } from './types';
+declare const MasterDetailContext: import("react").Context<MasterDetailContextProps>;
+declare function MasterDetailProvider(props: MasterDetailProviderProps): JSX.Element;
+export { MasterDetailProvider, MasterDetailContext };

package/dist/layouts/MasterDetailLayout/contexts/MasterDetailContext/types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export declare type MasterSelecion = any | any[] | undefined;
+export interface MasterDetailContextStateProps {
+    masterSelection?: MasterSelecion;
+}
+export interface MasterDetailProviderProps {
+    masterSelection: MasterSelecion;
+    setMasterSelection: (newMasterSelecion: MasterSelecion) => void;
+    children: ReactNode;
+}
+export interface MasterDetailContextProps extends MasterDetailContextStateProps {
+    onChangeMasterSelection: (newMasterSelection: MasterSelecion) => void;
+}

package/dist/layouts/MasterDetailLayout/dicctionary.d.ts

@@ -0,0 +1,3 @@
+import type { Dictionary } from '@m4l/core';
+export declare function getMasterDetailLayoutComponentsDictionary(): string[];
+export declare const defaultMasterDetailDictionary: Dictionary;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { MasterDetailLayoutProps } from './types';
+export declare function MasterDetailLayout(props: MasterDetailLayoutProps): JSX.Element;

package/dist/layouts/MasterDetailLayout/index.js

@@ -0,0 +1,170 @@
+import { createContext, useState, useRef, useCallback, useMemo } from "react";
+import { voidFunction, useEnvironment } from "@m4l/core";
+import { SplitLayout } from "@m4l/components";
+import { g as getModuleLayoutComponentsDictionary, d as defaultModuleLayoutDictionary, a as ModuleLayout } from "../ModuleLayout/index.js";
+import { jsx } from "react/jsx-runtime";
+import { u as useResponsiveDesktop } from "../../vendor.js";
+import { Button } from "@mui/material";
+import { u as useMasterDetail } from "../../hooks/useMasterDetail/index.js";
+function getMasterDetailLayoutComponentsDictionary() {
+  return ["master_detail_layout"].concat(getModuleLayoutComponentsDictionary());
+}
+const defaultMasterDetailDictionary = {
+  master_detail_layout: {
+    split_vertical: "Split vertically",
+    split_horizontal: "Split horizontally",
+    no_split: "No split",
+    view_detail: "View detail"
+  },
+  ...defaultModuleLayoutDictionary
+};
+const initialState = {
+  masterSelection: void 0,
+  onChangeMasterSelection: voidFunction
+};
+const MasterDetailContext = createContext(initialState);
+function MasterDetailProvider(props) {
+  const {
+    children,
+    masterSelection,
+    setMasterSelection
+  } = props;
+  const onChangeMasterSelection = (newMasterSelection) => {
+    setMasterSelection(newMasterSelection);
+  };
+  return /* @__PURE__ */ jsx(MasterDetailContext.Provider, {
+    value: {
+      masterSelection,
+      onChangeMasterSelection
+    },
+    children
+  });
+}
+function ButtonDetail(props) {
+  const {
+    masterSelection
+  } = useMasterDetail();
+  const {
+    onClick,
+    description
+  } = props;
+  return /* @__PURE__ */ jsx(Button, {
+    onClick,
+    variant: "outlined",
+    disabled: masterSelection === void 0 ? true : false,
+    children: description
+  }, "miDetail");
+}
+function getTotalModuleActions(splitActions, moduleActions, viewDetailAction, isDesktop) {
+  let totalActions = isDesktop !== void 0 && isDesktop ? [...splitActions] : [viewDetailAction];
+  totalActions = totalActions.concat(moduleActions);
+  return totalActions;
+}
+function MasterDetailLayout(props) {
+  const {
+    moduleId,
+    moduleNameField,
+    detailComponent,
+    initialModuleActions: moduleActions,
+    urlIcon,
+    masterComponent,
+    defaultDictionary,
+    componentsDictionary,
+    breadcrumbLinks
+  } = props;
+  const {
+    host_static_assets,
+    environment
+  } = useEnvironment();
+  const [splitPosition, setSplitPosition] = useState("vertical");
+  const isDesktop = useResponsiveDesktop();
+  const moduleLayoutRef = useRef(null);
+  const [masterSelection, setMasterSelection] = useState(void 0);
+  const onChangePostionInternal = (newPostion) => {
+    const newSplitActions = [...initialSplitActions];
+    for (let i = 0; i < newSplitActions.length; i++) {
+      newSplitActions[i].disabled = false;
+      if (newSplitActions[i].tag === newPostion) {
+        newSplitActions[i].disabled = true;
+      }
+    }
+    setSplitActions(newSplitActions);
+    setSplitPosition(newPostion);
+  };
+  const initialSplitActions = [{
+    urlIcon: `${host_static_assets}/${environment}/frontend/components/masterdetaillayout/assets/icons/split_vertical.svg`,
+    onClick: () => onChangePostionInternal("vertical"),
+    disabled: true,
+    visibility: "main",
+    dictionaryField: "master_detail_layout.split_vertical",
+    tag: "vertical",
+    className: "splitactions"
+  }, {
+    urlIcon: `${host_static_assets}/${environment}/frontend/components/masterdetaillayout/assets/icons/split_horizontal.svg`,
+    onClick: () => onChangePostionInternal("horizontal"),
+    disabled: false,
+    visibility: "main",
+    dictionaryField: "master_detail_layout.split_horizontal",
+    tag: "horizontal",
+    className: "splitactions"
+  }, {
+    urlIcon: `${host_static_assets}/${environment}/frontend/components/masterdetaillayout/assets/icons/no_split.svg`,
+    onClick: () => onChangePostionInternal("none"),
+    disabled: false,
+    visibility: "main",
+    dictionaryField: "master_detail_layout.no_split",
+    tag: "none",
+    className: "splitactions"
+  }];
+  const onClickViewDetail = useCallback(() => {
+    moduleLayoutRef.current?.openModal({
+      title: "master_detail_layout.view_detail",
+      initialWidth: 500,
+      initialHeigth: 680,
+      contentComponent: detailComponent,
+      actionComponents: void 0
+    });
+  }, [detailComponent]);
+  const viewDetailAction = useMemo(() => {
+    return {
+      urlIcon: `${host_static_assets}/${environment}/frontend/components/masterdetaillayout/assets/icons/view_detail.svg`,
+      onClick: onClickViewDetail,
+      disabled: false,
+      visibility: "allways",
+      dictionaryField: "master_detail_layout.view_detail",
+      tag: "none",
+      className: "",
+      component: ButtonDetail
+    };
+  }, [environment, onClickViewDetail]);
+  const [splitActions, setSplitActions] = useState(initialSplitActions);
+  const finalModuleActions = useMemo(() => {
+    const actions = getTotalModuleActions(splitActions, moduleActions, viewDetailAction, isDesktop);
+    return actions;
+  }, [splitActions, moduleActions, isDesktop, viewDetailAction]);
+  const finalComponentsDictionary = useMemo(() => componentsDictionary.concat(getMasterDetailLayoutComponentsDictionary()), [componentsDictionary]);
+  const finalDefaultDictionary = useMemo(() => ({
+    ...defaultDictionary,
+    ...defaultMasterDetailDictionary
+  }), [defaultDictionary]);
+  return /* @__PURE__ */ jsx(MasterDetailProvider, {
+    masterSelection,
+    setMasterSelection,
+    children: /* @__PURE__ */ jsx(ModuleLayout, {
+      ref: moduleLayoutRef,
+      moduleId,
+      moduleNameField,
+      urlIcon,
+      initialModuleActions: finalModuleActions,
+      defaultDictionary: finalDefaultDictionary,
+      componentsDictionary: finalComponentsDictionary,
+      breadcrumbLinks,
+      children: /* @__PURE__ */ jsx(SplitLayout, {
+        splitPosition: isDesktop ? splitPosition : "none",
+        firstPart: masterComponent,
+        secondPart: detailComponent
+      })
+    })
+  });
+}
+export { MasterDetailContext as M, MasterDetailLayout as a };

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ModuleLayoutProps } from '../ModuleLayout/types';
+export interface ContainerProps {
+    vertical: boolean;
+}
+export interface MasterDetailLayoutProps extends Omit<ModuleLayoutProps, 'children'> {
+    masterComponent: ((props?: any) => JSX.Element) | ReactNode;
+    detailComponent: ((props?: any) => JSX.Element) | ReactNode;
+    onChangeSelected?: (row: any[]) => void;
+}

package/dist/layouts/ModuleLayout/components/Header/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Header(): JSX.Element;

package/dist/layouts/ModuleLayout/components/Header/skeleton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function SKTModuleHeader(): JSX.Element;

package/dist/layouts/ModuleLayout/components/Header/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ModuleTitleContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ModuleTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Separator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Breadcrumbs: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ModuleActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/layouts/ModuleLayout/components/Header/types.d.ts

@@ -0,0 +1,2 @@
+export interface HeaderProps {
+}

package/dist/layouts/ModuleLayout/components/ModuleContent/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ModuleProps, ModuleRef } from './types';
+export declare const Module: import("react").ForwardRefExoticComponent<ModuleProps & import("react").RefAttributes<ModuleRef>>;

package/dist/layouts/ModuleLayout/components/ModuleContent/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const WrapperModule: 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>, {}>;

package/dist/layouts/ModuleLayout/components/ModuleContent/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { ModalOpenOptions } from '@m4l/components';
+export declare type ModuleRef = {
+    openModal: (modalOpenProps: ModalOpenOptions) => void;
+    current: HTMLDivElement | null;
+};
+export interface ModuleProps {
+    children: ReactNode;
+}

package/dist/layouts/ModuleLayout/contexts/ModuleContext/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ModuleLayoutContextProps, ModuleLayoutProviderProps } from './types';
+declare const ModuleContext: import("react").Context<ModuleLayoutContextProps>;
+declare function ModuleProvider(props: ModuleLayoutProviderProps): JSX.Element;
+export { ModuleProvider, ModuleContext };

package/dist/layouts/ModuleLayout/contexts/ModuleContext/types.d.ts

@@ -0,0 +1,18 @@
+import type { TLink } from '@m4l/components';
+import type { ReactNode } from 'react';
+import type { ModuleAction } from '../../types';
+export interface ModuleLayoutContextStateProps {
+    urlIcon: string;
+    moduleId: number;
+    moduleNameField: string;
+    breadcrumbLinks: TLink[];
+}
+export interface ModuleLayoutProviderProps extends Omit<ModuleLayoutContextStateProps, 'init'> {
+    children: ReactNode;
+    initialModuleActions: ModuleAction[];
+}
+export interface ModuleLayoutContextProps extends ModuleLayoutContextStateProps {
+    moduleActions: ModuleAction[];
+    dynamicActions: ModuleAction[];
+    setDynamicActions: (dynamicActions: ModuleAction[]) => void;
+}

package/dist/layouts/ModuleLayout/dicctionary.d.ts

@@ -0,0 +1,3 @@
+import type { Dictionary } from '@m4l/core';
+export declare function getModuleLayoutComponentsDictionary(): string[];
+export declare const defaultModuleLayoutDictionary: Dictionary;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ModuleLayoutProps, ModuleLayoutRef } from './types';
+export declare const ModuleLayout: import("react").ForwardRefExoticComponent<ModuleLayoutProps & import("react").RefAttributes<ModuleLayoutRef>>;

package/dist/layouts/ModuleLayout/index.js

@@ -0,0 +1,380 @@
+import { BoxIcon, Breadcrumbs as Breadcrumbs$1, MenuActions, useModal, ModalProvider, getModalDialogComponentsDictionary } from "@m4l/components";
+import { createContext, useState, useMemo, forwardRef, useRef, useImperativeHandle } from "react";
+import { styled, useTheme } from "@mui/material/styles";
+import { voidFunction, useModuleDictionary, useFlagsPresent, FlagsProvider, ModuleDictionaryProvider } from "@m4l/core";
+import { Skeleton, Typography, IconButton } from "@mui/material";
+import { u as useResponsiveDesktop } from "../../vendor.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { u as useModule } from "../../hooks/useModule/index.js";
+const WrapperModule = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "absolute",
+  margin: "12px",
+  left: "0px",
+  right: "0px",
+  top: "0px",
+  bottom: "0px",
+  overflow: "hidden"
+}));
+const ModuleContent = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  position: "relative",
+  marginTop: theme.spacing(2),
+  flexGrow: "1",
+  overflow: "hidden"
+}));
+const Container = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  position: "relative",
+  paddingTop: theme.spacing(2),
+  paddingBottom: theme.spacing(2),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  height: "72px",
+  overflow: "hidden",
+  alignItems: "center",
+  " > span": {
+    marginRight: "12px"
+  },
+  "& > h5": {
+    paddingRight: theme.spacing(3),
+    borderRight: `1px solid ${theme.palette.divider}`
+  },
+  " > nav": {
+    marginRight: "12px",
+    flexGrow: 1
+  },
+  "& .splitactions.Mui-disabled": {
+    color: theme.palette.primary.main
+  },
+  "& svg ": {
+    width: "20px",
+    height: "20px"
+  }
+}));
+const Wrapper = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  padding: `${theme.spacing(2)} 0`,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  height: "auto",
+  [theme.breakpoints.up("sm")]: {
+    height: theme.spacing(9)
+  }
+}));
+const ModuleTitleContent = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: "auto",
+  gridGap: theme.spacing(1.75),
+  alignItems: "center",
+  width: "auto",
+  height: "auto",
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: "repeat(3, auto)"
+  }
+}));
+const ModuleTitle = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: `${theme.spacing(3)} auto`,
+  gridGap: theme.spacing(2),
+  alignItems: "center",
+  width: "auto",
+  height: "auto"
+}));
+const Separator = styled("div")(({
+  theme
+}) => ({
+  display: "none",
+  alignItems: "center",
+  width: "1px",
+  background: theme.palette.divider,
+  height: "100%",
+  margin: `0 ${theme.spacing(2)}`,
+  [theme.breakpoints.up("sm")]: {
+    display: "flex"
+  }
+}));
+const Breadcrumbs = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  alignItems: "center",
+  gridTemplateColumns: `repeat(3, auto)`,
+  gridGap: theme.spacing(2)
+}));
+const ModuleActions = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: "auto",
+  alignItems: "center",
+  width: "auto",
+  height: "auto",
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: `repeat(3, ${theme.spacing(3)})`,
+    gridGap: theme.spacing(2)
+  }
+}));
+function SKTModuleHeader() {
+  const isDesktop = useResponsiveDesktop();
+  return /* @__PURE__ */ jsxs(Wrapper, {
+    children: [/* @__PURE__ */ jsxs(ModuleTitleContent, {
+      children: [/* @__PURE__ */ jsxs(ModuleTitle, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: 120,
+          height: 14
+        })]
+      }), /* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs(Breadcrumbs, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: 68,
+          height: 14
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 4,
+          height: 4
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: 68,
+          height: 14
+        })]
+      })]
+    }), /* @__PURE__ */ jsx(ModuleActions, {
+      children: isDesktop ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        })]
+      }) : /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 24,
+        height: 24
+      })
+    })]
+  });
+}
+const initialState = {
+  moduleId: 0,
+  moduleNameField: "module_name",
+  urlIcon: "",
+  moduleActions: [],
+  dynamicActions: [],
+  setDynamicActions: voidFunction,
+  breadcrumbLinks: []
+};
+const ModuleContext = createContext(initialState);
+function ModuleProvider(props) {
+  const {
+    children,
+    initialModuleActions,
+    moduleId,
+    moduleNameField,
+    urlIcon,
+    breadcrumbLinks
+  } = props;
+  const [configOptions] = useState(() => ({
+    moduleId,
+    urlIcon,
+    moduleNameField,
+    dictionary: void 0,
+    breadcrumbLinks
+  }));
+  const [dynamicActions, setDynamicActions] = useState([]);
+  const finalModuleActions = useMemo(() => initialModuleActions.concat(dynamicActions), [initialModuleActions, dynamicActions]);
+  return /* @__PURE__ */ jsx(ModuleContext.Provider, {
+    value: {
+      moduleActions: finalModuleActions,
+      dynamicActions,
+      setDynamicActions,
+      moduleId: configOptions.moduleId,
+      moduleNameField: configOptions.moduleNameField,
+      urlIcon: configOptions.urlIcon,
+      breadcrumbLinks: configOptions.breadcrumbLinks
+    },
+    children
+  });
+}
+function getMenuActions(isDesktop, moduleActions) {
+  let menuActions = [...moduleActions.filter((action) => action.visibility !== "allways")];
+  if (isDesktop !== void 0 && isDesktop) {
+    menuActions = menuActions.filter((action) => action.visibility === "normal");
+  }
+  return menuActions;
+}
+function getMainActions(isDesktop, moduleActions) {
+  let mainActions = [];
+  if (isDesktop !== void 0 && isDesktop) {
+    mainActions = mainActions.concat(moduleActions.filter((action) => action.visibility === "main"));
+  }
+  mainActions = mainActions.concat(moduleActions.filter((action) => action.visibility === "allways"));
+  return mainActions;
+}
+function Header() {
+  const {
+    moduleActions,
+    moduleNameField,
+    breadcrumbLinks,
+    urlIcon
+  } = useModule();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const theme = useTheme();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = !useFlagsPresent(["dictionary_loaded"]);
+  const menuActions = useMemo(() => getMenuActions(isDesktop, moduleActions), [moduleActions, isDesktop]);
+  const mainActions = useMemo(() => {
+    console.log("useMemo Header ModuleActions mainActions", isDesktop, moduleActions);
+    return getMainActions(isDesktop, moduleActions);
+  }, [moduleActions, isDesktop]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTModuleHeader, {});
+  }
+  return /* @__PURE__ */ jsxs(Container, {
+    id: "Header",
+    children: [/* @__PURE__ */ jsx(BoxIcon, {
+      src: urlIcon,
+      sx: {
+        color: theme.palette.primary.main
+      }
+    }), /* @__PURE__ */ jsx(Typography, {
+      variant: "h5",
+      sx: {
+        maxWidth: 260,
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        color: "text.primary",
+        marginRight: "24px",
+        textOverflow: "ellipsis"
+      },
+      children: getLabel(moduleNameField)
+    }), /* @__PURE__ */ jsx(Breadcrumbs$1, {
+      links: breadcrumbLinks
+    }), mainActions.map((mainAction, index) => {
+      const description = getLabel(mainAction.dictionaryField);
+      if (!mainAction.component) {
+        return /* @__PURE__ */ jsx(IconButton, {
+          className: mainAction.className,
+          onClick: mainAction.onClick,
+          "aria-label": `${description}`,
+          disabled: mainAction.disabled,
+          children: /* @__PURE__ */ jsx(BoxIcon, {
+            src: mainAction.urlIcon,
+            sx: {
+              width: 18,
+              height: 18
+            }
+          })
+        }, `main_action_${index}`);
+      }
+      return /* @__PURE__ */ jsx(mainAction.component, {
+        description,
+        onClick: mainAction.onClick
+      }, `main_action_${index}`);
+    }), menuActions.length > 0 && /* @__PURE__ */ jsx(MenuActions, {
+      arrow: "right-top",
+      marginTop: "-11px",
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      menuActions
+    })]
+  });
+}
+const Module = forwardRef((props, ref) => {
+  const {
+    children
+  } = props;
+  const {
+    openModal
+  } = useModal();
+  const divRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    openModal,
+    current: divRef.current
+  }));
+  return /* @__PURE__ */ jsxs(WrapperModule, {
+    id: "WrapperModule",
+    ref: divRef,
+    children: [/* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsx(ModuleContent, {
+      id: "ModuleContent",
+      children
+    })]
+  });
+});
+Module.displayName = "Module";
+const ModuleLayout = forwardRef((props, ref) => {
+  const {
+    moduleId,
+    moduleNameField = "module_name",
+    initialModuleActions,
+    urlIcon,
+    children,
+    componentsDictionary,
+    breadcrumbLinks
+  } = props;
+  const moduleRef = useRef(null);
+  const openModal = (modalOpenProps) => {
+    moduleRef.current?.openModal(modalOpenProps);
+  };
+  useImperativeHandle(ref, () => ({
+    openModal,
+    current: moduleRef.current
+  }));
+  return /* @__PURE__ */ jsx(FlagsProvider, {
+    children: /* @__PURE__ */ jsx(ModuleDictionaryProvider, {
+      moduleId,
+      componentsDictionary,
+      children: /* @__PURE__ */ jsx(ModuleProvider, {
+        moduleId,
+        urlIcon,
+        moduleNameField,
+        initialModuleActions,
+        breadcrumbLinks,
+        children: /* @__PURE__ */ jsx(ModalProvider, {
+          children: /* @__PURE__ */ jsx(Module, {
+            ref: moduleRef,
+            children
+          })
+        })
+      })
+    })
+  });
+});
+ModuleLayout.displayName = "ModuleLayout";
+function getModuleLayoutComponentsDictionary() {
+  return ["module_layout"].concat(getModalDialogComponentsDictionary());
+}
+const defaultModuleLayoutDictionary = {
+  module_layout: {}
+};
+export { ModuleContext as M, ModuleLayout as a, defaultModuleLayoutDictionary as d, getModuleLayoutComponentsDictionary as g };

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import type { ModuleDictionary } from '@m4l/core';
+import type { MenuAction, TLink, ModalOpenOptions } from '@m4l/components';
+import type { HeaderProps } from './components/Header/types';
+import type { ModuleRef } from './components/ModuleContent/types';
+export interface ContainerProps {
+    vertical: boolean;
+}
+export declare type MenuActionType = 'main' | 'allways' | 'normal';
+export declare type ModuleLayoutRef = {
+    openModal: (modalOpenProps: ModalOpenOptions) => void;
+    current: ModuleRef | null;
+};
+export interface ModuleAction extends MenuAction {
+    visibility: MenuActionType;
+    tag?: any;
+    className?: string;
+}
+export interface ModuleLayoutProps extends HeaderProps {
+    moduleId: number;
+    urlIcon: string;
+    moduleNameField?: string;
+    breadcrumbLinks: TLink[];
+    initialModuleActions: ModuleAction[];
+    defaultDictionary: ModuleDictionary;
+    componentsDictionary: string[];
+    children: ReactNode;
+}

package/dist/layouts/index.d.ts

@@ -0,0 +1,2 @@
+export { MasterDetailLayout } from './MasterDetailLayout';
+export { ModuleLayout } from './ModuleLayout';

package/dist/vendor.js

@@ -0,0 +1,35 @@
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import "react";
+import "@m4l/core";
+import "@m4l/components";
+import "./layouts/ModuleLayout/index.js";
+import "./layouts/MasterDetailLayout/index.js";
+import "@mui/material";
+import "react/jsx-runtime";
+import "./hooks/useMasterDetail/index.js";
+import "./hooks/useModule/index.js";
+function useResponsive(query, key, start, end) {
+  const theme = useTheme();
+  const mediaUp = useMediaQuery(theme.breakpoints.up(key));
+  const mediaDown = useMediaQuery(theme.breakpoints.down(key));
+  const mediaBetween = useMediaQuery(theme.breakpoints.between(start, end));
+  const mediaOnly = useMediaQuery(theme.breakpoints.only(key));
+  if (query === "up") {
+    return mediaUp;
+  }
+  if (query === "down") {
+    return mediaDown;
+  }
+  if (query === "between") {
+    return mediaBetween;
+  }
+  if (query === "only") {
+    return mediaOnly;
+  }
+}
+function useResponsiveDesktop() {
+  const isDesktop = useResponsive("up", "sm");
+  return isDesktop;
+}
+export { useResponsiveDesktop as u };

package/dist/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+/// <reference types="vitest" />
+/// <reference types="vitest/importMeta" />

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@m4l/layouts",
+  "private": false,
+  "version": "1.0.4",
+  "license": "UNLICENSED",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "npx eslint src",
+    "lint:fix": "npm run lint -- --fix",
+    "prettier": "npx prettier src --check",
+    "prettier:fix": "npm run prettier -- --write",
+    "format": "npm run prettier:fix && npm run lint:fix"
+  },
+  "dependencies": {
+    "@m4l/components": "^0.0.4",
+    "react": "^17.0.0 || 18.x",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@emotion/styled": "^11.9.3",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.2.1",
+    "@types/node": "^17.0.40",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "@typescript-eslint/parser": "^5.27.1",
+    "@vitejs/plugin-react": "^1.3.0",
+    "eslint": "^8.17.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "prettier": "^2.6.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.9",
+    "vite-plugin-dts": "^1.2.0",
+    "vite-plugin-mkcert": "^1.6.4",
+    "vitest": "^0.17.1"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || 18.x",
+    "react-dom": "^18.0.0",
+    "@m4l/components": "^0.0.4"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}