@m4l/components 7.0.0 → 7.1.2

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

@@ -2,7 +2,7 @@ import { Theme } from '@mui/material/styles';
 import { COMPONET_KEY_COMPONENT } from './constants';
 import { CourseFormatterSlots } from './slots/slots';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
-export declare type CourseFormatterProps = {
+export type CourseFormatterProps = {
     /**
      * "course" curso sobre tierra donde el norte es 0 grados, y el sur es 180 grados.
      */
@@ -13,6 +13,6 @@ export declare type CourseFormatterProps = {
      */
     gapAngle?: number;
 };
-export declare type CourseFormatterSlotsType = keyof typeof CourseFormatterSlots;
-export declare type CourseFormatterOwnerState = {};
-export declare type CourseFormatterStyles = Partial<OverridesStyleRules<CourseFormatterSlotsType, typeof COMPONET_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type CourseFormatterSlotsType = keyof typeof CourseFormatterSlots;
+export type CourseFormatterOwnerState = {};
+export type CourseFormatterStyles = Partial<OverridesStyleRules<CourseFormatterSlotsType, typeof COMPONET_KEY_COMPONENT, Theme> | undefined> | undefined;

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

@@ -7,7 +7,7 @@ declare type Maybe<T> = T | undefined | null;
  * @param format Formato
  * @returns string
  */
-export declare function getFormatDate(presentationType: PresentationType, value: Maybe<Date | string | number>, format?: string): string;
+export declare function useFormatDate(presentationType: PresentationType, value: Maybe<Date | string | number>, format?: string): string;
 /**
  * Formatea un valor de fecha en formato UTC, a un formato legible para humanos. Retorna un JSX
  * @param props DateFormatterProps

package/components/formatters/DateFormatter/index.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { useFormatter } from "@m4l/graphics";
+import { W as WrapperComponent } from "../../WrapperComponent/index.js";
+function useFormatDate(presentationType, value, format) {
+  const { dateFormatter } = useFormatter();
+  let finalFormat = format || dateFormatter.datetimeFormat;
+  let result;
+  let resultDate;
+  if (value === void 0 || value === null) {
+    return "-";
+  }
+  switch (presentationType) {
+    case "datetime":
+      finalFormat = format || dateFormatter.datetimeFormat;
+      break;
+    case "date":
+      finalFormat = format || dateFormatter.dateFormat;
+      break;
+    case "time":
+      finalFormat = format || dateFormatter.timeFormat;
+      break;
+  }
+  try {
+    if (typeof value === "number" || typeof value === "string") {
+      resultDate = new Date(value);
+    } else {
+      resultDate = value;
+    }
+    result = dateFormatter.formatDate(resultDate, finalFormat);
+    return result;
+  } catch (_e) {
+    result = "-";
+    return result;
+  }
+}
+function DateFormatter(props) {
+  const { presentationType, value, format, Component = WrapperComponent } = props;
+  return /* @__PURE__ */ jsx(Component, { children: useFormatDate(presentationType, value, format) });
+}
+export {
+  DateFormatter as D,
+  useFormatDate as u
+};

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { Maybe } from '@m4l/core';
-export declare type PresentationType = 'date' | 'datetime' | 'time';
-export declare type valueType = Date | string | number;
+export type PresentationType = 'date' | 'datetime' | 'time';
+export type valueType = Date | string | number;
 export interface DateFormatterProps {
     Component?: React.ElementType;
     presentationType: PresentationType;

package/components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.d.ts

@@ -7,5 +7,5 @@ import { DistanceToNowFormatterProps } from './types';
  * En tiempo presente
  * En tiempo futuro
  *
- **/
+ */
 export declare const DistanceToNowFormatter: (props: DistanceToNowFormatterProps) => import("react/jsx-runtime").JSX.Element;

package/components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useState, useCallback } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { D as DTNFRootStyled } from "./slots/DistanceToNowFormatterSlots.js";
+import { u as useInterval } from "../../../hooks/useInterval/index.js";
+import { D as DTNF_DICCTIONARY } from "./dictionary.js";
+import { f as formatDistanceToNow } from "../../../utils/formatDistanceToNow/formatDistanteToNow.js";
+const DistanceToNowFormatter = (props) => {
+  const { presentationTime = "present", date, delay } = props;
+  const { getLabel } = useModuleDictionary();
+  const dictionary = useMemo(() => {
+    const ret = {
+      label_sentence_past_seconds: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PAST_SECONDS),
+      label_sentence_past_others: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PAST_OTHERS),
+      label_sentence_present_seconds: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PRESENT_SECONDS),
+      label_sentence_present_others: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_PRESENT_OTHERS),
+      label_sentence_future_seconds: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_FUTURE_SECONDS),
+      label_sentence_future_others: getLabel(DTNF_DICCTIONARY.LABEL_SENTENCE_FUTURE_OTHERS),
+      label_unit_time_second: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_SECOND),
+      label_unit_time_seconds: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_SECONDS),
+      label_unit_time_minute: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MINUTE),
+      label_unit_time_minutes: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MINUTES),
+      label_unit_time_hour: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_HOUR),
+      label_unit_time_hours: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_HOURS),
+      label_unit_time_day: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_DAY),
+      label_unit_time_days: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_DAYS),
+      label_unit_time_month: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MONTH),
+      label_unit_time_months: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_MONTHS),
+      label_unit_time_year: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_YEAR),
+      label_unit_time_years: getLabel(DTNF_DICCTIONARY.LABEL_UNIT_TIME_YEARS)
+    };
+    return ret;
+  }, [getLabel]);
+  const [time, setTime] = useState(formatDistanceToNow(presentationTime, date, dictionary));
+  const updateTime = useCallback(() => {
+    setTime(formatDistanceToNow(presentationTime, date, dictionary));
+  }, [date, dictionary, presentationTime]);
+  useInterval(updateTime, delay);
+  return /* @__PURE__ */ jsx(DTNFRootStyled, { children: time });
+};
+export {
+  DistanceToNowFormatter as D
+};

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

@@ -1,2 +1,2 @@
-import type { DistanceToNowFormatterStyles } from './types';
+import { DistanceToNowFormatterStyles } from './types';
 export declare const distanceToNowFormatterStyles: DistanceToNowFormatterStyles;

package/components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.styles.js

@@ -0,0 +1,6 @@
+const distanceToNowFormatterStyles = {
+  root: () => ({})
+};
+export {
+  distanceToNowFormatterStyles as d
+};

package/components/formatters/DistanceToNowFormatter/constants.js

@@ -0,0 +1,4 @@
+const COMPONET_KEY_COMPONENT = "M4LDistanceToNowFormatter";
+export {
+  COMPONET_KEY_COMPONENT as C
+};

package/components/formatters/DistanceToNowFormatter/dictionary.js

@@ -0,0 +1,28 @@
+const DTNF_DICTIONARY_ID = "distance_to_now_formmater";
+function getDistanceToNowFormatterComponentsDictionary() {
+  return [DTNF_DICTIONARY_ID];
+}
+const DTNF_DICCTIONARY = {
+  LABEL_SENTENCE_PAST_SECONDS: `${DTNF_DICTIONARY_ID}.label_sentence_past_seconds`,
+  LABEL_SENTENCE_PAST_OTHERS: `${DTNF_DICTIONARY_ID}.label_sentence_past_others`,
+  LABEL_SENTENCE_FUTURE_SECONDS: `${DTNF_DICTIONARY_ID}.label_sentence_future_seconds`,
+  LABEL_SENTENCE_FUTURE_OTHERS: `${DTNF_DICTIONARY_ID}.label_sentence_future_others`,
+  LABEL_SENTENCE_PRESENT_SECONDS: `${DTNF_DICTIONARY_ID}.label_sentence_present_seconds`,
+  LABEL_SENTENCE_PRESENT_OTHERS: `${DTNF_DICTIONARY_ID}.label_sentence_present_others`,
+  LABEL_UNIT_TIME_SECOND: `${DTNF_DICTIONARY_ID}.label_unit_time_second`,
+  LABEL_UNIT_TIME_SECONDS: `${DTNF_DICTIONARY_ID}.label_unit_time_seconds`,
+  LABEL_UNIT_TIME_MINUTE: `${DTNF_DICTIONARY_ID}.label_unit_time_minute`,
+  LABEL_UNIT_TIME_MINUTES: `${DTNF_DICTIONARY_ID}.label_unit_time_minutes`,
+  LABEL_UNIT_TIME_HOUR: `${DTNF_DICTIONARY_ID}.label_unit_time_hour`,
+  LABEL_UNIT_TIME_HOURS: `${DTNF_DICTIONARY_ID}.label_unit_time_hours`,
+  LABEL_UNIT_TIME_DAY: `${DTNF_DICTIONARY_ID}.label_unit_time_day`,
+  LABEL_UNIT_TIME_DAYS: `${DTNF_DICTIONARY_ID}.label_unit_time_days`,
+  LABEL_UNIT_TIME_MONTH: `${DTNF_DICTIONARY_ID}.label_unit_time_month`,
+  LABEL_UNIT_TIME_MONTHS: `${DTNF_DICTIONARY_ID}.label_unit_time_months`,
+  LABEL_UNIT_TIME_YEAR: `${DTNF_DICTIONARY_ID}.label_unit_time_year`,
+  LABEL_UNIT_TIME_YEARS: `${DTNF_DICTIONARY_ID}.label_unit_time_years`
+};
+export {
+  DTNF_DICCTIONARY as D,
+  getDistanceToNowFormatterComponentsDictionary as g
+};

package/components/formatters/DistanceToNowFormatter/index.js

@@ -0,0 +1 @@
+

package/components/formatters/DistanceToNowFormatter/slots/DistanceToNowFormatterSlots.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const DTNFRootStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Record<string, unknown>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import("react").ClassAttributes<HTMLSpanElement> | keyof import("react").HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const DTNFRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;

package/components/formatters/DistanceToNowFormatter/slots/DistanceToNowFormatterSlots.js

@@ -0,0 +1,11 @@
+import { styled } from "@mui/material/styles";
+import { C as COMPONET_KEY_COMPONENT } from "../constants.js";
+import { d as distanceToNowFormatterStyles } from "../DistanceToNowFormatter.styles.js";
+import { D as DistanceToNowFormatterSlots } from "./slots.js";
+const DTNFRootStyled = styled("span", {
+  name: COMPONET_KEY_COMPONENT,
+  slot: DistanceToNowFormatterSlots.root
+})(distanceToNowFormatterStyles?.root);
+export {
+  DTNFRootStyled as D
+};

package/components/formatters/DistanceToNowFormatter/slots/slots.js

@@ -0,0 +1,7 @@
+var DistanceToNowFormatterSlots = /* @__PURE__ */ ((DistanceToNowFormatterSlots2) => {
+  DistanceToNowFormatterSlots2["root"] = "root";
+  return DistanceToNowFormatterSlots2;
+})(DistanceToNowFormatterSlots || {});
+export {
+  DistanceToNowFormatterSlots as D
+};

package/components/formatters/DistanceToNowFormatter/stories/basic.stories.d.ts

@@ -0,0 +1,157 @@
+import { Meta } from '@storybook/react';
+import { DistanceToNowFormatter } from '../DistanceToNowFormatter';
+import { StoryDistanceToNowFormatterType } from './types';
+declare const meta: Meta<typeof DistanceToNowFormatter>;
+export default meta;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: segundos
+ *   presentationTime: past
+ */
+export declare const BasePastSeconds: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: minutos
+ *   presentationTime: past
+ */
+export declare const BasePastMinutes: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: horas
+ *   presentationTime: past
+ */
+export declare const BasePastHours: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: horas y minutos
+ *   presentationTime: past
+ */
+export declare const BasePastHoursMinutes: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Dias
+ *   presentationTime: past
+ */
+export declare const BasePastDays: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Dias y horas
+ *   presentationTime: past
+ */
+export declare const BasePastDaysHours: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Meses
+ *   presentationTime: past
+ */
+export declare const BasePastMonts: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Meses y dias
+ *   presentationTime: past
+ */
+export declare const BasePastMontsDays: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Años
+ *   presentationTime: past
+ */
+export declare const BasePastYears: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Años y meses
+ *   presentationTime: past
+ */
+export declare const BasePastYearsMonths: StoryDistanceToNowFormatterType;
+/********************************** Presente ********************************/
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: segundos
+ *   presentationTime: present
+ */
+export declare const BasePresentSeconds: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: minutos
+ *   presentationTime: present
+ */
+export declare const BasePresentMinutes: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: horas
+ *   presentationTime: present
+ */
+export declare const BasePresentHours: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: horas y minutos
+ *   presentationTime: present
+ */
+export declare const BasePresentHoursMinutes: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Dias
+ *   presentationTime: present
+ */
+export declare const BasePresentDays: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Dias y horas
+ *   presentationTime: present
+ */
+export declare const BasePresentDaysHours: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Meses
+ *   presentationTime: present
+ */
+export declare const BasePresentMonts: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Meses y dias
+ *   presentationTime: present
+ */
+export declare const BasePresentMontsDays: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Años
+ *   presentationTime: present
+ */
+export declare const BasePresentYears: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Años y meses
+ *   presentationTime: present
+ */
+export declare const BasePresentYearsMonths: StoryDistanceToNowFormatterType;
+/********************************** Futuro ********************************/
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: segundos
+ *   presentationTime: future
+ */
+export declare const BaseFutureSeconds: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: minutos
+ *   presentationTime: future
+ */
+export declare const BaseFutureMinutes: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: horas
+ *   presentationTime: future
+ */
+export declare const BaseFutureHours: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: horas y minutos
+ *   presentationTime: future
+ */
+export declare const BaseFutureHoursMinutes: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Dias
+ *   presentationTime: future
+ */
+export declare const BaseFutureDays: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Dias y horas
+ *   presentationTime: future
+ */
+export declare const BaseFutureDaysHours: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Meses
+ *   presentationTime: future
+ */
+export declare const BaseFutureMonts: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Meses y dias
+ *   presentationTime: future
+ */
+export declare const BaseFutureMontsDays: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Años
+ *   presentationTime: future
+ */
+export declare const BaseFutureYears: StoryDistanceToNowFormatterType;
+/**
+ * DistanceToNowFormatter  Tiempo de visualización: Años y meses
+ *   presentationTime: future
+ */
+export declare const BaseFutureYearsMonths: StoryDistanceToNowFormatterType;

package/components/formatters/DistanceToNowFormatter/stories/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const heightWindow = 180;
+export declare const widthWindow = 260;
+export declare const marginWindow = 10;

package/components/formatters/DistanceToNowFormatter/stories/subcomponents/WithDTNFProvider.d.ts

@@ -0,0 +1,6 @@
+import { StoryContext, StoryFn } from '@storybook/react';
+import { DistanceToNowFormatterProps } from '../../types';
+/**
+ * TODO: Documentar
+ */
+export declare const WithDTNFProvider: (MyStory: StoryFn, { args }: StoryContext<DistanceToNowFormatterProps>) => import("react/jsx-runtime").JSX.Element;

package/components/formatters/DistanceToNowFormatter/stories/types.d.ts

@@ -0,0 +1,3 @@
+import { StoryObj } from '@storybook/react';
+import { DistanceToNowFormatter } from '../DistanceToNowFormatter';
+export type StoryDistanceToNowFormatterType = StoryObj<typeof DistanceToNowFormatter>;

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

@@ -3,11 +3,11 @@ import { PresentationTimeType } from '../../../utils/formatDistanceToNow';
 import { COMPONET_KEY_COMPONENT } from './constants';
 import { DistanceToNowFormatterSlots } from './slots/slots';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
-export declare type DistanceToNowFormatterProps = {
+export type DistanceToNowFormatterProps = {
     presentationTime: PresentationTimeType;
     date: Date;
     delay?: number;
 };
-export declare type DistanceToNowFormatterSlotsType = keyof typeof DistanceToNowFormatterSlots;
-export declare type DistanceToNowFormatterOwnerState = {};
-export declare type DistanceToNowFormatterStyles = Partial<OverridesStyleRules<DistanceToNowFormatterSlotsType, typeof COMPONET_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type DistanceToNowFormatterSlotsType = keyof typeof DistanceToNowFormatterSlots;
+export type DistanceToNowFormatterOwnerState = {};
+export type DistanceToNowFormatterStyles = Partial<OverridesStyleRules<DistanceToNowFormatterSlotsType, typeof COMPONET_KEY_COMPONENT, Theme> | undefined> | undefined;

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

@@ -1,2 +1,5 @@
 import { FormatterRootProps } from './types';
+/**
+ * TODO: Documentar
+ */
 export declare const FormatterRoot: (props: FormatterRootProps) => import("react/jsx-runtime").JSX.Element;

package/components/formatters/FormatterRoot/index.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { f as formatterClasses } from "../classes/index.js";
+import { F as FormatterRootContainer } from "./styles.js";
+const FormatterRoot = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ jsx(FormatterRootContainer, { className: formatterClasses.root, children });
+};
+export {
+  FormatterRoot as F
+};

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

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const FormatterRootContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FormatterRootContainer: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/formatters/FormatterRoot/styles.js

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

package/components/formatters/PeriodFormatter/dictionary.d.ts

@@ -7,6 +7,9 @@ export declare const dictionary: {
     LABEL_DAYS: string;
     LABEL_DAY: string;
 };
+/**
+ * TODO: Documentar
+ */
 export declare function getFormattersComponentsDictionary(): {
     LABEL_YEARS: string;
     LABEL_YEAR: string;

package/components/formatters/PeriodFormatter/dictionary.js

@@ -0,0 +1,13 @@
+const PERIOD_FORMATTER_DICTIONARY_KEY = `period_formatter`;
+const dictionary = {
+  LABEL_YEARS: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_years`,
+  LABEL_YEAR: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_year`,
+  LABEL_MONTHS: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_months`,
+  LABEL_MONTH: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_month`,
+  LABEL_DAYS: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_days`,
+  LABEL_DAY: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_day`
+};
+export {
+  PERIOD_FORMATTER_DICTIONARY_KEY as P,
+  dictionary as d
+};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PeriodFormatterProps } from './types';
 /**
  * Muestra un periodo de tiempo en años, meses y días. Retorna un string
@@ -7,7 +6,7 @@ import { PeriodFormatterProps } from './types';
  * @param days Cantidad de días
  * @returns string
  */
-export declare function getFormatPeriod(years: number, months: number, days: number): string;
+export declare function useFormatPeriod(years: number, months: number, days: number): string;
 /**
  * Muestra un periodo de tiempo en años, meses y días. Retorna un JSX
  * @param props

package/components/formatters/PeriodFormatter/index.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { W as WrapperComponent } from "../../WrapperComponent/index.js";
+import { d as dictionary } from "./dictionary.js";
+import { useModuleDictionary } from "@m4l/core";
+function useFormatPeriod(years, months, days) {
+  const { getLabel } = useModuleDictionary();
+  let period = "";
+  const separator = ", ";
+  switch (years) {
+    case 0:
+      break;
+    case 1:
+      period = "1 " + getLabel(dictionary.LABEL_YEAR);
+      break;
+    default:
+      period = years.toString() + " " + getLabel(dictionary.LABEL_YEARS);
+  }
+  switch (months) {
+    case 0:
+      break;
+    case 1:
+      if (years > 0) {
+        period += separator;
+      }
+      period += "1 " + getLabel(dictionary.LABEL_MONTH);
+      break;
+    default:
+      if (years > 0) {
+        period += separator;
+      }
+      period += months.toString() + " " + getLabel(dictionary.LABEL_MONTHS);
+  }
+  switch (days) {
+    case 0:
+      break;
+    case 1:
+      if (years > 0 || months > 0) {
+        period += separator;
+      }
+      period += "1 " + getLabel(dictionary.LABEL_DAY);
+      break;
+    default:
+      if (years > 0 || months > 0) {
+        period += separator;
+      }
+      period += days.toString() + " " + getLabel(dictionary.LABEL_DAYS);
+  }
+  if (period === "") {
+    period = "-";
+  }
+  return period;
+}
+function PeriodFormatter(props) {
+  const { years = 0, months = 0, days = 0, Component = WrapperComponent } = props;
+  return /* @__PURE__ */ jsx(Component, { children: useFormatPeriod(years, months, days) });
+}
+export {
+  PeriodFormatter as P,
+  useFormatPeriod as u
+};

package/components/formatters/PeriodFormatter/index.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @jest-environment jsdom
+ */
+export {};

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

@@ -1,3 +1,9 @@
 import { PointsFormatterProps } from './types';
+/**
+ * TODO: Documentar
+ */
 export declare function getFormatPoints(obProps: any, fieldValue: string, fieldUnit: string, chainPoint?: string): string;
+/**
+ * TODO: Documentar
+ */
 export declare function PointsFormatter(props: PointsFormatterProps): import("react/jsx-runtime").JSX.Element;

package/components/formatters/PointsFormatter/index.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { getPropertyByString } from "@m4l/core";
+import { W as WrapperComponent } from "../../WrapperComponent/index.js";
+function getFormatPoints(obProps, fieldValue, fieldUnit, chainPoint) {
+  let result = "";
+  const points = getPropertyByString(obProps, fieldValue);
+  const unit = getPropertyByString(obProps, fieldUnit) || "";
+  if (points === void 0 || points === null || !Array.isArray(points)) {
+    return "[]";
+  }
+  points.map((point) => {
+    if (point) {
+      result = !chainPoint ? result.concat(`[${point}${unit}]`) : result.concat(`[${getPropertyByString(point, chainPoint)}${unit}]`);
+    }
+  });
+  return result;
+}
+function PointsFormatter(props) {
+  const { obProps, fieldValue, fieldUnit, Component = WrapperComponent } = props;
+  return /* @__PURE__ */ jsx(Component, { children: getFormatPoints(obProps, fieldValue, fieldUnit) });
+}
+export {
+  PointsFormatter as P,
+  getFormatPoints as g
+};

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

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-export declare type CalibrationPoint = number | null;
+export type CalibrationPoint = number | null;
 export interface PointsFormatterProps {
     Component?: React.ElementType;
     obProps: any;

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

@@ -1,3 +1,9 @@
 import { PriceFormatterProps } from './types';
+/**
+ * TODO: Documentar
+ */
 export declare function getFormatPrice(obProps: any, fieldValue: string, currency: string, decimalDigits: number): string;
+/**
+ * TODO: Documentar
+ */
 export declare function PriceFormatter(props: PriceFormatterProps): import("react/jsx-runtime").JSX.Element;

package/components/formatters/PriceFormatter/index.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { getPropertyByString } from "@m4l/core";
+import { useFormatter } from "@m4l/graphics";
+import { W as WrapperComponent } from "../../WrapperComponent/index.js";
+function getFormatPrice(obProps, fieldValue, currency, decimalDigits) {
+  let result = "";
+  const value = getPropertyByString(obProps, fieldValue);
+  try {
+    result = Number(value).toLocaleString(navigator.language, {
+      currency,
+      style: "currency",
+      currencyDisplay: "symbol",
+      useGrouping: true,
+      maximumFractionDigits: decimalDigits
+    }) || "";
+  } catch (_e) {
+    result = Number(value).toLocaleString("en-US", {
+      style: "currency",
+      currency: "USD",
+      currencyDisplay: "symbol",
+      useGrouping: true,
+      maximumFractionDigits: decimalDigits
+    }) || "";
+  }
+  return result;
+}
+function PriceFormatter(props) {
+  const { obProps, fieldValue, Component = WrapperComponent } = props;
+  const { currencyFormatter } = useFormatter();
+  return /* @__PURE__ */ jsx(Component, { children: getFormatPrice(obProps, fieldValue, currencyFormatter.code, currencyFormatter.decimalDigits) });
+}
+export {
+  PriceFormatter as P,
+  getFormatPrice as g
+};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface PriceFormatterProps {
     Component?: React.ElementType;
     obProps: any;