@m4l/components 9.2.59 → 9.2.60-13062025.beta.1

package/components/SideBar/types.d.ts

@@ -1,8 +1,9 @@
 import { Sizes } from '@m4l/styles';
-import { ContainerMenuItemsMainSlots, ContentComponentSlots, ContentGroupsSlots, HeaderSidebarSlots, SideBarDesktopSlots, SideBarFooterSlots, SideBarMobileSlots } from './slots/SideBarEnum';
+import { ContentComponentSlots, ContentGroupsSlots, HeaderSidebarSlots, SideBarDesktopSlots, SideBarFooterSlots, SideBarMobileSlots } from './slots/SideBarEnum';
 import { SIDEBAR_KEY_COMPONENT } from './constants';
 import { Theme } from '@mui/material/styles';
 import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { ReactElement } from 'react';
 /**
  * define la estructura de datos para un elemento de menú en la barra lateral.
  */
@@ -72,6 +73,10 @@ export interface SideBarProps {
      * Prefijo de la url de los iconos
      */
     urlIconPrefix?: string;
+    /**
+     * Promoción del sidebar, se renderiza en el footer del sidebar
+     */
+    promotion?: ReactElement;
 }
 /**
  * Interface que representa el estado de un elemento de menú en la barra lateral.
@@ -84,12 +89,11 @@ export interface IMenuDataWithState extends MenuDataType {
 /**
  * OwnerState con las propiedades de estado del sideBar
  */
-export type SideBarSlotsType = ContainerMenuItemsMainSlots | SideBarDesktopSlots | ContentGroupsSlots | HeaderSidebarSlots | SideBarFooterSlots | SideBarMobileSlots | ContentComponentSlots;
+export type SideBarSlotsType = SideBarDesktopSlots | ContentGroupsSlots | HeaderSidebarSlots | SideBarFooterSlots | SideBarMobileSlots | ContentComponentSlots;
 export type SideBarOwnerState = Pick<IMenuDataWithState, 'active' | 'itemInTreeActive'> & {
     [key: string]: any;
 };
 export type SideBarStyles = M4LOverridesStyleRules<SideBarSlotsType, typeof SIDEBAR_KEY_COMPONENT, Theme>;
-export type ContainerMenuItemsMainStyles = M4LOverridesStyleRules<ContainerMenuItemsMainSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type SideBarDesktopStyles = M4LOverridesStyleRules<SideBarDesktopSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type ContentGroupsStyles = M4LOverridesStyleRules<ContentGroupsSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type HeaderSidebarStyles = M4LOverridesStyleRules<HeaderSidebarSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;

package/components/WindowBase/WindowBase.js

@@ -26,6 +26,7 @@ const WindowBase = (props) => {
     onMouseDown,
     editionInfo,
     type = "layout",
+    collapsed,
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -35,7 +36,8 @@ const WindowBase = (props) => {
     variant: computedVariant,
     size: currentSize,
     type,
-    maximized
+    maximized,
+    collapsed
   };
   return /* @__PURE__ */ jsx(AppearanceComponentProvider, { defaultSize: currentSize, children: /* @__PURE__ */ jsxs(
     WindowBaseStyled,
@@ -55,6 +57,7 @@ const WindowBase = (props) => {
             variant,
             selected,
             maximized,
+            collapsed,
             onClose,
             type,
             ...other

package/components/WindowBase/WindowBase.styles.js

@@ -1,4 +1,4 @@
-import { alpha } from "@mui/material";
+import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
 import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const windowBaseStyles = {
   /**
@@ -64,7 +64,10 @@ const windowBaseStyles = {
     overflow: "auto",
     width: "100%",
     height: "100%",
-    zIndex: 1
+    zIndex: 1,
+    ...ownerState?.collapsed && !ownerState?.maximized && {
+      display: "none"
+    }
   }),
   /**
    * Styles for the header of the window base component.
@@ -99,8 +102,8 @@ const windowBaseStyles = {
         )
       },
       borderBottom: "1px solid #ffffff00",
-      ...ownerState?.selected && ownerState?.type === "layout" && ownerState?.variant === "outlined" ? {
-        background: `linear-gradient(to right, ${alpha(theme.palette.primary.opacity, 0.04)}, ${alpha(theme.palette.primary.opacity, 0)});`,
+      ...ownerState?.selected && ownerState?.type === "layout" && ownerState?.variant === "outlined" && !ownerState?.maximized ? {
+        background: `linear-gradient(to right, ${theme.vars.palette.primary.opacity}, #ffffff00);`,
         "&::before": {
           content: '""',
           position: "absolute",
@@ -108,7 +111,7 @@ const windowBaseStyles = {
           left: 0,
           width: "100%",
           height: "1px",
-          background: `linear-gradient(to left, ${alpha(theme.palette.primary.opacity, 0.06)}, ${alpha(theme.palette.primary.opacity, 0)});`
+          background: `linear-gradient(to left, ${theme.vars.palette.primary.opacityGradient2}, #ffffff00);`
         }
       } : {
         background: "transparent",
@@ -145,7 +148,16 @@ const windowBaseStyles = {
     textOverflow: "ellipsis",
     paddingLeft: theme.vars.size.baseSpacings.sp2,
     userSelect: "none",
-    cursor: "all-scroll"
+    cursor: "all-scroll",
+    ...ownerState?.maximized && {
+      "&&&": {
+        ...getTypographyStyles(
+          theme.generalSettings.isMobile,
+          ownerState?.size || "small",
+          "paragraphDens"
+        )
+      }
+    }
   }),
   /**
    * Styles for the subtitle container of the header of the window base component.
@@ -232,6 +244,9 @@ const windowBaseStyles = {
       marginRight: theme.vars.size.baseSpacings.sp1,
       marginBottom: ownerState?.type === "layout" ? "auto!important" : "unset!important",
       "&.collapse-toggle": {
+        ...ownerState?.maximized && {
+          display: "none"
+        },
         "&:hover": {
           backgroundColor: `${theme.vars.palette.chips.orange.contained.backgroundColor} !important`,
           "& .M4LIcon-icon": {
@@ -246,16 +261,19 @@ const windowBaseStyles = {
         }
       },
       "&.expand-toggle": {
+        ...ownerState?.collapsed && {
+          display: "none"
+        },
         "&:hover": {
-          backgroundColor: `${theme.vars.palette.chips.info.contained.backgroundColor} !important`,
+          backgroundColor: `${theme.vars.palette.chips.forest.contained.backgroundColor} !important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${theme.vars.palette.chips.info.contained.backgroundColorTone} !important`
+            backgroundColor: `${theme.vars.palette.chips.forest.contained.backgroundColorTone} !important`
           }
         },
         "&:active": {
-          backgroundColor: `${theme.vars.palette.chips.info.contained.backgroundHover} !important`,
+          backgroundColor: `${theme.vars.palette.chips.forest.contained.backgroundHover} !important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${theme.vars.palette.chips.info.contained.backgroundColorTone} !important`
+            backgroundColor: `${theme.vars.palette.chips.forest.contained.backgroundColorTone} !important`
           }
         }
       },
@@ -278,7 +296,7 @@ const windowBaseStyles = {
       }
     },
     "& .window-actions:first-child": {
-      marginLeft: `${theme.vars.size.baseSpacings.sp2} !important`
+      marginLeft: `${theme.vars.size.baseSpacings.sp4} !important`
     }
   }),
   /**
@@ -310,6 +328,9 @@ const windowBaseStyles = {
       )
     } : {
       height: "auto!important"
+    },
+    ...ownerState?.collapsed && {
+      display: "none"
     }
   }),
   /**
@@ -326,11 +347,15 @@ const windowBaseStyles = {
     display: "flex",
     alignItems: "center",
     flexDirection: "row",
-    justifyContent: "flex-end",
+    justifyContent: "flex-start",
     alignSelf: "stretch",
     gap: theme.vars.size.baseSpacings.sp2,
-    paddingRight: theme.vars.size.baseSpacings.sp3,
     color: theme.vars.palette.text.secondary,
+    zIndex: 1,
+    paddingTop: theme.vars.size.baseSpacings.sp5,
+    paddingBottom: 0,
+    paddingLeft: theme.vars.size.baseSpacings.sp5,
+    paddingRight: theme.vars.size.baseSpacings.sp5,
     "& > span": {
       whiteSpace: "nowrap",
       overflow: "hidden",
@@ -355,6 +380,16 @@ const windowBaseStyles = {
       top: "20px !important",
       right: "24px !important"
     }
+  }),
+  /**
+   * Styles for the container of the left actions of the window base component.
+   */
+  containerLeftActions: ({ theme, ownerState }) => ({
+    display: "flex",
+    gap: theme.vars.size.baseSpacings.sp1,
+    ...ownerState?.collapsed && {
+      display: "none"
+    }
   })
 };
 export {

package/components/WindowBase/contexts/WindowToolsMFContext/types.d.ts

@@ -64,6 +64,16 @@ export interface WindowToolsMF {
      * @param {string} title Titulo que se visulizará en la ventana del módulo
      */
     setWindowTitle: (title: string) => void;
+    /**
+     * Método para setear el subtitulo de la ventana y que pueda cambiar de idioma
+     * @param {string} subtitle Subtitulo que se visulizará en la ventana del módulo
+     */
+    setWindowSubTitle: (subtitle: string) => void;
+    /**
+     * Método para setear la información de edición de la ventana y que pueda cambiar de idioma
+     * @param {string} editionInfo Información de edición que se visulizará en la ventana del módulo
+     */
+    setWindowEditionInfo: (editionInfo: string) => void;
 }
 /**
  * Props del componente WindowToolsMFProvider que incluyen las herramientas de ventana proporcionadas por la interfaz WindowToolsMF.

package/components/WindowBase/hooks/useDynamicMFParameters/index.js

@@ -16,6 +16,6 @@ function useDynamicMFParametersStore(selector, equalityFn) {
   return useStore(store, selector, equalityFn);
 }
 export {
-  useDynamicMFParameters as a,
-  useDynamicMFParametersStore as u
+  useDynamicMFParametersStore as a,
+  useDynamicMFParameters as u
 };

package/components/WindowBase/slots/WindowBaseEnum.d.ts

@@ -13,5 +13,6 @@ export declare enum WindowBaseSlots {
     linearProgressIndeterminate = "linearProgressIndeterminate",
     contentEditionInfo = "contentEditionInfo",
     windowContainerComponent = "windowContainerComponent",
-    toastContainer = "toastContainer"
+    toastContainer = "toastContainer",
+    containerLeftActions = "containerLeftActions"
 }

package/components/WindowBase/slots/WindowBaseEnum.js

@@ -14,6 +14,7 @@ var WindowBaseSlots = /* @__PURE__ */ ((WindowBaseSlots2) => {
   WindowBaseSlots2["contentEditionInfo"] = "contentEditionInfo";
   WindowBaseSlots2["windowContainerComponent"] = "windowContainerComponent";
   WindowBaseSlots2["toastContainer"] = "toastContainer";
+  WindowBaseSlots2["containerLeftActions"] = "containerLeftActions";
   return WindowBaseSlots2;
 })(WindowBaseSlots || {});
 export {

package/components/WindowBase/slots/WindowBaseSlots.d.ts

@@ -80,3 +80,6 @@ export declare const WindowContainerComponentStyled: import('@emotion/styled').S
 export declare const ToastContainerStyled: import('@emotion/styled').StyledComponent<Pick<import('../../ToastContainer/types').ToastContainerProps, keyof import('../../ToastContainer/types').ToastContainerProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: any;
 }, {}, {}>;
+export declare const ContainerLeftActionsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/WindowBase/slots/WindowBaseSlots.js

@@ -67,6 +67,10 @@ const ToastContainerStyled = styled(ToastContainer, {
   name: WINDOW_BASE_KEY_COMPONENT,
   slot: WindowBaseSlots.toastContainer
 })(windowBaseStyles?.toastContainer);
+const ContainerLeftActionsStyled = styled("div", {
+  name: WINDOW_BASE_KEY_COMPONENT,
+  slot: WindowBaseSlots.containerLeftActions
+})(windowBaseStyles?.containerLeftActions);
 export {
   ContentWindowStyled as C,
   HeaderWindowComponentStyled as H,
@@ -82,5 +86,6 @@ export {
   HeaderContentStyled as c,
   ContainerTitleSubtitleStyled as d,
   TitleWindowStyled as e,
-  IconsWrapperStyled as f
+  IconsWrapperStyled as f,
+  ContainerLeftActionsStyled as g
 };

package/components/WindowBase/subcomponents/Header/HeaderWindowBase.js

@@ -7,7 +7,7 @@ import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js"
 import { deepEqual } from "fast-equals";
 import { useFormatter } from "@m4l/graphics";
 import { u as useButtonActions } from "./useButtonActions.js";
-import { H as HeaderWindowComponentStyled, c as HeaderContentStyled, I as IconWindowStyled, d as ContainerTitleSubtitleStyled, e as TitleWindowStyled, P as PointIconStyled, S as SubtitleWindowStyled, f as IconsWrapperStyled, M as MenuActionsWindowsStyled } from "../../slots/WindowBaseSlots.js";
+import { H as HeaderWindowComponentStyled, c as HeaderContentStyled, I as IconWindowStyled, d as ContainerTitleSubtitleStyled, e as TitleWindowStyled, P as PointIconStyled, S as SubtitleWindowStyled, f as IconsWrapperStyled, g as ContainerLeftActionsStyled, M as MenuActionsWindowsStyled } from "../../slots/WindowBaseSlots.js";
 const HeaderWindowBase = (props) => {
   const {
     title,
@@ -21,6 +21,7 @@ const HeaderWindowBase = (props) => {
     buildTime,
     variant,
     actions = [],
+    collapsed,
     type
   } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -99,7 +100,8 @@ const HeaderWindowBase = (props) => {
     maximized,
     variant,
     size,
-    type
+    type,
+    collapsed
   };
   const IconButtonLeftActions = useButtonActions(leftActions);
   const IconButtonRightActions = useButtonActions(rightActions);
@@ -126,7 +128,7 @@ const HeaderWindowBase = (props) => {
         className: dragResizeWindowRNDClasses.draggableCancel,
         ownerState,
         children: [
-          IconButtonLeftActions,
+          /* @__PURE__ */ jsx(ContainerLeftActionsStyled, { ownerState: { collapsed }, children: IconButtonLeftActions }),
           menuActions.length > 0 && /* @__PURE__ */ jsx(
             MenuActionsWindowsStyled,
             {

package/components/WindowBase/subcomponents/Header/useButtonActions.js

@@ -14,7 +14,8 @@ const useButtonActions = (actions) => {
           onClick: groupAction.onClick || (() => {
           }),
           color: groupAction.color,
-          className: action.className
+          className: action.className,
+          placement: action.placement
         },
         groupAction.key
       )) }, action.key);
@@ -27,7 +28,8 @@ const useButtonActions = (actions) => {
         disabled: action.disabled,
         onClick: action.onClick || (() => {
         }),
-        className: action.className
+        className: action.className,
+        placement: action.placement
       },
       action.key
     );

package/components/WindowBase/subcomponents/MemoizedIconButton/MemoizedIconButton.d.ts

@@ -6,5 +6,5 @@ import { MemoizedIconButtonProps } from './types';
  * This component renders an `IconButton` with an icon and tooltip.
  * It is memoized to avoid unnecessary re-renders when the props do not change.
  */
-declare const MemoizedIconButton: React.MemoExoticComponent<({ iconUrl, label, disabled, onClick, color, className, selected }: MemoizedIconButtonProps) => import("react/jsx-runtime").JSX.Element>;
+declare const MemoizedIconButton: React.MemoExoticComponent<({ iconUrl, label, disabled, onClick, color, className, selected, placement }: MemoizedIconButtonProps) => import("react/jsx-runtime").JSX.Element>;
 export default MemoizedIconButton;

package/components/WindowBase/subcomponents/MemoizedIconButton/MemoizedIconButton.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
 const MemoizedIconButton = React.memo(
-  ({ iconUrl, label, disabled, onClick, color, className, selected }) => /* @__PURE__ */ jsx(IconButton, { role: "button", "aria-label": label, tooltip: label, icon: iconUrl, disabled, onClick, color, className, selected })
+  ({ iconUrl, label, disabled, onClick, color, className, selected, placement }) => /* @__PURE__ */ jsx(IconButton, { role: "button", "aria-label": label, tooltip: label, icon: iconUrl, disabled, onClick, color, className, selected, placement })
 );
 export {
   MemoizedIconButton as M

package/components/WindowBase/subcomponents/MemoizedIconButton/types.d.ts

@@ -1,3 +1,4 @@
+import { TooltipProps } from '../../../mui_extended/Tooltip/types';
 import { IconButtonProps } from '../../../mui_extended/IconButton/types';
 /**
  * Props for the `MemoizedIconButton` component.
@@ -31,4 +32,8 @@ export interface MemoizedIconButtonProps {
      * Whether the button is selected.
      */
     selected?: boolean;
+    /**
+     * Whether the button is collapsed.
+     */
+    placement?: TooltipProps['placement'];
 }

package/components/WindowBase/types.d.ts

@@ -6,6 +6,7 @@ import { Sizes } from '@m4l/styles';
 import { MenuItemAction } from '../MenuActions/types';
 import { M4LOverridesStyleRules } from '../../@types/augmentations';
 import { EmergeType } from '../areas/types';
+import { TooltipProps } from '../mui_extended/Tooltip/types';
 /**
  * Opciones para la ventana.
  */
@@ -78,6 +79,10 @@ export type WindowBaseModuleAction = Omit<ModuleActionMenuItem, 'visibility'> |
 export type WindowBaseAction = WindowBaseModuleAction & {
     place: 'left' | 'right' | 'inside';
     className?: string;
+    /**
+     * Placement of the tooltip.
+     */
+    placement?: TooltipProps['placement'];
 };
 /**
  * Interface representing the main properties of the `WindowBase` component.
@@ -122,6 +127,11 @@ export interface WindowBaseProps {
      * When `true`, the window may display a visual indicator to denote selection.
      */
     selected?: boolean;
+    /**
+     * Indicates if the window is collapsed.
+     * When `true`, the window may display a visual indicator to denote collapse.
+     */
+    collapsed?: boolean;
     /**
      * Indicates if the window is maximized.
      * When `true`, the window may display a visual indicator to denote maximization.
@@ -198,6 +208,7 @@ export type WindowBaseType = keyof typeof WindowBaseSlots;
  */
 export type WindowBaseOwnerState = Pick<WindowBaseProps, 'size'> & {
     selected?: WindowBaseProps['selected'];
+    collapsed?: WindowBaseProps['collapsed'];
     maximized?: WindowBaseProps['maximized'];
     variant?: WindowBaseProps['variant'];
     size?: WindowBaseProps['size'];

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/Window.js

@@ -16,6 +16,8 @@ const Window = (props) => {
     moduleId,
     winType,
     title,
+    subTitle,
+    editionInfo,
     iconUrl,
     version,
     buildTime,
@@ -34,6 +36,18 @@ const Window = (props) => {
     (state) => areaId ? state.hashAreas[areaId]?.maximizedId : void 0,
     shallow
   );
+  const collapsed = useAreasStore(
+    (state) => {
+      const area = areaId ? state.hashAreas[areaId] : void 0;
+      if (area && area.currentBreakpoint && area.layouts && area.layouts[area.currentBreakpoint]) {
+        return area.layouts[area.currentBreakpoint].find(
+          (li) => li.i === windowId
+        )?.colapsed || false;
+      }
+      return false;
+    },
+    shallow
+  );
   if (status === void 0) {
     return null;
   }
@@ -41,6 +55,8 @@ const Window = (props) => {
     WindowBaseStyled,
     {
       title: `${title}${moduleCount ? `:${moduleCount}` : ""}`,
+      subTitle,
+      editionInfo,
       iconUrl,
       isLoading: loading,
       onClose: () => windowTools.close(),
@@ -52,6 +68,7 @@ const Window = (props) => {
       maximized: !!maximizedId,
       onMouseDown: onTouch,
       type: emergeType,
+      collapsed,
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId(
           AREAS_VIEWER_CLASS_NAME,

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useRightActions.js

@@ -34,6 +34,7 @@ const useRightActions = ({
       key: "maximize",
       iconUrl: maximizedId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`,
       label: maximizedId ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_minimize_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_maximize_window)),
+      placement: "bottom-end",
       /**
        * Acción de maximize/normalize.
        */

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useWindow.d.ts

@@ -14,6 +14,8 @@ export declare const useWindow: (windowId: string, areaId?: string) => {
     moduleId: string;
     winType: "component" | "microfrontend";
     title: string;
+    subTitle: string | undefined;
+    editionInfo: string | undefined;
     iconUrl: string;
     version: string | undefined;
     buildTime: string | undefined;

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useWindow.js

@@ -5,7 +5,7 @@ import { u as useHeaderActions } from "./useHeaderActions.js";
 import { u as usePopupsStore } from "../../../../../../../../popups/components/PopupsProvider/hooks/usePopupsStore.js";
 import { c as createToaster } from "../../../../../../../../ToastContainer/helpers/toaster.js";
 const useWindow = (windowId, areaId) => {
-  const [emergeType, moduleId, winType, title, iconUrl, version, buildTime, moduleCount, selected, loading, status, dynamicMFStore] = useAreasStore((state) => {
+  const [emergeType, moduleId, winType, title, subTitle, editionInfo, iconUrl, version, buildTime, moduleCount, selected, loading, status, dynamicMFStore] = useAreasStore((state) => {
     const window = state.hashWindows[windowId];
     const selected2 = areaId ? state.hashAreas[areaId]?.currentLayoutId === windowId : false;
     return [
@@ -13,6 +13,8 @@ const useWindow = (windowId, areaId) => {
       window?.moduleId,
       window?.winType,
       window?.title,
+      window?.subTitle,
+      window?.editionInfo,
       window?.iconUrl,
       window?.version,
       window?.buildTime,
@@ -28,7 +30,7 @@ const useWindow = (windowId, areaId) => {
     (state) => state.hashWindows[windowId]?.component,
     shallow
   );
-  const { setActions, getCookie, getCookies, setCookie, close, startProgress, stopProgress, setFnQueryClose, setWindowTitle, loadCookiesFromApi } = useAreasStore((state) => state.windowActions, shallow);
+  const { setActions, getCookie, getCookies, setCookie, close, startProgress, stopProgress, setFnQueryClose, setWindowTitle, setWindowSubTitle, setWindowEditionInfo, loadCookiesFromApi } = useAreasStore((state) => state.windowActions, shallow);
   const { selectLayout } = useAreasStore((state) => state.areaActions, shallow);
   const { setSelectedPopupId } = usePopupsStore((state) => state.popupsActions, shallow);
   const onTouch = () => {
@@ -55,9 +57,8 @@ const useWindow = (windowId, areaId) => {
       setFnQueryClose: (fnQueryClose) => setFnQueryClose(windowId, fnQueryClose),
       toast: createToaster(windowId),
       setWindowTitle: (newTitle) => setWindowTitle(windowId, newTitle),
-      setEditionInfo: (editionInfo) => {
-        throw new Error(`setEditionInfo not implemented: ${editionInfo}`);
-      },
+      setWindowSubTitle: (newSubtitle) => setWindowSubTitle(windowId, newSubtitle),
+      setWindowEditionInfo: (newEditionInfo) => setWindowEditionInfo(windowId, newEditionInfo),
       hide: () => {
         throw new Error("hide not implemented");
       },
@@ -84,6 +85,8 @@ const useWindow = (windowId, areaId) => {
     moduleId,
     winType,
     title,
+    subTitle,
+    editionInfo,
     iconUrl,
     version,
     buildTime,

package/components/areas/contexts/AreasContext/store.js

@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -10,
-                    bottom: -10
+                    right: -MARGIN_GRIDLAYOUT,
+                    bottom: -MARGIN_GRIDLAYOUT
                   }
                 });
               }
@@ -841,6 +841,22 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
             set((state) => {
               state.hashWindows[windowId].title = title;
             });
+          },
+          /**
+           * setWindowSubtitle
+           */
+          setWindowSubTitle: (windowId, subTitle) => {
+            set((state) => {
+              state.hashWindows[windowId].subTitle = subTitle;
+            });
+          },
+          /**
+           * setWindowEditionInfo
+           */
+          setWindowEditionInfo: (windowId, editionInfo) => {
+            set((state) => {
+              state.hashWindows[windowId].editionInfo = editionInfo;
+            });
           }
         }
       })),

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

@@ -293,6 +293,8 @@ export interface AreasStoreStateWithActions extends AreasStoreState {
         resetModuleCookies: (windowId: string) => void;
         setFnQueryClose: (windowId: string, fnQueryClose: () => void) => void;
         setWindowTitle: (windowId: string, title: string) => void;
+        setWindowSubTitle: (windowId: string, subTitle: string) => void;
+        setWindowEditionInfo: (windowId: string, editionInfo: string) => void;
     };
 }
 export type DefaultAreasStoreProps = Omit<AreasStoreState, 'currentArea'>;

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

@@ -1,2 +1 @@
-export { useSetWindowsTitle } from './useSetWindowsTitle';
 export { useAreasStore } from './useAreas';

package/components/areas/types.d.ts

@@ -99,6 +99,10 @@ export interface EmmitNewWindowBase {
      * Subtítulo de la ventana.
      */
     subTitle?: string;
+    /**
+     * Información de edición de la ventana.
+     */
+    editionInfo?: string;
     /**
      * Opciones de la ventana. Son acciones que permiten persistir las cookies de la ventana a nivel de módulo, para que aunque se cierre esta,
      * Cuando se abra de nuevo venga con las cookies guardadas.

package/components/extended/React-resizable-panels/SplitLayout.js

@@ -2,12 +2,14 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
-import { S as SPLIT_LAYOUT_KEY_COMPONENT } from "./constants.js";
+import { S as SPLIT_LAYOUT_KEY_COMPONENT, a as SPLIT_LAYOUT_ICONS } from "./constants.js";
 import { S as SplitLayoutSlots } from "./slots/SplitLayoutEnum.js";
-import { S as SplitLayoutRootStyled, a as SplitMasterStyled, b as SplitResizeHandleStyled, c as SplitDetailStyled } from "./slots/SplitLayoutSlots.js";
+import { S as SplitLayoutRootStyled, a as SplitMasterStyled, b as SplitResizeHandleStyled, c as SplitResizeHandleIconStyled, d as SplitDetailStyled } from "./slots/SplitLayoutSlots.js";
+import { useEnvironment } from "@m4l/core";
 const SplitLayout = (props) => {
   const { firstPart, secondPart, splitPosition, dataTestId, defaultMasterSize = 50, defaultDetailSize = 50 } = props;
   const classes = getComponentClasses(SPLIT_LAYOUT_KEY_COMPONENT, SplitLayoutSlots);
+  const { host_static_assets, environment_assets } = useEnvironment();
   const firstPartMemo = useMemo(() => {
     return typeof firstPart === "function" ? firstPart() : firstPart;
   }, [firstPart]);
@@ -38,7 +40,8 @@ const SplitLayout = (props) => {
           SplitResizeHandleStyled,
           {
             className: `${classes.splitResizeHandle}-${splitPosition}`,
-            ownerState
+            ownerState,
+            children: /* @__PURE__ */ jsx(SplitResizeHandleIconStyled, { src: `${host_static_assets}/${environment_assets}/${SPLIT_LAYOUT_ICONS.handleIcon}` })
           }
         ),
         /* @__PURE__ */ jsx(