@m4l/components 9.1.47 → 9.1.48

package/@types/types.d.ts

@@ -128,7 +128,8 @@ import {
 import { SideBarOwnerState } from '../components/SideBar/types';
 import {
   PaperFormSlotsType,
-  PaperFormOwnerState } from '../components/PaperForm/types';
+  PaperFormOwnerState,
+} from '../components/PaperForm/types';
 import { WindowBaseOwnerState, WindowBaseType } from '../components/WindowBase';
 import { OwnerStateWindowConfirm, WindowConfirmType } from '../components/WindowConfirm';
 import { AppBarSlotsType, AppBarOwnerState } from '../components/AppBar/types';
@@ -147,6 +148,7 @@ import { BooleanFormatterOwnerState, PresentationType } from '../components/form
 import { ToggleIconButtonOwnerState, ToggleIconButtonSlotsType } from '../components/mui_extended/ToggleIconButton/types';
 
 import { PopoverOwnerState, PopoverSlotsType } from '../components/mui_extended/Popover/types';
+import { PropertyVaLueOwnerState, PropertyValueType } from '../components/PropertyValue/types';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -195,6 +197,7 @@ declare module '@mui/material/styles' {
     M4LToggleButton: ToggleButtonSlotsType;
     M4LBooleanFormatter: PresentationType;
     M4LToggleIconButton: ToggleIconButtonSlotsType;
+    M4LPropertyValue: PropertyValueType;
   }
 
   interface ComponentsPropsList {
@@ -243,6 +246,7 @@ declare module '@mui/material/styles' {
     M4LToggleButton: Partial<ToggleButtonOwnerState>;
     M4LBooleanFormatter: Partial<BooleanFormatterOwnerState>;
     M4LToggleIconButton: Partial<ToggleIconButtonOwnerState>;
+    M4LPropertyValue: Partial<PropertyVaLueOwnerState>;
   }
 
   interface Components {
@@ -535,31 +539,36 @@ declare module '@mui/material/styles' {
       defaultProps?: ComponentsPropsList['M4LAvatar'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LAvatar'];
       variants?: ComponentsVariants['M4LAvatar'];
-    M4LAccordion?: {
-      defaultProps?: ComponentsPropsList['M4LAccordion'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LAccordion'];
-      variants?: ComponentsVariants['M4LAccordion'];
-    };
-    M4LPopper?: {
-      defaultProps?: ComponentsPropsList['M4LPopper'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LPopper'];
-      variants?: ComponentsVariants['M4LPopper'];
-    };
-    M4LToggleButton?: {
-      defaultProps?: ComponentsPropsList['M4LToggleButton'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LToggleButton'];
-      variants?: ComponentsVariants['M4LToggleButton'];
-    };
-    M4LBooleanFormatter?: {
-      defaultProps?: ComponentsPropsList['M4LBooleanFormatter'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LBooleanFormatter'];
-      variants?: ComponentsVariants['M4LBooleanFormatter'];
-    };
-    M4LToggleIconButton?: {
-      defaultProps?: ComponentsPropsList['M4LToggleIconButton'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LToggleIconButton'];
-      variants?: ComponentsVariants['M4LToggleIconButton'];
-    };
+      M4LAccordion?: {
+        defaultProps?: ComponentsPropsList['M4LAccordion'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LAccordion'];
+        variants?: ComponentsVariants['M4LAccordion'];
+      };
+      M4LPopper?: {
+        defaultProps?: ComponentsPropsList['M4LPopper'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LPopper'];
+        variants?: ComponentsVariants['M4LPopper'];
+      };
+      M4LToggleButton?: {
+        defaultProps?: ComponentsPropsList['M4LToggleButton'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LToggleButton'];
+        variants?: ComponentsVariants['M4LToggleButton'];
+      };
+      M4LBooleanFormatter?: {
+        defaultProps?: ComponentsPropsList['M4LBooleanFormatter'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LBooleanFormatter'];
+        variants?: ComponentsVariants['M4LBooleanFormatter'];
+      };
+      M4LToggleIconButton?: {
+        defaultProps?: ComponentsPropsList['M4LToggleIconButton'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LToggleIconButton'];
+        variants?: ComponentsVariants['M4LToggleIconButton'];
+        M4LPropertyValue?: {
+          defaultProps?: ComponentsPropsList['M4LPropertyValue'];
+          styleOverrides?: ComponentsOverrides<Theme>['M4LPropertyValue'];
+          variants?: ComponentsVariants['M4LPropertyValue'];
+        };
+      }
+    }
   }
- }
 }

package/components/Label/Label.styles.js

@@ -3,8 +3,8 @@ const labelStyles = {
    * Estilos para el contenedor raíz del Label.
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 09:34:39 - automatic
-   * @updatedAt 2024-10-22 19:27:23 - automatic
-   * @updatedUser Bruce Escobar - automatic
+   * @updatedAt 2024-12-30 12:00:12 - automatic
+   * @updatedUser cesar - automatic
    */
   root: ({ ownerState, theme }) => ({
     display: "flex",
@@ -37,11 +37,10 @@ const labelStyles = {
    * Estilos para el slot Typography.
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 09:34:39 - automatic
-   * @updatedAt 2024-10-22 19:27:23 - automatic
-   * @updatedUser Bruce Escobar - automatic
+   * @updatedAt 2024-12-30 12:00:12 - automatic
+   * @updatedUser cesar - automatic
    */
   typographyStyled: ({ theme, ownerState }) => ({
-    marginInlineStart: theme.spacing(0.4),
     "& .MuiTypography-root": {
       color: theme.vars.palette.text.secondary,
       [theme.breakpoints.up("sm")]: {
@@ -59,11 +58,10 @@ const labelStyles = {
    * Estilos para el mensaje obligatorio.
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 09:34:39 - automatic
-   * @updatedAt 2024-10-22 19:27:23 - automatic
-   * @updatedUser Bruce Escobar - automatic
+   * @updatedAt 2024-12-30 12:00:12 - automatic
+   * @updatedUser cesar - automatic
    */
   typographyMandatoryMessageStyled: ({ theme, ownerState }) => ({
-    marginInlineStart: theme.spacing(0.4),
     "& .MuiTypography-root": {
       color: theme.vars.palette.text.primary,
       [theme.breakpoints.up("sm")]: {
@@ -78,8 +76,8 @@ const labelStyles = {
    * Estilos para el icono del mensaje de ayuda.
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 09:34:39 - automatic
-   * @updatedAt 2024-10-22 19:27:23 - automatic
-   * @updatedUser Bruce Escobar - automatic
+   * @updatedAt 2024-12-30 12:00:12 - automatic
+   * @updatedUser cesar - automatic
    */
   iconHelperMessageStyled: ({ theme }) => ({
     height: "24px",
@@ -97,8 +95,8 @@ const labelStyles = {
    *  Estilos para el componente Skeleton.
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 09:34:39 - automatic
-   * @updatedAt 2024-10-22 19:27:23 - automatic
-   * @updatedUser Bruce Escobar - automatic
+   * @updatedAt 2024-12-30 12:00:12 - automatic
+   * @updatedUser cesar - automatic
    */
   skeletonStyled: ({ ownerState, theme }) => ({
     // borderRadius:theme.vars.size.borderRadius.r1,

package/components/PropertyValue/PropertyValue.d.ts

@@ -1,5 +1,9 @@
 import { PropertyValueProps } from './types';
 /**
- * TODO: Documentar
+ * PropertyValue component is used to display a property and its value in a form or not.
+ * @author cesar - automatic
+ * @createdAt 2024-12-19 14:44:17 - automatic
+ * @updatedAt 2024-12-30 09:30:27 - automatic
+ * @updatedUser cesar - automatic
  */
 export declare function PropertyValue(props: PropertyValueProps): import("react/jsx-runtime").JSX.Element;

package/components/PropertyValue/PropertyValue.js

@@ -1,195 +1,82 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { P as PropertyValueRoot } from "./styles.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { p as propertyValueUtilityClasses } from "./classes/index.js";
 import clsx from "clsx";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
-import { T as TEST_PROPS_DATA, C as COMPONENT_PREFIX } from "./constants.js";
-import { g as getNameDataTestId } from "../../test/getNameDataTestId.js";
+import { T as TEST_PROPS_DATA, P as PROPERTY_VALUE_KEY_COMPONENT, C as COMPONENT_PREFIX } from "./constants.js";
+import { a as getPropDataTestId, g as getNameDataTestId } from "../../test/getNameDataTestId.js";
+import { P as PropertyValueRootStyled, a as PropertyStyled, V as ValueStyled } from "./slots/PropertyValueSlots.js";
+import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { L as Label } from "../Label/Label.js";
+import { T as Typography } from "../mui_extended/Typography/Typography.js";
 import { I as Icon } from "../Icon/Icon.js";
 function PropertyValue(props) {
   const {
     property,
-    iconProperty,
+    startAdornment,
     value,
-    propertyWidth = 200,
-    valueHeight = "auto",
-    valueWidth = "100",
-    valueWidthMobile,
-    isForm,
     className,
+    isForm,
     dataTestId = "",
     disabled = false,
     mandatory,
     mandatoryMessage,
-    helperMessage
+    helperMessage,
+    semanticWidth = "fullWidth"
   } = props;
-  const isDesktop = useResponsiveDesktop();
-  const getValueW = () => {
-    if (valueWidthMobile && !isDesktop) {
-      return valueWidthMobile;
-    }
-    if (valueWidth === 75 && isDesktop) {
-      return 75;
-    } else if (valueWidth === 75 && !isDesktop) {
-      return 100;
-    }
-    if (valueWidth === 50 && isDesktop) {
-      return 50;
-    } else if (valueWidth === 50 && !isDesktop) {
-      return 100;
-    }
-    if (valueWidth === 25 && isDesktop || valueWidth === 12.5 && isDesktop) {
-      return valueWidth;
-    }
-    if (valueWidth === 25 && !isDesktop) {
-      return 50;
-    }
-    if (valueWidth === 12.5 && !isDesktop) {
-      return 25;
-    }
-    return 100;
-  };
   const ownerState = {
     disabled: isForm && disabled ? disabled : false,
     isForm: isForm ? true : false,
-    isMobile: !isDesktop
+    semanticWidth
+  };
+  const renderIcon = () => {
+    if (!startAdornment) {
+      return null;
+    }
+    if (typeof startAdornment === "string") {
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          src: startAdornment
+        }
+      );
+    }
+    return startAdornment;
+  };
+  const renderValue = () => {
+    if (typeof value === "string") {
+      return /* @__PURE__ */ jsx(Typography, { variant: "bodyDens", children: value });
+    }
+    return value;
   };
-  const classes = propertyValueUtilityClasses(ownerState);
-  if (!isForm) {
-    return /* @__PURE__ */ jsxs(
-      PropertyValueRoot,
-      {
-        className: clsx(classes.root, className),
-        style: {
-          gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr"
-        },
-        ...process.env.NODE_ENV !== "production" ? {
-          [TEST_PROPS_DATA]: JSON.stringify([
-            { property: property ? true : false, value: value ? true : false }
-          ]),
-          [TEST_PROP_ID]: getNameDataTestId(
-            COMPONENT_PREFIX,
-            "root",
-            dataTestId
-          )
-        } : {},
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: classes.property,
-              style: {
-                width: propertyWidth && isDesktop ? propertyWidth : "150px",
-                minWidth: propertyWidth && isDesktop ? propertyWidth : "150px"
-              },
-              ...process.env.NODE_ENV !== "production" ? {
-                [TEST_PROP_ID]: getNameDataTestId(
-                  COMPONENT_PREFIX,
-                  "property",
-                  dataTestId
-                )
-              } : {},
-              children: [
-                iconProperty ? /* @__PURE__ */ jsx(Icon, { src: iconProperty, className: classes.iconProperty }) : null,
-                /* @__PURE__ */ jsx(
-                  Label,
-                  {
-                    label: property,
-                    mandatory,
-                    mandatoryMessage,
-                    helperMessage
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: classes.value,
-              style: {
-                width: `${getValueW()}%`,
-                maxWidth: `${getValueW()}%`,
-                height: valueHeight
-              },
-              ...process.env.NODE_ENV !== "production" ? {
-                [TEST_PROP_ID]: getNameDataTestId(
-                  COMPONENT_PREFIX,
-                  "value",
-                  dataTestId
-                )
-              } : {},
-              children: value
-            }
-          )
-        ]
-      }
-    );
-  }
   return /* @__PURE__ */ jsxs(
-    PropertyValueRoot,
+    PropertyValueRootStyled,
     {
-      className: clsx(classes.root, className),
-      style: { gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr" },
+      role: isForm ? "property-value-form-role" : "property-value-role",
+      className: clsx(getComponentSlotRoot(PROPERTY_VALUE_KEY_COMPONENT), className),
+      ...getPropDataTestId(PROPERTY_VALUE_KEY_COMPONENT, "root", dataTestId),
+      ownerState,
       ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROPS_DATA]: JSON.stringify([
-          { property: property ? true : false, value: value ? true : false }
-        ]),
-        [TEST_PROP_ID]: getNameDataTestId(
-          COMPONENT_PREFIX,
-          "root",
-          dataTestId
-        )
+        [TEST_PROPS_DATA]: JSON.stringify([{ property: !!property, value: !!value }]),
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "root", dataTestId)
       } : {},
       children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(classes.root, className),
-            style: { width: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr" },
-            ...process.env.NODE_ENV !== "production" ? {
-              [TEST_PROPS_DATA]: JSON.stringify([
-                { property: property ? true : false, value: value ? true : false }
-              ]),
-              [TEST_PROP_ID]: getNameDataTestId(
-                COMPONENT_PREFIX,
-                "root",
-                dataTestId
-              )
-            } : {},
-            children: [
-              iconProperty ? /* @__PURE__ */ jsx(Icon, { src: iconProperty, className: classes.iconProperty }) : null,
-              /* @__PURE__ */ jsx(
-                Label,
-                {
-                  label: property,
-                  mandatory,
-                  mandatoryMessage,
-                  helperMessage
-                }
-              )
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs(PropertyStyled, { ownerState, children: [
+          renderIcon(),
+          /* @__PURE__ */ jsx(
+            Label,
+            {
+              label: property,
+              mandatory,
+              mandatoryMessage,
+              helperMessage
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
-          "div",
+          ValueStyled,
           {
-            className: classes.value,
-            style: {
-              width: `${getValueW()}%`,
-              maxWidth: `${getValueW()}%`,
-              height: valueHeight
-            },
-            ...process.env.NODE_ENV !== "production" ? {
-              [TEST_PROP_ID]: getNameDataTestId(
-                COMPONENT_PREFIX,
-                "value",
-                dataTestId
-              )
-            } : {},
-            children: value
+            role: "property-value-value-role",
+            ownerState,
+            children: renderValue()
           }
         )
       ]

package/components/PropertyValue/PropertyValue.styles.d.ts

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

package/components/PropertyValue/PropertyValue.styles.js

@@ -0,0 +1,99 @@
+const CONTAINER_QUERY_NAME = "container";
+const propertyValueStyles = {
+  /**
+   * Property Value Root Styles
+   * @author cesar - automatic
+   * @createdAt 2024-12-19 14:44:17 - automatic
+   * @updatedAt 2025-01-02 08:01:12 - automatic
+   * @updatedUser cesar - automatic
+   */
+  Root: ({ theme, ownerState }) => {
+    const createSemanticStyle = (minWidth, maxWidth) => ({
+      minWidth,
+      maxWidth,
+      [`@container ${CONTAINER_QUERY_NAME} (max-width: ${parseInt(minWidth, 10)}px)`]: {
+        minWidth: "100%",
+        maxWidth: "100%"
+      }
+    });
+    const semanticStylesMap = {
+      email: createSemanticStyle("260px", "400px"),
+      shortName: createSemanticStyle("40px", "90px"),
+      mediumName: createSemanticStyle("80px", "260px"),
+      bigName: createSemanticStyle("330px", "520px"),
+      shortId: createSemanticStyle("16px", "44px"),
+      mediumId: createSemanticStyle("28px", "60px"),
+      bigId: createSemanticStyle("36px", "200px"),
+      shortDescription: createSemanticStyle("324px", "796px"),
+      mediumDescription: createSemanticStyle("796px", "1500px"),
+      bigDescription: {
+        minWidth: "100%",
+        maxWidth: "100%"
+      },
+      shortNumber: createSemanticStyle("30px", "50px"),
+      mediumNumber: createSemanticStyle("44px", "60px"),
+      bigNumber: createSemanticStyle("61px", "162px"),
+      percentNumber: createSemanticStyle("30px", "50px"),
+      fullWidth: {
+        minWidth: "100%",
+        maxWidth: "100%"
+      }
+    };
+    const semanticStyle = ownerState?.semanticWidth && semanticStylesMap[ownerState.semanticWidth] ? semanticStylesMap[ownerState.semanticWidth] : {};
+    return {
+      display: "flex",
+      flexDirection: ownerState?.isForm ? "column" : "row",
+      justifyContent: ownerState?.isForm ? "space-between" : "center",
+      alignItems: "flex-start",
+      gap: theme.vars.size.baseSpacings["sp0-5"],
+      color: theme.palette.text.primary,
+      paddingTop: !ownerState?.isForm ? theme.vars.size.baseSpacings.sp1 : void 0,
+      paddingBottom: !ownerState?.isForm ? theme.vars.size.baseSpacings.sp1 : void 0,
+      borderBottom: !ownerState?.isForm ? `${theme.vars.palette.border.disabled} solid 1px` : "none",
+      "&:hover": !ownerState?.isForm && {
+        background: theme.vars.palette.background?.hover
+      },
+      ...semanticStyle,
+      [`@container ${CONTAINER_QUERY_NAME} (min-width: 0px) and (max-width: 400px)`]: {
+        flexDirection: "column"
+      },
+      ...theme.generalSettings.isMobile && {
+        flexDirection: "column"
+      },
+      variants: []
+    };
+  },
+  /**
+   * Property Styles
+   * @author cesar - automatic
+   * @createdAt 2024-12-26 11:44:46 - automatic
+   * @updatedAt 2025-01-02 08:01:12 - automatic
+   * @updatedUser cesar - automatic
+   */
+  property: ({ theme, ownerState }) => ({
+    display: "flex",
+    alignItems: "center",
+    minWidth: "200px",
+    width: ownerState?.semanticWidth ? "auto" : "200px",
+    fontSize: theme.typography.body2.fontSize,
+    color: theme.palette.text.primary
+  }),
+  /**
+   * Value Styles (Form and No Form Combined)
+   * @author cesar - automatic
+   * @createdAt 2024-12-26 11:44:46 - automatic
+   * @updatedAt 2025-01-02 08:01:12 - automatic
+   * @updatedUser cesar - automatic
+   */
+  value: ({ theme, ownerState }) => ({
+    width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
+    ...ownerState?.isForm && {
+      gap: theme.vars.size.baseSpacings["sp0-5"]
+    }
+  })
+};
+export {
+  propertyValueStyles as p
+};

package/components/PropertyValue/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const COMPONENT_PREFIX = "m4l-property-value";
 export declare const PREFIX_TEST_ATTRIBUTE = "data-testid";
 export declare const TEST_PROPS_DATA = "m4l-property-value-data";
+export declare const PROPERTY_VALUE_KEY_COMPONENT = "M4LPropertyValue";

package/components/PropertyValue/constants.js

@@ -1,6 +1,8 @@
 const COMPONENT_PREFIX = "m4l-property-value";
 const TEST_PROPS_DATA = `${COMPONENT_PREFIX}-data`;
+const PROPERTY_VALUE_KEY_COMPONENT = "M4LPropertyValue";
 export {
   COMPONENT_PREFIX as C,
+  PROPERTY_VALUE_KEY_COMPONENT as P,
   TEST_PROPS_DATA as T
 };

package/components/PropertyValue/slots/PropertyValueEnum.d.ts

@@ -0,0 +1,5 @@
+export declare enum PropertyValueSlots {
+    Root = "Root",
+    property = "property",
+    value = "value"
+}

package/components/PropertyValue/slots/PropertyValueEnum.js

@@ -0,0 +1,9 @@
+var PropertyValueSlots = /* @__PURE__ */ ((PropertyValueSlots2) => {
+  PropertyValueSlots2["Root"] = "Root";
+  PropertyValueSlots2["property"] = "property";
+  PropertyValueSlots2["value"] = "value";
+  return PropertyValueSlots2;
+})(PropertyValueSlots || {});
+export {
+  PropertyValueSlots as P
+};

package/components/PropertyValue/slots/PropertyValueSlots.d.ts

@@ -0,0 +1,9 @@
+export declare const PropertyValueRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const PropertyStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const ValueStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;

package/components/PropertyValue/slots/PropertyValueSlots.js

@@ -0,0 +1,21 @@
+import { styled } from "@mui/material/styles";
+import { P as PROPERTY_VALUE_KEY_COMPONENT } from "../constants.js";
+import { p as propertyValueStyles } from "../PropertyValue.styles.js";
+import { P as PropertyValueSlots } from "./PropertyValueEnum.js";
+const PropertyValueRootStyled = styled("div", {
+  name: PROPERTY_VALUE_KEY_COMPONENT,
+  slot: PropertyValueSlots.Root
+})(propertyValueStyles?.Root);
+const PropertyStyled = styled("div", {
+  name: PROPERTY_VALUE_KEY_COMPONENT,
+  slot: PropertyValueSlots.property
+})(propertyValueStyles?.property);
+const ValueStyled = styled("div", {
+  name: PROPERTY_VALUE_KEY_COMPONENT,
+  slot: PropertyValueSlots.value
+})(propertyValueStyles?.value);
+export {
+  PropertyValueRootStyled as P,
+  ValueStyled as V,
+  PropertyStyled as a
+};

package/components/PropertyValue/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PropertyValueEnum';
+export * from './PropertyValueSlots';

package/components/PropertyValue/tests/PropertyValue.test.d.ts

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

package/components/PropertyValue/types.d.ts

@@ -1,23 +1,97 @@
 import { ReactNode } from 'react';
 import { LabelProps } from '../Label/types';
+import { PROPERTY_VALUE_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { PropertyValueSlots } from './slots/PropertyValueEnum';
+/**
+ * Tipos de valores posibles para los componentes dentro de `PropertyValue`.
+ */
+export type PropertyValueType = keyof typeof PropertyValueSlots;
+/**
+ * Propiedades relacionadas con la configuración de la propiedad (`property`) en el componente `PropertyValue`.
+ */
 export interface PropertyProps {
+    /**
+     * Ancho del contenedor de la propiedad, en píxeles.
+     */
     propertyWidth?: number;
-    iconProperty?: string;
+    /**
+     * Icono que se muestra junto a la propiedad.
+     */
+    startAdornment?: ReactNode;
 }
+/**
+ * Propiedades relacionadas con la configuración del valor (`value`) en el componente `PropertyValue`.
+ */
 export interface ValueProps {
+    /**
+     * Altura del contenedor del valor, en píxeles o como cadena (e.g., `'auto'`).
+     */
     valueHeight?: number | string;
+    /**
+     * @deprecated Esta propiedad está obsoleta y será eliminada en futuras versiones.
+     * Utiliza `semanticWidth` o `valueWidthMobile` en su lugar.
+     *
+     * Ancho del contenedor del valor como porcentaje para escritorios.
+     */
     valueWidth?: number;
+    /**
+     * Ancho del contenedor del valor como porcentaje para dispositivos móviles.
+     */
     valueWidthMobile?: number;
 }
+/**
+ * Valores posibles para la propiedad semanticWidth
+ */
+export type SemanticWidthOptions = 'email' | 'shortName' | 'mediumName' | 'bigName' | 'shortId' | 'mediumId' | 'bigId' | 'shortDescription' | 'mediumDescription' | 'bigDescription' | 'shortNumber' | 'mediumNumber' | 'bigNumber' | 'percentNumber' | 'fullWidth';
+/**
+ * Propiedades principales para el componente `PropertyValue`.
+ */
 export interface PropertyValueProps extends PropertyProps, ValueProps, Omit<LabelProps, 'label'> {
+    /**
+     * Nombre de la propiedad que se muestra.
+     */
     property: string;
+    /**
+     * Valor asociado a la propiedad. Puede ser un número, una cadena o un nodo React.
+     */
     value: number | string | ReactNode;
+    /**
+     * Indica si el componente debe mostrarse como parte de un formulario.
+     */
     isForm?: boolean;
+    /**
+     * Clase CSS personalizada para el componente.
+     */
     className?: string;
+    /**
+     * Identificador de prueba utilizado para pruebas automatizadas.
+     */
     dataTestId?: string;
+    /**
+     * Indica si el componente está deshabilitado.
+     */
     disabled?: boolean;
+    /**
+     * Define el ancho semántico del componente según el contenido.
+     */
+    semanticWidth?: SemanticWidthOptions;
 }
-export interface OwnerState extends Pick<PropertyValueProps, 'disabled'> {
+/**
+ * Estado del propietario para el componente `PropertyValue`, utilizado para personalizar estilos y comportamientos.
+ */
+export interface PropertyVaLueOwnerState extends Pick<PropertyValueProps, 'disabled' | 'semanticWidth'> {
+    /**
+     * Indica si el componente está en modo formulario.
+     */
     isForm: boolean;
-    isMobile: boolean;
+    /**
+     * Propiedades adicionales para estilos o comportamientos personalizados.
+     */
+    [key: string]: unknown;
 }
+/**
+ * Definición de estilos para el componente `PropertyValue`.
+ */
+export type PropertyValueStyles = OverridesStyleRules<PropertyValueType, typeof PROPERTY_VALUE_KEY_COMPONENT, Theme>;

package/components/WindowConfirm/WindowConfirm.styles.js

@@ -3,8 +3,8 @@ const windowConfirmStyles = {
    * Wrapper Window Confirm Styles
    * @author cesar - automatic
    * @createdAt 2024-11-21 08:55:01 - automatic
-   * @updatedAt 2024-12-30 14:36:09 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2024-12-20 12:09:44 - automatic
+   * @updatedUser cesar - automatic
    */
   wrapperWindowConfirm: ({ theme, ownerState }) => ({
     display: "flex",
@@ -36,10 +36,10 @@ const windowConfirmStyles = {
    * Wrapper Window Confirm Content Styles
    * @author cesar - automatic
    * @createdAt 2024-11-22 10:58:23 - automatic
-   * @updatedAt 2024-12-30 14:36:09 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2024-12-20 12:09:44 - automatic
+   * @updatedUser cesar - automatic
    */
-  windowConfirmContent: ({ theme, ownerState }) => ({
+  windowConfirmContent: ({ theme }) => ({
     display: "flex",
     padding: theme.vars.size.baseSpacings.sp0,
     width: "100%",
@@ -48,29 +48,14 @@ const windowConfirmStyles = {
     alignItems: "center",
     gap: theme.vars.size.baseSpacings.sp3,
     alignSelf: "stretch",
-    borderRadius: theme.vars.size.borderRadius.r0,
-    ...theme.generalSettings.isMobile ? {
-      ...ownerState.windowBaseSize === "small" && {
-        height: theme.vars.size.mobile.small.container
-      },
-      ...ownerState.windowBaseSize === "medium" && {
-        height: theme.vars.size.mobile.medium.container
-      }
-    } : {
-      ...ownerState.windowBaseSize === "small" && {
-        height: theme.vars.size.desktop.small.container
-      },
-      ...ownerState.windowBaseSize === "medium" && {
-        height: theme.vars.size.desktop.medium.container
-      }
-    }
+    borderRadius: theme.vars.size.borderRadius.r0
   }),
   /**
    *  Container Illustration Styles
    * @author cesar - automatic
    * @createdAt 2024-11-19 11:57:37 - automatic
-   * @updatedAt 2024-12-30 14:36:09 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2024-12-20 12:09:44 - automatic
+   * @updatedUser cesar - automatic
    */
   illustrationContainer: ({ theme }) => ({
     display: "flex",
@@ -85,8 +70,8 @@ const windowConfirmStyles = {
    * Icon Illustration Styles
    * @author cesar - automatic
    * @createdAt 2024-11-19 11:57:37 - automatic
-   * @updatedAt 2024-12-30 14:36:09 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2024-12-20 12:09:44 - automatic
+   * @updatedUser cesar - automatic
    */
   illustrationIcon: () => ({
     width: "auto !important",
@@ -99,8 +84,8 @@ const windowConfirmStyles = {
    * Text Content Styles
    * @author cesar - automatic
    * @createdAt 2024-11-19 11:57:37 - automatic
-   * @updatedAt 2024-12-30 14:36:09 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2024-12-20 12:09:44 - automatic
+   * @updatedUser cesar - automatic
    */
   textContent: ({ theme }) => ({
     display: "flex",
@@ -113,8 +98,8 @@ const windowConfirmStyles = {
    * Title Illustration Styles
    * @author cesar - automatic
    * @createdAt 2024-11-19 11:57:37 - automatic
-   * @updatedAt 2024-12-30 14:36:09 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2024-12-20 12:09:44 - automatic
+   * @updatedUser cesar - automatic
    */
   title: ({ theme }) => ({
     color: theme.vars.palette.text.primary,
@@ -125,8 +110,8 @@ const windowConfirmStyles = {
    * Message Illustration Styles
    * @author cesar - automatic
    * @createdAt 2024-11-21 08:55:01 - automatic
-   * @updatedAt 2024-12-30 14:36:09 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2024-12-20 12:09:44 - automatic
+   * @updatedUser cesar - automatic
    */
   message: ({ theme }) => ({
     textAlign: "center",
@@ -136,8 +121,8 @@ const windowConfirmStyles = {
    * Actions Container Styles
    * @author cesar - automatic
    * @createdAt 2024-11-19 11:57:37 - automatic
-   * @updatedAt 2024-12-30 14:36:09 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2024-12-20 12:09:44 - automatic
+   * @updatedUser cesar - automatic
    */
   actionsContainer: ({ theme }) => ({
     padding: theme.vars.size.baseSpacings.sp3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.47",
+  "version": "9.1.48",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"

package/components/PropertyValue/classes/constants.d.ts

@@ -1 +0,0 @@
-export declare const componentName = "M4LPropertyValue";

package/components/PropertyValue/classes/constants.js

@@ -1,4 +0,0 @@
-const componentName = "M4LPropertyValue";
-export {
-  componentName as c
-};

package/components/PropertyValue/classes/index.d.ts

@@ -1,13 +0,0 @@
-import { PropertyValueClassesType } from './types';
-import { OwnerState } from '../types';
-export declare const propertyValueClasses: PropertyValueClassesType;
-export declare function getPropertyValueUtilityClass(slot: string): string;
-/**
- * TODO: Documentar
- */
-export declare const propertyValueUtilityClasses: (ownerState: OwnerState) => {
-    value: string;
-    root: string;
-    property: string;
-    iconProperty: string;
-};

package/components/PropertyValue/classes/index.js

@@ -1,40 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { c as componentName } from "./constants.js";
-generateUtilityClasses(
-  componentName,
-  [
-    /* elements */
-    "root",
-    "property",
-    "iconProperty",
-    "value",
-    /* states or variants of elements */
-    "isDisabled",
-    "variantIsForm",
-    "isMobile"
-  ]
-);
-function getPropertyValueUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const propertyValueUtilityClasses = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.disabled && "isDisabled",
-      ownerState.isForm && "variantIsForm",
-      ownerState.isMobile && "isMobile"
-    ],
-    property: ["property"],
-    iconProperty: ["iconProperty"],
-    value: ["value"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getPropertyValueUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-export {
-  propertyValueUtilityClasses as p
-};

package/components/PropertyValue/classes/types.d.ts

@@ -1,12 +0,0 @@
-import { propertyValueUtilityClasses } from '.';
-export interface PropertyValueClassesType {
-    root: string;
-    property: string;
-    value: string;
-    iconProperty: string;
-    isDisabled: string;
-    variantIsForm: string;
-    isMobile: string;
-}
-export type PropertyValueClassesKey = keyof PropertyValueClassesType;
-export type Classes = ReturnType<typeof propertyValueUtilityClasses>;

package/components/PropertyValue/styles.js

@@ -1,7 +0,0 @@
-import { styled } from "@mui/material";
-const PropertyValueRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LPropertyValue?.styleOverrides || {}
-}));
-export {
-  PropertyValueRoot as P
-};

package/components/PropertyValue/tests/constants.d.ts

@@ -1 +0,0 @@
-export declare const ICON_PREFIX = "M4LPropertyValue";

package/components/PropertyValue/tests/utils.d.ts

@@ -1,5 +0,0 @@
-import { PropertyValueClassesKey } from '../classes/types';
-/**
- * TODO: Documentar
- */
-export declare const getNamePropertyValueDataTestId: (KEY: PropertyValueClassesKey, DATATESTID: string) => string;