@m4l/components 0.1.51 → 0.1.52

package/components/CommonActions/components/ActionFormCancel/{index.27e301c5.js → index.bd0d16d6.js}

@@ -3,28 +3,28 @@ import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
 import { B as Button } from "../../../mui_extended/Button/index.8406ed5b.js";
 import { useCallback } from "react";
-import { u as useModal } from "../../../../hooks/useModal/index.56c03c00.js";
+import { u as useModal } from "../../../../hooks/useModal/index.4454145e.js";
 import "../../../../react-draggable.0eef011c.js";
-import "../../../ModalDialog/index.de10969f.js";
+import "../../../ModalDialog/index.5a307e29.js";
 import "../../../Resizeable/index.8a442a8b.js";
 import { jsx } from "react/jsx-runtime";
 import "@m4l/graphics";
-import { W as WindowConfirm } from "../../../modal/WindowConfirm.72de5ce8.js";
-import "../../../modal/WindowBase.ed279350.js";
+import { W as WindowConfirm } from "../../../modal/WindowConfirm.cbc7720c.js";
+import "../../../modal/WindowBase.b5e29758.js";
 import "../../../Icon/index.f6e8d810.js";
 import "@mui/material/styles";
-import "../../../areas/components/index.29809e82.js";
-import "../../../areas/components/AreasAdmin/index.3e586e9b.js";
+import "../../../areas/components/index.6d863764.js";
+import "../../../areas/components/AreasAdmin/index.dbab59f1.js";
 import "../../../mui_extended/IconButton/index.1318a283.js";
 import "zustand";
-import "../../../areas/contexts/AreasContext/index.4f938baa.js";
+import "../../../areas/contexts/AreasContext/index.7406c20f.js";
 import "zustand/shallow";
-import "../../../areas/components/AreasContainer/index.15e4628d.js";
+import "../../../areas/components/AreasContainer/index.f3f921b9.js";
 import "react-grid-layout/css/styles.css";
 import "../../../../react-resizable.bb58c8fc.js";
-import "../../../areas/contexts/index.4cfa6ea9.js";
+import "../../../areas/contexts/index.e80d8f0f.js";
 import "../../../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
-import { u as useWindowToolsMF } from "../../../areas/hooks/index.b15baf14.js";
+import { u as useWindowToolsMF } from "../../../areas/hooks/index.0fd57f88.js";
 function ActionFormCancel() {
   const {
     getLabel
@@ -45,7 +45,6 @@ function ActionFormCancel() {
     control
   });
   const onConfirmQuit = useCallback(() => {
-    console.log("onConfirmQuit");
     closeWindow();
   }, []);
   const onClickCancel = useCallback(() => {

package/components/CommonActions/components/Actions/{index.c06ea173.js → index.f0a3167b.js}

@@ -6,25 +6,25 @@ import "@mui/material/Button";
 import "../../../mui_extended/Button/index.8406ed5b.js";
 import "react-hook-form";
 import "react";
-import "../../../../contexts/ModalContext/index.e94f0e72.js";
+import "../../../../contexts/ModalContext/index.3d92d9f9.js";
 import "../../../../react-draggable.0eef011c.js";
-import "../../../ModalDialog/index.de10969f.js";
+import "../../../ModalDialog/index.5a307e29.js";
 import "../../../Resizeable/index.8a442a8b.js";
 import "@m4l/graphics";
 import "@mui/lab";
-import "../../../modal/WindowConfirm.72de5ce8.js";
+import "../../../modal/WindowConfirm.cbc7720c.js";
 import "../../../Icon/index.f6e8d810.js";
-import "../../../modal/WindowBase.ed279350.js";
-import "../../../areas/components/index.29809e82.js";
-import "../../../areas/components/AreasAdmin/index.3e586e9b.js";
+import "../../../modal/WindowBase.b5e29758.js";
+import "../../../areas/components/index.6d863764.js";
+import "../../../areas/components/AreasAdmin/index.dbab59f1.js";
 import "../../../mui_extended/IconButton/index.1318a283.js";
 import "zustand";
-import "../../../areas/contexts/AreasContext/index.4f938baa.js";
+import "../../../areas/contexts/AreasContext/index.7406c20f.js";
 import "zustand/shallow";
-import "../../../areas/components/AreasContainer/index.15e4628d.js";
+import "../../../areas/components/AreasContainer/index.f3f921b9.js";
 import "react-grid-layout/css/styles.css";
 import "../../../../react-resizable.bb58c8fc.js";
-import "../../../areas/contexts/index.4cfa6ea9.js";
+import "../../../areas/contexts/index.e80d8f0f.js";
 import "../../../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 const WrapperStandarActions = styled("div")(({
   theme

package/components/DataGrid/{index.eb1bdc97.js → index.85390177.js}

@@ -9,31 +9,31 @@ import { voidFunction, useModuleDictionary, useModuleSkeleton, getPropertyByStri
 import { M as MenuActions } from "../mui_extended/MenuActions/index.1261168c.js";
 import { P as Pager, g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.984aac44.js";
 import { I as IconButton } from "../mui_extended/IconButton/index.1318a283.js";
-import { u as useModal } from "../../hooks/useModal/index.56c03c00.js";
+import { u as useModal } from "../../hooks/useModal/index.4454145e.js";
 import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.a81752ef.js";
 import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.d567aebb.js";
 import "../../react-draggable.0eef011c.js";
-import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.de10969f.js";
+import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.5a307e29.js";
 import "../Resizeable/index.8a442a8b.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { A as Actions$1 } from "../CommonActions/components/Actions/index.c06ea173.js";
+import { A as Actions$1 } from "../CommonActions/components/Actions/index.f0a3167b.js";
 import "react-hook-form";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.8406ed5b.js";
-import "../areas/components/index.29809e82.js";
-import "../areas/components/AreasAdmin/index.3e586e9b.js";
+import "../areas/components/index.6d863764.js";
+import "../areas/components/AreasAdmin/index.dbab59f1.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.4f938baa.js";
+import "../areas/contexts/AreasContext/index.7406c20f.js";
 import "zustand/shallow";
-import "../areas/components/AreasContainer/index.15e4628d.js";
+import "../areas/components/AreasContainer/index.f3f921b9.js";
 import "react-grid-layout/css/styles.css";
 import "../../react-resizable.bb58c8fc.js";
-import "../areas/contexts/index.4cfa6ea9.js";
+import "../areas/contexts/index.e80d8f0f.js";
 import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "@mui/lab";
-import "../modal/WindowConfirm.72de5ce8.js";
+import "../modal/WindowConfirm.cbc7720c.js";
 import "../Icon/index.f6e8d810.js";
-import { W as WindowBase } from "../modal/WindowBase.ed279350.js";
+import { W as WindowBase } from "../modal/WindowBase.b5e29758.js";
 import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.b3fb8a75.js";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
 import { C as ConcatenatedFormatter } from "../formatters/index.90a19f9f.js";

package/components/DynamicFilter/{index.17731fda.js → index.cddd7472.js}

@@ -27,25 +27,25 @@ import "../ErrorLabel/index.78553a1e.js";
 import "@mui/x-date-pickers";
 import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.7f1cbd85.js";
 import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
-import { R as RHFTextField } from "../hook-form/RHFTextField/index.57f138f7.js";
-import "../hook-form/RHFPeriod/index.47cf646d.js";
-import "../Period/index.89daad51.js";
-import { A as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.c06ea173.js";
-import "../../contexts/ModalContext/index.e94f0e72.js";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.bef7eced.js";
+import "../hook-form/RHFPeriod/index.5d2a2071.js";
+import "../Period/index.85fe764a.js";
+import { A as Actions, g as getCommonActionsDictionary } from "../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 "../Resizeable/index.8a442a8b.js";
-import "../modal/WindowConfirm.72de5ce8.js";
-import "../modal/WindowBase.ed279350.js";
-import "../areas/components/index.29809e82.js";
-import "../areas/components/AreasAdmin/index.3e586e9b.js";
+import "../modal/WindowConfirm.cbc7720c.js";
+import "../modal/WindowBase.b5e29758.js";
+import "../areas/components/index.6d863764.js";
+import "../areas/components/AreasAdmin/index.dbab59f1.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.4f938baa.js";
+import "../areas/contexts/AreasContext/index.7406c20f.js";
 import "zustand/shallow";
-import "../areas/components/AreasContainer/index.15e4628d.js";
+import "../areas/components/AreasContainer/index.f3f921b9.js";
 import "react-grid-layout/css/styles.css";
 import "../../react-resizable.bb58c8fc.js";
-import "../areas/contexts/index.4cfa6ea9.js";
+import "../areas/contexts/index.e80d8f0f.js";
 import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "lodash/isString";
 import "react-dropzone";

package/components/ModalDialog/{index.de10969f.js → index.5a307e29.js}

@@ -1,12 +1,12 @@
 import { Dialog, Paper } from "@mui/material";
 import { c as cjs } from "../../react-draggable.0eef011c.js";
-import { u as useModal } from "../../hooks/useModal/index.56c03c00.js";
+import { u as useModal } from "../../hooks/useModal/index.4454145e.js";
 import { styled } from "@mui/material/styles";
 import { a as getThemeVariantColor } from "../../utils/index.e882b264.js";
 import { R as ResizeableWindow } from "../Resizeable/index.8a442a8b.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.c06ea173.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.f0a3167b.js";
 const WrapperDialog = styled(Dialog)(() => ({}));
 const Container = styled("div")(({ theme }) => ({
   display: "flex",

package/components/ObjectLogs/{index.338656c6.js → index.1315af37.js}

@@ -1,36 +1,36 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useNetwork, useModuleDictionary, useEnvironment, usePaginate } from "@m4l/core";
 import { styled } from "@mui/material/styles";
-import { D as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.eb1bdc97.js";
+import { D as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.85390177.js";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
 import { Tooltip, IconButton } from "@mui/material";
 import { useHostTheme, useResponsiveDesktop } from "@m4l/graphics";
 import { R as ReactJson } from "../../react-json-view.57125fcf.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { u as useModal } from "../../hooks/useModal/index.56c03c00.js";
+import { u as useModal } from "../../hooks/useModal/index.4454145e.js";
 import { I as Icon } from "../Icon/index.f6e8d810.js";
 import "../../react-draggable.0eef011c.js";
-import "../ModalDialog/index.de10969f.js";
+import "../ModalDialog/index.5a307e29.js";
 import "../Resizeable/index.8a442a8b.js";
-import "../CommonActions/components/Actions/index.c06ea173.js";
+import "../CommonActions/components/Actions/index.f0a3167b.js";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.8406ed5b.js";
 import "react-hook-form";
-import "../areas/components/index.29809e82.js";
-import "../areas/components/AreasAdmin/index.3e586e9b.js";
+import "../areas/components/index.6d863764.js";
+import "../areas/components/AreasAdmin/index.dbab59f1.js";
 import "../mui_extended/IconButton/index.1318a283.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.4f938baa.js";
+import "../areas/contexts/AreasContext/index.7406c20f.js";
 import "zustand/shallow";
-import "../areas/components/AreasContainer/index.15e4628d.js";
+import "../areas/components/AreasContainer/index.f3f921b9.js";
 import "react-grid-layout/css/styles.css";
 import "../../react-resizable.bb58c8fc.js";
-import "../areas/contexts/index.4cfa6ea9.js";
+import "../areas/contexts/index.e80d8f0f.js";
 import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "@mui/lab";
-import "../modal/WindowConfirm.72de5ce8.js";
-import { W as WindowBase } from "../modal/WindowBase.ed279350.js";
-import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.17731fda.js";
+import "../modal/WindowConfirm.cbc7720c.js";
+import { W as WindowBase } from "../modal/WindowBase.b5e29758.js";
+import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.cddd7472.js";
 const Container$1 = styled("div")(() => ({
   height: "100%",
   width: "100%",

package/components/Period/{index.89daad51.js → index.85fe764a.js}

@@ -3,28 +3,28 @@ import { styled, Skeleton, Autocomplete, TextField } from "@mui/material";
 import { useMemo } from "react";
 import { I as Icon } from "../Icon/index.f6e8d810.js";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.c06ea173.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.f0a3167b.js";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.8406ed5b.js";
 import "react-hook-form";
-import "../../contexts/ModalContext/index.e94f0e72.js";
+import "../../contexts/ModalContext/index.3d92d9f9.js";
 import "../../react-draggable.0eef011c.js";
-import "../ModalDialog/index.de10969f.js";
+import "../ModalDialog/index.5a307e29.js";
 import "../Resizeable/index.8a442a8b.js";
 import "@m4l/graphics";
-import "../modal/WindowConfirm.72de5ce8.js";
+import "../modal/WindowConfirm.cbc7720c.js";
 import "@mui/material/styles";
-import "../modal/WindowBase.ed279350.js";
-import "../areas/components/index.29809e82.js";
-import "../areas/components/AreasAdmin/index.3e586e9b.js";
+import "../modal/WindowBase.b5e29758.js";
+import "../areas/components/index.6d863764.js";
+import "../areas/components/AreasAdmin/index.dbab59f1.js";
 import "../mui_extended/IconButton/index.1318a283.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.4f938baa.js";
+import "../areas/contexts/AreasContext/index.7406c20f.js";
 import "zustand/shallow";
-import "../areas/components/AreasContainer/index.15e4628d.js";
+import "../areas/components/AreasContainer/index.f3f921b9.js";
 import "react-grid-layout/css/styles.css";
 import "../../react-resizable.bb58c8fc.js";
-import "../areas/contexts/index.4cfa6ea9.js";
+import "../areas/contexts/index.e80d8f0f.js";
 import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "@mui/lab";
 const ContainerPeriod = styled("div")(({

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

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

package/components/areas/components/AreasAdmin/{index.3e586e9b.js → index.dbab59f1.js}

@@ -1,6 +1,6 @@
 import { styled } from "@mui/material/styles";
 import { I as IconButton } from "../../../mui_extended/IconButton/index.1318a283.js";
-import { u as useAreasStore } from "../../hooks/useArea/index.575c2abe.js";
+import { u as useAreasStore } from "../../hooks/useArea/index.7bdbbb79.js";
 import { useEnvironment } from "@m4l/core";
 import "@mui/material";
 import "../../../Icon/index.f6e8d810.js";
@@ -63,7 +63,6 @@ const AreaChip = (props) => {
   } = useAreasStore((state) => state.actions);
   const onClickDeleteArea = (e) => {
     e.stopPropagation();
-    console.log("onClickDeleteArea", e.cancelable, e.eventPhase);
     deleteArea(areaId);
   };
   return /* @__PURE__ */ jsxs(WrapperAreaChips, {
@@ -102,7 +101,6 @@ function AreasAdmin() {
   if (status !== "loaded") {
     return null;
   }
-  console.log("Render AreasAdmin", currentArea, status);
   return /* @__PURE__ */ jsxs(WrapperAreasAdmin, {
     id: "ContainerTabs",
     children: [areas.map((area) => /* @__PURE__ */ jsx(AreaChip, {

package/components/areas/components/AreasContainer/{index.15e4628d.js → index.f3f921b9.js}

@@ -1,9 +1,8 @@
 import { styled } from "@mui/material/styles";
-import { A as Area } from "../index.29809e82.js";
+import { A as Area } from "../index.6d863764.js";
 import "react-grid-layout/css/styles.css";
 import "../../../../react-resizable.bb58c8fc.js";
-import { u as useAreasStore } from "../../hooks/useArea/index.575c2abe.js";
-import { useEffect } from "react";
+import { u as useAreasStore } from "../../hooks/useArea/index.7bdbbb79.js";
 import { jsx } from "react/jsx-runtime";
 const ContainerAreas = styled("div")(({
   theme
@@ -19,13 +18,9 @@ function AreasContainer() {
   const areas = useAreasStore((state) => state.areas);
   const currentArea = useAreasStore((state) => state.currentArea);
   const status = useAreasStore((state) => state.status);
-  useEffect(() => {
-    console.log("useEffect AreasContainer");
-  }, []);
   if (status !== "loaded") {
     return null;
   }
-  console.log("Render AreasContainer", status, currentArea, areas);
   return /* @__PURE__ */ jsx(ContainerAreas, {
     id: "ContainerAreas",
     children: areas.map((area) => {

package/components/areas/components/GridLayout/{index.f38f5b74.js → index.9953146d.js}

@@ -1,61 +1,64 @@
 import { WidthProvider, Responsive } from "react-grid-layout";
-import { a as useAreaStore } from "../../hooks/useArea/index.575c2abe.js";
+import { a as useAreaStore } from "../../hooks/useArea/index.7bdbbb79.js";
 import { styled } from "@mui/material/styles";
-import { M as MemonizedWindowPopUp } from "../WindowPopUp/index.90566fca.js";
-import { M as MemonizedWindow, W as WindowModal } from "../Window/index.d1a59be4.js";
+import { M as MemonizedWindowPopUp } from "../WindowPopUp/index.90eb0348.js";
+import { M as MemonizedWindow, a as MemonizedWindowModal } from "../Window/index.e34225ae.js";
 import "react-grid-layout/css/styles.css";
 import "../../../../react-resizable.bb58c8fc.js";
 import { shallow } from "zustand/shallow";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { R as ROW_HEIGTH_GRIDLAYOUT, C as CONTAINER_PADDING_GRIDLAYOUT } from "../../contexts/AreaContext/index.f25f7180.js";
+import { jsxs, jsx } from "react/jsx-runtime";
 const WrapperPoups = styled("div")(() => ({
   zIndex: 1,
   " .react-draggable": {
     position: "absolute"
   }
 }));
+const WrapperGridLayout = styled("div", {
+  shouldForwardProp: (props) => props !== "isDesktop"
+})(({
+  isDesktop
+}) => ({
+  display: "flex",
+  flexDirection: isDesktop ? "row" : "column",
+  flexGrow: 1,
+  overflowY: "auto",
+  height: isDesktop ? "100%" : "unset",
+  width: isDesktop ? "unset" : "100%",
+  border: "1px dashed black"
+}));
 const ResponsiveGridLayout = WidthProvider(Responsive);
 const GridLayout = () => {
   const areaId = useAreaStore((state) => state.id);
+  const isDesktop = useAreaStore((state) => state.isDesktop);
   const gridLayouts = useAreaStore((state) => state.gridLayouts, shallow);
   const hashWindowsPopups = useAreaStore((state) => state.hashWindowsPopups, shallow);
   const hashWindowsLayouts = useAreaStore((state) => state.hashWindowsLayouts, shallow);
   const breakPointsLayouts = useAreaStore((state) => state.breakpointsLayouts, shallow);
   const windowsPopUps = useAreaStore((state) => state.windowsPopUps, shallow);
   const windowModal = useAreaStore((state) => state.windowModal, shallow);
+  const breakpoints = useAreaStore((state) => state.breakpoints, shallow);
+  const cols = useAreaStore((state) => state.cols, shallow);
   const {
-    onBreakpointsLayoutsChange: onBreakPointsLayoutsChange
+    onBreakpointsLayoutsChange
   } = useAreaStore((state) => state.actions);
   function onBreakpointChange(_newBreakpoint, _newCols) {
   }
-  console.log("Render GridLayout windowModal", windowModal);
-  return /* @__PURE__ */ jsxs(Fragment, {
+  return /* @__PURE__ */ jsxs(WrapperGridLayout, {
+    isDesktop,
+    className: `M4L_WrapperGridLayout_${isDesktop ? "desktop" : "mobile"} ${`M4L_WrapperGridLayout_${areaId}`}`,
     children: [/* @__PURE__ */ jsxs(ResponsiveGridLayout, {
       className: `M4L_GridLayout M4L_GridLayout_${areaId}`,
-      onLayoutChange: onBreakPointsLayoutsChange,
+      layouts: breakPointsLayouts,
+      onLayoutChange: onBreakpointsLayoutsChange,
       onBreakpointChange,
-      breakpoints: {
-        lg: 1200,
-        md: 996,
-        sm: 768,
-        xs: 480,
-        xxs: 0
-      },
-      cols: {
-        lg: 24,
-        md: 20,
-        sm: 12,
-        xs: 8,
-        xxs: 2
-      },
-      rowHeight: 100,
+      breakpoints,
+      cols,
+      rowHeight: ROW_HEIGTH_GRIDLAYOUT,
       margin: [5, 5],
-      containerPadding: [3, 3],
+      containerPadding: [CONTAINER_PADDING_GRIDLAYOUT, CONTAINER_PADDING_GRIDLAYOUT],
       draggableHandle: ".m4l_draggable_handle",
       compactType: "horizontal",
-      layouts: breakPointsLayouts,
-      onResizeStart: (item) => {
-        console.log("onResizestart", item);
-      },
       children: [/* @__PURE__ */ jsx(WrapperPoups, {
         id: "WrapperPoups",
         "data-grid": {
@@ -83,7 +86,6 @@ const GridLayout = () => {
       }, "none"), gridLayouts.map((l) => {
         if (hashWindowsLayouts[l.i]) {
           return /* @__PURE__ */ jsx("div", {
-            "data-grid": l,
             children: /* @__PURE__ */ jsx(MemonizedWindow, {
               ...hashWindowsLayouts[l.i]
             })
@@ -91,7 +93,7 @@ const GridLayout = () => {
         }
         return null;
       })]
-    }), windowModal && /* @__PURE__ */ jsx(WindowModal, {
+    }), windowModal && /* @__PURE__ */ jsx(MemonizedWindowModal, {
       ...windowModal
     })]
   });