@m4l/components 9.1.78 → 9.1.80

package/components/Label/Label.styles.js

@@ -8,8 +8,8 @@ const labelStyles = {
    * @returns {object} - Los estilos aplicados al root del Label.
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 09:34:39 - automatic
-   * @updatedAt 2025-01-08 10:36:40 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   root: ({ theme, ownerState }) => ({
     display: "flex",
@@ -17,6 +17,16 @@ const labelStyles = {
     alignItems: "center",
     flexWrap: "wrap",
     width: "fit-content",
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "small",
+      "base",
+      (height) => ({
+        minHeight: height,
+        height: "auto",
+        maxHeight: "none"
+      })
+    ),
     gap: theme.size.baseSpacings.sp1,
     /** Estilos para el estado disabled del Label 😶‍🌫️ */
     ...ownerState.disabled && {
@@ -24,10 +34,11 @@ const labelStyles = {
     }
   }),
   /**
-   * Estilos para el slot Typography del Label 📝
-   * @param {object} theme - El tema de MUI.
-   * @param {object} ownerState - El estado del componente.
-   * @returns {object} - Los estilos aplicados al Typography del Label.
+   * Estilos para el slot Typography del Label.
+   * @author cesar - automatic
+   * @createdAt 2025-01-20 18:52:54 - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   typographyStyled: ({ theme, ownerState }) => ({
     "&.MuiTypography-root": {
@@ -50,10 +61,11 @@ const labelStyles = {
     }
   }),
   /**
-   * Estilos para el slot Typography del mensaje obligatorio del Label ❗
-   * @param {object} theme - El tema de MUI.
-   * @param {object} ownerState - El estado del componente.
-   * @returns {object} - Los estilos aplicados al Typography del mensaje obligatorio del Label.
+   * Estilos para el slot Typography del mensaje obligatorio del Label.
+   * @author cesar - automatic
+   * @createdAt 2025-01-20 18:52:54 - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   typographyMandatoryMessageStyled: ({ theme, ownerState }) => ({
     "&.MuiTypography-root": {
@@ -76,10 +88,11 @@ const labelStyles = {
     }
   }),
   /**
-   * Estilos para el slot Icon del Label 🛠️
-   * @param {object} theme - El tema de MUI.
-   * @param {object} ownerState - El estado del componente.
-   * @returns {object} - Los estilos aplicados al Icon del Label.
+   * Estilos para el slot Icon del Label.
+   * @author cesar - automatic
+   * @createdAt 2025-01-20 18:52:54 - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   iconHelperMessageStyled: ({ theme, ownerState }) => ({
     borderRadius: theme.vars.size.borderRadius.r1,
@@ -101,10 +114,11 @@ const labelStyles = {
     )
   }),
   /**
-   * Estilos para el slot Skeleton del Label 💀
-   * @param {object} theme - El tema de MUI.
-   * @param {object} ownerState - El estado del componente.
-   * @returns {object} - Los estilos aplicados al Skeleton del Label.
+   * Estilos para el slot Skeleton del Label.
+   * @author cesar - automatic
+   * @createdAt 2025-01-20 18:52:54 - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   skeletonStyled: ({ ownerState, theme }) => ({
     width: "100%",

package/components/NumberInput/NumberInput.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { useEnvironment, useModuleSkeleton } from "@m4l/core";
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { u as useNumberInput } from "./hooks/useNumberInput/useNumberInput.js";
+import { S as SkeletonStyled, R as RootStyled, I as InputStyled, C as ContainButtonsAdornmentStyled, a as ContainerButtonsStyled, b as IncrementButtonStyled, D as DecrementButtonStyled } from "./slots/NumberInputSlots.js";
+import { N as NUMBER_INPUT_KEY_COMPONENT } from "./constants.js";
+import { N as NumberInputSlots } from "./slots/NumberInputEnum.js";
+const NumberInput = forwardRef(function NumberInput2(props, forwardedRef) {
+  const {
+    className,
+    defaultValue,
+    value,
+    disabled = false,
+    endAdornment,
+    error,
+    id,
+    max,
+    min,
+    onBlur,
+    onInputChange,
+    onFocus,
+    onChange,
+    required,
+    readOnly = false,
+    shiftMultiplier,
+    startAdornment,
+    step,
+    size = "medium",
+    variant = "outlined",
+    withDecimal = false,
+    dataTestId
+  } = props;
+  const {
+    getRootProps,
+    getInputProps,
+    getIncrementButtonProps,
+    getDecrementButtonProps,
+    focusError
+  } = useNumberInput({
+    min,
+    max,
+    step,
+    withDecimal,
+    shiftMultiplier,
+    defaultValue,
+    disabled,
+    error,
+    onFocus,
+    onInputChange,
+    onBlur,
+    onChange,
+    required,
+    readOnly,
+    value,
+    inputId: id,
+    componentName: NUMBER_INPUT_KEY_COMPONENT
+  });
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const ownerState = {
+    disabled,
+    error,
+    size,
+    variant,
+    focusError,
+    noButtons: withDecimal
+  };
+  const isSkeleton = useModuleSkeleton();
+  const classes = getComponentClasses(NUMBER_INPUT_KEY_COMPONENT, NumberInputSlots);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(
+      SkeletonStyled,
+      {
+        ownerState,
+        className: clsx(classes.skeleton, className),
+        ...getPropDataTestId(NUMBER_INPUT_KEY_COMPONENT, NumberInputSlots.skeleton, dataTestId)
+      }
+    );
+  }
+  const ICON_INCREMENT = `${host_static_assets}/${environment_assets}/frontend/components/ControlIncrement/assets/icons/chevron_up_sm.svg`;
+  const ICON_DECREMENT = `${host_static_assets}/${environment_assets}/frontend/components/ControlIncrement/assets/icons/chevron_down_sm.svg`;
+  return /* @__PURE__ */ jsxs(
+    RootStyled,
+    {
+      ...getPropDataTestId(NUMBER_INPUT_KEY_COMPONENT, NumberInputSlots.root, dataTestId),
+      className: clsx(classes.root, className),
+      ref: forwardedRef,
+      ownerState,
+      ...getRootProps(),
+      children: [
+        startAdornment,
+        /* @__PURE__ */ jsx(InputStyled, { className: clsx(classes.input, className), ownerState, ...getInputProps() }),
+        /* @__PURE__ */ jsxs(ContainButtonsAdornmentStyled, { ownerState, children: [
+          endAdornment,
+          !withDecimal && /* @__PURE__ */ jsxs(ContainerButtonsStyled, { className: clsx(classes.containerButtons, className), ownerState, children: [
+            /* @__PURE__ */ jsx(
+              IncrementButtonStyled,
+              {
+                icon: ICON_INCREMENT,
+                className: clsx(classes.increment, className),
+                ownerState,
+                ...getIncrementButtonProps()
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DecrementButtonStyled,
+              {
+                icon: ICON_DECREMENT,
+                className: clsx(classes.decrement, className),
+                ownerState,
+                ...getDecrementButtonProps()
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+export {
+  NumberInput as N
+};

package/components/NumberInput/NumberInput.styles.js

@@ -0,0 +1,199 @@
+import { g as getHeightSizeStyles } from "../../utils/getHeightSizeStyles.js";
+const numberInputStyles = {
+  /**
+   * Estilos aplicados al contenedor principal (root).
+   */
+  root: ({ theme, ownerState }) => ({
+    //Estilos generales
+    display: "flex",
+    alignItems: "center",
+    position: "relative",
+    height: "auto",
+    width: "100%",
+    gap: theme.vars.size.baseSpacings.sp1,
+    paddingLeft: theme.vars.size.baseSpacings.sp1,
+    paddingRight: ownerState.noButtons && theme.vars.size.baseSpacings.sp1,
+    boxSizing: "border-box",
+    //Variantes (Outlined y Text)
+    ...ownerState.variant === "outlined" && {
+      border: theme.vars.size.borderStroke.container,
+      borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.border.default,
+      borderRadius: theme.vars.size.borderRadius.r1
+    },
+    ...ownerState.variant === "text" && {
+      borderBottom: theme.vars.size.borderStroke.container,
+      borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.border.default,
+      borderRadius: theme.vars.size.borderRadius.r1
+    },
+    // Estados (Pseudo-classes)
+    ...ownerState.disabled === false && {
+      "&:hover": {
+        background: ownerState.error ? theme.vars.palette.error.hoverOpacity : theme.vars.palette.primary.hoverOpacity,
+        borderColor: ownerState.error ? theme.vars.palette.error.hover : theme.vars.palette.primary.hover,
+        "& button": {
+          background: ownerState.error ? theme.vars.palette.error.hoverOpacity : theme.vars.palette.primary.hoverOpacity,
+          "&:hover": {
+            // background: theme.vars.palette?.default.hover,
+          }
+        }
+      },
+      "&:focus-within": {
+        borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
+      },
+      "&:active": {
+        background: "transparent",
+        borderColor: ownerState.error ? theme.vars.palette.error.active : theme.vars.palette.primary.active
+      }
+    },
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "action"
+    )
+  }),
+  /**
+   * Estilos aplicados al campo de entrada (input).
+   */
+  input: ({ theme, ownerState }) => ({
+    //Estilos generales
+    background: "transparent",
+    border: 0,
+    outline: 0,
+    color: ownerState.disabled ? theme.vars.palette.text.disabled : theme.vars.palette.text.primary,
+    height: "max-content ",
+    width: "100%",
+    ...ownerState.focusError && {
+      color: theme.vars.palette.error.main
+    }
+  }),
+  /**
+   * Estilos para envoltorio de boton y endAdornment
+   */
+  ContainButtonsAdornment: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignContent: "center",
+    height: "100%",
+    gap: theme.vars.size.baseSpacings.sp2,
+    "span": {
+      alignSelf: "center"
+    }
+  }),
+  /**
+   * Estilos aplicados al div que contiene los botones de incremento/decremento.
+   */
+  containerButtons: () => ({
+    display: "flex",
+    flexDirection: "column",
+    height: "100%"
+  }),
+  /**
+   * Estilos de increment
+   */
+  increment: ({ theme, ownerState }) => ({
+    //Estilos generales
+    height: "50%",
+    background: theme.vars.palette.default.main,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: `calc(${theme.vars.size.borderRadius.r1} - 1px)`,
+    outlineOffset: 0,
+    //Sizes
+    ...ownerState.sizes === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.medium.action
+      } : {
+        width: theme.vars.size.desktop.medium.action
+      }
+    },
+    ...ownerState.sizes === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.small.action
+      } : {
+        width: theme.vars.size.desktop.small.action
+      }
+    },
+    //Estados (Pseudo-classes)
+    "&:focus-visible": {
+      zIndex: 1,
+      outline: `1px solid ${theme.vars.palette?.primary.main}`
+    },
+    "&:active": {
+      background: `${theme.vars.palette?.default.active} !important`
+    },
+    "& div": {
+      height: "100%",
+      width: "100%",
+      "& div": {
+        height: "100%",
+        width: "50%",
+        minHeight: "min-content",
+        maskPosition: "center center"
+      }
+    }
+  }),
+  /**
+   * Estilos Decrement
+   */
+  decrement: ({ theme, ownerState }) => ({
+    //Estilos generales
+    height: "50%",
+    background: theme.vars.palette.default.main,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: `calc(${theme.vars.size.borderRadius.r1} - 1px)`,
+    outlineOffset: 0,
+    //Sizes
+    ...ownerState.sizes === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.medium.action
+      } : {
+        width: theme.vars.size.desktop.medium.action
+      }
+    },
+    ...ownerState.sizes === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.small.action
+      } : {
+        width: theme.vars.size.desktop.small.action
+      }
+    },
+    // Estados (Pseudo-classes)
+    "&:focus-visible": {
+      zIndex: 1,
+      outline: `1px solid ${theme.vars.palette?.primary.main}`
+    },
+    "&:active": {
+      background: `${theme.vars.palette?.default.active} !important`
+    },
+    "& div": {
+      height: "100%",
+      width: "100%",
+      "& div": {
+        height: "100%",
+        width: "50%",
+        minHeight: "min-content",
+        maskPosition: "center center"
+      }
+    }
+  }),
+  /**
+   * Estilos aplicados al skeleton.
+   */
+  skeleton: ({ theme, ownerState }) => ({
+    "&.M4lclassCssSpecificity": {
+      width: "100%",
+      ...getHeightSizeStyles(
+        theme.generalSettings.isMobile,
+        ownerState.size || "medium",
+        "action"
+      )
+    }
+  })
+};
+export {
+  numberInputStyles as n
+};

package/components/NumberInput/constants.js

@@ -0,0 +1,4 @@
+const NUMBER_INPUT_KEY_COMPONENT = "M4LNumberInput";
+export {
+  NUMBER_INPUT_KEY_COMPONENT as N
+};

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

@@ -0,0 +1,12 @@
+const NumberInputActionTypes = {
+  clamp: "numberInput:clamp",
+  inputChange: "numberInput:inputChange",
+  increment: "numberInput:increment",
+  decrement: "numberInput:decrement",
+  decrementToMin: "numberInput:decrementToMin",
+  incrementToMax: "numberInput:incrementToMax",
+  resetInputValue: "numberInput:resetInputValue"
+};
+export {
+  NumberInputActionTypes as N
+};

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

@@ -0,0 +1,106 @@
+import { c as clampStepwise, i as isNumber } from "../../utils.js";
+import { N as NumberInputActionTypes } from "./NumberInputActions.js";
+function getClampedValues(rawValue, context) {
+  const { min, max, step, withDecimal } = context;
+  const clampedValue = rawValue === null ? null : clampStepwise(rawValue, min, max, step, withDecimal);
+  const newInputValue = clampedValue === null ? "" : String(clampedValue);
+  return {
+    value: clampedValue,
+    inputValue: newInputValue
+  };
+}
+function roundToDecimals(value, decimals = 6) {
+  const factor = Math.pow(10, decimals);
+  return Math.round(value * factor) / factor;
+}
+function stepValue(state, context, direction, multiplier) {
+  const { value } = state;
+  const { step = 1, min, max } = context;
+  if (isNumber(value)) {
+    return {
+      up: roundToDecimals(value + (step ?? 1) * multiplier),
+      down: roundToDecimals(value - (step ?? 1) * multiplier)
+    }[direction];
+  }
+  return {
+    up: min ?? 1,
+    down: max ?? -1
+  }[direction];
+}
+function handleClamp(state, context, inputValue) {
+  const { getInputValueAsString } = context;
+  const numberValueAsString = getInputValueAsString(inputValue);
+  const intermediateValue = numberValueAsString === "" || numberValueAsString === "-" ? null : Number(numberValueAsString);
+  const clampedValues = getClampedValues(intermediateValue, context);
+  return {
+    ...state,
+    ...clampedValues,
+    noControlledValue: clampedValues.value
+  };
+}
+function handleInputChange(state, context, inputValue) {
+  const { getInputValueAsString, min, max, step, withDecimal } = context;
+  const numberValueAsString = getInputValueAsString(inputValue);
+  if (numberValueAsString.match(withDecimal ? /^-?(?:\d+(\.\d*)?|\.\d+)$/ : /^-?\d+?$/) || numberValueAsString === "" || numberValueAsString === "." || numberValueAsString === "-") {
+    const intermediateValue = numberValueAsString === "" || numberValueAsString === "-" || numberValueAsString === "." ? null : Number(numberValueAsString);
+    const clampedValue = intermediateValue === null ? null : clampStepwise(intermediateValue, min, max, step, withDecimal);
+    const value = intermediateValue !== null && clampedValue === Number(numberValueAsString) ? clampedValue : state.value;
+    const ret = {
+      ...state,
+      value,
+      inputValue: numberValueAsString,
+      noControlledValue: value
+    };
+    return ret;
+  }
+  return state;
+}
+function handleStep(state, context, applyMultiplier, direction) {
+  const multiplier = applyMultiplier ? context.shiftMultiplier : 1;
+  const newValue = stepValue(state, context, direction, multiplier);
+  const clampedValues = getClampedValues(newValue, context);
+  return {
+    ...state,
+    ...clampedValues,
+    noControlledValue: clampedValues.value
+  };
+}
+function handleToMinOrMax(state, context, to) {
+  const newValue = context[to];
+  if (!isNumber(newValue)) {
+    return state;
+  }
+  return {
+    ...state,
+    value: newValue,
+    inputValue: String(newValue),
+    noControlledValue: newValue
+  };
+}
+function numberInputReducer(state, action) {
+  const { type, context } = action;
+  switch (type) {
+    case NumberInputActionTypes.clamp:
+      return handleClamp(state, context, action.inputValue);
+    case NumberInputActionTypes.inputChange:
+      return handleInputChange(state, context, action.inputValue);
+    case NumberInputActionTypes.increment:
+      return handleStep(state, context, action.applyMultiplier, "up");
+    case NumberInputActionTypes.decrement:
+      return handleStep(state, context, action.applyMultiplier, "down");
+    case NumberInputActionTypes.incrementToMax:
+      return handleToMinOrMax(state, context, "max");
+    case NumberInputActionTypes.decrementToMin:
+      return handleToMinOrMax(state, context, "min");
+    case NumberInputActionTypes.resetInputValue:
+      return {
+        ...state,
+        inputValue: String(state.value)
+      };
+    default:
+      return state;
+  }
+}
+export {
+  numberInputReducer as n
+};