@m4l/components 0.1.51 → 0.1.52

package/components/areas/components/Window/{index.d1a59be4.js → index.e34225ae.js}

@@ -7,17 +7,17 @@ import { styled } from "@mui/material/styles";
 import "react-router-dom";
 import "../../../animate/LoadingScreen/index.1d0c4307.js";
 import "../../../animate/PropagateLoader/index.be5b02c3.js";
-import "../index.29809e82.js";
-import "../AreasAdmin/index.3e586e9b.js";
+import "../index.6d863764.js";
+import "../AreasAdmin/index.dbab59f1.js";
 import { useEnvironment, useModuleSkeleton, useModuleDictionary, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
 import { I as IconButton } from "../../../mui_extended/IconButton/index.1318a283.js";
 import "zustand";
-import "../../contexts/AreasContext/index.4f938baa.js";
+import "../../contexts/AreasContext/index.7406c20f.js";
 import { shallow } from "zustand/shallow";
-import "../AreasContainer/index.15e4628d.js";
+import "../AreasContainer/index.f3f921b9.js";
 import "react-grid-layout/css/styles.css";
 import "../../../../react-resizable.bb58c8fc.js";
-import { W as WindowToolsMFProvider, a as WindowMFProvider } from "../../contexts/index.4cfa6ea9.js";
+import { W as WindowToolsMFProvider, a as WindowMFProvider } from "../../contexts/index.e80d8f0f.js";
 import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "react-hook-form";
 import "../../../hook-form/RHFAutocomplete/index.74add0d0.js";
@@ -38,42 +38,40 @@ import "../../../ErrorLabel/index.78553a1e.js";
 import "@mui/x-date-pickers";
 import "../../../hook-form/RHFDateTime/index.7f1cbd85.js";
 import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
-import "../../../hook-form/RHFTextField/index.57f138f7.js";
-import "../../../hook-form/RHFPeriod/index.47cf646d.js";
-import "../../../Period/index.89daad51.js";
-import "../../../CommonActions/components/Actions/index.c06ea173.js";
-import "../../../../contexts/ModalContext/index.e94f0e72.js";
+import "../../../hook-form/RHFTextField/index.bef7eced.js";
+import "../../../hook-form/RHFPeriod/index.5d2a2071.js";
+import "../../../Period/index.85fe764a.js";
+import "../../../CommonActions/components/Actions/index.f0a3167b.js";
+import "../../../../contexts/ModalContext/index.3d92d9f9.js";
 import { c as cjs } from "../../../../react-draggable.0eef011c.js";
-import "../../../ModalDialog/index.de10969f.js";
+import "../../../ModalDialog/index.5a307e29.js";
 import { R as ResizeableWindow } from "../../../Resizeable/index.8a442a8b.js";
-import "../../../modal/WindowConfirm.72de5ce8.js";
-import "../../../modal/WindowBase.ed279350.js";
+import "../../../modal/WindowConfirm.cbc7720c.js";
+import "../../../modal/WindowBase.b5e29758.js";
 import "lodash/isString";
 import "react-dropzone";
 import "../../../hook-form/RHFUpload/index.7fdff30f.js";
-import "../../../DataGrid/index.eb1bdc97.js";
+import "../../../DataGrid/index.85390177.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
 import "../../../ScrollBar/index.39eeb2de.js";
-import "../../../DynamicFilter/index.17731fda.js";
+import "../../../DynamicFilter/index.cddd7472.js";
 import "clsx";
 import "simplebar/dist/simplebar.min.css";
 import "@hookform/resolvers/yup";
 import "../../../../contexts/RHFormContext/index.828b60ad.js";
 import "yup";
-import "../../../../index.js";
-import "@mui/base";
 import "../../../LanguagePopover/index.5047b444.js";
 import "../../../NoItemSelected/index.9636ec8a.js";
-import "../../../ObjectLogs/index.338656c6.js";
+import "../../../ObjectLogs/index.1315af37.js";
 import "../../../../react-json-view.57125fcf.js";
 import "../../../PaperForm/index.0114aa9b.js";
 import "../../../Page/index.4237c241.js";
 import "../../../PropertyValue/index.dfcfe1ba.js";
 import "../../../../react-splitter-layout.8b1655c8.js";
 import "../../../SplitLayout/index.5a8355d8.js";
-import { a as useAreaStore } from "../../hooks/useArea/index.575c2abe.js";
-import { a as useWindow, b as useWindowStore } from "../../hooks/index.b15baf14.js";
+import { a as useAreaStore } from "../../hooks/useArea/index.7bdbbb79.js";
+import { a as useWindow, b as useWindowStore } from "../../hooks/index.0fd57f88.js";
 import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
 import { v as varBounce } from "../../../animate/variants/bounce.784aaaaa.js";
 const WrapperWindow = styled("div", {
@@ -85,9 +83,9 @@ const WrapperWindow = styled("div", {
   width: "100%",
   overflow: "hidden",
   border: "1px solid gray",
-  borderTop: selected ? "1px solid red" : "1px solid black",
+  borderTop: selected ? "1px solid red" : "1px solid gray",
   backgroundColor: theme.palette.background.paper,
-  padding: theme.spacing(3),
+  padding: theme.spacing(0),
   "&.m4l_selected": {
     borderTop: "1px solid green"
   }
@@ -307,7 +305,14 @@ function getMainActions(isDesktop, moduleActions) {
 }
 function Header() {
   const [url_icon, title, moduleActions, onClose, container_id] = useWindowStore((state) => [state.url_icon, state.title, state.moduleActions, state.onClose, state.windowId], shallow);
-  const saveModuleCookies = useWindowStore((state) => state.internalActions.saveModuleCookies);
+  const {
+    saveModuleCookies
+  } = useWindowStore((state) => state.internalActions);
+  const maximizedId = useAreaStore((state) => state.singleId);
+  const {
+    maximizeLayout,
+    normalizeLayouts
+  } = useAreaStore((state) => state.actions, shallow);
   const {
     host_static_assets,
     environment_assets
@@ -321,6 +326,13 @@ function Header() {
   const onCloseLocal = () => {
     onClose && onClose(container_id);
   };
+  const maxNormalize = () => {
+    if (maximizedId) {
+      normalizeLayouts();
+    } else {
+      maximizeLayout(container_id);
+    }
+  };
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(SKTModuleHeader, {});
   }
@@ -373,6 +385,10 @@ function Header() {
       onClick: onCloseLocal,
       "aria-label": "click",
       src: `${host_static_assets}/${environment_assets}/frontend/components/window/assets/icons/close.svg`
+    }), isDesktop && /* @__PURE__ */ jsx(Button, {
+      onClick: maxNormalize,
+      "aria-label": "click",
+      children: maximizedId ? "Norm" : "Max"
     }), /* @__PURE__ */ jsx(Button, {
       onClick: saveModuleCookies,
       "aria-label": "click",
@@ -625,7 +641,6 @@ function MFLoader(props) {
       cleanUp(dsScript);
     };
   }, [divScript]);
-  console.log("Render micro frontend", divScript.divContainerId, final_host);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       id: divScript.divContainerId
@@ -657,9 +672,11 @@ const InnerForHooks = (props) => {
   const {
     winType
   } = props;
-  console.log("Render InnerForHooks", props.windowId);
-  return /* @__PURE__ */ jsxs(WindowMFProvider, {
-    ...props,
+  const status = useWindowStore((state) => state.status);
+  if (status !== "loaded") {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsx(WrapperContent, {
       children: winType === "microfrontend" ? /* @__PURE__ */ jsx(MicroFrontend, {
         ...props.mfProps
@@ -669,7 +686,7 @@ const InnerForHooks = (props) => {
     })]
   });
 };
-const MemonizedInnerForHooks = React__default.memo(InnerForHooks);
+React__default.memo(InnerForHooks);
 const Window = (props) => {
   const {
     emergeType
@@ -680,7 +697,6 @@ const Window = (props) => {
     selectWindowLayout
   } = useAreaStore((state) => state.actions);
   const onTouch = () => {
-    console.log("onTouch", props.windowId);
     if (!selected) {
       if (emergeType === "popup") {
         selectWindowPopUp(props.windowId);
@@ -689,13 +705,15 @@ const Window = (props) => {
       }
     }
   };
-  console.log("Render Window", props.windowId, selected);
   return /* @__PURE__ */ jsx(WrapperWindow, {
     id: "WrapperWindow",
     selected,
     onMouseDown: onTouch,
-    children: /* @__PURE__ */ jsx(MemonizedInnerForHooks, {
-      ...props
+    children: /* @__PURE__ */ jsx(WindowMFProvider, {
+      ...props,
+      children: /* @__PURE__ */ jsx(InnerForHooks, {
+        ...props
+      })
     })
   });
 };
@@ -751,7 +769,6 @@ const WindowModal = (props) => {
       onClose
     })
   });
-  console.log("Render WindowModal");
   return /* @__PURE__ */ jsxs(WrapperWindowModal, {
     open: true,
     "aria-labelledby": "child-modal-title",
@@ -769,9 +786,68 @@ const WindowModal = (props) => {
     ), !isDesktop && contentComnponent]
   });
 };
-React__default.memo(WindowModal);
+const MemonizedWindowModal = React__default.memo(WindowModal);
+const WrapperWindowsPanel = styled("div", {
+  shouldForwardProp: (props) => props !== "isDesktop"
+})(({
+  isDesktop
+}) => ({
+  display: "flex",
+  flexDirection: isDesktop ? "column" : "row",
+  height: isDesktop ? "40px" : "unset",
+  maxWidth: isDesktop ? "40px" : "unset",
+  flexGrow: "1",
+  position: "relative"
+}));
+const WrapperWindowPanel = styled("div", {
+  shouldForwardProp: (props) => props !== "selected"
+})(({
+  selected
+}) => ({
+  flexDirection: "column",
+  flexGrow: "1",
+  position: "relative",
+  width: "40px",
+  height: "40px",
+  border: selected ? "1px solid red" : "1px solid black"
+}));
+const WindowsPanel = () => {
+  const status = useAreaStore((state) => state.status);
+  const mode = useAreaStore((state) => state.viewMode);
+  const singleId = useAreaStore((state) => state.singleId);
+  const gridLayouts = useAreaStore((state) => state.gridLayouts, shallow);
+  const hashWindowsLayouts = useAreaStore((state) => state.hashWindowsLayouts, shallow);
+  const {
+    maximizeLayout
+  } = useAreaStore((state) => state.actions);
+  const isDesktop = useAreaStore((state) => state.isDesktop);
+  const onTouched = (layoutId) => {
+    maximizeLayout(layoutId);
+  };
+  if (status === "loaded") {
+    if (mode !== "single" || gridLayouts.length < 2) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(WrapperWindowsPanel, {
+      isDesktop,
+      children: gridLayouts.map((l) => {
+        return /* @__PURE__ */ jsx(WrapperWindowPanel, {
+          onClick: () => onTouched(l.i),
+          selected: singleId === l.i,
+          children: /* @__PURE__ */ jsx(Icon, {
+            src: hashWindowsLayouts[l.i].url_icon,
+            size: "32px"
+          })
+        }, l.i);
+      })
+    });
+  } else {
+    return null;
+  }
+};
 export {
   MemonizedWindow as M,
-  WindowModal as W,
-  Window as a
+  Window as W,
+  MemonizedWindowModal as a,
+  WindowsPanel as b
 };

package/components/areas/components/Window/subcomponents/InnerForHooks/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { WindowProps } from '../../../Area/types';
-export declare const InnerForHooks: (props: WindowProps) => JSX.Element;
-export declare const MemonizedInnerForHooks: React.MemoExoticComponent<(props: WindowProps) => JSX.Element>;
+export declare const InnerForHooks: (props: WindowProps) => JSX.Element | null;
+export declare const MemonizedInnerForHooks: React.MemoExoticComponent<(props: WindowProps) => JSX.Element | null>;

package/components/areas/components/WindowPopUp/{index.90566fca.js → index.90eb0348.js}

@@ -7,17 +7,17 @@ import "@mui/material/styles";
 import "react-router-dom";
 import "../../../animate/LoadingScreen/index.1d0c4307.js";
 import "../../../animate/PropagateLoader/index.be5b02c3.js";
-import "../index.29809e82.js";
-import "../AreasAdmin/index.3e586e9b.js";
+import "../index.6d863764.js";
+import "../AreasAdmin/index.dbab59f1.js";
 import "@m4l/core";
 import "../../../mui_extended/IconButton/index.1318a283.js";
 import "zustand";
-import "../../contexts/AreasContext/index.4f938baa.js";
+import "../../contexts/AreasContext/index.7406c20f.js";
 import "zustand/shallow";
-import "../AreasContainer/index.15e4628d.js";
+import "../AreasContainer/index.f3f921b9.js";
 import "react-grid-layout/css/styles.css";
 import "../../../../react-resizable.bb58c8fc.js";
-import "../../contexts/index.4cfa6ea9.js";
+import "../../contexts/index.e80d8f0f.js";
 import "../../contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "react-hook-form";
 import "../../../hook-form/RHFAutocomplete/index.74add0d0.js";
@@ -38,42 +38,41 @@ import "../../../ErrorLabel/index.78553a1e.js";
 import "@mui/x-date-pickers";
 import "../../../hook-form/RHFDateTime/index.7f1cbd85.js";
 import "@m4l/graphics";
-import "../../../hook-form/RHFTextField/index.57f138f7.js";
-import "../../../hook-form/RHFPeriod/index.47cf646d.js";
-import "../../../Period/index.89daad51.js";
-import "../../../CommonActions/components/Actions/index.c06ea173.js";
-import "../../../../contexts/ModalContext/index.e94f0e72.js";
+import "../../../hook-form/RHFTextField/index.bef7eced.js";
+import "../../../hook-form/RHFPeriod/index.5d2a2071.js";
+import "../../../Period/index.85fe764a.js";
+import "../../../CommonActions/components/Actions/index.f0a3167b.js";
+import "../../../../contexts/ModalContext/index.3d92d9f9.js";
 import "../../../../react-draggable.0eef011c.js";
-import "../../../ModalDialog/index.de10969f.js";
+import "../../../ModalDialog/index.5a307e29.js";
 import { R as ResizeableWindow } from "../../../Resizeable/index.8a442a8b.js";
-import "../../../modal/WindowConfirm.72de5ce8.js";
-import "../../../modal/WindowBase.ed279350.js";
+import "../../../modal/WindowConfirm.cbc7720c.js";
+import "../../../modal/WindowBase.b5e29758.js";
 import "lodash/isString";
 import "react-dropzone";
 import "../../../hook-form/RHFUpload/index.7fdff30f.js";
-import "../../../DataGrid/index.eb1bdc97.js";
+import "../../../DataGrid/index.85390177.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
 import "../../../ScrollBar/index.39eeb2de.js";
-import "../../../DynamicFilter/index.17731fda.js";
+import "../../../DynamicFilter/index.cddd7472.js";
 import "clsx";
 import "simplebar/dist/simplebar.min.css";
 import "@hookform/resolvers/yup";
 import "../../../../contexts/RHFormContext/index.828b60ad.js";
 import "yup";
 import { DraggableWindow } from "../../../../index.js";
-import "@mui/base";
 import "../../../LanguagePopover/index.5047b444.js";
 import "../../../NoItemSelected/index.9636ec8a.js";
-import "../../../ObjectLogs/index.338656c6.js";
+import "../../../ObjectLogs/index.1315af37.js";
 import "../../../../react-json-view.57125fcf.js";
 import "../../../PaperForm/index.0114aa9b.js";
 import "../../../Page/index.4237c241.js";
 import "../../../PropertyValue/index.dfcfe1ba.js";
 import "../../../../react-splitter-layout.8b1655c8.js";
 import "../../../SplitLayout/index.5a8355d8.js";
-import { a as useAreaStore } from "../../hooks/useArea/index.575c2abe.js";
-import { a as Window } from "../Window/index.d1a59be4.js";
+import { a as useAreaStore } from "../../hooks/useArea/index.7bdbbb79.js";
+import { W as Window } from "../Window/index.e34225ae.js";
 const WindowPopUp = (props) => {
   const {
     windowProps,

package/components/areas/components/WindowsPanel/index.d.ts

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

package/components/areas/components/{index.29809e82.js → index.6d863764.js}

@@ -1,30 +1,35 @@
-import { A as AreaProvider } from "../contexts/AreaContext/index.c787aee6.js";
-import { G as GridLayout } from "./GridLayout/index.f38f5b74.js";
+import { A as AreaProvider } from "../contexts/AreaContext/index.f25f7180.js";
 import { styled } from "@mui/material/styles";
-import { a as useAreaStore } from "../hooks/useArea/index.575c2abe.js";
-import { jsx } from "react/jsx-runtime";
-import "./AreasAdmin/index.3e586e9b.js";
+import { G as GridLayout } from "./GridLayout/index.9953146d.js";
+import { a as useAreaStore } from "../hooks/useArea/index.7bdbbb79.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { b as WindowsPanel } from "./Window/index.e34225ae.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import "./AreasAdmin/index.dbab59f1.js";
 import "react";
 import "@m4l/core";
 import "@mui/material";
 import "../../Icon/index.f6e8d810.js";
 import "../../mui_extended/IconButton/index.1318a283.js";
 import "zustand";
-import "../contexts/AreasContext/index.4f938baa.js";
+import "../contexts/AreasContext/index.7406c20f.js";
 import "zustand/shallow";
-import "./AreasContainer/index.15e4628d.js";
+import "./AreasContainer/index.f3f921b9.js";
 import "react-grid-layout/css/styles.css";
 import "../../../react-resizable.bb58c8fc.js";
-const WrapperArea = styled("div")(() => ({
-  flexDirection: "column",
+const WrapperArea = styled("div", {
+  shouldForwardProp: (props) => props !== "isDesktop"
+})(({
+  isDesktop
+}) => ({
+  flexDirection: isDesktop ? "row" : "column-reverse",
   flexGrow: "1",
   position: "absolute",
   height: "100%",
   width: "100%",
-  overflow: "hidden",
+  overflow: "hiden",
   justifyContent: "top",
   alignItems: "flex-start",
-  border: "1px dashed black",
   visibility: "hidden",
   display: "none",
   hola: "juan",
@@ -33,7 +38,6 @@ const WrapperArea = styled("div")(() => ({
     visibility: "visible"
   },
   "& .M4L_GridLayout": {
-    overflow: "scroll",
     minWidth: "100%",
     minHeight: "100%",
     juan: 1
@@ -57,12 +61,13 @@ const Area = (props) => {
     id,
     active
   } = props;
-  console.log("Render Area");
+  const isDesktop = useResponsiveDesktop();
   return /* @__PURE__ */ jsx(WrapperArea, {
     className: `M4L_Area_wrapper_${id} ${active ? "active" : ""}`,
-    children: /* @__PURE__ */ jsx(AreaProvider, {
+    isDesktop: !!isDesktop,
+    children: /* @__PURE__ */ jsxs(AreaProvider, {
       ...props,
-      children: /* @__PURE__ */ jsx(InnerForHooks, {})
+      children: [/* @__PURE__ */ jsx(InnerForHooks, {}), /* @__PURE__ */ jsx(WindowsPanel, {})]
     })
   });
 };

package/components/areas/contexts/AreaContext/helper.d.ts

@@ -1,10 +1,37 @@
 import { WritableDraft } from 'immer/dist/internal';
+import { Layouts } from 'react-grid-layout';
 import { HashWindowsByLayouts } from '../../components/Area/types';
 import { AreaStateWithActions } from './store';
+import { WinLayout } from './types';
+export declare const ROW_HEIGTH_GRIDLAYOUT = 100;
+export declare const CONTAINER_PADDING_GRIDLAYOUT = 3;
 export declare const DEBOUCED_SAVE_TIME = 500;
 export declare const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";
 export declare const COOKIE_WINDOWS = "windows";
+export declare const NORMALIZED_BREAKPOINTS: {
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+    xxs: number;
+};
+export declare const NORMALIZED_COLS: {
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+    xxs: number;
+};
+export declare const MAXIMIZED_COLS: {
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+    xxs: number;
+};
 export declare const getParmsFromValue: (key: string, data: []) => any;
+export declare function setAddBreakPoints(state: WritableDraft<AreaStateWithActions>, newLayout: WinLayout): Layouts;
+export declare function setBreakPointsMaximized(state: WritableDraft<AreaStateWithActions>, layoutId?: string): Layouts;
 export declare function getDataFromResponse(data: any, state: WritableDraft<AreaStateWithActions>): {
     newBreakPointsLayouts: any;
     newGridLayouts: any[];