@m4l/components 0.1.72 → 0.1.74

package/components/SideBar/{index.90137dc5.js → index.ff7cbe91.js}

@@ -1,19 +1,19 @@
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useEnvironment } from "@m4l/core";
 import { createContext, useContext, useState } from "react";
-import { T as TEST_PROP_ID } from "../../vendor.d194839d.js";
-import { I as Image } from "../Image/index.a88f6341.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.590049b4.js";
+import { T as TEST_PROP_ID } from "../../vendor.99e0c856.js";
+import { I as Image } from "../Image/index.1af119da.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.822cdaac.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { styled as styled$1, generateUtilityClasses, ListItemText, ListItemButton, Collapse, useTheme, Skeleton, Drawer as Drawer$1 } from "@mui/material";
-import { I as Icon, A as ArrowIcon } from "../Icon/index.9839297c.js";
-import { T as Typography } from "../mui_extended/Typography/index.1659d310.js";
+import { I as Icon, A as ArrowIcon } from "../Icon/index.d214a74d.js";
+import { T as Typography } from "../mui_extended/Typography/index.e2d9e3f2.js";
 import clsx from "clsx";
 import { P as Popover } from "../mui_extended/Popover/index.9f35d0eb.js";
 import { S as ScrollBar } from "../ScrollBar/index.bbe48f4d.js";
 import { styled, alpha } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.8608d16c.js";
+import { g as getComponentUtilityClass } from "../../utils/index.aca80f3a.js";
 const SideBarRoot = styled("div")(({
   theme
 }) => ({

package/components/areas/components/AreasAdmin/{index.218451cf.js → index.1eda80b9.js}

@@ -1,62 +1,62 @@
-import { I as IconButton } from "../../../mui_extended/IconButton/index.590049b4.js";
-import { u as useAreasStore } from "../../hooks/useAreas/index.e868e3d9.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.822cdaac.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.7a37ede8.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useState, useRef, useMemo } from "react";
 import * as Yup from "yup";
 import { generateUtilityClasses } from "@mui/material";
-import { I as Icon } from "../../../Icon/index.9839297c.js";
+import { I as Icon } from "../../../Icon/index.d214a74d.js";
 import clsx from "clsx";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import "../../../mui_extended/Accordion/index.d420b666.js";
+import "../../../mui_extended/Accordion/index.09a89d3d.js";
 import "../../../mui_extended/Avatar/index.fe06afd7.js";
 import "react-router-dom";
 import "@mui/material/Button";
-import "../../../mui_extended/Button/index.1cd0c4e4.js";
-import "../../../Image/index.a88f6341.js";
+import "../../../mui_extended/Button/index.f9d54780.js";
+import "../../../Image/index.1af119da.js";
 import "@mui/lab";
-import { T as Typography } from "../../../mui_extended/Typography/index.1659d310.js";
+import { T as Typography } from "../../../mui_extended/Typography/index.e2d9e3f2.js";
 import { P as Popover } from "../../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../../mui_extended/MenuActions/index.f9eb6463.js";
-import "../../../mui_extended/Pager/index.c058b933.js";
+import "../../../mui_extended/MenuActions/index.03403529.js";
+import "../../../mui_extended/Pager/index.6428b07c.js";
 import "../../../mui_extended/Tab/index.e0653a0a.js";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index.8608d16c.js";
+import { g as getComponentUtilityClass } from "../../../../utils/index.aca80f3a.js";
 import { A as AREAS_ADMIN_CLASS_NAME } from "../../constants.66529246.js";
-import { I as ICONS } from "../../icons.b36751f2.js";
+import { I as ICONS } from "../../icons.3ec589d3.js";
 import "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
-import "../../../../contexts/ModalContext/index.92e80136.js";
+import "../../../../contexts/ModalContext/index.0484ca54.js";
 import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.a7511399.js";
 import "react-hook-form";
-import "../../../hook-form/RHFAutocomplete/index.b185393e.js";
-import "../../../HelperText/index.4c27bfc1.js";
+import "../../../hook-form/RHFAutocomplete/index.72437d8a.js";
+import "../../../HelperText/index.d449d124.js";
 import "lodash/debounce";
-import "../../../hook-form/RHFAutocompleteAsync/index.7a569646.js";
-import "../../../hook-form/RHFCheckbox/index.7a9ea396.js";
+import "../../../hook-form/RHFAutocompleteAsync/index.2a84f2b2.js";
+import "../../../hook-form/RHFCheckbox/index.6e6389e7.js";
 import "@mui/x-date-pickers";
-import "../../../hook-form/RHFDateTime/index.2fd1d56b.js";
+import "../../../hook-form/RHFDateTime/index.745b101b.js";
 import "@m4l/graphics";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.e1b50c30.js";
-import "../../../hook-form/RHFPeriod/index.df3d3f69.js";
-import "../../../Period/index.2ab4f2a1.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index.e190561b.js";
-import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.07ba5a89.js";
-import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.a454d0e4.js";
-import "../../../../react-draggable.21aa9ee1.js";
-import "../../../ModalDialog/index.75ddf6de.js";
-import "../../../Resizeable/index.086ff29e.js";
-import "../../../modal/WindowConfirm.b89712de.js";
-import "../../../modal/WindowBase.e5ec6128.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.ca7393a7.js";
+import "../../../hook-form/RHFPeriod/index.6969af99.js";
+import "../../../Period/index.b93d22fa.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.51b9c92a.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.fad4a0dc.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.0fb6efbe.js";
+import "../../../../react-draggable.17b4ec8a.js";
+import "../../../ModalDialog/index.6c35e653.js";
+import "../../../Resizeable/index.834a9144.js";
+import "../../../modal/WindowConfirm.7ec9dcd3.js";
+import "../../../modal/WindowBase.9b93578e.js";
 import { shallow } from "zustand/shallow";
 import { styled } from "@mui/material/styles";
 import { S as ScrollBar } from "../../../ScrollBar/index.bbe48f4d.js";
-import "../AreasViewer/index.51ee3d38.js";
-import "../../contexts/AreasContext/index.0b50676d.js";
+import "../AreasViewer/index.eddc9945.js";
+import "../../contexts/AreasContext/index.a88b73a6.js";
 import "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "zustand";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.e72db809.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../../../hook-form/RHFUpload/index.ec977af6.js";
+import "../../../hook-form/RHFUpload/index.d74ca00d.js";
 const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
   "root",
   "areaChipRoot",

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" | "areaRoot" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "windowRoot" | "windowRootContainer" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowContent" | "windowPopupRoot" | "windowModalRoot" | "selectedWindow" | "panelWindowsRoot" | "panelWindowsButtonContainer", string>;
+export declare const useAreasViewerUtilityClasses: (ownerState: OwnerState) => Record<"root" | "areaRoot" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "windowRoot" | "windowRootContainer" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowContent" | "windowPopupRoot" | "windowModalRoot" | "selectedWindow" | "windowToastiesContainer" | "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

@@ -4,8 +4,6 @@ export interface AreasViewerClasses {
     areaGridLayoutPanelContainer: string;
     areaGridLayout: string;
     areaGridLayoutPopupsContainer: string;
-    panelWindowsRoot: string;
-    panelWindowsButtonContainer: string;
     windowRoot: string;
     windowHeader: string;
     windowHeaderTitle: string;
@@ -14,9 +12,23 @@ export interface AreasViewerClasses {
     windowRootContainer: string;
     windowPopupRoot: string;
     windowModalRoot: string;
+    windowToastiesContainer: string;
+    windowToastyContainer: string;
+    windowToastyMeesageButtonsContainer: string;
+    windowToastyMessage: string;
+    windowToastyButtonsContainer: string;
+    windowToastyPin: string;
+    windowToastyClose: string;
+    panelWindowsRoot: string;
+    panelWindowsButtonContainer: string;
     selected: string;
     selectedWindow: string;
     isMobile: string;
     loading: string;
+    pinIn: string;
+    success: string;
+    info: string;
+    warning: string;
+    error: string;
 }
 export declare type AreasViewerClassesKey = keyof AreasViewerClasses;

package/components/areas/components/AreasViewer/{index.51ee3d38.js → index.eddc9945.js}

@@ -1,81 +1,81 @@
 import { styled } from "@mui/material/styles";
-import { r as react_resizable_css } from "../../../../react-resizable.e78d1cc8.js";
+import { r as react_resizable_css } from "../../../../react-resizable.ffd7c2aa.js";
 import { generateUtilityClasses, Skeleton, styled as styled$1, Typography as Typography$1, Dialog } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index.8608d16c.js";
+import { g as getComponentUtilityClass } from "../../../../utils/index.aca80f3a.js";
 import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.66529246.js";
 import React__default, { useMemo, useState, useRef, useCallback, useEffect } from "react";
 import { WidthProvider, Responsive } from "react-grid-layout";
 import { shallow } from "zustand/shallow";
-import { I as Icon } from "../../../Icon/index.9839297c.js";
+import { I as Icon } from "../../../Icon/index.d214a74d.js";
 import { m } from "framer-motion";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import "react-router-dom";
 import "../../../animate/LoadingScreen/index.1d0c4307.js";
 import "../../../animate/PropagateLoader/index.be5b02c3.js";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.590049b4.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.822cdaac.js";
 import clsx from "clsx";
 import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender, useResizeObserver } from "@m4l/graphics";
-import { u as useAreasStore } from "../../hooks/useAreas/index.e868e3d9.js";
-import "../AreasAdmin/index.218451cf.js";
-import { I as ICONS } from "../../icons.b36751f2.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.7a37ede8.js";
+import "../AreasAdmin/index.1eda80b9.js";
+import { I as ICONS } from "../../icons.3ec589d3.js";
 import "../../../ScrollBar/index.bbe48f4d.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.0b50676d.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.a88b73a6.js";
 import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "zustand";
 import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
 import "react-hook-form";
-import "../../../hook-form/RHFAutocomplete/index.b185393e.js";
-import { I as Image } from "../../../Image/index.a88f6341.js";
-import { T as Typography } from "../../../mui_extended/Typography/index.1659d310.js";
-import "../../../mui_extended/Accordion/index.d420b666.js";
+import "../../../hook-form/RHFAutocomplete/index.72437d8a.js";
+import { I as Image } from "../../../Image/index.1af119da.js";
+import { T as Typography } from "../../../mui_extended/Typography/index.e2d9e3f2.js";
+import "../../../mui_extended/Accordion/index.09a89d3d.js";
 import "../../../mui_extended/Avatar/index.fe06afd7.js";
 import "@mui/material/Button";
-import { B as Button } from "../../../mui_extended/Button/index.1cd0c4e4.js";
+import { B as Button } from "../../../mui_extended/Button/index.f9d54780.js";
 import "@mui/lab";
 import "../../../mui_extended/Popover/index.9f35d0eb.js";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.f9eb6463.js";
-import "../../../mui_extended/Pager/index.c058b933.js";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.03403529.js";
+import "../../../mui_extended/Pager/index.6428b07c.js";
 import "../../../mui_extended/Tab/index.e0653a0a.js";
-import "../../../HelperText/index.4c27bfc1.js";
+import "../../../HelperText/index.d449d124.js";
 import debounce from "lodash/debounce";
-import "../../../hook-form/RHFAutocompleteAsync/index.7a569646.js";
-import "../../../hook-form/RHFCheckbox/index.7a9ea396.js";
+import "../../../hook-form/RHFAutocompleteAsync/index.2a84f2b2.js";
+import "../../../hook-form/RHFCheckbox/index.6e6389e7.js";
 import "@mui/x-date-pickers";
-import "../../../hook-form/RHFDateTime/index.2fd1d56b.js";
-import "../../../hook-form/RHFTextField/index.e1b50c30.js";
-import "../../../hook-form/RHFPeriod/index.df3d3f69.js";
-import "../../../Period/index.2ab4f2a1.js";
-import "../../../CommonActions/components/Actions/index.e190561b.js";
-import "../../../../contexts/ModalContext/index.92e80136.js";
-import { c as cjs } from "../../../../react-draggable.21aa9ee1.js";
-import "../../../ModalDialog/index.75ddf6de.js";
-import { R as ResizeableWindow } from "../../../Resizeable/index.086ff29e.js";
-import "../../../modal/WindowConfirm.b89712de.js";
-import "../../../modal/WindowBase.e5ec6128.js";
+import "../../../hook-form/RHFDateTime/index.745b101b.js";
+import "../../../hook-form/RHFTextField/index.ca7393a7.js";
+import "../../../hook-form/RHFPeriod/index.6969af99.js";
+import "../../../Period/index.b93d22fa.js";
+import "../../../CommonActions/components/Actions/index.51b9c92a.js";
+import "../../../../contexts/ModalContext/index.0484ca54.js";
+import { c as cjs } from "../../../../react-draggable.17b4ec8a.js";
+import "../../../ModalDialog/index.6c35e653.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index.834a9144.js";
+import "../../../modal/WindowConfirm.7ec9dcd3.js";
+import "../../../modal/WindowBase.9b93578e.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../../../hook-form/RHFUpload/index.ec977af6.js";
-import "../../../DataGrid/index.549bd646.js";
+import "../../../hook-form/RHFUpload/index.d74ca00d.js";
+import "../../../DataGrid/index.dbae54dd.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import "../../../DynamicFilter/index.c1a3e2f1.js";
+import "../../../DynamicFilter/index.cb7fd1b6.js";
 import "yup";
 import "@hookform/resolvers/yup";
 import "../../../../contexts/RHFormContext/index.a7511399.js";
-import "../../../LanguagePopover/index.84c51cd3.js";
-import "../../../NavLink/index.e88494ef.js";
-import "../../../NoItemSelected/index.c3b67da1.js";
-import "../../../ObjectLogs/index.88bcf75a.js";
+import "../../../LanguagePopover/index.4fef99ac.js";
+import "../../../NavLink/index.9e56bcd3.js";
+import "../../../NoItemSelected/index.cd842b62.js";
+import "../../../ObjectLogs/index.e1a1b27c.js";
 import "../../../../react-json-view.57125fcf.js";
-import "../../../PaperForm/index.b141d583.js";
+import "../../../PaperForm/index.76bd3a6d.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.90137dc5.js";
-import { D as DraggableWindow } from "../../../../vendor.d194839d.js";
+import "../../../SideBar/index.ff7cbe91.js";
+import { D as DraggableWindow } from "../../../../vendor.99e0c856.js";
 import { g as getAreasDictionary } from "../../dictionary.e72db809.js";
 import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
 import { v as varBounce } from "../../../animate/variants/bounce.784aaaaa.js";
@@ -94,12 +94,24 @@ const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "windowPopupRoot",
   "windowModalRoot",
   "windowRootContainer",
+  "windowToastiesContainer",
+  "windowToastyContainer",
+  "windowToastyMeesageButtonsContainer",
+  "windowToastyMessage",
+  "windowToastyButtonsContainer",
+  "windowToastyPin",
+  "windowToastyClose",
   "panelWindowsRoot",
   "panelWindowsButtonContainer",
   "selected",
   "selectedWindow",
   "isMobile",
-  "loading"
+  "loading",
+  "pinIn",
+  "success",
+  "info",
+  "warning",
+  "error"
 ], AREAS_VIEWER_CLASS_NAME);
 const useAreasViewerUtilityClasses = (ownerState) => {
   const slots = {
@@ -117,6 +129,13 @@ const useAreasViewerUtilityClasses = (ownerState) => {
     windowPopupRoot: ["windowPopupRoot"],
     windowModalRoot: ["windowModalRoot"],
     selectedWindow: ["selectedWindow"],
+    windowToastiesContainer: ["windowToastiesContainer"],
+    windowToastyContainer: ["windowToastiesContainer"],
+    windowToastyMeesageButtonsContainer: ["windowToastyMeesageButtonsContainer"],
+    windowToastyMessage: ["windowToastyMessage"],
+    windowToastyButtonsContainer: ["windowToastyButtonsContainer"],
+    windowToastyPin: ["windowToastyPin"],
+    windowToastyClose: ["windowToastyClose"],
     panelWindowsRoot: ["panelWindowsRoot"],
     panelWindowsButtonContainer: ["panelWindowsButtonContainer"]
   };
@@ -195,7 +214,7 @@ const AreasViewerRoot = styled("div")`
 
     // windowRoot
     & .${areasViewerClasses.windowRoot} {
-        inset:0;
+        inset: 0;
         position: absolute;
         display: flex;
         flex-direction: column;
@@ -215,21 +234,19 @@ const AreasViewerRoot = styled("div")`
     & .${areasViewerClasses.windowHeader} {
         display: flex;
         gap: 4px;
-        
+
         align-items: center;
         position: relative;
 
         padding: 8px;
         justify-content: end;
-        min-height: ${(props) => props.theme.spacing(5)} ;
+        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;
         }
@@ -252,7 +269,6 @@ const AreasViewerRoot = styled("div")`
         gap: 4px;
     }
 
-    
     // windowHeaderMainActions
     & .${areasViewerClasses.windowContent} {
         flex-grow: 1;
@@ -994,7 +1010,10 @@ const Component = (props) => {
     ...windowTools,
     children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
       store: dynamicMFStore,
-      children: typeof component === "function" ? component() : component
+      children: typeof component === "function" ? component({
+        windowTools,
+        dynamicMFStore
+      }) : component
     })
   });
 };
@@ -1071,10 +1090,111 @@ const WindowRoot = styled("div")`
         padding: 16px;
     }
 
+    // windowToastiesContainer
+    & .${areasViewerClasses.windowToastiesContainer} {
+        padding: 4px;
+    }
+
+    // windowToastyContainer
+    & .${areasViewerClasses.windowToastyContainer} {
+        display: flex;
+        flex-direction: column;
+    }
+    // windowToastyContainer
+    & .${areasViewerClasses.windowToastyContainer}.${areasViewerClasses.success}  {
+    background-color: ${(props) => props.theme.palette.success.main}
+    }
+
+    // windowToastyMeesageButtonsContainer
+    & .${areasViewerClasses.windowToastyMeesageButtonsContainer} {
+        display: flex;
+
+    }
+    & .MuiLinearProgress-root {
+        width: 100%;
+    }
+
+    
+
+
+    // windowToastyMessage
+    & .${areasViewerClasses.windowToastyMessage} {
+        flex-grow: 1;
+    }
+
+        // windowToastyContainer
+    & .${areasViewerClasses.windowToastyPin}.${areasViewerClasses.pinIn} {
+        border: 1px solid red;
+    }
+
+
+
     ${(props) => props.theme.components?.M4LAreasViewerWindow?.styleOverrides}
 
     
 `;
+function Toasty(props) {
+  const {
+    windowId,
+    toastyId
+  } = props;
+  const toasty = useAreasStore((state) => state.hashWindows[windowId].hashToasties[toastyId], shallow);
+  console.log("percentExecuted", toasty.percentExecuted, toasty.timer);
+  const {
+    pinToasty,
+    closeToasty
+  } = useAreasStore((state) => state.windowActions, shallow);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(areasViewerClasses.windowToastyContainer, areasViewerClasses[toasty.type]),
+    children: [toasty.timer ? /* @__PURE__ */ jsx(LinearProgress, {
+      variant: "determinate",
+      value: toasty.percentExecuted
+    }) : null, /* @__PURE__ */ jsxs("div", {
+      className: areasViewerClasses.windowToastyMeesageButtonsContainer,
+      children: [/* @__PURE__ */ jsx("div", {
+        className: areasViewerClasses.windowToastyMessage,
+        children: toasty.message
+      }), /* @__PURE__ */ jsxs("div", {
+        className: areasViewerClasses.windowToastyButtonsContainer,
+        children: [/* @__PURE__ */ jsx(IconButton, {
+          className: clsx(areasViewerClasses.windowToastyPin, toasty.timer ? null : areasViewerClasses.pinIn),
+          onClick: () => {
+            pinToasty(windowId, toastyId);
+          },
+          src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.TOASTY_PIN}`
+        }), /* @__PURE__ */ jsx(IconButton, {
+          className: areasViewerClasses.windowToastyClose,
+          onClick: () => {
+            closeToasty(windowId, toastyId);
+          },
+          src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.TOASTY_CLOSE}`
+        })]
+      })]
+    })]
+  });
+}
+function Toasties(props) {
+  const {
+    windowId
+  } = props;
+  const tosties = useAreasStore((state) => state.hashWindows[windowId].toasties, shallow);
+  if (tosties.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", {
+    className: areasViewerClasses.windowToastiesContainer,
+    children: tosties.map((t) => {
+      return /* @__PURE__ */ jsx(Toasty, {
+        windowId,
+        toastyId: t.id
+      }, t.id);
+    })
+  });
+}
 const Window = (props) => {
   const {
     emergeType,
@@ -1090,7 +1210,8 @@ const Window = (props) => {
     getCookies,
     setCookie,
     close,
-    setLoading
+    setLoading,
+    toasty
   } = useAreasStore((state) => state.windowActions, shallow);
   const {
     selectWindowPopUp,
@@ -1121,6 +1242,9 @@ const Window = (props) => {
     close: () => close(windowId),
     setLoading: (isLoading) => {
       setLoading(windowId, isLoading);
+    },
+    toasty: (toastyOptions) => {
+      toasty(windowId, toastyOptions);
     }
   }), []);
   useEffect(() => {
@@ -1134,6 +1258,8 @@ const Window = (props) => {
       areaId,
       windowId,
       emergeType
+    }), /* @__PURE__ */ jsx(Toasties, {
+      windowId
     }), /* @__PURE__ */ jsx("div", {
       className: areasViewerClasses.windowContent,
       children: wd.status === "init" ? /* @__PURE__ */ jsx("div", {
@@ -1312,7 +1438,8 @@ const PanelWindows = (props) => {
           children: /* @__PURE__ */ jsx(IconButton, {
             src: hashWindowsLayouts[l.i].url_icon,
             size: "small",
-            onClick: () => onTouched(l.i)
+            onClick: () => onTouched(l.i),
+            tooltip: singleId !== l.i ? hashWindowsLayouts[l.i].title : void 0
           })
         }, l.i);
       })

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Toasties/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type ToastiesProps = {
+    windowId: string;
+};
+export declare function Toasties(props: ToastiesProps): import("react").JSX.Element | null;
+export {};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Toasties/subcomponents/Toasty/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type ToastyProps = {
+    windowId: string;
+    toastyId: number;
+};
+export declare function Toasty(props: ToastyProps): import("react").JSX.Element;
+export {};

package/components/areas/components/index.f3a98b6d.js

@@ -0,0 +1,14 @@
+import "react";
+import "@m4l/core";
+import "@mui/material";
+import "../../Icon/index.d214a74d.js";
+import "clsx";
+import "react/jsx-runtime";
+import "../../mui_extended/IconButton/index.822cdaac.js";
+import "@m4l/graphics";
+import "zustand";
+import "../contexts/AreasContext/index.a88b73a6.js";
+import "./AreasAdmin/index.1eda80b9.js";
+import "zustand/shallow";
+import "../../ScrollBar/index.bbe48f4d.js";
+import "./AreasViewer/index.eddc9945.js";

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

@@ -31,7 +31,7 @@ export declare const MAXIMIZED_COLS: {
     xs: number;
     xxs: number;
 };
-export declare const DEFAULT_WINDOW: Pick<WindowState, 'status' | 'moduleActions' | 'cookies' | 'loading' | 'tosties' | 'toastyCount'>;
+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'>;
 /**
  * @description Función de apoyo que crea un área de trabajo,
@@ -58,4 +58,4 @@ export declare function getDataFromResponse(data: any, state: WritableDraft<Area
     newHashWindowLayouts: HashWindowsByLayouts;
 };
 export declare function getCookiesContainer(data: any, containerId: string): Record<string, any>;
-export declare const removeToasty: (state: WritableDraft<WindowStateProps>, toastyId: number) => void;
+export declare const verifyRemoveToasty: (state: WritableDraft<WindowStateProps>, toastyId: number, forceRemove?: boolean | undefined) => void;