@m4l/components 9.3.34 → 9.3.35

package/@types/export.d.ts

@@ -241,5 +241,8 @@ declare module '@mui/material/styles' {
     M4LIconsFormatter?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LIconsFormatter'];
     };
+    M4LImageFormatter?: {
+      styleOverrides?: ComponentsOverrides<Theme>['M4LImageFormatter'];
+    };
   }
 }

package/@types/types.d.ts

@@ -304,6 +304,10 @@ import {
   IconsFormatterOwnerState,
   IconsFormatterSlotsType,
 } from '../components/formatters/IconsFormatter/types';
+import {
+  ImageFormatterOwnerState,
+  ImageFormatterSlotsType,
+} from '../components/formatters/ImageFormatter';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -397,6 +401,7 @@ declare module '@mui/material/styles' {
     M4LMFIsolationApp: MFIsolationAppSlotsType;
     M4LTagsFormatter: TagsFormatterSlotsType;
     M4LIconsFormatter: IconsFormatterSlotsType;
+    M4LImageFormatter: ImageFormatterSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -489,6 +494,7 @@ declare module '@mui/material/styles' {
     M4LMFIsolationApp: Partial<MFIsolationAppOwnerState>;
     M4LTagsFormatter: Partial<TagsFormatterOwnerState>;
     M4LIconsFormatter: Partial<IconsFormatterOwnerState>;
+    M4LImageFormatter: Partial<ImageFormatterOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -946,5 +952,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LIconsFormatter'];
       variants?: ComponentsVariants['M4LIconsFormatter'];
     };
+    M4LImageFormatter?: {
+      defaultProps?: ComponentsPropsList['M4LImageFormatter'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LImageFormatter'];
+      variants?: ComponentsVariants['M4LImageFormatter'];
+    };
   }
 }

package/components/DataGrid/Datagrid.styles.js

@@ -270,6 +270,7 @@ const dataGridStyles = {
       border: theme.vars.size.borderStroke.container,
       borderColor: theme.vars.palette?.border.secondary,
       "& .rdg ": {
+        scrollBehavior: "smooth",
         display: "grid",
         contain: "content",
         boxSizing: "border-box",

package/components/DataGrid/formatters/ColumnImageFormatter/ImageFormatterCell.d.ts

@@ -0,0 +1,13 @@
+import { ColumnImageFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
+/**
+ * Componente interno que renderiza la celda y puede usar hooks
+ */
+export declare function ImageFormatterCell<TRow>(props: {
+    formatterProps: RenderCellProps<TRow>;
+    fieldValue: ColumnImageFormatterProps<TRow>['fieldValue'];
+    fieldText: ColumnImageFormatterProps<TRow>['fieldText'];
+    width?: ColumnImageFormatterProps<TRow>['width'];
+    height?: ColumnImageFormatterProps<TRow>['height'];
+    cover?: ColumnImageFormatterProps<TRow>['cover'];
+}): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnImageFormatter/ImageFormatterCell.js

@@ -0,0 +1,33 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useContext } from "react";
+import { getPropertyByString } from "@m4l/core";
+import { I as IMAGE_SIZES } from "./constants.js";
+import { a as DataGridContext } from "../../contexts/DataGridContext/index.js";
+import { I as ImageFormatter } from "../../../formatters/ImageFormatter/ImageFormatter.js";
+function ImageFormatterCell(props) {
+  const { formatterProps, fieldValue, fieldText, width, height, cover } = props;
+  const context = useContext(DataGridContext);
+  const viewMode = context?.viewMode ?? "cards";
+  const hasCustomSize = width !== void 0 && height !== void 0;
+  const finalWidth = viewMode === "cards" && hasCustomSize ? width : viewMode === "cards" ? IMAGE_SIZES.cards : void 0;
+  const finalHeight = viewMode === "cards" && hasCustomSize ? height : viewMode === "cards" ? IMAGE_SIZES.cards : void 0;
+  const src = getPropertyByString(formatterProps.row, fieldValue) ?? void 0;
+  const text = fieldText ? getPropertyByString(formatterProps.row, fieldText) ?? void 0 : void 0;
+  if (!src) {
+    return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+  }
+  return /* @__PURE__ */ jsx(
+    ImageFormatter,
+    {
+      src,
+      alt: text || src,
+      width: finalWidth,
+      height: finalHeight,
+      text,
+      cover
+    }
+  );
+}
+export {
+  ImageFormatterCell as I
+};

package/components/DataGrid/formatters/ColumnImageFormatter/constants.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Dimensiones de imagen según densidad en vista tabla
+ */
+export declare const IMAGE_SIZES: {
+    readonly cards: 60;
+};

package/components/DataGrid/formatters/ColumnImageFormatter/constants.js

@@ -0,0 +1,6 @@
+const IMAGE_SIZES = {
+  cards: 60
+};
+export {
+  IMAGE_SIZES as I
+};

package/components/DataGrid/formatters/ColumnImageFormatter/formatter.d.ts

@@ -0,0 +1,8 @@
+import { RenderCellProps } from 'react-data-grid';
+import { ColumnImageFormatterProps } from './types';
+/**
+ * Formatter para mostrar imágenes con o sin texto
+ * @param props - Propiedades del formatter
+ * @returns Función que recibe RenderCellProps y retorna el ImageFormatter
+ */
+export declare function ColumnImageFormatter<TRow>(props: ColumnImageFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnImageFormatter/formatter.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { I as ImageFormatterCell } from "./ImageFormatterCell.js";
+function ColumnImageFormatter(props) {
+  const { fieldValue, fieldText, cover } = props;
+  const width = "width" in props && props.width !== void 0 ? props.width : void 0;
+  const height = "height" in props && props.height !== void 0 ? props.height : void 0;
+  const formatter = (formatterProps) => {
+    return /* @__PURE__ */ jsx(
+      ImageFormatterCell,
+      {
+        formatterProps,
+        fieldValue,
+        fieldText,
+        width,
+        height,
+        cover
+      }
+    );
+  };
+  formatter.__imageFormatterHeight = height ?? 60;
+  return formatter;
+}
+export {
+  ColumnImageFormatter as C
+};

package/components/DataGrid/formatters/ColumnImageFormatter/index.d.ts

@@ -0,0 +1,3 @@
+export { useColumnImage } from './useColumnImage';
+export { ColumnImageFormatter } from './formatter';
+export * from './types';

package/components/DataGrid/formatters/ColumnImageFormatter/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/formatters/ColumnImageFormatter/tests/ColumnImageFormatter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/formatters/ColumnImageFormatter/types.d.ts

@@ -0,0 +1,44 @@
+import { DeepKeyOf } from '../../../../utils/types';
+interface ColumnImageFormatterBaseProps<TRow> {
+    /**
+     * Campo del row que contiene la URL de la imagen
+     */
+    fieldValue: DeepKeyOf<TRow>;
+    /**
+     * Campo opcional del row que contiene el texto a mostrar junto a la imagen
+     */
+    fieldText?: DeepKeyOf<TRow>;
+    /**
+     * Si es true, la imagen usa object-fit: cover (recorta si es necesario)
+     * Si es false o undefined, usa object-fit: contain (muestra completa)
+     * @default false
+     */
+    cover?: boolean;
+}
+/**
+ * Props sin dimensiones personalizadas (usa IMAGE_SIZES.cards por defecto)
+ */
+interface ColumnImageFormatterWithoutSize<TRow> extends ColumnImageFormatterBaseProps<TRow> {
+    width?: never;
+    height?: never;
+}
+/**
+ * Props con dimensiones personalizadas para vista cards
+ * IMPORTANTE: width y height deben proporcionarse juntas
+ */
+interface ColumnImageFormatterWithSize<TRow> extends ColumnImageFormatterBaseProps<TRow> {
+    /**
+     * Ancho personalizado para la imagen en vista cards (en píxeles)
+     */
+    width: number;
+    /**
+     * Alto personalizado para la imagen en vista cards (en píxeles)
+     */
+    height: number;
+}
+/**
+ * Props para ColumnImageFormatter
+ * Puede tener dimensiones personalizadas (width Y height juntas) o ninguna
+ */
+export type ColumnImageFormatterProps<TRow> = ColumnImageFormatterWithoutSize<TRow> | ColumnImageFormatterWithSize<TRow>;
+export {};

package/components/DataGrid/formatters/ColumnImageFormatter/types.js

@@ -0,0 +1 @@
+

package/components/DataGrid/formatters/ColumnImageFormatter/useColumnImage.d.ts

@@ -0,0 +1,9 @@
+import { ColumnImageFormatterProps } from './types';
+/**
+ * Hook que retorna el formatter para columnas con imágenes en DataGrid
+ * @param props - Propiedades del formatter
+ * @returns Objeto con el formatter
+ */
+export declare const useColumnImage: <TRow>(props: ColumnImageFormatterProps<TRow>) => {
+    formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+};

package/components/DataGrid/formatters/ColumnImageFormatter/useColumnImage.js

@@ -0,0 +1,22 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { deepEqual } from "fast-equals";
+import { C as ColumnImageFormatter } from "./formatter.js";
+const useColumnImage = (props) => {
+  const [stateProps, setStateProps] = useState(props);
+  const refProps = useRef({ ...props });
+  useEffect(() => {
+    if (!deepEqual(refProps.current, props)) {
+      refProps.current = props;
+      setStateProps(props);
+    }
+  }, [props]);
+  return useMemo(
+    () => ({
+      formatter: ColumnImageFormatter(stateProps)
+    }),
+    [stateProps]
+  );
+};
+export {
+  useColumnImage as u
+};

package/components/DataGrid/formatters/index.d.ts

@@ -11,3 +11,4 @@ export * from './ColumnUncertaintyFormatter';
 export * from './ColumnChipStatusFormatter';
 export * from './ColumnTagsFormatter';
 export * from './ColumnColorFormatter';
+export * from './ColumnImageFormatter';

package/components/DataGrid/subcomponents/Cards/helpers/scrollToCardElement.js

@@ -13,8 +13,8 @@ function scrollToCardElement(containerElement, rowKey, selectorType = "data-attr
       return;
     }
     foundElement.scrollIntoView({
-      behavior: "auto",
-      block: "center"
+      behavior: "smooth",
+      block: "end"
     });
   } catch (error) {
     console.error("scrollToCardElement: Error al hacer scroll", error);

package/components/DataGrid/subcomponents/Cards/index.js

@@ -21,6 +21,7 @@ function Cards(props) {
     onCheckedRowsChange
   } = props;
   const containerRef = useRef(null);
+  const hasScrolledToFocusRow = useRef(false);
   const processedColumns = useProcessedColumns(columns);
   const allProcessedColumns = useProcessedColumns(columns, {
     applyVisibilityFilter: false
@@ -31,13 +32,21 @@ function Cards(props) {
     onRowsChange
   });
   const cardHeight = useMemo(() => {
+    const imageHeight = processedColumns.reduce((totalHeight, col) => {
+      const formatterHeight = col.renderCell?.__imageFormatterHeight;
+      return formatterHeight ? totalHeight + formatterHeight : totalHeight;
+    }, 0);
     return calculateCardHeight({
       visibleColumnsCount: processedColumns.length,
       customMinHeight: cardsViewConfig?.customRender?.minHeight
-    });
-  }, [processedColumns.length, cardsViewConfig]);
+    }) + imageHeight;
+  }, [processedColumns, cardsViewConfig]);
   useEffect(() => {
     if (!focusOnRowKey) {
+      hasScrolledToFocusRow.current = false;
+      return;
+    }
+    if (hasScrolledToFocusRow.current) {
       return;
     }
     const rowIndex = rows.findIndex(
@@ -58,9 +67,13 @@ function Cards(props) {
         "data-attribute",
         "data-row-key"
       );
+      if (onSelectedRowsChange) {
+        onSelectedRowsChange(/* @__PURE__ */ new Set([focusOnRowKey]));
+      }
+      hasScrolledToFocusRow.current = true;
     }, 300);
     return () => clearTimeout(timer);
-  }, [focusOnRowKey, rows, rowKeyGetter, cardHeight]);
+  }, [focusOnRowKey, rows, rowKeyGetter, cardHeight, onSelectedRowsChange]);
   if (processedColumns.length === 0) {
     return null;
   }

package/components/DataGrid/subcomponents/Cards/subcomponents/CardRow/index.js

@@ -88,6 +88,7 @@ function CardRowComponent({
           },
           onClick: onCardClick,
           "data-testid": "data-grid-card",
+          "data-row-key": rowKeyGetter(row),
           children: content
         }
       )

package/components/DataGrid/subcomponents/Table/index.js

@@ -68,6 +68,7 @@ function Table(props) {
     anchorEl: null,
     columnKey: null
   });
+  const hasScrolledToFocusRow = useRef(false);
   const [allowSortChange, setAllowSortChange] = useState(false);
   const handleSortColumnsChange = (newSortColumns) => {
     if (allowSortChange) {
@@ -113,6 +114,10 @@ function Table(props) {
   }, [finalRows]);
   useEffect(() => {
     if (!focusOnRowKey) {
+      hasScrolledToFocusRow.current = false;
+      return;
+    }
+    if (hasScrolledToFocusRow.current) {
       return;
     }
     const rowIndex = finalRows.findIndex(
@@ -120,8 +125,12 @@ function Table(props) {
     );
     if (rowIndex !== -1) {
       ref_data_grid.current?.scrollToCell({ rowIdx: rowIndex });
+      if (onSelectedRowsChange) {
+        onSelectedRowsChange(/* @__PURE__ */ new Set([focusOnRowKey]));
+      }
+      hasScrolledToFocusRow.current = true;
     }
-  }, [focusOnRowKey, finalRows, rowKeyGetter]);
+  }, [focusOnRowKey, finalRows, rowKeyGetter, onSelectedRowsChange]);
   const onColumnResize = (idx, width) => {
     onChangeColumnWidth(finalColumns[idx].key, width);
   };

package/components/DataGrid/tests/helpers/types.d.ts

@@ -20,6 +20,12 @@ export interface SeedProps {
     withCesar?: boolean;
     withChipStatus?: boolean;
     withTags?: boolean;
+    withImage?: boolean;
+    withImageCustomSize?: {
+        width: number;
+        height: number;
+    };
+    withImageWithoutText?: boolean;
     withActions?: boolean;
     withActionsUser?: boolean;
     withBooleanStatus?: boolean;
@@ -69,6 +75,10 @@ export interface RowType {
         currentStatus: 'superadmin' | 'admin' | 'user';
     };
     color?: string;
+    image?: {
+        url: string;
+        text?: string;
+    };
 }
 interface RangesUncertainty {
     cmcMin: number;

package/components/formatters/ImageFormatter/ImageFormatter.d.ts

@@ -0,0 +1,10 @@
+import { ImageFormatterProps } from './types';
+/**
+ * ImageFormatter
+ * Componente para formatear y mostrar una imagen con texto opcional.
+ * Fuerza enableIntersectionObserver a false ya que se usa en contextos donde
+ * el lazy loading es manejado por el contenedor padre (ej. DataGrid).
+ * @param {ImageFormatterProps} props - Las propiedades del componente.
+ * @returns JSX.Element
+ */
+export declare function ImageFormatter(props: ImageFormatterProps): import("react/jsx-runtime").JSX.Element;

package/components/formatters/ImageFormatter/ImageFormatter.js

@@ -0,0 +1,72 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { I as ImageStyled, T as TextImageStyled, R as RootStyled } from "./slots/ImageFormatterSlots.js";
+import { I as ImageFormatterSlots } from "./slots/ImageFormatterEnum.js";
+import clsx from "clsx";
+import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { I as IMAGE_FORMATTER_KEY_COMPONENT } from "./constants.js";
+function ImageFormatter(props) {
+  const { src, alt, text, width, height, cover, dataTestId, className } = props;
+  const ownerState = useMemo(
+    () => ({
+      width,
+      height,
+      hasDefinedSize: width !== void 0 && height !== void 0,
+      cover
+    }),
+    [width, height, cover]
+  );
+  const content = useMemo(() => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        ImageStyled,
+        {
+          ownerState,
+          ...getPropDataTestId(
+            IMAGE_FORMATTER_KEY_COMPONENT,
+            ImageFormatterSlots.image,
+            dataTestId
+          ),
+          src,
+          alt,
+          width,
+          height,
+          cover,
+          enableIntersectionObserver: false
+        }
+      ),
+      text && /* @__PURE__ */ jsx(
+        TextImageStyled,
+        {
+          ...getPropDataTestId(
+            IMAGE_FORMATTER_KEY_COMPONENT,
+            ImageFormatterSlots.textImage,
+            dataTestId
+          ),
+          variant: "body",
+          children: text
+        }
+      )
+    ] });
+  }, [src, alt, text, width, height, cover, dataTestId, ownerState]);
+  return /* @__PURE__ */ jsx(
+    RootStyled,
+    {
+      ownerState,
+      className: clsx(
+        getComponentSlotRoot(IMAGE_FORMATTER_KEY_COMPONENT),
+        className
+      ),
+      ...getPropDataTestId(
+        IMAGE_FORMATTER_KEY_COMPONENT,
+        ImageFormatterSlots.root,
+        dataTestId
+      ),
+      children: content
+    }
+  );
+}
+export {
+  ImageFormatter as I
+};

package/components/formatters/ImageFormatter/ImageFormatter.styles.d.ts

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

package/components/formatters/ImageFormatter/ImageFormatter.styles.js

@@ -0,0 +1,42 @@
+const imageFormatterStyles = {
+  /**
+   * Estilos del root principal
+   */
+  root: ({ theme, ownerState }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp2,
+    width: "100%",
+    ...!ownerState?.hasDefinedSize && {
+      height: "100%"
+    }
+  }),
+  /**
+   * Estilos de la imagen
+   */
+  image: ({ theme, ownerState }) => ({
+    flexShrink: 0,
+    borderRadius: theme.vars.size.borderRadius.r2,
+    border: `1px solid ${theme.vars.palette.border.disabled}`,
+    ...!ownerState?.hasDefinedSize && {
+      height: "90%",
+      aspectRatio: "1 / 1"
+    },
+    objectFit: ownerState?.cover ? "cover" : "contain"
+  }),
+  /**
+   * Estilos del texto de la imagen
+   */
+  textImage: ({ theme }) => ({
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    flex: 1,
+    "&.M4LTypography-root": {
+      color: theme.vars.palette.primary
+    }
+  })
+};
+export {
+  imageFormatterStyles as i
+};

package/components/formatters/ImageFormatter/constants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Clave del componente ImageFormatter
+ */
+export declare const IMAGE_FORMATTER_KEY_COMPONENT = "M4LImageFormatter";
+export declare const IMAGE_FORMATTER_CLASSES: Record<"root" | "image" | "textImage", string>;

package/components/formatters/ImageFormatter/constants.js

@@ -0,0 +1,10 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { I as ImageFormatterSlots } from "./slots/ImageFormatterEnum.js";
+const IMAGE_FORMATTER_KEY_COMPONENT = "M4LImageFormatter";
+getComponentClasses(
+  IMAGE_FORMATTER_KEY_COMPONENT,
+  ImageFormatterSlots
+);
+export {
+  IMAGE_FORMATTER_KEY_COMPONENT as I
+};

package/components/formatters/ImageFormatter/index.d.ts

@@ -0,0 +1,2 @@
+export { ImageFormatter } from './ImageFormatter';
+export * from './types';

package/components/formatters/ImageFormatter/index.js

@@ -0,0 +1 @@
+

package/components/formatters/ImageFormatter/slots/ImageFormatterEnum.d.ts

@@ -0,0 +1,5 @@
+export declare enum ImageFormatterSlots {
+    root = "root",
+    image = "image",
+    textImage = "textImage"
+}

package/components/formatters/ImageFormatter/slots/ImageFormatterEnum.js

@@ -0,0 +1,9 @@
+var ImageFormatterSlots = /* @__PURE__ */ ((ImageFormatterSlots2) => {
+  ImageFormatterSlots2["root"] = "root";
+  ImageFormatterSlots2["image"] = "image";
+  ImageFormatterSlots2["textImage"] = "textImage";
+  return ImageFormatterSlots2;
+})(ImageFormatterSlots || {});
+export {
+  ImageFormatterSlots as I
+};

package/components/formatters/ImageFormatter/slots/ImageFormatterSlots.d.ts

@@ -0,0 +1,9 @@
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').ImageFormatterOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ImageStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Image').ImageProps, keyof import('../../../Image').ImageProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').ImageFormatterOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const TextImageStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../mui_extended/Typography/types').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "size" | "children" | "title" | "component" | "zIndex" | "id" | "disabled" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "flex" | "hidden" | "color" | "left" | "right" | "bottom" | "top" | "ellipsis" | "content" | "style" | "position" | "padding" | "variant" | "borderRadius" | "width" | "display" | "borderColor" | "height" | "gap" | "minHeight" | "margin" | "overflow" | "boxShadow" | "minWidth" | "justifyContent" | "alignItems" | "paddingLeft" | "borderLeft" | "borderTop" | "maxWidth" | "flexDirection" | "paddingRight" | "borderRight" | "flexGrow" | "marginLeft" | "textOverflow" | "borderBottom" | "gridTemplateColumns" | "marginBottom" | "dataTestid" | "alignContent" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateRows" | "justifyItems" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "marginRight" | "marginTop" | "maxHeight" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingTop" | "rowGap" | "textAlign" | "translate" | "visibility" | "whiteSpace" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "paddingBlock" | "paddingInline" | "className" | "classes" | "sx" | "p" | "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" | "exportparts" | "part" | "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" | "onChange" | "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" | "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" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "htmlFor" | "gutterBottom" | "noWrap" | "variantMapping" | "skeletonWidth" | "skeletonRows" | keyof import('react').RefAttributes<HTMLSpanElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').ImageFormatterOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/formatters/ImageFormatter/slots/ImageFormatterSlots.js

@@ -0,0 +1,23 @@
+import { styled } from "@mui/material";
+import { I as IMAGE_FORMATTER_KEY_COMPONENT } from "../constants.js";
+import { I as ImageFormatterSlots } from "./ImageFormatterEnum.js";
+import { i as imageFormatterStyles } from "../ImageFormatter.styles.js";
+import { I as Image } from "../../../Image/Image.js";
+import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
+const RootStyled = styled("div", {
+  name: IMAGE_FORMATTER_KEY_COMPONENT,
+  slot: ImageFormatterSlots.root
+})(imageFormatterStyles.root);
+const ImageStyled = styled(Image, {
+  name: IMAGE_FORMATTER_KEY_COMPONENT,
+  slot: ImageFormatterSlots.image
+})(imageFormatterStyles.image);
+const TextImageStyled = styled(Typography, {
+  name: IMAGE_FORMATTER_KEY_COMPONENT,
+  slot: ImageFormatterSlots.textImage
+})(imageFormatterStyles.textImage);
+export {
+  ImageStyled as I,
+  RootStyled as R,
+  TextImageStyled as T
+};

package/components/formatters/ImageFormatter/tests/ImageFormatter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/formatters/ImageFormatter/types.d.ts

@@ -0,0 +1,51 @@
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { ImageFormatterSlots } from './slots/ImageFormatterEnum';
+import { ImageProps } from '../../Image';
+import { IMAGE_FORMATTER_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+/**
+ * Props del ImageFormatter
+ */
+export interface ImageFormatterProps extends Pick<ImageProps, 'src' | 'alt' | 'width' | 'height' | 'cover' | 'enableIntersectionObserver'> {
+    /**
+     * Texto de la imagen
+     */
+    text?: string;
+    /**
+     * ID para testing
+     */
+    dataTestId?: string;
+    /**
+     * Clase CSS personalizada
+     */
+    className?: string;
+}
+/**
+ * Owner state del ImageFormatter
+ */
+export interface ImageFormatterOwnerState {
+    /**
+     * Ancho de la imagen
+     */
+    width?: number | string;
+    /**
+     * Alto de la imagen
+     */
+    height?: number | string;
+    /**
+     * Si la imagen tiene tamaño definido o debe usar 100% + aspect ratio
+     */
+    hasDefinedSize: boolean;
+    /**
+     * Si es verdadero, la imagen se ajusta al contenedor y se recorta si es necesario.
+     */
+    cover?: boolean;
+}
+/**
+ * Tipos de slots disponibles para el ImageFormatter
+ */
+export type ImageFormatterSlotsType = ImageFormatterSlots;
+/**
+ * Estilos aplicables al ImageFormatter
+ */
+export type ImageFormatterStyles = M4LOverridesStyleRules<ImageFormatterSlotsType, typeof IMAGE_FORMATTER_KEY_COMPONENT, Theme>;

package/components/formatters/ImageFormatter/types.js

@@ -0,0 +1 @@
+

package/components/formatters/index.d.ts

@@ -10,3 +10,4 @@ export * from './DistanceToNowFormatter';
 export type { UncertaintyRange } from './UncertaintyFormatter/types';
 export { TagsFormatter } from './TagsFormatter';
 export { ColorFormatter } from './ColorFormatter';
+export { ImageFormatter } from './ImageFormatter';

package/index.js

@@ -62,6 +62,8 @@ import { C as C15 } from "./components/DataGrid/formatters/ColumnTagsFormatter/f
 import { u as u13 } from "./components/DataGrid/formatters/ColumnTagsFormatter/useColumnTags.js";
 import { C as C16 } from "./components/DataGrid/formatters/ColumnColorFormatter/formatter.js";
 import { u as u14 } from "./components/DataGrid/formatters/ColumnColorFormatter/useColumnColor.js";
+import { u as u15 } from "./components/DataGrid/formatters/ColumnImageFormatter/useColumnImage.js";
+import { C as C17 } from "./components/DataGrid/formatters/ColumnImageFormatter/formatter.js";
 import { D as D3 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
 import { d as d2 } from "./components/DragResizeWindowRND/classes/index.js";
 import { W } from "./components/DragResizeWindowRND/constants.js";
@@ -83,7 +85,7 @@ import { R as R3 } from "./components/extended/React-Json-Viewer/ReactJsonViewer
 import { A as A14 } from "./components/mui_extended/Avatar/Avatar.js";
 import { B as B2 } from "./components/mui_extended/BoxIcon/index.js";
 import { B as B3 } from "./components/mui_extended/Breadcrumbs/index.js";
-import { C as C17 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
+import { C as C18 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
 import { B as B4 } from "./components/mui_extended/Badge/Badge.js";
 import { L as L3 } from "./components/mui_extended/LinearProgress/index.js";
 import { L as L4 } from "./components/mui_extended/LinkWithRoute/index.js";
@@ -93,7 +95,7 @@ import { A as A15 } from "./components/mui_extended/Accordion/Accordion.js";
 import { T as T3 } from "./components/mui_extended/Tooltip/Tooltip.js";
 import { I as I2 } from "./components/mui_extended/IconButton/IconButton.js";
 import { B as B5 } from "./components/mui_extended/Button/Button.js";
-import { C as C18 } from "./components/mui_extended/CheckBox/CheckBox.js";
+import { C as C19 } from "./components/mui_extended/CheckBox/CheckBox.js";
 import { I as I3 } from "./components/mui_extended/ImageButton/ImageButton.js";
 import { P as P2 } from "./components/mui_extended/Popover/Popover.js";
 import { S as S4 } from "./components/mui_extended/Select/Select.js";
@@ -121,15 +123,16 @@ import { B as B6 } from "./components/formatters/BooleanFormatter/BooleanFormatt
 import { D as D8, g as g12 } from "./components/formatters/DateFormatter/DateFormatter.js";
 import { U, g as g13 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
 import { P as P3, g as g14 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
-import { C as C19, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
-import { P as P4, u as u15 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
+import { C as C20, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
+import { P as P4, u as u16 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
 import { P as P5, g as g16 } from "./components/formatters/PriceFormatter/PriceFormatter.js";
 import { T as T17 } from "./components/formatters/TagsFormatter/TagsFormatter.js";
-import { C as C20 } from "./components/formatters/ColorFormatter/ColorFormatter.js";
-import { C as C21 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
+import { C as C21 } from "./components/formatters/ColorFormatter/ColorFormatter.js";
+import { I as I4 } from "./components/formatters/ImageFormatter/ImageFormatter.js";
+import { C as C22 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 import { g as g17 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
 import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
-import { u as u16 } from "./components/formatters/DistanceToNowFormatter/hooks/useDistanceToNowFormatter.js";
+import { u as u17 } from "./components/formatters/DistanceToNowFormatter/hooks/useDistanceToNowFormatter.js";
 import { g as g18 } from "./components/formatters/dictionary.js";
 import { F as F2 } from "./components/FormContainer/FormContainer.js";
 import { G } from "./components/GridLayout/GridLayout.js";
@@ -162,10 +165,10 @@ import { N as N3, P as P6, R as R20, S as S7 } from "./components/hook-form/RHFP
 import { R as R21 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
 import { R as R22 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
 import { V as V2, b as b4, a as a9 } from "./components/hook-form/RHFormProvider/types.js";
-import { F as F3, R as R23, u as u17 } from "./components/hook-form/RHFormProvider/RHFormProvider.js";
+import { F as F3, R as R23, u as u18 } from "./components/hook-form/RHFormProvider/RHFormProvider.js";
 import { d as d4, a as a10, b as b5, c as c3 } from "./components/hook-form/RHFormProvider/schema.js";
-import { I as I4 } from "./components/Icon/Icon.js";
-import { I as I5 } from "./components/Image/Image.js";
+import { I as I5 } from "./components/Icon/Icon.js";
+import { I as I6 } from "./components/Image/Image.js";
 import { L as L6 } from "./components/Label/Label.js";
 import { L as L7 } from "./components/LanguagePopover/LanguagePopover.js";
 import { L as L8 } from "./components/LinearProgressIndeterminate/LinearProgressIndeterminate.js";
@@ -178,7 +181,7 @@ import { M as M4 } from "./components/MFIsolationApp/MFIsolationApp.js";
 import { M as M5 } from "./components/MFIsolationAppStorybook/MFIsolationAppStorybook.js";
 import { M as M6 } from "./components/MFLoader/MFLoader.js";
 import { g as g24 } from "./components/MFLoader/dictionary.js";
-import { I as I6 } from "./components/ImageText/ImageText.js";
+import { I as I7 } from "./components/ImageText/ImageText.js";
 import { N as N4 } from "./components/NoItemSelected/NoItemSelected.js";
 import { g as g25 } from "./components/NoItemSelected/dictionary.js";
 import { N as N5 } from "./components/NoItemPrivileges/NoItemPrivileges.js";
@@ -187,7 +190,7 @@ import { g as g27 } from "./components/ObjectLogs/dictionary.js";
 import { O } from "./components/ObjectLogs/ObjectLogs.js";
 import { P as P7 } from "./components/PaperForm/PaperForm.js";
 import { P as P8 } from "./components/PDFViewer/PDFViewer.js";
-import { u as u18 } from "./components/popups/components/PopupsProvider/hooks/usePopupsStore.js";
+import { u as u19 } from "./components/popups/components/PopupsProvider/hooks/usePopupsStore.js";
 import { a as a12, P as P9 } from "./components/popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js";
 import { P as P10 } from "./components/popups/components/PopupsViewer/PopupsViewer.js";
 import { P as P11 } from "./components/PrintingSystem/PrintingSystem.js";
@@ -199,8 +202,8 @@ import { T as T19 } from "./components/ToastContainer/subcomponents/ToastMessage
 import { T as T20 } from "./components/TabsNavigator/TabsNavigator.js";
 import { g as g28 } from "./components/TabsNavigator/dictionary.js";
 import { W as W2 } from "./components/WindowBase/WindowBase.js";
-import { u as u19 } from "./components/WindowBase/hooks/useWindowToolsMF/index.js";
-import { u as u20, a as a13 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
+import { u as u20 } from "./components/WindowBase/hooks/useWindowToolsMF/index.js";
+import { u as u21, a as a13 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
 import { M as M7, W as W3, a as a14 } from "./components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js";
 import { c as c4 } from "./components/WindowBase/contexts/DynamicMFParmsContext/store.js";
 import { D as D10, a as a15, M as M8 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
@@ -209,7 +212,7 @@ import { a as a16, g as g29 } from "./components/ModalDialog/dictionary.js";
 import { M as M9 } from "./components/ModalDialog/ModalDialog.js";
 import { S as S10 } from "./components/SettingsLayout/SettingsLayout.js";
 import { P as P13 } from "./components/Pager/Pager.js";
-import { u as u21 } from "./components/Stepper/hooks/useStepper/index.js";
+import { u as u22 } from "./components/Stepper/hooks/useStepper/index.js";
 import { S as S11 } from "./components/Stepper/Stepper.js";
 import { S as S12 } from "./components/Stepper/subcomponents/StepperContent/index.js";
 import { S as S13 } from "./components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js";
@@ -223,26 +226,26 @@ import { S as S20 } from "./components/Stepper/subcomponents/StepperButtons/Step
 import { e as e2 } from "./components/Stepper/helpers/evaluateVisibilityStepCondition/index.js";
 import { g as g30 } from "./components/Stepper/dictionary.js";
 import { g as g31 } from "./components/hook-form/RHFormProvider/dictionary.js";
-import { u as u22 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
+import { u as u23 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import { a as a17, M as M10 } from "./contexts/ModalContext/index.js";
-import { u as u23 } from "./hooks/useFormAddEdit/useFormAddEdit.js";
-import { u as u24 } from "./hooks/useModal/index.js";
-import { u as u25 } from "./hooks/useTab/index.js";
+import { u as u24 } from "./hooks/useFormAddEdit/useFormAddEdit.js";
+import { u as u25 } from "./hooks/useModal/index.js";
+import { u as u26 } from "./hooks/useTab/index.js";
 import { g as g32 } from "./hooks/useFormAddEdit/dictionary.js";
-import { u as u26 } from "./hooks/useFormFocus/index.js";
-import { u as u27 } from "./hooks/useInterval/index.js";
-import { u as u28 } from "./hooks/useComponentSize/useComponentSize.js";
-import { u as u29 } from "./hooks/useFormReadyForUpdate/index.js";
-import { u as u30 } from "./hooks/useStateRef/index.js";
+import { u as u27 } from "./hooks/useFormFocus/index.js";
+import { u as u28 } from "./hooks/useInterval/index.js";
+import { u as u29 } from "./hooks/useComponentSize/useComponentSize.js";
+import { u as u30 } from "./hooks/useFormReadyForUpdate/index.js";
+import { u as u31 } from "./hooks/useStateRef/index.js";
 import { S as S21 } from "./hooks/useSvgColor/constants.js";
-import { u as u31 } from "./hooks/useSvgColor/useSvgColor.js";
-import { u as u32 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
-import { u as u33 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
-import { u as u34 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
-import { u as u35 } from "./hooks/useIsVisible/useIsVisible.js";
-import { u as u36 } from "./hooks/useSizeContainer/index.js";
-import { u as u37 } from "./hooks/useWatchTyped/useTypedWatch.js";
+import { u as u32 } from "./hooks/useSvgColor/useSvgColor.js";
+import { u as u33 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
+import { u as u34 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
+import { u as u35 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
+import { u as u36 } from "./hooks/useIsVisible/useIsVisible.js";
+import { u as u37 } from "./hooks/useSizeContainer/index.js";
+import { u as u38 } from "./hooks/useWatchTyped/useTypedWatch.js";
 import { c as c5 } from "./utils/capitalizeFirstLetter.js";
 import { i as i2 } from "./utils/isValidDate.js";
 import { g as g33 } from "./utils/getComponentUtilityClass.js";
@@ -283,17 +286,18 @@ export {
   B3 as Breadcrumbs,
   B5 as Button,
   C as Card,
-  C18 as CheckBox,
+  C19 as CheckBox,
   C2 as Chip,
-  C21 as ChipStatusFormatter,
-  C17 as CircularProgress,
-  C20 as ColorFormatter,
+  C22 as ChipStatusFormatter,
+  C18 as CircularProgress,
+  C21 as ColorFormatter,
   C4 as ColumnBooleanFormatter,
   C14 as ColumnChipStatusFormatter,
   C16 as ColumnColorFormatter,
   C5 as ColumnConcatenatedValueFormatter,
   C6 as ColumnDateFormatter,
   C7 as ColumnIconFormatter,
+  C17 as ColumnImageFormatter,
   C8 as ColumnInteractiveCheckFormatter,
   C9 as ColumnNestedValueFormatter,
   C10 as ColumnPointsFormatter,
@@ -301,7 +305,7 @@ export {
   C12 as ColumnSetCheckFormatter,
   C15 as ColumnTagsFormatter,
   C13 as ColumnUncertaintyFormatter,
-  C19 as ConcatenatedFormatter,
+  C20 as ConcatenatedFormatter,
   C3 as ContainerFlow,
   b3 as DATAGRID_ROW_HEADER_HEIGHTS,
   a4 as DATAGRID_ROW_HEIGHTS,
@@ -324,12 +328,13 @@ export {
   H as HamburgerMenu,
   H2 as HelmetPage,
   H3 as HelperError,
-  I4 as Icon,
+  I5 as Icon,
   I2 as IconButton,
   I as IconButtonAnimate,
-  I5 as Image,
+  I6 as Image,
   I3 as ImageButton,
-  I6 as ImageText,
+  I4 as ImageFormatter,
+  I7 as ImageText,
   L2 as LABEL_FILTER_BUTTON,
   L6 as Label,
   L7 as LanguagePopover,
@@ -518,7 +523,7 @@ export {
   r as rhfPeriodStyles,
   t as toggleButtonStyles,
   t2 as toggleIconButtonStyles,
-  u22 as useAppearanceComponentStore,
+  u23 as useAppearanceComponentStore,
   u as useAreasStore,
   u2 as useColumnBoolean,
   u12 as useColumnChipStatus,
@@ -526,6 +531,7 @@ export {
   u3 as useColumnConcatenatedValue,
   u4 as useColumnDate,
   u5 as useColumnIcon,
+  u15 as useColumnImage,
   u6 as useColumnInteractiveCheck,
   u7 as useColumnNestedValue,
   u8 as useColumnPoints,
@@ -533,29 +539,29 @@ export {
   u10 as useColumnSetCheck,
   u13 as useColumnTags,
   u11 as useColumnUncertanity,
-  u28 as useComponentSize,
-  u17 as useCustomForm,
-  u33 as useDataGridPersistence,
-  u16 as useDistanceToNowFormatter,
-  u32 as useDynamicFilterAndSort,
-  u20 as useDynamicMFParameters,
+  u29 as useComponentSize,
+  u18 as useCustomForm,
+  u34 as useDataGridPersistence,
+  u17 as useDistanceToNowFormatter,
+  u33 as useDynamicFilterAndSort,
+  u21 as useDynamicMFParameters,
   a13 as useDynamicMFParametersStore,
-  u23 as useFormAddEdit,
-  u26 as useFormFocus,
-  u29 as useFormReadyForUpdate,
-  u15 as useFormatPeriod,
-  u27 as useInterval,
-  u35 as useIsVisible,
-  u24 as useModal,
-  u34 as usePopoverContainer,
-  u18 as usePopupsStore,
-  u36 as useSizeContainer,
-  u30 as useStateRef,
-  u21 as useStepper,
-  u31 as useSvgColor,
-  u25 as useTab,
-  u37 as useWatchTyped,
-  u19 as useWindowToolsMF,
+  u24 as useFormAddEdit,
+  u27 as useFormFocus,
+  u30 as useFormReadyForUpdate,
+  u16 as useFormatPeriod,
+  u28 as useInterval,
+  u36 as useIsVisible,
+  u25 as useModal,
+  u35 as usePopoverContainer,
+  u19 as usePopupsStore,
+  u37 as useSizeContainer,
+  u31 as useStateRef,
+  u22 as useStepper,
+  u32 as useSvgColor,
+  u26 as useTab,
+  u38 as useWatchTyped,
+  u20 as useWindowToolsMF,
   v2 as varBounce,
   v3 as varContainer,
   v as varFade,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.34",
+  "version": "9.3.35",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {