@m4l/components 9.1.32 → 9.1.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/components/AccountPopover/AccountPopover.js +2 -2
  2. package/components/AccountPopover/slots/AccountPopoverSlots.d.ts +1 -1
  3. package/components/AppBar/slots/AppBarSlots.d.ts +1 -1
  4. package/components/Chip/slots/ChipSlots.d.ts +1 -1
  5. package/components/CommonActions/components/ActionCancel/slots/ActionsCancelSlots.d.ts +1 -1
  6. package/components/CommonActions/components/ActionIntro/slots/ActionsIntroSlots.d.ts +1 -1
  7. package/components/ControlIncrement/slots/ControltrolIncrementSlots.d.ts +2 -2
  8. package/components/DynamicFilter/slots/dynamicFilterSlots.d.ts +4 -4
  9. package/components/DynamicSort/slots/DynamicSortSlots.d.ts +4 -4
  10. package/components/SideBar/constants.d.ts +3 -0
  11. package/components/SideBar/constants.js +8 -2
  12. package/components/SideBar/slots/SideBarSlots.d.ts +1 -1
  13. package/components/SideBar/slots/SideBarSlots.js +2 -2
  14. package/components/SideBar/subcomponents/ContentComponent/index.js +3 -1
  15. package/components/SideBar/subcomponents/ContentGroups/index.d.ts +4 -1
  16. package/components/SideBar/subcomponents/ContentGroups/index.js +8 -5
  17. package/components/SideBar/subcomponents/ContentGroups/styles.js +7 -3
  18. package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/index.js +14 -7
  19. package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.js +27 -7
  20. package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/subcomponents/ArrowIcon/index.js +4 -4
  21. package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/types.d.ts +2 -0
  22. package/components/SideBar/subcomponents/FooterSidebar/index.js +1 -1
  23. package/components/SideBar/subcomponents/FooterSidebar/styles.js +1 -0
  24. package/components/SideBar/subcomponents/SideBarDesktop/index.js +1 -1
  25. package/components/WindowBase/WindowBase.d.ts +1 -1
  26. package/components/WindowBase/WindowBase.js +3 -3
  27. package/components/WindowBase/WindowBase.styles.js +27 -15
  28. package/components/WindowBase/slots/WindowBaseEnum.d.ts +0 -2
  29. package/components/WindowBase/slots/WindowBaseEnum.js +0 -2
  30. package/components/WindowBase/slots/WindowBaseSlots.d.ts +3 -20
  31. package/components/WindowBase/slots/WindowBaseSlots.js +19 -31
  32. package/components/WindowBase/subcomponents/Header/HeaderWindowBase.d.ts +1 -1
  33. package/components/WindowBase/subcomponents/Header/HeaderWindowBase.js +84 -34
  34. package/components/WindowBase/subcomponents/Header/types.d.ts +4 -2
  35. package/components/WindowBase/subcomponents/MemoizedIconButton/MemoizedIconButton.d.ts +14 -0
  36. package/components/WindowBase/subcomponents/MemoizedIconButton/MemoizedIconButton.js +9 -0
  37. package/components/WindowBase/subcomponents/MemoizedIconButton/types.d.ts +32 -0
  38. package/components/WindowBase/types.d.ts +21 -1
  39. package/components/WindowConfirm/slots/WindowConfirmSlots.d.ts +2 -2
  40. package/components/maps/components/Map/subcomponents/LayersContainer/subcomponents/MyLayer/subcomponents/MarkerClusterGroup/index.d.ts +2 -0
  41. package/components/mui_extended/Autocomplete/slots /AutocompleteSlots.d.ts +1 -1
  42. package/components/mui_extended/Button/Button.d.ts +2 -2
  43. package/components/mui_extended/Dialog/Dialog.styles.js +3 -3
  44. package/components/mui_extended/IconButton/IconButton.d.ts +3 -3
  45. package/components/mui_extended/IconButton/IconButton.js +8 -4
  46. package/components/mui_extended/MenuActions/MenuActions.d.ts +6 -2
  47. package/components/mui_extended/MenuActions/MenuActions.js +119 -117
  48. package/components/mui_extended/MenuActions/slots/MenuActionsSlots.d.ts +1 -1
  49. package/components/mui_extended/MenuItem/MenuItem.js +11 -7
  50. package/components/mui_extended/MenuItem/MenuItem.styles.js +10 -13
  51. package/components/mui_extended/ToggleButton/ToggleButton.styles.js +2 -2
  52. package/components/mui_extended/ToggleButton/slots/ToggleButtonSlots.d.ts +1 -1
  53. package/components/mui_extended/ToggleIconButton/slots/ToggleIconButtonSlots.d.ts +1 -1
  54. package/components/mui_extended/Typography/typography.styles.js +160 -160
  55. package/index.js +6 -8
  56. package/package.json +1 -1
  57. package/components/WindowBase/subcomponents/Header/index.js +0 -1
@@ -4,11 +4,13 @@ import { C as ContentComponentRootStyled } from "../../slots/SideBarSlots.js";
4
4
  import { C as ContentGroups } from "../ContentGroups/index.js";
5
5
  import { F as FooterSidebar } from "../FooterSidebar/index.js";
6
6
  import { H as HeaderSidebar } from "../HeaderSidebar/index.js";
7
+ import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
7
8
  const ContentComponent = () => {
8
9
  const { anchored, onToggleAnchored, companyName, companySlogan, companyLogoSmallUrl, expandedWidth } = useSideBar();
9
10
  const ownerState = {
10
11
  expandedWidth
11
12
  };
13
+ const { currentSize } = useComponentSize();
12
14
  return /* @__PURE__ */ jsxs(ContentComponentRootStyled, { ownerState, children: [
13
15
  /* @__PURE__ */ jsx(
14
16
  HeaderSidebar,
@@ -18,7 +20,7 @@ const ContentComponent = () => {
18
20
  srcIcon: companyLogoSmallUrl ?? ""
19
21
  }
20
22
  ),
21
- /* @__PURE__ */ jsx(ContentGroups, {}),
23
+ /* @__PURE__ */ jsx(ContentGroups, { size: currentSize }),
22
24
  /* @__PURE__ */ jsx(FooterSidebar, { onToggleAnchored, anchored })
23
25
  ] });
24
26
  };
@@ -1,3 +1,4 @@
1
+ import { Sizes } from '@m4l/styles';
1
2
  /**
2
3
  * Renderiza el contenido de los grupos
3
4
  * @author Andrés Quintero - automatic
@@ -5,4 +6,6 @@
5
6
  * @updatedAt 2024-12-10 11:21:21 - automatic
6
7
  * @updatedUser Andrés Quintero - automatic
7
8
  */
8
- export declare const ContentGroups: () => import("react/jsx-runtime").JSX.Element;
9
+ export declare const ContentGroups: (props: {
10
+ size: Sizes;
11
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -3,24 +3,27 @@ import { useModuleDictionary } from "@m4l/core";
3
3
  import { u as useSideBar } from "../../hooks/useSideBar/index.js";
4
4
  import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
5
5
  import { g as getNameDataTestId } from "../../tests/utils.js";
6
- import { a as ContainerContentGroupsRootStyled, b as ContainerContentGroupsStyled, c as ContainerContentTitleTitleStyled, d as ContainerContentNavItemsStyled } from "../../slots/SideBarSlots.js";
6
+ import { a as ContainerContentGroupsRootStyled, b as ContainerContentGroupsStyled, c as ContainerContentTitleStyled, d as ContainerContentNavItemsStyled } from "../../slots/SideBarSlots.js";
7
7
  import { C as ContainerMenuItemsMain } from "./subcomponents/ContainerMenuItemsMain/index.js";
8
+ import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
8
9
  import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
9
10
  import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";
10
- const ContentGroups = () => {
11
+ const ContentGroups = (props) => {
12
+ const { size } = props;
11
13
  const { menuData } = useSideBar();
12
14
  const { getLabel } = useModuleDictionary();
15
+ const { currentSize } = useComponentSize(size);
13
16
  const ownerState = {
14
17
  noItems: menuData.length === 0
15
18
  };
16
19
  const renderTitle = (title) => {
17
- return /* @__PURE__ */ jsx(ContainerContentTitleTitleStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Typography, { variant: "bodyDens", skeletonWidth: "100px", children: title }) });
20
+ return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Typography, { variant: "bodyDens", skeletonWidth: "100px", children: title }) });
18
21
  };
19
22
  const renderItems = (item) => {
20
- return /* @__PURE__ */ jsx(ContainerContentNavItemsStyled, { ownerState: {}, children: item?.map((list, id) => /* @__PURE__ */ jsx(ContainerMenuItemsMain, { item: list, openSubItem: true }, id)) });
23
+ return /* @__PURE__ */ jsx(ContainerContentNavItemsStyled, { ownerState: {}, children: item?.map((list, id) => /* @__PURE__ */ jsx(ContainerMenuItemsMain, { item: list, openSubItem: true, size: currentSize }, id)) });
21
24
  };
22
25
  const renderItemsDisabled = () => {
23
- return /* @__PURE__ */ jsx(ContainerContentTitleTitleStyled, { ownerState: {}, children: Array.from({ length: 1 }).map((_, index) => /* @__PURE__ */ jsx(
26
+ return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { ownerState: { disabled: true }, children: Array.from({ length: 1 }).map((_, index) => /* @__PURE__ */ jsx(
24
27
  MenuItem,
25
28
  {
26
29
  disabled: true,
@@ -36,10 +36,13 @@ const contentGroupStyles = {
36
36
  * @updatedAt 2024-12-10 11:21:21 - automatic
37
37
  * @updatedUser Andrés Quintero - automatic
38
38
  */
39
- containerContentTitle: ({ theme }) => ({
39
+ containerContentTitle: ({ theme, ownerState }) => ({
40
40
  padding: `${theme.vars.size.baseSpacings.sp3} ${theme.vars.size.baseSpacings.sp4} ${theme.vars.size.baseSpacings.sp1}`,
41
41
  color: theme.vars.palette.text.primary,
42
- textAlign: "left"
42
+ textAlign: "left",
43
+ "& .MuiTypography-root": {
44
+ color: !ownerState.disabled ? theme.vars.palette.text.primary : `${theme.vars.palette.text.primary} !important`
45
+ }
43
46
  }),
44
47
  /**
45
48
  * Navigation wrapper for every principal item group in the sidebar
@@ -51,7 +54,8 @@ const contentGroupStyles = {
51
54
  containerContentNavItems: ({ theme }) => ({
52
55
  display: "flex",
53
56
  flexDirection: "column",
54
- gap: theme.vars.size.baseSpacings["sp0-5"]
57
+ gap: theme.vars.size.baseSpacings["sp0-5"],
58
+ marginRight: theme.vars.size.baseSpacings.sp4
55
59
  }),
56
60
  /**
57
61
  *Container for the items in the sidebar group
@@ -9,17 +9,23 @@ import { g as getNameDataTestId } from "../../../../tests/utils.js";
9
9
  import { A as ArrowIcon } from "./subcomponents/ArrowIcon/index.js";
10
10
  import { e as ContainerMenuItemsStyled } from "../../../../slots/SideBarSlots.js";
11
11
  import { g as getComponentSlotRoot } from "../../../../../../utils/getComponentSlotRoot.js";
12
- import { L as LIST_MENU_ITEM } from "../../../../constants.js";
12
+ import { I as ITEM_ACTIVE, a as ITEM_IN_TREE_ACTIVE, P as PATH_ICONS, L as LIST_MENU_ITEM } from "../../../../constants.js";
13
+ import { useEnvironment } from "@m4l/core";
14
+ import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
13
15
  import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
14
16
  function ContainerMenuItemsMain(props) {
15
- const { item } = props;
17
+ const { item, size } = props;
16
18
  const { onMenuItemClick, onToggleVisible } = useSideBar();
17
19
  const [openSub, setOpenSub] = useState(props.openSubItem ?? false);
18
20
  const hasChildren = item.children && Array.isArray(item.children) && item.children.length > 0;
19
21
  const isMobile = useIsMobile();
22
+ const { host_static_assets, environment_assets } = useEnvironment();
23
+ const { currentSize } = useComponentSize(size);
24
+ const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
20
25
  const ownerState = {
21
26
  active: item.active,
22
- itemInTreeActive: item.itemInTreeActive
27
+ itemInTreeActive: item.itemInTreeActive,
28
+ sidebarSize: adjustedSize
23
29
  };
24
30
  const handlerClick = () => {
25
31
  if (item.moduleId) {
@@ -42,15 +48,16 @@ function ContainerMenuItemsMain(props) {
42
48
  /* @__PURE__ */ jsx(
43
49
  MenuItem,
44
50
  {
45
- className: clsx(item.active ? "active" : "inTreeActive"),
51
+ className: clsx(item.active ? ITEM_ACTIVE : ITEM_IN_TREE_ACTIVE),
46
52
  label: item.title,
47
53
  selected: item.active || item.itemInTreeActive,
48
- startIcon: item.iconUrl,
54
+ startIcon: `${host_static_assets}/${environment_assets}${PATH_ICONS}${item.iconUrl}`,
49
55
  endIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: openSub, active: item.active }) : null,
50
- onClick: handlerClick
56
+ onClick: handlerClick,
57
+ size: adjustedSize
51
58
  }
52
59
  ),
53
- hasChildren ? /* @__PURE__ */ jsx(Collapse, { in: openSub, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child) => /* @__PURE__ */ jsx(ContainerMenuItemsMain, { item: child }, child.title)) }) : null
60
+ hasChildren ? /* @__PURE__ */ jsx(Collapse, { in: openSub, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child) => /* @__PURE__ */ jsx(ContainerMenuItemsMain, { item: child, size: adjustedSize }, child.title)) }) : null
54
61
  ]
55
62
  }
56
63
  );
@@ -1,3 +1,4 @@
1
+ import { a as ITEM_IN_TREE_ACTIVE, I as ITEM_ACTIVE } from "../../../../constants.js";
1
2
  const containerMenuItemsMainStyles = {
2
3
  /**
3
4
  * Style aplicado al contenedor de los items del menú
@@ -6,21 +7,39 @@ const containerMenuItemsMainStyles = {
6
7
  * @updatedAt 2024-12-10 11:21:21 - automatic
7
8
  * @updatedUser Andrés Quintero - automatic
8
9
  */
9
- containerMenuItems: ({ theme }) => ({
10
+ containerMenuItems: ({ theme, ownerState }) => ({
10
11
  marginLeft: theme.vars.size.baseSpacings.sp4,
11
- /* padding: `${theme.vars.size.baseSpacings['sp0-5']} 0`, */
12
12
  display: "flex",
13
13
  flexDirection: "column",
14
14
  gap: theme.vars.size.baseSpacings["sp0-5"],
15
- '&.M4LListMenuItem-root > [class*="inTreeActive"]': {
16
- justifyContent: "space-between",
15
+ "& .M4LMenuItem-menuItemContainer": {
16
+ // Estilos específicos para el tamaño small
17
+ ...ownerState.sidebarSize === "small" && {
18
+ ...theme.generalSettings.isMobile ? {
19
+ minHeight: theme.vars.size.mobile.small.action
20
+ } : {
21
+ minHeight: theme.vars.size.desktop.small.action
22
+ }
23
+ },
24
+ // Estilos específicos para el tamaño medium
25
+ ...ownerState.sidebarSize === "medium" && {
26
+ ...theme.generalSettings.isMobile ? {
27
+ minHeight: theme.vars.size.mobile.medium.action
28
+ } : {
29
+ minHeight: theme.vars.size.desktop.medium.action
30
+ }
31
+ }
32
+ },
33
+ [`&.M4LListMenuItem-root > .M4LMenuItemRoot[class*="${ITEM_IN_TREE_ACTIVE}"]`]: {
17
34
  borderColor: theme.vars.palette.divider,
18
35
  "& span": {
19
36
  color: theme.vars.palette.text.primary
20
37
  }
21
38
  },
22
- '&.M4LListMenuItem-root > [class*="active"]': {
23
- justifyContent: "space-between",
39
+ [`&.M4LListMenuItem-root > .M4LMenuItemRoot[class*="${ITEM_IN_TREE_ACTIVE}"] .M4LIconClass-root`]: {
40
+ background: theme.vars.palette.text.primary
41
+ },
42
+ [`&.M4LListMenuItem-root > .M4LMenuItemRoot[class*="${ITEM_ACTIVE}"]`]: {
24
43
  borderColor: theme.vars.palette.primary.main,
25
44
  "& span": {
26
45
  color: theme.vars.palette.primary.main
@@ -42,7 +61,8 @@ const containerMenuItemsMainStyles = {
42
61
  containerArrowIconRoot: () => ({
43
62
  display: "flex",
44
63
  alignSelf: "center",
45
- lineHeight: 0
64
+ lineHeight: 0,
65
+ marginLeft: "auto"
46
66
  })
47
67
  };
48
68
  export {
@@ -2,9 +2,9 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { useEnvironment } from "@m4l/core";
3
3
  import { T as TEST_PROP_ID } from "../../../../../../../../test/constants_no_mock.js";
4
4
  import { g as getNameDataTestId } from "../../../../../../tests/utils.js";
5
- import { P as PATH_ARROW_DOWN_ICON } from "../../../../../../constants.js";
5
+ import { b as PATH_ARROW_DOWN_ICON } from "../../../../../../constants.js";
6
6
  import { f as ContainerArrowIconRootStyled } from "../../../../../../slots/SideBarSlots.js";
7
- import { I as Icon } from "../../../../../../../Icon/Icon.js";
7
+ import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
8
8
  function ArrowIcon(props) {
9
9
  const { openState, active } = props;
10
10
  const { host_static_assets, environment_assets } = useEnvironment();
@@ -14,11 +14,11 @@ function ArrowIcon(props) {
14
14
  ownerState: {},
15
15
  ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("arrowIconRoot") } : {},
16
16
  children: /* @__PURE__ */ jsx(
17
- Icon,
17
+ IconButton,
18
18
  {
19
19
  src: `${host_static_assets}/${environment_assets}/${PATH_ARROW_DOWN_ICON}`,
20
20
  rotationAngle: openState ? 270 : 90,
21
- color: active ? "primary.main" : "text.primary"
21
+ componentPaletteColor: active ? "primary" : "default"
22
22
  }
23
23
  )
24
24
  }
@@ -1,5 +1,7 @@
1
+ import { Sizes } from '@m4l/styles';
1
2
  import { IMenuDataWithState } from '../../../../types';
2
3
  export type NavListSubItemProps = {
3
4
  item: IMenuDataWithState;
4
5
  openSubItem?: boolean;
6
+ size: Sizes;
5
7
  };
@@ -19,7 +19,7 @@ function FooterSidebar({ anchored }) {
19
19
  Image,
20
20
  {
21
21
  width: "auto",
22
- height: "auto",
22
+ height: "40px",
23
23
  src: companyLogoNormalUrl || "",
24
24
  alt: "logo"
25
25
  },
@@ -7,6 +7,7 @@ const footerSideBarStyles = {
7
7
  * @updatedUser Andrés Quintero - automatic
8
8
  */
9
9
  containerFooter: ({ theme, ownerState }) => ({
10
+ height: "auto",
10
11
  display: "grid",
11
12
  placeItems: "center",
12
13
  padding: `${theme.vars.size.baseSpacings.sp4} ${theme.vars.size.baseSpacings.sp12}`,
@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { useEnvironment } from "@m4l/core";
3
3
  import { u as useSideBar } from "../../hooks/useSideBar/index.js";
4
4
  import { j as ContainerDesktopContentStyled, k as ContainerDesktopRootStyled, l as ContainerBtnAnchoredStyled } from "../../slots/SideBarSlots.js";
5
- import { a as PATH_ARROW_RIGHT_ICON, S as SIDEBAR_KEY_COMPONENT, C as CONTAINER_BTN_ANCHORED } from "../../constants.js";
5
+ import { c as PATH_ARROW_RIGHT_ICON, S as SIDEBAR_KEY_COMPONENT, C as CONTAINER_BTN_ANCHORED } from "../../constants.js";
6
6
  import { C as ContentComponent } from "../ContentComponent/index.js";
7
7
  import { useState, useEffect } from "react";
8
8
  import { useFirstRender } from "@m4l/graphics";
@@ -5,7 +5,7 @@ import { WindowBaseProps } from './types';
5
5
  * It uses hooks like `useModal` and utility style classes.
6
6
  * @author cesar - automatic
7
7
  * @createdAt 2024-11-15 18:08:44 - automatic
8
- * @updatedAt 2024-11-29 14:22:50 - automatic
8
+ * @updatedAt 2024-12-17 09:13:45 - automatic
9
9
  * @updatedUser cesar - automatic
10
10
  */
11
11
  export declare const WindowBase: (props: WindowBaseProps) => import("react/jsx-runtime").JSX.Element;
@@ -5,7 +5,8 @@ import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
5
5
  import { W as WINDOW_BASE_KEY_COMPONENT } from "./constants.js";
6
6
  import { g as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
7
7
  import clsx from "clsx";
8
- import { W as WindowBaseStyled, H as HeaderWindowStyled, C as ContentWindowStyled } from "./slots/WindowBaseSlots.js";
8
+ import { H as HeaderWindowBase } from "./subcomponents/Header/HeaderWindowBase.js";
9
+ import { W as WindowBaseStyled, C as ContentWindowStyled } from "./slots/WindowBaseSlots.js";
9
10
  import { W as WindowBaseSlots } from "./slots/WindowBaseEnum.js";
10
11
  const WindowBase = (props) => {
11
12
  const {
@@ -35,12 +36,11 @@ const WindowBase = (props) => {
35
36
  ownerState,
36
37
  children: [
37
38
  /* @__PURE__ */ jsx(
38
- HeaderWindowStyled,
39
+ HeaderWindowBase,
39
40
  {
40
41
  ...getPropDataTestId(WINDOW_BASE_KEY_COMPONENT, WindowBaseSlots.headerContentWindowBase, dataTestId),
41
42
  version,
42
43
  size,
43
- ownerState,
44
44
  selected,
45
45
  onClose,
46
46
  ...other
@@ -3,7 +3,7 @@ const windowBaseStyles = {
3
3
  * Styles for the window base wrapper component.
4
4
  * @author cesar - automatic
5
5
  * @createdAt 2024-11-15 18:08:44 - automatic
6
- * @updatedAt 2024-12-20 17:28:53 - automatic
6
+ * @updatedAt 2024-12-23 12:19:17 - automatic
7
7
  * @updatedUser cesar - automatic
8
8
  */
9
9
  wrapperWindowBase: ({ theme, ownerState }) => ({
@@ -27,19 +27,20 @@ const windowBaseStyles = {
27
27
  * Styles for the content of the window base component.
28
28
  * @author cesar - automatic
29
29
  * @createdAt 2024-11-15 18:08:44 - automatic
30
- * @updatedAt 2024-12-20 17:28:53 - automatic
30
+ * @updatedAt 2024-12-23 12:19:17 - automatic
31
31
  * @updatedUser cesar - automatic
32
32
  */
33
33
  contentWindowBase: ({ theme }) => ({
34
34
  padding: theme.vars.size.baseSpacings.sp3,
35
35
  overflow: "auto",
36
+ width: "100%",
36
37
  height: "100%"
37
38
  }),
38
39
  /**
39
40
  * Styles for the header of the window base component.
40
41
  * @author cesar - automatic
41
42
  * @createdAt 2024-11-15 18:08:44 - automatic
42
- * @updatedAt 2024-12-20 17:28:53 - automatic
43
+ * @updatedAt 2024-12-23 12:19:17 - automatic
43
44
  * @updatedUser cesar - automatic
44
45
  */
45
46
  headerWindowComponent: ({ theme, ownerState }) => ({
@@ -50,6 +51,7 @@ const windowBaseStyles = {
50
51
  justifyContent: "space-between",
51
52
  flexShrink: 0,
52
53
  alignSelf: "stretch",
54
+ cursor: "all-scroll",
53
55
  ...theme.generalSettings.isMobile ? {
54
56
  ...ownerState.windowBaseSize === "small" && {
55
57
  height: theme.vars.size.mobile.small.container
@@ -75,10 +77,12 @@ const windowBaseStyles = {
75
77
  * Styles for the content of the header of the window base component.
76
78
  * @author cesar - automatic
77
79
  * @createdAt 2024-11-15 18:08:44 - automatic
78
- * @updatedAt 2024-12-20 17:28:53 - automatic
80
+ * @updatedAt 2024-12-23 12:19:17 - automatic
79
81
  * @updatedUser cesar - automatic
80
82
  */
81
83
  headerContentWindowBase: ({ theme }) => ({
84
+ width: "100%",
85
+ minWidth: "20px",
82
86
  display: "flex",
83
87
  alignItems: "center",
84
88
  paddingLeft: theme.vars.size.baseSpacings.sp1,
@@ -90,19 +94,23 @@ const windowBaseStyles = {
90
94
  * Styles for the title of the header of the window base component.
91
95
  * @author cesar - automatic
92
96
  * @createdAt 2024-11-15 18:08:44 - automatic
93
- * @updatedAt 2024-12-20 17:28:53 - automatic
97
+ * @updatedAt 2024-12-23 12:19:17 - automatic
94
98
  * @updatedUser cesar - automatic
95
99
  */
96
100
  headerTitleWindowBase: ({ theme }) => ({
97
- width: "auto",
101
+ minWidth: "30px",
98
102
  color: theme.vars.palette.text.primary,
99
- fontWeight: `${theme.typography.fontWeightBold} !important`
103
+ fontWeight: `${theme.typography.fontWeightBold} !important`,
104
+ whiteSpace: "nowrap",
105
+ overflow: "hidden",
106
+ textOverflow: "ellipsis",
107
+ paddingLeft: theme.vars.size.baseSpacings.sp1
100
108
  }),
101
109
  /**
102
110
  * Styles for the subtitle container of the header of the window base component.
103
111
  * @author cesar - automatic
104
112
  * @createdAt 2024-11-15 18:08:44 - automatic
105
- * @updatedAt 2024-12-20 17:28:53 - automatic
113
+ * @updatedAt 2024-12-23 12:19:17 - automatic
106
114
  * @updatedUser cesar - automatic
107
115
  */
108
116
  subtitleContainer: ({ theme }) => ({
@@ -117,7 +125,7 @@ const windowBaseStyles = {
117
125
  * @returns An object containing the styles for the dot window base component.
118
126
  * @author cesar - automatic
119
127
  * @createdAt 2024-11-22 19:40:23 - automatic
120
- * @updatedAt 2024-12-20 17:28:53 - automatic
128
+ * @updatedAt 2024-12-23 12:19:17 - automatic
121
129
  * @updatedUser cesar - automatic
122
130
  */
123
131
  pointWindowBase: ({ theme, ownerState }) => ({
@@ -144,7 +152,7 @@ const windowBaseStyles = {
144
152
  * Styles for the subtitle of the header of the window base component.
145
153
  * @author cesar - automatic
146
154
  * @createdAt 2024-11-15 18:08:44 - automatic
147
- * @updatedAt 2024-12-20 17:28:53 - automatic
155
+ * @updatedAt 2024-12-23 12:19:17 - automatic
148
156
  * @updatedUser cesar - automatic
149
157
  */
150
158
  headerSubTitleWindowBase: ({ theme }) => ({
@@ -156,7 +164,7 @@ const windowBaseStyles = {
156
164
  * Styles for the icon of the header of the window base component.
157
165
  * @author cesar - automatic
158
166
  * @createdAt 2024-11-18 08:11:19 - automatic
159
- * @updatedAt 2024-12-20 17:28:53 - automatic
167
+ * @updatedAt 2024-12-23 12:19:17 - automatic
160
168
  * @updatedUser cesar - automatic
161
169
  */
162
170
  headerIconWindowBase: ({ theme }) => ({
@@ -170,18 +178,22 @@ const windowBaseStyles = {
170
178
  * Styles for the icons wrapper of the window base component.
171
179
  * @author cesar - automatic
172
180
  * @createdAt 2024-11-18 08:11:19 - automatic
173
- * @updatedAt 2024-12-20 17:28:53 - automatic
181
+ * @updatedAt 2024-12-23 12:19:17 - automatic
174
182
  * @updatedUser cesar - automatic
175
183
  */
176
184
  iconsWrapperWindowBase: () => ({
177
185
  display: "flex",
178
- alignItems: "center"
186
+ alignItems: "center",
187
+ justifyContent: "flex-end",
188
+ flexDirection: "row",
189
+ flexWrap: "nowrap",
190
+ cursor: "pointer"
179
191
  }),
180
192
  /**
181
193
  * Styles for the dot icon of the window base component.
182
194
  * @author cesar - automatic
183
195
  * @createdAt 2024-11-22 19:40:23 - automatic
184
- * @updatedAt 2024-12-20 17:28:53 - automatic
196
+ * @updatedAt 2024-12-23 12:19:17 - automatic
185
197
  * @updatedUser cesar - automatic
186
198
  */
187
199
  pointIcon: ({ theme, ownerState }) => ({
@@ -206,7 +218,7 @@ const windowBaseStyles = {
206
218
  * Styles for the menu actions of the window base component.
207
219
  * @author cesar - automatic
208
220
  * @createdAt 2024-12-05 07:49:27 - automatic
209
- * @updatedAt 2024-12-20 17:28:53 - automatic
221
+ * @updatedAt 2024-12-23 12:19:17 - automatic
210
222
  * @updatedUser cesar - automatic
211
223
  */
212
224
  menuActionsWindowBase: () => ({
@@ -1,7 +1,6 @@
1
1
  export declare enum WindowBaseSlots {
2
2
  wrapperWindowBase = "wrapperWindowBase",
3
3
  contentWindowBase = "contentWindowBase",
4
- headerWindowBase = "headerWindowBase",
5
4
  headerContentWindowBase = "headerContentWindowBase",
6
5
  headerTitleWindowBase = "headerTitleWindowBase",
7
6
  headerSubTitleWindowBase = "headerSubTitleWindowBase",
@@ -10,7 +9,6 @@ export declare enum WindowBaseSlots {
10
9
  subtitleContainer = "subtitleContainer",
11
10
  headerIconWindowBase = "headerIconWindowBase",
12
11
  menuActionsWindowBase = "menuActionsWindowBase",
13
- closeWindowBase = "closeWindowBase",
14
12
  iconsWrapperWindowBase = "iconsWrapperWindowBase",
15
13
  headerWindowComponent = "headerWindowComponent"
16
14
  }
@@ -1,7 +1,6 @@
1
1
  var WindowBaseSlots = /* @__PURE__ */ ((WindowBaseSlots2) => {
2
2
  WindowBaseSlots2["wrapperWindowBase"] = "wrapperWindowBase";
3
3
  WindowBaseSlots2["contentWindowBase"] = "contentWindowBase";
4
- WindowBaseSlots2["headerWindowBase"] = "headerWindowBase";
5
4
  WindowBaseSlots2["headerContentWindowBase"] = "headerContentWindowBase";
6
5
  WindowBaseSlots2["headerTitleWindowBase"] = "headerTitleWindowBase";
7
6
  WindowBaseSlots2["headerSubTitleWindowBase"] = "headerSubTitleWindowBase";
@@ -10,7 +9,6 @@ var WindowBaseSlots = /* @__PURE__ */ ((WindowBaseSlots2) => {
10
9
  WindowBaseSlots2["subtitleContainer"] = "subtitleContainer";
11
10
  WindowBaseSlots2["headerIconWindowBase"] = "headerIconWindowBase";
12
11
  WindowBaseSlots2["menuActionsWindowBase"] = "menuActionsWindowBase";
13
- WindowBaseSlots2["closeWindowBase"] = "closeWindowBase";
14
12
  WindowBaseSlots2["iconsWrapperWindowBase"] = "iconsWrapperWindowBase";
15
13
  WindowBaseSlots2["headerWindowComponent"] = "headerWindowComponent";
16
14
  return WindowBaseSlots2;
@@ -10,17 +10,6 @@
10
10
  export declare const WindowBaseStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
11
11
  ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
12
12
  }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
13
- /**
14
- * Header component for the WindowBase container.
15
- */
16
- export declare const HeaderWindowStyled: import('@emotion/styled').StyledComponent<Pick<import('../subcomponents/Header').HeaderProps & Pick<import('..').WindowBaseProps, "size"> & {
17
- windowBaseColor?: import('..').WindowBaseProps["color"];
18
- windowBaseSelected?: import('..').WindowBaseProps["selected"];
19
- windowBaseVariant?: import('..').WindowBaseProps["variant"];
20
- windowBaseSize?: import('..').WindowBaseProps["size"];
21
- }, "onClose" | "title" | "size" | "selected" | "color" | "variant" | "version" | "subTitle" | "iconUrl" | "windowBaseColor" | "windowBaseSelected" | "windowBaseVariant" | "windowBaseSize"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
22
- ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
23
- }, {}, {}>;
24
13
  /**
25
14
  * Content component for the WindowBase container.
26
15
  */
@@ -42,7 +31,7 @@ export declare const HeaderContentStyled: import('@emotion/styled').StyledCompon
42
31
  /**
43
32
  * Icon component for the header.
44
33
  */
45
- export declare const IconWindowStyled: import('@emotion/styled').StyledComponent<Pick<import('../..').IconProps, keyof import('../..').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
34
+ export declare const IconWindowStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
46
35
  ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
47
36
  }, {}, {}>;
48
37
  /**
@@ -72,7 +61,7 @@ export declare const PointStyled: import('@emotion/styled').StyledComponent<impo
72
61
  /**
73
62
  * Point icon component for the header.
74
63
  */
75
- export declare const PointIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../..').IconProps, keyof import('../..').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
64
+ export declare const PointIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
76
65
  ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
77
66
  }, {}, {}>;
78
67
  /**
@@ -84,12 +73,6 @@ export declare const IconsWrapperStyled: import('@emotion/styled').StyledCompone
84
73
  /**
85
74
  * Styled component for menu actions in the header.
86
75
  */
87
- export declare const MenuActionsWindowsStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/MenuActions/types').MenuActionsProps, keyof import('../../mui_extended/MenuActions/types').MenuActionsProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
88
- ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
89
- }, {}, {}>;
90
- /**
91
- * Styled component for the close button in the header.
92
- */
93
- export declare const CloseWindowStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/IconButton/types').IconButtonProps, keyof import('../../mui_extended/IconButton/types').IconButtonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
76
+ export declare const MenuActionsWindowsStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/MenuActions/types').MenuActionsProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "children" | "onClose" | "title" | "component" | "id" | "action" | "container" | "components" | "hidden" | "color" | "content" | "style" | "disabled" | "width" | "marginLeft" | "marginBottom" | "className" | "classes" | "onChange" | "elevation" | "sx" | "marginRight" | "marginTop" | "transformOrigin" | "transitionDuration" | "translate" | "TransitionComponent" | "TransitionProps" | "slots" | "slotProps" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onTransitionEnter" | "onTransitionExited" | "anchorEl" | "anchorOrigin" | "anchorPosition" | "anchorReference" | "marginThreshold" | "PaperProps" | "arrowType" | keyof import('react').RefAttributes<HTMLDivElement> | "badgeContent" | "sizes" | "iconButtonClassName" | "objItem" | "urlIcon" | "menuActions" | "toolTip" | "endListElement" | "menuActionSx" | "externalOpen" | "externalClose"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').WindowBaseOwnerState> & Record<string, unknown> & {
94
77
  ownerState: Partial<import('..').WindowBaseOwnerState> & Record<string, unknown>;
95
78
  }, {}, {}>;