@m4l/components 9.3.20 → 9.3.21-JAEBeta.1

package/components/DynamicFilter/subcomponents/DynamicFilterBase/DynamicFilterBase.js

@@ -3,19 +3,21 @@ import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { D as DYNAMIC_FILTER_KEY_COMPONENT } from "../../constants.js";
 import { u as useDynamicFilterBase } from "./useDynamicFilterBase.js";
+import clsx from "clsx";
 import { R as RootStyled, I as InnerContainerStyled } from "../../slots/dynamicFilterSlots.js";
 import { I as InputFilter } from "../InputFilter/InputFilter.js";
 import { A as AppliedFilters } from "../AppliedFilters/AppliedFilters.js";
 import { F as FilterActions } from "../FilterActions/FilterActions.js";
 import { P as PopoverFilter } from "../PopoverFilter/PopoverFilter.js";
 import { D as DynamicFilterSlots } from "../../slots/SlotsEnum.js";
-function DynamicFilterBase() {
+function DynamicFilterBase(props) {
+  const { className } = props;
   const { ownerState, dataTestId } = useDynamicFilterBase();
   const classRoot = getComponentSlotRoot(DYNAMIC_FILTER_KEY_COMPONENT);
   return /* @__PURE__ */ jsx(
     RootStyled,
     {
-      className: classRoot,
+      className: clsx(classRoot, className),
       ownerState: { ...ownerState },
       ...getPropDataTestId(DYNAMIC_FILTER_KEY_COMPONENT, DynamicFilterSlots.root, dataTestId),
       children: /* @__PURE__ */ jsxs(

package/components/DynamicFilter/subcomponents/DynamicFilterBase/types.d.ts

@@ -0,0 +1,3 @@
+export interface DynamicFilterBaseProps {
+    className?: string;
+}

package/components/DynamicFilter/subcomponents/PopoverFilter/PopoverFilter.js

@@ -52,7 +52,7 @@ function PopoverFilter() {
               title: labelField,
               iconUrl: field.urlIcon,
               variant: "text",
-              type: "popup",
+              emergeType: "popup",
               selected: true,
               draggable: false,
               children: [

package/components/DynamicFilter/types.d.ts

@@ -273,6 +273,10 @@ rawFilters: Array<RawFilterFieldApply>) => void;
  * Propiedades que recibe el componente DynamicFilter
  */
 export interface DynamicFilterProps {
+    /**
+     *  "className" clase css para el componente
+     */
+    className?: string;
     /**
      *  "storeId" identificador del store
      */

package/components/DynamicSort/DynamicSort.js

@@ -5,13 +5,14 @@ import { D as DynamicSortProvider } from "./store/DynamicSortContext.js";
 import { D as DynamicSortBase } from "./subcomponents/DynamicSortBase/DynamicSortBase.js";
 const DynamicSort = forwardRef(
   (props, ref) => {
+    const { className, ...others } = props;
     const hasPresentFlags = useFlagsPresent([
       CommonFlags.FLAG_DICTIONARY_LOADED
     ]);
     if (!hasPresentFlags) {
       return null;
     }
-    return /* @__PURE__ */ jsx(DynamicSortProvider, { ...props, ref, children: /* @__PURE__ */ jsx(DynamicSortBase, {}) });
+    return /* @__PURE__ */ jsx(DynamicSortProvider, { ...others, ref, children: /* @__PURE__ */ jsx(DynamicSortBase, { className }) });
   }
 );
 export {

package/components/DynamicSort/subcomponents/DynamicSortBase/DynamicSortBase.d.ts

@@ -1,5 +1,6 @@
+import { DynamicSortBaseProps } from './types';
 /**
  * DynamicSortBase es un componente base que contiene los subcomponentes InputSort, AppliedSorts, SortActions y PopoverSort.
  */
-declare function DynamicSortBase(): import("react/jsx-runtime").JSX.Element;
+declare function DynamicSortBase(props: DynamicSortBaseProps): import("react/jsx-runtime").JSX.Element;
 export default DynamicSortBase;

package/components/DynamicSort/subcomponents/DynamicSortBase/DynamicSortBase.js

@@ -3,19 +3,21 @@ import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { D as DYNAMIC_SORT_KEY_COMPONENT } from "../../constants.js";
 import { u as useDynamicSortBase } from "./useDynamicSortBase.js";
+import clsx from "clsx";
 import { R as RootStyled, I as InnerContainerStyled } from "../../slots/DynamicSortSlots.js";
 import { I as InputSort } from "../InputSort/InputSort.js";
 import { A as AppliedSorts } from "../AppliedSorts/AppliedSorts.js";
 import { S as SortActions } from "../SortActions/SortActions.js";
 import { P as PopoverSort } from "../PopoverSort/PopoverSort.js";
 import { D as DynamicSortSlots } from "../../slots/SlotsEnum.js";
-function DynamicSortBase() {
+function DynamicSortBase(props) {
+  const { className } = props;
   const { ownerState, dataTestId } = useDynamicSortBase();
   const classRoot = getComponentSlotRoot(DYNAMIC_SORT_KEY_COMPONENT);
   return /* @__PURE__ */ jsx(
     RootStyled,
     {
-      className: classRoot,
+      className: clsx(classRoot, className),
       ownerState: { ...ownerState },
       ...getPropDataTestId(DYNAMIC_SORT_KEY_COMPONENT, DynamicSortSlots.root, dataTestId),
       children: /* @__PURE__ */ jsxs(

package/components/DynamicSort/subcomponents/DynamicSortBase/types.d.ts

@@ -0,0 +1,3 @@
+export interface DynamicSortBaseProps {
+    className?: string;
+}

package/components/DynamicSort/subcomponents/PopoverSort/PopoverSort.js

@@ -51,7 +51,7 @@ function PopoverSort() {
               title: labelField,
               iconUrl: field.urlIcon,
               variant: "text",
-              type: "popup",
+              emergeType: "popup",
               selected: true,
               draggable: false,
               children: [

package/components/DynamicSort/types.d.ts

@@ -106,6 +106,10 @@ rawSorts: Array<RawSortFieldApply>) => void;
  * Propiedades que recibe el componente DynamicSort
  */
 export interface DynamicSortProps {
+    /**
+     *  "className" clase css para el componente
+     */
+    className?: string;
     /**
      *  "storeId" identificador del store
      */

package/components/Image/Image.js

@@ -14,6 +14,8 @@ function Image(props) {
     dataTestId,
     className,
     cover,
+    width,
+    height,
     ...others
   } = props;
   const isSkeleton = useModuleSkeleton();
@@ -31,6 +33,7 @@ function Image(props) {
           ImgStyled,
           {
             ownerState: { ...ownerState },
+            style: { width, height },
             ...getPropDataTestId(IMAGE_KEY_COMPONENT, ImageSlots.root, dataTestId),
             ...others,
             className: clsx(IMAGE_CLASSES.root, className)
@@ -38,7 +41,7 @@ function Image(props) {
         ) })
       }
     );
-  }, [dataTestId, enableIntersectionObserver, others, ownerState, threshold, className]);
+  }, [enableIntersectionObserver, threshold, ownerState, width, height, dataTestId, others, className]);
   return lazyLoadComponent;
 }
 export {

package/components/MFLoader/MFLoader.js

@@ -30,7 +30,7 @@ function getDivScritId(prefix, moduleId) {
   };
 }
 function MFLoader(props) {
-  const { prefix, moduleId, cache = true, debugPort, dynamicMFStore, windowTools } = props;
+  const { prefix, moduleId, cache = true, debugPort, dynamicMFStore, windowTools, emergeType, loggedUser } = props;
   const { hostThemeOptions, fnComponentsOverrides } = useHostTheme();
   const { networkOperation } = useNetwork();
   const environment = useEnvironment();
@@ -64,6 +64,10 @@ function MFLoader(props) {
   }
   const renderMicroFrontend = useCallback(
     (newDScript) => {
+      const options = {
+        loggedUser,
+        emergeType
+      };
       try {
         window[`render_${prefix}_${newDScript.moduleId}`](
           newDScript.divContainerId,
@@ -74,13 +78,14 @@ function MFLoader(props) {
           axiosOperation,
           formatter,
           dynamicMFStore,
-          windowTools
+          windowTools,
+          options
         );
       } catch (_e) {
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [hostThemeOptions, currentLocale, formatter]
+    [hostThemeOptions, currentLocale, formatter, loggedUser]
   );
   const debouncedSetDivScript = useCallback(
     debounce(

package/components/MFLoader/styles.js

@@ -2,10 +2,10 @@ import { styled } from "@mui/material";
 const MFLoaderRoot = styled("div")(() => ({
   width: "100%",
   height: "100%",
+  position: "relative",
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
-  overflow: "auto",
   "& .M4LMFLoader-containerLinearProgress": {
     width: "100%",
     height: "100%",

package/components/MFLoader/types.d.ts

@@ -1,5 +1,7 @@
 import { DynamicMFStore } from '../WindowBase/contexts/DynamicMFParmsContext/store';
 import { WindowToolsMF } from '../WindowBase/contexts';
+import { EmergeType } from '../areas/types';
+import { AuthUserType } from '@m4l/core';
 /**
  * Propiedades base de un microfrontend.
  */
@@ -33,4 +35,12 @@ export interface MFLoaderProps extends MFBaseProps {
      * Herramientas de ventana para el microfrontend.
      */
     windowTools: WindowToolsMF;
+    /**
+     * Tipo de lanzamiento de la ventana, popup, layout, modal
+     */
+    emergeType?: EmergeType;
+    /**
+     * loggedUser: usuario logueado, para los microfrontends que necesitan el usuario logueado
+     */
+    loggedUser?: AuthUserType;
 }

package/components/ObjectLogs/hooks/useDetailFormatter.js

@@ -33,7 +33,7 @@ const useDetailFormatter = (type) => {
                 title: getLabel(`${DICTIONARY.LABEL_LOG_DETAIL}`),
                 onClose: closeModal,
                 variant: "outlined",
-                type: "modal",
+                emergeType: "modal",
                 children: /* @__PURE__ */ jsx(StackStyled, { direction: "column", flexGrow: 1, children: /* @__PURE__ */ jsx(DetailDialogComponent, { logId, type }) })
               }
             ),

package/components/WindowBase/WindowBase.js

@@ -25,7 +25,7 @@ const WindowBase = (props) => {
     windowId,
     onMouseDown,
     editionInfo,
-    type = "layout",
+    emergeType = "layout",
     collapsed,
     draggable = true,
     ...other
@@ -36,7 +36,7 @@ const WindowBase = (props) => {
     selected,
     variant: computedVariant,
     size: currentSize,
-    type,
+    emergeType,
     maximized,
     collapsed,
     draggable
@@ -61,7 +61,7 @@ const WindowBase = (props) => {
             maximized,
             collapsed,
             onClose,
-            type,
+            emergeType,
             draggable,
             ...other
           }

package/components/WindowBase/WindowBase.styles.js

@@ -16,7 +16,7 @@ const windowBaseStyles = {
       overflow: "hidden",
       ...ownerState?.variant === "outlined" && {
         ...ownerState?.selected ? {
-          ...ownerState?.type === "layout" ? {
+          ...ownerState?.emergeType === "layout" ? {
             background: `linear-gradient(to bottom, 
             ${theme.vars.palette.primary.opacityGradient1}, 
             ${theme.vars.palette.primary.opacityGradient2})`,
@@ -31,26 +31,26 @@ const windowBaseStyles = {
             boxShadow: `inset 0px 0px 0 1px ${theme.vars.palette?.border.main}`
           }
         } : {
-          boxShadow: ownerState?.type === "layout" ? `inset 0px 0px 0 1px ${theme.vars.palette?.border.secondary}` : "unset"
+          boxShadow: ownerState?.emergeType === "layout" ? `inset 0px 0px 0 1px ${theme.vars.palette?.border.secondary}` : "unset"
         }
       },
-      ...ownerState?.type === "popup" && {
+      ...ownerState?.emergeType === "popup" && {
         "&&&": {
           boxShadow: theme.vars.customShadows.z1,
           border: `1px solid ${theme.vars.palette?.border.secondary}`,
-          borderRadius: theme.vars.size.borderRadius.r1,
+          borderRadius: theme.vars.size.borderRadius.r3,
           ...ownerState?.selected && {
             boxShadow: theme.vars.customShadows.z4,
-            border: `1px solid ${theme.vars.palette?.border.main}`
+            border: `1px solid ${theme.vars.palette?.primary.activeOpacity}`
           }
         }
       },
-      ...ownerState?.type === "layout" && {
+      ...ownerState?.emergeType === "layout" && {
         ...ownerState?.selected && !ownerState?.maximized ? {
           boxShadow: theme.vars.customShadows.primary
         } : {}
       },
-      ...ownerState?.type === "modal" && {
+      ...ownerState?.emergeType === "modal" && {
         boxShadow: `${theme.vars.customShadows.z3}!important`
       }
     }
@@ -59,8 +59,8 @@ const windowBaseStyles = {
   /**
    * Styles for the content of the window base component.
    */
-  contentWindowBase: ({ theme, ownerState }) => ({
-    padding: ownerState?.type === "layout" ? theme.vars.size.baseSpacings.sp5 : theme.vars.size.baseSpacings.sp4,
+  contentWindowBase: ({ ownerState, theme }) => ({
+    padding: ownerState?.emergeType === "layout" ? theme.vars.size.baseSpacings.sp5 : theme.vars.size.baseSpacings.sp4,
     overflow: "auto",
     width: "100%",
     height: "100%",
@@ -69,6 +69,17 @@ const windowBaseStyles = {
       display: "none"
     }
   }),
+  /**
+   * Window  component content Styles by emergeType
+   */
+  windowContainerComponent: () => ({
+    //Mover el estilado para adentro
+    position: "relative",
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    overflow: "visible"
+  }),
   /**
    * Styles for the header of the window base component.
    */
@@ -76,14 +87,19 @@ const windowBaseStyles = {
     return {
       width: "100%",
       display: "flex",
-      padding: ownerState?.type === "popup" || ownerState?.type === "modal" ? theme.vars.size.baseSpacings["sp0-5"] : theme.vars.size.baseSpacings.sp1,
+      padding: theme.vars.size.baseSpacings.sp1,
+      borderBottom: "1px solid #ffffff00",
+      ...(ownerState?.emergeType === "popup" || ownerState?.emergeType === "modal") && {
+        padding: `${theme.vars.size.baseSpacings["sp2-5"]} ${theme.vars.size.baseSpacings.sp2} 0 ${theme.vars.size.baseSpacings.sp2}`,
+        borderBottom: `unset`
+      },
       alignItems: "center",
       justifyContent: "space-between",
       flexShrink: 0,
       alignSelf: "stretch",
       cursor: ownerState?.draggable ? "all-scroll" : "default",
       position: "relative",
-      ...ownerState?.type === "layout" || ownerState?.type === "modal" ? getSizeStyles(
+      ...ownerState?.emergeType === "layout" || ownerState?.emergeType === "modal" ? getSizeStyles(
         theme,
         ownerState?.size,
         "container",
@@ -101,8 +117,7 @@ const windowBaseStyles = {
           })
         )
       },
-      borderBottom: "1px solid #ffffff00",
-      ...ownerState?.selected && ownerState?.type === "layout" && ownerState?.variant === "outlined" && !ownerState?.maximized ? {
+      ...ownerState?.selected && ownerState?.emergeType === "layout" && ownerState?.variant === "outlined" && !ownerState?.maximized ? {
         background: `linear-gradient(to right, ${theme.vars.palette.primary.opacity}, #ffffff00);`,
         "&::before": {
           content: '""',
@@ -114,8 +129,7 @@ const windowBaseStyles = {
           background: `linear-gradient(to left, ${theme.vars.palette.primary.opacityGradient2}, #ffffff00);`
         }
       } : {
-        background: "transparent",
-        borderBottom: `1px solid ${theme.vars.palette.border.disabled}`
+        background: "transparent"
       }
     };
   },
@@ -138,7 +152,7 @@ const windowBaseStyles = {
    */
   headerTitleWindowBase: ({ theme, ownerState }) => ({
     minWidth: "30px",
-    ...ownerState?.selected && ownerState?.type !== "modal" ? {
+    ...ownerState?.selected && ownerState?.emergeType !== "modal" ? {
       color: `${theme.vars.palette["primary"].semanticText} !important`
     } : {
       color: `${theme.vars.palette.text.secondary} !important`
@@ -180,7 +194,7 @@ const windowBaseStyles = {
   headerSubTitleWindowBase: ({ theme, ownerState }) => ({
     width: "auto !important",
     height: "auto !important",
-    ...ownerState?.selected && ownerState?.type !== "modal" ? {
+    ...ownerState?.selected && ownerState?.emergeType !== "modal" ? {
       color: `${theme.vars.palette["primary"].semanticText} !important`
     } : {
       color: `${theme.vars.palette.text.secondary} !important`
@@ -196,7 +210,7 @@ const windowBaseStyles = {
    */
   headerIconWindowBase: ({ theme, ownerState }) => ({
     "& .M4LIcon-icon": {
-      ...ownerState?.selected && ownerState?.type !== "modal" ? {
+      ...ownerState?.selected && ownerState?.emergeType !== "modal" ? {
         backgroundColor: `${theme.vars.palette["primary"].semanticText} !important`
       } : {
         backgroundColor: `${theme.vars.palette.text.secondary} !important`
@@ -228,7 +242,7 @@ const windowBaseStyles = {
       ),
       marginLeft: theme.vars.size.baseSpacings.sp1,
       marginRight: theme.vars.size.baseSpacings.sp1,
-      marginBottom: ownerState?.type === "layout" ? "auto" : "unset"
+      marginBottom: ownerState?.emergeType === "layout" ? "auto" : "unset"
     },
     '& .window-actions[class*="M4LIconButton-styledMUIIconButton"]': {
       ...getSizeStyles(
@@ -242,7 +256,7 @@ const windowBaseStyles = {
       ),
       marginLeft: theme.vars.size.baseSpacings.sp1,
       marginRight: theme.vars.size.baseSpacings.sp1,
-      marginBottom: ownerState?.type === "layout" ? "auto!important" : "unset!important",
+      marginBottom: ownerState?.emergeType === "layout" ? "auto!important" : "unset!important",
       "&.collapse-toggle": {
         ...ownerState?.maximized && {
           display: "none"
@@ -304,7 +318,7 @@ const windowBaseStyles = {
    */
   pointIcon: ({ theme, ownerState }) => ({
     "& .M4LIcon-icon": {
-      ...ownerState?.selected && ownerState?.type !== "modal" && ownerState?.variant === "outlined" ? {
+      ...ownerState?.selected && ownerState?.emergeType !== "modal" && ownerState?.variant === "outlined" ? {
         backgroundColor: `${theme.vars.palette["primary"].semanticText} !important`
       } : {
         backgroundColor: `${theme.vars.palette.text.secondary} !important`
@@ -320,7 +334,7 @@ const windowBaseStyles = {
    * Styles for the menu actions of the window base component.
    */
   menuActionsWindowBase: ({ theme, ownerState }) => ({
-    ...ownerState?.type === "layout" ? {
+    ...ownerState?.emergeType === "layout" ? {
       ...getSizeStyles(
         theme,
         ownerState?.size,
@@ -363,15 +377,6 @@ const windowBaseStyles = {
       maxWidth: "100%"
     }
   }),
-  /**
-   * Window component content Styles
-   */
-  windowContainerComponent: () => ({
-    display: "flex",
-    width: "100%",
-    height: "100%",
-    overflow: "auto"
-  }),
   /**
    * Styles for the toast container of the window base component.
    */

package/components/WindowBase/constants.d.ts

@@ -1,2 +1,2 @@
 export declare const WINDOW_BASE_KEY_COMPONENT = "M4LWindowBase";
-export declare const WINDOW_BASE_CLASSES: Record<string, string>;
+export declare const windowBaseClasses: Record<string, string>;

package/components/WindowBase/constants.js

@@ -1,8 +1,8 @@
 import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
 import { W as WindowBaseSlots } from "./slots/WindowBaseEnum.js";
 const WINDOW_BASE_KEY_COMPONENT = "M4LWindowBase";
-const WINDOW_BASE_CLASSES = getComponentClasses(WINDOW_BASE_KEY_COMPONENT, WindowBaseSlots);
+const windowBaseClasses = getComponentClasses(WINDOW_BASE_KEY_COMPONENT, WindowBaseSlots);
 export {
   WINDOW_BASE_KEY_COMPONENT as W,
-  WINDOW_BASE_CLASSES as a
+  windowBaseClasses as w
 };

package/components/WindowBase/index.d.ts

@@ -5,3 +5,4 @@ export * from './contexts/WindowToolsMFContext';
 export * from './contexts/DynamicMFParmsContext';
 export type { WindowToolsMFContextProps } from './contexts/WindowToolsMFContext/types';
 export type { ModuleAction, GroupActionMenuItem, ModuleActionGroup } from './types';
+export type { JSX_REACT_NODE } from './types';

package/components/WindowBase/subcomponents/Component/index.js

@@ -4,8 +4,8 @@ import { a as WindowContainerComponentStyled } from "../../slots/WindowBaseSlots
 import { a as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/WindowToolsMFContext.js";
 import { a as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
 const WindowBaseComponent = (props) => {
-  const { component, dynamicMFStore, windowTools, componentProps } = props;
-  return /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(WindowContainerComponentStyled, { ownerState: {}, children: typeof component === "function" ? component(componentProps) : component }) }) });
+  const { component, dynamicMFStore, windowTools, componentProps, emergeType } = props;
+  return /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(WindowContainerComponentStyled, { ownerState: { emergeType }, children: typeof component === "function" ? component(componentProps) : component }) }) });
 };
 React.memo(WindowBaseComponent);
 export {

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

@@ -1,7 +1,9 @@
 import { WindowToolsMF } from '../../contexts';
 import { DynamicMFStore } from '../../contexts/DynamicMFParmsContext/store';
 import { JSX_REACT_NODE } from '../../../WindowBase/types';
+import { EmergeType } from '../../../areas/types';
 export interface ComponentProps {
+    emergeType: EmergeType;
     windowTools: WindowToolsMF;
     dynamicMFStore: DynamicMFStore;
     component: JSX_REACT_NODE;

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

@@ -8,7 +8,7 @@ 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, g as ContainerLeftActionsStyled, M as MenuActionsWindowsStyled } from "../../slots/WindowBaseSlots.js";
-import { a as WINDOW_BASE_CLASSES } from "../../constants.js";
+import { w as windowBaseClasses } from "../../constants.js";
 import clsx from "clsx";
 const HeaderWindowBase = (props) => {
   const {
@@ -24,7 +24,7 @@ const HeaderWindowBase = (props) => {
     variant,
     actions = [],
     collapsed,
-    type,
+    emergeType,
     draggable
   } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -103,17 +103,17 @@ const HeaderWindowBase = (props) => {
     maximized,
     variant,
     size,
-    type,
+    emergeType,
     collapsed,
     draggable
   };
   const IconButtonLeftActions = useButtonActions(leftActions);
   const IconButtonRightActions = useButtonActions(rightActions);
-  return /* @__PURE__ */ jsxs(HeaderWindowComponentStyled, { className: clsx(draggable && dragResizeWindowRNDClasses.draggableHandle, WINDOW_BASE_CLASSES.headerWindowComponent), ownerState, children: [
-    /* @__PURE__ */ jsxs(HeaderContentStyled, { ownerState, children: [
+  return /* @__PURE__ */ jsxs(HeaderWindowComponentStyled, { className: clsx(draggable && dragResizeWindowRNDClasses.draggableHandle, windowBaseClasses.headerWindowComponent), ownerState, children: [
+    /* @__PURE__ */ jsxs(HeaderContentStyled, { ownerState, className: windowBaseClasses.headerContentWindowBase, children: [
       iconUrl && /* @__PURE__ */ jsx(IconWindowStyled, { size, ownerState, src: iconUrl, "aria-label": "main icon" }),
       /* @__PURE__ */ jsxs(ContainerTitleSubtitleStyled, { size, ownerState, children: [
-        /* @__PURE__ */ jsx(TitleWindowStyled, { variant: type === "popup" || type === "modal" ? "body" : "captionDens", size, skeletonWidth: 100, ownerState, children: title }),
+        /* @__PURE__ */ jsx(TitleWindowStyled, { variant: emergeType === "popup" || emergeType === "modal" ? "body" : "captionDens", size, skeletonWidth: 100, ownerState, children: title }),
         subTitle && /* @__PURE__ */ jsx(
           PointIconStyled,
           {
@@ -122,7 +122,7 @@ const HeaderWindowBase = (props) => {
             ownerState
           }
         ),
-        subTitle && /* @__PURE__ */ jsx(SubtitleWindowStyled, { variant: type === "popup" || type === "modal" ? "body" : "captionDens", size, skeletonWidth: 100, ownerState, children: subTitle })
+        subTitle && /* @__PURE__ */ jsx(SubtitleWindowStyled, { variant: emergeType === "popup" || emergeType === "modal" ? "body" : "captionDens", size, skeletonWidth: 100, ownerState, children: subTitle })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(

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

@@ -32,7 +32,7 @@ import { WindowBaseAction, WindowBaseProps } from '../../types';
  * - `selected` modifies the visual appearance to indicate the selected state.
  * @see WindowBaseProps - General properties for the window base.
  */
-export type HeaderProps = Pick<WindowBaseProps, 'title' | 'subTitle' | 'iconUrl' | 'onClose' | 'version' | 'selected' | 'variant' | 'type' | 'buildTime' | 'maximized' | 'draggable'> & {
+export type HeaderProps = Pick<WindowBaseProps, 'title' | 'subTitle' | 'iconUrl' | 'onClose' | 'version' | 'selected' | 'variant' | 'emergeType' | 'buildTime' | 'maximized' | 'draggable'> & {
     actions?: WindowBaseAction[];
 };
 /**

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

@@ -1,3 +1,5 @@
+import { AuthUserType } from '@m4l/core';
+import { EmergeType } from '../../../areas/types';
 import { MFBaseProps } from '../../../MFLoader/types';
 import { WindowToolsMF } from '../../contexts';
 import { DynamicMFStore } from '../../contexts/DynamicMFParmsContext/store';
@@ -5,4 +7,6 @@ export interface MicroFrontendProps extends MFBaseProps {
     moduleId: string;
     windowTools: WindowToolsMF;
     dynamicMFStore: DynamicMFStore;
+    emergeType: EmergeType;
+    loggedUser: AuthUserType;
 }

package/components/WindowBase/types.d.ts

@@ -189,7 +189,7 @@ export interface WindowBaseProps {
      * - `'window'`: A window.
      * Default is `'window'` if not specified.
      */
-    type?: EmergeType;
+    emergeType?: EmergeType;
     /**
      * Indicates if the window is draggable.
      */
@@ -210,13 +210,13 @@ export type WindowBaseType = keyof typeof WindowBaseSlots;
  * windowBaseVariant (optional) - Visual variant of the component (`'outlined'` or `'text'`).
  * windowBaseSize (optional) - Size of the component (`'small'` or `'medium'`).
  */
-export type WindowBaseOwnerState = Pick<WindowBaseProps, 'size'> & {
+export type WindowBaseOwnerState = {
     selected?: WindowBaseProps['selected'];
     collapsed?: WindowBaseProps['collapsed'];
     maximized?: WindowBaseProps['maximized'];
     variant?: WindowBaseProps['variant'];
     size?: WindowBaseProps['size'];
-    type?: WindowBaseProps['type'];
+    emergeType?: WindowBaseProps['emergeType'];
     draggable?: WindowBaseProps['draggable'];
 };
 /**

package/components/WindowConfirm/WindowConfirm.js

@@ -56,7 +56,7 @@ const WindowConfirm = (props) => {
     info: `${host_static_assets}/${environment_assets}/frontend/components/window_confirm/assets/icons/Info.svg`
   };
   const iconUrl = iconMap[variant] || iconMap.warning;
-  return /* @__PURE__ */ jsx(AppearanceComponentProvider, { defaultSize: currentSize, children: /* @__PURE__ */ jsx(WindowBase, { iconUrl, variant: "outlined", title: getLabel("modal_dialog.label_window_confirm"), onClose: () => closeModal(), type: "modal", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AppearanceComponentProvider, { defaultSize: currentSize, children: /* @__PURE__ */ jsx(WindowBase, { iconUrl, variant: "outlined", title: getLabel("modal_dialog.label_window_confirm"), onClose: () => closeModal(), emergeType: "modal", children: /* @__PURE__ */ jsx(
     WindowConfirmRootStyled,
     {
       className: clsx(getComponentSlotRoot(WINDOW_CONFIRM_KEY_COMPONENT)),

package/components/areas/components/AreasViewer/AreasViewer.styles.js

@@ -33,7 +33,7 @@ const areasViewerStyles = {
     flexDirection: "row",
     inset: 0,
     overflow: "hidden",
-    justifyContent: "top",
+    justifyContent: "flex-start",
     alignItems: "flex-start",
     visibility: "hidden",
     ...ownerState?.selected && {