@m4l/components 0.1.70 → 0.1.71

package/components/areas/components/{index.359c2b18.js → index.31f39977.js}

@@ -1,79 +1,81 @@
-import { I as IconButton } from "../../mui_extended/IconButton/index.57824447.js";
-import { u as useAreasStore } from "../hooks/useArea/index.2adbe001.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.7aab3e04.js";
+import { u as useAreasStore } from "../hooks/useArea/index.c135e0cf.js";
 import { useEnvironment, useModuleDictionary, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
 import { shallow } from "zustand/shallow";
-import { A as AREAS_VIEWER_CLASS_NAME, a as AREAS_ADMIN_CLASS_NAME, I as ICONS, g as getAreasDictionary } from "../index.8a58bcbf.js";
-import { I as Icon } from "../../Icon/index.caaed284.js";
+import { A as AREAS_VIEWER_CLASS_NAME, a as AREAS_ADMIN_CLASS_NAME, g as getAreasDictionary, I as ICONS, D as DICCTIONARY } from "../index.bd29b1db.js";
+import { I as Icon } from "../../Icon/index.6f2a5618.js";
+import { S as ScrollBar } from "../../ScrollBar/index.bbe48f4d.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React__default, { useMemo, useState, useRef, useCallback, useEffect } from "react";
+import React__default, { useState, useRef, useMemo, useCallback, useEffect } from "react";
 import { generateUtilityClasses, Skeleton, styled as styled$1, Typography as Typography$1, Dialog } from "@mui/material";
 import clsx from "clsx";
+import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender, useResizeObserver } from "@m4l/graphics";
 import "zustand";
-import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, C as CONTAINER_PADDING_GRIDLAYOUT, T as THROTTLE_RESIZE_TIME } from "../contexts/AreasContext/index.de8b4e78.js";
-import "../../mui_extended/Accordion/index.437bb3f8.js";
+import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, C as CONTAINER_PADDING_GRIDLAYOUT, T as THROTTLE_RESIZE_TIME } from "../contexts/AreasContext/index.e14d6799.js";
+import * as Yup from "yup";
+import "../../mui_extended/Accordion/index.44e96bb8.js";
 import "../../mui_extended/Avatar/index.fe06afd7.js";
 import "react-router-dom";
 import "@mui/material/Button";
-import { B as Button } from "../../mui_extended/Button/index.f8ce9ccd.js";
-import { I as Image } from "../../Image/index.82a6cd46.js";
+import { B as Button } from "../../mui_extended/Button/index.ec6525e0.js";
+import { I as Image } from "../../Image/index.1e3b7ff6.js";
 import "@mui/lab";
-import { T as Typography } from "../../mui_extended/Typography/index.b3c6e71c.js";
-import "../../mui_extended/Popover/index.226f247e.js";
-import { M as MenuActions } from "../../mui_extended/MenuActions/index.37043326.js";
-import "../../mui_extended/Pager/index.eeed3bd5.js";
+import { T as Typography } from "../../mui_extended/Typography/index.d5e0f69f.js";
+import { P as Popover } from "../../mui_extended/Popover/index.9f35d0eb.js";
+import { M as MenuActions } from "../../mui_extended/MenuActions/index.bff47c06.js";
+import "../../mui_extended/Pager/index.907d5801.js";
 import "../../mui_extended/Tab/index.e0653a0a.js";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.a2312a73.js";
+import { g as getComponentUtilityClass } from "../../../utils/index.ee16888d.js";
+import { D as DynamicMFParmsProvider } from "../contexts/DynamicMFParmsContext/index.1607c78e.js";
+import "../../../contexts/ModalContext/index.fca184e2.js";
+import { R as RHFormProvider } from "../../../contexts/RHFormContext/index.a7511399.js";
+import "react-hook-form";
+import "../../hook-form/RHFAutocomplete/index.c4ba070a.js";
+import "../../HelperText/index.d7b1b21a.js";
+import debounce from "lodash/debounce";
+import "../../hook-form/RHFAutocompleteAsync/index.a63f3704.js";
+import "../../hook-form/RHFCheckbox/index.9055f88d.js";
+import "@mui/x-date-pickers";
+import "../../hook-form/RHFDateTime/index.2cb94a66.js";
+import { R as RHFTextField } from "../../hook-form/RHFTextField/index.7ce2b16e.js";
+import "../../hook-form/RHFPeriod/index.14dcf762.js";
+import "../../Period/index.53ea0562.js";
+import { A as Actions } from "../../CommonActions/components/Actions/index.6b7d480a.js";
+import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/index.ff90f2c0.js";
+import { A as ActionIntro } from "../../CommonActions/components/ActionIntro/index.e31ab7e9.js";
+import { c as cjs } from "../../../react-draggable.29f78f6d.js";
+import "../../ModalDialog/index.598f9a86.js";
+import { R as ResizeableWindow } from "../../Resizeable/index.ff4ce7a4.js";
+import "../../modal/WindowConfirm.70bcbb69.js";
+import "../../modal/WindowBase.32d35d71.js";
 import { styled } from "@mui/material/styles";
-import { r as react_resizable_css } from "../../../react-resizable.8307e056.js";
+import { r as react_resizable_css } from "../../../react-resizable.baf54eb2.js";
 import { WidthProvider, Responsive } from "react-grid-layout";
 import { m } from "framer-motion";
 import "../../animate/LoadingScreen/index.1d0c4307.js";
 import "../../animate/PropagateLoader/index.be5b02c3.js";
 import { W as WindowToolsMFProvider } from "../contexts/WindowToolsMFContext/index.8f3e2a04.js";
-import { D as DynamicMFParmsProvider } from "../contexts/DynamicMFParmsContext/index.1607c78e.js";
-import "react-hook-form";
-import "../../hook-form/RHFAutocomplete/index.09c400c3.js";
-import "../../HelperText/index.a69e9509.js";
-import debounce from "lodash/debounce";
-import "../../hook-form/RHFAutocompleteAsync/index.e8acff04.js";
-import "../../hook-form/RHFCheckbox/index.70310f35.js";
-import "@mui/x-date-pickers";
-import "../../hook-form/RHFDateTime/index.7b815072.js";
-import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender, useResizeObserver } from "@m4l/graphics";
-import "../../hook-form/RHFTextField/index.d4c39859.js";
-import "../../hook-form/RHFPeriod/index.3c7d393c.js";
-import "../../Period/index.fbf074d3.js";
-import "../../CommonActions/components/Actions/index.154d7cb6.js";
-import "../../../contexts/ModalContext/index.8e3cd7a8.js";
-import { c as cjs } from "../../../react-draggable.0d64c8b1.js";
-import "../../ModalDialog/index.cdfd1ae8.js";
-import { R as ResizeableWindow } from "../../Resizeable/index.aafda79e.js";
-import "../../modal/WindowConfirm.e21763cb.js";
-import "../../modal/WindowBase.6a40a945.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../../hook-form/RHFUpload/index.31044674.js";
-import "../../DataGrid/index.2f4a0e64.js";
+import "../../hook-form/RHFUpload/index.c57a43f8.js";
+import "../../DataGrid/index.77ae9b4c.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import "../../DynamicFilter/index.789ab474.js";
-import "../../ScrollBar/index.bbe48f4d.js";
-import "yup";
+import "../../DynamicFilter/index.b2ba5167.js";
 import "@hookform/resolvers/yup";
-import "../../../contexts/RHFormContext/index.a7511399.js";
-import "../../LanguagePopover/index.5af28b9e.js";
-import "../../NavLink/index.251fcf0d.js";
-import "../../NoItemSelected/index.3b9d16e3.js";
-import "../../ObjectLogs/index.57ea68b3.js";
+import "../../LanguagePopover/index.310e9a3a.js";
+import "../../NavLink/index.ac3778af.js";
+import "../../NoItemSelected/index.3809e3d1.js";
+import "../../ObjectLogs/index.949d3595.js";
 import "../../../react-json-view.57125fcf.js";
-import "../../PaperForm/index.d2d492ea.js";
+import "../../PaperForm/index.cf8af08b.js";
 import "../../Page/index.4237c241.js";
 import "../../PropertyValue/index.dfcfe1ba.js";
 import "../../../react-splitter-layout.8b1655c8.js";
 import "../../SplitLayout/index.5a8355d8.js";
-import "../../SideBar/index.3bc6a634.js";
-import { D as DraggableWindow } from "../../../vendor.8edaef93.js";
+import "../../SideBar/index.4daafbab.js";
+import { D as DraggableWindow } from "../../../vendor.619c3533.js";
 import { L as LinearProgress } from "../../mui_extended/LinearProgress/index.c92b9ba9.js";
 import { v as varBounce } from "../../animate/variants/bounce.784aaaaa.js";
 import { throttle } from "lodash";
@@ -90,9 +92,11 @@ const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "windowContent",
   "windowPopupRoot",
   "windowModalRoot",
+  "windowRootContainer",
   "panelWindowsRoot",
   "panelWindowsButtonContainer",
   "selected",
+  "selectedWindow",
   "isMobile",
   "loading"
 ], AREAS_VIEWER_CLASS_NAME);
@@ -104,12 +108,14 @@ const useAreasViewerUtilityClasses = (ownerState) => {
     areaGridLayout: ["areaGridLayout"],
     areaGridLayoutPopupsContainer: ["areaGridLayoutPopupsContainer"],
     windowRoot: ["windowRoot"],
+    windowRootContainer: ["windowRootContainer"],
     windowHeader: ["windowHeader"],
     windowHeaderTitle: ["windowHeaderTitle"],
     windowHeaderMainActions: ["windowHeaderMainActions"],
     windowContent: ["windowContent"],
     windowPopupRoot: ["windowPopupRoot"],
     windowModalRoot: ["windowModalRoot"],
+    selectedWindow: ["selectedWindow"],
     panelWindowsRoot: ["panelWindowsRoot"],
     panelWindowsButtonContainer: ["panelWindowsButtonContainer"]
   };
@@ -120,10 +126,10 @@ const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
   "areaChipRoot",
   "areaChipTitle",
   "areaChipDeleteButton",
-  "areaChipEditButton",
   "areasAddButton",
   "areaContainerChips",
   "areaIconLayer",
+  "areaChipEditButton",
   "selected",
   "isMobile",
   "disabled"
@@ -141,6 +147,35 @@ const useAreasAdminUtilityClasses = (ownerState) => {
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_ADMIN_CLASS_NAME), {});
 };
+styled("div")(() => ({
+  display: "flex",
+  flexDirection: "row",
+  border: "1px solid gray",
+  "&.active": {
+    border: "1px solid red"
+  }
+}));
+styled("div")(({
+  theme
+}) => ({
+  height: "100%",
+  width: theme.spacing(1),
+  backgroundColor: theme.palette.background.default,
+  "&.active": {
+    backgroundColor: theme.palette.primary.main
+  }
+}));
+const EditAreaHeader = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "25px",
+  borderBottom: "1px solid",
+  borderColor: theme.palette.state.default,
+  justifyContent: "space-between",
+  alignItems: "center"
+}));
 const AreaChip = (props) => {
   const {
     areaId,
@@ -154,27 +189,102 @@ const AreaChip = (props) => {
   } = useEnvironment();
   const {
     deleteArea,
-    selectArea
+    selectArea,
+    editArea
   } = useAreasStore((state) => state.areasActions);
+  const [open, setOpen] = useState(false);
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const anchorRef = useRef(null);
   const onClickDeleteArea = (e) => {
     e.stopPropagation();
     deleteArea(areaId);
   };
+  const onSubmit = (data) => {
+    console.log("data areachip", data);
+    editArea(areaId, data.inputEditArea);
+    setOpen(false);
+  };
+  const handlerOpenPopover = () => {
+    setOpen(true);
+  };
+  const initialValues = {
+    inputEditArea: areaName
+  };
+  const validationSchema = useMemo(() => Yup.object().shape({
+    inputEditArea: Yup.string().required(getLabel(getAreasDictionary("validation_edit_area")))
+  }), [getLabel]);
   return /* @__PURE__ */ jsxs("div", {
     role: "presentation",
     className: clsx(areasAdminClasses.areaChipRoot, selected ? areasAdminClasses.selected : null, disabled ? areasAdminClasses.disabled : null),
     onClick: () => {
       selectArea(areaId);
     },
-    children: [/* @__PURE__ */ jsx("span", {
+    ref: anchorRef,
+    children: [/* @__PURE__ */ jsx("div", {
       className: areasAdminClasses.areaChipTitle,
       children: areaName
-    }), /* @__PURE__ */ jsx(IconButton, {
-      className: areasAdminClasses.areaChipDeleteButton,
-      src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
-      size: "small",
-      disabled,
-      onClick: onClickDeleteArea
+    }), /* @__PURE__ */ jsxs("div", {
+      style: {
+        display: "flex"
+      },
+      children: [/* @__PURE__ */ jsx(IconButton, {
+        className: areasAdminClasses.areaChipEditButton,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.EDIT_AREA}`,
+        size: "extraSmall",
+        onClick: handlerOpenPopover
+      }), /* @__PURE__ */ jsx(IconButton, {
+        className: areasAdminClasses.areaChipDeleteButton,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
+        size: "extraSmall",
+        onClick: onClickDeleteArea
+      })]
+    }), /* @__PURE__ */ jsx(Popover, {
+      arrowType: "top-center",
+      open,
+      anchorEl: anchorRef.current,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "center"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "center"
+      },
+      onClose: () => setOpen(false),
+      sx: {
+        mt: "10px"
+      },
+      children: /* @__PURE__ */ jsxs(RHFormProvider, {
+        onSubmit,
+        values: initialValues,
+        validationSchema,
+        children: [/* @__PURE__ */ jsxs(EditAreaHeader, {
+          children: [/* @__PURE__ */ jsx(Typography, {
+            children: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area))
+          }), /* @__PURE__ */ jsx(IconButton, {
+            src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CLOSE}`,
+            size: "small",
+            onClick: () => setOpen(false)
+          })]
+        }), /* @__PURE__ */ jsx(RHFTextField, {
+          name: "inputEditArea",
+          skeletonWidth: "70%",
+          skeletonHeight: "18px",
+          sx: {
+            mt: "20px"
+          }
+        }), /* @__PURE__ */ jsxs(Actions, {
+          children: [/* @__PURE__ */ jsx(ActionCancel, {
+            onClick: () => setOpen(false),
+            variant: "outlined",
+            skeletonWidth: "100%"
+          }), /* @__PURE__ */ jsx(ActionIntro, {
+            skeletonWidth: "100%"
+          })]
+        })]
+      })
     })]
   });
 };
@@ -188,12 +298,6 @@ const AreasAdminRoot = styled("div")`
         display: flex;
     }
 
-    & .${areasAdminClasses.areaChipRoot}.${areasAdminClasses.selected}::before {
-        content: "";
-        background-color: ${(props) => props.theme.palette.primary.main};
-        height: 100%;
-        width: 8px;
-    }
 
     ${(props) => props.theme.components?.M4LAreasAdmin?.styleOverrides}
 
@@ -225,12 +329,16 @@ function AreasAdmin() {
       })
     }), /* @__PURE__ */ jsx("div", {
       className: areasAdminClasses.areaContainerChips,
-      children: areas.map((area) => /* @__PURE__ */ jsx(AreaChip, {
-        areaId: area.id,
-        selected: area.id === currentArea,
-        areaName: area.name,
-        disabled: areasLength === 1
-      }, area.id))
+      children: /* @__PURE__ */ jsx(ScrollBar, {
+        children: /* @__PURE__ */ jsx(Fragment, {
+          children: areas.map((area) => /* @__PURE__ */ jsx(AreaChip, {
+            areaId: area.id,
+            selected: area.id === currentArea,
+            areaName: area.name,
+            disabled: areasLength === 1
+          }, area.id))
+        })
+      })
     }), /* @__PURE__ */ jsx(IconButton, {
       className: areasAdminClasses.areasAddButton,
       src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`,
@@ -309,11 +417,72 @@ const AreasViewerRoot = styled("div")`
     &.${areasViewerClasses.isMobile} .${areasViewerClasses.panelWindowsRoot} {
         flex-direction: row;
     }
-    & .${areasViewerClasses.panelWindowsButtonContainer}.${areasViewerClasses.selected} {
-        border: 1px solid red;
-    }
 
     // windowRoot
+    & .${areasViewerClasses.windowRoot} {
+        inset:0;
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        /* height: 100%; */
+        /* width: 100%; */
+        overflow: hidden;
+        border: 1px solid gray;
+
+        background-color: ${(props) => props.theme.palette.background.default};
+        padding: ${(props) => props.theme.spacing(0)};
+    }
+
+    & .${areasViewerClasses.windowRoot}.${areasViewerClasses.selected} {
+        border-top: 1px solid green;
+    }
+    // windowHeader
+    & .${areasViewerClasses.windowHeader} {
+        display: flex;
+        gap: 4px;
+        
+        align-items: center;
+        position: relative;
+
+        padding: 8px;
+        justify-content: end;
+        min-height: ${(props) => props.theme.spacing(5)} ;
+
+        border-bottom: 1px solid ${(props) => props.theme.palette.divider};
+        overflow: hidden;
+        cursor: move;
+        height: 60px;
+
+
+
+        > span: {
+            margin-right: 12px;
+        }
+    }
+    // windowHeaderTitle
+    & .${areasViewerClasses.windowHeaderTitle} {
+        width: 100%;
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        color: ${(props) => props.theme.palette.text.primary};
+        margin-left: 12px;
+        margin-right: 24px;
+        text-overflow: ellipsis;
+    }
+    // windowHeaderMainActions
+    & .${areasViewerClasses.windowHeaderMainActions} {
+        display: flex;
+
+        gap: 4px;
+    }
+
+    
+    // windowHeaderMainActions
+    & .${areasViewerClasses.windowContent} {
+        flex-grow: 1;
+        position: relative;
+    }
 
     // windowModalRoot
     & .${areasViewerClasses.windowModalRoot} {
@@ -774,7 +943,8 @@ function Header(props) {
 }
 const WrapperLinearProgress = styled$1("div")(() => ({
   width: "70%",
-  margin: "auto auto"
+  margin: "auto auto",
+  position: "absolute"
 }));
 const WrapperFallBackNotFound = styled$1("div")(({
   theme
@@ -1183,7 +1353,7 @@ const Window = (props) => {
   }, []);
   return /* @__PURE__ */ jsxs(WindowRoot, {
     role: "presentation",
-    className: clsx(areasViewerClasses.windowRoot, selected ? areasViewerClasses.selected : null, wd.loading ? areasViewerClasses.loading : null),
+    className: clsx(areasViewerClasses.windowRoot, selected ? areasViewerClasses.selectedWindow : null, wd.loading ? areasViewerClasses.loading : null),
     onMouseDown: onTouch,
     children: [/* @__PURE__ */ jsx(Header, {
       areaId,
@@ -1214,6 +1384,10 @@ const WindowPopUp = (props) => {
     windowProps,
     windowId
   } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
   const {
     selectWindowPopUp
   } = useAreasStore((store) => store.areaActions);
@@ -1240,6 +1414,13 @@ const WindowPopUp = (props) => {
       onResizeStart: () => {
         onTouch();
       },
+      handle: (resizeHandle, ref) => /* @__PURE__ */ jsx("div", {
+        ref,
+        children: /* @__PURE__ */ jsx(Icon, {
+          src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.RESIZE}`,
+          className: `custom-handle custom-handle-${resizeHandle}`
+        })
+      }, resizeHandle),
       children: /* @__PURE__ */ jsx(Window, {
         ...props
       })
@@ -1439,6 +1620,10 @@ const WindowModal = (props) => {
   const {
     onClose
   } = useAreasStore((state) => state.hashWindowsModals[windowId]);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
   const isDesktop = useResponsiveDesktop();
   const DragabblePaperComponent = (_props) => {
     return /* @__PURE__ */ jsx(cjs.exports, {
@@ -1447,6 +1632,14 @@ const WindowModal = (props) => {
       children: /* @__PURE__ */ jsx(ResizeableWindow, {
         width: props.windowProps?.width || 400,
         height: props.windowProps?.height || 300,
+        className: areasViewerClasses.windowModalRoot,
+        handle: (resizeHandle, ref) => /* @__PURE__ */ jsx("div", {
+          ref,
+          children: /* @__PURE__ */ jsx(Icon, {
+            src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.RESIZE}`,
+            className: `custom-handle custom-handle-${resizeHandle}`
+          })
+        }, resizeHandle),
         children: /* @__PURE__ */ jsx(Window, {
           ...props
         })

package/components/areas/contexts/AreasContext/{index.de8b4e78.js → index.e14d6799.js}

@@ -5,8 +5,8 @@ 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, a as useAreasAdminUtilityClasses, b as areasViewerClasses } from "../../components/index.359c2b18.js";
-import { g as getAreasDictionary } from "../../index.8a58bcbf.js";
+import { u as useAreasViewerUtilityClasses, a as useAreasAdminUtilityClasses, b as areasViewerClasses } from "../../components/index.31f39977.js";
+import { g as getAreasDictionary } from "../../index.bd29b1db.js";
 import { c as createDynamicMFStore } from "../DynamicMFParmsContext/index.1607c78e.js";
 import { debounce, cloneDeep } from "lodash";
 import { jsx } from "react/jsx-runtime";
@@ -260,6 +260,21 @@ const createAreasStore = (initProps) => {
               }
             }
           },
+          editArea: (idArea, newName) => {
+            set((state) => {
+              let index = state.areas.findIndex((element) => element.id === idArea);
+              if (index > -1 && state.areas[index].name !== newName) {
+                state.areas[index].name = newName;
+                state.networkOperation({
+                  method: "PATCH",
+                  endPoint: `areas/${idArea}`,
+                  data: { name: newName },
+                  toastSuccess: false,
+                  toastError: false
+                });
+              }
+            });
+          },
           addArea: () => {
             let newId = "";
             set((state) => {

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

@@ -131,6 +131,11 @@ export interface AreasStateWithActions extends AreasState {
          * @returns id del ara de trabajo
          */
         addArea: () => string;
+        /**
+         * @description Edita el nombre del área de trabajo y sincroniza los cambios en la API.
+         * @returns nombre del area de trabajo
+         */
+        editArea: (idArea: string, newName: string) => void;
         /**
          *
          * @param newAreaId Id de area a seleccionar

package/components/areas/contexts/{index.771827bb.js → index.5ba05323.js}

@@ -1,2 +1,2 @@
-import "./AreasContext/index.de8b4e78.js";
+import "./AreasContext/index.e14d6799.js";
 import "./WindowToolsMFContext/index.8f3e2a04.js";

package/components/areas/dictionary.d.ts

@@ -5,6 +5,8 @@ export declare const DICCTIONARY: {
     readonly label_new_area: "label_new_area";
     readonly label_persist_module_cookies: "label_persist_module_cookies";
     readonly label_reset_module_cookies: "label_reset_module_cookies";
+    readonly validation_edit_area: "validation_edit_area";
+    readonly label_edit_area: "label_edit_area";
 };
 export declare type TypeDictionary = typeof DICCTIONARY;
 export declare const getAreasDictionary: (key: keyof TypeDictionary) => string;

package/components/areas/hooks/useArea/{index.2adbe001.js → index.c135e0cf.js}

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

package/components/areas/icons.d.ts

@@ -8,5 +8,7 @@ export declare const ICONS: {
     ADD_AREA: string;
     LAYERS: string;
     EDIT_AREA: string;
+    CHECK: string;
+    RESIZE: string;
     VERSION: string;
 };

package/components/areas/{index.8a58bcbf.js → index.bd29b1db.js}

@@ -1,14 +1,16 @@
 import "react";
 import "@m4l/core";
 import "@mui/material";
-import "../Icon/index.caaed284.js";
-import "react/jsx-runtime";
-import "../mui_extended/IconButton/index.57824447.js";
+import "../Icon/index.6f2a5618.js";
 import "clsx";
+import "react/jsx-runtime";
+import "../mui_extended/IconButton/index.7aab3e04.js";
+import "@m4l/graphics";
 import "zustand";
-import "./contexts/AreasContext/index.de8b4e78.js";
-import "./components/index.359c2b18.js";
+import "./contexts/AreasContext/index.e14d6799.js";
+import "./components/index.31f39977.js";
 import "zustand/shallow";
+import "../ScrollBar/index.bbe48f4d.js";
 import "./contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "./contexts/DynamicMFParmsContext/index.1607c78e.js";
 const AREAS_VIEWER_CLASS_NAME = "M4LAreasViewer";
@@ -21,7 +23,9 @@ const LABEL_FILTER_BUTTON = "filter_tooltip";
 const DICCTIONARY = {
   label_new_area: "label_new_area",
   label_persist_module_cookies: "label_persist_module_cookies",
-  label_reset_module_cookies: "label_reset_module_cookies"
+  label_reset_module_cookies: "label_reset_module_cookies",
+  validation_edit_area: "validation_edit_area",
+  label_edit_area: "label_edit_area"
 };
 const getAreasDictionary = (key) => {
   return `${AREAS_DICTIONARY_ID}.${key}`;
@@ -35,7 +39,9 @@ const ICONS = {
   DELETE_AREA: "delete_area.svg",
   ADD_AREA: "add_area.svg",
   LAYERS: "layers.svg",
-  EDIT_AREA: "edit_area.svg",
+  EDIT_AREA: "edit.svg",
+  CHECK: "checkmarkInCircle.svg",
+  RESIZE: "controlSize.svg",
   VERSION: "version.svg"
 };
 export {

package/components/formatters/BooleanFormatter/{index.7eb0498c.js → index.99c7fe49.js}

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { I as Icon } from "../../Icon/index.caaed284.js";
+import { I as Icon } from "../../Icon/index.6f2a5618.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.f6b9ed01.js → index.1a92006b.js}

@@ -2,10 +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.caaed284.js";
+import "../Icon/index.6f2a5618.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.7eb0498c.js";
+import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY, b as BOOLEAN_FORMATTER_DICTIONARY_LABELS } from "./BooleanFormatter/index.99c7fe49.js";
 function getFormatConcatenated(values, separator) {
   const returnSymbol = "";
   if (values === null)