@m4l/components 0.1.82 → 0.1.84

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

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare function AreasAdmin(): import("react").JSX.Element | null;
+import React from 'react';
+export declare function AreasAdmin(): React.JSX.Element | null;

package/components/areas/components/AreasAdmin/subcomponents/AreaChip/subcomponents/ChipActionsMobile/types.d.ts

@@ -1,4 +1,5 @@
+import { MouseEvent } from "react";
 export interface ChipActionsMobileProps {
-    handlerOpenPopoverEditArea: () => void;
+    handlerOpenPopoverEditArea: (e: MouseEvent | undefined) => void;
     areaId: string;
 }

package/components/areas/components/AreasAdmin/subcomponents/AreaChip/types.d.ts

@@ -1,6 +1,8 @@
+/// <reference types="react" />
 import { FieldValues } from 'react-hook-form';
 export interface AreaChipProps {
     areaId: string;
+    setAnchorMenuAreas?: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
     selected: boolean;
     disabled: boolean;
 }

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/ChipMobile/ChipMobile.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { AreaChipProps } from '../../../AreaChip/types';
+export declare const ChipMobile: {
+    (props: AreaChipProps): import("react").JSX.Element;
+    displayName: string;
+};

package/components/areas/components/AreasViewer/classes/index.d.ts

@@ -1,5 +1,5 @@
 import { AreasViewerClasses } from './types';
 import { OwnerState } from '../../../contexts/AreasContext/types';
 export declare const areasViewerClasses: AreasViewerClasses;
-export declare const useAreasViewerUtilityClasses: (ownerState: OwnerState) => Record<"root" | "windowLinearProgressBar" | "areaRoot" | "areasLoadingErrorRoot" | "areasLoadingErrorLoading" | "areasLoadingError" | "areasLoadingErrorIcon" | "areasLoadingErrorTitle" | "areasLoadingErrorDescription" | "areasLoadingErrorDivider" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "areasWindowPopUpList" | "windowRoot" | "windowRootContainer" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowHeaderCancelHandle" | "windowContent" | "windowLinearProgressRoot" | "windowPopupRoot" | "windowModalRoot" | "selectedWindow" | "windowToastiesContainer" | "windowToastiesContainerTostys" | "windowToastyMeesageButtonsContainer" | "windowToastyMessage" | "windowToastyButtonsContainer" | "windowToastyPin" | "windowToastyClose" | "panelWindowsRoot" | "panelWindowsButtonContainer" | "windowToastyContainer", string>;
+export declare const useAreasViewerUtilityClasses: (ownerState: OwnerState) => Record<"root" | "windowLinearProgressBar" | "areasPopoverListWindows" | "areaRoot" | "areasLoadingErrorRoot" | "areasLoadingErrorLoading" | "areasLoadingError" | "areasLoadingErrorIcon" | "areasLoadingErrorTitle" | "areasLoadingErrorDescription" | "areasLoadingErrorDivider" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "areasWindowPopUpList" | "windowRoot" | "windowRootContainer" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowHeaderCancelHandle" | "windowContent" | "windowLinearProgressRoot" | "windowPopupRoot" | "windowModalRoot" | "selectedWindow" | "windowToastiesContainer" | "windowToastiesContainerTostys" | "windowToastyMeesageButtonsContainer" | "windowToastyMessage" | "windowToastyButtonsContainer" | "windowToastyPin" | "windowToastyClose" | "panelWindowsRoot" | "panelWindowsButtonContainer" | "windowToastyContainer", string>;
 export declare type ViwerClasses = ReturnType<typeof useAreasViewerUtilityClasses>;

package/components/areas/components/AreasViewer/classes/types.d.ts

@@ -35,6 +35,7 @@ export interface AreasViewerClasses {
     windowToastyClose: string;
     panelWindowsRoot: string;
     panelWindowsButtonContainer: string;
+    areasPopoverListWindows: string;
     selected: string;
     selectedWindow: string;
     colapsed: string;

package/components/areas/components/AreasViewer/{index.51a52736.js → index.933e506b.js}

@@ -13,26 +13,26 @@ import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.66529246.js";
 import { shallow } from "zustand/shallow";
 import React__default, { useMemo, useState, useCallback, useEffect } from "react";
 import clsx from "clsx";
-import { u as useAreasStore } from "../../hooks/useAreas/index.b403f383.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.b8449343.js";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.a318316e.js";
-import "../../../mui_extended/Accordion/index.42cef1c7.js";
-import { I as Icon } from "../../../Icon/index.2414ff25.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.62aea582.js";
+import "../../../mui_extended/Accordion/index.46771196.js";
+import { I as Icon } from "../../../Icon/index.d1402200.js";
 import { T as Typography } from "../../../mui_extended/Typography/index.443590d6.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import "../../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
 import { B as Button } from "../../../mui_extended/Button/index.40af964e.js";
-import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
-import "../../../mui_extended/CheckBox.5f6c78b0.js";
+import "../../../mui_extended/CheckBox.38abccd8.js";
 import "../../../mui_extended/Badge/index.cad260fe.js";
 import "../../../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import { M as MenuActions, a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.f6bfdd40.js";
+import { M as MenuActions, a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.2493b1b1.js";
 import "../../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../../mui_extended/Pager/index.da26e9d4.js";
-import "../../../mui_extended/Tab/index.0d5f96e6.js";
+import "../../../mui_extended/Pager/index.a7f87c96.js";
+import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
+import "../../../mui_extended/Tab/index.756fe693.js";
 import "../../../mui_extended/Tooltip/index.5a795dcd.js";
 import { I as ICONS } from "../../icons.8266ccc8.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.afb7e3d9.js";
@@ -41,58 +41,58 @@ import debounce from "lodash/debounce";
 import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
 import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
-import "../../../../contexts/ModalContext/index.efc1135a.js";
+import "../../../../contexts/ModalContext/index.51da83de.js";
 import "../../../../contexts/RHFormContext/index.b9266262.js";
-import "../../../GridLayout/subcomponents/Griditem/index.01fc14c3.js";
-import "../../../GridLayout/index.76bccc4f.js";
-import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.e589d8bf.js";
-import { W as WidthProvider } from "../../../GridLayout/subcomponents/WidthProvider/index.50dafd87.js";
-import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.9820bc7f.js";
+import "../../../GridLayout/subcomponents/Griditem/index.6c68811f.js";
+import "../../../GridLayout/index.c55f16eb.js";
+import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.a6e33b8d.js";
+import { S as SizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index.bfa05dfa.js";
+import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.230d1584.js";
 import "../../../animate/index.4e9774a6.js";
 import "framer-motion";
 import "../../../animate/LoadingScreen/index.1d0c4307.js";
 import "../../../animate/PropagateLoader/index.7fab43c8.js";
-import "../AreasAdmin/index.f011d49d.js";
+import "../AreasAdmin/index.8ab71eb9.js";
 import "../../../ScrollBar/index.d4410cb5.js";
 import "zustand";
 import "react-hook-form";
-import "../../../hook-form/RHFAutocomplete/index.6edb51b1.js";
-import "../../../HelperText/index.6c3adb40.js";
-import "../../../hook-form/RHFAutocompleteAsync/index.c2ca5c66.js";
-import "../../../hook-form/RHFCheckbox/index.c6c3933b.js";
+import "../../../hook-form/RHFAutocomplete/index.d5afb409.js";
+import "../../../HelperText/index.a47ff233.js";
+import "../../../hook-form/RHFAutocompleteAsync/index.a4f00088.js";
+import "../../../hook-form/RHFCheckbox/index.9bf6edb0.js";
 import "@mui/x-date-pickers";
-import "../../../hook-form/RHFDateTime/index.3add0fa4.js";
-import "../../../hook-form/RHFTextField/index.20daa95e.js";
-import "../../../hook-form/RHFPeriod/index.72edef4d.js";
-import "../../../Period/index.4fd9df2a.js";
-import "../../../CommonActions/components/Actions/index.5abb6ac4.js";
+import "../../../hook-form/RHFDateTime/index.a2c1ed2c.js";
+import "../../../hook-form/RHFTextField/index.5a0fa776.js";
+import "../../../hook-form/RHFPeriod/index.b5204ce2.js";
+import "../../../Period/index.e129cdec.js";
+import "../../../CommonActions/components/Actions/index.e70e8779.js";
 import { c as cjs } from "../../../../react-draggable.7abb5d0a.js";
 import { R as ResizeableWindow } from "../../../Resizeable/index.9a9c79a4.js";
-import "../../../modal/index.e9fece72.js";
+import "../../../modal/index.6f281ef8.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../../../hook-form/RHFUpload/index.cc5adc15.js";
-import "../../../DataGrid/index.03ad08af.js";
+import "../../../hook-form/RHFUpload/index.b36539d6.js";
+import "../../../DataGrid/index.1d0a3dec.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import "../../../DataGrid/subcomponents/Actions/index.db54ec98.js";
+import "../../../DataGrid/subcomponents/Actions/index.a8fc9f6a.js";
 import "../../../DataGrid/subcomponents/editors/TextEditor/index.91380a55.js";
-import "../../../DynamicFilter/index.9b72180b.js";
+import "../../../DynamicFilter/index.912679cc.js";
 import "yup";
 import "lodash";
-import "../../../LanguagePopover/index.66e11634.js";
-import "../../../NavLink/index.5859e048.js";
+import "../../../LanguagePopover/index.807f5272.js";
+import "../../../NavLink/index.ff5a939c.js";
 import "../../../NoItemSelected/index.23dfc897.js";
-import "../../../ObjectLogs/index.51de2deb.js";
+import "../../../ObjectLogs/index.dc02715d.js";
 import "../../../../react-json-view.57125fcf.js";
-import "../../../PaperForm/index.f931dc02.js";
+import "../../../PaperForm/index.249c2404.js";
 import "../../../Page/index.4237c241.js";
-import "../../../PropertyValue/index.1b09f426.js";
+import "../../../PropertyValue/index.93e40532.js";
 import "../../../SplitLayout/index.9ef430f6.js";
 import "../../../../react-splitter-layout.8b1655c8.js";
-import "../../../SideBar/index.72564ef2.js";
-import "../../../AppBar/index.fadcefc6.js";
-import "../../../AccountPopover/index.0ba26726.js";
+import "../../../SideBar/index.327679a6.js";
+import "../../../AppBar/index.43f8b54f.js";
+import "../../../AccountPopover/index.bbeb9142.js";
 const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "root",
   "areaRoot",
@@ -131,6 +131,7 @@ const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "panelWindowsRoot",
   "panelWindowsButtonContainer",
   "containerLinearProgress",
+  "areasPopoverListWindows",
   "selected",
   "colapsed",
   "selectedWindow",
@@ -178,7 +179,8 @@ const useAreasViewerUtilityClasses = (ownerState) => {
     windowToastyPin: ["windowToastyPin"],
     windowToastyClose: ["windowToastyClose"],
     panelWindowsRoot: ["panelWindowsRoot"],
-    panelWindowsButtonContainer: ["panelWindowsButtonContainer"]
+    panelWindowsButtonContainer: ["panelWindowsButtonContainer"],
+    areasPopoverListWindows: ["areasPopoverListWindows"]
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_VIEWER_CLASS_NAME), {});
 };
@@ -602,6 +604,56 @@ const WindowPopUpsList = (props) => {
     return null;
   }
 };
+const PanelWindowPopUp = (props) => {
+  const {
+    currentAreaId
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const windowsLayouts = useAreasStore((state) => state.hashAreas[currentAreaId].layoutItemsIds.filter((li) => state.hashWindows[li].emergeType === "layout").map((lim) => {
+    const w = state.hashWindows[lim];
+    return {
+      i: w.windowId,
+      url_icon: w.url_icon,
+      title: w.title
+    };
+  }), shallow);
+  const theme = useTheme();
+  const {
+    maximizeLayout
+  } = useAreasStore((state) => state.areaActions);
+  const onTouched = (layoutId) => {
+    maximizeLayout(currentAreaId, layoutId);
+  };
+  const menuActions = windowsLayouts.map((element) => {
+    return {
+      onClick: () => onTouched(element.i),
+      label: element.title,
+      urlIcon: element.url_icon
+    };
+  });
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: menuActions.length > 0 ? /* @__PURE__ */ jsx(MenuActions, {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MODULE}`,
+      arrowType: "no-arrow",
+      marginTop: "12px!important",
+      marginLeft: "14px!important",
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      menuActions,
+      className: areasViewerClasses.areasPopoverListWindows,
+      menuActionSx: theme.components?.M4LAreasAdminMobilePopoverOptions?.styleOverrides
+    }) : null
+  });
+};
 function Header(props) {
   const {
     areaId,
@@ -620,6 +672,12 @@ function Header(props) {
       window2.fnQueryClose
     ];
   }, shallow);
+  const currentAreaId = useAreasStore((state) => state.currentAreaId, shallow);
+  const areas = useAreasStore((state) => state.areas.map((a) => ({
+    id: a,
+    name: state.hashAreas[a].name
+  })), shallow);
+  const currentArea = areas.find((area) => area.id === currentAreaId);
   const {
     saveModuleCookies,
     resetModuleCookies
@@ -711,7 +769,9 @@ function Header(props) {
             horizontal: "right"
           },
           menuActions
-        }), !colapsed && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(IconButton, {
+        }), maximizedId && emergeType === "layout" && currentArea ? /* @__PURE__ */ jsx(PanelWindowPopUp, {
+          currentAreaId: currentArea.id
+        }) : null, !colapsed && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(IconButton, {
           className: "m4l_draggableCancel",
           onClick: maxNormalize,
           "aria-label": "click",
@@ -1315,11 +1375,29 @@ const Window = (props) => {
   });
 };
 React__default.memo(Window);
-const ResponsiveGridLayout = WidthProvider(Responsive);
+const ResponsiveGridLayout = SizeProvider(Responsive);
 const AreaGridLayout = (props) => {
   const {
     areaId
   } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const ResizeHandle = React__default.forwardRef((props2, ref) => {
+    const {
+      handleAxis,
+      ...restProps
+    } = props2;
+    return /* @__PURE__ */ jsx("div", {
+      ref,
+      className: `react-resizable-handle react-resizable-handle-${handleAxis}`,
+      ...restProps,
+      children: /* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/control_size.svg`
+      })
+    });
+  });
   const hashLayoutItems = useAreasStore((state) => state.hashAreas[areaId].layoutItemsIds, shallow);
   const layouts = useAreasStore((state) => state.hashAreas[areaId].layouts, shallow);
   const breakpoints = useAreasStore((state) => state.hashAreas[areaId].breakpoints, shallow);
@@ -1347,9 +1425,7 @@ const AreaGridLayout = (props) => {
           return /* @__PURE__ */ jsx(Fragment, {});
         }
         if (p.type === "placeholder") {
-          return /* @__PURE__ */ jsx("div", {
-            children: "Place holder"
-          });
+          return /* @__PURE__ */ jsx("div", {});
         }
         console.debug("layoutItemRender window", hashLayoutItems, p.i, p.type);
         return /* @__PURE__ */ jsx(Window, {
@@ -1366,8 +1442,8 @@ const AreaGridLayout = (props) => {
         onContainerChange(areaId, e);
       },
       preventCollision: false,
-      verticalCompact: true,
-      maximizeId: maximizedId
+      maximizeId: maximizedId,
+      resizeHandle: /* @__PURE__ */ jsx(ResizeHandle, {})
     }
   );
 };

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import { GridLayoutProps } from './types';
+import React from 'react';
 /**
  * @description Retorna el componente GridLayout con las ventanas (layouts) y popups tomados del área de trabajo.
  * @returns JSX
  */
-export declare const AreaGridLayout: (props: GridLayoutProps) => import("react").JSX.Element;
+export declare const AreaGridLayout: (props: GridLayoutProps) => React.JSX.Element;

package/components/areas/components/{index.f496660b.js → index.9e48d8ff.js}

@@ -1,30 +1,30 @@
 import "react";
 import "@m4l/core";
 import "@mui/material";
-import "../../Icon/index.2414ff25.js";
+import "../../Icon/index.d1402200.js";
 import "clsx";
 import "react/jsx-runtime";
-import "../../mui_extended/IconButton/index.a318316e.js";
+import "../../mui_extended/IconButton/index.62aea582.js";
 import "@m4l/graphics";
 import "zustand";
-import "../contexts/AreasContext/index.9820bc7f.js";
-import "./AreasAdmin/index.f011d49d.js";
+import "../contexts/AreasContext/index.230d1584.js";
+import "./AreasAdmin/index.8ab71eb9.js";
 import "zustand/shallow";
 import "../../ScrollBar/index.d4410cb5.js";
-import "../../mui_extended/Accordion/index.42cef1c7.js";
+import "../../mui_extended/Accordion/index.46771196.js";
 import "../../mui_extended/Typography/index.443590d6.js";
 import "../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
 import "../../mui_extended/Button/index.40af964e.js";
-import "../../mui_extended/CheckBox.5f6c78b0.js";
+import "../../mui_extended/CheckBox.38abccd8.js";
 import "../../mui_extended/Badge/index.cad260fe.js";
 import "../../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import "../../mui_extended/MenuActions/index.f6bfdd40.js";
+import "../../mui_extended/MenuActions/index.2493b1b1.js";
 import "../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../mui_extended/Pager/index.da26e9d4.js";
-import "../../mui_extended/Tab/index.0d5f96e6.js";
+import "../../mui_extended/Pager/index.a7f87c96.js";
+import "../../mui_extended/Tab/index.756fe693.js";
 import "../../mui_extended/Tooltip/index.5a795dcd.js";
-import "./AreasViewer/index.51a52736.js";
+import "./AreasViewer/index.933e506b.js";
 import "../../LinearProgressIndeterminate/index.60dabc06.js";

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

@@ -22,6 +22,13 @@ export declare const NORMALIZED_COLS: {
     xs: number;
     xxs: number;
 };
+export declare const DEFAULT_LAYOUTS: {
+    lg: never[];
+    md: never[];
+    sm: never[];
+    xs: never[];
+    xxs: never[];
+};
 import { Layouts } from '../../../GridLayout/types';
 export declare const DEFAULT_WINDOW: Pick<WindowState, 'status' | 'moduleActions' | 'cookies' | 'loading' | 'toasties' | 'toastyCount' | 'hashToasties'>;
 export declare const DEFAULT_AREA: Omit<Area, 'id' | 'name' | 'loadWindows' | 'viewMode'>;

package/components/areas/contexts/AreasContext/{index.9820bc7f.js → index.230d1584.js}

@@ -5,15 +5,15 @@ import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
 import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, EmitEvents } from "@m4l/core";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.51a52736.js";
-import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.f011d49d.js";
+import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.933e506b.js";
+import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.8ab71eb9.js";
 import { c as createDynamicMFStore } from "../DynamicMFParmsContext/index.1607c78e.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.afb7e3d9.js";
 import "clsx";
-import "../../../GridLayout/subcomponents/Griditem/index.01fc14c3.js";
-import { z as isEqualLayouts } from "../../../GridLayout/index.76bccc4f.js";
+import "../../../GridLayout/subcomponents/Griditem/index.6c68811f.js";
+import { z as isEqualLayouts } from "../../../GridLayout/index.c55f16eb.js";
 import { jsx } from "react/jsx-runtime";
-import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints, c as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/index.e589d8bf.js";
+import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints, c as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/index.a6e33b8d.js";
 import { debounce, cloneDeep } from "lodash";
 const ROW_HEIGTH_GRIDLAYOUT = 20;
 const PADDING_GRIDLAYOUT = 3;
@@ -23,6 +23,7 @@ const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";
 const COOKIE_WINDOWS = "windows";
 const BREAKPOINT_SIZES = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 1 };
 const NORMALIZED_COLS = { lg: 64, md: 48, sm: 32, xs: 24, xxs: 1 };
+const DEFAULT_LAYOUTS = { lg: [], md: [], sm: [], xs: [], xxs: [] };
 const DEFAULT_WINDOW = {
   status: "init",
   moduleActions: [],
@@ -35,7 +36,7 @@ const DEFAULT_WINDOW = {
 const DEFAULT_AREA = {
   status: "init",
   zPopUpIndex: 0,
-  layouts: {},
+  layouts: DEFAULT_LAYOUTS,
   layoutItemsIds: [],
   currentLayoutId: "",
   currentPopUpId: "",
@@ -999,6 +1000,14 @@ const createAreasStore = (initProps) => {
               }
             });
           }
+        },
+        areaAdminActions: {
+          setFocus: (newValue) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, focus: newValue };
+              updateOwnerStateClasses(state);
+            });
+          }
         }
       })),
       { name: `Areas store` }
@@ -1037,7 +1046,8 @@ function AreasProvider(props) {
       ownerState: {
         status: "init",
         isMobile: !isDesktop,
-        isSkeleton
+        isSkeleton,
+        focus: false
       }
     });
     areasStoreRef.current?.getState().areasActions.init();

package/components/areas/contexts/AreasContext/types.d.ts

@@ -55,6 +55,11 @@ export declare type OwnerState = {
      *  "isSkeleton" indica si el componente está en skeleton.
      */
     isSkeleton: boolean;
+    /**
+     * focus: Estado de selección asignado por el usuario.
+     *
+     */
+    focus: boolean;
 };
 /**
  * @type
@@ -197,6 +202,9 @@ export interface AreasStateWithActions extends AreasState {
         pinToast: (windowId: string, toastyId: number) => void;
         setFnQueryClose: (windowId: string, fnQueryClose: () => void) => void;
     };
+    areaAdminActions: {
+        setFocus: (value: boolean) => void;
+    };
 }
 export declare type DefaultAreasStoreProps = Omit<AreasState, 'currentArea'>;
 export declare type InitialAreasStoreProps = Pick<AreasState, 'networkOperation' | 'loadAreasFromNetwork' | 'loadCookiesFromNetwork' | 'getLabel' | 'ownerState'> & Partial<DefaultAreasStoreProps>;

package/components/areas/contexts/{index.361acb6f.js → index.f494e241.js}

@@ -1,2 +1,2 @@
-import "./AreasContext/index.9820bc7f.js";
+import "./AreasContext/index.230d1584.js";
 import "./WindowToolsMFContext/index.8f3e2a04.js";

package/components/areas/hooks/useAreas/{index.b403f383.js → index.b8449343.js}

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { useStore } from "zustand";
-import { A as AreasContext } from "../../contexts/AreasContext/index.9820bc7f.js";
+import { A as AreasContext } from "../../contexts/AreasContext/index.230d1584.js";
 function useAreasStore(selector, equalityFn) {
   const context = useContext(AreasContext);
   if (!context)

package/components/areas/index.32db4fa7.js

@@ -0,0 +1,53 @@
+import { useEffect } from "react";
+import "@m4l/core";
+import "@mui/material";
+import "../Icon/index.d1402200.js";
+import "clsx";
+import "react/jsx-runtime";
+import "../mui_extended/IconButton/index.62aea582.js";
+import "@m4l/graphics";
+import "zustand";
+import "./contexts/AreasContext/index.230d1584.js";
+import "./components/AreasAdmin/index.8ab71eb9.js";
+import "zustand/shallow";
+import "../ScrollBar/index.d4410cb5.js";
+import "../mui_extended/Accordion/index.46771196.js";
+import "../mui_extended/Typography/index.443590d6.js";
+import "../mui_extended/Avatar/index.75e6ed57.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.40af964e.js";
+import "../mui_extended/CheckBox.38abccd8.js";
+import "../mui_extended/Badge/index.cad260fe.js";
+import "../Image/index.c18ebf5a.js";
+import "@mui/lab";
+import "../mui_extended/MenuActions/index.2493b1b1.js";
+import "../mui_extended/Popover/index.9f35d0eb.js";
+import "../mui_extended/Pager/index.a7f87c96.js";
+import "../mui_extended/Tab/index.756fe693.js";
+import "../mui_extended/Tooltip/index.5a795dcd.js";
+import "./components/AreasViewer/index.933e506b.js";
+import "../LinearProgressIndeterminate/index.60dabc06.js";
+import "./contexts/WindowToolsMFContext/index.8f3e2a04.js";
+import "./contexts/DynamicMFParmsContext/index.1607c78e.js";
+function useOnClickOutside(ref, handler, noRef) {
+  useEffect(() => {
+    const listener = (event) => {
+      const el = ref?.current;
+      const noEl = noRef?.current;
+      if (!el || el.contains(event.target) || noEl && noEl.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+}
+export {
+  useOnClickOutside as u
+};

package/components/areas/utils/useOnClickOutside/index.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from 'react';
+declare type AnyEvent = MouseEvent | TouchEvent;
+declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: AnyEvent) => void, noRef?: RefObject<T>): void;
+export default useOnClickOutside;

package/components/formatters/BooleanFormatter/{index.32de0803.js → index.b2f02bc4.js}

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { I as Icon } from "../../Icon/index.2414ff25.js";
+import { I as Icon } from "../../Icon/index.d1402200.js";
 import { W as WrapperComponent } from "../../WrapperComponent/index.5e872594.js";
 import { jsx } from "react/jsx-runtime";
 const BOOLEAN_FORMATTER_DICTIONARY_KEY = `boolean_formatter`;

package/components/formatters/{index.d16d2331.js → index.f9ad88b4.js}

@@ -2,11 +2,11 @@ import { W as WrapperComponent } from "../WrapperComponent/index.5e872594.js";
 import { jsx } from "react/jsx-runtime";
 import { useModuleDictionary } from "@m4l/core";
 import "react";
-import "../Icon/index.2414ff25.js";
+import "../Icon/index.d1402200.js";
 import "@mui/material";
 import "clsx";
 import "@m4l/graphics";
-import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY, b as BOOLEAN_FORMATTER_DICTIONARY_LABELS } from "./BooleanFormatter/index.32de0803.js";
+import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY, b as BOOLEAN_FORMATTER_DICTIONARY_LABELS } from "./BooleanFormatter/index.b2f02bc4.js";
 function getFormatConcatenated(values, separator) {
   const returnSymbol = "";
   if (values === null)

package/components/hook-form/RHFAutocomplete/{index.6edb51b1.js → index.d5afb409.js}

@@ -6,25 +6,25 @@ import { useMemo, useRef, useState, useEffect } from "react";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { T as Typography } from "../../mui_extended/Typography/index.443590d6.js";
-import { H as HelperText } from "../../HelperText/index.6c3adb40.js";
-import { I as IconButton } from "../../mui_extended/IconButton/index.a318316e.js";
+import { H as HelperText } from "../../HelperText/index.a47ff233.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.62aea582.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { styled } from "@mui/material/styles";
 import "clsx";
 import { unstable_composeClasses } from "@mui/base";
-import "../../Icon/index.2414ff25.js";
-import "../../mui_extended/Accordion/index.42cef1c7.js";
+import "../../Icon/index.d1402200.js";
+import "../../mui_extended/Accordion/index.46771196.js";
 import "../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
 import "../../mui_extended/Button/index.40af964e.js";
-import "../../mui_extended/CheckBox.5f6c78b0.js";
+import "../../mui_extended/CheckBox.38abccd8.js";
 import "../../mui_extended/Badge/index.cad260fe.js";
 import "@mui/lab";
-import "../../mui_extended/MenuActions/index.f6bfdd40.js";
+import "../../mui_extended/MenuActions/index.2493b1b1.js";
 import "../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../mui_extended/Pager/index.da26e9d4.js";
-import "../../mui_extended/Tab/index.0d5f96e6.js";
+import "../../mui_extended/Pager/index.a7f87c96.js";
+import "../../mui_extended/Tab/index.756fe693.js";
 import "../../mui_extended/Tooltip/index.5a795dcd.js";
 const AutocompleteRoot = styled("div")(({
   theme
@@ -252,6 +252,7 @@ function RHFAutocomplete(props) {
   };
   const classes = useUtilityClasses(ownerState);
   const theme = useTheme();
+  console.log("RHFAutocomplete");
   return /* @__PURE__ */ jsx(AutocompleteRoot, {
     className: classes.root,
     ...process.env.NODE_ENV !== "production" ? {

package/components/hook-form/RHFAutocompleteAsync/{index.c2ca5c66.js → index.a4f00088.js}

@@ -5,7 +5,7 @@ import { styled } from "@mui/material/styles";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.6edb51b1.js";
+import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.d5afb409.js";
 import { jsx } from "react/jsx-runtime";
 styled("div")(() => ({
   display: "flex",