@m4l/components 9.3.4 → 9.3.6

package/@types/types.d.ts

@@ -144,6 +144,7 @@ import { RHFUploadSingleFileOwnerState, RHFUploadSingleFileSlotsType } from '../
 import { ChipStatusFormatterSlotsType } from '../components/formatters/ChipStatusFormatter/types';
 import { RHFUploadImageOwnerState, RHFUploadImageSlotsType } from '../components/hook-form/RHFUpload/RHFUploadImage/types';
 import { PrintingSystemOwnerState, PrintingSystemSlotsType } from '../components/PrintingSystem/types';
+import { SettingsLayoutOwnerState, SettingsLayoutSlotsType } from '../components/SettingsLayout/types';
 import { ScrollBarOwnerState, ScrollBarSlotsType } from '../components/ScrollBar/types';
 import { SplitLayoutOwnerState } from '../components/extended/React-resizable-panels/types';
 import { ObjectLogsOwnerState, ObjectLogsSlotsType } from '../components/ObjectLogs/types';
@@ -225,12 +226,14 @@ declare module '@mui/material/styles' {
     M4LChipStatusFormatter: ChipStatusFormatterSlotsType;
     M4LRHFUploadImage: RHFUploadImageSlotsType;
     M4LPrintingSystem: PrintingSystemSlotsType;
+    M4LSettingsLayout: SettingsLayoutSlotsType;
     M4LScrollbar: ScrollBarSlotsType;
     M4LSplitLayout: SplitLayoutOwnerState;
     M4LObjectLogs: ObjectLogsSlotsType;
     M4LLanguagePopover: LanguagePopoverSlotsType;
     M4LCard: CardSlotsType;
     M4LContainerFlow: ContainerFlowSlotsType;
+    M4LSettingsLayoutBase: SettingsLayoutSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -306,12 +309,14 @@ declare module '@mui/material/styles' {
     M4LChipStatusFormatter: Partial<ChipStatusFormatterOwnerState>;
     M4LRHFUploadImage: Partial<RHFUploadImageOwnerState>;
     M4LPrintingSystem: Partial<PrintingSystemOwnerState>;
+    M4LSettingsLayout: Partial<SettingsLayoutOwnerState>;
     M4LScrollBar: Partial<ScrollBarOwnerState>;
     M4LSplitLayout: Partial<SplitLayoutOwnerState>;
     M4LObjectLogs: Partial<ObjectLogsOwnerState>;
     M4LLanguagePopover: Partial<LanguagePopoverOwnerState>;
     M4LCard: Partial<CardOwnerState>;
     M4LContainerFlow: Partial<ContainerFlowOwnerState>;
+    M4LSettingsLayoutBase: Partial<SettingsLayoutOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -684,6 +689,11 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LPrintingSystem'];
       variants?: ComponentsVariants['M4LPrintingSystem'];
     };
+    M4LSettingsLayout?: {
+      defaultProps?: ComponentsPropsList['M4LSettingsLayout'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LSettingsLayout'];
+      variants?: ComponentsVariants['M4LSettingsLayout'];
+    };
     M4LScrollBar?: {
       defaultProps?: ComponentsPropsList['M4LScrollBar'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LScrollBar'];
@@ -714,5 +724,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LContainerFlow'];
       variants?: ComponentsVariants['M4LContainerFlow'];
     };
+    M4LSettingsLayoutBase?: {
+      defaultProps?: ComponentsPropsList['M4LSettingsLayoutBase'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LSettingsLayoutBase'];
+      variants?: ComponentsVariants['M4LSettingsLayoutBase'];
+    };
   }
 }

package/components/ObjectLogs/subcomponents/DetailDialog/index.js

@@ -1,13 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { useNetwork } from "@m4l/core";
-import { useHostTheme } from "@m4l/graphics";
-import ReactJson from "@microlink/react-json-view";
 import { a as OBJECT_LOGS_M4L_END_POINT, b as OBJECT_LOGS_OTHERS_END_POINT } from "../../constants.js";
+import { R as ReactJsonViewer } from "../../../extended/React-Json-Viewer/ReactJsonViewer.js";
 function DetailDialog(props) {
-  const { logId, theme, type } = props;
+  const { logId, type } = props;
   const { networkOperation } = useNetwork();
-  const { hostThemeOptions } = useHostTheme();
   const [detail, setDetail] = useState({});
   useEffect(() => {
     let mounted = true;
@@ -27,12 +25,9 @@ function DetailDialog(props) {
       mounted = false;
     };
   }, []);
-  const modeTheme = hostThemeOptions.palette?.mode;
-  const appliedTheme = theme || (modeTheme === "dark" ? "summerfruit" : "rjv-default");
   return /* @__PURE__ */ jsx(
-    ReactJson,
+    ReactJsonViewer,
     {
-      theme: appliedTheme,
       name: null,
       sortKeys: true,
       displayDataTypes: false,

package/components/ObjectLogs/types.d.ts

@@ -1,5 +1,4 @@
 import { Maybe } from '@m4l/core';
-import { ThemeKeys, ThemeObject } from '@microlink/react-json-view';
 import { Theme } from '@mui/material';
 import { ObjectLogsSlots } from './slots/ObjectLogsEnum';
 import { OBJECT_LOGS_KEY_COMPONENT } from './constants';
@@ -35,7 +34,6 @@ export interface ObjectLogsQueryParams {
 export interface DetailDialogProps {
     type: 'm4l' | 'other';
     logId: number | string;
-    theme?: ThemeKeys | ThemeObject;
 }
 export type ObjectLogsSlotsType = keyof typeof ObjectLogsSlots;
 export type ObjectLogsOwnerState = {};

package/components/SettingsLayout/SettingsLayout.d.ts

@@ -0,0 +1,5 @@
+import { SettingsLayoutProps } from './types';
+/**
+ * todo
+ */
+export declare const SettingsLayout: (props: SettingsLayoutProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/SettingsLayout/SettingsLayout.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useEnvironment, FlagsProvider, ModuleDictionaryProvider, ModuleSkeletonProvider, CommonFlags } from "@m4l/core";
+import { useLocales, useThemeSettingsStore } from "@m4l/graphics";
+import { S as SETTINGS_LAYOUT_DEFAULT_WIDTH } from "./constants.js";
+import { useMemo } from "react";
+import { S as SettingsLayoutBase } from "./subcomponents/SettingsLayoutBase/SettingsLayoutBase.js";
+const SettingsLayout = (props) => {
+  const {
+    width = SETTINGS_LAYOUT_DEFAULT_WIDTH
+  } = props;
+  const currentLang = useLocales().currentLocale?.localeString;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { open } = useThemeSettingsStore((state) => state);
+  const prefixPathIcon = `${host_static_assets}/${environment_assets}`;
+  const componentsDictionary = useMemo(() => {
+    return [];
+  }, []);
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(FlagsProvider, { children: /* @__PURE__ */ jsx(
+    ModuleDictionaryProvider,
+    {
+      isAuth: false,
+      moduleId: "theme_settings",
+      componentsDictionary,
+      currentLang,
+      children: /* @__PURE__ */ jsx(ModuleSkeletonProvider, { flags: [CommonFlags.FLAG_DICTIONARY_LOADED], children: /* @__PURE__ */ jsx(SettingsLayoutBase, { prefixPathIcon, width }) })
+    }
+  ) });
+};
+export {
+  SettingsLayout as S
+};

package/components/SettingsLayout/SettingsLayout.styles.d.ts

@@ -0,0 +1,2 @@
+import { SettingsLayoutstyles } from './types';
+export declare const settingsLayoutStyles: SettingsLayoutstyles;

package/components/SettingsLayout/SettingsLayout.styles.js

@@ -0,0 +1,270 @@
+import { PRIMARY_COLORS_LIGHT, PRIMARY_COLORS_DARK } from "@m4l/styles";
+import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
+import { v as varFade } from "../animate/variants/fade.js";
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+const settingsLayoutStyles = {
+  /**
+   * Estilos css de la ranura root
+   */
+  root: ({ theme, ownerState }) => ({
+    top: 0,
+    right: 0,
+    bottom: 0,
+    transform: "unset!important",
+    padding: theme.vars.size.baseSpacings.sp6,
+    opacity: "1!important",
+    display: "flex",
+    position: "fixed",
+    width: ownerState?.width,
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp6,
+    boxShadow: theme.vars.customShadows?.z4,
+    overflowY: "auto",
+    zIndex: theme.zIndex.drawer + 3,
+    ...ownerState?.themeDirection === "ltr" && {
+      borderTopLeftRadius: theme.vars.size.borderRadius.r3,
+      borderBottomLeftRadius: theme.vars.size.borderRadius.r3
+    },
+    ...ownerState?.themeDirection === "rtl" && {
+      borderTopRightRadius: theme.vars.size.borderRadius.r3,
+      borderBottomRightRadius: theme.vars.size.borderRadius.r3
+    },
+    border: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.border.secondary,
+    backgroundColor: theme.vars.palette.background.base,
+    ...ownerState?.themeDirection !== "rtl" ? varFade({
+      distance: ownerState?.width,
+      durationIn: 0.32,
+      durationOut: 0.32
+    }).inRight : varFade({
+      distance: ownerState?.width,
+      durationIn: 0.32,
+      durationOut: 0.32
+    }).inLeft
+  }),
+  /**
+   * Estilos css de la ranura backdrop
+   */
+  backdrop: ({ theme }) => ({
+    background: "transparent",
+    zIndex: theme.zIndex.drawer + 1,
+    transform: "unset",
+    opacity: 1
+  }),
+  /**
+   * Estilos css de la ranura header
+   */
+  headerContainer: () => ({
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }),
+  /**
+   * Estilos css de la ranura headerActions
+   */
+  headerActions: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    width: "fit-content",
+    alignItems: "center",
+    padding: theme.vars.size.baseSpacings["sp0-5"],
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    borderRadius: theme.vars.size.borderRadius.r2,
+    border: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.border.disabled,
+    backgroundColor: theme.vars.palette.background.default
+  }),
+  /**
+   * Estilos css de la ranura content
+   */
+  bodyContent: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    position: "relative",
+    overflowY: "auto",
+    width: "100%",
+    gap: theme.vars.size.baseSpacings.sp6
+  }),
+  /**
+   * Estilos css de la ranura settingContainer
+   */
+  settingContainer: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: theme.vars.size.baseSpacings.sp4,
+    gap: theme.vars.size.baseSpacings.sp4,
+    borderRadius: theme.vars.size.borderRadius.r2,
+    backgroundColor: theme.vars.palette.background.default
+  }),
+  /**
+   * Estilos css de la ranura settingIconTitle
+   */
+  settingIconTitle: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    gap: theme.vars.size.baseSpacings["sp2-5"],
+    justifyContent: "flex-start",
+    alignItems: "center"
+  }),
+  /**
+   * Estilos css de la ranura settingItemContent
+   */
+  settingItemContent: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    gap: theme.vars.size.baseSpacings.sp4,
+    justifyContent: "space-between"
+  }),
+  /**
+   * Estilos css de la ranura settingItem
+   */
+  settingItem: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "100%",
+    borderRadius: theme.vars.size.borderRadius.r2,
+    border: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.border.disabled,
+    padding: theme.vars.size.baseSpacings.sp2,
+    outline: "unset",
+    "& .M4LIcon-root": {
+      width: theme.vars.size.baseSpacings.sp5,
+      height: theme.vars.size.baseSpacings.sp5
+    },
+    ...ownerState?.onChange ? {
+      transition: "all 0.3s ease",
+      cursor: "pointer",
+      "&:hover": {
+        backgroundColor: theme.vars.palette.default.hoverOpacity
+      },
+      "&:active": {
+        backgroundColor: theme.vars.palette.default.activeOpacity
+      },
+      "&:focus-visible": {
+        borderColor: theme.vars.palette.border.main,
+        boxShadow: theme.vars.customShadows?.primary
+      },
+      ...ownerState?.selected ? {
+        borderColor: theme.vars.palette.border.main,
+        backgroundColor: theme.vars.palette.primary.enabledOpacity,
+        "&:hover": {
+          backgroundColor: theme.vars.palette.primary.hoverOpacity
+        },
+        "&:active": {
+          backgroundColor: theme.vars.palette.primary.activeOpacity
+        }
+      } : {}
+    } : {}
+  }),
+  /**
+   * Estilos css de la ranura settingItemColorContainer
+   */
+  settingItemColorContainer: () => ({
+    display: "flex",
+    flexDirection: "row",
+    width: "auto",
+    height: "auto",
+    position: "relative"
+  }),
+  /**
+   * Estilos css de la ranura settingItemColor
+   */
+  settingItemColor: ({ theme, ownerState }) => {
+    const presetColor = ownerState?.color ?? "patronus";
+    const presetPalette = ownerState?.mode === "light" ? PRIMARY_COLORS_LIGHT[presetColor] : PRIMARY_COLORS_DARK[presetColor];
+    return {
+      ...getSizeStyles(
+        theme,
+        ownerState?.size || "medium",
+        "box",
+        (size) => ({
+          width: size,
+          height: size
+        })
+      ),
+      "&:focus-visible": {
+        borderColor: theme.vars.palette.border.main,
+        boxShadow: theme.vars.customShadows?.primary,
+        "&:after": {
+          content: '""',
+          position: "absolute",
+          inset: "-4px",
+          borderRadius: "40% / 45%",
+          boxShadow: `0 0 0 1px ${presetPalette.focus}`,
+          zIndex: 1
+        }
+      },
+      ...ownerState?.selected ? {
+        "&:before": {
+          content: '""',
+          position: "absolute",
+          inset: "0",
+          borderRadius: theme.vars.size.borderRadius.r3,
+          boxShadow: `0 0 0 1px ${presetPalette.enabled}`,
+          backgroundColor: presetPalette.enabledOpacity,
+          zIndex: 1
+        }
+      } : {},
+      "& .M4LIcon-icon": {
+        display: "flex",
+        flexDirection: "row",
+        backgroundColor: presetPalette.enabled,
+        outline: "unset",
+        position: "relative",
+        overflow: "visible",
+        transition: "all 0.3s ease",
+        ...ownerState?.onChange ? {
+          cursor: "pointer",
+          transition: "all 0.3s ease",
+          "&:hover": {
+            backgroundColor: presetPalette.hover
+          },
+          "&:active": {
+            backgroundColor: presetPalette.active
+          }
+        } : {}
+      }
+    };
+  },
+  /**
+   * Estilos css de la ranura settingFullscreen
+   */
+  settingFullscreen: ({ theme, ownerState }) => ({
+    /*  borderRadius: theme.vars.size.borderRadius['r1-5'],
+    border: 'unset',
+    outline: 'unset', */
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.vars.size.borderRadius["r1-5"],
+    "& .MuiTypography-root": {
+      width: "fit-content",
+      ...getTypographyStyles(
+        theme.generalSettings.isMobile,
+        ownerState?.size || "medium",
+        "bodyDens"
+      )
+    }
+  }),
+  /**
+   * Estilos css de la ranura icon
+   */
+  icon: {},
+  /**
+   * Estilos css de la ranura typography
+   */
+  typography: {},
+  /**
+   * Estilos css de la ranura divider
+   */
+  divider: {}
+};
+export {
+  settingsLayoutStyles as s
+};

package/components/SettingsLayout/constants.d.ts

@@ -0,0 +1,7 @@
+import { SettingsLayoutSlots } from './slots/SettingsLayoutEnum';
+/**
+ * Nombre de clase del componente.
+ */
+export declare const SETTINGS_LAYOUT_COMPONENT_KEY = "M4LSettingsLayout";
+export declare const SETTINGS_LAYOUT_CLASSES: Record<keyof typeof SettingsLayoutSlots, string>;
+export declare const SETTINGS_LAYOUT_DEFAULT_WIDTH = 300;

package/components/SettingsLayout/constants.js

@@ -0,0 +1,10 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { S as SettingsLayoutSlots } from "./slots/SettingsLayoutEnum.js";
+const SETTINGS_LAYOUT_COMPONENT_KEY = "M4LSettingsLayout";
+const SETTINGS_LAYOUT_CLASSES = getComponentClasses(SETTINGS_LAYOUT_COMPONENT_KEY, SettingsLayoutSlots);
+const SETTINGS_LAYOUT_DEFAULT_WIDTH = 300;
+export {
+  SETTINGS_LAYOUT_DEFAULT_WIDTH as S,
+  SETTINGS_LAYOUT_COMPONENT_KEY as a,
+  SETTINGS_LAYOUT_CLASSES as b
+};

package/components/SettingsLayout/dictionary.d.ts

@@ -0,0 +1,8 @@
+export declare const DICTIONARY: {
+    MODE: string;
+    DIRECTION: string;
+    PRESETS: string;
+    EXIT_FULLSCREEN: string;
+    FULLSCREEN: string;
+    MODULE_NAME: string;
+};

package/components/SettingsLayout/dictionary.js

@@ -0,0 +1,11 @@
+const DICTIONARY = {
+  MODE: "mode",
+  DIRECTION: "direction",
+  PRESETS: "presets",
+  EXIT_FULLSCREEN: "exit_fullscreen",
+  FULLSCREEN: "fullscreen",
+  MODULE_NAME: "module_name"
+};
+export {
+  DICTIONARY as D
+};

package/components/SettingsLayout/icons.d.ts

@@ -0,0 +1,14 @@
+export declare const PATH_ICONS: {
+    REFRESH: string;
+    CLOSE: string;
+    MOON: string;
+    SUN: string;
+    MODE: string;
+    PALETTE: string;
+    DIRECTION: string;
+    ALIGN_LEFT: string;
+    ALIGN_RIGHT: string;
+    FULLSCREEN: string;
+    FULLSCREEN_EXIT: string;
+    COLOR: string;
+};

package/components/SettingsLayout/icons.js

@@ -0,0 +1,17 @@
+const PATH_ICONS = {
+  REFRESH: "frontend/components/setting_layout/assets/icons/refresh.svg",
+  CLOSE: "frontend/components/setting_layout/assets/icons/closeSmall.svg",
+  MOON: "frontend/components/setting_layout/assets/icons/CloudMoon.svg",
+  SUN: "frontend/components/setting_layout/assets/icons/Sun.svg",
+  MODE: "frontend/components/setting_layout/assets/icons/eclipse.svg",
+  PALETTE: "frontend/components/setting_layout/assets/icons/palette.svg",
+  DIRECTION: "frontend/components/setting_layout/assets/icons/signpost.svg",
+  ALIGN_LEFT: "frontend/components/setting_layout/assets/icons/align-start-vertical.svg",
+  ALIGN_RIGHT: "frontend/components/setting_layout/assets/icons/align-end-vertical.svg",
+  FULLSCREEN: "frontend/components/setting_layout/assets/icons/FrameCorners.svg",
+  FULLSCREEN_EXIT: "frontend/components/setting_layout/assets/icons/exit_fullscreen.svg",
+  COLOR: "frontend/components/setting_layout/assets/icons/color_preset.svg"
+};
+export {
+  PATH_ICONS as P
+};

package/components/SettingsLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { SettingsLayout } from './SettingsLayout';
+export type { SettingsLayoutProps } from './types';

package/components/SettingsLayout/index.js

@@ -0,0 +1 @@
+

package/components/SettingsLayout/slots/SettingsLayoutEnum.d.ts

@@ -0,0 +1,17 @@
+export declare enum SettingsLayoutSlots {
+    root = "root",
+    backdrop = "backdrop",
+    icon = "icon",
+    typography = "typography",
+    divider = "divider",
+    headerContainer = "headerContainer",
+    headerActions = "headerActions",
+    bodyContent = "bodyContent",
+    settingContainer = "settingContainer",
+    settingIconTitle = "settingIconTitle",
+    settingItem = "settingItem",
+    settingItemColor = "settingItemColor",
+    settingItemColorContainer = "settingItemColorContainer",
+    settingItemContent = "settingItemContent",
+    settingFullscreen = "settingFullscreen"
+}

package/components/SettingsLayout/slots/SettingsLayoutEnum.js

@@ -0,0 +1,21 @@
+var SettingsLayoutSlots = /* @__PURE__ */ ((SettingsLayoutSlots2) => {
+  SettingsLayoutSlots2["root"] = "root";
+  SettingsLayoutSlots2["backdrop"] = "backdrop";
+  SettingsLayoutSlots2["icon"] = "icon";
+  SettingsLayoutSlots2["typography"] = "typography";
+  SettingsLayoutSlots2["divider"] = "divider";
+  SettingsLayoutSlots2["headerContainer"] = "headerContainer";
+  SettingsLayoutSlots2["headerActions"] = "headerActions";
+  SettingsLayoutSlots2["bodyContent"] = "bodyContent";
+  SettingsLayoutSlots2["settingContainer"] = "settingContainer";
+  SettingsLayoutSlots2["settingIconTitle"] = "settingIconTitle";
+  SettingsLayoutSlots2["settingItem"] = "settingItem";
+  SettingsLayoutSlots2["settingItemColor"] = "settingItemColor";
+  SettingsLayoutSlots2["settingItemColorContainer"] = "settingItemColorContainer";
+  SettingsLayoutSlots2["settingItemContent"] = "settingItemContent";
+  SettingsLayoutSlots2["settingFullscreen"] = "settingFullscreen";
+  return SettingsLayoutSlots2;
+})(SettingsLayoutSlots || {});
+export {
+  SettingsLayoutSlots as S
+};