@m4l/components 0.1.9 → 0.1.11

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ColumnBooleanFormatterProps } from './types';
+export declare function columnBooleanFormatter(props: ColumnBooleanFormatterProps): (obProps: any) => JSX.Element;

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

@@ -0,0 +1,7 @@
+import { ComponentType } from 'react';
+import { PresentationType } from '../../../../components/formatters/BooleanFormatter/types';
+export interface ColumnBooleanFormatterProps {
+    Component?: ComponentType;
+    presentationType: PresentationType;
+    fieldValue: string;
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ColumnDateFormatterProps } from './types';
+export declare function columnDateFormatter(props: ColumnDateFormatterProps): (obProps: any) => JSX.Element;

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

@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+import { PresentationType } from '../../../formatters/DateFormatter/types';
+export interface ColumnDateFormatterProps {
+    Component?: ComponentType;
+    presentationType: PresentationType;
+    format?: string;
+    fieldValue: string;
+}

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

@@ -1,4 +1,6 @@
 export { columnUncertaintyFormatter } from './columnUncertaintyFormatter';
 export { columnPointsFormatter } from './columnPointsFormatter';
 export { columnNestedValueFormatter } from './columnNestedValueFormatter';
+export { columnBooleanFormatter } from './columnBooleanFormatter';
+export { columnDateFormatter } from './columnDateFormatter';
 export type { ColumnUncertaintyFormatterProps } from './columnUncertaintyFormatter/types';

package/components/DataGrid/index.js

@@ -82,6 +82,9 @@ const OriginalDataGridWrapperStyled = styled("div")(({
       right: "0px",
       top: "25%",
       bottom: "25%"
+    },
+    "& .m4l_icon": {
+      height: "100%"
     }
   },
   "& .rdg-cell.rdg-cell-align-left": {

package/components/DynamicFilter/index.js

@@ -1,6 +1,6 @@
 import { S as ScrollBar } from "../ScrollBar/index.js";
 import { styled } from "@mui/material/styles";
-import require$$0, { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
+import React, { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
 import { useModuleDictionary, useHostTools, useEnvironment, voidFunction, useFlagsPresent } from "@m4l/core";
 import * as Yup from "yup";
 import { useFormContext, useWatch } from "react-hook-form";
@@ -13,7 +13,9 @@ import "../hook-form/RHFCheckbox/index.js";
 import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.js";
 import "@mui/x-date-pickers";
 import { R as RHFTextField } from "../hook-form/RHFTextField/index.js";
-import "../../index.js";
+import "../hook-form/RHFPeriod/index.js";
+import "../ErrorLabel/index.js";
+import "../Period/index.js";
 import { I as Icon } from "../Icon/index.js";
 import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
 import "@mui/material/Button";
@@ -690,7 +692,7 @@ const strategiesEditFilterComponent = {
   number: NumberFilter,
   boolean: BooleanFilter,
   datetime: DateTimeFilter,
-  __default__: require$$0.Fragment
+  __default__: React.Fragment
 };
 const PopupEditFilterComponent = (props) => {
   const {

package/components/ErrorLabel/index.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { ErrorLabelProps } from './types';
 export declare const ErrorLabel: (props: ErrorLabelProps) => JSX.Element;
+export default ErrorLabel;

package/components/ErrorLabel/index.js

@@ -0,0 +1,18 @@
+import { styled } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+const Wrapper = styled("p")(({
+  theme
+}) => ({
+  ...theme.typography.caption,
+  color: theme.palette.error.main,
+  margin: "8px 14px 0 14px"
+}));
+const ErrorLabel = (props) => {
+  const {
+    message
+  } = props;
+  return /* @__PURE__ */ jsx(Wrapper, {
+    children: message
+  });
+};
+export { ErrorLabel as E };

package/components/Icon/index.js

@@ -66,7 +66,7 @@ function Icon(props) {
   }, [src]);
   const placeHolder = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==";
   return /* @__PURE__ */ jsx(WrapperPlaceHolder, {
-    id: "IconReact",
+    className: "m4l_icon",
     children: resource ? /* @__PURE__ */ jsx(DivIcon, {
       src: resource,
       size: finalSize,

package/components/{hook-form/RHFPeriod → Period}/dictionary.d.ts

@@ -1,3 +1,6 @@
 import { Dictionary } from '@m4l/core';
 export declare function getPeriodComponetsDictionary(): string[];
 export declare const defaultPeriodDictionary: Dictionary;
+export declare const LABEL_YEARS = "label_years";
+export declare const LABEL_MONTHS = "label_months";
+export declare const LABEL_DAYS = "label_days";

package/components/Period/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PeriodProps } from './types';
+export declare const Period: (props: PeriodProps) => JSX.Element;

package/components/Period/index.js

@@ -0,0 +1,230 @@
+import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { styled, Skeleton, Autocomplete, TextField } from "@mui/material";
+import { useMemo } from "react";
+import { I as Icon } from "../Icon/index.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.js";
+import "react-hook-form";
+import "react-router-dom";
+import "../../contexts/ModalContext/index.js";
+import "@mui/lab";
+const ContainerPeriod = styled("div")(({
+  theme,
+  error
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "auto",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  border: error ? `1px solid ${theme.palette.error.main}` : `1px solid ${theme.palette.divider}`,
+  padding: theme.spacing(0.5, 1),
+  borderRadius: "4px",
+  "& .MuiAutocomplete-root, & .MuiTextField-root": {
+    width: "100%"
+  },
+  "& .MuiAutocomplete-root .MuiTextField-root": {
+    width: "100%"
+  },
+  "& .MuiTextField-root .MuiInput-input": {
+    padding: "5px!important"
+  }
+}));
+const Gap = styled("div")(({
+  theme
+}) => ({
+  width: "1px",
+  height: "20px",
+  backgroundColor: theme.palette.divider
+}));
+const SKTWrapper = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "auto",
+  height: "37.5px",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  border: `1px solid ${theme.palette.divider}`,
+  padding: theme.spacing(0.5, 1),
+  borderRadius: "4px"
+}));
+const FieldPeriod = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  width: "100%",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+}));
+const FieldValue = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  width: "70px",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+}));
+var ETimePeriods = /* @__PURE__ */ ((ETimePeriods2) => {
+  ETimePeriods2[ETimePeriods2["YEARS"] = 0] = "YEARS";
+  ETimePeriods2[ETimePeriods2["MONTHS"] = 1] = "MONTHS";
+  ETimePeriods2[ETimePeriods2["DAYS"] = 2] = "DAYS";
+  return ETimePeriods2;
+})(ETimePeriods || {});
+const getSelPeriodTime = (period) => {
+  if (!period)
+    return ETimePeriods.YEARS;
+  if (period.selPeriodTime)
+    return period.selPeriodTime;
+  if (period.years && period.years > 0)
+    return ETimePeriods.YEARS;
+  if (period.months && period.months > 0)
+    return ETimePeriods.MONTHS;
+  if (period.days && period.days > 0)
+    return ETimePeriods.DAYS;
+  return ETimePeriods.YEARS;
+};
+const getSingleValue = (period) => {
+  if (!period)
+    return "";
+  if (period.singleValue !== void 0)
+    return period.singleValue;
+  if (period.years && period.years > 0)
+    return period.years;
+  if (period.months && period.months > 0)
+    return period.months;
+  if (period.days && period.days > 0)
+    return period.days;
+  return "";
+};
+const Period = (props) => {
+  const {
+    value,
+    onChange,
+    error = false,
+    readOnly = false
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const selPeriodTime = getSelPeriodTime(value);
+  const singleValue = getSingleValue(value);
+  const onTotalChange = (newPeriodTime, newValue) => {
+    const newPeriod = {
+      selPeriodTime: newPeriodTime,
+      singleValue: newValue
+    };
+    if (newValue !== "" && newValue > 0) {
+      newPeriod.years = 0;
+      newPeriod.months = 0;
+      newPeriod.days = 0;
+      if (newPeriodTime === ETimePeriods.YEARS)
+        newPeriod.years = newValue;
+      if (newPeriodTime === ETimePeriods.MONTHS)
+        newPeriod.months = newValue;
+      if (newPeriodTime === ETimePeriods.DAYS)
+        newPeriod.days = newValue;
+    }
+    onChange(newPeriod);
+  };
+  const onChangeTime = (newPeriodTime) => {
+    if (newPeriodTime) {
+      onTotalChange(newPeriodTime.id, singleValue);
+    }
+  };
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const options = useMemo(() => [{
+    id: 0,
+    label: getLabel("period.years")
+  }, {
+    id: 1,
+    label: getLabel("period.months")
+  }, {
+    id: 2,
+    label: getLabel("period.days")
+  }], [getLabel]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsxs(SKTWrapper, {
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%"
+      }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%"
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 20,
+        sx: {
+          minWidth: "20px",
+          minHeight: "20px"
+        }
+      })]
+    });
+  }
+  if (readOnly) {
+    /* @__PURE__ */ jsxs(ContainerPeriod, {
+      error: false,
+      children: [/* @__PURE__ */ jsx(FieldPeriod, {
+        children: value.selPeriodTime
+      }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(FieldValue, {
+        children: value.singleValue
+      }), /* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsxs(ContainerPeriod, {
+    error,
+    children: [/* @__PURE__ */ jsx(Autocomplete, {
+      options,
+      value: options[selPeriodTime],
+      disableClearable: true,
+      onChange: (_event, autcValue) => {
+        onChangeTime(autcValue);
+      },
+      renderInput: (params) => {
+        return /* @__PURE__ */ jsx(TextField, {
+          ...params,
+          fullWidth: true,
+          variant: "standard",
+          SelectProps: {
+            native: true
+          },
+          InputProps: {
+            disableUnderline: true,
+            ...params.InputProps
+          },
+          autoComplete: "off"
+        }, `tx_async_${params.id}`);
+      }
+    }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(TextField, {
+      type: "number",
+      variant: "standard",
+      value: singleValue,
+      InputProps: {
+        disableUnderline: true
+      },
+      onChange: (e) => {
+        onTotalChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value));
+      }
+    }), /* @__PURE__ */ jsx(Icon, {
+      src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
+    })]
+  });
+};
+function getPeriodComponetsDictionary() {
+  return ["period"].concat(getCommonActionsDictionary());
+}
+export { Period as P, getPeriodComponetsDictionary as g };

package/components/Period/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { WrapperProps } from './types';
+export declare const ContainerPeriod: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Gap: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FieldPeriod: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FieldValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Period/types.d.ts

@@ -0,0 +1,30 @@
+export declare enum ETimePeriods {
+    YEARS = 0,
+    MONTHS = 1,
+    DAYS = 2
+}
+export declare type PeriodVariant = 'monoperiod' | 'multiperiod';
+export declare type PeriodTime = {
+    id: number;
+    label: string;
+};
+export interface WrapperProps {
+    error: boolean;
+}
+export declare type PeriodType = {
+    selPeriodTime: ETimePeriods;
+    singleValue: number | '';
+    years?: number;
+    months?: number;
+    days?: number;
+};
+export interface PeriodProps {
+    value: PeriodType;
+    onChange: (newValue: PeriodType) => void;
+    error?: boolean;
+    readOnly?: boolean;
+    variant?: PeriodVariant;
+}
+export interface WrapperProps {
+    error: boolean;
+}

package/components/PropertyValue/index.js

@@ -70,7 +70,6 @@ const Value = styled("div", {
   height: valueHeight,
   marginTop: theme.spacing(1),
   [theme.breakpoints.up("sm")]: {
-    marginLeft: theme.spacing(0),
     marginTop: "0px"
   },
   overflow: "hidden",

package/components/formatters/BooleanFormatter/index.js

@@ -1,17 +1,23 @@
-import require$$0 from "react";
-import { useModuleDictionary } from "@m4l/core";
-import { Checkbox } from "@mui/material";
+import { useModuleDictionary, useEnvironment, getPropertyByString } from "@m4l/core";
+import React from "react";
+import { I as Icon } from "../../Icon/index.js";
 import { jsx } from "react/jsx-runtime";
 function BooleanFormatter(props) {
   const {
     presentationType,
     value,
-    Component = require$$0.Fragment
+    Component = React.Fragment
   } = props;
   const {
     getLabel
   } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
   const final_value = value ?? false;
+  const srcCheckTrue = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_true.svg`;
+  const srcCheckFalse = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_false.svg`;
   if (presentationType === "string_yes_no") {
     return /* @__PURE__ */ jsx(Component, {
       children: final_value ? getLabel("formatters.boolean_yes") : getLabel("formatters.boolean_no")
@@ -22,12 +28,25 @@ function BooleanFormatter(props) {
       children: final_value ? getLabel("formatters.boolean_true") : getLabel("formatters.boolean_false")
     });
   }
-  return /* @__PURE__ */ jsx(Checkbox, {
-    checked: final_value,
-    size: "small",
-    readOnly: true,
-    disableFocusRipple: true,
-    disableRipple: true
+  return /* @__PURE__ */ jsx(Component, {
+    children: /* @__PURE__ */ jsx(Icon, {
+      src: final_value ? srcCheckTrue : srcCheckFalse,
+      bgColor: "action.disabled"
+    })
   });
 }
-export { BooleanFormatter as B };
+function columnBooleanFormatter(props) {
+  const {
+    fieldValue,
+    presentationType,
+    Component = React.Fragment
+  } = props;
+  return (obProps) => {
+    return /* @__PURE__ */ jsx(BooleanFormatter, {
+      presentationType,
+      value: getPropertyByString(obProps, fieldValue),
+      Component
+    });
+  };
+}
+export { BooleanFormatter as B, columnBooleanFormatter as c };

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

@@ -1,7 +1,7 @@
-import { ComponentForrmaterType } from '../types';
+import { ComponentType } from 'react';
 export declare type PresentationType = 'string_yes_no' | 'string_true_false' | 'check';
 export interface BooleanFormatterProps {
-    Component?: ComponentForrmaterType;
+    Component?: ComponentType;
     presentationType: PresentationType;
     value?: boolean;
 }

package/components/formatters/DateFormatter/index.js

@@ -1,12 +1,14 @@
-import { useEnvironment, useHostTools } from "@m4l/core";
-import require$$0 from "react";
+import React from "react";
+import { useEnvironment, useHostTools, getPropertyByString } from "@m4l/core";
+import "../../Icon/index.js";
+import "@mui/material/styles";
 import { jsx, Fragment } from "react/jsx-runtime";
 function DateFormatter(props) {
   const {
     presentationType,
     value,
     format,
-    Component = require$$0.Fragment
+    Component = React.Fragment
   } = props;
   const {
     dfnsFormat
@@ -43,20 +45,22 @@ function DateFormatter(props) {
   } catch (e) {
     result = "err_typing";
   }
-  switch (Component) {
-    case "div":
-      return /* @__PURE__ */ jsx("div", {
-        className: "DateFormatter",
-        children: result
-      });
-    case "span":
-      return /* @__PURE__ */ jsx("span", {
-        className: "DateFormatter",
-        children: result
-      });
-  }
   return /* @__PURE__ */ jsx(Component, {
     children: result
   });
 }
-export { DateFormatter as D };
+function columnDateFormatter(props) {
+  const {
+    fieldValue,
+    presentationType,
+    Component = React.Fragment
+  } = props;
+  return (obProps) => {
+    return /* @__PURE__ */ jsx(DateFormatter, {
+      presentationType,
+      value: getPropertyByString(obProps, fieldValue),
+      Component
+    });
+  };
+}
+export { DateFormatter as D, columnDateFormatter as c };

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

@@ -1,8 +1,8 @@
 import { Maybe } from '@m4l/core';
-import { ComponentForrmaterType } from '../types';
+import { ComponentType } from 'react';
 export declare type PresentationType = 'date' | 'datetime' | 'time';
 export interface DateFormatterProps {
-    Component?: ComponentForrmaterType;
+    Component?: ComponentType;
     presentationType: PresentationType;
     format?: string;
     value: Maybe<Date | string | number>;

package/components/formatters/index.js

@@ -1,13 +1,14 @@
-import require$$0 from "react";
+import React from "react";
 import { jsx, Fragment } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
-import "@mui/material";
+import "../Icon/index.js";
+import "@mui/material/styles";
 function UncertaintyFormatter(props) {
   const {
     value,
     unit,
     symbol,
-    Component = require$$0.Fragment
+    Component = React.Fragment
   } = props;
   if (value === void 0 || value === null || !Array.isArray(value)) {
     return /* @__PURE__ */ jsx(Fragment, {
@@ -28,7 +29,7 @@ function PointsFormatter(props) {
   const {
     value,
     unit,
-    Component = require$$0.Fragment
+    Component = React.Fragment
   } = props;
   console.log("points", value);
   if (value === void 0 || value === null || !Array.isArray(value)) {
@@ -50,7 +51,7 @@ function PointsFormatter(props) {
 function PriceFormatter(props) {
   const {
     value,
-    Component = require$$0.Fragment
+    Component = React.Fragment
   } = props;
   return /* @__PURE__ */ jsx(Component, {
     children: `${value}$Cop`
@@ -100,12 +101,11 @@ function columnPointsFormatter(props) {
 function columnNestedValueFormatter(props) {
   const {
     fieldValue,
-    Component = require$$0.Fragment
+    Component = React.Fragment
   } = props;
   return (obProps) => {
-    console.log("columnNestedValueFormatter", obProps, fieldValue);
     return /* @__PURE__ */ jsx(Component, {
-      children: getPropertyByString(obProps, fieldValue)
+      children: getPropertyByString(obProps, fieldValue) + ""
     });
   };
 }

package/components/hook-form/RHFPeriod/index.js

@@ -0,0 +1,47 @@
+import { styled } from "@mui/material";
+import { useFormContext, Controller } from "react-hook-form";
+import { E as ErrorLabel } from "../../ErrorLabel/index.js";
+import { P as Period } from "../../Period/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const Wrapper = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing(1)
+}));
+const RHFPeriod = (props) => {
+  const {
+    name
+  } = props;
+  const {
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field: {
+        onChange,
+        value
+      },
+      fieldState: {
+        error
+      }
+    }) => {
+      return /* @__PURE__ */ jsxs(Wrapper, {
+        children: [/* @__PURE__ */ jsx(Period, {
+          value,
+          onChange,
+          error: !!error
+        }), error && /* @__PURE__ */ jsx(ErrorLabel, {
+          message: error.message || ""
+        })]
+      });
+    }
+  });
+};
+export { RHFPeriod as R };

package/components/hook-form/RHFPeriod/styles.d.ts

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

package/components/hook-form/RHFPeriod/types.d.ts

@@ -1,28 +1,4 @@
-export declare type PeriodProps = {
-    name: string;
-    variant?: 'single';
-};
-export declare enum ETimePeriods {
-    YEARS = 0,
-    MONTHS = 1,
-    DAYS = 2
-}
-export declare type PeriodVariant = 'monoperiod' | 'multiperiod';
-export declare type PeriodTime = {
-    id: number;
-    label: string;
-};
-export declare type PeriodType = {
-    variant: PeriodVariant;
-    selPeriodTime: ETimePeriods;
-    singleValue: number | '';
-    years?: number;
-    months?: number;
-    days?: number;
-};
-export interface WrapperProps {
-    error: boolean;
-}
+import { PeriodVariant } from '../../../components/Period/types';
 export declare type RHFPeriodProps = {
     name: string;
     variant?: PeriodVariant;

package/components/hook-form/index.d.ts

@@ -9,6 +9,5 @@ export { RHFSelect } from './RHFSelect';
 export { RHFTextField } from './RHFTextField';
 export { RHFRadioGroup } from './RHFRadioGroup';
 export { RHFPeriod } from './RHFPeriod';
-export type { PeriodType } from './RHFPeriod/types';
-export { getPeriodComponetsDictionary } from './RHFPeriod/dictionary';
+export { getPeriodComponetsDictionary } from '../Period/dictionary';
 export * from './RHFUpload';

package/components/index.d.ts

@@ -28,6 +28,8 @@ export * from '../components/NoItemSelected/dictionary';
 export * from '../components/ObjectLogs';
 export * from '../components/ObjectLogs/dictionary';
 export * from '../components/PaperForm';
+export * from '../components/Period';
+export type { PeriodType } from '../components/Period/types';
 export * from '../components/Page';
 export * from '../components/PropertyValue';
 export * from '../components/Resizeable';

package/hooks/useFormAddEdit/index.js

@@ -0,0 +1,42 @@
+import { useNetwork, useFlags } from "@m4l/core";
+import { useState, useEffect } from "react";
+const useFormAddEdit = (props) => {
+  const { initialValues, objectId, endPoint, formatDataEnpoint } = props;
+  const [formValues, setFormValues] = useState(initialValues);
+  const [statusLoad, setStatusLoad] = useState(
+    objectId === void 0 ? "new" : "edit"
+  );
+  const { networkOperation } = useNetwork();
+  const { addFlag } = useFlags();
+  useEffect(() => {
+    let mounted = true;
+    if (statusLoad === "edit") {
+      networkOperation({
+        method: "GET",
+        endPoint: `${endPoint}/${objectId}`
+      }).then(
+        (response) => {
+          if (mounted) {
+            if (formatDataEnpoint) {
+              setFormValues(formatDataEnpoint(response));
+            } else {
+              setFormValues(response);
+            }
+            setStatusLoad("reload_values_provider");
+          }
+        },
+        () => {
+          setStatusLoad("error");
+        }
+      );
+    } else if (statusLoad === "new" || statusLoad === "reload_values_provider") {
+      addFlag("form_loaded");
+      setStatusLoad("ready");
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [statusLoad]);
+  return { formValues, statusLoad };
+};
+export { useFormAddEdit as u };

package/index.js

@@ -1,22 +1,23 @@
 export { I as IconButton, a as IconButtonAnimate } from "./components/mui_extended/IconButton/index.js";
 import "framer-motion";
-import { styled, Skeleton, Autocomplete, TextField } from "@mui/material";
-import { jsx, jsxs } from "react/jsx-runtime";
+import "@mui/material";
+import "react/jsx-runtime";
 export { L as LoadingScreen } from "./components/animate/LoadingScreen/index.js";
-import { useMemo, useState, useEffect } from "react";
-import { useFormContext, Controller } from "react-hook-form";
+import "react";
+import "react-hook-form";
 export { F as FormProvider } from "./components/hook-form/FormProvider/index.js";
-import { useModuleDictionary, useModuleSkeleton, useEnvironment, useNetwork, useFlags } from "@m4l/core";
+import "@m4l/core";
 export { R as RHFAutocomplete } from "./components/hook-form/RHFAutocomplete/index.js";
 export { R as RHFAutocompleteAsync } from "./components/hook-form/RHFAutocompleteAsync/index.js";
 export { R as RHFCheckbox } from "./components/hook-form/RHFCheckbox/index.js";
 export { R as RHFDateTime } from "./components/hook-form/RHFDateTime/index.js";
 import "@mui/x-date-pickers";
 export { R as RHFTextField } from "./components/hook-form/RHFTextField/index.js";
-import { I as Icon } from "./components/Icon/index.js";
+export { R as RHFPeriod } from "./components/hook-form/RHFPeriod/index.js";
+export { E as ErrorLabel } from "./components/ErrorLabel/index.js";
+export { P as Period, g as getPeriodComponetsDictionary } from "./components/Period/index.js";
 export { I as Icon } from "./components/Icon/index.js";
 import "@mui/material/styles";
-import { g as getCommonActionsDictionary } from "./components/CommonActions/components/Actions/index.js";
 export { b as Actions, M as MenuActions, d as defaultCommonActionsDictionary, g as getCommonActionsDictionary } from "./components/CommonActions/components/Actions/index.js";
 import "@mui/material/Button";
 export { B as Button, L as LoadingButton } from "./components/mui_extended/Button/index.js";
@@ -66,8 +67,8 @@ export { B as BoxIcon } from "./components/mui_extended/BoxIcon/index.js";
 export { B as Breadcrumbs } from "./components/mui_extended/Breadcrumbs/index.js";
 export { L as LinkWithRoute } from "./components/mui_extended/LinkWithRoute/index.js";
 export { T as Typography } from "./components/mui_extended/Typography/index.js";
-export { B as BooleanFormatter } from "./components/formatters/BooleanFormatter/index.js";
-export { D as DateFormatter } from "./components/formatters/DateFormatter/index.js";
+export { B as BooleanFormatter, c as columnBooleanFormatter } from "./components/formatters/BooleanFormatter/index.js";
+export { D as DateFormatter, c as columnDateFormatter } from "./components/formatters/DateFormatter/index.js";
 export { P as PointsFormatter, a as PriceFormatter, U as UncertaintyFormatter, e as columnNestedValueFormatter, b as columnPointsFormatter, c as columnUncertaintyFormatter, d as defaultFormattersDictionary, g as getFormattersComponentsDictionary } from "./components/formatters/index.js";
 export { A as ActionCancel } from "./components/CommonActions/components/ActionCancel/index.js";
 export { A as ActionIntro } from "./components/CommonActions/components/ActionIntro/index.js";
@@ -75,6 +76,7 @@ export { A as ActionFormCancel } from "./components/CommonActions/components/Act
 export { A as ActionFormIntro } from "./components/CommonActions/components/ActionFormIntro/index.js";
 export { L as Loadable } from "./components/Loadable/index.js";
 export { S as ScrollToTop } from "./components/ScrollToTop/index.js";
+export { u as useFormAddEdit } from "./hooks/useFormAddEdit/index.js";
 export { u as useModal } from "./hooks/useModal/index.js";
 export { L as Logo } from "./assets/Logo/index.js";
 import "./node_modules.js";
@@ -86,273 +88,5 @@ import "prop-types";
 import "react-dom";
 import "simplebar-react";
 import "yup";
-import "./index.js";
 import "./react-resizable.js";
 import "react-helmet-async";
-const Wrapper$1 = styled("div")(({
-  theme
-}) => ({
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  alignItems: "flex-start",
-  gap: theme.spacing(1)
-}));
-const ContainerPeriod = styled("div")(({
-  theme,
-  error
-}) => ({
-  display: "flex",
-  width: "100%",
-  height: "auto",
-  alignItems: "center",
-  gap: theme.spacing(1),
-  border: error ? `1px solid ${theme.palette.error.main}` : `1px solid ${theme.palette.divider}`,
-  padding: theme.spacing(0.5, 1),
-  borderRadius: "4px",
-  "& .MuiAutocomplete-root, & .MuiTextField-root": {
-    width: "100%"
-  },
-  "& .MuiAutocomplete-root .MuiTextField-root": {
-    width: "100%"
-  },
-  "& .MuiTextField-root .MuiInput-input": {
-    padding: "5px!important"
-  }
-}));
-const SKTWrapper = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  width: "auto",
-  height: "37.5px",
-  alignItems: "center",
-  gap: theme.spacing(1),
-  border: `1px solid ${theme.palette.divider}`,
-  padding: theme.spacing(0.5, 1),
-  borderRadius: "4px"
-}));
-const Gap = styled("div")(({
-  theme
-}) => ({
-  width: "1px",
-  height: "20px",
-  backgroundColor: theme.palette.divider
-}));
-var ETimePeriods = /* @__PURE__ */ ((ETimePeriods2) => {
-  ETimePeriods2[ETimePeriods2["YEARS"] = 0] = "YEARS";
-  ETimePeriods2[ETimePeriods2["MONTHS"] = 1] = "MONTHS";
-  ETimePeriods2[ETimePeriods2["DAYS"] = 2] = "DAYS";
-  return ETimePeriods2;
-})(ETimePeriods || {});
-const Wrapper = styled("p")(({
-  theme
-}) => ({
-  ...theme.typography.caption,
-  color: theme.palette.error.main
-}));
-const ErrorLabel = (props) => {
-  const {
-    message
-  } = props;
-  return /* @__PURE__ */ jsx(Wrapper, {
-    children: message
-  });
-};
-const getSelPeriodTime = (period) => {
-  if (!period)
-    return ETimePeriods.YEARS;
-  if (period.selPeriodTime)
-    return period.selPeriodTime;
-  if (period.years && period.years > 0)
-    return ETimePeriods.YEARS;
-  if (period.months && period.months > 0)
-    return ETimePeriods.MONTHS;
-  if (period.days && period.days > 0)
-    return ETimePeriods.DAYS;
-  return ETimePeriods.YEARS;
-};
-const getSingleValue = (period) => {
-  if (!period)
-    return "";
-  if (period.singleValue !== void 0)
-    return period.singleValue;
-  if (period.years && period.years > 0)
-    return period.years;
-  if (period.months && period.months > 0)
-    return period.months;
-  if (period.days && period.days > 0)
-    return period.days;
-  return "";
-};
-const RHFPeriod = (props) => {
-  const {
-    name,
-    variant = "monoperiod"
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  const {
-    control
-  } = useFormContext();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const options = useMemo(() => [{
-    id: 0,
-    label: getLabel("period.years")
-  }, {
-    id: 1,
-    label: getLabel("period.months")
-  }, {
-    id: 2,
-    label: getLabel("period.days")
-  }], [getLabel]);
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsxs(SKTWrapper, {
-      children: [/* @__PURE__ */ jsx(Skeleton, {
-        variant: "rounded",
-        width: "100%"
-      }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "rounded",
-        width: "100%"
-      }), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 20,
-        sx: {
-          minWidth: "20px",
-          minHeight: "20px"
-        }
-      })]
-    });
-  }
-  return /* @__PURE__ */ jsx(Controller, {
-    name,
-    control,
-    render: ({
-      field: {
-        onChange,
-        value
-      },
-      fieldState: {
-        error
-      }
-    }) => {
-      const selPeriodTime = getSelPeriodTime(value);
-      const singleValue = getSingleValue(value);
-      const onTotalChange = (newPeriodTime, newValue) => {
-        const newPeriod = {
-          selPeriodTime: newPeriodTime,
-          singleValue: newValue,
-          variant
-        };
-        if (newValue !== "" && newValue > 0) {
-          newPeriod.years = 0;
-          newPeriod.months = 0;
-          newPeriod.days = 0;
-          if (newPeriodTime === ETimePeriods.YEARS)
-            newPeriod.years = newValue;
-          if (newPeriodTime === ETimePeriods.MONTHS)
-            newPeriod.months = newValue;
-          if (newPeriodTime === ETimePeriods.DAYS)
-            newPeriod.days = newValue;
-        }
-        onChange(newPeriod);
-      };
-      const onChangeTime = (newPeriodTime) => {
-        if (newPeriodTime) {
-          onTotalChange(newPeriodTime.id, singleValue);
-        }
-      };
-      return /* @__PURE__ */ jsxs(Wrapper$1, {
-        children: [/* @__PURE__ */ jsxs(ContainerPeriod, {
-          error: !!error,
-          children: [/* @__PURE__ */ jsx(Autocomplete, {
-            options,
-            value: options[selPeriodTime],
-            disableClearable: true,
-            onChange: (_event, autcValue) => {
-              onChangeTime(autcValue);
-            },
-            renderInput: (params) => {
-              return /* @__PURE__ */ jsx(TextField, {
-                ...params,
-                fullWidth: true,
-                variant: "standard",
-                SelectProps: {
-                  native: true
-                },
-                InputProps: {
-                  disableUnderline: true,
-                  ...params.InputProps
-                },
-                autoComplete: "off"
-              }, `tx_async_${params.id}`);
-            }
-          }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(TextField, {
-            type: "number",
-            variant: "standard",
-            value: singleValue,
-            InputProps: {
-              disableUnderline: true
-            },
-            onChange: (e2) => {
-              onTotalChange(selPeriodTime, e2.target.value === "" ? "" : parseInt(e2.target.value));
-            }
-          }), /* @__PURE__ */ jsx(Icon, {
-            src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
-          })]
-        }), error && /* @__PURE__ */ jsx(ErrorLabel, {
-          message: error.message || ""
-        })]
-      });
-    }
-  });
-};
-function getPeriodComponetsDictionary() {
-  return ["period"].concat(getCommonActionsDictionary());
-}
-const useFormAddEdit = (props) => {
-  const { initialValues, objectId, endPoint, formatDataEnpoint } = props;
-  const [formValues, setFormValues] = useState(initialValues);
-  const [statusLoad, setStatusLoad] = useState(
-    objectId === void 0 ? "new" : "edit"
-  );
-  const { networkOperation } = useNetwork();
-  const { addFlag } = useFlags();
-  useEffect(() => {
-    let mounted = true;
-    if (statusLoad === "edit") {
-      networkOperation({
-        method: "GET",
-        endPoint: `${endPoint}/${objectId}`
-      }).then(
-        (response) => {
-          if (mounted) {
-            if (formatDataEnpoint) {
-              setFormValues(formatDataEnpoint(response.data));
-            } else {
-              setFormValues(response.data);
-            }
-            setStatusLoad("reload_values_provider");
-          }
-        },
-        () => {
-          setStatusLoad("error");
-        }
-      );
-    } else if (statusLoad === "new" || statusLoad === "reload_values_provider") {
-      addFlag("form_loaded");
-      setStatusLoad("ready");
-    }
-    return () => {
-      mounted = false;
-    };
-  }, [statusLoad]);
-  return { formValues, statusLoad };
-};
-export { ErrorLabel, RHFPeriod, getPeriodComponetsDictionary, useFormAddEdit };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "license": "UNLICENSED",
   "dependencies": {
     "@m4l/core": "*",

package/react-draggable.js

@@ -1,4 +1,4 @@
-import require$$0 from "react";
+import React$1 from "react";
 import require$$1 from "prop-types";
 import require$$2 from "react-dom";
 import clsx from "clsx";
@@ -18,7 +18,7 @@ Object.defineProperty(DraggableCore$2, "__esModule", {
   value: true
 });
 DraggableCore$2.default = void 0;
-var React = _interopRequireWildcard(require$$0);
+var React = _interopRequireWildcard(React$1);
 var _propTypes = _interopRequireDefault(require$$1);
 var _reactDom = _interopRequireDefault(require$$2);
 var _domFns = domFns;
@@ -480,7 +480,7 @@ _defineProperty(DraggableCore$1, "defaultProps", {
     }
   });
   exports.default = void 0;
-  var React2 = _interopRequireWildcard2(require$$0);
+  var React2 = _interopRequireWildcard2(React$1);
   var _propTypes2 = _interopRequireDefault2(require$$1);
   var _reactDom2 = _interopRequireDefault2(require$$2);
   var _clsx2 = _interopRequireDefault2(clsx);

package/react-json-view.js

@@ -1,9 +1,9 @@
 import { c as commonjsGlobal, g as getDefaultExportFromCjs } from "./commonjs.js";
-import require$$0 from "react";
+import React from "react";
 var main = { exports: {} };
 (function(module, exports) {
   !function(e, t) {
-    module.exports = t(require$$0);
+    module.exports = t(React);
   }(commonjsGlobal, function(e) {
     return function(e2) {
       var t = {};

package/react-lazy-load-image-component.js

@@ -1,4 +1,4 @@
-import require$$0 from "react";
+import React from "react";
 import require$$2 from "react-dom";
 var build = { exports: {} };
 (() => {
@@ -200,7 +200,7 @@ var build = { exports: {} };
   var n = {};
   (() => {
     r.r(n), r.d(n, { LazyLoadComponent: () => J, LazyLoadImage: () => ue, trackWindowScroll: () => C });
-    const e2 = require$$0;
+    const e2 = React;
     var t2 = r.n(e2), o = r(697);
     const i = require$$2;
     var c = r.n(i);

package/react-resizable.js

@@ -1,4 +1,4 @@
-import require$$0 from "react";
+import React$2 from "react";
 import { c as cjs } from "./react-draggable.js";
 import { u as utils } from "./utils/index.js";
 import require$$1 from "prop-types";
@@ -47,7 +47,7 @@ var resizableProps = {
 propTypes.resizableProps = resizableProps;
 Resizable$1.__esModule = true;
 Resizable$1.default = void 0;
-var React$1 = _interopRequireWildcard$1(require$$0);
+var React$1 = _interopRequireWildcard$1(React$2);
 var _reactDraggable = cjs.exports;
 var _utils = utils;
 var _propTypes$1 = propTypes;
@@ -335,7 +335,7 @@ Resizable.defaultProps = {
 var ResizableBox$2 = {};
 ResizableBox$2.__esModule = true;
 ResizableBox$2.default = void 0;
-var React = _interopRequireWildcard(require$$0);
+var React = _interopRequireWildcard(React$2);
 var _propTypes = _interopRequireDefault(require$$1);
 var _Resizable = _interopRequireDefault(Resizable$1);
 var _propTypes2 = propTypes;

package/react-splitter-layout.js

@@ -1,10 +1,10 @@
 import { g as getDefaultExportFromCjs } from "./commonjs.js";
 import require$$1 from "prop-types";
-import require$$0 from "react";
+import React from "react";
 var lib = { exports: {} };
 (function(module, exports) {
   !function(e, t) {
-    module.exports = t(require$$1, require$$0);
+    module.exports = t(require$$1, React);
   }(window, function(e, t) {
     return function(e2) {
       var t2 = {};

package/utils/index.js

@@ -1,4 +1,4 @@
-import require$$0 from "react";
+import React from "react";
 const getPaletteColor = function(palette, s) {
   s = s.replace(/\[(\w+)\]/g, ".$1");
   s = s.replace(/^\./, "");
@@ -518,7 +518,7 @@ function log() {
 var utils = {};
 utils.__esModule = true;
 utils.cloneElement = cloneElement;
-var _react = _interopRequireDefault(require$$0);
+var _react = _interopRequireDefault(React);
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }