@m4l/components 9.3.0 → 9.3.1-B21072025-beta.2

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';
@@ -225,11 +226,13 @@ declare module '@mui/material/styles' {
     M4LChipStatusFormatter: ChipStatusFormatterSlotsType;
     M4LRHFUploadImage: RHFUploadImageSlotsType;
     M4LPrintingSystem: PrintingSystemSlotsType;
+    M4LSettingsLayout: SettingsLayoutSlotsType;
     M4LScrollbar: ScrollBarSlotsType;
     M4LSplitLayout: SplitLayoutOwnerState;
     M4LObjectLogs: ObjectLogsSlotsType;
     M4LLanguagePopover: LanguagePopoverSlotsType;
     M4LContainerFlow: ContainerFlowSlotsType;
+    M4LSettingsLayoutBase: SettingsLayoutSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -305,11 +308,13 @@ 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>;
     M4LContainerFlow: Partial<ContainerFlowOwnerState>;
+    M4LSettingsLayoutBase: Partial<SettingsLayoutOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -682,6 +687,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'];
@@ -707,5 +717,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/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -17,6 +17,7 @@ function getComparator(columns, sortColumn) {
     return column.customSort;
   }
   switch (typeOrder) {
+    //Si el tipo de dato de la columna es un numerico, retorna una función de ordenamiento numérica
     case "number":
       return (a, b) => {
         try {
@@ -25,6 +26,7 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
+    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {

package/components/NumberInput/hooks/useNumberInput/useNumberInput.js

@@ -56,9 +56,11 @@ const useNumberInput = (parameters) => {
     (event, field, fieldValue, reason) => {
       if (field === "value" && typeof fieldValue !== "string") {
         switch (reason) {
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:inputChange":
             onChange?.(event, fieldValue);
             break;
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:clamp":
             onChange?.(event, fieldValue);
             break;

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;

package/components/SettingsLayout/SettingsLayout.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { useEnvironment, ModuleDictionaryProvider, ModuleSkeletonProvider, BaseProvider } from "@m4l/core";
+import { useLocales } from "@m4l/graphics";
+import { S as SETTINGS_LAYOUT_DEFAULT_WIDTH, a as SETTINGS_LAYOUT_CLASSES } from "./constants.js";
+import { S as SettingsLayoutBase } from "./subcomponents/SettingsLayoutBase/SettingsLayoutBase.js";
+const SettingsLayout = (props) => {
+  const {
+    onResetSetting,
+    handleOpen,
+    onChangeMode,
+    onChangeColor,
+    onChangeDirection,
+    onChangeLayout,
+    onToggleStretch,
+    open,
+    themeUserSettings,
+    presetsOptionsColorMain,
+    width = SETTINGS_LAYOUT_DEFAULT_WIDTH
+  } = props;
+  const currentLang = useLocales().currentLocale?.localeString;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const prefixPathIcon = `${host_static_assets}/${environment_assets}`;
+  return /* @__PURE__ */ jsx(
+    ModuleDictionaryProvider,
+    {
+      isAuth: false,
+      moduleId: "theme_settings",
+      componentsDictionary: [],
+      currentLang,
+      children: /* @__PURE__ */ jsx(ModuleSkeletonProvider, { flags: ["dictionary_loaded"], children: /* @__PURE__ */ jsx(BaseProvider, { value: {
+        onResetSetting,
+        handleOpen,
+        onChangeMode,
+        onChangeColor,
+        onChangeDirection,
+        onChangeLayout,
+        onToggleStretch,
+        open,
+        themeUserSettings,
+        presetsOptionsColorMain,
+        width,
+        classes: SETTINGS_LAYOUT_CLASSES,
+        prefixPathIcon
+      }, children: /* @__PURE__ */ jsx(SettingsLayoutBase, {}) }) })
+    }
+  );
+};
+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,245 @@
+import { PRIMARY_COLORS_LIGHT, PRIMARY_COLORS_DARK } from "@m4l/styles";
+import { v as varFade } from "../animate/variants/fade.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 settingItemColor
+   */
+  settingItemColor: ({ theme, ownerState }) => {
+    const presetColor = ownerState?.color ?? "patronus";
+    const presetPalette = ownerState?.mode === "light" ? PRIMARY_COLORS_LIGHT[presetColor] : PRIMARY_COLORS_DARK[presetColor];
+    return {
+      display: "flex",
+      flexDirection: "row",
+      width: "24px",
+      height: "24px",
+      borderRadius: theme.vars.size.borderRadius.r2,
+      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
+        },
+        "&:focus-visible": {
+          borderColor: theme.vars.palette.border.main,
+          boxShadow: theme.vars.customShadows?.primary,
+          "&:after": {
+            content: '""',
+            position: "absolute",
+            inset: "-5px",
+            borderRadius: theme.vars.size.borderRadius.r3,
+            boxShadow: `0 0 0 1px ${presetPalette.focus}`,
+            zIndex: 1
+          }
+        },
+        ...ownerState?.selected ? {
+          "&:before": {
+            content: '""',
+            position: "absolute",
+            inset: "-5px",
+            borderRadius: theme.vars.size.borderRadius.r3,
+            boxShadow: `0 0 0 1px ${presetPalette.enabled}`,
+            backgroundColor: presetPalette.enabledOpacity,
+            zIndex: 1
+          }
+        } : {}
+      } : {}
+    };
+  },
+  /**
+   * Estilos css de la ranura settingFullscreen
+   */
+  settingFullscreen: ({ theme }) => ({
+    /*  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"
+    }
+  }),
+  /**
+   * 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_CLASSES as a,
+  SETTINGS_LAYOUT_COMPONENT_KEY as b
+};

package/components/SettingsLayout/dictionary.d.ts

@@ -0,0 +1,56 @@
+export declare const DICTIONARY: {
+    COMPANY_SLOGAN: string;
+    COMPANY_NAME: string;
+    MODE: string;
+    DIRECTION: string;
+    PRESETS: string;
+    STRETCH: string;
+    EXIT_FULLSCREEN: string;
+    FULLSCREEN: string;
+    COMPANY_NAME_SUBTITLE: string;
+    VALIDATION_EMAIL_INVALID: string;
+    VALIDATION_PWD_REQUIRED: string;
+    LABEL_BACK_LOGIN: string;
+    LABEL_EMAIL: string;
+    LABEL_INTRO: string;
+    MODULE_DESCRIPTION: string;
+    MODULE_LEYEND: string;
+    MODULE_NAME: string;
+    LABEL_PWD: string;
+    LABEL_PWD_CONFIRM: string;
+    LABEL_FORGOT: string;
+    LABEL_NOT_MEMBER: string;
+    LABEL_REGISTER: string;
+    LABEL_REMEMBERME: string;
+    LABEL_USER: string;
+    P_HOLDER_USER: string;
+    VALIDATION_USER_REQUIRED: string;
+    VALIDATION_EMAIL_REQUIRED: string;
+    VALIDATION_PWD_INVALID: string;
+    LABEL_FIRST_PHONE: string;
+    LABEL_COMPANY_NAME: string;
+    LABEL_COUNTRY_LABORATORY: string;
+    LABEL_EMAIL_CONFIRM: string;
+    LABEL_FIRST_NAME: string;
+    LABEL_LAST_NAME: string;
+    LABEL_MEMBER: string;
+    LABEL_STATE: string;
+    LABEL_CITY: string;
+    LABEL_ADDRESS: string;
+    LABEL_COUNTRY_CLIENT: string;
+    VALIDATION_FIRST_PHONE_REQUIRED: string;
+    VALITATION_COMPONY_NAME_REQUIRED: string;
+    VALIDATION_COUNTRY_LABORATORY_REQUIRED: string;
+    VALIDATION_COUNTRY_CLIENT_REQUIRED: string;
+    VALIDATION_EMAIL_CONFIRM_MATCHES: string;
+    VALIDATION_FIRST_NAME_REQUIRED: string;
+    VALIDATION_LAST_NAME_REQUIRED: string;
+    VALIDATION_STATE_REQUIRED: string;
+    VALIDATION_CITY_REQUIRED: string;
+    VALIDATION_ADDRESS_REQUIRED: string;
+    MODULE_DESCRIPTION_COMPLETED: string;
+    LABEL_CHANGE_PASSWORD_COMPLETED: string;
+    VALIDATION_PWD_CONFIRM_MATCHES: string;
+    NOT_FOUND_TITLE: string;
+    NOT_FOUND_DESCRIPTION: string;
+};

package/components/SettingsLayout/dictionary.js

@@ -0,0 +1,12 @@
+const DICTIONARY = {
+  /* ---------------------Settings 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,13 @@
+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;
+};

package/components/SettingsLayout/icons.js

@@ -0,0 +1,16 @@
+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"
+};
+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,16 @@
+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",
+    settingItemContent = "settingItemContent",
+    settingFullscreen = "settingFullscreen"
+}

package/components/SettingsLayout/slots/SettingsLayoutEnum.js

@@ -0,0 +1,20 @@
+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["settingItemContent"] = "settingItemContent";
+  SettingsLayoutSlots2["settingFullscreen"] = "settingFullscreen";
+  return SettingsLayoutSlots2;
+})(SettingsLayoutSlots || {});
+export {
+  SettingsLayoutSlots as S
+};