@m4l/components 0.2.36 → 1.0.0

package/components/NoItemSelected/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const WrapperNoItemSelected: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Img: import("@emotion/styled").StyledComponent<import("../Image").ImageProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const WrapperSKTNoItemSelected: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperNoItemSelected: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Img: import("@emotion/styled").StyledComponent<import("../Image").ImageProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const WrapperSKTNoItemSelected: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/ObjectLogs/{index.6955149e.js → index.bfa7dad3.js}

@@ -1,18 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useNetwork, useModuleDictionary, useEnvironment, usePaginate } from "@m4l/core";
-import { styled, Tooltip, IconButton } from "@mui/material";
-import { c as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.304437ee.js";
-import { D as DateFormatter } from "../formatters/DateFormatter/index.2ef6f261.js";
+import { styled } from "@mui/material/styles";
+import { S as Stack, D as DateFormatter, g as DataGrid } from "../../vendor.a1ce6777.js";
+import { Tooltip, IconButton } from "@mui/material";
 import { useHostTheme, useResponsiveDesktop } from "@m4l/graphics";
 import { R as ReactJson } from "../../react-json-view.57125fcf.js";
-import { S as ScrollBar } from "../ScrollBar/index.4b965665.js";
-import { u as useModal } from "../../hooks/useModal/index.30674bb7.js";
-import { I as Icon } from "../Icon/index.ee7b85c9.js";
-import { S as Stack } from "../mui_extended/Stack/index.fe363ca5.js";
-import { W as WindowBase } from "../modal/WindowBase.2414cd02.js";
-import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.48d809e2.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { S as ScrollBar } from "../ScrollBar/index.adf0eade.js";
+import { u as useModal } from "../../hooks/useModal/index.ef54bcf2.js";
+import { I as Icon } from "../Icon/index.d5fed418.js";
+import { W as WindowBase } from "../modal/WindowBase.a3ac7adc.js";
+import { D as DynamicFilter } from "../DynamicFilter/index.d9168c12.js";
+import { T as TEST_PROP_ID } from "../areas/constants.5387d83e.js";
 const Container = styled("div")(() => ({
   height: "100%",
   width: "100%",
@@ -232,22 +231,6 @@ function ObjectLogs(props) {
     }
   );
 }
-function getObjectLogsComponentsDictionary() {
-  return ["object_logs"].concat(getDataGridComponentsDictionary()).concat(getDynamicFilterComponentsDictionary());
-}
-const defaultObjectLogDictionary = {
-  object_logs: {
-    created_at: "Start date",
-    user: "User/email",
-    resource_name: "Resource",
-    privilege_name: "Privilege",
-    log_preview: "Log",
-    log_detail: "Detail",
-    ip: "Ip"
-  }
-};
 export {
-  ObjectLogs as O,
-  defaultObjectLogDictionary as d,
-  getObjectLogsComponentsDictionary as g
+  ObjectLogs as O
 };

package/components/ObjectLogs/styles.d.ts

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

package/components/PDFViewer/{index.47bb0928.js → index.bb2eca5a.js}

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { B as Button } from "../mui_extended/Button/index.5395d101.js";
+import { R as componentName } from "../areas/constants.5387d83e.js";
+import { B as Button } from "../../vendor.a1ce6777.js";
 const PDFVeiwerRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LPDFViewer?.styleOverrides
 }));
-const componentName = "M4LPDFViewer";
 generateUtilityClasses(componentName, [
   "root",
   "buttonDownload"

package/components/{mui_extended/Pager/index.1ba2d52b.js → Page/index.fdf04592.js}

@@ -1,17 +1,20 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { styled, generateUtilityClasses, generateUtilityClass, useTheme, Select, InputBase, MenuItem } from "@mui/material";
+import React__default, { useMemo } from "react";
+import { styled } from "@mui/material/styles";
+import { generateUtilityClasses, generateUtilityClass, useTheme, Select, InputBase, MenuItem } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { I as IconButton } from "../IconButton/index.b0ee4965.js";
-import { useEnvironment } from "@m4l/core";
-import { useResponsiveContainerStore } from "@m4l/graphics";
+import { U as componentName } from "../areas/constants.5387d83e.js";
+import { a as IconButton, I as Icon } from "../Icon/index.d5fed418.js";
+import { useEnvironment, useBase, BaseProvider, useModuleSkeleton } from "@m4l/core";
+import { useResponsiveContainerStore, useLocales } from "@m4l/graphics";
 import { shallow } from "zustand/shallow";
-import { T as Typography } from "../Typography/index.a1e774a2.js";
-import { I as Icon } from "../../Icon/index.ee7b85c9.js";
+import { T as Typography } from "../../vendor.a1ce6777.js";
+import { c as classes, g as getSize, F as FactoryRender } from "../PrintingSystem/index.fb176a93.js";
+import clsx from "clsx";
+import { Helmet } from "react-helmet-async";
 const PagerRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LPager?.styleOverrides
 }));
-const componentName = "M4LPager";
 generateUtilityClasses(componentName, [
   "root",
   "labelRowsPerPageContainer",
@@ -60,7 +63,7 @@ const pagerUtilityClasses = () => {
   };
 };
 function PagerActions(props) {
-  const { count, page, rowsPerPage, onPageChange, classes } = props;
+  const { count, page, rowsPerPage, onPageChange, classes: classes2 } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const handleFirstPageButtonClick = (event) => {
     onPageChange(event, 0);
@@ -74,7 +77,7 @@ function PagerActions(props) {
   const handleLastPageButtonClick = (event) => {
     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
-  return /* @__PURE__ */ jsxs("div", { className: classes.pagerActions, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classes2.pagerActions, children: [
     /* @__PURE__ */ jsx(
       IconButton,
       {
@@ -82,7 +85,7 @@ function PagerActions(props) {
         onClick: handleFirstPageButtonClick,
         disabled: page === 0,
         "aria-label": "first page",
-        className: classes.actionIconFirstPage,
+        className: classes2.actionIconFirstPage,
         src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/first.svg`
       }
     ),
@@ -93,7 +96,7 @@ function PagerActions(props) {
         onClick: handleBackButtonClick,
         disabled: page === 0,
         "aria-label": "first page",
-        className: classes.actionIconPrevious,
+        className: classes2.actionIconPrevious,
         src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/previous.svg`
       }
     ),
@@ -104,7 +107,7 @@ function PagerActions(props) {
         onClick: handleNextButtonClick,
         disabled: page >= Math.ceil(count / rowsPerPage) - 1,
         "aria-label": "next page",
-        className: classes.actionIconNextPage,
+        className: classes2.actionIconNextPage,
         src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/next.svg`
       }
     ),
@@ -115,7 +118,7 @@ function PagerActions(props) {
         onClick: handleLastPageButtonClick,
         disabled: page >= Math.ceil(count / rowsPerPage) - 1,
         "aria-label": "last page",
-        className: classes.actionIconLastPage,
+        className: classes2.actionIconLastPage,
         src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/last.svg`
       }
     )
@@ -128,7 +131,7 @@ const CustomTablePagination = (props) => {
     rowsPerPage,
     rowsPerPageOptions = [10, 25, 50, 100],
     labelRowsPerPage,
-    classes,
+    classes: classes2,
     onRowsPerPageChange,
     onPageChange,
     SelectProps,
@@ -158,7 +161,7 @@ const CustomTablePagination = (props) => {
     }
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    rowsPerPageOptions?.length > 1 ? /* @__PURE__ */ jsxs("div", { className: classes.labelRowsPerPageContainer, children: [
+    rowsPerPageOptions?.length > 1 ? /* @__PURE__ */ jsxs("div", { className: classes2.labelRowsPerPageContainer, children: [
       isUpSm ? /* @__PURE__ */ jsx(Typography, { variant: "body", children: labelRowsPerPage }) : null,
       /* @__PURE__ */ jsx(
         Select,
@@ -169,9 +172,9 @@ const CustomTablePagination = (props) => {
           onChange: (e) => {
             onRowsPerPageChange(e);
           },
-          className: classes.select,
+          className: classes2.select,
           MenuProps: {
-            className: classes.selectMenuPopover,
+            className: classes2.selectMenuPopover,
             sx: { ...theme.components?.M4LPagerMenuPopover?.styleOverrides }
           },
           IconComponent: CustomIconComponent,
@@ -179,16 +182,16 @@ const CustomTablePagination = (props) => {
           children: rowsPerPageOptions.map((item, idx) => /* @__PURE__ */ jsx(
             MenuItem,
             {
-              className: classes.selectMenuItem,
+              className: classes2.selectMenuItem,
               value: item,
               children: item
             },
-            `${classes.selectMenuItem}-${idx}`
+            `${classes2.selectMenuItem}-${idx}`
           ))
         }
       )
     ] }) : null,
-    /* @__PURE__ */ jsx(Typography, { variant: "body", className: classes.labelDisplayRows, children: labelDisplayedRows({
+    /* @__PURE__ */ jsx(Typography, { variant: "body", className: classes2.labelDisplayRows, children: labelDisplayedRows({
       from: count === 0 ? 0 : page * rowsPerPage + 1,
       to: getLabelDisplayedRowsTo(),
       count: count === -1 ? -1 : count,
@@ -201,7 +204,7 @@ const CustomTablePagination = (props) => {
         page,
         rowsPerPage,
         onPageChange,
-        classes
+        classes: classes2
       }
     )
   ] });
@@ -231,14 +234,14 @@ function Pager(props) {
   const handleChangePage = (_event, newPage) => {
     onPageChange(newPage);
   };
-  const classes = pagerUtilityClasses();
-  return /* @__PURE__ */ jsx(PagerRoot, { className: classes.root, children: /* @__PURE__ */ jsx(
+  const classes2 = pagerUtilityClasses();
+  return /* @__PURE__ */ jsx(PagerRoot, { className: classes2.root, children: /* @__PURE__ */ jsx(
     CustomTablePagination,
     {
       rowsPerPageOptions,
       count: totalRecords,
       rowsPerPage,
-      classes,
+      classes: classes2,
       labelRowsPerPage: labelRows,
       page: currentPage,
       onPageChange: handleChangePage,
@@ -250,7 +253,112 @@ function Pager(props) {
 function getPagerComponentsDictionary() {
   return ["pager"];
 }
+const PagerNode = (props) => {
+  const { style = {}, className = "" } = props;
+  const { mainColor, countPages, pageId } = useBase();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(classes.pagerNodeRoot, className),
+      style: {
+        ...style,
+        color: mainColor
+      },
+      children: ` ${pageId} / ${countPages}`
+    }
+  );
+};
+const PageNode = (props) => {
+  const {
+    children,
+    style = {},
+    className = "",
+    width = "auto",
+    height = "auto",
+    paddingTop = "unset",
+    paddingRight = "unset",
+    paddingBottom = "unset",
+    paddingLeft = "unset",
+    gap = "unset"
+  } = props;
+  const { unitSize } = useBase();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(classes.pageNodeRoot, className),
+      style: {
+        width: getSize(width, unitSize),
+        gap: getSize(gap, unitSize),
+        height: getSize(height, unitSize),
+        minWidth: getSize(width, unitSize),
+        minHeight: typeof height === "number" ? `${height}${unitSize}` : height,
+        paddingTop: typeof paddingTop === "number" ? `${paddingTop}${unitSize}` : paddingTop,
+        paddingRight: typeof paddingRight === "number" ? `${paddingRight}${unitSize}` : paddingRight,
+        paddingBottom: typeof paddingBottom === "number" ? `${paddingBottom}${unitSize}` : paddingBottom,
+        paddingLeft: typeof paddingLeft === "number" ? `${paddingLeft}${unitSize}` : paddingLeft,
+        ...style
+      },
+      children
+    }
+  );
+};
+const PageRender = (props) => {
+  const {
+    data: parent,
+    id,
+    unitSize,
+    mainColor,
+    countPages,
+    HeaderGeneral,
+    FooterGeneral,
+    sourceData,
+    templateData
+  } = props;
+  const { children, ...otherProps } = parent || {};
+  return /* @__PURE__ */ jsx(
+    BaseProvider,
+    {
+      value: {
+        pageId: id,
+        unitSize,
+        mainColor,
+        countPages,
+        HeaderGeneral,
+        FooterGeneral,
+        templateData,
+        sourceData
+      },
+      children: /* @__PURE__ */ jsxs(PageNode, { ...otherProps, children: [
+        Array.isArray(children) && children.length > 0 ? children.map((subComponent, id2) => {
+          return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+            id2 === 0 && parent.type === "page" && children[0].type !== "header" ? HeaderGeneral ? /* @__PURE__ */ jsx(HeaderGeneral, { ancestor: parent }, `${parent.key}-header`) : null : null,
+            /* @__PURE__ */ jsx(FactoryRender, { data: subComponent }, `${parent.type}-${subComponent.key}`),
+            id2 === children.length - 1 && parent.type === "page" && children[children.length - 1].type !== "footer" ? FooterGeneral ? /* @__PURE__ */ jsx(FooterGeneral, { ancestor: parent }, `${parent.key}-footer`) : null : null
+          ] }, `fragment-page-${id2}`);
+        }) : null,
+        typeof children === "string" ? children : null
+      ] })
+    }
+  );
+};
+const HelmetPage = (props) => {
+  const { children, title, meta, subtitle } = props;
+  const localeString = useLocales().currentLocale?.localeString;
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isSkeleton && /* @__PURE__ */ jsxs(Helmet, { children: [
+      /* @__PURE__ */ jsx("title", { children: `${title}${subtitle ? ` | ${subtitle}` : ""} ` }),
+      /* @__PURE__ */ jsx("html", { lang: localeString }),
+      meta
+    ] }),
+    children
+  ] });
+};
+HelmetPage.displayName = "Page";
 export {
-  Pager as P,
+  HelmetPage as H,
+  PagerNode as P,
+  PageRender as a,
+  Pager as b,
   getPagerComponentsDictionary as g
 };

package/components/PaperForm/{index.9f6fd02d.js → index.8121e3da.js}

@@ -1,8 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { styled, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import { useModuleSkeleton } from "@m4l/core";
-import { I as Icon } from "../Icon/index.ee7b85c9.js";
+import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { I as Icon } from "../Icon/index.d5fed418.js";
 import { unstable_composeClasses } from "@mui/base";
+import { V as componentName } from "../areas/constants.5387d83e.js";
 const PaperFormRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LPaperForm?.styleOverrides
 }));
@@ -10,7 +12,7 @@ const HeaderContainer = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
-  borderBottom: `1px solid ${theme.palette.divider}`,
+  borderBottom: `1px solid ${theme.vars.palette.divider}`,
   paddingBottom: theme.spacing(3),
   marginBottom: theme.spacing(2),
   overflow: "hidden"
@@ -20,8 +22,8 @@ const IconTitleContainer = styled("div")(({ theme }) => ({
   flexDirection: "row",
   flexGrow: 1,
   alignItems: "center",
-  color: theme.palette.text.primary,
-  ...theme.typography.subtitle1
+  color: theme.vars.palette.text.primary,
+  ...theme.colorSchemes.finalTheme.typography.subtitle1
 }));
 const IconHeader = styled("div")(({ theme }) => ({
   display: "flex",
@@ -39,7 +41,7 @@ const SkTPaperFormHeader = styled("div")(({ theme }) => ({
   gridTemplateColumns: `${theme.spacing(2)} auto`,
   gridGap: `${theme.spacing(1.5)}`,
   paddingBottom: `${theme.spacing(3)}`,
-  borderBottom: `1px solid ${theme.palette.divider}`,
+  borderBottom: `1px solid ${theme.vars.palette.divider}`,
   marginBottom: `${theme.spacing(3)}`
 }));
 const Header = (props) => {
@@ -53,7 +55,6 @@ const Header = (props) => {
     /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 68, height: 14 })
   ] }) });
 };
-const componentName = "M4LPaperForm";
 generateUtilityClasses(componentName, [
   "root",
   "headerContainer",

package/components/PaperForm/styles.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-export declare const PaperFormRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const HeaderContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconTitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Content: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SkTPaperFormHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PaperFormRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HeaderContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconTitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SkTPaperFormHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Period/{index.c6d1a95a.js → index.5233694b.js}

@@ -1,20 +1,34 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { styled } from "@mui/material/styles";
+import { useFormContext, Controller } from "react-hook-form";
+import { H as HelperText } from "../HelperText/index.be949cdf.js";
+import { generateUtilityClasses, generateUtilityClass, Skeleton, Autocomplete, TextField } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { W as componentName, X as PERIOD_PREFIX, T as TEST_PROP_ID, Y as componentName$1 } from "../areas/constants.5387d83e.js";
 import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
-import { styled, generateUtilityClasses, generateUtilityClass, Skeleton, Autocomplete, TextField } from "@mui/material";
+import { T as Typography, u as useFormFocus } from "../../vendor.a1ce6777.js";
+import { F as FieldLabel } from "../FieldLabel/index.f9cdcc27.js";
 import { useState, useMemo } from "react";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.273645af.js";
-import { unstable_composeClasses } from "@mui/base";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { d as dictionary, a as dictionary$1 } from "../areas/dictionary.7e74022a.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { T as Typography } from "../mui_extended/Typography/index.a1e774a2.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.b0ee4965.js";
+import { a as IconButton } from "../Icon/index.d5fed418.js";
+import { W as WrapperComponent } from "../WrapperComponent/index.57964195.js";
+const RHFPeriodRoot = styled("div")(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing(1),
+  ...theme.components?.M4LRHFPeriod?.styleOverrides
+}));
 const ContainerPeriod = styled("div")(({ theme }) => ({
   ...theme.components?.M4LPeriod?.styleOverrides
 }));
 styled("div")(({ theme }) => ({
   width: "1px",
   height: "20px",
-  backgroundColor: theme.palette.divider
+  backgroundColor: theme.vars.palette.divider
 }));
 styled("div", {
   shouldForwardProp: (props) => props !== "readOnly"
@@ -24,7 +38,7 @@ styled("div", {
   height: "37.5px",
   alignItems: "center",
   gap: theme.spacing(1),
-  border: `1px solid ${theme.palette.divider}`,
+  border: `1px solid ${theme.vars.palette.divider}`,
   ...readOnly && {
     border: "0px"
   },
@@ -32,7 +46,7 @@ styled("div", {
   borderRadius: "4px"
 }));
 styled("div")(({ theme }) => ({
-  ...theme.typography.body2,
+  ...theme.colorSchemes.finalTheme.typography.body2,
   width: "100%",
   display: "flex",
   textOverflow: "elipsis",
@@ -41,7 +55,7 @@ styled("div")(({ theme }) => ({
   textAlign: "left"
 }));
 styled("div")(({ theme }) => ({
-  ...theme.typography.body2,
+  ...theme.colorSchemes.finalTheme.typography.body2,
   width: "70px",
   display: "flex",
   textOverflow: "elipsis",
@@ -55,15 +69,6 @@ var ETimePeriods = /* @__PURE__ */ ((ETimePeriods2) => {
   ETimePeriods2[ETimePeriods2["DAYS"] = 2] = "DAYS";
   return ETimePeriods2;
 })(ETimePeriods || {});
-const dictionary = {
-  LABEL_YEARS: "period.label_years",
-  LABEL_MONTHS: "period.label_months",
-  LABEL_DAYS: "period.label_days"
-};
-function getPeriodComponetsDictionary() {
-  return ["period"].concat(getCommonActionsDictionary());
-}
-const componentName = "M4LPeriod";
 generateUtilityClasses(componentName, [
   "root",
   "containerDateLabel",
@@ -109,7 +114,6 @@ const periodUtilityClasses = (ownerState) => {
     ...composedClasses
   };
 };
-const PERIOD_PREFIX = "M4LPeriod";
 const getNamePeriodDataTestId = (KEY) => {
   return `${PERIOD_PREFIX}-${KEY}`;
 };
@@ -283,7 +287,138 @@ const Period = (props) => {
     }
   );
 };
+generateUtilityClasses(componentName$1, [
+  "root",
+  "isFocus",
+  "isTabSelected"
+]);
+function getRHFPeriodUtilityClass(slot) {
+  return generateUtilityClass(componentName$1, slot);
+}
+const RHFPeriodUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.isFocus && "isFocus", ownerState.isTabSelected && "isTabSelected"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFPeriodUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFPeriod = (props) => {
+  const {
+    name,
+    readOnly,
+    skeletonWidth,
+    skeletonHeight,
+    state,
+    label,
+    mandatory,
+    mandatoryMessage,
+    helperMessage,
+    size
+  } = props;
+  const { control } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
+  const ownerState = {
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false
+  };
+  const classes = RHFPeriodUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(
+    RHFPeriodRoot,
+    {
+      className: classes.root,
+      tabIndex: 0,
+      onFocus: handlerFocus,
+      onBlur: handlerOnBlur,
+      onKeyUp: handlerOnKeyUp,
+      children: /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name,
+          control,
+          render: ({ field: { onChange, value }, fieldState: { error } }) => {
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              label && /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  label,
+                  mandatory,
+                  mandatoryMessage,
+                  helperMessage
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Period,
+                {
+                  value,
+                  onChange,
+                  state: !!error === true ? "error" : state,
+                  readOnly,
+                  skeletonWidth,
+                  skeletonHeight,
+                  size
+                }
+              ),
+              error && /* @__PURE__ */ jsx(HelperText, { variant: "error", message: error.message || "" })
+            ] });
+          }
+        }
+      )
+    }
+  );
+};
+function getFormatPeriod(years, months, days) {
+  const { getLabel } = useModuleDictionary();
+  let period = "";
+  const separator = ", ";
+  switch (years) {
+    case 0:
+      break;
+    case 1:
+      period = "1 " + getLabel(dictionary$1.LABEL_YEAR);
+      break;
+    default:
+      period = years.toString() + " " + getLabel(dictionary$1.LABEL_YEARS);
+  }
+  switch (months) {
+    case 0:
+      break;
+    case 1:
+      if (years > 0)
+        period += separator;
+      period += "1 " + getLabel(dictionary$1.LABEL_MONTH);
+      break;
+    default:
+      if (years > 0)
+        period += separator;
+      period += months.toString() + " " + getLabel(dictionary$1.LABEL_MONTHS);
+  }
+  switch (days) {
+    case 0:
+      break;
+    case 1:
+      if (years > 0 || months > 0)
+        period += separator;
+      period += "1 " + getLabel(dictionary$1.LABEL_DAY);
+      break;
+    default:
+      if (years > 0 || months > 0)
+        period += separator;
+      period += days.toString() + " " + getLabel(dictionary$1.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: getFormatPeriod(years, months, days) });
+}
 export {
-  Period as P,
-  getPeriodComponetsDictionary as g
+  PeriodFormatter as P,
+  RHFPeriod as R,
+  Period as a,
+  getFormatPeriod as g
 };