@m4l/components 9.3.34-JT25112025.beta.2 → 9.3.34-JT26112025.beta.1

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

@@ -12,7 +12,6 @@ const CheckboxFormatter = forwardRef(function CheckboxFormatter2({ onChange, che
       checked,
       size: "small",
       icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
-      disableRipple: true,
       checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
       indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
       onChange: handleChange,

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

@@ -1,47 +1,22 @@
-import { jsx } from "react/jsx-runtime";
-import { useEnvironment } from "@m4l/core";
-import "@mui/material";
-import { I as Icon } from "../../../../Icon/Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SvgIcon } from "@mui/material";
 function CheckboxIcon(props) {
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const uncheckedIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/check_box/assets/icons/unchecked.svg`;
-  return /* @__PURE__ */ jsx(
-    Icon,
-    {
-      src: uncheckedIconUrl,
-      size: "small",
-      color: "text.primary",
-      className: "checkbox-unChecked",
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, viewBox: "0 0 16 17", className: "checkbox-unChecked", children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "17", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx("g", { "clip-path": "url(#clip0_13395_49048)", children: /* @__PURE__ */ jsx("path", { d: "M13.0156 2.5H3.01562C2.75041 2.5 2.49605 2.60536 2.30852 2.79289C2.12098 2.98043 2.01563 3.23478 2.01562 3.5V13.5C2.01563 13.7652 2.12098 14.0196 2.30852 14.2071C2.49605 14.3946 2.75041 14.5 3.01562 14.5H13.0156C13.2808 14.5 13.5352 14.3946 13.7227 14.2071C13.9103 14.0196 14.0156 13.7652 14.0156 13.5V3.5C14.0156 3.23478 13.9103 2.98043 13.7227 2.79289C13.5352 2.60536 13.2808 2.5 13.0156 2.5ZM3.01562 13.5V3.5H13.0156V13.5H3.01562Z", fill: "#323B3B" }) }),
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_13395_49048", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0 0.5)" }) }) })
+  ] }) });
 }
 function CheckboxCheckedIcon(props) {
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const checkedIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/check_box/assets/icons/checked.svg`;
-  return /* @__PURE__ */ jsx(
-    Icon,
-    {
-      src: checkedIconUrl,
-      size: "small",
-      color: "primary.enabled",
-      className: "checkbox-checked",
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, viewBox: "0 0 16 17", className: "checkbox-checked", children: [
+    /* @__PURE__ */ jsxs("g", { "clip-path": "url(#clip0_13395_49057)", children: [
+      /* @__PURE__ */ jsx("path", { d: "M13.4323 2H2.59896C2.31164 2 2.03609 2.11414 1.83293 2.3173C1.62976 2.52047 1.51563 2.79602 1.51562 3.08333V13.9167C1.51563 14.204 1.62976 14.4795 1.83293 14.6827C2.03609 14.8859 2.31164 15 2.59896 15H13.4323C13.7196 15 13.9952 14.8859 14.1983 14.6827C14.4015 14.4795 14.5156 14.204 14.5156 13.9167V3.08333C14.5156 2.79602 14.4015 2.52047 14.1983 2.3173C13.9952 2.11414 13.7196 2 13.4323 2Z", fill: "#323B3B" }),
+      /* @__PURE__ */ jsx("path", { d: "M6.92119 11.6245L4.10001 8.8274L4.99759 7.95696L6.92119 9.84467L11.1014 5.70001L11.9996 6.58993L6.92119 11.6245Z", fill: "#F3F5F7" })
+    ] }),
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_13395_49057", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0 0.5)" }) }) })
+  ] });
 }
 function CheckboxIndeterminateIcon(props) {
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const indeterminateIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/check_box/assets/icons/indeterminate.svg`;
-  return /* @__PURE__ */ jsx(
-    Icon,
-    {
-      src: indeterminateIconUrl,
-      size: "small",
-      color: "primary.enabled",
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.75 8h-6.5a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-.5a.75.75 0 00-.75-.75z" }) });
 }
 export {
   CheckboxIndeterminateIcon as C,

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

@@ -5,7 +5,7 @@ import { useDrag, useDrop } from "react-dnd";
 import { renderHeaderCell } from "react-data-grid";
 import { u as useFocusRef } from "../hooks/useFocusRef.js";
 import { u as useFilters } from "../../../hooks/useFilters.js";
-import { N as NameColumnIconStyled, F as NameColumnStyled, G as IconColumnStyled, H as DraggableHeaderRootStyled, J as ButtonHeaderActionsStyled, K as DraggableWrapperInputBaseStyled, M as IconSearchStyled, O as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
+import { N as NameColumnIconStyled, B as NameColumnStyled, I as IconColumnStyled, F as DraggableHeaderRootStyled, G as ButtonHeaderActionsStyled, H as DraggableWrapperInputBaseStyled, J as IconSearchStyled, K as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../icons.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { I as Icon } from "../../../../Icon/Icon.js";

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

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
-import { P as MenuListStyled, Q as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
+import { M as MenuListStyled, O as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
 import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";

package/components/DataGrid/subcomponents/editors/TextEditor/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { S as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { P as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();

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/DataGrid/types.d.ts

@@ -193,10 +193,6 @@ export interface UseModalDetailProps<TRow> {
     columns: readonly Column<TRow, any>[];
     viewMode: ViewMode;
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
-    /**
-     * Array completo de todas las filas (necesario para reconstruir el array al editar en el modal)
-     */
-    rows: readonly TRow[];
 }
 /**
  * Configuración de una columna específica en vista "cards"
@@ -256,14 +252,6 @@ export interface CardContentProps<TRow> {
     columns: readonly Column<TRow, any>[];
     originalColumns: readonly Column<TRow, any>[];
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
-    /**
-     * Array completo de todas las filas (necesario para reconstruir el array al editar)
-     */
-    rows: readonly TRow[];
-    /**
-     * Índice de la fila actual en el array de filas
-     */
-    rowIndex: number;
 }
 /**
  * Configuración de densidad para el DataGrid.

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/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';